@doujins/payments-ui 0.1.6 → 0.1.8

package/dist/index.js

@@ -11,8 +11,8 @@ import { SolflareWalletAdapter } from '@solana/wallet-adapter-solflare';
 import { TrustWalletAdapter } from '@solana/wallet-adapter-trust';
 import { CoinbaseWalletAdapter } from '@solana/wallet-adapter-coinbase';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, User, MapPin, Loader2, CreditCard, WalletCards, Trash2, ArrowLeft, CheckCircle, AlertCircle, Wallet, Ban, TriangleAlert, Shield, UserRound, Calendar, KeyRound, Sparkles, XCircle, RotateCcw, RefreshCw } from 'lucide-react';
-import { clsx } from 'clsx';
+import { X, ChevronDown, ChevronUp, Check, Loader2, CheckCircle, AlertCircle, Wallet, Ban, TriangleAlert, WalletCards, CreditCard, Trash2, Shield, UserRound, Calendar, KeyRound, XCircle, RotateCcw, RefreshCw } from 'lucide-react';
+import clsx2, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import countryList from 'country-list';
@@ -683,7 +683,7 @@ 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 = "flex h-11 w-full items-center rounded-md border bg-white/5 px-3 text-sm text-white";
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -692,12 +692,9 @@ var CardDetailsForm = ({
       noValidate: true,
       children: [
         errorMessage && /* @__PURE__ */ 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__ */ jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-first", className: "flex items-center gap-2 text-white/70", children: [
-              /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }),
-              " First name"
-            ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "payments-first", children: "First name" }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -708,11 +705,8 @@ var CardDetailsForm = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-last", className: "flex items-center gap-2 text-white/70", children: [
-              /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }),
-              " Last name"
-            ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: "payments-last", children: "Last name" }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -776,10 +770,7 @@ var CardDetailsForm = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-5 md:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs(Label, { htmlFor: "payments-postal", className: "flex items-center gap-2 text-white/70", children: [
-              /* @__PURE__ */ jsx(MapPin, { className: "h-4 w-4" }),
-              " Postal code"
-            ] }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "payments-postal", children: "Postal code" }),
             /* @__PURE__ */ jsx(
               Input,
               {
@@ -821,17 +812,10 @@ var CardDetailsForm = ({
             children: submitting || isTokenizing ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
               " Processing\u2026"
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CreditCard, { className: "mr-2 h-4 w-4" }),
-              " ",
-              submitLabel
-            ] })
+            ] }) : submitLabel
           }
         ),
-        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-xs text-white/50", children: [
-          /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
-          " Your payment information is encrypted and processed securely."
-        ] })
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-white/60", children: "Your payment information is encrypted and processed securely." })
       ]
     }
   );
@@ -945,93 +929,44 @@ var formatCardLabel = (method) => {
 var StoredPaymentMethods = ({
   selectedMethodId,
   onMethodSelect,
-  showAddButton = true,
-  heading = "Payment Methods",
-  description = "Manage your saved cards"
+  showAddButton = true
 }) => {
-  const { listQuery, createMutation, deleteMutation } = usePaymentMethods();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [deletingId, setDeletingId] = useState(null);
+  const { listQuery, createMutation, deleteMutation } = usePaymentMethods();
   const payments = 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 },
-      {
-        onSettled: () => setDeletingId(null)
-      }
-    );
-  };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm font-medium text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(WalletCards, { className: "h-4 w-4" }),
-          " ",
-          heading
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description })
-      ] }),
-      showAddButton && /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outline", onClick: () => setIsModalOpen(true), children: [
-        /* @__PURE__ */ jsx(CreditCard, { className: "mr-2 h-4 w-4" }),
-        " Add card"
-      ] })
-    ] }),
-    listQuery.isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border/60 bg-muted/10 py-8 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-4", children: showAddButton && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setIsModalOpen(true), children: "Add card" }) }),
+    listQuery.isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-4 text-sm text-muted-foreground", children: [
       /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-      " Loading cards\u2026"
