@betterstore/react 0.6.4 → 0.6.6

package/dist/components/checkout-embed/appearance.d.ts

@@ -26,10 +26,9 @@ export type AppearanceConfig = {
         popoverForeground?: string;
     };
 };
-export default function Appearance({ appearance, fonts, shadowRef, }: {
+export default function Appearance({ appearance, fonts, }: {
     appearance?: AppearanceConfig;
     fonts?: Fonts;
-    shadowRef?: React.RefObject<HTMLDivElement | null>;
 }): null;
 export declare const convertCheckoutAppearanceToStripeAppearance: (appearance?: AppearanceConfig, fonts?: Fonts) => StripeAppearance;
 //# sourceMappingURL=appearance.d.ts.map

package/dist/components/checkout-embed/appearance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../../src/components/checkout-embed/appearance.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,gBAAgB,EAC9B,qBAAqB,EACtB,MAAM,mBAAmB,CAAC;AAI3B,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AACtC,MAAM,MAAM,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE;IACD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACpD,QAqDA;AA0GD,eAAO,MAAM,2CAA2C,GACtD,aAAa,gBAAgB,EAC7B,QAAQ,KAAK,KACZ,gBAqEF,CAAC"}
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../../src/components/checkout-embed/appearance.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,gBAAgB,EAC9B,qBAAqB,EACtB,MAAM,mBAAmB,CAAC;AAI3B,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AACtC,MAAM,MAAM,KAAK,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE;QACP,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACH,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,UAAU,EACV,KAAK,GACN,EAAE;IACD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,QA+CA;AA0GD,eAAO,MAAM,2CAA2C,GACtD,aAAa,gBAAgB,EAC7B,QAAQ,KAAK,KACZ,gBAqEF,CAAC"}

package/dist/components/checkout-embed/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkout-embed/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,MAAM,EAAE,MAAM,cAAc,CAAC;AAGrE,OAAO,KAA4C,MAAM,OAAO,CAAC;AAGjE,OAAmB,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAOnE,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAC;QACrB,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,gBAAgB,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAcD,iBAAS,sBAAsB,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,kBAAkB,2CAuWzE;AAED,QAAA,MAAM,aAAa,0DAA+B,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkout-embed/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,MAAM,EAAE,MAAM,cAAc,CAAC;AAGrE,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAmB,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAOnE,UAAU,kBAAkB;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE;QACN,YAAY,EAAE,MAAM,CAAC;QACrB,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,CAAC,EAAE,gBAAgB,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAcD,iBAAS,sBAAsB,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,EAAE,kBAAkB,2CAgWzE;AAED,QAAA,MAAM,aAAa,0DAA+B,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/payment-element/checkout-form.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import "./betterstore-checkout-embed-payment-element";
 declare const _default: React.MemoExoticComponent<({ onSuccess, onError, children, setSubmitting, }: {
     onSuccess?: () => void;
     onError?: () => void;

package/dist/components/payment-element/checkout-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkout-form.d.ts","sourceRoot":"","sources":["../../../src/components/payment-element/checkout-form.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,8CAA8C,CAAC;qGAQnD;IACD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD;AAmDD,wBAAkC"}
+{"version":3,"file":"checkout-form.d.ts","sourceRoot":"","sources":["../../../src/components/payment-element/checkout-form.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAyB,MAAM,OAAO,CAAC;qGAQ3C;IACD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD;AA+CD,wBAAkC"}

package/dist/dev/dev.d.ts

@@ -1,2 +1,2 @@
-export {};
+import "../globals.css";
 //# sourceMappingURL=dev.d.ts.map

package/dist/dev/dev.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/dev/dev.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../src/dev/dev.tsx"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,CAAC"}

package/dist/index.cjs.js

@@ -12436,8 +12436,6 @@ function createStoreClient(config) {
   return new client_default(config?.proxy);
 }
 
-var css_248z = "/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-lg: 32rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-widest: 0.1em;\n    --radius-xs: 0.125rem;\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .top-\\[50\\%\\] {\n    top: 50%;\n  }\n  .top-full {\n    top: 100%;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2);\n  }\n  .left-\\[50\\%\\] {\n    left: 50%;\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .order-3 {\n    order: 3;\n  }\n  .order-4 {\n    order: 4;\n  }\n  .order-5 {\n    order: 5;\n  }\n  .order-6 {\n    order: 6;\n  }\n  .order-7 {\n    order: 7;\n  }\n  .order-first {\n    order: -9999;\n  }\n  .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  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1);\n  }\n  .my-2 {\n    margin-block: calc(var(--spacing) * 2);\n  }\n  .-mt-1 {\n    margin-top: calc(var(--spacing) * -1);\n  }\n  .-mt-2 {\n    margin-top: calc(var(--spacing) * -2);\n  }\n  .-mt-4 {\n    margin-top: calc(var(--spacing) * -4);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .-mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * -0.5);\n  }\n  .-mb-2 {\n    margin-bottom: calc(var(--spacing) * -2);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2);\n    height: calc(var(--spacing) * 2);\n  }\n  .size-3 {\n    width: calc(var(--spacing) * 3);\n    height: calc(var(--spacing) * 3);\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n    height: calc(var(--spacing) * 3.5);\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-5 {\n    width: calc(var(--spacing) * 5);\n    height: calc(var(--spacing) * 5);\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9);\n    height: calc(var(--spacing) * 9);\n  }\n  .size-16 {\n    width: calc(var(--spacing) * 16);\n    height: calc(var(--spacing) * 16);\n  }\n  .h-0 {\n    height: calc(var(--spacing) * 0);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-\\[2px\\] {\n    height: 2px;\n  }\n  .h-\\[18px\\] {\n    height: 18px;\n  }\n  .h-\\[20px\\] {\n    height: 20px;\n  }\n  .h-\\[44px\\] {\n    height: 44px;\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-auto\\! {\n    height: auto !important;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-max {\n    height: max-content;\n  }\n  .h-px {\n    height: 1px;\n  }\n  .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n    max-height: var(--radix-dropdown-menu-content-available-height);\n  }\n  .max-h-0 {\n    max-height: calc(var(--spacing) * 0);\n  }\n  .max-h-60 {\n    max-height: calc(var(--spacing) * 60);\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px;\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28);\n  }\n  .w-32 {\n    width: calc(var(--spacing) * 32);\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40);\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-0 {\n    max-width: calc(var(--spacing) * 0);\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n  }\n  .origin-\\(--radix-popover-content-transform-origin\\) {\n    transform-origin: var(--radix-popover-content-transform-origin);\n  }\n  .-translate-x-0 {\n    --tw-translate-x: calc(var(--spacing) * -0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-x-3 {\n    --tw-translate-x: calc(var(--spacing) * -3);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-2 {\n    --tw-translate-x: calc(var(--spacing) * 2);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[-50\\%\\] {\n    --tw-translate-x: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-\\[-50\\%\\] {\n    --tw-translate-y: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .scroll-py-1 {\n    scroll-padding-block: calc(var(--spacing) * 1);\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5);\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6);\n  }\n  .gap-\\[10px\\] {\n    gap: 10px;\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius);\n  }\n  .rounded-md {\n    border-radius: calc(var(--radius) - 2px);\n  }\n  .rounded-sm {\n    border-radius: calc(var(--radius) - 4px);\n  }\n  .rounded-xs {\n    border-radius: var(--radius-xs);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-border {\n    border-color: var(--border);\n  }\n  .border-input {\n    border-color: var(--input);\n  }\n  .border-primary {\n    border-color: var(--primary);\n  }\n  .bg-accent {\n    background-color: var(--accent);\n  }\n  .bg-background {\n    background-color: var(--background);\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .bg-border {\n    background-color: var(--border);\n  }\n  .bg-destructive {\n    background-color: var(--destructive);\n  }\n  .bg-muted {\n    background-color: var(--muted);\n  }\n  .bg-popover {\n    background-color: var(--popover);\n  }\n  .bg-primary {\n    background-color: var(--primary);\n  }\n  .bg-secondary {\n    background-color: var(--secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .fill-primary {\n    fill: var(--primary);\n  }\n  .object-cover {\n    object-fit: cover;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pb-1 {\n    padding-bottom: calc(var(--spacing) * 1);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pb-40 {\n    padding-bottom: calc(var(--spacing) * 40);\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-right {\n    text-align: right;\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[13px\\] {\n    font-size: 13px;\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-tight {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest);\n    letter-spacing: var(--tracking-widest);\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-background {\n    color: var(--background);\n  }\n  .text-current {\n    color: currentcolor;\n  }\n  .text-destructive {\n    color: var(--destructive);\n  }\n  .text-destructive-foreground {\n    color: var(--destructive-foreground);\n  }\n  .text-foreground {\n    color: var(--foreground);\n  }\n  .text-muted-foreground {\n    color: var(--muted-foreground);\n  }\n  .text-popover-foreground {\n    color: var(--popover-foreground);\n  }\n  .text-primary {\n    color: var(--primary);\n  }\n  .text-primary-foreground {\n    color: var(--primary-foreground);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-ring {\n    color: var(--ring);\n  }\n  .text-secondary-foreground {\n    color: var(--secondary-foreground);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-70 {\n    opacity: 70%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-offset-background {\n    --tw-ring-offset-color: var(--background);\n  }\n  .outline-hidden {\n    --tw-outline-style: none;\n    outline-style: none;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-none {\n    transition-property: none;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .duration-200 {\n    animation-duration: 200ms;\n  }\n  .ease-in-out {\n    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50%;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50%;\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7);\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style);\n      border-width: 0px;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--foreground);\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::placeholder {\n      color: var(--muted-foreground);\n    }\n  }\n  .after\\:absolute {\n    &::after {\n      content: var(--tw-content);\n      position: absolute;\n    }\n  }\n  .after\\:top-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      top: calc(1/2 * 100%);\n    }\n  }\n  .after\\:right-0 {\n    &::after {\n      content: var(--tw-content);\n      right: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:left-0 {\n    &::after {\n      content: var(--tw-content);\n      left: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:z-0 {\n    &::after {\n      content: var(--tw-content);\n      z-index: 0;\n    }\n  }\n  .after\\:h-px {\n    &::after {\n      content: var(--tw-content);\n      height: 1px;\n    }\n  }\n  .after\\:-translate-y-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .after\\:bg-background {\n    &::after {\n      content: var(--tw-content);\n      background-color: var(--background);\n    }\n  }\n  .after\\:content-\\[\\'\\'\\] {\n    &::after {\n      --tw-content: '';\n      content: var(--tw-content);\n    }\n  }\n  .last\\:border-b-0 {\n    &:last-child {\n      border-bottom-style: var(--tw-border-style);\n      border-bottom-width: 0px;\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--accent);\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--muted);\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--primary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--secondary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--accent-foreground);\n      }\n    }\n  }\n  .hover\\:text-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--foreground);\n      }\n    }\n  }\n  .hover\\:text-muted-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--muted-foreground);\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--accent);\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--accent-foreground);\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-ring {\n    &:focus {\n      --tw-ring-color: var(--ring);\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-hidden {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--ring);\n    }\n  }\n  .focus-visible\\:ring-\\[3px\\] {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus-visible\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: var(--ring);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n      }\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4);\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--destructive);\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &[data-disabled=\"true\"] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:opacity-50 {\n    &[data-disabled=\"true\"] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--destructive-foreground);\n    }\n  }\n  .data-\\[inset\\]\\:pl-8 {\n    &[data-inset] {\n      padding-left: calc(var(--spacing) * 8);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:bg-accent {\n    &[data-selected=\"true\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:text-accent-foreground {\n    &[data-selected=\"true\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem;\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem;\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem;\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem;\n    }\n  }\n  .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n    :is(& *) {\n      &[data-slot=\"command-input-wrapper\"] {\n        height: calc(var(--spacing) * 12);\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--primary-foreground);\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit;\n      animation-duration: 150ms;\n      --tw-exit-opacity: initial;\n      --tw-exit-scale: initial;\n      --tw-exit-rotate: initial;\n      --tw-exit-translate-x: initial;\n      --tw-exit-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95;\n    }\n  }\n  .data-\\[state\\=open\\]\\:bg-accent {\n    &[data-state=\"open\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-accent-foreground {\n    &[data-state=\"open\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-muted-foreground {\n    &[data-state=\"open\"] {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter;\n      animation-duration: 150ms;\n      --tw-enter-opacity: initial;\n      --tw-enter-scale: initial;\n      --tw-enter-rotate: initial;\n      --tw-enter-translate-x: initial;\n      --tw-enter-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      color: var(--destructive);\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        color: var(--destructive);\n      }\n    }\n  }\n  .max-md\\:cursor-pointer {\n    @media (width < 48rem) {\n      cursor: pointer;\n    }\n  }\n  .max-sm\\:hidden {\n    @media (width < 40rem) {\n      display: none;\n    }\n  }\n  .max-sm\\:h-\\[52px\\] {\n    @media (width < 40rem) {\n      height: 52px;\n    }\n  }\n  .sm\\:static {\n    @media (width >= 40rem) {\n      position: static;\n    }\n  }\n  .sm\\:w-fit {\n    @media (width >= 40rem) {\n      width: fit-content;\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\\:bg-transparent {\n    @media (width >= 40rem) {\n      background-color: transparent;\n    }\n  }\n  .sm\\:px-0 {\n    @media (width >= 40rem) {\n      padding-inline: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:pb-0 {\n    @media (width >= 40rem) {\n      padding-bottom: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left;\n    }\n  }\n  .md\\:order-last {\n    @media (width >= 48rem) {\n      order: 9999;\n    }\n  }\n  .md\\:order-none {\n    @media (width >= 48rem) {\n      order: 0;\n    }\n  }\n  .md\\:col-span-2 {\n    @media (width >= 48rem) {\n      grid-column: span 2 / span 2;\n    }\n  }\n  .md\\:col-span-3 {\n    @media (width >= 48rem) {\n      grid-column: span 3 / span 3;\n    }\n  }\n  .md\\:col-span-4 {\n    @media (width >= 48rem) {\n      grid-column: span 4 / span 4;\n    }\n  }\n  .md\\:block {\n    @media (width >= 48rem) {\n      display: block;\n    }\n  }\n  .md\\:flex {\n    @media (width >= 48rem) {\n      display: flex;\n    }\n  }\n  .md\\:grid {\n    @media (width >= 48rem) {\n      display: grid;\n    }\n  }\n  .md\\:hidden {\n    @media (width >= 48rem) {\n      display: none;\n    }\n  }\n  .md\\:max-w-\\[75\\%\\] {\n    @media (width >= 48rem) {\n      max-width: 75%;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-3 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-7 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(7, minmax(0, 1fr));\n    }\n  }\n  .md\\:gap-0 {\n    @media (width >= 48rem) {\n      gap: calc(var(--spacing) * 0);\n    }\n  }\n  .md\\:px-8 {\n    @media (width >= 48rem) {\n      padding-inline: calc(var(--spacing) * 8);\n    }\n  }\n  .md\\:py-12 {\n    @media (width >= 48rem) {\n      padding-block: calc(var(--spacing) * 12);\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-visible {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:aria-invalid\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &[aria-invalid=\"true\"] {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &[data-variant=\"destructive\"] {\n        &:focus {\n          background-color: var(--destructive);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n    & [cmdk-group-heading] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n    & [cmdk-group-heading] {\n      padding-block: calc(var(--spacing) * 1.5);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n    & [cmdk-group-heading] {\n      font-size: var(--text-xs);\n      line-height: var(--tw-leading, var(--text-xs--line-height));\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n    & [cmdk-group-heading] {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n    & [cmdk-group-heading] {\n      color: var(--muted-foreground);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n    & [cmdk-group] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 {\n    & [cmdk-group]:not([hidden]) ~[cmdk-group] {\n      padding-top: calc(var(--spacing) * 0);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n    & [cmdk-input-wrapper] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n    & [cmdk-input-wrapper] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n    & [cmdk-input] {\n      height: calc(var(--spacing) * 12);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n    & [cmdk-item] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n    & [cmdk-item] {\n      padding-block: calc(var(--spacing) * 3);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n    & [cmdk-item] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n    & [cmdk-item] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4);\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n    &[data-variant=\"destructive\"] {\n      :is(& > *) {\n        &:is(svg) {\n          color: var(--destructive) !important;\n        }\n      }\n    }\n  }\n}\n@layer base {\n  ::selection {\n    background-color: var(--primary);\n    color: var(--primary-foreground);\n  }\n  input:-webkit-autofill,\n  input:-webkit-autofill:hover,\n  input:-webkit-autofill:focus,\n  input:-webkit-autofill:active {\n    -webkit-box-shadow: 0 0 0 30px var(--muted) inset !important;\n    -webkit-text-fill-color: var(--foreground) !important;\n  }\n  input:-moz-autofill,\n  input:autofill {\n    background-color: var(--muted);\n    color: var(--foreground);\n  }\n  * {\n    --tw-border-style: solid;\n    border-style: solid;\n    border-color: var(--border);\n    outline-color: var(--ring);\n    @supports (color: color-mix(in lab, red, red)) {\n      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n    }\n  }\n  .checkout-embed {\n    background-color: var(--background);\n    font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    color: var(--foreground);\n  }\n  h2 {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  p {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n}\n@layer utilities {\n  .scrollbar-hidden {\n    scrollbar-width: none;\n  }\n  .scrollbar-hidden::-webkit-scrollbar {\n    display: none;\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
-
 var M$1=(e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n);}),R(n);}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n);}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y);}catch(n){}};var x=React__namespace.createContext(void 0),U$1={setTheme:e=>{},themes:[]},z=()=>{var e;return (e=React__namespace.useContext(x))!=null?e:U$1};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$1.toString()})(${p})`}})});
 
 function __insertCSS(code) {
@@ -13582,19 +13580,6 @@ const Toaster = (_a) => {
         } }, props)));
 };
 
-const ShadowWrapper = React.memo(({ children, shadowRef }) => {
-    const [shadowRoot, setShadowRoot] = React.useState(null);
-    React.useEffect(() => {
-        if (shadowRef.current && !shadowRoot) {
-            const shadow = shadowRef.current.attachShadow({ mode: "open" });
-            setShadowRoot(shadow);
-        }
-    }, [shadowRef, shadowRoot]);
-    return (jsxRuntime.jsx("div", { ref: shadowRef, children: shadowRoot &&
-            ReactDOM.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: css_248z } }), children, jsxRuntime.jsx(Toaster, {})] }), shadowRoot) }));
-});
-ShadowWrapper.displayName = "ShadowWrapper";
-
 const parseNumber = (color, len) => {
 	if (typeof color !== 'number') return;
 
@@ -18110,21 +18095,15 @@ const formatColor = (color) => {
     }
 };
 
-function Appearance({ appearance, fonts, shadowRef, }) {
+function Appearance({ appearance, fonts, }) {
     React.useEffect(() => {
-        var _a;
-        if (!((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.shadowRoot))
+        if (typeof window === "undefined")
             return;
         try {
             const variables = getVariablesFromAppearanceConfig(appearance);
-            const shadowRoot = shadowRef.current.shadowRoot;
-            if (!shadowRoot) {
-                console.warn("Unable to access shadow root");
-                return;
-            }
             if (variables) {
                 Object.entries(variables).forEach(([key, value]) => {
-                    shadowRoot.host.style.setProperty(key, value);
+                    document.body.style.setProperty(key, value);
                 });
             }
             // Load fonts if provided
@@ -18136,7 +18115,7 @@ function Appearance({ appearance, fonts, shadowRef, }) {
                             const link = document.createElement("link");
                             link.rel = "stylesheet";
                             link.href = font.cssSrc;
-                            shadowRoot.appendChild(link);
+                            document.body.appendChild(link);
                         }
                         else if ("family" in font) {
                             // Handle custom font source
@@ -18149,7 +18128,7 @@ function Appearance({ appearance, fonts, shadowRef, }) {
                   font-style: ${font.style || "normal"};
                 }
               `;
