@betterstore/react 0.2.3 → 0.2.5

package/dist/index.mjs

@@ -1,5 +1,18 @@
 import { create } from 'zustand';
-import React, { memo, useState, useEffect } from 'react';
+import * as React from 'react';
+import React__default, { useState, useEffect, memo } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeft, CircleIcon } from 'lucide-react';
+import { FormProvider, Controller, useFormContext, useFormState, appendErrors, useForm } from 'react-hook-form';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { validateFieldsNatively, toNestErrors } from '@hookform/resolvers';
+import { z } from 'zod';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { useStripe, useElements, PaymentElement as PaymentElement$1, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 
@@ -256,6 +269,18 @@ PERFORMANCE OF THIS SOFTWARE.
 /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -271,6 +296,608 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+// packages/react/compose-refs/src/composeRefs.tsx
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+
+// packages/react/slot/src/slot.tsx
+var Slot = React.forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  const childrenArray = React.Children.toArray(children);
+  const slottable = childrenArray.find(isSlottable);
+  if (slottable) {
+    const newElement = slottable.props.children;
+    const newChildren = childrenArray.map((child) => {
+      if (child === slottable) {
+        if (React.Children.count(newElement) > 1) return React.Children.only(null);
+        return React.isValidElement(newElement) ? newElement.props.children : null;
+      } else {
+        return child;
+      }
+    });
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+  }
+  return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+});
+Slot.displayName = "Slot";
+var SlotClone = React.forwardRef((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+  if (React.isValidElement(children)) {
+    const childrenRef = getElementRef(children);
+    const props2 = mergeProps(slotProps, children.props);
+    if (children.type !== React.Fragment) {
+      props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+    }
+    return React.cloneElement(children, props2);
+  }
+  return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+});
+SlotClone.displayName = "SlotClone";
+var Slottable = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+function isSlottable(child) {
+  return React.isValidElement(child) && child.type === Slottable;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+            outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button(_a) {
+    var { className, variant, size, asChild = false } = _a, props = __rest(_a, ["className", "variant", "size", "asChild"]);
+    const Comp = asChild ? Slot : "button";
+    return (React.createElement(Comp, Object.assign({ "data-slot": "button", className: cn(buttonVariants({ variant, size, className })) }, props)));
+}
+
+function Checkbox(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(CheckboxPrimitive.Root, Object.assign({ "data-slot": "checkbox", className: cn("peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className) }, props),
+        React.createElement(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none" },
+            React.createElement(CheckIcon, { className: "size-3.5" }))));
+}
+
+function Label(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(LabelPrimitive.Root, Object.assign({ "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className) }, props)));
+}
+
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = (_a) => {
+    var props = __rest(_a, []);
+    return (React.createElement(FormFieldContext.Provider, { value: { name: props.name } },
+        React.createElement(Controller, Object.assign({}, props))));
+};
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState } = useFormContext();
+    const formState = useFormState({ name: fieldContext.name });
+    const fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    const { id } = itemContext;
+    return Object.assign({ id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message` }, fieldState);
+};
+const FormItemContext = React.createContext({});
+function FormItem(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const id = React.useId();
+    return (React.createElement(FormItemContext.Provider, { value: { id } },
+        React.createElement("div", Object.assign({ "data-slot": "form-item", className: cn("grid gap-2", className) }, props))));
+}
+function FormLabel(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { error, formItemId } = useFormField();
+    return (React.createElement(Label, Object.assign({ "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive-foreground", className), htmlFor: formItemId }, props)));
+}
+function FormControl(_a) {
+    var props = __rest(_a, []);
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (React.createElement(Slot, Object.assign({ "data-slot": "form-control", id: formItemId, "aria-describedby": !error
+            ? `${formDescriptionId}`
+            : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error }, props)));
+}
+function FormMessage(_a) {
+    var _b;
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { error, formMessageId } = useFormField();
+    const body = error ? String((_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : "") : props.children;
+    if (!body) {
+        return null;
+    }
+    return (React.createElement("p", Object.assign({ "data-slot": "form-message", id: formMessageId, className: cn("text-destructive-foreground text-sm", className) }, props), body));
+}
+
+function Input(_a) {
+    var { className, type } = _a, props = __rest(_a, ["className", "type"]);
+    return (React.createElement("input", Object.assign({ type: type, "data-slot": "input", className: cn("border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className) }, props)));
+}
+
+function Select(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SelectPrimitive.Root, Object.assign({ "data-slot": "select" }, props));
+}
+function SelectValue(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SelectPrimitive.Value, Object.assign({ "data-slot": "select-value" }, props));
+}
+function SelectTrigger(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React.createElement(SelectPrimitive.Trigger, Object.assign({ "data-slot": "select-trigger", className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props),
+        children,
+        React.createElement(SelectPrimitive.Icon, { asChild: true },
+            React.createElement(ChevronDownIcon, { className: "size-4 opacity-50" }))));
+}
+function SelectContent(_a) {
+    var { className, children, position = "popper" } = _a, props = __rest(_a, ["className", "children", "position"]);
+    return (React.createElement(SelectPrimitive.Portal, null,
+        React.createElement(SelectPrimitive.Content, Object.assign({ "data-slot": "select-content", className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md", position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position }, props),
+            React.createElement(SelectScrollUpButton, null),
+            React.createElement(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1") }, children),
+            React.createElement(SelectScrollDownButton, null))));
+}
+function SelectItem(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React.createElement(SelectPrimitive.Item, Object.assign({ "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className) }, props),
+        React.createElement("span", { className: "absolute right-2 flex size-3.5 items-center justify-center" },
+            React.createElement(SelectPrimitive.ItemIndicator, null,
+                React.createElement(CheckIcon, { className: "size-4" }))),
+        React.createElement(SelectPrimitive.ItemText, null, children)));
+}
+function SelectScrollUpButton(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SelectPrimitive.ScrollUpButton, Object.assign({ "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props),
+        React.createElement(ChevronUpIcon, { className: "size-4" })));
+}
+function SelectScrollDownButton(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SelectPrimitive.ScrollDownButton, Object.assign({ "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props),
+        React.createElement(ChevronDownIcon, { className: "size-4" })));
+}
+
+function n(r,e){for(var n={};r.length;){var s=r[0],t=s.code,i=s.message,a=s.path.join(".");if(!n[a])if("unionErrors"in s){var u=s.unionErrors[0].errors[0];n[a]={message:u.message,type:u.code};}else n[a]={message:i,type:t};if("unionErrors"in s&&s.unionErrors.forEach(function(e){return e.errors.forEach(function(e){return r.push(e)})}),e){var c=n[a].types,f=c&&c[s.code];n[a]=appendErrors(a,e,n,t,f?[].concat(f,s.message):s.message);}r.shift();}return n}function s(o,s,t){return void 0===t&&(t={}),function(i,a,u){try{return Promise.resolve(function(e,n){try{var a=Promise.resolve(o["sync"===t.mode?"parse":"parseAsync"](i,s)).then(function(e){return u.shouldUseNativeValidation&&validateFieldsNatively({},u),{errors:{},values:t.raw?Object.assign({},i):e}});}catch(r){return n(r)}return a&&a.then?a.then(void 0,n):a}(0,function(r){if(function(r){return Array.isArray(null==r?void 0:r.errors)}(r))return {values:{},errors:toNestErrors(n(r.errors,!u.shouldUseNativeValidation&&"all"===u.criteriaMode),u)};throw r}))}catch(r){return Promise.reject(r)}}}
+
+// Shipping address schema
+const customerSchema = z.object({
+    email: z.string().email("Please enter a valid email address"),
+    marketingConsent: z.boolean().optional(),
+    firstName: z.string().optional(),
+    lastName: z.string().min(1, "Last name is required"),
+    address: z.string().min(1, "Address is required"),
+    apartment: z.string().optional(),
+    city: z.string().min(1, "City is required"),
+    state: z.string().min(1, "State is required"),
+    zipCode: z.string().min(5, "ZIP code is required"),
+    country: z.string().min(1, "Country is required"),
+    saveInfo: z.boolean().optional(),
+});
+// Shipping method schema
+const shippingMethodSchema = z.object({
+    method: z.enum(["economy", "standard"]),
+});
+// Payment method schema
+const paymentMethodSchema = z.object({
+    cardNumber: z.string().min(1, "Card number is required"),
+    expiryDate: z.string().min(1, "Expiry date is required"),
+    cvv: z.string().min(1, "CVV is required"),
+    nameOnCard: z.string().min(1, "Name is required"),
+});
+// Combined checkout schema
+z.object({
+    customer: customerSchema,
+    shipping: shippingMethodSchema,
+    payment: paymentMethodSchema,
+});
+
+function CustomerForm({ initialData, onSubmit, onBack, }) {
+    const form = useForm({
+        resolver: s(customerSchema),
+        defaultValues: initialData || {
+            email: "",
+            marketingConsent: false,
+            firstName: "",
+            lastName: "",
+            apartment: "",
+            city: "",
+            state: "",
+            zipCode: "",
+            country: "United States",
+            saveInfo: false,
+        },
+    });
+    return (React__default.createElement("div", { className: "space-y-6" },
+        React__default.createElement("div", { className: "space-y-2" },
+            React__default.createElement("div", { className: "flex items-center justify-between" },
+                React__default.createElement("h2", { className: "text-2xl font-bold text-white" }, "Contact")),
+            React__default.createElement(FormField, { control: form.control, name: "email", render: ({ field }) => (React__default.createElement(FormItem, null,
+                    React__default.createElement(FormLabel, { className: "text-white" }, "Email or mobile phone number"),
+                    React__default.createElement(FormControl, null,
+                        React__default.createElement(Input, Object.assign({ placeholder: "email@example.com", className: "bg-black border-gray-700 text-white" }, field))),
+                    React__default.createElement(FormMessage, null))) }),
+            React__default.createElement(FormField, { control: form.control, name: "marketingConsent", render: ({ field }) => (React__default.createElement(FormItem, { className: "flex flex-row items-start space-x-2 space-y-0" },
+                    React__default.createElement(FormControl, null,
+                        React__default.createElement(Checkbox, { checked: field.value, onCheckedChange: field.onChange, className: "data-[state=checked]:bg-blue-600" })),
+                    React__default.createElement(FormLabel, { className: "text-sm font-normal text-gray-400" }, "Email me with news and offers"))) }),
+            React__default.createElement("div", { className: "flex items-center justify-between" },
+                React__default.createElement("h2", { className: "text-2xl font-bold text-white" }, "Shipping customer")),
+            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
+                React__default.createElement("div", { className: "text-white" },
+                    React__default.createElement("span", null, "Contact"),
+                    React__default.createElement("span", { className: "ml-2 text-gray-400" }, "contactemail")),
+                React__default.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change"))),
+        React__default.createElement(Form, Object.assign({}, form),
+            React__default.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
+                React__default.createElement(FormField, { control: form.control, name: "country", render: ({ field }) => (React__default.createElement(FormItem, null,
+                        React__default.createElement(FormLabel, { className: "text-white" }, "Country/Region"),
+                        React__default.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value },
+                            React__default.createElement(FormControl, null,
+                                React__default.createElement(SelectTrigger, { className: "bg-black border-gray-700 text-white" },
+                                    React__default.createElement(SelectValue, { placeholder: "Select a country" }))),
+                            React__default.createElement(SelectContent, { className: "bg-gray-900 text-white border-gray-700" },
+                                React__default.createElement(SelectItem, { value: "United States" }, "United States"),
+                                React__default.createElement(SelectItem, { value: "Canada" }, "Canada"),
+                                React__default.createElement(SelectItem, { value: "United Kingdom" }, "United Kingdom"))),
+                        React__default.createElement(FormMessage, null))) }),
+                React__default.createElement("div", { className: "grid grid-cols-2 gap-4" },
+                    React__default.createElement(FormField, { control: form.control, name: "firstName", render: ({ field }) => (React__default.createElement(FormItem, null,
+                            React__default.createElement(FormLabel, { className: "text-white" }, "First name (optional)"),
+                            React__default.createElement(FormControl, null,
+                                React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
+                            React__default.createElement(FormMessage, null))) }),
+                    React__default.createElement(FormField, { control: form.control, name: "lastName", render: ({ field }) => (React__default.createElement(FormItem, null,
+                            React__default.createElement(FormLabel, { className: "text-white" }, "Last name"),
+                            React__default.createElement(FormControl, null,
+                                React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
+                            React__default.createElement(FormMessage, null))) })),
+                React__default.createElement(FormField, { control: form.control, name: "apartment", render: ({ field }) => (React__default.createElement(FormItem, null,
+                        React__default.createElement(FormLabel, { className: "text-white" }, "Apartment, suite, etc. (optional)"),
+                        React__default.createElement(FormControl, null,
+                            React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
+                        React__default.createElement(FormMessage, null))) }),
+                React__default.createElement("div", { className: "grid grid-cols-3 gap-4" },
+                    React__default.createElement(FormField, { control: form.control, name: "city", render: ({ field }) => (React__default.createElement(FormItem, null,
+                            React__default.createElement(FormLabel, { className: "text-white" }, "City"),
+                            React__default.createElement(FormControl, null,
+                                React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
+                            React__default.createElement(FormMessage, null))) }),
+                    React__default.createElement(FormField, { control: form.control, name: "state", render: ({ field }) => (React__default.createElement(FormItem, null,
+                            React__default.createElement(FormLabel, { className: "text-white" }, "State"),
+                            React__default.createElement(Select, { onValueChange: field.onChange, defaultValue: field.value },
+                                React__default.createElement(FormControl, null,
+                                    React__default.createElement(SelectTrigger, { className: "bg-black border-gray-700 text-white" },
+                                        React__default.createElement(SelectValue, { placeholder: "State" }))),
+                                React__default.createElement(SelectContent, { className: "bg-gray-900 text-white border-gray-700" },
+                                    React__default.createElement(SelectItem, { value: "Illinois" }, "Illinois"),
+                                    React__default.createElement(SelectItem, { value: "California" }, "California"),
+                                    React__default.createElement(SelectItem, { value: "New York" }, "New York"),
+                                    React__default.createElement(SelectItem, { value: "Texas" }, "Texas"))),
+                            React__default.createElement(FormMessage, null))) }),
+                    React__default.createElement(FormField, { control: form.control, name: "zipCode", render: ({ field }) => (React__default.createElement(FormItem, null,
+                            React__default.createElement(FormLabel, { className: "text-white" }, "ZIP code"),
+                            React__default.createElement(FormControl, null,
+                                React__default.createElement(Input, Object.assign({ className: "bg-black border-gray-700 text-white" }, field))),
+                            React__default.createElement(FormMessage, null))) })),
+                React__default.createElement(FormField, { control: form.control, name: "saveInfo", render: ({ field }) => (React__default.createElement(FormItem, { className: "flex flex-row items-start space-x-2 space-y-0" },
+                        React__default.createElement(FormControl, null,
+                            React__default.createElement(Checkbox, { checked: field.value, onCheckedChange: field.onChange, className: "data-[state=checked]:bg-blue-600" })),
+                        React__default.createElement(FormLabel, { className: "text-sm font-normal text-gray-400" }, "Save this information for next time"))) }),
+                React__default.createElement("div", { className: "flex justify-between items-center pt-4" },
+                    React__default.createElement(Button, { type: "button", variant: "link", className: "text-blue-500 p-0 h-auto flex items-center gap-1", onClick: onBack },
+                        React__default.createElement(ChevronLeft, { className: "h-4 w-4" }),
+                        "Return to information"),
+                    React__default.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 = useForm({
+        resolver: s(paymentMethodSchema),
+        defaultValues: initialData || {
+            cardNumber: "",
+            expiryDate: "",
+            cvv: "",
+            nameOnCard: "",
+        },
+    });
+    return (React__default.createElement("div", { className: "space-y-6" },
+        React__default.createElement("div", { className: "space-y-2" },
+            React__default.createElement("div", { className: "flex items-center justify-between" },
+                React__default.createElement("h2", { className: "text-2xl font-bold text-white" }, "Payment"),
+                React__default.createElement("p", { className: "text-sm text-gray-400" }, "All transactions are secure and encrypted.")),
+            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
+                React__default.createElement("div", { className: "text-white" },
+                    React__default.createElement("span", null, "Contact"),
+                    React__default.createElement("span", { className: "ml-2 text-gray-400" }, contactEmail)),
+                React__default.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change")),
+            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
+                React__default.createElement("div", { className: "text-white" },
+                    React__default.createElement("span", null, "Ship to"),
+                    React__default.createElement("span", { className: "ml-2 text-gray-400" }, shippingAddress)),
+                React__default.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change")),
+            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
+                React__default.createElement("div", { className: "text-white" },
+                    React__default.createElement("span", null, "Shipping method"),
+                    React__default.createElement("span", { className: "ml-2 text-gray-400" },
+                        shippingMethod,
+                        " \u00B7 ",
+                        shippingPrice)),
+                React__default.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change"))),
+        React__default.createElement("div", { className: "space-y-4 bg-gray-900 p-4 rounded-md" },
+            React__default.createElement("div", { className: "text-white font-medium" }, "Payment method"),
+            React__default.createElement(Form, Object.assign({}, form),
+                React__default.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
+                    React__default.createElement(FormField, { control: form.control, name: "cardNumber", render: ({ field }) => (React__default.createElement(FormItem, null,
+                            React__default.createElement(FormLabel, { className: "text-white" }, "Card number"),
+                            React__default.createElement(FormControl, null,
+                                React__default.createElement(Input, Object.assign({ placeholder: "1234 5678 9012 3456", className: "bg-black border-gray-700 text-white" }, field))),
+                            React__default.createElement(FormMessage, null))) }),
+                    React__default.createElement("div", { className: "grid grid-cols-2 gap-4" },
+                        React__default.createElement(FormField, { control: form.control, name: "expiryDate", render: ({ field }) => (React__default.createElement(FormItem, null,
+                                React__default.createElement(FormLabel, { className: "text-white" }, "Expiration date (MM/YY)"),
+                                React__default.createElement(FormControl, null,
+                                    React__default.createElement(Input, Object.assign({ placeholder: "MM/YY", className: "bg-black border-gray-700 text-white" }, field))),
+                                React__default.createElement(FormMessage, null))) }),
+                        React__default.createElement(FormField, { control: form.control, name: "cvv", render: ({ field }) => (React__default.createElement(FormItem, null,
+                                React__default.createElement(FormLabel, { className: "text-white" }, "Security code"),
+                                React__default.createElement(FormControl, null,
+                                    React__default.createElement(Input, Object.assign({ placeholder: "CVV", className: "bg-black border-gray-700 text-white" }, field))),
+                                React__default.createElement(FormMessage, null))) })),
+                    React__default.createElement(FormField, { control: form.control, name: "nameOnCard", render: ({ field }) => (React__default.createElement(FormItem, null,
+                            React__default.createElement(FormLabel, { className: "text-white" }, "Name on card"),
+                            React__default.createElement(FormControl, null,
+                                React__default.createElement(Input, Object.assign({ placeholder: "Name as it appears on card", className: "bg-black border-gray-700 text-white" }, field))),
+                            React__default.createElement(FormMessage, null))) }),
+                    React__default.createElement("div", { className: "flex justify-between items-center pt-4" },
+                        React__default.createElement(Button, { type: "button", variant: "link", className: "text-blue-500 p-0 h-auto flex items-center gap-1", onClick: onBack },
+                            React__default.createElement(ChevronLeft, { className: "h-4 w-4" }),
+                            "Return to shipping"),
+                        React__default.createElement(Button, { type: "submit", className: "bg-blue-600 hover:bg-blue-700 text-white" }, "Pay now")))))));
+}
+
+function RadioGroup(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(RadioGroupPrimitive.Root, Object.assign({ "data-slot": "radio-group", className: cn("grid gap-3", className) }, props)));
+}
+function RadioGroupItem(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(RadioGroupPrimitive.Item, Object.assign({ "data-slot": "radio-group-item", className: cn("border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className) }, props),
+        React.createElement(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center" },
+            React.createElement(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }))));
+}
+
+function ShippingMethodForm({ initialData, onSubmit, onBack, contactEmail, shippingAddress, }) {
+    const form = useForm({
+        resolver: s(shippingMethodSchema),
+        defaultValues: initialData || {
+            method: "economy",
+        },
+    });
+    return (React__default.createElement("div", { className: "space-y-6" },
+        React__default.createElement("div", { className: "space-y-2" },
+            React__default.createElement("div", { className: "flex items-center justify-between" },
+                React__default.createElement("h2", { className: "text-2xl font-bold text-white" }, "Shipping method")),
+            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
+                React__default.createElement("div", { className: "text-white" },
+                    React__default.createElement("span", null, "Contact"),
+                    React__default.createElement("span", { className: "ml-2 text-gray-400" }, contactEmail)),
+                React__default.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change")),
+            React__default.createElement("div", { className: "flex items-center justify-between text-sm" },
+                React__default.createElement("div", { className: "text-white" },
+                    React__default.createElement("span", null, "Ship to"),
+                    React__default.createElement("span", { className: "ml-2 text-gray-400" }, shippingAddress)),
+                React__default.createElement(Button, { variant: "link", className: "text-blue-500 p-0 h-auto", onClick: onBack }, "Change"))),
+        React__default.createElement(Form, Object.assign({}, form),
+            React__default.createElement("form", { onSubmit: form.handleSubmit(onSubmit), className: "space-y-4" },
+                React__default.createElement(FormField, { control: form.control, name: "method", render: ({ field }) => (React__default.createElement(FormItem, null,
+                        React__default.createElement(FormControl, null,
+                            React__default.createElement(RadioGroup, { onValueChange: field.onChange, defaultValue: field.value, className: "space-y-3" },
+                                React__default.createElement(FormItem, { className: "flex items-center justify-between space-x-3 space-y-0 rounded-md border border-gray-700 p-4 cursor-pointer data-[state=checked]:border-blue-600" },
+                                    React__default.createElement("div", { className: "flex items-center space-x-3" },
+                                        React__default.createElement(FormControl, null,
+                                            React__default.createElement(RadioGroupItem, { value: "economy", className: "data-[state=checked]:border-blue-600 data-[state=checked]:text-blue-600" })),
+                                        React__default.createElement("div", { className: "space-y-1" },
+                                            React__default.createElement(FormLabel, { className: "text-white" }, "Economy"),
+                                            React__default.createElement("div", { className: "text-sm text-gray-400" }, "5 to 8 business days"))),
+                                    React__default.createElement("div", { className: "text-white font-medium" }, "$4.90")),
+                                React__default.createElement(FormItem, { className: "flex items-center justify-between space-x-3 space-y-0 rounded-md border border-gray-700 p-4 cursor-pointer data-[state=checked]:border-blue-600" },
+                                    React__default.createElement("div", { className: "flex items-center space-x-3" },
+                                        React__default.createElement(FormControl, null,
+                                            React__default.createElement(RadioGroupItem, { value: "standard", className: "data-[state=checked]:border-blue-600 data-[state=checked]:text-blue-600" })),
+                                        React__default.createElement("div", { className: "space-y-1" },
+                                            React__default.createElement(FormLabel, { className: "text-white" }, "Standard"),
+                                            React__default.createElement("div", { className: "text-sm text-gray-400" }, "3 to 4 business days"))),
+                                    React__default.createElement("div", { className: "text-white font-medium" }, "$6.90")))),
+                        React__default.createElement(FormMessage, null))) }),
+                React__default.createElement("div", { className: "flex justify-between items-center pt-4" },
+                    React__default.createElement(Button, { type: "button", variant: "link", className: "text-blue-500 p-0 h-auto flex items-center gap-1", onClick: onBack },
+                        React__default.createElement(ChevronLeft, { className: "h-4 w-4" }),
+                        "Return to information"),
+                    React__default.createElement(Button, { type: "submit", className: "bg-blue-600 hover:bg-blue-700 text-white" }, "Continue to payment"))))));
+}
+
+function useLocalStorage(key, initialValue) {
+    // Create state to store our value
+    const [storedValue, setStoredValue] = useState(initialValue);
+    // Initialize state on client-side only
+    useEffect(() => {
+        try {
+            // Get from local storage by key
+            const item = window.localStorage.getItem(key);
+            // Parse stored json or if none return initialValue
+            setStoredValue(item ? JSON.parse(item) : initialValue);
+        }
+        catch (error) {
+            // If error, just use the initialValue
+            console.error(error);
+            setStoredValue(initialValue);
+        }
+    }, [initialValue, key]);
+    // Return a wrapped version of useState's setter function that
+    // persists the new value to localStorage.
+    const setValue = (value) => {
+        try {
+            // Allow value to be a function so we have the same API as useState
+            const valueToStore = value instanceof Function ? value(storedValue) : value;
+            // Save state
+            setStoredValue(valueToStore);
+            // Save to local storage
+            if (typeof window !== "undefined") {
+                window.localStorage.setItem(key, JSON.stringify(valueToStore));
+            }
+        }
+        catch (error) {
+            // A more advanced implementation would handle the error case
+            console.error(error);
+        }
+    };
+    return [storedValue, setValue];
+}
+
+function CheckoutForm$2({ checkoutId, onComplete, }) {
+    const [step, setStep] = useState("contact");
+    const [formData, setFormData] = useLocalStorage(`checkout-${checkoutId}`, {});
+    // Helper function to format address for display
+    const formatAddress = (address) => {
+        return `${address.address}, ${address.city} ${address.state} ${address.zipCode}, ${address.country}`;
+    };
+    // Format shipping method for display
+    const formatShippingMethod = (method) => {
+        switch (method) {
+            case "economy":
+                return { name: "Economy", price: "$4.90" };
+            case "standard":
+                return { name: "Standard", price: "$6.90" };
+            default:
+                return { name: "Economy", price: "$4.90" };
+        }
+    };
+    // Handle address form submission
+    const handleCustomerSubmit = (data) => {
+        setFormData(Object.assign(Object.assign({}, formData), { customer: data }));
+        setStep("shipping");
+    };
+    // Handle shipping method form submission
+    const handleShippingSubmit = (data) => {
+        setFormData(Object.assign(Object.assign({}, formData), { shipping: data }));
+        setStep("payment");
+    };
+    // Handle payment form submission
+    const handlePaymentSubmit = (data) => {
+        const completeFormData = Object.assign(Object.assign({}, formData), { payment: data });
+        setFormData(completeFormData);
+        if (onComplete) {
+            onComplete(completeFormData);
+        }
+    };
+    // Navigate back to previous step
+    const handleBack = () => {
+        if (step === "customer")
+            setStep("customer");
+        if (step === "shipping")
+            setStep("customer");
+        if (step === "payment")
+            setStep("shipping");
+    };
+    return (React__default.createElement("div", { className: "space-y-6" },
+        step === "customer" && (React__default.createElement(CustomerForm, { initialData: formData.customer, onSubmit: handleCustomerSubmit, onBack: handleBack })),
+        step === "shipping" && formData.customer && (React__default.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__default.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 }))));
+}
+
 function CheckoutSummary({ lineItems, shipping, tax, currency, }) {
     const subtotal = lineItems.reduce((acc, item) => {
         var _a, _b;
@@ -280,37 +907,36 @@ function CheckoutSummary({ lineItems, shipping, tax, currency, }) {
     const formatPrice = (cents) => {
         return `${(cents / 100).toFixed(2)} ${currency}`;
     };
-    return (React.createElement("div", { className: "bg-black text-white p-6 rounded-lg" },
+    return (React__default.createElement("div", { className: "bg-black text-white p-6 rounded-lg" },
         lineItems.map((item, index) => {
             var _a, _b, _c, _d, _e;
-            return (React.createElement("div", { key: index, className: "flex items-center mb-6" },
-                React.createElement("div", { className: "relative" },
-                    React.createElement("div", { className: "w-16 h-16 bg-zinc-900 rounded-lg overflow-hidden relative" }, ((_a = item.product) === null || _a === void 0 ? void 0 : _a.images[0]) ? (React.createElement("img", { src: item.product.images[0] || "/placeholder.svg", alt: ((_b = item.product) === null || _b === void 0 ? void 0 : _b.title) || "Product image", className: "object-cover" })) : (React.createElement("div", { className: "w-full h-full flex items-center justify-center bg-zinc-800" },
-                        React.createElement("span", { className: "text-zinc-500" }, "No image")))),
-                    React.createElement("div", { className: "absolute -top-2 -right-2 w-6 h-6 bg-zinc-700 rounded-full flex items-center justify-center text-sm" }, item.quantity)),
-                React.createElement("div", { className: "ml-4 flex-1" },
-                    React.createElement("h3", { className: "text-lg font-medium" }, ((_c = item.product) === null || _c === void 0 ? void 0 : _c.title) || "Product"),
-                    React.createElement("p", { className: "text-zinc-400 text-sm" }, item.variantOptions.map((option) => option.name).join(" / "))),
-                React.createElement("div", { className: "text-right" },
-                    React.createElement("p", { className: "text-lg font-medium" }, formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0)))));
+            return (React__default.createElement("div", { key: index, className: "flex items-center mb-6" },
+                React__default.createElement("div", { className: "relative" },
+                    React__default.createElement("div", { className: "w-16 h-16 bg-zinc-900 rounded-lg overflow-hidden relative" }, ((_a = item.product) === null || _a === void 0 ? void 0 : _a.images[0]) && (React__default.createElement("img", { src: item.product.images[0] || "/placeholder.svg", alt: ((_b = item.product) === null || _b === void 0 ? void 0 : _b.title) || "Product image", className: "object-cover" }))),
+                    React__default.createElement("div", { className: "absolute -top-2 -right-2 w-6 h-6 bg-zinc-700 rounded-full flex items-center justify-center text-sm" }, item.quantity)),
+                React__default.createElement("div", { className: "ml-4 flex-1" },
+                    React__default.createElement("h3", { className: "text-lg font-medium" }, ((_c = item.product) === null || _c === void 0 ? void 0 : _c.title) || "Product"),
+                    React__default.createElement("p", { className: "text-zinc-400 text-sm" }, item.variantOptions.map((option) => option.name).join(" / "))),
+                React__default.createElement("div", { className: "text-right" },
+                    React__default.createElement("p", { className: "text-lg font-medium" }, formatPrice((_e = (_d = item.product) === null || _d === void 0 ? void 0 : _d.priceInCents) !== null && _e !== void 0 ? _e : 0)))));
         }),
-        React.createElement("div", { className: "border-t border-zinc-800 pt-4 mt-2" },
-            React.createElement("div", { className: "flex justify-between py-2" },
-                React.createElement("span", { className: "text-lg" }, "Subtotal"),
-                React.createElement("span", { className: "text-lg" }, formatPrice(subtotal))),
-            React.createElement("div", { className: "flex justify-between py-2" },
-                React.createElement("span", { className: "text-lg" }, "Shipping"),
-                React.createElement("span", { className: "text-zinc-400" }, shipping !== undefined
+        React__default.createElement("div", { className: "border-t border-zinc-800 pt-4 mt-2" },
+            React__default.createElement("div", { className: "flex justify-between py-2" },
+                React__default.createElement("span", { className: "text-lg" }, "Subtotal"),
+                React__default.createElement("span", { className: "text-lg" }, formatPrice(subtotal))),
+            React__default.createElement("div", { className: "flex justify-between py-2" },
+                React__default.createElement("span", { className: "text-lg" }, "Shipping"),
+                React__default.createElement("span", { className: "text-zinc-400" }, shipping !== undefined
                     ? formatPrice(shipping)
                     : "Calculated at next step")),
-            tax !== undefined && (React.createElement("div", { className: "flex justify-between py-2" },
-                React.createElement("span", { className: "text-lg" }, "Tax"),
-                React.createElement("span", { className: "text-lg" }, formatPrice(tax)))),
-            React.createElement("div", { className: "flex justify-between py-4 mt-2 border-t border-zinc-800 items-center" },
-                React.createElement("span", { className: "text-2xl font-bold" }, "Total"),
-                React.createElement("div", { className: "text-right" },
-                    React.createElement("span", { className: "text-zinc-400 text-sm mr-2" }, currency),
-                    React.createElement("span", { className: "text-2xl font-bold" }, formatPrice(total)))))));
+            tax !== undefined && (React__default.createElement("div", { className: "flex justify-between py-2" },
+                React__default.createElement("span", { className: "text-lg" }, "Tax"),
+                React__default.createElement("span", { className: "text-lg" }, formatPrice(tax)))),
+            React__default.createElement("div", { className: "flex justify-between py-4 mt-2 border-t border-zinc-800 items-center" },
+                React__default.createElement("span", { className: "text-2xl font-bold" }, "Total"),
+                React__default.createElement("div", { className: "text-right" },
+                    React__default.createElement("span", { className: "text-zinc-400 text-sm mr-2" }, currency),
+                    React__default.createElement("span", { className: "text-2xl font-bold" }, formatPrice(total)))))));
 }
 
 function CheckoutEmbed({ checkoutId }) {
@@ -334,16 +960,16 @@ function CheckoutEmbed({ checkoutId }) {
         }
         fetchCheckout();
     }, [checkoutId]);
-    if (loading) {
-        return React.createElement("div", null, "Loading...");
-    }
-    if (!checkout) {
-        return React.createElement("div", null, "Checkout not found");
+    const handleComplete = (formData) => {
+        console.log("Checkout complete:", formData);
+        // Here you would typically send the completed form data to your API
+    };
+    if (!checkout && !loading) {
+        return React__default.createElement("div", null, "Checkout not found");
     }
-    return (React.createElement("div", { className: "grid md:grid-cols-2 gap-4" },
-        React.createElement("div", null, "forms here"),
-        React.createElement("div", null,
-            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 }))));
+    return (React__default.createElement("div", { className: "grid md:grid-cols-2 gap-4" },
+        React__default.createElement("div", null, loading ? (React__default.createElement("div", { className: "text-white" }, "Loading...")) : (React__default.createElement(CheckoutForm$2, { checkoutId: checkoutId, onComplete: handleComplete }))),
+        React__default.createElement("div", null, loading ? (React__default.createElement("div", null, "Loading...")) : (React__default.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 = memo(CheckoutEmbed);
 
@@ -380,10 +1006,10 @@ const CheckoutForm = ({ onSuccess, onError, children, }) => {
         setErrorMessage(undefined);
         setIsSubmitting(false);
     });
-    return (React.createElement("form", { onSubmit: handleSubmit },
-        React.createElement("div", null,
-            React.createElement(PaymentElement$1, null),
-            React.createElement("p", { className: "text-red-500" }, errorMessage)),
+    return (React__default.createElement("form", { onSubmit: handleSubmit },
+        React__default.createElement("div", null,
+            React__default.createElement(PaymentElement$1, null),
+            React__default.createElement("p", { className: "text-red-500" }, errorMessage)),
         children));
 };
 var CheckoutForm$1 = memo(CheckoutForm);
@@ -392,9 +1018,39 @@ const publicStripeKey = "pk_test_51OjSZ2JoDmiuDQz4Vub296KIgTCy4y8NJos59h93bq3sLe
 const stripePromise = loadStripe(publicStripeKey);
 function PaymentElement({ paymentSecret, checkoutAppearance, onSuccess, onError, children, }) {
     const options = Object.assign(Object.assign({ locale: "en" }, (checkoutAppearance ? checkoutAppearance : {})), { clientSecret: paymentSecret });
-    return (React.createElement(Elements, { stripe: stripePromise, options: options },
-        React.createElement(CheckoutForm$1, { onSuccess: onSuccess, onError: onError, children: children })));
+    return (React__default.createElement(Elements, { stripe: stripePromise, options: options },
+        React__default.createElement(CheckoutForm$1, { onSuccess: onSuccess, onError: onError, children: children })));
 }
 var index = memo(PaymentElement);
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+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}";
+styleInject(css_248z);
+
 export { index$1 as CheckoutEmbed, index as PaymentElement, useCart, useCheckout };