@doujins/payments-ui 0.1.14 → 0.1.16

package/dist/index.js

@@ -1,5 +1,5 @@
-import * as React15 from 'react';
-import React15__default, { createContext, useMemo, useState, useEffect, useCallback, useRef, useContext } from 'react';
+import * as React4 from 'react';
+import React4__default, { createContext, useMemo, useState, useEffect, useCallback, useRef, useContext } from 'react';
 import { useQueryClient, useQuery, useMutation, QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
 import { ConnectionProvider, WalletProvider, useWallet, useConnection } from '@solana/wallet-adapter-react';
 import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
@@ -11,7 +11,7 @@ import { SolflareWalletAdapter } from '@solana/wallet-adapter-solflare';
 import { TrustWalletAdapter } from '@solana/wallet-adapter-trust';
 import { CoinbaseWalletAdapter } from '@solana/wallet-adapter-coinbase';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { ChevronDown, ChevronUp, Check, Loader2, CheckCircle, AlertCircle, Wallet, Ban, TriangleAlert, CreditCard, Trash2, Shield, UserRound, Calendar, KeyRound, XIcon, XCircle, RotateCcw, RefreshCw } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, Pencil, Loader2, CheckCircle, AlertCircle, Wallet, Ban, TriangleAlert, CreditCard, Trash2, Shield, UserRound, Calendar, KeyRound, XIcon, XCircle, RotateCcw, RefreshCw } from 'lucide-react';
 import clsx2, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -488,7 +488,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React15.forwardRef(
+var Button = React4.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -502,7 +502,7 @@ var Button = React15.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Input = React15.forwardRef(
+var Input = React4.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -522,7 +522,7 @@ Input.displayName = "Input";
 var labelVariants = cva(
   "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -531,9 +531,9 @@ var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
-var Select = ({ children, ...props }) => /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(SelectPrimitive.Root, { ...props, children }) });
+var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -549,7 +549,7 @@ var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -562,7 +562,7 @@ var SelectScrollUpButton = React15.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -575,33 +575,61 @@ var SelectScrollDownButton = React15.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React15.forwardRef(({ className, children, position = "popper", style, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "z-[200] max-h-64 w-full overflow-y-auto overflow-x-hidden rounded-md border border-white/20 bg-background-regular text-foreground shadow-lg backdrop-blur-xl 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",
-      className
-    ),
-    position,
-    style: {
-      // Override Floating UI positioning to work inside transformed modals
-      position: "absolute",
-      top: "100%",
-      left: 0,
-      marginTop: "4px",
-      ...style
-    },
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", children }),
-      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-    ]
-  }
-));
+var SelectContent = React4.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+  const viewportRef = React4.useRef(null);
+  const contentRef = React4.useCallback((node) => {
+    if (node) {
+      node.style.setProperty("max-height", "40vh", "important");
+      const anchorWidth = window.getComputedStyle(node).getPropertyValue("--radix-popper-anchor-width");
+      if (anchorWidth) {
+        node.style.setProperty("width", anchorWidth, "important");
+      }
+    }
+  }, []);
+  const combinedRef = React4.useCallback((node) => {
+    contentRef(node);
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [contentRef, ref]);
+  React4.useEffect(() => {
+    if (viewportRef.current) {
+      viewportRef.current.style.setProperty("max-height", "40vh", "important");
+    }
+  });
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      ref: combinedRef,
+      className: cn(
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-white/20 bg-background-regular text-foreground shadow-lg backdrop-blur-xl 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",
+        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,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            ref: viewportRef,
+            className: cn(
+              "p-1 overflow-y-auto",
+              position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -610,7 +638,7 @@ var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -626,7 +654,7 @@ var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -679,6 +707,7 @@ var CardDetailsForm = ({
   const [postalCode, setPostalCode] = useState(mergedDefaults.postalCode);
   const [country, setCountry] = useState(mergedDefaults.country);
   const [email, setEmail] = useState(mergedDefaults.email ?? "");
+  const [isEditingEmail, setIsEditingEmail] = useState(false);
   const [localError, setLocalError] = useState(null);
   const [isTokenizing, setIsTokenizing] = useState(false);
   const [collectReady, setCollectReady] = useState(
@@ -812,8 +841,7 @@ var CardDetailsForm = ({
     visible
   ]);
   const validate = () => {
-    const emailRequired = !defaultValues?.email && !config.defaultUser?.email;
-    if (!firstName.trim() || !lastName.trim() || !address1.trim() || !city.trim() || !postalCode.trim() || !country.trim() || emailRequired && !email.trim()) {
+    if (!firstName.trim() || !lastName.trim() || !address1.trim() || !city.trim() || !postalCode.trim() || !country.trim() || !email.trim()) {
       setLocalError("Please complete all required billing fields.");
       return false;
     }
@@ -832,7 +860,8 @@ var CardDetailsForm = ({
   };
   const errorMessage = localError ?? externalError;
   const collectFieldClass = "relative flex h-9 w-full items-center overflow-hidden rounded-md border border-white/30 bg-transparent px-3 text-sm text-foreground";
-  const showEmailField = !defaultValues?.email && !config.defaultUser?.email;
+  const hasDefaultEmail = Boolean(defaultValues?.email || config.defaultUser?.email);
+  const showEmailInput = !hasDefaultEmail || isEditingEmail;
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -867,18 +896,47 @@ var CardDetailsForm = ({
             )
           ] })
         ] }),
-        showEmailField && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              id: "email",
-              type: "email",
-              value: email,
-              onChange: (e) => setEmail(e.target.value),
-              required: true
-            }
-          )
+          showEmailInput ? /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "email",
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                required: true,
+                className: "flex-1"
+              }
+            ),
+            hasDefaultEmail && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => {
+                  setIsEditingEmail(false);
+                  setEmail(mergedDefaults.email ?? "");
+                },
+                className: "px-3 text-xs text-muted-foreground hover:text-foreground",
+                children: "Cancel"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between h-9 w-full rounded-md border border-white/30 bg-transparent px-3 text-sm text-foreground", children: [
+            /* @__PURE__ */ jsx("span", { children: email }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsEditingEmail(true),
+                className: "text-muted-foreground hover:text-foreground transition-colors",
+                "aria-label": "Edit email",
+                children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+              }
+            )
+          ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "address1", children: "Address" }),
@@ -934,7 +992,7 @@ var CardDetailsForm = ({
             /* @__PURE__ */ jsx(Label, { children: "Country" }),
             /* @__PURE__ */ jsxs(Select, { value: country, onValueChange: setCountry, children: [
               /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a country" }) }),
-              /* @__PURE__ */ jsx(SelectContent, { className: "max-h-64 w-full", children: countries.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
+              /* @__PURE__ */ jsx(SelectContent, { children: countries.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
             ] })
           ] })
         ] }),