-                            shadowRoot.appendChild(style);
+                            document.body.appendChild(style);
                         }
                     }
                     catch (error) {
@@ -18161,7 +18140,7 @@ function Appearance({ appearance, fonts, shadowRef, }) {
         catch (error) {
             console.error("Error applying appearance styles:", error);
         }
-    }, [appearance, fonts, shadowRef]);
+    }, [appearance, fonts]);
     return null;
 }
 const getVariablesFromAppearanceConfig = (appearance) => {
@@ -42358,71 +42337,6 @@ var loadStripe = function loadStripe() {
   });
 };
 
-class BetterStoreCheckoutEmbedPaymentElement extends HTMLElement {
-    constructor() {
-        super();
-        this.updatePosition = () => {
-            const rect = this.getBoundingClientRect();
-            this.portalContainer.style.top = `${rect.top + window.scrollY}px`;
-            this.portalContainer.style.left = `${rect.left + window.scrollX}px`;
-            this.portalContainer.style.width = `${rect.width}px`;
-            this.portalContainer.style.height = `${rect.height}px`;
-        };
-        this.updateStripeElementHeight = () => {
-            const stripeElement = this.portalContainer.querySelector(".StripeElement");
-            if (stripeElement) {
-                const { height } = stripeElement.getBoundingClientRect();
-                this.wrapper.style.height = `${height}px`;
-            }
-        };
-        this.observeStripeElement = () => {
-            // Wait a bit for the Stripe element to be rendered
-            setTimeout(() => {
-                const stripeElement = this.portalContainer.querySelector(".StripeElement");
-                if (stripeElement) {
-                    this.resizeObserver.observe(stripeElement);
-                    this.updateStripeElementHeight(); // Initial height update
-                }
-            }, 100);
-        };
-        this.shadow = this.attachShadow({ mode: "open" });
-        // Render a <slot> or placeholder into the Shadow DOM
-        this.wrapper = document.createElement("div");
-        this.wrapper.style.width = "100%";
-        this.wrapper.style.minHeight = "220px";
-        this.wrapper.innerHTML = `<slot></slot>`;
-        this.shadow.appendChild(this.wrapper);
-        // Create or find a container outside Shadow DOM
-        this.portalContainer = document.createElement("div");
-        this.portalContainer.style.position = "absolute"; // or fixed, up to you
-        document.body.appendChild(this.portalContainer); // render into light DOM
-        // Initialize ResizeObserver to watch for Stripe element height changes
-        this.resizeObserver = new ResizeObserver(() => {
-            this.updateStripeElementHeight();
-        });
-    }
-    connectedCallback() {
-        // Move children to portalContainer (light DOM)
-        const children = Array.from(this.children);
-        children.forEach((child) => {
-            this.portalContainer.appendChild(child);
-        });
-        this.updatePosition();
-        window.addEventListener("resize", this.updatePosition);
-        window.addEventListener("scroll", this.updatePosition, true);
-        // Start observing the Stripe element for height changes
-        this.observeStripeElement();
-    }
-    disconnectedCallback() {
-        // Clean up
-        this.portalContainer.remove();
-        window.removeEventListener("resize", this.updatePosition);
-        window.removeEventListener("scroll", this.updatePosition, true);
-        this.resizeObserver.disconnect();
-    }
-}
-customElements.define("betterstore-checkout-embed-payment-element", BetterStoreCheckoutEmbedPaymentElement);
-
 const useCheckout = create((set) => ({
     isSubmitting: false,
     setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
@@ -42457,7 +42371,7 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         }
     });
