@betterstore/react 0.2.32 → 0.2.34

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @betterstore/sdk
 
+## 0.2.34
+
+### Patch Changes
+
+- bug fixes
+
+## 0.2.33
+
+### Patch Changes
+
+- styling bug fixes
+
 ## 0.2.32
 
 ### Patch Changes

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

@@ -1,5 +1,5 @@
 import { CheckoutSession, createStoreClient } from "@betterstore/sdk";
-import { StripeElementsOptions } from "@stripe/stripe-js";
+import { StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
 import { AppearanceConfig } from "./appearance";
 interface CheckoutFormProps {
@@ -13,6 +13,8 @@ interface CheckoutFormProps {
     currency: string;
     checkoutAppearance?: AppearanceConfig;
     fonts?: StripeElementsOptions["fonts"];
+    locale?: StripeElementLocale;
+    setShippingCost: (cost: number) => void;
 }
-export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }: CheckoutFormProps): React.JSX.Element;
+export default function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, }: CheckoutFormProps): React.JSX.Element;
 export {};

package/dist/components/checkout-embed/steps/payment/form.d.ts

@@ -1,4 +1,4 @@
-import { StripeElementsOptions } from "@stripe/stripe-js";
+import { StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
 import { AppearanceConfig } from "../../appearance";
 interface PaymentFormProps {
@@ -13,6 +13,7 @@ interface PaymentFormProps {
     shippingPrice: string;
     checkoutAppearance?: AppearanceConfig;
     fonts?: StripeElementsOptions["fonts"];
+    locale?: StripeElementLocale;
 }
-export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, }: PaymentFormProps): React.JSX.Element;
+export default function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }: PaymentFormProps): React.JSX.Element;
 export {};

package/dist/components/payment-element/index.d.ts

@@ -1,8 +1,9 @@
-import { Appearance, StripeElementsOptions } from "@stripe/stripe-js";
+import { Appearance, StripeElementLocale, StripeElementsOptions } from "@stripe/stripe-js";
 import React from "react";
-declare function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, onError, children, }: {
+declare function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, }: {
     paymentSecret: string;
     checkoutAppearance?: Appearance;
+    locale?: StripeElementLocale;
     fonts?: StripeElementsOptions["fonts"];
     onSuccess?: () => void;
     onError?: () => void;

package/dist/components/ui/button.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: "link" | "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/index.cjs.js

@@ -23635,9 +23635,10 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
             outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
             secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline pt-0 pr-0 pb-0 pl-0 h-auto!",
+            link: "text-primary underline-offset-4 hover:underline h-auto!",
         },
         size: {
+            link: "p-0 h-auto",
             default: "h-9 px-4 py-2 has-[>svg]:px-3",
             sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
             lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
@@ -34175,9 +34176,9 @@ var CheckoutForm$2 = React.memo(CheckoutForm$1);
 
 const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
 const stripePromise = loadStripe(publicStripeKey);
-function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, onError, children, }) {
+function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, }) {
     const options = {
-        locale: "en",
+        locale: locale !== null && locale !== void 0 ? locale : "en",
         appearance: checkoutAppearance,
         clientSecret: paymentSecret,
         fonts: fonts,
@@ -34187,7 +34188,7 @@ function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, o
 }
 var PaymentElement$1 = React.memo(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }) {
     const { t } = useTranslation();
     return (React.createElement("div", { className: "space-y-6" },
         React.createElement("div", null,
@@ -34199,13 +34200,13 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                     React.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.contact")),
                     " ",
                     React.createElement("span", { className: "text-muted-foreground" }, contactEmail)),
-                React.createElement(Button, { variant: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
+                React.createElement(Button, { variant: "link", size: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
             React.createElement("div", { className: "flex items-center justify-between text-sm" },
                 React.createElement("p", null,
                     React.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipTo")),
                     " ",
                     React.createElement("span", { className: "text-muted-foreground" }, shippingAddress)),
-                React.createElement(Button, { variant: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
+                React.createElement(Button, { variant: "link", size: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
             React.createElement("div", { className: "flex items-center justify-between text-sm" },
                 React.createElement("p", null,
                     React.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipping")),
@@ -34214,8 +34215,8 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                         shippingProvider,
                         " \u00B7 ",
                         shippingPrice)),
-                React.createElement(Button, { variant: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError },
+                React.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
+        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError },
             React.createElement("div", { className: "flex justify-between items-center pt-8" },
                 React.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
                     React.createElement(ChevronLeft, null),
@@ -34249,13 +34250,13 @@ function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, cont
                     React.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.contact")),
                     " ",
                     React.createElement("span", { className: "text-muted-foreground" }, contactEmail)),
-                React.createElement(Button, { variant: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change"))),
+                React.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change"))),
             React.createElement("div", { className: "flex items-center justify-between text-sm" },
                 React.createElement("p", null,
                     React.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipTo")),
                     " ",
                     React.createElement("span", { className: "text-muted-foreground" }, shippingAddress)),
-                React.createElement(Button, { variant: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
+                React.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
         React.createElement(Form, Object.assign({}, form),
             React.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
                 shippingRates.length === 0 &&
@@ -34312,7 +34313,7 @@ const motionSettings = {
     exit: { opacity: 0 },
     transition: { duration: 0.2 },
 };
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, }) {
     const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
     const [paymentSecret, setPaymentSecret] = React.useState(null);
     const [shippingRates, setShippingRates] = React.useState([]);
@@ -34408,6 +34409,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         });
         const paymentSecret = yield storeClient.generateCheckoutsPaymentSecret(clientSecret, checkoutId);
         setPaymentSecret(paymentSecret);
+        setShippingCost(data.amount * 100);
         setStep("payment");
     });
     // Navigate back to previous step
@@ -34439,7 +34441,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             step === "shipping" && formData.customer && (React.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
                 React.createElement(ShippingMethodForm, { shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address) }))),
             step === "payment" && formData.customer && formData.shipping && (React.createElement(motion.div, Object.assign({ key: "payment" }, motionSettings, { className: "absolute w-full" }),
-                React.createElement(PaymentForm, { fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingProvider: formData.shipping.provider, shippingPrice: formData.shipping.amount.toString() + " " + currency }))))));
+                React.createElement(PaymentForm, { locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingProvider: formData.shipping.provider, shippingPrice: formData.shipping.amount.toString() + " " + currency }))))));
 }
 
 function CheckoutFormLoading() {
@@ -34473,7 +34475,7 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
     return (React.createElement("div", { className: "grid gap-5" },
         React.createElement("div", { className: "flex justify-between items-center" },
             React.createElement("h2", null, t("CheckoutEmbed.Summary.title")),
-            React.createElement(Button, { variant: "link", asChild: true },
+            React.createElement(Button, { variant: "link", size: "link", asChild: true },
                 React.createElement("a", { href: cancelUrl }, t("CheckoutEmbed.Summary.edit")))),
         React.createElement("hr", null),
         React.createElement("div", { className: "grid gap-3" },
@@ -34579,9 +34581,14 @@ function CheckoutEmbed({ checkoutId, config }) {
     if (!checkout && !loading) {
         throw new Error("Checkout not found");
     }
+    const setShippingCost = (cost) => {
+        if (!checkout)
+            return;
+        setCheckout(Object.assign(Object.assign({}, checkout), { shipping: cost }));
+    };
     return (React.createElement("div", { className: "checkout-embed mx-auto max-w-[1200px] min-h-screen overflow-x-hidden py-8 md:py-12 grid md:grid-cols-7 " },
         React.createElement(Appearance, { appearance: appearance }),
-        React.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React.createElement(CheckoutFormLoading, null)) : (React.createElement(CheckoutForm, { 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 }))),
+        React.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React.createElement(CheckoutFormLoading, null)) : (React.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, 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 }))),
         React.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React.createElement(CheckoutSummaryLoading, null)) : (React.createElement(CheckoutSummary, { currency: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _b !== void 0 ? _b : "", lineItems: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _c !== void 0 ? _c : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, cancelUrl: cancelUrl, exchangeRate: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _d !== void 0 ? _d : 1 })))));
 }
 var index = React.memo(CheckoutEmbed);
