@signozhq/drawer 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/drawer.d.ts +7 -2
  2. package/dist/drawer.js +37 -26
  3. package/package.json +5 -5
package/dist/drawer.d.ts CHANGED
@@ -16,7 +16,8 @@ declare function DrawerFooter({ className, ...props }: React.ComponentProps<'div
16
16
  declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
17
17
  declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime.JSX.Element;
18
18
  interface DrawerWrapperProps {
19
- trigger: React.ReactNode;
19
+ /** Element that opens the drawer. Optional when using controlled mode (open/onOpenChange). */
20
+ trigger?: React.ReactNode;
20
21
  header?: {
21
22
  title: string;
22
23
  description?: string;
@@ -29,7 +30,11 @@ interface DrawerWrapperProps {
29
30
  showOverlay?: boolean;
30
31
  className?: string;
31
32
  type?: 'panel' | 'drawer';
33
+ /** Controlled open state. When provided with onOpenChange, enables programmatic control. */
34
+ open?: boolean;
35
+ /** Called when drawer open state changes (close button, outside click, ESC). Required for controlled mode. */
36
+ onOpenChange?: (open: boolean) => void;
32
37
  }
33
- declare function DrawerWrapper({ trigger, header, content, footer, direction, showCloseButton, allowOutsideClick, showOverlay, className, type, }: DrawerWrapperProps): react_jsx_runtime.JSX.Element;
38
+ declare function DrawerWrapper({ trigger, header, content, footer, direction, showCloseButton, allowOutsideClick, showOverlay, className, type, open, onOpenChange, }: DrawerWrapperProps): react_jsx_runtime.JSX.Element;
34
39
 
35
40
  export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DrawerWrapper };
package/dist/drawer.js CHANGED
@@ -59,7 +59,7 @@ function styleInject(css, { insertAt } = {}) {
59
59
  }
60
60
 
61
61
  // src/index.css
62
- styleInject('/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans: var(--font-sans);\n --font-serif: var(--font-serif);\n --font-mono: var(--font-mono);\n --color-slate-500: var(--bg-slate-500);\n --color-black: #000;\n --spacing: 0.25rem;\n --container-3xl: 48rem;\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --font-weight-normal: 400;\n --font-weight-semibold: 600;\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-border: var(--border);\n --color-ring: var(--ring);\n --color-vanilla-300: var(--bg-vanilla-300);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n .fixed {\n position: fixed;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .z-50 {\n z-index: 50;\n }\n .m-4 {\n margin: calc(var(--spacing) * 4);\n }\n .mx-auto {\n margin-inline: auto;\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-auto {\n margin-top: auto;\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .flex {\n display: flex;\n }\n .hidden {\n display: none;\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-fit {\n height: fit-content;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-\\[100px\\] {\n width: 100px;\n }\n .w-full {\n width: 100%;\n }\n .max-w-3xl {\n max-width: var(--container-3xl);\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-col {\n flex-direction: column;\n }\n .items-center {\n align-items: center;\n }\n .justify-between {\n justify-content: space-between;\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-none {\n border-radius: 0;\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-vanilla-300 {\n border-color: var(--color-vanilla-300);\n }\n .bg-black\\/50 {\n background-color: color-mix(in srgb, #000 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n }\n }\n .bg-card {\n background-color: var(--color-card);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-foreground {\n color: var(--color-foreground);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .opacity-70 {\n opacity: 70%;\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring-offset-background {\n --tw-ring-offset-color: var(--color-background);\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .group-data-\\[vaul-drawer-direction\\=bottom\\]\\/drawer-content\\:block {\n &:is(:where(.group\\/drawer-content)[data-vaul-drawer-direction=bottom] *) {\n display: block;\n }\n }\n .hover\\:opacity-100 {\n &:hover {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n .focus\\:ring-ring {\n &:focus {\n --tw-ring-color: var(--color-ring);\n }\n }\n .focus\\:ring-offset-2 {\n &:focus {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .disabled\\:pointer-events-none {\n &:disabled {\n pointer-events: none;\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:inset-x-0 {\n &[data-vaul-drawer-direction=bottom] {\n inset-inline: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:bottom-0 {\n &[data-vaul-drawer-direction=bottom] {\n bottom: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:mt-24 {\n &[data-vaul-drawer-direction=bottom] {\n margin-top: calc(var(--spacing) * 24);\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:max-h-\\[80vh\\] {\n &[data-vaul-drawer-direction=bottom] {\n max-height: 80vh;\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:rounded-t-lg {\n &[data-vaul-drawer-direction=bottom] {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:border-t {\n &[data-vaul-drawer-direction=bottom] {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n }\n .data-\\[vaul-drawer-direction\\=left\\]\\:inset-y-0 {\n &[data-vaul-drawer-direction=left] {\n inset-block: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=left\\]\\:left-0 {\n &[data-vaul-drawer-direction=left] {\n left: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=left\\]\\:border-r {\n &[data-vaul-drawer-direction=left] {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n }\n .data-\\[vaul-drawer-direction\\=right\\]\\:inset-y-0 {\n &[data-vaul-drawer-direction=right] {\n inset-block: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=right\\]\\:right-0 {\n &[data-vaul-drawer-direction=right] {\n right: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=right\\]\\:border-l {\n &[data-vaul-drawer-direction=right] {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:inset-x-0 {\n &[data-vaul-drawer-direction=top] {\n inset-inline: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:top-0 {\n &[data-vaul-drawer-direction=top] {\n top: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:mb-24 {\n &[data-vaul-drawer-direction=top] {\n margin-bottom: calc(var(--spacing) * 24);\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:max-h-\\[80vh\\] {\n &[data-vaul-drawer-direction=top] {\n max-height: 80vh;\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:rounded-b-lg {\n &[data-vaul-drawer-direction=top] {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:border-b {\n &[data-vaul-drawer-direction=top] {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n }\n .dark\\:border-slate-500 {\n &:is(.dark *) {\n border-color: var(--color-slate-500);\n }\n }\n}\n:root {\n --bg-robin-50: #edf1fe;\n --bg-robin-100: #dce3fe;\n --bg-robin-150: #cad5fd;\n --bg-robin-200: #b8c7fc;\n --bg-robin-300: #95acfb;\n --bg-robin-400: #7190f9;\n --bg-robin-500: #4e74f8;\n --bg-robin-600: #3f5ecc;\n --bg-robin-700: #2f48a0;\n --bg-robin-800: #203375;\n --bg-robin-850: #18285f;\n --bg-robin-900: #101d49;\n --bg-robin-950: #091233;\n --bg-sienna-50: #f7f2ee;\n --bg-sienna-100: #efe5de;\n --bg-sienna-150: #e6d9cd;\n --bg-sienna-200: #deccbc;\n --bg-sienna-300: #ceb29b;\n --bg-sienna-400: #bd9979;\n --bg-sienna-500: #ad7f58;\n --bg-sienna-600: #8a6646;\n --bg-sienna-700: #684c35;\n --bg-sienna-800: #453323;\n --bg-sienna-850: #34261a;\n --bg-sienna-900: #231912;\n --bg-sienna-950: #110d09;\n --bg-cherry-50: #fceded;\n --bg-cherry-100: #fadadb;\n --bg-cherry-150: #f7c8ca;\n --bg-cherry-200: #f5b6b8;\n --bg-cherry-300: #ef9194;\n --bg-cherry-400: #ea6d71;\n --bg-cherry-500: #e5484d;\n --bg-cherry-600: #b83a3e;\n --bg-cherry-700: #8b2c2f;\n --bg-cherry-800: #5f1d1f;\n --bg-cherry-850: #481618;\n --bg-cherry-900: #320f10;\n --bg-cherry-950: #1b0809;\n --bg-aqua-50: #e9f9fe;\n --bg-aqua-100: #d3f3fe;\n --bg-aqua-150: #bdedfd;\n --bg-aqua-200: #a7e7fc;\n --bg-aqua-300: #7bdcfb;\n --bg-aqua-400: #4fd0f9;\n --bg-aqua-500: #23c4f8;\n --bg-aqua-600: #1c9dc6;\n --bg-aqua-700: #157695;\n --bg-aqua-800: #0e4e63;\n --bg-aqua-850: #0b3b4a;\n --bg-aqua-900: #072732;\n --bg-aqua-950: #041419;\n --bg-sakura-50: #feedf0;\n --bg-sakura-100: #fcdae1;\n --bg-sakura-150: #fbc8d2;\n --bg-sakura-200: #fab5c3;\n --bg-sakura-300: #f791a5;\n --bg-sakura-400: #f56c87;\n --bg-sakura-500: #f24769;\n --bg-sakura-600: #c53955;\n --bg-sakura-700: #982b41;\n --bg-sakura-800: #6a1d2c;\n --bg-sakura-850: #541622;\n --bg-sakura-900: #3d0f18;\n --bg-sakura-950: #27080e;\n --bg-amber-50: #fffaee;\n --bg-amber-100: #fff5dd;\n --bg-amber-150: #fff0cc;\n --bg-amber-200: #ffebbb;\n --bg-amber-300: #ffe19a;\n --bg-amber-400: #ffd778;\n --bg-amber-500: #ffcd56;\n --bg-amber-600: #d5aa45;\n --bg-amber-700: #ab8834;\n --bg-amber-800: #816522;\n --bg-amber-850: #6c541a;\n --bg-amber-900: #574311;\n --bg-amber-950: #423109;\n --bg-amber-1000: #2d2000;\n --bg-ink-100: #2a2e37;\n --bg-ink-200: #23262e;\n --bg-ink-300: #16181d;\n --bg-ink-400: #121317;\n --bg-ink-500: #0b0c0e;\n --bg-vanilla-100: #fff;\n --bg-vanilla-200: #f5f5f5;\n --bg-vanilla-300: #e9e9e9;\n --bg-vanilla-400: #c0c1c3;\n --bg-slate-50: #62687c;\n --bg-slate-100: #3c4152;\n --bg-slate-200: #2c3140;\n --bg-slate-300: #242834;\n --bg-slate-400: #1d212d;\n --bg-slate-500: #161922;\n --bg-gradient-coral:\n linear-gradient(\n 114deg,#ed6d68 14.99%,#fca083 77.27%);\n --bg-gradient-dark-shadow:\n linear-gradient(\n 139deg,rgba(18,19,23,.8),rgba(18,19,23,.9) 98.68%);\n --bg-gradient-dawn:\n linear-gradient(\n 99deg,#7a97fa 4.42%,#f977ff 96.6%);\n --bg-gradient-ocean:\n linear-gradient(\n 99deg,#48f8cf 4.42%,#28cbf3 96.6%);\n --bg-gradient-splash:\n linear-gradient(\n 99deg,#4568dc 4.42%,#324daa 96.6%);\n --bg-gradient-flamingo:\n linear-gradient(\n 92deg,#ca9cd0 1.36%,#d38972 68.48%,#a1b1e7 98.99%);\n --bg-forest-50: #e9fcf4;\n --bg-forest-100: #d3f9e9;\n --bg-forest-150: #bef6de;\n --bg-forest-200: #a8f3d3;\n --bg-forest-300: #7cedbe;\n --bg-forest-400: #51e7a8;\n --bg-forest-500: #25e192;\n --bg-forest-600: #1eb475;\n --bg-forest-700: #168758;\n --bg-forest-800: #0f5a3a;\n --bg-forest-850: #0b442c;\n --bg-forest-900: #072d1d;\n --bg-forest-950: #04170f;\n --text-robin-50: #edf1fe;\n --text-robin-100: #dce3fe;\n --text-robin-150: #cad5fd;\n --text-robin-200: #b8c7fc;\n --text-robin-300: #95acfb;\n --text-robin-400: #7190f9;\n --text-robin-500: #4e74f8;\n --text-robin-600: #3f5ecc;\n --text-robin-700: #2f48a0;\n --text-robin-800: #203375;\n --text-robin-850: #18285f;\n --text-robin-900: #101d49;\n --text-robin-950: #091233;\n --text-sienna-50: #f7f2ee;\n --text-sienna-100: #efe5de;\n --text-sienna-150: #e6d9cd;\n --text-sienna-200: #deccbc;\n --text-sienna-300: #ceb29b;\n --text-sienna-400: #bd9979;\n --text-sienna-500: #ad7f58;\n --text-sienna-600: #8a6646;\n --text-sienna-700: #684c35;\n --text-sienna-800: #453323;\n --text-sienna-850: #34261a;\n --text-sienna-900: #231912;\n --text-sienna-950: #110d09;\n --text-cherry-50: #fceded;\n --text-cherry-100: #fadadb;\n --text-cherry-150: #f7c8ca;\n --text-cherry-200: #f5b6b8;\n --text-cherry-300: #ef9194;\n --text-cherry-400: #ea6d71;\n --text-cherry-500: #e5484d;\n --text-cherry-600: #b83a3e;\n --text-cherry-700: #8b2c2f;\n --text-cherry-800: #5f1d1f;\n --text-cherry-850: #481618;\n --text-cherry-900: #320f10;\n --text-cherry-950: #1b0809;\n --text-aqua-50: #e9f9fe;\n --text-aqua-100: #d3f3fe;\n --text-aqua-150: #bdedfd;\n --text-aqua-200: #a7e7fc;\n --text-aqua-300: #7bdcfb;\n --text-aqua-400: #4fd0f9;\n --text-aqua-500: #23c4f8;\n --text-aqua-600: #1c9dc6;\n --text-aqua-700: #157695;\n --text-aqua-800: #0e4e63;\n --text-aqua-850: #0b3b4a;\n --text-aqua-900: #072732;\n --text-aqua-950: #041419;\n --text-sakura-50: #feedf0;\n --text-sakura-100: #fcdae1;\n --text-sakura-150: #fbc8d2;\n --text-sakura-200: #fab5c3;\n --text-sakura-300: #f791a5;\n --text-sakura-400: #f56c87;\n --text-sakura-500: #f24769;\n --text-sakura-600: #c53955;\n --text-sakura-700: #982b41;\n --text-sakura-800: #6a1d2c;\n --text-sakura-850: #541622;\n --text-sakura-900: #3d0f18;\n --text-sakura-950: #27080e;\n --text-amber-50: #fffaee;\n --text-amber-100: #fff5dd;\n --text-amber-150: #fff0cc;\n --text-amber-200: #ffebbb;\n --text-amber-300: #ffe19a;\n --text-amber-400: #ffd778;\n --text-amber-500: #ffcd56;\n --text-amber-600: #d5aa45;\n --text-amber-700: #ab8834;\n --text-amber-800: #816522;\n --text-amber-850: #6c541a;\n --text-amber-900: #574311;\n --text-amber-950: #423109;\n --text-amber-1000: #2d2000;\n --text-ink-100: #2a2e37;\n --text-ink-200: #23262e;\n --text-ink-300: #16181d;\n --text-ink-400: #121317;\n --text-ink-500: #0b0c0e;\n --text-vanilla-100: #fff;\n --text-vanilla-200: #f5f5f5;\n --text-vanilla-300: #e9e9e9;\n --text-vanilla-400: #c0c1c3;\n --text-slate-50: #62687c;\n --text-slate-100: #3c4152;\n --text-slate-200: #2c3140;\n --text-slate-300: #242834;\n --text-slate-400: #1d212d;\n --text-slate-500: #161922;\n --text-gradient-coral:\n linear-gradient(\n 114deg,#ed6d68 14.99%,#fca083 77.27%);\n --text-gradient-dark-shadow:\n linear-gradient(\n 139deg,rgba(18,19,23,.8),rgba(18,19,23,.9) 98.68%);\n --text-gradient-dawn:\n linear-gradient(\n 99deg,#7a97fa 4.42%,#f977ff 96.6%);\n --text-gradient-ocean:\n linear-gradient(\n 99deg,#48f8cf 4.42%,#28cbf3 96.6%);\n --text-gradient-splash:\n linear-gradient(\n 99deg,#4568dc 4.42%,#324daa 96.6%);\n --text-gradient-flamingo:\n linear-gradient(\n 92deg,#ca9cd0 1.36%,#d38972 68.48%,#a1b1e7 98.99%);\n --text-forest-50: #e9fcf4;\n --text-forest-100: #d3f9e9;\n --text-forest-150: #bef6de;\n --text-forest-200: #a8f3d3;\n --text-forest-300: #7cedbe;\n --text-forest-400: #51e7a8;\n --text-forest-500: #25e192;\n --text-forest-600: #1eb475;\n --text-forest-700: #168758;\n --text-forest-800: #0f5a3a;\n --text-forest-850: #0b442c;\n --text-forest-900: #072d1d;\n --text-forest-950: #04170f;\n --padding-1: 0.25rem;\n --padding-2: 0.5rem;\n --padding-3: 0.75rem;\n --padding-4: 1rem;\n --padding-5: 1.25rem;\n --padding-6: 1.5rem;\n --padding-7: 1.75rem;\n --padding-8: 2rem;\n --padding-10: 2.5rem;\n --padding-12: 3rem;\n --padding-16: 4rem;\n --padding-20: 5rem;\n --padding-24: 6rem;\n --padding-32: 8rem;\n --padding-40: 10rem;\n --padding-48: 12rem;\n --padding-56: 14rem;\n --padding-64: 16rem;\n --margin-1: 0.25rem;\n --margin-2: 0.5rem;\n --margin-3: 0.75rem;\n --margin-4: 1rem;\n --margin-5: 1.25rem;\n --margin-6: 1.5rem;\n --margin-7: 1.75rem;\n --margin-8: 2rem;\n --margin-10: 2.5rem;\n --margin-12: 3rem;\n --margin-16: 4rem;\n --margin-20: 5rem;\n --margin-24: 6rem;\n --margin-32: 8rem;\n --margin-40: 10rem;\n --margin-48: 12rem;\n --margin-56: 14rem;\n --margin-64: 16rem;\n --font-size-xs: 0.75rem;\n --font-size-sm: 0.875rem;\n --font-size-lg: 1.125rem;\n --font-size-xl: 1.25rem;\n --font-size-2xl: 1.5rem;\n --font-size-3xl: 1.875rem;\n --font-size-4xl: 2.25rem;\n --font-size-5xl: 3rem;\n --font-size-6xl: 3.75rem;\n --font-size-7xl: 4.5rem;\n --font-size-8xl: 6rem;\n --font-size-9xl: 8rem;\n --font-weight-thin: 100;\n --font-weight-extralight: 200;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n --font-weight-black: 900;\n}\n:root {\n --background: var(--bg-vanilla-200);\n --foreground: var(--text-ink-400);\n --card: var(--bg-vanilla-100);\n --card-foreground: var(--text-ink-400);\n --popover: var(--bg-vanilla-100);\n --popover-foreground: var(--text-ink-400);\n --primary: var(--bg-robin-500);\n --primary-foreground: var(--text-vanilla-100);\n --secondary: var(--bg-vanilla-300);\n --secondary-foreground: var(--text-slate-400);\n --muted: var(--bg-vanilla-300);\n --muted-foreground: var(--text-slate-50);\n --accent: var(--bg-aqua-100);\n --accent-foreground: var(--text-slate-400);\n --destructive: var(--bg-cherry-500);\n --destructive-foreground: var(--text-vanilla-100);\n --border: var(--bg-slate-400);\n --input: var(--bg-slate-400);\n --ring: var(--bg-robin-500);\n --chart-1: var(--bg-robin-500);\n --chart-2: var(--bg-robin-600);\n --chart-3: var(--bg-slate-300);\n --chart-4: var(--bg-slate-400);\n --chart-5: var(--bg-slate-500);\n --radius: 0.25rem;\n --sidebar: var(--bg-vanilla-300);\n --sidebar-foreground: var(--text-ink-400);\n --sidebar-primary: var(--bg-robin-500);\n --sidebar-primary-foreground: var(--text-vanilla-100);\n --sidebar-accent: var(--bg-aqua-100);\n --sidebar-accent-foreground: var(--text-slate-400);\n --sidebar-border: var(--bg-slate-400);\n --sidebar-ring: var(--bg-robin-500);\n --font-sans: "Inter";\n --font-serif: "Open Sans";\n --font-mono: "Geist Mono";\n}\n.dark {\n --background: var(--bg-ink-500);\n --foreground: var(--text-vanilla-400);\n --card: var(--bg-ink-400);\n --card-foreground: var(--text-vanilla-100);\n --popover: var(--bg-ink-400);\n --popover-foreground: var(--text-vanilla-100);\n --primary: var(--bg-robin-500);\n --primary-foreground: var(--text-ink-500);\n --secondary: var(--bg-slate-500);\n --secondary-foreground: var(--text-vanilla-400);\n --muted: var(--bg-slate-500);\n --muted-foreground: var(--text-vanilla-400);\n --accent: var(--bg-slate-300);\n --accent-foreground: var(--text-vanilla-100);\n --destructive: var(--bg-cherry-500);\n --destructive-foreground: var(--text-ink-500);\n --border: var(--bg-slate-400);\n --input: var(--bg-slate-300);\n --ring: var(--bg-robin-500);\n --chart-1: var(--bg-robin-400);\n --chart-2: var(--bg-robin-500);\n --chart-3: var(--bg-robin-600);\n --chart-4: var(--bg-slate-200);\n --chart-5: var(--bg-slate-300);\n --sidebar: var(--bg-slate-500);\n --sidebar-foreground: var(--text-vanilla-400);\n --sidebar-primary: var(--bg-robin-500);\n --sidebar-primary-foreground: var(--text-ink-500);\n --sidebar-accent: var(--bg-slate-400);\n --sidebar-accent-foreground: var(--text-vanilla-400);\n --sidebar-border: var(--bg-slate-500);\n --sidebar-ring: var(--bg-robin-500);\n}\n@layer base {\n * {\n border-color: var(--color-border);\n outline-color: var(--color-ring);\n @supports (color: color-mix(in lab, red, red)) {\n outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent);\n }\n }\n body {\n background-color: var(--color-background);\n color: var(--color-foreground);\n }\n}\n[data-theme-color=blue] {\n --primary: var(--bg-robin-500);\n --primary-foreground: var(--text-vanilla-100);\n --ring: var(--bg-robin-500);\n --sidebar-primary: var(--bg-robin-500);\n --sidebar-ring: var(--bg-robin-500);\n}\n.dark[data-theme-color=blue] {\n --primary: var(--bg-robin-400);\n --primary-foreground: var(--text-ink-500);\n --ring: var(--bg-robin-400);\n --sidebar-primary: var(--bg-robin-400);\n --sidebar-ring: var(--bg-robin-400);\n}\n[data-theme-color=green] {\n --primary: var(--bg-forest-500);\n --primary-foreground: var(--text-vanilla-100);\n --ring: var(--bg-forest-500);\n --sidebar-primary: var(--bg-forest-500);\n --sidebar-ring: var(--bg-forest-500);\n}\n.dark[data-theme-color=green] {\n --primary: var(--bg-forest-400);\n --primary-foreground: var(--text-ink-500);\n --ring: var(--bg-forest-400);\n --sidebar-primary: var(--bg-forest-400);\n --sidebar-ring: var(--bg-forest-400);\n}\n[data-theme-color=amber] {\n --primary: var(--bg-amber-500);\n --primary-foreground: var(--text-vanilla-100);\n --ring: var(--bg-amber-500);\n --sidebar-primary: var(--bg-amber-500);\n --sidebar-ring: var(--bg-amber-500);\n}\n.dark[data-theme-color=amber] {\n --primary: var(--bg-amber-400);\n --primary-foreground: var(--text-ink-500);\n --ring: var(--bg-amber-400);\n --sidebar-primary: var(--bg-amber-400);\n --sidebar-ring: var(--bg-amber-400);\n}\n[data-theme-color=cherry] {\n --primary: var(--bg-cherry-500);\n --primary-foreground: var(--text-vanilla-100);\n --ring: var(--bg-cherry-500);\n --sidebar-primary: var(--bg-cherry-500);\n --sidebar-ring: var(--bg-cherry-500);\n}\n.dark[data-theme-color=cherry] {\n --primary: var(--bg-cherry-400);\n --primary-foreground: var(--text-ink-500);\n --ring: var(--bg-cherry-400);\n --sidebar-primary: var(--bg-cherry-400);\n --sidebar-ring: var(--bg-cherry-400);\n}\n[data-theme-color=aqua] {\n --primary: var(--bg-aqua-500);\n --primary-foreground: var(--text-vanilla-100);\n --ring: var(--bg-aqua-500);\n --sidebar-primary: var(--bg-aqua-500);\n --sidebar-ring: var(--bg-aqua-500);\n}\n.dark[data-theme-color=aqua] {\n --primary: var(--bg-aqua-400);\n --primary-foreground: var(--text-ink-500);\n --ring: var(--bg-aqua-400);\n --sidebar-primary: var(--bg-aqua-400);\n --sidebar-ring: var(--bg-aqua-400);\n}\n[data-vaul-drawer][data-vaul-drawer-direction=right]::after,\n[data-vaul-drawer][data-vaul-drawer-direction=left]::after,\n[data-vaul-drawer][data-vaul-drawer-direction=top]::after,\n[data-vaul-drawer][data-vaul-drawer-direction=bottom]::after {\n background: transparent;\n}\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n }\n }\n}\n');
62
+ styleInject('/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans: var(--font-sans);\n --font-serif: var(--font-serif);\n --font-mono: var(--font-mono);\n --color-black: #000;\n --spacing: 0.25rem;\n --container-3xl: 48rem;\n --text-sm: var(--font-size-sm);\n --text-sm--line-height: calc(1.25 / 0.875);\n --font-weight-thin: var(--font-weight-thin);\n --font-weight-extralight: var(--font-weight-extralight);\n --font-weight-light: var(--font-weight-light);\n --font-weight-normal: var(--font-weight-normal);\n --font-weight-medium: var(--font-weight-medium);\n --font-weight-semibold: var(--font-weight-semibold);\n --font-weight-bold: var(--font-weight-bold);\n --font-weight-extrabold: var(--font-weight-extrabold);\n --font-weight-black: var(--font-weight-black);\n --radius-sm: calc(var(--radius) - 4px);\n --radius-md: calc(var(--radius) - 2px);\n --radius-lg: var(--radius);\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-background: var(--background);\n --color-foreground: var(--foreground);\n --color-card: var(--card);\n --color-muted: var(--muted);\n --color-muted-foreground: var(--muted-foreground);\n --color-border: var(--border);\n --color-ring: var(--ring);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n }\n .fixed {\n position: fixed;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .z-50 {\n z-index: 50;\n }\n .m-4 {\n margin: calc(var(--spacing) * 4);\n }\n .mx-auto {\n margin-inline: auto;\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-auto {\n margin-top: auto;\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .flex {\n display: flex;\n }\n .hidden {\n display: none;\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-fit {\n height: fit-content;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-\\[100px\\] {\n width: 100px;\n }\n .w-full {\n width: 100%;\n }\n .max-w-3xl {\n max-width: var(--container-3xl);\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-col {\n flex-direction: column;\n }\n .items-center {\n align-items: center;\n }\n .justify-between {\n justify-content: space-between;\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-none {\n border-radius: 0;\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-\\[var\\(--drawer-border\\)\\] {\n border-color: var(--drawer-border);\n }\n .bg-black\\/50 {\n background-color: color-mix(in srgb, #000 50%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n }\n }\n .bg-card {\n background-color: var(--color-card);\n }\n .bg-muted {\n background-color: var(--color-muted);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-foreground {\n color: var(--color-foreground);\n }\n .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n .opacity-70 {\n opacity: 70%;\n }\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring-offset-background {\n --tw-ring-offset-color: var(--color-background);\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .group-data-\\[vaul-drawer-direction\\=bottom\\]\\/drawer-content\\:block {\n &:is(:where(.group\\/drawer-content)[data-vaul-drawer-direction=bottom] *) {\n display: block;\n }\n }\n .hover\\:opacity-100 {\n &:hover {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n }\n .focus\\:ring-ring {\n &:focus {\n --tw-ring-color: var(--color-ring);\n }\n }\n .focus\\:ring-offset-2 {\n &:focus {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .disabled\\:pointer-events-none {\n &:disabled {\n pointer-events: none;\n }\n }\n .data-\\[state\\=closed\\]\\:animate-out {\n &[data-state=closed] {\n animation-name: exit;\n animation-duration: 150ms;\n --tw-exit-opacity: initial;\n --tw-exit-scale: initial;\n --tw-exit-rotate: initial;\n --tw-exit-translate-x: initial;\n --tw-exit-translate-y: initial;\n }\n }\n .data-\\[state\\=closed\\]\\:fade-out-0 {\n &[data-state=closed] {\n --tw-exit-opacity: 0;\n }\n }\n .data-\\[state\\=open\\]\\:animate-in {\n &[data-state=open] {\n animation-name: enter;\n animation-duration: 150ms;\n --tw-enter-opacity: initial;\n --tw-enter-scale: initial;\n --tw-enter-rotate: initial;\n --tw-enter-translate-x: initial;\n --tw-enter-translate-y: initial;\n }\n }\n .data-\\[state\\=open\\]\\:fade-in-0 {\n &[data-state=open] {\n --tw-enter-opacity: 0;\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:inset-x-0 {\n &[data-vaul-drawer-direction=bottom] {\n inset-inline: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:bottom-0 {\n &[data-vaul-drawer-direction=bottom] {\n bottom: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:mt-24 {\n &[data-vaul-drawer-direction=bottom] {\n margin-top: calc(var(--spacing) * 24);\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:max-h-\\[80vh\\] {\n &[data-vaul-drawer-direction=bottom] {\n max-height: 80vh;\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:rounded-t-lg {\n &[data-vaul-drawer-direction=bottom] {\n border-top-left-radius: var(--radius-lg);\n border-top-right-radius: var(--radius-lg);\n }\n }\n .data-\\[vaul-drawer-direction\\=bottom\\]\\:border-t {\n &[data-vaul-drawer-direction=bottom] {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n }\n .data-\\[vaul-drawer-direction\\=left\\]\\:inset-y-0 {\n &[data-vaul-drawer-direction=left] {\n inset-block: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=left\\]\\:left-0 {\n &[data-vaul-drawer-direction=left] {\n left: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=left\\]\\:border-r {\n &[data-vaul-drawer-direction=left] {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n }\n .data-\\[vaul-drawer-direction\\=right\\]\\:inset-y-0 {\n &[data-vaul-drawer-direction=right] {\n inset-block: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=right\\]\\:right-0 {\n &[data-vaul-drawer-direction=right] {\n right: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=right\\]\\:border-l {\n &[data-vaul-drawer-direction=right] {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:inset-x-0 {\n &[data-vaul-drawer-direction=top] {\n inset-inline: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:top-0 {\n &[data-vaul-drawer-direction=top] {\n top: calc(var(--spacing) * 0);\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:mb-24 {\n &[data-vaul-drawer-direction=top] {\n margin-bottom: calc(var(--spacing) * 24);\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:max-h-\\[80vh\\] {\n &[data-vaul-drawer-direction=top] {\n max-height: 80vh;\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:rounded-b-lg {\n &[data-vaul-drawer-direction=top] {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n }\n .data-\\[vaul-drawer-direction\\=top\\]\\:border-b {\n &[data-vaul-drawer-direction=top] {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n }\n}\n:root {\n --bg-robin-50: #edf1fe;\n --bg-robin-100: #cad5fd;\n --bg-robin-150: #cad5fd;\n --bg-robin-200: #b8c7fc;\n --bg-robin-300: #95acfb;\n --bg-robin-400: #7190f9;\n --bg-robin-500: #4e74f8;\n --bg-robin-600: #3f5ecc;\n --bg-robin-700: #2f48a0;\n --bg-robin-800: #1f3274;\n --bg-robin-900: #101d49;\n --bg-robin-950: #091233;\n --bg-sienna-50: #f7f2ee;\n --bg-sienna-100: #e6d9cd;\n --bg-sienna-200: #decbbc;\n --bg-sienna-300: #ceb29b;\n --bg-sienna-400: #bd9879;\n --bg-sienna-500: #ad7f58;\n --bg-sienna-600: #8a6546;\n --bg-sienna-700: #684c35;\n --bg-sienna-800: #453223;\n --bg-sienna-850: #34261a;\n --bg-sienna-900: #231912;\n --bg-sienna-950: #110d09;\n --bg-cherry-50: #fceded;\n --bg-cherry-100: #fadadb;\n --bg-cherry-200: #f7c8ca;\n --bg-cherry-300: #f5b6b8;\n --bg-cherry-400: #ea6d71;\n --bg-cherry-500: #e5484d;\n --bg-cherry-600: #b83a3e;\n --bg-cherry-700: #8b2c2f;\n --bg-cherry-800: #5e1d1f;\n --bg-cherry-850: #481618;\n --bg-cherry-900: #320f10;\n --bg-cherry-950: #1b0809;\n --bg-aqua-50: #e9f9fe;\n --bg-aqua-100: #c1eefd;\n --bg-aqua-200: #9ae4fc;\n --bg-aqua-300: #72d9fb;\n --bg-aqua-400: #4bcff9;\n --bg-aqua-500: #23c4f8;\n --bg-aqua-600: #07afe6;\n --bg-aqua-700: #157594;\n --bg-aqua-800: #0e4e63;\n --bg-aqua-850: #0b3b4a;\n --bg-aqua-900: #072732;\n --bg-aqua-950: #041419;\n --bg-sakura-50: #feedf0;\n --bg-sakura-100: #fbc8d2;\n --bg-sakura-150: #fbc8d2;\n --bg-sakura-200: #fab5c3;\n --bg-sakura-300: #f791a5;\n --bg-sakura-400: #f56c87;\n --bg-sakura-500: #f24769;\n --bg-sakura-600: #c53955;\n --bg-sakura-700: #982b41;\n --bg-sakura-800: #6a1d2c;\n --bg-sakura-850: #531622;\n --bg-sakura-900: #3d0f18;\n --bg-sakura-950: #26080e;\n --bg-amber-50: #fffaee;\n --bg-amber-100: #fff0cc;\n --bg-amber-150: #fff0cc;\n --bg-amber-200: #ffebbb;\n --bg-amber-300: #ffe19a;\n --bg-amber-400: #ffd778;\n --bg-amber-500: #ffcc56;\n --bg-amber-600: #d5aa45;\n --bg-amber-700: #ab8834;\n --bg-amber-800: #816522;\n --bg-amber-850: #6c5319;\n --bg-amber-900: #574311;\n --bg-amber-950: #423109;\n --bg-amber-1000: #2d2000;\n --bg-forest-50: #e9fcf4;\n --bg-forest-100: #d3f9e9;\n --bg-forest-150: #bef6de;\n --bg-forest-200: #a8f3d3;\n --bg-forest-300: #7cedbd;\n --bg-forest-400: #50e7a7;\n --bg-forest-500: #25e192;\n --bg-forest-600: #1eb475;\n --bg-forest-700: #168757;\n --bg-forest-800: #0f5a3a;\n --bg-forest-850: #0b442c;\n --bg-forest-900: #072d1d;\n --bg-forest-950: #04170f;\n --bg-ink-100: #2a2e37;\n --bg-ink-200: #23262e;\n --bg-ink-300: #16181d;\n --bg-ink-400: #121317;\n --bg-ink-500: #0b0c0e;\n --bg-vanilla-100: #fff;\n --bg-vanilla-200: #f5f5f5;\n --bg-vanilla-300: #e9e9e9;\n --bg-vanilla-400: #c0c1c3;\n --bg-slate-50: #62687c;\n --bg-slate-100: #3c4152;\n --bg-slate-200: #2c3140;\n --bg-slate-300: #242834;\n --bg-slate-400: #1d212d;\n --bg-slate-500: #161922;\n --bg-neutral-dark-50: #eceef2;\n --bg-neutral-dark-100: #adb4c2;\n --bg-neutral-dark-200: #747b8b;\n --bg-neutral-dark-300: #676e7d;\n --bg-neutral-dark-400: #5a6070;\n --bg-neutral-dark-500: #414755;\n --bg-neutral-dark-600: #343945;\n --bg-neutral-dark-700: #2c303a;\n --bg-neutral-dark-800: #23262e;\n --bg-neutral-dark-900: #16181d;\n --bg-neutral-dark-950: #121317;\n --bg-neutral-dark-1000: #0a0c10;\n --bg-neutral-light-50: #1e1f24;\n --bg-neutral-light-100: #62636c;\n --bg-neutral-light-200: #80828d;\n --bg-neutral-light-300: #8b8d98;\n --bg-neutral-light-400: #b9bbc6;\n --bg-neutral-light-500: #cdced7;\n --bg-neutral-light-600: #d8d9e0;\n --bg-neutral-light-700: #e0e1e6;\n --bg-neutral-light-800: #e7e8ec;\n --bg-neutral-light-900: #eff0f3;\n --bg-neutral-light-950: #f9f9fb;\n --bg-neutral-light-1000: #fcfcfd;\n --bg-base-black: #000;\n --bg-base-white: #fff;\n --bg-gradient-coral:\n linear-gradient(\n 114deg,#ed6d68 14.99%,#fca083 77.27%);\n --bg-gradient-dark-shadow:\n linear-gradient(\n 139deg,rgba(18,19,23,.8),rgba(18,19,23,.9) 98.68%);\n --bg-gradient-styx:\n linear-gradient(\n 139deg,rgba(18,19,23,.8),rgba(18,19,23,.9) 98.68%);\n --bg-gradient-dawn:\n linear-gradient(\n 99deg,#7a97fa 4.42%,#f977ff 96.6%);\n --bg-gradient-ocean:\n linear-gradient(\n 99deg,#48f8cf 4.42%,#28cbf3 96.6%);\n --bg-gradient-splash:\n linear-gradient(\n 99deg,#4568dc 4.42%,#324daa 96.6%);\n --bg-gradient-flamingo:\n linear-gradient(\n 92deg,#ca9cd0 1.36%,#d38972 68.48%,#a1b1e7 98.99%);\n --text-robin-50: #edf1fe;\n --text-robin-100: #cad5fd;\n --text-robin-150: #cad5fd;\n --text-robin-200: #b8c7fc;\n --text-robin-300: #95acfb;\n --text-robin-400: #7190f9;\n --text-robin-500: #4e74f8;\n --text-robin-600: #3f5ecc;\n --text-robin-700: #2f48a0;\n --text-robin-800: #1f3274;\n --text-robin-900: #101d49;\n --text-robin-950: #091233;\n --text-sienna-50: #f7f2ee;\n --text-sienna-100: #e6d9cd;\n --text-sienna-200: #decbbc;\n --text-sienna-300: #ceb29b;\n --text-sienna-400: #bd9879;\n --text-sienna-500: #ad7f58;\n --text-sienna-600: #8a6546;\n --text-sienna-700: #684c35;\n --text-sienna-800: #453223;\n --text-sienna-850: #34261a;\n --text-sienna-900: #231912;\n --text-sienna-950: #110d09;\n --text-cherry-50: #fceded;\n --text-cherry-100: #fadadb;\n --text-cherry-200: #f7c8ca;\n --text-cherry-300: #f5b6b8;\n --text-cherry-400: #ea6d71;\n --text-cherry-500: #e5484d;\n --text-cherry-600: #b83a3e;\n --text-cherry-700: #8b2c2f;\n --text-cherry-800: #5e1d1f;\n --text-cherry-850: #481618;\n --text-cherry-900: #320f10;\n --text-cherry-950: #1b0809;\n --text-aqua-50: #e9f9fe;\n --text-aqua-100: #c1eefd;\n --text-aqua-200: #9ae4fc;\n --text-aqua-300: #72d9fb;\n --text-aqua-400: #4bcff9;\n --text-aqua-500: #23c4f8;\n --text-aqua-600: #07afe6;\n --text-aqua-700: #157594;\n --text-aqua-800: #0e4e63;\n --text-aqua-850: #0b3b4a;\n --text-aqua-900: #072732;\n --text-aqua-950: #041419;\n --text-sakura-50: #feedf0;\n --text-sakura-100: #fbc8d2;\n --text-sakura-150: #fbc8d2;\n --text-sakura-200: #fab5c3;\n --text-sakura-300: #f791a5;\n --text-sakura-400: #f56c87;\n --text-sakura-500: #f24769;\n --text-sakura-600: #c53955;\n --text-sakura-700: #982b41;\n --text-sakura-800: #6a1d2c;\n --text-sakura-850: #531622;\n --text-sakura-900: #3d0f18;\n --text-sakura-950: #26080e;\n --text-amber-50: #fffaee;\n --text-amber-100: #fff0cc;\n --text-amber-150: #fff0cc;\n --text-amber-200: #ffebbb;\n --text-amber-300: #ffe19a;\n --text-amber-400: #ffd778;\n --text-amber-500: #ffcc56;\n --text-amber-600: #d5aa45;\n --text-amber-700: #ab8834;\n --text-amber-800: #816522;\n --text-amber-850: #6c5319;\n --text-amber-900: #574311;\n --text-amber-950: #423109;\n --text-amber-1000: #2d2000;\n --text-forest-50: #e9fcf4;\n --text-forest-100: #d3f9e9;\n --text-forest-150: #bef6de;\n --text-forest-200: #a8f3d3;\n --text-forest-300: #7cedbd;\n --text-forest-400: #50e7a7;\n --text-forest-500: #25e192;\n --text-forest-600: #1eb475;\n --text-forest-700: #168757;\n --text-forest-800: #0f5a3a;\n --text-forest-850: #0b442c;\n --text-forest-900: #072d1d;\n --text-forest-950: #04170f;\n --text-ink-100: #2a2e37;\n --text-ink-200: #23262e;\n --text-ink-300: #16181d;\n --text-ink-400: #121317;\n --text-ink-500: #0b0c0e;\n --text-vanilla-100: #fff;\n --text-vanilla-200: #f5f5f5;\n --text-vanilla-300: #e9e9e9;\n --text-vanilla-400: #c0c1c3;\n --text-slate-50: #62687c;\n --text-slate-100: #3c4152;\n --text-slate-200: #2c3140;\n --text-slate-300: #242834;\n --text-slate-400: #1d212d;\n --text-slate-500: #161922;\n --text-neutral-dark-50: #eceef2;\n --text-neutral-dark-100: #adb4c2;\n --text-neutral-dark-200: #747b8b;\n --text-neutral-dark-300: #676e7d;\n --text-neutral-dark-400: #5a6070;\n --text-neutral-dark-500: #414755;\n --text-neutral-dark-600: #343945;\n --text-neutral-dark-700: #2c303a;\n --text-neutral-dark-800: #23262e;\n --text-neutral-dark-900: #16181d;\n --text-neutral-dark-950: #121317;\n --text-neutral-dark-1000: #0a0c10;\n --text-neutral-light-50: #1e1f24;\n --text-neutral-light-100: #62636c;\n --text-neutral-light-200: #80828d;\n --text-neutral-light-300: #8b8d98;\n --text-neutral-light-400: #b9bbc6;\n --text-neutral-light-500: #cdced7;\n --text-neutral-light-600: #d8d9e0;\n --text-neutral-light-700: #e0e1e6;\n --text-neutral-light-800: #e7e8ec;\n --text-neutral-light-900: #eff0f3;\n --text-neutral-light-950: #f9f9fb;\n --text-neutral-light-1000: #fcfcfd;\n --text-base-black: #000;\n --text-base-white: #fff;\n --text-gradient-coral:\n linear-gradient(\n 114deg,#ed6d68 14.99%,#fca083 77.27%);\n --text-gradient-dark-shadow:\n linear-gradient(\n 139deg,rgba(18,19,23,.8),rgba(18,19,23,.9) 98.68%);\n --text-gradient-styx:\n linear-gradient(\n 139deg,rgba(18,19,23,.8),rgba(18,19,23,.9) 98.68%);\n --text-gradient-dawn:\n linear-gradient(\n 99deg,#7a97fa 4.42%,#f977ff 96.6%);\n --text-gradient-ocean:\n linear-gradient(\n 99deg,#48f8cf 4.42%,#28cbf3 96.6%);\n --text-gradient-splash:\n linear-gradient(\n 99deg,#4568dc 4.42%,#324daa 96.6%);\n --text-gradient-flamingo:\n linear-gradient(\n 92deg,#ca9cd0 1.36%,#d38972 68.48%,#a1b1e7 98.99%);\n --padding-1: 0.25rem;\n --padding-2: 0.5rem;\n --padding-3: 0.75rem;\n --padding-4: 1rem;\n --padding-5: 1.25rem;\n --padding-6: 1.5rem;\n --padding-7: 1.75rem;\n --padding-8: 2rem;\n --padding-10: 2.5rem;\n --padding-12: 3rem;\n --padding-16: 4rem;\n --padding-20: 5rem;\n --padding-24: 6rem;\n --padding-32: 8rem;\n --padding-40: 10rem;\n --padding-48: 12rem;\n --padding-56: 14rem;\n --padding-64: 16rem;\n --margin-1: 0.25rem;\n --margin-2: 0.5rem;\n --margin-3: 0.75rem;\n --margin-4: 1rem;\n --margin-5: 1.25rem;\n --margin-6: 1.5rem;\n --margin-7: 1.75rem;\n --margin-8: 2rem;\n --margin-10: 2.5rem;\n --margin-12: 3rem;\n --margin-16: 4rem;\n --margin-20: 5rem;\n --margin-24: 6rem;\n --margin-32: 8rem;\n --margin-40: 10rem;\n --margin-48: 12rem;\n --margin-56: 14rem;\n --margin-64: 16rem;\n --font-family-inter: Inter,sans-serif;\n --font-family-sf-mono: SF Mono,monospace;\n --font-size-xs: 0.75rem;\n --font-size-sm: 0.875rem;\n --font-size-base: 1rem;\n --font-size-lg: 1.125rem;\n --font-size-xl: 1.25rem;\n --font-size-2xl: 1.5rem;\n --font-size-3xl: 1.875rem;\n --font-size-4xl: 2.25rem;\n --font-size-5xl: 3rem;\n --font-size-6xl: 3.75rem;\n --font-size-7xl: 4.5rem;\n --font-size-8xl: 6rem;\n --font-size-9xl: 8rem;\n --font-weight-thin: 100;\n --font-weight-extralight: 200;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n --font-weight-black: 900;\n --line-height-18: 18px;\n --line-height-20: 20px;\n --line-height-24: 24px;\n --line-height-none: 1;\n --line-height-tight: 1.25;\n --line-height-snug: 1.375;\n --line-height-normal: 1.5;\n --line-height-relaxed: 1.625;\n --line-height-loose: 2;\n --letter-spacing-0: 0px;\n --letter-spacing-4: 4px;\n --letter-spacing-tighter: -0.05em;\n --letter-spacing-tight: -0.025em;\n --letter-spacing-normal: 0em;\n --letter-spacing-wide: 0.025em;\n --letter-spacing-wider: 0.05em;\n --letter-spacing-widest: 0.1em;\n --letter-spacing-0-5: -0.5px;\n --label-large-400-font-size: 18px;\n --label-large-400-font-weight: 400;\n --label-large-400-line-height: 1;\n --label-large-400-letter-spacing: 0px;\n --label-large-400-font-family: Inter,sans-serif;\n --label-large-500-font-size: 18px;\n --label-large-500-font-weight: 500;\n --label-large-500-line-height: 1;\n --label-large-500-letter-spacing: 0px;\n --label-large-500-font-family: Inter,sans-serif;\n --label-large-600-font-size: 18px;\n --label-large-600-font-weight: 600;\n --label-large-600-line-height: 1;\n --label-large-600-letter-spacing: 0px;\n --label-large-600-font-family: Inter,sans-serif;\n --label-medium-400-font-size: 16px;\n --label-medium-400-font-weight: 400;\n --label-medium-400-line-height: 1;\n --label-medium-400-letter-spacing: 0px;\n --label-medium-400-font-family: Inter,sans-serif;\n --label-medium-500-font-size: 16px;\n --label-medium-500-font-weight: 500;\n --label-medium-500-line-height: 1;\n --label-medium-500-letter-spacing: 0px;\n --label-medium-500-font-family: Inter,sans-serif;\n --label-medium-600-font-size: 16px;\n --label-medium-600-font-weight: 600;\n --label-medium-600-line-height: 1;\n --label-medium-600-letter-spacing: 0px;\n --label-medium-600-font-family: Inter,sans-serif;\n --label-base-400-font-size: 13px;\n --label-base-400-font-weight: 400;\n --label-base-400-line-height: 1;\n --label-base-400-letter-spacing: -0.5px;\n --label-base-400-font-family: Inter,sans-serif;\n --label-base-500-font-size: 13px;\n --label-base-500-font-weight: 500;\n --label-base-500-line-height: 1;\n --label-base-500-letter-spacing: -0.5px;\n --label-base-500-font-family: Inter,sans-serif;\n --label-base-600-font-size: 13px;\n --label-base-600-font-weight: 600;\n --label-base-600-line-height: 1;\n --label-base-600-letter-spacing: -0.5px;\n --label-base-600-font-family: Inter,sans-serif;\n --label-small-400-font-size: 11px;\n --label-small-400-font-weight: 400;\n --label-small-400-line-height: 1;\n --label-small-400-letter-spacing: 0px;\n --label-small-400-font-family: Inter,sans-serif;\n --label-small-500-font-size: 11px;\n --label-small-500-font-weight: 500;\n --label-small-500-line-height: 1;\n --label-small-500-letter-spacing: 0px;\n --label-small-500-font-family: Inter,sans-serif;\n --label-small-600-font-size: 11px;\n --label-small-600-font-weight: 600;\n --label-small-600-line-height: 1;\n --label-small-600-letter-spacing: 0px;\n --label-small-600-font-family: Inter,sans-serif;\n --uppercase-base-400-font-size: 13px;\n --uppercase-base-400-font-weight: 400;\n --uppercase-base-400-line-height: 1;\n --uppercase-base-400-letter-spacing: 4px;\n --uppercase-base-400-font-family: Inter,sans-serif;\n --uppercase-base-500-font-size: 13px;\n --uppercase-base-500-font-weight: 500;\n --uppercase-base-500-line-height: 1;\n --uppercase-base-500-letter-spacing: 4px;\n --uppercase-base-500-font-family: Inter,sans-serif;\n --uppercase-base-600-font-size: 13px;\n --uppercase-base-600-font-weight: 600;\n --uppercase-base-600-line-height: 1;\n --uppercase-base-600-letter-spacing: 4px;\n --uppercase-base-600-font-family: Inter,sans-serif;\n --uppercase-small-400-font-size: 11px;\n --uppercase-small-400-font-weight: 400;\n --uppercase-small-400-line-height: 1;\n --uppercase-small-400-letter-spacing: 4px;\n --uppercase-small-400-font-family: Inter,sans-serif;\n --uppercase-small-500-font-size: 11px;\n --uppercase-small-500-font-weight: 500;\n --uppercase-small-500-line-height: 1;\n --uppercase-small-500-letter-spacing: 4px;\n --uppercase-small-500-font-family: Inter,sans-serif;\n --uppercase-small-600-font-size: 11px;\n --uppercase-small-600-font-weight: 600;\n --uppercase-small-600-line-height: 1;\n --uppercase-small-600-letter-spacing: 4px;\n --uppercase-small-600-font-family: Inter,sans-serif;\n --code-base-400-font-size: 13px;\n --code-base-400-font-weight: 400;\n --code-base-400-line-height: 1;\n --code-base-400-letter-spacing: 0px;\n --code-base-400-font-family: SF Mono,monospace;\n --code-base-500-font-size: 13px;\n --code-base-500-font-weight: 500;\n --code-base-500-line-height: 1;\n --code-base-500-letter-spacing: 0px;\n --code-base-500-font-family: SF Mono,monospace;\n --code-base-600-font-size: 13px;\n --code-base-600-font-weight: 600;\n --code-base-600-line-height: 1;\n --code-base-600-letter-spacing: 0px;\n --code-base-600-font-family: SF Mono,monospace;\n --code-small-400-font-size: 11px;\n --code-small-400-font-weight: 400;\n --code-small-400-line-height: 1;\n --code-small-400-letter-spacing: 0px;\n --code-small-400-font-family: SF Mono,monospace;\n --code-small-500-font-size: 11px;\n --code-small-500-font-weight: 500;\n --code-small-500-line-height: 1;\n --code-small-500-letter-spacing: 0px;\n --code-small-500-font-family: SF Mono,monospace;\n --code-small-600-font-size: 11px;\n --code-small-600-font-weight: 600;\n --code-small-600-line-height: 1;\n --code-small-600-letter-spacing: 0px;\n --code-small-600-font-family: SF Mono,monospace;\n --paragraph-medium-400-font-size: 16px;\n --paragraph-medium-400-font-weight: 400;\n --paragraph-medium-400-line-height: 24px;\n --paragraph-medium-400-letter-spacing: 0px;\n --paragraph-medium-400-font-family: Inter,sans-serif;\n --paragraph-medium-500-font-size: 16px;\n --paragraph-medium-500-font-weight: 500;\n --paragraph-medium-500-line-height: 24px;\n --paragraph-medium-500-letter-spacing: 0px;\n --paragraph-medium-500-font-family: Inter,sans-serif;\n --paragraph-medium-600-font-size: 16px;\n --paragraph-medium-600-font-weight: 600;\n --paragraph-medium-600-line-height: 24px;\n --paragraph-medium-600-letter-spacing: 0px;\n --paragraph-medium-600-font-family: Inter,sans-serif;\n --paragraph-base-400-font-size: 13px;\n --paragraph-base-400-font-weight: 400;\n --paragraph-base-400-line-height: 20px;\n --paragraph-base-400-letter-spacing: -0.5px;\n --paragraph-base-400-font-family: Inter,sans-serif;\n --paragraph-base-500-font-size: 13px;\n --paragraph-base-500-font-weight: 500;\n --paragraph-base-500-line-height: 20px;\n --paragraph-base-500-letter-spacing: -0.5px;\n --paragraph-base-500-font-family: Inter,sans-serif;\n --paragraph-base-600-font-size: 13px;\n --paragraph-base-600-font-weight: 600;\n --paragraph-base-600-line-height: 20px;\n --paragraph-base-600-letter-spacing: -0.5px;\n --paragraph-base-600-font-family: Inter,sans-serif;\n --paragraph-small-400-font-size: 11px;\n --paragraph-small-400-font-weight: 400;\n --paragraph-small-400-line-height: 18px;\n --paragraph-small-400-letter-spacing: -0.5px;\n --paragraph-small-400-font-family: Inter,sans-serif;\n --paragraph-small-500-font-size: 11px;\n --paragraph-small-500-font-weight: 500;\n --paragraph-small-500-line-height: 18px;\n --paragraph-small-500-letter-spacing: -0.5px;\n --paragraph-small-500-font-family: Inter,sans-serif;\n --paragraph-small-600-font-size: 11px;\n --paragraph-small-600-font-weight: 600;\n --paragraph-small-600-line-height: 18px;\n --paragraph-small-600-letter-spacing: -0.5px;\n --paragraph-small-600-font-family: Inter,sans-serif;\n}\n:root {\n --background: var(--bg-vanilla-200);\n --foreground: var(--text-ink-400);\n --card: var(--bg-vanilla-100);\n --card-foreground: var(--text-ink-400);\n --popover: var(--bg-vanilla-100);\n --popover-foreground: var(--text-ink-400);\n --primary: var(--bg-robin-500);\n --primary-foreground: var(--text-vanilla-100);\n --secondary: var(--bg-vanilla-300);\n --secondary-foreground: var(--text-slate-400);\n --muted: var(--bg-vanilla-300);\n --muted-foreground: var(--text-slate-50);\n --accent: var(--bg-aqua-100);\n --accent-foreground: var(--text-slate-400);\n --destructive: var(--bg-cherry-500);\n --destructive-foreground: var(--text-vanilla-100);\n --border: var(--bg-vanilla-400);\n --input: var(--bg-vanilla-400);\n --ring: var(--bg-robin-500);\n --chart-1: var(--bg-robin-500);\n --chart-2: var(--bg-robin-600);\n --chart-3: var(--bg-slate-300);\n --chart-4: var(--bg-slate-400);\n --chart-5: var(--bg-slate-500);\n --radius: 0.25rem;\n --sidebar: var(--bg-vanilla-300);\n --sidebar-foreground: var(--text-ink-400);\n --sidebar-primary: var(--bg-robin-500);\n --sidebar-primary-foreground: var(--text-vanilla-100);\n --sidebar-accent: var(--bg-aqua-100);\n --sidebar-accent-foreground: var(--text-slate-400);\n --sidebar-border: var(--bg-slate-400);\n --sidebar-ring: var(--bg-robin-500);\n --font-sans: "Inter";\n --font-serif: "Open Sans";\n --font-mono: "Geist Mono";\n --base-white: var(--text-base-white);\n --base-black: var(--text-base-black);\n --l1-background: var(--bg-neutral-light-1000);\n --l2-background: var(--bg-neutral-light-950);\n --l3-background: var(--bg-neutral-light-800);\n --l1-background-hover: var(--bg-neutral-light-900);\n --l2-background-hover: var(--bg-neutral-light-700);\n --l3-background-hover: var(--bg-neutral-light-700);\n --l1-foreground: var(--text-neutral-light-50);\n --l1-foreground-hover: var(--text-base-black);\n --l2-foreground: var(--text-neutral-light-100);\n --l2-foreground-hover: var(--text-neutral-light-50);\n --l3-foreground: var(--text-neutral-light-200);\n --l3-foreground-hover: var(--text-neutral-light-300);\n --l1-border: var(--bg-neutral-light-900);\n --l2-border: var(--bg-neutral-light-800);\n --l3-border: var(--bg-neutral-light-700);\n --primary-background: var(--bg-robin-500);\n --primary-background-hover: var(--bg-robin-400);\n --primary-foreground: var(--text-neutral-light-1000);\n --primary-foreground-hover: var(--text-base-white);\n --secondary-background: var(--bg-neutral-light-950);\n --secondary-background-hover: var(--bg-neutral-light-700);\n --secondary-foreground: var(--text-neutral-light-100);\n --secondary-foreground-hover: var(--text-neutral-light-50);\n --secondary-border: var(--bg-neutral-light-800);\n --success-background: var(--bg-forest-600);\n --success-background-hover: var(--bg-forest-400);\n --success-foreground: var(--text-neutral-light-50);\n --success-foreground-hover: var(--text-base-black);\n --warning-background: var(--bg-amber-600);\n --warning-background-hover: var(--bg-amber-400);\n --warning-foreground: var(--text-neutral-light-50);\n --warning-foreground-hover: var(--text-base-black);\n --danger-background: var(--bg-cherry-500);\n --danger-background-hover: var(--bg-cherry-400);\n --danger-foreground: var(--text-neutral-light-1000);\n --danger-foreground-hover: var(--text-base-white);\n --l1-background-transparent: var(--bg-neutral-light-1000);\n @supports (color: color-mix(in lab, red, red)) {\n --l1-background-transparent: color-mix( in srgb, var(--bg-neutral-light-1000), transparent 100% );\n }\n --l1-background-60: var(--bg-neutral-light-1000);\n @supports (color: color-mix(in lab, red, red)) {\n --l1-background-60: color-mix( in srgb, var(--bg-neutral-light-1000), transparent 40% );\n }\n --l2-background-transparent: var(--bg-neutral-light-950);\n @supports (color: color-mix(in lab, red, red)) {\n --l2-background-transparent: color-mix( in srgb, var(--bg-neutral-light-950), transparent 100% );\n }\n --l2-background-60: var(--bg-neutral-light-950);\n @supports (color: color-mix(in lab, red, red)) {\n --l2-background-60: color-mix( in srgb, var(--bg-neutral-light-950), transparent 40% );\n }\n --l3-background-transparent: var(--bg-neutral-light-800);\n @supports (color: color-mix(in lab, red, red)) {\n --l3-background-transparent: color-mix( in srgb, var(--bg-neutral-light-800), transparent 100% );\n }\n --l3-background-60: var(--bg-neutral-light-800);\n @supports (color: color-mix(in lab, red, red)) {\n --l3-background-60: color-mix( in srgb, var(--bg-neutral-light-800), transparent 40% );\n }\n --alert-strip-button-background: var(--bg-ink-400);\n @supports (color: color-mix(in lab, red, red)) {\n --alert-strip-button-background: color-mix( in srgb, var(--bg-ink-400), transparent 40% );\n }\n --callout-primary-background: var(--bg-robin-500);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-primary-background: color-mix( in srgb, var(--bg-robin-500), transparent 90% );\n }\n --callout-primary-border: var(--bg-robin-500);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-primary-border: color-mix( in srgb, var(--bg-robin-500), transparent 80% );\n }\n --callout-primary-title: var(--bg-robin-600);\n --callout-primary-description: var(--bg-robin-600);\n --callout-primary-icon: var(--bg-robin-300);\n --callout-success-background: var(--bg-forest-600);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-success-background: color-mix( in srgb, var(--bg-forest-600), transparent 90% );\n }\n --callout-success-border: var(--bg-forest-600);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-success-border: color-mix( in srgb, var(--bg-forest-600), transparent 80% );\n }\n --callout-success-title: var(--bg-forest-600);\n --callout-success-description: var(--bg-forest-600);\n --callout-success-icon: var(--bg-forest-700);\n --callout-warning-background: var(--bg-amber-600);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-warning-background: color-mix( in srgb, var(--bg-amber-600), transparent 90% );\n }\n --callout-warning-border: var(--bg-amber-600);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-warning-border: color-mix( in srgb, var(--bg-amber-600), transparent 80% );\n }\n --callout-warning-title: var(--bg-amber-700);\n --callout-warning-description: var(--bg-amber-700);\n --callout-warning-icon: var(--bg-amber-800);\n --callout-error-background: var(--bg-cherry-500);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-error-background: color-mix( in srgb, var(--bg-cherry-500), transparent 90% );\n }\n --callout-error-border: var(--bg-cherry-500);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-error-border: color-mix( in srgb, var(--bg-cherry-500), transparent 80% );\n }\n --callout-error-title: var(--bg-cherry-600);\n --callout-error-description: var(--bg-cherry-600);\n --callout-error-icon: var(--bg-cherry-700);\n --accent-primary: var(--bg-robin-500);\n --accent-primary-hover: var(--bg-robin-400);\n --accent-primary-foreground: var(--text-vanilla-100);\n --accent-forest: var(--bg-forest-500);\n --accent-forest-hover: var(--bg-forest-400);\n --accent-forest-foreground: var(--text-vanilla-100);\n --accent-amber: var(--bg-amber-500);\n --accent-amber-hover: var(--bg-amber-400);\n --accent-amber-foreground: var(--text-vanilla-100);\n --accent-cherry: var(--bg-cherry-500);\n --accent-cherry-hover: var(--bg-cherry-400);\n --accent-cherry-foreground: var(--text-vanilla-100);\n --accent-aqua: var(--bg-aqua-500);\n --accent-aqua-hover: var(--bg-aqua-400);\n --accent-aqua-foreground: var(--text-vanilla-100);\n --accent-sakura: var(--bg-sakura-500);\n --accent-sakura-hover: var(--bg-sakura-400);\n --accent-sakura-foreground: var(--text-vanilla-100);\n --accent-sienna: var(--bg-sienna-500);\n --accent-sienna-hover: var(--bg-sienna-400);\n --accent-sienna-foreground: var(--text-vanilla-100);\n}\n.dark {\n --background: var(--bg-ink-500);\n --foreground: var(--text-vanilla-400);\n --card: var(--bg-ink-400);\n --card-foreground: var(--text-vanilla-100);\n --popover: var(--bg-ink-400);\n --popover-foreground: var(--text-vanilla-100);\n --primary: var(--bg-robin-500);\n --primary-foreground: var(--text-ink-500);\n --secondary: var(--bg-slate-500);\n --secondary-foreground: var(--text-vanilla-400);\n --muted: var(--bg-slate-500);\n --muted-foreground: var(--text-vanilla-400);\n --accent: var(--bg-slate-300);\n --accent-foreground: var(--text-vanilla-100);\n --destructive: var(--bg-cherry-500);\n --destructive-foreground: var(--text-ink-500);\n --border: var(--bg-slate-400);\n --input: var(--bg-slate-300);\n --ring: var(--bg-robin-500);\n --chart-1: var(--bg-robin-400);\n --chart-2: var(--bg-robin-500);\n --chart-3: var(--bg-robin-600);\n --chart-4: var(--bg-slate-200);\n --chart-5: var(--bg-slate-300);\n --sidebar: var(--bg-slate-500);\n --sidebar-foreground: var(--text-vanilla-400);\n --sidebar-primary: var(--bg-robin-500);\n --sidebar-primary-foreground: var(--text-ink-500);\n --sidebar-accent: var(--bg-slate-400);\n --sidebar-accent-foreground: var(--text-vanilla-400);\n --sidebar-border: var(--bg-slate-500);\n --sidebar-ring: var(--bg-robin-500);\n --l1-background: var(--bg-neutral-dark-1000);\n --l2-background: var(--bg-neutral-dark-900);\n --l3-background: var(--bg-neutral-dark-800);\n --l1-background-hover: var(--bg-neutral-dark-900);\n --l2-background-hover: var(--bg-neutral-dark-700);\n --l3-background-hover: var(--bg-neutral-dark-700);\n --l1-foreground: var(--text-neutral-dark-50);\n --l1-foreground-hover: var(--text-base-white);\n --l2-foreground: var(--text-neutral-dark-100);\n --l2-foreground-hover: var(--text-neutral-dark-50);\n --l3-foreground: var(--text-neutral-dark-200);\n --l3-foreground-hover: var(--text-neutral-dark-300);\n --l1-border: var(--bg-neutral-dark-900);\n --l2-border: var(--bg-neutral-dark-800);\n --l3-border: var(--bg-neutral-dark-700);\n --primary-background: var(--bg-robin-500);\n --primary-background-hover: var(--bg-robin-400);\n --primary-foreground: var(--text-neutral-dark-50);\n --primary-foreground-hover: var(--text-base-white);\n --secondary-background: var(--bg-neutral-dark-900);\n --secondary-background-hover: var(--bg-neutral-dark-700);\n --secondary-foreground: var(--text-neutral-dark-100);\n --secondary-foreground-hover: var(--text-neutral-dark-50);\n --secondary-border: var(--bg-neutral-dark-800);\n --success-background: var(--bg-forest-600);\n --success-background-hover: var(--bg-forest-400);\n --success-foreground: var(--text-neutral-dark-50);\n --success-foreground-hover: var(--text-base-white);\n --warning-background: var(--bg-amber-600);\n --warning-background-hover: var(--bg-amber-400);\n --warning-foreground: var(--text-neutral-dark-50);\n --warning-foreground-hover: var(--text-base-white);\n --danger-background: var(--bg-cherry-500);\n --danger-background-hover: var(--bg-cherry-400);\n --danger-foreground: var(--text-neutral-dark-50);\n --danger-foreground-hover: var(--text-base-white);\n --l1-background-transparent: var(--bg-neutral-dark-1000);\n @supports (color: color-mix(in lab, red, red)) {\n --l1-background-transparent: color-mix( in srgb, var(--bg-neutral-dark-1000), transparent 100% );\n }\n --l1-background-60: var(--bg-neutral-dark-1000);\n @supports (color: color-mix(in lab, red, red)) {\n --l1-background-60: color-mix( in srgb, var(--bg-neutral-dark-1000), transparent 40% );\n }\n --l2-background-transparent: var(--bg-neutral-dark-900);\n @supports (color: color-mix(in lab, red, red)) {\n --l2-background-transparent: color-mix( in srgb, var(--bg-neutral-dark-900), transparent 100% );\n }\n --l2-background-60: var(--bg-neutral-dark-900);\n @supports (color: color-mix(in lab, red, red)) {\n --l2-background-60: color-mix( in srgb, var(--bg-neutral-dark-900), transparent 40% );\n }\n --l3-background-transparent: var(--bg-neutral-dark-800);\n @supports (color: color-mix(in lab, red, red)) {\n --l3-background-transparent: color-mix( in srgb, var(--bg-neutral-dark-800), transparent 100% );\n }\n --l3-background-60: var(--bg-neutral-dark-800);\n @supports (color: color-mix(in lab, red, red)) {\n --l3-background-60: color-mix( in srgb, var(--bg-neutral-dark-800), transparent 40% );\n }\n --callout-primary-background: var(--bg-robin-500);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-primary-background: color-mix( in srgb, var(--bg-robin-500), transparent 90% );\n }\n --callout-primary-border: var(--bg-robin-500);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-primary-border: color-mix( in srgb, var(--bg-robin-500), transparent 80% );\n }\n --callout-primary-title: var(--bg-robin-400);\n --callout-primary-description: var(--bg-robin-400);\n --callout-primary-icon: var(--bg-robin-300);\n --callout-success-background: var(--bg-forest-600);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-success-background: color-mix( in srgb, var(--bg-forest-600), transparent 90% );\n }\n --callout-success-border: var(--bg-forest-600);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-success-border: color-mix( in srgb, var(--bg-forest-600), transparent 80% );\n }\n --callout-success-title: var(--bg-forest-400);\n --callout-success-description: var(--bg-forest-400);\n --callout-success-icon: var(--bg-forest-300);\n --callout-warning-background: var(--bg-amber-600);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-warning-background: color-mix( in srgb, var(--bg-amber-600), transparent 90% );\n }\n --callout-warning-border: var(--bg-amber-600);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-warning-border: color-mix( in srgb, var(--bg-amber-600), transparent 80% );\n }\n --callout-warning-title: var(--bg-amber-400);\n --callout-warning-description: var(--bg-amber-400);\n --callout-warning-icon: var(--bg-amber-300);\n --callout-error-background: var(--bg-cherry-500);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-error-background: color-mix( in srgb, var(--bg-cherry-500), transparent 90% );\n }\n --callout-error-border: var(--bg-cherry-500);\n @supports (color: color-mix(in lab, red, red)) {\n --callout-error-border: color-mix( in srgb, var(--bg-cherry-500), transparent 80% );\n }\n --callout-error-title: var(--bg-cherry-400);\n --callout-error-description: var(--bg-cherry-400);\n --callout-error-icon: var(--bg-cherry-300);\n --accent-primary: var(--bg-robin-500);\n --accent-primary-hover: var(--bg-robin-400);\n --accent-primary-foreground: var(--text-ink-500);\n --accent-forest: var(--bg-forest-500);\n --accent-forest-hover: var(--bg-forest-400);\n --accent-forest-foreground: var(--text-ink-500);\n --accent-amber: var(--bg-amber-500);\n --accent-amber-hover: var(--bg-amber-400);\n --accent-amber-foreground: var(--text-ink-500);\n --accent-cherry: var(--bg-cherry-500);\n --accent-cherry-hover: var(--bg-cherry-400);\n --accent-cherry-foreground: var(--text-ink-500);\n --accent-aqua: var(--bg-aqua-500);\n --accent-aqua-hover: var(--bg-aqua-400);\n --accent-aqua-foreground: var(--text-ink-500);\n --accent-sakura: var(--bg-sakura-500);\n --accent-sakura-hover: var(--bg-sakura-400);\n --accent-sakura-foreground: var(--text-ink-500);\n --accent-sienna: var(--bg-sienna-500);\n --accent-sienna-hover: var(--bg-sienna-400);\n --accent-sienna-foreground: var(--text-ink-500);\n}\n@layer base {\n * {\n border-color: var(--color-border);\n }\n *:focus-visible {\n outline-style: var(--tw-outline-style);\n outline-width: 2px;\n outline-offset: 2px;\n outline-color: var(--color-ring);\n }\n body {\n background-color: var(--color-background);\n color: var(--color-foreground);\n }\n}\n[data-theme-color=blue] {\n --primary: var(--bg-robin-500);\n --primary-foreground: var(--text-vanilla-100);\n --ring: var(--bg-robin-500);\n --sidebar-primary: var(--bg-robin-500);\n --sidebar-ring: var(--bg-robin-500);\n}\n.dark[data-theme-color=blue] {\n --primary: var(--bg-robin-400);\n --primary-foreground: var(--text-ink-500);\n --ring: var(--bg-robin-400);\n --sidebar-primary: var(--bg-robin-400);\n --sidebar-ring: var(--bg-robin-400);\n}\n[data-theme-color=green] {\n --primary: var(--bg-forest-500);\n --primary-foreground: var(--text-vanilla-100);\n --ring: var(--bg-forest-500);\n --sidebar-primary: var(--bg-forest-500);\n --sidebar-ring: var(--bg-forest-500);\n}\n.dark[data-theme-color=green] {\n --primary: var(--bg-forest-400);\n --primary-foreground: var(--text-ink-500);\n --ring: var(--bg-forest-400);\n --sidebar-primary: var(--bg-forest-400);\n --sidebar-ring: var(--bg-forest-400);\n}\n[data-theme-color=amber] {\n --primary: var(--bg-amber-500);\n --primary-foreground: var(--text-vanilla-100);\n --ring: var(--bg-amber-500);\n --sidebar-primary: var(--bg-amber-500);\n --sidebar-ring: var(--bg-amber-500);\n}\n.dark[data-theme-color=amber] {\n --primary: var(--bg-amber-400);\n --primary-foreground: var(--text-ink-500);\n --ring: var(--bg-amber-400);\n --sidebar-primary: var(--bg-amber-400);\n --sidebar-ring: var(--bg-amber-400);\n}\n[data-theme-color=cherry] {\n --primary: var(--bg-cherry-500);\n --primary-foreground: var(--text-vanilla-100);\n --ring: var(--bg-cherry-500);\n --sidebar-primary: var(--bg-cherry-500);\n --sidebar-ring: var(--bg-cherry-500);\n}\n.dark[data-theme-color=cherry] {\n --primary: var(--bg-cherry-400);\n --primary-foreground: var(--text-ink-500);\n --ring: var(--bg-cherry-400);\n --sidebar-primary: var(--bg-cherry-400);\n --sidebar-ring: var(--bg-cherry-400);\n}\n[data-theme-color=aqua] {\n --primary: var(--bg-aqua-500);\n --primary-foreground: var(--text-vanilla-100);\n --ring: var(--bg-aqua-500);\n --sidebar-primary: var(--bg-aqua-500);\n --sidebar-ring: var(--bg-aqua-500);\n}\n.dark[data-theme-color=aqua] {\n --primary: var(--bg-aqua-400);\n --primary-foreground: var(--text-ink-500);\n --ring: var(--bg-aqua-400);\n --sidebar-primary: var(--bg-aqua-400);\n --sidebar-ring: var(--bg-aqua-400);\n}\n[data-slot=drawer-content] {\n --drawer-border: var(--bg-vanilla-300);\n}\n.dark [data-slot=drawer-content] {\n --drawer-border: var(--bg-slate-500);\n}\n[data-vaul-drawer][data-vaul-drawer-direction=right]::after,\n[data-vaul-drawer][data-vaul-drawer-direction=left]::after,\n[data-vaul-drawer][data-vaul-drawer-direction=top]::after,\n[data-vaul-drawer][data-vaul-drawer-direction=bottom]::after {\n background: transparent;\n}\n@keyframes enter {\n from {\n opacity: var(--tw-enter-opacity, 1);\n 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));\n }\n}\n@keyframes exit {\n to {\n opacity: var(--tw-exit-opacity, 1);\n 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));\n }\n}\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n }\n }\n}\n');
63
63
  function cn(...inputs) {
64
64
  return twMerge(clsx(inputs));
65
65
  }
@@ -120,7 +120,7 @@ function DrawerContent(_a) {
120
120
  "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
121
121
  "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:border-l",
122
122
  "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:border-r",
123
- "border border-vanilla-300 dark:border-slate-500",
123
+ "border border-[var(--drawer-border)]",
124
124
  type === "drawer" ? "rounded-md m-4" : "rounded-none",
125
125
  className
126
126
  )
@@ -200,31 +200,42 @@ function DrawerWrapper({
200
200
  allowOutsideClick = true,
201
201
  showOverlay = true,
202
202
  className,
203
- type = "drawer"
203
+ type = "drawer",
204
+ open,
205
+ onOpenChange
204
206
  }) {
205
- return /* @__PURE__ */ jsxs(Drawer, { direction, modal: allowOutsideClick, children: [
206
- /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: trigger }),
207
- /* @__PURE__ */ jsx(DrawerContent, { className, showOverlay, type, children: /* @__PURE__ */ jsxs(
208
- "div",
209
- {
210
- className: "w-full max-w-3xl",
211
- style: {
212
- width: type === "panel" ? "720px" : "auto",
213
- height: type === "panel" ? "100vh" : "auto"
214
- },
215
- children: [
216
- header && /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center justify-between border-b border-vanilla-300 dark:border-slate-500 px-4", children: [
217
- type === "panel" && showCloseButton && /* @__PURE__ */ jsx(CloseButton, { type }),
218
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-1", children: /* @__PURE__ */ jsx(DrawerTitle, { className: "font-inter text-sm font-normal", children: header.title }) }),
219
- type === "drawer" && showCloseButton && /* @__PURE__ */ jsx(CloseButton, { type })
220
- ] }),
221
- /* @__PURE__ */ jsx(DrawerHeader, { children: (header == null ? void 0 : header.description) && /* @__PURE__ */ jsx(DrawerDescription, { children: header.description }) }),
222
- content,
223
- footer && /* @__PURE__ */ jsx(DrawerFooter, { children: footer })
224
- ]
225
- }
226
- ) })
227
- ] });
207
+ return /* @__PURE__ */ jsxs(
208
+ Drawer,
209
+ {
210
+ direction,
211
+ modal: allowOutsideClick,
212
+ open,
213
+ onOpenChange,
214
+ children: [
215
+ trigger && /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: trigger }),
216
+ /* @__PURE__ */ jsx(DrawerContent, { className, showOverlay, type, children: /* @__PURE__ */ jsxs(
217
+ "div",
218
+ {
219
+ className: "w-full max-w-3xl",
220
+ style: {
221
+ width: type === "panel" ? "720px" : "auto",
222
+ height: type === "panel" ? "100vh" : "auto"
223
+ },
224
+ children: [
225
+ header && /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center justify-between border-b border-[var(--drawer-border)] px-4", children: [
226
+ type === "panel" && showCloseButton && /* @__PURE__ */ jsx(CloseButton, { type }),
227
+ /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-1", children: /* @__PURE__ */ jsx(DrawerTitle, { className: "font-inter text-sm font-normal", children: header.title }) }),
228
+ type === "drawer" && showCloseButton && /* @__PURE__ */ jsx(CloseButton, { type })
229
+ ] }),
230
+ (header == null ? void 0 : header.description) && /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerDescription, { children: header.description }) }),
231
+ content,
232
+ footer && /* @__PURE__ */ jsx(DrawerFooter, { children: footer })
233
+ ]
234
+ }
235
+ ) })
236
+ ]
237
+ }
238
+ );
228
239
  }