@@ -1040,7 +1098,7 @@ var badgeVariants = cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
-var ScrollArea = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -1054,7 +1112,7 @@ var ScrollArea = React15.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React15.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React4.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -1139,7 +1197,7 @@ function TabsList({
     {
       "data-slot": "tabs-list",
       className: cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        "bg-transparent border border-white/30 text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",
         className
       ),
       ...props
@@ -1150,12 +1208,32 @@ function TabsTrigger({
   className,
   ...props
 }) {
+  const triggerRef = React4.useRef(null);
+  React4.useEffect(() => {
+    const element = triggerRef.current;
+    if (!element) return;
+    const updateStyles = () => {
+      const isActive = element.getAttribute("data-state") === "active";
+      if (isActive) {
+        element.style.setProperty("background-color", "rgba(255, 255, 255, 0.3)", "important");
+        element.style.setProperty("border-color", "transparent", "important");
+      } else {
+        element.style.removeProperty("background-color");
+        element.style.removeProperty("border-color");
+      }
+    };
+    updateStyles();
+    const observer = new MutationObserver(updateStyles);
+    observer.observe(element, { attributes: true, attributeFilter: ["data-state"] });
+    return () => observer.disconnect();
+  }, []);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Trigger,
     {
+      ref: triggerRef,
       "data-slot": "tabs-trigger",
       className: cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/70 inline-flex h-[calc(100%-0.5rem)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow,background-color,border-color] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1399,7 +1477,7 @@ var useSolanaQrPayment = (options) => {
     refresh
   };
 };
-var Card = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1411,7 +1489,7 @@ var Card = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1420,7 +1498,7 @@ var CardHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1432,7 +1510,7 @@ var CardTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1441,9 +1519,9 @@ var CardDescription = React15.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1458,7 +1536,7 @@ var QRCodePayment = ({
   onPaymentError,
   onPaymentSuccess
 }) => {
-  const handleQrSuccess = React15__default.useCallback(
+  const handleQrSuccess = React4__default.useCallback(
     (paymentId, txId) => {
       if (!paymentId && !txId) {
         onPaymentError("Missing payment confirmation details");
@@ -2037,8 +2115,8 @@ var PaymentExperience = ({
   };
   const renderCardExperience = () => /* @__PURE__ */ jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
     /* @__PURE__ */ jsxs(TabsList, { className: "w-full rounded-md mb-4", children: [
-      /* @__PURE__ */ jsx(TabsTrigger, { className: clsx("cursor-pointer", { "bg-background": activeTab == "saved" }), value: "saved", children: "Use saved card" }),
-      /* @__PURE__ */ jsx(TabsTrigger, { className: clsx("cursor-pointer", { "bg-background": activeTab == "new" }), value: "new", children: "Add new card" })
+      /* @__PURE__ */ jsx(TabsTrigger, { className: "cursor-pointer", value: "saved", children: "Use saved card" }),
+      /* @__PURE__ */ jsx(TabsTrigger, { className: "cursor-pointer", value: "new", children: "Add new card" })
     ] }),
     /* @__PURE__ */ jsx(TabsContent, { value: "saved", children: renderSavedTab() }),
     /* @__PURE__ */ jsx(TabsContent, { value: "new", children: renderNewTab() })
@@ -2518,7 +2596,7 @@ var SolanaPaymentSelector = ({
 }) => {
   return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-md border bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsx(SolanaPaymentView, { ...props, onClose }) }) });
 };
-var Table = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+var Table = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
@@ -2527,9 +2605,9 @@ var Table = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -2538,7 +2616,7 @@ var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -2550,7 +2628,7 @@ var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -2562,7 +2640,7 @@ var TableRow = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -2574,7 +2652,7 @@ var TableHead = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -2583,7 +2661,7 @@ var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -2595,7 +2673,7 @@ TableCaption.displayName = "TableCaption";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -2607,7 +2685,7 @@ var AlertDialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
@@ -2650,7 +2728,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -2659,7 +2737,7 @@ var AlertDialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -2668,7 +2746,7 @@ var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogAction = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -2677,7 +2755,7 @@ var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -2690,7 +2768,7 @@ var AlertDialogCancel = React15.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-var Textarea = React15.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React4.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -3198,7 +3276,7 @@ var PaymentMethodsSection = ({
     ) })
   ] });
 };
-var Checkbox = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,