@doujins/payments-ui 0.1.14 → 0.1.16

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React15 = require('react');
+var React4 = require('react');
 var reactQuery = require('@tanstack/react-query');
 var walletAdapterReact = require('@solana/wallet-adapter-react');
 var walletAdapterReactUi = require('@solana/wallet-adapter-react-ui');
@@ -48,7 +48,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React15__namespace = /*#__PURE__*/_interopNamespace(React15);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
 var countryList__default = /*#__PURE__*/_interopDefault(countryList);
@@ -521,7 +521,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React15__namespace.forwardRef(
+var Button = React4__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -535,7 +535,7 @@ var Button = React15__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Input = React15__namespace.forwardRef(
+var Input = React4__namespace.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -555,7 +555,7 @@ Input.displayName = "Input";
 var labelVariants = classVarianceAuthority.cva(
   "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Label = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   LabelPrimitive__namespace.Root,
   {
     ref,
@@ -564,9 +564,9 @@ var Label = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
-var Select = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Root, { ...props, children }) });
+var Select = SelectPrimitive__namespace.Root;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React15__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectTrigger = React4__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Trigger,
   {
     ref,
@@ -582,7 +582,7 @@ var SelectTrigger = React15__namespace.forwardRef(({ className, children, ...pro
   }
 ));
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollUpButton = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollUpButton,
   {
     ref,
@@ -595,7 +595,7 @@ var SelectScrollUpButton = React15__namespace.forwardRef(({ className, ...props
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollDownButton = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollDownButton,
   {
     ref,
@@ -608,33 +608,61 @@ var SelectScrollDownButton = React15__namespace.forwardRef(({ className, ...prop
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React15__namespace.forwardRef(({ className, children, position = "popper", style, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.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__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: "p-1", children }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
-    ]
-  }
-));
+var SelectContent = React4__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+  const viewportRef = React4__namespace.useRef(null);
+  const contentRef = React4__namespace.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__namespace.useCallback((node) => {
+    contentRef(node);
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [contentRef, ref]);
+  React4__namespace.useEffect(() => {
+    if (viewportRef.current) {
+      viewportRef.current.style.setProperty("max-height", "40vh", "important");
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.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__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectPrimitive__namespace.Viewport,
+          {
+            ref: viewportRef,
+            className: cn(
+              "p-1 overflow-y-auto",
+              position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+});
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectLabel = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Label,
   {
     ref,
@@ -643,7 +671,7 @@ var SelectLabel = React15__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React15__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectItem = React4__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Item,
   {
     ref,
@@ -659,7 +687,7 @@ var SelectItem = React15__namespace.forwardRef(({ className, children, ...props
   }
 ));
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectSeparator = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Separator,
   {
     ref,
@@ -695,8 +723,8 @@ var CardDetailsForm = ({
   submitDisabled = false
 }) => {
   const { config } = usePaymentContext();
-  const defaultValuesKey = React15.useMemo(() => JSON.stringify(defaultValues ?? {}), [defaultValues]);
-  const mergedDefaults = React15.useMemo(
+  const defaultValuesKey = React4.useMemo(() => JSON.stringify(defaultValues ?? {}), [defaultValues]);
+  const mergedDefaults = React4.useMemo(
     () => ({
       ...defaultBillingDetails,
       ...defaultValues,
@@ -704,20 +732,21 @@ var CardDetailsForm = ({
     }),
     [defaultValuesKey, config.defaultUser?.email]
   );
-  const [firstName, setFirstName] = React15.useState(mergedDefaults.firstName);
-  const [lastName, setLastName] = React15.useState(mergedDefaults.lastName);
-  const [address1, setAddress1] = React15.useState(mergedDefaults.address1);
-  const [city, setCity] = React15.useState(mergedDefaults.city);
-  const [stateRegion, setStateRegion] = React15.useState(mergedDefaults.stateRegion ?? "");
-  const [postalCode, setPostalCode] = React15.useState(mergedDefaults.postalCode);
-  const [country, setCountry] = React15.useState(mergedDefaults.country);
-  const [email, setEmail] = React15.useState(mergedDefaults.email ?? "");
-  const [localError, setLocalError] = React15.useState(null);
-  const [isTokenizing, setIsTokenizing] = React15.useState(false);
-  const [collectReady, setCollectReady] = React15.useState(
+  const [firstName, setFirstName] = React4.useState(mergedDefaults.firstName);
+  const [lastName, setLastName] = React4.useState(mergedDefaults.lastName);
+  const [address1, setAddress1] = React4.useState(mergedDefaults.address1);
+  const [city, setCity] = React4.useState(mergedDefaults.city);
+  const [stateRegion, setStateRegion] = React4.useState(mergedDefaults.stateRegion ?? "");
+  const [postalCode, setPostalCode] = React4.useState(mergedDefaults.postalCode);
+  const [country, setCountry] = React4.useState(mergedDefaults.country);
+  const [email, setEmail] = React4.useState(mergedDefaults.email ?? "");
+  const [isEditingEmail, setIsEditingEmail] = React4.useState(false);
+  const [localError, setLocalError] = React4.useState(null);
+  const [isTokenizing, setIsTokenizing] = React4.useState(false);
+  const [collectReady, setCollectReady] = React4.useState(
     typeof window !== "undefined" && Boolean(window.CollectJS)
   );
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (collectReady) return;
     let active = true;
     waitForCollectJs().then((instance) => {
@@ -729,13 +758,13 @@ var CardDetailsForm = ({
       active = false;
     };
   }, [collectReady]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (!visible) {
       setLocalError(null);
       setIsTokenizing(false);
     }
   }, [visible]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (!visible) return;
     setFirstName(mergedDefaults.firstName);
     setLastName(mergedDefaults.lastName);
@@ -746,7 +775,7 @@ var CardDetailsForm = ({
     setCountry(mergedDefaults.country);
     setEmail(mergedDefaults.email ?? "");
   }, [defaultValuesKey, mergedDefaults, visible]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (!onBillingChange) return;
     onBillingChange({
       firstName,
@@ -785,7 +814,7 @@ var CardDetailsForm = ({
     }
     return sanitized;
   };
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (!collectReady || typeof window === "undefined" || !window.CollectJS || !visible) {
       return;
     }
@@ -845,8 +874,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;
     }
@@ -865,7 +893,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__ */ jsxRuntime.jsxs(
     "form",
     {
@@ -900,18 +929,47 @@ var CardDetailsForm = ({
             )
           ] })
         ] }),
-        showEmailField && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              id: "email",
-              type: "email",
-              value: email,
-              onChange: (e) => setEmail(e.target.value),
-              required: true
-            }
-          )
+          showEmailInput ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                id: "email",
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                required: true,
+                className: "flex-1"
+              }
+            ),
+            hasDefaultEmail && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: email }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsEditingEmail(true),
+                className: "text-muted-foreground hover:text-foreground transition-colors",
+                "aria-label": "Edit email",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4" })
+              }
+            )
+          ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "address1", children: "Address" }),
@@ -967,7 +1025,7 @@ var CardDetailsForm = ({
             /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Country" }),
             /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: country, onValueChange: setCountry, children: [
               /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a country" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64 w-full", children: countries.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: countries.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.code, children: option.name }, option.code)) })
             ] })
           ] })
         ] }),