-    return (jsxRuntime.jsxs("form", { className: "w-full pb-40 sm:pb-0", onSubmit: handleSubmit, children: [jsxRuntime.jsx("betterstore-checkout-embed-payment-element", { children: jsxRuntime.jsx(reactStripe_umdExports.PaymentElement, {}) }), errorMessage && (jsxRuntime.jsx("p", { className: "text-destructive -mb-2 mt-2 text-sm", children: errorMessage })), children] }));
+    return (jsxRuntime.jsxs("form", { className: "w-full pb-40 sm:pb-0", onSubmit: handleSubmit, children: [jsxRuntime.jsx(reactStripe_umdExports.PaymentElement, {}), errorMessage && (jsxRuntime.jsx("p", { className: "text-destructive -mb-2 mt-2 text-sm", children: errorMessage })), children] }));
 };
 var CheckoutForm$2 = React.memo(CheckoutForm$1);
 
@@ -42956,7 +42870,6 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     var _a, _b, _c, _d, _e, _f;
     const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
     const storeClient = React.useMemo(() => createStoreClient({ proxy: clientProxy }), [clientProxy]);
-    const shadowRef = React.useRef(null);
     React.useMemo(() => createI18nInstance(locale), [locale]);
     const { formData, step } = useFormStore();
     const paymentSecretPromiseRef = React.useRef(null);
