@doujins/payments-ui 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React17 = require('react');
+var React15 = require('react');
 var reactQuery = require('@tanstack/react-query');
 var walletAdapterReact = require('@solana/wallet-adapter-react');
 var walletAdapterReactUi = require('@solana/wallet-adapter-react-ui');
@@ -13,7 +13,7 @@ var walletAdapterTrust = require('@solana/wallet-adapter-trust');
 var walletAdapterCoinbase = require('@solana/wallet-adapter-coinbase');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var lucideReact = require('lucide-react');
-var clsx = require('clsx');
+var clsx2 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var countryList = require('country-list');
@@ -48,8 +48,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
+var React15__namespace = /*#__PURE__*/_interopNamespace(React15);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
 var countryList__default = /*#__PURE__*/_interopDefault(countryList);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
@@ -63,30 +64,119 @@ var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimit
 
 // src/utils/collect.ts
 var SCRIPT_SRC = "https://secure.networkmerchants.com/token/Collect.js";
+var baseFieldReset = {
+  border: "none",
+  "border-bottom": "0",
+  "border-top": "0",
+  "border-left": "0",
+  "border-right": "0",
+  "border-width": "0",
+  "border-color": "transparent",
+  "border-style": "none",
+  outline: "none",
+  "box-shadow": "none",
+  "background-clip": "padding-box",
+  "text-decoration": "none"
+};
+var customCss = {
+  ...baseFieldReset,
+  background: "#0d1325",
+  "background-color": "#0d1325",
+  color: "#e2e8f0",
+  padding: "0",
+  margin: "0",
+  width: "100%",
+  height: "100%",
+  "font-size": "15px",
+  "letter-spacing": "0.05em",
+  "line-height": "1.5"
+};
+var focusCss = {
+  ...baseFieldReset,
+  color: "#f8fafc",
+  "box-shadow": "0 0 0 1px rgba(94,234,212,0.3)"
+};
+var invalidCss = {
+  ...baseFieldReset,
+  color: "#fecaca",
+  "box-shadow": "0 0 0 1px rgba(248,113,113,0.5)"
+};
+var placeholderCss = {
+  color: "rgba(226,232,240,0.45)",
+  "font-size": "14px",
+  "letter-spacing": "0.03em"
+};
+var baseCssString = JSON.stringify(customCss);
+var focusCssString = JSON.stringify(focusCss);
+var invalidCssString = JSON.stringify(invalidCss);
+var placeholderCssString = JSON.stringify(placeholderCss);
+var collectCssConfig = {
+  customCss,
+  focusCss,
+  invalidCss,
+  placeholderCss
+};
+var loadPromise = null;
 var loadCollectJs = (tokenizationKey) => {
   if (typeof document === "undefined") return;
+  if (typeof window !== "undefined" && window.CollectJS) {
+    return Promise.resolve();
+  }
   const trimmed = tokenizationKey?.trim();
   if (!trimmed || trimmed.length < 10) {
     console.warn("payments-ui: invalid Collect.js key, skipping load");
     return;
   }
+  if (loadPromise) {
+    return loadPromise;
+  }
   const existing = document.querySelector(`script[src="${SCRIPT_SRC}"]`);
-  if (existing) return;
-  const script = document.createElement("script");
-  script.src = SCRIPT_SRC;
-  script.setAttribute("data-tokenization-key", trimmed);
-  script.setAttribute("data-field-ccnumber-placeholder", "0000 0000 0000 0000");
-  script.setAttribute("data-field-ccexp-placeholder", "10 / 25");
-  script.setAttribute("data-field-cvv-placeholder", "123");
-  script.setAttribute("data-variant", "inline");
-  script.async = true;
-  script.addEventListener("load", () => {
-    console.log("payments-ui: Collect.js loaded");
-  });
-  script.addEventListener("error", (event) => {
-    console.error("payments-ui: failed to load Collect.js", event);
+  if (existing) {
+    loadPromise = new Promise((resolve) => {
+      existing.addEventListener("load", () => resolve(), { once: true });
+      existing.addEventListener("error", () => resolve(), { once: true });
+    });
+    return loadPromise;
+  }
+  loadPromise = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = SCRIPT_SRC;
+    script.setAttribute("data-tokenization-key", trimmed);
+    script.setAttribute("data-field-ccnumber-placeholder", "0000 0000 0000 0000");
+    script.setAttribute("data-field-ccexp-placeholder", "10 / 25");
+    script.setAttribute("data-field-cvv-placeholder", "123");
+    script.setAttribute("data-variant", "inline");
+    script.setAttribute("data-style-sniffer", "false");
+    script.setAttribute("data-custom-css", baseCssString);
+    script.setAttribute("data-placeholder-css", placeholderCssString);
+    script.setAttribute("data-focus-css", focusCssString);
+    script.setAttribute("data-invalid-css", invalidCssString);
+    script.async = true;
+    script.addEventListener("load", () => {
+      console.log("payments-ui: Collect.js loaded");
+      resolve();
+    });
+    script.addEventListener("error", (event) => {
+      console.error("payments-ui: failed to load Collect.js", event);
+      reject(event);
+    });
+    document.head.appendChild(script);
   });
-  document.head.appendChild(script);
+  window.__doujinsCollectPromise = loadPromise;
+  return loadPromise;
+};
+var waitForCollectJs = async () => {
+  if (typeof window === "undefined") return null;
+  if (window.CollectJS) return window.CollectJS;
+  const promise = loadPromise ?? window.__doujinsCollectPromise;
+  if (!promise) return null;
+  try {
+    await promise;
+    return window.CollectJS ?? null;
+  } catch (error) {
+    console.error("payments-ui: Collect.js failed to initialise", error);
+    return null;
+  }
 };
 
 // src/lib/client.ts
@@ -292,79 +382,105 @@ var createClient = (config) => {
   };
 };
 function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
+  return tailwindMerge.twMerge(clsx2.clsx(inputs));
 }
-var Dialog = DialogPrimitive__namespace.Root;
-var DialogPortal = DialogPrimitive__namespace.Portal;
-var DialogOverlay = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Overlay,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React17__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogPrimitive__namespace.Content,
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Overlay,
     {
-      ref,
+      "data-slot": "dialog-overlay",
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className
       ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
+      ...props
     }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
