@betterstore/react 0.2.6 → 0.2.10

package/dist/index.cjs.js

@@ -13,9 +13,9 @@ var LabelPrimitive = require('@radix-ui/react-label');
 var SelectPrimitive = require('@radix-ui/react-select');
 var resolvers = require('@hookform/resolvers');
 var zod = require('zod');
-var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var reactStripeJs = require('@stripe/react-stripe-js');
 var stripeJs = require('@stripe/stripe-js');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -591,18 +591,10 @@ const customerSchema = zod.z.object({
 const shippingMethodSchema = zod.z.object({
     method: zod.z.enum(["economy", "standard"]),
 });
-// Payment method schema
-const paymentMethodSchema = zod.z.object({
-    cardNumber: zod.z.string().min(1, "Card number is required"),
-    expiryDate: zod.z.string().min(1, "Expiry date is required"),
-    cvv: zod.z.string().min(1, "CVV is required"),
-    nameOnCard: zod.z.string().min(1, "Name is required"),
-});
 // Combined checkout schema
 zod.z.object({
     customer: customerSchema,
     shipping: shippingMethodSchema,
-    payment: paymentMethodSchema,
 });
 
 function CustomerForm({ initialData, onSubmit, onBack, }) {
@@ -621,99 +613,141 @@ function CustomerForm({ initialData, onSubmit, onBack, }) {
             saveInfo: false,
         },
     });
-    return (React.createElement("div", { className: "space-y-6" },
-        React.createElement("div", { className: "space-y-2" },
-            React.createElement("div", { className: "flex items-center justify-between" },
-                React.createElement("h2", { className: "text-2xl font-bold text-white" }, "Contact")),
-            React.createElement(FormField, { control: form.control, name: "email", render: ({ field }) => (React.createElement(FormItem, null,
-                    React.createElement(FormLabel, { className: "text-white" }, "Email or mobile phone number"),
-                    React.createElement(FormControl, null,
-                        React.createElement(Input, Object.assign({ placeholder: "email@example.com", className: "bg-black border-gray-700 text-white" }, field))),
-                    React.createElement(FormMessage, null))) }),
-            React.createElement(FormField, { control: form.control, name: "marketingConsent", render: ({ field }) => (React.createElement(FormItem, { className: "flex flex-row items-start space-x-2 space-y-0" },
-                    React.createElement(FormControl, null,
-                        React.createElement(Checkbox, { checked: field.value, onCheckedChange: field.onChange, className: "data-[state=checked]:bg-blue-600" })),
-                    React.createElement(FormLabel, { className: "text-sm font-normal text-gray-400" }, "Email me with news and offers"))) }),
-            React.createElement("div", { className: "flex items-center justify-between" },
-                React.createElement("h2", { className: "text-2xl font-bold text-white" }, "Shipping customer")),
-            React.createElement("div", { className: "flex items-center justify-between text-sm" },
-                React.createElement("div", { className: "text-white" },
-                    React.createElement("span", null, "Contact"),
-                    React.createElement("span", { className: "ml-2 text-gray-400" }, "contactemail")),
-                React.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change"))),
-        React.createElement(Form, Object.assign({}, form),
-            React.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
-                React.createElement(FormField, { control: form.control, name: "country", render: ({ field }) => (React.createElement(FormItem, null,
-                        React.createElement(FormLabel, { className: "text-white" }, "Country/Region"),
-                        React.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value },
-                            React.createElement(FormControl, null,
-                                React.createElement(SelectTrigger, { className: "bg-black border-gray-700 text-white" },
-                                    React.createElement(SelectValue, { placeholder: "Select a country" }))),
-                            React.createElement(SelectContent, { className: "bg-gray-900 text-white border-gray-700" },
-                                React.createElement(SelectItem, { value: "United States" }, "United States"),
-                                React.createElement(SelectItem, { value: "Canada" }, "Canada"),
-                                React.createElement(SelectItem, { value: "United Kingdom" }, "United Kingdom"))),
-                        React.createElement(FormMessage, null))) }),
-                React.createElement("div", { className: "grid grid-cols-2 gap-4" },
-                    React.createElement(FormField, { control: form.control, name: "firstName", render: ({ field }) => (React.createElement(FormItem, null,
-                            React.createElement(FormLabel, { className: "text-white" }, "First name (optional)"),
+    return (React.createElement(Form, Object.assign({}, form),
+        React.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
+            React.createElement("div", { className: "space-y-6" },
+                React.createElement("div", { className: "space-y-2" },
+                    React.createElement("div", { className: "flex items-center justify-between" },
+                        React.createElement("h2", { className: "text-2xl font-bold text-white" }, "Contact")),
+                    React.createElement(FormField, { control: form.control, name: "email", render: ({ field }) => (React.createElement(FormItem, null,
+                            React.createElement(FormLabel, { className: "text-white" }, "Email or mobile phone number"),
                             React.createElement(FormControl, null,
-                                React.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
+                                React.createElement(Input, Object.assign({ placeholder: "email@example.com", className: "bg-black border-gray-700 text-white" }, field))),
                             React.createElement(FormMessage, null))) }),
-                    React.createElement(FormField, { control: form.control, name: "lastName", render: ({ field }) => (React.createElement(FormItem, null,
-                            React.createElement(FormLabel, { className: "text-white" }, "Last name"),
-                            React.createElement(FormControl, null,
-                                React.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
-                            React.createElement(FormMessage, null))) })),
-                React.createElement(FormField, { control: form.control, name: "apartment", render: ({ field }) => (React.createElement(FormItem, null,
-                        React.createElement(FormLabel, { className: "text-white" }, "Apartment, suite, etc. (optional)"),
-                        React.createElement(FormControl, null,
-                            React.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
-                        React.createElement(FormMessage, null))) }),
-                React.createElement("div", { className: "grid grid-cols-3 gap-4" },
-                    React.createElement(FormField, { control: form.control, name: "city", render: ({ field }) => (React.createElement(FormItem, null,
-                            React.createElement(FormLabel, { className: "text-white" }, "City"),
+                    React.createElement(FormField, { control: form.control, name: "marketingConsent", render: ({ field }) => (React.createElement(FormItem, { className: "flex flex-row items-start space-x-2 space-y-0" },
                             React.createElement(FormControl, null,
-                                React.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
-                            React.createElement(FormMessage, null))) }),
-                    React.createElement(FormField, { control: form.control, name: "state", render: ({ field }) => (React.createElement(FormItem, null,
-                            React.createElement(FormLabel, { className: "text-white" }, "State"),
+                                React.createElement(Checkbox, { checked: field.value, onCheckedChange: field.onChange, className: "data-[state=checked]:bg-blue-600" })),
+                            React.createElement(FormLabel, { className: "text-sm font-normal text-gray-400" }, "Email me with news and offers"))) }),
+                    React.createElement("div", { className: "flex items-center justify-between" },
+                        React.createElement("h2", { className: "text-2xl font-bold text-white" }, "Shipping customer")),
+                    React.createElement("div", { className: "flex items-center justify-between text-sm" },
+                        React.createElement("div", { className: "text-white" },
+                            React.createElement("span", null, "Contact"),
+                            React.createElement("span", { className: "ml-2 text-gray-400" }, "contactemail")),
+                        React.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change"))),
+                React.createElement("div", { className: "space-y-4" },
+                    React.createElement(FormField, { control: form.control, name: "country", render: ({ field }) => (React.createElement(FormItem, null,
+                            React.createElement(FormLabel, { className: "text-white" }, "Country/Region"),
                             React.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value },
                                 React.createElement(FormControl, null,
                                     React.createElement(SelectTrigger, { className: "bg-black border-gray-700 text-white" },
-                                        React.createElement(SelectValue, { placeholder: "State" }))),
+                                        React.createElement(SelectValue, { placeholder: "Select a country" }))),
                                 React.createElement(SelectContent, { className: "bg-gray-900 text-white border-gray-700" },
-                                    React.createElement(SelectItem, { value: "Illinois" }, "Illinois"),
-                                    React.createElement(SelectItem, { value: "California" }, "California"),
-                                    React.createElement(SelectItem, { value: "New York" }, "New York"),
-                                    React.createElement(SelectItem, { value: "Texas" }, "Texas"))),
+                                    React.createElement(SelectItem, { value: "United States" }, "United States"),
+                                    React.createElement(SelectItem, { value: "Canada" }, "Canada"),
+                                    React.createElement(SelectItem, { value: "United Kingdom" }, "United Kingdom"))),
                             React.createElement(FormMessage, null))) }),
-                    React.createElement(FormField, { control: form.control, name: "zipCode", render: ({ field }) => (React.createElement(FormItem, null,
-                            React.createElement(FormLabel, { className: "text-white" }, "ZIP code"),
+                    React.createElement("div", { className: "grid grid-cols-2 gap-4" },
+                        React.createElement(FormField, { control: form.control, name: "firstName", render: ({ field }) => (React.createElement(FormItem, null,
+                                React.createElement(FormLabel, { className: "text-white" }, "First name (optional)"),
+                                React.createElement(FormControl, null,
+                                    React.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
+                                React.createElement(FormMessage, null))) }),
+                        React.createElement(FormField, { control: form.control, name: "lastName", render: ({ field }) => (React.createElement(FormItem, null,
+                                React.createElement(FormLabel, { className: "text-white" }, "Last name"),
+                                React.createElement(FormControl, null,
+                                    React.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
+                                React.createElement(FormMessage, null))) })),
+                    React.createElement(FormField, { control: form.control, name: "apartment", render: ({ field }) => (React.createElement(FormItem, null,
+                            React.createElement(FormLabel, { className: "text-white" }, "Apartment, suite, etc. (optional)"),
                             React.createElement(FormControl, null,
                                 React.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
-                            React.createElement(FormMessage, null))) })),
-                React.createElement(FormField, { control: form.control, name: "saveInfo", render: ({ field }) => (React.createElement(FormItem, { className: "flex flex-row items-start space-x-2 space-y-0" },
-                        React.createElement(FormControl, null,
-                            React.createElement(Checkbox, { checked: field.value, onCheckedChange: field.onChange, className: "data-[state=checked]:bg-blue-600" })),
-                        React.createElement(FormLabel, { className: "text-sm font-normal text-gray-400" }, "Save this information for next time"))) }),
-                React.createElement("div", { className: "flex justify-between items-center pt-4" },
-                    React.createElement(Button, { type: "button", variant: "link", className: "text-blue-500 p-0 h-auto flex items-center gap-1", onClick: onBack },
-                        React.createElement(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
-                        "Return to information"),
-                    React.createElement(Button, { type: "submit", className: "bg-blue-600 hover:bg-blue-700 text-white" }, "Continue to shipping"))))));
+                            React.createElement(FormMessage, null))) }),
+                    React.createElement("div", { className: "grid grid-cols-3 gap-4" },
+                        React.createElement(FormField, { control: form.control, name: "city", render: ({ field }) => (React.createElement(FormItem, null,
+                                React.createElement(FormLabel, { className: "text-white" }, "City"),
+                                React.createElement(FormControl, null,
+                                    React.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
+                                React.createElement(FormMessage, null))) }),
+                        React.createElement(FormField, { control: form.control, name: "state", render: ({ field }) => (React.createElement(FormItem, null,
+                                React.createElement(FormLabel, { className: "text-white" }, "State"),
+                                React.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value },
+                                    React.createElement(FormControl, null,
+                                        React.createElement(SelectTrigger, { className: "bg-black border-gray-700 text-white" },
+                                            React.createElement(SelectValue, { placeholder: "State" }))),
+                                    React.createElement(SelectContent, { className: "bg-gray-900 text-white border-gray-700" },
+                                        React.createElement(SelectItem, { value: "Illinois" }, "Illinois"),
+                                        React.createElement(SelectItem, { value: "California" }, "California"),
+                                        React.createElement(SelectItem, { value: "New York" }, "New York"),
+                                        React.createElement(SelectItem, { value: "Texas" }, "Texas"))),
+                                React.createElement(FormMessage, null))) }),
+                        React.createElement(FormField, { control: form.control, name: "zipCode", render: ({ field }) => (React.createElement(FormItem, null,
+                                React.createElement(FormLabel, { className: "text-white" }, "ZIP code"),
+                                React.createElement(FormControl, null,
+                                    React.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
+                                React.createElement(FormMessage, null))) })),
+                    React.createElement(FormField, { control: form.control, name: "saveInfo", render: ({ field }) => (React.createElement(FormItem, { className: "flex flex-row items-start space-x-2 space-y-0" },
+                            React.createElement(FormControl, null,
+                                React.createElement(Checkbox, { checked: field.value, onCheckedChange: field.onChange, className: "data-[state=checked]:bg-blue-600" })),
+                            React.createElement(FormLabel, { className: "text-sm font-normal text-gray-400" }, "Save this information for next time"))) }),
+                    React.createElement("div", { className: "flex justify-between items-center pt-4" },
+                        React.createElement(Button, { type: "button", variant: "link", className: "text-blue-500 p-0 h-auto flex items-center gap-1", onClick: onBack },
+                            React.createElement(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
+                            "Return to information"),
+                        React.createElement(Button, { type: "submit", className: "bg-blue-600 hover:bg-blue-700 text-white" }, "Continue to shipping")))))));
 }
 
-function PaymentForm({ initialData, onSubmit, onBack, contactEmail, shippingAddress, shippingMethod, shippingPrice, }) {
-    const form = reactHookForm.useForm({
-        resolver: s(paymentMethodSchema),
-        defaultValues: initialData || {
-            cardNumber: "",
-            expiryDate: "",
-            cvv: "",
-            nameOnCard: "",
-        },
+const useCheckout = zustand.create((set) => ({
+    isSubmitting: false,
+    setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
+}));
+
+const CheckoutForm$1 = ({ onSuccess, onError, children, }) => {
+    const stripe = reactStripeJs.useStripe();
+    const elements = reactStripeJs.useElements();
+    const { setIsSubmitting } = useCheckout();
+    const [errorMessage, setErrorMessage] = React.useState(undefined);
+    const handleSubmit = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        event.preventDefault();
+        if (!stripe || !elements) {
+            return;
+        }
+        setIsSubmitting(true);
+        const response = yield stripe.confirmPayment({
+            elements,
+            redirect: "if_required",
+        });
+        if (response.error) {
+            setErrorMessage(response.error.message || "Something went wrong.");
+            setIsSubmitting(false);
+            onError === null || onError === void 0 ? void 0 : onError();
+        }
+        else {
+            setErrorMessage(undefined);
+            setIsSubmitting(false);
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+        }
+        setErrorMessage(undefined);
+        setIsSubmitting(false);
     });
+    return (React.createElement("form", { onSubmit: handleSubmit },
+        React.createElement("div", null,
+            React.createElement(reactStripeJs.PaymentElement, null),
+            React.createElement("p", { className: "text-red-500" }, errorMessage)),
+        children));
+};
+var CheckoutForm$2 = React.memo(CheckoutForm$1);
+
+const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
+const stripePromise = stripeJs.loadStripe(publicStripeKey);
+function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError, children, }) {
+    const options = Object.assign(Object.assign({ locale: "en" }, (checkoutAppearance ? checkoutAppearance : {})), { clientSecret: paymentSecret });
+    return (React.createElement(reactStripeJs.Elements, { stripe: stripePromise, options: options },
+        React.createElement(CheckoutForm$2, { onSuccess: onSuccess, onError: onError, children: children })));
+}
+var PaymentElement$1 = React.memo(PaymentElement);
+
+function PaymentForm({ paymentSecret, onSubmit, onBack, contactEmail, shippingAddress, shippingMethod, shippingPrice, }) {
     return (React.createElement("div", { className: "space-y-6" },
         React.createElement("div", { className: "space-y-2" },
             React.createElement("div", { className: "flex items-center justify-between" },
@@ -739,34 +773,8 @@ function PaymentForm({ initialData, onSubmit, onBack, contactEmail, shippingAddr
                 React.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change"))),
         React.createElement("div", { className: "space-y-4 bg-gray-900 p-4 rounded-md" },
             React.createElement("div", { className: "text-white font-medium" }, "Payment method"),
-            React.createElement(Form, Object.assign({}, form),
-                React.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
-                    React.createElement(FormField, { control: form.control, name: "cardNumber", render: ({ field }) => (React.createElement(FormItem, null,
-                            React.createElement(FormLabel, { className: "text-white" }, "Card number"),
-                            React.createElement(FormControl, null,
-                                React.createElement(Input, Object.assign({ placeholder: "1234 5678 9012 3456", className: "bg-black border-gray-700 text-white" }, field))),
-                            React.createElement(FormMessage, null))) }),
-                    React.createElement("div", { className: "grid grid-cols-2 gap-4" },
-                        React.createElement(FormField, { control: form.control, name: "expiryDate", render: ({ field }) => (React.createElement(FormItem, null,
-                                React.createElement(FormLabel, { className: "text-white" }, "Expiration date (MM/YY)"),
-                                React.createElement(FormControl, null,
-                                    React.createElement(Input, Object.assign({ placeholder: "MM/YY", className: "bg-black border-gray-700 text-white" }, field))),
-                                React.createElement(FormMessage, null))) }),
-                        React.createElement(FormField, { control: form.control, name: "cvv", render: ({ field }) => (React.createElement(FormItem, null,
-                                React.createElement(FormLabel, { className: "text-white" }, "Security code"),
-                                React.createElement(FormControl, null,
-                                    React.createElement(Input, Object.assign({ placeholder: "CVV", className: "bg-black border-gray-700 text-white" }, field))),
-                                React.createElement(FormMessage, null))) })),
-                    React.createElement(FormField, { control: form.control, name: "nameOnCard", render: ({ field }) => (React.createElement(FormItem, null,
-                            React.createElement(FormLabel, { className: "text-white" }, "Name on card"),
-                            React.createElement(FormControl, null,
-                                React.createElement(Input, Object.assign({ placeholder: "Name as it appears on card", className: "bg-black border-gray-700 text-white" }, field))),
-                            React.createElement(FormMessage, null))) }),
-                    React.createElement("div", { className: "flex justify-between items-center pt-4" },
-                        React.createElement(Button, { type: "button", variant: "link", className: "text-blue-500 p-0 h-auto flex items-center gap-1", onClick: onBack },
-                            React.createElement(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
-                            "Return to shipping"),
-                        React.createElement(Button, { type: "submit", className: "bg-blue-600 hover:bg-blue-700 text-white" }, "Pay now")))))));
+            paymentSecret && (React.createElement(PaymentElement$1, { paymentSecret: paymentSecret },
+                React.createElement("button", null, "Submit"))))));
 }
 
 function RadioGroup(_a) {
@@ -868,7 +876,8 @@ function useLocalStorage(key, initialValue) {
     return [storedValue, setValue];
 }
 
-function CheckoutForm$2({ checkoutId, onComplete, cancelUrl, }) {
+function CheckoutForm({ checkoutId, onComplete, cancelUrl, }) {
+    const [paymentSecret, setPaymentSecret] = React.useState(null);
     const [step, setStep] = React.useState("customer");
     const [formData, setFormData] = useLocalStorage(`checkout-${checkoutId}`, {});
     // Helper function to format address for display
@@ -914,13 +923,21 @@ function CheckoutForm$2({ checkoutId, onComplete, cancelUrl, }) {
         if (step === "payment")
             setStep("shipping");
     };
+    React.useEffect(() => {
+        const fetchPaymentSecret = () => __awaiter(this, void 0, void 0, function* () {
+            const response = yield fetch(`/api/betterstore/checkout/payment/${checkoutId}`);
+            const data = yield response.json();
+            setPaymentSecret(data);
+        });
+        fetchPaymentSecret();
+    }, []);
     return (React.createElement("div", { className: "space-y-6" },
         step === "customer" && (React.createElement(CustomerForm, { initialData: formData.customer, onSubmit: handleCustomerSubmit, onBack: handleBack })),
         step === "shipping" && formData.customer && (React.createElement(ShippingMethodForm, { initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer) })),
         step === "payment" &&
             formData.customer &&
             formData.customer &&
-            formData.shipping && (React.createElement(PaymentForm, { initialData: formData.payment, onSubmit: handlePaymentSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer), shippingMethod: formatShippingMethod(formData.shipping.method).name, shippingPrice: formatShippingMethod(formData.shipping.method).price }))));
+            formData.shipping && (React.createElement(PaymentForm, { paymentSecret: paymentSecret, onSubmit: handlePaymentSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer), shippingMethod: formatShippingMethod(formData.shipping.method).name, shippingPrice: formatShippingMethod(formData.shipping.method).price }))));
 }
 
 function CheckoutSummary({ lineItems, shipping, tax, currency, }) {
@@ -964,7 +981,7 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, }) {
                     React.createElement("span", { className: "text-2xl font-bold" }, formatPrice(total)))))));
 }
 