@@ -34613,7 +34620,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-lg: 32rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-widest: 0.1em;\n    --radius-xs: 0.125rem;\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--bs-font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::-moz-placeholder {\n    opacity: 1;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::-moz-placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    -webkit-appearance: button;\n       -moz-appearance: button;\n            appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none !important;\n  }\n  .sr-only {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0, 0, 0, 0) !important;\n    white-space: nowrap !important;\n    border-width: 0 !important;\n  }\n  .absolute {\n    position: absolute !important;\n  }\n  .fixed {\n    position: fixed !important;\n  }\n  .relative {\n    position: relative !important;\n  }\n  .sticky {\n    position: sticky !important;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0) !important;\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2) !important;\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0) !important;\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5) !important;\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%) !important;\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4) !important;\n  }\n  .top-\\[50\\%\\] {\n    top: 50% !important;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2) !important;\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2) !important;\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4) !important;\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%) !important;\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2) !important;\n  }\n  .left-\\[50\\%\\] {\n    left: 50% !important;\n  }\n  .z-10 {\n    z-index: 10 !important;\n  }\n  .z-50 {\n    z-index: 50 !important;\n  }\n  .order-first {\n    order: -9999 !important;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2 !important;\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1) !important;\n  }\n  .mx-auto {\n    margin-inline: auto !important;\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1) !important;\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8) !important;\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2) !important;\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6) !important;\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4) !important;\n  }\n  .ml-auto {\n    margin-left: auto !important;\n  }\n  .flex {\n    display: flex !important;\n  }\n  .grid {\n    display: grid !important;\n  }\n  .inline-flex {\n    display: inline-flex !important;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1 !important;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2) !important;\n    height: calc(var(--spacing) * 2) !important;\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5) !important;\n    height: calc(var(--spacing) * 3.5) !important;\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4) !important;\n    height: calc(var(--spacing) * 4) !important;\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9) !important;\n    height: calc(var(--spacing) * 9) !important;\n  }\n  .size-16 {\n    width: calc(var(--spacing) * 16) !important;\n    height: calc(var(--spacing) * 16) !important;\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3) !important;\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5) !important;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4) !important;\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5) !important;\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6) !important;\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8) !important;\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9) !important;\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10) !important;\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16) !important;\n  }\n  .h-\\[18px\\] {\n    height: 18px !important;\n  }\n  .h-\\[var\\(--radix-select-trigger-height\\)\\] {\n    height: var(--radix-select-trigger-height) !important;\n  }\n  .h-auto\\! {\n    height: auto !important;\n  }\n  .h-full {\n    height: 100% !important;\n  }\n  .h-px {\n    height: 1px !important;\n  }\n  .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n    max-height: var(--radix-dropdown-menu-content-available-height) !important;\n  }\n  .max-h-96 {\n    max-height: calc(var(--spacing) * 96) !important;\n  }\n  .max-h-\\[200px\\] {\n    max-height: 200px !important;\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px !important;\n  }\n  .min-h-full {\n    min-height: 100% !important;\n  }\n  .min-h-screen {\n    min-height: 100vh !important;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0) !important;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4) !important;\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5) !important;\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6) !important;\n  }\n  .w-10 {\n    width: calc(var(--spacing) * 10) !important;\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12) !important;\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16) !important;\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20) !important;\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24) !important;\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28) !important;\n  }\n  .w-32 {\n    width: calc(var(--spacing) * 32) !important;\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40) !important;\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72) !important;\n  }\n  .w-fit {\n    width: -moz-fit-content !important;\n    width: fit-content !important;\n  }\n  .w-full {\n    width: 100% !important;\n  }\n  .max-w-\\[1200px\\] {\n    max-width: 1200px !important;\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem) !important;\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0) !important;\n  }\n  .min-w-\\[--radix-popper-anchor-width\\] {\n    min-width: --radix-popper-anchor-width !important;\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem !important;\n  }\n  .min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n    min-width: var(--radix-select-trigger-width) !important;\n  }\n  .flex-1 {\n    flex: 1 !important;\n  }\n  .shrink-0 {\n    flex-shrink: 0 !important;\n  }\n  .flex-grow {\n    flex-grow: 1 !important;\n  }\n  .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin) !important;\n  }\n  .origin-\\(--radix-popover-content-transform-origin\\) {\n    transform-origin: var(--radix-popover-content-transform-origin) !important;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1) !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .translate-x-\\[-50\\%\\] {\n    --tw-translate-x: -50% !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .translate-y-\\[-50\\%\\] {\n    --tw-translate-y: -50% !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .transform-none\\! {\n    transform: none !important;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse) !important;\n  }\n  .animate-spin {\n    animation: var(--animate-spin) !important;\n  }\n  .cursor-default {\n    cursor: default !important;\n  }\n  .cursor-pointer {\n    cursor: pointer !important;\n  }\n  .scroll-my-1 {\n    scroll-margin-block: calc(var(--spacing) * 1) !important;\n  }\n  .scroll-py-1 {\n    scroll-padding-block: calc(var(--spacing) * 1) !important;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n  }\n  .flex-col {\n    flex-direction: column !important;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse !important;\n  }\n  .items-center {\n    align-items: center !important;\n  }\n  .justify-between {\n    justify-content: space-between !important;\n  }\n  .justify-center {\n    justify-content: center !important;\n  }\n  .justify-end {\n    justify-content: flex-end !important;\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5) !important;\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2) !important;\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3) !important;\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4) !important;\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5) !important;\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6) !important;\n  }\n  .gap-\\[10px\\] {\n    gap: 10px !important;\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-x-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0 !important;\n      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)) !important;\n      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))) !important;\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden !important;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden !important;\n  }\n  .overflow-y-auto {\n    overflow-y: auto !important;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px !important;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px) !important;\n  }\n  .rounded-lg {\n    border-radius: var(--bs-radius) !important;\n  }\n  .rounded-md {\n    border-radius: calc(var(--bs-radius) - 2px) !important;\n  }\n  .rounded-sm {\n    border-radius: calc(var(--bs-radius) - 4px) !important;\n  }\n  .rounded-xs {\n    border-radius: var(--radius-xs) !important;\n  }\n  .border {\n    border-style: var(--tw-border-style) !important;\n    border-width: 1px !important;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style) !important;\n    border-bottom-width: 1px !important;\n  }\n  .border-input {\n    border-color: var(--bs-input) !important;\n  }\n  .border-primary {\n    border-color: var(--bs-primary) !important;\n  }\n  .bg-accent {\n    background-color: var(--bs-accent) !important;\n  }\n  .bg-background {\n    background-color: var(--bs-background) !important;\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent) !important;\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent) !important;\n    }\n  }\n  .bg-border {\n    background-color: var(--bs-border) !important;\n  }\n  .bg-destructive {\n    background-color: var(--bs-destructive) !important;\n  }\n  .bg-muted {\n    background-color: var(--bs-muted) !important;\n  }\n  .bg-popover {\n    background-color: var(--bs-popover) !important;\n  }\n  .bg-primary {\n    background-color: var(--bs-primary) !important;\n  }\n  .bg-secondary {\n    background-color: var(--bs-secondary) !important;\n  }\n  .bg-transparent {\n    background-color: transparent !important;\n  }\n  .fill-current {\n    fill: currentcolor !important;\n  }\n  .fill-primary {\n    fill: var(--bs-primary) !important;\n  }\n  .object-cover {\n    -o-object-fit: cover !important;\n       object-fit: cover !important;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0) !important;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1) !important;\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4) !important;\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6) !important;\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2) !important;\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3) !important;\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4) !important;\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6) !important;\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1) !important;\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5) !important;\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2) !important;\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3) !important;\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6) !important;\n  }\n  .py-8 {\n    padding-block: calc(var(--spacing) * 8) !important;\n  }\n  .pt-0 {\n    padding-top: calc(var(--spacing) * 0) !important;\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2) !important;\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4) !important;\n  }\n  .pt-8 {\n    padding-top: calc(var(--spacing) * 8) !important;\n  }\n  .pr-0 {\n    padding-right: calc(var(--spacing) * 0) !important;\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2) !important;\n  }\n  .pr-8 {\n    padding-right: calc(var(--spacing) * 8) !important;\n  }\n  .pb-0 {\n    padding-bottom: calc(var(--spacing) * 0) !important;\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2) !important;\n  }\n  .pl-0 {\n    padding-left: calc(var(--spacing) * 0) !important;\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2) !important;\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8) !important;\n  }\n  .text-center {\n    text-align: center !important;\n  }\n  .text-right {\n    text-align: right !important;\n  }\n  .text-base {\n    font-size: var(--text-base) !important;\n    line-height: var(--tw-leading, var(--text-base--line-height)) !important;\n  }\n  .text-lg {\n    font-size: var(--text-lg) !important;\n    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;\n  }\n  .text-sm {\n    font-size: var(--text-sm) !important;\n    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n  }\n  .text-xs {\n    font-size: var(--text-xs) !important;\n    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;\n  }\n  .leading-none {\n    --tw-leading: 1 !important;\n    line-height: 1 !important;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold) !important;\n    font-weight: var(--font-weight-bold) !important;\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium) !important;\n    font-weight: var(--font-weight-medium) !important;\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold) !important;\n    font-weight: var(--font-weight-semibold) !important;\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest) !important;\n    letter-spacing: var(--tracking-widest) !important;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis !important;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap !important;\n  }\n  .text-background {\n    color: var(--bs-background) !important;\n  }\n  .text-current {\n    color: currentcolor !important;\n  }\n  .text-destructive {\n    color: var(--bs-destructive) !important;\n  }\n  .text-destructive-foreground {\n    color: var(--bs-destructive-foreground) !important;\n  }\n  .text-foreground {\n    color: var(--bs-foreground) !important;\n  }\n  .text-muted-foreground {\n    color: var(--bs-muted-foreground) !important;\n  }\n  .text-popover-foreground {\n    color: var(--bs-popover-foreground) !important;\n  }\n  .text-primary {\n    color: var(--bs-primary) !important;\n  }\n  .text-primary-foreground {\n    color: var(--bs-primary-foreground) !important;\n  }\n  .text-red-500 {\n    color: var(--color-red-500) !important;\n  }\n  .text-secondary-foreground {\n    color: var(--bs-secondary-foreground) !important;\n  }\n  .text-white {\n    color: var(--color-white) !important;\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px !important;\n  }\n  .opacity-0 {\n    opacity: 0% !important;\n  }\n  .opacity-50 {\n    opacity: 50% !important;\n  }\n  .opacity-70 {\n    opacity: 70% !important;\n  }\n  .opacity-100 {\n    opacity: 100% !important;\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)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .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)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .shadow-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .ring-offset-background {\n    --tw-ring-offset-color: var(--bs-background) !important;\n  }\n  .outline-hidden {\n    --tw-outline-style: none !important;\n    outline-style: none !important;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent !important;\n      outline-offset: 2px !important;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style) !important;\n    outline-width: 1px !important;\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 !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-opacity {\n    transition-property: opacity !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-shadow {\n    transition-property: box-shadow !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-none {\n    transition-property: none !important;\n  }\n  .duration-200 {\n    --tw-duration: 200ms !important;\n    transition-duration: 200ms !important;\n  }\n  .outline-none {\n    --tw-outline-style: none !important;\n    outline-style: none !important;\n  }\n  .select-none {\n    -webkit-user-select: none !important;\n    -moz-user-select: none !important;\n         user-select: none !important;\n  }\n  .duration-200 {\n    animation-duration: 200ms !important;\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none !important;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50% !important;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed !important;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50% !important;\n    }\n  }\n  .selection\\:bg-primary {\n    & *::-moz-selection {\n      background-color: var(--bs-primary) !important;\n    }\n    & *::selection {\n      background-color: var(--bs-primary) !important;\n    }\n    &::-moz-selection {\n      background-color: var(--bs-primary) !important;\n    }\n    &::selection {\n      background-color: var(--bs-primary) !important;\n    }\n  }\n  .selection\\:text-primary-foreground {\n    & *::-moz-selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    & *::selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    &::-moz-selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    &::selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex !important;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7) !important;\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style) !important;\n      border-width: 0px !important;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent !important;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm) !important;\n      line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium) !important;\n      font-weight: var(--font-weight-medium) !important;\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--bs-foreground) !important;\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::-moz-placeholder {\n      color: var(--bs-muted-foreground) !important;\n    }\n    &::placeholder {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-accent) !important;\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-destructive) 90%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-primary) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-primary) 90%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-secondary) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-secondary) 80%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--bs-accent-foreground) !important;\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline !important;\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100% !important;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .focus\\:ring-1 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .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) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .focus\\:ring-ring {\n    &:focus {\n      --tw-ring-color: var(--bs-ring) !important;\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px !important;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n    }\n  }\n  .focus\\:outline-hidden {\n    &:focus {\n      --tw-outline-style: none !important;\n      outline-style: none !important;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent !important;\n        outline-offset: 2px !important;\n      }\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none !important;\n      outline-style: none !important;\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--bs-ring) !important;\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) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .focus-visible\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: var(--bs-destructive) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n      }\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: var(--bs-ring) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-ring) 50%, transparent) !important;\n      }\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none !important;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed !important;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50% !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5) !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3) !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4) !important;\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--bs-destructive) !important;\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: var(--bs-destructive) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n      }\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none !important;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50% !important;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &[data-disabled=\"true\"] {\n      pointer-events: none !important;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:opacity-50 {\n    &[data-disabled=\"true\"] {\n      opacity: 50% !important;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--bs-destructive-foreground) !important;\n    }\n  }\n  .data-\\[inset\\]\\:pl-8 {\n    &[data-inset] {\n      padding-left: calc(var(--spacing) * 8) !important;\n    }\n  }\n  .data-\\[placeholder\\]\\:text-muted-foreground {\n    &[data-placeholder] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .data-\\[selected\\=true\\]\\:bg-accent {\n    &[data-selected=\"true\"] {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .data-\\[selected\\=true\\]\\:text-accent-foreground {\n    &[data-selected=\"true\"] {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:translate-y-1 {\n    &[data-side=\"bottom\"] {\n      --tw-translate-y: calc(var(--spacing) * 1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem !important;\n    }\n  }\n  .data-\\[side\\=left\\]\\:-translate-x-1 {\n    &[data-side=\"left\"] {\n      --tw-translate-x: calc(var(--spacing) * -1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem !important;\n    }\n  }\n  .data-\\[side\\=right\\]\\:translate-x-1 {\n    &[data-side=\"right\"] {\n      --tw-translate-x: calc(var(--spacing) * 1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem !important;\n    }\n  }\n  .data-\\[side\\=top\\]\\:-translate-y-1 {\n    &[data-side=\"top\"] {\n      --tw-translate-y: calc(var(--spacing) * -1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem !important;\n    }\n  }\n  .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n    :is(& *) {\n      &[data-slot=\"command-input-wrapper\"] {\n        height: calc(var(--spacing) * 12) !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        overflow: hidden !important;\n        display: -webkit-box !important;\n        -webkit-box-orient: vertical !important;\n        -webkit-line-clamp: 1 !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        display: flex !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        align-items: center !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        gap: calc(var(--spacing) * 2) !important;\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--bs-primary) !important;\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--bs-primary) !important;\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--bs-primary-foreground) !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit !important;\n      animation-duration: 150ms !important;\n      --tw-exit-opacity: initial !important;\n      --tw-exit-scale: initial !important;\n      --tw-exit-rotate: initial !important;\n      --tw-exit-translate-x: initial !important;\n      --tw-exit-translate-y: initial !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0 !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95 !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:bg-accent {\n    &[data-state=\"open\"] {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-accent-foreground {\n    &[data-state=\"open\"] {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-muted-foreground {\n    &[data-state=\"open\"] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter !important;\n      animation-duration: 150ms !important;\n      --tw-enter-opacity: initial !important;\n      --tw-enter-scale: initial !important;\n      --tw-enter-rotate: initial !important;\n      --tw-enter-translate-x: initial !important;\n      --tw-enter-translate-y: initial !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0 !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95 !important;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      color: var(--bs-destructive) !important;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        background-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-destructive) 10%, transparent) !important;\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        color: var(--bs-destructive) !important;\n      }\n    }\n  }\n  .sm\\:max-h-\\[270px\\] {\n    @media (width >= 40rem) {\n      max-height: 270px !important;\n    }\n  }\n  .sm\\:max-w-\\[500px\\] {\n    @media (width >= 40rem) {\n      max-width: 500px !important;\n    }\n  }\n  .sm\\:max-w-lg {\n    @media (width >= 40rem) {\n      max-width: var(--container-lg) !important;\n    }\n  }\n  .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row !important;\n    }\n  }\n  .sm\\:justify-end {\n    @media (width >= 40rem) {\n      justify-content: flex-end !important;\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left !important;\n    }\n  }\n  .md\\:order-last {\n    @media (width >= 48rem) {\n      order: 9999 !important;\n    }\n  }\n  .md\\:col-span-2 {\n    @media (width >= 48rem) {\n      grid-column: span 2 / span 2 !important;\n    }\n  }\n  .md\\:col-span-3 {\n    @media (width >= 48rem) {\n      grid-column: span 3 / span 3 !important;\n    }\n  }\n  .md\\:col-span-4 {\n    @media (width >= 48rem) {\n      grid-column: span 4 / span 4 !important;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n    }\n  }\n  .md\\:grid-cols-7 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(7, minmax(0, 1fr)) !important;\n    }\n  }\n  .md\\:px-8 {\n    @media (width >= 48rem) {\n      padding-inline: calc(var(--spacing) * 8) !important;\n    }\n  }\n  .md\\:py-12 {\n    @media (width >= 48rem) {\n      padding-block: calc(var(--spacing) * 12) !important;\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm) !important;\n      line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-visible {\n        --tw-ring-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 40%, transparent) !important;\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(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 40%, transparent) !important;\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(--bs-destructive) !important;\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n          }\n        }\n      }\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n    & [cmdk-group-heading] {\n      padding-inline: calc(var(--spacing) * 2) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n    & [cmdk-group-heading] {\n      padding-block: calc(var(--spacing) * 1.5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n    & [cmdk-group-heading] {\n      font-size: var(--text-xs) !important;\n      line-height: var(--tw-leading, var(--text-xs--line-height)) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n    & [cmdk-group-heading] {\n      --tw-font-weight: var(--font-weight-medium) !important;\n      font-weight: var(--font-weight-medium) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n    & [cmdk-group-heading] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n    & [cmdk-group] {\n      padding-inline: calc(var(--spacing) * 2) !important;\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) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n    & [cmdk-input-wrapper] svg {\n      height: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n    & [cmdk-input-wrapper] svg {\n      width: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n    & [cmdk-input] {\n      height: calc(var(--spacing) * 12) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n    & [cmdk-item] {\n      padding-inline: calc(var(--spacing) * 2) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n    & [cmdk-item] {\n      padding-block: calc(var(--spacing) * 3) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n    & [cmdk-item] svg {\n      height: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n    & [cmdk-item] svg {\n      width: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none !important;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0 !important;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4) !important;\n      height: calc(var(--spacing) * 4) !important;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:flex {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          display: flex !important;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:items-center {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          align-items: center !important;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:gap-2 {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          gap: calc(var(--spacing) * 2) !important;\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n    &[data-variant=\"destructive\"] {\n      :is(& > *) {\n        &:is(svg) {\n          color: var(--bs-destructive) !important;\n        }\n      }\n    }\n  }\n  .\\[\\&\\>span\\]\\:line-clamp-1 {\n    &>span {\n      overflow: hidden !important;\n      display: -webkit-box !important;\n      -webkit-box-orient: vertical !important;\n      -webkit-line-clamp: 1 !important;\n    }\n  }\n}\n.checkout-embed {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.145 0 0);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.145 0 0);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.145 0 0);\n    --primary: oklch(0.205 0 0);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.97 0 0);\n    --secondary-foreground: oklch(0.205 0 0);\n    --muted: oklch(0.97 0 0);\n    --muted-foreground: oklch(0.556 0 0);\n    --accent: oklch(0.97 0 0);\n    --accent-foreground: oklch(0.205 0 0);\n    --destructive: oklch(0.577 0.245 27.325);\n    --destructive-foreground: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0 0);\n    --input: oklch(0.922 0 0);\n    --ring: oklch(0.708 0 0);\n    --chart-1: oklch(0.646 0.222 41.116);\n    --chart-2: oklch(0.6 0.118 184.704);\n    --chart-3: oklch(0.398 0.07 227.392);\n    --chart-4: oklch(0.828 0.189 84.429);\n    --chart-5: oklch(0.769 0.188 70.08);\n    --radius: 0.625rem;\n    --sidebar: oklch(0.985 0 0);\n    --sidebar-foreground: oklch(0.145 0 0);\n    --sidebar-primary: oklch(0.205 0 0);\n    --sidebar-primary-foreground: oklch(0.985 0 0);\n    --sidebar-accent: oklch(0.97 0 0);\n    --sidebar-accent-foreground: oklch(0.205 0 0);\n    --sidebar-border: oklch(0.922 0 0);\n    --sidebar-ring: oklch(0.708 0 0);\n  }\n  @layer base {\n    * {\n      border-color: var(--bs-border) !important;\n      outline-color: var(--bs-ring) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        outline-color: color-mix(in oklab, var(--bs-ring) 50%, transparent) !important;\n      }\n    }\n    .checkout-embed {\n      background-color: var(--bs-background) !important;\n      font-family: var(--bs-font-sans), Helvetica, Arial, apple-system, sans-serif !important;\n      color: var(--bs-foreground) !important;\n    }\n    h2 {\n      font-size: var(--text-2xl) !important;\n      line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;\n      --tw-font-weight: var(--font-weight-bold) !important;\n      font-weight: var(--font-weight-bold) !important;\n      --tw-tracking: var(--tracking-tight) !important;\n      letter-spacing: var(--tracking-tight) !important;\n    }\n    p {\n      --tw-tracking: var(--tracking-tight) !important;\n      letter-spacing: var(--tracking-tight) !important;\n    }\n  }\n  @layer utilities {\n    .scrollbar-hidden {\n      scrollbar-width: none;\n    }\n    .scrollbar-hidden::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n";
+var css_248z = "/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-lg: 32rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-widest: 0.1em;\n    --radius-xs: 0.125rem;\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--bs-font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::-moz-placeholder {\n    opacity: 1;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::-moz-placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    -webkit-appearance: button;\n       -moz-appearance: button;\n            appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none !important;\n  }\n  .sr-only {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0, 0, 0, 0) !important;\n    white-space: nowrap !important;\n    border-width: 0 !important;\n  }\n  .absolute {\n    position: absolute !important;\n  }\n  .fixed {\n    position: fixed !important;\n  }\n  .relative {\n    position: relative !important;\n  }\n  .sticky {\n    position: sticky !important;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0) !important;\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2) !important;\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0) !important;\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5) !important;\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%) !important;\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4) !important;\n  }\n  .top-\\[50\\%\\] {\n    top: 50% !important;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2) !important;\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2) !important;\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4) !important;\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%) !important;\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2) !important;\n  }\n  .left-\\[50\\%\\] {\n    left: 50% !important;\n  }\n  .z-10 {\n    z-index: 10 !important;\n  }\n  .z-50 {\n    z-index: 50 !important;\n  }\n  .order-first {\n    order: -9999 !important;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2 !important;\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1) !important;\n  }\n  .mx-auto {\n    margin-inline: auto !important;\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1) !important;\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8) !important;\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2) !important;\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6) !important;\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4) !important;\n  }\n  .ml-auto {\n    margin-left: auto !important;\n  }\n  .flex {\n    display: flex !important;\n  }\n  .grid {\n    display: grid !important;\n  }\n  .inline-flex {\n    display: inline-flex !important;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1 !important;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2) !important;\n    height: calc(var(--spacing) * 2) !important;\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5) !important;\n    height: calc(var(--spacing) * 3.5) !important;\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4) !important;\n    height: calc(var(--spacing) * 4) !important;\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9) !important;\n    height: calc(var(--spacing) * 9) !important;\n  }\n  .size-16 {\n    width: calc(var(--spacing) * 16) !important;\n    height: calc(var(--spacing) * 16) !important;\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3) !important;\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5) !important;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4) !important;\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5) !important;\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6) !important;\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8) !important;\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9) !important;\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10) !important;\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16) !important;\n  }\n  .h-\\[18px\\] {\n    height: 18px !important;\n  }\n  .h-\\[var\\(--radix-select-trigger-height\\)\\] {\n    height: var(--radix-select-trigger-height) !important;\n  }\n  .h-auto {\n    height: auto !important;\n  }\n  .h-auto\\! {\n    height: auto !important;\n  }\n  .h-full {\n    height: 100% !important;\n  }\n  .h-px {\n    height: 1px !important;\n  }\n  .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n    max-height: var(--radix-dropdown-menu-content-available-height) !important;\n  }\n  .max-h-96 {\n    max-height: calc(var(--spacing) * 96) !important;\n  }\n  .max-h-\\[200px\\] {\n    max-height: 200px !important;\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px !important;\n  }\n  .min-h-full {\n    min-height: 100% !important;\n  }\n  .min-h-screen {\n    min-height: 100vh !important;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0) !important;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4) !important;\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5) !important;\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6) !important;\n  }\n  .w-10 {\n    width: calc(var(--spacing) * 10) !important;\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12) !important;\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16) !important;\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20) !important;\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24) !important;\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28) !important;\n  }\n  .w-32 {\n    width: calc(var(--spacing) * 32) !important;\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40) !important;\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72) !important;\n  }\n  .w-fit {\n    width: -moz-fit-content !important;\n    width: fit-content !important;\n  }\n  .w-full {\n    width: 100% !important;\n  }\n  .max-w-\\[1200px\\] {\n    max-width: 1200px !important;\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem) !important;\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0) !important;\n  }\n  .min-w-\\[--radix-popper-anchor-width\\] {\n    min-width: --radix-popper-anchor-width !important;\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem !important;\n  }\n  .min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n    min-width: var(--radix-select-trigger-width) !important;\n  }\n  .flex-1 {\n    flex: 1 !important;\n  }\n  .shrink-0 {\n    flex-shrink: 0 !important;\n  }\n  .flex-grow {\n    flex-grow: 1 !important;\n  }\n  .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin) !important;\n  }\n  .origin-\\(--radix-popover-content-transform-origin\\) {\n    transform-origin: var(--radix-popover-content-transform-origin) !important;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1) !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .translate-x-\\[-50\\%\\] {\n    --tw-translate-x: -50% !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .translate-y-\\[-50\\%\\] {\n    --tw-translate-y: -50% !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .transform-none\\! {\n    transform: none !important;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse) !important;\n  }\n  .animate-spin {\n    animation: var(--animate-spin) !important;\n  }\n  .cursor-default {\n    cursor: default !important;\n  }\n  .cursor-pointer {\n    cursor: pointer !important;\n  }\n  .scroll-my-1 {\n    scroll-margin-block: calc(var(--spacing) * 1) !important;\n  }\n  .scroll-py-1 {\n    scroll-padding-block: calc(var(--spacing) * 1) !important;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n  }\n  .flex-col {\n    flex-direction: column !important;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse !important;\n  }\n  .items-center {\n    align-items: center !important;\n  }\n  .justify-between {\n    justify-content: space-between !important;\n  }\n  .justify-center {\n    justify-content: center !important;\n  }\n  .justify-end {\n    justify-content: flex-end !important;\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5) !important;\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2) !important;\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3) !important;\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4) !important;\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5) !important;\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6) !important;\n  }\n  .gap-\\[10px\\] {\n    gap: 10px !important;\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-x-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0 !important;\n      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)) !important;\n      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))) !important;\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden !important;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden !important;\n  }\n  .overflow-y-auto {\n    overflow-y: auto !important;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px !important;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px) !important;\n  }\n  .rounded-lg {\n    border-radius: var(--bs-radius) !important;\n  }\n  .rounded-md {\n    border-radius: calc(var(--bs-radius) - 2px) !important;\n  }\n  .rounded-sm {\n    border-radius: calc(var(--bs-radius) - 4px) !important;\n  }\n  .rounded-xs {\n    border-radius: var(--radius-xs) !important;\n  }\n  .border {\n    border-style: var(--tw-border-style) !important;\n    border-width: 1px !important;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style) !important;\n    border-bottom-width: 1px !important;\n  }\n  .border-input {\n    border-color: var(--bs-input) !important;\n  }\n  .border-primary {\n    border-color: var(--bs-primary) !important;\n  }\n  .bg-accent {\n    background-color: var(--bs-accent) !important;\n  }\n  .bg-background {\n    background-color: var(--bs-background) !important;\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent) !important;\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent) !important;\n    }\n  }\n  .bg-border {\n    background-color: var(--bs-border) !important;\n  }\n  .bg-destructive {\n    background-color: var(--bs-destructive) !important;\n  }\n  .bg-muted {\n    background-color: var(--bs-muted) !important;\n  }\n  .bg-popover {\n    background-color: var(--bs-popover) !important;\n  }\n  .bg-primary {\n    background-color: var(--bs-primary) !important;\n  }\n  .bg-secondary {\n    background-color: var(--bs-secondary) !important;\n  }\n  .bg-transparent {\n    background-color: transparent !important;\n  }\n  .fill-current {\n    fill: currentcolor !important;\n  }\n  .fill-primary {\n    fill: var(--bs-primary) !important;\n  }\n  .object-cover {\n    -o-object-fit: cover !important;\n       object-fit: cover !important;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0) !important;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1) !important;\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4) !important;\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6) !important;\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2) !important;\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3) !important;\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4) !important;\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6) !important;\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1) !important;\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5) !important;\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2) !important;\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3) !important;\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6) !important;\n  }\n  .py-8 {\n    padding-block: calc(var(--spacing) * 8) !important;\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2) !important;\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4) !important;\n  }\n  .pt-8 {\n    padding-top: calc(var(--spacing) * 8) !important;\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2) !important;\n  }\n  .pr-8 {\n    padding-right: calc(var(--spacing) * 8) !important;\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2) !important;\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2) !important;\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8) !important;\n  }\n  .text-center {\n    text-align: center !important;\n  }\n  .text-right {\n    text-align: right !important;\n  }\n  .text-base {\n    font-size: var(--text-base) !important;\n    line-height: var(--tw-leading, var(--text-base--line-height)) !important;\n  }\n  .text-lg {\n    font-size: var(--text-lg) !important;\n    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;\n  }\n  .text-sm {\n    font-size: var(--text-sm) !important;\n    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n  }\n  .text-xs {\n    font-size: var(--text-xs) !important;\n    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;\n  }\n  .leading-none {\n    --tw-leading: 1 !important;\n    line-height: 1 !important;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold) !important;\n    font-weight: var(--font-weight-bold) !important;\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium) !important;\n    font-weight: var(--font-weight-medium) !important;\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold) !important;\n    font-weight: var(--font-weight-semibold) !important;\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest) !important;\n    letter-spacing: var(--tracking-widest) !important;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis !important;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap !important;\n  }\n  .text-background {\n    color: var(--bs-background) !important;\n  }\n  .text-current {\n    color: currentcolor !important;\n  }\n  .text-destructive {\n    color: var(--bs-destructive) !important;\n  }\n  .text-destructive-foreground {\n    color: var(--bs-destructive-foreground) !important;\n  }\n  .text-foreground {\n    color: var(--bs-foreground) !important;\n  }\n  .text-muted-foreground {\n    color: var(--bs-muted-foreground) !important;\n  }\n  .text-popover-foreground {\n    color: var(--bs-popover-foreground) !important;\n  }\n  .text-primary {\n    color: var(--bs-primary) !important;\n  }\n  .text-primary-foreground {\n    color: var(--bs-primary-foreground) !important;\n  }\n  .text-red-500 {\n    color: var(--color-red-500) !important;\n  }\n  .text-secondary-foreground {\n    color: var(--bs-secondary-foreground) !important;\n  }\n  .text-white {\n    color: var(--color-white) !important;\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px !important;\n  }\n  .opacity-0 {\n    opacity: 0% !important;\n  }\n  .opacity-50 {\n    opacity: 50% !important;\n  }\n  .opacity-70 {\n    opacity: 70% !important;\n  }\n  .opacity-100 {\n    opacity: 100% !important;\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)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .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)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .shadow-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .ring-offset-background {\n    --tw-ring-offset-color: var(--bs-background) !important;\n  }\n  .outline-hidden {\n    --tw-outline-style: none !important;\n    outline-style: none !important;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent !important;\n      outline-offset: 2px !important;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style) !important;\n    outline-width: 1px !important;\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 !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-opacity {\n    transition-property: opacity !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-shadow {\n    transition-property: box-shadow !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-none {\n    transition-property: none !important;\n  }\n  .duration-200 {\n    --tw-duration: 200ms !important;\n    transition-duration: 200ms !important;\n  }\n  .outline-none {\n    --tw-outline-style: none !important;\n    outline-style: none !important;\n  }\n  .select-none {\n    -webkit-user-select: none !important;\n    -moz-user-select: none !important;\n         user-select: none !important;\n  }\n  .duration-200 {\n    animation-duration: 200ms !important;\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none !important;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50% !important;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed !important;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50% !important;\n    }\n  }\n  .selection\\:bg-primary {\n    & *::-moz-selection {\n      background-color: var(--bs-primary) !important;\n    }\n    & *::selection {\n      background-color: var(--bs-primary) !important;\n    }\n    &::-moz-selection {\n      background-color: var(--bs-primary) !important;\n    }\n    &::selection {\n      background-color: var(--bs-primary) !important;\n    }\n  }\n  .selection\\:text-primary-foreground {\n    & *::-moz-selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    & *::selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    &::-moz-selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    &::selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex !important;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7) !important;\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style) !important;\n      border-width: 0px !important;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent !important;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm) !important;\n      line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium) !important;\n      font-weight: var(--font-weight-medium) !important;\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--bs-foreground) !important;\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::-moz-placeholder {\n      color: var(--bs-muted-foreground) !important;\n    }\n    &::placeholder {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-accent) !important;\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-destructive) 90%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-primary) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-primary) 90%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-secondary) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-secondary) 80%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--bs-accent-foreground) !important;\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline !important;\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100% !important;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .focus\\:ring-1 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .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) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .focus\\:ring-ring {\n    &:focus {\n      --tw-ring-color: var(--bs-ring) !important;\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px !important;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n    }\n  }\n  .focus\\:outline-hidden {\n    &:focus {\n      --tw-outline-style: none !important;\n      outline-style: none !important;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent !important;\n        outline-offset: 2px !important;\n      }\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none !important;\n      outline-style: none !important;\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--bs-ring) !important;\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) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .focus-visible\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: var(--bs-destructive) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n      }\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: var(--bs-ring) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-ring) 50%, transparent) !important;\n      }\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none !important;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed !important;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50% !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5) !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3) !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4) !important;\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--bs-destructive) !important;\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: var(--bs-destructive) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n      }\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none !important;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50% !important;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &[data-disabled=\"true\"] {\n      pointer-events: none !important;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:opacity-50 {\n    &[data-disabled=\"true\"] {\n      opacity: 50% !important;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--bs-destructive-foreground) !important;\n    }\n  }\n  .data-\\[inset\\]\\:pl-8 {\n    &[data-inset] {\n      padding-left: calc(var(--spacing) * 8) !important;\n    }\n  }\n  .data-\\[placeholder\\]\\:text-muted-foreground {\n    &[data-placeholder] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .data-\\[selected\\=true\\]\\:bg-accent {\n    &[data-selected=\"true\"] {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .data-\\[selected\\=true\\]\\:text-accent-foreground {\n    &[data-selected=\"true\"] {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:translate-y-1 {\n    &[data-side=\"bottom\"] {\n      --tw-translate-y: calc(var(--spacing) * 1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem !important;\n    }\n  }\n  .data-\\[side\\=left\\]\\:-translate-x-1 {\n    &[data-side=\"left\"] {\n      --tw-translate-x: calc(var(--spacing) * -1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem !important;\n    }\n  }\n  .data-\\[side\\=right\\]\\:translate-x-1 {\n    &[data-side=\"right\"] {\n      --tw-translate-x: calc(var(--spacing) * 1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem !important;\n    }\n  }\n  .data-\\[side\\=top\\]\\:-translate-y-1 {\n    &[data-side=\"top\"] {\n      --tw-translate-y: calc(var(--spacing) * -1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem !important;\n    }\n  }\n  .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n    :is(& *) {\n      &[data-slot=\"command-input-wrapper\"] {\n        height: calc(var(--spacing) * 12) !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        overflow: hidden !important;\n        display: -webkit-box !important;\n        -webkit-box-orient: vertical !important;\n        -webkit-line-clamp: 1 !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        display: flex !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        align-items: center !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        gap: calc(var(--spacing) * 2) !important;\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--bs-primary) !important;\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--bs-primary) !important;\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--bs-primary-foreground) !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit !important;\n      animation-duration: 150ms !important;\n      --tw-exit-opacity: initial !important;\n      --tw-exit-scale: initial !important;\n      --tw-exit-rotate: initial !important;\n      --tw-exit-translate-x: initial !important;\n      --tw-exit-translate-y: initial !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0 !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95 !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:bg-accent {\n    &[data-state=\"open\"] {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-accent-foreground {\n    &[data-state=\"open\"] {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-muted-foreground {\n    &[data-state=\"open\"] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter !important;\n      animation-duration: 150ms !important;\n      --tw-enter-opacity: initial !important;\n      --tw-enter-scale: initial !important;\n      --tw-enter-rotate: initial !important;\n      --tw-enter-translate-x: initial !important;\n      --tw-enter-translate-y: initial !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0 !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95 !important;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      color: var(--bs-destructive) !important;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        background-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-destructive) 10%, transparent) !important;\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        color: var(--bs-destructive) !important;\n      }\n    }\n  }\n  .sm\\:max-h-\\[270px\\] {\n    @media (width >= 40rem) {\n      max-height: 270px !important;\n    }\n  }\n  .sm\\:max-w-\\[500px\\] {\n    @media (width >= 40rem) {\n      max-width: 500px !important;\n    }\n  }\n  .sm\\:max-w-lg {\n    @media (width >= 40rem) {\n      max-width: var(--container-lg) !important;\n    }\n  }\n  .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row !important;\n    }\n  }\n  .sm\\:justify-end {\n    @media (width >= 40rem) {\n      justify-content: flex-end !important;\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left !important;\n    }\n  }\n  .md\\:order-last {\n    @media (width >= 48rem) {\n      order: 9999 !important;\n    }\n  }\n  .md\\:col-span-2 {\n    @media (width >= 48rem) {\n      grid-column: span 2 / span 2 !important;\n    }\n  }\n  .md\\:col-span-3 {\n    @media (width >= 48rem) {\n      grid-column: span 3 / span 3 !important;\n    }\n  }\n  .md\\:col-span-4 {\n    @media (width >= 48rem) {\n      grid-column: span 4 / span 4 !important;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n    }\n  }\n  .md\\:grid-cols-7 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(7, minmax(0, 1fr)) !important;\n    }\n  }\n  .md\\:px-8 {\n    @media (width >= 48rem) {\n      padding-inline: calc(var(--spacing) * 8) !important;\n    }\n  }\n  .md\\:py-12 {\n    @media (width >= 48rem) {\n      padding-block: calc(var(--spacing) * 12) !important;\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm) !important;\n      line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-visible {\n        --tw-ring-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 40%, transparent) !important;\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(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 40%, transparent) !important;\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(--bs-destructive) !important;\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n          }\n        }\n      }\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n    & [cmdk-group-heading] {\n      padding-inline: calc(var(--spacing) * 2) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n    & [cmdk-group-heading] {\n      padding-block: calc(var(--spacing) * 1.5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n    & [cmdk-group-heading] {\n      font-size: var(--text-xs) !important;\n      line-height: var(--tw-leading, var(--text-xs--line-height)) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n    & [cmdk-group-heading] {\n      --tw-font-weight: var(--font-weight-medium) !important;\n      font-weight: var(--font-weight-medium) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n    & [cmdk-group-heading] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n    & [cmdk-group] {\n      padding-inline: calc(var(--spacing) * 2) !important;\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) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n    & [cmdk-input-wrapper] svg {\n      height: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n    & [cmdk-input-wrapper] svg {\n      width: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n    & [cmdk-input] {\n      height: calc(var(--spacing) * 12) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n    & [cmdk-item] {\n      padding-inline: calc(var(--spacing) * 2) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n    & [cmdk-item] {\n      padding-block: calc(var(--spacing) * 3) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n    & [cmdk-item] svg {\n      height: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n    & [cmdk-item] svg {\n      width: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none !important;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0 !important;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4) !important;\n      height: calc(var(--spacing) * 4) !important;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:flex {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          display: flex !important;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:items-center {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          align-items: center !important;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:gap-2 {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          gap: calc(var(--spacing) * 2) !important;\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n    &[data-variant=\"destructive\"] {\n      :is(& > *) {\n        &:is(svg) {\n          color: var(--bs-destructive) !important;\n        }\n      }\n    }\n  }\n  .\\[\\&\\>span\\]\\:line-clamp-1 {\n    &>span {\n      overflow: hidden !important;\n      display: -webkit-box !important;\n      -webkit-box-orient: vertical !important;\n      -webkit-line-clamp: 1 !important;\n    }\n  }\n}\n.checkout-embed {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.145 0 0);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.145 0 0);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.145 0 0);\n    --primary: oklch(0.205 0 0);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.97 0 0);\n    --secondary-foreground: oklch(0.205 0 0);\n    --muted: oklch(0.97 0 0);\n    --muted-foreground: oklch(0.556 0 0);\n    --accent: oklch(0.97 0 0);\n    --accent-foreground: oklch(0.205 0 0);\n    --destructive: oklch(0.577 0.245 27.325);\n    --destructive-foreground: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0 0);\n    --input: oklch(0.922 0 0);\n    --ring: oklch(0.708 0 0);\n    --chart-1: oklch(0.646 0.222 41.116);\n    --chart-2: oklch(0.6 0.118 184.704);\n    --chart-3: oklch(0.398 0.07 227.392);\n    --chart-4: oklch(0.828 0.189 84.429);\n    --chart-5: oklch(0.769 0.188 70.08);\n    --radius: 0.625rem;\n    --sidebar: oklch(0.985 0 0);\n    --sidebar-foreground: oklch(0.145 0 0);\n    --sidebar-primary: oklch(0.205 0 0);\n    --sidebar-primary-foreground: oklch(0.985 0 0);\n    --sidebar-accent: oklch(0.97 0 0);\n    --sidebar-accent-foreground: oklch(0.205 0 0);\n    --sidebar-border: oklch(0.922 0 0);\n    --sidebar-ring: oklch(0.708 0 0);\n  }\n  @layer base {\n    * {\n      border-color: var(--bs-border) !important;\n      outline-color: var(--bs-ring) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        outline-color: color-mix(in oklab, var(--bs-ring) 50%, transparent) !important;\n      }\n    }\n    .checkout-embed {\n      background-color: var(--bs-background) !important;\n      font-family: var(--bs-font-sans), Helvetica, Arial, apple-system, sans-serif !important;\n      color: var(--bs-foreground) !important;\n    }\n    h2 {\n      font-size: var(--text-2xl) !important;\n      line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;\n      --tw-font-weight: var(--font-weight-bold) !important;\n      font-weight: var(--font-weight-bold) !important;\n      --tw-tracking: var(--tracking-tight) !important;\n      letter-spacing: var(--tracking-tight) !important;\n    }\n    p {\n      --tw-tracking: var(--tracking-tight) !important;\n      letter-spacing: var(--tracking-tight) !important;\n    }\n  }\n  @layer utilities {\n    .scrollbar-hidden {\n      scrollbar-width: none;\n    }\n    .scrollbar-hidden::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n";
 styleInject(css_248z);
 
 exports.CheckoutEmbed = index;

package/dist/index.mjs

@@ -23612,9 +23612,10 @@ const buttonVariants = cva("inline-flex cursor-pointer items-center justify-cent
             outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
             secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
             ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline pt-0 pr-0 pb-0 pl-0 h-auto!",
+            link: "text-primary underline-offset-4 hover:underline h-auto!",
         },
         size: {
+            link: "p-0 h-auto",
             default: "h-9 px-4 py-2 has-[>svg]:px-3",
             sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
             lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
@@ -34152,9 +34153,9 @@ var CheckoutForm$2 = memo$1(CheckoutForm$1);
 
 const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
 const stripePromise = loadStripe(publicStripeKey);
-function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, onError, children, }) {
+function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, }) {
     const options = {
-        locale: "en",
+        locale: locale !== null && locale !== void 0 ? locale : "en",
         appearance: checkoutAppearance,
         clientSecret: paymentSecret,
         fonts: fonts,
@@ -34164,7 +34165,7 @@ function PaymentElement({ paymentSecret, checkoutAppearance, fonts, onSuccess, o
 }
 var PaymentElement$1 = memo$1(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingProvider, shippingPrice, checkoutAppearance, fonts, locale, }) {
     const { t } = useTranslation();
     return (React__default.createElement("div", { className: "space-y-6" },
         React__default.createElement("div", null,
@@ -34176,13 +34177,13 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                     React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.contact")),
                     " ",
                     React__default.createElement("span", { className: "text-muted-foreground" }, contactEmail)),
-                React__default.createElement(Button, { variant: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
+                React__default.createElement(Button, { variant: "link", size: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
             React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
                 React__default.createElement("p", null,
                     React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipTo")),
                     " ",
                     React__default.createElement("span", { className: "text-muted-foreground" }, shippingAddress)),
-                React__default.createElement(Button, { variant: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
+                React__default.createElement(Button, { variant: "link", size: "link", onClick: onDoubleBack }, t("CheckoutEmbed.Shipping.change"))),
             React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
                 React__default.createElement("p", null,
                     React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipping")),
@@ -34191,8 +34192,8 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                         shippingProvider,
                         " \u00B7 ",
                         shippingPrice)),
-                React__default.createElement(Button, { variant: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError },
+                React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
+        React__default.createElement("div", { className: "mt-8" }, paymentSecret && (React__default.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError },
             React__default.createElement("div", { className: "flex justify-between items-center pt-8" },
                 React__default.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
                     React__default.createElement(ChevronLeft, null),
@@ -34226,13 +34227,13 @@ function ShippingMethodForm({ shippingRates, initialData, onSubmit, onBack, cont
                     React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.contact")),
                     " ",
                     React__default.createElement("span", { className: "text-muted-foreground" }, contactEmail)),
-                React__default.createElement(Button, { variant: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change"))),
+                React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change"))),
             React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
                 React__default.createElement("p", null,
                     React__default.createElement("span", { className: "font-medium" }, t("CheckoutEmbed.Shipping.shipTo")),
                     " ",
                     React__default.createElement("span", { className: "text-muted-foreground" }, shippingAddress)),
-                React__default.createElement(Button, { variant: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
+                React__default.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
         React__default.createElement(Form, Object.assign({}, form),
             React__default.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
                 shippingRates.length === 0 &&
@@ -34289,7 +34290,7 @@ const motionSettings = {
     exit: { opacity: 0 },
     transition: { duration: 0.2 },
 };
-function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, }) {
+function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, }) {
     const { formData, setFormData, step, setStep } = useFormStore(checkoutId)();
     const [paymentSecret, setPaymentSecret] = useState(null);
     const [shippingRates, setShippingRates] = useState([]);
@@ -34385,6 +34386,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         });
         const paymentSecret = yield storeClient.generateCheckoutsPaymentSecret(clientSecret, checkoutId);
         setPaymentSecret(paymentSecret);
+        setShippingCost(data.amount * 100);
         setStep("payment");
     });
     // Navigate back to previous step
@@ -34416,7 +34418,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             step === "shipping" && formData.customer && (React__default.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
                 React__default.createElement(ShippingMethodForm, { shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address) }))),
             step === "payment" && formData.customer && formData.shipping && (React__default.createElement(motion.div, Object.assign({ key: "payment" }, motionSettings, { className: "absolute w-full" }),
-                React__default.createElement(PaymentForm, { fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingProvider: formData.shipping.provider, shippingPrice: formData.shipping.amount.toString() + " " + currency }))))));
+                React__default.createElement(PaymentForm, { locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingProvider: formData.shipping.provider, shippingPrice: formData.shipping.amount.toString() + " " + currency }))))));
 }
 
 function CheckoutFormLoading() {
@@ -34450,7 +34452,7 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, cancelUrl, exchan
     return (React__default.createElement("div", { className: "grid gap-5" },
         React__default.createElement("div", { className: "flex justify-between items-center" },
             React__default.createElement("h2", null, t("CheckoutEmbed.Summary.title")),
-            React__default.createElement(Button, { variant: "link", asChild: true },
+            React__default.createElement(Button, { variant: "link", size: "link", asChild: true },
                 React__default.createElement("a", { href: cancelUrl }, t("CheckoutEmbed.Summary.edit")))),
         React__default.createElement("hr", null),
         React__default.createElement("div", { className: "grid gap-3" },
@@ -34556,9 +34558,14 @@ function CheckoutEmbed({ checkoutId, config }) {
     if (!checkout && !loading) {
         throw new Error("Checkout not found");
     }
+    const setShippingCost = (cost) => {
+        if (!checkout)
+            return;
+        setCheckout(Object.assign(Object.assign({}, checkout), { shipping: cost }));
+    };
     return (React__default.createElement("div", { className: "checkout-embed mx-auto max-w-[1200px] min-h-screen overflow-x-hidden py-8 md:py-12 grid md:grid-cols-7 " },
         React__default.createElement(Appearance, { appearance: appearance }),
-        React__default.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { 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 }))),
+        React__default.createElement("div", { className: "md:col-span-4 px-4 md:px-8" }, loading ? (React__default.createElement(CheckoutFormLoading, null)) : (React__default.createElement(CheckoutForm, { locale: locale, setShippingCost: setShippingCost, 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 }))),
         React__default.createElement("div", { className: "md:col-span-3 px-4 md:px-8 order-first md:order-last" }, loading ? (React__default.createElement(CheckoutSummaryLoading, null)) : (React__default.createElement(CheckoutSummary, { currency: (_b = checkout === null || checkout === void 0 ? void 0 : checkout.currency) !== null && _b !== void 0 ? _b : "", lineItems: (_c = checkout === null || checkout === void 0 ? void 0 : checkout.lineItems) !== null && _c !== void 0 ? _c : [], shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax, cancelUrl: cancelUrl, exchangeRate: (_d = checkout === null || checkout === void 0 ? void 0 : checkout.exchangeRate) !== null && _d !== void 0 ? _d : 1 })))));
 }
 var index = memo$1(CheckoutEmbed);
@@ -34590,7 +34597,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-lg: 32rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-widest: 0.1em;\n    --radius-xs: 0.125rem;\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--bs-font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::-moz-placeholder {\n    opacity: 1;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::-moz-placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    -webkit-appearance: button;\n       -moz-appearance: button;\n            appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none !important;\n  }\n  .sr-only {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0, 0, 0, 0) !important;\n    white-space: nowrap !important;\n    border-width: 0 !important;\n  }\n  .absolute {\n    position: absolute !important;\n  }\n  .fixed {\n    position: fixed !important;\n  }\n  .relative {\n    position: relative !important;\n  }\n  .sticky {\n    position: sticky !important;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0) !important;\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2) !important;\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0) !important;\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5) !important;\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%) !important;\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4) !important;\n  }\n  .top-\\[50\\%\\] {\n    top: 50% !important;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2) !important;\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2) !important;\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4) !important;\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%) !important;\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2) !important;\n  }\n  .left-\\[50\\%\\] {\n    left: 50% !important;\n  }\n  .z-10 {\n    z-index: 10 !important;\n  }\n  .z-50 {\n    z-index: 50 !important;\n  }\n  .order-first {\n    order: -9999 !important;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2 !important;\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1) !important;\n  }\n  .mx-auto {\n    margin-inline: auto !important;\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1) !important;\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8) !important;\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2) !important;\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6) !important;\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4) !important;\n  }\n  .ml-auto {\n    margin-left: auto !important;\n  }\n  .flex {\n    display: flex !important;\n  }\n  .grid {\n    display: grid !important;\n  }\n  .inline-flex {\n    display: inline-flex !important;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1 !important;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2) !important;\n    height: calc(var(--spacing) * 2) !important;\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5) !important;\n    height: calc(var(--spacing) * 3.5) !important;\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4) !important;\n    height: calc(var(--spacing) * 4) !important;\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9) !important;\n    height: calc(var(--spacing) * 9) !important;\n  }\n  .size-16 {\n    width: calc(var(--spacing) * 16) !important;\n    height: calc(var(--spacing) * 16) !important;\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3) !important;\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5) !important;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4) !important;\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5) !important;\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6) !important;\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8) !important;\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9) !important;\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10) !important;\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16) !important;\n  }\n  .h-\\[18px\\] {\n    height: 18px !important;\n  }\n  .h-\\[var\\(--radix-select-trigger-height\\)\\] {\n    height: var(--radix-select-trigger-height) !important;\n  }\n  .h-auto\\! {\n    height: auto !important;\n  }\n  .h-full {\n    height: 100% !important;\n  }\n  .h-px {\n    height: 1px !important;\n  }\n  .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n    max-height: var(--radix-dropdown-menu-content-available-height) !important;\n  }\n  .max-h-96 {\n    max-height: calc(var(--spacing) * 96) !important;\n  }\n  .max-h-\\[200px\\] {\n    max-height: 200px !important;\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px !important;\n  }\n  .min-h-full {\n    min-height: 100% !important;\n  }\n  .min-h-screen {\n    min-height: 100vh !important;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0) !important;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4) !important;\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5) !important;\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6) !important;\n  }\n  .w-10 {\n    width: calc(var(--spacing) * 10) !important;\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12) !important;\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16) !important;\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20) !important;\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24) !important;\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28) !important;\n  }\n  .w-32 {\n    width: calc(var(--spacing) * 32) !important;\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40) !important;\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72) !important;\n  }\n  .w-fit {\n    width: -moz-fit-content !important;\n    width: fit-content !important;\n  }\n  .w-full {\n    width: 100% !important;\n  }\n  .max-w-\\[1200px\\] {\n    max-width: 1200px !important;\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem) !important;\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0) !important;\n  }\n  .min-w-\\[--radix-popper-anchor-width\\] {\n    min-width: --radix-popper-anchor-width !important;\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem !important;\n  }\n  .min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n    min-width: var(--radix-select-trigger-width) !important;\n  }\n  .flex-1 {\n    flex: 1 !important;\n  }\n  .shrink-0 {\n    flex-shrink: 0 !important;\n  }\n  .flex-grow {\n    flex-grow: 1 !important;\n  }\n  .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin) !important;\n  }\n  .origin-\\(--radix-popover-content-transform-origin\\) {\n    transform-origin: var(--radix-popover-content-transform-origin) !important;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1) !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .translate-x-\\[-50\\%\\] {\n    --tw-translate-x: -50% !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .translate-y-\\[-50\\%\\] {\n    --tw-translate-y: -50% !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .transform-none\\! {\n    transform: none !important;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse) !important;\n  }\n  .animate-spin {\n    animation: var(--animate-spin) !important;\n  }\n  .cursor-default {\n    cursor: default !important;\n  }\n  .cursor-pointer {\n    cursor: pointer !important;\n  }\n  .scroll-my-1 {\n    scroll-margin-block: calc(var(--spacing) * 1) !important;\n  }\n  .scroll-py-1 {\n    scroll-padding-block: calc(var(--spacing) * 1) !important;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n  }\n  .flex-col {\n    flex-direction: column !important;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse !important;\n  }\n  .items-center {\n    align-items: center !important;\n  }\n  .justify-between {\n    justify-content: space-between !important;\n  }\n  .justify-center {\n    justify-content: center !important;\n  }\n  .justify-end {\n    justify-content: flex-end !important;\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5) !important;\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2) !important;\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3) !important;\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4) !important;\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5) !important;\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6) !important;\n  }\n  .gap-\\[10px\\] {\n    gap: 10px !important;\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-x-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0 !important;\n      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)) !important;\n      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))) !important;\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden !important;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden !important;\n  }\n  .overflow-y-auto {\n    overflow-y: auto !important;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px !important;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px) !important;\n  }\n  .rounded-lg {\n    border-radius: var(--bs-radius) !important;\n  }\n  .rounded-md {\n    border-radius: calc(var(--bs-radius) - 2px) !important;\n  }\n  .rounded-sm {\n    border-radius: calc(var(--bs-radius) - 4px) !important;\n  }\n  .rounded-xs {\n    border-radius: var(--radius-xs) !important;\n  }\n  .border {\n    border-style: var(--tw-border-style) !important;\n    border-width: 1px !important;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style) !important;\n    border-bottom-width: 1px !important;\n  }\n  .border-input {\n    border-color: var(--bs-input) !important;\n  }\n  .border-primary {\n    border-color: var(--bs-primary) !important;\n  }\n  .bg-accent {\n    background-color: var(--bs-accent) !important;\n  }\n  .bg-background {\n    background-color: var(--bs-background) !important;\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent) !important;\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent) !important;\n    }\n  }\n  .bg-border {\n    background-color: var(--bs-border) !important;\n  }\n  .bg-destructive {\n    background-color: var(--bs-destructive) !important;\n  }\n  .bg-muted {\n    background-color: var(--bs-muted) !important;\n  }\n  .bg-popover {\n    background-color: var(--bs-popover) !important;\n  }\n  .bg-primary {\n    background-color: var(--bs-primary) !important;\n  }\n  .bg-secondary {\n    background-color: var(--bs-secondary) !important;\n  }\n  .bg-transparent {\n    background-color: transparent !important;\n  }\n  .fill-current {\n    fill: currentcolor !important;\n  }\n  .fill-primary {\n    fill: var(--bs-primary) !important;\n  }\n  .object-cover {\n    -o-object-fit: cover !important;\n       object-fit: cover !important;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0) !important;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1) !important;\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4) !important;\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6) !important;\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2) !important;\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3) !important;\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4) !important;\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6) !important;\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1) !important;\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5) !important;\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2) !important;\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3) !important;\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6) !important;\n  }\n  .py-8 {\n    padding-block: calc(var(--spacing) * 8) !important;\n  }\n  .pt-0 {\n    padding-top: calc(var(--spacing) * 0) !important;\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2) !important;\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4) !important;\n  }\n  .pt-8 {\n    padding-top: calc(var(--spacing) * 8) !important;\n  }\n  .pr-0 {\n    padding-right: calc(var(--spacing) * 0) !important;\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2) !important;\n  }\n  .pr-8 {\n    padding-right: calc(var(--spacing) * 8) !important;\n  }\n  .pb-0 {\n    padding-bottom: calc(var(--spacing) * 0) !important;\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2) !important;\n  }\n  .pl-0 {\n    padding-left: calc(var(--spacing) * 0) !important;\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2) !important;\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8) !important;\n  }\n  .text-center {\n    text-align: center !important;\n  }\n  .text-right {\n    text-align: right !important;\n  }\n  .text-base {\n    font-size: var(--text-base) !important;\n    line-height: var(--tw-leading, var(--text-base--line-height)) !important;\n  }\n  .text-lg {\n    font-size: var(--text-lg) !important;\n    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;\n  }\n  .text-sm {\n    font-size: var(--text-sm) !important;\n    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n  }\n  .text-xs {\n    font-size: var(--text-xs) !important;\n    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;\n  }\n  .leading-none {\n    --tw-leading: 1 !important;\n    line-height: 1 !important;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold) !important;\n    font-weight: var(--font-weight-bold) !important;\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium) !important;\n    font-weight: var(--font-weight-medium) !important;\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold) !important;\n    font-weight: var(--font-weight-semibold) !important;\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest) !important;\n    letter-spacing: var(--tracking-widest) !important;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis !important;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap !important;\n  }\n  .text-background {\n    color: var(--bs-background) !important;\n  }\n  .text-current {\n    color: currentcolor !important;\n  }\n  .text-destructive {\n    color: var(--bs-destructive) !important;\n  }\n  .text-destructive-foreground {\n    color: var(--bs-destructive-foreground) !important;\n  }\n  .text-foreground {\n    color: var(--bs-foreground) !important;\n  }\n  .text-muted-foreground {\n    color: var(--bs-muted-foreground) !important;\n  }\n  .text-popover-foreground {\n    color: var(--bs-popover-foreground) !important;\n  }\n  .text-primary {\n    color: var(--bs-primary) !important;\n  }\n  .text-primary-foreground {\n    color: var(--bs-primary-foreground) !important;\n  }\n  .text-red-500 {\n    color: var(--color-red-500) !important;\n  }\n  .text-secondary-foreground {\n    color: var(--bs-secondary-foreground) !important;\n  }\n  .text-white {\n    color: var(--color-white) !important;\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px !important;\n  }\n  .opacity-0 {\n    opacity: 0% !important;\n  }\n  .opacity-50 {\n    opacity: 50% !important;\n  }\n  .opacity-70 {\n    opacity: 70% !important;\n  }\n  .opacity-100 {\n    opacity: 100% !important;\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)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .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)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .shadow-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .ring-offset-background {\n    --tw-ring-offset-color: var(--bs-background) !important;\n  }\n  .outline-hidden {\n    --tw-outline-style: none !important;\n    outline-style: none !important;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent !important;\n      outline-offset: 2px !important;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style) !important;\n    outline-width: 1px !important;\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 !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-opacity {\n    transition-property: opacity !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-shadow {\n    transition-property: box-shadow !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-none {\n    transition-property: none !important;\n  }\n  .duration-200 {\n    --tw-duration: 200ms !important;\n    transition-duration: 200ms !important;\n  }\n  .outline-none {\n    --tw-outline-style: none !important;\n    outline-style: none !important;\n  }\n  .select-none {\n    -webkit-user-select: none !important;\n    -moz-user-select: none !important;\n         user-select: none !important;\n  }\n  .duration-200 {\n    animation-duration: 200ms !important;\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none !important;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50% !important;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed !important;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50% !important;\n    }\n  }\n  .selection\\:bg-primary {\n    & *::-moz-selection {\n      background-color: var(--bs-primary) !important;\n    }\n    & *::selection {\n      background-color: var(--bs-primary) !important;\n    }\n    &::-moz-selection {\n      background-color: var(--bs-primary) !important;\n    }\n    &::selection {\n      background-color: var(--bs-primary) !important;\n    }\n  }\n  .selection\\:text-primary-foreground {\n    & *::-moz-selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    & *::selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    &::-moz-selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    &::selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex !important;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7) !important;\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style) !important;\n      border-width: 0px !important;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent !important;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm) !important;\n      line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium) !important;\n      font-weight: var(--font-weight-medium) !important;\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--bs-foreground) !important;\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::-moz-placeholder {\n      color: var(--bs-muted-foreground) !important;\n    }\n    &::placeholder {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-accent) !important;\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-destructive) 90%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-primary) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-primary) 90%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-secondary) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-secondary) 80%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--bs-accent-foreground) !important;\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline !important;\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100% !important;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .focus\\:ring-1 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .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) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .focus\\:ring-ring {\n    &:focus {\n      --tw-ring-color: var(--bs-ring) !important;\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px !important;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n    }\n  }\n  .focus\\:outline-hidden {\n    &:focus {\n      --tw-outline-style: none !important;\n      outline-style: none !important;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent !important;\n        outline-offset: 2px !important;\n      }\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none !important;\n      outline-style: none !important;\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--bs-ring) !important;\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) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .focus-visible\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: var(--bs-destructive) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n      }\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: var(--bs-ring) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-ring) 50%, transparent) !important;\n      }\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none !important;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed !important;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50% !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5) !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3) !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4) !important;\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--bs-destructive) !important;\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: var(--bs-destructive) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n      }\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none !important;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50% !important;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &[data-disabled=\"true\"] {\n      pointer-events: none !important;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:opacity-50 {\n    &[data-disabled=\"true\"] {\n      opacity: 50% !important;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--bs-destructive-foreground) !important;\n    }\n  }\n  .data-\\[inset\\]\\:pl-8 {\n    &[data-inset] {\n      padding-left: calc(var(--spacing) * 8) !important;\n    }\n  }\n  .data-\\[placeholder\\]\\:text-muted-foreground {\n    &[data-placeholder] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .data-\\[selected\\=true\\]\\:bg-accent {\n    &[data-selected=\"true\"] {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .data-\\[selected\\=true\\]\\:text-accent-foreground {\n    &[data-selected=\"true\"] {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:translate-y-1 {\n    &[data-side=\"bottom\"] {\n      --tw-translate-y: calc(var(--spacing) * 1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem !important;\n    }\n  }\n  .data-\\[side\\=left\\]\\:-translate-x-1 {\n    &[data-side=\"left\"] {\n      --tw-translate-x: calc(var(--spacing) * -1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem !important;\n    }\n  }\n  .data-\\[side\\=right\\]\\:translate-x-1 {\n    &[data-side=\"right\"] {\n      --tw-translate-x: calc(var(--spacing) * 1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem !important;\n    }\n  }\n  .data-\\[side\\=top\\]\\:-translate-y-1 {\n    &[data-side=\"top\"] {\n      --tw-translate-y: calc(var(--spacing) * -1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem !important;\n    }\n  }\n  .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n    :is(& *) {\n      &[data-slot=\"command-input-wrapper\"] {\n        height: calc(var(--spacing) * 12) !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        overflow: hidden !important;\n        display: -webkit-box !important;\n        -webkit-box-orient: vertical !important;\n        -webkit-line-clamp: 1 !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        display: flex !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        align-items: center !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        gap: calc(var(--spacing) * 2) !important;\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--bs-primary) !important;\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--bs-primary) !important;\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--bs-primary-foreground) !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit !important;\n      animation-duration: 150ms !important;\n      --tw-exit-opacity: initial !important;\n      --tw-exit-scale: initial !important;\n      --tw-exit-rotate: initial !important;\n      --tw-exit-translate-x: initial !important;\n      --tw-exit-translate-y: initial !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0 !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95 !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:bg-accent {\n    &[data-state=\"open\"] {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-accent-foreground {\n    &[data-state=\"open\"] {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-muted-foreground {\n    &[data-state=\"open\"] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter !important;\n      animation-duration: 150ms !important;\n      --tw-enter-opacity: initial !important;\n      --tw-enter-scale: initial !important;\n      --tw-enter-rotate: initial !important;\n      --tw-enter-translate-x: initial !important;\n      --tw-enter-translate-y: initial !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0 !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95 !important;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      color: var(--bs-destructive) !important;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        background-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-destructive) 10%, transparent) !important;\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        color: var(--bs-destructive) !important;\n      }\n    }\n  }\n  .sm\\:max-h-\\[270px\\] {\n    @media (width >= 40rem) {\n      max-height: 270px !important;\n    }\n  }\n  .sm\\:max-w-\\[500px\\] {\n    @media (width >= 40rem) {\n      max-width: 500px !important;\n    }\n  }\n  .sm\\:max-w-lg {\n    @media (width >= 40rem) {\n      max-width: var(--container-lg) !important;\n    }\n  }\n  .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row !important;\n    }\n  }\n  .sm\\:justify-end {\n    @media (width >= 40rem) {\n      justify-content: flex-end !important;\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left !important;\n    }\n  }\n  .md\\:order-last {\n    @media (width >= 48rem) {\n      order: 9999 !important;\n    }\n  }\n  .md\\:col-span-2 {\n    @media (width >= 48rem) {\n      grid-column: span 2 / span 2 !important;\n    }\n  }\n  .md\\:col-span-3 {\n    @media (width >= 48rem) {\n      grid-column: span 3 / span 3 !important;\n    }\n  }\n  .md\\:col-span-4 {\n    @media (width >= 48rem) {\n      grid-column: span 4 / span 4 !important;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n    }\n  }\n  .md\\:grid-cols-7 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(7, minmax(0, 1fr)) !important;\n    }\n  }\n  .md\\:px-8 {\n    @media (width >= 48rem) {\n      padding-inline: calc(var(--spacing) * 8) !important;\n    }\n  }\n  .md\\:py-12 {\n    @media (width >= 48rem) {\n      padding-block: calc(var(--spacing) * 12) !important;\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm) !important;\n      line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-visible {\n        --tw-ring-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 40%, transparent) !important;\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(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 40%, transparent) !important;\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(--bs-destructive) !important;\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n          }\n        }\n      }\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n    & [cmdk-group-heading] {\n      padding-inline: calc(var(--spacing) * 2) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n    & [cmdk-group-heading] {\n      padding-block: calc(var(--spacing) * 1.5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n    & [cmdk-group-heading] {\n      font-size: var(--text-xs) !important;\n      line-height: var(--tw-leading, var(--text-xs--line-height)) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n    & [cmdk-group-heading] {\n      --tw-font-weight: var(--font-weight-medium) !important;\n      font-weight: var(--font-weight-medium) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n    & [cmdk-group-heading] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n    & [cmdk-group] {\n      padding-inline: calc(var(--spacing) * 2) !important;\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) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n    & [cmdk-input-wrapper] svg {\n      height: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n    & [cmdk-input-wrapper] svg {\n      width: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n    & [cmdk-input] {\n      height: calc(var(--spacing) * 12) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n    & [cmdk-item] {\n      padding-inline: calc(var(--spacing) * 2) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n    & [cmdk-item] {\n      padding-block: calc(var(--spacing) * 3) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n    & [cmdk-item] svg {\n      height: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n    & [cmdk-item] svg {\n      width: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none !important;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0 !important;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4) !important;\n      height: calc(var(--spacing) * 4) !important;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:flex {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          display: flex !important;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:items-center {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          align-items: center !important;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:gap-2 {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          gap: calc(var(--spacing) * 2) !important;\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n    &[data-variant=\"destructive\"] {\n      :is(& > *) {\n        &:is(svg) {\n          color: var(--bs-destructive) !important;\n        }\n      }\n    }\n  }\n  .\\[\\&\\>span\\]\\:line-clamp-1 {\n    &>span {\n      overflow: hidden !important;\n      display: -webkit-box !important;\n      -webkit-box-orient: vertical !important;\n      -webkit-line-clamp: 1 !important;\n    }\n  }\n}\n.checkout-embed {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.145 0 0);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.145 0 0);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.145 0 0);\n    --primary: oklch(0.205 0 0);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.97 0 0);\n    --secondary-foreground: oklch(0.205 0 0);\n    --muted: oklch(0.97 0 0);\n    --muted-foreground: oklch(0.556 0 0);\n    --accent: oklch(0.97 0 0);\n    --accent-foreground: oklch(0.205 0 0);\n    --destructive: oklch(0.577 0.245 27.325);\n    --destructive-foreground: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0 0);\n    --input: oklch(0.922 0 0);\n    --ring: oklch(0.708 0 0);\n    --chart-1: oklch(0.646 0.222 41.116);\n    --chart-2: oklch(0.6 0.118 184.704);\n    --chart-3: oklch(0.398 0.07 227.392);\n    --chart-4: oklch(0.828 0.189 84.429);\n    --chart-5: oklch(0.769 0.188 70.08);\n    --radius: 0.625rem;\n    --sidebar: oklch(0.985 0 0);\n    --sidebar-foreground: oklch(0.145 0 0);\n    --sidebar-primary: oklch(0.205 0 0);\n    --sidebar-primary-foreground: oklch(0.985 0 0);\n    --sidebar-accent: oklch(0.97 0 0);\n    --sidebar-accent-foreground: oklch(0.205 0 0);\n    --sidebar-border: oklch(0.922 0 0);\n    --sidebar-ring: oklch(0.708 0 0);\n  }\n  @layer base {\n    * {\n      border-color: var(--bs-border) !important;\n      outline-color: var(--bs-ring) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        outline-color: color-mix(in oklab, var(--bs-ring) 50%, transparent) !important;\n      }\n    }\n    .checkout-embed {\n      background-color: var(--bs-background) !important;\n      font-family: var(--bs-font-sans), Helvetica, Arial, apple-system, sans-serif !important;\n      color: var(--bs-foreground) !important;\n    }\n    h2 {\n      font-size: var(--text-2xl) !important;\n      line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;\n      --tw-font-weight: var(--font-weight-bold) !important;\n      font-weight: var(--font-weight-bold) !important;\n      --tw-tracking: var(--tracking-tight) !important;\n      letter-spacing: var(--tracking-tight) !important;\n    }\n    p {\n      --tw-tracking: var(--tracking-tight) !important;\n      letter-spacing: var(--tracking-tight) !important;\n    }\n  }\n  @layer utilities {\n    .scrollbar-hidden {\n      scrollbar-width: none;\n    }\n    .scrollbar-hidden::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n";
+var css_248z = "/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-lg: 32rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-widest: 0.1em;\n    --radius-xs: 0.125rem;\n    --animate-spin: spin 1s linear infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--bs-font-sans), Helvetica, Arial, apple-system, sans-serif;\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -moz-tab-size: 4;\n      -o-tab-size: 4;\n         tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::-moz-placeholder {\n    opacity: 1;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::-moz-placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    -webkit-appearance: button;\n       -moz-appearance: button;\n            appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none !important;\n  }\n  .sr-only {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0, 0, 0, 0) !important;\n    white-space: nowrap !important;\n    border-width: 0 !important;\n  }\n  .absolute {\n    position: absolute !important;\n  }\n  .fixed {\n    position: fixed !important;\n  }\n  .relative {\n    position: relative !important;\n  }\n  .sticky {\n    position: sticky !important;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0) !important;\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2) !important;\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0) !important;\n  }\n  .top-0\\.5 {\n    top: calc(var(--spacing) * 0.5) !important;\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%) !important;\n  }\n  .top-4 {\n    top: calc(var(--spacing) * 4) !important;\n  }\n  .top-\\[50\\%\\] {\n    top: 50% !important;\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2) !important;\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2) !important;\n  }\n  .right-4 {\n    right: calc(var(--spacing) * 4) !important;\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%) !important;\n  }\n  .left-2 {\n    left: calc(var(--spacing) * 2) !important;\n  }\n  .left-\\[50\\%\\] {\n    left: 50% !important;\n  }\n  .z-10 {\n    z-index: 10 !important;\n  }\n  .z-50 {\n    z-index: 50 !important;\n  }\n  .order-first {\n    order: -9999 !important;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2 !important;\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1) !important;\n  }\n  .mx-auto {\n    margin-inline: auto !important;\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1) !important;\n  }\n  .mt-8 {\n    margin-top: calc(var(--spacing) * 8) !important;\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2) !important;\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6) !important;\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4) !important;\n  }\n  .ml-auto {\n    margin-left: auto !important;\n  }\n  .flex {\n    display: flex !important;\n  }\n  .grid {\n    display: grid !important;\n  }\n  .inline-flex {\n    display: inline-flex !important;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1 !important;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2) !important;\n    height: calc(var(--spacing) * 2) !important;\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5) !important;\n    height: calc(var(--spacing) * 3.5) !important;\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4) !important;\n    height: calc(var(--spacing) * 4) !important;\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9) !important;\n    height: calc(var(--spacing) * 9) !important;\n  }\n  .size-16 {\n    width: calc(var(--spacing) * 16) !important;\n    height: calc(var(--spacing) * 16) !important;\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3) !important;\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5) !important;\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4) !important;\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5) !important;\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6) !important;\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8) !important;\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9) !important;\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10) !important;\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16) !important;\n  }\n  .h-\\[18px\\] {\n    height: 18px !important;\n  }\n  .h-\\[var\\(--radix-select-trigger-height\\)\\] {\n    height: var(--radix-select-trigger-height) !important;\n  }\n  .h-auto {\n    height: auto !important;\n  }\n  .h-auto\\! {\n    height: auto !important;\n  }\n  .h-full {\n    height: 100% !important;\n  }\n  .h-px {\n    height: 1px !important;\n  }\n  .max-h-\\(--radix-dropdown-menu-content-available-height\\) {\n    max-height: var(--radix-dropdown-menu-content-available-height) !important;\n  }\n  .max-h-96 {\n    max-height: calc(var(--spacing) * 96) !important;\n  }\n  .max-h-\\[200px\\] {\n    max-height: 200px !important;\n  }\n  .max-h-\\[300px\\] {\n    max-height: 300px !important;\n  }\n  .min-h-full {\n    min-height: 100% !important;\n  }\n  .min-h-screen {\n    min-height: 100vh !important;\n  }\n  .w-0 {\n    width: calc(var(--spacing) * 0) !important;\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4) !important;\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5) !important;\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6) !important;\n  }\n  .w-10 {\n    width: calc(var(--spacing) * 10) !important;\n  }\n  .w-12 {\n    width: calc(var(--spacing) * 12) !important;\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16) !important;\n  }\n  .w-20 {\n    width: calc(var(--spacing) * 20) !important;\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24) !important;\n  }\n  .w-28 {\n    width: calc(var(--spacing) * 28) !important;\n  }\n  .w-32 {\n    width: calc(var(--spacing) * 32) !important;\n  }\n  .w-40 {\n    width: calc(var(--spacing) * 40) !important;\n  }\n  .w-72 {\n    width: calc(var(--spacing) * 72) !important;\n  }\n  .w-fit {\n    width: -moz-fit-content !important;\n    width: fit-content !important;\n  }\n  .w-full {\n    width: 100% !important;\n  }\n  .max-w-\\[1200px\\] {\n    max-width: 1200px !important;\n  }\n  .max-w-\\[calc\\(100\\%-2rem\\)\\] {\n    max-width: calc(100% - 2rem) !important;\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0) !important;\n  }\n  .min-w-\\[--radix-popper-anchor-width\\] {\n    min-width: --radix-popper-anchor-width !important;\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem !important;\n  }\n  .min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n    min-width: var(--radix-select-trigger-width) !important;\n  }\n  .flex-1 {\n    flex: 1 !important;\n  }\n  .shrink-0 {\n    flex-shrink: 0 !important;\n  }\n  .flex-grow {\n    flex-grow: 1 !important;\n  }\n  .origin-\\(--radix-dropdown-menu-content-transform-origin\\) {\n    transform-origin: var(--radix-dropdown-menu-content-transform-origin) !important;\n  }\n  .origin-\\(--radix-popover-content-transform-origin\\) {\n    transform-origin: var(--radix-popover-content-transform-origin) !important;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1) !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .translate-x-\\[-50\\%\\] {\n    --tw-translate-x: -50% !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .translate-y-\\[-50\\%\\] {\n    --tw-translate-y: -50% !important;\n    translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n  }\n  .transform-none\\! {\n    transform: none !important;\n  }\n  .animate-pulse {\n    animation: var(--animate-pulse) !important;\n  }\n  .animate-spin {\n    animation: var(--animate-spin) !important;\n  }\n  .cursor-default {\n    cursor: default !important;\n  }\n  .cursor-pointer {\n    cursor: pointer !important;\n  }\n  .scroll-my-1 {\n    scroll-margin-block: calc(var(--spacing) * 1) !important;\n  }\n  .scroll-py-1 {\n    scroll-padding-block: calc(var(--spacing) * 1) !important;\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n  }\n  .flex-col {\n    flex-direction: column !important;\n  }\n  .flex-col-reverse {\n    flex-direction: column-reverse !important;\n  }\n  .items-center {\n    align-items: center !important;\n  }\n  .justify-between {\n    justify-content: space-between !important;\n  }\n  .justify-center {\n    justify-content: center !important;\n  }\n  .justify-end {\n    justify-content: flex-end !important;\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5) !important;\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2) !important;\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3) !important;\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4) !important;\n  }\n  .gap-5 {\n    gap: calc(var(--spacing) * 5) !important;\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6) !important;\n  }\n  .gap-\\[10px\\] {\n    gap: 10px !important;\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0 !important;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)) !important;\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))) !important;\n    }\n  }\n  .space-x-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0 !important;\n      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse)) !important;\n      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))) !important;\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden !important;\n  }\n  .overflow-x-hidden {\n    overflow-x: hidden !important;\n  }\n  .overflow-y-auto {\n    overflow-y: auto !important;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px !important;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px) !important;\n  }\n  .rounded-lg {\n    border-radius: var(--bs-radius) !important;\n  }\n  .rounded-md {\n    border-radius: calc(var(--bs-radius) - 2px) !important;\n  }\n  .rounded-sm {\n    border-radius: calc(var(--bs-radius) - 4px) !important;\n  }\n  .rounded-xs {\n    border-radius: var(--radius-xs) !important;\n  }\n  .border {\n    border-style: var(--tw-border-style) !important;\n    border-width: 1px !important;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style) !important;\n    border-bottom-width: 1px !important;\n  }\n  .border-input {\n    border-color: var(--bs-input) !important;\n  }\n  .border-primary {\n    border-color: var(--bs-primary) !important;\n  }\n  .bg-accent {\n    background-color: var(--bs-accent) !important;\n  }\n  .bg-background {\n    background-color: var(--bs-background) !important;\n  }\n  .bg-black\\/50 {\n    background-color: color-mix(in srgb, #000 50%, transparent) !important;\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent) !important;\n    }\n  }\n  .bg-border {\n    background-color: var(--bs-border) !important;\n  }\n  .bg-destructive {\n    background-color: var(--bs-destructive) !important;\n  }\n  .bg-muted {\n    background-color: var(--bs-muted) !important;\n  }\n  .bg-popover {\n    background-color: var(--bs-popover) !important;\n  }\n  .bg-primary {\n    background-color: var(--bs-primary) !important;\n  }\n  .bg-secondary {\n    background-color: var(--bs-secondary) !important;\n  }\n  .bg-transparent {\n    background-color: transparent !important;\n  }\n  .fill-current {\n    fill: currentcolor !important;\n  }\n  .fill-primary {\n    fill: var(--bs-primary) !important;\n  }\n  .object-cover {\n    -o-object-fit: cover !important;\n       object-fit: cover !important;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0) !important;\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1) !important;\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4) !important;\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6) !important;\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2) !important;\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3) !important;\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4) !important;\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6) !important;\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1) !important;\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5) !important;\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2) !important;\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3) !important;\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6) !important;\n  }\n  .py-8 {\n    padding-block: calc(var(--spacing) * 8) !important;\n  }\n  .pt-2 {\n    padding-top: calc(var(--spacing) * 2) !important;\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4) !important;\n  }\n  .pt-8 {\n    padding-top: calc(var(--spacing) * 8) !important;\n  }\n  .pr-2 {\n    padding-right: calc(var(--spacing) * 2) !important;\n  }\n  .pr-8 {\n    padding-right: calc(var(--spacing) * 8) !important;\n  }\n  .pb-2 {\n    padding-bottom: calc(var(--spacing) * 2) !important;\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2) !important;\n  }\n  .pl-8 {\n    padding-left: calc(var(--spacing) * 8) !important;\n  }\n  .text-center {\n    text-align: center !important;\n  }\n  .text-right {\n    text-align: right !important;\n  }\n  .text-base {\n    font-size: var(--text-base) !important;\n    line-height: var(--tw-leading, var(--text-base--line-height)) !important;\n  }\n  .text-lg {\n    font-size: var(--text-lg) !important;\n    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;\n  }\n  .text-sm {\n    font-size: var(--text-sm) !important;\n    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n  }\n  .text-xs {\n    font-size: var(--text-xs) !important;\n    line-height: var(--tw-leading, var(--text-xs--line-height)) !important;\n  }\n  .leading-none {\n    --tw-leading: 1 !important;\n    line-height: 1 !important;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold) !important;\n    font-weight: var(--font-weight-bold) !important;\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium) !important;\n    font-weight: var(--font-weight-medium) !important;\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold) !important;\n    font-weight: var(--font-weight-semibold) !important;\n  }\n  .tracking-widest {\n    --tw-tracking: var(--tracking-widest) !important;\n    letter-spacing: var(--tracking-widest) !important;\n  }\n  .text-ellipsis {\n    text-overflow: ellipsis !important;\n  }\n  .whitespace-nowrap {\n    white-space: nowrap !important;\n  }\n  .text-background {\n    color: var(--bs-background) !important;\n  }\n  .text-current {\n    color: currentcolor !important;\n  }\n  .text-destructive {\n    color: var(--bs-destructive) !important;\n  }\n  .text-destructive-foreground {\n    color: var(--bs-destructive-foreground) !important;\n  }\n  .text-foreground {\n    color: var(--bs-foreground) !important;\n  }\n  .text-muted-foreground {\n    color: var(--bs-muted-foreground) !important;\n  }\n  .text-popover-foreground {\n    color: var(--bs-popover-foreground) !important;\n  }\n  .text-primary {\n    color: var(--bs-primary) !important;\n  }\n  .text-primary-foreground {\n    color: var(--bs-primary-foreground) !important;\n  }\n  .text-red-500 {\n    color: var(--color-red-500) !important;\n  }\n  .text-secondary-foreground {\n    color: var(--bs-secondary-foreground) !important;\n  }\n  .text-white {\n    color: var(--color-white) !important;\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px !important;\n  }\n  .opacity-0 {\n    opacity: 0% !important;\n  }\n  .opacity-50 {\n    opacity: 50% !important;\n  }\n  .opacity-70 {\n    opacity: 70% !important;\n  }\n  .opacity-100 {\n    opacity: 100% !important;\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)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .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)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .shadow-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n  }\n  .ring-offset-background {\n    --tw-ring-offset-color: var(--bs-background) !important;\n  }\n  .outline-hidden {\n    --tw-outline-style: none !important;\n    outline-style: none !important;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent !important;\n      outline-offset: 2px !important;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style) !important;\n    outline-width: 1px !important;\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 !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-opacity {\n    transition-property: opacity !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-shadow {\n    transition-property: box-shadow !important;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;\n    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;\n  }\n  .transition-none {\n    transition-property: none !important;\n  }\n  .duration-200 {\n    --tw-duration: 200ms !important;\n    transition-duration: 200ms !important;\n  }\n  .outline-none {\n    --tw-outline-style: none !important;\n    outline-style: none !important;\n  }\n  .select-none {\n    -webkit-user-select: none !important;\n    -moz-user-select: none !important;\n         user-select: none !important;\n  }\n  .duration-200 {\n    animation-duration: 200ms !important;\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none !important;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50% !important;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed !important;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50% !important;\n    }\n  }\n  .selection\\:bg-primary {\n    & *::-moz-selection {\n      background-color: var(--bs-primary) !important;\n    }\n    & *::selection {\n      background-color: var(--bs-primary) !important;\n    }\n    &::-moz-selection {\n      background-color: var(--bs-primary) !important;\n    }\n    &::selection {\n      background-color: var(--bs-primary) !important;\n    }\n  }\n  .selection\\:text-primary-foreground {\n    & *::-moz-selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    & *::selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    &::-moz-selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n    &::selection {\n      color: var(--bs-primary-foreground) !important;\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex !important;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7) !important;\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style) !important;\n      border-width: 0px !important;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent !important;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm) !important;\n      line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium) !important;\n      font-weight: var(--font-weight-medium) !important;\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--bs-foreground) !important;\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::-moz-placeholder {\n      color: var(--bs-muted-foreground) !important;\n    }\n    &::placeholder {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-accent) !important;\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-destructive) 90%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-primary) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-primary) 90%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--bs-secondary) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-secondary) 80%, transparent) !important;\n        }\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--bs-accent-foreground) !important;\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline !important;\n      }\n    }\n  }\n  .hover\\:opacity-100 {\n    &:hover {\n      @media (hover: hover) {\n        opacity: 100% !important;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .focus\\:ring-1 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .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) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .focus\\:ring-ring {\n    &:focus {\n      --tw-ring-color: var(--bs-ring) !important;\n    }\n  }\n  .focus\\:ring-offset-2 {\n    &:focus {\n      --tw-ring-offset-width: 2px !important;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;\n    }\n  }\n  .focus\\:outline-hidden {\n    &:focus {\n      --tw-outline-style: none !important;\n      outline-style: none !important;\n      @media (forced-colors: active) {\n        outline: 2px solid transparent !important;\n        outline-offset: 2px !important;\n      }\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none !important;\n      outline-style: none !important;\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--bs-ring) !important;\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) !important;\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;\n    }\n  }\n  .focus-visible\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: var(--bs-destructive) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n      }\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: var(--bs-ring) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-ring) 50%, transparent) !important;\n      }\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none !important;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed !important;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50% !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5) !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3) !important;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4) !important;\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--bs-destructive) !important;\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: var(--bs-destructive) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n      }\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none !important;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50% !important;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &[data-disabled=\"true\"] {\n      pointer-events: none !important;\n    }\n  }\n  .data-\\[disabled\\=true\\]\\:opacity-50 {\n    &[data-disabled=\"true\"] {\n      opacity: 50% !important;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--bs-destructive-foreground) !important;\n    }\n  }\n  .data-\\[inset\\]\\:pl-8 {\n    &[data-inset] {\n      padding-left: calc(var(--spacing) * 8) !important;\n    }\n  }\n  .data-\\[placeholder\\]\\:text-muted-foreground {\n    &[data-placeholder] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .data-\\[selected\\=true\\]\\:bg-accent {\n    &[data-selected=\"true\"] {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .data-\\[selected\\=true\\]\\:text-accent-foreground {\n    &[data-selected=\"true\"] {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:translate-y-1 {\n    &[data-side=\"bottom\"] {\n      --tw-translate-y: calc(var(--spacing) * 1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem !important;\n    }\n  }\n  .data-\\[side\\=left\\]\\:-translate-x-1 {\n    &[data-side=\"left\"] {\n      --tw-translate-x: calc(var(--spacing) * -1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem !important;\n    }\n  }\n  .data-\\[side\\=right\\]\\:translate-x-1 {\n    &[data-side=\"right\"] {\n      --tw-translate-x: calc(var(--spacing) * 1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem !important;\n    }\n  }\n  .data-\\[side\\=top\\]\\:-translate-y-1 {\n    &[data-side=\"top\"] {\n      --tw-translate-y: calc(var(--spacing) * -1) !important;\n      translate: var(--tw-translate-x) var(--tw-translate-y) !important;\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem !important;\n    }\n  }\n  .\\*\\*\\:data-\\[slot\\=command-input-wrapper\\]\\:h-12 {\n    :is(& *) {\n      &[data-slot=\"command-input-wrapper\"] {\n        height: calc(var(--spacing) * 12) !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        overflow: hidden !important;\n        display: -webkit-box !important;\n        -webkit-box-orient: vertical !important;\n        -webkit-line-clamp: 1 !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        display: flex !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        align-items: center !important;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        gap: calc(var(--spacing) * 2) !important;\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--bs-primary) !important;\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--bs-primary) !important;\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--bs-primary-foreground) !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit !important;\n      animation-duration: 150ms !important;\n      --tw-exit-opacity: initial !important;\n      --tw-exit-scale: initial !important;\n      --tw-exit-rotate: initial !important;\n      --tw-exit-translate-x: initial !important;\n      --tw-exit-translate-y: initial !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0 !important;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95 !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:bg-accent {\n    &[data-state=\"open\"] {\n      background-color: var(--bs-accent) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-accent-foreground {\n    &[data-state=\"open\"] {\n      color: var(--bs-accent-foreground) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:text-muted-foreground {\n    &[data-state=\"open\"] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter !important;\n      animation-duration: 150ms !important;\n      --tw-enter-opacity: initial !important;\n      --tw-enter-scale: initial !important;\n      --tw-enter-rotate: initial !important;\n      --tw-enter-translate-x: initial !important;\n      --tw-enter-translate-y: initial !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0 !important;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95 !important;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      color: var(--bs-destructive) !important;\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:bg-destructive\\/10 {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        background-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--bs-destructive) 10%, transparent) !important;\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:focus\\:text-destructive {\n    &[data-variant=\"destructive\"] {\n      &:focus {\n        color: var(--bs-destructive) !important;\n      }\n    }\n  }\n  .sm\\:max-h-\\[270px\\] {\n    @media (width >= 40rem) {\n      max-height: 270px !important;\n    }\n  }\n  .sm\\:max-w-\\[500px\\] {\n    @media (width >= 40rem) {\n      max-width: 500px !important;\n    }\n  }\n  .sm\\:max-w-lg {\n    @media (width >= 40rem) {\n      max-width: var(--container-lg) !important;\n    }\n  }\n  .sm\\:flex-row {\n    @media (width >= 40rem) {\n      flex-direction: row !important;\n    }\n  }\n  .sm\\:justify-end {\n    @media (width >= 40rem) {\n      justify-content: flex-end !important;\n    }\n  }\n  .sm\\:text-left {\n    @media (width >= 40rem) {\n      text-align: left !important;\n    }\n  }\n  .md\\:order-last {\n    @media (width >= 48rem) {\n      order: 9999 !important;\n    }\n  }\n  .md\\:col-span-2 {\n    @media (width >= 48rem) {\n      grid-column: span 2 / span 2 !important;\n    }\n  }\n  .md\\:col-span-3 {\n    @media (width >= 48rem) {\n      grid-column: span 3 / span 3 !important;\n    }\n  }\n  .md\\:col-span-4 {\n    @media (width >= 48rem) {\n      grid-column: span 4 / span 4 !important;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n    }\n  }\n  .md\\:grid-cols-7 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(7, minmax(0, 1fr)) !important;\n    }\n  }\n  .md\\:px-8 {\n    @media (width >= 48rem) {\n      padding-inline: calc(var(--spacing) * 8) !important;\n    }\n  }\n  .md\\:py-12 {\n    @media (width >= 48rem) {\n      padding-block: calc(var(--spacing) * 12) !important;\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm) !important;\n      line-height: var(--tw-leading, var(--text-sm--line-height)) !important;\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    @media (prefers-color-scheme: dark) {\n      &:focus-visible {\n        --tw-ring-color: var(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 40%, transparent) !important;\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(--bs-destructive) !important;\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--bs-destructive) 40%, transparent) !important;\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(--bs-destructive) !important;\n          @supports (color: color-mix(in lab, red, red)) {\n            background-color: color-mix(in oklab, var(--bs-destructive) 20%, transparent) !important;\n          }\n        }\n      }\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:px-2 {\n    & [cmdk-group-heading] {\n      padding-inline: calc(var(--spacing) * 2) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:py-1\\.5 {\n    & [cmdk-group-heading] {\n      padding-block: calc(var(--spacing) * 1.5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-xs {\n    & [cmdk-group-heading] {\n      font-size: var(--text-xs) !important;\n      line-height: var(--tw-leading, var(--text-xs--line-height)) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:font-medium {\n    & [cmdk-group-heading] {\n      --tw-font-weight: var(--font-weight-medium) !important;\n      font-weight: var(--font-weight-medium) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group-heading\\]\\]\\:text-muted-foreground {\n    & [cmdk-group-heading] {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-group\\]\\]\\:px-2 {\n    & [cmdk-group] {\n      padding-inline: calc(var(--spacing) * 2) !important;\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) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:h-5 {\n    & [cmdk-input-wrapper] svg {\n      height: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input-wrapper\\]_svg\\]\\:w-5 {\n    & [cmdk-input-wrapper] svg {\n      width: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-input\\]\\]\\:h-12 {\n    & [cmdk-input] {\n      height: calc(var(--spacing) * 12) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:px-2 {\n    & [cmdk-item] {\n      padding-inline: calc(var(--spacing) * 2) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]\\]\\:py-3 {\n    & [cmdk-item] {\n      padding-block: calc(var(--spacing) * 3) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:h-5 {\n    & [cmdk-item] svg {\n      height: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_\\[cmdk-item\\]_svg\\]\\:w-5 {\n    & [cmdk-item] svg {\n      width: calc(var(--spacing) * 5) !important;\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none !important;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0 !important;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4) !important;\n      height: calc(var(--spacing) * 4) !important;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--bs-muted-foreground) !important;\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:flex {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          display: flex !important;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:items-center {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          align-items: center !important;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:gap-2 {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          gap: calc(var(--spacing) * 2) !important;\n        }\n      }\n    }\n  }\n  .data-\\[variant\\=destructive\\]\\:\\*\\:\\[svg\\]\\:\\!text-destructive {\n    &[data-variant=\"destructive\"] {\n      :is(& > *) {\n        &:is(svg) {\n          color: var(--bs-destructive) !important;\n        }\n      }\n    }\n  }\n  .\\[\\&\\>span\\]\\:line-clamp-1 {\n    &>span {\n      overflow: hidden !important;\n      display: -webkit-box !important;\n      -webkit-box-orient: vertical !important;\n      -webkit-line-clamp: 1 !important;\n    }\n  }\n}\n.checkout-embed {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.145 0 0);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.145 0 0);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.145 0 0);\n    --primary: oklch(0.205 0 0);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.97 0 0);\n    --secondary-foreground: oklch(0.205 0 0);\n    --muted: oklch(0.97 0 0);\n    --muted-foreground: oklch(0.556 0 0);\n    --accent: oklch(0.97 0 0);\n    --accent-foreground: oklch(0.205 0 0);\n    --destructive: oklch(0.577 0.245 27.325);\n    --destructive-foreground: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0 0);\n    --input: oklch(0.922 0 0);\n    --ring: oklch(0.708 0 0);\n    --chart-1: oklch(0.646 0.222 41.116);\n    --chart-2: oklch(0.6 0.118 184.704);\n    --chart-3: oklch(0.398 0.07 227.392);\n    --chart-4: oklch(0.828 0.189 84.429);\n    --chart-5: oklch(0.769 0.188 70.08);\n    --radius: 0.625rem;\n    --sidebar: oklch(0.985 0 0);\n    --sidebar-foreground: oklch(0.145 0 0);\n    --sidebar-primary: oklch(0.205 0 0);\n    --sidebar-primary-foreground: oklch(0.985 0 0);\n    --sidebar-accent: oklch(0.97 0 0);\n    --sidebar-accent-foreground: oklch(0.205 0 0);\n    --sidebar-border: oklch(0.922 0 0);\n    --sidebar-ring: oklch(0.708 0 0);\n  }\n  @layer base {\n    * {\n      border-color: var(--bs-border) !important;\n      outline-color: var(--bs-ring) !important;\n      @supports (color: color-mix(in lab, red, red)) {\n        outline-color: color-mix(in oklab, var(--bs-ring) 50%, transparent) !important;\n      }\n    }\n    .checkout-embed {\n      background-color: var(--bs-background) !important;\n      font-family: var(--bs-font-sans), Helvetica, Arial, apple-system, sans-serif !important;\n      color: var(--bs-foreground) !important;\n    }\n    h2 {\n      font-size: var(--text-2xl) !important;\n      line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;\n      --tw-font-weight: var(--font-weight-bold) !important;\n      font-weight: var(--font-weight-bold) !important;\n      --tw-tracking: var(--tracking-tight) !important;\n      letter-spacing: var(--tracking-tight) !important;\n    }\n    p {\n      --tw-tracking: var(--tracking-tight) !important;\n      letter-spacing: var(--tracking-tight) !important;\n    }\n  }\n  @layer utilities {\n    .scrollbar-hidden {\n      scrollbar-width: none;\n    }\n    .scrollbar-hidden::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-space-x-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes pulse {\n  50% {\n    opacity: 0.5;\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n";
 styleInject(css_248z);
 
 export { index as CheckoutEmbed, PaymentElement$1 as PaymentElement, useCart, useCheckout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstore/react",
-  "version": "0.2.32",
+  "version": "0.2.34",
   "description": "E-commerce for Developers",
   "private": false,
   "publishConfig": {