-    ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => {
+      " Loading cards..."
+    ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No saved payment methods yet." }) : /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[320px] pr-2", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => {
       const isSelected = selectedMethodId === method.id;
       return /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            "flex flex-col gap-3 rounded-lg border px-4 py-3 transition-colors md:flex-row md:items-center md:justify-between",
-            isSelected ? "border-primary/60 bg-primary/5" : "border-border/60 bg-background"
+            "flex border border-border rounded-md px-4 py-3 flex-row items-center justify-between",
+            {
+              "bg-primary/5": isSelected
+            }
           ),
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: formatCardLabel(method) }),
-              /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
-                "Added on",
-                " ",
-                method.created_at ? new Date(method.created_at).toLocaleDateString() : "unknown"
-              ] })
-            ] }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground", children: formatCardLabel(method) }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-              /* @__PURE__ */ 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__ */ jsx(Badge, { variant: "destructive", children: method.failure_reason }),
               onMethodSelect && /* @__PURE__ */ jsx(
                 Button,
                 {
                   size: "sm",
-                  variant: isSelected ? "default" : "outline",
+                  variant: "ghost",
                   onClick: () => onMethodSelect(method),
+                  className: clsx2("px-3", { "bg-muted/90": !isSelected, "bg-background": isSelected }),
                   children: isSelected ? "Selected" : "Use card"
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  size: "icon",
-                  variant: "outline",
-                  className: "text-destructive",
-                  onClick: () => handleDelete(method),
-                  disabled: deletingId === method.id && deleteMutation.isPending,
-                  children: deletingId === method.id && deleteMutation.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
-                }
               )
             ] })
           ]
@@ -1396,9 +1331,9 @@ var QRCodePayment = ({
     onSuccess: handleQrSuccess
   });
   if (!selectedToken) {
-    return /* @__PURE__ */ 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__ */ 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__ */ jsxs(Card, { className: "space-y-4 border border-border/60 bg-background/80 p-6 shadow-none rounded-md", children: [
+  return /* @__PURE__ */ jsxs(Card, { className: "space-y-4 border bg-background/80 p-6 shadow-none rounded-md", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Scan with Solana Pay" }),
@@ -1417,7 +1352,7 @@ var QRCodePayment = ({
       )
     ] }),
     error && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: error }),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-2xl border border-dashed border-border/70 bg-muted/5 p-6", children: qrDataUri ? /* @__PURE__ */ jsx("img", { src: qrDataUri, alt: "Solana Pay QR", className: "h-72 w-72 rounded-lg border border-border/40 bg-card" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2 text-sm text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-2xl border border-dashed bg-muted/5 p-6", children: qrDataUri ? /* @__PURE__ */ jsx("img", { src: qrDataUri, alt: "Solana Pay QR", className: "h-72 w-72 rounded-lg border bg-card" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2 text-sm text-muted-foreground", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin" }),
       " Generating QR code\u2026"
     ] }) : "QR code unavailable" }) }),