229
240
 
230
241
  export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DrawerWrapper };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@signozhq/drawer",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "exports": {
@@ -16,7 +16,7 @@
16
16
  "dist"
17
17
  ],
18
18
  "devDependencies": {
19
- "@tailwindcss/postcss": "^4.1.3",
19
+ "@tailwindcss/postcss": "^4.1.4",
20
20
  "@types/node": "^22.5.5",
21
21
  "@types/react": "^18.2.61",
22
22
  "@types/react-dom": "^18.2.19",
@@ -25,12 +25,12 @@
25
25
  "postcss": "^8.4.47",
26
26
  "react": "^18.2.0",
27
27
  "react-dom": "^18.2.0",
28
- "tailwindcss": "^4.1.3",
28
+ "tailwindcss": "^4.1.4",
29
29
  "tsup": "^8.0.0",
30
30
  "typescript": "^5.3.3",
31
31
  "@repo/eslint-config": "0.0.0",
32
- "@repo/typescript-config": "0.0.0",
33
- "@signozhq/tailwind-config": "0.0.0"
32
+ "@signozhq/tailwind-config": "0.0.1",
33
+ "@repo/typescript-config": "0.0.0"
34
34
  },
35
35
  "dependencies": {
36
36
  "@radix-ui/react-dialog": "^1.1.11",