@@ -43152,7 +43065,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsxRuntime.jsx(ShadowWrapper, { shadowRef: shadowRef, children: jsxRuntime.jsxs("div", { className: "checkout-embed flex h-max flex-col gap-6 py-4 md:grid md:grid-cols-7 md:gap-0 md:py-12", children: [jsxRuntime.jsx(Appearance, { appearance: appearance, fonts: config.fonts, shadowRef: shadowRef }), jsxRuntime.jsx("div", { className: "h-max px-4 md:col-span-4 md:px-8", children: loading ? (jsxRuntime.jsx(CheckoutFormLoading, {})) : (jsxRuntime.jsx(CheckoutForm, { locale: locale, setShippingCost: setTotalShipping, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, publicKey: publicKey, paymentSecret: paymentSecret, paymentComponentKey: paymentComponentKey, clientProxy: clientProxy, latitude: latitude, longitude: longitude, currentAlpha3CountryCode: currentAlpha3CountryCode, shipments: (checkout === null || checkout === void 0 ? void 0 : checkout.shipments) || [] })) }), jsxRuntime.jsxs("div", { className: "order-first h-max px-4 md:order-last md:col-span-3 md:px-8", children: [jsxRuntime.jsx(Toaster, {}), loading ? (jsxRuntime.jsx(CheckoutSummaryLoading, {})) : (jsxRuntime.jsx(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: totalShipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], removeDiscount: removeDiscount }))] })] }) }));
+    return (jsxRuntime.jsxs("div", { className: "flex h-max flex-col gap-6 py-4 md:grid md:grid-cols-7 md:gap-0 md:py-12", children: [jsxRuntime.jsx(Appearance, { appearance: appearance, fonts: config.fonts }), jsxRuntime.jsx("div", { className: "h-max px-4 md:col-span-4 md:px-8", children: loading ? (jsxRuntime.jsx(CheckoutFormLoading, {})) : (jsxRuntime.jsx(CheckoutForm, { locale: locale, setShippingCost: setTotalShipping, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, publicKey: publicKey, paymentSecret: paymentSecret, paymentComponentKey: paymentComponentKey, clientProxy: clientProxy, latitude: latitude, longitude: longitude, currentAlpha3CountryCode: currentAlpha3CountryCode, shipments: (checkout === null || checkout === void 0 ? void 0 : checkout.shipments) || [] })) }), jsxRuntime.jsxs("div", { className: "order-first h-max px-4 md:order-last md:col-span-3 md:px-8", children: [jsxRuntime.jsx(Toaster, {}), loading ? (jsxRuntime.jsx(CheckoutSummaryLoading, {})) : (jsxRuntime.jsx(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: totalShipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], removeDiscount: removeDiscount }))] })] }));
 }
 const CheckoutEmbed = React.memo(CheckoutEmbedComponent);
 

package/dist/index.mjs

@@ -12416,8 +12416,6 @@ function createStoreClient(config) {
   return new client_default(config?.proxy);
 }
 