@@ -1073,7 +1131,7 @@ var badgeVariants = classVarianceAuthority.cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
-var ScrollArea = React15__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ScrollArea = React4__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   ScrollAreaPrimitive__namespace.Root,
   {
     ref,
@@ -1087,7 +1145,7 @@ var ScrollArea = React15__namespace.forwardRef(({ className, children, ...props
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React15__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ScrollBar = React4__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
   {
     ref,
@@ -1113,7 +1171,7 @@ var StoredPaymentMethods = ({
   onMethodSelect
 }) => {
   const { listQuery } = usePaymentMethods();
-  const payments = React15.useMemo(() => listQuery.data?.data ?? [], [listQuery.data]);
+  const payments = React4.useMemo(() => listQuery.data?.data ?? [], [listQuery.data]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: listQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center py-4 text-sm text-muted-foreground", children: [
     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
     " Loading cards..."
@@ -1172,7 +1230,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
@@ -1183,12 +1241,32 @@ function TabsTrigger({
   className,
   ...props
 }) {
+  const triggerRef = React4__namespace.useRef(null);
+  React4__namespace.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__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.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
@@ -1210,19 +1288,19 @@ function TabsContent({
 }
 var usePaymentNotifications = () => {
   const { config } = usePaymentContext();
-  const notifyStatus = React15.useCallback(
+  const notifyStatus = React4.useCallback(
     (status, context) => {
       config.callbacks?.onStatusChange?.({ status, context });
     },
     [config.callbacks]
   );
-  const notifySuccess = React15.useCallback(
+  const notifySuccess = React4.useCallback(
     (payload) => {
       config.callbacks?.onSuccess?.(payload ?? {});
     },
     [config.callbacks]
   );
-  const notifyError = React15.useCallback(
+  const notifyError = React4.useCallback(
     (error) => {
       config.callbacks?.onError?.(
         typeof error === "string" ? new Error(error) : error
@@ -1240,17 +1318,17 @@ var useSolanaQrPayment = (options) => {
   const { priceId, selectedToken, onSuccess, onError } = options;
   const { client } = usePaymentContext();
   const tokenSymbol = selectedToken?.symbol ?? null;
-  const onSuccessRef = React15.useRef(onSuccess);
-  const onErrorRef = React15.useRef(onError);
-  const [intent, setIntent] = React15.useState(null);
-  const [qrDataUri, setQrDataUri] = React15.useState(null);
-  const [isLoading, setIsLoading] = React15.useState(false);
-  const [error, setError] = React15.useState(null);
-  const [timeRemaining, setTimeRemaining] = React15.useState(0);
-  const [refreshNonce, setRefreshNonce] = React15.useState(0);
-  const pollRef = React15.useRef(null);
-  const countdownRef = React15.useRef(null);
-  const clearTimers = React15.useCallback(() => {
+  const onSuccessRef = React4.useRef(onSuccess);
+  const onErrorRef = React4.useRef(onError);
+  const [intent, setIntent] = React4.useState(null);
+  const [qrDataUri, setQrDataUri] = React4.useState(null);
+  const [isLoading, setIsLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [timeRemaining, setTimeRemaining] = React4.useState(0);
+  const [refreshNonce, setRefreshNonce] = React4.useState(0);
+  const pollRef = React4.useRef(null);
+  const countdownRef = React4.useRef(null);
+  const clearTimers = React4.useCallback(() => {
     if (pollRef.current) {
       clearInterval(pollRef.current);
       pollRef.current = null;
@@ -1260,12 +1338,12 @@ var useSolanaQrPayment = (options) => {
       countdownRef.current = null;
     }
   }, []);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       clearTimers();
     };
   }, [clearTimers]);
-  const resetState = React15.useCallback(
+  const resetState = React4.useCallback(
     (message) => {
       clearTimers();
       setIntent(null);
@@ -1275,13 +1353,13 @@ var useSolanaQrPayment = (options) => {
     },
     [clearTimers]
   );
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     onSuccessRef.current = onSuccess;
   }, [onSuccess]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  const handleError = React15.useCallback(
+  const handleError = React4.useCallback(
     (message, notifyParent = false) => {
       console.error("[payments-ui] Solana Pay QR error:", message);
       clearTimers();
@@ -1292,7 +1370,7 @@ var useSolanaQrPayment = (options) => {
     },
     [clearTimers, resetState]
   );
-  const handleSuccess = React15.useCallback(
+  const handleSuccess = React4.useCallback(
     (status) => {
       clearTimers();
       resetState(null);
@@ -1306,7 +1384,7 @@ var useSolanaQrPayment = (options) => {
     },
     [clearTimers, resetState]
   );
-  const pollStatus = React15.useCallback(
+  const pollStatus = React4.useCallback(
     async (reference) => {
       try {
         const status = await client.getSolanaPayStatus(reference);
@@ -1325,7 +1403,7 @@ var useSolanaQrPayment = (options) => {
     },
     [handleError, handleSuccess, client]
   );
-  const startCountdown = React15.useCallback(
+  const startCountdown = React4.useCallback(
     (expiresAt, reference) => {
       const updateTime = () => {
         const remaining = Math.max(0, Math.floor(expiresAt - Date.now() / 1e3));
@@ -1340,7 +1418,7 @@ var useSolanaQrPayment = (options) => {
     },
     [handleError, pollStatus]
   );
-  const renderQr = React15.useCallback(async (qrIntent) => {
+  const renderQr = React4.useCallback(async (qrIntent) => {
     try {
       const dataUri = await QRCode__default.default.toDataURL(qrIntent.url, {
         width: 320,
@@ -1356,7 +1434,7 @@ var useSolanaQrPayment = (options) => {
       handleError("Unable to render QR code");
     }
   }, [handleError]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     let cancelled = false;
     const generateIntent = async () => {
       clearTimers();
@@ -1420,7 +1498,7 @@ var useSolanaQrPayment = (options) => {
     tokenSymbol,
     refreshNonce
   ]);
-  const refresh = React15.useCallback(() => {
+  const refresh = React4.useCallback(() => {
     setRefreshNonce((value) => value + 1);
   }, []);
   return {
@@ -1432,7 +1510,7 @@ var useSolanaQrPayment = (options) => {
     refresh
   };
 };
-var Card = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Card = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1444,7 +1522,7 @@ var Card = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardHeader = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1453,7 +1531,7 @@ var CardHeader = React15__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1465,7 +1543,7 @@ var CardTitle = React15__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardDescription = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1474,9 +1552,9 @@ var CardDescription = React15__namespace.forwardRef(({ className, ...props }, re
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1491,7 +1569,7 @@ var QRCodePayment = ({
   onPaymentError,
   onPaymentSuccess
 }) => {
-  const handleQrSuccess = React15__namespace.default.useCallback(
+  const handleQrSuccess = React4__namespace.default.useCallback(
     (paymentId, txId) => {
       if (!paymentId && !txId) {
         onPaymentError("Missing payment confirmation details");
@@ -1600,16 +1678,16 @@ var PaymentStatus = ({
 };
 var useSupportedTokens = () => {
   const { client } = usePaymentContext();
-  const [tokens, setTokens] = React15.useState([]);
-  const [isLoading, setIsLoading] = React15.useState(false);
-  const [error, setError] = React15.useState(null);
-  const [lastFetched, setLastFetched] = React15.useState(null);
+  const [tokens, setTokens] = React4.useState([]);
+  const [isLoading, setIsLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [lastFetched, setLastFetched] = React4.useState(null);
   const CACHE_DURATION = 5 * 60 * 1e3;
-  const tokensRef = React15.useRef(tokens);
-  const lastFetchedRef = React15.useRef(lastFetched);
+  const tokensRef = React4.useRef(tokens);
+  const lastFetchedRef = React4.useRef(lastFetched);
   tokensRef.current = tokens;
   lastFetchedRef.current = lastFetched;
-  const fetchSupportedTokens = React15.useCallback(async () => {
+  const fetchSupportedTokens = React4.useCallback(async () => {
     if (tokensRef.current.length > 0 && lastFetchedRef.current && Date.now() - lastFetchedRef.current < CACHE_DURATION) {
       return tokensRef.current;
     }
@@ -1636,50 +1714,50 @@ var useSupportedTokens = () => {
       setIsLoading(false);
     }
   }, [client]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (tokens.length === 0) {
       fetchSupportedTokens();
     }
   }, [tokens.length, fetchSupportedTokens]);
-  const getTokenBySymbol = React15.useCallback(
+  const getTokenBySymbol = React4.useCallback(
     (symbol) => {
       return tokens.find((token) => token.symbol === symbol);
     },
     [tokens]
   );
-  const getTokenByMint = React15.useCallback(
+  const getTokenByMint = React4.useCallback(
     (mintAddress) => {
       return tokens.find((token) => token.mint === mintAddress);
     },
     [tokens]
   );
-  const isTokenSupported = React15.useCallback(
+  const isTokenSupported = React4.useCallback(
     (symbol) => {
       return tokens.some((token) => token.symbol === symbol);
     },
     [tokens]
   );
-  const getUSDCToken = React15.useCallback(() => {
+  const getUSDCToken = React4.useCallback(() => {
     return getTokenBySymbol("USDC");
   }, [getTokenBySymbol]);
-  const getPYUSDToken = React15.useCallback(() => {
+  const getPYUSDToken = React4.useCallback(() => {
     return getTokenBySymbol("PYUSD");
   }, [getTokenBySymbol]);
-  const getSOLToken = React15.useCallback(() => {
+  const getSOLToken = React4.useCallback(() => {
     return getTokenBySymbol("SOL");
   }, [getTokenBySymbol]);
-  const getStablecoins = React15.useCallback(() => {
+  const getStablecoins = React4.useCallback(() => {
     return tokens.filter((token) => ["USDC", "PYUSD"].includes(token.symbol));
   }, [tokens]);
-  const refreshTokens = React15.useCallback(async () => {
+  const refreshTokens = React4.useCallback(async () => {
     setLastFetched(null);
     return await fetchSupportedTokens();
   }, [fetchSupportedTokens]);
-  const isCacheStale = React15.useCallback(() => {
+  const isCacheStale = React4.useCallback(() => {
     if (!lastFetched) return true;
     return Date.now() - lastFetched > CACHE_DURATION;
   }, [lastFetched]);
-  const getTokenDisplayInfo = React15.useCallback((token) => {
+  const getTokenDisplayInfo = React4.useCallback((token) => {
     return {
       ...token,
       displayName: `${token.name} (${token.symbol})`,
@@ -1687,7 +1765,7 @@ var useSupportedTokens = () => {
       decimalPlaces: token.decimals
     };
   }, []);
-  const getTokenPrice = React15.useCallback(
+  const getTokenPrice = React4.useCallback(
     (symbol) => {
       const token = getTokenBySymbol(symbol);
       if (!token) return 0;
@@ -1696,7 +1774,7 @@ var useSupportedTokens = () => {
     },
     [getTokenBySymbol]
   );
-  const calculateTokenAmount = React15.useCallback(
+  const calculateTokenAmount = React4.useCallback(
     (usdAmount, tokenSymbol) => {
       const token = getTokenBySymbol(tokenSymbol);
       const price = getTokenPrice(tokenSymbol);
@@ -1707,7 +1785,7 @@ var useSupportedTokens = () => {
     },
     [getTokenBySymbol, getTokenPrice]
   );
-  const formatTokenAmount = React15.useCallback(
+  const formatTokenAmount = React4.useCallback(
     (amount, tokenSymbol) => {
       const token = getTokenBySymbol(tokenSymbol);
       if (!token) return "0";
@@ -1748,28 +1826,28 @@ var SolanaPaymentView = ({
   onClose
 }) => {
   const { notifyStatus, notifyError, notifySuccess } = usePaymentNotifications();
-  const [paymentState, setPaymentState] = React15.useState("selecting");
-  const [errorMessage, setErrorMessage] = React15.useState(null);
-  const [transactionId, setTransactionId] = React15.useState(null);
-  const [tokenAmount, setTokenAmount] = React15.useState(0);
-  const [selectedTokenSymbol, setSelectedTokenSymbol] = React15.useState(null);
+  const [paymentState, setPaymentState] = React4.useState("selecting");
+  const [errorMessage, setErrorMessage] = React4.useState(null);
+  const [transactionId, setTransactionId] = React4.useState(null);
+  const [tokenAmount, setTokenAmount] = React4.useState(0);
+  const [selectedTokenSymbol, setSelectedTokenSymbol] = React4.useState(null);
   const {
     tokens,
     isLoading: tokensLoading,
     error: tokensError
   } = useSupportedTokens();
-  const selectedToken = React15.useMemo(() => {
+  const selectedToken = React4.useMemo(() => {
     if (!tokens.length) return null;
     const explicit = tokens.find((token) => token.symbol === selectedTokenSymbol);
     return explicit || tokens[0];
   }, [tokens, selectedTokenSymbol]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (!selectedTokenSymbol && tokens.length) {
       const defaultToken = tokens.find((token) => token.symbol === "SOL") || tokens[0];
       setSelectedTokenSymbol(defaultToken.symbol);
     }
   }, [tokens, selectedTokenSymbol]);
-  const handlePaymentSuccess = React15.useCallback(
+  const handlePaymentSuccess = React4.useCallback(
     (result, txId) => {
       const resolvedTx = txId || (typeof result === "string" ? result : result.transaction_id);
       setTransactionId(resolvedTx);
@@ -1797,7 +1875,7 @@ var SolanaPaymentView = ({
     },
     [notifyStatus, notifySuccess, onSuccess]
   );
-  const handlePaymentError = React15.useCallback(
+  const handlePaymentError = React4.useCallback(
     (error) => {
       setPaymentState("error");
       setErrorMessage(error);
@@ -1807,22 +1885,22 @@ var SolanaPaymentView = ({
     },
     [notifyError, notifyStatus, onError]
   );
-  const resetState = React15.useCallback(() => {
+  const resetState = React4.useCallback(() => {
     setPaymentState("selecting");
     setErrorMessage(null);
     setTransactionId(null);
   }, []);
-  const handleRetry = React15.useCallback(() => {
+  const handleRetry = React4.useCallback(() => {
     resetState();
   }, [resetState]);
-  const handleClose = React15.useCallback(() => {
+  const handleClose = React4.useCallback(() => {
     if (paymentState === "processing" || paymentState === "confirming") {
       return;
     }
     resetState();
     onClose?.();
   }, [paymentState, onClose, resetState]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (!selectedToken || usdAmount === 0) {
       setTokenAmount(0);
       return;
@@ -1834,7 +1912,7 @@ var SolanaPaymentView = ({
     }
     setTokenAmount(usdAmount / price);
   }, [usdAmount, selectedToken]);
-  const handleTokenChange = React15.useCallback((value) => {
+  const handleTokenChange = React4.useCallback((value) => {
     setSelectedTokenSymbol(value);
   }, []);
   const renderBody = () => {
@@ -1940,20 +2018,20 @@ var PaymentExperience = ({
   const showNewCard = enableNewCard && Boolean(onNewCardPayment);
   const showStored = enableStoredMethods && Boolean(onSavedMethodPayment);
   const defaultTab = showStored ? "saved" : "new";
-  const [activeTab, setActiveTab] = React15.useState(defaultTab);
-  const [mode, setMode] = React15.useState(
+  const [activeTab, setActiveTab] = React4.useState(defaultTab);
+  const [mode, setMode] = React4.useState(
     () => initialMode === "solana" && enableSolanaPay ? "solana" : "cards"
   );
-  const [selectedMethodId, setSelectedMethodId] = React15.useState(null);
-  const [savedStatus, setSavedStatus] = React15.useState("idle");
-  const [savedError, setSavedError] = React15.useState(null);
-  const [newCardStatus, setNewCardStatus] = React15.useState("idle");
-  const [newCardError, setNewCardError] = React15.useState(null);
+  const [selectedMethodId, setSelectedMethodId] = React4.useState(null);
+  const [savedStatus, setSavedStatus] = React4.useState("idle");
+  const [savedError, setSavedError] = React4.useState(null);
+  const [newCardStatus, setNewCardStatus] = React4.useState("idle");
+  const [newCardError, setNewCardError] = React4.useState(null);
   const { notifyStatus, notifyError } = usePaymentNotifications();
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     setActiveTab(showStored ? "saved" : "new");
   }, [showStored]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (!enableSolanaPay) {
       setMode("cards");
       return;
@@ -1964,12 +2042,12 @@ var PaymentExperience = ({
       setMode("cards");
     }
   }, [enableSolanaPay, initialMode]);
-  const handleMethodSelect = React15.useCallback((method) => {
+  const handleMethodSelect = React4.useCallback((method) => {
     setSelectedMethodId(method.id);
     setSavedStatus("idle");
     setSavedError(null);
   }, []);
-  const handleSavedPayment = React15.useCallback(async () => {
+  const handleSavedPayment = React4.useCallback(async () => {
     if (!onSavedMethodPayment || !selectedMethodId) return;
     try {
       setSavedStatus("processing");
@@ -1989,7 +2067,7 @@ var PaymentExperience = ({
       notifyError(message);
     }
   }, [notifyError, notifyStatus, onSavedMethodPayment, selectedMethodId, usdAmount]);
-  const handleNewCardTokenize = React15.useCallback(
+  const handleNewCardTokenize = React4.useCallback(
     async (token, billing) => {
       if (!onNewCardPayment) return;
       try {
@@ -2009,21 +2087,21 @@ var PaymentExperience = ({
     },
     [notifyError, notifyStatus, onNewCardPayment]
   );
-  React15.useCallback(() => {
+  React4.useCallback(() => {
     if (!enableSolanaPay) return;
     setMode("solana");
   }, [enableSolanaPay]);
-  const exitSolanaView = React15.useCallback(() => {
+  const exitSolanaView = React4.useCallback(() => {
     setMode("cards");
   }, []);
-  const handleSolanaSuccess = React15.useCallback(
+  const handleSolanaSuccess = React4.useCallback(
     (result) => {
       onSolanaSuccess?.(result);
       exitSolanaView();
     },
     [exitSolanaView, onSolanaSuccess]
   );
-  const handleSolanaError = React15.useCallback(
+  const handleSolanaError = React4.useCallback(
     (error) => {
       onSolanaError?.(error);
     },
@@ -2070,8 +2148,8 @@ var PaymentExperience = ({
   };
   const renderCardExperience = () => /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "w-full rounded-md mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { className: clsx2.clsx("cursor-pointer", { "bg-background": activeTab == "saved" }), value: "saved", children: "Use saved card" }),
-      /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { className: clsx2.clsx("cursor-pointer", { "bg-background": activeTab == "new" }), value: "new", children: "Add new card" })
+      /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { className: "cursor-pointer", value: "saved", children: "Use saved card" }),
+      /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { className: "cursor-pointer", value: "new", children: "Add new card" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "saved", children: renderSavedTab() }),
     /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "new", children: renderNewTab() })
@@ -2126,7 +2204,7 @@ var useSubscriptionActions = () => {
     }
     return priceId;
   };
-  const subscribeWithCard = React15.useCallback(
+  const subscribeWithCard = React4.useCallback(
     async ({
       priceId,
       processor = "nmi",
@@ -2153,7 +2231,7 @@ var useSubscriptionActions = () => {
     },
     [client]
   );
-  const subscribeWithSavedMethod = React15.useCallback(
+  const subscribeWithSavedMethod = React4.useCallback(
     async ({
       priceId,
       processor = "nmi",
@@ -2173,7 +2251,7 @@ var useSubscriptionActions = () => {
     },
     [client]
   );
-  const subscribeWithCCBill = React15.useCallback(
+  const subscribeWithCCBill = React4.useCallback(
     async ({
       priceId,
       email,
@@ -2219,15 +2297,15 @@ var SubscriptionCheckoutModal = ({
   onSolanaError,
   initialMode = "cards"
 }) => {
-  const [showSuccess, setShowSuccess] = React15.useState(false);
-  const [idempotencyKey, setIdempotencyKey] = React15.useState(() => crypto.randomUUID());
+  const [showSuccess, setShowSuccess] = React4.useState(false);
+  const [idempotencyKey, setIdempotencyKey] = React4.useState(() => crypto.randomUUID());
   const { subscribeWithCard, subscribeWithSavedMethod } = useSubscriptionActions();
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (open) {
       setIdempotencyKey(crypto.randomUUID());
     }
   }, [open, priceId]);
-  const handleClose = React15.useCallback(
+  const handleClose = React4.useCallback(
     (nextOpen) => {
       onOpenChange(nextOpen);
       if (!nextOpen) setShowSuccess(false);
@@ -2337,7 +2415,7 @@ var wallets = [
   }
 ];
 var WalletModal = ({ open, onOpenChange }) => {
-  const [expandedWallet, setExpandedWallet] = React15.useState(null);
+  const [expandedWallet, setExpandedWallet] = React4.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "z-[100] w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-md border border-white/20 p-0 backdrop-blur-xl bg-background-regular shadow-2xl [&::-webkit-scrollbar]:hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "border-b border-white/10 bg-gradient-to-r from-primary/10 via-transparent to-transparent px-6 py-5 text-left", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: [
@@ -2393,17 +2471,17 @@ var createDialogState = () => ({
   isOpen: false,
   props: null
 });
-var PaymentsDialogContext = React15.createContext(void 0);
+var PaymentsDialogContext = React4.createContext(void 0);
 var PaymentsDialogProvider = ({
   children
 }) => {
-  const [checkoutState, setCheckoutState] = React15.useState(
+  const [checkoutState, setCheckoutState] = React4.useState(
     () => createDialogState()
   );
-  const [walletState, setWalletState] = React15.useState(
+  const [walletState, setWalletState] = React4.useState(
     () => createDialogState()
   );
-  const contextValue = React15.useMemo(() => {
+  const contextValue = React4.useMemo(() => {
     const openCheckout = (options) => setCheckoutState({
       isOpen: true,
       props: options
@@ -2457,18 +2535,18 @@ var PaymentsDialogProvider = ({
   ] });
 };
 var usePaymentDialogs = () => {
-  const context = React15.useContext(PaymentsDialogContext);
+  const context = React4.useContext(PaymentsDialogContext);
   if (!context) {
     throw new Error("usePaymentDialogs must be used within PaymentProvider");
   }
   return context;
 };
-var PaymentContext = React15.createContext(void 0);
+var PaymentContext = React4.createContext(void 0);
 var PaymentProvider = ({
   config,
   children
 }) => {
-  const queryClient = React15.useMemo(() => {
+  const queryClient = React4.useMemo(() => {
     return new reactQuery.QueryClient({
       defaultOptions: {
         queries: {
@@ -2483,7 +2561,7 @@ var PaymentProvider = ({
       }
     });
   }, []);
-  const client = React15.useMemo(() => {
+  const client = React4.useMemo(() => {
     const authProvider = config.getAuthToken ? async () => {
       try {
         const result = config.getAuthToken?.();
@@ -2507,12 +2585,12 @@ var PaymentProvider = ({
       defaultHeaders: config.defaultHeaders
     });
   }, [config]);
-  const solanaEndpoint = React15.useMemo(() => {
+  const solanaEndpoint = React4.useMemo(() => {
     if (config.solana?.endpoint) return config.solana.endpoint;
     const network = config.solana?.network ?? walletAdapterBase.WalletAdapterNetwork.Mainnet;
     return web3_js.clusterApiUrl(network);
   }, [config.solana?.endpoint, config.solana?.network]);
-  const walletAdapters = React15.useMemo(() => {
+  const walletAdapters = React4.useMemo(() => {
     if (config.solana?.wallets?.length) {
       return config.solana.wallets;
     }
@@ -2524,21 +2602,21 @@ var PaymentProvider = ({
     ];
   }, [config.solana?.wallets]);
   const autoConnect = config.solana?.autoConnect ?? true;
-  const value = React15.useMemo(() => {
+  const value = React4.useMemo(() => {
     return {
       config,
       client,
       queryClient
     };
   }, [client, config, queryClient]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (!config.collectJsKey) return;
     loadCollectJs(config.collectJsKey);
   }, [config.collectJsKey]);
   return /* @__PURE__ */ jsxRuntime.jsx(PaymentContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReact.ConnectionProvider, { endpoint: solanaEndpoint, config: { commitment: "confirmed" }, children: /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReact.WalletProvider, { wallets: walletAdapters, autoConnect, children: /* @__PURE__ */ jsxRuntime.jsx(walletAdapterReactUi.WalletModalProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(PaymentsDialogProvider, { children }) }) }) }) }) });
 };
 var usePaymentContext = () => {
-  const context = React15.useContext(PaymentContext);
+  const context = React4.useContext(PaymentContext);
   if (!context) {
     throw new Error("usePaymentContext must be used within a PaymentProvider");
   }
@@ -2551,7 +2629,7 @@ var SolanaPaymentSelector = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SolanaPaymentView, { ...props, onClose }) }) });
 };
-var Table = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+var Table = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
   "table",
   {
     ref,
@@ -2560,9 +2638,9 @@ var Table = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableBody = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tbody",
   {
     ref,
@@ -2571,7 +2649,7 @@ var TableBody = React15__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableFooter = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tfoot",
   {
     ref,
@@ -2583,7 +2661,7 @@ var TableFooter = React15__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableRow = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tr",
   {
     ref,
@@ -2595,7 +2673,7 @@ var TableRow = React15__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHead = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
     ref,
@@ -2607,7 +2685,7 @@ var TableHead = React15__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCell = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
@@ -2616,7 +2694,7 @@ var TableCell = React15__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCaption = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
     ref,
@@ -2628,7 +2706,7 @@ TableCaption.displayName = "TableCaption";
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
-var AlertDialogOverlay = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogOverlay = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Overlay,
   {
     className: cn(
@@ -2640,7 +2718,7 @@ var AlertDialogOverlay = React15__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
-var AlertDialogContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Content,
@@ -2683,7 +2761,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogTitle = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Title,
   {
     ref,
@@ -2692,7 +2770,7 @@ var AlertDialogTitle = React15__namespace.forwardRef(({ className, ...props }, r
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-var AlertDialogDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogDescription = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Description,
   {
     ref,
@@ -2701,7 +2779,7 @@ var AlertDialogDescription = React15__namespace.forwardRef(({ className, ...prop
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-var AlertDialogAction = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogAction = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Action,
   {
     ref,
@@ -2710,7 +2788,7 @@ var AlertDialogAction = React15__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
-var AlertDialogCancel = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogCancel = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
@@ -2723,7 +2801,7 @@ var AlertDialogCancel = React15__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
-var Textarea = React15__namespace.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React4__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
@@ -2768,12 +2846,12 @@ var CancelMembershipDialog = ({
   const { client } = usePaymentContext();
   const notify = onNotify ?? notifyDefault;
   const t = { ...defaultTranslations, ...customTranslations };
-  const [cancelReason, setCancelReason] = React15.useState("");
-  const [isOpen, setIsOpen] = React15.useState(false);
-  const [isReasonValid, setIsReasonValid] = React15.useState(false);
-  const [hasInteracted, setHasInteracted] = React15.useState(false);
-  const [isSubmitting, setIsSubmitting] = React15.useState(false);
-  React15.useEffect(() => {
+  const [cancelReason, setCancelReason] = React4.useState("");
+  const [isOpen, setIsOpen] = React4.useState(false);
+  const [isReasonValid, setIsReasonValid] = React4.useState(false);
+  const [hasInteracted, setHasInteracted] = React4.useState(false);
+  const [isSubmitting, setIsSubmitting] = React4.useState(false);
+  React4.useEffect(() => {
     const trimmed = cancelReason.trim();
     setIsReasonValid(trimmed.length >= minReasonLength);
   }, [cancelReason, minReasonLength]);
@@ -2906,9 +2984,9 @@ var BillingHistory = ({
   const { client } = usePaymentContext();
   const notify = onNotify ?? notifyDefault2;
   const t = { ...defaultTranslations2, ...customTranslations };
-  const [isExpanded, setIsExpanded] = React15.useState(false);
-  const observerRef = React15.useRef(null);
-  const loadMoreRef = React15.useRef(null);
+  const [isExpanded, setIsExpanded] = React4.useState(false);
+  const observerRef = React4.useRef(null);
+  const loadMoreRef = React4.useRef(null);
   const historyQuery = reactQuery.useInfiniteQuery({
     queryKey: ["payments-ui", "billing-history", pageSize],
     queryFn: async ({ pageParam = initialPage }) => {
@@ -2935,7 +3013,7 @@ var BillingHistory = ({
     },
     staleTime: 5 * 60 * 1e3
   });
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (!loadMoreRef.current || !isExpanded) return;
     observerRef.current = new IntersectionObserver((entries) => {
       const [entry] = entries;
@@ -2950,7 +3028,7 @@ var BillingHistory = ({
       observerRef.current?.disconnect();
     };
   }, [historyQuery, isExpanded, notify]);
-  const payments = React15.useMemo(() => {
+  const payments = React4.useMemo(() => {
     const data = historyQuery.data;
     return data?.pages ?? [];
   }, [historyQuery.data]);
@@ -3063,8 +3141,8 @@ var PaymentMethodsSection = ({
     remove: (id) => client.deletePaymentMethod(id),
     activate: (id) => client.activatePaymentMethod(id)
   };
-  const [isModalOpen, setIsModalOpen] = React15.useState(false);
-  const [deletingId, setDeletingId] = React15.useState(null);
+  const [isModalOpen, setIsModalOpen] = React4.useState(false);
+  const [deletingId, setDeletingId] = React4.useState(null);
   const notify = onNotify ?? notifyDefault3;
   const t = { ...defaultTranslations3, ...customTranslations };
   const queryKey = ["payments-ui", "payment-methods"];
@@ -3119,12 +3197,12 @@ var PaymentMethodsSection = ({
       });
     }
   });
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if (!isModalOpen) {
       createMutation.reset();
     }
   }, [createMutation, isModalOpen]);
-  const payments = React15.useMemo(() => paymentQuery.data?.data ?? [], [paymentQuery.data]);
+  const payments = React4.useMemo(() => paymentQuery.data?.data ?? [], [paymentQuery.data]);
   const loading = paymentQuery.isLoading || paymentQuery.isFetching;
   const buildPayload = (token, billing) => ({
     payment_token: token,
@@ -3231,7 +3309,7 @@ var PaymentMethodsSection = ({
     ) })
   ] });
 };
-var Checkbox = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Checkbox = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   CheckboxPrimitive__namespace.Root,
   {
     ref,
@@ -3258,9 +3336,9 @@ var initialState = {
   termsAccepted: false
 };
 var WalletDialog = ({ open, onOpenChange }) => {
-  const [form, setForm] = React15.useState(initialState);
-  const [errors, setErrors] = React15.useState({});
-  const validators = React15.useMemo(
+  const [form, setForm] = React4.useState(initialState);
+  const [errors, setErrors] = React4.useState({});
+  const validators = React4.useMemo(
     () => ({
       nameOnCard: (value) => !value ? "Name is required" : void 0,
       cardNumber: (value) => /^\d{16}$/.test(value) ? void 0 : "Card number must be 16 digits",
@@ -3353,10 +3431,10 @@ var WalletDialog = ({ open, onOpenChange }) => {
 var useTokenBalance = (tokens) => {
   const { publicKey } = walletAdapterReact.useWallet();
   const { connection } = walletAdapterReact.useConnection();
-  const [balances, setBalances] = React15.useState([]);
-  const [isLoading, setIsLoading] = React15.useState(false);
-  const [error, setError] = React15.useState(null);
-  const fetchTokenBalance = React15.useCallback(
+  const [balances, setBalances] = React4.useState([]);
+  const [isLoading, setIsLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const fetchTokenBalance = React4.useCallback(
     async (token, walletAddress) => {
       try {
         const mintPublicKey = new web3_js.PublicKey(token.mint);
@@ -3397,8 +3475,8 @@ var useTokenBalance = (tokens) => {
     },
     [connection]
   );
-  const tokensKey = React15.useMemo(() => tokens.map((t) => t.mint).join(","), [tokens]);
-  React15.useEffect(() => {
+  const tokensKey = React4.useMemo(() => tokens.map((t) => t.mint).join(","), [tokens]);
+  React4.useEffect(() => {
     if (!publicKey || tokens.length === 0) {
       setBalances([]);
       return;
@@ -3422,20 +3500,20 @@ var useTokenBalance = (tokens) => {
     };
     fetchAllBalances();
   }, [publicKey, tokensKey, fetchTokenBalance]);
-  const getTokenBalance = React15.useCallback(
+  const getTokenBalance = React4.useCallback(
     (tokenSymbol) => {
       return balances.find((balance) => balance.token.symbol === tokenSymbol);
     },
     [balances]
   );
-  const hasSufficientBalance = React15.useCallback(
+  const hasSufficientBalance = React4.useCallback(
     (tokenSymbol, requiredAmount) => {
       const balance = getTokenBalance(tokenSymbol);
       return balance ? balance.uiAmount >= requiredAmount : false;
     },
     [getTokenBalance]
   );
-  const getFormattedBalance = React15.useCallback(
+  const getFormattedBalance = React4.useCallback(
     (tokenSymbol) => {
       const balance = getTokenBalance(tokenSymbol);
       if (!balance) return "0.00";
@@ -3449,7 +3527,7 @@ var useTokenBalance = (tokens) => {
     },
     [getTokenBalance]
   );
-  const refreshBalances = React15.useCallback(async () => {
+  const refreshBalances = React4.useCallback(async () => {
     if (!publicKey || tokens.length === 0) {
       setBalances([]);
       return;
@@ -3470,7 +3548,7 @@ var useTokenBalance = (tokens) => {
       setIsLoading(false);
     }
   }, [publicKey, tokens, fetchTokenBalance]);
-  const getTotalValue = React15.useCallback(
+  const getTotalValue = React4.useCallback(
     (priceData) => {
       if (!priceData) return 0;
       return balances.reduce((total, balance) => {
@@ -3509,21 +3587,21 @@ var usePaymentStatus = (options = {}) => {
     retryInterval = 1e4
     // 10 seconds
   } = options;
-  const [status, setStatus] = React15.useState(null);
-  const [paymentStatus, setPaymentStatus] = React15.useState(null);
-  const [isLoading, setIsLoading] = React15.useState(false);
-  const [error, setError] = React15.useState(null);
-  const [retryCount, setRetryCount] = React15.useState(0);
-  const intervalRef = React15.useRef(null);
-  const isMonitoringRef = React15.useRef(false);
-  React15.useEffect(() => {
+  const [status, setStatus] = React4.useState(null);
+  const [paymentStatus, setPaymentStatus] = React4.useState(null);
+  const [isLoading, setIsLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [retryCount, setRetryCount] = React4.useState(0);
+  const intervalRef = React4.useRef(null);
+  const isMonitoringRef = React4.useRef(false);
+  React4.useEffect(() => {
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }
     };
   }, []);
-  const checkTransactionStatus = React15.useCallback(
+  const checkTransactionStatus = React4.useCallback(
     async (signature) => {
       try {
         const statusResponse = await connection.getSignatureStatus(signature, {
@@ -3568,7 +3646,7 @@ var usePaymentStatus = (options = {}) => {
     },
     [connection]
   );
-  const checkPaymentStatus = React15.useCallback(
+  const checkPaymentStatus = React4.useCallback(
     async (id) => {
       try {
         return await client.getPaymentStatus(id);
@@ -3582,7 +3660,7 @@ var usePaymentStatus = (options = {}) => {
     },
     [client]
   );
-  const startMonitoring = React15.useCallback(async () => {
+  const startMonitoring = React4.useCallback(async () => {
     if (isMonitoringRef.current || !transactionId && !purchaseId) {
       return;
     }
@@ -3670,14 +3748,14 @@ var usePaymentStatus = (options = {}) => {
     retryInterval,
     retryCount
   ]);
-  const stopMonitoring = React15.useCallback(() => {
+  const stopMonitoring = React4.useCallback(() => {
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
     }
     isMonitoringRef.current = false;
     setIsLoading(false);
   }, []);
-  const checkStatus = React15.useCallback(async () => {
+  const checkStatus = React4.useCallback(async () => {
     if (!transactionId && !purchaseId) return;
     setIsLoading(true);
     setError(null);
@@ -3702,7 +3780,7 @@ var usePaymentStatus = (options = {}) => {
       setIsLoading(false);
     }
   }, [transactionId, purchaseId, checkTransactionStatus, checkPaymentStatus]);
-  React15.useEffect(() => {
+  React4.useEffect(() => {
     if ((transactionId || purchaseId) && !isMonitoringRef.current) {
       startMonitoring();
     }
@@ -3710,7 +3788,7 @@ var usePaymentStatus = (options = {}) => {
       stopMonitoring();
     };
   }, [transactionId, purchaseId, startMonitoring, stopMonitoring]);
-  const getConfirmationStatus = React15.useCallback(() => {
+  const getConfirmationStatus = React4.useCallback(() => {
     if (paymentStatus?.status === "confirmed") return "confirmed";
     if (paymentStatus?.status === "failed") return "failed";
     if (status?.confirmationStatus === "finalized") return "confirmed";
@@ -3719,7 +3797,7 @@ var usePaymentStatus = (options = {}) => {
       return "failed";
     return "pending";
   }, [status, paymentStatus]);
-  const getSolscanUrl = React15.useCallback(
+  const getSolscanUrl = React4.useCallback(
     (signature) => {
       const txId = signature || transactionId;
       if (!txId) return null;