From 1cd06450a59ccda0961cab6970bcb0da698f74ec Mon Sep 17 00:00:00 2001 From: Minh Cung Date: Wed, 8 May 2024 13:20:01 +1000 Subject: [PATCH] Run tailwind in watch mode (#50) --- .prettierignore | 4 +- packages/ui/package.json | 5 +- packages/ui/src/styles/tailwind.css | 1234 ++++++++++++++------------- pnpm-lock.yaml | 46 + 4 files changed, 680 insertions(+), 609 deletions(-) diff --git a/.prettierignore b/.prettierignore index 9038fcf..87a81cc 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,4 +2,6 @@ pnpm-lock.yaml storybook-static .drawio **/.next/ -**/dist/ \ No newline at end of file +**/dist/ + +tailwind.css \ No newline at end of file diff --git a/packages/ui/package.json b/packages/ui/package.json index 7e3e997..4c30272 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -5,9 +5,9 @@ "scripts": { "lint": "eslint . --max-warnings 0", "generate:component": "turbo gen react-component", - "dev": "pnpm run tailwind && storybook dev -p 6006", + "dev": "concurrently \"pnpm run tailwind\" \"storybook dev -p 6006\"", "build-storybook": "storybook build", - "tailwind": "tailwindcss -i ./src/styles/global.css -o ./src/styles/tailwind.css" + "tailwind": "tailwindcss -i ./src/styles/global.css -o ./src/styles/tailwind.css --watch" }, "devDependencies": { "@chromatic-com/storybook": "1.3.4", @@ -27,6 +27,7 @@ "@types/node": "20.12.07", "@types/react": "18.3.1", "@types/react-dom": "18.3.0", + "concurrently": "8.2.2", "eslint": "8.57.0", "eslint-plugin-storybook": "0.8.0", "react": "18.3.1", diff --git a/packages/ui/src/styles/tailwind.css b/packages/ui/src/styles/tailwind.css index db9f982..1e1a794 100644 --- a/packages/ui/src/styles/tailwind.css +++ b/packages/ui/src/styles/tailwind.css @@ -10,19 +10,19 @@ *, ::before, ::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ } ::before, ::after { - --tw-content: ''; + --tw-content: ''; } /* @@ -37,24 +37,23 @@ html, :host { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ } /* @@ -63,10 +62,10 @@ html, */ body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ } /* @@ -76,12 +75,12 @@ body { */ hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ } /* @@ -89,8 +88,8 @@ Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; } /* @@ -103,8 +102,8 @@ h3, h4, h5, h6 { - font-size: inherit; - font-weight: inherit; + font-size: inherit; + font-weight: inherit; } /* @@ -112,8 +111,8 @@ Reset links to optimize for opt-in styling instead of opt-out. */ a { - color: inherit; - text-decoration: inherit; + color: inherit; + text-decoration: inherit; } /* @@ -122,7 +121,7 @@ Add the correct font weight in Edge and Safari. b, strong { - font-weight: bolder; + font-weight: bolder; } /* @@ -136,14 +135,14 @@ code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; - /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ - font-size: 1em; - /* 4 */ + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ } /* @@ -151,7 +150,7 @@ Add the correct font size in all browsers. */ small { - font-size: 80%; + font-size: 80%; } /* @@ -160,18 +159,18 @@ Prevent `sub` and `sup` elements from affecting the line height in all browsers. sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -0.25em; + bottom: -0.25em; } sup { - top: -0.5em; + top: -0.5em; } /* @@ -181,12 +180,12 @@ sup { */ table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ } /* @@ -200,26 +199,26 @@ input, optgroup, select, textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - letter-spacing: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + letter-spacing: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ } /* @@ -228,7 +227,7 @@ Remove the inheritance of text transform in Edge and Firefox. button, select { - text-transform: none; + text-transform: none; } /* @@ -240,12 +239,12 @@ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ } /* @@ -253,7 +252,7 @@ Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { - outline: auto; + outline: auto; } /* @@ -261,7 +260,7 @@ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/ */ :-moz-ui-invalid { - box-shadow: none; + box-shadow: none; } /* @@ -269,7 +268,7 @@ Add the correct vertical alignment in Chrome and Firefox. */ progress { - vertical-align: baseline; + vertical-align: baseline; } /* @@ -278,7 +277,7 @@ Correct the cursor style of increment and decrement buttons in Safari. ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { - height: auto; + height: auto; } /* @@ -287,10 +286,10 @@ Correct the cursor style of increment and decrement buttons in Safari. */ [type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } /* @@ -298,7 +297,7 @@ Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /* @@ -307,10 +306,10 @@ Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } /* @@ -318,7 +317,7 @@ Add the correct display in Chrome and Safari. */ summary { - display: list-item; + display: list-item; } /* @@ -338,24 +337,24 @@ hr, figure, p, pre { - margin: 0; + margin: 0; } fieldset { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } legend { - padding: 0; + padding: 0; } ol, ul, menu { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } /* @@ -363,7 +362,7 @@ Reset default styling for dialogs. */ dialog { - padding: 0; + padding: 0; } /* @@ -371,7 +370,7 @@ Prevent resizing textareas horizontally by default. */ textarea { - resize: vertical; + resize: vertical; } /* @@ -379,20 +378,19 @@ textarea { 2. Set the default placeholder color to the user's configured gray 400 color. */ -input::-moz-placeholder, -textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ } input::placeholder, textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ } /* @@ -400,8 +398,8 @@ Set the default cursor for buttons. */ button, -[role='button'] { - cursor: pointer; +[role="button"] { + cursor: pointer; } /* @@ -409,7 +407,7 @@ Make sure disabled buttons don't get the pointer cursor. */ :disabled { - cursor: default; + cursor: default; } /* @@ -426,10 +424,10 @@ audio, iframe, embed, object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ } /* @@ -438,1046 +436,1070 @@ Constrain images and videos to the parent width and preserve their intrinsic asp img, video { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { - display: none; + display: none; } :root { - --font-sans: 'Monserrat'; - --background: 0 0% 100%; - --foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 142.1 76.2% 36.3%; - --primary-foreground: 355.7 100% 97.3%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 142.1 76.2% 36.3%; - --radius: 1rem; + --font-sans: 'Monserrat'; + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --card: 0 0% 100%; + --card-foreground: 240 10% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 240 10% 3.9%; + --primary: 142.1 76.2% 36.3%; + --primary-foreground: 355.7 100% 97.3%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 142.1 76.2% 36.3%; + --radius: 1rem; } * { - border-color: hsl(var(--border)); + border-color: hsl(var(--border)); } body { - background-color: hsl(var(--background)); - color: hsl(var(--foreground)); - font-feature-settings: - 'rlig' 1, - 'calt' 1; -} - -*, -::before, -::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; + background-color: hsl(var(--background)); + color: hsl(var(--foreground)); + font-feature-settings: + 'rlig' 1, + 'calt' 1; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } ::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; } .pointer-events-none { - pointer-events: none; + pointer-events: none; } .fixed { - position: fixed; + position: fixed; } .relative { - position: relative; + position: relative; } .inset-0 { - inset: 0px; + inset: 0px; } .left-\[50\%\] { - left: 50%; + left: 50%; } .top-\[50\%\] { - top: 50%; + top: 50%; } .z-50 { - z-index: 50; + z-index: 50; } .mb-1 { - margin-bottom: 0.25rem; + margin-bottom: 0.25rem; +} + +.mb-2 { + margin-bottom: 0.5rem; } .mt-2 { - margin-top: 0.5rem; + margin-top: 0.5rem; } .block { - display: block; + display: block; } .flex { - display: flex; + display: flex; } .inline-flex { - display: inline-flex; + display: inline-flex; } .grid { - display: grid; + display: grid; } .aspect-square { - aspect-ratio: 1 / 1; + aspect-ratio: 1 / 1; } .h-10 { - height: 2.5rem; + height: 2.5rem; } .h-11 { - height: 2.75rem; + height: 2.75rem; } .h-4 { - height: 1rem; + height: 1rem; } .h-5 { - height: 1.25rem; + height: 1.25rem; } .h-6 { - height: 1.5rem; + height: 1.5rem; } .h-9 { - height: 2.25rem; + height: 2.25rem; } .h-\[1px\] { - height: 1px; + height: 1px; } .h-full { - height: 100%; + height: 100%; } .w-10 { - width: 2.5rem; + width: 2.5rem; } .w-11 { - width: 2.75rem; + width: 2.75rem; } .w-4 { - width: 1rem; + width: 1rem; } .w-5 { - width: 1.25rem; + width: 1.25rem; } .w-64 { - width: 16rem; + width: 16rem; } .w-9 { - width: 2.25rem; + width: 2.25rem; } .w-\[1px\] { - width: 1px; + width: 1px; } .w-\[300px\] { - width: 300px; + width: 300px; +} + +.w-\[360px\] { + width: 360px; } .w-full { - width: 100%; + width: 100%; } .max-w-lg { - max-width: 32rem; + max-width: 32rem; } .shrink-0 { - flex-shrink: 0; + flex-shrink: 0; } .translate-x-\[-50\%\] { - --tw-translate-x: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) - skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[-50\%\] { - --tw-translate-y: -50%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) - skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes pulse { - 50% { - opacity: 0.5; - } + 50% { + opacity: .5; + } } .animate-pulse { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .cursor-pointer { - cursor: pointer; + cursor: pointer; } .flex-col { - flex-direction: column; + flex-direction: column; } .flex-col-reverse { - flex-direction: column-reverse; + flex-direction: column-reverse; } .flex-wrap { - flex-wrap: wrap; + flex-wrap: wrap; } .items-center { - align-items: center; + align-items: center; } .justify-center { - justify-content: center; + justify-content: center; } .gap-1 { - gap: 0.25rem; + gap: 0.25rem; } .gap-1\.5 { - gap: 0.375rem; + gap: 0.375rem; +} + +.gap-2 { + gap: 0.5rem; } .gap-4 { - gap: 1rem; + gap: 1rem; } .space-y-1 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); + --tw-space-y-reverse: 0; + margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .overflow-hidden { - overflow: hidden; + overflow: hidden; } .whitespace-nowrap { - white-space: nowrap; + white-space: nowrap; } .break-words { - overflow-wrap: break-word; + overflow-wrap: break-word; +} + +.rounded { + border-radius: 0.25rem; } .rounded-full { - border-radius: 9999px; + border-radius: 9999px; } .rounded-lg { - border-radius: var(--radius); + border-radius: var(--radius); } .rounded-md { - border-radius: calc(var(--radius) - 2px); + border-radius: calc(var(--radius) - 2px); } .rounded-sm { - border-radius: calc(var(--radius) - 4px); + border-radius: calc(var(--radius) - 4px); } .border { - border-width: 1px; + border-width: 1px; } .border-2 { - border-width: 2px; + border-width: 2px; } .border-destructive\/50 { - border-color: hsl(var(--destructive) / 0.5); + border-color: hsl(var(--destructive) / 0.5); } .border-input { - border-color: hsl(var(--input)); + border-color: hsl(var(--input)); } .border-transparent { - border-color: transparent; + border-color: transparent; } .bg-background { - background-color: hsl(var(--background)); + background-color: hsl(var(--background)); } .bg-black\/80 { - background-color: rgb(0 0 0 / 0.8); + background-color: rgb(0 0 0 / 0.8); } .bg-border { - background-color: hsl(var(--border)); + background-color: hsl(var(--border)); } .bg-card { - background-color: hsl(var(--card)); + background-color: hsl(var(--card)); } .bg-destructive { - background-color: hsl(var(--destructive)); + background-color: hsl(var(--destructive)); } .bg-muted { - background-color: hsl(var(--muted)); + background-color: hsl(var(--muted)); } .bg-popover { - background-color: hsl(var(--popover)); + background-color: hsl(var(--popover)); } .bg-primary { - background-color: hsl(var(--primary)); + background-color: hsl(var(--primary)); } .bg-secondary { - background-color: hsl(var(--secondary)); + background-color: hsl(var(--secondary)); } .object-cover { - -o-object-fit: cover; - object-fit: cover; + -o-object-fit: cover; + object-fit: cover; } .p-1 { - padding: 0.25rem; + padding: 0.25rem; } .p-4 { - padding: 1rem; + padding: 1rem; } .p-6 { - padding: 1.5rem; + padding: 1.5rem; } .px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-left: 0.5rem; + padding-right: 0.5rem; } .px-2\.5 { - padding-left: 0.625rem; - padding-right: 0.625rem; + padding-left: 0.625rem; + padding-right: 0.625rem; } .px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; + padding-left: 0.75rem; + padding-right: 0.75rem; } .px-4 { - padding-left: 1rem; - padding-right: 1rem; + padding-left: 1rem; + padding-right: 1rem; } .px-8 { - padding-left: 2rem; - padding-right: 2rem; + padding-left: 2rem; + padding-right: 2rem; } .py-0 { - padding-top: 0px; - padding-bottom: 0px; + padding-top: 0px; + padding-bottom: 0px; } .py-0\.5 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; + padding-top: 0.125rem; + padding-bottom: 0.125rem; } .py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; } .py-1\.5 { - padding-top: 0.375rem; - padding-bottom: 0.375rem; + padding-top: 0.375rem; + padding-bottom: 0.375rem; } .py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; } .pt-0 { - padding-top: 0px; + padding-top: 0px; } .text-center { - text-align: center; + text-align: center; } .text-2xl { - font-size: 1.5rem; - line-height: 2rem; + font-size: 1.5rem; + line-height: 2rem; +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; } .text-lg { - font-size: 1.125rem; - line-height: 1.75rem; + font-size: 1.125rem; + line-height: 1.75rem; } .text-sm { - font-size: 0.875rem; - line-height: 1.25rem; + font-size: 0.875rem; + line-height: 1.25rem; } .text-xs { - font-size: 0.75rem; - line-height: 1rem; + font-size: 0.75rem; + line-height: 1rem; +} + +.font-bold { + font-weight: 700; } .font-medium { - font-weight: 500; + font-weight: 500; } .font-normal { - font-weight: 400; + font-weight: 400; } .font-semibold { - font-weight: 600; + font-weight: 600; } .leading-none { - line-height: 1; + line-height: 1; } .tracking-tight { - letter-spacing: -0.025em; + letter-spacing: -0.025em; } .text-card-foreground { - color: hsl(var(--card-foreground)); + color: hsl(var(--card-foreground)); } .text-destructive { - color: hsl(var(--destructive)); + color: hsl(var(--destructive)); } .text-destructive-foreground { - color: hsl(var(--destructive-foreground)); + color: hsl(var(--destructive-foreground)); } .text-foreground { - color: hsl(var(--foreground)); + color: hsl(var(--foreground)); } .text-muted-foreground { - color: hsl(var(--muted-foreground)); + color: hsl(var(--muted-foreground)); } .text-popover-foreground { - color: hsl(var(--popover-foreground)); + color: hsl(var(--popover-foreground)); } .text-primary { - color: hsl(var(--primary)); + color: hsl(var(--primary)); } .text-primary-foreground { - color: hsl(var(--primary-foreground)); + color: hsl(var(--primary-foreground)); } .text-secondary-foreground { - color: hsl(var(--secondary-foreground)); + color: hsl(var(--secondary-foreground)); } .underline-offset-4 { - text-underline-offset: 4px; + text-underline-offset: 4px; } .shadow-\[0_2px_10px\] { - --tw-shadow: 0 2px 10px; - --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow: 0 2px 10px; + --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline-none { - outline: 2px solid transparent; - outline-offset: 2px; + outline: 2px solid transparent; + outline-offset: 2px; } .outline { - outline-style: solid; + outline-style: solid; } .ring-0 { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-offset-background { - --tw-ring-offset-color: hsl(var(--background)); + --tw-ring-offset-color: hsl(var(--background)); } .transition-all { - transition-property: all; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } .transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } .transition-transform { - transition-property: transform; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } .duration-200 { - transition-duration: 200ms; + transition-duration: 200ms; } @keyframes enter { - from { - opacity: var(--tw-enter-opacity, 1); - transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) - scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) - rotate(var(--tw-enter-rotate, 0)); - } + from { + opacity: var(--tw-enter-opacity, 1); + transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); + } } @keyframes exit { - to { - opacity: var(--tw-exit-opacity, 1); - transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) - scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) - rotate(var(--tw-exit-rotate, 0)); - } + to { + opacity: var(--tw-exit-opacity, 1); + transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); + } } .duration-200 { - animation-duration: 200ms; + animation-duration: 200ms; } [type='text']:focus { - box-shadow: none; + box-shadow: none; } .file\:border-0::file-selector-button { - border-width: 0px; + border-width: 0px; } .file\:bg-transparent::file-selector-button { - background-color: transparent; + background-color: transparent; } .file\:text-sm::file-selector-button { - font-size: 0.875rem; - line-height: 1.25rem; + font-size: 0.875rem; + line-height: 1.25rem; } .file\:font-medium::file-selector-button { - font-weight: 500; + font-weight: 500; } .placeholder\:text-muted-foreground::-moz-placeholder { - color: hsl(var(--muted-foreground)); + color: hsl(var(--muted-foreground)); } .placeholder\:text-muted-foreground::placeholder { - color: hsl(var(--muted-foreground)); + color: hsl(var(--muted-foreground)); } .hover\:bg-accent:hover { - background-color: hsl(var(--accent)); + background-color: hsl(var(--accent)); } .hover\:bg-destructive\/80:hover { - background-color: hsl(var(--destructive) / 0.8); + background-color: hsl(var(--destructive) / 0.8); } .hover\:bg-destructive\/90:hover { - background-color: hsl(var(--destructive) / 0.9); + background-color: hsl(var(--destructive) / 0.9); } .hover\:bg-primary\/80:hover { - background-color: hsl(var(--primary) / 0.8); + background-color: hsl(var(--primary) / 0.8); } .hover\:bg-primary\/90:hover { - background-color: hsl(var(--primary) / 0.9); + background-color: hsl(var(--primary) / 0.9); } .hover\:bg-secondary\/80:hover { - background-color: hsl(var(--secondary) / 0.8); + background-color: hsl(var(--secondary) / 0.8); } .hover\:text-accent-foreground:hover { - color: hsl(var(--accent-foreground)); + color: hsl(var(--accent-foreground)); } .hover\:text-foreground:hover { - color: hsl(var(--foreground)); + color: hsl(var(--foreground)); } .hover\:underline:hover { - text-decoration-line: underline; + text-decoration-line: underline; } .focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; + outline: 2px solid transparent; + outline-offset: 2px; } .focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-ring:focus { - --tw-ring-color: hsl(var(--ring)); + --tw-ring-color: hsl(var(--ring)); } .focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px; + --tw-ring-offset-width: 2px; } .focus-visible\:outline-none:focus-visible { - outline: 2px solid transparent; - outline-offset: 2px; + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus-visible\:ring-0:focus-visible { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-2:focus-visible { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-ring:focus-visible { - --tw-ring-color: hsl(var(--ring)); + --tw-ring-color: hsl(var(--ring)); +} + +.focus-visible\:ring-offset-0:focus-visible { + --tw-ring-offset-width: 0px; } .focus-visible\:ring-offset-2:focus-visible { - --tw-ring-offset-width: 2px; + --tw-ring-offset-width: 2px; } .focus-visible\:ring-offset-background:focus-visible { - --tw-ring-offset-color: hsl(var(--background)); + --tw-ring-offset-color: hsl(var(--background)); } .disabled\:pointer-events-none:disabled { - pointer-events: none; + pointer-events: none; } .disabled\:cursor-not-allowed:disabled { - cursor: not-allowed; + cursor: not-allowed; } .disabled\:opacity-50:disabled { - opacity: 0.5; + opacity: 0.5; } .group.toaster .group-\[\.toaster\]\:border-border { - border-color: hsl(var(--border)); + border-color: hsl(var(--border)); } .group.toast .group-\[\.toast\]\:bg-muted { - background-color: hsl(var(--muted)); + background-color: hsl(var(--muted)); } .group.toast .group-\[\.toast\]\:bg-primary { - background-color: hsl(var(--primary)); + background-color: hsl(var(--primary)); } .group.toaster .group-\[\.toaster\]\:bg-background { - background-color: hsl(var(--background)); + background-color: hsl(var(--background)); } .group.toast .group-\[\.toast\]\:text-muted-foreground { - color: hsl(var(--muted-foreground)); + color: hsl(var(--muted-foreground)); } .group.toast .group-\[\.toast\]\:text-primary-foreground { - color: hsl(var(--primary-foreground)); + color: hsl(var(--primary-foreground)); } .group.toaster .group-\[\.toaster\]\:text-foreground { - color: hsl(var(--foreground)); + color: hsl(var(--foreground)); } .group.toaster .group-\[\.toaster\]\:shadow-lg { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:disabled ~ .peer-disabled\:cursor-not-allowed { - cursor: not-allowed; + cursor: not-allowed; } .peer:disabled ~ .peer-disabled\:opacity-70 { - opacity: 0.7; + opacity: 0.7; } -.data-\[state\=checked\]\:translate-x-5[data-state='checked'] { - --tw-translate-x: 1.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) - skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.data-\[state\=checked\]\:translate-x-5[data-state=checked] { + --tw-translate-x: 1.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.data-\[state\=unchecked\]\:translate-x-0[data-state='unchecked'] { - --tw-translate-x: 0px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) - skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] { + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.data-\[state\=active\]\:bg-background[data-state='active'] { - background-color: hsl(var(--background)); +.data-\[state\=active\]\:bg-background[data-state=active] { + background-color: hsl(var(--background)); } -.data-\[state\=checked\]\:bg-primary[data-state='checked'] { - background-color: hsl(var(--primary)); +.data-\[state\=checked\]\:bg-primary[data-state=checked] { + background-color: hsl(var(--primary)); } -.data-\[state\=unchecked\]\:bg-input[data-state='unchecked'] { - background-color: hsl(var(--input)); +.data-\[state\=unchecked\]\:bg-input[data-state=unchecked] { + background-color: hsl(var(--input)); } -.data-\[state\=active\]\:text-foreground[data-state='active'] { - color: hsl(var(--foreground)); +.data-\[state\=active\]\:text-foreground[data-state=active] { + color: hsl(var(--foreground)); } -.data-\[state\=active\]\:shadow-sm[data-state='active'] { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.data-\[state\=active\]\:shadow-sm[data-state=active] { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.data-\[state\=open\]\:animate-in[data-state='open'] { - animation-name: enter; - animation-duration: 150ms; - --tw-enter-opacity: initial; - --tw-enter-scale: initial; - --tw-enter-rotate: initial; - --tw-enter-translate-x: initial; - --tw-enter-translate-y: initial; +.data-\[state\=open\]\:animate-in[data-state=open] { + animation-name: enter; + animation-duration: 150ms; + --tw-enter-opacity: initial; + --tw-enter-scale: initial; + --tw-enter-rotate: initial; + --tw-enter-translate-x: initial; + --tw-enter-translate-y: initial; } -.data-\[state\=closed\]\:animate-out[data-state='closed'] { - animation-name: exit; - animation-duration: 150ms; - --tw-exit-opacity: initial; - --tw-exit-scale: initial; - --tw-exit-rotate: initial; - --tw-exit-translate-x: initial; - --tw-exit-translate-y: initial; +.data-\[state\=closed\]\:animate-out[data-state=closed] { + animation-name: exit; + animation-duration: 150ms; + --tw-exit-opacity: initial; + --tw-exit-scale: initial; + --tw-exit-rotate: initial; + --tw-exit-translate-x: initial; + --tw-exit-translate-y: initial; } -.data-\[state\=closed\]\:fade-out-0[data-state='closed'] { - --tw-exit-opacity: 0; +.data-\[state\=closed\]\:fade-out-0[data-state=closed] { + --tw-exit-opacity: 0; } -.data-\[state\=open\]\:fade-in-0[data-state='open'] { - --tw-enter-opacity: 0; +.data-\[state\=open\]\:fade-in-0[data-state=open] { + --tw-enter-opacity: 0; } -.data-\[state\=closed\]\:zoom-out-95[data-state='closed'] { - --tw-exit-scale: 0.95; +.data-\[state\=closed\]\:zoom-out-95[data-state=closed] { + --tw-exit-scale: .95; } -.data-\[state\=open\]\:zoom-in-95[data-state='open'] { - --tw-enter-scale: 0.95; +.data-\[state\=open\]\:zoom-in-95[data-state=open] { + --tw-enter-scale: .95; } -.data-\[side\=bottom\]\:slide-in-from-top-2[data-side='bottom'] { - --tw-enter-translate-y: -0.5rem; +.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] { + --tw-enter-translate-y: -0.5rem; } -.data-\[side\=left\]\:slide-in-from-right-2[data-side='left'] { - --tw-enter-translate-x: 0.5rem; +.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] { + --tw-enter-translate-x: 0.5rem; } -.data-\[side\=right\]\:slide-in-from-left-2[data-side='right'] { - --tw-enter-translate-x: -0.5rem; +.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] { + --tw-enter-translate-x: -0.5rem; } -.data-\[side\=top\]\:slide-in-from-bottom-2[data-side='top'] { - --tw-enter-translate-y: 0.5rem; +.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] { + --tw-enter-translate-y: 0.5rem; } -.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state='closed'] { - --tw-exit-translate-x: -50%; +.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] { + --tw-exit-translate-x: -50%; } -.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state='closed'] { - --tw-exit-translate-y: -48%; +.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] { + --tw-exit-translate-y: -48%; } -.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state='open'] { - --tw-enter-translate-x: -50%; +.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] { + --tw-enter-translate-x: -50%; } -.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state='open'] { - --tw-enter-translate-y: -48%; +.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] { + --tw-enter-translate-y: -48%; } .dark\:border-destructive:is(.dark *) { - border-color: hsl(var(--destructive)); + border-color: hsl(var(--destructive)); } @media (min-width: 640px) { - .sm\:mt-0 { - margin-top: 0px; - } + .sm\:mt-0 { + margin-top: 0px; + } - .sm\:flex-row { - flex-direction: row; - } + .sm\:flex-row { + flex-direction: row; + } - .sm\:justify-end { - justify-content: flex-end; - } + .sm\:justify-end { + justify-content: flex-end; + } - .sm\:gap-2 { - gap: 0.5rem; - } + .sm\:gap-2 { + gap: 0.5rem; + } - .sm\:gap-2\.5 { - gap: 0.625rem; - } + .sm\:gap-2\.5 { + gap: 0.625rem; + } - .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(0.5rem * var(--tw-space-x-reverse)); - margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); - } + .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); + } - .sm\:rounded-lg { - border-radius: var(--radius); - } + .sm\:rounded-lg { + border-radius: var(--radius); + } - .sm\:text-left { - text-align: left; - } + .sm\:text-left { + text-align: left; + } } -.\[\&\>svg\+div\]\:translate-y-\[-3px\] > svg + div { - --tw-translate-y: -3px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) - skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div { + --tw-translate-y: -3px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.\[\&\>svg\]\:absolute > svg { - position: absolute; +.\[\&\>svg\]\:absolute>svg { + position: absolute; } -.\[\&\>svg\]\:left-4 > svg { - left: 1rem; +.\[\&\>svg\]\:left-4>svg { + left: 1rem; } -.\[\&\>svg\]\:top-4 > svg { - top: 1rem; +.\[\&\>svg\]\:top-4>svg { + top: 1rem; } -.\[\&\>svg\]\:size-3\.5 > svg { - width: 0.875rem; - height: 0.875rem; +.\[\&\>svg\]\:size-3\.5>svg { + width: 0.875rem; + height: 0.875rem; } -.\[\&\>svg\]\:text-destructive > svg { - color: hsl(var(--destructive)); +.\[\&\>svg\]\:text-destructive>svg { + color: hsl(var(--destructive)); } -.\[\&\>svg\]\:text-foreground > svg { - color: hsl(var(--foreground)); +.\[\&\>svg\]\:text-foreground>svg { + color: hsl(var(--foreground)); } -.\[\&\>svg\~\*\]\:pl-7 > svg ~ * { - padding-left: 1.75rem; +.\[\&\>svg\~\*\]\:pl-7>svg~* { + padding-left: 1.75rem; } .\[\&_p\]\:leading-relaxed p { - line-height: 1.625; + line-height: 1.625; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6169b52..21b48f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -291,6 +291,9 @@ importers: '@types/react-dom': specifier: 18.3.0 version: 18.3.0 + concurrently: + specifier: 8.2.2 + version: 8.2.2 eslint: specifier: 8.57.0 version: 8.57.0 @@ -3798,6 +3801,11 @@ packages: concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} + concurrently@8.2.2: + resolution: {integrity: sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==} + engines: {node: ^14.13.0 || >=16.0.0} + hasBin: true + consola@3.2.3: resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==} engines: {node: ^14.18.0 || >=16.10.0} @@ -3903,6 +3911,10 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} + date-fns@2.30.0: + resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==} + engines: {node: '>=0.11'} + debug@2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} peerDependencies: @@ -6873,6 +6885,9 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} + shell-quote@1.8.1: + resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==} + shellac@0.8.0: resolution: {integrity: sha512-M3F2vzYIM7frKOs0+kgs/ITMlXhGpgtqs9HxDPciz3bckzAqqfd4LrBn+CCmSbICyJS+Jz5UDkmkR1jE+m+g+Q==} @@ -6948,6 +6963,9 @@ packages: space-separated-tokens@2.0.2: resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} + spawn-command@0.0.2: + resolution: {integrity: sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==} + spdx-correct@3.2.0: resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==} @@ -7100,6 +7118,10 @@ packages: resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} engines: {node: '>=8'} + supports-color@8.1.1: + resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==} + engines: {node: '>=10'} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} @@ -11662,6 +11684,18 @@ snapshots: concat-map@0.0.1: {} + concurrently@8.2.2: + dependencies: + chalk: 4.1.2 + date-fns: 2.30.0 + lodash: 4.17.21 + rxjs: 7.8.1 + shell-quote: 1.8.1 + spawn-command: 0.0.2 + supports-color: 8.1.1 + tree-kill: 1.2.2 + yargs: 17.7.2 + consola@3.2.3: {} console-control-strings@1.1.0: {} @@ -11748,6 +11782,10 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 + date-fns@2.30.0: + dependencies: + '@babel/runtime': 7.24.5 + debug@2.6.9: dependencies: ms: 2.0.0 @@ -15032,6 +15070,8 @@ snapshots: shebang-regex@3.0.0: {} + shell-quote@1.8.1: {} + shellac@0.8.0: dependencies: reghex: 1.0.2 @@ -15105,6 +15145,8 @@ snapshots: space-separated-tokens@2.0.2: {} + spawn-command@0.0.2: {} + spdx-correct@3.2.0: dependencies: spdx-expression-parse: 3.0.1 @@ -15273,6 +15315,10 @@ snapshots: dependencies: has-flag: 4.0.0 + supports-color@8.1.1: + dependencies: + has-flag: 4.0.0 + supports-preserve-symlinks-flag@1.0.0: {} swap-case@1.1.2: