@usethrottle/auth 0.2.1 → 0.2.3

package/dist/react/components/index.js

@@ -8,10 +8,10 @@ import {
   useOrders,
   useSavedCards,
   useSubscriptions
-} from "../../chunk-HGBAIM6B.js";
+} from "../../chunk-2DREGJUF.js";
 import {
   messageForError
-} from "../../chunk-AIXBUDOT.js";
+} from "../../chunk-ST77QX7X.js";
 import {
   ThrottleAuthError,
   ThrottleAuthProvider,
@@ -21,10 +21,10 @@ import {
   memoryStorage,
   useAuth,
   useAuthContext
-} from "../../chunk-SZ427BQ3.js";
+} from "../../chunk-NCSTIPJF.js";
 
 // src/react/components/provider.tsx
-import { createContext as createContext5, useCallback as useCallback3, useContext as useContext5, useMemo as useMemo3, useRef as useRef6, useState as useState19 } from "react";
+import { createContext as createContext5, useCallback as useCallback3, useContext as useContext5, useMemo as useMemo3, useRef as useRef8, useState as useState21 } from "react";
 
 // src/react/components/appearance.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -125,6 +125,7 @@ var VARIABLE_PROPERTY = {
   colorMuted: "--throttle-color-muted",
   colorMutedForeground: "--throttle-color-muted-foreground",
   colorBorder: "--throttle-color-border",
+  colorBorderControl: "--throttle-color-border-control",
   colorDanger: "--throttle-color-danger",
   colorDangerSurface: "--throttle-color-danger-surface",
   colorDangerBorder: "--throttle-color-danger-border",
