@plusui/library 0.1.15 → 0.1.17

package/public/react/index.js

@@ -53,7 +53,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer base, plus-ui-core, theme, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    --color-red-50: oklch(97.1% 0.013 17.38);\n    --color-red-100: oklch(93.6% 0.032 17.717);\n    --color-red-200: oklch(88.5% 0.062 18.334);\n    --color-red-300: oklch(80.8% 0.114 19.571);\n    --color-red-400: oklch(70.4% 0.191 22.216);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-red-700: oklch(50.5% 0.213 27.518);\n    --color-red-800: oklch(44.4% 0.177 26.899);\n    --color-red-900: oklch(39.6% 0.141 25.723);\n    --color-red-950: oklch(25.8% 0.092 26.042);\n    --color-yellow-50: oklch(98.7% 0.026 102.212);\n    --color-yellow-100: oklch(97.3% 0.071 103.193);\n    --color-yellow-200: oklch(94.5% 0.129 101.54);\n    --color-yellow-300: oklch(90.5% 0.182 98.111);\n    --color-yellow-400: oklch(85.2% 0.199 91.936);\n    --color-yellow-500: oklch(79.5% 0.184 86.047);\n    --color-yellow-600: oklch(68.1% 0.162 75.834);\n    --color-yellow-700: oklch(55.4% 0.135 66.442);\n    --color-yellow-800: oklch(47.6% 0.114 61.907);\n    --color-yellow-900: oklch(42.1% 0.095 57.708);\n    --color-yellow-950: oklch(28.6% 0.066 53.813);\n    --color-green-50: oklch(98.2% 0.018 155.826);\n    --color-green-100: oklch(96.2% 0.044 156.743);\n    --color-green-200: oklch(92.5% 0.084 155.995);\n    --color-green-300: oklch(87.1% 0.15 154.449);\n    --color-green-400: oklch(79.2% 0.209 151.711);\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-green-700: oklch(52.7% 0.154 150.069);\n    --color-green-800: oklch(44.8% 0.119 151.328);\n    --color-green-900: oklch(39.3% 0.095 152.535);\n    --color-green-950: oklch(26.6% 0.065 152.934);\n    --color-blue-50: oklch(97% 0.014 254.604);\n    --color-blue-100: oklch(93.2% 0.032 255.585);\n    --color-blue-200: oklch(88.2% 0.059 254.128);\n    --color-blue-300: oklch(80.9% 0.105 251.813);\n    --color-blue-400: oklch(70.7% 0.165 254.624);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-blue-600: oklch(54.6% 0.245 262.881);\n    --color-blue-700: oklch(48.8% 0.243 264.376);\n    --color-blue-800: oklch(42.4% 0.199 265.638);\n    --color-blue-900: oklch(37.9% 0.146 265.522);\n    --color-blue-950: oklch(28.2% 0.091 267.935);\n    --color-indigo-50: oklch(96.2% 0.018 272.314);\n    --color-indigo-100: oklch(93% 0.034 272.788);\n    --color-indigo-200: oklch(87% 0.065 274.039);\n    --color-indigo-300: oklch(78.5% 0.115 274.713);\n    --color-indigo-400: oklch(67.3% 0.182 276.935);\n    --color-indigo-500: oklch(58.5% 0.233 277.117);\n    --color-indigo-600: oklch(51.1% 0.262 276.966);\n    --color-indigo-700: oklch(45.7% 0.24 277.023);\n    --color-indigo-800: oklch(39.8% 0.195 277.366);\n    --color-indigo-900: oklch(35.9% 0.144 278.697);\n    --color-indigo-950: oklch(25.7% 0.09 281.288);\n    --color-purple-100: oklch(94.6% 0.033 307.174);\n    --color-purple-300: oklch(82.7% 0.119 306.383);\n    --color-purple-700: oklch(49.6% 0.265 301.924);\n    --color-purple-900: oklch(38.1% 0.176 304.987);\n    --color-gray-50: oklch(98.5% 0.002 247.839);\n    --color-gray-100: oklch(96.7% 0.003 264.542);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-gray-900: oklch(21% 0.034 264.665);\n    --color-gray-950: oklch(13% 0.028 261.692);\n    --color-neutral-300: oklch(87% 0 0);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-sm: 24rem;\n    --container-md: 28rem;\n    --container-lg: 32rem;\n    --container-xl: 36rem;\n    --container-2xl: 42rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --text-6xl: 3.75rem;\n    --text-6xl--line-height: 1;\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-sm: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 2s linear infinite;\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    --plus-color-base-white: var(--color-white);\n    --plus-color-base-black: var(--color-black);\n    --plus-color-base-transparent: transparent;\n    --plus-color-neutral-100: var(--color-gray-100);\n    --plus-color-neutral-200: var(--color-gray-200);\n    --plus-color-neutral-300: var(--color-gray-300);\n    --plus-color-neutral-400: var(--color-gray-400);\n    --plus-color-neutral-500: var(--color-gray-500);\n    --plus-color-neutral-600: var(--color-gray-600);\n    --plus-color-neutral-700: var(--color-gray-700);\n    --plus-color-neutral-800: var(--color-gray-800);\n    --plus-color-neutral-900: var(--color-gray-900);\n    --plus-color-neutral-950: var(--color-gray-950);\n    --plus-color-primary-100: var(--color-indigo-100);\n    --plus-color-primary-200: var(--color-indigo-200);\n    --plus-color-primary-300: var(--color-indigo-300);\n    --plus-color-primary-700: var(--color-indigo-700);\n    --plus-color-primary-800: var(--color-indigo-800);\n    --plus-color-primary-900: var(--color-indigo-900);\n    --plus-color-info-100: var(--color-blue-100);\n    --plus-color-info-200: var(--color-blue-200);\n    --plus-color-info-300: var(--color-blue-300);\n    --plus-color-info-700: var(--color-blue-700);\n    --plus-color-info-800: var(--color-blue-800);\n    --plus-color-info-900: var(--color-blue-900);\n    --plus-color-success-100: var(--color-green-100);\n    --plus-color-success-200: var(--color-green-200);\n    --plus-color-success-300: var(--color-green-300);\n    --plus-color-success-700: var(--color-green-700);\n    --plus-color-success-800: var(--color-green-800);\n    --plus-color-success-900: var(--color-green-900);\n    --plus-color-warning-100: var(--color-yellow-100);\n    --plus-color-warning-200: var(--color-yellow-200);\n    --plus-color-warning-300: var(--color-yellow-300);\n    --plus-color-warning-700: var(--color-yellow-700);\n    --plus-color-warning-800: var(--color-yellow-800);\n    --plus-color-warning-900: var(--color-yellow-900);\n    --plus-color-danger-100: var(--color-red-100);\n    --plus-color-danger-200: var(--color-red-200);\n    --plus-color-danger-300: var(--color-red-300);\n    --plus-color-danger-700: var(--color-red-700);\n    --plus-color-danger-800: var(--color-red-800);\n    --plus-color-danger-900: var(--color-red-900);\n    --text-xxxs: 0.5rem;\n    --text-xxxs--line-height: calc(1 / 0.5);\n    --plus-border-radius-default: var(--radius-sm);\n    --plus-border-radius-modal: var(--radius-lg);\n    --radius-default: var(--plus-border-radius-default);\n  }\n}\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .visible {\n    visibility: visible;\n  }\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  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .inset-x-0 {\n    inset-inline: calc(var(--spacing) * 0);\n  }\n  .inset-y-0 {\n    inset-block: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5);\n  }\n  .top-1 {\n    top: calc(var(--spacing) * 1);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-2 {\n    top: calc(var(--spacing) * 2);\n  }\n  .top-5 {\n    top: calc(var(--spacing) * 5);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2);\n  }\n  .right-5 {\n    right: calc(var(--spacing) * 5);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-5 {\n    bottom: calc(var(--spacing) * 5);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-0\\.5 {\n    left: calc(var(--spacing) * 0.5);\n  }\n  .left-1 {\n    left: calc(var(--spacing) * 1);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-5 {\n    left: calc(var(--spacing) * 5);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-40 {\n    z-index: 40;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-\\[1\\] {\n    z-index: 1;\n  }\n  .z-\\[1000\\] {\n    z-index: 1000;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .mx-\\(--divider-spacing\\) {\n    margin-inline: var(--divider-spacing);\n  }\n  .mx-1 {\n    margin-inline: calc(var(--spacing) * 1);\n  }\n  .mx-1\\.5 {\n    margin-inline: calc(var(--spacing) * 1.5);\n  }\n  .mx-2 {\n    margin-inline: calc(var(--spacing) * 2);\n  }\n  .mx-4 {\n    margin-inline: 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-10 {\n    margin-top: calc(var(--spacing) * 10);\n  }\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n  .ml-1\\.5 {\n    margin-left: calc(var(--spacing) * 1.5);\n  }\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n  .ml-3 {\n    margin-left: calc(var(--spacing) * 3);\n  }\n  .box-content {\n    box-sizing: content-box;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2);\n    height: calc(var(--spacing) * 2);\n  }\n  .size-2\\.5 {\n    width: calc(var(--spacing) * 2.5);\n    height: calc(var(--spacing) * 2.5);\n  }\n  .size-3 {\n    width: calc(var(--spacing) * 3);\n    height: calc(var(--spacing) * 3);\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-4\\.5 {\n    width: calc(var(--spacing) * 4.5);\n    height: calc(var(--spacing) * 4.5);\n  }\n  .size-5 {\n    width: calc(var(--spacing) * 5);\n    height: calc(var(--spacing) * 5);\n  }\n  .size-6 {\n    width: calc(var(--spacing) * 6);\n    height: calc(var(--spacing) * 6);\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9);\n    height: calc(var(--spacing) * 9);\n  }\n  .size-10 {\n    width: calc(var(--spacing) * 10);\n    height: calc(var(--spacing) * 10);\n  }\n  .size-11 {\n    width: calc(var(--spacing) * 11);\n    height: calc(var(--spacing) * 11);\n  }\n  .size-\\[var\\(--size\\)\\] {\n    width: var(--size);\n    height: var(--size);\n  }\n  .h-0 {\n    height: calc(var(--spacing) * 0);\n  }\n  .h-1\\.5 {\n    height: calc(var(--spacing) * 1.5);\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-2\\.5 {\n    height: calc(var(--spacing) * 2.5);\n  }\n  .h-2\\/5 {\n    height: calc(2/5 * 100%);\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-4\\.5 {\n    height: calc(var(--spacing) * 4.5);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-6\\.5 {\n    height: calc(var(--spacing) * 6.5);\n  }\n  .h-7 {\n    height: calc(var(--spacing) * 7);\n  }\n  .h-96 {\n    height: calc(var(--spacing) * 96);\n  }\n  .h-\\[48px\\] {\n    height: 48px;\n  }\n  .h-\\[52px\\] {\n    height: 52px;\n  }\n  .h-fit {\n    height: fit-content;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-80 {\n    max-height: calc(var(--spacing) * 80);\n  }\n  .max-h-\\[90vh\\] {\n    max-height: 90vh;\n  }\n  .min-h-\\[52px\\] {\n    min-height: 52px;\n  }\n  .min-h-\\[60px\\] {\n    min-height: 60px;\n  }\n  .min-h-\\[68px\\] {\n    min-height: 68px;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-1\\.5 {\n    width: calc(var(--spacing) * 1.5);\n  }\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n  .w-2\\.5 {\n    width: calc(var(--spacing) * 2.5);\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-4\\.5 {\n    width: calc(var(--spacing) * 4.5);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n  .w-13 {\n    width: calc(var(--spacing) * 13);\n  }\n  .w-14 {\n    width: calc(var(--spacing) * 14);\n  }\n  .w-60 {\n    width: calc(var(--spacing) * 60);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72);\n  }\n  .w-96 {\n    width: calc(var(--spacing) * 96);\n  }\n  .w-\\[1em\\] {\n    width: 1em;\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-2xl {\n    max-width: var(--container-2xl);\n  }\n  .max-w-80 {\n    max-width: calc(var(--spacing) * 80);\n  }\n  .max-w-96 {\n    max-width: calc(var(--spacing) * 96);\n  }\n  .max-w-\\[256px\\] {\n    max-width: 256px;\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem);\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .max-w-lg {\n    max-width: var(--container-lg);\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .max-w-none {\n    max-width: none;\n  }\n  .max-w-sm {\n    max-width: var(--container-sm);\n  }\n  .max-w-xl {\n    max-width: var(--container-xl);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-4 {\n    min-width: calc(var(--spacing) * 4);\n  }\n  .min-w-5 {\n    min-width: calc(var(--spacing) * 5);\n  }\n  .min-w-6 {\n    min-width: calc(var(--spacing) * 6);\n  }\n  .min-w-9 {\n    min-width: calc(var(--spacing) * 9);\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-shrink-0 {\n    flex-shrink: 0;\n  }\n  .origin-left {\n    transform-origin: left;\n  }\n  .origin-right {\n    transform-origin: right;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-x-full {\n    --tw-translate-x: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-0 {\n    --tw-translate-x: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[-50\\%\\] {\n    --tw-translate-x: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[50\\%\\] {\n    --tw-translate-x: 50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[calc\\(theme\\(width\\.10\\)-theme\\(width\\.5\\)\\)\\] {\n    --tw-translate-x: calc(2.5rem - 1.25rem);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[calc\\(theme\\(width\\.14\\)-theme\\(width\\.7\\)\\)\\] {\n    --tw-translate-x: calc(3.5rem - 1.75rem);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[calc\\(var\\(--spacing\\)\\*13-var\\(--spacing\\)\\*6\\.5\\)\\] {\n    --tw-translate-x: calc(var(--spacing) * 13 - var(--spacing) * 6.5);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-full {\n    --tw-translate-x: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-full {\n    --tw-translate-y: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-\\[-50\\%\\] {\n    --tw-translate-y: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-\\[50\\%\\] {\n    --tw-translate-y: 50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-full {\n    --tw-translate-y: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-0 {\n    --tw-scale-x: 0%;\n    --tw-scale-y: 0%;\n    --tw-scale-z: 0%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-95 {\n    --tw-scale-x: 95%;\n    --tw-scale-y: 95%;\n    --tw-scale-z: 95%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .rotate-45 {\n    rotate: 45deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .cursor-text {\n    cursor: text;\n  }\n  .cursor-wait {\n    cursor: wait;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .resize-x {\n    resize: horizontal;\n  }\n  .resize-y {\n    resize: vertical;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-baseline {\n    align-items: baseline;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-2\\.5 {\n    gap: calc(var(--spacing) * 2.5);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5);\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6);\n  }\n  .gap-x-5 {\n    column-gap: calc(var(--spacing) * 5);\n  }\n  .gap-y-2 {\n    row-gap: calc(var(--spacing) * 2);\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-default {\n    border-radius: var(--radius-default);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\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  .rounded-t-lg {\n    border-top-left-radius: var(--radius-lg);\n    border-top-right-radius: var(--radius-lg);\n  }\n  .rounded-b-lg {\n    border-bottom-right-radius: var(--radius-lg);\n    border-bottom-left-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-0 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 0px;\n  }\n  .border-r-0 {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 0px;\n  }\n  .border-r-2 {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 2px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-b-0 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 0px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-l-0 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 0px;\n  }\n  .border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-\\(--d-border\\) {\n    border-color: var(--d-border);\n  }\n  .border-\\[var\\(--border-color\\,var\\(--i-border-color\\)\\)\\] {\n    border-color: var(--border-color,var(--i-border-color));\n  }\n  .border-color-danger {\n    border-color: var(--plus-color-border-danger);\n  }\n  .border-color-default {\n    border-color: var(--plus-color-border-default);\n  }\n  .border-color-disabled {\n    border-color: var(--plus-color-border-disabled);\n  }\n  .border-color-dynamic {\n    border-color: var(--border-color,var(--i-border-color));\n  }\n  .border-color-primary {\n    border-color: var(--plus-color-border-primary);\n  }\n  .border-transparent {\n    border-color: transparent;\n  }\n  .border-r-color-primary {\n    border-right-color: var(--plus-color-border-primary);\n  }\n  .border-r-transparent {\n    border-right-color: transparent;\n  }\n  .border-b-color-primary {\n    border-bottom-color: var(--plus-color-border-primary);\n  }\n  .border-b-transparent {\n    border-bottom-color: transparent;\n  }\n  .bg-\\(--d-bg-checked\\) {\n    background-color: var(--d-bg-checked);\n  }\n  .bg-\\(--d-bg-default\\) {\n    background-color: var(--d-bg-default);\n  }\n  .bg-\\(--d-bg-loading\\) {\n    background-color: var(--d-bg-loading);\n  }\n  .bg-\\(--d-dot-bg\\) {\n    background-color: var(--d-dot-bg);\n  }\n  .bg-\\(--d-switch-bg\\) {\n    background-color: var(--d-switch-bg);\n  }\n  .bg-\\[var\\(--bg-color\\,var\\(--i-bg-color\\)\\)\\] {\n    background-color: var(--bg-color,var(--i-bg-color));\n  }\n  .bg-\\[var\\(--i-bg-default\\)\\] {\n    background-color: var(--i-bg-default);\n  }\n  .bg-\\[var\\(--i-selected-bg\\)\\] {\n    background-color: var(--i-selected-bg);\n  }\n  .bg-\\[var\\(--tag-bg-color\\)\\] {\n    background-color: var(--tag-bg-color);\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-blue-600 {\n    background-color: var(--color-blue-600);\n  }\n  .bg-color-danger-default {\n    background-color: var(--plus-color-background-danger-default);\n  }\n  .bg-color-danger-invert-default {\n    background-color: var(--plus-color-background-danger-invert-default);\n  }\n  .bg-color-default-default {\n    background-color: var(--plus-color-background-default-default);\n  }\n  .bg-color-default-invert-default {\n    background-color: var(--plus-color-background-default-invert-default);\n  }\n  .bg-color-disabled {\n    background-color: var(--plus-color-background-disabled-default);\n  }\n  .bg-color-dynamic-default {\n    background-color: var(--bg-default,var(--i-bg-default));\n  }\n  .bg-color-modal {\n    background-color: var(--plus-color-background-modal);\n  }\n  .bg-color-overlay\\/50 {\n    background-color: var(--plus-color-background-overlay);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--plus-color-background-overlay) 50%, transparent);\n    }\n  }\n  .bg-color-primary-default {\n    background-color: var(--plus-color-background-primary-default);\n  }\n  .bg-color-surface {\n    background-color: var(--plus-color-background-surface);\n  }\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n  .bg-inherit {\n    background-color: inherit;\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .fill-\\(--d-text\\) {\n    fill: var(--d-text);\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .object-cover {\n    object-fit: cover;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-0\\.5 {\n    padding: calc(var(--spacing) * 0.5);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-1\\.5 {\n    padding: calc(var(--spacing) * 1.5);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-3\\.5 {\n    padding: calc(var(--spacing) * 3.5);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-5 {\n    padding: calc(var(--spacing) * 5);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-0 {\n    padding-inline: calc(var(--spacing) * 0);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-1\\.5 {\n    padding-inline: calc(var(--spacing) * 1.5);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(var(--spacing) * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-5 {\n    padding-inline: calc(var(--spacing) * 5);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-0 {\n    padding-block: calc(var(--spacing) * 0);\n  }\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(var(--spacing) * 2.5);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pr-2\\.5 {\n    padding-right: calc(var(--spacing) * 2.5);\n  }\n  .pr-3 {\n    padding-right: calc(var(--spacing) * 3);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-2\\.5 {\n    padding-left: calc(var(--spacing) * 2.5);\n  }\n  .pl-3 {\n    padding-left: calc(var(--spacing) * 3);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .align-middle {\n    vertical-align: middle;\n  }\n  .plus-ui-element {\n    font-family: var(--font-sans);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-3xl {\n    font-size: var(--text-3xl);\n    line-height: var(--tw-leading, var(--text-3xl--line-height));\n  }\n  .text-6xl {\n    font-size: var(--text-6xl);\n    line-height: var(--tw-leading, var(--text-6xl--line-height));\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-xxxs {\n    font-size: var(--text-xxxs);\n    line-height: var(--tw-leading, var(--text-xxxs--line-height));\n  }\n  .text-\\[6px\\] {\n    font-size: 6px;\n  }\n  .text-\\[8px\\] {\n    font-size: 8px;\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .text-\\[14px\\] {\n    font-size: 14px;\n  }\n  .text-\\[calc\\(var\\(--size\\)\\/2\\.50\\)\\] {\n    font-size: calc(var(--size) / 2.50);\n  }\n  .leading-\\[6px\\] {\n    --tw-leading: 6px;\n    line-height: 6px;\n  }\n  .leading-\\[8px\\] {\n    --tw-leading: 8px;\n    line-height: 8px;\n  }\n  .leading-\\[10px\\] {\n    --tw-leading: 10px;\n    line-height: 10px;\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\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-pretty {\n    text-wrap: pretty;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-\\(--d-dot-text\\) {\n    color: var(--d-dot-text);\n  }\n  .text-\\(--d-text\\) {\n    color: var(--d-text);\n  }\n  .text-\\[var\\(--description-color\\,var\\(--i-description-color\\)\\)\\] {\n    color: var(--description-color,var(--i-description-color));\n  }\n  .text-\\[var\\(--dismiss-color\\,var\\(--i-dismiss-color\\)\\)\\] {\n    color: var(--dismiss-color,var(--i-dismiss-color));\n  }\n  .text-\\[var\\(--i-text-color\\)\\] {\n    color: var(--i-text-color);\n  }\n  .text-\\[var\\(--icon-color\\,var\\(--i-icon-color\\)\\)\\] {\n    color: var(--icon-color,var(--i-icon-color));\n  }\n  .text-\\[var\\(--message-color\\,var\\(--i-message-color\\)\\)\\] {\n    color: var(--message-color,var(--i-message-color));\n  }\n  .text-\\[var\\(--tag-text-color\\)\\] {\n    color: var(--tag-text-color);\n  }\n  .text-color-base {\n    color: var(--plus-color-text-base);\n  }\n  .text-color-caption {\n    color: var(--plus-color-text-caption);\n  }\n  .text-color-danger {\n    color: var(--plus-color-text-danger);\n  }\n  .text-color-default {\n    color: var(--plus-color-text-default);\n  }\n  .text-color-disabled {\n    color: var(--plus-color-text-disabled);\n  }\n  .text-color-dynamic {\n    color: var(--text-color,var(--i-text-color));\n  }\n  .text-color-info {\n    color: var(--plus-color-text-info);\n  }\n  .text-color-link {\n    color: var(--plus-color-text-link);\n  }\n  .text-color-placeholder {\n    color: var(--plus-color-text-placeholder);\n  }\n  .text-color-primary {\n    color: var(--plus-color-text-primary);\n  }\n  .text-color-success {\n    color: var(--plus-color-text-success);\n  }\n  .text-color-warning {\n    color: var(--plus-color-text-warning);\n  }\n  .text-inherit {\n    color: inherit;\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .antialiased {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-60 {\n    opacity: 60%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-default {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    --tw-ring-color: var(--plus-color-border-ring);\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    outline-style: var(--tw-outline-style);\n    outline-width: 0px;\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .invert {\n    --tw-invert: invert(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\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  .transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .duration-400 {\n    --tw-duration: 400ms;\n    transition-duration: 400ms;\n  }\n  .duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .ease-bounce {\n    --tw-ease: cubic-bezier(0.34, 1.56, 0.64, 1);\n    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .group-hover\\/base\\:\\!bg-\\(--d-switch-bg\\) {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        background-color: var(--d-switch-bg) !important;\n      }\n    }\n  }\n  .group-hover\\/base\\:bg-\\(--d-switch-bg-hover\\) {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        background-color: var(--d-switch-bg-hover);\n      }\n    }\n  }\n  .group-hover\\/base\\:bg-color-danger-hovered {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        background-color: var(--plus-color-background-danger-hovered);\n      }\n    }\n  }\n  .group-hover\\/base\\:bg-color-danger-invert-hovered {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        background-color: var(--plus-color-background-danger-invert-hovered);\n      }\n    }\n  }\n  .group-hover\\/base\\:bg-color-default-hovered {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        background-color: var(--plus-color-background-default-hovered);\n      }\n    }\n  }\n  .group-hover\\/base\\:\\!shadow-none {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        --tw-shadow: 0 0 #0000 !important;\n        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n      }\n    }\n  }\n  .group-hover\\/base\\:shadow-sm {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      }\n    }\n  }\n  .group-active\\/base\\:-ml-1 {\n    &:is(:where(.group\\/base):active *) {\n      margin-left: calc(var(--spacing) * -1);\n    }\n  }\n  .group-active\\/base\\:-ml-1\\.5 {\n    &:is(:where(.group\\/base):active *) {\n      margin-left: calc(var(--spacing) * -1.5);\n    }\n  }\n  .group-active\\/base\\:h-4 {\n    &:is(:where(.group\\/base):active *) {\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .group-active\\/base\\:h-4\\.5 {\n    &:is(:where(.group\\/base):active *) {\n      height: calc(var(--spacing) * 4.5);\n    }\n  }\n  .group-active\\/base\\:h-5 {\n    &:is(:where(.group\\/base):active *) {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .group-active\\/base\\:w-5 {\n    &:is(:where(.group\\/base):active *) {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .group-active\\/base\\:w-6 {\n    &:is(:where(.group\\/base):active *) {\n      width: calc(var(--spacing) * 6);\n    }\n  }\n  .group-active\\/base\\:w-6\\.5 {\n    &:is(:where(.group\\/base):active *) {\n      width: calc(var(--spacing) * 6.5);\n    }\n  }\n  .group-active\\/base\\:\\!transform-none {\n    &:is(:where(.group\\/base):active *) {\n      transform: none !important;\n    }\n  }\n  .group-active\\/base\\:\\!bg-\\(--d-switch-bg\\) {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--d-switch-bg) !important;\n    }\n  }\n  .group-active\\/base\\:bg-\\(--d-switch-bg-active\\) {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--d-switch-bg-active);\n    }\n  }\n  .group-active\\/base\\:bg-color-danger-invert-pressed {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--plus-color-background-danger-invert-pressed);\n    }\n  }\n  .group-active\\/base\\:bg-color-danger-pressed {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--plus-color-background-danger-pressed);\n    }\n  }\n  .group-active\\/base\\:bg-color-default-pressed {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--plus-color-background-default-pressed);\n    }\n  }\n  .group-active\\/base\\:bg-color-primary-pressed {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--plus-color-background-primary-pressed);\n    }\n  }\n  .peer-checked\\:scale-100 {\n    &:is(:where(.peer):checked ~ *) {\n      --tw-scale-x: 100%;\n      --tw-scale-y: 100%;\n      --tw-scale-z: 100%;\n      scale: var(--tw-scale-x) var(--tw-scale-y);\n    }\n  }\n  .peer-checked\\:opacity-100 {\n    &:is(:where(.peer):checked ~ *) {\n      opacity: 100%;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed;\n    }\n  }\n  .placeholder\\:text-color-danger {\n    &::placeholder {\n      color: var(--plus-color-text-danger);\n    }\n  }\n  .placeholder\\:text-color-default {\n    &::placeholder {\n      color: var(--plus-color-text-default);\n    }\n  }\n  .placeholder\\:text-color-disabled {\n    &::placeholder {\n      color: var(--plus-color-text-disabled);\n    }\n  }\n  .placeholder\\:text-color-placeholder {\n    &::placeholder {\n      color: var(--plus-color-text-placeholder);\n    }\n  }\n  .before\\:absolute {\n    &::before {\n      content: var(--tw-content);\n      position: absolute;\n    }\n  }\n  .before\\:inset-0 {\n    &::before {\n      content: var(--tw-content);\n      inset: calc(var(--spacing) * 0);\n    }\n  }\n  .before\\:-top-1\\.5 {\n    &::before {\n      content: var(--tw-content);\n      top: calc(var(--spacing) * -1.5);\n    }\n  }\n  .before\\:-left-3 {\n    &::before {\n      content: var(--tw-content);\n      left: calc(var(--spacing) * -3);\n    }\n  }\n  .before\\:z-10 {\n    &::before {\n      content: var(--tw-content);\n      z-index: 10;\n    }\n  }\n  .before\\:h-10 {\n    &::before {\n      content: var(--tw-content);\n      height: calc(var(--spacing) * 10);\n    }\n  }\n  .before\\:w-10 {\n    &::before {\n      content: var(--tw-content);\n      width: calc(var(--spacing) * 10);\n    }\n  }\n  .before\\:cursor-pointer {\n    &::before {\n      content: var(--tw-content);\n      cursor: pointer;\n    }\n  }\n  .before\\:rounded-full {\n    &::before {\n      content: var(--tw-content);\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .before\\:bg-transparent {\n    &::before {\n      content: var(--tw-content);\n      background-color: transparent;\n    }\n  }\n  .before\\:content-\\[\\'\\'\\] {\n    &::before {\n      content: var(--tw-content);\n      --tw-content: '';\n      content: var(--tw-content);\n    }\n  }\n  .after\\:ml-0\\.5 {\n    &::after {\n      content: var(--tw-content);\n      margin-left: calc(var(--spacing) * 0.5);\n    }\n  }\n  .after\\:text-color-default {\n    &::after {\n      content: var(--tw-content);\n      color: var(--plus-color-text-default);\n    }\n  }\n  .after\\:text-color-disabled {\n    &::after {\n      content: var(--tw-content);\n      color: var(--plus-color-text-disabled);\n    }\n  }\n  .after\\:content-\\[\\'\\*\\'\\] {\n    &::after {\n      content: var(--tw-content);\n      --tw-content: '*';\n      content: var(--tw-content);\n    }\n  }\n  .visited\\:text-color-visited {\n    &:visited {\n      color: var(--plus-color-text-visited);\n    }\n  }\n  .empty\\:hidden {\n    &:empty {\n      display: none;\n    }\n  }\n  .focus-within\\:z-\\[1\\] {\n    &:focus-within {\n      z-index: 1;\n    }\n  }\n  .focus-within\\:border-color-danger {\n    &:focus-within {\n      border-color: var(--plus-color-border-danger);\n    }\n  }\n  .focus-within\\:border-color-primary {\n    &:focus-within {\n      border-color: var(--plus-color-border-primary);\n    }\n  }\n  .focus-within\\:ring-default {\n    &:focus-within {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      --tw-ring-color: var(--plus-color-border-ring);\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      outline-style: var(--tw-outline-style);\n      outline-width: 0px;\n    }\n  }\n  .hover\\:border-color-danger {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--plus-color-border-danger);\n      }\n    }\n  }\n  .hover\\:border-color-disabled {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--plus-color-border-disabled);\n      }\n    }\n  }\n  .hover\\:border-color-primary {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--plus-color-border-primary);\n      }\n    }\n  }\n  .hover\\:bg-\\[var\\(--i-bg-hovered\\)\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--i-bg-hovered);\n      }\n    }\n  }\n  .hover\\:bg-blue-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-blue-600);\n      }\n    }\n  }\n  .hover\\:bg-color-default-hovered {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--plus-color-background-default-hovered);\n      }\n    }\n  }\n  .hover\\:bg-color-dynamic-hovered {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bg-hovered,var(--i-bg-hovered));\n      }\n    }\n  }\n  .hover\\:bg-color-primary-hovered {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--plus-color-background-primary-hovered);\n      }\n    }\n  }\n  .hover\\:bg-green-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-green-600);\n      }\n    }\n  }\n  .hover\\:bg-transparent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: transparent;\n      }\n    }\n  }\n  .hover\\:text-color-caption {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--plus-color-text-caption);\n      }\n    }\n  }\n  .hover\\:text-color-default {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--plus-color-text-default);\n      }\n    }\n  }\n  .hover\\:text-color-primary {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--plus-color-text-primary);\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .focus\\:ring-1 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-offset-1 {\n    &:focus {\n      --tw-ring-offset-width: 1px;\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  .focus-visible\\:bg-\\(--d-bg-focused\\) {\n    &:focus-visible {\n      background-color: var(--d-bg-focused);\n    }\n  }\n  .focus-visible\\:bg-color-dynamic-focused {\n    &:focus-visible {\n      background-color: var(--bg-focused,var(--i-bg-focused));\n    }\n  }\n  .focus-visible\\:ring-default {\n    &:focus-visible {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      --tw-ring-color: var(--plus-color-border-ring);\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      outline-style: var(--tw-outline-style);\n      outline-width: 0px;\n    }\n  }\n  .focus-visible\\:ring-2 {\n    &:focus-visible {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus-visible\\:outline-none {\n    &:focus-visible {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .active\\:bg-\\[var\\(--i-bg-pressed\\)\\] {\n    &:active {\n      background-color: var(--i-bg-pressed);\n    }\n  }\n  .active\\:bg-color-default-pressed {\n    &:active {\n      background-color: var(--plus-color-background-default-pressed);\n    }\n  }\n  .active\\:bg-color-dynamic-pressed {\n    &:active {\n      background-color: var(--bg-pressed,var(--i-bg-pressed));\n    }\n  }\n  .active\\:bg-color-primary-pressed {\n    &:active {\n      background-color: var(--plus-color-background-primary-pressed);\n    }\n  }\n  .enabled\\:hover\\:bg-\\(--d-bg-hovered\\) {\n    &:enabled {\n      &:hover {\n        @media (hover: hover) {\n          background-color: var(--d-bg-hovered);\n        }\n      }\n    }\n  }\n  .enabled\\:focus-visible\\:bg-\\(--d-bg-focused\\) {\n    &:enabled {\n      &:focus-visible {\n        background-color: var(--d-bg-focused);\n      }\n    }\n  }\n  .enabled\\:focus-visible\\:ring-default {\n    &:enabled {\n      &:focus-visible {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n        --tw-ring-color: var(--plus-color-border-ring);\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        outline-style: var(--tw-outline-style);\n        outline-width: 0px;\n      }\n    }\n  }\n  .enabled\\:active\\:bg-\\(--d-bg-pressed\\) {\n    &:enabled {\n      &:active {\n        background-color: var(--d-bg-pressed);\n      }\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .motion-reduce\\:transition-none {\n    @media (prefers-reduced-motion: reduce) {\n      transition-property: none;\n    }\n  }\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+1F00-1FFF;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-greek-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}\n:root {\n  --plus-color-background-surface: var(--plus-color-base-white);\n  --plus-color-background-disabled-default: var(--plus-color-neutral-200);\n  --plus-color-background-transparent: var(--plus-color-base-transparent);\n  --plus-color-background-divider: var(--plus-color-neutral-400);\n  --plus-color-background-modal: var(--plus-color-base-white);\n  --plus-color-background-overlay: var(--plus-color-neutral-950);\n  --plus-color-background-default-default: var(--plus-color-neutral-100);\n  --plus-color-background-default-hovered: var(--plus-color-neutral-200);\n  --plus-color-background-default-pressed: var(--plus-color-neutral-300);\n  --plus-color-background-default-focused: var(--plus-color-neutral-100);\n  --plus-color-background-default-loading: var(--plus-color-neutral-300);\n  --plus-color-background-default-invert-default: var(--plus-color-neutral-700);\n  --plus-color-background-default-invert-hovered: var(--plus-color-neutral-800);\n  --plus-color-background-default-invert-pressed: var(--plus-color-neutral-900);\n  --plus-color-background-default-invert-focused: var(--plus-color-neutral-700);\n  --plus-color-background-default-invert-loading: var(--plus-color-neutral-900);\n  --plus-color-background-primary-default: var(--plus-color-primary-700);\n  --plus-color-background-primary-hovered: var(--plus-color-primary-800);\n  --plus-color-background-primary-pressed: var(--plus-color-primary-900);\n  --plus-color-background-primary-focused: var(--plus-color-primary-700);\n  --plus-color-background-primary-loading: var(--plus-color-primary-900);\n  --plus-color-background-primary-invert-default: var(--plus-color-primary-100);\n  --plus-color-background-primary-invert-hovered: var(--plus-color-primary-200);\n  --plus-color-background-primary-invert-pressed: var(--plus-color-primary-300);\n  --plus-color-background-primary-invert-focused: var(--plus-color-primary-100);\n  --plus-color-background-primary-invert-loading: var(--plus-color-primary-300);\n  --plus-color-background-info-default: var(--plus-color-info-700);\n  --plus-color-background-info-hovered: var(--plus-color-info-800);\n  --plus-color-background-info-pressed: var(--plus-color-info-900);\n  --plus-color-background-info-focused: var(--plus-color-info-700);\n  --plus-color-background-info-loading: var(--plus-color-info-900);\n  --plus-color-background-info-invert-default: var(--plus-color-info-100);\n  --plus-color-background-info-invert-hovered: var(--plus-color-info-200);\n  --plus-color-background-info-invert-pressed: var(--plus-color-info-300);\n  --plus-color-background-info-invert-focused: var(--plus-color-info-100);\n  --plus-color-background-info-invert-loading: var(--plus-color-info-300);\n  --plus-color-background-success-default: var(--plus-color-success-700);\n  --plus-color-background-success-hovered: var(--plus-color-success-800);\n  --plus-color-background-success-pressed: var(--plus-color-success-900);\n  --plus-color-background-success-focused: var(--plus-color-success-700);\n  --plus-color-background-success-loading: var(--plus-color-success-900);\n  --plus-color-background-success-invert-default: var(--plus-color-success-100);\n  --plus-color-background-success-invert-hovered: var(--plus-color-success-200);\n  --plus-color-background-success-invert-pressed: var(--plus-color-success-300);\n  --plus-color-background-success-invert-focused: var(--plus-color-success-100);\n  --plus-color-background-success-invert-loading: var(--plus-color-success-300);\n  --plus-color-background-warning-default: var(--plus-color-warning-700);\n  --plus-color-background-warning-hovered: var(--plus-color-warning-800);\n  --plus-color-background-warning-pressed: var(--plus-color-warning-900);\n  --plus-color-background-warning-focused: var(--plus-color-warning-700);\n  --plus-color-background-warning-loading: var(--plus-color-warning-900);\n  --plus-color-background-warning-invert-default: var(--plus-color-warning-100);\n  --plus-color-background-warning-invert-hovered: var(--plus-color-warning-200);\n  --plus-color-background-warning-invert-pressed: var(--plus-color-warning-300);\n  --plus-color-background-warning-invert-focused: var(--plus-color-warning-100);\n  --plus-color-background-warning-invert-loading: var(--plus-color-warning-300);\n  --plus-color-background-danger-default: var(--plus-color-danger-700);\n  --plus-color-background-danger-hovered: var(--plus-color-danger-800);\n  --plus-color-background-danger-pressed: var(--plus-color-danger-900);\n  --plus-color-background-danger-focused: var(--plus-color-danger-700);\n  --plus-color-background-danger-loading: var(--plus-color-danger-900);\n  --plus-color-background-danger-invert-default: var(--plus-color-danger-100);\n  --plus-color-background-danger-invert-hovered: var(--plus-color-danger-200);\n  --plus-color-background-danger-invert-pressed: var(--plus-color-danger-300);\n  --plus-color-background-danger-invert-focused: var(--plus-color-danger-100);\n  --plus-color-background-danger-invert-loading: var(--plus-color-danger-300);\n  --plus-color-text-base: var(--plus-color-base-white);\n  --plus-color-text-default: var(--plus-color-neutral-950);\n  --plus-color-text-primary: var(--plus-color-primary-700);\n  --plus-color-text-info: var(--plus-color-info-700);\n  --plus-color-text-success: var(--plus-color-success-700);\n  --plus-color-text-warning: var(--plus-color-warning-700);\n  --plus-color-text-danger: var(--plus-color-danger-700);\n  --plus-color-text-placeholder: var(--plus-color-neutral-500);\n  --plus-color-text-caption: var(--plus-color-neutral-600);\n  --plus-color-text-link: var(--color-blue-700);\n  --plus-color-text-visited: var(--color-purple-700);\n  --plus-color-text-loading: var(--plus-color-neutral-700);\n  --plus-color-text-disabled: var(--plus-color-neutral-400);\n  --plus-color-text-base-invert: var(--plus-color-neutral-950);\n  --plus-color-text-default-invert: var(--plus-color-base-white);\n  --plus-color-text-primary-invert: var(--plus-color-primary-100);\n  --plus-color-text-info-invert: var(--plus-color-info-100);\n  --plus-color-text-success-invert: var(--plus-color-success-100);\n  --plus-color-text-warning-invert: var(--plus-color-warning-100);\n  --plus-color-text-danger-invert: var(--plus-color-danger-100);\n  --plus-color-text-placeholder-invert: var(--plus-color-neutral-500);\n  --plus-color-text-caption-invert: var(--plus-color-neutral-100);\n  --plus-color-text-link-invert: var(--color-blue-100);\n  --plus-color-text-visited-invert: var(--color-purple-100);\n  --plus-color-text-loading-invert: var(--plus-color-neutral-100);\n  --plus-color-border-base: var(--plus-color-base-white);\n  --plus-color-border-default: var(--plus-color-neutral-400);\n  --plus-color-border-primary: var(--plus-color-primary-700);\n  --plus-color-border-info: var(--plus-color-info-700);\n  --plus-color-border-success: var(--plus-color-success-700);\n  --plus-color-border-warning: var(--plus-color-warning-700);\n  --plus-color-border-danger: var(--plus-color-danger-700);\n  --plus-color-border-ring: var(--color-blue-300);\n  --plus-color-border-disabled: var(--plus-color-neutral-300);\n}\n[data-theme='dark'] {\n  --plus-color-background-surface: var(--plus-color-base-black);\n  --plus-color-background-disabled-default: var(--plus-color-neutral-800);\n  --plus-color-background-transparent: var(--plus-color-base-transparent);\n  --plus-color-background-divider: var(--plus-color-neutral-600);\n  --plus-color-background-modal: var(--plus-color-neutral-900);\n  --plus-color-background-overlay: var(--plus-color-neutral-950);\n  --plus-color-background-default-default: var(--plus-color-neutral-900);\n  --plus-color-background-default-hovered: var(--plus-color-neutral-800);\n  --plus-color-background-default-pressed: var(--plus-color-neutral-700);\n  --plus-color-background-default-focused: var(--plus-color-neutral-900);\n  --plus-color-background-default-loading: var(--plus-color-neutral-700);\n  --plus-color-background-default-invert-default: var(--plus-color-neutral-300);\n  --plus-color-background-default-invert-hovered: var(--plus-color-neutral-200);\n  --plus-color-background-default-invert-pressed: var(--plus-color-neutral-100);\n  --plus-color-background-default-invert-focused: var(--plus-color-neutral-300);\n  --plus-color-background-default-invert-loading: var(--plus-color-neutral-100);\n  --plus-color-background-primary-default: var(--plus-color-primary-300);\n  --plus-color-background-primary-hovered: var(--plus-color-primary-200);\n  --plus-color-background-primary-pressed: var(--plus-color-primary-100);\n  --plus-color-background-primary-focused: var(--plus-color-primary-300);\n  --plus-color-background-primary-loading: var(--plus-color-primary-100);\n  --plus-color-background-primary-invert-default: var(--plus-color-primary-900);\n  --plus-color-background-primary-invert-hovered: var(--plus-color-primary-800);\n  --plus-color-background-primary-invert-pressed: var(--plus-color-primary-700);\n  --plus-color-background-primary-invert-focused: var(--plus-color-primary-900);\n  --plus-color-background-primary-invert-loading: var(--plus-color-primary-700);\n  --plus-color-background-info-default: var(--plus-color-info-300);\n  --plus-color-background-info-hovered: var(--plus-color-info-200);\n  --plus-color-background-info-pressed: var(--plus-color-info-100);\n  --plus-color-background-info-focused: var(--plus-color-info-300);\n  --plus-color-background-info-loading: var(--plus-color-info-100);\n  --plus-color-background-info-invert-default: var(--plus-color-info-900);\n  --plus-color-background-info-invert-hovered: var(--plus-color-info-800);\n  --plus-color-background-info-invert-pressed: var(--plus-color-info-700);\n  --plus-color-background-info-invert-focused: var(--plus-color-info-900);\n  --plus-color-background-info-invert-loading: var(--plus-color-info-700);\n  --plus-color-background-success-default: var(--plus-color-success-300);\n  --plus-color-background-success-hovered: var(--plus-color-success-200);\n  --plus-color-background-success-pressed: var(--plus-color-success-100);\n  --plus-color-background-success-focused: var(--plus-color-success-300);\n  --plus-color-background-success-loading: var(--plus-color-success-100);\n  --plus-color-background-success-invert-default: var(--plus-color-success-900);\n  --plus-color-background-success-invert-hovered: var(--plus-color-success-800);\n  --plus-color-background-success-invert-pressed: var(--plus-color-success-700);\n  --plus-color-background-success-invert-focused: var(--plus-color-success-900);\n  --plus-color-background-success-invert-loading: var(--plus-color-success-700);\n  --plus-color-background-warning-default: var(--plus-color-warning-300);\n  --plus-color-background-warning-hovered: var(--plus-color-warning-200);\n  --plus-color-background-warning-pressed: var(--plus-color-warning-100);\n  --plus-color-background-warning-focused: var(--plus-color-warning-300);\n  --plus-color-background-warning-loading: var(--plus-color-warning-100);\n  --plus-color-background-warning-invert-default: var(--plus-color-warning-900);\n  --plus-color-background-warning-invert-hovered: var(--plus-color-warning-800);\n  --plus-color-background-warning-invert-pressed: var(--plus-color-warning-700);\n  --plus-color-background-warning-invert-focused: var(--plus-color-warning-900);\n  --plus-color-background-warning-invert-loading: var(--plus-color-warning-700);\n  --plus-color-background-danger-default: var(--plus-color-danger-300);\n  --plus-color-background-danger-hovered: var(--plus-color-danger-200);\n  --plus-color-background-danger-pressed: var(--plus-color-danger-100);\n  --plus-color-background-danger-focused: var(--plus-color-danger-300);\n  --plus-color-background-danger-loading: var(--plus-color-danger-100);\n  --plus-color-background-danger-invert-default: var(--plus-color-danger-900);\n  --plus-color-background-danger-invert-hovered: var(--plus-color-danger-800);\n  --plus-color-background-danger-invert-pressed: var(--plus-color-danger-700);\n  --plus-color-background-danger-invert-focused: var(--plus-color-danger-900);\n  --plus-color-background-danger-invert-loading: var(--plus-color-danger-700);\n  --plus-color-text-base: var(--plus-color-neutral-950);\n  --plus-color-text-default: var(--plus-color-base-white);\n  --plus-color-text-primary: var(--plus-color-primary-300);\n  --plus-color-text-info: var(--plus-color-info-300);\n  --plus-color-text-success: var(--plus-color-success-300);\n  --plus-color-text-warning: var(--plus-color-warning-300);\n  --plus-color-text-danger: var(--plus-color-danger-300);\n  --plus-color-text-placeholder: var(--plus-color-neutral-500);\n  --plus-color-text-caption: var(--plus-color-neutral-400);\n  --plus-color-text-link: var(--color-blue-300);\n  --plus-color-text-visited: var(--color-purple-300);\n  --plus-color-text-loading: var(--plus-color-neutral-300);\n  --plus-color-text-disabled: var(--plus-color-neutral-600);\n  --plus-color-text-base-invert: var(--plus-color-base-white);\n  --plus-color-text-default-invert: var(--plus-color-neutral-950);\n  --plus-color-text-primary-invert: var(--plus-color-primary-900);\n  --plus-color-text-info-invert: var(--plus-color-info-900);\n  --plus-color-text-success-invert: var(--plus-color-success-900);\n  --plus-color-text-warning-invert: var(--plus-color-warning-900);\n  --plus-color-text-danger-invert: var(--plus-color-danger-900);\n  --plus-color-text-placeholder-invert: var(--plus-color-neutral-500);\n  --plus-color-text-caption-invert: var(--plus-color-neutral-900);\n  --plus-color-text-link-invert: var(--color-blue-900);\n  --plus-color-text-visited-invert: var(--color-purple-900);\n  --plus-color-text-loading-invert: var(--plus-color-neutral-900);\n  --plus-color-border-base: var(--plus-color-neutral-950);\n  --plus-color-border-default: var(--plus-color-neutral-600);\n  --plus-color-border-primary: var(--plus-color-primary-300);\n  --plus-color-border-info: var(--plus-color-info-300);\n  --plus-color-border-success: var(--plus-color-success-300);\n  --plus-color-border-warning: var(--plus-color-warning-300);\n  --plus-color-border-danger: var(--plus-color-danger-300);\n  --plus-color-border-ring: var(--color-blue-700);\n  --plus-color-border-disabled: var(--plus-color-neutral-700);\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateX(0);\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateY(0);\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateZ(0);\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: skewX(0);\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: skewY(0);\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\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    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: rotateX(0);\n      --tw-rotate-y: rotateY(0);\n      --tw-rotate-z: rotateZ(0);\n      --tw-skew-x: skewX(0);\n      --tw-skew-y: skewY(0);\n      --tw-border-style: solid;\n      --tw-leading: initial;\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      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
+var css_248z = "/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer base, plus-ui-core, theme, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    --color-red-50: oklch(97.1% 0.013 17.38);\n    --color-red-100: oklch(93.6% 0.032 17.717);\n    --color-red-200: oklch(88.5% 0.062 18.334);\n    --color-red-300: oklch(80.8% 0.114 19.571);\n    --color-red-400: oklch(70.4% 0.191 22.216);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-red-700: oklch(50.5% 0.213 27.518);\n    --color-red-800: oklch(44.4% 0.177 26.899);\n    --color-red-900: oklch(39.6% 0.141 25.723);\n    --color-red-950: oklch(25.8% 0.092 26.042);\n    --color-yellow-50: oklch(98.7% 0.026 102.212);\n    --color-yellow-100: oklch(97.3% 0.071 103.193);\n    --color-yellow-200: oklch(94.5% 0.129 101.54);\n    --color-yellow-300: oklch(90.5% 0.182 98.111);\n    --color-yellow-400: oklch(85.2% 0.199 91.936);\n    --color-yellow-500: oklch(79.5% 0.184 86.047);\n    --color-yellow-600: oklch(68.1% 0.162 75.834);\n    --color-yellow-700: oklch(55.4% 0.135 66.442);\n    --color-yellow-800: oklch(47.6% 0.114 61.907);\n    --color-yellow-900: oklch(42.1% 0.095 57.708);\n    --color-yellow-950: oklch(28.6% 0.066 53.813);\n    --color-green-50: oklch(98.2% 0.018 155.826);\n    --color-green-100: oklch(96.2% 0.044 156.743);\n    --color-green-200: oklch(92.5% 0.084 155.995);\n    --color-green-300: oklch(87.1% 0.15 154.449);\n    --color-green-400: oklch(79.2% 0.209 151.711);\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-green-700: oklch(52.7% 0.154 150.069);\n    --color-green-800: oklch(44.8% 0.119 151.328);\n    --color-green-900: oklch(39.3% 0.095 152.535);\n    --color-green-950: oklch(26.6% 0.065 152.934);\n    --color-blue-50: oklch(97% 0.014 254.604);\n    --color-blue-100: oklch(93.2% 0.032 255.585);\n    --color-blue-200: oklch(88.2% 0.059 254.128);\n    --color-blue-300: oklch(80.9% 0.105 251.813);\n    --color-blue-400: oklch(70.7% 0.165 254.624);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-blue-600: oklch(54.6% 0.245 262.881);\n    --color-blue-700: oklch(48.8% 0.243 264.376);\n    --color-blue-800: oklch(42.4% 0.199 265.638);\n    --color-blue-900: oklch(37.9% 0.146 265.522);\n    --color-blue-950: oklch(28.2% 0.091 267.935);\n    --color-indigo-50: oklch(96.2% 0.018 272.314);\n    --color-indigo-100: oklch(93% 0.034 272.788);\n    --color-indigo-200: oklch(87% 0.065 274.039);\n    --color-indigo-300: oklch(78.5% 0.115 274.713);\n    --color-indigo-400: oklch(67.3% 0.182 276.935);\n    --color-indigo-500: oklch(58.5% 0.233 277.117);\n    --color-indigo-600: oklch(51.1% 0.262 276.966);\n    --color-indigo-700: oklch(45.7% 0.24 277.023);\n    --color-indigo-800: oklch(39.8% 0.195 277.366);\n    --color-indigo-900: oklch(35.9% 0.144 278.697);\n    --color-indigo-950: oklch(25.7% 0.09 281.288);\n    --color-purple-100: oklch(94.6% 0.033 307.174);\n    --color-purple-300: oklch(82.7% 0.119 306.383);\n    --color-purple-700: oklch(49.6% 0.265 301.924);\n    --color-purple-900: oklch(38.1% 0.176 304.987);\n    --color-gray-50: oklch(98.5% 0.002 247.839);\n    --color-gray-100: oklch(96.7% 0.003 264.542);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-gray-900: oklch(21% 0.034 264.665);\n    --color-gray-950: oklch(13% 0.028 261.692);\n    --color-neutral-300: oklch(87% 0 0);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-sm: 24rem;\n    --container-md: 28rem;\n    --container-lg: 32rem;\n    --container-xl: 36rem;\n    --container-2xl: 42rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --text-6xl: 3.75rem;\n    --text-6xl--line-height: 1;\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-sm: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 2s linear infinite;\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    --plus-color-base-white: var(--color-white);\n    --plus-color-base-black: var(--color-black);\n    --plus-color-base-transparent: transparent;\n    --plus-color-neutral-100: var(--color-gray-100);\n    --plus-color-neutral-200: var(--color-gray-200);\n    --plus-color-neutral-300: var(--color-gray-300);\n    --plus-color-neutral-400: var(--color-gray-400);\n    --plus-color-neutral-500: var(--color-gray-500);\n    --plus-color-neutral-600: var(--color-gray-600);\n    --plus-color-neutral-700: var(--color-gray-700);\n    --plus-color-neutral-800: var(--color-gray-800);\n    --plus-color-neutral-900: var(--color-gray-900);\n    --plus-color-neutral-950: var(--color-gray-950);\n    --plus-color-primary-100: var(--color-indigo-100);\n    --plus-color-primary-200: var(--color-indigo-200);\n    --plus-color-primary-300: var(--color-indigo-300);\n    --plus-color-primary-700: var(--color-indigo-700);\n    --plus-color-primary-800: var(--color-indigo-800);\n    --plus-color-primary-900: var(--color-indigo-900);\n    --plus-color-info-100: var(--color-blue-100);\n    --plus-color-info-200: var(--color-blue-200);\n    --plus-color-info-300: var(--color-blue-300);\n    --plus-color-info-700: var(--color-blue-700);\n    --plus-color-info-800: var(--color-blue-800);\n    --plus-color-info-900: var(--color-blue-900);\n    --plus-color-success-100: var(--color-green-100);\n    --plus-color-success-200: var(--color-green-200);\n    --plus-color-success-300: var(--color-green-300);\n    --plus-color-success-700: var(--color-green-700);\n    --plus-color-success-800: var(--color-green-800);\n    --plus-color-success-900: var(--color-green-900);\n    --plus-color-warning-100: var(--color-yellow-100);\n    --plus-color-warning-200: var(--color-yellow-200);\n    --plus-color-warning-300: var(--color-yellow-300);\n    --plus-color-warning-700: var(--color-yellow-700);\n    --plus-color-warning-800: var(--color-yellow-800);\n    --plus-color-warning-900: var(--color-yellow-900);\n    --plus-color-danger-100: var(--color-red-100);\n    --plus-color-danger-200: var(--color-red-200);\n    --plus-color-danger-300: var(--color-red-300);\n    --plus-color-danger-700: var(--color-red-700);\n    --plus-color-danger-800: var(--color-red-800);\n    --plus-color-danger-900: var(--color-red-900);\n    --animate-shake: shake 0.3s ease-in-out;\n    --text-xxxs: 0.5rem;\n    --text-xxxs--line-height: calc(1 / 0.5);\n    --plus-border-radius-default: var(--radius-sm);\n    --plus-border-radius-modal: var(--radius-lg);\n    --radius-default: var(--plus-border-radius-default);\n  }\n}\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .visible {\n    visibility: visible;\n  }\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  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .inset-x-0 {\n    inset-inline: calc(var(--spacing) * 0);\n  }\n  .inset-y-0 {\n    inset-block: calc(var(--spacing) * 0);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5);\n  }\n  .top-1 {\n    top: calc(var(--spacing) * 1);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-2 {\n    top: calc(var(--spacing) * 2);\n  }\n  .top-5 {\n    top: calc(var(--spacing) * 5);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2);\n  }\n  .right-5 {\n    right: calc(var(--spacing) * 5);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .bottom-5 {\n    bottom: calc(var(--spacing) * 5);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-0\\.5 {\n    left: calc(var(--spacing) * 0.5);\n  }\n  .left-1 {\n    left: calc(var(--spacing) * 1);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-5 {\n    left: calc(var(--spacing) * 5);\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-40 {\n    z-index: 40;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-\\[1\\] {\n    z-index: 1;\n  }\n  .z-\\[1000\\] {\n    z-index: 1000;\n  }\n  .container {\n    width: 100%;\n    @media (width >= 40rem) {\n      max-width: 40rem;\n    }\n    @media (width >= 48rem) {\n      max-width: 48rem;\n    }\n    @media (width >= 64rem) {\n      max-width: 64rem;\n    }\n    @media (width >= 80rem) {\n      max-width: 80rem;\n    }\n    @media (width >= 96rem) {\n      max-width: 96rem;\n    }\n  }\n  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .mx-\\(--divider-spacing\\) {\n    margin-inline: var(--divider-spacing);\n  }\n  .mx-1 {\n    margin-inline: calc(var(--spacing) * 1);\n  }\n  .mx-1\\.5 {\n    margin-inline: calc(var(--spacing) * 1.5);\n  }\n  .mx-2 {\n    margin-inline: calc(var(--spacing) * 2);\n  }\n  .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n  .ml-1\\.5 {\n    margin-left: calc(var(--spacing) * 1.5);\n  }\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n  .ml-3 {\n    margin-left: calc(var(--spacing) * 3);\n  }\n  .box-content {\n    box-sizing: content-box;\n  }\n  .block {\n    display: block;\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2);\n    height: calc(var(--spacing) * 2);\n  }\n  .size-2\\.5 {\n    width: calc(var(--spacing) * 2.5);\n    height: calc(var(--spacing) * 2.5);\n  }\n  .size-3 {\n    width: calc(var(--spacing) * 3);\n    height: calc(var(--spacing) * 3);\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-4\\.5 {\n    width: calc(var(--spacing) * 4.5);\n    height: calc(var(--spacing) * 4.5);\n  }\n  .size-5 {\n    width: calc(var(--spacing) * 5);\n    height: calc(var(--spacing) * 5);\n  }\n  .size-6 {\n    width: calc(var(--spacing) * 6);\n    height: calc(var(--spacing) * 6);\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9);\n    height: calc(var(--spacing) * 9);\n  }\n  .size-10 {\n    width: calc(var(--spacing) * 10);\n    height: calc(var(--spacing) * 10);\n  }\n  .size-11 {\n    width: calc(var(--spacing) * 11);\n    height: calc(var(--spacing) * 11);\n  }\n  .size-\\[var\\(--size\\)\\] {\n    width: var(--size);\n    height: var(--size);\n  }\n  .h-0 {\n    height: calc(var(--spacing) * 0);\n  }\n  .h-1\\.5 {\n    height: calc(var(--spacing) * 1.5);\n  }\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n  .h-2\\.5 {\n    height: calc(var(--spacing) * 2.5);\n  }\n  .h-2\\/5 {\n    height: calc(2/5 * 100%);\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-4\\.5 {\n    height: calc(var(--spacing) * 4.5);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-6\\.5 {\n    height: calc(var(--spacing) * 6.5);\n  }\n  .h-7 {\n    height: calc(var(--spacing) * 7);\n  }\n  .h-96 {\n    height: calc(var(--spacing) * 96);\n  }\n  .h-\\[48px\\] {\n    height: 48px;\n  }\n  .h-\\[52px\\] {\n    height: 52px;\n  }\n  .h-fit {\n    height: fit-content;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-screen {\n    height: 100vh;\n  }\n  .max-h-80 {\n    max-height: calc(var(--spacing) * 80);\n  }\n  .max-h-full {\n    max-height: 100%;\n  }\n  .max-h-none {\n    max-height: none;\n  }\n  .min-h-\\[52px\\] {\n    min-height: 52px;\n  }\n  .min-h-\\[60px\\] {\n    min-height: 60px;\n  }\n  .min-h-\\[68px\\] {\n    min-height: 68px;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-1\\.5 {\n    width: calc(var(--spacing) * 1.5);\n  }\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n  .w-2\\.5 {\n    width: calc(var(--spacing) * 2.5);\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-4\\.5 {\n    width: calc(var(--spacing) * 4.5);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n  .w-13 {\n    width: calc(var(--spacing) * 13);\n  }\n  .w-14 {\n    width: calc(var(--spacing) * 14);\n  }\n  .w-60 {\n    width: calc(var(--spacing) * 60);\n  }\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72);\n  }\n  .w-96 {\n    width: calc(var(--spacing) * 96);\n  }\n  .w-\\[1em\\] {\n    width: 1em;\n  }\n  .w-auto {\n    width: auto;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .w-screen {\n    width: 100vw;\n  }\n  .max-w-2xl {\n    max-width: var(--container-2xl);\n  }\n  .max-w-80 {\n    max-width: calc(var(--spacing) * 80);\n  }\n  .max-w-96 {\n    max-width: calc(var(--spacing) * 96);\n  }\n  .max-w-\\[256px\\] {\n    max-width: 256px;\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem);\n  }\n  .max-w-full {\n    max-width: 100%;\n  }\n  .max-w-lg {\n    max-width: var(--container-lg);\n  }\n  .max-w-md {\n    max-width: var(--container-md);\n  }\n  .max-w-none {\n    max-width: none;\n  }\n  .max-w-sm {\n    max-width: var(--container-sm);\n  }\n  .max-w-xl {\n    max-width: var(--container-xl);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-4 {\n    min-width: calc(var(--spacing) * 4);\n  }\n  .min-w-5 {\n    min-width: calc(var(--spacing) * 5);\n  }\n  .min-w-6 {\n    min-width: calc(var(--spacing) * 6);\n  }\n  .min-w-9 {\n    min-width: calc(var(--spacing) * 9);\n  }\n  .min-w-full {\n    min-width: 100%;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .flex-shrink-0 {\n    flex-shrink: 0;\n  }\n  .origin-left {\n    transform-origin: left;\n  }\n  .origin-right {\n    transform-origin: right;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-x-full {\n    --tw-translate-x: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-0 {\n    --tw-translate-x: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[-50\\%\\] {\n    --tw-translate-x: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[50\\%\\] {\n    --tw-translate-x: 50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[calc\\(theme\\(width\\.10\\)-theme\\(width\\.5\\)\\)\\] {\n    --tw-translate-x: calc(2.5rem - 1.25rem);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[calc\\(theme\\(width\\.14\\)-theme\\(width\\.7\\)\\)\\] {\n    --tw-translate-x: calc(3.5rem - 1.75rem);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[calc\\(var\\(--spacing\\)\\*13-var\\(--spacing\\)\\*6\\.5\\)\\] {\n    --tw-translate-x: calc(var(--spacing) * 13 - var(--spacing) * 6.5);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-full {\n    --tw-translate-x: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-4 {\n    --tw-translate-y: calc(var(--spacing) * -4);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-full {\n    --tw-translate-y: -100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-\\[-50\\%\\] {\n    --tw-translate-y: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-\\[50\\%\\] {\n    --tw-translate-y: 50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-full {\n    --tw-translate-y: 100%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .scale-0 {\n    --tw-scale-x: 0%;\n    --tw-scale-y: 0%;\n    --tw-scale-z: 0%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-95 {\n    --tw-scale-x: 95%;\n    --tw-scale-y: 95%;\n    --tw-scale-z: 95%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .scale-100 {\n    --tw-scale-x: 100%;\n    --tw-scale-y: 100%;\n    --tw-scale-z: 100%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n  .rotate-45 {\n    rotate: 45deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);\n  }\n  .animate-shake {\n    animation: var(--animate-shake);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .cursor-text {\n    cursor: text;\n  }\n  .cursor-wait {\n    cursor: wait;\n  }\n  .resize {\n    resize: both;\n  }\n  .resize-none {\n    resize: none;\n  }\n  .resize-x {\n    resize: horizontal;\n  }\n  .resize-y {\n    resize: vertical;\n  }\n  .appearance-none {\n    appearance: none;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-baseline {\n    align-items: baseline;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-end {\n    align-items: flex-end;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .justify-start {\n    justify-content: flex-start;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-2\\.5 {\n    gap: calc(var(--spacing) * 2.5);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5);\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6);\n  }\n  .gap-x-5 {\n    column-gap: calc(var(--spacing) * 5);\n  }\n  .gap-y-2 {\n    row-gap: calc(var(--spacing) * 2);\n  }\n  .truncate {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .overscroll-contain {\n    overscroll-behavior: contain;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-default {\n    border-radius: var(--radius-default);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\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  .rounded-t-lg {\n    border-top-left-radius: var(--radius-lg);\n    border-top-right-radius: var(--radius-lg);\n  }\n  .rounded-b-lg {\n    border-bottom-right-radius: var(--radius-lg);\n    border-bottom-left-radius: var(--radius-lg);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0px;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-t-0 {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 0px;\n  }\n  .border-r-0 {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 0px;\n  }\n  .border-r-2 {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 2px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-b-0 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 0px;\n  }\n  .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n  .border-l-0 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 0px;\n  }\n  .border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-\\(--d-border\\) {\n    border-color: var(--d-border);\n  }\n  .border-\\[var\\(--border-color\\,var\\(--i-border-color\\)\\)\\] {\n    border-color: var(--border-color,var(--i-border-color));\n  }\n  .border-color-danger {\n    border-color: var(--plus-color-border-danger);\n  }\n  .border-color-default {\n    border-color: var(--plus-color-border-default);\n  }\n  .border-color-disabled {\n    border-color: var(--plus-color-border-disabled);\n  }\n  .border-color-dynamic {\n    border-color: var(--border-color,var(--i-border-color));\n  }\n  .border-color-primary {\n    border-color: var(--plus-color-border-primary);\n  }\n  .border-transparent {\n    border-color: transparent;\n  }\n  .border-r-color-primary {\n    border-right-color: var(--plus-color-border-primary);\n  }\n  .border-r-transparent {\n    border-right-color: transparent;\n  }\n  .border-b-color-primary {\n    border-bottom-color: var(--plus-color-border-primary);\n  }\n  .border-b-transparent {\n    border-bottom-color: transparent;\n  }\n  .bg-\\(--d-bg-checked\\) {\n    background-color: var(--d-bg-checked);\n  }\n  .bg-\\(--d-bg-default\\) {\n    background-color: var(--d-bg-default);\n  }\n  .bg-\\(--d-bg-loading\\) {\n    background-color: var(--d-bg-loading);\n  }\n  .bg-\\(--d-dot-bg\\) {\n    background-color: var(--d-dot-bg);\n  }\n  .bg-\\(--d-switch-bg\\) {\n    background-color: var(--d-switch-bg);\n  }\n  .bg-\\[var\\(--bg-color\\,var\\(--i-bg-color\\)\\)\\] {\n    background-color: var(--bg-color,var(--i-bg-color));\n  }\n  .bg-\\[var\\(--i-bg-default\\)\\] {\n    background-color: var(--i-bg-default);\n  }\n  .bg-\\[var\\(--i-selected-bg\\)\\] {\n    background-color: var(--i-selected-bg);\n  }\n  .bg-\\[var\\(--tag-bg-color\\)\\] {\n    background-color: var(--tag-bg-color);\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-blue-600 {\n    background-color: var(--color-blue-600);\n  }\n  .bg-color-danger-default {\n    background-color: var(--plus-color-background-danger-default);\n  }\n  .bg-color-danger-invert-default {\n    background-color: var(--plus-color-background-danger-invert-default);\n  }\n  .bg-color-default-default {\n    background-color: var(--plus-color-background-default-default);\n  }\n  .bg-color-default-invert-default {\n    background-color: var(--plus-color-background-default-invert-default);\n  }\n  .bg-color-disabled {\n    background-color: var(--plus-color-background-disabled-default);\n  }\n  .bg-color-dynamic-default {\n    background-color: var(--bg-default,var(--i-bg-default));\n  }\n  .bg-color-modal {\n    background-color: var(--plus-color-background-modal);\n  }\n  .bg-color-overlay\\/50 {\n    background-color: var(--plus-color-background-overlay);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--plus-color-background-overlay) 50%, transparent);\n    }\n  }\n  .bg-color-primary-default {\n    background-color: var(--plus-color-background-primary-default);\n  }\n  .bg-color-surface {\n    background-color: var(--plus-color-background-surface);\n  }\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n  .bg-inherit {\n    background-color: inherit;\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .fill-\\(--d-text\\) {\n    fill: var(--d-text);\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .object-cover {\n    object-fit: cover;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-0\\.5 {\n    padding: calc(var(--spacing) * 0.5);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-1\\.5 {\n    padding: calc(var(--spacing) * 1.5);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-3\\.5 {\n    padding: calc(var(--spacing) * 3.5);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-5 {\n    padding: calc(var(--spacing) * 5);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-0 {\n    padding-inline: calc(var(--spacing) * 0);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-1\\.5 {\n    padding-inline: calc(var(--spacing) * 1.5);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-2\\.5 {\n    padding-inline: calc(var(--spacing) * 2.5);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-5 {\n    padding-inline: calc(var(--spacing) * 5);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-0 {\n    padding-block: calc(var(--spacing) * 0);\n  }\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * 0.5);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(var(--spacing) * 2.5);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .pt-20 {\n    padding-top: calc(var(--spacing) * 20);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pr-2\\.5 {\n    padding-right: calc(var(--spacing) * 2.5);\n  }\n  .pr-3 {\n    padding-right: calc(var(--spacing) * 3);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .pl-2\\.5 {\n    padding-left: calc(var(--spacing) * 2.5);\n  }\n  .pl-3 {\n    padding-left: calc(var(--spacing) * 3);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .align-middle {\n    vertical-align: middle;\n  }\n  .plus-ui-element {\n    font-family: var(--font-sans);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-3xl {\n    font-size: var(--text-3xl);\n    line-height: var(--tw-leading, var(--text-3xl--line-height));\n  }\n  .text-6xl {\n    font-size: var(--text-6xl);\n    line-height: var(--tw-leading, var(--text-6xl--line-height));\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-xxxs {\n    font-size: var(--text-xxxs);\n    line-height: var(--tw-leading, var(--text-xxxs--line-height));\n  }\n  .text-\\[6px\\] {\n    font-size: 6px;\n  }\n  .text-\\[8px\\] {\n    font-size: 8px;\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[12px\\] {\n    font-size: 12px;\n  }\n  .text-\\[14px\\] {\n    font-size: 14px;\n  }\n  .text-\\[calc\\(var\\(--size\\)\\/2\\.50\\)\\] {\n    font-size: calc(var(--size) / 2.50);\n  }\n  .leading-\\[6px\\] {\n    --tw-leading: 6px;\n    line-height: 6px;\n  }\n  .leading-\\[8px\\] {\n    --tw-leading: 8px;\n    line-height: 8px;\n  }\n  .leading-\\[10px\\] {\n    --tw-leading: 10px;\n    line-height: 10px;\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\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-pretty {\n    text-wrap: pretty;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-\\(--d-dot-text\\) {\n    color: var(--d-dot-text);\n  }\n  .text-\\(--d-text\\) {\n    color: var(--d-text);\n  }\n  .text-\\[var\\(--description-color\\,var\\(--i-description-color\\)\\)\\] {\n    color: var(--description-color,var(--i-description-color));\n  }\n  .text-\\[var\\(--dismiss-color\\,var\\(--i-dismiss-color\\)\\)\\] {\n    color: var(--dismiss-color,var(--i-dismiss-color));\n  }\n  .text-\\[var\\(--i-text-color\\)\\] {\n    color: var(--i-text-color);\n  }\n  .text-\\[var\\(--icon-color\\,var\\(--i-icon-color\\)\\)\\] {\n    color: var(--icon-color,var(--i-icon-color));\n  }\n  .text-\\[var\\(--message-color\\,var\\(--i-message-color\\)\\)\\] {\n    color: var(--message-color,var(--i-message-color));\n  }\n  .text-\\[var\\(--tag-text-color\\)\\] {\n    color: var(--tag-text-color);\n  }\n  .text-color-base {\n    color: var(--plus-color-text-base);\n  }\n  .text-color-caption {\n    color: var(--plus-color-text-caption);\n  }\n  .text-color-danger {\n    color: var(--plus-color-text-danger);\n  }\n  .text-color-default {\n    color: var(--plus-color-text-default);\n  }\n  .text-color-disabled {\n    color: var(--plus-color-text-disabled);\n  }\n  .text-color-dynamic {\n    color: var(--text-color,var(--i-text-color));\n  }\n  .text-color-info {\n    color: var(--plus-color-text-info);\n  }\n  .text-color-link {\n    color: var(--plus-color-text-link);\n  }\n  .text-color-placeholder {\n    color: var(--plus-color-text-placeholder);\n  }\n  .text-color-primary {\n    color: var(--plus-color-text-primary);\n  }\n  .text-color-success {\n    color: var(--plus-color-text-success);\n  }\n  .text-color-warning {\n    color: var(--plus-color-text-warning);\n  }\n  .text-inherit {\n    color: inherit;\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .antialiased {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-60 {\n    opacity: 60%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-default {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    --tw-ring-color: var(--plus-color-border-ring);\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    outline-style: var(--tw-outline-style);\n    outline-width: 0px;\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .invert {\n    --tw-invert: invert(100%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\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  .transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-150 {\n    --tw-duration: 150ms;\n    transition-duration: 150ms;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .duration-300 {\n    --tw-duration: 300ms;\n    transition-duration: 300ms;\n  }\n  .duration-400 {\n    --tw-duration: 400ms;\n    transition-duration: 400ms;\n  }\n  .duration-500 {\n    --tw-duration: 500ms;\n    transition-duration: 500ms;\n  }\n  .ease-bounce {\n    --tw-ease: cubic-bezier(0.34, 1.56, 0.64, 1);\n    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .group-hover\\/base\\:\\!bg-\\(--d-switch-bg\\) {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        background-color: var(--d-switch-bg) !important;\n      }\n    }\n  }\n  .group-hover\\/base\\:bg-\\(--d-switch-bg-hover\\) {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        background-color: var(--d-switch-bg-hover);\n      }\n    }\n  }\n  .group-hover\\/base\\:bg-color-danger-hovered {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        background-color: var(--plus-color-background-danger-hovered);\n      }\n    }\n  }\n  .group-hover\\/base\\:bg-color-danger-invert-hovered {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        background-color: var(--plus-color-background-danger-invert-hovered);\n      }\n    }\n  }\n  .group-hover\\/base\\:bg-color-default-hovered {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        background-color: var(--plus-color-background-default-hovered);\n      }\n    }\n  }\n  .group-hover\\/base\\:\\!shadow-none {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        --tw-shadow: 0 0 #0000 !important;\n        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n      }\n    }\n  }\n  .group-hover\\/base\\:shadow-sm {\n    &:is(:where(.group\\/base):hover *) {\n      @media (hover: hover) {\n        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      }\n    }\n  }\n  .group-active\\/base\\:-ml-1 {\n    &:is(:where(.group\\/base):active *) {\n      margin-left: calc(var(--spacing) * -1);\n    }\n  }\n  .group-active\\/base\\:-ml-1\\.5 {\n    &:is(:where(.group\\/base):active *) {\n      margin-left: calc(var(--spacing) * -1.5);\n    }\n  }\n  .group-active\\/base\\:h-4 {\n    &:is(:where(.group\\/base):active *) {\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .group-active\\/base\\:h-4\\.5 {\n    &:is(:where(.group\\/base):active *) {\n      height: calc(var(--spacing) * 4.5);\n    }\n  }\n  .group-active\\/base\\:h-5 {\n    &:is(:where(.group\\/base):active *) {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .group-active\\/base\\:w-5 {\n    &:is(:where(.group\\/base):active *) {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .group-active\\/base\\:w-6 {\n    &:is(:where(.group\\/base):active *) {\n      width: calc(var(--spacing) * 6);\n    }\n  }\n  .group-active\\/base\\:w-6\\.5 {\n    &:is(:where(.group\\/base):active *) {\n      width: calc(var(--spacing) * 6.5);\n    }\n  }\n  .group-active\\/base\\:\\!transform-none {\n    &:is(:where(.group\\/base):active *) {\n      transform: none !important;\n    }\n  }\n  .group-active\\/base\\:\\!bg-\\(--d-switch-bg\\) {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--d-switch-bg) !important;\n    }\n  }\n  .group-active\\/base\\:bg-\\(--d-switch-bg-active\\) {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--d-switch-bg-active);\n    }\n  }\n  .group-active\\/base\\:bg-color-danger-invert-pressed {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--plus-color-background-danger-invert-pressed);\n    }\n  }\n  .group-active\\/base\\:bg-color-danger-pressed {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--plus-color-background-danger-pressed);\n    }\n  }\n  .group-active\\/base\\:bg-color-default-pressed {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--plus-color-background-default-pressed);\n    }\n  }\n  .group-active\\/base\\:bg-color-primary-pressed {\n    &:is(:where(.group\\/base):active *) {\n      background-color: var(--plus-color-background-primary-pressed);\n    }\n  }\n  .peer-checked\\:scale-100 {\n    &:is(:where(.peer):checked ~ *) {\n      --tw-scale-x: 100%;\n      --tw-scale-y: 100%;\n      --tw-scale-z: 100%;\n      scale: var(--tw-scale-x) var(--tw-scale-y);\n    }\n  }\n  .peer-checked\\:opacity-100 {\n    &:is(:where(.peer):checked ~ *) {\n      opacity: 100%;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed;\n    }\n  }\n  .placeholder\\:text-color-danger {\n    &::placeholder {\n      color: var(--plus-color-text-danger);\n    }\n  }\n  .placeholder\\:text-color-default {\n    &::placeholder {\n      color: var(--plus-color-text-default);\n    }\n  }\n  .placeholder\\:text-color-disabled {\n    &::placeholder {\n      color: var(--plus-color-text-disabled);\n    }\n  }\n  .placeholder\\:text-color-placeholder {\n    &::placeholder {\n      color: var(--plus-color-text-placeholder);\n    }\n  }\n  .backdrop\\:bg-color-overlay\\/50 {\n    &::backdrop {\n      background-color: var(--plus-color-background-overlay);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--plus-color-background-overlay) 50%, transparent);\n      }\n    }\n  }\n  .backdrop\\:transition-opacity {\n    &::backdrop {\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  }\n  .backdrop\\:duration-300 {\n    &::backdrop {\n      --tw-duration: 300ms;\n      transition-duration: 300ms;\n    }\n  }\n  .before\\:absolute {\n    &::before {\n      content: var(--tw-content);\n      position: absolute;\n    }\n  }\n  .before\\:inset-0 {\n    &::before {\n      content: var(--tw-content);\n      inset: calc(var(--spacing) * 0);\n    }\n  }\n  .before\\:-top-1\\.5 {\n    &::before {\n      content: var(--tw-content);\n      top: calc(var(--spacing) * -1.5);\n    }\n  }\n  .before\\:-left-3 {\n    &::before {\n      content: var(--tw-content);\n      left: calc(var(--spacing) * -3);\n    }\n  }\n  .before\\:z-10 {\n    &::before {\n      content: var(--tw-content);\n      z-index: 10;\n    }\n  }\n  .before\\:h-10 {\n    &::before {\n      content: var(--tw-content);\n      height: calc(var(--spacing) * 10);\n    }\n  }\n  .before\\:w-10 {\n    &::before {\n      content: var(--tw-content);\n      width: calc(var(--spacing) * 10);\n    }\n  }\n  .before\\:cursor-pointer {\n    &::before {\n      content: var(--tw-content);\n      cursor: pointer;\n    }\n  }\n  .before\\:rounded-full {\n    &::before {\n      content: var(--tw-content);\n      border-radius: calc(infinity * 1px);\n    }\n  }\n  .before\\:bg-transparent {\n    &::before {\n      content: var(--tw-content);\n      background-color: transparent;\n    }\n  }\n  .before\\:content-\\[\\'\\'\\] {\n    &::before {\n      content: var(--tw-content);\n      --tw-content: '';\n      content: var(--tw-content);\n    }\n  }\n  .after\\:ml-0\\.5 {\n    &::after {\n      content: var(--tw-content);\n      margin-left: calc(var(--spacing) * 0.5);\n    }\n  }\n  .after\\:text-color-default {\n    &::after {\n      content: var(--tw-content);\n      color: var(--plus-color-text-default);\n    }\n  }\n  .after\\:text-color-disabled {\n    &::after {\n      content: var(--tw-content);\n      color: var(--plus-color-text-disabled);\n    }\n  }\n  .after\\:content-\\[\\'\\*\\'\\] {\n    &::after {\n      content: var(--tw-content);\n      --tw-content: '*';\n      content: var(--tw-content);\n    }\n  }\n  .visited\\:text-color-visited {\n    &:visited {\n      color: var(--plus-color-text-visited);\n    }\n  }\n  .empty\\:hidden {\n    &:empty {\n      display: none;\n    }\n  }\n  .focus-within\\:z-\\[1\\] {\n    &:focus-within {\n      z-index: 1;\n    }\n  }\n  .focus-within\\:border-color-danger {\n    &:focus-within {\n      border-color: var(--plus-color-border-danger);\n    }\n  }\n  .focus-within\\:border-color-primary {\n    &:focus-within {\n      border-color: var(--plus-color-border-primary);\n    }\n  }\n  .focus-within\\:ring-default {\n    &:focus-within {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      --tw-ring-color: var(--plus-color-border-ring);\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      outline-style: var(--tw-outline-style);\n      outline-width: 0px;\n    }\n  }\n  .hover\\:border-color-danger {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--plus-color-border-danger);\n      }\n    }\n  }\n  .hover\\:border-color-disabled {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--plus-color-border-disabled);\n      }\n    }\n  }\n  .hover\\:border-color-primary {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--plus-color-border-primary);\n      }\n    }\n  }\n  .hover\\:bg-\\[var\\(--i-bg-hovered\\)\\] {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--i-bg-hovered);\n      }\n    }\n  }\n  .hover\\:bg-blue-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-blue-600);\n      }\n    }\n  }\n  .hover\\:bg-color-default-hovered {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--plus-color-background-default-hovered);\n      }\n    }\n  }\n  .hover\\:bg-color-dynamic-hovered {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bg-hovered,var(--i-bg-hovered));\n      }\n    }\n  }\n  .hover\\:bg-color-primary-hovered {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--plus-color-background-primary-hovered);\n      }\n    }\n  }\n  .hover\\:bg-green-600 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-green-600);\n      }\n    }\n  }\n  .hover\\:bg-transparent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: transparent;\n      }\n    }\n  }\n  .hover\\:text-color-caption {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--plus-color-text-caption);\n      }\n    }\n  }\n  .hover\\:text-color-default {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--plus-color-text-default);\n      }\n    }\n  }\n  .hover\\:text-color-primary {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--plus-color-text-primary);\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .focus\\:ring-1 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-offset-1 {\n    &:focus {\n      --tw-ring-offset-width: 1px;\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  .focus-visible\\:bg-\\(--d-bg-focused\\) {\n    &:focus-visible {\n      background-color: var(--d-bg-focused);\n    }\n  }\n  .focus-visible\\:bg-color-dynamic-focused {\n    &:focus-visible {\n      background-color: var(--bg-focused,var(--i-bg-focused));\n    }\n  }\n  .focus-visible\\:ring-default {\n    &:focus-visible {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      --tw-ring-color: var(--plus-color-border-ring);\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      outline-style: var(--tw-outline-style);\n      outline-width: 0px;\n    }\n  }\n  .focus-visible\\:ring-2 {\n    &:focus-visible {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus-visible\\:outline-none {\n    &:focus-visible {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .active\\:bg-\\[var\\(--i-bg-pressed\\)\\] {\n    &:active {\n      background-color: var(--i-bg-pressed);\n    }\n  }\n  .active\\:bg-color-default-pressed {\n    &:active {\n      background-color: var(--plus-color-background-default-pressed);\n    }\n  }\n  .active\\:bg-color-dynamic-pressed {\n    &:active {\n      background-color: var(--bg-pressed,var(--i-bg-pressed));\n    }\n  }\n  .active\\:bg-color-primary-pressed {\n    &:active {\n      background-color: var(--plus-color-background-primary-pressed);\n    }\n  }\n  .enabled\\:hover\\:bg-\\(--d-bg-hovered\\) {\n    &:enabled {\n      &:hover {\n        @media (hover: hover) {\n          background-color: var(--d-bg-hovered);\n        }\n      }\n    }\n  }\n  .enabled\\:focus-visible\\:bg-\\(--d-bg-focused\\) {\n    &:enabled {\n      &:focus-visible {\n        background-color: var(--d-bg-focused);\n      }\n    }\n  }\n  .enabled\\:focus-visible\\:ring-default {\n    &:enabled {\n      &:focus-visible {\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: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n        --tw-ring-color: var(--plus-color-border-ring);\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        outline-style: var(--tw-outline-style);\n        outline-width: 0px;\n      }\n    }\n  }\n  .enabled\\:active\\:bg-\\(--d-bg-pressed\\) {\n    &:enabled {\n      &:active {\n        background-color: var(--d-bg-pressed);\n      }\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .motion-reduce\\:transition-none {\n    @media (prefers-reduced-motion: reduce) {\n      transition-property: none;\n    }\n  }\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-cyrillic-ext-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-cyrillic-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-greek-ext-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+1F00-1FFF;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-greek-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-vietnamese-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n@font-face {\n  font-family: 'Inter Variable';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 100 900;\n  src: url(../../node_modules/@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) format('woff2-variations');\n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}\n:root {\n  --plus-color-background-surface: var(--plus-color-base-white);\n  --plus-color-background-disabled-default: var(--plus-color-neutral-200);\n  --plus-color-background-transparent: var(--plus-color-base-transparent);\n  --plus-color-background-divider: var(--plus-color-neutral-400);\n  --plus-color-background-modal: var(--plus-color-base-white);\n  --plus-color-background-overlay: var(--plus-color-neutral-950);\n  --plus-color-background-default-default: var(--plus-color-neutral-100);\n  --plus-color-background-default-hovered: var(--plus-color-neutral-200);\n  --plus-color-background-default-pressed: var(--plus-color-neutral-300);\n  --plus-color-background-default-focused: var(--plus-color-neutral-100);\n  --plus-color-background-default-loading: var(--plus-color-neutral-300);\n  --plus-color-background-default-invert-default: var(--plus-color-neutral-700);\n  --plus-color-background-default-invert-hovered: var(--plus-color-neutral-800);\n  --plus-color-background-default-invert-pressed: var(--plus-color-neutral-900);\n  --plus-color-background-default-invert-focused: var(--plus-color-neutral-700);\n  --plus-color-background-default-invert-loading: var(--plus-color-neutral-900);\n  --plus-color-background-primary-default: var(--plus-color-primary-700);\n  --plus-color-background-primary-hovered: var(--plus-color-primary-800);\n  --plus-color-background-primary-pressed: var(--plus-color-primary-900);\n  --plus-color-background-primary-focused: var(--plus-color-primary-700);\n  --plus-color-background-primary-loading: var(--plus-color-primary-900);\n  --plus-color-background-primary-invert-default: var(--plus-color-primary-100);\n  --plus-color-background-primary-invert-hovered: var(--plus-color-primary-200);\n  --plus-color-background-primary-invert-pressed: var(--plus-color-primary-300);\n  --plus-color-background-primary-invert-focused: var(--plus-color-primary-100);\n  --plus-color-background-primary-invert-loading: var(--plus-color-primary-300);\n  --plus-color-background-info-default: var(--plus-color-info-700);\n  --plus-color-background-info-hovered: var(--plus-color-info-800);\n  --plus-color-background-info-pressed: var(--plus-color-info-900);\n  --plus-color-background-info-focused: var(--plus-color-info-700);\n  --plus-color-background-info-loading: var(--plus-color-info-900);\n  --plus-color-background-info-invert-default: var(--plus-color-info-100);\n  --plus-color-background-info-invert-hovered: var(--plus-color-info-200);\n  --plus-color-background-info-invert-pressed: var(--plus-color-info-300);\n  --plus-color-background-info-invert-focused: var(--plus-color-info-100);\n  --plus-color-background-info-invert-loading: var(--plus-color-info-300);\n  --plus-color-background-success-default: var(--plus-color-success-700);\n  --plus-color-background-success-hovered: var(--plus-color-success-800);\n  --plus-color-background-success-pressed: var(--plus-color-success-900);\n  --plus-color-background-success-focused: var(--plus-color-success-700);\n  --plus-color-background-success-loading: var(--plus-color-success-900);\n  --plus-color-background-success-invert-default: var(--plus-color-success-100);\n  --plus-color-background-success-invert-hovered: var(--plus-color-success-200);\n  --plus-color-background-success-invert-pressed: var(--plus-color-success-300);\n  --plus-color-background-success-invert-focused: var(--plus-color-success-100);\n  --plus-color-background-success-invert-loading: var(--plus-color-success-300);\n  --plus-color-background-warning-default: var(--plus-color-warning-700);\n  --plus-color-background-warning-hovered: var(--plus-color-warning-800);\n  --plus-color-background-warning-pressed: var(--plus-color-warning-900);\n  --plus-color-background-warning-focused: var(--plus-color-warning-700);\n  --plus-color-background-warning-loading: var(--plus-color-warning-900);\n  --plus-color-background-warning-invert-default: var(--plus-color-warning-100);\n  --plus-color-background-warning-invert-hovered: var(--plus-color-warning-200);\n  --plus-color-background-warning-invert-pressed: var(--plus-color-warning-300);\n  --plus-color-background-warning-invert-focused: var(--plus-color-warning-100);\n  --plus-color-background-warning-invert-loading: var(--plus-color-warning-300);\n  --plus-color-background-danger-default: var(--plus-color-danger-700);\n  --plus-color-background-danger-hovered: var(--plus-color-danger-800);\n  --plus-color-background-danger-pressed: var(--plus-color-danger-900);\n  --plus-color-background-danger-focused: var(--plus-color-danger-700);\n  --plus-color-background-danger-loading: var(--plus-color-danger-900);\n  --plus-color-background-danger-invert-default: var(--plus-color-danger-100);\n  --plus-color-background-danger-invert-hovered: var(--plus-color-danger-200);\n  --plus-color-background-danger-invert-pressed: var(--plus-color-danger-300);\n  --plus-color-background-danger-invert-focused: var(--plus-color-danger-100);\n  --plus-color-background-danger-invert-loading: var(--plus-color-danger-300);\n  --plus-color-text-base: var(--plus-color-base-white);\n  --plus-color-text-default: var(--plus-color-neutral-950);\n  --plus-color-text-primary: var(--plus-color-primary-700);\n  --plus-color-text-info: var(--plus-color-info-700);\n  --plus-color-text-success: var(--plus-color-success-700);\n  --plus-color-text-warning: var(--plus-color-warning-700);\n  --plus-color-text-danger: var(--plus-color-danger-700);\n  --plus-color-text-placeholder: var(--plus-color-neutral-500);\n  --plus-color-text-caption: var(--plus-color-neutral-600);\n  --plus-color-text-link: var(--color-blue-700);\n  --plus-color-text-visited: var(--color-purple-700);\n  --plus-color-text-loading: var(--plus-color-neutral-700);\n  --plus-color-text-disabled: var(--plus-color-neutral-400);\n  --plus-color-text-base-invert: var(--plus-color-neutral-950);\n  --plus-color-text-default-invert: var(--plus-color-base-white);\n  --plus-color-text-primary-invert: var(--plus-color-primary-100);\n  --plus-color-text-info-invert: var(--plus-color-info-100);\n  --plus-color-text-success-invert: var(--plus-color-success-100);\n  --plus-color-text-warning-invert: var(--plus-color-warning-100);\n  --plus-color-text-danger-invert: var(--plus-color-danger-100);\n  --plus-color-text-placeholder-invert: var(--plus-color-neutral-500);\n  --plus-color-text-caption-invert: var(--plus-color-neutral-100);\n  --plus-color-text-link-invert: var(--color-blue-100);\n  --plus-color-text-visited-invert: var(--color-purple-100);\n  --plus-color-text-loading-invert: var(--plus-color-neutral-100);\n  --plus-color-border-base: var(--plus-color-base-white);\n  --plus-color-border-default: var(--plus-color-neutral-400);\n  --plus-color-border-primary: var(--plus-color-primary-700);\n  --plus-color-border-info: var(--plus-color-info-700);\n  --plus-color-border-success: var(--plus-color-success-700);\n  --plus-color-border-warning: var(--plus-color-warning-700);\n  --plus-color-border-danger: var(--plus-color-danger-700);\n  --plus-color-border-ring: var(--color-blue-300);\n  --plus-color-border-disabled: var(--plus-color-neutral-300);\n}\n[data-theme='dark'] {\n  --plus-color-background-surface: var(--plus-color-base-black);\n  --plus-color-background-disabled-default: var(--plus-color-neutral-800);\n  --plus-color-background-transparent: var(--plus-color-base-transparent);\n  --plus-color-background-divider: var(--plus-color-neutral-600);\n  --plus-color-background-modal: var(--plus-color-neutral-900);\n  --plus-color-background-overlay: var(--plus-color-neutral-950);\n  --plus-color-background-default-default: var(--plus-color-neutral-900);\n  --plus-color-background-default-hovered: var(--plus-color-neutral-800);\n  --plus-color-background-default-pressed: var(--plus-color-neutral-700);\n  --plus-color-background-default-focused: var(--plus-color-neutral-900);\n  --plus-color-background-default-loading: var(--plus-color-neutral-700);\n  --plus-color-background-default-invert-default: var(--plus-color-neutral-300);\n  --plus-color-background-default-invert-hovered: var(--plus-color-neutral-200);\n  --plus-color-background-default-invert-pressed: var(--plus-color-neutral-100);\n  --plus-color-background-default-invert-focused: var(--plus-color-neutral-300);\n  --plus-color-background-default-invert-loading: var(--plus-color-neutral-100);\n  --plus-color-background-primary-default: var(--plus-color-primary-300);\n  --plus-color-background-primary-hovered: var(--plus-color-primary-200);\n  --plus-color-background-primary-pressed: var(--plus-color-primary-100);\n  --plus-color-background-primary-focused: var(--plus-color-primary-300);\n  --plus-color-background-primary-loading: var(--plus-color-primary-100);\n  --plus-color-background-primary-invert-default: var(--plus-color-primary-900);\n  --plus-color-background-primary-invert-hovered: var(--plus-color-primary-800);\n  --plus-color-background-primary-invert-pressed: var(--plus-color-primary-700);\n  --plus-color-background-primary-invert-focused: var(--plus-color-primary-900);\n  --plus-color-background-primary-invert-loading: var(--plus-color-primary-700);\n  --plus-color-background-info-default: var(--plus-color-info-300);\n  --plus-color-background-info-hovered: var(--plus-color-info-200);\n  --plus-color-background-info-pressed: var(--plus-color-info-100);\n  --plus-color-background-info-focused: var(--plus-color-info-300);\n  --plus-color-background-info-loading: var(--plus-color-info-100);\n  --plus-color-background-info-invert-default: var(--plus-color-info-900);\n  --plus-color-background-info-invert-hovered: var(--plus-color-info-800);\n  --plus-color-background-info-invert-pressed: var(--plus-color-info-700);\n  --plus-color-background-info-invert-focused: var(--plus-color-info-900);\n  --plus-color-background-info-invert-loading: var(--plus-color-info-700);\n  --plus-color-background-success-default: var(--plus-color-success-300);\n  --plus-color-background-success-hovered: var(--plus-color-success-200);\n  --plus-color-background-success-pressed: var(--plus-color-success-100);\n  --plus-color-background-success-focused: var(--plus-color-success-300);\n  --plus-color-background-success-loading: var(--plus-color-success-100);\n  --plus-color-background-success-invert-default: var(--plus-color-success-900);\n  --plus-color-background-success-invert-hovered: var(--plus-color-success-800);\n  --plus-color-background-success-invert-pressed: var(--plus-color-success-700);\n  --plus-color-background-success-invert-focused: var(--plus-color-success-900);\n  --plus-color-background-success-invert-loading: var(--plus-color-success-700);\n  --plus-color-background-warning-default: var(--plus-color-warning-300);\n  --plus-color-background-warning-hovered: var(--plus-color-warning-200);\n  --plus-color-background-warning-pressed: var(--plus-color-warning-100);\n  --plus-color-background-warning-focused: var(--plus-color-warning-300);\n  --plus-color-background-warning-loading: var(--plus-color-warning-100);\n  --plus-color-background-warning-invert-default: var(--plus-color-warning-900);\n  --plus-color-background-warning-invert-hovered: var(--plus-color-warning-800);\n  --plus-color-background-warning-invert-pressed: var(--plus-color-warning-700);\n  --plus-color-background-warning-invert-focused: var(--plus-color-warning-900);\n  --plus-color-background-warning-invert-loading: var(--plus-color-warning-700);\n  --plus-color-background-danger-default: var(--plus-color-danger-300);\n  --plus-color-background-danger-hovered: var(--plus-color-danger-200);\n  --plus-color-background-danger-pressed: var(--plus-color-danger-100);\n  --plus-color-background-danger-focused: var(--plus-color-danger-300);\n  --plus-color-background-danger-loading: var(--plus-color-danger-100);\n  --plus-color-background-danger-invert-default: var(--plus-color-danger-900);\n  --plus-color-background-danger-invert-hovered: var(--plus-color-danger-800);\n  --plus-color-background-danger-invert-pressed: var(--plus-color-danger-700);\n  --plus-color-background-danger-invert-focused: var(--plus-color-danger-900);\n  --plus-color-background-danger-invert-loading: var(--plus-color-danger-700);\n  --plus-color-text-base: var(--plus-color-neutral-950);\n  --plus-color-text-default: var(--plus-color-base-white);\n  --plus-color-text-primary: var(--plus-color-primary-300);\n  --plus-color-text-info: var(--plus-color-info-300);\n  --plus-color-text-success: var(--plus-color-success-300);\n  --plus-color-text-warning: var(--plus-color-warning-300);\n  --plus-color-text-danger: var(--plus-color-danger-300);\n  --plus-color-text-placeholder: var(--plus-color-neutral-500);\n  --plus-color-text-caption: var(--plus-color-neutral-400);\n  --plus-color-text-link: var(--color-blue-300);\n  --plus-color-text-visited: var(--color-purple-300);\n  --plus-color-text-loading: var(--plus-color-neutral-300);\n  --plus-color-text-disabled: var(--plus-color-neutral-600);\n  --plus-color-text-base-invert: var(--plus-color-base-white);\n  --plus-color-text-default-invert: var(--plus-color-neutral-950);\n  --plus-color-text-primary-invert: var(--plus-color-primary-900);\n  --plus-color-text-info-invert: var(--plus-color-info-900);\n  --plus-color-text-success-invert: var(--plus-color-success-900);\n  --plus-color-text-warning-invert: var(--plus-color-warning-900);\n  --plus-color-text-danger-invert: var(--plus-color-danger-900);\n  --plus-color-text-placeholder-invert: var(--plus-color-neutral-500);\n  --plus-color-text-caption-invert: var(--plus-color-neutral-900);\n  --plus-color-text-link-invert: var(--color-blue-900);\n  --plus-color-text-visited-invert: var(--color-purple-900);\n  --plus-color-text-loading-invert: var(--plus-color-neutral-900);\n  --plus-color-border-base: var(--plus-color-neutral-950);\n  --plus-color-border-default: var(--plus-color-neutral-600);\n  --plus-color-border-primary: var(--plus-color-primary-300);\n  --plus-color-border-info: var(--plus-color-info-300);\n  --plus-color-border-success: var(--plus-color-success-300);\n  --plus-color-border-warning: var(--plus-color-warning-300);\n  --plus-color-border-danger: var(--plus-color-danger-300);\n  --plus-color-border-ring: var(--color-blue-700);\n  --plus-color-border-disabled: var(--plus-color-neutral-700);\n}\n@keyframes shake {\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n  10%,\n  30%,\n  50%,\n  70%,\n  90% {\n    transform: translateX(-8px);\n  }\n  20%,\n  40%,\n  60%,\n  80% {\n    transform: translateX(8px);\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-scale-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-scale-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 1;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateX(0);\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateY(0);\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: rotateZ(0);\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: skewX(0);\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: skewY(0);\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\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    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n      --tw-rotate-x: rotateX(0);\n      --tw-rotate-y: rotateY(0);\n      --tw-rotate-z: rotateZ(0);\n      --tw-skew-x: skewX(0);\n      --tw-skew-y: skewY(0);\n      --tw-border-style: solid;\n      --tw-leading: initial;\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      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
 styleInject(css_248z);
 
 var preflight = i$3$1 `
@@ -6139,133 +6139,182 @@ customElements.define('plus-radio-group', PlusRadioGroup$1);
 
 const modalStyle = ce({
     slots: {
-        base: ['plus-modal font-sans antialiased'],
-        modalOverlay: [
-            'modal-overlay fixed inset-0 z-40',
-            'bg-color-overlay/50',
-            'transition-opacity duration-300 ease-in-out',
+        dialog: [
+            'plus-modal fixed inset-0 m-0 p-0 w-full max-w-full h-full max-h-full',
+            'border-none bg-transparent',
+            'backdrop:bg-color-overlay/50',
+            'backdrop:transition-opacity backdrop:duration-300',
         ],
-        modalClass: [
-            'modal fixed z-50 inset-0 overflow-y-auto',
-            'flex items-center justify-center',
-            'transition-all duration-300 ease-in-out',
-            'w-full mx-auto h-fit mt-10',
+        container: [
+            'fixed inset-0 flex items-start justify-center p-4',
+            'overflow-y-auto overscroll-contain',
         ],
-        modalContainer: [
-            'modal-container relative w-full',
-            'bg-color-surface',
-            'shadow-elevation-lg',
-            'text-color-default',
-            'flex flex-col',
-            'rounded-lg max-h-[90vh] mx-4',
+        modal: [
+            'relative bg-color-surface text-color-default',
+            'rounded-lg shadow-elevation-lg',
             'transform transition-all duration-300 ease-in-out',
+            'flex flex-col',
         ],
-        modalHeader: [
-            'modal-header flex justify-between items-center',
+        header: [
+            'flex justify-between items-start',
             'py-3 px-4',
-            'bg-color-base',
+            'bg-color-base text-color-default',
             'font-semibold text-lg',
             'rounded-t-lg',
             'border-b border-color-default',
         ],
-        modalBody: [
-            'modal-body flex-1 p-4',
+        headerContent: [
+            'flex-1 min-w-0 flex items-center gap-2',
+        ],
+        body: [
+            'flex-1 p-4',
             'overflow-y-auto',
         ],
-        modalFooter: [
-            'modal-footer flex justify-end items-center',
+        footer: [
+            'flex justify-end items-center',
             'py-3 px-4 gap-2',
             'rounded-b-lg',
             'bg-color-surface',
             'border-t border-color-default',
         ],
-        modalCloseButtonClass: [
-            'modal-close-button absolute top-2 right-2 p-2',
+        closeButton: [
+            'absolute top-2 right-2 p-2',
             'text-color-default',
             'cursor-pointer',
             'hover:text-color-primary',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-color-primary',
             'transition-colors duration-200 ease-in-out',
             'rounded-full hover:bg-color-default/10',
+            'bg-transparent border-none',
         ],
     },
     variants: {
         size: {
             sm: {
-                modalClass: 'max-w-sm',
+                modal: 'max-w-sm',
             },
             md: {
-                modalClass: 'max-w-md',
+                modal: 'max-w-md',
             },
             lg: {
-                modalClass: 'max-w-lg',
+                modal: 'max-w-lg',
             },
             xl: {
-                modalClass: 'max-w-xl',
+                modal: 'max-w-xl',
             },
             '2xl': {
-                modalClass: 'max-w-2xl',
+                modal: 'max-w-2xl',
             },
             full: {
-                modalClass: 'max-w-[calc(100%-2rem)]',
+                modal: 'max-w-[calc(100%-2rem)]',
             },
         },
-        isOpen: {
+        open: {
             true: {
-                modalClass: 'opacity-100 pointer-events-auto',
-                modalOverlay: 'opacity-100 pointer-events-auto',
-                modalContainer: 'scale-100 opacity-100',
+                modal: 'opacity-100 translate-y-0 scale-100',
             },
             false: {
-                modalClass: 'opacity-0 pointer-events-none',
-                modalOverlay: 'opacity-0 pointer-events-none',
-                modalContainer: 'scale-95 opacity-0',
+                modal: 'opacity-0 -translate-y-4 scale-95',
+            },
+        },
+        placement: {
+            center: {
+                container: 'items-center',
+            },
+            top: {
+                container: 'items-start pt-20',
             },
         },
         fullWidth: {
             true: {
-                modalClass: 'max-w-[calc(100%-2rem)]',
+                modal: 'max-w-[calc(100%-2rem)] w-full',
+            },
+        },
+        fullScreen: {
+            true: {
+                modal: 'rounded-none w-screen h-screen max-w-none max-h-none',
+                container: 'p-0',
+            },
+        },
+        shake: {
+            true: {
+                modal: 'animate-shake',
+            },
+        },
+        noHeader: {
+            true: {
+                header: 'hidden',
+            },
+        },
+        noFooter: {
+            true: {
+                footer: 'hidden',
             },
         },
     },
     defaultVariants: {
         size: 'md',
-        isOpen: false,
+        open: false,
+        placement: 'center',
         fullWidth: false,
+        fullScreen: false,
+        shake: false,
+        noHeader: false,
+        noFooter: false,
     },
 });
 
 /**
  * @tag plus-modal
- * @summary Modal dialog component that appears on top of the page content.
+ * @summary Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
  *
+ * @slot - Main content area (same as body slot)
  * @slot header - The header content of the modal
- * @slot body - The main content of the modal
+ * @slot body - The main content of the modal (alternative to default slot)
  * @slot footer - The footer content of the modal
  * @slot close - Custom close button (defaults to an X icon)
  *
- * @csspart container - The main container element
- * @csspart overlay - The overlay element
- * @csspart modal - The modal element
- * @csspart header - The header element
- * @csspart body - The body element
- * @csspart footer - The footer element
+ * @csspart dialog - The native dialog element
+ * @csspart container - The container wrapper for centering and scrolling
+ * @csspart modal - The main modal box
+ * @csspart header - The header section
+ * @csspart header-content - The content wrapper inside header
+ * @csspart body - The main content area
+ * @csspart footer - The footer section
  * @csspart close-button - The close button element
  *
+ * @event plus-modal-open - Emitted after the modal has opened
+ * @event plus-modal-close - Emitted after the modal has closed
+ * @event plus-modal-before-open - Emitted before the modal opens (cancelable)
+ * @event plus-modal-before-close - Emitted before the modal closes (cancelable)
+ *
  * @example
  * ```html
- * <plus-modal>
+ * <!-- Basic usage -->
+ * <plus-modal is-open>
  *   <div slot="header">Modal Title</div>
  *   <div slot="body">Modal Content</div>
  *   <div slot="footer">
- *     <button>Save</button>
+ *     <button data-dismiss>Close</button>
  *   </div>
  * </plus-modal>
+ *
+ * <!-- Full screen modal -->
+ * <plus-modal full-screen>
+ *   <div slot="header">Full Screen</div>
+ *   <p>Content here</p>
+ * </plus-modal>
+ *
+ * <!-- Static backdrop (shake on outside click) -->
+ * <plus-modal backdrop="static">
+ *   <div slot="header">Can't Close Outside</div>
+ *   <p>Must use close button</p>
+ * </plus-modal>
  * ```
  */
 let PlusModal$1 = class PlusModal extends Tailwind$1 {
     constructor() {
-        super();
+        super(...arguments);
         /**
          * The size of the modal
          * @type {'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'}
@@ -6273,6 +6322,13 @@ let PlusModal$1 = class PlusModal extends Tailwind$1 {
          * @attr size
          */
         this.size = 'md';
+        /**
+         * The placement of the modal on the screen
+         * @type {'center' | 'top'}
+         * @default 'center'
+         * @attr placement
+         */
+        this.placement = 'center';
         /**
          * Whether the modal is open
          * @type {boolean}
@@ -6287,6 +6343,23 @@ let PlusModal$1 = class PlusModal extends Tailwind$1 {
          * @attr full-width
          */
         this.fullWidth = false;
+        /**
+         * Makes the modal take the full screen (100vw x 100vh, no border radius)
+         * @type {boolean}
+         * @default false
+         * @attr full-screen
+         */
+        this.fullScreen = false;
+        /**
+         * Controls backdrop behavior
+         * - true: Shows backdrop, modal can be closed by clicking outside
+         * - false: No backdrop
+         * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
+         * @type {boolean | 'static'}
+         * @default true
+         * @attr backdrop
+         */
+        this.backdrop = true;
         /**
          * Whether the modal should close when clicking the backdrop
          * @type {boolean}
@@ -6301,6 +6374,20 @@ let PlusModal$1 = class PlusModal extends Tailwind$1 {
          * @attr close-on-esc
          */
         this.closeOnEsc = true;
+        /**
+         * Hides the header section completely
+         * @type {boolean}
+         * @default false
+         * @attr no-header
+         */
+        this.noHeader = false;
+        /**
+         * Hides the footer section completely
+         * @type {boolean}
+         * @default false
+         * @attr no-footer
+         */
+        this.noFooter = false;
         /**
          * The duration of the animation in milliseconds
          * @type {number}
@@ -6309,118 +6396,286 @@ let PlusModal$1 = class PlusModal extends Tailwind$1 {
          */
         this.animationDuration = 300;
         this.isAnimating = false;
-        this.keydownHandler = this.handleKeydown.bind(this);
+        this.shake = false;
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('plus-modal-before-show', this.handleBeforeShow);
-        this.addEventListener('plus-modal-before-hide', this.handleBeforeHide);
+        this.addEventListener('plus-modal-before-open', this.handleBeforeOpen);
+        this.addEventListener('plus-modal-before-close', this.handleBeforeClose);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('plus-modal-before-open', this.handleBeforeOpen);
+        this.removeEventListener('plus-modal-before-close', this.handleBeforeClose);
+        if (this.dialogRef && this.isOpen) {
+            this.dialogRef.close();
+        }
+    }
+    firstUpdated() {
+        if (this.isOpen && this.dialogRef) {
+            this.dialogRef.showModal();
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('isOpen')) {
+            if (this.isOpen) {
+                this.handleOpenChange();
+            }
+            else {
+                this.handleCloseChange();
+            }
+        }
     }
     /**
-     * Hides the modal with animation
-     * @returns {void}
+     * Shows the modal with animation
+     * @returns {Promise<void>}
      */
-    hide() {
-        if (this.isAnimating)
+    async show() {
+        if (this.isAnimating || this.isOpen)
             return;
-        this.emit('plus-modal-before-hide');
+        this.isOpen = true;
     }
-    handleBeforeHide() {
-        this.isAnimating = true;
+    /**
+     * Hides the modal with animation
+     * @returns {Promise<void>}
+     */
+    async hide() {
+        if (this.isAnimating || !this.isOpen)
+            return;
         this.isOpen = false;
-        setTimeout(() => {
-            this.isAnimating = false;
-            this.emit('plus-modal-hide');
-        }, this.animationDuration);
     }
     /**
-     * Shows the modal with animation
-     * @returns {void}
+     * Toggles the modal open/closed state
+     * @returns {Promise<void>}
      */
-    show() {
-        if (this.isAnimating)
+    async toggle() {
+        if (this.isOpen) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+    async handleOpenChange() {
+        this.isAnimating = true;
+        const event = this.emit('plus-modal-before-open', { cancelable: true });
+        if (event.defaultPrevented) {
+            this.isOpen = false;
+            this.isAnimating = false;
             return;
-        this.emit('plus-modal-before-show');
+        }
+        if (this.dialogRef) {
+            this.dialogRef.showModal();
+            // Small delay for animation
+            await new Promise(resolve => setTimeout(resolve, 50));
+            this.isAnimating = false;
+            this.emit('plus-modal-open');
+        }
     }
-    handleBeforeShow() {
+    async handleCloseChange() {
         this.isAnimating = true;
-        this.isOpen = true;
-        setTimeout(() => {
+        const event = this.emit('plus-modal-before-close', { cancelable: true });
+        if (event.defaultPrevented) {
+            this.isOpen = true;
             this.isAnimating = false;
-            this.emit('plus-modal-show');
-        }, this.animationDuration);
-        if (this.closeOnEsc) {
-            document.addEventListener('keydown', this.keydownHandler);
+            return;
         }
+        // Wait for animation before closing
+        await new Promise(resolve => setTimeout(resolve, this.animationDuration));
+        if (this.dialogRef) {
+            this.dialogRef.close();
+        }
+        this.isAnimating = false;
+        this.emit('plus-modal-close');
     }
-    // override firstUpdated() {
-    //   this.modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;
-    // }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('plus-modal-before-show', this.handleBeforeShow);
-        this.removeEventListener('plus-modal-before-hide', this.handleBeforeHide);
-        document.removeEventListener('keydown', this.keydownHandler);
+    handleBeforeOpen() {
+        // Hook for internal use if needed
+    }
+    handleBeforeClose() {
+        // Hook for internal use if needed
+    }
+    handleBackdropClick(e) {
+        const target = e.target;
+        // Check if click is on the container (backdrop area), not on modal content
+        if (target.getAttribute('part') === 'container') {
+            if (this.backdrop === 'static') {
+                this.shakeModal();
+            }
+            else if (this.closeOnBackdrop) {
+                this.hide();
+            }
+        }
+    }
+    handleDialogCancel(e) {
+        e.preventDefault();
+        if (this.closeOnEsc) {
+            if (this.backdrop === 'static') {
+                this.shakeModal();
+            }
+            else {
+                this.hide();
+            }
+        }
+        else if (this.backdrop === 'static') {
+            this.shakeModal();
+        }
     }
     handleKeydown(e) {
-        if (e.key === 'Escape' && this.closeOnEsc && this.isOpen) {
-            this.hide();
+        if (e.key === 'Escape' && this.isOpen) {
+            // Only handle ESC if this is the topmost modal
+            const openModals = Array.from(document.querySelectorAll('plus-modal[is-open]'));
+            const topModal = openModals[openModals.length - 1];
+            if (topModal !== this) {
+                return;
+            }
+            e.preventDefault();
+            if (this.closeOnEsc) {
+                if (this.backdrop === 'static') {
+                    this.shakeModal();
+                }
+                else {
+                    this.hide();
+                }
+            }
+            else if (this.backdrop === 'static') {
+                this.shakeModal();
+            }
         }
     }
-    handleBackdropClick(e) {
-        // Check if the click was on the backdrop (overlay) and not on the modal content
-        if (e.target === e.currentTarget && this.closeOnBackdrop) {
+    handleClick(e) {
+        // Use composedPath to work with shadow DOM and slots
+        const path = e.composedPath();
+        const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));
+        const closeModalElement = path.find(el => el.hasAttribute?.('data-close-modal'));
+        if (dismissElement) {
+            // Stop propagation only when dismissing the modal
+            e.stopPropagation();
+            e.preventDefault();
             this.hide();
         }
+        else if (closeModalElement) {
+            const modalId = closeModalElement.getAttribute('data-close-modal');
+            // If modalId matches this modal's id, close it
+            if (!modalId || modalId === this.id) {
+                // Stop propagation only when closing the modal
+                e.stopPropagation();
+                e.preventDefault();
+                this.hide();
+            }
+        }
+        // Don't stop propagation for normal clicks - let them bubble to child elements
+    }
+    shakeModal() {
+        this.shake = true;
+        setTimeout(() => {
+            this.shake = false;
+        }, this.animationDuration);
+    }
+    getModalStyle() {
+        if (this.fullScreen) {
+            return {
+                width: '100vw',
+                height: '100vh',
+                maxWidth: 'none',
+                maxHeight: 'none',
+            };
+        }
+        if (this.fullWidth) {
+            return {
+                width: '100%',
+                maxWidth: '100%',
+            };
+        }
+        const widths = {
+            sm: '400px',
+            md: '600px',
+            lg: '800px',
+            xl: '1024px',
+            '2xl': '1200px',
+            full: '100%',
+        };
+        return {
+            width: widths[this.size],
+            maxWidth: this.fullScreen ? 'none' : '90vw',
+            maxHeight: this.fullScreen ? 'none' : '90vh',
+        };
     }
     render() {
-        const { size, isOpen, fullWidth } = this;
-        const { base, modalClass, modalOverlay, modalContainer, modalHeader, modalBody, modalFooter, modalCloseButtonClass, } = modalStyle({ size, isOpen, fullWidth });
+        const { dialog, container, modal, header, headerContent, body, footer, closeButton, } = modalStyle({
+            open: this.isOpen,
+            placement: this.placement,
+            size: this.size,
+            fullScreen: this.fullScreen,
+            shake: this.shake,
+            noHeader: this.noHeader,
+            noFooter: this.noFooter,
+            fullWidth: this.fullWidth,
+        });
         return x$2 `
-      <div
-        class=${base()}
-        part="container"
-        role="dialog"
+      <dialog
+        part="dialog"
+        class=${dialog()}
+        @click=${this.handleBackdropClick}
+        @cancel=${this.handleDialogCancel}
+        @keydown=${this.handleKeydown}
         aria-modal="true"
-        aria-hidden=${!isOpen}
-        aria-label="Modal"
       >
         <div
-          class=${modalOverlay()}
-          part="overlay"
-          @click=${this.handleBackdropClick}
-        ></div>
-        <div class=${modalClass()} part="modal">
-          <div class=${modalContainer()}>
-            <div class=${modalHeader()} part="header">
-              <slot name="header"></slot>
-              <slot name="close">
-                <button
-                  class=${modalCloseButtonClass()}
-                  part="close-button"
-                  aria-label="Close modal"
-                  @click=${() => this.hide()}
-                >
-                  <plus-icon icon-name="xmark"></plus-icon>
-                </button>
-              </slot>
-            </div>
-            <div class=${modalBody()} part="body">
+          part="container"
+          class=${container()}
+        >
+          <div
+            part="modal"
+            class=${modal()}
+            style=${o$4(this.getModalStyle())}
+            role="document"
+            @click=${this.handleClick}
+          >
+            ${!this.noHeader ? x$2 `
+              <div part="header" class=${header()}>
+                <div part="header-content" class=${headerContent()}>
+                  <slot name="header"></slot>
+                </div>
+                <slot name="close">
+                  <button
+                    part="close-button"
+                    class=${closeButton()}
+                    @click=${() => this.hide()}
+                    aria-label="Close modal"
+                    type="button"
+                  >
+                    <plus-icon icon-name="xmark"></plus-icon>
+                  </button>
+                </slot>
+              </div>
+            ` : ''}
+
+            <div part="body" class=${body()}>
               <slot name="body"></slot>
               <slot></slot>
             </div>
-            <div class=${modalFooter()} part="footer">
-              <slot name="footer"></slot>
-            </div>
+
+            ${!this.noFooter ? x$2 `
+              <div part="footer" class=${footer()}>
+                <slot name="footer"></slot>
+              </div>
+            ` : ''}
           </div>
         </div>
-      </div>
+      </dialog>
     `;
     }
 };
+__decorate([
+    e('dialog')
+], PlusModal$1.prototype, "dialogRef", void 0);
 __decorate([
     n$3({ type: String, reflect: true })
 ], PlusModal$1.prototype, "size", void 0);
+__decorate([
+    n$3({ type: String, reflect: true })
+], PlusModal$1.prototype, "placement", void 0);
 __decorate([
     n$3({
         type: Boolean,
@@ -6437,6 +6692,17 @@ __decorate([
         converter: booleanConverter,
     })
 ], PlusModal$1.prototype, "fullWidth", void 0);
+__decorate([
+    n$3({
+        type: Boolean,
+        reflect: true,
+        attribute: 'full-screen',
+        converter: booleanConverter,
+    })
+], PlusModal$1.prototype, "fullScreen", void 0);
+__decorate([
+    n$3({ type: String, reflect: true })
+], PlusModal$1.prototype, "backdrop", void 0);
 __decorate([
     n$3({
         type: Boolean,
@@ -6453,12 +6719,31 @@ __decorate([
         attribute: 'close-on-esc',
     })
 ], PlusModal$1.prototype, "closeOnEsc", void 0);
+__decorate([
+    n$3({
+        type: Boolean,
+        reflect: true,
+        attribute: 'no-header',
+        converter: booleanConverter,
+    })
+], PlusModal$1.prototype, "noHeader", void 0);
+__decorate([
+    n$3({
+        type: Boolean,
+        reflect: true,
+        attribute: 'no-footer',
+        converter: booleanConverter,
+    })
+], PlusModal$1.prototype, "noFooter", void 0);
 __decorate([
     n$3({ type: Number, reflect: true, attribute: 'animation-duration' })
 ], PlusModal$1.prototype, "animationDuration", void 0);
 __decorate([
     r()
 ], PlusModal$1.prototype, "isAnimating", void 0);
+__decorate([
+    r()
+], PlusModal$1.prototype, "shake", void 0);
 
 customElements.define('plus-modal', PlusModal$1);
 
@@ -16378,27 +16663,46 @@ const PlusRadioGroup = forwardRef((props, forwardedRef) => {
 });
 
 const PlusModal = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
   const {
     isOpen,
     fullWidth,
+    fullScreen,
+    backdrop,
     closeOnBackdrop,
     closeOnEsc,
+    noHeader,
+    noFooter,
     size,
+    placement,
     animationDuration,
     ...filteredProps
   } = props;
 
+  /** Event listeners - run once */
+  useEventListener(ref, "plus-modal-open", props.onPlusModalOpen);
+  useEventListener(ref, "plus-modal-close", props.onPlusModalClose);
+  useEventListener(ref, "plus-modal-before-open", props.onPlusModalBeforeOpen);
+  useEventListener(
+    ref,
+    "plus-modal-before-close",
+    props.onPlusModalBeforeClose,
+  );
+
   /** Methods - uses `useImperativeHandle` hook to pass ref to component */
   useImperativeHandle(forwardedRef, () => ({
-    hide: () => ref.current.hide(),
     show: () => ref.current.show(),
+    hide: () => ref.current.hide(),
+    toggle: () => ref.current.toggle(),
   }));
 
   return React.createElement(
     "plus-modal",
     {
+      ref,
       ...filteredProps,
       size: props.size,
+      placement: props.placement,
       "animation-duration":
         props.animationDuration || props["animation-duration"],
       class: props.className,
@@ -16408,8 +16712,12 @@ const PlusModal = forwardRef((props, forwardedRef) => {
       tabindex: props.tabIndex,
       "is-open": props.isOpen ? "" : undefined,
       "full-width": props.fullWidth ? "" : undefined,
+      "full-screen": props.fullScreen ? "" : undefined,
+      backdrop: props.backdrop ? "" : undefined,
       "close-on-backdrop": props.closeOnBackdrop ? "" : undefined,
       "close-on-esc": props.closeOnEsc ? "" : undefined,
+      "no-header": props.noHeader ? "" : undefined,
+      "no-footer": props.noFooter ? "" : undefined,
       style: { ...props.style },
     },
     props.children,