@@ -1769,7 +1704,7 @@ var SolanaPaymentView = ({
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Select token" }),
         /* @__PURE__ */ jsxs(Select, { value: selectedToken?.symbol ?? "", onValueChange: handleTokenChange, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select token" }) }),
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "border bg-transparent", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select token" }) }),
           /* @__PURE__ */ jsx(SelectContent, { className: "max-h-64", children: tokens.map((token) => /* @__PURE__ */ jsxs(SelectItem, { value: token.symbol, children: [
             token.name,
             " (",
@@ -1796,7 +1731,7 @@ var SolanaPaymentView = ({
         /* @__PURE__ */ jsx("p", { className: "text-2xl font-semibold text-foreground", children: "Pay with Solana" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Choose a supported token and send the payment via Solana Pay QR code." })
       ] }),
-      onClose && /* @__PURE__ */ jsxs(
+      onClose && /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
@@ -1804,11 +1739,8 @@ var SolanaPaymentView = ({
           variant: "ghost",
           onClick: handleClose,
           disabled: paymentState === "processing" || paymentState === "confirming",
-          className: "h-8 px-2 text-sm",
-          children: [
-            /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }),
-            " Back"
-          ]
+          className: "h-8 px-3 text-sm",
+          children: "Back"
         }
       )
     ] }),
@@ -1839,7 +1771,7 @@ var PaymentExperience = ({
   const [savedError, setSavedError] = useState(null);
   const [newCardStatus, setNewCardStatus] = useState("idle");
   const [newCardError, setNewCardError] = useState(null);
-  const { notifyStatus, notifySuccess, notifyError } = usePaymentNotifications();
+  const { notifyStatus, notifyError } = usePaymentNotifications();
   useEffect(() => {
     setActiveTab(showStored ? "saved" : "new");
   }, [showStored]);
@@ -1899,7 +1831,7 @@ var PaymentExperience = ({
     },
     [notifyError, notifyStatus, onNewCardPayment]
   );
-  const showSolanaView = useCallback(() => {
+  useCallback(() => {
     if (!enableSolanaPay) return;
     setMode("solana");
   }, [enableSolanaPay]);
@@ -1927,11 +1859,9 @@ var PaymentExperience = ({
       /* @__PURE__ */ jsx(
         StoredPaymentMethods,
         {
-          heading: "Saved cards",
+          showAddButton: false,
           selectedMethodId,
-          onMethodSelect: handleMethodSelect,
-          description: "Select one of your stored payment methods.",
-          showAddButton: false
+          onMethodSelect: handleMethodSelect
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1940,7 +1870,7 @@ var PaymentExperience = ({
           className: "w-full",
           disabled: !selectedMethodId || savedStatus === "processing",
           onClick: handleSavedPayment,
-          children: savedStatus === "processing" ? "Processing\u2026" : "Pay with selected card"
+          children: savedStatus === "processing" ? "Processing..." : "Pay with selected card"
         }
       ),
       savedError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: savedError })
@@ -1961,28 +1891,21 @@ var PaymentExperience = ({
       }
     );
   };
-  const renderCardExperience = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      Tabs,
-      {
-        value: activeTab,
-        onValueChange: (value) => setActiveTab(value),
-        className: "space-y-3",
-        children: [
-          /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2 border border-border/60", children: [
-            /* @__PURE__ */ jsx(TabsTrigger, { value: "saved", disabled: !showStored, children: "Use saved card" }),
-            /* @__PURE__ */ jsx(TabsTrigger, { value: "new", disabled: !showNewCard, children: "Add new card" })
-          ] }),
-          /* @__PURE__ */ jsx(TabsContent, { value: "saved", className: "space-y-4", children: renderSavedTab() }),
-          /* @__PURE__ */ jsx(TabsContent, { value: "new", className: "space-y-4", children: renderNewTab() })
-        ]
-      }
-    ),
-    enableSolanaPay && /* @__PURE__ */ jsxs(Button, { className: "w-full", variant: "secondary", onClick: showSolanaView, children: [
-      /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
-      " Pay with Solana"
-    ] })
-  ] });
+  const renderCardExperience = () => /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      value: activeTab,
+      onValueChange: (value) => setActiveTab(value),
+      children: [
+        /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "saved", disabled: !showStored, children: "Use saved card" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "new", disabled: !showNewCard, children: "Add new card" })
+        ] }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "saved", children: renderSavedTab() }),
+        /* @__PURE__ */ jsx(TabsContent, { value: "new", children: renderNewTab() })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6 pt-4", children: [
     mode === "cards" && renderCardExperience(),
     mode === "solana" && enableSolanaPay && /* @__PURE__ */ jsx(
@@ -2006,7 +1929,7 @@ var SubscriptionSuccessDialog = ({
 }) => {
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (value) => {
     if (!value) onClose();
-  }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-full max-w-md overflow-hidden border border-border/70 bg-background/95 p-0 shadow-2xl", children: [
+  }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "w-full max-w-md overflow-hidden border bg-background/95 p-0 shadow-2xl", children: [
     /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-b from-primary/25 via-primary/10 to-background px-6 py-8 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-background/60", children: /* @__PURE__ */ jsx(CheckCircle, { className: "h-10 w-10 text-primary" }) }),
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
@@ -2162,11 +2085,11 @@ var SubscriptionCheckoutModal = ({
   };
   const handleNewCardPayment = async ({ token, billing }) => {
     const response = await subscribeWithCard({
-      priceId: ensurePrice(),
+      billing,
       provider,
+      idempotencyKey,
       paymentToken: token,
-      billing,
-      idempotencyKey
+      priceId: ensurePrice()
     });
     assertCheckoutSuccess(response.status, response.message);
     notifySuccess();
@@ -2194,9 +2117,9 @@ var SubscriptionCheckoutModal = ({
     /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsx(
       DialogContent,
       {
-        className: "max-w-3xl max-h-[90vh] overflow-y-auto p-0 [&::-webkit-scrollbar]:hidden",
+        className: "max-w-3xl max-h-[90vh] overflow-y-auto [&::-webkit-scrollbar]:hidden",
         children: /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6", children: [
-          !priceId && /* @__PURE__ */ 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: [
+          !priceId && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-destructive", children: [
             /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
             " Select a subscription plan to continue."
           ] }),
@@ -2205,14 +2128,14 @@ var SubscriptionCheckoutModal = ({
             {
               usdAmount,
               priceId: priceId ?? "",
-              onSolanaSuccess: solanaSuccess,
+              initialMode,
               onSolanaError: solanaError,
+              onSolanaSuccess: solanaSuccess,
               enableNewCard: Boolean(priceId),
               enableStoredMethods: Boolean(priceId),
               enableSolanaPay: enableSolanaPay && Boolean(priceId),
               onNewCardPayment: priceId ? handleNewCardPayment : void 0,
-              onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0,
-              initialMode
+              onSavedMethodPayment: priceId ? handleSavedMethodPayment : void 0
             }
           )
         ] })
@@ -2244,8 +2167,8 @@ var wallets = [
 ];
 var WalletModal = ({ open, onOpenChange }) => {
   const [expandedWallet, setExpandedWallet] = useState(null);
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ 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__ */ 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: [
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ 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__ */ jsxs(DialogHeader, { className: "border-b bg-gradient-to-r from-primary/10 via-background to-background px-6 py-5 text-left", children: [
       /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: [
         /* @__PURE__ */ jsx(Wallet, { className: "h-5 w-5 text-primary" }),
         " Connect a Solana wallet"
@@ -2256,7 +2179,7 @@ var WalletModal = ({ open, onOpenChange }) => {
       wallets.map((wallet) => /* @__PURE__ */ 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__ */ jsxs(
               "button",
@@ -2291,7 +2214,7 @@ var WalletModal = ({ open, onOpenChange }) => {
         },
         wallet.id
       )),
-      /* @__PURE__ */ 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__ */ 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." })
     ] })
   ] }) });
 };
@@ -2450,46 +2373,12 @@ var usePaymentContext = () => {
   }
   return context;
 };
-var BillingThemeProvider = ({
-  children,
-  className,
-  dark = false
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "payments-ui-root",
-        dark && "dark",
-        className
-      ),
-      children
-    }
-  );
-};
-var BillingThemePortal = ({
-  children,
-  className,
-  dark = false
-}) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "payments-ui-portal",
-        dark && "dark",
-        className
-      ),
-      children
-    }
-  );
-};
 var SolanaPaymentSelector = ({
   isOpen,
   onClose,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-md border border-border/70 bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsx(SolanaPaymentView, { ...props, onClose }) }) });
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-md border bg-background/95 p-0 shadow-2xl [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ jsx(SolanaPaymentView, { ...props, onClose }) }) });
 };
 var Table = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
   "table",