-var DialogHeader = ({
+  );
+}
+function DialogContent({
   className,
+  children,
+  showCloseButton = true,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
-DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Title,
-  {
-    ref,
-    className: cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    ),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  DialogPrimitive__namespace.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogPrimitive__namespace.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+            DialogPrimitive__namespace.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
 var customCountries = [
   { code: "TW", name: "Taiwan, Province of China" },
   { code: "KR", name: "Korea" },
@@ -405,7 +521,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React17__namespace.forwardRef(
+var Button = React15__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -419,7 +535,7 @@ var Button = React17__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Input = React17__namespace.forwardRef(
+var Input = React15__namespace.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -439,7 +555,7 @@ Input.displayName = "Input";
 var labelVariants = classVarianceAuthority.cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Label = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   LabelPrimitive__namespace.Root,
   {
     ref,
@@ -450,7 +566,7 @@ var Label = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
 var Select = SelectPrimitive__namespace.Root;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React17__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectTrigger = React15__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Trigger,
   {
     ref,
@@ -466,7 +582,7 @@ var SelectTrigger = React17__namespace.forwardRef(({ className, children, ...pro
   }
 ));
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollUpButton = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollUpButton,
   {
     ref,
@@ -479,7 +595,7 @@ var SelectScrollUpButton = React17__namespace.forwardRef(({ className, ...props
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollDownButton = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollDownButton,
   {
     ref,
@@ -492,7 +608,7 @@ var SelectScrollDownButton = React17__namespace.forwardRef(({ className, ...prop
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React17__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectContent = React15__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Content,
   {
     ref,
@@ -520,7 +636,7 @@ var SelectContent = React17__namespace.forwardRef(({ className, children, positi
   }
 ) }));
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectLabel = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Label,
   {
     ref,
@@ -529,7 +645,7 @@ var SelectLabel = React17__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React17__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectItem = React15__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Item,
   {
     ref,
@@ -545,7 +661,7 @@ var SelectItem = React17__namespace.forwardRef(({ className, children, ...props
   }
 ));
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectSeparator = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Separator,
   {
     ref,
@@ -581,8 +697,8 @@ var CardDetailsForm = ({
   submitDisabled = false
 }) => {
   const { config } = usePaymentContext();
-  const defaultValuesKey = React17.useMemo(() => JSON.stringify(defaultValues ?? {}), [defaultValues]);
-  const mergedDefaults = React17.useMemo(
+  const defaultValuesKey = React15.useMemo(() => JSON.stringify(defaultValues ?? {}), [defaultValues]);
+  const mergedDefaults = React15.useMemo(
     () => ({
       ...defaultBillingDetails,
       ...defaultValues,
@@ -590,23 +706,38 @@ var CardDetailsForm = ({
     }),
     [defaultValuesKey, config.defaultUser?.email]
   );
-  const [firstName, setFirstName] = React17.useState(mergedDefaults.firstName);
-  const [lastName, setLastName] = React17.useState(mergedDefaults.lastName);
-  const [address1, setAddress1] = React17.useState(mergedDefaults.address1);
-  const [city, setCity] = React17.useState(mergedDefaults.city);
-  const [stateRegion, setStateRegion] = React17.useState(mergedDefaults.stateRegion ?? "");
-  const [postalCode, setPostalCode] = React17.useState(mergedDefaults.postalCode);
-  const [country, setCountry] = React17.useState(mergedDefaults.country);
-  const [email, setEmail] = React17.useState(mergedDefaults.email ?? "");
-  const [localError, setLocalError] = React17.useState(null);
-  const [isTokenizing, setIsTokenizing] = React17.useState(false);
-  React17.useEffect(() => {
+  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(
+    typeof window !== "undefined" && Boolean(window.CollectJS)
+  );
+  React15.useEffect(() => {
+    if (collectReady) return;
+    let active = true;
+    waitForCollectJs().then((instance) => {
+      if (active && instance) {
+        setCollectReady(true);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [collectReady]);
+  React15.useEffect(() => {
     if (!visible) {
       setLocalError(null);
       setIsTokenizing(false);
     }
   }, [visible]);
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     if (!visible) return;
     setFirstName(mergedDefaults.firstName);
     setLastName(mergedDefaults.lastName);
@@ -617,7 +748,7 @@ var CardDetailsForm = ({
     setCountry(mergedDefaults.country);
     setEmail(mergedDefaults.email ?? "");
   }, [defaultValuesKey, mergedDefaults, visible]);
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     if (!onBillingChange) return;
     onBillingChange({
       firstName,
@@ -642,8 +773,22 @@ var CardDetailsForm = ({
     mergedDefaults.provider,
     onBillingChange
   ]);
-  React17.useEffect(() => {
-    if (typeof window === "undefined" || !window.CollectJS || !visible) {
+  const sanitizeCollectField = (field) => {
+    const sanitized = { ...field };
+    if ("style_input" in sanitized || "style_placeholder" in sanitized) {
+      delete sanitized.style_input;
+      delete sanitized.style_placeholder;
+      if (typeof window !== "undefined") {
+        console.warn(
+          "[payments-ui] stripping unsupported Collect.js style fields",
+          Object.keys(field).filter((key) => key.startsWith("style_"))
+        );
+      }
+    }
+    return sanitized;
+  };
+  React15.useEffect(() => {
+    if (!collectReady || typeof window === "undefined" || !window.CollectJS || !visible) {
       return;
     }
     const handlers = window.__doujinsCollectHandlers || (window.__doujinsCollectHandlers = {});
@@ -670,10 +815,14 @@ var CardDetailsForm = ({
     if (!configured[collectPrefix]) {
       window.CollectJS.configure({
         variant: "inline",
+        customCss: collectCssConfig.customCss,
+        focusCss: collectCssConfig.focusCss,
+        invalidCss: collectCssConfig.invalidCss,
+        placeholderCss: collectCssConfig.placeholderCss,
         fields: {
-          ccnumber: { selector: buildSelector(collectPrefix, "ccnumber") },
-          ccexp: { selector: buildSelector(collectPrefix, "ccexp") },
-          cvv: { selector: buildSelector(collectPrefix, "cvv") }
+          ccnumber: sanitizeCollectField({ selector: buildSelector(collectPrefix, "ccnumber") }),
+          ccexp: sanitizeCollectField({ selector: buildSelector(collectPrefix, "ccexp") }),
+          cvv: sanitizeCollectField({ selector: buildSelector(collectPrefix, "cvv") })
         },
         callback: (response) => {
           const fn = window.__doujinsCollectHandlers?.[collectPrefix];
@@ -684,6 +833,7 @@ var CardDetailsForm = ({
     }
   }, [
     collectPrefix,
+    collectReady,
     firstName,
     lastName,
     address1,
@@ -715,22 +865,22 @@ var CardDetailsForm = ({
     window.CollectJS.startPaymentRequest();
   };
   const errorMessage = localError ?? externalError;
-  const collectFieldClass = "flex h-11 w-full items-center rounded-md border border-white/10 bg-white/5 px-3 text-sm text-white";
+  const collectFieldClass = "relative flex h-11 w-full items-center overflow-hidden rounded-md border border-border/60 bg-background/40 px-3 text-sm text-foreground";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
-      className: cn("space-y-5", className),
+      className: cn("space-y-2", className),
       onSubmit: handleSubmit,
       noValidate: true,
       children: [
         errorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-red-500/40 bg-red-500/10 px-4 py-2 text-sm text-red-400", children: errorMessage }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 md:flex-row", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:flex-row", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-first", children: "First name" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "firstName", children: "First name" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
-                id: "payments-first",
+                id: "firstName",
                 value: firstName,
                 onChange: (e) => setFirstName(e.target.value),
                 required: true
@@ -738,11 +888,11 @@ var CardDetailsForm = ({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-last", children: "Last name" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "lastName", children: "Last name" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
-                id: "payments-last",
+                id: "lastName",
                 value: lastName,
                 onChange: (e) => setLastName(e.target.value),
                 required: true
@@ -751,11 +901,11 @@ var CardDetailsForm = ({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-email", children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
-              id: "payments-email",
+              id: "email",
               type: "email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
@@ -764,24 +914,24 @@ var CardDetailsForm = ({
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-address1", children: "Address" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "address1", children: "Address" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Input,
             {
-              id: "payments-address1",
+              id: "address1",
               value: address1,
               onChange: (e) => setAddress1(e.target.value),
               required: true
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-city", children: "City" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "city", children: "City" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
-                id: "payments-city",
+                id: "city",
                 value: city,
                 onChange: (e) => setCity(e.target.value),
                 required: true
@@ -789,24 +939,24 @@ var CardDetailsForm = ({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-state", children: "State / Region" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "state", children: "State / Region" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
-                id: "payments-state",
+                id: "state",
                 value: stateRegion,
                 onChange: (e) => setStateRegion(e.target.value)
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "payments-postal", children: "Postal code" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "postal", children: "Postal code" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Input,
               {
-                id: "payments-postal",
+                id: "postal",
                 value: postalCode,
                 onChange: (e) => setPostalCode(e.target.value),
                 required: true
@@ -825,7 +975,7 @@ var CardDetailsForm = ({
           /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Card number" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { id: buildSelector(collectPrefix, "ccnumber").slice(1), className: collectFieldClass })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-2 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Expiry" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { id: buildSelector(collectPrefix, "ccexp").slice(1), className: collectFieldClass })
@@ -923,7 +1073,7 @@ var badgeVariants = classVarianceAuthority.cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
-var ScrollArea = React17__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ScrollArea = React15__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   ScrollAreaPrimitive__namespace.Root,
   {
     ref,
@@ -937,7 +1087,7 @@ var ScrollArea = React17__namespace.forwardRef(({ className, children, ...props
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React17__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ScrollBar = React15__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
   {
     ref,
@@ -960,158 +1110,119 @@ var formatCardLabel = (method) => {
 };
 var StoredPaymentMethods = ({
   selectedMethodId,
-  onMethodSelect,
-  showAddButton = true
+  onMethodSelect
 }) => {
-  const { listQuery, createMutation, deleteMutation } = usePaymentMethods();
-  const [isModalOpen, setIsModalOpen] = React17.useState(false);
-  const [deletingId, setDeletingId] = React17.useState(null);
-  const payments = React17.useMemo(() => listQuery.data?.data ?? [], [listQuery.data]);
-  const handleCardTokenize = (token, billing) => {
-    createMutation.mutate({ token, billing });
-  };
-  const handleDelete = (method) => {
-    setDeletingId(method.id);
-    deleteMutation.mutate(
-      { id: method.id },
+  const { listQuery } = usePaymentMethods();
+  const payments = React15.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..."
+  ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: payments.map((method) => {
+    const isSelected = selectedMethodId === method.id;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        onSettled: () => setDeletingId(null)
-      }
+        className: cn(
+          "flex border border-border rounded-md px-4 py-3 flex-row items-center justify-between",
+          {
+            "bg-muted/20": isSelected
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: formatCardLabel(method) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            method.failure_reason && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "destructive", children: method.failure_reason }),
+            onMethodSelect && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "ghost",
+                disabled: isSelected,
+                onClick: () => onMethodSelect(method),
+                className: clsx2__default.default("px-3", { "bg-muted/90": !isSelected, "bg-inherit": isSelected }),
+                children: isSelected ? "Selected" : "Use card"
+              }
+            )
+          ] })
+        ]
+      },
+      method.id
     );
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-4", children: showAddButton && /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", onClick: () => setIsModalOpen(true), children: "Add card" }) }),
-    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..."
-    ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: payments.map((method) => {
-      const isSelected = selectedMethodId === method.id;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "flex flex-col gap-3 rounded-md px-4 py-3 transition-colors md:flex-row md:items-center md:justify-between",
-            isSelected ? "ring-1 ring-primary/70 bg-primary/5" : "ring-1 ring-border/40 bg-transparent"
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: formatCardLabel(method) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
-                "Added on",
-                " ",
-                method.created_at ? new Date(method.created_at).toLocaleDateString() : "unknown"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Badge,
-                {
-                  variant: method.is_active ? "default" : "secondary",
-                  className: cn(
-                    method.is_active ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground"
-                  ),
-                  children: method.is_active ? "Active" : "Inactive"
-                }
-              ),
-              method.failure_reason && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "destructive", children: method.failure_reason }),
-              onMethodSelect && /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  size: "sm",
-                  variant: "ghost",
-                  className: "px-3",
-                  onClick: () => onMethodSelect(method),
-                  children: isSelected ? "Selected" : "Use card"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  size: "sm",
-                  variant: "ghost",
-                  className: "px-3 text-destructive",
-                  onClick: () => handleDelete(method),
-                  disabled: deletingId === method.id && deleteMutation.isPending,
-                  children: deletingId === method.id && deleteMutation.isPending ? "Removing\u2026" : "Remove"
-                }
-              )
-            ] })
-          ]
-        },
-        method.id
-      );
-    }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-h-[85vh] overflow-y-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Add a new card" }),
-        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: "Your card details are tokenized securely via our payment provider." })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        CardDetailsForm,
-        {
-          visible: isModalOpen,
-          collectPrefix: "payments-ui-card",
-          submitting: createMutation.isPending,
-          submitLabel: "Save card",
-          externalError: createMutation.error?.message ?? null,
-          onTokenize: handleCardTokenize
-        }
-      )
-    ] }) })
-  ] });
+  }) }) }) });
 };
-var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.List,
-  {
-    ref,
-    className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    ),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.Trigger,
-  {
-    ref,
-    className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    ),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.Content,
-  {
-    ref,
-    className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    ),
-    ...props
-  }
-));
-TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      "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]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Trigger,
+    {
+      "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
 var usePaymentNotifications = () => {
   const { config } = usePaymentContext();
-  const notifyStatus = React17.useCallback(
+  const notifyStatus = React15.useCallback(
     (status, context) => {
       config.callbacks?.onStatusChange?.({ status, context });
     },
     [config.callbacks]
   );
-  const notifySuccess = React17.useCallback(
+  const notifySuccess = React15.useCallback(
     (payload) => {
       config.callbacks?.onSuccess?.(payload ?? {});
     },
     [config.callbacks]
   );
-  const notifyError = React17.useCallback(
+  const notifyError = React15.useCallback(
     (error) => {
       config.callbacks?.onError?.(
         typeof error === "string" ? new Error(error) : error
@@ -1129,17 +1240,17 @@ var useSolanaQrPayment = (options) => {
   const { priceId, selectedToken, onSuccess, onError } = options;
   const { client } = usePaymentContext();
   const tokenSymbol = selectedToken?.symbol ?? null;
-  const onSuccessRef = React17.useRef(onSuccess);
-  const onErrorRef = React17.useRef(onError);
-  const [intent, setIntent] = React17.useState(null);
-  const [qrDataUri, setQrDataUri] = React17.useState(null);
-  const [isLoading, setIsLoading] = React17.useState(false);
-  const [error, setError] = React17.useState(null);
-  const [timeRemaining, setTimeRemaining] = React17.useState(0);
-  const [refreshNonce, setRefreshNonce] = React17.useState(0);
-  const pollRef = React17.useRef(null);
-  const countdownRef = React17.useRef(null);
-  const clearTimers = React17.useCallback(() => {
+  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(() => {
     if (pollRef.current) {
       clearInterval(pollRef.current);
       pollRef.current = null;
@@ -1149,12 +1260,12 @@ var useSolanaQrPayment = (options) => {
       countdownRef.current = null;
     }
   }, []);
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     return () => {
       clearTimers();
     };
   }, [clearTimers]);
-  const resetState = React17.useCallback(
+  const resetState = React15.useCallback(
     (message) => {
       clearTimers();
       setIntent(null);
@@ -1164,13 +1275,13 @@ var useSolanaQrPayment = (options) => {
     },
     [clearTimers]
   );
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     onSuccessRef.current = onSuccess;
   }, [onSuccess]);
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  const handleError = React17.useCallback(
+  const handleError = React15.useCallback(
     (message, notifyParent = false) => {
       console.error("[payments-ui] Solana Pay QR error:", message);
       clearTimers();
@@ -1181,7 +1292,7 @@ var useSolanaQrPayment = (options) => {
     },
     [clearTimers, resetState]
   );
-  const handleSuccess = React17.useCallback(
+  const handleSuccess = React15.useCallback(
     (status) => {
       clearTimers();
       resetState(null);
@@ -1195,7 +1306,7 @@ var useSolanaQrPayment = (options) => {
     },
     [clearTimers, resetState]
   );
-  const pollStatus = React17.useCallback(
+  const pollStatus = React15.useCallback(
     async (reference) => {
       try {
         const status = await client.getSolanaPayStatus(reference);
@@ -1214,7 +1325,7 @@ var useSolanaQrPayment = (options) => {
     },
     [handleError, handleSuccess, client]
   );
-  const startCountdown = React17.useCallback(
+  const startCountdown = React15.useCallback(
     (expiresAt, reference) => {
       const updateTime = () => {
         const remaining = Math.max(0, Math.floor(expiresAt - Date.now() / 1e3));
@@ -1229,7 +1340,7 @@ var useSolanaQrPayment = (options) => {
     },
     [handleError, pollStatus]
   );
-  const renderQr = React17.useCallback(async (qrIntent) => {
+  const renderQr = React15.useCallback(async (qrIntent) => {
     try {
       const dataUri = await QRCode__default.default.toDataURL(qrIntent.url, {
         width: 320,
@@ -1245,7 +1356,7 @@ var useSolanaQrPayment = (options) => {
       handleError("Unable to render QR code");
     }
   }, [handleError]);
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     let cancelled = false;
     const generateIntent = async () => {
       clearTimers();
@@ -1309,7 +1420,7 @@ var useSolanaQrPayment = (options) => {
     tokenSymbol,
     refreshNonce
   ]);
-  const refresh = React17.useCallback(() => {
+  const refresh = React15.useCallback(() => {
     setRefreshNonce((value) => value + 1);
   }, []);
   return {
@@ -1321,7 +1432,7 @@ var useSolanaQrPayment = (options) => {
     refresh
   };
 };
-var Card = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Card = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1333,7 +1444,7 @@ var Card = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardHeader = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1342,7 +1453,7 @@ var CardHeader = React17__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1354,7 +1465,7 @@ var CardTitle = React17__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1363,9 +1474,9 @@ var CardDescription = React17__namespace.forwardRef(({ className, ...props }, re
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1380,7 +1491,7 @@ var QRCodePayment = ({
   onPaymentError,
   onPaymentSuccess
 }) => {
-  const handleQrSuccess = React17__namespace.default.useCallback(
+  const handleQrSuccess = React15__namespace.default.useCallback(
     (paymentId, txId) => {
       if (!paymentId && !txId) {
         onPaymentError("Missing payment confirmation details");
@@ -1398,9 +1509,9 @@ var QRCodePayment = ({
     onSuccess: handleQrSuccess
   });
   if (!selectedToken) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground", children: "Select a token to continue." });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-dashed bg-muted/10 px-4 py-6 text-center text-sm text-muted-foreground", children: "Select a token to continue." });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 border border-border/60 bg-background/80 p-6 shadow-none rounded-md", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "space-y-4 border bg-background/80 p-6 shadow-none rounded-md", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: "Scan with Solana Pay" }),
@@ -1419,7 +1530,7 @@ var QRCodePayment = ({
       )
     ] }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: error }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center rounded-2xl border border-dashed border-border/70 bg-muted/5 p-6", children: qrDataUri ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: qrDataUri, alt: "Solana Pay QR", className: "h-72 w-72 rounded-lg border border-border/40 bg-card" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-2 text-sm text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center rounded-2xl border border-dashed bg-muted/5 p-6", children: qrDataUri ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: qrDataUri, alt: "Solana Pay QR", className: "h-72 w-72 rounded-lg border bg-card" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-2 text-sm text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin" }),
       " Generating QR code\u2026"
     ] }) : "QR code unavailable" }) }),
@@ -1489,16 +1600,16 @@ var PaymentStatus = ({
 };
 var useSupportedTokens = () => {
   const { client } = usePaymentContext();
-  const [tokens, setTokens] = React17.useState([]);
-  const [isLoading, setIsLoading] = React17.useState(false);
-  const [error, setError] = React17.useState(null);
-  const [lastFetched, setLastFetched] = React17.useState(null);
+  const [tokens, setTokens] = React15.useState([]);
+  const [isLoading, setIsLoading] = React15.useState(false);
+  const [error, setError] = React15.useState(null);
+  const [lastFetched, setLastFetched] = React15.useState(null);
   const CACHE_DURATION = 5 * 60 * 1e3;
-  const tokensRef = React17.useRef(tokens);
-  const lastFetchedRef = React17.useRef(lastFetched);
+  const tokensRef = React15.useRef(tokens);
+  const lastFetchedRef = React15.useRef(lastFetched);
   tokensRef.current = tokens;
   lastFetchedRef.current = lastFetched;
-  const fetchSupportedTokens = React17.useCallback(async () => {
+  const fetchSupportedTokens = React15.useCallback(async () => {
     if (tokensRef.current.length > 0 && lastFetchedRef.current && Date.now() - lastFetchedRef.current < CACHE_DURATION) {
       return tokensRef.current;
     }
@@ -1525,50 +1636,50 @@ var useSupportedTokens = () => {
       setIsLoading(false);
     }
   }, [client]);
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     if (tokens.length === 0) {
       fetchSupportedTokens();
     }
   }, [tokens.length, fetchSupportedTokens]);
-  const getTokenBySymbol = React17.useCallback(
+  const getTokenBySymbol = React15.useCallback(
     (symbol) => {
       return tokens.find((token) => token.symbol === symbol);
     },
     [tokens]
   );
-  const getTokenByMint = React17.useCallback(
+  const getTokenByMint = React15.useCallback(
     (mintAddress) => {
       return tokens.find((token) => token.mint === mintAddress);
     },
     [tokens]
   );
-  const isTokenSupported = React17.useCallback(
+  const isTokenSupported = React15.useCallback(
     (symbol) => {
       return tokens.some((token) => token.symbol === symbol);
     },
     [tokens]
   );
-  const getUSDCToken = React17.useCallback(() => {
+  const getUSDCToken = React15.useCallback(() => {
     return getTokenBySymbol("USDC");
   }, [getTokenBySymbol]);
-  const getPYUSDToken = React17.useCallback(() => {
+  const getPYUSDToken = React15.useCallback(() => {
     return getTokenBySymbol("PYUSD");
   }, [getTokenBySymbol]);
-  const getSOLToken = React17.useCallback(() => {
+  const getSOLToken = React15.useCallback(() => {
     return getTokenBySymbol("SOL");
   }, [getTokenBySymbol]);
-  const getStablecoins = React17.useCallback(() => {
+  const getStablecoins = React15.useCallback(() => {
     return tokens.filter((token) => ["USDC", "PYUSD"].includes(token.symbol));
   }, [tokens]);
-  const refreshTokens = React17.useCallback(async () => {
+  const refreshTokens = React15.useCallback(async () => {
     setLastFetched(null);
     return await fetchSupportedTokens();
   }, [fetchSupportedTokens]);
-  const isCacheStale = React17.useCallback(() => {
+  const isCacheStale = React15.useCallback(() => {
     if (!lastFetched) return true;
     return Date.now() - lastFetched > CACHE_DURATION;
   }, [lastFetched]);
-  const getTokenDisplayInfo = React17.useCallback((token) => {
+  const getTokenDisplayInfo = React15.useCallback((token) => {
     return {
       ...token,
       displayName: `${token.name} (${token.symbol})`,
@@ -1576,7 +1687,7 @@ var useSupportedTokens = () => {
       decimalPlaces: token.decimals
     };
   }, []);
-  const getTokenPrice = React17.useCallback(
+  const getTokenPrice = React15.useCallback(
     (symbol) => {
       const token = getTokenBySymbol(symbol);
       if (!token) return 0;
@@ -1585,7 +1696,7 @@ var useSupportedTokens = () => {
     },
     [getTokenBySymbol]
   );
-  const calculateTokenAmount = React17.useCallback(
+  const calculateTokenAmount = React15.useCallback(
     (usdAmount, tokenSymbol) => {
       const token = getTokenBySymbol(tokenSymbol);
       const price = getTokenPrice(tokenSymbol);
@@ -1596,7 +1707,7 @@ var useSupportedTokens = () => {
     },
     [getTokenBySymbol, getTokenPrice]
   );
-  const formatTokenAmount = React17.useCallback(
+  const formatTokenAmount = React15.useCallback(
     (amount, tokenSymbol) => {
       const token = getTokenBySymbol(tokenSymbol);
       if (!token) return "0";
@@ -1637,28 +1748,28 @@ var SolanaPaymentView = ({
   onClose
 }) => {
   const { notifyStatus, notifyError, notifySuccess } = usePaymentNotifications();
-  const [paymentState, setPaymentState] = React17.useState("selecting");
-  const [errorMessage, setErrorMessage] = React17.useState(null);
-  const [transactionId, setTransactionId] = React17.useState(null);
-  const [tokenAmount, setTokenAmount] = React17.useState(0);
-  const [selectedTokenSymbol, setSelectedTokenSymbol] = React17.useState(null);
+  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 {
     tokens,
     isLoading: tokensLoading,
     error: tokensError
   } = useSupportedTokens();
-  const selectedToken = React17.useMemo(() => {
+  const selectedToken = React15.useMemo(() => {
     if (!tokens.length) return null;
     const explicit = tokens.find((token) => token.symbol === selectedTokenSymbol);
     return explicit || tokens[0];
   }, [tokens, selectedTokenSymbol]);
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     if (!selectedTokenSymbol && tokens.length) {
       const defaultToken = tokens.find((token) => token.symbol === "SOL") || tokens[0];
       setSelectedTokenSymbol(defaultToken.symbol);
     }
   }, [tokens, selectedTokenSymbol]);
-  const handlePaymentSuccess = React17.useCallback(
+  const handlePaymentSuccess = React15.useCallback(
     (result, txId) => {
       const resolvedTx = txId || (typeof result === "string" ? result : result.transaction_id);
       setTransactionId(resolvedTx);
@@ -1686,7 +1797,7 @@ var SolanaPaymentView = ({
     },
     [notifyStatus, notifySuccess, onSuccess]
   );
-  const handlePaymentError = React17.useCallback(
+  const handlePaymentError = React15.useCallback(
     (error) => {
       setPaymentState("error");
       setErrorMessage(error);
@@ -1696,22 +1807,22 @@ var SolanaPaymentView = ({
     },
     [notifyError, notifyStatus, onError]
   );
-  const resetState = React17.useCallback(() => {
+  const resetState = React15.useCallback(() => {
     setPaymentState("selecting");
     setErrorMessage(null);
     setTransactionId(null);
   }, []);
-  const handleRetry = React17.useCallback(() => {
+  const handleRetry = React15.useCallback(() => {
     resetState();
   }, [resetState]);
-  const handleClose = React17.useCallback(() => {
+  const handleClose = React15.useCallback(() => {
     if (paymentState === "processing" || paymentState === "confirming") {
       return;
     }
     resetState();
     onClose?.();
   }, [paymentState, onClose, resetState]);
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     if (!selectedToken || usdAmount === 0) {
       setTokenAmount(0);
       return;
@@ -1723,7 +1834,7 @@ var SolanaPaymentView = ({
     }
     setTokenAmount(usdAmount / price);
   }, [usdAmount, selectedToken]);
-  const handleTokenChange = React17.useCallback((value) => {
+  const handleTokenChange = React15.useCallback((value) => {
     setSelectedTokenSymbol(value);
   }, []);
   const renderBody = () => {
@@ -1771,7 +1882,7 @@ var SolanaPaymentView = ({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: "Select token" }),
         /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: selectedToken?.symbol ?? "", onValueChange: handleTokenChange, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "border border-border/60 bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select token" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "border bg-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select token" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "max-h-64", children: tokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: token.symbol, children: [
             token.name,
             " (",
@@ -1829,20 +1940,20 @@ var PaymentExperience = ({
   const showNewCard = enableNewCard && Boolean(onNewCardPayment);
   const showStored = enableStoredMethods && Boolean(onSavedMethodPayment);
   const defaultTab = showStored ? "saved" : "new";
-  const [activeTab, setActiveTab] = React17.useState(defaultTab);
-  const [mode, setMode] = React17.useState(
+  const [activeTab, setActiveTab] = React15.useState(defaultTab);
+  const [mode, setMode] = React15.useState(
     () => initialMode === "solana" && enableSolanaPay ? "solana" : "cards"
   );
-  const [selectedMethodId, setSelectedMethodId] = React17.useState(null);
-  const [savedStatus, setSavedStatus] = React17.useState("idle");
-  const [savedError, setSavedError] = React17.useState(null);
-  const [newCardStatus, setNewCardStatus] = React17.useState("idle");
-  const [newCardError, setNewCardError] = React17.useState(null);
-  const { notifyStatus, notifySuccess, notifyError } = usePaymentNotifications();
-  React17.useEffect(() => {
+  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 { notifyStatus, notifyError } = usePaymentNotifications();
+  React15.useEffect(() => {
     setActiveTab(showStored ? "saved" : "new");
   }, [showStored]);
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     if (!enableSolanaPay) {
       setMode("cards");
       return;
@@ -1853,12 +1964,12 @@ var PaymentExperience = ({
       setMode("cards");
     }
   }, [enableSolanaPay, initialMode]);
-  const handleMethodSelect = React17.useCallback((method) => {
+  const handleMethodSelect = React15.useCallback((method) => {
     setSelectedMethodId(method.id);
     setSavedStatus("idle");
     setSavedError(null);
   }, []);
-  const handleSavedPayment = React17.useCallback(async () => {
+  const handleSavedPayment = React15.useCallback(async () => {
     if (!onSavedMethodPayment || !selectedMethodId) return;
     try {
       setSavedStatus("processing");
@@ -1878,7 +1989,7 @@ var PaymentExperience = ({
       notifyError(message);
     }
   }, [notifyError, notifyStatus, onSavedMethodPayment, selectedMethodId, usdAmount]);
-  const handleNewCardTokenize = React17.useCallback(
+  const handleNewCardTokenize = React15.useCallback(
     async (token, billing) => {
       if (!onNewCardPayment) return;
       try {
@@ -1898,21 +2009,21 @@ var PaymentExperience = ({
     },
     [notifyError, notifyStatus, onNewCardPayment]
   );
-  const showSolanaView = React17.useCallback(() => {
+  React15.useCallback(() => {
     if (!enableSolanaPay) return;
     setMode("solana");
   }, [enableSolanaPay]);
-  const exitSolanaView = React17.useCallback(() => {
+  const exitSolanaView = React15.useCallback(() => {
     setMode("cards");
   }, []);
-  const handleSolanaSuccess = React17.useCallback(
+  const handleSolanaSuccess = React15.useCallback(
     (result) => {
       onSolanaSuccess?.(result);
       exitSolanaView();
     },
     [exitSolanaView, onSolanaSuccess]
   );
-  const handleSolanaError = React17.useCallback(
+  const handleSolanaError = React15.useCallback(
     (error) => {
       onSolanaError?.(error);
     },
@@ -1926,7 +2037,6 @@ var PaymentExperience = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         StoredPaymentMethods,
         {
-          showAddButton: false,
           selectedMethodId,
           onMethodSelect: handleMethodSelect
         }
@@ -1958,27 +2068,13 @@ var PaymentExperience = ({
       }
     );
   };
-  const renderCardExperience = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Tabs,
-      {
-        value: activeTab,
-        onValueChange: (value) => setActiveTab(value),
-        className: "space-y-3",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "grid w-full grid-cols-2 border border-border/60", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "saved", disabled: !showStored, children: "Use saved card" }),
-            /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "new", disabled: !showNewCard, children: "Add new card" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "saved", children: renderSavedTab() }),
-          /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "new", children: renderNewTab() })
-        ]
-      }
-    ),
-    enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full", variant: "secondary", onClick: showSolanaView, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "mr-2 h-4 w-4" }),
-      " Pay with Solana"
-    ] })
+  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(TabsContent, { value: "saved", children: renderSavedTab() }),
+    /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "new", children: renderNewTab() })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 pt-4", children: [
     mode === "cards" && renderCardExperience(),
@@ -2003,7 +2099,7 @@ var SubscriptionSuccessDialog = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: (value) => {
     if (!value) onClose();
-  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-md overflow-hidden border border-border/70 bg-background/95 p-0 shadow-2xl", children: [
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-md overflow-hidden border bg-background/95 p-0 shadow-2xl", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-b from-primary/25 via-primary/10 to-background px-6 py-8 text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-background/60", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-10 w-10 text-primary" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
@@ -2030,7 +2126,7 @@ var useSubscriptionActions = () => {
     }
     return priceId;
   };
-  const subscribeWithCard = React17.useCallback(
+  const subscribeWithCard = React15.useCallback(
     async ({
       priceId,
       processor = "nmi",
@@ -2057,7 +2153,7 @@ var useSubscriptionActions = () => {
     },
     [client]
   );
-  const subscribeWithSavedMethod = React17.useCallback(
+  const subscribeWithSavedMethod = React15.useCallback(
     async ({
       priceId,
       processor = "nmi",
@@ -2077,7 +2173,7 @@ var useSubscriptionActions = () => {
     },
     [client]
   );
-  const subscribeWithCCBill = React17.useCallback(
+  const subscribeWithCCBill = React15.useCallback(
     async ({
       priceId,
       email,
@@ -2123,15 +2219,15 @@ var SubscriptionCheckoutModal = ({
   onSolanaError,
   initialMode = "cards"
 }) => {
-  const [showSuccess, setShowSuccess] = React17.useState(false);
-  const [idempotencyKey, setIdempotencyKey] = React17.useState(() => crypto.randomUUID());
+  const [showSuccess, setShowSuccess] = React15.useState(false);
+  const [idempotencyKey, setIdempotencyKey] = React15.useState(() => crypto.randomUUID());
   const { subscribeWithCard, subscribeWithSavedMethod } = useSubscriptionActions();
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     if (open) {
       setIdempotencyKey(crypto.randomUUID());
     }
   }, [open, priceId]);
-  const handleClose = React17.useCallback(
+  const handleClose = React15.useCallback(
     (nextOpen) => {
       onOpenChange(nextOpen);
       if (!nextOpen) setShowSuccess(false);
@@ -2188,16 +2284,17 @@ var SubscriptionCheckoutModal = ({
     onSolanaError?.(error);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
       DialogContent,
       {
-        className: "max-w-3xl max-h-[90vh] overflow-y-auto p-0 [&::-webkit-scrollbar]:hidden",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-6", children: [
-          !priceId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: [
+        className: "max-w-3xl max-h-[90vh] overflow-y-auto border-border rounded-md [&::-webkit-scrollbar]:hidden",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Checkout" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: !priceId ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-center px-3 py-2 text-sm text-destructive", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
-            " Select a subscription plan to continue."
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Select a subscription plan to continue." })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
             PaymentExperience,
             {
               usdAmount,
@@ -2211,8 +2308,8 @@ var SubscriptionCheckoutModal = ({
               onNewCardPayment: priceId ? handleNewCardPayment : void 0,
               onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0
             }
-          )
-        ] })
+          ) })
+        ]
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2240,9 +2337,9 @@ var wallets = [
   }
 ];
 var WalletModal = ({ open, onOpenChange }) => {
-  const [expandedWallet, setExpandedWallet] = React17.useState(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-md border border-border/70 bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "border-b border-border/40 bg-gradient-to-r from-primary/10 via-background to-background px-6 py-5 text-left", children: [
+  const [expandedWallet, setExpandedWallet] = React15.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-md border bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "border-b bg-gradient-to-r from-primary/10 via-background to-background px-6 py-5 text-left", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-5 w-5 text-primary" }),
         " Connect a Solana wallet"
@@ -2253,7 +2350,7 @@ var WalletModal = ({ open, onOpenChange }) => {
       wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "rounded-2xl border border-border/60 bg-background/80 p-4 shadow-sm",
+          className: "rounded-2xl border bg-background/80 p-4 shadow-sm",
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
@@ -2288,7 +2385,7 @@ var WalletModal = ({ open, onOpenChange }) => {
         },
         wallet.id
       )),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-border/60 bg-muted/10 p-4 text-xs text-muted-foreground", children: "Don\u2019t see your wallet? Additional providers will be added soon. Contact support if you need manual verification." })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border bg-muted/10 p-4 text-xs text-muted-foreground", children: "Don\u2019t see your wallet? Additional providers will be added soon. Contact support if you need manual verification." })
     ] })
   ] }) });
 };
@@ -2296,17 +2393,17 @@ var createDialogState = () => ({
   isOpen: false,
   props: null
 });
-var PaymentsDialogContext = React17.createContext(void 0);
+var PaymentsDialogContext = React15.createContext(void 0);
 var PaymentsDialogProvider = ({
   children
 }) => {
-  const [checkoutState, setCheckoutState] = React17.useState(
+  const [checkoutState, setCheckoutState] = React15.useState(
     () => createDialogState()
   );
-  const [walletState, setWalletState] = React17.useState(
+  const [walletState, setWalletState] = React15.useState(
     () => createDialogState()
   );
-  const contextValue = React17.useMemo(() => {
+  const contextValue = React15.useMemo(() => {
     const openCheckout = (options) => setCheckoutState({
       isOpen: true,
       props: options
@@ -2360,18 +2457,18 @@ var PaymentsDialogProvider = ({
   ] });
 };
 var usePaymentDialogs = () => {
-  const context = React17.useContext(PaymentsDialogContext);
+  const context = React15.useContext(PaymentsDialogContext);
   if (!context) {
     throw new Error("usePaymentDialogs must be used within PaymentProvider");
   }
   return context;
 };
-var PaymentContext = React17.createContext(void 0);
+var PaymentContext = React15.createContext(void 0);
 var PaymentProvider = ({
   config,
   children
 }) => {
-  const queryClient = React17.useMemo(() => {
+  const queryClient = React15.useMemo(() => {
     return new reactQuery.QueryClient({
       defaultOptions: {
         queries: {
@@ -2386,7 +2483,7 @@ var PaymentProvider = ({
       }
     });
   }, []);
-  const client = React17.useMemo(() => {
+  const client = React15.useMemo(() => {
     const authProvider = config.getAuthToken ? async () => {
       try {
         const result = config.getAuthToken?.();
@@ -2410,12 +2507,12 @@ var PaymentProvider = ({
       defaultHeaders: config.defaultHeaders
     });
   }, [config]);
-  const solanaEndpoint = React17.useMemo(() => {
+  const solanaEndpoint = React15.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 = React17.useMemo(() => {
+  const walletAdapters = React15.useMemo(() => {
     if (config.solana?.wallets?.length) {
       return config.solana.wallets;
     }
@@ -2427,68 +2524,34 @@ var PaymentProvider = ({
     ];
   }, [config.solana?.wallets]);
   const autoConnect = config.solana?.autoConnect ?? true;
-  const value = React17.useMemo(() => {
+  const value = React15.useMemo(() => {
     return {
       config,
       client,
       queryClient
     };
   }, [client, config, queryClient]);
-  React17.useEffect(() => {
+  React15.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 = React17.useContext(PaymentContext);
+  const context = React15.useContext(PaymentContext);
   if (!context) {
     throw new Error("usePaymentContext must be used within a PaymentProvider");
   }
   return context;
 };
-var BillingThemeProvider = ({
-  children,
-  className,
-  dark = false
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "payments-ui-root",
-        dark && "dark",
-        className
-      ),
-      children
-    }
-  );
-};
-var BillingThemePortal = ({
-  children,
-  className,
-  dark = false
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cn(
-        "payments-ui-portal",
-        dark && "dark",
-        className
-      ),
-      children
-    }
-  );
-};
 var SolanaPaymentSelector = ({
   isOpen,
   onClose,
   ...props
 }) => {
-  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 border-border/70 bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(SolanaPaymentView, { ...props, onClose }) }) });
+  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 = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+var Table = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
   "table",
   {
     ref,
@@ -2497,9 +2560,9 @@ var Table = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableBody = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tbody",
   {
     ref,
@@ -2508,7 +2571,7 @@ var TableBody = React17__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableFooter = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tfoot",
   {
     ref,
@@ -2520,7 +2583,7 @@ var TableFooter = React17__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableRow = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tr",
   {
     ref,
@@ -2532,7 +2595,7 @@ var TableRow = React17__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableHead = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "th",
   {
     ref,
@@ -2544,7 +2607,7 @@ var TableHead = React17__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCell = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "td",
   {
     ref,
@@ -2553,7 +2616,7 @@ var TableCell = React17__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TableCaption = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
   {
     ref,
@@ -2565,7 +2628,7 @@ TableCaption.displayName = "TableCaption";
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
-var AlertDialogOverlay = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogOverlay = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Overlay,
   {
     className: cn(
@@ -2577,7 +2640,7 @@ var AlertDialogOverlay = React17__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
-var AlertDialogContent = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Content,
@@ -2620,7 +2683,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogTitle = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Title,
   {
     ref,
@@ -2629,7 +2692,7 @@ var AlertDialogTitle = React17__namespace.forwardRef(({ className, ...props }, r
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-var AlertDialogDescription = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogDescription = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Description,
   {
     ref,
@@ -2638,7 +2701,7 @@ var AlertDialogDescription = React17__namespace.forwardRef(({ className, ...prop
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-var AlertDialogAction = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogAction = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Action,
   {
     ref,
@@ -2647,7 +2710,7 @@ var AlertDialogAction = React17__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
-var AlertDialogCancel = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogCancel = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
@@ -2660,7 +2723,7 @@ var AlertDialogCancel = React17__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
-var Textarea = React17__namespace.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React15__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
@@ -2705,12 +2768,12 @@ var CancelMembershipDialog = ({
   const { client } = usePaymentContext();
   const notify = onNotify ?? notifyDefault;
   const t = { ...defaultTranslations, ...customTranslations };
-  const [cancelReason, setCancelReason] = React17.useState("");
-  const [isOpen, setIsOpen] = React17.useState(false);
-  const [isReasonValid, setIsReasonValid] = React17.useState(false);
-  const [hasInteracted, setHasInteracted] = React17.useState(false);
-  const [isSubmitting, setIsSubmitting] = React17.useState(false);
-  React17.useEffect(() => {
+  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 trimmed = cancelReason.trim();
     setIsReasonValid(trimmed.length >= minReasonLength);
   }, [cancelReason, minReasonLength]);
@@ -2843,9 +2906,9 @@ var BillingHistory = ({
   const { client } = usePaymentContext();
   const notify = onNotify ?? notifyDefault2;
   const t = { ...defaultTranslations2, ...customTranslations };
-  const [isExpanded, setIsExpanded] = React17.useState(false);
-  const observerRef = React17.useRef(null);
-  const loadMoreRef = React17.useRef(null);
+  const [isExpanded, setIsExpanded] = React15.useState(false);
+  const observerRef = React15.useRef(null);
+  const loadMoreRef = React15.useRef(null);
   const historyQuery = reactQuery.useInfiniteQuery({
     queryKey: ["payments-ui", "billing-history", pageSize],
     queryFn: async ({ pageParam = initialPage }) => {
@@ -2872,7 +2935,7 @@ var BillingHistory = ({
     },
     staleTime: 5 * 60 * 1e3
   });
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     if (!loadMoreRef.current || !isExpanded) return;
     observerRef.current = new IntersectionObserver((entries) => {
       const [entry] = entries;
@@ -2887,7 +2950,7 @@ var BillingHistory = ({
       observerRef.current?.disconnect();
     };
   }, [historyQuery, isExpanded, notify]);
-  const payments = React17.useMemo(() => {
+  const payments = React15.useMemo(() => {
     const data = historyQuery.data;
     return data?.pages ?? [];
   }, [historyQuery.data]);
@@ -2926,8 +2989,8 @@ var BillingHistory = ({
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: t.reviewActivity }),
             enableCancel && /* @__PURE__ */ jsxRuntime.jsx(CancelMembershipDialog, { onNotify: notify })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[300px] overflow-y-auto rounded-lg border border-border/70", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: historyQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-muted-foreground", children: t.loading }) : historyQuery.isError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-destructive", children: t.error }) : /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-border/60", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[300px] overflow-y-auto rounded-lg border ", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: historyQuery.isLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-muted-foreground", children: t.loading }) : historyQuery.isError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-center text-sm text-destructive", children: t.error }) : /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "", children: [
               /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: t.reference }),
               /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: t.date }),
               /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: t.amount }),
@@ -2935,7 +2998,7 @@ var BillingHistory = ({
               /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: t.status })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: payments.map(
-              (page) => page.data.map((payment) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "border-border/40", children: [
+              (page) => page.data.map((payment) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { className: "", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "font-mono text-sm", children: payment.id.slice(0, 7).toUpperCase() }),
                 /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: formatDate(payment.purchased_at) }),
                 /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: formatAmount(payment.amount, payment.currency) }),
@@ -2968,21 +3031,17 @@ var defaultTranslations3 = {
   addedOn: "Added on",
   active: "Active",
   inactive: "Inactive",
-  replaceCard: "Replace card",
   makeDefault: "Make default",
   defaultMethod: "Default method",
   remove: "Remove",
   addNewCard: "Add a new card",
   addNewCardDescription: "Your card details are tokenized securely via our payment provider.",
   saveCard: "Save card",
-  replaceCardTitle: "Replace card",
-  replaceCardDescription: "Update this card with new billing details.",
   cardAddedSuccess: "Card added successfully",
   unableToAddCard: "Unable to add card",
   cardRemoved: "Card removed",
-  unableToRemoveCard: "Unable to remove card",
   cardUpdated: "Card updated",
-  unableToReplaceCard: "Unable to replace card",
+  unableToRemoveCard: "Unable to remove card",
   defaultPaymentMethodUpdated: "Default payment method updated",
   unableToSetDefault: "Unable to set default payment method"
 };
@@ -3004,9 +3063,8 @@ var PaymentMethodsSection = ({
     remove: (id) => client.deletePaymentMethod(id),
     activate: (id) => client.activatePaymentMethod(id)
   };
-  const [isModalOpen, setIsModalOpen] = React17.useState(false);
-  const [deletingId, setDeletingId] = React17.useState(null);
-  const [methodBeingReplaced, setMethodBeingReplaced] = React17.useState(null);
+  const [isModalOpen, setIsModalOpen] = React15.useState(false);
+  const [deletingId, setDeletingId] = React15.useState(null);
   const notify = onNotify ?? notifyDefault3;
   const t = { ...defaultTranslations3, ...customTranslations };
   const queryKey = ["payments-ui", "payment-methods"];
@@ -3047,21 +3105,6 @@ var PaymentMethodsSection = ({
     },
     onSettled: () => setDeletingId(null)
   });
-  const replaceMutation = reactQuery.useMutation({
-    mutationFn: ({ id, payload }) => paymentMethods.update(id, payload),
-    onSuccess: () => {
-      notify({ title: t.cardUpdated, status: "success" });
-      setMethodBeingReplaced(null);
-      void queryClient.invalidateQueries({ queryKey });
-    },
-    onError: (error) => {
-      notify({
-        title: t.unableToReplaceCard,
-        description: error.message,
-        status: "destructive"
-      });
-    }
-  });
   const activateMutation = reactQuery.useMutation({
     mutationFn: (id) => paymentMethods.activate(id),
     onSuccess: () => {
@@ -3076,12 +3119,12 @@ var PaymentMethodsSection = ({
       });
     }
   });
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     if (!isModalOpen) {
       createMutation.reset();
     }
   }, [createMutation, isModalOpen]);
-  const payments = React17.useMemo(() => paymentQuery.data?.data ?? [], [paymentQuery.data]);
+  const payments = React15.useMemo(() => paymentQuery.data?.data ?? [], [paymentQuery.data]);
   const loading = paymentQuery.isLoading || paymentQuery.isFetching;
   const buildPayload = (token, billing) => ({
     payment_token: token,
@@ -3099,18 +3142,10 @@ var PaymentMethodsSection = ({
   const handleCardTokenize = (token, billing) => {
     createMutation.mutate(buildPayload(token, billing));
   };
-  const handleReplaceTokenize = (token, billing) => {
-    if (!methodBeingReplaced) return;
-    replaceMutation.mutate({ id: methodBeingReplaced.id, payload: buildPayload(token, billing) });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "bg-bckground border-border rounded-md", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(CardTitle, { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WalletCards, { className: "h-5 w-5 text-emerald-400" }),
-          " ",
-          t.title
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "flex items-center gap-2", children: t.title }),
         /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: t.description })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => setIsModalOpen(true), children: [
@@ -3126,42 +3161,16 @@ var PaymentMethodsSection = ({
     ] }) : payments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 text-sm text-center", children: t.noPaymentMethods }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "rounded-lg border border-white/10 bg-white/5 p-4 shadow-sm",
+        className: "rounded-lg border bg-white/5 p-4 shadow-sm",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-medium text-white", children: formatCardLabel2(method) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-white/60", children: [
-                t.addedOn,
-                " ",
-                method.created_at ? new Date(method.created_at).toLocaleDateString() : "unknown date"
-              ] })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-medium text-white", children: formatCardLabel2(method) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: method.is_active ? "default" : "secondary", children: method.is_active ? t.active : t.inactive })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Badge,
-                {
-                  variant: method.is_active ? "default" : "secondary",
-                  children: method.is_active ? t.active : t.inactive
-                }
-              ),
-              method.failure_reason && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "destructive", children: method.failure_reason })
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: method.failure_reason && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "destructive", children: method.failure_reason }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex flex-wrap gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Button,
-              {
-                variant: "ghost",
-                className: "text-blue-400",
-                disabled: replaceMutation.isPending && methodBeingReplaced?.id === method.id,
-                onClick: () => setMethodBeingReplaced(method),
-                children: [
-                  replaceMutation.isPending && methodBeingReplaced?.id === method.id ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "mr-2 h-4 w-4" }),
-                  t.replaceCard
-                ]
-              }
-            ),
             /* @__PURE__ */ jsxRuntime.jsxs(
               Button,
               {
@@ -3192,55 +3201,34 @@ var PaymentMethodsSection = ({
       },
       method.id
     )) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-h-[95vh] overflow-y-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t.addNewCard }),
-        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: t.addNewCardDescription })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        CardDetailsForm,
-        {
-          visible: isModalOpen,
-          collectPrefix,
-          submitting: createMutation.isPending,
-          submitLabel: t.saveCard,
-          defaultValues: {
-            email: userEmail ?? "",
-            country: defaultCountry,
-            provider
-          },
-          externalError: createMutation.error?.message ?? null,
-          onTokenize: handleCardTokenize,
-          className: "rounded-2xl border border-white/10 bg-white/5 p-6"
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: Boolean(methodBeingReplaced), onOpenChange: (open) => !open && setMethodBeingReplaced(null), children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-h-[95vh] overflow-y-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t.replaceCardTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: t.replaceCardDescription })
-      ] }),
-      methodBeingReplaced && /* @__PURE__ */ jsxRuntime.jsx(
-        CardDetailsForm,
-        {
-          visible: true,
-          collectPrefix: `${collectPrefix}-replace-${methodBeingReplaced.id}`,
-          submitting: replaceMutation.isPending,
-          submitLabel: t.replaceCard,
-          defaultValues: {
-            email: userEmail ?? "",
-            country: defaultCountry,
-            provider
-          },
-          externalError: replaceMutation.error?.message ?? null,
-          onTokenize: handleReplaceTokenize,
-          className: "rounded-2xl border border-white/10 bg-white/5 p-6"
-        }
-      )
-    ] }) })
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogContent,
+      {
+        className: "max-w-3xl max-h-[90vh] overflow-y-auto border-border rounded-md [&::-webkit-scrollbar]:hidden",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t.addNewCard }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CardDetailsForm,
+            {
+              visible: isModalOpen,
+              submitLabel: t.saveCard,
+              collectPrefix,
+              onTokenize: handleCardTokenize,
+              submitting: createMutation.isPending,
+              defaultValues: {
+                provider,
+                email: userEmail ?? "",
+                country: defaultCountry
+              },
+              externalError: createMutation.error?.message ?? null
+            }
+          )
+        ]
+      }
+    ) })
   ] });
 };
-var Checkbox = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Checkbox = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   CheckboxPrimitive__namespace.Root,
   {
     ref,
@@ -3267,9 +3255,9 @@ var initialState = {
   termsAccepted: false
 };
 var WalletDialog = ({ open, onOpenChange }) => {
-  const [form, setForm] = React17.useState(initialState);
-  const [errors, setErrors] = React17.useState({});
-  const validators = React17.useMemo(
+  const [form, setForm] = React15.useState(initialState);
+  const [errors, setErrors] = React15.useState({});
+  const validators = React15.useMemo(
     () => ({
       nameOnCard: (value) => !value ? "Name is required" : void 0,
       cardNumber: (value) => /^\d{16}$/.test(value) ? void 0 : "Card number must be 16 digits",
@@ -3303,7 +3291,7 @@ var WalletDialog = ({ open, onOpenChange }) => {
     setForm(initialState);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "max-h-[95vh] max-w-lg overflow-y-auto rounded-2xl border border-border bg-background", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "border-b border-border/60 pb-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "border-b pb-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shield, { className: "h-5 w-5 text-primary" }),
         /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { className: "text-center text-base font-semibold uppercase tracking-wide", children: "Secure Payment via Mobius Pay" })
@@ -3347,7 +3335,7 @@ var WalletDialog = ({ open, onOpenChange }) => {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-md border border-border/70 bg-muted/10 p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-md border bg-muted/10 p-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { id: "terms-agree", checked: form.termsAccepted, onCheckedChange: (checked) => updateField("termsAccepted", Boolean(checked)) }),
         /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "terms-agree", className: "text-sm text-muted-foreground", children: "By completing this order, I confirm that I am 18 years or older and agree to your privacy policy and terms." })
       ] }),
@@ -3362,10 +3350,10 @@ var WalletDialog = ({ open, onOpenChange }) => {
 var useTokenBalance = (tokens) => {
   const { publicKey } = walletAdapterReact.useWallet();
   const { connection } = walletAdapterReact.useConnection();
-  const [balances, setBalances] = React17.useState([]);
-  const [isLoading, setIsLoading] = React17.useState(false);
-  const [error, setError] = React17.useState(null);
-  const fetchTokenBalance = React17.useCallback(
+  const [balances, setBalances] = React15.useState([]);
+  const [isLoading, setIsLoading] = React15.useState(false);
+  const [error, setError] = React15.useState(null);
+  const fetchTokenBalance = React15.useCallback(
     async (token, walletAddress) => {
       try {
         const mintPublicKey = new web3_js.PublicKey(token.mint);
@@ -3406,8 +3394,8 @@ var useTokenBalance = (tokens) => {
     },
     [connection]
   );
-  const tokensKey = React17.useMemo(() => tokens.map((t) => t.mint).join(","), [tokens]);
-  React17.useEffect(() => {
+  const tokensKey = React15.useMemo(() => tokens.map((t) => t.mint).join(","), [tokens]);
+  React15.useEffect(() => {
     if (!publicKey || tokens.length === 0) {
       setBalances([]);
       return;
@@ -3431,20 +3419,20 @@ var useTokenBalance = (tokens) => {
     };
     fetchAllBalances();
   }, [publicKey, tokensKey, fetchTokenBalance]);
-  const getTokenBalance = React17.useCallback(
+  const getTokenBalance = React15.useCallback(
     (tokenSymbol) => {
       return balances.find((balance) => balance.token.symbol === tokenSymbol);
     },
     [balances]
   );
-  const hasSufficientBalance = React17.useCallback(
+  const hasSufficientBalance = React15.useCallback(
     (tokenSymbol, requiredAmount) => {
       const balance = getTokenBalance(tokenSymbol);
       return balance ? balance.uiAmount >= requiredAmount : false;
     },
     [getTokenBalance]
   );
-  const getFormattedBalance = React17.useCallback(
+  const getFormattedBalance = React15.useCallback(
     (tokenSymbol) => {
       const balance = getTokenBalance(tokenSymbol);
       if (!balance) return "0.00";
@@ -3458,7 +3446,7 @@ var useTokenBalance = (tokens) => {
     },
     [getTokenBalance]
   );
-  const refreshBalances = React17.useCallback(async () => {
+  const refreshBalances = React15.useCallback(async () => {
     if (!publicKey || tokens.length === 0) {
       setBalances([]);
       return;
@@ -3479,7 +3467,7 @@ var useTokenBalance = (tokens) => {
       setIsLoading(false);
     }
   }, [publicKey, tokens, fetchTokenBalance]);
-  const getTotalValue = React17.useCallback(
+  const getTotalValue = React15.useCallback(
     (priceData) => {
       if (!priceData) return 0;
       return balances.reduce((total, balance) => {
@@ -3518,21 +3506,21 @@ var usePaymentStatus = (options = {}) => {
     retryInterval = 1e4
     // 10 seconds
   } = options;
-  const [status, setStatus] = React17.useState(null);
-  const [paymentStatus, setPaymentStatus] = React17.useState(null);
-  const [isLoading, setIsLoading] = React17.useState(false);
-  const [error, setError] = React17.useState(null);
-  const [retryCount, setRetryCount] = React17.useState(0);
-  const intervalRef = React17.useRef(null);
-  const isMonitoringRef = React17.useRef(false);
-  React17.useEffect(() => {
+  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(() => {
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
       }
     };
   }, []);
-  const checkTransactionStatus = React17.useCallback(
+  const checkTransactionStatus = React15.useCallback(
     async (signature) => {
       try {
         const statusResponse = await connection.getSignatureStatus(signature, {
@@ -3577,7 +3565,7 @@ var usePaymentStatus = (options = {}) => {
     },
     [connection]
   );
-  const checkPaymentStatus = React17.useCallback(
+  const checkPaymentStatus = React15.useCallback(
     async (id) => {
       try {
         return await client.getPaymentStatus(id);
@@ -3591,7 +3579,7 @@ var usePaymentStatus = (options = {}) => {
     },
     [client]
   );
-  const startMonitoring = React17.useCallback(async () => {
+  const startMonitoring = React15.useCallback(async () => {
     if (isMonitoringRef.current || !transactionId && !purchaseId) {
       return;
     }
@@ -3679,14 +3667,14 @@ var usePaymentStatus = (options = {}) => {
     retryInterval,
     retryCount
   ]);
-  const stopMonitoring = React17.useCallback(() => {
+  const stopMonitoring = React15.useCallback(() => {
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
     }
     isMonitoringRef.current = false;
     setIsLoading(false);
   }, []);
-  const checkStatus = React17.useCallback(async () => {
+  const checkStatus = React15.useCallback(async () => {
     if (!transactionId && !purchaseId) return;
     setIsLoading(true);
     setError(null);
@@ -3711,7 +3699,7 @@ var usePaymentStatus = (options = {}) => {
       setIsLoading(false);
     }
   }, [transactionId, purchaseId, checkTransactionStatus, checkPaymentStatus]);
-  React17.useEffect(() => {
+  React15.useEffect(() => {
     if ((transactionId || purchaseId) && !isMonitoringRef.current) {
       startMonitoring();
     }
@@ -3719,7 +3707,7 @@ var usePaymentStatus = (options = {}) => {
       stopMonitoring();
     };
   }, [transactionId, purchaseId, startMonitoring, stopMonitoring]);
-  const getConfirmationStatus = React17.useCallback(() => {
+  const getConfirmationStatus = React15.useCallback(() => {
     if (paymentStatus?.status === "confirmed") return "confirmed";
     if (paymentStatus?.status === "failed") return "failed";
     if (status?.confirmationStatus === "finalized") return "confirmed";
@@ -3728,7 +3716,7 @@ var usePaymentStatus = (options = {}) => {
       return "failed";
     return "pending";
   }, [status, paymentStatus]);
-  const getSolscanUrl = React17.useCallback(
+  const getSolscanUrl = React15.useCallback(
     (signature) => {
       const txId = signature || transactionId;
       if (!txId) return null;
@@ -3756,8 +3744,6 @@ var usePaymentStatus = (options = {}) => {
 };
 
 exports.BillingHistory = BillingHistory;
-exports.BillingThemePortal = BillingThemePortal;
-exports.BillingThemeProvider = BillingThemeProvider;
 exports.CancelMembershipDialog = CancelMembershipDialog;
 exports.CardDetailsForm = CardDetailsForm;
 exports.ClientApiError = ClientApiError;