@doujins/payments-ui 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -109,18 +109,10 @@ var ensureFetch = (fetchImpl) => {
 var createClient = (config) => {
   const fetchImpl = ensureFetch(config.fetch);
   const normalizeBase = (value) => value.replace(/\/$/, "");
-  const normalizePath = (value, fallback = "/v1") => {
-    if (!value) return fallback;
-    return value.startsWith("/") ? value : `/${value}`;
-  };
   const billingBaseUrl = normalizeBase(config.billingBaseUrl);
   const accountBaseUrl = normalizeBase(
     config.accountBaseUrl ?? config.billingBaseUrl
   );
-  const billingBasePath = normalizePath(config.billingBasePath ?? "/v1");
-  const accountBasePath = normalizePath(
-    config.accountBasePath ?? config.billingBasePath ?? "/v1"
-  );
   const defaultHeaders = config.defaultHeaders ?? {};
   const resolveAuthToken = async () => {
     if (!config.getAuthToken) return null;
@@ -134,11 +126,8 @@ var createClient = (config) => {
   };
   const buildUrl = (path, query, target) => {
     const normalizedPath = path.startsWith("/") ? path : `/${path}`;
-    const basePath = target === "account" ? accountBasePath : billingBasePath;
     const baseUrl = target === "account" ? accountBaseUrl : billingBaseUrl;
-    const needsBasePrefix = !normalizedPath.startsWith(basePath);
-    const finalPath = needsBasePrefix ? `${basePath}${normalizedPath}` : normalizedPath;
-    const url = new URL(`${baseUrl}${finalPath}`);
+    const url = new URL(`${baseUrl}${normalizedPath}`);
     if (query) {
       Object.entries(query).forEach(([key, value]) => {
         if (value === void 0 || value === null) return;
@@ -327,27 +316,27 @@ var DialogOverlay = React17__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React17__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(DialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-portal", children: [
+var DialogContent = React17__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     DialogPrimitive__namespace.Content,
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100vw-40px)] sm:w-[calc(100vw-60px)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-white/10 bg-[#161b22] text-white 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%] rounded-lg",
+        "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",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-5 rounded-full bg-white/10 p-1 opacity-70 transition-opacity hover:opacity-100 hover:bg-white/20 focus:outline-none disabled:pointer-events-none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3 text-white" }),
+        /* @__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" })
         ] })
       ]
     }
   )
-] }) }));
+] }));
 DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
 var DialogHeader = ({
   className,
@@ -379,7 +368,7 @@ var DialogDescription = React17__namespace.forwardRef(({ className, ...props },
   DialogPrimitive__namespace.Description,
   {
     ref,
-    className: cn("text-white/60 text-sm", className),
+    className: cn("text-sm text-muted-foreground", className),
     ...props
   }
 ));
@@ -400,16 +389,16 @@ var customCountries = [
 countryList__default.default.overwrite(customCountries);
 var countries = countryList__default.default.getData().sort((a, b) => a.name.localeCompare(b.name));
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-[#28a745] text-white shadow hover:bg-[#16a34a]",
-        secondary: "bg-white/10 text-white hover:bg-white/20",
-        outline: "border border-white/10 bg-transparent text-white hover:bg-white/10",
-        ghost: "text-white/80 hover:bg-white/10 hover:text-white",
-        destructive: "bg-red-600 text-white hover:bg-red-700",
-        link: "text-blue-400 underline-offset-4 hover:underline"
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -445,7 +434,7 @@ var Input = React17__namespace.forwardRef(
       {
         type,
         className: cn(
-          "flex h-10 w-full rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-white placeholder:text-white/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:border-white/20 disabled:cursor-not-allowed disabled:opacity-50",
+          "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",
           className
         ),
         ref,
@@ -455,14 +444,14 @@ var Input = React17__namespace.forwardRef(
   }
 );
 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(
   LabelPrimitive__namespace.Root,
   {
     ref,
-    className: cn(
-      "text-sm font-medium leading-none text-white peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-      className
-    ),
+    className: cn(labelVariants(), className),
     ...props
   }
 ));
@@ -474,7 +463,7 @@ var SelectTrigger = React17__namespace.forwardRef(({ className, children, ...pro
   {
     ref,
     className: cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-white placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-white/20 disabled:cursor-not-allowed disabled:opacity-50",
+      "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",
       className
     ),
     ...props,
@@ -485,29 +474,65 @@ var SelectTrigger = React17__namespace.forwardRef(({ className, children, ...pro
   }
 ));
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectContent = React17__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "payments-ui-portal", children: /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectScrollUpButton = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
+var SelectScrollDownButton = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
+  }
+));
+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(
   SelectPrimitive__namespace.Content,
   {
     ref,
     className: cn(
-      "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-white/10 bg-[#1a1f26] text-white 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",
+      "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]",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1 text-white/60", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: "p-1", children }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1 text-white/60", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SelectPrimitive__namespace.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
     ]
   }
-) }) }));
+) }));
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
 var SelectLabel = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Label,
   {
     ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold text-white/60", className),
+    className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
     ...props
   }
 ));
@@ -517,7 +542,7 @@ var SelectItem = React17__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 text-white outline-none focus:bg-white/10 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "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",
       className
     ),
     ...props,
@@ -532,7 +557,7 @@ var SelectSeparator = React17__namespace.forwardRef(({ className, ...props }, re
   SelectPrimitive__namespace.Separator,
   {
     ref,
-    className: cn("mx-1 my-1 h-px bg-white/10", className),
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
     ...props
   }
 ));
@@ -904,14 +929,14 @@ var usePaymentMethods = () => {
   };
 };
 var badgeVariants = classVarianceAuthority.cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-emerald-500/20 text-emerald-400",
-        secondary: "border-transparent bg-white/10 text-white/70",
-        outline: "border-white/20 text-white/80",
-        destructive: "border-transparent bg-red-500/20 text-red-400"
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground"
       }
     },
     defaultVariants: {
@@ -944,7 +969,7 @@ var ScrollBar = React17__namespace.forwardRef(({ className, orientation = "verti
     className: cn(
       "flex touch-none select-none transition-colors",
       orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     ),
     ...props,
@@ -1079,7 +1104,7 @@ var TabsList = React17__namespace.forwardRef(({ className, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-white/5 border border-white/10 p-1 text-white/60",
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
       className
     ),
     ...props
@@ -1091,7 +1116,7 @@ var TabsTrigger = React17__namespace.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white/10 data-[state=active]:text-white data-[state=active]:shadow",
+      "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
@@ -1103,7 +1128,7 @@ var TabsContent = React17__namespace.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     ),
     ...props
@@ -1334,16 +1359,17 @@ var useSolanaQrPayment = (options) => {
     refresh
   };
 };
-var Card = React17__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn("rounded-xl border border-white/10 bg-[#161b22] text-white shadow", className),
-      ...props
-    }
-  )
-);
+var Card = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
 Card.displayName = "Card";
 var CardHeader = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
@@ -1354,11 +1380,26 @@ var CardHeader = React17__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React17__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-xl font-semibold leading-none tracking-tight text-white", className), ...props })
-);
+var CardTitle = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-white/60", className), ...props }));
+var CardDescription = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
 CardDescription.displayName = "CardDescription";
 var CardContent = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
@@ -2396,9 +2437,7 @@ var PaymentProvider = ({
     }) : void 0;
     return createClient({
       billingBaseUrl: config.endpoints.billingBaseUrl,
-      billingBasePath: config.endpoints.billingBasePath,
       accountBaseUrl: config.endpoints.accountBaseUrl,
-      accountBasePath: config.endpoints.accountBasePath,
       getAuthToken: authProvider,
       defaultHeaders: config.defaultHeaders,
       fetch: wrappedFetch
@@ -2441,7 +2480,7 @@ var usePaymentContext = () => {
   }
   return context;
 };
-var PaymentsUIRoot = ({
+var BillingThemeProvider = ({
   children,
   className,
   dark = false
@@ -2458,7 +2497,7 @@ var PaymentsUIRoot = ({
     }
   );
 };
-var PaymentsUIPortalRoot = ({
+var BillingThemePortal = ({
   children,
   className,
   dark = false
@@ -2482,51 +2521,79 @@ var SolanaPaymentSelector = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isOpen, onOpenChange: (value) => value ? void 0 : onClose(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { className: "w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-md border border-border/70 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(
-    "table",
-    {
-      ref,
-      className: cn("w-full caption-bottom text-sm", className),
-      ...props
-    }
-  )
-);
+var Table = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) }));
 Table.displayName = "Table";
 var TableHeader = React17__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("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+var TableBody = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
 TableBody.displayName = "TableBody";
-var TableFooter = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tfoot", { ref, className: cn("bg-muted/50 font-medium text-muted-foreground", className), ...props }));
+var TableFooter = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
 TableFooter.displayName = "TableFooter";
-var TableRow = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
+var TableRow = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
 TableRow.displayName = "TableRow";
-var TableHead = React17__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "th",
-    {
-      ref,
-      className: cn(
-        "h-10 px-2 text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-        className
-      ),
-      ...props
-    }
-  )
-);
+var TableHead = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
 TableHead.displayName = "TableHead";
-var TableCell = React17__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "td",
-    {
-      ref,
-      className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className),
-      ...props
-    }
-  )
-);
+var TableCell = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
 TableCell.displayName = "TableCell";
-var TableCaption = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
+var TableCaption = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
 TableCaption.displayName = "TableCaption";
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
@@ -2534,34 +2601,43 @@ var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
 var AlertDialogOverlay = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Overlay,
   {
-    ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+      "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
+    ...props,
+    ref
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
-var AlertDialogContent = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPortal, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "payments-ui-portal", children: [
+var AlertDialogContent = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Content,
     {
       ref,
       className: cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-white/10 bg-[#161b22] text-white p-6 shadow-lg rounded-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "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",
         className
       ),
       ...props
     }
   )
-] }) }));
+] }));
 AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.displayName;
 var AlertDialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
 AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = ({
   className,
@@ -2569,39 +2645,67 @@ var AlertDialogFooter = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
-    className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2", className),
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
     ...props
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold text-white", className), ...props }));
+var AlertDialogTitle = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold", className),
+    ...props
+  }
+));
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-var AlertDialogDescription = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-white/60", className), ...props }));
+var AlertDialogDescription = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-var AlertDialogAction = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+var AlertDialogAction = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Action,
+  {
+    ref,
+    className: cn(buttonVariants(), className),
+    ...props
+  }
+));
 AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
 var AlertDialogCancel = React17__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
-    className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
+    className: cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    ),
     ...props
   }
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
-var Textarea = React17__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Textarea = React17__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
     {
-      ref,
       className: cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background 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",
         className
       ),
+      ref,
       ...props
     }
-  )
-);
+  );
+});
 Textarea.displayName = "Textarea";
 var notifyDefault = (payload) => {
   const level = payload.status === "destructive" ? "error" : "info";
@@ -3174,15 +3278,15 @@ var Checkbox = React17__namespace.forwardRef(({ className, ...props }, ref) => /
   {
     ref,
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     ),
     ...props,
     children: /* @__PURE__ */ jsxRuntime.jsx(
       CheckboxPrimitive__namespace.Indicator,
       {
-        className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" })
+        className: cn("grid place-content-center text-current"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })
       }
     )
   }
@@ -3685,6 +3789,8 @@ var usePaymentStatus = (options = {}) => {
 };
 
 exports.BillingHistory = BillingHistory;
+exports.BillingThemePortal = BillingThemePortal;
+exports.BillingThemeProvider = BillingThemeProvider;
 exports.CancelMembershipDialog = CancelMembershipDialog;
 exports.CardDetailsForm = CardDetailsForm;
 exports.ClientApiError = ClientApiError;
@@ -3693,8 +3799,6 @@ exports.PaymentExperience = PaymentExperience;
 exports.PaymentMethodsSection = PaymentMethodsSection;
 exports.PaymentProvider = PaymentProvider;
 exports.PaymentsDialogProvider = PaymentsDialogProvider;
-exports.PaymentsUIPortalRoot = PaymentsUIPortalRoot;
-exports.PaymentsUIRoot = PaymentsUIRoot;
 exports.SolanaPaymentSelector = SolanaPaymentSelector;
 exports.SolanaPaymentView = SolanaPaymentView;
 exports.StoredPaymentMethods = StoredPaymentMethods;