-function CheckoutEmbed({ checkoutId, cancelUrl, successUrl, }) {
+function CheckoutEmbed({ checkoutId, cancelUrl, successUrl, client, }) {
     const [checkout, setCheckout] = React.useState(null);
     const [loading, setLoading] = React.useState(true);
     React.useEffect(() => {
@@ -972,11 +989,11 @@ function CheckoutEmbed({ checkoutId, cancelUrl, successUrl, }) {
         function fetchCheckout() {
             return __awaiter(this, void 0, void 0, function* () {
                 try {
-                    const response = yield fetch(`/api/betterstore/checkout?checkoutId=${checkoutId}`);
-                    const data = yield response.json();
+                    const checkout = yield client().retrieveCheckout(checkoutId);
+                    console.log("checkout", checkout);
                     if (mounted) {
                         // Only update state if component is still mounted
-                        setCheckout(data);
+                        setCheckout(checkout);
                         setLoading(false);
                     }
                 }
@@ -1002,60 +1019,10 @@ function CheckoutEmbed({ checkoutId, cancelUrl, successUrl, }) {
         return React.createElement("div", null, "Checkout not found");
     }
     return (React.createElement("div", { className: "grid md:grid-cols-2 gap-4" },
-        React.createElement("div", null, loading ? (React.createElement("div", { className: "text-white" }, "Loading...")) : (React.createElement(CheckoutForm$2, { cancelUrl: cancelUrl, checkoutId: checkoutId, onComplete: handleComplete }))),
+        React.createElement("div", null, loading ? (React.createElement("div", { className: "text-white" }, "Loading...")) : (React.createElement(CheckoutForm, { cancelUrl: cancelUrl, checkoutId: checkoutId, onComplete: handleComplete }))),
         React.createElement("div", null, loading ? (React.createElement("div", null, "Loading...")) : (React.createElement(CheckoutSummary, { currency: checkout.currency, lineItems: checkout.lineItems, shipping: checkout === null || checkout === void 0 ? void 0 : checkout.shipping, tax: checkout === null || checkout === void 0 ? void 0 : checkout.tax })))));
 }
-var index$1 = React.memo(CheckoutEmbed);
-
-const useCheckout = zustand.create((set) => ({
-    isSubmitting: false,
-    setIsSubmitting: (isSubmitting) => set({ isSubmitting }),
-}));
-
-const CheckoutForm = ({ onSuccess, onError, children, }) => {
-    const stripe = reactStripeJs.useStripe();
-    const elements = reactStripeJs.useElements();
-    const { setIsSubmitting } = useCheckout();
-    const [errorMessage, setErrorMessage] = React.useState(undefined);
-    const handleSubmit = (event) => __awaiter(void 0, void 0, void 0, function* () {
-        event.preventDefault();
-        if (!stripe || !elements) {
-            return;
-        }
-        setIsSubmitting(true);
-        const response = yield stripe.confirmPayment({
-            elements,
-            redirect: "if_required",
-        });
-        if (response.error) {
-            setErrorMessage(response.error.message || "Something went wrong.");
-            setIsSubmitting(false);
-            onError === null || onError === void 0 ? void 0 : onError();
-        }
-        else {
-            setErrorMessage(undefined);
-            setIsSubmitting(false);
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
-        }
-        setErrorMessage(undefined);
-        setIsSubmitting(false);
-    });
-    return (React.createElement("form", { onSubmit: handleSubmit },
-        React.createElement("div", null,
-            React.createElement(reactStripeJs.PaymentElement, null),
-            React.createElement("p", { className: "text-red-500" }, errorMessage)),
-        children));
-};
-var CheckoutForm$1 = React.memo(CheckoutForm);
-
-const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe3veuXnV9XVmvvWDFlt3aEWHY4pOuIXyahEjjKZwezn00qo4U5fQS";
-const stripePromise = stripeJs.loadStripe(publicStripeKey);
-function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError, children, }) {
-    const options = Object.assign(Object.assign({ locale: "en" }, (checkoutAppearance ? checkoutAppearance : {})), { clientSecret: paymentSecret });
-    return (React.createElement(reactStripeJs.Elements, { stripe: stripePromise, options: options },
-        React.createElement(CheckoutForm$1, { onSuccess: onSuccess, onError: onError, children: children })));
-}
-var index = React.memo(PaymentElement);
+var index = React.memo(CheckoutEmbed);
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -1084,10 +1051,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-red-500:oklch(0.637 0.237 25.331);--color-blue-500:oklch(0.623 0.214 259.815);--color-blue-600:oklch(0.546 0.245 262.881);--color-blue-700:oklch(0.488 0.243 264.376);--color-gray-400:oklch(0.707 0.022 261.325);--color-gray-700:oklch(0.373 0.034 259.733);--color-gray-900:oklch(0.21 0.034 264.665);--color-zinc-400:oklch(0.705 0.015 286.067);--color-zinc-700:oklch(0.37 0.013 285.805);--color-zinc-800:oklch(0.274 0.006 286.033);--color-zinc-900:oklch(0.21 0.006 285.885);--color-black:#000;--color-white:#fff;--spacing:0.25rem;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:700;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-font-variation-settings:var(\n      --font-sans--font-variation-settings\n    );--default-mono-font-family:var(--font-mono);--default-mono-font-feature-settings:var(\n      --font-mono--font-feature-settings\n    );--default-mono-font-variation-settings:var(\n      --font-mono--font-variation-settings\n    )}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;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\" );font-variation-settings:var( --default-font-variation-settings,normal );line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var( --default-mono-font-feature-settings,normal );font-family:var( --default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace );font-size:1em;font-variation-settings:var( --default-mono-font-variation-settings,normal )}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{color:color-mix(in oklab,currentColor 50%,transparent);opacity:1}::placeholder{color:color-mix(in oklab,currentColor 50%,transparent);opacity:1}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.-top-2{top:calc(var(--spacing)*-2)}.top-1\\/2{top:50%}.-right-2{right:calc(var(--spacing)*-2)}.right-2{right:calc(var(--spacing)*2)}.left-1\\/2{left:50%}.z-50{z-index:50}.-mx-1{margin-inline:calc(var(--spacing)*-1)}.my-1{margin-block:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1/1}.size-2{height:calc(var(--spacing)*2);width:calc(var(--spacing)*2)}.size-3\\.5{height:calc(var(--spacing)*3.5);width:calc(var(--spacing)*3.5)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-9{height:calc(var(--spacing)*9);width:calc(var(--spacing)*9)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-16{height:calc(var(--spacing)*16)}.h-\\[var\\(--radix-select-trigger-height\\)\\]{height:var(--radix-select-trigger-height)}.h-auto{height:auto}.h-px{height:1px}.max-h-96{max-height:calc(var(--spacing)*96)}.w-4{width:calc(var(--spacing)*4)}.w-6{width:calc(var(--spacing)*6)}.w-16{width:calc(var(--spacing)*16)}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-\\[8rem\\]{min-width:8rem}.min-w-\\[var\\(--radix-select-trigger-width\\)\\]{min-width:var(--radix-select-trigger-width)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\\/2{--tw-translate-x:-50%}.-translate-x-1\\/2,.-translate-y-1\\/2{translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\\/2{--tw-translate-y:-50%}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.scroll-my-1{scroll-margin-block:calc(var(--spacing)*1)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.space-y-0{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*0*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*0*var(--tw-space-y-reverse))}}.space-y-1{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*1*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*1*var(--tw-space-y-reverse))}}.space-y-2{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}}.space-y-3{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*3*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*3*var(--tw-space-y-reverse))}}.space-y-4{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*4*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*4*var(--tw-space-y-reverse))}}.space-y-6{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*6*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*6*var(--tw-space-y-reverse))}}.space-x-2{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*2*var(--tw-space-x-reverse))}}.space-x-3{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*3*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*3*var(--tw-space-x-reverse))}}.overflow-hidden{overflow:hidden}.rounded-\\[4px\\]{border-radius:4px}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-gray-700{border-color:var(--color-gray-700)}.border-input{border-color:var(--input)}.border-zinc-800{border-color:var(--color-zinc-800)}.bg-background{background-color:var(--background)}.bg-black{background-color:var(--color-black)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-border{background-color:var(--border)}.bg-destructive{background-color:var(--destructive)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-popover{background-color:var(--popover)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-transparent{background-color:transparent}.bg-zinc-700{background-color:var(--color-zinc-700)}.bg-zinc-900{background-color:var(--color-zinc-900)}.fill-primary{fill:var(--primary)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:calc(var(--spacing)*0)}.p-1{padding:calc(var(--spacing)*1)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-4{padding-top:calc(var(--spacing)*4)}.pr-8{padding-right:calc(var(--spacing)*8)}.pl-2{padding-left:calc(var(--spacing)*2)}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.whitespace-nowrap{white-space:nowrap}.text-blue-500{color:var(--color-blue-500)}.text-current{color:currentColor}.text-destructive-foreground{color:var(--destructive-foreground)}.text-gray-400{color:var(--color-gray-400)}.text-muted-foreground{color:var(--muted-foreground)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-red-500{color:var(--color-red-500)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-white{color:var(--color-white)}.text-zinc-400{color:var(--color-zinc-400)}.underline-offset-4{text-underline-offset:4px}.opacity-50{opacity:50%}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,rgba(0,0,0,.1)),0 2px 4px -2px var(--tw-shadow-color,rgba(0,0,0,.1))}.shadow-md,.shadow-xs{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,rgba(0,0,0,.05))}.outline-hidden{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline:2px solid transparent;outline-offset:2px}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-\\[color\\,box-shadow\\]{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-shadow{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-none{transition-property:none}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.group-data-\\[disabled\\=true\\]\\:pointer-events-none{&:is(:where(.group)[data-disabled=true] *){pointer-events:none}}.group-data-\\[disabled\\=true\\]\\:opacity-50{&:is(:where(.group)[data-disabled=true] *){opacity:50%}}.peer-disabled\\:cursor-not-allowed{&:is(:where(.peer):disabled~*){cursor:not-allowed}}.peer-disabled\\:opacity-50{&:is(:where(.peer):disabled~*){opacity:50%}}.selection\\:bg-primary{& ::-moz-selection{background-color:var(--primary)}& ::selection{background-color:var(--primary)}&::-moz-selection{background-color:var(--primary)}&::selection{background-color:var(--primary)}}.selection\\:text-primary-foreground{& ::-moz-selection{color:var(--primary-foreground)}& ::selection{color:var(--primary-foreground)}&::-moz-selection{color:var(--primary-foreground)}&::selection{color:var(--primary-foreground)}}.file\\:inline-flex{&::file-selector-button{display:inline-flex}}.file\\:h-7{&::file-selector-button{height:calc(var(--spacing)*7)}}.file\\:border-0{&::file-selector-button{border-style:var(--tw-border-style);border-width:0}}.file\\:bg-transparent{&::file-selector-button{background-color:transparent}}.file\\:text-sm{&::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.file\\:font-medium{&::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}}.file\\:text-foreground{&::file-selector-button{color:var(--foreground)}}.placeholder\\:text-muted-foreground{&::-moz-placeholder{color:var(--muted-foreground)}&::placeholder{color:var(--muted-foreground)}}.hover\\:bg-accent{&:hover{@media (hover:hover){background-color:var(--accent)}}}.hover\\:bg-blue-700{&:hover{@media (hover:hover){background-color:var(--color-blue-700)}}}.hover\\:bg-destructive\\/90{&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}}.hover\\:bg-primary\\/90{&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}}.hover\\:bg-secondary\\/80{&:hover{@media (hover:hover){background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}}.hover\\:text-accent-foreground{&:hover{@media (hover:hover){color:var(--accent-foreground)}}}.hover\\:underline{&:hover{@media (hover:hover){text-decoration-line:underline}}}.focus\\:bg-accent{&:focus{background-color:var(--accent)}}.focus\\:text-accent-foreground{&:focus{color:var(--accent-foreground)}}.focus-visible\\:border-ring{&:focus-visible{border-color:var(--ring)}}.focus-visible\\:ring-\\[3px\\]{&:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentColor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus-visible\\:ring-destructive\\/20{&:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}.focus-visible\\:ring-ring\\/50{&:focus-visible{--tw-ring-color:color-mix(in oklab,var(--ring) 50%,transparent)}}.disabled\\:pointer-events-none{&:disabled{pointer-events:none}}.disabled\\:cursor-not-allowed{&:disabled{cursor:not-allowed}}.disabled\\:opacity-50{&:disabled{opacity:50%}}.has-\\[\\>svg\\]\\:px-2\\.5{&:has(>svg){padding-inline:calc(var(--spacing)*2.5)}}.has-\\[\\>svg\\]\\:px-3{&:has(>svg){padding-inline:calc(var(--spacing)*3)}}.has-\\[\\>svg\\]\\:px-4{&:has(>svg){padding-inline:calc(var(--spacing)*4)}}.aria-invalid\\:border-destructive{&[aria-invalid=true]{border-color:var(--destructive)}}.aria-invalid\\:ring-destructive\\/20{&[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}.data-\\[disabled\\]\\:pointer-events-none{&[data-disabled]{pointer-events:none}}.data-\\[disabled\\]\\:opacity-50{&[data-disabled]{opacity:50%}}.data-\\[error\\=true\\]\\:text-destructive-foreground{&[data-error=true]{color:var(--destructive-foreground)}}.data-\\[placeholder\\]\\:text-muted-foreground{&[data-placeholder]{color:var(--muted-foreground)}}.data-\\[side\\=bottom\\]\\:translate-y-1{&[data-side=bottom]{--tw-translate-y:calc(var(--spacing)*1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-\\[side\\=bottom\\]\\:slide-in-from-top-2{&[data-side=bottom]{--tw-enter-translate-y:-0.5rem}}.data-\\[side\\=left\\]\\:-translate-x-1{&[data-side=left]{--tw-translate-x:calc(var(--spacing)*-1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-\\[side\\=left\\]\\:slide-in-from-right-2{&[data-side=left]{--tw-enter-translate-x:0.5rem}}.data-\\[side\\=right\\]\\:translate-x-1{&[data-side=right]{--tw-translate-x:calc(var(--spacing)*1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-\\[side\\=right\\]\\:slide-in-from-left-2{&[data-side=right]{--tw-enter-translate-x:-0.5rem}}.data-\\[side\\=top\\]\\:-translate-y-1{&[data-side=top]{--tw-translate-y:calc(var(--spacing)*-1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-\\[side\\=top\\]\\:slide-in-from-bottom-2{&[data-side=top]{--tw-enter-translate-y:0.5rem}}.\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1{:is(&>*){&[data-slot=select-value]{-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;overflow:hidden}}}.\\*\\:data-\\[slot\\=select-value\\]\\:flex{:is(&>*){&[data-slot=select-value]{display:flex}}}.\\*\\:data-\\[slot\\=select-value\\]\\:items-center{:is(&>*){&[data-slot=select-value]{align-items:center}}}.\\*\\:data-\\[slot\\=select-value\\]\\:gap-2{:is(&>*){&[data-slot=select-value]{gap:calc(var(--spacing)*2)}}}.data-\\[state\\=checked\\]\\:border-blue-600{&[data-state=checked]{border-color:var(--color-blue-600)}}.data-\\[state\\=checked\\]\\:border-primary{&[data-state=checked]{border-color:var(--primary)}}.data-\\[state\\=checked\\]\\:bg-blue-600{&[data-state=checked]{background-color:var(--color-blue-600)}}.data-\\[state\\=checked\\]\\:bg-primary{&[data-state=checked]{background-color:var(--primary)}}.data-\\[state\\=checked\\]\\:text-blue-600{&[data-state=checked]{color:var(--color-blue-600)}}.data-\\[state\\=checked\\]\\:text-primary-foreground{&[data-state=checked]{color:var(--primary-foreground)}}.data-\\[state\\=closed\\]\\:animate-out{&[data-state=closed]{--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;animation-duration:.15s;animation-name:exit}}.data-\\[state\\=closed\\]\\:fade-out-0{&[data-state=closed]{--tw-exit-opacity:0}}.data-\\[state\\=closed\\]\\:zoom-out-95{&[data-state=closed]{--tw-exit-scale:.95}}.data-\\[state\\=open\\]\\:animate-in{&[data-state=open]{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-duration:.15s;animation-name:enter}}.data-\\[state\\=open\\]\\:fade-in-0{&[data-state=open]{--tw-enter-opacity:0}}.data-\\[state\\=open\\]\\:zoom-in-95{&[data-state=open]{--tw-enter-scale:.95}}.dark\\:focus-visible\\:ring-destructive\\/40,.md\\:grid-cols-2,.md\\:text-sm{&:is(.dark *){&:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}.dark\\:aria-invalid\\:ring-destructive\\/40{&:is(.dark *){&[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}.\\[\\&_svg\\]\\:pointer-events-none{& svg{pointer-events:none}}.\\[\\&_svg\\]\\:shrink-0{& svg{flex-shrink:0}}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4{& svg:not([class*=size-]){height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}}.\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground{& svg:not([class*=text-]){color:var(--muted-foreground)}}.\\*\\:\\[span\\]\\:last\\:flex{:is(&>*){&:is(span){&:last-child{display:flex}}}}.\\*\\:\\[span\\]\\:last\\:items-center{:is(&>*){&:is(span){&:last-child{align-items:center}}}}.\\*\\:\\[span\\]\\:last\\:gap-2{:is(&>*){&:is(span){&:last-child{gap:calc(var(--spacing)*2)}}}}}:root{--background:oklch(1 0 0);--foreground:oklch(0.145 0 0);--card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.145 0 0);--primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:oklch(0.577 0.245 27.325);--destructive-foreground:oklch(0.577 0.245 27.325);--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--radius:0.625rem;--sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);--sidebar-ring:oklch(0.708 0 0)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.145 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.145 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.985 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.396 0.141 25.723);--destructive-foreground:oklch(0.637 0.237 25.331);--border:oklch(0.269 0 0);--input:oklch(0.269 0 0);--ring:oklch(0.439 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(0.269 0 0);--sidebar-ring:oklch(0.439 0 0)}@layer base{*{border-color:var(--border);outline-color:color-mix(in oklab,var(--ring) 50%,transparent)}body{background-color:var(--background);color:var(--foreground)}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);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))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);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))}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}";
+var css_248z = "/*! tailwindcss v4.0.12 | MIT License | https://tailwindcss.com */\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-500: oklch(0.637 0.237 25.331);\n    --color-blue-500: oklch(0.623 0.214 259.815);\n    --color-blue-600: oklch(0.546 0.245 262.881);\n    --color-blue-700: oklch(0.488 0.243 264.376);\n    --color-gray-400: oklch(0.707 0.022 261.325);\n    --color-gray-700: oklch(0.373 0.034 259.733);\n    --color-gray-900: oklch(0.21 0.034 264.665);\n    --color-zinc-400: oklch(0.705 0.015 286.067);\n    --color-zinc-700: oklch(0.37 0.013 285.805);\n    --color-zinc-800: oklch(0.274 0.006 286.033);\n    --color-zinc-900: oklch(0.21 0.006 285.885);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\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-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-bold: 700;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-font-feature-settings: var(--font-sans--font-feature-settings);\n    --default-font-variation-settings: var(\n      --font-sans--font-variation-settings\n    );\n    --default-mono-font-family: var(--font-mono);\n    --default-mono-font-feature-settings: var(\n      --font-mono--font-feature-settings\n    );\n    --default-mono-font-variation-settings: var(\n      --font-mono--font-variation-settings\n    );\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  body {\n    line-height: inherit;\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    color: color-mix(in oklab, currentColor 50%, transparent);\n  }\n  ::placeholder {\n    opacity: 1;\n    color: color-mix(in oklab, currentColor 50%, transparent);\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    -webkit-appearance: button;\n       -moz-appearance: button;\n            appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .fixed {\n    position: fixed;\n  }\n  .relative {\n    position: relative;\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .-right-2 {\n    right: calc(var(--spacing) * -2);\n  }\n  .right-2 {\n    right: calc(var(--spacing) * 2);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\n  }\n  .my-1 {\n    margin-block: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n  .ml-4 {\n    margin-left: calc(var(--spacing) * 4);\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .aspect-square {\n    aspect-ratio: 1 / 1;\n  }\n  .size-2 {\n    width: calc(var(--spacing) * 2);\n    height: calc(var(--spacing) * 2);\n  }\n  .size-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n    height: calc(var(--spacing) * 3.5);\n  }\n  .size-4 {\n    width: calc(var(--spacing) * 4);\n    height: calc(var(--spacing) * 4);\n  }\n  .size-9 {\n    width: calc(var(--spacing) * 9);\n    height: calc(var(--spacing) * 9);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n  .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-16 {\n    height: calc(var(--spacing) * 16);\n  }\n  .h-\\[var\\(--radix-select-trigger-height\\)\\] {\n    height: var(--radix-select-trigger-height);\n  }\n  .h-auto {\n    height: auto;\n  }\n  .h-px {\n    height: 1px;\n  }\n  .max-h-96 {\n    max-height: calc(var(--spacing) * 96);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-16 {\n    width: calc(var(--spacing) * 16);\n  }\n  .w-fit {\n    width: -moz-fit-content;\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n  .min-w-\\[8rem\\] {\n    min-width: 8rem;\n  }\n  .min-w-\\[var\\(--radix-select-trigger-width\\)\\] {\n    min-width: var(--radix-select-trigger-width);\n  }\n  .flex-1 {\n    flex: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .cursor-default {\n    cursor: default;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .scroll-my-1 {\n    scroll-margin-block: calc(var(--spacing) * 1);\n  }\n  .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n  .flex-row {\n    flex-direction: row;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .space-y-0 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-1 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-x-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .space-x-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-x-reverse: 0;\n      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));\n      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .rounded-\\[4px\\] {\n    border-radius: 4px;\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius);\n  }\n  .rounded-md {\n    border-radius: calc(var(--radius) - 2px);\n  }\n  .rounded-sm {\n    border-radius: calc(var(--radius) - 4px);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-gray-700 {\n    border-color: var(--color-gray-700);\n  }\n  .border-input {\n    border-color: var(--input);\n  }\n  .border-zinc-800 {\n    border-color: var(--color-zinc-800);\n  }\n  .bg-background {\n    background-color: var(--background);\n  }\n  .bg-black {\n    background-color: var(--color-black);\n  }\n  .bg-blue-600 {\n    background-color: var(--color-blue-600);\n  }\n  .bg-border {\n    background-color: var(--border);\n  }\n  .bg-destructive {\n    background-color: var(--destructive);\n  }\n  .bg-gray-900 {\n    background-color: var(--color-gray-900);\n  }\n  .bg-popover {\n    background-color: var(--popover);\n  }\n  .bg-primary {\n    background-color: var(--primary);\n  }\n  .bg-secondary {\n    background-color: var(--secondary);\n  }\n  .bg-transparent {\n    background-color: transparent;\n  }\n  .bg-zinc-700 {\n    background-color: var(--color-zinc-700);\n  }\n  .bg-zinc-900 {\n    background-color: var(--color-zinc-900);\n  }\n  .fill-primary {\n    fill: var(--primary);\n  }\n  .object-cover {\n    -o-object-fit: cover;\n       object-fit: cover;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n  .pr-8 {\n    padding-right: calc(var(--spacing) * 8);\n  }\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n  .text-right {\n    text-align: right;\n  }\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-blue-500 {\n    color: var(--color-blue-500);\n  }\n  .text-current {\n    color: currentColor;\n  }\n  .text-destructive-foreground {\n    color: var(--destructive-foreground);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-muted-foreground {\n    color: var(--muted-foreground);\n  }\n  .text-popover-foreground {\n    color: var(--popover-foreground);\n  }\n  .text-primary {\n    color: var(--primary);\n  }\n  .text-primary-foreground {\n    color: var(--primary-foreground);\n  }\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n  .text-secondary-foreground {\n    color: var(--secondary-foreground);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .text-zinc-400 {\n    color: var(--color-zinc-400);\n  }\n  .underline-offset-4 {\n    text-underline-offset: 4px;\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-xs {\n    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .outline-hidden {\n    --tw-outline-style: none;\n    outline-style: none;\n    @media (forced-colors: active) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n    }\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .transition-\\[color\\,box-shadow\\] {\n    transition-property: color,box-shadow;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-shadow {\n    transition-property: box-shadow;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-none {\n    transition-property: none;\n  }\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n  .select-none {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n         user-select: none;\n  }\n  .group-data-\\[disabled\\=true\\]\\:pointer-events-none {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      pointer-events: none;\n    }\n  }\n  .group-data-\\[disabled\\=true\\]\\:opacity-50 {\n    &:is(:where(.group)[data-disabled=\"true\"] *) {\n      opacity: 50%;\n    }\n  }\n  .peer-disabled\\:cursor-not-allowed {\n    &:is(:where(.peer):disabled ~ *) {\n      cursor: not-allowed;\n    }\n  }\n  .peer-disabled\\:opacity-50 {\n    &:is(:where(.peer):disabled ~ *) {\n      opacity: 50%;\n    }\n  }\n  .selection\\:bg-primary {\n    & *::-moz-selection {\n      background-color: var(--primary);\n    }\n    & *::selection {\n      background-color: var(--primary);\n    }\n    &::-moz-selection {\n      background-color: var(--primary);\n    }\n    &::selection {\n      background-color: var(--primary);\n    }\n  }\n  .selection\\:text-primary-foreground {\n    & *::-moz-selection {\n      color: var(--primary-foreground);\n    }\n    & *::selection {\n      color: var(--primary-foreground);\n    }\n    &::-moz-selection {\n      color: var(--primary-foreground);\n    }\n    &::selection {\n      color: var(--primary-foreground);\n    }\n  }\n  .file\\:inline-flex {\n    &::file-selector-button {\n      display: inline-flex;\n    }\n  }\n  .file\\:h-7 {\n    &::file-selector-button {\n      height: calc(var(--spacing) * 7);\n    }\n  }\n  .file\\:border-0 {\n    &::file-selector-button {\n      border-style: var(--tw-border-style);\n      border-width: 0px;\n    }\n  }\n  .file\\:bg-transparent {\n    &::file-selector-button {\n      background-color: transparent;\n    }\n  }\n  .file\\:text-sm {\n    &::file-selector-button {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .file\\:font-medium {\n    &::file-selector-button {\n      --tw-font-weight: var(--font-weight-medium);\n      font-weight: var(--font-weight-medium);\n    }\n  }\n  .file\\:text-foreground {\n    &::file-selector-button {\n      color: var(--foreground);\n    }\n  }\n  .placeholder\\:text-muted-foreground {\n    &::-moz-placeholder {\n      color: var(--muted-foreground);\n    }\n    &::placeholder {\n      color: var(--muted-foreground);\n    }\n  }\n  .hover\\:bg-accent {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--accent);\n      }\n    }\n  }\n  .hover\\:bg-blue-700 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-blue-700);\n      }\n    }\n  }\n  .hover\\:bg-destructive\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);\n      }\n    }\n  }\n  .hover\\:bg-primary\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in oklab, var(--primary) 90%, transparent);\n      }\n    }\n  }\n  .hover\\:bg-secondary\\/80 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);\n      }\n    }\n  }\n  .hover\\:text-accent-foreground {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--accent-foreground);\n      }\n    }\n  }\n  .hover\\:underline {\n    &:hover {\n      @media (hover: hover) {\n        text-decoration-line: underline;\n      }\n    }\n  }\n  .focus\\:bg-accent {\n    &:focus {\n      background-color: var(--accent);\n    }\n  }\n  .focus\\:text-accent-foreground {\n    &:focus {\n      color: var(--accent-foreground);\n    }\n  }\n  .focus-visible\\:border-ring {\n    &:focus-visible {\n      border-color: var(--ring);\n    }\n  }\n  .focus-visible\\:ring-\\[3px\\] {\n    &:focus-visible {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus-visible\\:ring-destructive\\/20 {\n    &:focus-visible {\n      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n    }\n  }\n  .focus-visible\\:ring-ring\\/50 {\n    &:focus-visible {\n      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);\n    }\n  }\n  .disabled\\:pointer-events-none {\n    &:disabled {\n      pointer-events: none;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-2\\.5 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 2.5);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-3 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 3);\n    }\n  }\n  .has-\\[\\>svg\\]\\:px-4 {\n    &:has(>svg) {\n      padding-inline: calc(var(--spacing) * 4);\n    }\n  }\n  .aria-invalid\\:border-destructive {\n    &[aria-invalid=\"true\"] {\n      border-color: var(--destructive);\n    }\n  }\n  .aria-invalid\\:ring-destructive\\/20 {\n    &[aria-invalid=\"true\"] {\n      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);\n    }\n  }\n  .data-\\[disabled\\]\\:pointer-events-none {\n    &[data-disabled] {\n      pointer-events: none;\n    }\n  }\n  .data-\\[disabled\\]\\:opacity-50 {\n    &[data-disabled] {\n      opacity: 50%;\n    }\n  }\n  .data-\\[error\\=true\\]\\:text-destructive-foreground {\n    &[data-error=\"true\"] {\n      color: var(--destructive-foreground);\n    }\n  }\n  .data-\\[placeholder\\]\\:text-muted-foreground {\n    &[data-placeholder] {\n      color: var(--muted-foreground);\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:translate-y-1 {\n    &[data-side=\"bottom\"] {\n      --tw-translate-y: calc(var(--spacing) * 1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=bottom\\]\\:slide-in-from-top-2 {\n    &[data-side=\"bottom\"] {\n      --tw-enter-translate-y: -0.5rem;\n    }\n  }\n  .data-\\[side\\=left\\]\\:-translate-x-1 {\n    &[data-side=\"left\"] {\n      --tw-translate-x: calc(var(--spacing) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=left\\]\\:slide-in-from-right-2 {\n    &[data-side=\"left\"] {\n      --tw-enter-translate-x: 0.5rem;\n    }\n  }\n  .data-\\[side\\=right\\]\\:translate-x-1 {\n    &[data-side=\"right\"] {\n      --tw-translate-x: calc(var(--spacing) * 1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=right\\]\\:slide-in-from-left-2 {\n    &[data-side=\"right\"] {\n      --tw-enter-translate-x: -0.5rem;\n    }\n  }\n  .data-\\[side\\=top\\]\\:-translate-y-1 {\n    &[data-side=\"top\"] {\n      --tw-translate-y: calc(var(--spacing) * -1);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n  }\n  .data-\\[side\\=top\\]\\:slide-in-from-bottom-2 {\n    &[data-side=\"top\"] {\n      --tw-enter-translate-y: 0.5rem;\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:line-clamp-1 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        overflow: hidden;\n        display: -webkit-box;\n        -webkit-box-orient: vertical;\n        -webkit-line-clamp: 1;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:flex {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        display: flex;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:items-center {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        align-items: center;\n      }\n    }\n  }\n  .\\*\\:data-\\[slot\\=select-value\\]\\:gap-2 {\n    :is(& > *) {\n      &[data-slot=\"select-value\"] {\n        gap: calc(var(--spacing) * 2);\n      }\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-blue-600 {\n    &[data-state=\"checked\"] {\n      border-color: var(--color-blue-600);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:border-primary {\n    &[data-state=\"checked\"] {\n      border-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-blue-600 {\n    &[data-state=\"checked\"] {\n      background-color: var(--color-blue-600);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:bg-primary {\n    &[data-state=\"checked\"] {\n      background-color: var(--primary);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-blue-600 {\n    &[data-state=\"checked\"] {\n      color: var(--color-blue-600);\n    }\n  }\n  .data-\\[state\\=checked\\]\\:text-primary-foreground {\n    &[data-state=\"checked\"] {\n      color: var(--primary-foreground);\n    }\n  }\n  .data-\\[state\\=closed\\]\\:animate-out {\n    &[data-state=\"closed\"] {\n      animation-name: exit;\n      animation-duration: 150ms;\n      --tw-exit-opacity: initial;\n      --tw-exit-scale: initial;\n      --tw-exit-rotate: initial;\n      --tw-exit-translate-x: initial;\n      --tw-exit-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:fade-out-0 {\n    &[data-state=\"closed\"] {\n      --tw-exit-opacity: 0;\n    }\n  }\n  .data-\\[state\\=closed\\]\\:zoom-out-95 {\n    &[data-state=\"closed\"] {\n      --tw-exit-scale: .95;\n    }\n  }\n  .data-\\[state\\=open\\]\\:animate-in {\n    &[data-state=\"open\"] {\n      animation-name: enter;\n      animation-duration: 150ms;\n      --tw-enter-opacity: initial;\n      --tw-enter-scale: initial;\n      --tw-enter-rotate: initial;\n      --tw-enter-translate-x: initial;\n      --tw-enter-translate-y: initial;\n    }\n  }\n  .data-\\[state\\=open\\]\\:fade-in-0 {\n    &[data-state=\"open\"] {\n      --tw-enter-opacity: 0;\n    }\n  }\n  .data-\\[state\\=open\\]\\:zoom-in-95 {\n    &[data-state=\"open\"] {\n      --tw-enter-scale: .95;\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:text-sm {\n    @media (width >= 48rem) {\n      font-size: var(--text-sm);\n      line-height: var(--tw-leading, var(--text-sm--line-height));\n    }\n  }\n  .dark\\:focus-visible\\:ring-destructive\\/40 {\n    &:is(.dark *) {\n      &:focus-visible {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n      }\n    }\n  }\n  .dark\\:aria-invalid\\:ring-destructive\\/40 {\n    &:is(.dark *) {\n      &[aria-invalid=\"true\"] {\n        --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);\n      }\n    }\n  }\n  .\\[\\&_svg\\]\\:pointer-events-none {\n    & svg {\n      pointer-events: none;\n    }\n  }\n  .\\[\\&_svg\\]\\:shrink-0 {\n    & svg {\n      flex-shrink: 0;\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'size-\\'\\]\\)\\]\\:size-4 {\n    & svg:not([class*='size-']) {\n      width: calc(var(--spacing) * 4);\n      height: calc(var(--spacing) * 4);\n    }\n  }\n  .\\[\\&_svg\\:not\\(\\[class\\*\\=\\'text-\\'\\]\\)\\]\\:text-muted-foreground {\n    & svg:not([class*='text-']) {\n      color: var(--muted-foreground);\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:flex {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          display: flex;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:items-center {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          align-items: center;\n        }\n      }\n    }\n  }\n  .\\*\\:\\[span\\]\\:last\\:gap-2 {\n    :is(& > *) {\n      &:is(span) {\n        &:last-child {\n          gap: calc(var(--spacing) * 2);\n        }\n      }\n    }\n  }\n}\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.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.145 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --popover: oklch(0.145 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.985 0 0);\n  --primary-foreground: oklch(0.205 0 0);\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --accent: oklch(0.269 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.396 0.141 25.723);\n  --destructive-foreground: oklch(0.637 0.237 25.331);\n  --border: oklch(0.269 0 0);\n  --input: oklch(0.269 0 0);\n  --ring: oklch(0.439 0 0);\n  --chart-1: oklch(0.488 0.243 264.376);\n  --chart-2: oklch(0.696 0.17 162.48);\n  --chart-3: oklch(0.769 0.188 70.08);\n  --chart-4: oklch(0.627 0.265 303.9);\n  --chart-5: oklch(0.645 0.246 16.439);\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.488 0.243 264.376);\n  --sidebar-primary-foreground: oklch(0.985 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(0.269 0 0);\n  --sidebar-ring: oklch(0.439 0 0);\n}\n@layer base {\n  * {\n    border-color: var(--border);\n    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);\n  }\n  body {\n    background-color: var(--background);\n    color: var(--foreground);\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-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-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-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";
 styleInject(css_248z);
 
-exports.CheckoutEmbed = index$1;
-exports.PaymentElement = index;
+exports.CheckoutEmbed = index;
+exports.PaymentElement = PaymentElement$1;
 exports.useCart = useCart;
 exports.useCheckout = useCheckout;