-var css_248z = "/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-lg: 32rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-widest: 0.1em;\n    --radius-xs: 0.125rem;\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n  .top-\\[50\\%\\] {\n    top: 50%;\n  }\n  .top-full {\n    top: 100%;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2);\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4);\n  }\n  .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2);\n  }\n  .left-\\[50\\%\\] {\n    left: 50%;\n  }\n  .z-0 {\n    z-index: 0;\n  }\n  .z-10 {\n    z-index: 10;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .order-3 {\n    order: 3;\n  }\n  .order-4 {\n    order: 4;\n  }\n  .order-5 {\n    order: 5;\n  }\n  .order-6 {\n    order: 6;\n  }\n  .order-7 {\n    order: 7;\n  }\n  .order-first {\n    order: -9999;\n  }\n  .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  .m-0 {\n    margin: calc(var(--spacing) * 0);\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1);\n  }\n  .my-2 {\n    margin-block: calc(var(--spacing) * 2);\n  }\n  .-mt-1 {\n    margin-top: calc(var(--spacing) * -1);\n  }\n  .-mt-2 {\n    margin-top: calc(var(--spacing) * -2);\n  }\n  .-mt-4 {\n    margin-top: calc(var(--spacing) * -4);\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8);\n  }\n  .-mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * -0.5);\n  }\n  .-mb-2 {\n    margin-bottom: calc(var(--spacing) * -2);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .line-clamp-1 {\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 1;\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2);\n    height: calc(var(--spacing) * 2);\n  }\n  .size-3 {\n    width: calc(var(--spacing) * 3);\n    height: calc(var(--spacing) * 3);\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n    height: calc(var(--spacing) * 3.5);\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-5 {\n    width: calc(var(--spacing) * 5);\n    height: calc(var(--spacing) * 5);\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9);\n    height: calc(var(--spacing) * 9);\n  }\n  .size-16 {\n    width: calc(var(--spacing) * 16);\n    height: calc(var(--spacing) * 16);\n  }\n  .h-0 {\n    height: calc(var(--spacing) * 0);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-\\[2px\\] {\n    height: 2px;\n  }\n  .h-\\[18px\\] {\n    height: 18px;\n  }\n  .h-\\[20px\\] {\n    height: 20px;\n  }\n  .h-\\[44px\\] {\n    height: 44px;\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-auto\\! {\n    height: auto !important;\n  }\n  .h-full {\n    height: 100%;\n  }\n  .h-max {\n    height: max-content;\n  }\n  .h-px {\n    height: 1px;\n  }\n  .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n    max-height: var(--radix-dropdown-menu-content-available-height);\n  }\n  .max-h-0 {\n    max-height: calc(var(--spacing) * 0);\n  }\n  .max-h-60 {\n    max-height: calc(var(--spacing) * 60);\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px;\n  }\n  .min-h-full {\n    min-height: 100%;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28);\n  }\n  .w-32 {\n    width: calc(var(--spacing) * 32);\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40);\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-0 {\n    max-width: calc(var(--spacing) * 0);\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem);\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n  }\n  .origin-\\(--radix-popover-content-transform-origin\\) {\n    transform-origin: var(--radix-popover-content-transform-origin);\n  }\n  .-translate-x-0 {\n    --tw-translate-x: calc(var(--spacing) * -0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-x-3 {\n    --tw-translate-x: calc(var(--spacing) * -3);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-2 {\n    --tw-translate-x: calc(var(--spacing) * 2);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-\\[-50\\%\\] {\n    --tw-translate-x: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-y-\\[-50\\%\\] {\n    --tw-translate-y: -50%;\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .scroll-py-1 {\n    scroll-padding-block: calc(var(--spacing) * 1);\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .justify-end {\n    justify-content: flex-end;\n  }\n  .gap-0 {\n    gap: calc(var(--spacing) * 0);\n  }\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * 0.5);\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5);\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6);\n  }\n  .gap-\\[10px\\] {\n    gap: 10px;\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius);\n  }\n  .rounded-md {\n    border-radius: calc(var(--radius) - 2px);\n  }\n  .rounded-sm {\n    border-radius: calc(var(--radius) - 4px);\n  }\n  .rounded-xs {\n    border-radius: var(--radius-xs);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-border {\n    border-color: var(--border);\n  }\n  .border-input {\n    border-color: var(--input);\n  }\n  .border-primary {\n    border-color: var(--primary);\n  }\n  .bg-accent {\n    background-color: var(--accent);\n  }\n  .bg-background {\n    background-color: var(--background);\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n  .bg-border {\n    background-color: var(--border);\n  }\n  .bg-destructive {\n    background-color: var(--destructive);\n  }\n  .bg-muted {\n    background-color: var(--muted);\n  }\n  .bg-popover {\n    background-color: var(--popover);\n  }\n  .bg-primary {\n    background-color: var(--primary);\n  }\n  .bg-secondary {\n    background-color: var(--secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .fill-current {\n    fill: currentcolor;\n  }\n  .fill-primary {\n    fill: var(--primary);\n  }\n  .object-cover {\n    object-fit: cover;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2);\n  }\n  .pb-1 {\n    padding-bottom: calc(var(--spacing) * 1);\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2);\n  }\n  .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n  .pb-40 {\n    padding-bottom: calc(var(--spacing) * 40);\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8);\n  }\n  .text-center {\n    text-align: center;\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-right {\n    text-align: right;\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[13px\\] {\n    font-size: 13px;\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-tight {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest);\n    letter-spacing: var(--tracking-widest);\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-background {\n    color: var(--background);\n  }\n  .text-current {\n    color: currentcolor;\n  }\n  .text-destructive {\n    color: var(--destructive);\n  }\n  .text-destructive-foreground {\n    color: var(--destructive-foreground);\n  }\n  .text-foreground {\n    color: var(--foreground);\n  }\n  .text-muted-foreground {\n    color: var(--muted-foreground);\n  }\n  .text-popover-foreground {\n    color: var(--popover-foreground);\n  }\n  .text-primary {\n    color: var(--primary);\n  }\n  .text-primary-foreground {\n    color: var(--primary-foreground);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-ring {\n    color: var(--ring);\n  }\n  .text-secondary-foreground {\n    color: var(--secondary-foreground);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .line-through {\n    text-decoration-line: line-through;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .opacity-0 {\n    opacity: 0%;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .opacity-70 {\n    opacity: 70%;\n  }\n  .opacity-100 {\n    opacity: 100%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .ring-offset-background {\n    --tw-ring-offset-color: var(--background);\n  }\n  .outline-hidden {\n    --tw-outline-style: none;\n    outline-style: none;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-none {\n    transition-property: none;\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n  .duration-200 {\n    animation-duration: 200ms;\n  }\n  .ease-in-out {\n    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50%;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50%;\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7);\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style);\n      border-width: 0px;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--foreground);\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::placeholder {\n      color: var(--muted-foreground);\n    }\n  }\n  .after\\:absolute {\n    &::after {\n      content: var(--tw-content);\n      position: absolute;\n    }\n  }\n  .after\\:top-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      top: calc(1/2 * 100%);\n    }\n  }\n  .after\\:right-0 {\n    &::after {\n      content: var(--tw-content);\n      right: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:left-0 {\n    &::after {\n      content: var(--tw-content);\n      left: calc(var(--spacing) * 0);\n    }\n  }\n  .after\\:z-0 {\n    &::after {\n      content: var(--tw-content);\n      z-index: 0;\n    }\n  }\n  .after\\:h-px {\n    &::after {\n      content: var(--tw-content);\n      height: 1px;\n    }\n  }\n  .after\\:-translate-y-1\\/2 {\n    &::after {\n      content: var(--tw-content);\n      --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .after\\:bg-background {\n    &::after {\n      content: var(--tw-content);\n      background-color: var(--background);\n    }\n  }\n  .after\\:content-\\[\\'\\'\\] {\n    &::after {\n      --tw-content: '';\n      content: var(--tw-content);\n    }\n  }\n  .last\\:border-b-0 {\n    &:last-child {\n      border-bottom-style: var(--tw-border-style);\n      border-bottom-width: 0px;\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--accent);\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-muted {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--muted);\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--primary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--secondary);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--accent-foreground);\n      }\n    }\n  }\n  .hover\\:text-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--foreground);\n      }\n    }\n  }\n  .hover\\:text-muted-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--muted-foreground);\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100%;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--accent);\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--accent-foreground);\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-ring {\n    &:focus {\n      --tw-ring-color: var(--ring);\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-hidden {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent;\n        outline-offset: 2px;\n      }\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--ring);\n    }\n  }\n  .focus-visible\\:ring-\\[3px\\] {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus-visible\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: var(--ring);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n      }\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4);\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--destructive);\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: var(--destructive);\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n      }\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &[data-disabled=\"true\"] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:opacity-50 {\n    &[data-disabled=\"true\"] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--destructive-foreground);\n    }\n  }\n  .data-\\[inset\\]\\:pl-8 {\n    &[data-inset] {\n      padding-left: calc(var(--spacing) * 8);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:bg-accent {\n    &[data-selected=\"true\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[selected\\=true\\]\\:text-accent-foreground {\n    &[data-selected=\"true\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem;\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem;\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem;\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem;\n    }\n  }\n  .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n    :is(& *) {\n      &[data-slot=\"command-input-wrapper\"] {\n        height: calc(var(--spacing) * 12);\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--primary-foreground);\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit;\n      animation-duration: 150ms;\n      --tw-exit-opacity: initial;\n      --tw-exit-scale: initial;\n      --tw-exit-rotate: initial;\n      --tw-exit-translate-x: initial;\n      --tw-exit-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95;\n    }\n  }\n  .data-\\[state\\=open\\]\\:bg-accent {\n    &[data-state=\"open\"] {\n      background-color: var(--accent);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-accent-foreground {\n    &[data-state=\"open\"] {\n      color: var(--accent-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-muted-foreground {\n    &[data-state=\"open\"] {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter;\n      animation-duration: 150ms;\n      --tw-enter-opacity: initial;\n      --tw-enter-scale: initial;\n      --tw-enter-rotate: initial;\n      --tw-enter-translate-x: initial;\n      --tw-enter-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      color: var(--destructive);\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        background-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        color: var(--destructive);\n      }\n    }\n  }\n  .max-md\\:cursor-pointer {\n    @media (width < 48rem) {\n      cursor: pointer;\n    }\n  }\n  .max-sm\\:hidden {\n    @media (width < 40rem) {\n      display: none;\n    }\n  }\n  .max-sm\\:h-\\[52px\\] {\n    @media (width < 40rem) {\n      height: 52px;\n    }\n  }\n  .sm\\:static {\n    @media (width >= 40rem) {\n      position: static;\n    }\n  }\n  .sm\\:w-fit {\n    @media (width >= 40rem) {\n      width: fit-content;\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\\:bg-transparent {\n    @media (width >= 40rem) {\n      background-color: transparent;\n    }\n  }\n  .sm\\:px-0 {\n    @media (width >= 40rem) {\n      padding-inline: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:pb-0 {\n    @media (width >= 40rem) {\n      padding-bottom: calc(var(--spacing) * 0);\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left;\n    }\n  }\n  .md\\:order-last {\n    @media (width >= 48rem) {\n      order: 9999;\n    }\n  }\n  .md\\:order-none {\n    @media (width >= 48rem) {\n      order: 0;\n    }\n  }\n  .md\\:col-span-2 {\n    @media (width >= 48rem) {\n      grid-column: span 2 / span 2;\n    }\n  }\n  .md\\:col-span-3 {\n    @media (width >= 48rem) {\n      grid-column: span 3 / span 3;\n    }\n  }\n  .md\\:col-span-4 {\n    @media (width >= 48rem) {\n      grid-column: span 4 / span 4;\n    }\n  }\n  .md\\:block {\n    @media (width >= 48rem) {\n      display: block;\n    }\n  }\n  .md\\:flex {\n    @media (width >= 48rem) {\n      display: flex;\n    }\n  }\n  .md\\:grid {\n    @media (width >= 48rem) {\n      display: grid;\n    }\n  }\n  .md\\:hidden {\n    @media (width >= 48rem) {\n      display: none;\n    }\n  }\n  .md\\:max-w-\\[75\\%\\] {\n    @media (width >= 48rem) {\n      max-width: 75%;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-3 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-7 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(7, minmax(0, 1fr));\n    }\n  }\n  .md\\:gap-0 {\n    @media (width >= 48rem) {\n      gap: calc(var(--spacing) * 0);\n    }\n  }\n  .md\\:px-8 {\n    @media (width >= 48rem) {\n      padding-inline: calc(var(--spacing) * 8);\n    }\n  }\n  .md\\:py-12 {\n    @media (width >= 48rem) {\n      padding-block: calc(var(--spacing) * 12);\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-visible {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:aria-invalid\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &[aria-invalid=\"true\"] {\n        --tw-ring-color: var(--destructive);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n        }\n      }\n    }\n  }\n  .dark\\:data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/20 {\n    @media (prefers-color-scheme: dark) {\n      &[data-variant=\"destructive\"] {\n        &:focus {\n          background-color: var(--destructive);\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n          }\n        }\n      }\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n    & [cmdk-group-heading] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n    & [cmdk-group-heading] {\n      padding-block: calc(var(--spacing) * 1.5);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n    & [cmdk-group-heading] {\n      font-size: var(--text-xs);\n      line-height: var(--tw-leading, var(--text-xs--line-height));\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n    & [cmdk-group-heading] {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n    & [cmdk-group-heading] {\n      color: var(--muted-foreground);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n    & [cmdk-group] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\:not\\(\\[hidden\\]\\)_\\~\\[cmdk-group\\]\\]\\:pt-0 {\n    & [cmdk-group]:not([hidden]) ~[cmdk-group] {\n      padding-top: calc(var(--spacing) * 0);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n    & [cmdk-input-wrapper] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n    & [cmdk-input-wrapper] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n    & [cmdk-input] {\n      height: calc(var(--spacing) * 12);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n    & [cmdk-item] {\n      padding-inline: calc(var(--spacing) * 2);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n    & [cmdk-item] {\n      padding-block: calc(var(--spacing) * 3);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n    & [cmdk-item] svg {\n      height: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n    & [cmdk-item] svg {\n      width: calc(var(--spacing) * 5);\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4);\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n    &[data-variant=\"destructive\"] {\n      :is(& > *) {\n        &:is(svg) {\n          color: var(--destructive) !important;\n        }\n      }\n    }\n  }\n}\n@layer base {\n  ::selection {\n    background-color: var(--primary);\n    color: var(--primary-foreground);\n  }\n  input:-webkit-autofill,\n  input:-webkit-autofill:hover,\n  input:-webkit-autofill:focus,\n  input:-webkit-autofill:active {\n    -webkit-box-shadow: 0 0 0 30px var(--muted) inset !important;\n    -webkit-text-fill-color: var(--foreground) !important;\n  }\n  input:-moz-autofill,\n  input:autofill {\n    background-color: var(--muted);\n    color: var(--foreground);\n  }\n  * {\n    --tw-border-style: solid;\n    border-style: solid;\n    border-color: var(--border);\n    outline-color: var(--ring);\n    @supports (color: color-mix(in lab, red, red)) {\n      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n    }\n  }\n  .checkout-embed {\n    background-color: var(--background);\n    font-family: var(--font-sans), Helvetica, Arial, apple-system, sans-serif;\n    color: var(--foreground);\n  }\n  h2 {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  p {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n}\n@layer utilities {\n  .scrollbar-hidden {\n    scrollbar-width: none;\n  }\n  .scrollbar-hidden::-webkit-scrollbar {\n    display: none;\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-content {\n  syntax: \"*\";\n  initial-value: \"\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-content: \"\";\n    }\n  }\n}\n";
-
 var M$1=(e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n);}),R(n);}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n);}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y);}catch(n){}};var x=React.createContext(void 0),U$1={setTheme:e=>{},themes:[]},z=()=>{var e;return (e=React.useContext(x))!=null?e:U$1};React.memo(({forcedTheme:e,storageKey:i,attribute:s,enableSystem:u,enableColorScheme:m,defaultTheme:a,value:l,themes:h,nonce:d,scriptProps:w})=>{let p=JSON.stringify([s,i,a,e,h,l,u,m]).slice(1,-1);return React.createElement("script",{...w,suppressHydrationWarning:true,nonce:typeof window=="undefined"?d:"",dangerouslySetInnerHTML:{__html:`(${M$1.toString()})(${p})`}})});
 
 function __insertCSS(code) {
@@ -13562,19 +13560,6 @@ const Toaster = (_a) => {
         } }, props)));
 };
 
