@doujins/payments-ui 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -542,7 +542,7 @@ var Input = React15__namespace.forwardRef(
       {
         type,
         className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "placeholder:text-white/30 flex h-9 w-full rounded-md border border-white/30 bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium font-light file:text-foreground text-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         ),
         ref,
@@ -553,7 +553,7 @@ var Input = React15__namespace.forwardRef(
 );
 Input.displayName = "Input";
 var labelVariants = classVarianceAuthority.cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 var Label = React15__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   LabelPrimitive__namespace.Root,
@@ -571,7 +571,7 @@ var SelectTrigger = React15__namespace.forwardRef(({ className, children, ...pro
   {
     ref,
     className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full cursor-pointer items-center justify-between rounded-md border border-white/30 bg-transparent px-3 py-1 text-sm placeholder:text-white/30 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-current",
       className
     ),
     ...props,
@@ -613,7 +613,7 @@ var SelectContent = React15__namespace.forwardRef(({ className, children, positi
   {
     ref,
     className: cn(
-      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      "relative z-[200] max-h-64 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-white/20 bg-background-regular text-foreground shadow-lg backdrop-blur-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -650,13 +650,13 @@ var SelectItem = React15__namespace.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-foreground/10 focus:bg-foreground/10 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) })
     ]
   }
 ));
@@ -847,7 +847,8 @@ var CardDetailsForm = ({
     visible
   ]);
   const validate = () => {
-    if (!firstName.trim() || !lastName.trim() || !address1.trim() || !city.trim() || !postalCode.trim() || !country.trim() || !email.trim()) {
+    const emailRequired = !defaultValues?.email && !config.defaultUser?.email;
+    if (!firstName.trim() || !lastName.trim() || !address1.trim() || !city.trim() || !postalCode.trim() || !country.trim() || emailRequired && !email.trim()) {
       setLocalError("Please complete all required billing fields.");
       return false;
     }
@@ -865,7 +866,8 @@ var CardDetailsForm = ({
     window.CollectJS.startPaymentRequest();
   };
   const errorMessage = localError ?? externalError;
-  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";
+  const collectFieldClass = "relative flex h-9 w-full items-center overflow-hidden rounded-md border border-white/30 bg-transparent px-3 text-sm text-foreground";
+  const showEmailField = !defaultValues?.email && !config.defaultUser?.email;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
@@ -900,7 +902,7 @@ var CardDetailsForm = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        showEmailField && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Input,
@@ -989,7 +991,7 @@ var CardDetailsForm = ({
           Button,
           {
             type: "submit",
-            className: "w-full",
+            className: "w-full border-0 bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50",
             disabled: submitting || submitDisabled || isTokenizing,
             children: submitting || isTokenizing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
@@ -2099,8 +2101,8 @@ 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 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: [
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "z-[100] w-full max-w-md overflow-hidden border border-white/20 p-0 backdrop-blur-xl bg-background-regular shadow-2xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-b from-primary/25 via-primary/10 to-transparent 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: [
         /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "text-2xl font-semibold text-foreground", children: "Subscription activated" }),
@@ -2115,7 +2117,7 @@ var SubscriptionSuccessDialog = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full", onClick: onClose, children: "Continue exploring" }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full border-0 bg-emerald-600 text-white hover:bg-emerald-500", onClick: onClose, children: "Continue exploring" }) })
   ] }) });
 };
 var useSubscriptionActions = () => {
@@ -2287,9 +2289,9 @@ var SubscriptionCheckoutModal = ({
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
       DialogContent,
       {
-        className: "max-w-3xl max-h-[90vh] overflow-y-auto border-border rounded-md [&::-webkit-scrollbar]:hidden",
+        className: "z-[100] max-w-xl max-h-[90vh] overflow-y-auto border border-white/20 p-6 backdrop-blur-xl bg-background-regular rounded-md [&::-webkit-scrollbar]:hidden",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: "Checkout" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "flex items-center gap-2 text-foreground", 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" }),
             " ",
@@ -2338,8 +2340,8 @@ var wallets = [
 ];
 var WalletModal = ({ open, onOpenChange }) => {
   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: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "z-[100] w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-md border border-white/20 p-0 backdrop-blur-xl bg-background-regular shadow-2xl [&::-webkit-scrollbar]:hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "border-b border-white/10 bg-gradient-to-r from-primary/10 via-transparent to-transparent px-6 py-5 text-left", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-5 w-5 text-primary" }),
         " Connect a Solana wallet"
@@ -2350,7 +2352,7 @@ var WalletModal = ({ open, onOpenChange }) => {
       wallets.map((wallet) => /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "rounded-2xl border bg-background/80 p-4 shadow-sm",
+          className: "rounded-2xl border border-white/20 bg-foreground/5 p-4 shadow-sm",
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "button",
@@ -2375,7 +2377,7 @@ var WalletModal = ({ open, onOpenChange }) => {
                 wallet.name,
                 " wallet, approve the connection request, and confirm the signature prompt to finish linking."
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full", variant: "outline", disabled: true, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, { className: "w-full border-white/20 bg-transparent text-foreground hover:bg-foreground/10 hover:text-foreground", variant: "outline", disabled: true, children: [
                 "Connect with ",
                 wallet.name,
                 " (coming soon)"
@@ -2385,7 +2387,7 @@ var WalletModal = ({ open, onOpenChange }) => {
         },
         wallet.id
       )),
-      /* @__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." })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl border border-white/20 bg-foreground/5 p-4 text-xs text-muted-foreground", children: "Don't see your wallet? Additional providers will be added soon. Contact support if you need manual verification." })
     ] })
   ] }) });
 };
@@ -2821,9 +2823,9 @@ var CancelMembershipDialog = ({
       " ",
       t.buttonLabel
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "max-h-[90vh] overflow-y-auto rounded-md border border-border bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "z-[100] max-h-[90vh] overflow-y-auto rounded-md border border-white/20 p-6 backdrop-blur-xl bg-background-regular", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogTitle, { className: "flex items-center gap-2 text-lg font-semibold", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogTitle, { className: "flex items-center gap-2 text-lg font-semibold text-foreground", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TriangleAlert, { className: "h-5 w-5 text-destructive" }),
           " ",
           t.title
@@ -2838,7 +2840,7 @@ var CancelMembershipDialog = ({
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-4 space-y-2 py-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "cancelReason", className: "text-sm font-medium", children: t.reasonLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "cancelReason", className: "text-sm font-medium text-foreground", children: t.reasonLabel }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Textarea,
           {
@@ -2847,7 +2849,7 @@ var CancelMembershipDialog = ({
             onChange: handleReasonChange,
             placeholder: t.reasonPlaceholder,
             className: cn(
-              "w-full resize-none border-border bg-background",
+              "w-full resize-none border-white/20 bg-foreground/5 text-foreground placeholder:text-muted-foreground",
               showError && "border-destructive"
             ),
             rows: 4,
@@ -2865,11 +2867,11 @@ var CancelMembershipDialog = ({
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { className: "mt-6 gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "border-border text-muted-foreground", children: t.keepMembership }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "border-white/20 bg-transparent text-foreground hover:bg-foreground/10 hover:text-foreground", children: t.keepMembership }) }),
         /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           Button,
           {
-            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50",
             onClick: handleConfirm,
             disabled: !isReasonValid || isSubmitting,
             children: isSubmitting ? t.cancelling : t.confirmCancellation
@@ -3204,9 +3206,12 @@ var PaymentMethodsSection = ({
     /* @__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",
+        className: "z-[100] max-w-xl max-h-[90vh] overflow-y-auto border border-white/20 p-6 backdrop-blur-xl bg-background-regular rounded-md [&::-webkit-scrollbar]:hidden",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: t.addNewCard }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "flex items-center gap-2 text-foreground", children: t.addNewCard }),
+            /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "text-muted-foreground", children: t.addNewCardDescription })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             CardDetailsForm,
             {
@@ -3290,59 +3295,59 @@ var WalletDialog = ({ open, onOpenChange }) => {
     onOpenChange(false);
     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 pb-4", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { className: "z-[100] max-h-[95vh] max-w-lg overflow-y-auto rounded-2xl border border-white/20 p-6 backdrop-blur-xl bg-background-regular", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { className: "border-b border-white/10 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" })
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTitle, { className: "text-center text-base font-semibold uppercase tracking-wide text-foreground", children: "Secure Payment via Mobius Pay" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-center text-sm text-muted-foreground", children: "$23 USD per month, cancel at any time." })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-5 px-2 py-4 sm:px-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "Name on Card" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-foreground", children: "Name on Card" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserRound, { className: "h-4 w-4" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.nameOnCard, onChange: (e) => updateField("nameOnCard", e.target.value), className: "pl-10" })
+            /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.nameOnCard, onChange: (e) => updateField("nameOnCard", e.target.value), className: "pl-10 border-white/20 bg-foreground/5 text-foreground placeholder:text-muted-foreground" })
           ] }),
           errors.nameOnCard && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.nameOnCard })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "Credit Card Number" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-foreground", children: "Credit Card Number" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.cardNumber, onChange: (e) => updateField("cardNumber", e.target.value), className: "pl-10" })
+            /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.cardNumber, onChange: (e) => updateField("cardNumber", e.target.value), className: "pl-10 border-white/20 bg-foreground/5 text-foreground placeholder:text-muted-foreground" })
           ] }),
           errors.cardNumber && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.cardNumber })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "Expiration" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-foreground", children: "Expiration" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.expiration, onChange: (e) => updateField("expiration", e.target.value), className: "pl-10", placeholder: "MM/YY" })
+              /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.expiration, onChange: (e) => updateField("expiration", e.target.value), className: "pl-10 border-white/20 bg-foreground/5 text-foreground placeholder:text-muted-foreground", placeholder: "MM/YY" })
             ] }),
             errors.expiration && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.expiration })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-muted-foreground", children: "CVV" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "mb-1 block text-sm text-foreground", children: "CVV" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.KeyRound, { className: "h-4 w-4" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.cvv, onChange: (e) => updateField("cvv", e.target.value), className: "pl-10" })
+              /* @__PURE__ */ jsxRuntime.jsx(Input, { value: form.cvv, onChange: (e) => updateField("cvv", e.target.value), className: "pl-10 border-white/20 bg-foreground/5 text-foreground placeholder:text-muted-foreground" })
             ] }),
             errors.cvv && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive", children: errors.cvv })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-md border bg-muted/10 p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 rounded-md border border-white/20 bg-foreground/5 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." })
       ] }),
       errors.termsAccepted && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: errors.termsAccepted }),
       /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogFooter, { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: "flex-1", children: "Subscribe" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "flex-1", children: "Close" }) })
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", className: "flex-1 border-0 bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50", children: "Subscribe" }),
+        /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className: "flex-1 border-white/20 bg-transparent text-foreground hover:bg-foreground/10 hover:text-foreground", children: "Close" }) })
       ] })
     ] })
   ] }) });