@@ -2929,8 +2818,8 @@ var BillingHistory = ({
             /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t.reviewActivity }),
             enableCancel && /* @__PURE__ */ jsx(CancelMembershipDialog, { onNotify: notify })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "max-h-[300px] overflow-y-auto rounded-lg border border-border/70", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: historyQuery.isLoading ? /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-sm text-muted-foreground", children: t.loading }) : historyQuery.isError ? /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-sm text-destructive", children: t.error }) : /* @__PURE__ */ jsxs(Table, { children: [
-            /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { className: "border-border/60", children: [
+          /* @__PURE__ */ jsx("div", { className: "max-h-[300px] overflow-y-auto rounded-lg border ", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: historyQuery.isLoading ? /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-sm text-muted-foreground", children: t.loading }) : historyQuery.isError ? /* @__PURE__ */ jsx("p", { className: "p-4 text-center text-sm text-destructive", children: t.error }) : /* @__PURE__ */ jsxs(Table, { children: [
+            /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { className: "", children: [
               /* @__PURE__ */ jsx(TableHead, { children: t.reference }),
               /* @__PURE__ */ jsx(TableHead, { children: t.date }),
               /* @__PURE__ */ jsx(TableHead, { children: t.amount }),
@@ -2938,7 +2827,7 @@ var BillingHistory = ({
               /* @__PURE__ */ jsx(TableHead, { children: t.status })
             ] }) }),
             /* @__PURE__ */ jsx(TableBody, { children: payments.map(
-              (page) => page.data.map((payment) => /* @__PURE__ */ jsxs(TableRow, { className: "border-border/40", children: [
+              (page) => page.data.map((payment) => /* @__PURE__ */ jsxs(TableRow, { className: "", children: [
                 /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm", children: payment.id.slice(0, 7).toUpperCase() }),
                 /* @__PURE__ */ jsx(TableCell, { children: formatDate(payment.purchased_at) }),
                 /* @__PURE__ */ jsx(TableCell, { children: formatAmount(payment.amount, payment.currency) }),
@@ -3126,10 +3015,10 @@ var PaymentMethodsSection = ({
       /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-5 w-5 animate-spin" }),
       " ",
       t.loadingCards
-    ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-white/20 bg-white/5 p-6 text-sm text-white/60", children: t.noPaymentMethods }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ jsxs(
+    ] }) : payments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-6 text-sm text-center", children: t.noPaymentMethods }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: payments.map((method) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-2 md:flex-row md:items-center md:justify-between", children: [
             /* @__PURE__ */ jsxs("div", { children: [
@@ -3214,7 +3103,7 @@ var PaymentMethodsSection = ({
           },
           externalError: createMutation.error?.message ?? null,
           onTokenize: handleCardTokenize,
-          className: "rounded-2xl border border-white/10 bg-white/5 p-6"
+          className: "rounded-2xl border bg-white/5 p-6"
         }
       )
     ] }) }),
@@ -3237,7 +3126,7 @@ var PaymentMethodsSection = ({
           },
           externalError: replaceMutation.error?.message ?? null,
           onTokenize: handleReplaceTokenize,
-          className: "rounded-2xl border border-white/10 bg-white/5 p-6"
+          className: "rounded-2xl border bg-white/5 p-6"
         }
       )
     ] }) })
@@ -3306,7 +3195,7 @@ var WalletDialog = ({ open, onOpenChange }) => {
     setForm(initialState);
   };
   return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: "max-h-[95vh] max-w-lg overflow-y-auto rounded-2xl border border-border bg-background", children: [
-    /* @__PURE__ */ jsxs(AlertDialogHeader, { className: "border-b border-border/60 pb-4", children: [
+    /* @__PURE__ */ jsxs(AlertDialogHeader, { className: "border-b pb-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
         /* @__PURE__ */ jsx(Shield, { className: "h-5 w-5 text-primary" }),
         /* @__PURE__ */ jsx(AlertDialogTitle, { className: "text-center text-base font-semibold uppercase tracking-wide", children: "Secure Payment via Mobius Pay" })
@@ -3350,7 +3239,7 @@ var WalletDialog = ({ open, onOpenChange }) => {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 rounded-md border border-border/70 bg-muted/10 p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 rounded-md border bg-muted/10 p-4", children: [
         /* @__PURE__ */ jsx(Checkbox, { id: "terms-agree", checked: form.termsAccepted, onCheckedChange: (checked) => updateField("termsAccepted", Boolean(checked)) }),
         /* @__PURE__ */ 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." })
       ] }),
@@ -3758,6 +3647,6 @@ var usePaymentStatus = (options = {}) => {
   };
 };
 
-export { BillingHistory, BillingThemePortal, BillingThemeProvider, CancelMembershipDialog, CardDetailsForm, ClientApiError, PaymentContext, PaymentExperience, PaymentMethodsSection, PaymentProvider, PaymentsDialogProvider, SolanaPaymentSelector, SolanaPaymentView, StoredPaymentMethods, SubscriptionCheckoutModal, SubscriptionSuccessDialog, WalletDialog, WalletModal, createClient, usePaymentContext, usePaymentDialogs, usePaymentMethods, usePaymentNotifications, usePaymentStatus, useSolanaQrPayment, useSubscriptionActions, useSupportedTokens, useTokenBalance };
+export { BillingHistory, CancelMembershipDialog, CardDetailsForm, ClientApiError, PaymentContext, PaymentExperience, PaymentMethodsSection, PaymentProvider, PaymentsDialogProvider, SolanaPaymentSelector, SolanaPaymentView, StoredPaymentMethods, SubscriptionCheckoutModal, SubscriptionSuccessDialog, WalletDialog, WalletModal, createClient, usePaymentContext, usePaymentDialogs, usePaymentMethods, usePaymentNotifications, usePaymentStatus, useSolanaQrPayment, useSubscriptionActions, useSupportedTokens, useTokenBalance };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map