-const ShadowWrapper = React__default.memo(({ children, shadowRef }) => {
-    const [shadowRoot, setShadowRoot] = useState(null);
-    useEffect(() => {
-        if (shadowRef.current && !shadowRoot) {
-            const shadow = shadowRef.current.attachShadow({ mode: "open" });
-            setShadowRoot(shadow);
-        }
-    }, [shadowRef, shadowRoot]);
-    return (jsx("div", { ref: shadowRef, children: shadowRoot &&
-            ReactDOM__default.createPortal(jsxs(Fragment, { children: [jsx("style", { dangerouslySetInnerHTML: { __html: css_248z } }), children, jsx(Toaster, {})] }), shadowRoot) }));
-});
-ShadowWrapper.displayName = "ShadowWrapper";
-
 const parseNumber = (color, len) => {
 	if (typeof color !== 'number') return;
 
@@ -18090,21 +18075,15 @@ const formatColor = (color) => {
     }
 };
 
-function Appearance({ appearance, fonts, shadowRef, }) {
+function Appearance({ appearance, fonts, }) {
     useEffect(() => {
-        var _a;
-        if (!((_a = shadowRef === null || shadowRef === void 0 ? void 0 : shadowRef.current) === null || _a === void 0 ? void 0 : _a.shadowRoot))
+        if (typeof window === "undefined")
             return;
         try {
             const variables = getVariablesFromAppearanceConfig(appearance);
-            const shadowRoot = shadowRef.current.shadowRoot;
-            if (!shadowRoot) {
-                console.warn("Unable to access shadow root");
-                return;
-            }
             if (variables) {
                 Object.entries(variables).forEach(([key, value]) => {
-                    shadowRoot.host.style.setProperty(key, value);
+                    document.body.style.setProperty(key, value);
                 });
             }
             // Load fonts if provided
@@ -18116,7 +18095,7 @@ function Appearance({ appearance, fonts, shadowRef, }) {
                             const link = document.createElement("link");
                             link.rel = "stylesheet";
                             link.href = font.cssSrc;
-                            shadowRoot.appendChild(link);
+                            document.body.appendChild(link);
                         }
                         else if ("family" in font) {
                             // Handle custom font source
@@ -18129,7 +18108,7 @@ function Appearance({ appearance, fonts, shadowRef, }) {
                   font-style: ${font.style || "normal"};
                 }
               `;
-                            shadowRoot.appendChild(style);
+                            document.body.appendChild(style);
                         }
                     }
                     catch (error) {
@@ -18141,7 +18120,7 @@ function Appearance({ appearance, fonts, shadowRef, }) {
         catch (error) {
             console.error("Error applying appearance styles:", error);
         }
-    }, [appearance, fonts, shadowRef]);
+    }, [appearance, fonts]);
     return null;
 }
 const getVariablesFromAppearanceConfig = (appearance) => {
@@ -42338,71 +42317,6 @@ var loadStripe = function loadStripe() {
   });
 };
 
-class BetterStoreCheckoutEmbedPaymentElement extends HTMLElement {
-    constructor() {
-        super();
-        this.updatePosition = () => {
-            const rect = this.getBoundingClientRect();
-            this.portalContainer.style.top = `${rect.top + window.scrollY}px`;
-            this.portalContainer.style.left = `${rect.left + window.scrollX}px`;
-            this.portalContainer.style.width = `${rect.width}px`;
-            this.portalContainer.style.height = `${rect.height}px`;
-        };
-        this.updateStripeElementHeight = () => {
-            const stripeElement = this.portalContainer.querySelector(".StripeElement");
-            if (stripeElement) {
-                const { height } = stripeElement.getBoundingClientRect();
-                this.wrapper.style.height = `${height}px`;
-            }
-        };
-        this.observeStripeElement = () => {
-            // Wait a bit for the Stripe element to be rendered
-            setTimeout(() => {
-                const stripeElement = this.portalContainer.querySelector(".StripeElement");
-                if (stripeElement) {
-                    this.resizeObserver.observe(stripeElement);
-                    this.updateStripeElementHeight(); // Initial height update
-                }
-            }, 100);
-        };
-        this.shadow = this.attachShadow({ mode: "open" });
-        // Render a <slot> or placeholder into the Shadow DOM
-        this.wrapper = document.createElement("div");
-        this.wrapper.style.width = "100%";
-        this.wrapper.style.minHeight = "220px";
-        this.wrapper.innerHTML = `<slot></slot>`;
-        this.shadow.appendChild(this.wrapper);
-        // Create or find a container outside Shadow DOM
-        this.portalContainer = document.createElement("div");
-        this.portalContainer.style.position = "absolute"; // or fixed, up to you
-        document.body.appendChild(this.portalContainer); // render into light DOM
-        // Initialize ResizeObserver to watch for Stripe element height changes
-        this.resizeObserver = new ResizeObserver(() => {
-            this.updateStripeElementHeight();
-        });
-    }
-    connectedCallback() {
-        // Move children to portalContainer (light DOM)
-        const children = Array.from(this.children);
-        children.forEach((child) => {
-            this.portalContainer.appendChild(child);
-        });
-        this.updatePosition();
-        window.addEventListener("resize", this.updatePosition);
-        window.addEventListener("scroll", this.updatePosition, true);
-        // Start observing the Stripe element for height changes
-        this.observeStripeElement();
-    }
-    disconnectedCallback() {
-        // Clean up
-        this.portalContainer.remove();
-        window.removeEventListener("resize", this.updatePosition);
-        window.removeEventListener("scroll", this.updatePosition, true);
-        this.resizeObserver.disconnect();
-    }
-}
-customElements.define("betterstore-checkout-embed-payment-element", BetterStoreCheckoutEmbedPaymentElement);
-
 const useCheckout = create((set) => ({
     isSubmitting: false,
     setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
@@ -42437,7 +42351,7 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         }
     });
-    return (jsxs("form", { className: "w-full pb-40 sm:pb-0", onSubmit: handleSubmit, children: [jsx("betterstore-checkout-embed-payment-element", { children: jsx(reactStripe_umdExports.PaymentElement, {}) }), errorMessage && (jsx("p", { className: "text-destructive -mb-2 mt-2 text-sm", children: errorMessage })), children] }));
+    return (jsxs("form", { className: "w-full pb-40 sm:pb-0", onSubmit: handleSubmit, children: [jsx(reactStripe_umdExports.PaymentElement, {}), errorMessage && (jsx("p", { className: "text-destructive -mb-2 mt-2 text-sm", children: errorMessage })), children] }));
 };
 var CheckoutForm$2 = memo(CheckoutForm$1);
 
@@ -42936,7 +42850,6 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
     var _a, _b, _c, _d, _e, _f;
     const { cancelUrl, successUrl, appearance, locale, clientSecret, clientProxy, } = config;
     const storeClient = React__default.useMemo(() => createStoreClient({ proxy: clientProxy }), [clientProxy]);
-    const shadowRef = React__default.useRef(null);
     React__default.useMemo(() => createI18nInstance(locale), [locale]);
     const { formData, step } = useFormStore();
     const paymentSecretPromiseRef = useRef(null);
@@ -43132,7 +43045,7 @@ function CheckoutEmbedComponent({ checkoutId, config }) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsx(ShadowWrapper, { shadowRef: shadowRef, children: jsxs("div", { className: "checkout-embed flex h-max flex-col gap-6 py-4 md:grid md:grid-cols-7 md:gap-0 md:py-12", children: [jsx(Appearance, { appearance: appearance, fonts: config.fonts, shadowRef: shadowRef }), jsx("div", { className: "h-max px-4 md:col-span-4 md:px-8", children: loading ? (jsx(CheckoutFormLoading, {})) : (jsx(CheckoutForm, { locale: locale, setShippingCost: setTotalShipping, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, publicKey: publicKey, paymentSecret: paymentSecret, paymentComponentKey: paymentComponentKey, clientProxy: clientProxy, latitude: latitude, longitude: longitude, currentAlpha3CountryCode: currentAlpha3CountryCode, shipments: (checkout === null || checkout === void 0 ? void 0 : checkout.shipments) || [] })) }), jsxs("div", { className: "order-first h-max px-4 md:order-last md:col-span-3 md:px-8", children: [jsx(Toaster, {}), loading ? (jsx(CheckoutSummaryLoading, {})) : (jsx(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: totalShipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], removeDiscount: removeDiscount }))] })] }) }));
+    return (jsxs("div", { className: "flex h-max flex-col gap-6 py-4 md:grid md:grid-cols-7 md:gap-0 md:py-12", children: [jsx(Appearance, { appearance: appearance, fonts: config.fonts }), jsx("div", { className: "h-max px-4 md:col-span-4 md:px-8", children: loading ? (jsx(CheckoutFormLoading, {})) : (jsx(CheckoutForm, { locale: locale, setShippingCost: setTotalShipping, storeClient: storeClient, fonts: config.fonts, checkoutAppearance: appearance, currency: (_a = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _a !== void 0 ? _a : "", customer: checkout === null || checkout === void 0 ? void 0 : checkout.customer, cancelUrl: cancelUrl, checkoutId: checkoutId, clientSecret: clientSecret, onSuccess: onSuccess, onError: onError, exchangeRate: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _b !== void 0 ? _b : 1, publicKey: publicKey, paymentSecret: paymentSecret, paymentComponentKey: paymentComponentKey, clientProxy: clientProxy, latitude: latitude, longitude: longitude, currentAlpha3CountryCode: currentAlpha3CountryCode, shipments: (checkout === null || checkout === void 0 ? void 0 : checkout.shipments) || [] })) }), jsxs("div", { className: "order-first h-max px-4 md:order-last md:col-span-3 md:px-8", children: [jsx(Toaster, {}), loading ? (jsx(CheckoutSummaryLoading, {})) : (jsx(CheckoutSummary, { currency: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _c !== void 0 ? _c : "", lineItems: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _d !== void 0 ? _d : [], shipping: totalShipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, onCancel: onCancel, exchangeRate: (_e = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _e !== void 0 ? _e : 1, applyDiscountCode: applyDiscountCode, appliedDiscounts: (_f = checkout === null || checkout === void 0 ? void 0 : checkout.appliedDiscounts) !== null && _f !== void 0 ? _f : [], removeDiscount: removeDiscount }))] })] }));
 }
 const CheckoutEmbed = memo(CheckoutEmbedComponent);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -45,7 +45,7 @@
     }
   },
   "dependencies": {
-    "@betterstore/bridge": "^0.0.24",
+    "@betterstore/bridge": "^0.0.25",
     "@hookform/resolvers": "^4.1.3",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.14",
@@ -71,7 +71,6 @@
     "next-themes": "^0.4.6",
     "react-hook-form": "^7.56.4",
     "react-i18next": "^15.5.2",
-    "rollup-plugin-postcss": "^4.0.2",
     "sonner": "^2.0.3",
     "tailwind": "^4.0.0",
     "tailwind-merge": "^3.3.0",
@@ -79,7 +78,7 @@
     "world_countries_lists": "^3.2.0",
     "zod": "^3.25.30",
     "zustand": "^5.0.5",
-    "@betterstore/sdk": "0.6.4"
+    "@betterstore/sdk": "0.6.6"
   },
   "publishConfig": {
     "access": "public"

package/dist/components/payment-element/betterstore-checkout-embed-payment-element.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=betterstore-checkout-embed-payment-element.d.ts.map

package/dist/components/payment-element/betterstore-checkout-embed-payment-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"betterstore-checkout-embed-payment-element.d.ts","sourceRoot":"","sources":["../../../src/components/payment-element/betterstore-checkout-embed-payment-element.tsx"],"names":[],"mappings":""}

package/dist/components/shadow-wrapper.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-interface ShadowWrapperProps {
-    children: React.ReactNode;
-    shadowRef: React.RefObject<HTMLDivElement | null>;
-}
-export declare const ShadowWrapper: React.FC<ShadowWrapperProps>;
-export {};
-//# sourceMappingURL=shadow-wrapper.d.ts.map

package/dist/components/shadow-wrapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadow-wrapper.d.ts","sourceRoot":"","sources":["../../src/components/shadow-wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyBtD,CAAC"}