@betterstore/react 0.5.17 → 0.5.18

package/dist/index.mjs

@@ -27,8 +27,8 @@ const createStoreImpl = (createState) => {
 };
 const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
 
-const identity = (arg) => arg;
-function useStore(api, selector = identity) {
+const identity$1 = (arg) => arg;
+function useStore(api, selector = identity$1) {
   const slice = React__default.useSyncExternalStore(
     api.subscribe,
     () => selector(api.getState()),
@@ -7497,9 +7497,9 @@ function createStoreHelpers(config) {
   return new helpers_default(config?.proxy);
 }
 
-var css_248z = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-lg: 32rem;\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-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-widest: 0.1em;\n    --radius-xs: 0.125rem;\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 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), Helvetica, Arial, apple-system, sans-serif;\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\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  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2);\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\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .top-\\[50\\%\\] {\n    top: 50%;\n  }\n  .top-full {\n    top: 100%;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2);\n  }\n  .left-\\[50\\%\\] {\n    left: 50%;\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .order-3 {\n    order: 3;\n  }\n  .order-4 {\n    order: 4;\n  }\n  .order-5 {\n    order: 5;\n  }\n  .order-6 {\n    order: 6;\n  }\n  .order-7 {\n    order: 7;\n  }\n  .order-first {\n    order: -9999;\n  }\n  .-m-0\\.5 {\n    margin: calc(var(--spacing) * -0.5);\n  }\n  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1);\n  }\n  .my-2 {\n    margin-block: calc(var(--spacing) * 2);\n  }\n  .-mt-1 {\n    margin-top: calc(var(--spacing) * -1);\n  }\n  .-mt-2 {\n    margin-top: calc(var(--spacing) * -2);\n  }\n  .-mt-4 {\n    margin-top: calc(var(--spacing) * -4);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .-mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * -0.5);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2);\n    height: calc(var(--spacing) * 2);\n  }\n  .size-3 {\n    width: calc(var(--spacing) * 3);\n    height: calc(var(--spacing) * 3);\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n    height: calc(var(--spacing) * 3.5);\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-5 {\n    width: calc(var(--spacing) * 5);\n    height: calc(var(--spacing) * 5);\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9);\n    height: calc(var(--spacing) * 9);\n  }\n  .size-16 {\n    width: calc(var(--spacing) * 16);\n    height: calc(var(--spacing) * 16);\n  }\n  .h-0 {\n    height: calc(var(--spacing) * 0);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-\\[18px\\] {\n    height: 18px;\n  }\n  .h-\\[20px\\] {\n    height: 20px;\n  }\n  .h-\\[44px\\] {\n    height: 44px;\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-auto\\! {\n    height: auto !important;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-max {\n    height: max-content;\n  }\n  .h-px {\n    height: 1px;\n  }\n  .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n    max-height: var(--radix-dropdown-menu-content-available-height);\n  }\n  .max-h-0 {\n    max-height: calc(var(--spacing) * 0);\n  }\n  .max-h-60 {\n    max-height: calc(var(--spacing) * 60);\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px;\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28);\n  }\n  .w-32 {\n    width: calc(var(--spacing) * 32);\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40);\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-0 {\n    max-width: calc(var(--spacing) * 0);\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n  }\n  .origin-\\(--radix-popover-content-transform-origin\\) {\n    transform-origin: var(--radix-popover-content-transform-origin);\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-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-3 {\n    --tw-translate-x: calc(var(--spacing) * -3);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-2 {\n    --tw-translate-x: calc(var(--spacing) * 2);\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-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-\\[-50\\%\\] {\n    --tw-translate-y: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .scroll-py-1 {\n    scroll-padding-block: calc(var(--spacing) * 1);\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse;\n  }\n  .items-center {\n    align-items: center;\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  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\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-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-\\[10px\\] {\n    gap: 10px;\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius);\n  }\n  .rounded-md {\n    border-radius: calc(var(--radius) - 2px);\n  }\n  .rounded-sm {\n    border-radius: calc(var(--radius) - 4px);\n  }\n  .rounded-xs {\n    border-radius: var(--radius-xs);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-border {\n    border-color: var(--border);\n  }\n  .border-input {\n    border-color: var(--input);\n  }\n  .border-primary {\n    border-color: var(--primary);\n  }\n  .bg-accent {\n    background-color: var(--accent);\n  }\n  .bg-background {\n    background-color: var(--background);\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .bg-border {\n    background-color: var(--border);\n  }\n  .bg-destructive {\n    background-color: var(--destructive);\n  }\n  .bg-muted {\n    background-color: var(--muted);\n  }\n  .bg-popover {\n    background-color: var(--popover);\n  }\n  .bg-primary {\n    background-color: var(--primary);\n  }\n  .bg-secondary {\n    background-color: var(--secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .fill-primary {\n    fill: var(--primary);\n  }\n  .object-cover {\n    object-fit: cover;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\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-6 {\n    padding-inline: calc(var(--spacing) * 6);\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-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pb-1 {\n    padding-bottom: calc(var(--spacing) * 1);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-right {\n    text-align: right;\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-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[13px\\] {\n    font-size: 13px;\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-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-tight {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest);\n    letter-spacing: var(--tracking-widest);\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-background {\n    color: var(--background);\n  }\n  .text-current {\n    color: currentcolor;\n  }\n  .text-destructive {\n    color: var(--destructive);\n  }\n  .text-destructive-foreground {\n    color: var(--destructive-foreground);\n  }\n  .text-foreground {\n    color: var(--foreground);\n  }\n  .text-input {\n    color: var(--input);\n  }\n  .text-muted-foreground {\n    color: var(--muted-foreground);\n  }\n  .text-popover-foreground {\n    color: var(--popover-foreground);\n  }\n  .text-primary {\n    color: var(--primary);\n  }\n  .text-primary-foreground {\n    color: var(--primary-foreground);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-ring {\n    color: var(--ring);\n  }\n  .text-secondary-foreground {\n    color: var(--secondary-foreground);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-70 {\n    opacity: 70%;\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  .shadow-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\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 {\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  .ring-offset-background {\n    --tw-ring-offset-color: var(--background);\n  }\n  .outline-hidden {\n    --tw-outline-style: none;\n    outline-style: none;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\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, display, visibility, content-visibility, overlay, pointer-events;\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-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow;\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-shadow {\n    transition-property: box-shadow;\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  .transition-none {\n    transition-property: none;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .duration-200 {\n    animation-duration: 200ms;\n  }\n  .ease-in-out {\n    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50%;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50%;\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7);\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style);\n      border-width: 0px;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--foreground);\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::placeholder {\n      color: var(--muted-foreground);\n    }\n  }\n  .after\\:absolute {\n    &::after {\n      content: var(--tw-content);\n      position: absolute;\n    }\n  }\n  .after\\:top-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      top: calc(1/2 * 100%);\n    }\n  }\n  .after\\:right-0 {\n    &::after {\n      content: var(--tw-content);\n      right: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:left-0 {\n    &::after {\n      content: var(--tw-content);\n      left: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:z-0 {\n    &::after {\n      content: var(--tw-content);\n      z-index: 0;\n    }\n  }\n  .after\\:h-px {\n    &::after {\n      content: var(--tw-content);\n      height: 1px;\n    }\n  }\n  .after\\:-translate-y-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .after\\:bg-background {\n    &::after {\n      content: var(--tw-content);\n      background-color: var(--background);\n    }\n  }\n  .after\\:content-\\[\\'\\'\\] {\n    &::after {\n      content: var(--tw-content);\n      --tw-content: '';\n      content: var(--tw-content);\n    }\n  }\n  .last\\:border-b-0 {\n    &:last-child {\n      border-bottom-style: var(--tw-border-style);\n      border-bottom-width: 0px;\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--accent);\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--muted);\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--primary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--secondary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--accent-foreground);\n      }\n    }\n  }\n  .hover\\:text-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--foreground);\n      }\n    }\n  }\n  .hover\\:text-muted-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--muted-foreground);\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--accent);\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--accent-foreground);\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: 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-ring {\n    &:focus {\n      --tw-ring-color: var(--ring);\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-hidden {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--ring);\n    }\n  }\n  .focus-visible\\:ring-\\[3px\\] {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: var(--ring);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n      }\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4);\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--destructive);\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &[data-disabled=\"true\"] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:opacity-50 {\n    &[data-disabled=\"true\"] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--destructive-foreground);\n    }\n  }\n  .data-\\[inset\\]\\:pl-8 {\n    &[data-inset] {\n      padding-left: calc(var(--spacing) * 8);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:bg-accent {\n    &[data-selected=\"true\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:text-accent-foreground {\n    &[data-selected=\"true\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem;\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem;\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem;\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem;\n    }\n  }\n  .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n    :is(& *) {\n      &[data-slot=\"command-input-wrapper\"] {\n        height: calc(var(--spacing) * 12);\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--primary-foreground);\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit;\n      animation-duration: 150ms;\n      --tw-exit-opacity: initial;\n      --tw-exit-scale: initial;\n      --tw-exit-rotate: initial;\n      --tw-exit-translate-x: initial;\n      --tw-exit-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95;\n    }\n  }\n  .data-\\[state\\=open\\]\\:bg-accent {\n    &[data-state=\"open\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-accent-foreground {\n    &[data-state=\"open\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-muted-foreground {\n    &[data-state=\"open\"] {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter;\n      animation-duration: 150ms;\n      --tw-enter-opacity: initial;\n      --tw-enter-scale: initial;\n      --tw-enter-rotate: initial;\n      --tw-enter-translate-x: initial;\n      --tw-enter-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      color: var(--destructive);\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        color: var(--destructive);\n      }\n    }\n  }\n  .max-md\\:cursor-pointer {\n    @media (width < 48rem) {\n      cursor: pointer;\n    }\n  }\n  .max-sm\\:hidden {\n    @media (width < 40rem) {\n      display: none;\n    }\n  }\n  .sm\\:max-w-lg {\n    @media (width >= 40rem) {\n      max-width: var(--container-lg);\n    }\n  }\n  .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row;\n    }\n  }\n  .sm\\:justify-end {\n    @media (width >= 40rem) {\n      justify-content: flex-end;\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left;\n    }\n  }\n  .md\\:order-last {\n    @media (width >= 48rem) {\n      order: 9999;\n    }\n  }\n  .md\\:order-none {\n    @media (width >= 48rem) {\n      order: 0;\n    }\n  }\n  .md\\:col-span-2 {\n    @media (width >= 48rem) {\n      grid-column: span 2 / span 2;\n    }\n  }\n  .md\\:col-span-3 {\n    @media (width >= 48rem) {\n      grid-column: span 3 / span 3;\n    }\n  }\n  .md\\:col-span-4 {\n    @media (width >= 48rem) {\n      grid-column: span 4 / span 4;\n    }\n  }\n  .md\\:block {\n    @media (width >= 48rem) {\n      display: block;\n    }\n  }\n  .md\\:flex {\n    @media (width >= 48rem) {\n      display: flex;\n    }\n  }\n  .md\\:grid {\n    @media (width >= 48rem) {\n      display: grid;\n    }\n  }\n  .md\\:hidden {\n    @media (width >= 48rem) {\n      display: none;\n    }\n  }\n  .md\\:max-w-\\[75\\%\\] {\n    @media (width >= 48rem) {\n      max-width: 75%;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-3 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-7 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(7, minmax(0, 1fr));\n    }\n  }\n  .md\\:gap-0 {\n    @media (width >= 48rem) {\n      gap: calc(var(--spacing) * 0);\n    }\n  }\n  .md\\:px-8 {\n    @media (width >= 48rem) {\n      padding-inline: calc(var(--spacing) * 8);\n    }\n  }\n  .md\\:py-12 {\n    @media (width >= 48rem) {\n      padding-block: calc(var(--spacing) * 12);\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-visible {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:aria-invalid\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &[aria-invalid=\"true\"] {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &[data-variant=\"destructive\"] {\n        &:focus {\n          background-color: var(--destructive);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n    & [cmdk-group-heading] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n    & [cmdk-group-heading] {\n      padding-block: calc(var(--spacing) * 1.5);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n    & [cmdk-group-heading] {\n      font-size: var(--text-xs);\n      line-height: var(--tw-leading, var(--text-xs--line-height));\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n    & [cmdk-group-heading] {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n    & [cmdk-group-heading] {\n      color: var(--muted-foreground);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n    & [cmdk-group] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 {\n    & [cmdk-group]:not([hidden]) ~[cmdk-group] {\n      padding-top: calc(var(--spacing) * 0);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n    & [cmdk-input-wrapper] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n    & [cmdk-input-wrapper] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n    & [cmdk-input] {\n      height: calc(var(--spacing) * 12);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n    & [cmdk-item] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n    & [cmdk-item] {\n      padding-block: calc(var(--spacing) * 3);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n    & [cmdk-item] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n    & [cmdk-item] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4);\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n    &[data-variant=\"destructive\"] {\n      :is(& > *) {\n        &:is(svg) {\n          color: var(--destructive) !important;\n        }\n      }\n    }\n  }\n}\n@layer base {\n  ::selection {\n    background-color: var(--primary);\n    color: var(--primary-foreground);\n  }\n  * {\n    --tw-border-style: solid;\n    border-style: solid;\n    border-color: var(--border);\n    outline-color: var(--ring);\n    @supports (color: color-mix(in lab, red, red)) {\n      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n    }\n  }\n  .checkout-embed {\n    background-color: var(--background);\n    font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    color: var(--foreground);\n  }\n  h2 {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  p {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n}\n@layer utilities {\n  .scrollbar-hidden {\n    scrollbar-width: none;\n  }\n  .scrollbar-hidden::-webkit-scrollbar {\n    display: none;\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n@property --tw-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-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 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-tracking {\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-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@keyframes pulse {\n  50% {\n    opacity: 0.5;\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-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: 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-duration: initial;\n      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
+var css_248z = "/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-lg: 32rem;\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-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-widest: 0.1em;\n    --radius-xs: 0.125rem;\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 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), Helvetica, Arial, apple-system, sans-serif;\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\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  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2);\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\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .top-\\[50\\%\\] {\n    top: 50%;\n  }\n  .top-full {\n    top: 100%;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2);\n  }\n  .left-\\[50\\%\\] {\n    left: 50%;\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .order-3 {\n    order: 3;\n  }\n  .order-4 {\n    order: 4;\n  }\n  .order-5 {\n    order: 5;\n  }\n  .order-6 {\n    order: 6;\n  }\n  .order-7 {\n    order: 7;\n  }\n  .order-first {\n    order: -9999;\n  }\n  .-m-0\\.5 {\n    margin: calc(var(--spacing) * -0.5);\n  }\n  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1);\n  }\n  .my-2 {\n    margin-block: calc(var(--spacing) * 2);\n  }\n  .-mt-1 {\n    margin-top: calc(var(--spacing) * -1);\n  }\n  .-mt-2 {\n    margin-top: calc(var(--spacing) * -2);\n  }\n  .-mt-4 {\n    margin-top: calc(var(--spacing) * -4);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .-mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * -0.5);\n  }\n  .-mb-2 {\n    margin-bottom: calc(var(--spacing) * -2);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2);\n    height: calc(var(--spacing) * 2);\n  }\n  .size-3 {\n    width: calc(var(--spacing) * 3);\n    height: calc(var(--spacing) * 3);\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n    height: calc(var(--spacing) * 3.5);\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-5 {\n    width: calc(var(--spacing) * 5);\n    height: calc(var(--spacing) * 5);\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9);\n    height: calc(var(--spacing) * 9);\n  }\n  .size-16 {\n    width: calc(var(--spacing) * 16);\n    height: calc(var(--spacing) * 16);\n  }\n  .h-0 {\n    height: calc(var(--spacing) * 0);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-\\[18px\\] {\n    height: 18px;\n  }\n  .h-\\[20px\\] {\n    height: 20px;\n  }\n  .h-\\[44px\\] {\n    height: 44px;\n  }\n  .h-\\[310px\\] {\n    height: 310px;\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-auto\\! {\n    height: auto !important;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-max {\n    height: max-content;\n  }\n  .h-px {\n    height: 1px;\n  }\n  .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n    max-height: var(--radix-dropdown-menu-content-available-height);\n  }\n  .max-h-0 {\n    max-height: calc(var(--spacing) * 0);\n  }\n  .max-h-60 {\n    max-height: calc(var(--spacing) * 60);\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px;\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28);\n  }\n  .w-32 {\n    width: calc(var(--spacing) * 32);\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40);\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-0 {\n    max-width: calc(var(--spacing) * 0);\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n  }\n  .origin-\\(--radix-popover-content-transform-origin\\) {\n    transform-origin: var(--radix-popover-content-transform-origin);\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-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-3 {\n    --tw-translate-x: calc(var(--spacing) * -3);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-2 {\n    --tw-translate-x: calc(var(--spacing) * 2);\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-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-\\[-50\\%\\] {\n    --tw-translate-y: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .scroll-py-1 {\n    scroll-padding-block: calc(var(--spacing) * 1);\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse;\n  }\n  .items-center {\n    align-items: center;\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  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\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-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-\\[10px\\] {\n    gap: 10px;\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius);\n  }\n  .rounded-md {\n    border-radius: calc(var(--radius) - 2px);\n  }\n  .rounded-sm {\n    border-radius: calc(var(--radius) - 4px);\n  }\n  .rounded-xs {\n    border-radius: var(--radius-xs);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-border {\n    border-color: var(--border);\n  }\n  .border-input {\n    border-color: var(--input);\n  }\n  .border-primary {\n    border-color: var(--primary);\n  }\n  .bg-accent {\n    background-color: var(--accent);\n  }\n  .bg-background {\n    background-color: var(--background);\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .bg-border {\n    background-color: var(--border);\n  }\n  .bg-destructive {\n    background-color: var(--destructive);\n  }\n  .bg-muted {\n    background-color: var(--muted);\n  }\n  .bg-popover {\n    background-color: var(--popover);\n  }\n  .bg-primary {\n    background-color: var(--primary);\n  }\n  .bg-secondary {\n    background-color: var(--secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .fill-primary {\n    fill: var(--primary);\n  }\n  .object-cover {\n    object-fit: cover;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\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-6 {\n    padding-inline: calc(var(--spacing) * 6);\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-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pb-1 {\n    padding-bottom: calc(var(--spacing) * 1);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-right {\n    text-align: right;\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-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[13px\\] {\n    font-size: 13px;\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-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-tight {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest);\n    letter-spacing: var(--tracking-widest);\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-background {\n    color: var(--background);\n  }\n  .text-current {\n    color: currentcolor;\n  }\n  .text-destructive {\n    color: var(--destructive);\n  }\n  .text-destructive-foreground {\n    color: var(--destructive-foreground);\n  }\n  .text-foreground {\n    color: var(--foreground);\n  }\n  .text-input {\n    color: var(--input);\n  }\n  .text-muted-foreground {\n    color: var(--muted-foreground);\n  }\n  .text-popover-foreground {\n    color: var(--popover-foreground);\n  }\n  .text-primary {\n    color: var(--primary);\n  }\n  .text-primary-foreground {\n    color: var(--primary-foreground);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-ring {\n    color: var(--ring);\n  }\n  .text-secondary-foreground {\n    color: var(--secondary-foreground);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-70 {\n    opacity: 70%;\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  .shadow-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\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 {\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  .ring-offset-background {\n    --tw-ring-offset-color: var(--background);\n  }\n  .outline-hidden {\n    --tw-outline-style: none;\n    outline-style: none;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\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, display, visibility, content-visibility, overlay, pointer-events;\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-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow;\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-shadow {\n    transition-property: box-shadow;\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  .transition-none {\n    transition-property: none;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .duration-200 {\n    animation-duration: 200ms;\n  }\n  .ease-in-out {\n    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50%;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50%;\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7);\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style);\n      border-width: 0px;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--foreground);\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::placeholder {\n      color: var(--muted-foreground);\n    }\n  }\n  .after\\:absolute {\n    &::after {\n      content: var(--tw-content);\n      position: absolute;\n    }\n  }\n  .after\\:top-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      top: calc(1/2 * 100%);\n    }\n  }\n  .after\\:right-0 {\n    &::after {\n      content: var(--tw-content);\n      right: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:left-0 {\n    &::after {\n      content: var(--tw-content);\n      left: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:z-0 {\n    &::after {\n      content: var(--tw-content);\n      z-index: 0;\n    }\n  }\n  .after\\:h-px {\n    &::after {\n      content: var(--tw-content);\n      height: 1px;\n    }\n  }\n  .after\\:-translate-y-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .after\\:bg-background {\n    &::after {\n      content: var(--tw-content);\n      background-color: var(--background);\n    }\n  }\n  .after\\:content-\\[\\'\\'\\] {\n    &::after {\n      content: var(--tw-content);\n      --tw-content: '';\n      content: var(--tw-content);\n    }\n  }\n  .last\\:border-b-0 {\n    &:last-child {\n      border-bottom-style: var(--tw-border-style);\n      border-bottom-width: 0px;\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--accent);\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--muted);\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--primary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--secondary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--accent-foreground);\n      }\n    }\n  }\n  .hover\\:text-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--foreground);\n      }\n    }\n  }\n  .hover\\:text-muted-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--muted-foreground);\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--accent);\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--accent-foreground);\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: 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-ring {\n    &:focus {\n      --tw-ring-color: var(--ring);\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-hidden {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--ring);\n    }\n  }\n  .focus-visible\\:ring-\\[3px\\] {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: var(--ring);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n      }\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4);\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--destructive);\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &[data-disabled=\"true\"] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:opacity-50 {\n    &[data-disabled=\"true\"] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--destructive-foreground);\n    }\n  }\n  .data-\\[inset\\]\\:pl-8 {\n    &[data-inset] {\n      padding-left: calc(var(--spacing) * 8);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:bg-accent {\n    &[data-selected=\"true\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:text-accent-foreground {\n    &[data-selected=\"true\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem;\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem;\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem;\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem;\n    }\n  }\n  .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n    :is(& *) {\n      &[data-slot=\"command-input-wrapper\"] {\n        height: calc(var(--spacing) * 12);\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--primary-foreground);\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit;\n      animation-duration: 150ms;\n      --tw-exit-opacity: initial;\n      --tw-exit-scale: initial;\n      --tw-exit-rotate: initial;\n      --tw-exit-translate-x: initial;\n      --tw-exit-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95;\n    }\n  }\n  .data-\\[state\\=open\\]\\:bg-accent {\n    &[data-state=\"open\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-accent-foreground {\n    &[data-state=\"open\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-muted-foreground {\n    &[data-state=\"open\"] {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter;\n      animation-duration: 150ms;\n      --tw-enter-opacity: initial;\n      --tw-enter-scale: initial;\n      --tw-enter-rotate: initial;\n      --tw-enter-translate-x: initial;\n      --tw-enter-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      color: var(--destructive);\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        color: var(--destructive);\n      }\n    }\n  }\n  .max-md\\:cursor-pointer {\n    @media (width < 48rem) {\n      cursor: pointer;\n    }\n  }\n  .max-sm\\:hidden {\n    @media (width < 40rem) {\n      display: none;\n    }\n  }\n  .sm\\:h-\\[230px\\] {\n    @media (width >= 40rem) {\n      height: 230px;\n    }\n  }\n  .sm\\:max-w-lg {\n    @media (width >= 40rem) {\n      max-width: var(--container-lg);\n    }\n  }\n  .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row;\n    }\n  }\n  .sm\\:justify-end {\n    @media (width >= 40rem) {\n      justify-content: flex-end;\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left;\n    }\n  }\n  .md\\:order-last {\n    @media (width >= 48rem) {\n      order: 9999;\n    }\n  }\n  .md\\:order-none {\n    @media (width >= 48rem) {\n      order: 0;\n    }\n  }\n  .md\\:col-span-2 {\n    @media (width >= 48rem) {\n      grid-column: span 2 / span 2;\n    }\n  }\n  .md\\:col-span-3 {\n    @media (width >= 48rem) {\n      grid-column: span 3 / span 3;\n    }\n  }\n  .md\\:col-span-4 {\n    @media (width >= 48rem) {\n      grid-column: span 4 / span 4;\n    }\n  }\n  .md\\:block {\n    @media (width >= 48rem) {\n      display: block;\n    }\n  }\n  .md\\:flex {\n    @media (width >= 48rem) {\n      display: flex;\n    }\n  }\n  .md\\:grid {\n    @media (width >= 48rem) {\n      display: grid;\n    }\n  }\n  .md\\:hidden {\n    @media (width >= 48rem) {\n      display: none;\n    }\n  }\n  .md\\:max-w-\\[75\\%\\] {\n    @media (width >= 48rem) {\n      max-width: 75%;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-3 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-7 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(7, minmax(0, 1fr));\n    }\n  }\n  .md\\:gap-0 {\n    @media (width >= 48rem) {\n      gap: calc(var(--spacing) * 0);\n    }\n  }\n  .md\\:px-8 {\n    @media (width >= 48rem) {\n      padding-inline: calc(var(--spacing) * 8);\n    }\n  }\n  .md\\:py-12 {\n    @media (width >= 48rem) {\n      padding-block: calc(var(--spacing) * 12);\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-visible {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:aria-invalid\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &[aria-invalid=\"true\"] {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &[data-variant=\"destructive\"] {\n        &:focus {\n          background-color: var(--destructive);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n    & [cmdk-group-heading] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n    & [cmdk-group-heading] {\n      padding-block: calc(var(--spacing) * 1.5);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n    & [cmdk-group-heading] {\n      font-size: var(--text-xs);\n      line-height: var(--tw-leading, var(--text-xs--line-height));\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n    & [cmdk-group-heading] {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n    & [cmdk-group-heading] {\n      color: var(--muted-foreground);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n    & [cmdk-group] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 {\n    & [cmdk-group]:not([hidden]) ~[cmdk-group] {\n      padding-top: calc(var(--spacing) * 0);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n    & [cmdk-input-wrapper] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n    & [cmdk-input-wrapper] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n    & [cmdk-input] {\n      height: calc(var(--spacing) * 12);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n    & [cmdk-item] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n    & [cmdk-item] {\n      padding-block: calc(var(--spacing) * 3);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n    & [cmdk-item] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n    & [cmdk-item] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4);\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n    &[data-variant=\"destructive\"] {\n      :is(& > *) {\n        &:is(svg) {\n          color: var(--destructive) !important;\n        }\n      }\n    }\n  }\n}\n@layer base {\n  ::selection {\n    background-color: var(--primary);\n    color: var(--primary-foreground);\n  }\n  * {\n    --tw-border-style: solid;\n    border-style: solid;\n    border-color: var(--border);\n    outline-color: var(--ring);\n    @supports (color: color-mix(in lab, red, red)) {\n      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n    }\n  }\n  .checkout-embed {\n    background-color: var(--background);\n    font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    color: var(--foreground);\n  }\n  h2 {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  p {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n}\n@layer utilities {\n  .scrollbar-hidden {\n    scrollbar-width: none;\n  }\n  .scrollbar-hidden::-webkit-scrollbar {\n    display: none;\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n@property --tw-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-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 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-tracking {\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-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@keyframes pulse {\n  50% {\n    opacity: 0.5;\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-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: 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-duration: initial;\n      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
 
-var M=(e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n);}),R(n);}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n);}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y);}catch(n){}};var x=React.createContext(void 0),U$1={setTheme:e=>{},themes:[]},z=()=>{var e;return (e=React.useContext(x))!=null?e:U$1};React.memo(({forcedTheme:e,storageKey:i,attribute:s,enableSystem:u,enableColorScheme:m,defaultTheme:a,value:l,themes:h,nonce:d,scriptProps:w})=>{let p=JSON.stringify([s,i,a,e,h,l,u,m]).slice(1,-1);return React.createElement("script",{...w,suppressHydrationWarning:true,nonce:typeof window=="undefined"?d:"",dangerouslySetInnerHTML:{__html:`(${M.toString()})(${p})`}})});
+var M$1=(e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n);}),R(n);}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n);}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y);}catch(n){}};var x=React.createContext(void 0),U$1={setTheme:e=>{},themes:[]},z=()=>{var e;return (e=React.useContext(x))!=null?e:U$1};React.memo(({forcedTheme:e,storageKey:i,attribute:s,enableSystem:u,enableColorScheme:m,defaultTheme:a,value:l,themes:h,nonce:d,scriptProps:w})=>{let p=JSON.stringify([s,i,a,e,h,l,u,m]).slice(1,-1);return React.createElement("script",{...w,suppressHydrationWarning:true,nonce:typeof window=="undefined"?d:"",dangerouslySetInnerHTML:{__html:`(${M$1.toString()})(${p})`}})});
 
 function __insertCSS(code) {
   if (typeof document == 'undefined') return
@@ -8646,45 +8646,4521 @@ const ShadowWrapper = React__default.memo(({ children, shadowRef }) => {
 });
 ShadowWrapper.displayName = "ShadowWrapper";
 
-// Utility function to format colors (converts oklch to hex, keeps other formats as-is)
+const parseNumber = (color, len) => {
+	if (typeof color !== 'number') return;
+
+	// hex3: #c93 -> #cc9933
+	if (len === 3) {
+		return {
+			mode: 'rgb',
+			r: (((color >> 8) & 0xf) | ((color >> 4) & 0xf0)) / 255,
+			g: (((color >> 4) & 0xf) | (color & 0xf0)) / 255,
+			b: ((color & 0xf) | ((color << 4) & 0xf0)) / 255
+		};
+	}
+
+	// hex4: #c931 -> #cc993311
+	if (len === 4) {
+		return {
+			mode: 'rgb',
+			r: (((color >> 12) & 0xf) | ((color >> 8) & 0xf0)) / 255,
+			g: (((color >> 8) & 0xf) | ((color >> 4) & 0xf0)) / 255,
+			b: (((color >> 4) & 0xf) | (color & 0xf0)) / 255,
+			alpha: ((color & 0xf) | ((color << 4) & 0xf0)) / 255
+		};
+	}
+
+	// hex6: #f0f1f2
+	if (len === 6) {
+		return {
+			mode: 'rgb',
+			r: ((color >> 16) & 0xff) / 255,
+			g: ((color >> 8) & 0xff) / 255,
+			b: (color & 0xff) / 255
+		};
+	}
+
+	// hex8: #f0f1f2ff
+	if (len === 8) {
+		return {
+			mode: 'rgb',
+			r: ((color >> 24) & 0xff) / 255,
+			g: ((color >> 16) & 0xff) / 255,
+			b: ((color >> 8) & 0xff) / 255,
+			alpha: (color & 0xff) / 255
+		};
+	}
+};
+
+const named = {
+	aliceblue: 0xf0f8ff,
+	antiquewhite: 0xfaebd7,
+	aqua: 0x00ffff,
+	aquamarine: 0x7fffd4,
+	azure: 0xf0ffff,
+	beige: 0xf5f5dc,
+	bisque: 0xffe4c4,
+	black: 0x000000,
+	blanchedalmond: 0xffebcd,
+	blue: 0x0000ff,
+	blueviolet: 0x8a2be2,
+	brown: 0xa52a2a,
+	burlywood: 0xdeb887,
+	cadetblue: 0x5f9ea0,
+	chartreuse: 0x7fff00,
+	chocolate: 0xd2691e,
+	coral: 0xff7f50,
+	cornflowerblue: 0x6495ed,
+	cornsilk: 0xfff8dc,
+	crimson: 0xdc143c,
+	cyan: 0x00ffff,
+	darkblue: 0x00008b,
+	darkcyan: 0x008b8b,
+	darkgoldenrod: 0xb8860b,
+	darkgray: 0xa9a9a9,
+	darkgreen: 0x006400,
+	darkgrey: 0xa9a9a9,
+	darkkhaki: 0xbdb76b,
+	darkmagenta: 0x8b008b,
+	darkolivegreen: 0x556b2f,
+	darkorange: 0xff8c00,
+	darkorchid: 0x9932cc,
+	darkred: 0x8b0000,
+	darksalmon: 0xe9967a,
+	darkseagreen: 0x8fbc8f,
+	darkslateblue: 0x483d8b,
+	darkslategray: 0x2f4f4f,
+	darkslategrey: 0x2f4f4f,
+	darkturquoise: 0x00ced1,
+	darkviolet: 0x9400d3,
+	deeppink: 0xff1493,
+	deepskyblue: 0x00bfff,
+	dimgray: 0x696969,
+	dimgrey: 0x696969,
+	dodgerblue: 0x1e90ff,
+	firebrick: 0xb22222,
+	floralwhite: 0xfffaf0,
+	forestgreen: 0x228b22,
+	fuchsia: 0xff00ff,
+	gainsboro: 0xdcdcdc,
+	ghostwhite: 0xf8f8ff,
+	gold: 0xffd700,
+	goldenrod: 0xdaa520,
+	gray: 0x808080,
+	green: 0x008000,
+	greenyellow: 0xadff2f,
+	grey: 0x808080,
+	honeydew: 0xf0fff0,
+	hotpink: 0xff69b4,
+	indianred: 0xcd5c5c,
+	indigo: 0x4b0082,
+	ivory: 0xfffff0,
+	khaki: 0xf0e68c,
+	lavender: 0xe6e6fa,
+	lavenderblush: 0xfff0f5,
+	lawngreen: 0x7cfc00,
+	lemonchiffon: 0xfffacd,
+	lightblue: 0xadd8e6,
+	lightcoral: 0xf08080,
+	lightcyan: 0xe0ffff,
+	lightgoldenrodyellow: 0xfafad2,
+	lightgray: 0xd3d3d3,
+	lightgreen: 0x90ee90,
+	lightgrey: 0xd3d3d3,
+	lightpink: 0xffb6c1,
+	lightsalmon: 0xffa07a,
+	lightseagreen: 0x20b2aa,
+	lightskyblue: 0x87cefa,
+	lightslategray: 0x778899,
+	lightslategrey: 0x778899,
+	lightsteelblue: 0xb0c4de,
+	lightyellow: 0xffffe0,
+	lime: 0x00ff00,
+	limegreen: 0x32cd32,
+	linen: 0xfaf0e6,
+	magenta: 0xff00ff,
+	maroon: 0x800000,
+	mediumaquamarine: 0x66cdaa,
+	mediumblue: 0x0000cd,
+	mediumorchid: 0xba55d3,
+	mediumpurple: 0x9370db,
+	mediumseagreen: 0x3cb371,
+	mediumslateblue: 0x7b68ee,
+	mediumspringgreen: 0x00fa9a,
+	mediumturquoise: 0x48d1cc,
+	mediumvioletred: 0xc71585,
+	midnightblue: 0x191970,
+	mintcream: 0xf5fffa,
+	mistyrose: 0xffe4e1,
+	moccasin: 0xffe4b5,
+	navajowhite: 0xffdead,
+	navy: 0x000080,
+	oldlace: 0xfdf5e6,
+	olive: 0x808000,
+	olivedrab: 0x6b8e23,
+	orange: 0xffa500,
+	orangered: 0xff4500,
+	orchid: 0xda70d6,
+	palegoldenrod: 0xeee8aa,
+	palegreen: 0x98fb98,
+	paleturquoise: 0xafeeee,
+	palevioletred: 0xdb7093,
+	papayawhip: 0xffefd5,
+	peachpuff: 0xffdab9,
+	peru: 0xcd853f,
+	pink: 0xffc0cb,
+	plum: 0xdda0dd,
+	powderblue: 0xb0e0e6,
+	purple: 0x800080,
+
+	// Added in CSS Colors Level 4:
+	// https://drafts.csswg.org/css-color/#changes-from-3
+	rebeccapurple: 0x663399,
+
+	red: 0xff0000,
+	rosybrown: 0xbc8f8f,
+	royalblue: 0x4169e1,
+	saddlebrown: 0x8b4513,
+	salmon: 0xfa8072,
+	sandybrown: 0xf4a460,
+	seagreen: 0x2e8b57,
+	seashell: 0xfff5ee,
+	sienna: 0xa0522d,
+	silver: 0xc0c0c0,
+	skyblue: 0x87ceeb,
+	slateblue: 0x6a5acd,
+	slategray: 0x708090,
+	slategrey: 0x708090,
+	snow: 0xfffafa,
+	springgreen: 0x00ff7f,
+	steelblue: 0x4682b4,
+	tan: 0xd2b48c,
+	teal: 0x008080,
+	thistle: 0xd8bfd8,
+	tomato: 0xff6347,
+	turquoise: 0x40e0d0,
+	violet: 0xee82ee,
+	wheat: 0xf5deb3,
+	white: 0xffffff,
+	whitesmoke: 0xf5f5f5,
+	yellow: 0xffff00,
+	yellowgreen: 0x9acd32
+};
+
+// Also supports the `transparent` color as defined in:
+// https://drafts.csswg.org/css-color/#transparent-black
+const parseNamed = color => {
+	return parseNumber(named[color.toLowerCase()], 6);
+};
+
+const hex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i;
+
+const parseHex = color => {
+	let match;
+	// eslint-disable-next-line no-cond-assign
+	return (match = color.match(hex))
+		? parseNumber(parseInt(match[1], 16), match[1].length)
+		: undefined;
+};
+
+/*
+	Basic building blocks for color regexes
+	---------------------------------------
+
+	These regexes are expressed as strings
+	to be interpolated in the color regexes.
+ */
+
+// <number>
+const num$1 = '([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)';
+
+// <percentage>
+const per = `${num$1}%`;
+
+// <number-percentage> (<alpha-value>)
+const num_per = `(?:${num$1}%|${num$1})`;
+
+// <hue>
+const hue$1 = `(?:${num$1}(deg|grad|rad|turn)|${num$1})`;
+
+const c = `\\s*,\\s*`; // comma
+
+/*
+	rgb() regular expressions for legacy format
+	Reference: https://drafts.csswg.org/css-color/#rgb-functions
+ */
+const rgb_num_old = new RegExp(
+	`^rgba?\\(\\s*${num$1}${c}${num$1}${c}${num$1}\\s*(?:,\\s*${num_per}\\s*)?\\)$`
+);
+
+const rgb_per_old = new RegExp(
+	`^rgba?\\(\\s*${per}${c}${per}${c}${per}\\s*(?:,\\s*${num_per}\\s*)?\\)$`
+);
+
+const parseRgbLegacy = color => {
+	let res = { mode: 'rgb' };
+	let match;
+	if ((match = color.match(rgb_num_old))) {
+		if (match[1] !== undefined) {
+			res.r = match[1] / 255;
+		}
+		if (match[2] !== undefined) {
+			res.g = match[2] / 255;
+		}
+		if (match[3] !== undefined) {
+			res.b = match[3] / 255;
+		}
+	} else if ((match = color.match(rgb_per_old))) {
+		if (match[1] !== undefined) {
+			res.r = match[1] / 100;
+		}
+		if (match[2] !== undefined) {
+			res.g = match[2] / 100;
+		}
+		if (match[3] !== undefined) {
+			res.b = match[3] / 100;
+		}
+	} else {
+		return undefined;
+	}
+
+	if (match[4] !== undefined) {
+		res.alpha = Math.max(0, Math.min(1, match[4] / 100));
+	} else if (match[5] !== undefined) {
+		res.alpha = Math.max(0, Math.min(1, +match[5]));
+	}
+
+	return res;
+};
+
+const prepare = (color, mode) =>
+	color === undefined
+		? undefined
+		: typeof color !== 'object'
+		? parse$1(color)
+		: color.mode !== undefined
+		? color
+		: mode
+		? { ...color, mode }
+		: undefined;
+
+const converter =
+	(target_mode = 'rgb') =>
+	color =>
+		(color = prepare(color, target_mode)) !== undefined
+			? // if the color's mode corresponds to our target mode
+			  color.mode === target_mode
+				? // then just return the color
+				  color
+				: // otherwise check to see if we have a dedicated
+				// converter for the target mode
+				converters[color.mode][target_mode]
+				? // and return its result...
+				  converters[color.mode][target_mode](color)
+				: // ...otherwise pass through RGB as an intermediary step.
+				// if the target mode is RGB...
+				target_mode === 'rgb'
+				? // just return the RGB
+				  converters[color.mode].rgb(color)
+				: // otherwise convert color.mode -> RGB -> target_mode
+				  converters.rgb[target_mode](converters[color.mode].rgb(color))
+			: undefined;
+
+const converters = {};
+const modes = {};
+
+const parsers = [];
+const colorProfiles = {};
+
+const identity = v => v;
+
+const useMode = definition => {
+	converters[definition.mode] = {
+		...converters[definition.mode],
+		...definition.toMode
+	};
+
+	Object.keys(definition.fromMode || {}).forEach(k => {
+		if (!converters[k]) {
+			converters[k] = {};
+		}
+		converters[k][definition.mode] = definition.fromMode[k];
+	});
+
+	// Color space channel ranges
+	if (!definition.ranges) {
+		definition.ranges = {};
+	}
+
+	if (!definition.difference) {
+		definition.difference = {};
+	}
+
+	definition.channels.forEach(channel => {
+		// undefined channel ranges default to the [0, 1] interval
+		if (definition.ranges[channel] === undefined) {
+			definition.ranges[channel] = [0, 1];
+		}
+
+		if (!definition.interpolate[channel]) {
+			throw new Error(`Missing interpolator for: ${channel}`);
+		}
+
+		if (typeof definition.interpolate[channel] === 'function') {
+			definition.interpolate[channel] = {
+				use: definition.interpolate[channel]
+			};
+		}
+
+		if (!definition.interpolate[channel].fixup) {
+			definition.interpolate[channel].fixup = identity;
+		}
+	});
+
+	modes[definition.mode] = definition;
+	(definition.parse || []).forEach(parser => {
+		useParser(parser, definition.mode);
+	});
+
+	return converter(definition.mode);
+};
+
+const getMode = mode => modes[mode];
+
+const useParser = (parser, mode) => {
+	if (typeof parser === 'string') {
+		if (!mode) {
+			throw new Error(`'mode' required when 'parser' is a string`);
+		}
+		colorProfiles[parser] = mode;
+	} else if (typeof parser === 'function') {
+		if (parsers.indexOf(parser) < 0) {
+			parsers.push(parser);
+		}
+	}
+};
+
+/* eslint-disable-next-line no-control-regex */
+const IdentStartCodePoint = /[^\x00-\x7F]|[a-zA-Z_]/;
+
+/* eslint-disable-next-line no-control-regex */
+const IdentCodePoint = /[^\x00-\x7F]|[-\w]/;
+
+const Tok = {
+	Function: 'function',
+	Ident: 'ident',
+	Number: 'number',
+	Percentage: 'percentage',
+	ParenClose: ')',
+	None: 'none',
+	Hue: 'hue',
+	Alpha: 'alpha'
+};
+
+let _i = 0;
+
+/*
+	4.3.10. Check if three code points would start a number
+	https://drafts.csswg.org/css-syntax/#starts-with-a-number
+ */
+function is_num(chars) {
+	let ch = chars[_i];
+	let ch1 = chars[_i + 1];
+	if (ch === '-' || ch === '+') {
+		return /\d/.test(ch1) || (ch1 === '.' && /\d/.test(chars[_i + 2]));
+	}
+	if (ch === '.') {
+		return /\d/.test(ch1);
+	}
+	return /\d/.test(ch);
+}
+
+/*
+	Check if the stream starts with an identifier.
+ */
+
+function is_ident(chars) {
+	if (_i >= chars.length) {
+		return false;
+	}
+	let ch = chars[_i];
+	if (IdentStartCodePoint.test(ch)) {
+		return true;
+	}
+	if (ch === '-') {
+		if (chars.length - _i < 2) {
+			return false;
+		}
+		let ch1 = chars[_i + 1];
+		if (ch1 === '-' || IdentStartCodePoint.test(ch1)) {
+			return true;
+		}
+		return false;
+	}
+	return false;
+}
+
+/*
+	4.3.3. Consume a numeric token
+	https://drafts.csswg.org/css-syntax/#consume-numeric-token
+ */
+
+const huenits = {
+	deg: 1,
+	rad: 180 / Math.PI,
+	grad: 9 / 10,
+	turn: 360
+};
+
+function num(chars) {
+	let value = '';
+	if (chars[_i] === '-' || chars[_i] === '+') {
+		value += chars[_i++];
+	}
+	value += digits(chars);
+	if (chars[_i] === '.' && /\d/.test(chars[_i + 1])) {
+		value += chars[_i++] + digits(chars);
+	}
+	if (chars[_i] === 'e' || chars[_i] === 'E') {
+		if (
+			(chars[_i + 1] === '-' || chars[_i + 1] === '+') &&
+			/\d/.test(chars[_i + 2])
+		) {
+			value += chars[_i++] + chars[_i++] + digits(chars);
+		} else if (/\d/.test(chars[_i + 1])) {
+			value += chars[_i++] + digits(chars);
+		}
+	}
+	if (is_ident(chars)) {
+		let id = ident(chars);
+		if (id === 'deg' || id === 'rad' || id === 'turn' || id === 'grad') {
+			return { type: Tok.Hue, value: value * huenits[id] };
+		}
+		return undefined;
+	}
+	if (chars[_i] === '%') {
+		_i++;
+		return { type: Tok.Percentage, value: +value };
+	}
+	return { type: Tok.Number, value: +value };
+}
+
+/*
+	Consume digits.
+ */
+function digits(chars) {
+	let v = '';
+	while (/\d/.test(chars[_i])) {
+		v += chars[_i++];
+	}
+	return v;
+}
+
+/*
+	Consume an identifier.
+ */
+function ident(chars) {
+	let v = '';
+	while (_i < chars.length && IdentCodePoint.test(chars[_i])) {
+		v += chars[_i++];
+	}
+	return v;
+}
+
+/*
+	Consume an ident-like token.
+ */
+function identlike(chars) {
+	let v = ident(chars);
+	if (chars[_i] === '(') {
+		_i++;
+		return { type: Tok.Function, value: v };
+	}
+	if (v === 'none') {
+		return { type: Tok.None, value: undefined };
+	}
+	return { type: Tok.Ident, value: v };
+}
+
+function tokenize(str = '') {
+	let chars = str.trim();
+	let tokens = [];
+	let ch;
+
+	/* reset counter */
+	_i = 0;
+
+	while (_i < chars.length) {
+		ch = chars[_i++];
+
+		/*
+			Consume whitespace without emitting it
+		 */
+		if (ch === '\n' || ch === '\t' || ch === ' ') {
+			while (
+				_i < chars.length &&
+				(chars[_i] === '\n' || chars[_i] === '\t' || chars[_i] === ' ')
+			) {
+				_i++;
+			}
+			continue;
+		}
+
+		if (ch === ',') {
+			return undefined;
+		}
+
+		if (ch === ')') {
+			tokens.push({ type: Tok.ParenClose });
+			continue;
+		}
+
+		if (ch === '+') {
+			_i--;
+			if (is_num(chars)) {
+				tokens.push(num(chars));
+				continue;
+			}
+			return undefined;
+		}
+
+		if (ch === '-') {
+			_i--;
+			if (is_num(chars)) {
+				tokens.push(num(chars));
+				continue;
+			}
+			if (is_ident(chars)) {
+				tokens.push({ type: Tok.Ident, value: ident(chars) });
+				continue;
+			}
+			return undefined;
+		}
+
+		if (ch === '.') {
+			_i--;
+			if (is_num(chars)) {
+				tokens.push(num(chars));
+				continue;
+			}
+			return undefined;
+		}
+
+		if (ch === '/') {
+			while (
+				_i < chars.length &&
+				(chars[_i] === '\n' || chars[_i] === '\t' || chars[_i] === ' ')
+			) {
+				_i++;
+			}
+			let alpha;
+			if (is_num(chars)) {
+				alpha = num(chars);
+				if (alpha.type !== Tok.Hue) {
+					tokens.push({ type: Tok.Alpha, value: alpha });
+					continue;
+				}
+			}
+			if (is_ident(chars)) {
+				if (ident(chars) === 'none') {
+					tokens.push({
+						type: Tok.Alpha,
+						value: { type: Tok.None, value: undefined }
+					});
+					continue;
+				}
+			}
+			return undefined;
+		}
+
+		if (/\d/.test(ch)) {
+			_i--;
+			tokens.push(num(chars));
+			continue;
+		}
+
+		if (IdentStartCodePoint.test(ch)) {
+			_i--;
+			tokens.push(identlike(chars));
+			continue;
+		}
+
+		/*
+			Treat everything not already handled as an error.
+		 */
+		return undefined;
+	}
+
+	return tokens;
+}
+
+function parseColorSyntax(tokens) {
+	tokens._i = 0;
+	let token = tokens[tokens._i++];
+	if (!token || token.type !== Tok.Function || token.value !== 'color') {
+		return undefined;
+	}
+	token = tokens[tokens._i++];
+	if (token.type !== Tok.Ident) {
+		return undefined;
+	}
+	const mode = colorProfiles[token.value];
+	if (!mode) {
+		return undefined;
+	}
+	const res = { mode };
+	const coords = consumeCoords(tokens, false);
+	if (!coords) {
+		return undefined;
+	}
+	const channels = getMode(mode).channels;
+	for (let ii = 0, c, ch; ii < channels.length; ii++) {
+		c = coords[ii];
+		ch = channels[ii];
+		if (c.type !== Tok.None) {
+			res[ch] = c.type === Tok.Number ? c.value : c.value / 100;
+			if (ch === 'alpha') {
+				res[ch] = Math.max(0, Math.min(1, res[ch]));
+			}
+		}
+	}
+	return res;
+}
+
+function consumeCoords(tokens, includeHue) {
+	const coords = [];
+	let token;
+	while (tokens._i < tokens.length) {
+		token = tokens[tokens._i++];
+		if (
+			token.type === Tok.None ||
+			token.type === Tok.Number ||
+			token.type === Tok.Alpha ||
+			token.type === Tok.Percentage ||
+			(includeHue && token.type === Tok.Hue)
+		) {
+			coords.push(token);
+			continue;
+		}
+		if (token.type === Tok.ParenClose) {
+			if (tokens._i < tokens.length) {
+				return undefined;
+			}
+			continue;
+		}
+		return undefined;
+	}
+
+	if (coords.length < 3 || coords.length > 4) {
+		return undefined;
+	}
+
+	if (coords.length === 4) {
+		if (coords[3].type !== Tok.Alpha) {
+			return undefined;
+		}
+		coords[3] = coords[3].value;
+	}
+	if (coords.length === 3) {
+		coords.push({ type: Tok.None, value: undefined });
+	}
+
+	return coords.every(c => c.type !== Tok.Alpha) ? coords : undefined;
+}
+
+function parseModernSyntax(tokens, includeHue) {
+	tokens._i = 0;
+	let token = tokens[tokens._i++];
+	if (!token || token.type !== Tok.Function) {
+		return undefined;
+	}
+	let coords = consumeCoords(tokens, includeHue);
+	if (!coords) {
+		return undefined;
+	}
+	coords.unshift(token.value);
+	return coords;
+}
+
+const parse$1 = color => {
+	if (typeof color !== 'string') {
+		return undefined;
+	}
+	const tokens = tokenize(color);
+	const parsed = tokens ? parseModernSyntax(tokens, true) : undefined;
+	let result = undefined;
+	let i = 0;
+	let len = parsers.length;
+	while (i < len) {
+		if ((result = parsers[i++](color, parsed)) !== undefined) {
+			return result;
+		}
+	}
+	return tokens ? parseColorSyntax(tokens) : undefined;
+};
+
+function parseRgb(color, parsed) {
+	if (!parsed || (parsed[0] !== 'rgb' && parsed[0] !== 'rgba')) {
+		return undefined;
+	}
+	const res = { mode: 'rgb' };
+	const [, r, g, b, alpha] = parsed;
+	if (r.type === Tok.Hue || g.type === Tok.Hue || b.type === Tok.Hue) {
+		return undefined;
+	}
+	if (r.type !== Tok.None) {
+		res.r = r.type === Tok.Number ? r.value / 255 : r.value / 100;
+	}
+	if (g.type !== Tok.None) {
+		res.g = g.type === Tok.Number ? g.value / 255 : g.value / 100;
+	}
+	if (b.type !== Tok.None) {
+		res.b = b.type === Tok.Number ? b.value / 255 : b.value / 100;
+	}
+	if (alpha.type !== Tok.None) {
+		res.alpha = Math.min(
+			1,
+			Math.max(
+				0,
+				alpha.type === Tok.Number ? alpha.value : alpha.value / 100
+			)
+		);
+	}
+
+	return res;
+}
+
+const parseTransparent = c =>
+	c === 'transparent'
+		? { mode: 'rgb', r: 0, g: 0, b: 0, alpha: 0 }
+		: undefined;
+
+const lerp = (a, b, t) => a + t * (b - a);
+
+const get_classes = arr => {
+	let classes = [];
+	for (let i = 0; i < arr.length - 1; i++) {
+		let a = arr[i];
+		let b = arr[i + 1];
+		if (a === undefined && b === undefined) {
+			classes.push(undefined);
+		} else if (a !== undefined && b !== undefined) {
+			classes.push([a, b]);
+		} else {
+			classes.push(a !== undefined ? [a, a] : [b, b]);
+		}
+	}
+	return classes;
+};
+
+const interpolatorPiecewise = interpolator => arr => {
+	let classes = get_classes(arr);
+	return t => {
+		let cls = t * classes.length;
+		let idx = t >= 1 ? classes.length - 1 : Math.max(Math.floor(cls), 0);
+		let pair = classes[idx];
+		return pair === undefined
+			? undefined
+			: interpolator(pair[0], pair[1], cls - idx);
+	};
+};
+
+const interpolatorLinear = interpolatorPiecewise(lerp);
+
+const fixupAlpha = arr => {
+	let some_defined = false;
+	let res = arr.map(v => {
+		if (v !== undefined) {
+			some_defined = true;
+			return v;
+		}
+		return 1;
+	});
+	return some_defined ? res : arr;
+};
+
+/*
+	sRGB color space
+ */
+
+const definition$r = {
+	mode: 'rgb',
+	channels: ['r', 'g', 'b', 'alpha'],
+	parse: [
+		parseRgb,
+		parseHex,
+		parseRgbLegacy,
+		parseNamed,
+		parseTransparent,
+		'srgb'
+	],
+	serialize: 'srgb',
+	interpolate: {
+		r: interpolatorLinear,
+		g: interpolatorLinear,
+		b: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	},
+	gamut: true,
+	white: { r: 1, g: 1, b: 1 },
+	black: { r: 0, g: 0, b: 0 }
+};
+
+/*
+	Convert A98 RGB values to CIE XYZ D65
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+		* https://www.adobe.com/digitalimag/pdfs/AdobeRGB1998.pdf
+*/
+
+const linearize$2 = (v = 0) => Math.pow(Math.abs(v), 563 / 256) * Math.sign(v);
+
+const convertA98ToXyz65 = a98 => {
+	let r = linearize$2(a98.r);
+	let g = linearize$2(a98.g);
+	let b = linearize$2(a98.b);
+	let res = {
+		mode: 'xyz65',
+		x:
+			0.5766690429101305 * r +
+			0.1855582379065463 * g +
+			0.1882286462349947 * b,
+		y:
+			0.297344975250536 * r +
+			0.6273635662554661 * g +
+			0.0752914584939979 * b,
+		z:
+			0.0270313613864123 * r +
+			0.0706888525358272 * g +
+			0.9913375368376386 * b
+	};
+	if (a98.alpha !== undefined) {
+		res.alpha = a98.alpha;
+	}
+	return res;
+};
+
+/*
+	Convert CIE XYZ D65 values to A98 RGB
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+*/
+
+const gamma$2 = v => Math.pow(Math.abs(v), 256 / 563) * Math.sign(v);
+
+const convertXyz65ToA98 = ({ x, y, z, alpha }) => {
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let res = {
+		mode: 'a98',
+		r: gamma$2(
+			x * 2.0415879038107465 -
+				y * 0.5650069742788597 -
+				0.3447313507783297 * z
+		),
+		g: gamma$2(
+			x * -0.9692436362808798 +
+				y * 1.8759675015077206 +
+				0.0415550574071756 * z
+		),
+		b: gamma$2(
+			x * 0.0134442806320312 -
+				y * 0.1183623922310184 +
+				1.0151749943912058 * z
+		)
+	};
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+const fn$3 = (c = 0) => {
+	const abs = Math.abs(c);
+	if (abs <= 0.04045) {
+		return c / 12.92;
+	}
+	return (Math.sign(c) || 1) * Math.pow((abs + 0.055) / 1.055, 2.4);
+};
+
+const convertRgbToLrgb = ({ r, g, b, alpha }) => {
+	let res = {
+		mode: 'lrgb',
+		r: fn$3(r),
+		g: fn$3(g),
+		b: fn$3(b)
+	};
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+/*
+	Convert sRGB values to CIE XYZ D65
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+		* https://observablehq.com/@danburzo/color-matrix-calculator
+*/
+
+
+const convertRgbToXyz65 = rgb => {
+	let { r, g, b, alpha } = convertRgbToLrgb(rgb);
+	let res = {
+		mode: 'xyz65',
+		x:
+			0.4123907992659593 * r +
+			0.357584339383878 * g +
+			0.1804807884018343 * b,
+		y:
+			0.2126390058715102 * r +
+			0.715168678767756 * g +
+			0.0721923153607337 * b,
+		z:
+			0.0193308187155918 * r +
+			0.119194779794626 * g +
+			0.9505321522496607 * b
+	};
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+const fn$2 = (c = 0) => {
+	const abs = Math.abs(c);
+	if (abs > 0.0031308) {
+		return (Math.sign(c) || 1) * (1.055 * Math.pow(abs, 1 / 2.4) - 0.055);
+	}
+	return c * 12.92;
+};
+
+const convertLrgbToRgb = ({ r, g, b, alpha }, mode = 'rgb') => {
+	let res = {
+		mode,
+		r: fn$2(r),
+		g: fn$2(g),
+		b: fn$2(b)
+	};
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+/*
+	CIE XYZ D65 values to sRGB.
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+		* https://observablehq.com/@danburzo/color-matrix-calculator
+*/
+
+
+const convertXyz65ToRgb = ({ x, y, z, alpha }) => {
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let res = convertLrgbToRgb({
+		r:
+			x * 3.2409699419045226 -
+			y * 1.5373831775700939 -
+			0.4986107602930034 * z,
+		g:
+			x * -0.9692436362808796 +
+			y * 1.8759675015077204 +
+			0.0415550574071756 * z,
+		b:
+			x * 0.0556300796969936 -
+			y * 0.2039769588889765 +
+			1.0569715142428784 * z
+	});
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+const definition$q = {
+	...definition$r,
+	mode: 'a98',
+	parse: ['a98-rgb'],
+	serialize: 'a98-rgb',
+
+	fromMode: {
+		rgb: color => convertXyz65ToA98(convertRgbToXyz65(color)),
+		xyz65: convertXyz65ToA98
+	},
+
+	toMode: {
+		rgb: color => convertXyz65ToRgb(convertA98ToXyz65(color)),
+		xyz65: convertA98ToXyz65
+	}
+};
+
+const normalizeHue = hue => ((hue = hue % 360) < 0 ? hue + 360 : hue);
+
+const hue = (hues, fn) => {
+	return hues
+		.map((hue, idx, arr) => {
+			if (hue === undefined) {
+				return hue;
+			}
+			let normalized = normalizeHue(hue);
+			if (idx === 0 || hues[idx - 1] === undefined) {
+				return normalized;
+			}
+			return fn(normalized - normalizeHue(arr[idx - 1]));
+		})
+		.reduce((acc, curr) => {
+			if (
+				!acc.length ||
+				curr === undefined ||
+				acc[acc.length - 1] === undefined
+			) {
+				acc.push(curr);
+				return acc;
+			}
+			acc.push(curr + acc[acc.length - 1]);
+			return acc;
+		}, []);
+};
+
+const fixupHueShorter = arr =>
+	hue(arr, d => (Math.abs(d) <= 180 ? d : d - 360 * Math.sign(d)));
+
+const M = [-0.14861, 1.78277, -0.29227, -0.90649, 1.97294, 0];
+
+const degToRad = Math.PI / 180;
+const radToDeg = 180 / Math.PI;
+
+/*
+	Convert a RGB color to the Cubehelix HSL color space.
+
+	This computation is not present in Green's paper:
+	https://arxiv.org/pdf/1108.5083.pdf
+
+	...but can be derived from the inverse, HSL to RGB conversion.
+
+	It matches the math in Mike Bostock's D3 implementation:
+
+	https://github.com/d3/d3-color/blob/master/src/cubehelix.js
+ */
+
+
+let DE = M[3] * M[4];
+let BE = M[1] * M[4];
+let BCAD = M[1] * M[2] - M[0] * M[3];
+
+const convertRgbToCubehelix = ({ r, g, b, alpha }) => {
+	if (r === undefined) r = 0;
+	if (g === undefined) g = 0;
+	if (b === undefined) b = 0;
+	let l = (BCAD * b + r * DE - g * BE) / (BCAD + DE - BE);
+	let x = b - l;
+	let y = (M[4] * (g - l) - M[2] * x) / M[3];
+
+	let res = {
+		mode: 'cubehelix',
+		l: l,
+		s:
+			l === 0 || l === 1
+				? undefined
+				: Math.sqrt(x * x + y * y) / (M[4] * l * (1 - l))
+	};
+
+	if (res.s) res.h = Math.atan2(y, x) * radToDeg - 120;
+	if (alpha !== undefined) res.alpha = alpha;
+
+	return res;
+};
+
+const convertCubehelixToRgb = ({ h, s, l, alpha }) => {
+	let res = { mode: 'rgb' };
+
+	h = (h === undefined ? 0 : h + 120) * degToRad;
+	if (l === undefined) l = 0;
+
+	let amp = s === undefined ? 0 : s * l * (1 - l);
+
+	let cosh = Math.cos(h);
+	let sinh = Math.sin(h);
+
+	res.r = l + amp * (M[0] * cosh + M[1] * sinh);
+	res.g = l + amp * (M[2] * cosh + M[3] * sinh);
+	res.b = l + amp * (M[4] * cosh + M[5] * sinh);
+
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+const differenceHueSaturation = (std, smp) => {
+	if (std.h === undefined || smp.h === undefined || !std.s || !smp.s) {
+		return 0;
+	}
+	let std_h = normalizeHue(std.h);
+	let smp_h = normalizeHue(smp.h);
+	let dH = Math.sin((((smp_h - std_h + 360) / 2) * Math.PI) / 180);
+	return 2 * Math.sqrt(std.s * smp.s) * dH;
+};
+
+const differenceHueNaive = (std, smp) => {
+	if (std.h === undefined || smp.h === undefined) {
+		return 0;
+	}
+	let std_h = normalizeHue(std.h);
+	let smp_h = normalizeHue(smp.h);
+	if (Math.abs(smp_h - std_h) > 180) {
+		// todo should this be normalized once again?
+		return std_h - (smp_h - 360 * Math.sign(smp_h - std_h));
+	}
+	return smp_h - std_h;
+};
+
+const differenceHueChroma = (std, smp) => {
+	if (std.h === undefined || smp.h === undefined || !std.c || !smp.c) {
+		return 0;
+	}
+	let std_h = normalizeHue(std.h);
+	let smp_h = normalizeHue(smp.h);
+	let dH = Math.sin((((smp_h - std_h + 360) / 2) * Math.PI) / 180);
+	return 2 * Math.sqrt(std.c * smp.c) * dH;
+};
+
+const averageAngle = val => {
+	// See: https://en.wikipedia.org/wiki/Mean_of_circular_quantities
+	let sum = val.reduce(
+		(sum, val) => {
+			if (val !== undefined) {
+				let rad = (val * Math.PI) / 180;
+				sum.sin += Math.sin(rad);
+				sum.cos += Math.cos(rad);
+			}
+			return sum;
+		},
+		{ sin: 0, cos: 0 }
+	);
+	let angle = (Math.atan2(sum.sin, sum.cos) * 180) / Math.PI;
+	return angle < 0 ? 360 + angle : angle;
+};
+
+/* 
+	Dave Green's Cubehelix
+	----------------------
+
+	Green, D. A., 2011, "A colour scheme for the display of astronomical intensity images", 
+	Bulletin of the Astronomical Society of India, 39, 289. (2011BASI...39..289G at ADS.) 
+
+	https://www.mrao.cam.ac.uk/%7Edag/CUBEHELIX/
+	https://arxiv.org/pdf/1108.5083.pdf
+
+	Although Cubehelix was defined to be a method to obtain a colour scheme,
+	it actually contains a definition of a colour space, as identified by 
+	Mike Bostock and implemented in D3.js.
+
+	Green's paper introduces the following terminology:
+
+	* 	a `lightness` dimension in the interval [0, 1] 
+		on which we interpolate to obtain the colour scheme
+	*	a `start` colour that is analogous to a Hue in HSL space
+	*	a number of `rotations` around the Hue cylinder.
+	*	a `hue` parameter which should more appropriately be called `saturation`
+	
+	As such, the original definition of the Cubehelix scheme is actually an
+	interpolation between two colors in the Cubehelix space:
+
+	H: start 				H: start + 360 * rotations
+	S: hue 			->		S: hue
+	L: 0					L: 1
+
+	We can therefore extend the interpolation to any two colors in this space,
+	with a variable Saturation and a Lightness interval other than the fixed 0 -> 1.
+*/
+
+
+const definition$p = {
+	mode: 'cubehelix',
+	channels: ['h', 's', 'l', 'alpha'],
+	parse: ['--cubehelix'],
+	serialize: '--cubehelix',
+
+	ranges: {
+		h: [0, 360],
+		s: [0, 4.614],
+		l: [0, 1]
+	},
+
+	fromMode: {
+		rgb: convertRgbToCubehelix
+	},
+
+	toMode: {
+		rgb: convertCubehelixToRgb
+	},
+
+	interpolate: {
+		h: {
+			use: interpolatorLinear,
+			fixup: fixupHueShorter
+		},
+		s: interpolatorLinear,
+		l: interpolatorLinear,
+		alpha: {
+			use: interpolatorLinear,
+			fixup: fixupAlpha
+		}
+	},
+
+	difference: {
+		h: differenceHueSaturation
+	},
+
+	average: {
+		h: averageAngle
+	}
+};
+
+/* 
+	References: 
+		* https://drafts.csswg.org/css-color/#lab-to-lch
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+*/
+const convertLabToLch = ({ l, a, b, alpha }, mode = 'lch') => {
+	if (a === undefined) a = 0;
+	if (b === undefined) b = 0;
+	let c = Math.sqrt(a * a + b * b);
+	let res = { mode, l, c };
+	if (c) res.h = normalizeHue((Math.atan2(b, a) * 180) / Math.PI);
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+/* 
+	References: 
+		* https://drafts.csswg.org/css-color/#lch-to-lab
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+*/
+const convertLchToLab = ({ l, c, h, alpha }, mode = 'lab') => {
+	if (h === undefined) h = 0;
+	let res = {
+		mode,
+		l,
+		a: c ? c * Math.cos((h / 180) * Math.PI) : 0,
+		b: c ? c * Math.sin((h / 180) * Math.PI) : 0
+	};
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+const k$3 = Math.pow(29, 3) / Math.pow(3, 3);
+const e$1 = Math.pow(6, 3) / Math.pow(29, 3);
+
+/*
+	The XYZ tristimulus values (white point)
+	of standard illuminants for the CIE 1931 2° 
+	standard observer.
+
+	See: https://en.wikipedia.org/wiki/Standard_illuminant
+ */
+
+const D50 = {
+	X: 0.3457 / 0.3585,
+	Y: 1,
+	Z: (1 - 0.3457 - 0.3585) / 0.3585
+};
+
+const D65 = {
+	X: 0.3127 / 0.329,
+	Y: 1,
+	Z: (1 - 0.3127 - 0.329) / 0.329
+};
+
+let fn$1 = v => (Math.pow(v, 3) > e$1 ? Math.pow(v, 3) : (116 * v - 16) / k$3);
+
+const convertLab65ToXyz65 = ({ l, a, b, alpha }) => {
+	if (l === undefined) l = 0;
+	if (a === undefined) a = 0;
+	if (b === undefined) b = 0;
+
+	let fy = (l + 16) / 116;
+	let fx = a / 500 + fy;
+	let fz = fy - b / 200;
+
+	let res = {
+		mode: 'xyz65',
+		x: fn$1(fx) * D65.X,
+		y: fn$1(fy) * D65.Y,
+		z: fn$1(fz) * D65.Z
+	};
+
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+const convertLab65ToRgb = lab => convertXyz65ToRgb(convertLab65ToXyz65(lab));
+
+const f$1 = value => (value > e$1 ? Math.cbrt(value) : (k$3 * value + 16) / 116);
+
+const convertXyz65ToLab65 = ({ x, y, z, alpha }) => {
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let f0 = f$1(x / D65.X);
+	let f1 = f$1(y / D65.Y);
+	let f2 = f$1(z / D65.Z);
+
+	let res = {
+		mode: 'lab65',
+		l: 116 * f1 - 16,
+		a: 500 * (f0 - f1),
+		b: 200 * (f1 - f2)
+	};
+
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+const convertRgbToLab65 = rgb => {
+	let res = convertXyz65ToLab65(convertRgbToXyz65(rgb));
+
+	// Fixes achromatic RGB colors having a _slight_ chroma due to floating-point errors
+	// and approximated computations in sRGB <-> CIELab.
+	// See: https://github.com/d3/d3-color/pull/46
+	if (rgb.r === rgb.b && rgb.b === rgb.g) {
+		res.a = res.b = 0;
+	}
+	return res;
+};
+
+const kE = 1;
+const kCH = 1;
+const θ = (26 / 180) * Math.PI;
+const cosθ = Math.cos(θ);
+const sinθ = Math.sin(θ);
+const factor = 100 / Math.log(139 / 100); // ~ 303.67
+
+/*
+	Convert DIN99o LCh to CIELab D65
+	--------------------------------
+ */
+
+const convertDlchToLab65 = ({ l, c, h, alpha }) => {
+	if (l === undefined) l = 0;
+	if (c === undefined) c = 0;
+	if (h === undefined) h = 0;
+	let res = {
+		mode: 'lab65',
+		l: (Math.exp((l * kE) / factor) - 1) / 0.0039
+	};
+
+	let G = (Math.exp(0.0435 * c * kCH * kE) - 1) / 0.075;
+	let e = G * Math.cos((h / 180) * Math.PI - θ);
+	let f = G * Math.sin((h / 180) * Math.PI - θ);
+	res.a = e * cosθ - (f / 0.83) * sinθ;
+	res.b = e * sinθ + (f / 0.83) * cosθ;
+
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+/*
+	Convert CIELab D65 to DIN99o LCh
+	================================
+ */
+
+const convertLab65ToDlch = ({ l, a, b, alpha }) => {
+	if (l === undefined) l = 0;
+	if (a === undefined) a = 0;
+	if (b === undefined) b = 0;
+	let e = a * cosθ + b * sinθ;
+	let f = 0.83 * (b * cosθ - a * sinθ);
+	let G = Math.sqrt(e * e + f * f);
+	let res = {
+		mode: 'dlch',
+		l: (factor / kE) * Math.log(1 + 0.0039 * l),
+		c: Math.log(1 + 0.075 * G) / (0.0435 * kCH * kE)
+	};
+
+	if (res.c) {
+		res.h = normalizeHue(((Math.atan2(f, e) + θ) / Math.PI) * 180);
+	}
+
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+const convertDlabToLab65 = c => convertDlchToLab65(convertLabToLch(c, 'dlch'));
+const convertLab65ToDlab = c => convertLchToLab(convertLab65ToDlch(c), 'dlab');
+
+const definition$o = {
+	mode: 'dlab',
+
+	parse: ['--din99o-lab'],
+	serialize: '--din99o-lab',
+
+	toMode: {
+		lab65: convertDlabToLab65,
+		rgb: c => convertLab65ToRgb(convertDlabToLab65(c))
+	},
+
+	fromMode: {
+		lab65: convertLab65ToDlab,
+		rgb: c => convertLab65ToDlab(convertRgbToLab65(c))
+	},
+
+	channels: ['l', 'a', 'b', 'alpha'],
+
+	ranges: {
+		l: [0, 100],
+		a: [-40.09, 45.501],
+		b: [-40.469, 44.344]
+	},
+
+	interpolate: {
+		l: interpolatorLinear,
+		a: interpolatorLinear,
+		b: interpolatorLinear,
+		alpha: {
+			use: interpolatorLinear,
+			fixup: fixupAlpha
+		}
+	}
+};
+
+const definition$n = {
+	mode: 'dlch',
+
+	parse: ['--din99o-lch'],
+	serialize: '--din99o-lch',
+
+	toMode: {
+		lab65: convertDlchToLab65,
+		dlab: c => convertLchToLab(c, 'dlab'),
+		rgb: c => convertLab65ToRgb(convertDlchToLab65(c))
+	},
+
+	fromMode: {
+		lab65: convertLab65ToDlch,
+		dlab: c => convertLabToLch(c, 'dlch'),
+		rgb: c => convertLab65ToDlch(convertRgbToLab65(c))
+	},
+
+	channels: ['l', 'c', 'h', 'alpha'],
+
+	ranges: {
+		l: [0, 100],
+		c: [0, 51.484],
+		h: [0, 360]
+	},
+
+	interpolate: {
+		l: interpolatorLinear,
+		c: interpolatorLinear,
+		h: {
+			use: interpolatorLinear,
+			fixup: fixupHueShorter
+		},
+		alpha: {
+			use: interpolatorLinear,
+			fixup: fixupAlpha
+		}
+	},
+
+	difference: {
+		h: differenceHueChroma
+	},
+
+	average: {
+		h: averageAngle
+	}
+};
+
+// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
+
+function convertHsiToRgb({ h, s, i, alpha }) {
+	h = normalizeHue(h !== undefined ? h : 0);
+	if (s === undefined) s = 0;
+	if (i === undefined) i = 0;
+	let f = Math.abs(((h / 60) % 2) - 1);
+	let res;
+	switch (Math.floor(h / 60)) {
+		case 0:
+			res = {
+				r: i * (1 + s * (3 / (2 - f) - 1)),
+				g: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1)),
+				b: i * (1 - s)
+			};
+			break;
+		case 1:
+			res = {
+				r: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1)),
+				g: i * (1 + s * (3 / (2 - f) - 1)),
+				b: i * (1 - s)
+			};
+			break;
+		case 2:
+			res = {
+				r: i * (1 - s),
+				g: i * (1 + s * (3 / (2 - f) - 1)),
+				b: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1))
+			};
+			break;
+		case 3:
+			res = {
+				r: i * (1 - s),
+				g: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1)),
+				b: i * (1 + s * (3 / (2 - f) - 1))
+			};
+			break;
+		case 4:
+			res = {
+				r: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1)),
+				g: i * (1 - s),
+				b: i * (1 + s * (3 / (2 - f) - 1))
+			};
+			break;
+		case 5:
+			res = {
+				r: i * (1 + s * (3 / (2 - f) - 1)),
+				g: i * (1 - s),
+				b: i * (1 + s * ((3 * (1 - f)) / (2 - f) - 1))
+			};
+			break;
+		default:
+			res = { r: i * (1 - s), g: i * (1 - s), b: i * (1 - s) };
+	}
+
+	res.mode = 'rgb';
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+}
+
+// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
+
+function convertRgbToHsi({ r, g, b, alpha }) {
+	if (r === undefined) r = 0;
+	if (g === undefined) g = 0;
+	if (b === undefined) b = 0;
+	let M = Math.max(r, g, b),
+		m = Math.min(r, g, b);
+	let res = {
+		mode: 'hsi',
+		s: r + g + b === 0 ? 0 : 1 - (3 * m) / (r + g + b),
+		i: (r + g + b) / 3
+	};
+	if (M - m !== 0)
+		res.h =
+			(M === r
+				? (g - b) / (M - m) + (g < b) * 6
+				: M === g
+				? (b - r) / (M - m) + 2
+				: (r - g) / (M - m) + 4) * 60;
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+}
+
+const definition$m = {
+	mode: 'hsi',
+
+	toMode: {
+		rgb: convertHsiToRgb
+	},
+
+	parse: ['--hsi'],
+	serialize: '--hsi',
+
+	fromMode: {
+		rgb: convertRgbToHsi
+	},
+
+	channels: ['h', 's', 'i', 'alpha'],
+
+	ranges: {
+		h: [0, 360]
+	},
+
+	gamut: 'rgb',
+
+	interpolate: {
+		h: { use: interpolatorLinear, fixup: fixupHueShorter },
+		s: interpolatorLinear,
+		i: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	},
+
+	difference: {
+		h: differenceHueSaturation
+	},
+
+	average: {
+		h: averageAngle
+	}
+};
+
+// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
+
+function convertHslToRgb({ h, s, l, alpha }) {
+	h = normalizeHue(h !== undefined ? h : 0);
+	if (s === undefined) s = 0;
+	if (l === undefined) l = 0;
+	let m1 = l + s * (l < 0.5 ? l : 1 - l);
+	let m2 = m1 - (m1 - l) * 2 * Math.abs(((h / 60) % 2) - 1);
+	let res;
+	switch (Math.floor(h / 60)) {
+		case 0:
+			res = { r: m1, g: m2, b: 2 * l - m1 };
+			break;
+		case 1:
+			res = { r: m2, g: m1, b: 2 * l - m1 };
+			break;
+		case 2:
+			res = { r: 2 * l - m1, g: m1, b: m2 };
+			break;
+		case 3:
+			res = { r: 2 * l - m1, g: m2, b: m1 };
+			break;
+		case 4:
+			res = { r: m2, g: 2 * l - m1, b: m1 };
+			break;
+		case 5:
+			res = { r: m1, g: 2 * l - m1, b: m2 };
+			break;
+		default:
+			res = { r: 2 * l - m1, g: 2 * l - m1, b: 2 * l - m1 };
+	}
+	res.mode = 'rgb';
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+}
+
+// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
+
+function convertRgbToHsl({ r, g, b, alpha }) {
+	if (r === undefined) r = 0;
+	if (g === undefined) g = 0;
+	if (b === undefined) b = 0;
+	let M = Math.max(r, g, b),
+		m = Math.min(r, g, b);
+	let res = {
+		mode: 'hsl',
+		s: M === m ? 0 : (M - m) / (1 - Math.abs(M + m - 1)),
+		l: 0.5 * (M + m)
+	};
+	if (M - m !== 0)
+		res.h =
+			(M === r
+				? (g - b) / (M - m) + (g < b) * 6
+				: M === g
+				? (b - r) / (M - m) + 2
+				: (r - g) / (M - m) + 4) * 60;
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+}
+
+const hueToDeg = (val, unit) => {
+	switch (unit) {
+		case 'deg':
+			return +val;
+		case 'rad':
+			return (val / Math.PI) * 180;
+		case 'grad':
+			return (val / 10) * 9;
+		case 'turn':
+			return val * 360;
+	}
+};
+
+/*
+	hsl() regular expressions for legacy format
+	Reference: https://drafts.csswg.org/css-color/#the-hsl-notation
+ */
+const hsl_old = new RegExp(
+	`^hsla?\\(\\s*${hue$1}${c}${per}${c}${per}\\s*(?:,\\s*${num_per}\\s*)?\\)$`
+);
+
+const parseHslLegacy = color => {
+	let match = color.match(hsl_old);
+	if (!match) return;
+	let res = { mode: 'hsl' };
+
+	if (match[3] !== undefined) {
+		res.h = +match[3];
+	} else if (match[1] !== undefined && match[2] !== undefined) {
+		res.h = hueToDeg(match[1], match[2]);
+	}
+
+	if (match[4] !== undefined) {
+		res.s = Math.min(Math.max(0, match[4] / 100), 1);
+	}
+
+	if (match[5] !== undefined) {
+		res.l = Math.min(Math.max(0, match[5] / 100), 1);
+	}
+
+	if (match[6] !== undefined) {
+		res.alpha = Math.max(0, Math.min(1, match[6] / 100));
+	} else if (match[7] !== undefined) {
+		res.alpha = Math.max(0, Math.min(1, +match[7]));
+	}
+	return res;
+};
+
+function parseHsl(color, parsed) {
+	if (!parsed || (parsed[0] !== 'hsl' && parsed[0] !== 'hsla')) {
+		return undefined;
+	}
+	const res = { mode: 'hsl' };
+	const [, h, s, l, alpha] = parsed;
+
+	if (h.type !== Tok.None) {
+		if (h.type === Tok.Percentage) {
+			return undefined;
+		}
+		res.h = h.value;
+	}
+
+	if (s.type !== Tok.None) {
+		if (s.type === Tok.Hue) {
+			return undefined;
+		}
+		res.s = s.value / 100;
+	}
+
+	if (l.type !== Tok.None) {
+		if (l.type === Tok.Hue) {
+			return undefined;
+		}
+		res.l = l.value / 100;
+	}
+
+	if (alpha.type !== Tok.None) {
+		res.alpha = Math.min(
+			1,
+			Math.max(
+				0,
+				alpha.type === Tok.Number ? alpha.value : alpha.value / 100
+			)
+		);
+	}
+
+	return res;
+}
+
+const definition$l = {
+	mode: 'hsl',
+
+	toMode: {
+		rgb: convertHslToRgb
+	},
+
+	fromMode: {
+		rgb: convertRgbToHsl
+	},
+
+	channels: ['h', 's', 'l', 'alpha'],
+
+	ranges: {
+		h: [0, 360]
+	},
+
+	gamut: 'rgb',
+
+	parse: [parseHsl, parseHslLegacy],
+	serialize: c =>
+		`hsl(${c.h !== undefined ? c.h : 'none'} ${
+			c.s !== undefined ? c.s * 100 + '%' : 'none'
+		} ${c.l !== undefined ? c.l * 100 + '%' : 'none'}${
+			c.alpha < 1 ? ` / ${c.alpha}` : ''
+		})`,
+
+	interpolate: {
+		h: { use: interpolatorLinear, fixup: fixupHueShorter },
+		s: interpolatorLinear,
+		l: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	},
+
+	difference: {
+		h: differenceHueSaturation
+	},
+
+	average: {
+		h: averageAngle
+	}
+};
+
+// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
+
+function convertHsvToRgb({ h, s, v, alpha }) {
+	h = normalizeHue(h !== undefined ? h : 0);
+	if (s === undefined) s = 0;
+	if (v === undefined) v = 0;
+	let f = Math.abs(((h / 60) % 2) - 1);
+	let res;
+	switch (Math.floor(h / 60)) {
+		case 0:
+			res = { r: v, g: v * (1 - s * f), b: v * (1 - s) };
+			break;
+		case 1:
+			res = { r: v * (1 - s * f), g: v, b: v * (1 - s) };
+			break;
+		case 2:
+			res = { r: v * (1 - s), g: v, b: v * (1 - s * f) };
+			break;
+		case 3:
+			res = { r: v * (1 - s), g: v * (1 - s * f), b: v };
+			break;
+		case 4:
+			res = { r: v * (1 - s * f), g: v * (1 - s), b: v };
+			break;
+		case 5:
+			res = { r: v, g: v * (1 - s), b: v * (1 - s * f) };
+			break;
+		default:
+			res = { r: v * (1 - s), g: v * (1 - s), b: v * (1 - s) };
+	}
+	res.mode = 'rgb';
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+}
+
+// Based on: https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
+
+function convertRgbToHsv({ r, g, b, alpha }) {
+	if (r === undefined) r = 0;
+	if (g === undefined) g = 0;
+	if (b === undefined) b = 0;
+	let M = Math.max(r, g, b),
+		m = Math.min(r, g, b);
+	let res = {
+		mode: 'hsv',
+		s: M === 0 ? 0 : 1 - m / M,
+		v: M
+	};
+	if (M - m !== 0)
+		res.h =
+			(M === r
+				? (g - b) / (M - m) + (g < b) * 6
+				: M === g
+				? (b - r) / (M - m) + 2
+				: (r - g) / (M - m) + 4) * 60;
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+}
+
+const definition$k = {
+	mode: 'hsv',
+
+	toMode: {
+		rgb: convertHsvToRgb
+	},
+
+	parse: ['--hsv'],
+	serialize: '--hsv',
+
+	fromMode: {
+		rgb: convertRgbToHsv
+	},
+
+	channels: ['h', 's', 'v', 'alpha'],
+
+	ranges: {
+		h: [0, 360]
+	},
+
+	gamut: 'rgb',
+
+	interpolate: {
+		h: { use: interpolatorLinear, fixup: fixupHueShorter },
+		s: interpolatorLinear,
+		v: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	},
+
+	difference: {
+		h: differenceHueSaturation
+	},
+
+	average: {
+		h: averageAngle
+	}
+};
+
+/*
+	HWB to RGB converter
+	--------------------
+
+	References:
+		* https://drafts.csswg.org/css-color/#hwb-to-rgb
+		* https://en.wikipedia.org/wiki/HWB_color_model
+		* http://alvyray.com/Papers/CG/HWB_JGTv208.pdf
+ */
+
+
+function convertHwbToRgb({ h, w, b, alpha }) {
+	if (w === undefined) w = 0;
+	if (b === undefined) b = 0;
+	// normalize w + b to 1
+	if (w + b > 1) {
+		let s = w + b;
+		w /= s;
+		b /= s;
+	}
+	return convertHsvToRgb({
+		h: h,
+		s: b === 1 ? 1 : 1 - w / (1 - b),
+		v: 1 - b,
+		alpha: alpha
+	});
+}
+
+/*
+	RGB to HWB converter
+	--------------------
+
+	References:
+		* https://drafts.csswg.org/css-color/#hwb-to-rgb
+		* https://en.wikipedia.org/wiki/HWB_color_model
+		* http://alvyray.com/Papers/CG/HWB_JGTv208.pdf
+ */
+
+
+function convertRgbToHwb(rgba) {
+	let hsv = convertRgbToHsv(rgba);
+	if (hsv === undefined) return undefined;
+	let s = hsv.s !== undefined ? hsv.s : 0;
+	let v = hsv.v !== undefined ? hsv.v : 0;
+	let res = {
+		mode: 'hwb',
+		w: (1 - s) * v,
+		b: 1 - v
+	};
+	if (hsv.h !== undefined) res.h = hsv.h;
+	if (hsv.alpha !== undefined) res.alpha = hsv.alpha;
+	return res;
+}
+
+function ParseHwb(color, parsed) {
+	if (!parsed || parsed[0] !== 'hwb') {
+		return undefined;
+	}
+	const res = { mode: 'hwb' };
+	const [, h, w, b, alpha] = parsed;
+
+	if (h.type !== Tok.None) {
+		if (h.type === Tok.Percentage) {
+			return undefined;
+		}
+		res.h = h.value;
+	}
+
+	if (w.type !== Tok.None) {
+		if (w.type === Tok.Hue) {
+			return undefined;
+		}
+		res.w = w.value / 100;
+	}
+
+	if (b.type !== Tok.None) {
+		if (b.type === Tok.Hue) {
+			return undefined;
+		}
+		res.b = b.value / 100;
+	}
+
+	if (alpha.type !== Tok.None) {
+		res.alpha = Math.min(
+			1,
+			Math.max(
+				0,
+				alpha.type === Tok.Number ? alpha.value : alpha.value / 100
+			)
+		);
+	}
+
+	return res;
+}
+
+const definition$j = {
+	mode: 'hwb',
+
+	toMode: {
+		rgb: convertHwbToRgb
+	},
+
+	fromMode: {
+		rgb: convertRgbToHwb
+	},
+
+	channels: ['h', 'w', 'b', 'alpha'],
+
+	ranges: {
+		h: [0, 360]
+	},
+
+	gamut: 'rgb',
+
+	parse: [ParseHwb],
+	serialize: c =>
+		`hwb(${c.h !== undefined ? c.h : 'none'} ${
+			c.w !== undefined ? c.w * 100 + '%' : 'none'
+		} ${c.b !== undefined ? c.b * 100 + '%' : 'none'}${
+			c.alpha < 1 ? ` / ${c.alpha}` : ''
+		})`,
+
+	interpolate: {
+		h: { use: interpolatorLinear, fixup: fixupHueShorter },
+		w: interpolatorLinear,
+		b: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	},
+
+	difference: {
+		h: differenceHueNaive
+	},
+
+	average: {
+		h: averageAngle
+	}
+};
+
+/*
+	Relative XYZ has Y=1 for media white,
+	BT.2048 says media white Y=203 (at PQ 58).
+	See: https://www.itu.int/dms_pub/itu-r/opb/rep/R-REP-BT.2408-3-2019-PDF-E.pdf
+*/
+const YW = 203;
+
+/*
+	https://en.wikipedia.org/wiki/Transfer_functions_in_imaging
+*/
+
+const M1 = 0.1593017578125;
+const M2 = 78.84375;
+const C1 = 0.8359375;
+const C2 = 18.8515625;
+const C3 = 18.6875;
+
+/*
+	Perceptual Quantizer, as defined in Rec. BT 2100-2 (2018)
+
+	* https://www.itu.int/rec/R-REC-BT.2100-2-201807-I/en
+	* https://en.wikipedia.org/wiki/Perceptual_quantizer
+*/
+
+/* PQ EOTF, defined for `v` in [0,1]. */
+function transferPqDecode(v) {
+	if (v < 0) return 0;
+	const c = Math.pow(v, 1 / M2);
+	return 1e4 * Math.pow(Math.max(0, c - C1) / (C2 - C3 * c), 1 / M1);
+}
+
+/* PQ EOTF^-1, defined for `v` in [0, 1e4]. */
+function transferPqEncode(v) {
+	if (v < 0) return 0;
+	const c = Math.pow(v / 1e4, M1);
+	return Math.pow((C1 + C2 * c) / (1 + C3 * c), M2);
+}
+
+const toRel = c => Math.max(c / YW, 0);
+
+const convertItpToXyz65 = ({ i, t, p, alpha }) => {
+	if (i === undefined) i = 0;
+	if (t === undefined) t = 0;
+	if (p === undefined) p = 0;
+
+	const l = transferPqDecode(
+		i + 0.008609037037932761 * t + 0.11102962500302593 * p
+	);
+	const m = transferPqDecode(
+		i - 0.00860903703793275 * t - 0.11102962500302599 * p
+	);
+	const s = transferPqDecode(
+		i + 0.5600313357106791 * t - 0.32062717498731885 * p
+	);
+
+	const res = {
+		mode: 'xyz65',
+		x: toRel(
+			2.0701522183894219 * l -
+				1.3263473389671556 * m +
+				0.2066510476294051 * s
+		),
+		y: toRel(
+			0.3647385209748074 * l +
+				0.680566024947227 * m -
+				0.0453045459220346 * s
+		),
+		z: toRel(
+			-0.049747207535812 * l -
+				0.0492609666966138 * m +
+				1.1880659249923042 * s
+		)
+	};
+
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+const toAbs = (c = 0) => Math.max(c * YW, 0);
+
+const convertXyz65ToItp = ({ x, y, z, alpha }) => {
+	const absX = toAbs(x);
+	const absY = toAbs(y);
+	const absZ = toAbs(z);
+	const l = transferPqEncode(
+		0.3592832590121217 * absX +
+			0.6976051147779502 * absY -
+			0.0358915932320289 * absZ
+	);
+	const m = transferPqEncode(
+		-0.1920808463704995 * absX +
+			1.1004767970374323 * absY +
+			0.0753748658519118 * absZ
+	);
+	const s = transferPqEncode(
+		0.0070797844607477 * absX +
+			0.0748396662186366 * absY +
+			0.8433265453898765 * absZ
+	);
+
+	const i = 0.5 * l + 0.5 * m;
+	const t = 1.61376953125 * l - 3.323486328125 * m + 1.709716796875 * s;
+	const p = 4.378173828125 * l - 4.24560546875 * m - 0.132568359375 * s;
+
+	const res = { mode: 'itp', i, t, p };
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+/*
+  ICtCp (or ITP) color space, as defined in ITU-R Recommendation BT.2100.
+
+  ICtCp is drafted to be supported in CSS within
+  [CSS Color HDR Module Level 1](https://drafts.csswg.org/css-color-hdr/#ICtCp) spec.
+*/
+
+const definition$i = {
+	mode: 'itp',
+	channels: ['i', 't', 'p', 'alpha'],
+	parse: ['--ictcp'],
+	serialize: '--ictcp',
+
+	toMode: {
+		xyz65: convertItpToXyz65,
+		rgb: color => convertXyz65ToRgb(convertItpToXyz65(color))
+	},
+
+	fromMode: {
+		xyz65: convertXyz65ToItp,
+		rgb: color => convertXyz65ToItp(convertRgbToXyz65(color))
+	},
+
+	ranges: {
+		i: [0, 0.581],
+		t: [-0.369, 0.272],
+		p: [-0.164, 0.331]
+	},
+
+	interpolate: {
+		i: interpolatorLinear,
+		t: interpolatorLinear,
+		p: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	}
+};
+
+const p$2 = 134.03437499999998; // = 1.7 * 2523 / Math.pow(2, 5);
+const d0$1 = 1.6295499532821566e-11;
+
+/* 
+	The encoding function is derived from Perceptual Quantizer.
+*/
+const jabPqEncode = v => {
+	if (v < 0) return 0;
+	let vn = Math.pow(v / 10000, M1);
+	return Math.pow((C1 + C2 * vn) / (1 + C3 * vn), p$2);
+};
+
+// Convert to Absolute XYZ
+const abs = (v = 0) => Math.max(v * 203, 0);
+
+const convertXyz65ToJab = ({ x, y, z, alpha }) => {
+	x = abs(x);
+	y = abs(y);
+	z = abs(z);
+
+	let xp = 1.15 * x - 0.15 * z;
+	let yp = 0.66 * y + 0.34 * x;
+
+	let l = jabPqEncode(0.41478972 * xp + 0.579999 * yp + 0.014648 * z);
+	let m = jabPqEncode(-0.20151 * xp + 1.120649 * yp + 0.0531008 * z);
+	let s = jabPqEncode(-0.0166008 * xp + 0.2648 * yp + 0.6684799 * z);
+
+	let i = (l + m) / 2;
+
+	let res = {
+		mode: 'jab',
+		j: (0.44 * i) / (1 - 0.56 * i) - d0$1,
+		a: 3.524 * l - 4.066708 * m + 0.542708 * s,
+		b: 0.199076 * l + 1.096799 * m - 1.295875 * s
+	};
+
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+const p$1 = 134.03437499999998; // = 1.7 * 2523 / Math.pow(2, 5);
+const d0 = 1.6295499532821566e-11;
+
+/* 
+	The encoding function is derived from Perceptual Quantizer.
+*/
+const jabPqDecode = v => {
+	if (v < 0) return 0;
+	let vp = Math.pow(v, 1 / p$1);
+	return 10000 * Math.pow((C1 - vp) / (C3 * vp - C2), 1 / M1);
+};
+
+const rel = v => v / 203;
+
+const convertJabToXyz65 = ({ j, a, b, alpha }) => {
+	if (j === undefined) j = 0;
+	if (a === undefined) a = 0;
+	if (b === undefined) b = 0;
+	let i = (j + d0) / (0.44 + 0.56 * (j + d0));
+
+	let l = jabPqDecode(i + 0.13860504 * a + 0.058047316 * b);
+	let m = jabPqDecode(i - 0.13860504 * a - 0.058047316 * b);
+	let s = jabPqDecode(i - 0.096019242 * a - 0.8118919 * b);
+
+	let res = {
+		mode: 'xyz65',
+		x: rel(
+			1.661373024652174 * l -
+				0.914523081304348 * m +
+				0.23136208173913045 * s
+		),
+		y: rel(
+			-0.3250758611844533 * l +
+				1.571847026732543 * m -
+				0.21825383453227928 * s
+		),
+		z: rel(-0.090982811 * l - 0.31272829 * m + 1.5227666 * s)
+	};
+
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+/*
+	Convert sRGB to JzAzBz.
+
+	For achromatic sRGB colors, adjust the equivalent JzAzBz color
+	to be achromatic as well, insteading of having a very slight chroma.
+ */
+
+
+const convertRgbToJab = rgb => {
+	let res = convertXyz65ToJab(convertRgbToXyz65(rgb));
+	if (rgb.r === rgb.b && rgb.b === rgb.g) {
+		res.a = res.b = 0;
+	}
+	return res;
+};
+
+const convertJabToRgb = color => convertXyz65ToRgb(convertJabToXyz65(color));
+
+/*
+	The JzAzBz color space.
+
+	Based on:
+
+	Muhammad Safdar, Guihua Cui, Youn Jin Kim, and Ming Ronnier Luo, 
+	"Perceptually uniform color space for image signals 
+	including high dynamic range and wide gamut," 
+	Opt. Express 25, 15131-15151 (2017) 
+
+	https://doi.org/10.1364/OE.25.015131
+ */
+
+
+const definition$h = {
+	mode: 'jab',
+	channels: ['j', 'a', 'b', 'alpha'],
+
+	parse: ['--jzazbz'],
+	serialize: '--jzazbz',
+
+	fromMode: {
+		rgb: convertRgbToJab,
+		xyz65: convertXyz65ToJab
+	},
+
+	toMode: {
+		rgb: convertJabToRgb,
+		xyz65: convertJabToXyz65
+	},
+
+	ranges: {
+		j: [0, 0.222],
+		a: [-0.109, 0.129],
+		b: [-0.185, 0.134]
+	},
+
+	interpolate: {
+		j: interpolatorLinear,
+		a: interpolatorLinear,
+		b: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	}
+};
+
+const convertJabToJch = ({ j, a, b, alpha }) => {
+	if (a === undefined) a = 0;
+	if (b === undefined) b = 0;
+	let c = Math.sqrt(a * a + b * b);
+	let res = {
+		mode: 'jch',
+		j,
+		c
+	};
+	if (c) {
+		res.h = normalizeHue((Math.atan2(b, a) * 180) / Math.PI);
+	}
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+const convertJchToJab = ({ j, c, h, alpha }) => {
+	if (h === undefined) h = 0;
+	let res = {
+		mode: 'jab',
+		j,
+		a: c ? c * Math.cos((h / 180) * Math.PI) : 0,
+		b: c ? c * Math.sin((h / 180) * Math.PI) : 0
+	};
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+const definition$g = {
+	mode: 'jch',
+
+	parse: ['--jzczhz'],
+	serialize: '--jzczhz',
+
+	toMode: {
+		jab: convertJchToJab,
+		rgb: c => convertJabToRgb(convertJchToJab(c))
+	},
+
+	fromMode: {
+		rgb: c => convertJabToJch(convertRgbToJab(c)),
+		jab: convertJabToJch
+	},
+
+	channels: ['j', 'c', 'h', 'alpha'],
+
+	ranges: {
+		j: [0, 0.221],
+		c: [0, 0.19],
+		h: [0, 360]
+	},
+
+	interpolate: {
+		h: { use: interpolatorLinear, fixup: fixupHueShorter },
+		c: interpolatorLinear,
+		j: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	},
+
+	difference: {
+		h: differenceHueChroma
+	},
+
+	average: {
+		h: averageAngle
+	}
+};
+
+const k$2 = Math.pow(29, 3) / Math.pow(3, 3);
+const e = Math.pow(6, 3) / Math.pow(29, 3);
+
+let fn = v => (Math.pow(v, 3) > e ? Math.pow(v, 3) : (116 * v - 16) / k$2);
+
+const convertLabToXyz50 = ({ l, a, b, alpha }) => {
+	if (l === undefined) l = 0;
+	if (a === undefined) a = 0;
+	if (b === undefined) b = 0;
+	let fy = (l + 16) / 116;
+	let fx = a / 500 + fy;
+	let fz = fy - b / 200;
+
+	let res = {
+		mode: 'xyz50',
+		x: fn(fx) * D50.X,
+		y: fn(fy) * D50.Y,
+		z: fn(fz) * D50.Z
+	};
+
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+/*
+	CIE XYZ D50 values to sRGB.
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+*/
+
+
+const convertXyz50ToRgb = ({ x, y, z, alpha }) => {
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let res = convertLrgbToRgb({
+		r:
+			x * 3.1341359569958707 -
+			y * 1.6173863321612538 -
+			0.4906619460083532 * z,
+		g:
+			x * -0.978795502912089 +
+			y * 1.916254567259524 +
+			0.03344273116131949 * z,
+		b:
+			x * 0.07195537988411677 -
+			y * 0.2289768264158322 +
+			1.405386058324125 * z
+	});
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+const convertLabToRgb = lab => convertXyz50ToRgb(convertLabToXyz50(lab));
+
+/*
+	Convert sRGB values to CIE XYZ D50
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+	
+*/
+
+
+const convertRgbToXyz50 = rgb => {
+	let { r, g, b, alpha } = convertRgbToLrgb(rgb);
+	let res = {
+		mode: 'xyz50',
+		x:
+			0.436065742824811 * r +
+			0.3851514688337912 * g +
+			0.14307845442264197 * b,
+		y:
+			0.22249319175623702 * r +
+			0.7168870538238823 * g +
+			0.06061979053616537 * b,
+		z:
+			0.013923904500943465 * r +
+			0.09708128566574634 * g +
+			0.7140993584005155 * b
+	};
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+const f = value => (value > e ? Math.cbrt(value) : (k$2 * value + 16) / 116);
+
+const convertXyz50ToLab = ({ x, y, z, alpha }) => {
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let f0 = f(x / D50.X);
+	let f1 = f(y / D50.Y);
+	let f2 = f(z / D50.Z);
+
+	let res = {
+		mode: 'lab',
+		l: 116 * f1 - 16,
+		a: 500 * (f0 - f1),
+		b: 200 * (f1 - f2)
+	};
+
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+const convertRgbToLab = rgb => {
+	let res = convertXyz50ToLab(convertRgbToXyz50(rgb));
+
+	// Fixes achromatic RGB colors having a _slight_ chroma due to floating-point errors
+	// and approximated computations in sRGB <-> CIELab.
+	// See: https://github.com/d3/d3-color/pull/46
+	if (rgb.r === rgb.b && rgb.b === rgb.g) {
+		res.a = res.b = 0;
+	}
+	return res;
+};
+
+function parseLab(color, parsed) {
+	if (!parsed || parsed[0] !== 'lab') {
+		return undefined;
+	}
+	const res = { mode: 'lab' };
+	const [, l, a, b, alpha] = parsed;
+	if (l.type === Tok.Hue || a.type === Tok.Hue || b.type === Tok.Hue) {
+		return undefined;
+	}
+	if (l.type !== Tok.None) {
+		res.l = Math.min(Math.max(0, l.value), 100);
+	}
+	if (a.type !== Tok.None) {
+		res.a = a.type === Tok.Number ? a.value : (a.value * 125) / 100;
+	}
+	if (b.type !== Tok.None) {
+		res.b = b.type === Tok.Number ? b.value : (b.value * 125) / 100;
+	}
+	if (alpha.type !== Tok.None) {
+		res.alpha = Math.min(
+			1,
+			Math.max(
+				0,
+				alpha.type === Tok.Number ? alpha.value : alpha.value / 100
+			)
+		);
+	}
+
+	return res;
+}
+
+const definition$f = {
+	mode: 'lab',
+
+	toMode: {
+		xyz50: convertLabToXyz50,
+		rgb: convertLabToRgb
+	},
+
+	fromMode: {
+		xyz50: convertXyz50ToLab,
+		rgb: convertRgbToLab
+	},
+
+	channels: ['l', 'a', 'b', 'alpha'],
+
+	ranges: {
+		l: [0, 100],
+		a: [-125, 125],
+		b: [-125, 125]
+	},
+
+	parse: [parseLab],
+	serialize: c =>
+		`lab(${c.l !== undefined ? c.l : 'none'} ${
+			c.a !== undefined ? c.a : 'none'
+		} ${c.b !== undefined ? c.b : 'none'}${
+			c.alpha < 1 ? ` / ${c.alpha}` : ''
+		})`,
+
+	interpolate: {
+		l: interpolatorLinear,
+		a: interpolatorLinear,
+		b: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	}
+};
+
+const definition$e = {
+	...definition$f,
+	mode: 'lab65',
+
+	parse: ['--lab-d65'],
+	serialize: '--lab-d65',
+
+	toMode: {
+		xyz65: convertLab65ToXyz65,
+		rgb: convertLab65ToRgb
+	},
+
+	fromMode: {
+		xyz65: convertXyz65ToLab65,
+		rgb: convertRgbToLab65
+	},
+
+	ranges: {
+		l: [0, 100],
+		a: [-125, 125],
+		b: [-125, 125]
+	}
+};
+
+function parseLch(color, parsed) {
+	if (!parsed || parsed[0] !== 'lch') {
+		return undefined;
+	}
+	const res = { mode: 'lch' };
+	const [, l, c, h, alpha] = parsed;
+	if (l.type !== Tok.None) {
+		if (l.type === Tok.Hue) {
+			return undefined;
+		}
+		res.l = Math.min(Math.max(0, l.value), 100);
+	}
+	if (c.type !== Tok.None) {
+		res.c = Math.max(
+			0,
+			c.type === Tok.Number ? c.value : (c.value * 150) / 100
+		);
+	}
+	if (h.type !== Tok.None) {
+		if (h.type === Tok.Percentage) {
+			return undefined;
+		}
+		res.h = h.value;
+	}
+	if (alpha.type !== Tok.None) {
+		res.alpha = Math.min(
+			1,
+			Math.max(
+				0,
+				alpha.type === Tok.Number ? alpha.value : alpha.value / 100
+			)
+		);
+	}
+
+	return res;
+}
+
+const definition$d = {
+	mode: 'lch',
+
+	toMode: {
+		lab: convertLchToLab,
+		rgb: c => convertLabToRgb(convertLchToLab(c))
+	},
+
+	fromMode: {
+		rgb: c => convertLabToLch(convertRgbToLab(c)),
+		lab: convertLabToLch
+	},
+
+	channels: ['l', 'c', 'h', 'alpha'],
+
+	ranges: {
+		l: [0, 100],
+		c: [0, 150],
+		h: [0, 360]
+	},
+
+	parse: [parseLch],
+	serialize: c =>
+		`lch(${c.l !== undefined ? c.l : 'none'} ${
+			c.c !== undefined ? c.c : 'none'
+		} ${c.h !== undefined ? c.h : 'none'}${
+			c.alpha < 1 ? ` / ${c.alpha}` : ''
+		})`,
+
+	interpolate: {
+		h: { use: interpolatorLinear, fixup: fixupHueShorter },
+		c: interpolatorLinear,
+		l: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	},
+
+	difference: {
+		h: differenceHueChroma
+	},
+
+	average: {
+		h: averageAngle
+	}
+};
+
+const definition$c = {
+	...definition$d,
+	mode: 'lch65',
+
+	parse: ['--lch-d65'],
+	serialize: '--lch-d65',
+
+	toMode: {
+		lab65: c => convertLchToLab(c, 'lab65'),
+		rgb: c => convertLab65ToRgb(convertLchToLab(c, 'lab65'))
+	},
+
+	fromMode: {
+		rgb: c => convertLabToLch(convertRgbToLab65(c), 'lch65'),
+		lab65: c => convertLabToLch(c, 'lch65')
+	},
+
+	ranges: {
+		l: [0, 100],
+		c: [0, 150],
+		h: [0, 360]
+	}
+};
+
+const convertLuvToLchuv = ({ l, u, v, alpha }) => {
+	if (u === undefined) u = 0;
+	if (v === undefined) v = 0;
+	let c = Math.sqrt(u * u + v * v);
+	let res = {
+		mode: 'lchuv',
+		l: l,
+		c: c
+	};
+	if (c) {
+		res.h = normalizeHue((Math.atan2(v, u) * 180) / Math.PI);
+	}
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+const convertLchuvToLuv = ({ l, c, h, alpha }) => {
+	if (h === undefined) h = 0;
+	let res = {
+		mode: 'luv',
+		l: l,
+		u: c ? c * Math.cos((h / 180) * Math.PI) : 0,
+		v: c ? c * Math.sin((h / 180) * Math.PI) : 0
+	};
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+const u_fn$1 = (x, y, z) => (4 * x) / (x + 15 * y + 3 * z);
+const v_fn$1 = (x, y, z) => (9 * y) / (x + 15 * y + 3 * z);
+
+const un$1 = u_fn$1(D50.X, D50.Y, D50.Z);
+const vn$1 = v_fn$1(D50.X, D50.Y, D50.Z);
+
+const l_fn = value => (value <= e ? k$2 * value : 116 * Math.cbrt(value) - 16);
+
+const convertXyz50ToLuv = ({ x, y, z, alpha }) => {
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let l = l_fn(y / D50.Y);
+	let u = u_fn$1(x, y, z);
+	let v = v_fn$1(x, y, z);
+
+	// guard against NaNs produced by `xyz(0 0 0)` black
+	if (!isFinite(u) || !isFinite(v)) {
+		l = u = v = 0;
+	} else {
+		u = 13 * l * (u - un$1);
+		v = 13 * l * (v - vn$1);
+	}
+
+	let res = {
+		mode: 'luv',
+		l,
+		u,
+		v
+	};
+
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+const u_fn = (x, y, z) => (4 * x) / (x + 15 * y + 3 * z);
+const v_fn = (x, y, z) => (9 * y) / (x + 15 * y + 3 * z);
+
+const un = u_fn(D50.X, D50.Y, D50.Z);
+const vn = v_fn(D50.X, D50.Y, D50.Z);
+
+const convertLuvToXyz50 = ({ l, u, v, alpha }) => {
+	if (l === undefined) l = 0;
+	if (l === 0) {
+		return { mode: 'xyz50', x: 0, y: 0, z: 0 };
+	}
+
+	if (u === undefined) u = 0;
+	if (v === undefined) v = 0;
+
+	let up = u / (13 * l) + un;
+	let vp = v / (13 * l) + vn;
+	let y = D50.Y * (l <= 8 ? l / k$2 : Math.pow((l + 16) / 116, 3));
+	let x = (y * (9 * up)) / (4 * vp);
+	let z = (y * (12 - 3 * up - 20 * vp)) / (4 * vp);
+
+	let res = { mode: 'xyz50', x, y, z };
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+/*
+	CIELChuv color space
+	--------------------
+
+	Reference: 
+
+		https://en.wikipedia.org/wiki/CIELUV
+ */
+
+
+const convertRgbToLchuv = rgb =>
+	convertLuvToLchuv(convertXyz50ToLuv(convertRgbToXyz50(rgb)));
+const convertLchuvToRgb = lchuv =>
+	convertXyz50ToRgb(convertLuvToXyz50(convertLchuvToLuv(lchuv)));
+
+const definition$b = {
+	mode: 'lchuv',
+
+	toMode: {
+		luv: convertLchuvToLuv,
+		rgb: convertLchuvToRgb
+	},
+
+	fromMode: {
+		rgb: convertRgbToLchuv,
+		luv: convertLuvToLchuv
+	},
+
+	channels: ['l', 'c', 'h', 'alpha'],
+
+	parse: ['--lchuv'],
+	serialize: '--lchuv',
+
+	ranges: {
+		l: [0, 100],
+		c: [0, 176.956],
+		h: [0, 360]
+	},
+
+	interpolate: {
+		h: { use: interpolatorLinear, fixup: fixupHueShorter },
+		c: interpolatorLinear,
+		l: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	},
+
+	difference: {
+		h: differenceHueChroma
+	},
+
+	average: {
+		h: averageAngle
+	}
+};
+
+const definition$a = {
+	...definition$r,
+	mode: 'lrgb',
+
+	toMode: {
+		rgb: convertLrgbToRgb
+	},
+
+	fromMode: {
+		rgb: convertRgbToLrgb
+	},
+
+	parse: ['srgb-linear'],
+	serialize: 'srgb-linear'
+};
+
+/*
+	CIELUV color space
+	------------------
+
+	Reference: 
+
+		https://en.wikipedia.org/wiki/CIELUV
+ */
+
+
+const definition$9 = {
+	mode: 'luv',
+
+	toMode: {
+		xyz50: convertLuvToXyz50,
+		rgb: luv => convertXyz50ToRgb(convertLuvToXyz50(luv))
+	},
+
+	fromMode: {
+		xyz50: convertXyz50ToLuv,
+		rgb: rgb => convertXyz50ToLuv(convertRgbToXyz50(rgb))
+	},
+
+	channels: ['l', 'u', 'v', 'alpha'],
+
+	parse: ['--luv'],
+	serialize: '--luv',
+
+	ranges: {
+		l: [0, 100],
+		u: [-84.936, 175.042],
+		v: [-125.882, 87.243]
+	},
+
+	interpolate: {
+		l: interpolatorLinear,
+		u: interpolatorLinear,
+		v: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	}
+};
+
+const convertLrgbToOklab = ({ r, g, b, alpha }) => {
+	if (r === undefined) r = 0;
+	if (g === undefined) g = 0;
+	if (b === undefined) b = 0;
+
+	let L = Math.cbrt(
+		0.412221469470763 * r + 0.5363325372617348 * g + 0.0514459932675022 * b
+	);
+	let M = Math.cbrt(
+		0.2119034958178252 * r + 0.6806995506452344 * g + 0.1073969535369406 * b
+	);
+	let S = Math.cbrt(
+		0.0883024591900564 * r + 0.2817188391361215 * g + 0.6299787016738222 * b
+	);
+
+	let res = {
+		mode: 'oklab',
+		l:
+			0.210454268309314 * L +
+			0.7936177747023054 * M -
+			0.0040720430116193 * S,
+		a:
+			1.9779985324311684 * L -
+			2.4285922420485799 * M +
+			0.450593709617411 * S,
+		b:
+			0.0259040424655478 * L +
+			0.7827717124575296 * M -
+			0.8086757549230774 * S
+	};
+
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+const convertRgbToOklab = rgb => {
+	let res = convertLrgbToOklab(convertRgbToLrgb(rgb));
+	if (rgb.r === rgb.b && rgb.b === rgb.g) {
+		res.a = res.b = 0;
+	}
+	return res;
+};
+
+const convertOklabToLrgb = ({ l, a, b, alpha }) => {
+	if (l === undefined) l = 0;
+	if (a === undefined) a = 0;
+	if (b === undefined) b = 0;
+
+	let L = Math.pow(l + 0.3963377773761749 * a + 0.2158037573099136 * b, 3);
+	let M = Math.pow(l - 0.1055613458156586 * a - 0.0638541728258133 * b, 3);
+	let S = Math.pow(l - 0.0894841775298119 * a - 1.2914855480194092 * b, 3);
+
+	let res = {
+		mode: 'lrgb',
+		r:
+			4.0767416360759574 * L -
+			3.3077115392580616 * M +
+			0.2309699031821044 * S,
+		g:
+			-1.2684379732850317 * L +
+			2.6097573492876887 * M -
+			0.3413193760026573 * S,
+		b:
+			-0.0041960761386756 * L -
+			0.7034186179359362 * M +
+			1.7076146940746117 * S
+	};
+
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+
+	return res;
+};
+
+const convertOklabToRgb = c => convertLrgbToRgb(convertOklabToLrgb(c));
+
+/*
+	Adapted from code by Björn Ottosson,
+	released under the MIT license:
+
+	Copyright (c) 2021 Björn Ottosson
+
+	Permission is hereby granted, free of charge, to any person obtaining a copy of
+	this software and associated documentation files (the "Software"), to deal in
+	the Software without restriction, including without limitation the rights to
+	use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+	of the Software, and to permit persons to whom the Software is furnished to do
+	so, subject to the following conditions:
+
+	The above copyright notice and this permission notice shall be included in all
+	copies or substantial portions of the Software.
+
+	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+	SOFTWARE.
+ */
+
+
+function toe(x) {
+	const k_1 = 0.206;
+	const k_2 = 0.03;
+	const k_3 = (1 + k_1) / (1 + k_2);
+	return (
+		0.5 *
+		(k_3 * x -
+			k_1 +
+			Math.sqrt((k_3 * x - k_1) * (k_3 * x - k_1) + 4 * k_2 * k_3 * x))
+	);
+}
+
+function toe_inv(x) {
+	const k_1 = 0.206;
+	const k_2 = 0.03;
+	const k_3 = (1 + k_1) / (1 + k_2);
+	return (x * x + k_1 * x) / (k_3 * (x + k_2));
+}
+
+// Finds the maximum saturation possible for a given hue that fits in sRGB
+// Saturation here is defined as S = C/L
+// a and b must be normalized so a^2 + b^2 == 1
+function compute_max_saturation(a, b) {
+	// Max saturation will be when one of r, g or b goes below zero.
+
+	// Select different coefficients depending on which component goes below zero first
+	let k0, k1, k2, k3, k4, wl, wm, ws;
+
+	if (-1.88170328 * a - 0.80936493 * b > 1) {
+		// Red component
+		k0 = 1.19086277;
+		k1 = 1.76576728;
+		k2 = 0.59662641;
+		k3 = 0.75515197;
+		k4 = 0.56771245;
+		wl = 4.0767416621;
+		wm = -3.3077115913;
+		ws = 0.2309699292;
+	} else if (1.81444104 * a - 1.19445276 * b > 1) {
+		// Green component
+		k0 = 0.73956515;
+		k1 = -0.45954404;
+		k2 = 0.08285427;
+		k3 = 0.1254107;
+		k4 = 0.14503204;
+		wl = -1.2684380046;
+		wm = 2.6097574011;
+		ws = -0.3413193965;
+	} else {
+		// Blue component
+		k0 = 1.35733652;
+		k1 = -915799e-8;
+		k2 = -1.1513021;
+		k3 = -0.50559606;
+		k4 = 692167e-8;
+		wl = -0.0041960863;
+		wm = -0.7034186147;
+		ws = 1.707614701;
+	}
+
+	// Approximate max saturation using a polynomial:
+	let S = k0 + k1 * a + k2 * b + k3 * a * a + k4 * a * b;
+
+	// Do one step Halley's method to get closer
+	// this gives an error less than 10e6, except for some blue hues where the dS/dh is close to infinite
+	// this should be sufficient for most applications, otherwise do two/three steps
+
+	let k_l = 0.3963377774 * a + 0.2158037573 * b;
+	let k_m = -0.1055613458 * a - 0.0638541728 * b;
+	let k_s = -0.0894841775 * a - 1.291485548 * b;
+
+	{
+		let l_ = 1 + S * k_l;
+		let m_ = 1 + S * k_m;
+		let s_ = 1 + S * k_s;
+
+		let l = l_ * l_ * l_;
+		let m = m_ * m_ * m_;
+		let s = s_ * s_ * s_;
+
+		let l_dS = 3 * k_l * l_ * l_;
+		let m_dS = 3 * k_m * m_ * m_;
+		let s_dS = 3 * k_s * s_ * s_;
+
+		let l_dS2 = 6 * k_l * k_l * l_;
+		let m_dS2 = 6 * k_m * k_m * m_;
+		let s_dS2 = 6 * k_s * k_s * s_;
+
+		let f = wl * l + wm * m + ws * s;
+		let f1 = wl * l_dS + wm * m_dS + ws * s_dS;
+		let f2 = wl * l_dS2 + wm * m_dS2 + ws * s_dS2;
+
+		S = S - (f * f1) / (f1 * f1 - 0.5 * f * f2);
+	}
+
+	return S;
+}
+
+function find_cusp(a, b) {
+	// First, find the maximum saturation (saturation S = C/L)
+	let S_cusp = compute_max_saturation(a, b);
+
+	// Convert to linear sRGB to find the first point where at least one of r,g or b >= 1:
+	let rgb = convertOklabToLrgb({ l: 1, a: S_cusp * a, b: S_cusp * b });
+	let L_cusp = Math.cbrt(1 / Math.max(rgb.r, rgb.g, rgb.b));
+	let C_cusp = L_cusp * S_cusp;
+
+	return [L_cusp, C_cusp];
+}
+
+// Finds intersection of the line defined by
+// L = L0 * (1 - t) + t * L1;
+// C = t * C1;
+// a and b must be normalized so a^2 + b^2 == 1
+function find_gamut_intersection(a, b, L1, C1, L0, cusp = null) {
+	if (!cusp) {
+		// Find the cusp of the gamut triangle
+		cusp = find_cusp(a, b);
+	}
+
+	// Find the intersection for upper and lower half seprately
+	let t;
+	if ((L1 - L0) * cusp[1] - (cusp[0] - L0) * C1 <= 0) {
+		// Lower half
+
+		t = (cusp[1] * L0) / (C1 * cusp[0] + cusp[1] * (L0 - L1));
+	} else {
+		// Upper half
+
+		// First intersect with triangle
+		t = (cusp[1] * (L0 - 1)) / (C1 * (cusp[0] - 1) + cusp[1] * (L0 - L1));
+
+		// Then one step Halley's method
+		{
+			let dL = L1 - L0;
+			let dC = C1;
+
+			let k_l = 0.3963377774 * a + 0.2158037573 * b;
+			let k_m = -0.1055613458 * a - 0.0638541728 * b;
+			let k_s = -0.0894841775 * a - 1.291485548 * b;
+
+			let l_dt = dL + dC * k_l;
+			let m_dt = dL + dC * k_m;
+			let s_dt = dL + dC * k_s;
+
+			// If higher accuracy is required, 2 or 3 iterations of the following block can be used:
+			{
+				let L = L0 * (1 - t) + t * L1;
+				let C = t * C1;
+
+				let l_ = L + C * k_l;
+				let m_ = L + C * k_m;
+				let s_ = L + C * k_s;
+
+				let l = l_ * l_ * l_;
+				let m = m_ * m_ * m_;
+				let s = s_ * s_ * s_;
+
+				let ldt = 3 * l_dt * l_ * l_;
+				let mdt = 3 * m_dt * m_ * m_;
+				let sdt = 3 * s_dt * s_ * s_;
+
+				let ldt2 = 6 * l_dt * l_dt * l_;
+				let mdt2 = 6 * m_dt * m_dt * m_;
+				let sdt2 = 6 * s_dt * s_dt * s_;
+
+				let r =
+					4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s - 1;
+				let r1 =
+					4.0767416621 * ldt -
+					3.3077115913 * mdt +
+					0.2309699292 * sdt;
+				let r2 =
+					4.0767416621 * ldt2 -
+					3.3077115913 * mdt2 +
+					0.2309699292 * sdt2;
+
+				let u_r = r1 / (r1 * r1 - 0.5 * r * r2);
+				let t_r = -r * u_r;
+
+				let g =
+					-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s - 1;
+				let g1 =
+					-1.2684380046 * ldt +
+					2.6097574011 * mdt -
+					0.3413193965 * sdt;
+				let g2 =
+					-1.2684380046 * ldt2 +
+					2.6097574011 * mdt2 -
+					0.3413193965 * sdt2;
+
+				let u_g = g1 / (g1 * g1 - 0.5 * g * g2);
+				let t_g = -g * u_g;
+
+				let b =
+					-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s - 1;
+				let b1 =
+					-0.0041960863 * ldt -
+					0.7034186147 * mdt +
+					1.707614701 * sdt;
+				let b2 =
+					-0.0041960863 * ldt2 -
+					0.7034186147 * mdt2 +
+					1.707614701 * sdt2;
+
+				let u_b = b1 / (b1 * b1 - 0.5 * b * b2);
+				let t_b = -b * u_b;
+
+				t_r = u_r >= 0 ? t_r : 10e5;
+				t_g = u_g >= 0 ? t_g : 10e5;
+				t_b = u_b >= 0 ? t_b : 10e5;
+
+				t += Math.min(t_r, Math.min(t_g, t_b));
+			}
+		}
+	}
+
+	return t;
+}
+
+function get_ST_max(a_, b_, cusp = null) {
+	if (!cusp) {
+		cusp = find_cusp(a_, b_);
+	}
+	let L = cusp[0];
+	let C = cusp[1];
+	return [C / L, C / (1 - L)];
+}
+
+function get_Cs(L, a_, b_) {
+	let cusp = find_cusp(a_, b_);
+
+	let C_max = find_gamut_intersection(a_, b_, L, 1, L, cusp);
+	let ST_max = get_ST_max(a_, b_, cusp);
+
+	let S_mid =
+		0.11516993 +
+		1 /
+			(7.4477897 +
+				4.1590124 * b_ +
+				a_ *
+					(-2.19557347 +
+						1.75198401 * b_ +
+						a_ *
+							(-2.13704948 -
+								10.02301043 * b_ +
+								a_ *
+									(-4.24894561 +
+										5.38770819 * b_ +
+										4.69891013 * a_))));
+
+	let T_mid =
+		0.11239642 +
+		1 /
+			(1.6132032 -
+				0.68124379 * b_ +
+				a_ *
+					(0.40370612 +
+						0.90148123 * b_ +
+						a_ *
+							(-0.27087943 +
+								0.6122399 * b_ +
+								a_ *
+									(299215e-8 -
+										0.45399568 * b_ -
+										0.14661872 * a_))));
+
+	let k = C_max / Math.min(L * ST_max[0], (1 - L) * ST_max[1]);
+
+	let C_a = L * S_mid;
+	let C_b = (1 - L) * T_mid;
+	let C_mid =
+		0.9 *
+		k *
+		Math.sqrt(
+			Math.sqrt(
+				1 / (1 / (C_a * C_a * C_a * C_a) + 1 / (C_b * C_b * C_b * C_b))
+			)
+		);
+
+	C_a = L * 0.4;
+	C_b = (1 - L) * 0.8;
+	let C_0 = Math.sqrt(1 / (1 / (C_a * C_a) + 1 / (C_b * C_b)));
+	return [C_0, C_mid, C_max];
+}
+
+/*
+	Adapted from code by Björn Ottosson,
+	released under the MIT license:
+
+	Copyright (c) 2021 Björn Ottosson
+
+	Permission is hereby granted, free of charge, to any person obtaining a copy of
+	this software and associated documentation files (the "Software"), to deal in
+	the Software without restriction, including without limitation the rights to
+	use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+	of the Software, and to permit persons to whom the Software is furnished to do
+	so, subject to the following conditions:
+
+	The above copyright notice and this permission notice shall be included in all
+	copies or substantial portions of the Software.
+
+	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+	SOFTWARE.
+ */
+
+
+function convertOklabToOkhsl(lab) {
+	const l = lab.l !== undefined ? lab.l : 0;
+	const a = lab.a !== undefined ? lab.a : 0;
+	const b = lab.b !== undefined ? lab.b : 0;
+
+	const ret = { mode: 'okhsl', l: toe(l) };
+
+	if (lab.alpha !== undefined) {
+		ret.alpha = lab.alpha;
+	}
+	let c = Math.sqrt(a * a + b * b);
+	if (!c) {
+		ret.s = 0;
+		return ret;
+	}
+	let [C_0, C_mid, C_max] = get_Cs(l, a / c, b / c);
+	let s;
+	if (c < C_mid) {
+		let k_0 = 0;
+		let k_1 = 0.8 * C_0;
+		let k_2 = 1 - k_1 / C_mid;
+		let t = (c - k_0) / (k_1 + k_2 * (c - k_0));
+		s = t * 0.8;
+	} else {
+		let k_0 = C_mid;
+		let k_1 = (0.2 * C_mid * C_mid * 1.25 * 1.25) / C_0;
+		let k_2 = 1 - k_1 / (C_max - C_mid);
+		let t = (c - k_0) / (k_1 + k_2 * (c - k_0));
+		s = 0.8 + 0.2 * t;
+	}
+	if (s) {
+		ret.s = s;
+		ret.h = normalizeHue((Math.atan2(b, a) * 180) / Math.PI);
+	}
+	return ret;
+}
+
+/*
+	Adapted from code by Björn Ottosson,
+	released under the MIT license:
+
+	Copyright (c) 2021 Björn Ottosson
+
+	Permission is hereby granted, free of charge, to any person obtaining a copy of
+	this software and associated documentation files (the "Software"), to deal in
+	the Software without restriction, including without limitation the rights to
+	use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+	of the Software, and to permit persons to whom the Software is furnished to do
+	so, subject to the following conditions:
+
+	The above copyright notice and this permission notice shall be included in all
+	copies or substantial portions of the Software.
+
+	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+	SOFTWARE.
+ */
+
+
+function convertOkhslToOklab(hsl) {
+	let h = hsl.h !== undefined ? hsl.h : 0;
+	let s = hsl.s !== undefined ? hsl.s : 0;
+	let l = hsl.l !== undefined ? hsl.l : 0;
+
+	const ret = { mode: 'oklab', l: toe_inv(l) };
+
+	if (hsl.alpha !== undefined) {
+		ret.alpha = hsl.alpha;
+	}
+
+	if (!s || l === 1) {
+		ret.a = ret.b = 0;
+		return ret;
+	}
+
+	let a_ = Math.cos((h / 180) * Math.PI);
+	let b_ = Math.sin((h / 180) * Math.PI);
+	let [C_0, C_mid, C_max] = get_Cs(ret.l, a_, b_);
+	let t, k_0, k_1, k_2;
+	if (s < 0.8) {
+		t = 1.25 * s;
+		k_0 = 0;
+		k_1 = 0.8 * C_0;
+		k_2 = 1 - k_1 / C_mid;
+	} else {
+		t = 5 * (s - 0.8);
+		k_0 = C_mid;
+		k_1 = (0.2 * C_mid * C_mid * 1.25 * 1.25) / C_0;
+		k_2 = 1 - k_1 / (C_max - C_mid);
+	}
+	let C = k_0 + (t * k_1) / (1 - k_2 * t);
+	ret.a = C * a_;
+	ret.b = C * b_;
+
+	return ret;
+}
+
+const modeOkhsl = {
+	...definition$l,
+	mode: 'okhsl',
+	channels: ['h', 's', 'l', 'alpha'],
+	parse: ['--okhsl'],
+	serialize: '--okhsl',
+	fromMode: {
+		oklab: convertOklabToOkhsl,
+		rgb: c => convertOklabToOkhsl(convertRgbToOklab(c))
+	},
+	toMode: {
+		oklab: convertOkhslToOklab,
+		rgb: c => convertOklabToRgb(convertOkhslToOklab(c))
+	}
+};
+
+/*
+	Adapted from code by Björn Ottosson,
+	released under the MIT license:
+
+	Copyright (c) 2021 Björn Ottosson
+
+	Permission is hereby granted, free of charge, to any person obtaining a copy of
+	this software and associated documentation files (the "Software"), to deal in
+	the Software without restriction, including without limitation the rights to
+	use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+	of the Software, and to permit persons to whom the Software is furnished to do
+	so, subject to the following conditions:
+
+	The above copyright notice and this permission notice shall be included in all
+	copies or substantial portions of the Software.
+
+	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+	SOFTWARE.
+ */
+
+
+function convertOklabToOkhsv(lab) {
+	let l = lab.l !== undefined ? lab.l : 0;
+	let a = lab.a !== undefined ? lab.a : 0;
+	let b = lab.b !== undefined ? lab.b : 0;
+
+	let c = Math.sqrt(a * a + b * b);
+
+	// TODO: c = 0
+	let a_ = c ? a / c : 1;
+	let b_ = c ? b / c : 1;
+
+	let [S_max, T] = get_ST_max(a_, b_);
+	let S_0 = 0.5;
+	let k = 1 - S_0 / S_max;
+
+	let t = T / (c + l * T);
+	let L_v = t * l;
+	let C_v = t * c;
+
+	let L_vt = toe_inv(L_v);
+	let C_vt = (C_v * L_vt) / L_v;
+
+	let rgb_scale = convertOklabToLrgb({ l: L_vt, a: a_ * C_vt, b: b_ * C_vt });
+	let scale_L = Math.cbrt(
+		1 / Math.max(rgb_scale.r, rgb_scale.g, rgb_scale.b, 0)
+	);
+
+	l = l / scale_L;
+	c = ((c / scale_L) * toe(l)) / l;
+	l = toe(l);
+
+	const ret = {
+		mode: 'okhsv',
+		s: c ? ((S_0 + T) * C_v) / (T * S_0 + T * k * C_v) : 0,
+		v: l ? l / L_v : 0
+	};
+	if (ret.s) {
+		ret.h = normalizeHue((Math.atan2(b, a) * 180) / Math.PI);
+	}
+	if (lab.alpha !== undefined) {
+		ret.alpha = lab.alpha;
+	}
+	return ret;
+}
+
+/*
+	Copyright (c) 2021 Björn Ottosson
+
+	Permission is hereby granted, free of charge, to any person obtaining a copy of
+	this software and associated documentation files (the "Software"), to deal in
+	the Software without restriction, including without limitation the rights to
+	use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+	of the Software, and to permit persons to whom the Software is furnished to do
+	so, subject to the following conditions:
+
+	The above copyright notice and this permission notice shall be included in all
+	copies or substantial portions of the Software.
+
+	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+	SOFTWARE.
+ */
+
+
+function convertOkhsvToOklab(hsv) {
+	const ret = { mode: 'oklab' };
+	if (hsv.alpha !== undefined) {
+		ret.alpha = hsv.alpha;
+	}
+
+	const h = hsv.h !== undefined ? hsv.h : 0;
+	const s = hsv.s !== undefined ? hsv.s : 0;
+	const v = hsv.v !== undefined ? hsv.v : 0;
+
+	const a_ = Math.cos((h / 180) * Math.PI);
+	const b_ = Math.sin((h / 180) * Math.PI);
+
+	const [S_max, T] = get_ST_max(a_, b_);
+	const S_0 = 0.5;
+	const k = 1 - S_0 / S_max;
+	const L_v = 1 - (s * S_0) / (S_0 + T - T * k * s);
+	const C_v = (s * T * S_0) / (S_0 + T - T * k * s);
+
+	const L_vt = toe_inv(L_v);
+	const C_vt = (C_v * L_vt) / L_v;
+	const rgb_scale = convertOklabToLrgb({
+		l: L_vt,
+		a: a_ * C_vt,
+		b: b_ * C_vt
+	});
+	const scale_L = Math.cbrt(
+		1 / Math.max(rgb_scale.r, rgb_scale.g, rgb_scale.b, 0)
+	);
+
+	const L_new = toe_inv(v * L_v);
+	const C = (C_v * L_new) / L_v;
+
+	ret.l = L_new * scale_L;
+	ret.a = C * a_ * scale_L;
+	ret.b = C * b_ * scale_L;
+
+	return ret;
+}
+
+const modeOkhsv = {
+	...definition$k,
+	mode: 'okhsv',
+	channels: ['h', 's', 'v', 'alpha'],
+	parse: ['--okhsv'],
+	serialize: '--okhsv',
+	fromMode: {
+		oklab: convertOklabToOkhsv,
+		rgb: c => convertOklabToOkhsv(convertRgbToOklab(c))
+	},
+	toMode: {
+		oklab: convertOkhsvToOklab,
+		rgb: c => convertOklabToRgb(convertOkhsvToOklab(c))
+	}
+};
+
+function parseOklab(color, parsed) {
+	if (!parsed || parsed[0] !== 'oklab') {
+		return undefined;
+	}
+	const res = { mode: 'oklab' };
+	const [, l, a, b, alpha] = parsed;
+	if (l.type === Tok.Hue || a.type === Tok.Hue || b.type === Tok.Hue) {
+		return undefined;
+	}
+	if (l.type !== Tok.None) {
+		res.l = Math.min(
+			Math.max(0, l.type === Tok.Number ? l.value : l.value / 100),
+			1
+		);
+	}
+	if (a.type !== Tok.None) {
+		res.a = a.type === Tok.Number ? a.value : (a.value * 0.4) / 100;
+	}
+	if (b.type !== Tok.None) {
+		res.b = b.type === Tok.Number ? b.value : (b.value * 0.4) / 100;
+	}
+	if (alpha.type !== Tok.None) {
+		res.alpha = Math.min(
+			1,
+			Math.max(
+				0,
+				alpha.type === Tok.Number ? alpha.value : alpha.value / 100
+			)
+		);
+	}
+
+	return res;
+}
+
+/*
+	Oklab, a perceptual color space for image processing by Björn Ottosson
+	Reference: https://bottosson.github.io/posts/oklab/
+ */
+
+const definition$8 = {
+	...definition$f,
+	mode: 'oklab',
+
+	toMode: {
+		lrgb: convertOklabToLrgb,
+		rgb: convertOklabToRgb
+	},
+
+	fromMode: {
+		lrgb: convertLrgbToOklab,
+		rgb: convertRgbToOklab
+	},
+
+	ranges: {
+		l: [0, 1],
+		a: [-0.4, 0.4],
+		b: [-0.4, 0.4]
+	},
+
+	parse: [parseOklab],
+	serialize: c =>
+		`oklab(${c.l !== undefined ? c.l : 'none'} ${
+			c.a !== undefined ? c.a : 'none'
+		} ${c.b !== undefined ? c.b : 'none'}${
+			c.alpha < 1 ? ` / ${c.alpha}` : ''
+		})`
+};
+
+function parseOklch(color, parsed) {
+	if (!parsed || parsed[0] !== 'oklch') {
+		return undefined;
+	}
+	const res = { mode: 'oklch' };
+	const [, l, c, h, alpha] = parsed;
+	if (l.type !== Tok.None) {
+		if (l.type === Tok.Hue) {
+			return undefined;
+		}
+		res.l = Math.min(
+			Math.max(0, l.type === Tok.Number ? l.value : l.value / 100),
+			1
+		);
+	}
+	if (c.type !== Tok.None) {
+		res.c = Math.max(
+			0,
+			c.type === Tok.Number ? c.value : (c.value * 0.4) / 100
+		);
+	}
+	if (h.type !== Tok.None) {
+		if (h.type === Tok.Percentage) {
+			return undefined;
+		}
+		res.h = h.value;
+	}
+	if (alpha.type !== Tok.None) {
+		res.alpha = Math.min(
+			1,
+			Math.max(
+				0,
+				alpha.type === Tok.Number ? alpha.value : alpha.value / 100
+			)
+		);
+	}
+
+	return res;
+}
+
+const definition$7 = {
+	...definition$d,
+	mode: 'oklch',
+
+	toMode: {
+		oklab: c => convertLchToLab(c, 'oklab'),
+		rgb: c => convertOklabToRgb(convertLchToLab(c, 'oklab'))
+	},
+
+	fromMode: {
+		rgb: c => convertLabToLch(convertRgbToOklab(c), 'oklch'),
+		oklab: c => convertLabToLch(c, 'oklch')
+	},
+
+	parse: [parseOklch],
+	serialize: c =>
+		`oklch(${c.l !== undefined ? c.l : 'none'} ${
+			c.c !== undefined ? c.c : 'none'
+		} ${c.h !== undefined ? c.h : 'none'}${
+			c.alpha < 1 ? ` / ${c.alpha}` : ''
+		})`,
+
+	ranges: {
+		l: [0, 1],
+		c: [0, 0.4],
+		h: [0, 360]
+	}
+};
+
+/*
+	Convert Display P3 values to CIE XYZ D65
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+*/
+
+
+const convertP3ToXyz65 = rgb => {
+	let { r, g, b, alpha } = convertRgbToLrgb(rgb);
+	let res = {
+		mode: 'xyz65',
+		x:
+			0.486570948648216 * r +
+			0.265667693169093 * g +
+			0.1982172852343625 * b,
+		y:
+			0.2289745640697487 * r +
+			0.6917385218365062 * g +
+			0.079286914093745 * b,
+		z: 0.0 * r + 0.0451133818589026 * g + 1.043944368900976 * b
+	};
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+/*
+	CIE XYZ D65 values to Display P3.
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+*/
+
+
+const convertXyz65ToP3 = ({ x, y, z, alpha }) => {
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let res = convertLrgbToRgb(
+		{
+			r:
+				x * 2.4934969119414263 -
+				y * 0.9313836179191242 -
+				0.402710784450717 * z,
+			g:
+				x * -0.8294889695615749 +
+				y * 1.7626640603183465 +
+				0.0236246858419436 * z,
+			b:
+				x * 0.0358458302437845 -
+				y * 0.0761723892680418 +
+				0.9568845240076871 * z
+		},
+		'p3'
+	);
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+const definition$6 = {
+	...definition$r,
+	mode: 'p3',
+	parse: ['display-p3'],
+	serialize: 'display-p3',
+
+	fromMode: {
+		rgb: color => convertXyz65ToP3(convertRgbToXyz65(color)),
+		xyz65: convertXyz65ToP3
+	},
+
+	toMode: {
+		rgb: color => convertXyz65ToRgb(convertP3ToXyz65(color)),
+		xyz65: convertP3ToXyz65
+	}
+};
+
+/*
+	Convert CIE XYZ D50 values to ProPhoto RGB
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+*/
+
+const gamma$1 = v => {
+	let abs = Math.abs(v);
+	if (abs >= 1 / 512) {
+		return Math.sign(v) * Math.pow(abs, 1 / 1.8);
+	}
+	return 16 * v;
+};
+
+const convertXyz50ToProphoto = ({ x, y, z, alpha }) => {
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let res = {
+		mode: 'prophoto',
+		r: gamma$1(
+			x * 1.3457868816471585 -
+				y * 0.2555720873797946 -
+				0.0511018649755453 * z
+		),
+		g: gamma$1(
+			x * -0.5446307051249019 +
+				y * 1.5082477428451466 +
+				0.0205274474364214 * z
+		),
+		b: gamma$1(x * 0.0 + y * 0.0 + 1.2119675456389452 * z)
+	};
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+/*
+	Convert ProPhoto RGB values to CIE XYZ D50
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+*/
+
+const linearize$1 = (v = 0) => {
+	let abs = Math.abs(v);
+	if (abs >= 16 / 512) {
+		return Math.sign(v) * Math.pow(abs, 1.8);
+	}
+	return v / 16;
+};
+
+const convertProphotoToXyz50 = prophoto => {
+	let r = linearize$1(prophoto.r);
+	let g = linearize$1(prophoto.g);
+	let b = linearize$1(prophoto.b);
+	let res = {
+		mode: 'xyz50',
+		x:
+			0.7977666449006423 * r +
+			0.1351812974005331 * g +
+			0.0313477341283922 * b,
+		y:
+			0.2880748288194013 * r +
+			0.7118352342418731 * g +
+			0.0000899369387256 * b,
+		z: 0 * r + 0 * g + 0.8251046025104602 * b
+	};
+	if (prophoto.alpha !== undefined) {
+		res.alpha = prophoto.alpha;
+	}
+	return res;
+};
+
+/*
+	ProPhoto RGB Color space
+
+	References:
+		* https://en.wikipedia.org/wiki/ProPhoto_RGB_color_space
+ */
+
+const definition$5 = {
+	...definition$r,
+	mode: 'prophoto',
+	parse: ['prophoto-rgb'],
+	serialize: 'prophoto-rgb',
+
+	fromMode: {
+		xyz50: convertXyz50ToProphoto,
+		rgb: color => convertXyz50ToProphoto(convertRgbToXyz50(color))
+	},
+
+	toMode: {
+		xyz50: convertProphotoToXyz50,
+		rgb: color => convertXyz50ToRgb(convertProphotoToXyz50(color))
+	}
+};
+
+/*
+	Convert CIE XYZ D65 values to Rec. 2020
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+		* https://www.itu.int/rec/R-REC-BT.2020/en
+*/
+
+const α$1 = 1.09929682680944;
+const β$1 = 0.018053968510807;
+const gamma = v => {
+	const abs = Math.abs(v);
+	if (abs > β$1) {
+		return (Math.sign(v) || 1) * (α$1 * Math.pow(abs, 0.45) - (α$1 - 1));
+	}
+	return 4.5 * v;
+};
+
+const convertXyz65ToRec2020 = ({ x, y, z, alpha }) => {
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let res = {
+		mode: 'rec2020',
+		r: gamma(
+			x * 1.7166511879712683 -
+				y * 0.3556707837763925 -
+				0.2533662813736599 * z
+		),
+		g: gamma(
+			x * -0.6666843518324893 +
+				y * 1.6164812366349395 +
+				0.0157685458139111 * z
+		),
+		b: gamma(
+			x * 0.0176398574453108 -
+				y * 0.0427706132578085 +
+				0.9421031212354739 * z
+		)
+	};
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+/*
+	Convert Rec. 2020 values to CIE XYZ D65
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+		* https://www.itu.int/rec/R-REC-BT.2020/en
+*/
+
+const α = 1.09929682680944;
+const β = 0.018053968510807;
+
+const linearize = (v = 0) => {
+	let abs = Math.abs(v);
+	if (abs < β * 4.5) {
+		return v / 4.5;
+	}
+	return (Math.sign(v) || 1) * Math.pow((abs + α - 1) / α, 1 / 0.45);
+};
+
+const convertRec2020ToXyz65 = rec2020 => {
+	let r = linearize(rec2020.r);
+	let g = linearize(rec2020.g);
+	let b = linearize(rec2020.b);
+	let res = {
+		mode: 'xyz65',
+		x:
+			0.6369580483012911 * r +
+			0.1446169035862083 * g +
+			0.1688809751641721 * b,
+		y:
+			0.262700212011267 * r +
+			0.6779980715188708 * g +
+			0.059301716469862 * b,
+		z: 0 * r + 0.0280726930490874 * g + 1.0609850577107909 * b
+	};
+	if (rec2020.alpha !== undefined) {
+		res.alpha = rec2020.alpha;
+	}
+	return res;
+};
+
+const definition$4 = {
+	...definition$r,
+	mode: 'rec2020',
+
+	fromMode: {
+		xyz65: convertXyz65ToRec2020,
+		rgb: color => convertXyz65ToRec2020(convertRgbToXyz65(color))
+	},
+
+	toMode: {
+		xyz65: convertRec2020ToXyz65,
+		rgb: color => convertXyz65ToRgb(convertRec2020ToXyz65(color))
+	},
+
+	parse: ['rec2020'],
+	serialize: 'rec2020'
+};
+
+const bias = 0.00379307325527544933;
+const bias_cbrt = Math.cbrt(bias);
+
+const transfer$1 = v => Math.cbrt(v) - bias_cbrt;
+
+const convertRgbToXyb = color => {
+	const { r, g, b, alpha } = convertRgbToLrgb(color);
+	const l = transfer$1(0.3 * r + 0.622 * g + 0.078 * b + bias);
+	const m = transfer$1(0.23 * r + 0.692 * g + 0.078 * b + bias);
+	const s = transfer$1(
+		0.24342268924547819 * r +
+			0.20476744424496821 * g +
+			0.5518098665095536 * b +
+			bias
+	);
+	const res = {
+		mode: 'xyb',
+		x: (l - m) / 2,
+		y: (l + m) / 2,
+		/* Apply default chroma from luma (subtract Y from B) */
+		b: s - (l + m) / 2
+	};
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+const transfer = v => Math.pow(v + bias_cbrt, 3);
+
+const convertXybToRgb = ({ x, y, b, alpha }) => {
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (b === undefined) b = 0;
+	const l = transfer(x + y) - bias;
+	const m = transfer(y - x) - bias;
+	/* Account for chroma from luma: add Y back to B */
+	const s = transfer(b + y) - bias;
+
+	const res = convertLrgbToRgb({
+		r:
+			11.031566904639861 * l -
+			9.866943908131562 * m -
+			0.16462299650829934 * s,
+		g:
+			-3.2541473810744237 * l +
+			4.418770377582723 * m -
+			0.16462299650829934 * s,
+		b:
+			-3.6588512867136815 * l +
+			2.7129230459360922 * m +
+			1.9459282407775895 * s
+	});
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+/*
+	The XYB color space, used in JPEG XL.
+	Reference: https://ds.jpeg.org/whitepapers/jpeg-xl-whitepaper.pdf
+*/
+
+const definition$3 = {
+	mode: 'xyb',
+	channels: ['x', 'y', 'b', 'alpha'],
+	parse: ['--xyb'],
+	serialize: '--xyb',
+
+	toMode: {
+		rgb: convertXybToRgb
+	},
+
+	fromMode: {
+		rgb: convertRgbToXyb
+	},
+
+	ranges: {
+		x: [-0.0154, 0.0281],
+		y: [0, 0.8453],
+		b: [-0.2778, 0.388]
+	},
+
+	interpolate: {
+		x: interpolatorLinear,
+		y: interpolatorLinear,
+		b: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	}
+};
+
+/*
+	The XYZ D50 color space
+	-----------------------
+ */
+
+
+const definition$2 = {
+	mode: 'xyz50',
+	parse: ['xyz-d50'],
+	serialize: 'xyz-d50',
+
+	toMode: {
+		rgb: convertXyz50ToRgb,
+		lab: convertXyz50ToLab
+	},
+
+	fromMode: {
+		rgb: convertRgbToXyz50,
+		lab: convertLabToXyz50
+	},
+
+	channels: ['x', 'y', 'z', 'alpha'],
+
+	ranges: {
+		x: [0, 0.964],
+		y: [0, 0.999],
+		z: [0, 0.825]
+	},
+
+	interpolate: {
+		x: interpolatorLinear,
+		y: interpolatorLinear,
+		z: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	}
+};
+
+/*
+	Chromatic adaptation of CIE XYZ from D65 to D50 white point
+	using the Bradford method.
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html	
+*/
+
+const convertXyz65ToXyz50 = xyz65 => {
+	let { x, y, z, alpha } = xyz65;
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let res = {
+		mode: 'xyz50',
+		x:
+			1.0479298208405488 * x +
+			0.0229467933410191 * y -
+			0.0501922295431356 * z,
+		y:
+			0.0296278156881593 * x +
+			0.990434484573249 * y -
+			0.0170738250293851 * z,
+		z:
+			-0.0092430581525912 * x +
+			0.0150551448965779 * y +
+			0.7518742899580008 * z
+	};
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+/*
+	Chromatic adaptation of CIE XYZ from D50 to D65 white point
+	using the Bradford method.
+
+	References:
+		* https://drafts.csswg.org/css-color/#color-conversion-code
+		* http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html	
+*/
+
+const convertXyz50ToXyz65 = xyz50 => {
+	let { x, y, z, alpha } = xyz50;
+	if (x === undefined) x = 0;
+	if (y === undefined) y = 0;
+	if (z === undefined) z = 0;
+	let res = {
+		mode: 'xyz65',
+		x:
+			0.9554734527042182 * x -
+			0.0230985368742614 * y +
+			0.0632593086610217 * z,
+		y:
+			-0.0283697069632081 * x +
+			1.0099954580058226 * y +
+			0.021041398966943 * z,
+		z:
+			0.0123140016883199 * x -
+			0.0205076964334779 * y +
+			1.3303659366080753 * z
+	};
+	if (alpha !== undefined) {
+		res.alpha = alpha;
+	}
+	return res;
+};
+
+/*
+	The XYZ D65 color space
+	-----------------------
+ */
+
+
+const definition$1 = {
+	mode: 'xyz65',
+
+	toMode: {
+		rgb: convertXyz65ToRgb,
+		xyz50: convertXyz65ToXyz50
+	},
+
+	fromMode: {
+		rgb: convertRgbToXyz65,
+		xyz50: convertXyz50ToXyz65
+	},
+
+	ranges: {
+		x: [0, 0.95],
+		y: [0, 1],
+		z: [0, 1.088]
+	},
+
+	channels: ['x', 'y', 'z', 'alpha'],
+
+	parse: ['xyz', 'xyz-d65'],
+	serialize: 'xyz-d65',
+
+	interpolate: {
+		x: interpolatorLinear,
+		y: interpolatorLinear,
+		z: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	}
+};
+
+const convertRgbToYiq = ({ r, g, b, alpha }) => {
+	if (r === undefined) r = 0;
+	if (g === undefined) g = 0;
+	if (b === undefined) b = 0;
+	const res = {
+		mode: 'yiq',
+		y: 0.29889531 * r + 0.58662247 * g + 0.11448223 * b,
+		i: 0.59597799 * r - 0.2741761 * g - 0.32180189 * b,
+		q: 0.21147017 * r - 0.52261711 * g + 0.31114694 * b
+	};
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+const convertYiqToRgb = ({ y, i, q, alpha }) => {
+	if (y === undefined) y = 0;
+	if (i === undefined) i = 0;
+	if (q === undefined) q = 0;
+	const res = {
+		mode: 'rgb',
+		r: y + 0.95608445 * i + 0.6208885 * q,
+		g: y - 0.27137664 * i - 0.6486059 * q,
+		b: y - 1.10561724 * i + 1.70250126 * q
+	};
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
+
+/*
+	YIQ Color Space
+
+	References
+	----------
+
+	Wikipedia:
+		https://en.wikipedia.org/wiki/YIQ
+
+	"Measuring perceived color difference using YIQ NTSC
+	transmission color space in mobile applications"
+		
+		by Yuriy Kotsarenko, Fernando Ramos in:
+		Programación Matemática y Software (2010) 
+
+	Available at:
+		
+		http://www.progmat.uaem.mx:8080/artVol2Num2/Articulo3Vol2Num2.pdf
+ */
+
+const definition = {
+	mode: 'yiq',
+
+	toMode: {
+		rgb: convertYiqToRgb
+	},
+
+	fromMode: {
+		rgb: convertRgbToYiq
+	},
+
+	channels: ['y', 'i', 'q', 'alpha'],
+
+	parse: ['--yiq'],
+	serialize: '--yiq',
+
+	ranges: {
+		i: [-0.595, 0.595],
+		q: [-0.522, 0.522]
+	},
+
+	interpolate: {
+		y: interpolatorLinear,
+		i: interpolatorLinear,
+		q: interpolatorLinear,
+		alpha: { use: interpolatorLinear, fixup: fixupAlpha }
+	}
+};
+
+// From: https://github.com/d3/d3-format/issues/32
+
+const r$2 = (value, precision) =>
+	Math.round(value * (precision = Math.pow(10, precision))) / precision;
+
+const round$1 =
+	(precision = 4) =>
+	value =>
+		typeof value === 'number' ? r$2(value, precision) : value;
+
+let twoDecimals = round$1(2);
+
+const clamp$1 = value => Math.max(0, Math.min(1, value || 0));
+const fixup = value => Math.round(clamp$1(value) * 255);
+
+const rgb = converter('rgb');
+
+const serializeRgb = color => {
+	if (color === undefined) {
+		return undefined;
+	}
+
+	let r = fixup(color.r);
+	let g = fixup(color.g);
+	let b = fixup(color.b);
+
+	if (color.alpha === undefined || color.alpha === 1) {
+		// opaque color
+		return `rgb(${r}, ${g}, ${b})`;
+	} else {
+		// transparent color
+		return `rgba(${r}, ${g}, ${b}, ${twoDecimals(clamp$1(color.alpha))})`;
+	}
+};
+const formatRgb = c => serializeRgb(rgb(c));
+
+// Color space definitions
+
+useMode(definition$q);
+useMode(definition$p);
+useMode(definition$o);
+useMode(definition$n);
+useMode(definition$m);
+useMode(definition$l);
+useMode(definition$k);
+useMode(definition$j);
+useMode(definition$i);
+useMode(definition$h);
+useMode(definition$g);
+useMode(definition$f);
+useMode(definition$e);
+useMode(definition$d);
+useMode(definition$c);
+useMode(definition$b);
+useMode(definition$a);
+useMode(definition$9);
+useMode(modeOkhsl);
+useMode(modeOkhsv);
+useMode(definition$8);
+useMode(definition$7);
+useMode(definition$6);
+useMode(definition$5);
+useMode(definition$4);
+useMode(definition$r);
+useMode(definition$3);
+useMode(definition$2);
+useMode(definition$1);
+useMode(definition);
+
 const formatColor = (color) => {
-    var _a, _b, _c;
-    // If color is undefined, return a default
-    if (!color) {
-        return "#000000";
-    }
-    // If it's already a hex, rgb, or hsl color, return as is
+    var _a;
     if (color.startsWith("#") ||
         color.startsWith("rgb") ||
         color.startsWith("hsl")) {
         return color;
     }
-    // If it's an oklch color, convert it
-    if (color.startsWith("oklch")) {
-        try {
-            // Create a temporary element to use CSS color conversion
-            const tempElement = document.createElement("div");
-            tempElement.style.color = color;
-            document.body.appendChild(tempElement);
-            // Get computed style to convert to rgb
-            const computedColor = window.getComputedStyle(tempElement).color;
-            document.body.removeChild(tempElement);
-            // Convert rgb to hex
-            const rgbMatch = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
-            if (rgbMatch) {
-                const r = parseInt((_a = rgbMatch[1]) !== null && _a !== void 0 ? _a : "0");
-                const g = parseInt((_b = rgbMatch[2]) !== null && _b !== void 0 ? _b : "0");
-                const b = parseInt((_c = rgbMatch[3]) !== null && _c !== void 0 ? _c : "0");
-                return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-            }
-        }
-        catch (error) {
-            console.warn("Failed to convert oklch color to hex:", color, error);
+    try {
+        const parsedColor = parse$1(color);
+        if (!parsedColor) {
+            return color;
         }
+        return (_a = formatRgb(parsedColor)) !== null && _a !== void 0 ? _a : color;
+    }
+    catch (error) {
+        console.warn("Failed to format color:", color, error);
+        return color;
     }
-    // Fallback to a default color if conversion fails
-    return "#000000";
 };
+
 function Appearance({ appearance, fonts, shadowRef, }) {
     useEffect(() => {
         var _a;
@@ -8815,17 +13291,17 @@ const convertCheckoutAppearanceToStripeAppearance = (appearance, fonts) => {
         rules: {
             ".Input": {
                 padding: "12px",
-                border: `1px solid ${currentVariables["--border"]}`,
-                backgroundColor: currentVariables["--background"],
+                border: `1px solid ${formatColor(currentVariables["--border"])}`,
+                backgroundColor: formatColor(currentVariables["--background"]),
                 fontSize: "14px",
                 outline: "none",
             },
             ".Input:focus": {
-                backgroundColor: currentVariables["--secondary"],
+                backgroundColor: formatColor(currentVariables["--secondary"]),
             },
             ".Input::placeholder": {
                 fontSize: "14px",
-                color: currentVariables["--muted-foreground"],
+                color: formatColor(currentVariables["--muted-foreground"]),
             },
             ".Label": {
                 marginBottom: "8px",
@@ -8843,16 +13319,16 @@ const convertCheckoutAppearanceToStripeAppearance = (appearance, fonts) => {
             // },
             ".Tab": {
                 padding: "10px 12px 8px 12px",
-                border: `1px solid ${currentVariables["--border"]}`,
-                backgroundColor: currentVariables["--background"],
+                border: `1px solid ${formatColor(currentVariables["--border"])}`,
+                backgroundColor: formatColor(currentVariables["--background"]),
             },
             ".Tab:hover": {
-                backgroundColor: currentVariables["--secondary"],
+                backgroundColor: formatColor(currentVariables["--secondary"]),
             },
             ".Tab--selected, .Tab--selected:focus, .Tab--selected:hover": {
-                border: `1px solid ${currentVariables["--border"]}`,
-                backgroundColor: currentVariables["--secondary"],
-                color: currentVariables["--foreground"],
+                border: `1px solid ${formatColor(currentVariables["--border"])}`,
+                backgroundColor: formatColor(currentVariables["--secondary"]),
+                color: formatColor(currentVariables["--foreground"]),
             },
         },
         variables: {
@@ -35076,7 +39552,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [cityInput]);
-    return (jsxs("div", { className: cn("space-y-5", className), children: [jsx(CountryInput, { form: form, prefix: "address", label: t("CheckoutEmbed.CustomerForm.address.country"), emptyText: t("CheckoutEmbed.CustomerForm.address.countryNoCountry"), searchText: t("CheckoutEmbed.CustomerForm.address.countrySearch"), locale: locale }), jsxs("div", { className: "relative", children: [jsx(InputGroup, { name: "address.line1", label: showAllInputs
+    return (jsxs("div", { className: cn("space-y-5", className), children: [jsx(CountryInput, { form: form, prefix: "address", label: t("CheckoutEmbed.CustomerForm.address.country"), emptyText: t("CheckoutEmbed.CustomerForm.address.countryNoCountry"), searchText: t("CheckoutEmbed.CustomerForm.address.countrySearch"), locale: locale }), jsxs("div", { className: "relative", children: [jsx(InputGroup, { autoComplete: "address-line1", name: "address.line1", label: showAllInputs
                             ? t("CheckoutEmbed.CustomerForm.address.line1")
                             : t("CheckoutEmbed.CustomerForm.address.line1-autocomplete"), required: showAllInputs, icon: jsx(Search, { className: "h-4 w-4" }), showIcon: !showAllInputs, onFocus: () => setShowSuggestions(true), onBlur: () => setTimeout(() => setShowSuggestions(false), 200) }), !showAllInputs &&
                         (showSuggestions || isLoading || isLoadingLookup) && (jsx("div", { className: "bg-background border-border absolute left-0 right-0 top-full z-50 mt-1 rounded-md border shadow-lg", "data-dropdown": "suggestions", children: isLoading || isLoadingLookup ? (jsxs("div", { className: "text-muted-foreground border-border flex gap-2 border-b p-3 text-sm", children: [isLoadingLookup
@@ -35085,7 +39561,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
                                 setShowApartmentField(true);
                                 form.setValue("address.line2", "");
                                 form.setFocus("address.line2");
-                            }, className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-2 text-sm transition-colors", children: [jsx(Plus, { className: "h-4 w-4" }), t("CheckoutEmbed.CustomerForm.address.addLine2")] }) }), jsx("div", { className: cn(!showApartmentField && "-mt-4 h-0 max-h-0 w-0 max-w-0 opacity-0"), children: jsx(InputGroup, { name: "address.line2", label: t("CheckoutEmbed.CustomerForm.address.line2") }) }), jsxs("div", { className: cn("grid gap-4", renderProvinceInput ? "md:grid-cols-3" : "grid-cols-2"), children: [jsx(InputGroup, { name: "address.city", label: "City", required: true }), renderProvinceInput && (jsx(CompoboxGroup, { form: form, name: "address.provinceCode", label: t("CheckoutEmbed.CustomerForm.address.province"), options: availableProvinces.map((state) => ({
+                            }, className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-2 text-sm transition-colors", children: [jsx(Plus, { className: "h-4 w-4" }), t("CheckoutEmbed.CustomerForm.address.addLine2")] }) }), jsx("div", { className: cn(!showApartmentField && "-mt-4 h-0 max-h-0 w-0 max-w-0 opacity-0"), children: jsx(InputGroup, { autoComplete: "address-line2", name: "address.line2", label: t("CheckoutEmbed.CustomerForm.address.line2") }) }), jsxs("div", { className: cn("grid gap-4", renderProvinceInput ? "md:grid-cols-3" : "grid-cols-2"), children: [jsx(InputGroup, { name: "address.city", label: "City", required: true }), renderProvinceInput && (jsx(CompoboxGroup, { form: form, name: "address.provinceCode", label: t("CheckoutEmbed.CustomerForm.address.province"), options: availableProvinces.map((state) => ({
                                     value: state.code,
                                     label: state.name,
                                 })), onSelect: (value) => {
@@ -35094,7 +39570,7 @@ function AddressInput({ className = "", proxy, clientSecret, latitude, longitude
                                     if (provinceName) {
                                         form.setValue("address.province", provinceName);
                                     }
-                                }, searchText: t("CheckoutEmbed.CustomerForm.address.provinceSearch"), emptyText: t("CheckoutEmbed.CustomerForm.address.provinceNoProvinces"), required: true })), jsx(InputGroup, { name: "address.zipCode", label: t("CheckoutEmbed.CustomerForm.address.zipCode"), required: true })] })] })] }));
+                                }, searchText: t("CheckoutEmbed.CustomerForm.address.provinceSearch"), emptyText: t("CheckoutEmbed.CustomerForm.address.provinceNoProvinces"), required: true })), jsx(InputGroup, { autoComplete: "postal-code", name: "address.zipCode", label: t("CheckoutEmbed.CustomerForm.address.zipCode"), required: true })] })] })] }));
 }
 
 function SubmitButton(_a) {
@@ -36620,6 +41096,20 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
     const elements = reactStripe_umdExports.useElements();
     const { setIsSubmitting } = useCheckout();
     const [errorMessage, setErrorMessage] = useState(undefined);
+    const containerRef = useRef(null);
+    const [rect, setRect] = useState(null);
+    useEffect(() => {
+        const updateRect = () => {
+            if (containerRef.current) {
+                setRect(containerRef.current.getBoundingClientRect());
+            }
+        };
+        updateRect();
+        window.addEventListener("resize", updateRect);
+        return () => {
+            window.removeEventListener("resize", updateRect);
+        };
+    }, []);
     const handleSubmit = (event) => __awaiter(void 0, void 0, void 0, function* () {
         event.preventDefault();
         if (!stripe || !elements) {
@@ -36644,7 +41134,15 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         }
     });
-    return (jsxs("form", { onSubmit: handleSubmit, children: [jsxs("div", { children: [jsx(reactStripe_umdExports.PaymentElement, {}), errorMessage && (jsx("p", { className: "text-destructive mt-2 text-sm", children: errorMessage }))] }), children] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { children: [jsx("div", { ref: containerRef, className: "h-[310px] w-full sm:h-[230px]" }), errorMessage && (jsx("p", { className: "text-destructive -mb-2 mt-2 text-sm", children: errorMessage })), jsx("form", { className: "w-full", onSubmit: handleSubmit, children: children })] }), ReactDOM__default.createPortal(jsx("div", { style: {
+                    display: "block",
+                    zIndex: 20,
+                    position: "absolute",
+                    top: rect === null || rect === void 0 ? void 0 : rect.top,
+                    left: rect === null || rect === void 0 ? void 0 : rect.left,
+                    width: rect === null || rect === void 0 ? void 0 : rect.width,
+                    height: rect === null || rect === void 0 ? void 0 : rect.height,
+                }, children: jsx(reactStripe_umdExports.PaymentElement, {}) }), document.body)] }));
 };
 var CheckoutForm$2 = memo(CheckoutForm$1);