@betterstore/react 0.3.68 → 0.3.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/components/checkout-embed/checkout-schema.d.ts +6 -6
  3. package/dist/index.cjs.js +551 -543
  4. package/dist/index.mjs +552 -544
  5. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -6,7 +6,8 @@ var LanguageDetector = require('i18next-browser-languagedetector');
6
6
  var reactI18next = require('react-i18next');
7
7
  var sdk = require('@betterstore/sdk');
8
8
  var React = require('react');
9
- var ReactDOM = require('react-dom');
9
+ var ReactDOM = require('react-dom/client');
10
+ var jsxRuntime = require('react/jsx-runtime');
10
11
  var sonner = require('sonner');
11
12
  var zod = require('zod');
12
13
  var reactSlot = require('@radix-ui/react-slot');
@@ -23,7 +24,7 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
23
24
  var countryDataList = require('country-data-list');
24
25
  var reactStripeJs = require('@stripe/react-stripe-js');
25
26
  var stripeJs = require('@stripe/stripe-js');
26
- var jsxRuntime = require('react/jsx-runtime');
27
+ var ReactDOM$1 = require('react-dom');
27
28
 
28
29
  function _interopNamespaceDefault(e) {
29
30
  var n = Object.create(null);
@@ -516,560 +517,237 @@ const createI18nInstance = (locale) => __awaiter(void 0, void 0, void 0, functio
516
517
  return i18n;
517
518
  });
518
519
 
519
- var css_248z = "/*! tailwindcss v4.1.8 | 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 --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 -moz-tab-size: 4;\n -o-tab-size: 4;\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 ::-moz-placeholder {\n opacity: 1;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::-moz-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 ::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 -webkit-appearance: button;\n -moz-appearance: 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 .sticky {\n position: sticky;\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 .-right-2 {\n right: calc(var(--spacing) * -2);\n }\n .right-2 {\n right: calc(var(--spacing) * 2);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\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-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 .col-span-2 {\n grid-column: span 2 / span 2;\n }\n .-m-0\\.5 {\n margin: calc(var(--spacing) * -0.5);\n }\n .-mx-1 {\n margin-inline: calc(var(--spacing) * -1);\n }\n .mx-auto {\n margin-inline: auto;\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-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 .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-3 {\n height: calc(var(--spacing) * 3);\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-\\[306\\.08px\\] {\n height: 306.08px;\n }\n .h-\\[var\\(--radix-select-trigger-height\\)\\] {\n height: var(--radix-select-trigger-height);\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-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-96 {\n max-height: calc(var(--spacing) * 96);\n }\n .max-h-\\[200px\\] {\n max-height: 200px;\n }\n .max-h-\\[300px\\] {\n max-height: 300px;\n }\n .min-h-full {\n min-height: 100%;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\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-fit {\n width: -moz-fit-content;\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .max-w-\\[1200px\\] {\n max-width: 1200px;\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-\\[--radix-popper-anchor-width\\] {\n min-width: --radix-popper-anchor-width;\n }\n .min-w-\\[8rem\\] {\n min-width: 8rem;\n }\n .min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n min-width: var(--radix-select-trigger-width);\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\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-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-\\[-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 .transform-none\\! {\n transform: none !important;\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-my-1 {\n scroll-margin-block: calc(var(--spacing) * 1);\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-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 .space-x-2 {\n :where(& > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-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-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\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 -o-object-fit: 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-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\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 .pt-8 {\n padding-top: calc(var(--spacing) * 8);\n }\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n .pr-8 {\n padding-right: calc(var(--spacing) * 8);\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-2 {\n padding-left: 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-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 .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-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-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-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-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-sm {\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-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-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 .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .duration-200 {\n animation-duration: 200ms;\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 .selection\\:bg-primary {\n & *::-moz-selection {\n background-color: var(--primary);\n }\n & *::selection {\n background-color: var(--primary);\n }\n &::-moz-selection {\n background-color: var(--primary);\n }\n &::selection {\n background-color: var(--primary);\n }\n }\n .selection\\:text-primary-foreground {\n & *::-moz-selection {\n color: var(--primary-foreground);\n }\n & *::selection {\n color: var(--primary-foreground);\n }\n &::-moz-selection {\n color: var(--primary-foreground);\n }\n &::selection {\n color: var(--primary-foreground);\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 &::-moz-placeholder {\n color: var(--muted-foreground);\n }\n &::placeholder {\n color: var(--muted-foreground);\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\\: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-1 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-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\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\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-\\[placeholder\\]\\:text-muted-foreground {\n &[data-placeholder] {\n color: var(--muted-foreground);\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\\]\\:translate-y-1 {\n &[data-side=\"bottom\"] {\n --tw-translate-y: calc(var(--spacing) * 1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\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\\]\\:-translate-x-1 {\n &[data-side=\"left\"] {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\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\\]\\:translate-x-1 {\n &[data-side=\"right\"] {\n --tw-translate-x: calc(var(--spacing) * 1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\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\\]\\:-translate-y-1 {\n &[data-side=\"top\"] {\n --tw-translate-y: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\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-\\[slot\\=select-value\\]\\:line-clamp-1 {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n }\n }\n .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n display: flex;\n }\n }\n }\n .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n align-items: center;\n }\n }\n }\n .\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n gap: calc(var(--spacing) * 2);\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 .min-\\[480px\\]\\:h-\\[228\\.56px\\] {\n @media (width >= 480px) {\n height: 228.56px;\n }\n }\n .sm\\:max-h-\\[270px\\] {\n @media (width >= 40rem) {\n max-height: 270px;\n }\n }\n .sm\\:max-w-\\[500px\\] {\n @media (width >= 40rem) {\n max-width: 500px;\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-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 .\\*\\:\\[span\\]\\:last\\:flex {\n :is(& > *) {\n &:is(span) {\n &:last-child {\n display: flex;\n }\n }\n }\n }\n .\\*\\:\\[span\\]\\:last\\:items-center {\n :is(& > *) {\n &:is(span) {\n &:last-child {\n align-items: center;\n }\n }\n }\n }\n .\\*\\:\\[span\\]\\:last\\:gap-2 {\n :is(& > *) {\n &:is(span) {\n &:last-child {\n gap: calc(var(--spacing) * 2);\n }\n }\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 .\\[\\&\\>span\\]\\:line-clamp-1 {\n &>span {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n }\n}\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --destructive-foreground: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n --radius: 0.625rem;\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n}\n@layer base {\n * {\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) !important;\n letter-spacing: var(--tracking-tight) !important;\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-space-x-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@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-space-x-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 }\n }\n}\n";
520
+ const LayoutGroupContext = React.createContext({});
520
521
 
521
- const IframeWrapper = React.memo(({ children, iframeRef, wrapperRef }) => {
522
- const [iframeBody, setIframeBody] = React.useState(null);
523
- const styleRef = React.useRef(null);
524
- const motionRef = React.useRef(null);
525
- const resizeObserver = React.useRef();
526
- const injectStyles = React.useCallback((doc) => {
527
- var _a;
528
- // Clean up previous style
529
- if ((_a = styleRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) {
530
- styleRef.current.parentNode.removeChild(styleRef.current);
531
- }
532
- const styleEl = doc.createElement("style");
533
- styleEl.textContent = css_248z;
534
- doc.head.appendChild(styleEl);
535
- styleRef.current = styleEl;
536
- }, []);
537
- const injectMotion = React.useCallback((doc) => {
538
- var _a;
539
- // Clean up previous style
540
- if ((_a = motionRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) {
541
- motionRef.current.parentNode.removeChild(motionRef.current);
542
- }
543
- const script = doc.createElement("script");
544
- script.type = "module";
545
- script.textContent = `
546
- import { motion } from 'https://esm.sh/motion';
547
- window.Motion = motion;
548
- `;
549
- doc.head.appendChild(script);
550
- motionRef.current = script;
551
- }, []);
552
- const updateHeight = React.useCallback(() => {
553
- const iframe = iframeRef.current;
554
- const doc = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument;
555
- if (iframe && doc) {
556
- const height = doc.body.scrollHeight;
557
- iframe.style.height = `${height}px`;
522
+ /**
523
+ * Creates a constant value over the lifecycle of a component.
524
+ *
525
+ * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
526
+ * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
527
+ * you can ensure that initialisers don't execute twice or more.
528
+ */
529
+ function useConstant(init) {
530
+ const ref = React.useRef(null);
531
+ if (ref.current === null) {
532
+ ref.current = init();
533
+ }
534
+ return ref.current;
535
+ }
536
+
537
+ const isBrowser = typeof window !== "undefined";
538
+
539
+ const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
540
+
541
+ /**
542
+ * @public
543
+ */
544
+ const PresenceContext =
545
+ /* @__PURE__ */ React.createContext(null);
546
+
547
+ /**
548
+ * @public
549
+ */
550
+ const MotionConfigContext = React.createContext({
551
+ transformPagePoint: (p) => p,
552
+ isStatic: false,
553
+ reducedMotion: "never",
554
+ });
555
+
556
+ function isObject(value) {
557
+ return typeof value === "object" && value !== null;
558
+ }
559
+
560
+ /**
561
+ * Checks if an element is an HTML element in a way
562
+ * that works across iframes
563
+ */
564
+ function isHTMLElement(element) {
565
+ return isObject(element) && "offsetHeight" in element;
566
+ }
567
+
568
+ /**
569
+ * Measurement functionality has to be within a separate component
570
+ * to leverage snapshot lifecycle.
571
+ */
572
+ class PopChildMeasure extends React__namespace.Component {
573
+ getSnapshotBeforeUpdate(prevProps) {
574
+ const element = this.props.childRef.current;
575
+ if (element && prevProps.isPresent && !this.props.isPresent) {
576
+ const parent = element.offsetParent;
577
+ const parentWidth = isHTMLElement(parent)
578
+ ? parent.offsetWidth || 0
579
+ : 0;
580
+ const size = this.props.sizeRef.current;
581
+ size.height = element.offsetHeight || 0;
582
+ size.width = element.offsetWidth || 0;
583
+ size.top = element.offsetTop;
584
+ size.left = element.offsetLeft;
585
+ size.right = parentWidth - size.width - size.left;
558
586
  }
559
- }, [iframeRef]);
560
- const handleLoad = React.useCallback(() => {
561
- const iframe = iframeRef.current;
562
- if (!iframe)
563
- return;
564
- const doc = iframe.contentDocument;
565
- injectMotion(doc);
566
- injectStyles(doc);
567
- setIframeBody(doc.body);
568
- updateHeight();
569
- // Observe body mutations & size
570
- if ("ResizeObserver" in window) {
571
- resizeObserver.current = new ResizeObserver(updateHeight);
572
- resizeObserver.current.observe(doc.body);
573
- }
574
- }, [iframeRef, injectStyles, updateHeight]);
575
- React.useLayoutEffect(() => {
576
- var _a;
577
- const iframe = iframeRef.current;
578
- if (!iframe)
587
+ return null;
588
+ }
589
+ /**
590
+ * Required with getSnapshotBeforeUpdate to stop React complaining.
591
+ */
592
+ componentDidUpdate() { }
593
+ render() {
594
+ return this.props.children;
595
+ }
596
+ }
597
+ function PopChild({ children, isPresent, anchorX }) {
598
+ const id = React.useId();
599
+ const ref = React.useRef(null);
600
+ const size = React.useRef({
601
+ width: 0,
602
+ height: 0,
603
+ top: 0,
604
+ left: 0,
605
+ right: 0,
606
+ });
607
+ const { nonce } = React.useContext(MotionConfigContext);
608
+ /**
609
+ * We create and inject a style block so we can apply this explicit
610
+ * sizing in a non-destructive manner by just deleting the style block.
611
+ *
612
+ * We can't apply size via render as the measurement happens
613
+ * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
614
+ * styles directly on the DOM node, we might be overwriting
615
+ * styles set via the style prop.
616
+ */
617
+ React.useInsertionEffect(() => {
618
+ const { width, height, top, left, right } = size.current;
619
+ if (isPresent || !ref.current || !width || !height)
579
620
  return;
580
- // Attach onLoad
581
- iframe.addEventListener("load", handleLoad);
582
- // If already loaded
583
- if (((_a = iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.readyState) === "complete") {
584
- handleLoad();
621
+ const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
622
+ ref.current.dataset.motionPopId = id;
623
+ const style = document.createElement("style");
624
+ if (nonce)
625
+ style.nonce = nonce;
626
+ document.head.appendChild(style);
627
+ if (style.sheet) {
628
+ style.sheet.insertRule(`
629
+ [data-motion-pop-id="${id}"] {
630
+ position: absolute !important;
631
+ width: ${width}px !important;
632
+ height: ${height}px !important;
633
+ ${x}px !important;
634
+ top: ${top}px !important;
635
+ }
636
+ `);
585
637
  }
586
638
  return () => {
587
- var _a, _b;
588
- iframe.removeEventListener("load", handleLoad);
589
- (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
590
- if ((_b = styleRef.current) === null || _b === void 0 ? void 0 : _b.parentNode) {
591
- styleRef.current.parentNode.removeChild(styleRef.current);
639
+ if (document.head.contains(style)) {
640
+ document.head.removeChild(style);
592
641
  }
593
642
  };
594
- }, [iframeRef, handleLoad]);
595
- // Update on window resize
596
- React.useEffect(() => {
597
- window.addEventListener("resize", updateHeight);
598
- return () => {
599
- window.removeEventListener("resize", updateHeight);
600
- };
601
- }, [updateHeight]);
602
- return (React.createElement("div", { ref: wrapperRef, className: "w-full max-w-[1200px] min-h-screen mx-auto overflow-y-auto overflow-x-hidden relative" },
603
- React.createElement("iframe", { ref: iframeRef, className: "w-full min-h-screen border-0", sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-top-navigation" }),
604
- iframeBody && ReactDOM.createPortal(children, iframeBody)));
605
- });
606
- IframeWrapper.displayName = "IframeWrapper";
607
-
608
- 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__namespace.createContext(void 0),U={setTheme:e=>{},themes:[]},z=()=>{var e;return (e=React__namespace.useContext(x))!=null?e:U};React__namespace.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__namespace.createElement("script",{...w,suppressHydrationWarning:true,nonce:typeof window=="undefined"?d:"",dangerouslySetInnerHTML:{__html:`(${M.toString()})(${p})`}})});
643
+ }, [isPresent]);
644
+ return (jsxRuntime.jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref }) }));
645
+ }
609
646
 
610
- const Toaster = (_a) => {
611
- var props = __rest(_a, []);
612
- const { theme = "system" } = z();
613
- return (React.createElement(sonner.Toaster, Object.assign({ theme: theme, className: "toaster group", style: {
614
- "--normal-bg": "var(--popover)",
615
- "--normal-text": "var(--popover-foreground)",
616
- "--normal-border": "var(--border)",
617
- } }, props)));
647
+ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
648
+ const presenceChildren = useConstant(newChildrenMap);
649
+ const id = React.useId();
650
+ let isReusedContext = true;
651
+ let context = React.useMemo(() => {
652
+ isReusedContext = false;
653
+ return {
654
+ id,
655
+ initial,
656
+ isPresent,
657
+ custom,
658
+ onExitComplete: (childId) => {
659
+ presenceChildren.set(childId, true);
660
+ for (const isComplete of presenceChildren.values()) {
661
+ if (!isComplete)
662
+ return; // can stop searching when any is incomplete
663
+ }
664
+ onExitComplete && onExitComplete();
665
+ },
666
+ register: (childId) => {
667
+ presenceChildren.set(childId, false);
668
+ return () => presenceChildren.delete(childId);
669
+ },
670
+ };
671
+ }, [isPresent, presenceChildren, onExitComplete]);
672
+ /**
673
+ * If the presence of a child affects the layout of the components around it,
674
+ * we want to make a new context value to ensure they get re-rendered
675
+ * so they can detect that layout change.
676
+ */
677
+ if (presenceAffectsLayout && isReusedContext) {
678
+ context = { ...context };
679
+ }
680
+ React.useMemo(() => {
681
+ presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
682
+ }, [isPresent]);
683
+ /**
684
+ * If there's no `motion` components to fire exit animations, we want to remove this
685
+ * component immediately.
686
+ */
687
+ React__namespace.useEffect(() => {
688
+ !isPresent &&
689
+ !presenceChildren.size &&
690
+ onExitComplete &&
691
+ onExitComplete();
692
+ }, [isPresent]);
693
+ if (mode === "popLayout") {
694
+ children = (jsxRuntime.jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, children: children }));
695
+ }
696
+ return (jsxRuntime.jsx(PresenceContext.Provider, { value: context, children: children }));
618
697
  };
698
+ function newChildrenMap() {
699
+ return new Map();
700
+ }
619
701
 
620
- const appearance = {
621
- variables: {
622
- fontFamily: '-apple-system, BlinkMacSystemFont, "Geist", "Gill Sans", sans-serif'}};
623
-
624
- function Appearance({ appearance, fonts, iframeRef, }) {
702
+ /**
703
+ * When a component is the child of `AnimatePresence`, it can use `usePresence`
704
+ * to access information about whether it's still present in the React tree.
705
+ *
706
+ * ```jsx
707
+ * import { usePresence } from "framer-motion"
708
+ *
709
+ * export const Component = () => {
710
+ * const [isPresent, safeToRemove] = usePresence()
711
+ *
712
+ * useEffect(() => {
713
+ * !isPresent && setTimeout(safeToRemove, 1000)
714
+ * }, [isPresent])
715
+ *
716
+ * return <div />
717
+ * }
718
+ * ```
719
+ *
720
+ * If `isPresent` is `false`, it means that a component has been removed the tree, but
721
+ * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
722
+ *
723
+ * @public
724
+ */
725
+ function usePresence(subscribe = true) {
726
+ const context = React.useContext(PresenceContext);
727
+ if (context === null)
728
+ return [true, null];
729
+ const { isPresent, onExitComplete, register } = context;
730
+ // It's safe to call the following hooks conditionally (after an early return) because the context will always
731
+ // either be null or non-null for the lifespan of the component.
732
+ const id = React.useId();
625
733
  React.useEffect(() => {
626
- var _a;
627
- if (!(iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current))
628
- return;
629
- try {
630
- const variables = getVariablesFromAppearanceConfig(appearance);
631
- const iframeDoc = iframeRef.current.contentDocument ||
632
- ((_a = iframeRef.current.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
633
- if (!iframeDoc) {
634
- console.warn("Unable to access iframe document");
635
- return;
636
- }
637
- if (variables) {
638
- Object.entries(variables).forEach(([key, value]) => {
639
- iframeDoc.documentElement.style.setProperty(key, value);
640
- });
641
- }
642
- // Load fonts if provided
643
- if (fonts) {
644
- fonts.forEach((font) => {
645
- try {
646
- if ("cssSrc" in font) {
647
- // Handle CSS font source
648
- const link = iframeDoc.createElement("link");
649
- link.rel = "stylesheet";
650
- link.href = font.cssSrc;
651
- iframeDoc.head.appendChild(link);
652
- }
653
- else if ("family" in font) {
654
- // Handle custom font source
655
- const style = iframeDoc.createElement("style");
656
- style.textContent = `
657
- @font-face {
658
- font-family: '${font.family}';
659
- src: ${font.src};
660
- font-weight: ${font.weight || "normal"};
661
- font-style: ${font.style || "normal"};
662
- }
663
- `;
664
- iframeDoc.head.appendChild(style);
665
- }
666
- }
667
- catch (error) {
668
- console.error("Error loading font:", error);
669
- }
670
- });
671
- }
672
- }
673
- catch (error) {
674
- console.error("Error applying appearance styles:", error);
734
+ if (subscribe) {
735
+ return register(id);
675
736
  }
676
- }, [appearance, fonts, iframeRef]);
677
- return null;
737
+ }, [subscribe]);
738
+ const safeToRemove = React.useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
739
+ return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
678
740
  }
679
- const getVariablesFromAppearanceConfig = (appearance) => {
680
- var _a;
681
- const colors = getColorVariablesFromAppearanceConfig(appearance);
682
- const definedAppearance = Object.assign(Object.assign({}, colors), { "--font-sans": (_a = appearance === null || appearance === void 0 ? void 0 : appearance.font) !== null && _a !== void 0 ? _a : '-apple-system, BlinkMacSystemFont, "Helvetica", "Gill Sans", "Inter", sans-serif', "--radius": (appearance === null || appearance === void 0 ? void 0 : appearance.borderRadius)
683
- ? `${appearance.borderRadius}rem`
684
- : "0.625rem" });
685
- return definedAppearance;
686
- };
687
- const getColorVariablesFromAppearanceConfig = (appearance) => {
688
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27;
689
- // Determine if we're using dark theme
690
- const isDark = (appearance === null || appearance === void 0 ? void 0 : appearance.theme) === "dark";
691
- // Define fallback colors based on theme
692
- const fallbackColors = {
693
- background: isDark ? "oklch(0.145 0 0)" : "oklch(1 0 0)",
694
- foreground: isDark ? "oklch(0.985 0 0)" : "oklch(0.145 0 0)",
695
- card: isDark ? "oklch(0.145 0 0)" : "oklch(1 0 0)",
696
- cardForeground: isDark ? "oklch(0.985 0 0)" : "oklch(0.145 0 0)",
697
- primary: isDark ? "oklch(0.985 0 0)" : "oklch(0.205 0 0)",
698
- primaryForeground: isDark ? "oklch(0.205 0 0)" : "oklch(0.985 0 0)",
699
- secondary: isDark ? "oklch(0.269 0 0)" : "oklch(0.97 0 0)",
700
- secondaryForeground: isDark ? "oklch(0.985 0 0)" : "oklch(0.205 0 0)",
701
- muted: isDark ? "oklch(0.269 0 0)" : "oklch(0.97 0 0)",
702
- mutedForeground: isDark ? "oklch(0.708 0 0)" : "oklch(0.556 0 0)",
703
- accent: isDark ? "oklch(0.269 0 0)" : "oklch(0.97 0 0)",
704
- accentForeground: isDark ? "oklch(0.985 0 0)" : "oklch(0.205 0 0)",
705
- destructive: isDark
706
- ? "oklch(0.396 0.141 25.723)"
707
- : "oklch(0.577 0.245 27.325)",
708
- destructiveForeground: isDark
709
- ? "oklch(0.637 0.237 25.331)"
710
- : "oklch(0.577 0.245 27.325)",
711
- border: isDark ? "oklch(0.269 0 0)" : "oklch(0.922 0 0)",
712
- ring: isDark ? "oklch(0.439 0 0)" : "oklch(0.708 0 0)",
713
- sidebar: isDark ? "oklch(0.205 0 0)" : "oklch(0.985 0 0)",
714
- sidebarForeground: isDark ? "oklch(0.985 0 0)" : "oklch(0.145 0 0)",
715
- sidebarPrimary: isDark ? "oklch(0.488 0.243 264.376)" : "oklch(0.205 0 0)",
716
- sidebarPrimaryForeground: isDark ? "oklch(0.985 0 0)" : "oklch(0.985 0 0)",
717
- };
718
- const colors = {
719
- "--background": (_b = (_a = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : fallbackColors.background,
720
- "--foreground": (_d = (_c = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _c === void 0 ? void 0 : _c.foreground) !== null && _d !== void 0 ? _d : fallbackColors.foreground,
721
- // Card (reusing background/foreground)
722
- "--card": (_f = (_e = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _e === void 0 ? void 0 : _e.background) !== null && _f !== void 0 ? _f : fallbackColors.card,
723
- "--card-foreground": (_h = (_g = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _g === void 0 ? void 0 : _g.foreground) !== null && _h !== void 0 ? _h : fallbackColors.cardForeground,
724
- // Popover (reusing background/foreground)
725
- "--popover": (_k = (_j = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _j === void 0 ? void 0 : _j.background) !== null && _k !== void 0 ? _k : fallbackColors.background,
726
- "--popover-foreground": (_m = (_l = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _l === void 0 ? void 0 : _l.foreground) !== null && _m !== void 0 ? _m : fallbackColors.foreground,
727
- // Primary
728
- "--primary": (_p = (_o = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _o === void 0 ? void 0 : _o.primary) !== null && _p !== void 0 ? _p : fallbackColors.primary,
729
- "--primary-foreground": (_r = (_q = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _q === void 0 ? void 0 : _q.primaryForeground) !== null && _r !== void 0 ? _r : fallbackColors.primaryForeground,
730
- // Secondary
731
- "--secondary": (_t = (_s = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _s === void 0 ? void 0 : _s.secondary) !== null && _t !== void 0 ? _t : fallbackColors.secondary,
732
- "--secondary-foreground": (_v = (_u = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _u === void 0 ? void 0 : _u.secondaryForeground) !== null && _v !== void 0 ? _v : fallbackColors.secondaryForeground,
733
- // Muted
734
- "--muted": (_x = (_w = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _w === void 0 ? void 0 : _w.muted) !== null && _x !== void 0 ? _x : fallbackColors.muted,
735
- "--muted-foreground": (_z = (_y = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _y === void 0 ? void 0 : _y.mutedForeground) !== null && _z !== void 0 ? _z : fallbackColors.mutedForeground,
736
- // Accent
737
- "--accent": (_1 = (_0 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _0 === void 0 ? void 0 : _0.accent) !== null && _1 !== void 0 ? _1 : fallbackColors.accent,
738
- "--accent-foreground": (_3 = (_2 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _2 === void 0 ? void 0 : _2.accentForeground) !== null && _3 !== void 0 ? _3 : fallbackColors.accentForeground,
739
- // Destructive
740
- "--destructive": (_5 = (_4 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _4 === void 0 ? void 0 : _4.destructive) !== null && _5 !== void 0 ? _5 : fallbackColors.destructive,
741
- "--destructive-foreground": fallbackColors.destructiveForeground,
742
- // Border and Input
743
- "--border": (_7 = (_6 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _6 === void 0 ? void 0 : _6.border) !== null && _7 !== void 0 ? _7 : fallbackColors.border,
744
- "--input": (_9 = (_8 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _8 === void 0 ? void 0 : _8.border) !== null && _9 !== void 0 ? _9 : fallbackColors.border,
745
- "--ring": (_11 = (_10 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _10 === void 0 ? void 0 : _10.ring) !== null && _11 !== void 0 ? _11 : fallbackColors.ring,
746
- // Chart colors (keeping original values)
747
- "--chart-1": isDark
748
- ? "oklch(0.488 0.243 264.376)"
749
- : "oklch(0.646 0.222 41.116)",
750
- "--chart-2": isDark
751
- ? "oklch(0.696 0.17 162.48)"
752
- : "oklch(0.6 0.118 184.704)",
753
- "--chart-3": isDark
754
- ? "oklch(0.769 0.188 70.08)"
755
- : "oklch(0.398 0.07 227.392)",
756
- "--chart-4": isDark
757
- ? "oklch(0.627 0.265 303.9)"
758
- : "oklch(0.828 0.189 84.429)",
759
- "--chart-5": isDark
760
- ? "oklch(0.645 0.246 16.439)"
761
- : "oklch(0.769 0.188 70.08)",
762
- // Sidebar
763
- "--sidebar": (_13 = (_12 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _12 === void 0 ? void 0 : _12.background) !== null && _13 !== void 0 ? _13 : fallbackColors.sidebar,
764
- "--sidebar-foreground": (_15 = (_14 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _14 === void 0 ? void 0 : _14.foreground) !== null && _15 !== void 0 ? _15 : fallbackColors.sidebarForeground,
765
- "--sidebar-primary": (_17 = (_16 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _16 === void 0 ? void 0 : _16.primary) !== null && _17 !== void 0 ? _17 : fallbackColors.sidebarPrimary,
766
- "--sidebar-primary-foreground": (_19 = (_18 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _18 === void 0 ? void 0 : _18.primaryForeground) !== null && _19 !== void 0 ? _19 : fallbackColors.sidebarPrimaryForeground,
767
- "--sidebar-accent": (_21 = (_20 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _20 === void 0 ? void 0 : _20.accent) !== null && _21 !== void 0 ? _21 : fallbackColors.accent,
768
- "--sidebar-accent-foreground": (_23 = (_22 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _22 === void 0 ? void 0 : _22.accentForeground) !== null && _23 !== void 0 ? _23 : fallbackColors.accentForeground,
769
- "--sidebar-border": (_25 = (_24 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _24 === void 0 ? void 0 : _24.border) !== null && _25 !== void 0 ? _25 : fallbackColors.border,
770
- "--sidebar-ring": (_27 = (_26 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _26 === void 0 ? void 0 : _26.ring) !== null && _27 !== void 0 ? _27 : fallbackColors.ring,
771
- };
772
- return colors;
773
- };
774
- const convertCheckoutAppearanceToStripeAppearance = (appearance$1, fonts) => {
775
- const currentVariables = getVariablesFromAppearanceConfig(appearance$1);
776
- const newAppearance = {
777
- theme: "flat",
778
- rules: {
779
- ".Input": {
780
- padding: "12px",
781
- border: `1px solid ${currentVariables["--border"]}`,
782
- backgroundColor: currentVariables["--background"],
783
- fontSize: "14px",
784
- outline: "none",
785
- },
786
- ".Input:focus": {
787
- backgroundColor: currentVariables["--secondary"],
788
- },
789
- ".Input::placeholder": {
790
- fontSize: "14px",
791
- color: currentVariables["--muted-foreground"],
792
- },
793
- ".Label": {
794
- marginBottom: "8px",
795
- fontSize: "14px",
796
- fontWeight: "500",
797
- },
798
- ".Input:disabled, .Input--invalid:disabled": {
799
- cursor: "not-allowed",
800
- },
801
- // ".Block": {
802
- // backgroundColor: "#000000",
803
- // boxShadow: "none",
804
- // padding: "12px",
805
- // },
806
- ".Tab": {
807
- padding: "10px 12px 8px 12px",
808
- border: `1px solid ${currentVariables["--border"]}`,
809
- backgroundColor: currentVariables["--background"],
810
- },
811
- ".Tab:hover": {
812
- backgroundColor: currentVariables["--secondary"],
813
- },
814
- ".Tab--selected, .Tab--selected:focus, .Tab--selected:hover": {
815
- border: `1px solid ${currentVariables["--border"]}`,
816
- backgroundColor: currentVariables["--secondary"],
817
- color: currentVariables["--foreground"],
818
- },
819
- },
820
- variables: {
821
- focusOutline: "none",
822
- focusBoxShadow: "none",
823
- fontFamily: fonts
824
- ? currentVariables["--font-sans"]
825
- : appearance.variables.fontFamily,
826
- borderRadius: currentVariables["--radius"],
827
- // colorSuccess: currentVariables["--success"],
828
- // colorWarning: currentVariables["--warning"],
829
- colorDanger: currentVariables["--destructive"],
830
- colorBackground: currentVariables["--background"],
831
- colorPrimary: currentVariables["--primary"],
832
- colorText: currentVariables["--foreground"],
833
- colorTextSecondary: currentVariables["--secondary-foreground"],
834
- colorTextPlaceholder: currentVariables["--muted-foreground"],
835
- },
836
- };
837
- return newAppearance;
838
- };
839
-
840
- const storeHelpers = sdk.createStoreHelpers();
841
-
842
- const LayoutGroupContext = React.createContext({});
843
741
 
844
- /**
845
- * Creates a constant value over the lifecycle of a component.
846
- *
847
- * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
848
- * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
849
- * you can ensure that initialisers don't execute twice or more.
850
- */
851
- function useConstant(init) {
852
- const ref = React.useRef(null);
853
- if (ref.current === null) {
854
- ref.current = init();
855
- }
856
- return ref.current;
857
- }
858
-
859
- const isBrowser = typeof window !== "undefined";
860
-
861
- const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
862
-
863
- /**
864
- * @public
865
- */
866
- const PresenceContext =
867
- /* @__PURE__ */ React.createContext(null);
868
-
869
- /**
870
- * @public
871
- */
872
- const MotionConfigContext = React.createContext({
873
- transformPagePoint: (p) => p,
874
- isStatic: false,
875
- reducedMotion: "never",
876
- });
877
-
878
- function isObject(value) {
879
- return typeof value === "object" && value !== null;
880
- }
881
-
882
- /**
883
- * Checks if an element is an HTML element in a way
884
- * that works across iframes
885
- */
886
- function isHTMLElement(element) {
887
- return isObject(element) && "offsetHeight" in element;
888
- }
889
-
890
- /**
891
- * Measurement functionality has to be within a separate component
892
- * to leverage snapshot lifecycle.
893
- */
894
- class PopChildMeasure extends React__namespace.Component {
895
- getSnapshotBeforeUpdate(prevProps) {
896
- const element = this.props.childRef.current;
897
- if (element && prevProps.isPresent && !this.props.isPresent) {
898
- const parent = element.offsetParent;
899
- const parentWidth = isHTMLElement(parent)
900
- ? parent.offsetWidth || 0
901
- : 0;
902
- const size = this.props.sizeRef.current;
903
- size.height = element.offsetHeight || 0;
904
- size.width = element.offsetWidth || 0;
905
- size.top = element.offsetTop;
906
- size.left = element.offsetLeft;
907
- size.right = parentWidth - size.width - size.left;
908
- }
909
- return null;
910
- }
911
- /**
912
- * Required with getSnapshotBeforeUpdate to stop React complaining.
913
- */
914
- componentDidUpdate() { }
915
- render() {
916
- return this.props.children;
917
- }
918
- }
919
- function PopChild({ children, isPresent, anchorX }) {
920
- const id = React.useId();
921
- const ref = React.useRef(null);
922
- const size = React.useRef({
923
- width: 0,
924
- height: 0,
925
- top: 0,
926
- left: 0,
927
- right: 0,
928
- });
929
- const { nonce } = React.useContext(MotionConfigContext);
930
- /**
931
- * We create and inject a style block so we can apply this explicit
932
- * sizing in a non-destructive manner by just deleting the style block.
933
- *
934
- * We can't apply size via render as the measurement happens
935
- * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
936
- * styles directly on the DOM node, we might be overwriting
937
- * styles set via the style prop.
938
- */
939
- React.useInsertionEffect(() => {
940
- const { width, height, top, left, right } = size.current;
941
- if (isPresent || !ref.current || !width || !height)
942
- return;
943
- const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
944
- ref.current.dataset.motionPopId = id;
945
- const style = document.createElement("style");
946
- if (nonce)
947
- style.nonce = nonce;
948
- document.head.appendChild(style);
949
- if (style.sheet) {
950
- style.sheet.insertRule(`
951
- [data-motion-pop-id="${id}"] {
952
- position: absolute !important;
953
- width: ${width}px !important;
954
- height: ${height}px !important;
955
- ${x}px !important;
956
- top: ${top}px !important;
957
- }
958
- `);
959
- }
960
- return () => {
961
- if (document.head.contains(style)) {
962
- document.head.removeChild(style);
963
- }
964
- };
965
- }, [isPresent]);
966
- return (jsxRuntime.jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref }) }));
967
- }
968
-
969
- const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
970
- const presenceChildren = useConstant(newChildrenMap);
971
- const id = React.useId();
972
- let isReusedContext = true;
973
- let context = React.useMemo(() => {
974
- isReusedContext = false;
975
- return {
976
- id,
977
- initial,
978
- isPresent,
979
- custom,
980
- onExitComplete: (childId) => {
981
- presenceChildren.set(childId, true);
982
- for (const isComplete of presenceChildren.values()) {
983
- if (!isComplete)
984
- return; // can stop searching when any is incomplete
985
- }
986
- onExitComplete && onExitComplete();
987
- },
988
- register: (childId) => {
989
- presenceChildren.set(childId, false);
990
- return () => presenceChildren.delete(childId);
991
- },
992
- };
993
- }, [isPresent, presenceChildren, onExitComplete]);
994
- /**
995
- * If the presence of a child affects the layout of the components around it,
996
- * we want to make a new context value to ensure they get re-rendered
997
- * so they can detect that layout change.
998
- */
999
- if (presenceAffectsLayout && isReusedContext) {
1000
- context = { ...context };
1001
- }
1002
- React.useMemo(() => {
1003
- presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
1004
- }, [isPresent]);
1005
- /**
1006
- * If there's no `motion` components to fire exit animations, we want to remove this
1007
- * component immediately.
1008
- */
1009
- React__namespace.useEffect(() => {
1010
- !isPresent &&
1011
- !presenceChildren.size &&
1012
- onExitComplete &&
1013
- onExitComplete();
1014
- }, [isPresent]);
1015
- if (mode === "popLayout") {
1016
- children = (jsxRuntime.jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, children: children }));
1017
- }
1018
- return (jsxRuntime.jsx(PresenceContext.Provider, { value: context, children: children }));
1019
- };
1020
- function newChildrenMap() {
1021
- return new Map();
1022
- }
1023
-
1024
- /**
1025
- * When a component is the child of `AnimatePresence`, it can use `usePresence`
1026
- * to access information about whether it's still present in the React tree.
1027
- *
1028
- * ```jsx
1029
- * import { usePresence } from "framer-motion"
1030
- *
1031
- * export const Component = () => {
1032
- * const [isPresent, safeToRemove] = usePresence()
1033
- *
1034
- * useEffect(() => {
1035
- * !isPresent && setTimeout(safeToRemove, 1000)
1036
- * }, [isPresent])
1037
- *
1038
- * return <div />
1039
- * }
1040
- * ```
1041
- *
1042
- * If `isPresent` is `false`, it means that a component has been removed the tree, but
1043
- * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
1044
- *
1045
- * @public
1046
- */
1047
- function usePresence(subscribe = true) {
1048
- const context = React.useContext(PresenceContext);
1049
- if (context === null)
1050
- return [true, null];
1051
- const { isPresent, onExitComplete, register } = context;
1052
- // It's safe to call the following hooks conditionally (after an early return) because the context will always
1053
- // either be null or non-null for the lifespan of the component.
1054
- const id = React.useId();
1055
- React.useEffect(() => {
1056
- if (subscribe) {
1057
- return register(id);
1058
- }
1059
- }, [subscribe]);
1060
- const safeToRemove = React.useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
1061
- return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
1062
- }
1063
-
1064
- const getChildKey = (child) => child.key || "";
1065
- function onlyElements(children) {
1066
- const filtered = [];
1067
- // We use forEach here instead of map as map mutates the component key by preprending `.$`
1068
- React.Children.forEach(children, (child) => {
1069
- if (React.isValidElement(child))
1070
- filtered.push(child);
1071
- });
1072
- return filtered;
742
+ const getChildKey = (child) => child.key || "";
743
+ function onlyElements(children) {
744
+ const filtered = [];
745
+ // We use forEach here instead of map as map mutates the component key by preprending `.$`
746
+ React.Children.forEach(children, (child) => {
747
+ if (React.isValidElement(child))
748
+ filtered.push(child);
749
+ });
750
+ return filtered;
1073
751
  }
1074
752
 
1075
753
  /**
@@ -1553,6 +1231,46 @@ function filterProps(props, isDom, forwardMotionProps) {
1553
1231
  return filteredProps;
1554
1232
  }
1555
1233
 
1234
+ /**
1235
+ * `MotionConfig` is used to set configuration options for all children `motion` components.
1236
+ *
1237
+ * ```jsx
1238
+ * import { motion, MotionConfig } from "framer-motion"
1239
+ *
1240
+ * export function App() {
1241
+ * return (
1242
+ * <MotionConfig transition={{ type: "spring" }}>
1243
+ * <motion.div animate={{ x: 100 }} />
1244
+ * </MotionConfig>
1245
+ * )
1246
+ * }
1247
+ * ```
1248
+ *
1249
+ * @public
1250
+ */
1251
+ function MotionConfig({ children, isValidProp, ...config }) {
1252
+ isValidProp && loadExternalIsValidProp(isValidProp);
1253
+ /**
1254
+ * Inherit props from any parent MotionConfig components
1255
+ */
1256
+ config = { ...React.useContext(MotionConfigContext), ...config };
1257
+ /**
1258
+ * Don't allow isStatic to change between renders as it affects how many hooks
1259
+ * motion components fire.
1260
+ */
1261
+ config.isStatic = useConstant(() => config.isStatic);
1262
+ /**
1263
+ * Creating a new config context object will re-render every `motion` component
1264
+ * every time it renders. So we only want to create a new one sparingly.
1265
+ */
1266
+ const context = React.useMemo(() => config, [
1267
+ JSON.stringify(config.transition),
1268
+ config.transformPagePoint,
1269
+ config.reducedMotion,
1270
+ ]);
1271
+ return (jsxRuntime.jsx(MotionConfigContext.Provider, { value: context, children: children }));
1272
+ }
1273
+
1556
1274
  const warned = new Set();
1557
1275
  function warnOnce(condition, message, element) {
1558
1276
  if (condition || warned.has(message))
@@ -10970,6 +10688,296 @@ const createMotionComponent = /*@__PURE__*/ createMotionComponentFactory({
10970
10688
 
10971
10689
  const motion = /*@__PURE__*/ createDOMMotionComponentProxy(createMotionComponent);
10972
10690
 
10691
+ var css_248z = "/*! tailwindcss v4.1.8 | 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 --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 -moz-tab-size: 4;\n -o-tab-size: 4;\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 ::-moz-placeholder {\n opacity: 1;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::-moz-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 ::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 -webkit-appearance: button;\n -moz-appearance: 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 .sticky {\n position: sticky;\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 .-right-2 {\n right: calc(var(--spacing) * -2);\n }\n .right-2 {\n right: calc(var(--spacing) * 2);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\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-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 .col-span-2 {\n grid-column: span 2 / span 2;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .-m-0\\.5 {\n margin: calc(var(--spacing) * -0.5);\n }\n .-mx-1 {\n margin-inline: calc(var(--spacing) * -1);\n }\n .mx-auto {\n margin-inline: auto;\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-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 .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-3 {\n height: calc(var(--spacing) * 3);\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-\\[306\\.08px\\] {\n height: 306.08px;\n }\n .h-\\[var\\(--radix-select-trigger-height\\)\\] {\n height: var(--radix-select-trigger-height);\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-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-96 {\n max-height: calc(var(--spacing) * 96);\n }\n .max-h-\\[200px\\] {\n max-height: 200px;\n }\n .max-h-\\[300px\\] {\n max-height: 300px;\n }\n .min-h-full {\n min-height: 100%;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\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-fit {\n width: -moz-fit-content;\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .max-w-\\[1200px\\] {\n max-width: 1200px;\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-\\[--radix-popper-anchor-width\\] {\n min-width: --radix-popper-anchor-width;\n }\n .min-w-\\[8rem\\] {\n min-width: 8rem;\n }\n .min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n min-width: var(--radix-select-trigger-width);\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\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-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-\\[-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 .transform-none\\! {\n transform: none !important;\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-my-1 {\n scroll-margin-block: calc(var(--spacing) * 1);\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-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 .space-x-2 {\n :where(& > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-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-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\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 -o-object-fit: 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-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\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 .pt-8 {\n padding-top: calc(var(--spacing) * 8);\n }\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n .pr-8 {\n padding-right: calc(var(--spacing) * 8);\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-2 {\n padding-left: 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-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 .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-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-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-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-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-sm {\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-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-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 .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .duration-200 {\n animation-duration: 200ms;\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 .selection\\:bg-primary {\n & *::-moz-selection {\n background-color: var(--primary);\n }\n & *::selection {\n background-color: var(--primary);\n }\n &::-moz-selection {\n background-color: var(--primary);\n }\n &::selection {\n background-color: var(--primary);\n }\n }\n .selection\\:text-primary-foreground {\n & *::-moz-selection {\n color: var(--primary-foreground);\n }\n & *::selection {\n color: var(--primary-foreground);\n }\n &::-moz-selection {\n color: var(--primary-foreground);\n }\n &::selection {\n color: var(--primary-foreground);\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 &::-moz-placeholder {\n color: var(--muted-foreground);\n }\n &::placeholder {\n color: var(--muted-foreground);\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\\: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-1 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-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\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\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-\\[placeholder\\]\\:text-muted-foreground {\n &[data-placeholder] {\n color: var(--muted-foreground);\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\\]\\:translate-y-1 {\n &[data-side=\"bottom\"] {\n --tw-translate-y: calc(var(--spacing) * 1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\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\\]\\:-translate-x-1 {\n &[data-side=\"left\"] {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\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\\]\\:translate-x-1 {\n &[data-side=\"right\"] {\n --tw-translate-x: calc(var(--spacing) * 1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\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\\]\\:-translate-y-1 {\n &[data-side=\"top\"] {\n --tw-translate-y: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\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-\\[slot\\=select-value\\]\\:line-clamp-1 {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n }\n }\n .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n display: flex;\n }\n }\n }\n .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n align-items: center;\n }\n }\n }\n .\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 {\n :is(& > *) {\n &[data-slot=\"select-value\"] {\n gap: calc(var(--spacing) * 2);\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 .min-\\[480px\\]\\:h-\\[228\\.56px\\] {\n @media (width >= 480px) {\n height: 228.56px;\n }\n }\n .sm\\:max-h-\\[270px\\] {\n @media (width >= 40rem) {\n max-height: 270px;\n }\n }\n .sm\\:max-w-\\[500px\\] {\n @media (width >= 40rem) {\n max-width: 500px;\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-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 .\\*\\:\\[span\\]\\:last\\:flex {\n :is(& > *) {\n &:is(span) {\n &:last-child {\n display: flex;\n }\n }\n }\n }\n .\\*\\:\\[span\\]\\:last\\:items-center {\n :is(& > *) {\n &:is(span) {\n &:last-child {\n align-items: center;\n }\n }\n }\n }\n .\\*\\:\\[span\\]\\:last\\:gap-2 {\n :is(& > *) {\n &:is(span) {\n &:last-child {\n gap: calc(var(--spacing) * 2);\n }\n }\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 .\\[\\&\\>span\\]\\:line-clamp-1 {\n &>span {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n }\n }\n}\n:root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --destructive-foreground: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n --radius: 0.625rem;\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n}\n@layer base {\n * {\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) !important;\n letter-spacing: var(--tracking-tight) !important;\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-space-x-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@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-space-x-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 }\n }\n}\n";
10692
+
10693
+ const IframeWrapper = React.memo(({ children, iframeRef, wrapperRef }) => {
10694
+ const styleRef = React.useRef(null);
10695
+ const rootRef = React.useRef(null);
10696
+ // inject your global CSS into the iframe’s <head>
10697
+ const injectStyles = React.useCallback((doc) => {
10698
+ if (styleRef.current)
10699
+ styleRef.current.remove();
10700
+ const styleEl = doc.createElement("style");
10701
+ styleEl.textContent = css_248z;
10702
+ doc.head.appendChild(styleEl);
10703
+ styleRef.current = styleEl;
10704
+ }, []);
10705
+ const handleLoad = React.useCallback(() => {
10706
+ const iframe = iframeRef.current;
10707
+ const doc = iframe.contentDocument;
10708
+ injectStyles(doc);
10709
+ // create a container for React inside the iframe
10710
+ let mountPoint = doc.getElementById("__react_mount__");
10711
+ if (!mountPoint) {
10712
+ mountPoint = doc.createElement("div");
10713
+ mountPoint.id = "__react_mount__";
10714
+ doc.body.appendChild(mountPoint);
10715
+ }
10716
+ // createRoot *once*
10717
+ if (!rootRef.current) {
10718
+ rootRef.current = ReactDOM.createRoot(mountPoint);
10719
+ }
10720
+ // render your tree inside the iframe’s React root,
10721
+ // wrapped in a MotionConfig so MotionOne binds to the iframe’s window/document
10722
+ rootRef.current.render(React.createElement(MotionConfig, null, children));
10723
+ }, [children, iframeRef, injectStyles]);
10724
+ React.useLayoutEffect(() => {
10725
+ var _a;
10726
+ const iframe = iframeRef.current;
10727
+ if (!iframe)
10728
+ return;
10729
+ iframe.addEventListener("load", handleLoad);
10730
+ // If the iframe is already loaded (cache, SSR, etc.)
10731
+ if (((_a = iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.readyState) === "complete") {
10732
+ handleLoad();
10733
+ }
10734
+ return () => {
10735
+ var _a, _b;
10736
+ iframe.removeEventListener("load", handleLoad);
10737
+ // unmount React on teardown
10738
+ (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.unmount();
10739
+ (_b = styleRef.current) === null || _b === void 0 ? void 0 : _b.remove();
10740
+ };
10741
+ }, [iframeRef, handleLoad]);
10742
+ return (React.createElement("div", { ref: wrapperRef, className: "w-full max-w-[1200px] min-h-screen mx-auto overflow-y-auto overflow-x-hidden relative" },
10743
+ React.createElement("iframe", { ref: iframeRef, className: "w-full min-h-screen border-0", sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-top-navigation" })));
10744
+ });
10745
+ IframeWrapper.displayName = "IframeWrapper";
10746
+
10747
+ 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__namespace.createContext(void 0),U={setTheme:e=>{},themes:[]},z=()=>{var e;return (e=React__namespace.useContext(x))!=null?e:U};React__namespace.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__namespace.createElement("script",{...w,suppressHydrationWarning:true,nonce:typeof window=="undefined"?d:"",dangerouslySetInnerHTML:{__html:`(${M.toString()})(${p})`}})});
10748
+
10749
+ const Toaster = (_a) => {
10750
+ var props = __rest(_a, []);
10751
+ const { theme = "system" } = z();
10752
+ return (React.createElement(sonner.Toaster, Object.assign({ theme: theme, className: "toaster group", style: {
10753
+ "--normal-bg": "var(--popover)",
10754
+ "--normal-text": "var(--popover-foreground)",
10755
+ "--normal-border": "var(--border)",
10756
+ } }, props)));
10757
+ };
10758
+
10759
+ const appearance = {
10760
+ variables: {
10761
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Geist", "Gill Sans", sans-serif'}};
10762
+
10763
+ function Appearance({ appearance, fonts, iframeRef, }) {
10764
+ React.useEffect(() => {
10765
+ var _a;
10766
+ if (!(iframeRef === null || iframeRef === void 0 ? void 0 : iframeRef.current))
10767
+ return;
10768
+ try {
10769
+ const variables = getVariablesFromAppearanceConfig(appearance);
10770
+ const iframeDoc = iframeRef.current.contentDocument ||
10771
+ ((_a = iframeRef.current.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
10772
+ if (!iframeDoc) {
10773
+ console.warn("Unable to access iframe document");
10774
+ return;
10775
+ }
10776
+ if (variables) {
10777
+ Object.entries(variables).forEach(([key, value]) => {
10778
+ iframeDoc.documentElement.style.setProperty(key, value);
10779
+ });
10780
+ }
10781
+ // Load fonts if provided
10782
+ if (fonts) {
10783
+ fonts.forEach((font) => {
10784
+ try {
10785
+ if ("cssSrc" in font) {
10786
+ // Handle CSS font source
10787
+ const link = iframeDoc.createElement("link");
10788
+ link.rel = "stylesheet";
10789
+ link.href = font.cssSrc;
10790
+ iframeDoc.head.appendChild(link);
10791
+ }
10792
+ else if ("family" in font) {
10793
+ // Handle custom font source
10794
+ const style = iframeDoc.createElement("style");
10795
+ style.textContent = `
10796
+ @font-face {
10797
+ font-family: '${font.family}';
10798
+ src: ${font.src};
10799
+ font-weight: ${font.weight || "normal"};
10800
+ font-style: ${font.style || "normal"};
10801
+ }
10802
+ `;
10803
+ iframeDoc.head.appendChild(style);
10804
+ }
10805
+ }
10806
+ catch (error) {
10807
+ console.error("Error loading font:", error);
10808
+ }
10809
+ });
10810
+ }
10811
+ }
10812
+ catch (error) {
10813
+ console.error("Error applying appearance styles:", error);
10814
+ }
10815
+ }, [appearance, fonts, iframeRef]);
10816
+ return null;
10817
+ }
10818
+ const getVariablesFromAppearanceConfig = (appearance) => {
10819
+ var _a;
10820
+ const colors = getColorVariablesFromAppearanceConfig(appearance);
10821
+ const definedAppearance = Object.assign(Object.assign({}, colors), { "--font-sans": (_a = appearance === null || appearance === void 0 ? void 0 : appearance.font) !== null && _a !== void 0 ? _a : '-apple-system, BlinkMacSystemFont, "Helvetica", "Gill Sans", "Inter", sans-serif', "--radius": (appearance === null || appearance === void 0 ? void 0 : appearance.borderRadius)
10822
+ ? `${appearance.borderRadius}rem`
10823
+ : "0.625rem" });
10824
+ return definedAppearance;
10825
+ };
10826
+ const getColorVariablesFromAppearanceConfig = (appearance) => {
10827
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27;
10828
+ // Determine if we're using dark theme
10829
+ const isDark = (appearance === null || appearance === void 0 ? void 0 : appearance.theme) === "dark";
10830
+ // Define fallback colors based on theme
10831
+ const fallbackColors = {
10832
+ background: isDark ? "oklch(0.145 0 0)" : "oklch(1 0 0)",
10833
+ foreground: isDark ? "oklch(0.985 0 0)" : "oklch(0.145 0 0)",
10834
+ card: isDark ? "oklch(0.145 0 0)" : "oklch(1 0 0)",
10835
+ cardForeground: isDark ? "oklch(0.985 0 0)" : "oklch(0.145 0 0)",
10836
+ primary: isDark ? "oklch(0.985 0 0)" : "oklch(0.205 0 0)",
10837
+ primaryForeground: isDark ? "oklch(0.205 0 0)" : "oklch(0.985 0 0)",
10838
+ secondary: isDark ? "oklch(0.269 0 0)" : "oklch(0.97 0 0)",
10839
+ secondaryForeground: isDark ? "oklch(0.985 0 0)" : "oklch(0.205 0 0)",
10840
+ muted: isDark ? "oklch(0.269 0 0)" : "oklch(0.97 0 0)",
10841
+ mutedForeground: isDark ? "oklch(0.708 0 0)" : "oklch(0.556 0 0)",
10842
+ accent: isDark ? "oklch(0.269 0 0)" : "oklch(0.97 0 0)",
10843
+ accentForeground: isDark ? "oklch(0.985 0 0)" : "oklch(0.205 0 0)",
10844
+ destructive: isDark
10845
+ ? "oklch(0.396 0.141 25.723)"
10846
+ : "oklch(0.577 0.245 27.325)",
10847
+ destructiveForeground: isDark
10848
+ ? "oklch(0.637 0.237 25.331)"
10849
+ : "oklch(0.577 0.245 27.325)",
10850
+ border: isDark ? "oklch(0.269 0 0)" : "oklch(0.922 0 0)",
10851
+ ring: isDark ? "oklch(0.439 0 0)" : "oklch(0.708 0 0)",
10852
+ sidebar: isDark ? "oklch(0.205 0 0)" : "oklch(0.985 0 0)",
10853
+ sidebarForeground: isDark ? "oklch(0.985 0 0)" : "oklch(0.145 0 0)",
10854
+ sidebarPrimary: isDark ? "oklch(0.488 0.243 264.376)" : "oklch(0.205 0 0)",
10855
+ sidebarPrimaryForeground: isDark ? "oklch(0.985 0 0)" : "oklch(0.985 0 0)",
10856
+ };
10857
+ const colors = {
10858
+ "--background": (_b = (_a = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : fallbackColors.background,
10859
+ "--foreground": (_d = (_c = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _c === void 0 ? void 0 : _c.foreground) !== null && _d !== void 0 ? _d : fallbackColors.foreground,
10860
+ // Card (reusing background/foreground)
10861
+ "--card": (_f = (_e = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _e === void 0 ? void 0 : _e.background) !== null && _f !== void 0 ? _f : fallbackColors.card,
10862
+ "--card-foreground": (_h = (_g = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _g === void 0 ? void 0 : _g.foreground) !== null && _h !== void 0 ? _h : fallbackColors.cardForeground,
10863
+ // Popover (reusing background/foreground)
10864
+ "--popover": (_k = (_j = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _j === void 0 ? void 0 : _j.background) !== null && _k !== void 0 ? _k : fallbackColors.background,
10865
+ "--popover-foreground": (_m = (_l = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _l === void 0 ? void 0 : _l.foreground) !== null && _m !== void 0 ? _m : fallbackColors.foreground,
10866
+ // Primary
10867
+ "--primary": (_p = (_o = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _o === void 0 ? void 0 : _o.primary) !== null && _p !== void 0 ? _p : fallbackColors.primary,
10868
+ "--primary-foreground": (_r = (_q = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _q === void 0 ? void 0 : _q.primaryForeground) !== null && _r !== void 0 ? _r : fallbackColors.primaryForeground,
10869
+ // Secondary
10870
+ "--secondary": (_t = (_s = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _s === void 0 ? void 0 : _s.secondary) !== null && _t !== void 0 ? _t : fallbackColors.secondary,
10871
+ "--secondary-foreground": (_v = (_u = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _u === void 0 ? void 0 : _u.secondaryForeground) !== null && _v !== void 0 ? _v : fallbackColors.secondaryForeground,
10872
+ // Muted
10873
+ "--muted": (_x = (_w = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _w === void 0 ? void 0 : _w.muted) !== null && _x !== void 0 ? _x : fallbackColors.muted,
10874
+ "--muted-foreground": (_z = (_y = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _y === void 0 ? void 0 : _y.mutedForeground) !== null && _z !== void 0 ? _z : fallbackColors.mutedForeground,
10875
+ // Accent
10876
+ "--accent": (_1 = (_0 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _0 === void 0 ? void 0 : _0.accent) !== null && _1 !== void 0 ? _1 : fallbackColors.accent,
10877
+ "--accent-foreground": (_3 = (_2 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _2 === void 0 ? void 0 : _2.accentForeground) !== null && _3 !== void 0 ? _3 : fallbackColors.accentForeground,
10878
+ // Destructive
10879
+ "--destructive": (_5 = (_4 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _4 === void 0 ? void 0 : _4.destructive) !== null && _5 !== void 0 ? _5 : fallbackColors.destructive,
10880
+ "--destructive-foreground": fallbackColors.destructiveForeground,
10881
+ // Border and Input
10882
+ "--border": (_7 = (_6 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _6 === void 0 ? void 0 : _6.border) !== null && _7 !== void 0 ? _7 : fallbackColors.border,
10883
+ "--input": (_9 = (_8 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _8 === void 0 ? void 0 : _8.border) !== null && _9 !== void 0 ? _9 : fallbackColors.border,
10884
+ "--ring": (_11 = (_10 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _10 === void 0 ? void 0 : _10.ring) !== null && _11 !== void 0 ? _11 : fallbackColors.ring,
10885
+ // Chart colors (keeping original values)
10886
+ "--chart-1": isDark
10887
+ ? "oklch(0.488 0.243 264.376)"
10888
+ : "oklch(0.646 0.222 41.116)",
10889
+ "--chart-2": isDark
10890
+ ? "oklch(0.696 0.17 162.48)"
10891
+ : "oklch(0.6 0.118 184.704)",
10892
+ "--chart-3": isDark
10893
+ ? "oklch(0.769 0.188 70.08)"
10894
+ : "oklch(0.398 0.07 227.392)",
10895
+ "--chart-4": isDark
10896
+ ? "oklch(0.627 0.265 303.9)"
10897
+ : "oklch(0.828 0.189 84.429)",
10898
+ "--chart-5": isDark
10899
+ ? "oklch(0.645 0.246 16.439)"
10900
+ : "oklch(0.769 0.188 70.08)",
10901
+ // Sidebar
10902
+ "--sidebar": (_13 = (_12 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _12 === void 0 ? void 0 : _12.background) !== null && _13 !== void 0 ? _13 : fallbackColors.sidebar,
10903
+ "--sidebar-foreground": (_15 = (_14 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _14 === void 0 ? void 0 : _14.foreground) !== null && _15 !== void 0 ? _15 : fallbackColors.sidebarForeground,
10904
+ "--sidebar-primary": (_17 = (_16 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _16 === void 0 ? void 0 : _16.primary) !== null && _17 !== void 0 ? _17 : fallbackColors.sidebarPrimary,
10905
+ "--sidebar-primary-foreground": (_19 = (_18 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _18 === void 0 ? void 0 : _18.primaryForeground) !== null && _19 !== void 0 ? _19 : fallbackColors.sidebarPrimaryForeground,
10906
+ "--sidebar-accent": (_21 = (_20 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _20 === void 0 ? void 0 : _20.accent) !== null && _21 !== void 0 ? _21 : fallbackColors.accent,
10907
+ "--sidebar-accent-foreground": (_23 = (_22 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _22 === void 0 ? void 0 : _22.accentForeground) !== null && _23 !== void 0 ? _23 : fallbackColors.accentForeground,
10908
+ "--sidebar-border": (_25 = (_24 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _24 === void 0 ? void 0 : _24.border) !== null && _25 !== void 0 ? _25 : fallbackColors.border,
10909
+ "--sidebar-ring": (_27 = (_26 = appearance === null || appearance === void 0 ? void 0 : appearance.colors) === null || _26 === void 0 ? void 0 : _26.ring) !== null && _27 !== void 0 ? _27 : fallbackColors.ring,
10910
+ };
10911
+ return colors;
10912
+ };
10913
+ const convertCheckoutAppearanceToStripeAppearance = (appearance$1, fonts) => {
10914
+ const currentVariables = getVariablesFromAppearanceConfig(appearance$1);
10915
+ const newAppearance = {
10916
+ theme: "flat",
10917
+ rules: {
10918
+ ".Input": {
10919
+ padding: "12px",
10920
+ border: `1px solid ${currentVariables["--border"]}`,
10921
+ backgroundColor: currentVariables["--background"],
10922
+ fontSize: "14px",
10923
+ outline: "none",
10924
+ },
10925
+ ".Input:focus": {
10926
+ backgroundColor: currentVariables["--secondary"],
10927
+ },
10928
+ ".Input::placeholder": {
10929
+ fontSize: "14px",
10930
+ color: currentVariables["--muted-foreground"],
10931
+ },
10932
+ ".Label": {
10933
+ marginBottom: "8px",
10934
+ fontSize: "14px",
10935
+ fontWeight: "500",
10936
+ },
10937
+ ".Input:disabled, .Input--invalid:disabled": {
10938
+ cursor: "not-allowed",
10939
+ },
10940
+ // ".Block": {
10941
+ // backgroundColor: "#000000",
10942
+ // boxShadow: "none",
10943
+ // padding: "12px",
10944
+ // },
10945
+ ".Tab": {
10946
+ padding: "10px 12px 8px 12px",
10947
+ border: `1px solid ${currentVariables["--border"]}`,
10948
+ backgroundColor: currentVariables["--background"],
10949
+ },
10950
+ ".Tab:hover": {
10951
+ backgroundColor: currentVariables["--secondary"],
10952
+ },
10953
+ ".Tab--selected, .Tab--selected:focus, .Tab--selected:hover": {
10954
+ border: `1px solid ${currentVariables["--border"]}`,
10955
+ backgroundColor: currentVariables["--secondary"],
10956
+ color: currentVariables["--foreground"],
10957
+ },
10958
+ },
10959
+ variables: {
10960
+ focusOutline: "none",
10961
+ focusBoxShadow: "none",
10962
+ fontFamily: fonts
10963
+ ? currentVariables["--font-sans"]
10964
+ : appearance.variables.fontFamily,
10965
+ borderRadius: currentVariables["--radius"],
10966
+ // colorSuccess: currentVariables["--success"],
10967
+ // colorWarning: currentVariables["--warning"],
10968
+ colorDanger: currentVariables["--destructive"],
10969
+ colorBackground: currentVariables["--background"],
10970
+ colorPrimary: currentVariables["--primary"],
10971
+ colorText: currentVariables["--foreground"],
10972
+ colorTextSecondary: currentVariables["--secondary-foreground"],
10973
+ colorTextPlaceholder: currentVariables["--muted-foreground"],
10974
+ },
10975
+ };
10976
+ return newAppearance;
10977
+ };
10978
+
10979
+ const storeHelpers = sdk.createStoreHelpers();
10980
+
10973
10981
  const phoneRegex = new RegExp(/^([+]?[\s0-9]+)?(\d{3}|[(]?[0-9]+[)])?([-]?[\s]?[0-9])+$/);
10974
10982
  // Shipping address schema
10975
10983
  const customerSchema = zod.z.object({
@@ -11432,7 +11440,7 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, wrapperRe
11432
11440
  return null;
11433
11441
  return (React.createElement(React.Fragment, null,
11434
11442
  React.createElement("div", { ref: containerRef, className: "w-full h-[306.08px] min-[480px]:h-[228.56px]" }),
11435
- ReactDOM.createPortal(React.createElement("div", { style: {
11443
+ ReactDOM$1.createPortal(React.createElement("div", { style: {
11436
11444
  display: "block",
11437
11445
  zIndex: 20,
11438
11446
  position: "absolute",