@@ -139,6 +140,12 @@ var VARIABLE_PROPERTY = {
   borderRadius: "--throttle-radius",
   borderWidth: "--throttle-border-width",
   spacing: "--throttle-spacing",
+  // The account dashboard's own surface and outer padding. Separate from
+  // colorBackground/colorSurface because a merchant embedding the dashboard
+  // in their page usually wants it to paint nothing at all, while still
+  // theming the cards inside it.
+  accountSurface: "--throttle-color-account-surface",
+  accountPadding: "--throttle-account-padding",
   shadowCard: "--throttle-shadow-card",
   shadowPopover: "--throttle-shadow-popover",
   transition: "--throttle-transition",
@@ -273,6 +280,8 @@ var THROTTLE_ELEMENT_KEYS = [
   "paymentMethodsPanel.item",
   "paymentMethodsPanel.defaultButton",
   "paymentMethodsPanel.deleteButton",
+  "paymentMethodsPanel.addButton",
+  "paymentMethodsPanel.addDialog",
   "paymentMethodsPanel.table",
   "paymentMethodsPanel.row",
   "ordersPanel.root",
@@ -501,8 +510,9 @@ var enUS = {
   },
   paymentMethods: {
     empty: "No saved cards",
-    // True today and still true once a buyer-plane add-card route exists.
-    emptyDescription: "Cards you use at checkout will be saved here.",
+    emptyDescription: "Add a card here, or one will be saved when you check out.",
+    addButton: "Add card",
+    addTitle: "Add a card",
     // Shown whenever the panel is empty with no error and the buyer is not
     // verified — including simply being signed out — matching the copy
     // orders/invoices/subscriptions already show in that state.
@@ -693,6 +703,19 @@ var THROTTLE_STYLES = `
   --throttle-color-muted: #eceef2;
   --throttle-color-muted-foreground: #5b6472;
   --throttle-color-border: #e2e8f0;
+  /* The boundary of an INTERACTIVE control, which WCAG 1.4.11 requires to
+     reach 3:1 against its adjacent colour \u2014 an input identified only by a
+     1.23:1 hairline is not identifiable at all. Decorative separators (card
+     edges, table rules, dividers) keep --throttle-color-border: they do not
+     identify a control, so the requirement does not apply and darkening
+     them would only add noise. */
+  /* The account dashboard paints nothing by default so it can drop into a
+     merchant's page without fighting their background. The accountSurface and
+     accountPadding appearance variables opt back into a card.
+     No backticks in this comment: the sheet is a TS template literal. */
+  --throttle-color-account-surface: transparent;
+  --throttle-account-padding: 0;
+  --throttle-color-border-control: #8b93a1;
   --throttle-color-danger: #c2321f;
   --throttle-color-danger-surface: #fef2f2;
   --throttle-color-danger-border: #fecaca;
@@ -745,6 +768,7 @@ var THROTTLE_STYLES = `
   --throttle-color-muted: #21262d;
   --throttle-color-muted-foreground: #9aa4b2;
   --throttle-color-border: #30363d;
+  --throttle-color-border-control: #5c6570;
   --throttle-color-danger: #ff6b58;
   --throttle-color-danger-surface: #2a1513;
   --throttle-color-danger-border: #5c2b25;
@@ -767,6 +791,7 @@ var THROTTLE_STYLES = `
     --throttle-color-muted: #21262d;
     --throttle-color-muted-foreground: #9aa4b2;
     --throttle-color-border: #30363d;
+    --throttle-color-border-control: #5c6570;
     --throttle-color-danger: #ff6b58;
     --throttle-color-danger-surface: #2a1513;
     --throttle-color-danger-border: #5c2b25;
@@ -814,7 +839,7 @@ var THROTTLE_STYLES = `
   font-size: var(--throttle-font-size);
   color: var(--throttle-color-foreground);
   background: var(--throttle-color-background);
-  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border: var(--throttle-border-width) solid var(--throttle-color-border-control);
   border-radius: var(--throttle-radius-sm);
   /* padding-block stays 0 so min-height alone owns the height, exactly as
      .throttle-button does. With 12px vertical padding the box computed to
@@ -838,7 +863,13 @@ var THROTTLE_STYLES = `
 /* Always mounted, so it reserves its line whether or not there is an error:
    an error appearing on submit must not push the submit button out from
    under the buyer's pointer. */
-.throttle-field__error { color: var(--throttle-color-danger); font-size: var(--throttle-font-size-xs); min-height: 1rem; line-height: 1rem; }
+.throttle-field__error { color: var(--throttle-color-danger); font-size: var(--throttle-font-size-xs); line-height: 1rem; }
+/* Reserved a full line under EVERY input even with nothing to say, which
+   with the stack gap put 28px of dead space beneath each field, on every
+   form and all seven account panels. The element stays mounted when empty
+   because role=alert only announces changes to a live region that was
+   already there; it just stops occupying a line. */
+.throttle-field__error:empty { display: none; }
 
 .throttle-field-group {
   display: flex;
@@ -869,7 +900,7 @@ var THROTTLE_STYLES = `
 .throttle-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary); }
 .throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: 100%; }
 .throttle-button--primary:hover:not(:disabled) { filter: brightness(0.92); }
-.throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border); }
+.throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border-control); }
 .throttle-button--secondary:hover:not(:disabled) { background: var(--throttle-color-muted); }
 .throttle-button--danger { background: transparent; color: var(--throttle-color-danger); border-color: var(--throttle-color-border); }
 .throttle-button--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--throttle-color-danger) 10%, transparent); }
@@ -897,6 +928,11 @@ var THROTTLE_STYLES = `
   animation: throttle-spin 700ms linear infinite;
 }
 @keyframes throttle-spin { to { transform: rotate(360deg); } }
+.throttle-button--loading { position: relative; }
+.throttle-button__label { display: inline-flex; align-items: center; justify-content: center; gap: var(--throttle-space-2); }
+.throttle-button__label--hidden { visibility: hidden; }
+.throttle-spinner--centred { position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.5em; }
+
 @media (prefers-reduced-motion: reduce) { .throttle-spinner { animation-duration: 2.4s; } }
 
 .throttle-skeleton {
@@ -979,7 +1015,9 @@ var THROTTLE_STYLES = `
 /* Paints its own ground. A UserButton in a navbar should stay transparent, but
    the dashboard is a large surface of themed text: in dark theme its foreground
    is near-white, so on a light host page it was rendering white-on-white. */
-.throttle-account-root { container-type: inline-size; background: var(--throttle-color-background); color: var(--throttle-color-foreground); }
+.throttle-cardframe { width: 100%; min-height: 420px; border: 0; display: block; }
+.throttle-centre { display: flex; align-items: center; justify-content: center; min-height: 160px; }
+.throttle-account-root { container-type: inline-size; background: var(--throttle-color-account-surface); color: var(--throttle-color-foreground); padding: var(--throttle-account-padding); }
 .throttle-account { display: flex; gap: var(--throttle-space-5); align-items: flex-start; }
 .throttle-account__content { flex: 1; min-width: 0; }
 .throttle-tabs__rail { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; }
@@ -1159,11 +1197,12 @@ function CardFooter(props) {
 
 // src/react/components/primitives/Spinner.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-function Spinner() {
+function Spinner({ centred } = {}) {
   const a = useAppearance();
   const Slot = a.slots.Spinner;
   if (Slot) return /* @__PURE__ */ jsx6(Slot, {});
-  return /* @__PURE__ */ jsx6("span", { ...a.el("spinner", "throttle-spinner"), "aria-hidden": "true" });
+  const cls = `throttle-spinner${centred ? " throttle-spinner--centred" : ""}`;
+  return /* @__PURE__ */ jsx6("span", { ...a.el("spinner", cls), "aria-hidden": "true" });
 }
 
 // src/react/components/primitives/Button.tsx
@@ -1172,7 +1211,7 @@ function Button({ variant = "primary", size = "default", elementKey, loading, ch
   const a = useAppearance();
   const Slot = a.slots.Button;
   if (Slot) return /* @__PURE__ */ jsx7(Slot, { variant, loading, ...rest, children });
-  const base = `throttle-button throttle-button--${variant}${size === "xs" ? " throttle-button--xs" : ""}`;
+  const base = `throttle-button throttle-button--${variant}${size === "xs" ? " throttle-button--xs" : ""}${loading ? " throttle-button--loading" : ""}`;
   return /* @__PURE__ */ jsxs2(
     "button",
     {
@@ -1180,9 +1219,10 @@ function Button({ variant = "primary", size = "default", elementKey, loading, ch
       ...rest,
       ...a.el(elementKey ?? "button", base),
       disabled: rest.disabled || loading,
+      "aria-busy": loading ? true : void 0,
       children: [
-        loading ? /* @__PURE__ */ jsx7(Spinner, {}) : null,
-        children
+        loading ? /* @__PURE__ */ jsx7(Spinner, { centred: true }) : null,
+        /* @__PURE__ */ jsx7("span", { className: `throttle-button__label${loading ? " throttle-button__label--hidden" : ""}`, children })
       ]
     }
   );
@@ -1292,14 +1332,14 @@ function Modal(props) {
         e.preventDefault();
         return;
       }
-      const first = items[0];
+      const first2 = items[0];
       const last = items[items.length - 1];
-      if (e.shiftKey && document.activeElement === first) {
+      if (e.shiftKey && document.activeElement === first2) {
         e.preventDefault();
         last.focus();
       } else if (!e.shiftKey && document.activeElement === last) {
         e.preventDefault();
-        first.focus();
+        first2.focus();
       }
     };
     document.addEventListener("keydown", onKeyDown);
@@ -2105,10 +2145,10 @@ function AuthModal(props) {
 }
 
 // src/react/components/account/AccountModal.tsx
-import { useId as useId5 } from "react";
+import { useId as useId6 } from "react";
 
 // src/react/components/account/AccountDashboard.tsx
-import { useEffect as useEffect8, useId as useId4, useState as useState18 } from "react";
+import { useEffect as useEffect9, useId as useId5, useState as useState20 } from "react";
 
 // src/react/components/account/VerifyEmailBanner.tsx
 import { useState as useState11 } from "react";
@@ -2224,7 +2264,7 @@ var ACCOUNT_ICONS = {
 };
 
 // src/react/components/account/ProfilePanel.tsx
-import { useEffect as useEffect6, useState as useState12 } from "react";
+import { useEffect as useEffect6, useState as useState12, useRef as useRef5 } from "react";
 
 // src/react/components/account/PanelState.tsx
 import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -2260,16 +2300,16 @@ function ProfilePanel(props) {
   const { status } = useAuth();
   const resource = useCustomer();
   const { submitting, error, notice, run } = useAction();
-  const [form, setForm] = useState12({ firstName: "", lastName: "", phone: "", company: "", acceptsMarketing: false });
+  const [form, setForm] = useState12({ firstName: "", lastName: "", phone: "", company: "" });
+  const edited = useRef5(false);
   useEffect6(() => {
     const c = resource.data;
-    if (!c) return;
+    if (!c || edited.current) return;
     setForm({
       firstName: c.firstName ?? "",
       lastName: c.lastName ?? "",
       phone: c.phone ?? "",
-      company: c.company ?? "",
-      acceptsMarketing: Boolean(c.acceptsMarketing)
+      company: c.company ?? ""
     });
   }, [resource.data]);
   if (status === "unauthenticated") return null;
@@ -2287,12 +2327,12 @@ function ProfilePanel(props) {
           onSubmit: (e) => {
             e.preventDefault();
             void run(async () => {
+              edited.current = false;
               await resource.update({
                 firstName: form.firstName,
                 lastName: form.lastName,
                 phone: form.phone,
-                company: form.company || null,
-                acceptsMarketing: form.acceptsMarketing
+                company: form.company || null
               });
               return t.profile.savedNotice;
             });
@@ -2316,7 +2356,10 @@ function ProfilePanel(props) {
                 label: t.profile.firstName,
                 value: form.firstName,
                 autoComplete: "given-name",
-                onChange: (v) => setForm((f) => ({ ...f, firstName: v }))
+                onChange: (v) => {
+                  edited.current = true;
+                  setForm((f) => ({ ...f, firstName: v }));
+                }
               }
             ),
             /* @__PURE__ */ jsx29(
@@ -2325,7 +2368,10 @@ function ProfilePanel(props) {
                 label: t.profile.lastName,
                 value: form.lastName,
                 autoComplete: "family-name",
-                onChange: (v) => setForm((f) => ({ ...f, lastName: v }))
+                onChange: (v) => {
+                  edited.current = true;
+                  setForm((f) => ({ ...f, lastName: v }));
+                }
               }
             ),
             /* @__PURE__ */ jsx29(
@@ -2335,7 +2381,10 @@ function ProfilePanel(props) {
                 type: "tel",
                 value: form.phone,
                 autoComplete: "tel",
-                onChange: (v) => setForm((f) => ({ ...f, phone: v }))
+                onChange: (v) => {
+                  edited.current = true;
+                  setForm((f) => ({ ...f, phone: v }));
+                }
               }
             ),
             /* @__PURE__ */ jsx29(
@@ -2344,20 +2393,12 @@ function ProfilePanel(props) {
                 label: t.profile.company,
                 value: form.company,
                 autoComplete: "organization",
-                onChange: (v) => setForm((f) => ({ ...f, company: v }))
+                onChange: (v) => {
+                  edited.current = true;
+                  setForm((f) => ({ ...f, company: v }));
+                }
               }
             ),
-            /* @__PURE__ */ jsxs20("label", { className: "throttle-row", children: [
-              /* @__PURE__ */ jsx29(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: form.acceptsMarketing,
-                  onChange: (e) => setForm((f) => ({ ...f, acceptsMarketing: e.target.checked }))
-                }
-              ),
-              /* @__PURE__ */ jsx29("span", { children: t.profile.acceptsMarketing })
-            ] }),
             error ? /* @__PURE__ */ jsx29(Alert, { tone: "error", children: error }) : null,
             notice ? /* @__PURE__ */ jsx29(Alert, { tone: "success", children: notice }) : null,
             /* @__PURE__ */ jsx29(Button, { type: "submit", loading: submitting, elementKey: "profilePanel.submitButton", children: t.profile.saveButton })
@@ -2510,7 +2551,7 @@ function AddressesPanel(props) {
         })
       }
     ) : /* @__PURE__ */ jsxs22(Fragment5, { children: [
-      /* @__PURE__ */ jsx31(Button, { elementKey: "addressesPanel.addButton", variant: "secondary", onClick: () => setEditing("new"), children: t.addresses.addButton }),
+      /* @__PURE__ */ jsx31("div", { children: /* @__PURE__ */ jsx31(Button, { elementKey: "addressesPanel.addButton", variant: "secondary", onClick: () => setEditing("new"), children: t.addresses.addButton }) }),
       /* @__PURE__ */ jsx31(
         PanelState,
         {
@@ -2617,7 +2658,102 @@ function AddressesPanel(props) {
 }
 
 // src/react/components/account/PaymentMethodsPanel.tsx
+import { useState as useState16 } from "react";
+
+// src/react/components/account/AddCardDialog.tsx
+import { useEffect as useEffect7, useId as useId4, useRef as useRef6, useState as useState15 } from "react";
 import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+function AddCardDialog(props) {
+  const { account } = useAuth();
+  const titleId = useId4();
+  const { t } = useCopy(props.localization);
+  const [src, setSrc] = useState15(null);
+  const [error, setError] = useState15(null);
+  const [busy, setBusy] = useState15(false);
+  const onAdded = useRef6(props.onAdded);
+  const onClose = useRef6(props.onClose);
+  onAdded.current = props.onAdded;
+  onClose.current = props.onClose;
+  useEffect7(() => {
+    if (!props.open) {
+      setSrc(null);
+      setError(null);
+      return;
+    }
+    let live = true;
+    setError(null);
+    account.startCardSetup().then(
+      (session) => {
+        if (!live) return;
+        let url = session.embedUrl;
+        try {
+          const u = new URL(session.embedUrl, window.location.origin);
+          u.searchParams.set("parentOrigin", window.location.origin);
+          url = u.toString();
+        } catch {
+        }
+        setSrc(url);
+      },
+      (err) => {
+        if (live) setError(messageForError(err));
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [props.open, account]);
+  useEffect7(() => {
+    if (!src) return;
+    const frameOrigin = (() => {
+      try {
+        return new URL(src).origin;
+      } catch {
+        return null;
+      }
+    })();
+    if (!frameOrigin) return;
+    async function onMessage(event) {
+      if (event.origin !== frameOrigin) return;
+      const data = event.data;
+      if (!data || typeof data.type !== "string") return;
+      if (data.type === "throttle.completed" && data.paymentId) {
+        setBusy(true);
+        try {
+          await account.confirmCardSetup(data.paymentId);
+          onAdded.current();
+          onClose.current();
+        } catch (err) {
+          setError(messageForError(err));
+        } finally {
+          setBusy(false);
+        }
+      } else if (data.type === "throttle.error") {
+        setError(data.message || t.common.somethingWentWrong);
+      } else if (data.type === "throttle.cancelled") {
+        onClose.current();
+      }
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [src, account, t]);
+  if (!props.open) return null;
+  return /* @__PURE__ */ jsxs23(Modal, { open: true, onClose: props.onClose, labelledBy: titleId, children: [
+    /* @__PURE__ */ jsx32("h2", { id: titleId, children: t.paymentMethods.addTitle }),
+    error ? /* @__PURE__ */ jsx32(Alert, { tone: "error", children: error }) : null,
+    busy ? /* @__PURE__ */ jsx32("div", { className: "throttle-centre", children: /* @__PURE__ */ jsx32(Spinner, {}) }) : src ? /* @__PURE__ */ jsx32(
+      "iframe",
+      {
+        className: "throttle-cardframe",
+        src,
+        title: t.paymentMethods.addTitle,
+        sandbox: "allow-scripts allow-forms allow-same-origin"
+      }
+    ) : !error ? /* @__PURE__ */ jsx32("div", { className: "throttle-centre", children: /* @__PURE__ */ jsx32(Spinner, {}) }) : null
+  ] });
+}
+
+// src/react/components/account/PaymentMethodsPanel.tsx
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 function PaymentMethodsPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -2625,6 +2761,7 @@ function PaymentMethodsPanel(props) {
   const { emailVerified } = useAuth();
   const resource = useSavedCards();
   const { submitting, error, run } = useAction();
+  const [adding, setAdding] = useState16(false);
   const variant = props.variant ?? "rows";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
@@ -2632,9 +2769,21 @@ function PaymentMethodsPanel(props) {
   const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
   const cardLabel = (card) => `${(card.cardBrand ?? card.methodType).toUpperCase()} \u2022\u2022\u2022\u2022 ${card.cardLastFour ?? "____"}`;
   const expiryLabel = (card) => card.cardExpMonth && card.cardExpYear ? `${String(card.cardExpMonth).padStart(2, "0")}/${card.cardExpYear}` : "";
-  return /* @__PURE__ */ jsx32(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx32("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs23("div", { ...a.el("paymentMethodsPanel.root", "throttle-panel"), children: [
-    error ? /* @__PURE__ */ jsx32(Alert, { tone: "error", children: error }) : null,
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx33("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs24("div", { ...a.el("paymentMethodsPanel.root", "throttle-panel"), children: [
+    error ? /* @__PURE__ */ jsx33(Alert, { tone: "error", children: error }) : null,
+    emailVerified ? /* @__PURE__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(Button, { elementKey: "paymentMethodsPanel.addButton", variant: "secondary", onClick: () => setAdding(true), children: t.paymentMethods.addButton }) }) : null,
+    /* @__PURE__ */ jsx33(
+      AddCardDialog,
+      {
+        open: adding,
+        onClose: () => setAdding(false),
+        onAdded: () => {
+          void resource.refetch();
+        },
+        localization: props.localization
+      }
+    ),
+    /* @__PURE__ */ jsx33(
       PanelState,
       {
         resource,
@@ -2643,7 +2792,7 @@ function PaymentMethodsPanel(props) {
         isEmpty: (rows) => rows.length === 0,
         emptyTitle: t.paymentMethods.empty,
         emptyDescription: t.paymentMethods.emptyDescription,
-        children: (rows) => variant === "table" ? /* @__PURE__ */ jsx32(
+        children: (rows) => variant === "table" ? /* @__PURE__ */ jsx33(
           DataTable,
           {
             tableKey: "paymentMethodsPanel.table",
@@ -2653,9 +2802,9 @@ function PaymentMethodsPanel(props) {
             columns: [
               { key: "card", label: t.paymentMethods.columnCard, render: (card) => cardLabel(card) },
               { key: "expires", label: t.paymentMethods.expires, render: (card) => expiryLabel(card) },
-              { key: "default", label: t.paymentMethods.defaultBadge, render: (card) => card.isDefault ? /* @__PURE__ */ jsx32(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null },
-              { key: "actions", label: t.common.actions, render: (card) => /* @__PURE__ */ jsxs23("div", { className: "throttle-actions", children: [
-                !card.isDefault ? /* @__PURE__ */ jsx32(
+              { key: "default", label: t.paymentMethods.defaultBadge, render: (card) => card.isDefault ? /* @__PURE__ */ jsx33(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null },
+              { key: "actions", label: t.common.actions, render: (card) => /* @__PURE__ */ jsxs24("div", { className: "throttle-actions", children: [
+                !card.isDefault ? /* @__PURE__ */ jsx33(
                   Button,
                   {
                     variant: "secondary",
@@ -2665,7 +2814,7 @@ function PaymentMethodsPanel(props) {
                     children: t.paymentMethods.makeDefault
                   }
                 ) : null,
-                /* @__PURE__ */ jsx32(
+                /* @__PURE__ */ jsx33(
                   Button,
                   {
                     variant: "danger",
@@ -2681,13 +2830,13 @@ function PaymentMethodsPanel(props) {
               ] }) }
             ]
           }
-        ) : /* @__PURE__ */ jsx32("div", { ...a.el("paymentMethodsPanel.list", listBase), children: rows.map((card) => /* @__PURE__ */ jsxs23("div", { ...a.el("paymentMethodsPanel.item", itemBase), children: [
-          /* @__PURE__ */ jsxs23("div", { children: [
-            /* @__PURE__ */ jsxs23("div", { className: "throttle-row", children: [
-              /* @__PURE__ */ jsx32("strong", { children: cardLabel(card) }),
-              card.isDefault ? /* @__PURE__ */ jsx32(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null
+        ) : /* @__PURE__ */ jsx33("div", { ...a.el("paymentMethodsPanel.list", listBase), children: rows.map((card) => /* @__PURE__ */ jsxs24("div", { ...a.el("paymentMethodsPanel.item", itemBase), children: [
+          /* @__PURE__ */ jsxs24("div", { children: [
+            /* @__PURE__ */ jsxs24("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ jsx33("strong", { children: cardLabel(card) }),
+              card.isDefault ? /* @__PURE__ */ jsx33(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null
             ] }),
-            card.cardExpMonth && card.cardExpYear ? /* @__PURE__ */ jsxs23("p", { className: "throttle-muted", children: [
+            card.cardExpMonth && card.cardExpYear ? /* @__PURE__ */ jsxs24("p", { className: "throttle-muted", children: [
               t.paymentMethods.expires,
               " ",
               String(card.cardExpMonth).padStart(2, "0"),
@@ -2695,8 +2844,8 @@ function PaymentMethodsPanel(props) {
               card.cardExpYear
             ] }) : null
           ] }),
-          /* @__PURE__ */ jsxs23("div", { className: "throttle-actions", children: [
-            !card.isDefault ? /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsxs24("div", { className: "throttle-actions", children: [
+            !card.isDefault ? /* @__PURE__ */ jsx33(
               Button,
               {
                 variant: actionVariant("secondary"),
@@ -2706,7 +2855,7 @@ function PaymentMethodsPanel(props) {
                 children: t.paymentMethods.makeDefault
               }
             ) : null,
-            /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx33(
               Button,
               {
                 variant: actionVariant("danger"),
@@ -2727,7 +2876,7 @@ function PaymentMethodsPanel(props) {
 }
 
 // src/react/components/account/OrdersPanel.tsx
-import { useState as useState15 } from "react";
+import { useState as useState17 } from "react";
 
 // src/react/components/format.ts
 function formatMoney(minorUnits, currency, locale) {
@@ -2759,7 +2908,7 @@ function formatDate(value, locale) {
 }
 
 // src/react/components/account/OrderStatus.tsx
-import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
 function copyKey(wire) {
   return wire.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
 }
@@ -2767,25 +2916,25 @@ var ATTENTION_PAYMENT_STATES = /* @__PURE__ */ new Set(["pending", "failed", "di
 var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["cancelled", "closed", "void", "expired", "voided"]);
 function StatusBadge(props) {
   const label = props.labels[copyKey(props.status)] ?? props.status.replace(/_/g, " ");
-  return /* @__PURE__ */ jsx33(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: label });
+  return /* @__PURE__ */ jsx34(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: label });
 }
 function OrderStatus(props) {
   const labels = props.t.orders.statusLabels;
   const payLabels = props.t.orders.paymentLabels;
   const lifecycle = labels[copyKey(props.status)] ?? props.status.replace(/_/g, " ");
   const money = props.paymentStatus ? payLabels[copyKey(props.paymentStatus)] : void 0;
-  return /* @__PURE__ */ jsxs24(Fragment6, { children: [
-    /* @__PURE__ */ jsx33(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: lifecycle }),
-    money ? /* @__PURE__ */ jsx33(Badge, { tone: ATTENTION_PAYMENT_STATES.has(props.paymentStatus) ? "warning" : "neutral", children: money }) : null
+  return /* @__PURE__ */ jsxs25(Fragment6, { children: [
+    /* @__PURE__ */ jsx34(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: lifecycle }),
+    money ? /* @__PURE__ */ jsx34(Badge, { tone: ATTENTION_PAYMENT_STATES.has(props.paymentStatus) ? "warning" : "neutral", children: money }) : null
   ] });
 }
 
 // src/react/components/account/OrderDetail.tsx
-import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
 function Line(props) {
-  return /* @__PURE__ */ jsxs25("div", { className: "throttle-row", children: [
-    /* @__PURE__ */ jsx34("span", { className: "throttle-muted", children: props.label }),
-    /* @__PURE__ */ jsx34("span", { children: props.value })
+  return /* @__PURE__ */ jsxs26("div", { className: "throttle-row", children: [
+    /* @__PURE__ */ jsx35("span", { className: "throttle-muted", children: props.label }),
+    /* @__PURE__ */ jsx35("span", { children: props.value })
   ] });
 }
 function OrderDetail(props) {
@@ -2793,27 +2942,35 @@ function OrderDetail(props) {
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t, locale } = useCopy(props.localization);
   const resource = useOrder(props.orderId);
-  return /* @__PURE__ */ jsx34(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx34("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs25("div", { ...a.el("orderDetail.root", "throttle-panel"), children: [
-    props.onBack ? /* @__PURE__ */ jsx34(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) : null,
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx35("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs26("div", { ...a.el("orderDetail.root", "throttle-panel"), children: [
+    props.onBack ? (
+      // Wrapped on purpose. The panel is a column flex container, so a
+      // direct child stretches to its full width however `width: auto`
+      // the link variant is — the control rendered 748px wide with a
+      // centred label. The wrapper takes the stretch; the button keeps
+      // its own width. A CSS fix would need a compound selector, and
+      // those outrank the merchant overrides in `appearance.elements`.
+      /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) })
+    ) : null,
+    /* @__PURE__ */ jsx35(
       PanelState,
       {
         resource,
         isEmpty: (o) => o === null,
         emptyTitle: t.orders.empty,
         skeletonRows: 5,
-        children: (order) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
-          /* @__PURE__ */ jsxs25("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ jsx34("h3", { children: order.orderNumber }),
-            /* @__PURE__ */ jsx34(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
+        children: (order) => /* @__PURE__ */ jsxs26(Fragment7, { children: [
+          /* @__PURE__ */ jsxs26("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ jsx35("h3", { children: order.orderNumber }),
+            /* @__PURE__ */ jsx35(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
           ] }),
-          /* @__PURE__ */ jsx34("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) }),
-          /* @__PURE__ */ jsx34("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ jsxs25("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
-            item.imageUrl ? /* @__PURE__ */ jsx34("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
-            /* @__PURE__ */ jsxs25("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx34("strong", { children: item.name }),
-              item.description ? /* @__PURE__ */ jsx34("p", { className: "throttle-muted", children: item.description }) : null,
-              /* @__PURE__ */ jsxs25("p", { className: "throttle-muted", children: [
+          /* @__PURE__ */ jsx35("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) }),
+          /* @__PURE__ */ jsx35("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ jsxs26("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
+            item.imageUrl ? /* @__PURE__ */ jsx35("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
+            /* @__PURE__ */ jsxs26("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx35("strong", { children: item.name }),
+              item.description ? /* @__PURE__ */ jsx35("p", { className: "throttle-muted", children: item.description }) : null,
+              /* @__PURE__ */ jsxs26("p", { className: "throttle-muted", children: [
                 t.orders.quantity,
                 " ",
                 item.quantity,
@@ -2821,16 +2978,16 @@ function OrderDetail(props) {
                 formatMoney(item.unitPrice, order.currency, locale)
               ] })
             ] }),
-            /* @__PURE__ */ jsx34("span", { children: formatMoney(item.total, order.currency, locale) })
+            /* @__PURE__ */ jsx35("span", { children: formatMoney(item.total, order.currency, locale) })
           ] }, item.id)) }),
-          /* @__PURE__ */ jsxs25("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
-            /* @__PURE__ */ jsx34(Line, { label: t.orders.subtotal, value: formatMoney(order.subtotal, order.currency, locale) }),
-            order.discountTotal ? /* @__PURE__ */ jsx34(Line, { label: t.orders.discount, value: formatMoney(-order.discountTotal, order.currency, locale) }) : null,
-            /* @__PURE__ */ jsx34(Line, { label: t.orders.shipping, value: formatMoney(order.shippingTotal, order.currency, locale) }),
-            /* @__PURE__ */ jsx34(Line, { label: t.orders.tax, value: formatMoney(order.taxTotal, order.currency, locale) }),
-            /* @__PURE__ */ jsx34(Line, { label: t.orders.total, value: formatMoney(order.total, order.currency, locale) })
+          /* @__PURE__ */ jsxs26("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
+            /* @__PURE__ */ jsx35(Line, { label: t.orders.subtotal, value: formatMoney(order.subtotal, order.currency, locale) }),
+            order.discountTotal ? /* @__PURE__ */ jsx35(Line, { label: t.orders.discount, value: formatMoney(-order.discountTotal, order.currency, locale) }) : null,
+            /* @__PURE__ */ jsx35(Line, { label: t.orders.shipping, value: formatMoney(order.shippingTotal, order.currency, locale) }),
+            /* @__PURE__ */ jsx35(Line, { label: t.orders.tax, value: formatMoney(order.taxTotal, order.currency, locale) }),
+            /* @__PURE__ */ jsx35(Line, { label: t.orders.total, value: formatMoney(order.total, order.currency, locale) })
           ] }),
-          order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ jsx34(Button, { variant: "secondary", onClick: () => props.onViewSubscription(order.subscriptionId), children: t.orders.viewSubscription }) : null
+          order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ jsx35(Button, { variant: "secondary", onClick: () => props.onViewSubscription(order.subscriptionId), children: t.orders.viewSubscription }) : null
         ] })
       }
     )
@@ -2838,20 +2995,20 @@ function OrderDetail(props) {
 }
 
 // src/react/components/account/OrdersPanel.tsx
-import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 function OrdersPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t, locale } = useCopy(props.localization);
   const { emailVerified } = useAuth();
   const resource = useOrders();
-  const [openId, setOpenId] = useState15(null);
+  const [openId, setOpenId] = useState17(null);
   const variant = props.variant ?? "table";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
   const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
   if (openId) {
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(
       OrderDetail,
       {
         orderId: openId,
@@ -2862,7 +3019,7 @@ function OrdersPanel(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx35(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx35("div", { ...a.rootProps, children: /* @__PURE__ */ jsx35("div", { ...a.el("ordersPanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx36("div", { ...a.rootProps, children: /* @__PURE__ */ jsx36("div", { ...a.el("ordersPanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx36(
     PanelState,
     {
       resource,
@@ -2871,7 +3028,7 @@ function OrdersPanel(props) {
       isEmpty: (rows) => rows.length === 0,
       emptyTitle: t.orders.empty,
       emptyDescription: t.orders.emptyDescription,
-      children: (rows) => variant === "table" ? /* @__PURE__ */ jsx35(
+      children: (rows) => variant === "table" ? /* @__PURE__ */ jsx36(
         DataTable,
         {
           tableKey: "ordersPanel.table",
@@ -2885,25 +3042,25 @@ function OrdersPanel(props) {
             {
               key: "status",
               label: t.orders.status,
-              render: (o) => /* @__PURE__ */ jsx35(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
+              render: (o) => /* @__PURE__ */ jsx36(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
             },
             {
               key: "total",
               label: t.orders.total,
-              render: (o) => /* @__PURE__ */ jsx35("span", { className: "throttle-table__money", children: formatMoney(o.total, o.currency, locale) })
+              render: (o) => /* @__PURE__ */ jsx36("span", { className: "throttle-table__money", children: formatMoney(o.total, o.currency, locale) })
             }
           ]
         }
-      ) : /* @__PURE__ */ jsx35("div", { ...a.el("ordersPanel.list", listBase), children: rows.map((o) => /* @__PURE__ */ jsxs26("div", { ...a.el("ordersPanel.item", itemBase), children: [
-        /* @__PURE__ */ jsxs26("div", { children: [
-          /* @__PURE__ */ jsxs26("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ jsx35("strong", { children: o.orderNumber }),
-            /* @__PURE__ */ jsx35(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
+      ) : /* @__PURE__ */ jsx36("div", { ...a.el("ordersPanel.list", listBase), children: rows.map((o) => /* @__PURE__ */ jsxs27("div", { ...a.el("ordersPanel.item", itemBase), children: [
+        /* @__PURE__ */ jsxs27("div", { children: [
+          /* @__PURE__ */ jsxs27("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ jsx36("strong", { children: o.orderNumber }),
+            /* @__PURE__ */ jsx36(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
           ] }),
-          /* @__PURE__ */ jsx35("p", { className: "throttle-muted", children: formatDate(o.createdAt, locale) }),
-          /* @__PURE__ */ jsx35("p", { className: "throttle-muted", children: formatMoney(o.total, o.currency, locale) })
+          /* @__PURE__ */ jsx36("p", { className: "throttle-muted", children: formatDate(o.createdAt, locale) }),
+          /* @__PURE__ */ jsx36("p", { className: "throttle-muted", children: formatMoney(o.total, o.currency, locale) })
         ] }),
-        /* @__PURE__ */ jsx35("div", { className: "throttle-actions", children: /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx36("div", { className: "throttle-actions", children: /* @__PURE__ */ jsx36(
           Button,
           {
             variant: rowsVariant ? "link" : "secondary",
@@ -2918,14 +3075,14 @@ function OrdersPanel(props) {
 }
 
 // src/react/components/account/InvoicesPanel.tsx
-import { useState as useState16 } from "react";
+import { useState as useState18 } from "react";
 
 // src/react/components/account/InvoiceDetail.tsx
-import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
 function Line2(props) {
-  return /* @__PURE__ */ jsxs27("div", { className: "throttle-row", children: [
-    /* @__PURE__ */ jsx36("span", { className: "throttle-muted", children: props.label }),
-    /* @__PURE__ */ jsx36("span", { children: props.value })
+  return /* @__PURE__ */ jsxs28("div", { className: "throttle-row", children: [
+    /* @__PURE__ */ jsx37("span", { className: "throttle-muted", children: props.label }),
+    /* @__PURE__ */ jsx37("span", { children: props.value })
   ] });
 }
 function InvoiceDetail(props) {
@@ -2935,25 +3092,33 @@ function InvoiceDetail(props) {
   const { account } = useAuth();
   const resource = useInvoice(props.invoiceId);
   const { submitting, error, run } = useAction();
-  return /* @__PURE__ */ jsx36(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx36("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs27("div", { ...a.el("invoiceDetail.root", "throttle-panel"), children: [
-    props.onBack ? /* @__PURE__ */ jsx36(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) : null,
-    /* @__PURE__ */ jsx36(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => /* @__PURE__ */ jsxs27(Fragment8, { children: [
-      /* @__PURE__ */ jsxs27("div", { className: "throttle-row", children: [
-        /* @__PURE__ */ jsx36("h3", { children: invoice.number }),
-        /* @__PURE__ */ jsx36(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
+  return /* @__PURE__ */ jsx37(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx37("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs28("div", { ...a.el("invoiceDetail.root", "throttle-panel"), children: [
+    props.onBack ? (
+      // Wrapped on purpose. The panel is a column flex container, so a
+      // direct child stretches to its full width however `width: auto`
+      // the link variant is — the control rendered 748px wide with a
+      // centred label. The wrapper takes the stretch; the button keeps
+      // its own width. A CSS fix would need a compound selector, and
+      // those outrank the merchant overrides in `appearance.elements`.
+      /* @__PURE__ */ jsx37("div", { children: /* @__PURE__ */ jsx37(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) })
+    ) : null,
+    /* @__PURE__ */ jsx37(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => /* @__PURE__ */ jsxs28(Fragment8, { children: [
+      /* @__PURE__ */ jsxs28("div", { className: "throttle-row", children: [
+        /* @__PURE__ */ jsx37("h3", { children: invoice.number }),
+        /* @__PURE__ */ jsx37(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
       ] }),
-      /* @__PURE__ */ jsxs27("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
-        /* @__PURE__ */ jsx36(Line2, { label: t.invoices.issued, value: formatDate(invoice.issuedAt, locale) }),
-        invoice.dueAt ? /* @__PURE__ */ jsx36(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
-        invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsxs28("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
+        /* @__PURE__ */ jsx37(Line2, { label: t.invoices.issued, value: formatDate(invoice.issuedAt, locale) }),
+        invoice.dueAt ? /* @__PURE__ */ jsx37(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
+        invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ jsx37(
           Line2,
           {
             label: t.invoices.period,
             value: `${formatDate(invoice.periodStart, locale)} \u2013 ${formatDate(invoice.periodEnd, locale)}`
           }
         ) : null,
-        /* @__PURE__ */ jsx36(Line2, { label: t.invoices.total, value: formatMoney(invoice.total, invoice.currency, locale) }),
-        invoice.amountRefunded ? /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(Line2, { label: t.invoices.total, value: formatMoney(invoice.total, invoice.currency, locale) }),
+        invoice.amountRefunded ? /* @__PURE__ */ jsx37(
           Line2,
           {
             label: t.invoices.refunded,
@@ -2961,8 +3126,8 @@ function InvoiceDetail(props) {
           }
         ) : null
       ] }),
-      error ? /* @__PURE__ */ jsx36(Alert, { tone: "error", children: error }) : null,
-      /* @__PURE__ */ jsx36(
+      error ? /* @__PURE__ */ jsx37(Alert, { tone: "error", children: error }) : null,
+      /* @__PURE__ */ jsx37(
         Button,
         {
           variant: "secondary",
@@ -2981,20 +3146,20 @@ function InvoiceDetail(props) {
 }
 
 // src/react/components/account/InvoicesPanel.tsx
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
 function InvoicesPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t, locale } = useCopy(props.localization);
   const { emailVerified } = useAuth();
   const resource = useInvoices();
-  const [openId, setOpenId] = useState16(null);
+  const [openId, setOpenId] = useState18(null);
   const variant = props.variant ?? "table";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
   const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
   if (openId) {
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx38(
       InvoiceDetail,
       {
         invoiceId: openId,
@@ -3004,7 +3169,7 @@ function InvoicesPanel(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx37(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx37("div", { ...a.rootProps, children: /* @__PURE__ */ jsx37("div", { ...a.el("invoicesPanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx38("div", { ...a.rootProps, children: /* @__PURE__ */ jsx38("div", { ...a.el("invoicesPanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx38(
     PanelState,
     {
       resource,
@@ -3013,7 +3178,7 @@ function InvoicesPanel(props) {
       isEmpty: (rows) => rows.length === 0,
       emptyTitle: t.invoices.empty,
       emptyDescription: t.invoices.emptyDescription,
-      children: (rows) => variant === "table" ? /* @__PURE__ */ jsx37(
+      children: (rows) => variant === "table" ? /* @__PURE__ */ jsx38(
         DataTable,
         {
           tableKey: "invoicesPanel.table",
@@ -3024,24 +3189,24 @@ function InvoicesPanel(props) {
           columns: [
             { key: "number", label: t.invoices.number },
             { key: "issuedAt", label: t.invoices.issued, render: (i) => formatDate(i.issuedAt, locale) },
-            { key: "status", label: t.invoices.status, render: (i) => /* @__PURE__ */ jsx37(StatusBadge, { status: i.status, labels: t.invoices.statusLabels }) },
+            { key: "status", label: t.invoices.status, render: (i) => /* @__PURE__ */ jsx38(StatusBadge, { status: i.status, labels: t.invoices.statusLabels }) },
             {
               key: "total",
               label: t.invoices.total,
-              render: (i) => /* @__PURE__ */ jsx37("span", { className: "throttle-table__money", children: formatMoney(i.total, i.currency, locale) })
+              render: (i) => /* @__PURE__ */ jsx38("span", { className: "throttle-table__money", children: formatMoney(i.total, i.currency, locale) })
             }
           ]
         }
-      ) : /* @__PURE__ */ jsx37("div", { ...a.el("invoicesPanel.list", listBase), children: rows.map((i) => /* @__PURE__ */ jsxs28("div", { ...a.el("invoicesPanel.item", itemBase), children: [
-        /* @__PURE__ */ jsxs28("div", { children: [
-          /* @__PURE__ */ jsxs28("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ jsx37("strong", { children: i.number }),
-            /* @__PURE__ */ jsx37(StatusBadge, { status: i.status, labels: t.invoices.statusLabels })
+      ) : /* @__PURE__ */ jsx38("div", { ...a.el("invoicesPanel.list", listBase), children: rows.map((i) => /* @__PURE__ */ jsxs29("div", { ...a.el("invoicesPanel.item", itemBase), children: [
+        /* @__PURE__ */ jsxs29("div", { children: [
+          /* @__PURE__ */ jsxs29("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ jsx38("strong", { children: i.number }),
+            /* @__PURE__ */ jsx38(StatusBadge, { status: i.status, labels: t.invoices.statusLabels })
           ] }),
-          /* @__PURE__ */ jsx37("p", { className: "throttle-muted", children: formatDate(i.issuedAt, locale) }),
-          /* @__PURE__ */ jsx37("p", { className: "throttle-muted", children: formatMoney(i.total, i.currency, locale) })
+          /* @__PURE__ */ jsx38("p", { className: "throttle-muted", children: formatDate(i.issuedAt, locale) }),
+          /* @__PURE__ */ jsx38("p", { className: "throttle-muted", children: formatMoney(i.total, i.currency, locale) })
         ] }),
-        /* @__PURE__ */ jsx37("div", { className: "throttle-actions", children: /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38("div", { className: "throttle-actions", children: /* @__PURE__ */ jsx38(
           Button,
           {
             variant: rowsVariant ? "link" : "secondary",
@@ -3056,7 +3221,7 @@ function InvoicesPanel(props) {
 }
 
 // src/react/components/account/SubscriptionsPanel.tsx
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 var CAN_PAUSE = /* @__PURE__ */ new Set(["active", "trialing"]);
 var CAN_RESUME = /* @__PURE__ */ new Set(["paused"]);
 var CAN_CANCEL = /* @__PURE__ */ new Set(["active", "trialing", "paused", "past_due", "unpaid"]);
@@ -3078,8 +3243,8 @@ function SubscriptionsPanel(props) {
   };
   const priceLabel = (sub) => `${formatMoney(sub.amount, sub.currency, locale)} / ${sub.interval}${sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""}`;
   const renewsLabel = (sub) => formatDate(sub.status === "cancelled" ? sub.cancelledAt ?? sub.currentPeriodEnd : sub.currentPeriodEnd, locale);
-  const lifecycleActions = (sub, variantFor) => /* @__PURE__ */ jsxs29("div", { className: "throttle-actions", children: [
-    CAN_PAUSE.has(sub.status) ? /* @__PURE__ */ jsx38(
+  const lifecycleActions = (sub, variantFor) => /* @__PURE__ */ jsxs30("div", { className: "throttle-actions", children: [
+    CAN_PAUSE.has(sub.status) ? /* @__PURE__ */ jsx39(
       Button,
       {
         variant: variantFor("secondary"),
@@ -3089,7 +3254,7 @@ function SubscriptionsPanel(props) {
         children: t.subscriptions.pauseButton
       }
     ) : null,
-    CAN_RESUME.has(sub.status) ? /* @__PURE__ */ jsx38(
+    CAN_RESUME.has(sub.status) ? /* @__PURE__ */ jsx39(
       Button,
       {
         variant: variantFor("secondary"),
@@ -3099,7 +3264,7 @@ function SubscriptionsPanel(props) {
         children: t.subscriptions.resumeButton
       }
     ) : null,
-    CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx38(
+    CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx39(
       Button,
       {
         variant: variantFor("secondary"),
@@ -3109,7 +3274,7 @@ function SubscriptionsPanel(props) {
         children: t.subscriptions.cancelAtPeriodEnd
       }
     ) : null,
-    CAN_CANCEL.has(sub.status) ? /* @__PURE__ */ jsx38(
+    CAN_CANCEL.has(sub.status) ? /* @__PURE__ */ jsx39(
       Button,
       {
         variant: variantFor("danger"),
@@ -3120,9 +3285,9 @@ function SubscriptionsPanel(props) {
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsx38(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx38("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs29("div", { ...a.el("subscriptionsPanel.root", "throttle-panel"), children: [
-    error ? /* @__PURE__ */ jsx38(Alert, { tone: "error", children: error }) : null,
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx39("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs30("div", { ...a.el("subscriptionsPanel.root", "throttle-panel"), children: [
+    error ? /* @__PURE__ */ jsx39(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ jsx39(
       PanelState,
       {
         resource,
@@ -3131,7 +3296,7 @@ function SubscriptionsPanel(props) {
         isEmpty: (rows) => rows.length === 0,
         emptyTitle: t.subscriptions.empty,
         emptyDescription: t.subscriptions.emptyDescription,
-        children: (rows) => variant === "table" ? /* @__PURE__ */ jsx38(
+        children: (rows) => variant === "table" ? /* @__PURE__ */ jsx39(
           DataTable,
           {
             tableKey: "subscriptionsPanel.table",
@@ -3140,42 +3305,42 @@ function SubscriptionsPanel(props) {
             rows,
             columns: [
               { key: "plan", label: t.subscriptions.columnPlan, render: (sub) => sub.planName ?? sub.planReference },
-              { key: "price", label: t.subscriptions.columnPrice, render: (sub) => /* @__PURE__ */ jsx38("span", { className: "throttle-table__money", children: priceLabel(sub) }) },
+              { key: "price", label: t.subscriptions.columnPrice, render: (sub) => /* @__PURE__ */ jsx39("span", { className: "throttle-table__money", children: priceLabel(sub) }) },
               { key: "renews", label: t.subscriptions.columnRenews, render: (sub) => renewsLabel(sub) },
-              { key: "status", label: t.subscriptions.columnStatus, render: (sub) => /* @__PURE__ */ jsxs29("div", { className: "throttle-row", children: [
-                /* @__PURE__ */ jsx38(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels }),
-                sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx38(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
+              { key: "status", label: t.subscriptions.columnStatus, render: (sub) => /* @__PURE__ */ jsxs30("div", { className: "throttle-row", children: [
+                /* @__PURE__ */ jsx39(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels }),
+                sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx39(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
               ] }) },
               { key: "actions", label: t.common.actions, render: (sub) => lifecycleActions(sub, (base) => base) }
             ]
           }
-        ) : /* @__PURE__ */ jsx38("div", { ...a.el("subscriptionsPanel.list", listBase), children: rows.map((sub) => /* @__PURE__ */ jsxs29("div", { ...a.el("subscriptionsPanel.item", itemBase), children: [
-          /* @__PURE__ */ jsxs29("div", { children: [
-            /* @__PURE__ */ jsxs29("div", { className: "throttle-row", children: [
-              /* @__PURE__ */ jsx38("strong", { children: sub.planName ?? sub.planReference }),
-              /* @__PURE__ */ jsx38(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels })
+        ) : /* @__PURE__ */ jsx39("div", { ...a.el("subscriptionsPanel.list", listBase), children: rows.map((sub) => /* @__PURE__ */ jsxs30("div", { ...a.el("subscriptionsPanel.item", itemBase), children: [
+          /* @__PURE__ */ jsxs30("div", { children: [
+            /* @__PURE__ */ jsxs30("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ jsx39("strong", { children: sub.planName ?? sub.planReference }),
+              /* @__PURE__ */ jsx39(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels })
             ] }),
-            /* @__PURE__ */ jsxs29("p", { className: "throttle-muted", children: [
+            /* @__PURE__ */ jsxs30("p", { className: "throttle-muted", children: [
               formatMoney(sub.amount, sub.currency, locale),
               " / ",
               sub.interval,
               sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""
             ] }),
-            sub.status === "cancelled" ? /* @__PURE__ */ jsxs29("p", { className: "throttle-muted", children: [
+            sub.status === "cancelled" ? /* @__PURE__ */ jsxs30("p", { className: "throttle-muted", children: [
               t.subscriptions.cancelledOn,
               " ",
               formatDate(sub.cancelledAt ?? sub.currentPeriodEnd, locale)
-            ] }) : /* @__PURE__ */ jsxs29("p", { className: "throttle-muted", children: [
+            ] }) : /* @__PURE__ */ jsxs30("p", { className: "throttle-muted", children: [
               sub.cancelAtPeriodEnd ? t.subscriptions.endsOn : t.subscriptions.renewsOn,
               " ",
               formatDate(sub.currentPeriodEnd, locale)
             ] }),
-            sub.trialEnd ? /* @__PURE__ */ jsxs29("p", { className: "throttle-muted", children: [
+            sub.trialEnd ? /* @__PURE__ */ jsxs30("p", { className: "throttle-muted", children: [
               t.subscriptions.trialEnds,
               " ",
               formatDate(sub.trialEnd, locale)
             ] }) : null,
-            sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx38(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
+            sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx39(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
           ] }),
           lifecycleActions(sub, actionVariant)
         ] }, sub.id)) })
@@ -3185,8 +3350,40 @@ function SubscriptionsPanel(props) {
 }
 
 // src/react/components/account/SecurityPanel.tsx
-import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef5, useState as useState17 } from "react";
-import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useEffect as useEffect8, useRef as useRef7, useState as useState19 } from "react";
+
+// src/react/components/account/device.ts
+var BROWSERS = [
+  [/\bEdg(?:e|A|iOS)?\//, "Edge"],
+  [/\bOPR\/|\bOpera\b/, "Opera"],
+  // No leading \b: real agents ship prefixed builds (HeadlessChrome), and a
+  // word boundary there sends them to the Safari rule instead.
+  [/Chrome\/|CriOS\//, "Chrome"],
+  [/\bFirefox\/|\bFxiOS\//, "Firefox"],
+  [/\bSafari\//, "Safari"]
+];
+var PLATFORMS = [
+  [/\biPhone\b|\biPad\b|\biPod\b/, "iOS"],
+  [/\bAndroid\b/, "Android"],
+  [/\bMac OS X\b|\bMacintosh\b/, "macOS"],
+  [/\bWindows\b/, "Windows"],
+  [/\bLinux\b|\bX11\b/, "Linux"]
+];
+function first(ua, table) {
+  for (const [pattern, label] of table) if (pattern.test(ua)) return label;
+  return null;
+}
+function describeDevice(userAgent) {
+  const ua = (userAgent ?? "").trim();
+  if (!ua) return "";
+  const browser = first(ua, BROWSERS);
+  if (!browser) return ua;
+  const platform = first(ua, PLATFORMS);
+  return platform ? `${browser} on ${platform}` : browser;
+}
+
+// src/react/components/account/SecurityPanel.tsx
+import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
 function SecurityPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -3196,13 +3393,13 @@ function SecurityPanel(props) {
   const rowsVariant = variant === "rows";
   const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
   const revokeVariant = rowsVariant ? "linkDanger" : "danger";
-  const [password, setPassword] = useState17("");
+  const [password, setPassword] = useState19("");
   const passwordAction = useAction();
   const sessionAction = useAction();
-  const [sessions, setSessions] = useState17(null);
-  const [listError, setListError] = useState17(null);
-  const errorMessageRef = useRef5(errorMessage);
-  useEffect7(() => {
+  const [sessions, setSessions] = useState19(null);
+  const [listError, setListError] = useState19(null);
+  const errorMessageRef = useRef7(errorMessage);
+  useEffect8(() => {
     errorMessageRef.current = errorMessage;
   });
   const load = useCallback2(async () => {
@@ -3213,12 +3410,12 @@ function SecurityPanel(props) {
       setListError(errorMessageRef.current(err));
     }
   }, [auth]);
-  useEffect7(() => {
+  useEffect8(() => {
     void load();
   }, [load]);
   const others = (sessions ?? []).filter((s) => !s.current);
-  return /* @__PURE__ */ jsx39(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx39("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs30("div", { ...a.el("securityPanel.root", "throttle-panel"), children: [
-    /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsx40(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx40("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs31("div", { ...a.el("securityPanel.root", "throttle-panel"), children: [
+    /* @__PURE__ */ jsxs31(
       "form",
       {
         ...a.el("securityPanel.passwordForm", "throttle-stack"),
@@ -3231,8 +3428,8 @@ function SecurityPanel(props) {
           });
         },
         children: [
-          /* @__PURE__ */ jsx39("h3", { children: t.security.passwordTitle }),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40("h3", { children: t.security.passwordTitle }),
+          /* @__PURE__ */ jsx40(
             Field,
             {
               label: t.security.newPassword,
@@ -3243,21 +3440,21 @@ function SecurityPanel(props) {
               onChange: setPassword
             }
           ),
-          passwordAction.error ? /* @__PURE__ */ jsx39(Alert, { tone: "error", children: passwordAction.error }) : null,
-          passwordAction.notice ? /* @__PURE__ */ jsx39(Alert, { tone: "success", children: passwordAction.notice }) : null,
-          /* @__PURE__ */ jsx39(Button, { type: "submit", loading: passwordAction.submitting, elementKey: "securityPanel.passwordButton", children: t.security.changeButton })
+          passwordAction.error ? /* @__PURE__ */ jsx40(Alert, { tone: "error", children: passwordAction.error }) : null,
+          passwordAction.notice ? /* @__PURE__ */ jsx40(Alert, { tone: "success", children: passwordAction.notice }) : null,
+          /* @__PURE__ */ jsx40(Button, { type: "submit", loading: passwordAction.submitting, elementKey: "securityPanel.passwordButton", children: t.security.changeButton })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs30("div", { ...a.el("securityPanel.sessionList", "throttle-stack"), children: [
-      /* @__PURE__ */ jsx39("h3", { children: t.security.sessionsTitle }),
-      listError ? /* @__PURE__ */ jsxs30(Fragment9, { children: [
-        /* @__PURE__ */ jsx39(Alert, { tone: "error", children: listError }),
-        /* @__PURE__ */ jsx39(Button, { variant: "secondary", onClick: () => void load(), children: t.common.retry })
+    /* @__PURE__ */ jsxs31("div", { ...a.el("securityPanel.sessionList", "throttle-stack"), children: [
+      /* @__PURE__ */ jsx40("h3", { children: t.security.sessionsTitle }),
+      listError ? /* @__PURE__ */ jsxs31(Fragment9, { children: [
+        /* @__PURE__ */ jsx40(Alert, { tone: "error", children: listError }),
+        /* @__PURE__ */ jsx40(Button, { variant: "secondary", onClick: () => void load(), children: t.common.retry })
       ] }) : null,
-      sessionAction.error ? /* @__PURE__ */ jsx39(Alert, { tone: "error", children: sessionAction.error }) : null,
-      sessions === null && !listError ? /* @__PURE__ */ jsx39(Skeleton, { count: 2 }) : null,
-      sessions !== null && !listError && variant === "table" ? /* @__PURE__ */ jsx39(
+      sessionAction.error ? /* @__PURE__ */ jsx40(Alert, { tone: "error", children: sessionAction.error }) : null,
+      sessions === null && !listError ? /* @__PURE__ */ jsx40(Skeleton, { count: 2 }) : null,
+      sessions !== null && !listError && variant === "table" ? /* @__PURE__ */ jsx40(
         DataTable,
         {
           tableKey: "securityPanel.table",
@@ -3265,12 +3462,12 @@ function SecurityPanel(props) {
           rowKey: (session) => session.id,
           rows: sessions,
           columns: [
-            { key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ jsxs30("div", { className: "throttle-row", children: [
-              /* @__PURE__ */ jsx39("span", { children: session.userAgent || session.ipPrefix || session.id }),
-              session.current ? /* @__PURE__ */ jsx39(Badge, { tone: "success", children: t.security.thisDevice }) : null
+            { key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ jsxs31("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ jsx40("span", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
+              session.current ? /* @__PURE__ */ jsx40(Badge, { tone: "success", children: t.security.thisDevice }) : null
             ] }) },
             { key: "lastActive", label: t.security.lastActive, render: (session) => formatDate(session.lastUsedAt, locale) },
-            { key: "actions", label: t.common.actions, render: (session) => !session.current ? /* @__PURE__ */ jsx39(
+            { key: "actions", label: t.common.actions, render: (session) => !session.current ? /* @__PURE__ */ jsx40(
               Button,
               {
                 variant: "danger",
@@ -3285,19 +3482,19 @@ function SecurityPanel(props) {
             ) : null }
           ]
         }
-      ) : (sessions ?? []).map((session) => /* @__PURE__ */ jsxs30("div", { ...a.el("securityPanel.sessionItem", itemBase), children: [
-        /* @__PURE__ */ jsxs30("div", { children: [
-          /* @__PURE__ */ jsxs30("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ jsx39("strong", { children: session.userAgent || session.ipPrefix || session.id }),
-            session.current ? /* @__PURE__ */ jsx39(Badge, { tone: "success", children: t.security.thisDevice }) : null
+      ) : (sessions ?? []).map((session) => /* @__PURE__ */ jsxs31("div", { ...a.el("securityPanel.sessionItem", itemBase), children: [
+        /* @__PURE__ */ jsxs31("div", { children: [
+          /* @__PURE__ */ jsxs31("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ jsx40("strong", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
+            session.current ? /* @__PURE__ */ jsx40(Badge, { tone: "success", children: t.security.thisDevice }) : null
           ] }),
-          /* @__PURE__ */ jsxs30("p", { className: "throttle-muted", children: [
+          /* @__PURE__ */ jsxs31("p", { className: "throttle-muted", children: [
             t.security.lastActive,
             " ",
             formatDate(session.lastUsedAt, locale)
           ] })
         ] }),
-        !session.current ? /* @__PURE__ */ jsx39(
+        !session.current ? /* @__PURE__ */ jsx40(
           Button,
           {
             variant: revokeVariant,
@@ -3311,8 +3508,8 @@ function SecurityPanel(props) {
           }
         ) : null
       ] }, session.id)),
-      sessions !== null && others.length === 0 ? /* @__PURE__ */ jsx39("p", { className: "throttle-muted", children: t.security.sessionsEmpty }) : null,
-      others.length > 0 ? /* @__PURE__ */ jsx39(
+      sessions !== null && others.length === 0 ? /* @__PURE__ */ jsx40("p", { className: "throttle-muted", children: t.security.sessionsEmpty }) : null,
+      others.length > 0 ? /* @__PURE__ */ jsx40(
         Button,
         {
           variant: "danger",
@@ -3332,7 +3529,7 @@ function SecurityPanel(props) {
 }
 
 // src/react/components/account/AccountDashboard.tsx
-import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
 var ACCOUNT_TABS = [
   "profile",
   "addresses",
@@ -3361,9 +3558,9 @@ function AccountDashboard(props) {
   const { status } = useAuth();
   const shown = props.tabs ?? [...ACCOUNT_TABS];
   const controlled = props.tab !== void 0;
-  const [internal, setInternal] = useState18(shown[0] ?? "profile");
-  const idBase = useId4();
-  useEffect8(() => {
+  const [internal, setInternal] = useState20(shown[0] ?? "profile");
+  const idBase = useId5();
+  useEffect9(() => {
     if (props.routing !== "hash" || typeof window === "undefined") return;
     const apply = () => {
       const next = TAB_FOR_HASH[window.location.hash] ?? shown[0];
@@ -3384,7 +3581,7 @@ function AccountDashboard(props) {
   };
   const shared = { appearance: props.appearance, localization: props.localization };
   const sidebar = (props.layout ?? "sidebar") === "sidebar";
-  const nav = /* @__PURE__ */ jsx40(
+  const nav = /* @__PURE__ */ jsx41(
     Tabs,
     {
       idBase,
@@ -3400,7 +3597,7 @@ function AccountDashboard(props) {
       }))
     }
   );
-  const panel = /* @__PURE__ */ jsxs31(
+  const panel = /* @__PURE__ */ jsxs32(
     "div",
     {
       ...a.el("accountDashboard.panel", sidebar ? "throttle-account__content" : "throttle-tabs__panel"),
@@ -3409,36 +3606,36 @@ function AccountDashboard(props) {
       "aria-labelledby": `${idBase}-tab-${active}`,
       tabIndex: 0,
       children: [
-        active === "profile" ? /* @__PURE__ */ jsx40(ProfilePanel, { ...shared }) : null,
-        active === "addresses" ? /* @__PURE__ */ jsx40(AddressesPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "paymentMethods" ? /* @__PURE__ */ jsx40(PaymentMethodsPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "orders" ? /* @__PURE__ */ jsx40(OrdersPanel, { ...shared, variant: props.panelVariant, onViewSubscription: () => go("subscriptions") }) : null,
-        active === "invoices" ? /* @__PURE__ */ jsx40(InvoicesPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "subscriptions" ? /* @__PURE__ */ jsx40(SubscriptionsPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "security" ? /* @__PURE__ */ jsx40(SecurityPanel, { ...shared, variant: props.panelVariant }) : null
+        active === "profile" ? /* @__PURE__ */ jsx41(ProfilePanel, { ...shared }) : null,
+        active === "addresses" ? /* @__PURE__ */ jsx41(AddressesPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "paymentMethods" ? /* @__PURE__ */ jsx41(PaymentMethodsPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "orders" ? /* @__PURE__ */ jsx41(OrdersPanel, { ...shared, variant: props.panelVariant, onViewSubscription: () => go("subscriptions") }) : null,
+        active === "invoices" ? /* @__PURE__ */ jsx41(InvoicesPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "subscriptions" ? /* @__PURE__ */ jsx41(SubscriptionsPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "security" ? /* @__PURE__ */ jsx41(SecurityPanel, { ...shared, variant: props.panelVariant }) : null
       ]
     }
   );
-  return /* @__PURE__ */ jsx40(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx40("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs31("div", { ...a.el("accountDashboard.root", "throttle-panel throttle-account-root"), children: [
-    /* @__PURE__ */ jsx40(VerifyEmailBanner, { ...shared }),
-    sidebar ? /* @__PURE__ */ jsxs31("div", { className: "throttle-account", children: [
-      /* @__PURE__ */ jsx40("div", { ...a.el("accountDashboard.sidebar"), children: nav }),
+  return /* @__PURE__ */ jsx41(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx41("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs32("div", { ...a.el("accountDashboard.root", "throttle-panel throttle-account-root"), children: [
+    /* @__PURE__ */ jsx41(VerifyEmailBanner, { ...shared }),
+    sidebar ? /* @__PURE__ */ jsxs32("div", { className: "throttle-account", children: [
+      /* @__PURE__ */ jsx41("div", { ...a.el("accountDashboard.sidebar"), children: nav }),
       panel
-    ] }) : /* @__PURE__ */ jsxs31(Fragment10, { children: [
-      /* @__PURE__ */ jsx40("div", { ...a.el("accountDashboard.tabs"), children: nav }),
+    ] }) : /* @__PURE__ */ jsxs32(Fragment10, { children: [
+      /* @__PURE__ */ jsx41("div", { ...a.el("accountDashboard.tabs"), children: nav }),
       panel
     ] })
   ] }) }) });
 }
 
 // src/react/components/account/AccountModal.tsx
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
 function AccountModal(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t } = useCopy(props.localization);
-  const titleId = useId5();
-  return /* @__PURE__ */ jsx41(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsxs32(
+  const titleId = useId6();
+  return /* @__PURE__ */ jsx42(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsxs33(
     Modal,
     {
       open: props.open,
@@ -3448,15 +3645,15 @@ function AccountModal(props) {
       overlayKey: "accountModal.overlay",
       containerKey: "accountModal.container",
       children: [
-        /* @__PURE__ */ jsx41("div", { ...a.el("accountModal.header", "throttle-modal__header"), children: /* @__PURE__ */ jsx41("h2", { id: titleId, ...a.el("accountModal.title", "throttle-modal__title"), children: t.account.title }) }),
-        /* @__PURE__ */ jsx41("div", { ...a.el("accountModal.body", "throttle-modal__body"), children: /* @__PURE__ */ jsx41(AccountDashboard, { tabs: props.tabs, appearance: props.appearance, localization: props.localization }) })
+        /* @__PURE__ */ jsx42("div", { ...a.el("accountModal.header", "throttle-modal__header"), children: /* @__PURE__ */ jsx42("h2", { id: titleId, ...a.el("accountModal.title", "throttle-modal__title"), children: t.account.title }) }),
+        /* @__PURE__ */ jsx42("div", { ...a.el("accountModal.body", "throttle-modal__body"), children: /* @__PURE__ */ jsx42(AccountDashboard, { tabs: props.tabs, appearance: props.appearance, localization: props.localization }) })
       ]
     }
   ) });
 }
 
 // src/react/components/provider.tsx
-import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 var warned = /* @__PURE__ */ new Set();
 function warnOnce(key, message) {
   if (process.env.NODE_ENV === "production") return;
@@ -3501,14 +3698,14 @@ function ThrottleProvider(props) {
     __captureStepUp
   } = props;
   useInjectStyles(injectStyles);
-  const [stepUpOpen, setStepUpOpen] = useState19(false);
-  const resolveStepUp = useRef6(null);
-  const claimRef = useRef6(claimCartOnSignIn);
+  const [stepUpOpen, setStepUpOpen] = useState21(false);
+  const resolveStepUp = useRef8(null);
+  const claimRef = useRef8(claimCartOnSignIn);
   claimRef.current = claimCartOnSignIn;
-  const [overlay, setOverlay] = useState19(null);
-  const overlayRestoreFocus = useRef6(null);
-  const [accountTabs, setAccountTabs] = useState19(void 0);
-  const onOverlaySuccess = useRef6(null);
+  const [overlay, setOverlay] = useState21(null);
+  const overlayRestoreFocus = useRef8(null);
+  const [accountTabs, setAccountTabs] = useState21(void 0);
+  const onOverlaySuccess = useRef8(null);
   const openSignIn = useCallback3((onSuccess) => {
     onOverlaySuccess.current = onSuccess ?? null;
     setOverlay("signIn");
@@ -3578,10 +3775,10 @@ function ThrottleProvider(props) {
     resolve?.(password);
   };
   const authOverlayOpen = overlay === "signIn" || overlay === "signUp";
-  return /* @__PURE__ */ jsx42(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ jsx42(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ jsx42(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ jsx42(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ jsxs33(ThrottleUIContext.Provider, { value: ui, children: [
+  return /* @__PURE__ */ jsx43(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ jsx43(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ jsx43(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ jsx43(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ jsxs34(ThrottleUIContext.Provider, { value: ui, children: [
     children,
-    /* @__PURE__ */ jsx42(StepUpDialog, { open: stepUpOpen, onResolve: finishStepUp }),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(StepUpDialog, { open: stepUpOpen, onResolve: finishStepUp }),
+    /* @__PURE__ */ jsx43(
       AuthModal,
       {
         open: authOverlayOpen,
@@ -3592,23 +3789,23 @@ function ThrottleProvider(props) {
       },
       overlay === "signUp" ? "signUp" : "signIn"
     ),
-    /* @__PURE__ */ jsx42(AccountModal, { open: overlay === "account", onClose: closeOverlay, tabs: accountTabs, restoreFocusTo: overlayRestoreFocus.current })
+    /* @__PURE__ */ jsx43(AccountModal, { open: overlay === "account", onClose: closeOverlay, tabs: accountTabs, restoreFocusTo: overlayRestoreFocus.current })
   ] }) }) }) }) });
 }
 
 // src/react/components/auth/SignInButton.tsx
-import { cloneElement, isValidElement, useContext as useContext6, useState as useState20 } from "react";
-import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useContext as useContext6, useState as useState22 } from "react";
+import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 function SignInButton(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t } = useCopy(props.localization);
   const ui = useContext6(ThrottleUIContext);
-  const [localOpen, setLocalOpen] = useState20(false);
+  const [localOpen, setLocalOpen] = useState22(false);
   const useShared = ui !== null && props.initialView === void 0;
   const label = props.children ?? t.signIn.submitButton;
   if (props.mode === "redirect") {
-    return /* @__PURE__ */ jsx43(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx43("span", { ...a.rootProps, children: /* @__PURE__ */ jsx43("a", { ...a.el("signInButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
+    return /* @__PURE__ */ jsx44(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx44("span", { ...a.rootProps, children: /* @__PURE__ */ jsx44("a", { ...a.el("signInButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
   }
   const openModal = () => {
     if (useShared) ui.openSignIn(props.afterSignIn);
@@ -3618,10 +3815,10 @@ function SignInButton(props) {
     if (useShared) ui.close();
     else setLocalOpen(false);
   };
-  const trigger = props.asChild && isValidElement(props.children) ? cloneElement(props.children, { onClick: openModal }) : /* @__PURE__ */ jsx43(Button, { elementKey: "signInButton.root", onClick: openModal, children: label });
-  return /* @__PURE__ */ jsxs34(AppearanceProvider, { value: scoped, children: [
-    /* @__PURE__ */ jsx43("span", { ...a.rootProps, children: trigger }),
-    !useShared ? /* @__PURE__ */ jsx43(
+  const trigger = props.asChild && isValidElement(props.children) ? cloneElement(props.children, { onClick: openModal }) : /* @__PURE__ */ jsx44(Button, { elementKey: "signInButton.root", onClick: openModal, children: label });
+  return /* @__PURE__ */ jsxs35(AppearanceProvider, { value: scoped, children: [
+    /* @__PURE__ */ jsx44("span", { ...a.rootProps, children: trigger }),
+    !useShared ? /* @__PURE__ */ jsx44(
       AuthModal,
       {
         open: localOpen,
@@ -3639,18 +3836,18 @@ function SignInButton(props) {
 }
 
 // src/react/components/auth/SignUpButton.tsx
-import { cloneElement as cloneElement2, isValidElement as isValidElement2, useContext as useContext7, useState as useState21 } from "react";
-import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { cloneElement as cloneElement2, isValidElement as isValidElement2, useContext as useContext7, useState as useState23 } from "react";
+import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 function SignUpButton(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t } = useCopy(props.localization);
   const ui = useContext7(ThrottleUIContext);
-  const [localOpen, setLocalOpen] = useState21(false);
+  const [localOpen, setLocalOpen] = useState23(false);
   const useShared = ui !== null && props.initialView === void 0;
   const label = props.children ?? t.signUp.submitButton;
   if (props.mode === "redirect") {
-    return /* @__PURE__ */ jsx44(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx44("span", { ...a.rootProps, children: /* @__PURE__ */ jsx44("a", { ...a.el("signUpButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
+    return /* @__PURE__ */ jsx45(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx45("span", { ...a.rootProps, children: /* @__PURE__ */ jsx45("a", { ...a.el("signUpButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
   }
   const openModal = () => {
     if (useShared) ui.openSignUp(props.afterSignUp);
@@ -3660,10 +3857,10 @@ function SignUpButton(props) {
     if (useShared) ui.close();
     else setLocalOpen(false);
   };
-  const trigger = props.asChild && isValidElement2(props.children) ? cloneElement2(props.children, { onClick: openModal }) : /* @__PURE__ */ jsx44(Button, { elementKey: "signUpButton.root", onClick: openModal, children: label });
-  return /* @__PURE__ */ jsxs35(AppearanceProvider, { value: scoped, children: [
-    /* @__PURE__ */ jsx44("span", { ...a.rootProps, children: trigger }),
-    !useShared ? /* @__PURE__ */ jsx44(
+  const trigger = props.asChild && isValidElement2(props.children) ? cloneElement2(props.children, { onClick: openModal }) : /* @__PURE__ */ jsx45(Button, { elementKey: "signUpButton.root", onClick: openModal, children: label });
+  return /* @__PURE__ */ jsxs36(AppearanceProvider, { value: scoped, children: [
+    /* @__PURE__ */ jsx45("span", { ...a.rootProps, children: trigger }),
+    !useShared ? /* @__PURE__ */ jsx45(
       AuthModal,
       {
         open: localOpen,
@@ -3681,14 +3878,14 @@ function SignUpButton(props) {
 }
 
 // src/react/components/auth/SignOutButton.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function SignOutButton(props) {
   const a = useAppearance();
   const { auth } = useAuth();
   const { t } = useCopy(props.localization);
   const { submitting, run } = useAction();
   const label = props.children ?? (props.everywhere ? t.userButton.signOutAll : t.userButton.signOut);
-  return /* @__PURE__ */ jsx45("span", { ...a.rootProps, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46("span", { ...a.rootProps, children: /* @__PURE__ */ jsx46(
     Button,
     {
       variant: "secondary",
@@ -3705,13 +3902,13 @@ function SignOutButton(props) {
 }
 
 // src/react/components/auth/SignInPage.tsx
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 function SignInPage(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
-  return /* @__PURE__ */ jsx46(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx46("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs36("div", { ...a.el("signInPage.root", "throttle-page"), children: [
-    props.logo ? /* @__PURE__ */ jsx46("div", { ...a.el("signInPage.logo", "throttle-page__logo"), children: props.logo }) : null,
-    /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx47("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs37("div", { ...a.el("signInPage.root", "throttle-page"), children: [
+    props.logo ? /* @__PURE__ */ jsx47("div", { ...a.el("signInPage.logo", "throttle-page__logo"), children: props.logo }) : null,
+    /* @__PURE__ */ jsx47(
       SignIn,
       {
         onSuccess: props.onSuccess,
@@ -3721,18 +3918,18 @@ function SignInPage(props) {
         localization: props.localization
       }
     ),
-    props.footer ? /* @__PURE__ */ jsx46("div", { ...a.el("signInPage.footer", "throttle-page__footer"), children: props.footer }) : null
+    props.footer ? /* @__PURE__ */ jsx47("div", { ...a.el("signInPage.footer", "throttle-page__footer"), children: props.footer }) : null
   ] }) }) });
 }
 
 // src/react/components/auth/SignUpPage.tsx
-import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 function SignUpPage(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
-  return /* @__PURE__ */ jsx47(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx47("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs37("div", { ...a.el("signUpPage.root", "throttle-page"), children: [
-    props.logo ? /* @__PURE__ */ jsx47("div", { ...a.el("signUpPage.logo", "throttle-page__logo"), children: props.logo }) : null,
-    /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx48("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs38("div", { ...a.el("signUpPage.root", "throttle-page"), children: [
+    props.logo ? /* @__PURE__ */ jsx48("div", { ...a.el("signUpPage.logo", "throttle-page__logo"), children: props.logo }) : null,
+    /* @__PURE__ */ jsx48(
       SignUp,
       {
         onSuccess: props.onSuccess,
@@ -3741,42 +3938,42 @@ function SignUpPage(props) {
         localization: props.localization
       }
     ),
-    props.footer ? /* @__PURE__ */ jsx47("div", { ...a.el("signUpPage.footer", "throttle-page__footer"), children: props.footer }) : null
+    props.footer ? /* @__PURE__ */ jsx48("div", { ...a.el("signUpPage.footer", "throttle-page__footer"), children: props.footer }) : null
   ] }) }) });
 }
 
 // src/react/components/guards.tsx
-import { Fragment as Fragment11, jsx as jsx48 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx49 } from "react/jsx-runtime";
 function SignedIn(props) {
   const { status } = useAuth();
-  return status === "authenticated" ? /* @__PURE__ */ jsx48(Fragment11, { children: props.children }) : null;
+  return status === "authenticated" ? /* @__PURE__ */ jsx49(Fragment11, { children: props.children }) : null;
 }
 function SignedOut(props) {
   const { status } = useAuth();
-  return status === "unauthenticated" ? /* @__PURE__ */ jsx48(Fragment11, { children: props.children }) : null;
+  return status === "unauthenticated" ? /* @__PURE__ */ jsx49(Fragment11, { children: props.children }) : null;
 }
 function Protect(props) {
   const { status, emailVerified } = useAuth();
   if (status === "loading") return null;
-  if (status !== "authenticated") return /* @__PURE__ */ jsx48(Fragment11, { children: props.fallback ?? null });
-  if (props.requireVerified && !emailVerified) return /* @__PURE__ */ jsx48(Fragment11, { children: props.fallback ?? null });
-  return /* @__PURE__ */ jsx48(Fragment11, { children: props.children });
+  if (status !== "authenticated") return /* @__PURE__ */ jsx49(Fragment11, { children: props.fallback ?? null });
+  if (props.requireVerified && !emailVerified) return /* @__PURE__ */ jsx49(Fragment11, { children: props.fallback ?? null });
+  return /* @__PURE__ */ jsx49(Fragment11, { children: props.children });
 }
 
 // src/react/components/UserButton.tsx
-import { useContext as useContext8, useId as useId6, useRef as useRef7, useState as useState22 } from "react";
-import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useContext as useContext8, useId as useId7, useRef as useRef9, useState as useState24 } from "react";
+import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 function UserButtonRoot(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t } = useCopy(props.localization);
   const { auth, status, customer, emailVerified } = useAuth();
   const ui = useContext8(ThrottleUIContext);
-  const [localOpen, setLocalOpen] = useState22(false);
+  const [localOpen, setLocalOpen] = useState24(false);
   const accountOpen = ui ? false : localOpen;
-  const titleId = useId6();
-  const rootRef = useRef7(null);
-  const openerRef = useRef7(null);
+  const titleId = useId7();
+  const rootRef = useRef9(null);
+  const openerRef = useRef9(null);
   const openAccount = () => {
     const opener = rootRef.current?.querySelector('button[aria-haspopup="menu"]') ?? null;
     openerRef.current = opener;
@@ -3785,25 +3982,25 @@ function UserButtonRoot(props) {
   };
   if (status !== "authenticated" || !customer) return null;
   const name = [customer.firstName, customer.lastName].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx49(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx49("span", { ...a.rootProps, children: /* @__PURE__ */ jsxs38("span", { ref: rootRef, ...a.el("userButton.root"), children: [
-    /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsx50(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx50("span", { ...a.rootProps, children: /* @__PURE__ */ jsxs39("span", { ref: rootRef, ...a.el("userButton.root"), children: [
+    /* @__PURE__ */ jsxs39(
       Dropdown,
       {
         label: t.userButton.openMenu,
         triggerKey: "userButton.trigger",
         menuKey: "userButton.menu",
-        trigger: /* @__PURE__ */ jsx49(Avatar, { name, email: customer.email }),
+        trigger: /* @__PURE__ */ jsx50(Avatar, { name, email: customer.email }),
         children: [
-          /* @__PURE__ */ jsx49("div", { ...a.el("userButton.identity", "throttle-dropdown__item"), children: /* @__PURE__ */ jsxs38("span", { children: [
-            /* @__PURE__ */ jsx49("span", { ...a.el("userButton.email"), children: customer.email }),
-            /* @__PURE__ */ jsx49("br", {}),
-            /* @__PURE__ */ jsx49(Badge, { tone: emailVerified ? "success" : "warning", elementKey: "userButton.badge", children: emailVerified ? t.userButton.verified : t.userButton.unverified })
+          /* @__PURE__ */ jsx50("div", { ...a.el("userButton.identity", "throttle-dropdown__item"), children: /* @__PURE__ */ jsxs39("span", { children: [
+            /* @__PURE__ */ jsx50("span", { ...a.el("userButton.email"), children: customer.email }),
+            /* @__PURE__ */ jsx50("br", {}),
+            /* @__PURE__ */ jsx50(Badge, { tone: emailVerified ? "success" : "warning", elementKey: "userButton.badge", children: emailVerified ? t.userButton.verified : t.userButton.unverified })
           ] }) }),
-          /* @__PURE__ */ jsx49(DropdownSeparator, {}),
-          props.mode === "navigate" ? /* @__PURE__ */ jsx49(DropdownItem, { itemKey: "userButton.manageButton", href: props.accountUrl ?? "#", children: t.userButton.manage }) : /* @__PURE__ */ jsx49(DropdownItem, { itemKey: "userButton.manageButton", onClick: openAccount, children: t.userButton.manage }),
+          /* @__PURE__ */ jsx50(DropdownSeparator, {}),
+          props.mode === "navigate" ? /* @__PURE__ */ jsx50(DropdownItem, { itemKey: "userButton.manageButton", href: props.accountUrl ?? "#", children: t.userButton.manage }) : /* @__PURE__ */ jsx50(DropdownItem, { itemKey: "userButton.manageButton", onClick: openAccount, children: t.userButton.manage }),
           props.children,
-          /* @__PURE__ */ jsx49(DropdownSeparator, {}),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(DropdownSeparator, {}),
+          /* @__PURE__ */ jsx50(
             DropdownItem,
             {
               itemKey: "userButton.signOutButton",
@@ -3811,7 +4008,7 @@ function UserButtonRoot(props) {
               children: t.userButton.signOut
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(
             DropdownItem,
             {
               itemKey: "userButton.signOutAllButton",
@@ -3822,7 +4019,7 @@ function UserButtonRoot(props) {
         ]
       }
     ),
-    props.mode !== "navigate" && !ui ? /* @__PURE__ */ jsxs38(
+    props.mode !== "navigate" && !ui ? /* @__PURE__ */ jsxs39(
       Modal,
       {
         open: accountOpen,
@@ -3830,8 +4027,8 @@ function UserButtonRoot(props) {
         labelledBy: titleId,
         restoreFocusTo: openerRef.current,
         children: [
-          /* @__PURE__ */ jsx49("h2", { id: titleId, style: { padding: "16px 16px 0", margin: 0 }, children: t.account.title }),
-          /* @__PURE__ */ jsx49("div", { style: { padding: 16 }, children: /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50("h2", { id: titleId, style: { padding: "16px 16px 0", margin: 0 }, children: t.account.title }),
+          /* @__PURE__ */ jsx50("div", { style: { padding: 16 }, children: /* @__PURE__ */ jsx50(
             AccountDashboard,
             {
               tabs: props.tabs,
@@ -3845,13 +4042,13 @@ function UserButtonRoot(props) {
   ] }) }) });
 }
 function UserButtonLink(props) {
-  return /* @__PURE__ */ jsxs38(DropdownItem, { itemKey: "userButton.item", href: props.href, children: [
+  return /* @__PURE__ */ jsxs39(DropdownItem, { itemKey: "userButton.item", href: props.href, children: [
     props.icon,
     props.label
   ] });
 }
 function UserButtonAction(props) {
-  return /* @__PURE__ */ jsxs38(DropdownItem, { itemKey: "userButton.item", onClick: props.onClick, children: [
+  return /* @__PURE__ */ jsxs39(DropdownItem, { itemKey: "userButton.item", onClick: props.onClick, children: [
     props.icon,
     props.label
   ] });
@@ -3864,6 +4061,7 @@ export {
   ACCOUNT_TABS,
   AccountDashboard,
   AccountModal,
+  AddCardDialog,
   AddressesPanel,
   AuthFlow,
   AuthModal,