@usethrottle/auth 0.2.3 → 0.3.1

package/dist/react/components/index.cjs

@@ -79,7 +79,7 @@ __export(components_exports, {
 module.exports = __toCommonJS(components_exports);
 
 // src/react/components/provider.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/errors.ts
 var ThrottleAuthError = class extends Error {
@@ -622,6 +622,10 @@ var VARIABLE_PROPERTY = {
   // 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.
+  // How wide the auth card (sign-in, sign-up, forgot-password) is allowed
+  // to grow. It was pinned at 400px, which is narrow for a page that is
+  // nothing but that card.
+  cardWidth: "--throttle-card-width",
   accountSurface: "--throttle-color-account-surface",
   accountPadding: "--throttle-account-padding",
   shadowCard: "--throttle-shadow-card",
@@ -760,6 +764,19 @@ var THROTTLE_ELEMENT_KEYS = [
   "paymentMethodsPanel.deleteButton",
   "paymentMethodsPanel.addButton",
   "paymentMethodsPanel.addDialog",
+  "orderDetail.addresses",
+  "orderDetail.shippingAddress",
+  "orderDetail.billingAddress",
+  "orderDetail.timeline",
+  "orderDetail.payButton",
+  "orderDetail.trackButton",
+  "orderDetail.reorderButton",
+  "fieldRow",
+  "confirm.header",
+  "confirm.title",
+  "confirm.body",
+  "confirm.confirmButton",
+  "confirm.cancelButton",
   "paymentMethodsPanel.table",
   "paymentMethodsPanel.row",
   "ordersPanel.root",
@@ -930,6 +947,9 @@ var enUS = {
     loading: "Loading\u2026",
     close: "Close",
     confirm: "Are you sure?",
+    // The dismissive half of a confirmation. "Cancel" is ambiguous next to
+    // "Cancel subscription" — one dismisses the dialog, the other ends the plan.
+    keepIt: "Keep it",
     somethingWentWrong: "Something went wrong.",
     actions: "Actions",
     view: "View"
@@ -1027,6 +1047,7 @@ var enUS = {
     addButton: "Add address",
     defaultBadge: "Default",
     makeDefault: "Make default",
+    deleteConfirmAction: "Delete address",
     empty: "No saved addresses",
     emptyDescription: "Addresses you use at checkout can be saved here.",
     label: "Label",
@@ -1056,9 +1077,20 @@ var enUS = {
     makeDefault: "Make default",
     expires: "Expires",
     deleteConfirm: "Remove this card?",
+    deleteConfirmAction: "Remove card",
     columnCard: "Card"
   },
   orders: {
+    shipTo: "Ship to",
+    billTo: "Bill to",
+    history: "History",
+    placed: "Order placed",
+    completed: "Completed",
+    cancelledAt: "Cancelled",
+    closedAt: "Closed",
+    payNow: "Pay now",
+    track: "Track shipment",
+    reorder: "Order again",
     empty: "No orders yet",
     emptyDescription: "Orders you place will appear here.",
     gatedDescription: "Verify your email to see your order history.",
@@ -1127,6 +1159,12 @@ var enUS = {
     downloadUnavailable: "This invoice is not available to download right now."
   },
   subscriptions: {
+    cancelConfirmAction: "Cancel plan",
+    pauseConfirm: "Pause this subscription?",
+    resumeConfirm: "Resume this subscription?",
+    // Distinct from cancelConfirm: ending it now is not the same promise as
+    // letting it run to the end of a period the buyer already paid for.
+    cancelNowConfirm: "End this subscription immediately?",
     empty: "No subscriptions",
     emptyDescription: "Subscriptions will appear here.",
     gatedDescription: "Verify your email to see your subscriptions.",
@@ -1248,6 +1286,7 @@ var THROTTLE_STYLES = `
      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-card-width: 400px;
   --throttle-color-account-surface: transparent;
   --throttle-account-padding: 0;
   --throttle-color-border-control: #8b93a1;
@@ -1348,7 +1387,7 @@ var THROTTLE_STYLES = `
   box-shadow: var(--throttle-shadow-card);
   padding: var(--throttle-space-5);
   width: 100%;
-  max-width: 400px;
+  max-width: var(--throttle-card-width);
   margin-inline: auto;
 }
 /* Inside a Modal the dialog already provides the surface \u2014 background, radius
@@ -1552,6 +1591,14 @@ var THROTTLE_STYLES = `
    is near-white, so on a light host page it was rendering white-on-white. */
 .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-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-4); align-items: start; }
+.throttle-section__title { font-size: var(--throttle-font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--throttle-color-muted-foreground); margin: 0 0 var(--throttle-space-2); font-weight: 600; }
+.throttle-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-5); }
+.throttle-addressblock__line { margin: 0 0 2px; }
+.throttle-timeline { display: flex; flex-direction: column; gap: var(--throttle-space-2); }
+.throttle-timeline__row { display: flex; align-items: center; gap: var(--throttle-space-2); }
+.throttle-timeline__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--throttle-color-border-control); flex: none; }
+.throttle-timeline__label { flex: 1; }
 .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; }
@@ -1589,6 +1636,8 @@ var THROTTLE_STYLES = `
      it shrinks the rail to its content width, so width:100% alone cannot make
      it span. Stretch it explicitly when stacked. */
   .throttle-account { flex-direction: column; align-items: stretch; gap: var(--throttle-space-4); }
+  .throttle-addresses { grid-template-columns: 1fr; }
+  .throttle-fieldrow { grid-template-columns: 1fr; }
   .throttle-tabs__rail { width: 100%; }
 }
 
@@ -1691,63 +1740,46 @@ function useInjectStyles(enabled) {
   }, [enabled]);
 }
 
-// src/react/components/auth/StepUpDialog.tsx
-var import_react10 = require("react");
-
-// src/react/components/surface.tsx
-var import_react6 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Ctx5 = (0, import_react6.createContext)("standalone");
-function SurfaceProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Ctx5.Provider, { value: props.value, children: props.children });
-}
-function useSurface() {
-  return (0, import_react6.useContext)(Ctx5);
-}
-function useCardClass() {
-  return useSurface() === "modal" ? "throttle-card throttle-card--bare" : "throttle-card";
-}
-
 // src/react/components/primitives/Card.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function CardHeader(props) {
   const a = useAppearance();
   const headerClass = `throttle-card__header${props.branded ? " throttle-card__header--branded" : ""}`;
   const titleClass = `throttle-card__title${props.branded ? " throttle-card__title--branded" : ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ...a.el("card.header", headerClass), children: [
-    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...a.el(props.logoKey ?? "card.logo", "throttle-card__logo"), children: props.logo }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { ...a.el(props.titleKey ?? "card.title", titleClass), children: props.title }),
-    props.description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { ...a.el("card.description", "throttle-card__description"), children: props.description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ...a.el("card.header", headerClass), children: [
+    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...a.el(props.logoKey ?? "card.logo", "throttle-card__logo"), children: props.logo }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { ...a.el(props.titleKey ?? "card.title", titleClass), children: props.title }),
+    props.description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { ...a.el("card.description", "throttle-card__description"), children: props.description }) : null
   ] });
 }
 function CardBody(props) {
   const a = useAppearance();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...a.el("card.body", "throttle-card__body"), children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...a.el("card.body", "throttle-card__body"), children: props.children });
 }
 function CardFooter(props) {
   const a = useAppearance();
   const className = `throttle-card__footer${props.ruled ? " throttle-card__footer--ruled" : ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...a.el("card.footer", className), children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...a.el("card.footer", className), children: props.children });
 }
 
 // src/react/components/primitives/Spinner.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Spinner({ centred } = {}) {
   const a = useAppearance();
   const Slot = a.slots.Spinner;
-  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Slot, {});
+  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Slot, {});
   const cls = `throttle-spinner${centred ? " throttle-spinner--centred" : ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ...a.el("spinner", cls), "aria-hidden": "true" });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ...a.el("spinner", cls), "aria-hidden": "true" });
 }
 
 // src/react/components/primitives/Button.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Button({ variant = "primary", size = "default", elementKey, loading, children, ...rest }) {
   const a = useAppearance();
   const Slot = a.slots.Button;
-  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slot, { variant, loading, ...rest, children });
+  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Slot, { variant, loading, ...rest, children });
   const base = `throttle-button throttle-button--${variant}${size === "xs" ? " throttle-button--xs" : ""}${loading ? " throttle-button--loading" : ""}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       type: "button",
@@ -1756,30 +1788,30 @@ function Button({ variant = "primary", size = "default", elementKey, loading, ch
       disabled: rest.disabled || loading,
       "aria-busy": loading ? true : void 0,
       children: [
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, { centred: true }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `throttle-button__label${loading ? " throttle-button__label--hidden" : ""}`, children })
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { centred: true }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `throttle-button__label${loading ? " throttle-button__label--hidden" : ""}`, children })
       ]
     }
   );
 }
 
 // src/react/components/primitives/Field.tsx
-var import_react7 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Field(props) {
   const a = useAppearance();
-  const base = (0, import_react7.useId)();
+  const base = (0, import_react6.useId)();
   const inputId = `${base}-input`;
   const hintId = `${base}-hint`;
   const errorId = `${base}-error`;
   const describedBy = [props.hint ? hintId : null, props.error ? errorId : null].filter(Boolean).join(" ");
-  const label = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { ...a.el("field.label", "throttle-field__label"), htmlFor: inputId, children: props.label });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ...a.el(props.elementKey ?? "field", "throttle-field"), children: [
-    props.labelExtra ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "throttle-field__labelrow", children: [
+  const label = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { ...a.el("field.label", "throttle-field__label"), htmlFor: inputId, children: props.label });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ...a.el(props.elementKey ?? "field", "throttle-field"), children: [
+    props.labelExtra ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "throttle-field__labelrow", children: [
       label,
       props.labelExtra
     ] }) : label,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "input",
       {
         ...a.el("field.input", `throttle-field__input${props.grouped ? " throttle-field__input--grouped" : ""}`),
@@ -1795,19 +1827,26 @@ function Field(props) {
         onChange: (e) => props.onChange(e.target.value)
       }
     ),
-    props.hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ...a.el("field.hint", "throttle-field__hint"), id: hintId, children: props.hint }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ...a.el("field.error", "throttle-field__error"), id: errorId, role: "alert", children: props.error ?? "" })
+    props.hint ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { ...a.el("field.hint", "throttle-field__hint"), id: hintId, children: props.hint }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { ...a.el("field.error", "throttle-field__error"), id: errorId, role: "alert", children: props.error ?? "" })
   ] });
 }
 function FieldGroup(props) {
   const a = useAppearance();
-  const items = import_react7.Children.toArray(props.children).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...a.el(props.elementKey ?? "field.group", "throttle-field-group"), children: items.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react7.Fragment, { children: [
-    i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "throttle-field-group__divider" }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "throttle-field-group__item", children: child })
+  const items = import_react6.Children.toArray(props.children).filter(Boolean);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...a.el(props.elementKey ?? "field.group", "throttle-field-group"), children: items.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react6.Fragment, { children: [
+    i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "throttle-field-group__divider" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "throttle-field-group__item", children: child })
   ] }, i)) });
 }
 
+// src/react/components/primitives/FieldRow.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function FieldRow({ children }) {
+  const a = useAppearance();
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...a.el("fieldRow", "throttle-fieldrow"), children });
+}
+
 // src/react/components/primitives/Alert.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function Alert(props) {
@@ -1835,7 +1874,23 @@ function Skeleton(props) {
 // src/react/components/primitives/Modal.tsx
 var import_react8 = require("react");
 var import_react_dom = require("react-dom");
+
+// src/react/components/surface.tsx
+var import_react7 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var Ctx5 = (0, import_react7.createContext)("standalone");
+function SurfaceProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Ctx5.Provider, { value: props.value, children: props.children });
+}
+function useSurface() {
+  return (0, import_react7.useContext)(Ctx5);
+}
+function useCardClass() {
+  return useSurface() === "modal" ? "throttle-card throttle-card--bare" : "throttle-card";
+}
+
+// src/react/components/primitives/Modal.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Modal(props) {
   const a = useAppearance();
@@ -1886,7 +1941,7 @@ function Modal(props) {
   }, [props.open, mounted]);
   if (!props.open || !mounted) return null;
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ...a.el(props.overlayKey ?? "modal.overlay", "throttle-modal__overlay"),
@@ -1894,7 +1949,7 @@ function Modal(props) {
         onClick: (e) => {
           if (e.target === e.currentTarget) props.onClose();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             ...a.el(props.containerKey ?? "modal.container", props.size === "compact" ? "throttle-modal__container throttle-modal__container--compact" : "throttle-modal__container"),
@@ -1904,7 +1959,7 @@ function Modal(props) {
             "aria-labelledby": props.labelledBy,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "button",
                 {
                   ...a.el("modal.closeButton", "throttle-modal__close"),
@@ -1914,7 +1969,7 @@ function Modal(props) {
                   children: "\xD7"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SurfaceProvider, { value: "modal", children: props.children })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SurfaceProvider, { value: "modal", children: props.children })
             ]
           }
         )
@@ -1924,16 +1979,69 @@ function Modal(props) {
   );
 }
 
-// src/react/components/primitives/Dropdown.tsx
+// src/react/components/primitives/Confirm.tsx
 var import_react9 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ConfirmContext = (0, import_react9.createContext)(null);
+function ConfirmProvider({ children }) {
+  const [request2, setRequest] = (0, import_react9.useState)(null);
+  const { t } = useCopy();
+  const a = useAppearance();
+  const titleId = (0, import_react9.useId)();
+  const settle = (0, import_react9.useRef)(null);
+  const answer = (0, import_react9.useCallback)((value) => {
+    settle.current?.(value);
+    settle.current = null;
+    setRequest(null);
+  }, []);
+  const ask = (0, import_react9.useCallback)((next) => {
+    settle.current?.(false);
+    setRequest(next);
+    return new Promise((resolve) => {
+      settle.current = resolve;
+    });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ConfirmContext.Provider, { value: ask, children: [
+    children,
+    request2 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Modal, { open: true, onClose: () => answer(false), labelledBy: titleId, size: "compact", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ...a.el("confirm.header", "throttle-modal__header"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { id: titleId, ...a.el("confirm.title", "throttle-modal__title"), children: request2.title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...a.el("confirm.body", "throttle-modal__body"), children: [
+        request2.body ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "throttle-muted", children: request2.body }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "throttle-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Button,
+            {
+              elementKey: "confirm.confirmButton",
+              variant: request2.tone === "danger" ? "danger" : "primary",
+              onClick: () => answer(true),
+              children: request2.confirmLabel ?? t.common.delete
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { elementKey: "confirm.cancelButton", variant: "secondary", onClick: () => answer(false), children: request2.cancelLabel ?? t.common.keepIt })
+        ] })
+      ] })
+    ] }) : null
+  ] });
+}
+function useConfirm() {
+  const ask = (0, import_react9.useContext)(ConfirmContext);
+  const { t } = useCopy();
+  return (0, import_react9.useMemo)(
+    () => ask ?? (async (request2) => window.confirm(request2.title || t.common.confirm)),
+    [ask, t]
+  );
+}
+
+// src/react/components/primitives/Dropdown.tsx
+var import_react10 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Dropdown(props) {
   const a = useAppearance();
-  const [open, setOpen] = (0, import_react9.useState)(false);
-  const root = (0, import_react9.useRef)(null);
-  const trigger = (0, import_react9.useRef)(null);
-  const menu = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const root = (0, import_react10.useRef)(null);
+  const trigger = (0, import_react10.useRef)(null);
+  const menu = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     if (!open) return;
     menu.current?.querySelector('[role="menuitem"]')?.focus();
     const onDown = (e) => {
@@ -1959,8 +2067,8 @@ function Dropdown(props) {
     const next = (at + delta + items.length) % items.length;
     items[next < 0 ? items.length - 1 : next].focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref: root, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: root, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         ref: trigger,
@@ -1973,7 +2081,7 @@ function Dropdown(props) {
         children: props.trigger
       }
     ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    open ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         ref: menu,
@@ -1999,24 +2107,24 @@ function DropdownItem(props) {
   const a = useAppearance();
   const attrs = a.el(props.itemKey ?? "dropdown.item", "throttle-dropdown__item");
   if (props.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { ...attrs, role: "menuitem", href: props.href, tabIndex: -1, children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { ...attrs, role: "menuitem", href: props.href, tabIndex: -1, children: props.children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { ...attrs, role: "menuitem", type: "button", tabIndex: -1, onClick: props.onClick, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { ...attrs, role: "menuitem", type: "button", tabIndex: -1, onClick: props.onClick, children: props.children });
 }
 function DropdownSeparator() {
   const a = useAppearance();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", { ...a.el("dropdown.separator", "throttle-dropdown__separator") });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("hr", { ...a.el("dropdown.separator", "throttle-dropdown__separator") });
 }
 
 // src/react/components/primitives/Tabs.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Tabs(props) {
   const a = useAppearance();
   const at = props.tabs.findIndex((t) => t.id === props.active);
   const vertical = props.orientation === "vertical";
   const listClass = vertical ? "throttle-tabs__rail" : "throttle-tabs__list";
   const itemClass = vertical ? "throttle-tabs__railitem" : "throttle-tabs__tab";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       ...a.el("tabs.list", listClass),
@@ -2035,7 +2143,7 @@ function Tabs(props) {
       children: props.tabs.map((tab) => {
         const selected = tab.id === props.active;
         const { className, ...rest } = a.el("tabs.tab", itemClass);
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "button",
           {
             ...rest,
@@ -2060,16 +2168,16 @@ function Tabs(props) {
 }
 
 // src/react/components/primitives/DataTable.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function DataTable(props) {
   const a = useAppearance();
   const clickable = Boolean(props.onRowClick);
   return (
     // Tables are the one thing allowed to be wider than the panel; it scrolls
     // rather than forcing the whole page to.
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "throttle-table__scroll", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { ...a.el(props.tableKey ?? "table", "throttle-table"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { children: props.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("th", { ...a.el("table.head", "throttle-table__head"), scope: "col", children: col.label }, col.key)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { children: props.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "throttle-table__scroll", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("table", { ...a.el(props.tableKey ?? "table", "throttle-table"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tr", { children: props.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("th", { ...a.el("table.head", "throttle-table__head"), scope: "col", children: col.label }, col.key)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tbody", { children: props.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "tr",
         {
           ...a.el(props.rowElementKey ?? "table.row", "throttle-table__row"),
@@ -2081,7 +2189,7 @@ function DataTable(props) {
               props.onRowClick(row);
             }
           } : void 0,
-          children: props.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { ...a.el("table.cell", "throttle-table__cell"), children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
+          children: props.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { ...a.el("table.cell", "throttle-table__cell"), children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
         },
         props.rowKey(row)
       )) })
@@ -2090,48 +2198,49 @@ function DataTable(props) {
 }
 
 // src/react/components/primitives/EmptyState.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function EmptyState(props) {
   const a = useAppearance();
   const Slot = a.slots.EmptyState;
-  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Slot, { title: props.title, description: props.description });
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ...a.el("emptyState", "throttle-empty"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { ...a.el("emptyState.title", "throttle-empty__title"), children: props.title }),
-    props.description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { ...a.el("emptyState.description", "throttle-empty__description"), children: props.description }) : null
+  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Slot, { title: props.title, description: props.description });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ...a.el("emptyState", "throttle-empty"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { ...a.el("emptyState.title", "throttle-empty__title"), children: props.title }),
+    props.description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { ...a.el("emptyState.description", "throttle-empty__description"), children: props.description }) : null
   ] });
 }
 
 // src/react/components/primitives/Avatar.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Avatar(props) {
   const a = useAppearance();
   const Slot = a.slots.Avatar;
-  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Slot, { name: props.name, email: props.email });
+  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Slot, { name: props.name, email: props.email });
   const initials = props.name.split(" ").map((part) => part.trim()[0]).filter(Boolean).slice(0, 2).join("") || props.email.trim()[0] || "?";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { ...a.el("avatar", "throttle-avatar"), title: props.email, children: initials.toUpperCase() });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { ...a.el("avatar", "throttle-avatar"), title: props.email, children: initials.toUpperCase() });
 }
 
 // src/react/components/primitives/Badge.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Badge(props) {
   const a = useAppearance();
   const tone = props.tone ?? "neutral";
   const base = tone === "neutral" ? "throttle-badge" : `throttle-badge throttle-badge--${tone}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { ...a.el(props.elementKey ?? "badge", base), children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { ...a.el(props.elementKey ?? "badge", base), children: props.children });
 }
 
 // src/react/components/auth/StepUpDialog.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function StepUpDialog(props) {
   const a = useAppearance();
   const cardClass = useCardClass();
   const { t } = useCopy();
-  const [password, setPassword] = (0, import_react10.useState)("");
-  const titleId = (0, import_react10.useId)();
-  (0, import_react10.useEffect)(() => {
+  const [password, setPassword] = (0, import_react11.useState)("");
+  const titleId = (0, import_react11.useId)();
+  (0, import_react11.useEffect)(() => {
     if (!props.open) setPassword("");
   }, [props.open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Modal, { open: props.open, onClose: () => props.onResolve(null), labelledBy: titleId, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ...a.el("stepUp.root", cardClass), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Modal, { open: props.open, onClose: () => props.onResolve(null), labelledBy: titleId, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...a.el("stepUp.root", cardClass), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "form",
     {
       onSubmit: (e) => {
@@ -2139,12 +2248,12 @@ function StepUpDialog(props) {
         props.onResolve(password);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "throttle-card__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { id: titleId, ...a.el("stepUp.title", "throttle-card__title"), children: t.stepUp.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "throttle-card__description", children: t.stepUp.description })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "throttle-card__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { id: titleId, ...a.el("stepUp.title", "throttle-card__title"), children: t.stepUp.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "throttle-card__description", children: t.stepUp.description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             Field,
             {
               label: t.stepUp.password,
@@ -2156,8 +2265,8 @@ function StepUpDialog(props) {
               elementKey: "stepUp.passwordField"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { type: "submit", elementKey: "stepUp.submitButton", children: t.stepUp.submitButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "link", elementKey: "stepUp.cancelButton", onClick: () => props.onResolve(null), children: t.stepUp.cancelButton })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "submit", elementKey: "stepUp.submitButton", children: t.stepUp.submitButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "link", elementKey: "stepUp.cancelButton", onClick: () => props.onResolve(null), children: t.stepUp.cancelButton })
         ] })
       ]
     }
@@ -2165,23 +2274,23 @@ function StepUpDialog(props) {
 }
 
 // src/react/components/auth/AuthModal.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/react/components/auth/AuthFlow.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/react/components/auth/SignIn.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/react/components/useAction.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useAction() {
   const { errorMessage } = useCopy();
-  const [submitting, setSubmitting] = (0, import_react11.useState)(false);
-  const [error, setError] = (0, import_react11.useState)(null);
-  const [notice, setNotice] = (0, import_react11.useState)(null);
-  const inFlight = (0, import_react11.useRef)(false);
-  const run = (0, import_react11.useCallback)(
+  const [submitting, setSubmitting] = (0, import_react12.useState)(false);
+  const [error, setError] = (0, import_react12.useState)(null);
+  const [notice, setNotice] = (0, import_react12.useState)(null);
+  const inFlight = (0, import_react12.useRef)(false);
+  const run = (0, import_react12.useCallback)(
     async (fn) => {
       if (inFlight.current) return;
       inFlight.current = true;
@@ -2204,7 +2313,7 @@ function useAction() {
 }
 
 // src/react/components/auth/SignIn.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function SignIn(props) {
   const a = useAppearance(props.appearance);
   const cardClass = useCardClass();
@@ -2212,14 +2321,14 @@ function SignIn(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, run } = useAction();
-  const [email, setEmail] = (0, import_react12.useState)("");
-  const [password, setPassword] = (0, import_react12.useState)("");
+  const [email, setEmail] = (0, import_react13.useState)("");
+  const [password, setPassword] = (0, import_react13.useState)("");
   const variant = props.variant ?? "quiet";
   const branded = variant === "branded";
   const grouped = variant === "grouped";
   const logo = useBrandLogo(props.logo);
-  const forgotLink = props.onForgotPassword ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "link", size: "xs", elementKey: "signIn.forgotLink", onClick: props.onForgotPassword, children: t.signIn.forgotLink }) : null;
-  const emailField = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  const forgotLink = props.onForgotPassword ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", size: "xs", elementKey: "signIn.forgotLink", onClick: props.onForgotPassword, children: t.signIn.forgotLink }) : null;
+  const emailField = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Field,
     {
       label: t.signIn.email,
@@ -2232,7 +2341,7 @@ function SignIn(props) {
       grouped
     }
   );
-  const passwordField = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  const passwordField = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Field,
     {
       label: t.signIn.password,
@@ -2246,7 +2355,7 @@ function SignIn(props) {
       labelExtra: grouped ? void 0 : forgotLink
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "form",
     {
       ...a.el("signIn.root", cardClass),
@@ -2258,7 +2367,7 @@ function SignIn(props) {
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           CardHeader,
           {
             title: t.signIn.title,
@@ -2269,24 +2378,24 @@ function SignIn(props) {
             branded
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardBody, { children: [
-          grouped ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(FieldGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardBody, { children: [
+          grouped ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(FieldGroup, { children: [
             emailField,
             passwordField
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
             emailField,
             passwordField
           ] }),
-          grouped && forgotLink ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "throttle-field-group__forgot", children: forgotLink }) : null,
-          error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Alert, { tone: "error", children: error }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { type: "submit", loading: submitting, elementKey: "signIn.submitButton", children: t.signIn.submitButton })
+          grouped && forgotLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "throttle-field-group__forgot", children: forgotLink }) : null,
+          error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Alert, { tone: "error", children: error }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { type: "submit", loading: submitting, elementKey: "signIn.submitButton", children: t.signIn.submitButton })
         ] }),
-        props.onSignUp ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardFooter, { ruled: !branded, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "throttle-muted", children: [
+        props.onSignUp ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardFooter, { ruled: !branded, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "throttle-muted", children: [
             t.signIn.switchPrompt,
             " "
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "link", elementKey: "signIn.switchLink", onClick: props.onSignUp, children: t.signIn.switchLink })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", elementKey: "signIn.switchLink", onClick: props.onSignUp, children: t.signIn.switchLink })
         ] }) : null
       ]
     }
@@ -2294,8 +2403,8 @@ function SignIn(props) {
 }
 
 // src/react/components/auth/SignUp.tsx
-var import_react13 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function SignUp(props) {
   const a = useAppearance(props.appearance);
   const cardClass = useCardClass();
@@ -2303,13 +2412,13 @@ function SignUp(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, notice, run } = useAction();
-  const [email, setEmail] = (0, import_react13.useState)("");
-  const [password, setPassword] = (0, import_react13.useState)("");
+  const [email, setEmail] = (0, import_react14.useState)("");
+  const [password, setPassword] = (0, import_react14.useState)("");
   const variant = props.variant ?? "quiet";
   const branded = variant === "branded";
   const grouped = variant === "grouped";
   const logo = useBrandLogo(props.logo);
-  const emailField = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const emailField = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Field,
     {
       label: t.signUp.email,
@@ -2322,7 +2431,7 @@ function SignUp(props) {
       grouped
     }
   );
-  const passwordField = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const passwordField = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Field,
     {
       label: t.signUp.password,
@@ -2335,7 +2444,7 @@ function SignUp(props) {
       grouped
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "form",
     {
       ...a.el("signUp.root", cardClass),
@@ -2351,7 +2460,7 @@ function SignUp(props) {
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           CardHeader,
           {
             title: t.signUp.title,
@@ -2362,24 +2471,24 @@ function SignUp(props) {
             branded
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { children: [
-          grouped ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(FieldGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CardBody, { children: [
+          grouped ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(FieldGroup, { children: [
             emailField,
             passwordField
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
             emailField,
             passwordField
           ] }),
-          error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Alert, { tone: "error", children: error }) : null,
-          notice ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Alert, { tone: "info", children: notice }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "submit", loading: submitting, elementKey: "signUp.submitButton", children: t.signUp.submitButton })
+          error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Alert, { tone: "error", children: error }) : null,
+          notice ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Alert, { tone: "info", children: notice }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { type: "submit", loading: submitting, elementKey: "signUp.submitButton", children: t.signUp.submitButton })
         ] }),
-        props.onSignIn ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardFooter, { ruled: !branded, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "throttle-muted", children: [
+        props.onSignIn ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CardFooter, { ruled: !branded, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "throttle-muted", children: [
             t.signUp.switchPrompt,
             " "
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "link", elementKey: "signUp.switchLink", onClick: props.onSignIn, children: t.signUp.switchLink })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { variant: "link", elementKey: "signUp.switchLink", onClick: props.onSignIn, children: t.signUp.switchLink })
         ] }) : null
       ]
     }
@@ -2387,8 +2496,8 @@ function SignUp(props) {
 }
 
 // src/react/components/auth/ForgotPassword.tsx
-var import_react14 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function ForgotPassword(props) {
   const a = useAppearance(props.appearance);
   const cardClass = useCardClass();
@@ -2396,10 +2505,10 @@ function ForgotPassword(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, notice, run } = useAction();
-  const [email, setEmail] = (0, import_react14.useState)("");
+  const [email, setEmail] = (0, import_react15.useState)("");
   const branded = (props.variant ?? "quiet") === "branded";
   const logo = useBrandLogo(props.logo);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "form",
     {
       ...a.el("forgotPassword.root", cardClass),
@@ -2411,7 +2520,7 @@ function ForgotPassword(props) {
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           CardHeader,
           {
             title: t.forgotPassword.title,
@@ -2422,8 +2531,8 @@ function ForgotPassword(props) {
             branded
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             Field,
             {
               label: t.forgotPassword.email,
@@ -2435,19 +2544,19 @@ function ForgotPassword(props) {
               elementKey: "forgotPassword.emailField"
             }
           ),
-          error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Alert, { tone: "error", children: error }) : null,
-          notice ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Alert, { tone: "success", children: notice }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { type: "submit", loading: submitting, elementKey: "forgotPassword.submitButton", children: t.forgotPassword.submitButton })
+          error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Alert, { tone: "error", children: error }) : null,
+          notice ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Alert, { tone: "success", children: notice }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { type: "submit", loading: submitting, elementKey: "forgotPassword.submitButton", children: t.forgotPassword.submitButton })
         ] }),
-        props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardFooter, { ruled: !branded, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", elementKey: "forgotPassword.backLink", onClick: props.onBack, children: t.forgotPassword.backLink }) }) : null
+        props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CardFooter, { ruled: !branded, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "link", elementKey: "forgotPassword.backLink", onClick: props.onBack, children: t.forgotPassword.backLink }) }) : null
       ]
     }
   ) }) });
 }
 
 // src/react/components/auth/ResetPassword.tsx
-var import_react15 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react16 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function ResetPassword(props) {
   const a = useAppearance(props.appearance);
   const cardClass = useCardClass();
@@ -2455,11 +2564,11 @@ function ResetPassword(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, notice, run } = useAction();
-  const [password, setPassword] = (0, import_react15.useState)("");
+  const [password, setPassword] = (0, import_react16.useState)("");
   const branded = (props.variant ?? "quiet") === "branded";
   const logo = useBrandLogo(props.logo);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ...a.el("resetPassword.root", cardClass), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ...a.el("resetPassword.root", cardClass), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       CardHeader,
       {
         title: t.resetPassword.title,
@@ -2469,11 +2578,11 @@ function ResetPassword(props) {
         branded
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CardBody, { children: !props.token ? (
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CardBody, { children: !props.token ? (
       // No form at all without a token. A submit button that can only
       // fail is worse than an explanation.
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Alert, { tone: "error", children: t.resetPassword.missingToken })
-    ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Alert, { tone: "error", children: t.resetPassword.missingToken })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "form",
       {
         onSubmit: (e) => {
@@ -2484,8 +2593,8 @@ function ResetPassword(props) {
             return t.resetPassword.doneNotice;
           });
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "throttle-stack", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "throttle-stack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             Field,
             {
               label: t.resetPassword.password,
@@ -2497,9 +2606,9 @@ function ResetPassword(props) {
               elementKey: "resetPassword.passwordField"
             }
           ),
-          error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Alert, { tone: "error", children: error }) : null,
-          notice ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Alert, { tone: "success", children: notice }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { type: "submit", loading: submitting, elementKey: "resetPassword.submitButton", children: t.resetPassword.submitButton })
+          error ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Alert, { tone: "error", children: error }) : null,
+          notice ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Alert, { tone: "success", children: notice }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { type: "submit", loading: submitting, elementKey: "resetPassword.submitButton", children: t.resetPassword.submitButton })
         ] })
       }
     ) })
@@ -2507,8 +2616,8 @@ function ResetPassword(props) {
 }
 
 // src/react/components/auth/VerifyEmail.tsx
-var import_react16 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function VerifyEmail(props) {
   const a = useAppearance(props.appearance);
   const cardClass = useCardClass();
@@ -2516,12 +2625,12 @@ function VerifyEmail(props) {
   const { t, errorMessage } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, notice, run } = useAction();
-  const [state, setState] = (0, import_react16.useState)(props.token ? "verifying" : "idle");
-  const [error, setError] = (0, import_react16.useState)(null);
+  const [state, setState] = (0, import_react17.useState)(props.token ? "verifying" : "idle");
+  const [error, setError] = (0, import_react17.useState)(null);
   const branded = (props.variant ?? "quiet") === "branded";
   const logo = useBrandLogo(props.logo);
-  const attempted = (0, import_react16.useRef)(null);
-  (0, import_react16.useEffect)(() => {
+  const attempted = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     const token = props.token;
     if (!token || attempted.current === token) return;
     attempted.current = token;
@@ -2534,8 +2643,8 @@ function VerifyEmail(props) {
       setState("failed");
     });
   }, [props.token, auth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ...a.el("verifyEmail.root", cardClass), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...a.el("verifyEmail.root", cardClass), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       CardHeader,
       {
         title: t.verifyEmail.title,
@@ -2545,17 +2654,17 @@ function VerifyEmail(props) {
         branded
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(CardBody, { children: [
-      state === "verifying" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Spinner, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(CardBody, { children: [
+      state === "verifying" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("p", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Spinner, {}),
         " ",
         t.verifyEmail.verifying
       ] }) : null,
-      state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Alert, { tone: "success", children: t.verifyEmail.success }) : null,
-      state === "failed" && error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Alert, { tone: "error", children: error }) : null,
-      state === "idle" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "throttle-muted", children: t.verifyEmail.instructions }) : null,
-      notice ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Alert, { tone: "success", children: notice }) : null,
-      state !== "done" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Alert, { tone: "success", children: t.verifyEmail.success }) : null,
+      state === "failed" && error ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Alert, { tone: "error", children: error }) : null,
+      state === "idle" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "throttle-muted", children: t.verifyEmail.instructions }) : null,
+      notice ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Alert, { tone: "success", children: notice }) : null,
+      state !== "done" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Button,
         {
           variant: "secondary",
@@ -2573,7 +2682,7 @@ function VerifyEmail(props) {
 }
 
 // src/react/components/auth/AuthFlow.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var HASH_FOR = {
   signIn: "#/sign-in",
   signUp: "#/sign-up",
@@ -2599,9 +2708,9 @@ function readLocation() {
 function AuthFlow(props) {
   const a = useAppearance(props.appearance);
   const controlled = props.view !== void 0;
-  const [internal, setInternal] = (0, import_react17.useState)(props.initialView ?? "signIn");
-  const [urlToken, setUrlToken] = (0, import_react17.useState)(void 0);
-  (0, import_react17.useEffect)(() => {
+  const [internal, setInternal] = (0, import_react18.useState)(props.initialView ?? "signIn");
+  const [urlToken, setUrlToken] = (0, import_react18.useState)(void 0);
+  (0, import_react18.useEffect)(() => {
     const found = readLocation();
     if (found.token) setUrlToken(found.token);
     if (found.view && !controlled && props.initialView === void 0) setInternal(found.view);
@@ -2615,7 +2724,7 @@ function AuthFlow(props) {
       window.location.hash = HASH_FOR[next];
     }
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (props.routing !== "hash" || typeof window === "undefined") return;
     const onHashChange = () => {
       if (controlled) return;
@@ -2631,8 +2740,8 @@ function AuthFlow(props) {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [props.routing, controlled]);
   const shared = { appearance: props.appearance, localization: props.localization };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ...a.el("authFlow.root"), children: [
-    view === "signIn" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ...a.el("authFlow.root"), children: [
+    view === "signIn" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       SignIn,
       {
         ...shared,
@@ -2641,19 +2750,19 @@ function AuthFlow(props) {
         onSignUp: () => go("signUp")
       }
     ) : null,
-    view === "signUp" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SignUp, { ...shared, onSuccess: props.afterSignUp, onSignIn: () => go("signIn") }) : null,
-    view === "forgotPassword" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ForgotPassword, { ...shared, onBack: () => go("signIn") }) : null,
-    view === "resetPassword" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ResetPassword, { ...shared, token, onSuccess: () => go("signIn") }) : null,
-    view === "verifyEmail" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(VerifyEmail, { ...shared, token }) : null
+    view === "signUp" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SignUp, { ...shared, onSuccess: props.afterSignUp, onSignIn: () => go("signIn") }) : null,
+    view === "forgotPassword" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ForgotPassword, { ...shared, onBack: () => go("signIn") }) : null,
+    view === "resetPassword" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ResetPassword, { ...shared, token, onSuccess: () => go("signIn") }) : null,
+    view === "verifyEmail" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(VerifyEmail, { ...shared, token }) : null
   ] }) });
 }
 
 // src/react/components/auth/AuthModal.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function AuthModal(props) {
   const scoped = useAppearanceProviderValue(props.appearance);
-  const titleId = (0, import_react18.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  const titleId = (0, import_react19.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Modal,
     {
       open: props.open,
@@ -2663,8 +2772,8 @@ function AuthModal(props) {
       overlayKey: "authModal.overlay",
       containerKey: "authModal.container",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { id: titleId, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Account" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { id: titleId, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Account" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           AuthFlow,
           {
             initialView: props.initialView,
@@ -2680,14 +2789,14 @@ function AuthModal(props) {
 }
 
 // src/react/components/account/AccountModal.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/react/components/account/AccountDashboard.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/react/components/account/VerifyEmailBanner.tsx
-var import_react19 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var DISMISS_KEY = "throttle-auth:verify-banner-dismissed";
 function readDismissed() {
   try {
@@ -2708,14 +2817,14 @@ function VerifyEmailBanner(props) {
   const { t } = useCopy(props.localization);
   const { auth, status, emailVerified } = useAuth();
   const { submitting, notice, error, run } = useAction();
-  const [dismissed, setDismissed] = (0, import_react19.useState)(readDismissed);
+  const [dismissed, setDismissed] = (0, import_react20.useState)(readDismissed);
   if (status !== "authenticated" || emailVerified || dismissed) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ...a.el("verifyBanner.root", "throttle-banner"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { ...a.el("verifyBanner.message"), children: t.verifyBanner.message }),
-    notice ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Alert, { tone: "success", children: notice }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Alert, { tone: "error", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "throttle-actions", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ...a.el("verifyBanner.root", "throttle-banner"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { ...a.el("verifyBanner.message"), children: t.verifyBanner.message }),
+    notice ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Alert, { tone: "success", children: notice }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "throttle-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Button,
         {
           variant: "secondary",
@@ -2728,7 +2837,7 @@ function VerifyEmailBanner(props) {
           children: t.verifyBanner.resendButton
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         Button,
         {
           variant: "link",
@@ -2745,9 +2854,9 @@ function VerifyEmailBanner(props) {
 }
 
 // src/react/components/account/icons.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Glyph(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "svg",
     {
       className: "throttle-tabs__railicon",
@@ -2766,43 +2875,43 @@ function Glyph(props) {
   );
 }
 var ACCOUNT_ICONS = {
-  profile: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "8", r: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M4 21c0-4 3.6-6 8-6s8 2 8 6" })
+  profile: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "8", r: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M4 21c0-4 3.6-6 8-6s8 2 8 6" })
   ] }),
-  addresses: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M12 21s7-5.3 7-11a7 7 0 1 0-14 0c0 5.7 7 11 7 11Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "10", r: "2.5" })
+  addresses: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M12 21s7-5.3 7-11a7 7 0 1 0-14 0c0 5.7 7 11 7 11Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "10", r: "2.5" })
   ] }),
-  paymentMethods: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("rect", { x: "2.5", y: "5.5", width: "19", height: "13", rx: "2.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M2.5 10h19" })
+  paymentMethods: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("rect", { x: "2.5", y: "5.5", width: "19", height: "13", rx: "2.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M2.5 10h19" })
   ] }),
-  orders: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M4 7h16v13H4z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M8 7V4h8v3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M8 12h8" })
+  orders: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M4 7h16v13H4z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M8 7V4h8v3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M8 12h8" })
   ] }),
-  invoices: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M6 3h12v18l-3-2-3 2-3-2-3 2Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M9 8h6M9 12h6" })
+  invoices: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M6 3h12v18l-3-2-3 2-3-2-3 2Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M9 8h6M9 12h6" })
   ] }),
-  subscriptions: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M3 12a9 9 0 0 1 15.5-6.2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M21 12a9 9 0 0 1-15.5 6.2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M18 3v4h-4M6 21v-4h4" })
+  subscriptions: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M3 12a9 9 0 0 1 15.5-6.2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M21 12a9 9 0 0 1-15.5 6.2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M18 3v4h-4M6 21v-4h4" })
   ] }),
-  security: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M12 3 4 6.5V12c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6.5Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "m9 12 2 2 4-4" })
+  security: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M12 3 4 6.5V12c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6.5Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "m9 12 2 2 4-4" })
   ] })
 };
 
 // src/react/components/account/ProfilePanel.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/react/hooks.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 function asError(err) {
   if (err instanceof ThrottleAuthError) return err;
   const anyErr = err;
@@ -2814,19 +2923,19 @@ function asError(err) {
 }
 function useResource(empty, load, deps) {
   const { status, emailVerified } = useAuth();
-  const [data, setData] = (0, import_react20.useState)(empty);
-  const [isLoading, setIsLoading] = (0, import_react20.useState)(status === "loading");
-  const [error, setError] = (0, import_react20.useState)(null);
-  const gen = (0, import_react20.useRef)(0);
-  const alive = (0, import_react20.useRef)(true);
-  (0, import_react20.useEffect)(() => {
+  const [data, setData] = (0, import_react21.useState)(empty);
+  const [isLoading, setIsLoading] = (0, import_react21.useState)(status === "loading");
+  const [error, setError] = (0, import_react21.useState)(null);
+  const gen = (0, import_react21.useRef)(0);
+  const alive = (0, import_react21.useRef)(true);
+  (0, import_react21.useEffect)(() => {
     alive.current = true;
     return () => {
       alive.current = false;
       gen.current++;
     };
   }, []);
-  const refetch = (0, import_react20.useCallback)(async () => {
+  const refetch = (0, import_react21.useCallback)(async () => {
     const mine = ++gen.current;
     setIsLoading(true);
     try {
@@ -2841,7 +2950,7 @@ function useResource(empty, load, deps) {
       if (alive.current && gen.current === mine) setIsLoading(false);
     }
   }, deps);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (status !== "authenticated") {
       gen.current++;
       setData(empty);
@@ -2856,7 +2965,7 @@ function useResource(empty, load, deps) {
 function useCustomer() {
   const { account } = useAuth();
   const res = useResource(null, () => account.getProfile(), [account]);
-  const update = (0, import_react20.useCallback)(async (patch) => {
+  const update = (0, import_react21.useCallback)(async (patch) => {
     await account.updateProfile(patch);
     await res.refetch();
   }, [account, res]);
@@ -2925,32 +3034,32 @@ function useInvoice(id) {
 }
 
 // src/react/components/account/PanelState.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function PanelState(props) {
   const { t, errorMessage } = useCopy();
   const { data, isLoading, error, refetch } = props.resource;
   const empty = props.isEmpty(data);
-  if (isLoading && empty) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Skeleton, { count: props.skeletonRows ?? 3 });
-  const errorBanner = error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "throttle-stack", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Alert, { tone: "error", children: errorMessage(error) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { variant: "secondary", onClick: () => void refetch(), children: t.common.retry })
+  if (isLoading && empty) return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { count: props.skeletonRows ?? 3 });
+  const errorBanner = error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "throttle-stack", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Alert, { tone: "error", children: errorMessage(error) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { variant: "secondary", onClick: () => void refetch(), children: t.common.retry })
   ] }) : null;
   const gatedByVerification = error?.code === "verification_required";
   if (gatedByVerification && empty) {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EmptyState, { title: props.emptyTitle, description: props.gatedDescription ?? props.emptyDescription });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(EmptyState, { title: props.emptyTitle, description: props.gatedDescription ?? props.emptyDescription });
   }
   if (error && empty) return errorBanner;
   if (empty) {
-    return props.gated ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EmptyState, { title: props.emptyTitle, description: props.gatedDescription }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EmptyState, { title: props.emptyTitle, description: props.emptyDescription });
+    return props.gated ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(EmptyState, { title: props.emptyTitle, description: props.gatedDescription }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(EmptyState, { title: props.emptyTitle, description: props.emptyDescription });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
     errorBanner,
     props.children(data)
   ] });
 }
 
 // src/react/components/account/ProfilePanel.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ProfilePanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -2958,9 +3067,9 @@ function ProfilePanel(props) {
   const { status } = useAuth();
   const resource = useCustomer();
   const { submitting, error, notice, run } = useAction();
-  const [form, setForm] = (0, import_react21.useState)({ firstName: "", lastName: "", phone: "", company: "" });
-  const edited = (0, import_react21.useRef)(false);
-  (0, import_react21.useEffect)(() => {
+  const [form, setForm] = (0, import_react22.useState)({ firstName: "", lastName: "", phone: "", company: "" });
+  const edited = (0, import_react22.useRef)(false);
+  (0, import_react22.useEffect)(() => {
     const c = resource.data;
     if (!c || edited.current) return;
     setForm({
@@ -2971,14 +3080,14 @@ function ProfilePanel(props) {
     });
   }, [resource.data]);
   if (status === "unauthenticated") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ...a.el("profilePanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...a.el("profilePanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     PanelState,
     {
       resource,
       isEmpty: (c) => c === null,
       emptyTitle: t.common.somethingWentWrong,
       skeletonRows: 4,
-      children: (customer) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      children: (customer) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         "form",
         {
           ...a.el("profilePanel.form", "throttle-stack"),
@@ -2996,7 +3105,7 @@ function ProfilePanel(props) {
             });
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Field,
               {
                 label: t.profile.email,
@@ -3008,58 +3117,62 @@ function ProfilePanel(props) {
                 hint: t.profile.emailReadOnly
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              Field,
-              {
-                label: t.profile.firstName,
-                value: form.firstName,
-                autoComplete: "given-name",
-                onChange: (v) => {
-                  edited.current = true;
-                  setForm((f) => ({ ...f, firstName: v }));
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(FieldRow, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                Field,
+                {
+                  label: t.profile.firstName,
+                  value: form.firstName,
+                  autoComplete: "given-name",
+                  onChange: (v) => {
+                    edited.current = true;
+                    setForm((f) => ({ ...f, firstName: v }));
+                  }
                 }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              Field,
-              {
-                label: t.profile.lastName,
-                value: form.lastName,
-                autoComplete: "family-name",
-                onChange: (v) => {
-                  edited.current = true;
-                  setForm((f) => ({ ...f, lastName: v }));
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                Field,
+                {
+                  label: t.profile.lastName,
+                  value: form.lastName,
+                  autoComplete: "family-name",
+                  onChange: (v) => {
+                    edited.current = true;
+                    setForm((f) => ({ ...f, lastName: v }));
+                  }
                 }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              Field,
-              {
-                label: t.profile.phone,
-                type: "tel",
-                value: form.phone,
-                autoComplete: "tel",
-                onChange: (v) => {
-                  edited.current = true;
-                  setForm((f) => ({ ...f, phone: v }));
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(FieldRow, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                Field,
+                {
+                  label: t.profile.phone,
+                  type: "tel",
+                  value: form.phone,
+                  autoComplete: "tel",
+                  onChange: (v) => {
+                    edited.current = true;
+                    setForm((f) => ({ ...f, phone: v }));
+                  }
                 }
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-              Field,
-              {
-                label: t.profile.company,
-                value: form.company,
-                autoComplete: "organization",
-                onChange: (v) => {
-                  edited.current = true;
-                  setForm((f) => ({ ...f, company: v }));
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                Field,
+                {
+                  label: t.profile.company,
+                  value: form.company,
+                  autoComplete: "organization",
+                  onChange: (v) => {
+                    edited.current = true;
+                    setForm((f) => ({ ...f, company: v }));
+                  }
                 }
-              }
-            ),
-            error ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Alert, { tone: "error", children: error }) : null,
-            notice ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Alert, { tone: "success", children: notice }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { type: "submit", loading: submitting, elementKey: "profilePanel.submitButton", children: t.profile.saveButton })
+              )
+            ] }),
+            error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Alert, { tone: "error", children: error }) : null,
+            notice ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Alert, { tone: "success", children: notice }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { type: "submit", loading: submitting, elementKey: "profilePanel.submitButton", children: t.profile.saveButton })
           ]
         }
       )
@@ -3068,16 +3181,16 @@ function ProfilePanel(props) {
 }
 
 // src/react/components/account/AddressesPanel.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 
 // src/react/components/account/AddressForm.tsx
-var import_react22 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react23 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function AddressForm(props) {
   const a = useAppearance();
   const { t } = useCopy();
   const i = props.initial;
-  const [form, setForm] = (0, import_react22.useState)({
+  const [form, setForm] = (0, import_react23.useState)({
     label: i?.label ?? "",
     firstName: i?.firstName ?? "",
     lastName: i?.lastName ?? "",
@@ -3091,7 +3204,7 @@ function AddressForm(props) {
     phone: i?.phone ?? ""
   });
   const set = (key) => (value) => setForm((f) => ({ ...f, [key]: value }));
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "form",
     {
       ...a.el("addressesPanel.form", "throttle-stack"),
@@ -3113,11 +3226,15 @@ function AddressForm(props) {
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.label, value: form.label, onChange: set("label") }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.firstName, value: form.firstName, onChange: set("firstName"), autoComplete: "given-name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.lastName, value: form.lastName, onChange: set("lastName"), autoComplete: "family-name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.company, value: form.company, onChange: set("company"), autoComplete: "organization" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(FieldRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.label, value: form.label, onChange: set("label") }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.company, value: form.company, onChange: set("company"), autoComplete: "organization" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(FieldRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.firstName, value: form.firstName, onChange: set("firstName"), autoComplete: "given-name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.lastName, value: form.lastName, onChange: set("lastName"), autoComplete: "family-name" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Field,
           {
             label: t.addresses.addressLine1,
@@ -3127,7 +3244,7 @@ function AddressForm(props) {
             autoComplete: "address-line1"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           Field,
           {
             label: t.addresses.addressLine2,
@@ -3136,41 +3253,45 @@ function AddressForm(props) {
             autoComplete: "address-line2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.city, value: form.city, onChange: set("city"), required: true, autoComplete: "address-level2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          Field,
-          {
-            label: t.addresses.stateProvince,
-            value: form.stateProvince,
-            onChange: set("stateProvince"),
-            autoComplete: "address-level1"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          Field,
-          {
-            label: t.addresses.postalCode,
-            value: form.postalCode,
-            onChange: set("postalCode"),
-            autoComplete: "postal-code"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          Field,
-          {
-            label: t.addresses.countryCode,
-            value: form.countryCode,
-            onChange: set("countryCode"),
-            required: true,
-            autoComplete: "country",
-            hint: "ISO 3166-1 alpha-2, e.g. GB"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.phone, type: "tel", value: form.phone, onChange: set("phone"), autoComplete: "tel" }),
-        props.error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Alert, { tone: "error", children: props.error }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "throttle-actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { type: "submit", loading: props.submitting, children: t.common.save }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { variant: "link", onClick: props.onCancel, children: t.common.cancel })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(FieldRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.city, value: form.city, onChange: set("city"), required: true, autoComplete: "address-level2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            Field,
+            {
+              label: t.addresses.stateProvince,
+              value: form.stateProvince,
+              onChange: set("stateProvince"),
+              autoComplete: "address-level1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(FieldRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            Field,
+            {
+              label: t.addresses.postalCode,
+              value: form.postalCode,
+              onChange: set("postalCode"),
+              autoComplete: "postal-code"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            Field,
+            {
+              label: t.addresses.countryCode,
+              value: form.countryCode,
+              onChange: set("countryCode"),
+              required: true,
+              autoComplete: "country",
+              hint: "ISO 3166-1 alpha-2, e.g. GB"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Field, { label: t.addresses.phone, type: "tel", value: form.phone, onChange: set("phone"), autoComplete: "tel" }),
+        props.error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Alert, { tone: "error", children: props.error }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "throttle-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { type: "submit", loading: props.submitting, children: t.common.save }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { variant: "link", onClick: props.onCancel, children: t.common.cancel })
         ] })
       ]
     }
@@ -3178,14 +3299,15 @@ function AddressForm(props) {
 }
 
 // src/react/components/account/AddressesPanel.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function AddressesPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t } = useCopy(props.localization);
   const resource = useAddresses();
   const { submitting, error, run } = useAction();
-  const [editing, setEditing] = (0, import_react23.useState)(null);
+  const confirm = useConfirm();
+  const [editing, setEditing] = (0, import_react24.useState)(null);
   const variant = props.variant ?? "rows";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
@@ -3193,9 +3315,9 @@ function AddressesPanel(props) {
   const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
   const close = () => setEditing(null);
   const formatAddress = (address) => [address.addressLine2, address.city, address.stateProvince, address.postalCode, address.countryCode].filter(Boolean).join(", ");
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...a.el("addressesPanel.root", "throttle-panel"), children: [
-    !editing && error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Alert, { tone: "error", children: error }) : null,
-    editing ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...a.el("addressesPanel.root", "throttle-panel"), children: [
+    !editing && error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Alert, { tone: "error", children: error }) : null,
+    editing ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       AddressForm,
       {
         initial: editing === "new" ? void 0 : editing,
@@ -3208,16 +3330,16 @@ function AddressesPanel(props) {
           close();
         })
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { elementKey: "addressesPanel.addButton", variant: "secondary", onClick: () => setEditing("new"), children: t.addresses.addButton }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { elementKey: "addressesPanel.addButton", variant: "secondary", onClick: () => setEditing("new"), children: t.addresses.addButton }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         PanelState,
         {
           resource,
           isEmpty: (rows) => rows.length === 0,
           emptyTitle: t.addresses.empty,
           emptyDescription: t.addresses.emptyDescription,
-          children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             DataTable,
             {
               tableKey: "addressesPanel.table",
@@ -3226,13 +3348,13 @@ function AddressesPanel(props) {
               rows,
               columns: [
                 { key: "label", label: t.addresses.label, render: (address) => address.label || address.addressLine1 },
-                { key: "address", label: t.addresses.columnAddress, render: (address) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                { key: "address", label: t.addresses.columnAddress, render: (address) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
                   address.addressLine1,
                   formatAddress(address) ? `, ${formatAddress(address)}` : ""
                 ] }) },
-                { key: "default", label: t.addresses.defaultBadge, render: (address) => address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null },
-                { key: "actions", label: t.common.actions, render: (address) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "throttle-actions", children: [
-                  !address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                { key: "default", label: t.addresses.defaultBadge, render: (address) => address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null },
+                { key: "actions", label: t.common.actions, render: (address) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "throttle-actions", children: [
+                  !address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     Button,
                     {
                       variant: "secondary",
@@ -3241,7 +3363,7 @@ function AddressesPanel(props) {
                       children: t.addresses.makeDefault
                     }
                   ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     Button,
                     {
                       variant: "secondary",
@@ -3250,14 +3372,14 @@ function AddressesPanel(props) {
                       children: t.common.edit
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     Button,
                     {
                       variant: "danger",
                       elementKey: "addressesPanel.deleteButton",
                       disabled: submitting,
-                      onClick: () => {
-                        if (!window.confirm(t.addresses.deleteConfirm)) return;
+                      onClick: async () => {
+                        if (!await confirm({ title: t.addresses.deleteConfirm, confirmLabel: t.addresses.deleteConfirmAction, tone: "danger" })) return;
                         void run(() => resource.remove(address.id));
                       },
                       children: t.common.delete
@@ -3266,17 +3388,17 @@ function AddressesPanel(props) {
                 ] }) }
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...a.el("addressesPanel.list", listBase), children: rows.map((address) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...a.el("addressesPanel.item", itemBase), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "throttle-row", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: address.label || address.addressLine1 }),
-                address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null
+          ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...a.el("addressesPanel.list", listBase), children: rows.map((address) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...a.el("addressesPanel.item", itemBase), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "throttle-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("strong", { children: address.label || address.addressLine1 }),
+                address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "throttle-muted", children: address.addressLine1 }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "throttle-muted", children: formatAddress(address) })
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "throttle-muted", children: address.addressLine1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "throttle-muted", children: formatAddress(address) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "throttle-actions", children: [
-              !address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "throttle-actions", children: [
+              !address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 Button,
                 {
                   variant: actionVariant("secondary"),
@@ -3285,7 +3407,7 @@ function AddressesPanel(props) {
                   children: t.addresses.makeDefault
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 Button,
                 {
                   variant: actionVariant("secondary"),
@@ -3294,14 +3416,14 @@ function AddressesPanel(props) {
                   children: t.common.edit
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 Button,
                 {
                   variant: actionVariant("danger"),
                   elementKey: "addressesPanel.deleteButton",
                   disabled: submitting,
-                  onClick: () => {
-                    if (!window.confirm(t.addresses.deleteConfirm)) return;
+                  onClick: async () => {
+                    if (!await confirm({ title: t.addresses.deleteConfirm, confirmLabel: t.addresses.deleteConfirmAction, tone: "danger" })) return;
                     void run(() => resource.remove(address.id));
                   },
                   children: t.common.delete
@@ -3316,23 +3438,23 @@ function AddressesPanel(props) {
 }
 
 // src/react/components/account/PaymentMethodsPanel.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/react/components/account/AddCardDialog.tsx
-var import_react24 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function AddCardDialog(props) {
   const { account } = useAuth();
-  const titleId = (0, import_react24.useId)();
+  const titleId = (0, import_react25.useId)();
   const { t } = useCopy(props.localization);
-  const [src, setSrc] = (0, import_react24.useState)(null);
-  const [error, setError] = (0, import_react24.useState)(null);
-  const [busy, setBusy] = (0, import_react24.useState)(false);
-  const onAdded = (0, import_react24.useRef)(props.onAdded);
-  const onClose = (0, import_react24.useRef)(props.onClose);
+  const [src, setSrc] = (0, import_react25.useState)(null);
+  const [error, setError] = (0, import_react25.useState)(null);
+  const [busy, setBusy] = (0, import_react25.useState)(false);
+  const onAdded = (0, import_react25.useRef)(props.onAdded);
+  const onClose = (0, import_react25.useRef)(props.onClose);
   onAdded.current = props.onAdded;
   onClose.current = props.onClose;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!props.open) {
       setSrc(null);
       setError(null);
@@ -3360,7 +3482,7 @@ function AddCardDialog(props) {
       live = false;
     };
   }, [props.open, account]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!src) return;
     const frameOrigin = (() => {
       try {
@@ -3395,23 +3517,25 @@ function AddCardDialog(props) {
     return () => window.removeEventListener("message", onMessage);
   }, [src, account, t]);
   if (!props.open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Modal, { open: true, onClose: props.onClose, labelledBy: titleId, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { id: titleId, children: t.paymentMethods.addTitle }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Alert, { tone: "error", children: error }) : null,
-    busy ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "throttle-centre", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Spinner, {}) }) : src ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      "iframe",
-      {
-        className: "throttle-cardframe",
-        src,
-        title: t.paymentMethods.addTitle,
-        sandbox: "allow-scripts allow-forms allow-same-origin"
-      }
-    ) : !error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "throttle-centre", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Spinner, {}) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Modal, { open: true, onClose: props.onClose, labelledBy: titleId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "throttle-modal__header", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h2", { id: titleId, className: "throttle-modal__title", children: t.paymentMethods.addTitle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "throttle-modal__body", children: [
+      error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Alert, { tone: "error", children: error }) : null,
+      busy ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "throttle-centre", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Spinner, {}) }) : src ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        "iframe",
+        {
+          className: "throttle-cardframe",
+          src,
+          title: t.paymentMethods.addTitle,
+          sandbox: "allow-scripts allow-forms allow-same-origin"
+        }
+      ) : !error ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "throttle-centre", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Spinner, {}) }) : null
+    ] })
   ] });
 }
 
 // src/react/components/account/PaymentMethodsPanel.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function PaymentMethodsPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -3419,7 +3543,8 @@ function PaymentMethodsPanel(props) {
   const { emailVerified } = useAuth();
   const resource = useSavedCards();
   const { submitting, error, run } = useAction();
-  const [adding, setAdding] = (0, import_react25.useState)(false);
+  const confirm = useConfirm();
+  const [adding, setAdding] = (0, import_react26.useState)(false);
   const variant = props.variant ?? "rows";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
@@ -3427,10 +3552,10 @@ 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__ */ (0, import_jsx_runtime34.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...a.el("paymentMethodsPanel.root", "throttle-panel"), children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Alert, { tone: "error", children: error }) : null,
-    emailVerified ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { elementKey: "paymentMethodsPanel.addButton", variant: "secondary", onClick: () => setAdding(true), children: t.paymentMethods.addButton }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...a.el("paymentMethodsPanel.root", "throttle-panel"), children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Alert, { tone: "error", children: error }) : null,
+    emailVerified ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { elementKey: "paymentMethodsPanel.addButton", variant: "secondary", onClick: () => setAdding(true), children: t.paymentMethods.addButton }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       AddCardDialog,
       {
         open: adding,
@@ -3441,7 +3566,7 @@ function PaymentMethodsPanel(props) {
         localization: props.localization
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       PanelState,
       {
         resource,
@@ -3450,7 +3575,7 @@ function PaymentMethodsPanel(props) {
         isEmpty: (rows) => rows.length === 0,
         emptyTitle: t.paymentMethods.empty,
         emptyDescription: t.paymentMethods.emptyDescription,
-        children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           DataTable,
           {
             tableKey: "paymentMethodsPanel.table",
@@ -3460,9 +3585,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__ */ (0, import_jsx_runtime34.jsx)(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null },
-              { key: "actions", label: t.common.actions, render: (card) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "throttle-actions", children: [
-                !card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              { key: "default", label: t.paymentMethods.defaultBadge, render: (card) => card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null },
+              { key: "actions", label: t.common.actions, render: (card) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "throttle-actions", children: [
+                !card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   Button,
                   {
                     variant: "secondary",
@@ -3472,14 +3597,14 @@ function PaymentMethodsPanel(props) {
                     children: t.paymentMethods.makeDefault
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   Button,
                   {
                     variant: "danger",
                     elementKey: "paymentMethodsPanel.deleteButton",
                     disabled: submitting,
-                    onClick: () => {
-                      if (!window.confirm(t.paymentMethods.deleteConfirm)) return;
+                    onClick: async () => {
+                      if (!await confirm({ title: t.paymentMethods.deleteConfirm, confirmLabel: t.paymentMethods.deleteConfirmAction, tone: "danger" })) return;
                       void run(() => resource.remove(card.id));
                     },
                     children: t.common.delete
@@ -3488,13 +3613,13 @@ function PaymentMethodsPanel(props) {
               ] }) }
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...a.el("paymentMethodsPanel.list", listBase), children: rows.map((card) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...a.el("paymentMethodsPanel.item", itemBase), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "throttle-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("strong", { children: cardLabel(card) }),
-              card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null
+        ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...a.el("paymentMethodsPanel.list", listBase), children: rows.map((card) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...a.el("paymentMethodsPanel.item", itemBase), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("strong", { children: cardLabel(card) }),
+              card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null
             ] }),
-            card.cardExpMonth && card.cardExpYear ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "throttle-muted", children: [
+            card.cardExpMonth && card.cardExpYear ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "throttle-muted", children: [
               t.paymentMethods.expires,
               " ",
               String(card.cardExpMonth).padStart(2, "0"),
@@ -3502,8 +3627,8 @@ function PaymentMethodsPanel(props) {
               card.cardExpYear
             ] }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "throttle-actions", children: [
-            !card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "throttle-actions", children: [
+            !card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               Button,
               {
                 variant: actionVariant("secondary"),
@@ -3513,14 +3638,14 @@ function PaymentMethodsPanel(props) {
                 children: t.paymentMethods.makeDefault
               }
             ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
               Button,
               {
                 variant: actionVariant("danger"),
                 elementKey: "paymentMethodsPanel.deleteButton",
                 disabled: submitting,
-                onClick: () => {
-                  if (!window.confirm(t.paymentMethods.deleteConfirm)) return;
+                onClick: async () => {
+                  if (!await confirm({ title: t.paymentMethods.deleteConfirm, confirmLabel: t.paymentMethods.deleteConfirmAction, tone: "danger" })) return;
                   void run(() => resource.remove(card.id));
                 },
                 children: t.common.delete
@@ -3534,7 +3659,7 @@ function PaymentMethodsPanel(props) {
 }
 
 // src/react/components/account/OrdersPanel.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/react/components/format.ts
 function formatMoney(minorUnits, currency, locale) {
@@ -3566,7 +3691,7 @@ function formatDate(value, locale) {
 }
 
 // src/react/components/account/OrderStatus.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function copyKey(wire) {
   return wire.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
 }
@@ -3574,25 +3699,76 @@ 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__ */ (0, import_jsx_runtime35.jsx)(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(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__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: lifecycle }),
-    money ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Badge, { tone: ATTENTION_PAYMENT_STATES.has(props.paymentStatus) ? "warning" : "neutral", children: money }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: lifecycle }),
+    money ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Badge, { tone: ATTENTION_PAYMENT_STATES.has(props.paymentStatus) ? "warning" : "neutral", children: money }) : null
+  ] });
+}
+
+// src/react/components/account/AddressBlock.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function addressLines(address) {
+  if (!address || typeof address !== "object") return [];
+  const a = address;
+  const str = (k) => typeof a[k] === "string" && a[k].trim() ? a[k].trim() : null;
+  const name = [str("firstName"), str("lastName")].filter(Boolean).join(" ");
+  const cityLine = [str("city"), str("stateProvince"), str("postalCode")].filter(Boolean).join(", ");
+  return [
+    name || null,
+    str("company"),
+    str("addressLine1") ?? str("line1"),
+    str("addressLine2") ?? str("line2"),
+    cityLine || null,
+    str("countryCode") ?? str("country")
+  ].filter((l) => Boolean(l));
+}
+function AddressBlock(props) {
+  const a = useAppearance();
+  const lines = addressLines(props.address);
+  if (lines.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ...a.el(props.elementKey ?? "orderDetail.address", "throttle-addressblock"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h4", { className: "throttle-section__title", children: props.heading }),
+    lines.map((l) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "throttle-addressblock__line throttle-muted", children: l }, l))
+  ] });
+}
+
+// src/react/components/account/OrderTimeline.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function orderTimeline(order, labels) {
+  const entries = [{ label: labels.placed, at: order.createdAt }];
+  if (order.completedAt) entries.push({ label: labels.completed, at: order.completedAt });
+  if (order.cancelledAt) entries.push({ label: labels.cancelled, at: order.cancelledAt });
+  if (order.closedAt) entries.push({ label: labels.closed, at: order.closedAt });
+  return entries.sort((x, y) => new Date(x.at).getTime() - new Date(y.at).getTime());
+}
+function OrderTimeline(props) {
+  const a = useAppearance();
+  if (props.entries.length <= 1) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.timeline", "throttle-timeline"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h4", { className: "throttle-section__title", children: props.heading }),
+    props.entries.map((e) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-timeline__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-timeline__dot", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-timeline__label", children: e.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-muted", children: formatDate(e.at, props.locale) })
+    ] }, `${e.label}-${e.at}`))
   ] });
 }
 
 // src/react/components/account/OrderDetail.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var CAN_PAY = /* @__PURE__ */ new Set(["draft", "pending"]);
+var CAN_REORDER = /* @__PURE__ */ new Set(["fulfilled", "cancelled", "closed"]);
 function Line(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "throttle-row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "throttle-muted", children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: props.value })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "throttle-muted", children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: props.value })
   ] });
 }
 function OrderDetail(props) {
@@ -3600,7 +3776,7 @@ function OrderDetail(props) {
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t, locale } = useCopy(props.localization);
   const resource = useOrder(props.orderId);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...a.el("orderDetail.root", "throttle-panel"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("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`
@@ -3608,27 +3784,27 @@ function OrderDetail(props) {
       // 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__ */ (0, import_jsx_runtime36.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) })
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       PanelState,
       {
         resource,
         isEmpty: (o) => o === null,
         emptyTitle: t.orders.empty,
         skeletonRows: 5,
-        children: (order) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h3", { children: order.orderNumber }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
+        children: (order) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h3", { children: order.orderNumber }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
-            item.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("strong", { children: item.name }),
-              item.description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "throttle-muted", children: item.description }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "throttle-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
+            item.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("strong", { children: item.name }),
+              item.description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "throttle-muted", children: item.description }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "throttle-muted", children: [
                 t.orders.quantity,
                 " ",
                 item.quantity,
@@ -3636,16 +3812,87 @@ function OrderDetail(props) {
                 formatMoney(item.unitPrice, order.currency, locale)
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: formatMoney(item.total, order.currency, locale) })
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: formatMoney(item.total, order.currency, locale) })
           ] }, item.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Line, { label: t.orders.subtotal, value: formatMoney(order.subtotal, order.currency, locale) }),
-            order.discountTotal ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Line, { label: t.orders.discount, value: formatMoney(-order.discountTotal, order.currency, locale) }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Line, { label: t.orders.shipping, value: formatMoney(order.shippingTotal, order.currency, locale) }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Line, { label: t.orders.tax, value: formatMoney(order.taxTotal, order.currency, locale) }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Line, { label: t.orders.total, value: formatMoney(order.total, order.currency, locale) })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Line, { label: t.orders.subtotal, value: formatMoney(order.subtotal, order.currency, locale) }),
+            order.discountTotal ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Line, { label: t.orders.discount, value: formatMoney(-order.discountTotal, order.currency, locale) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Line, { label: t.orders.shipping, value: formatMoney(order.shippingTotal, order.currency, locale) }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Line, { label: t.orders.tax, value: formatMoney(order.taxTotal, order.currency, locale) }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Line, { label: t.orders.total, value: formatMoney(order.total, order.currency, locale) })
           ] }),
-          order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { variant: "secondary", onClick: () => props.onViewSubscription(order.subscriptionId), children: t.orders.viewSubscription }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("orderDetail.addresses", "throttle-addresses"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              AddressBlock,
+              {
+                heading: t.orders.shipTo,
+                address: order.shippingAddress,
+                elementKey: "orderDetail.shippingAddress"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              AddressBlock,
+              {
+                heading: t.orders.billTo,
+                address: order.billingAddress,
+                elementKey: "orderDetail.billingAddress"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            OrderTimeline,
+            {
+              heading: t.orders.history,
+              locale,
+              entries: orderTimeline(order, {
+                placed: t.orders.placed,
+                completed: t.orders.completed,
+                cancelled: t.orders.cancelledAt,
+                closed: t.orders.closedAt
+              })
+            }
+          ),
+          (() => {
+            const target = {
+              id: order.id,
+              orderNumber: order.orderNumber,
+              currency: order.currency,
+              lineItems: order.lineItems.map((li) => ({
+                name: li.name,
+                unitPrice: li.unitPrice,
+                quantity: li.quantity
+              }))
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-actions", children: [
+              props.onPayNow && CAN_PAY.has(order.status) ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                Button,
+                {
+                  elementKey: "orderDetail.payButton",
+                  onClick: () => props.onPayNow(target),
+                  children: t.orders.payNow
+                }
+              ) : null,
+              props.onTrackShipment && order.status === "partially_fulfilled" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                Button,
+                {
+                  variant: "secondary",
+                  elementKey: "orderDetail.trackButton",
+                  onClick: () => props.onTrackShipment(target),
+                  children: t.orders.track
+                }
+              ) : null,
+              props.onReorder && CAN_REORDER.has(order.status) ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                Button,
+                {
+                  variant: "secondary",
+                  elementKey: "orderDetail.reorderButton",
+                  onClick: () => props.onReorder(target),
+                  children: t.orders.reorder
+                }
+              ) : null,
+              order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { variant: "secondary", onClick: () => props.onViewSubscription(order.subscriptionId), children: t.orders.viewSubscription }) : null
+            ] });
+          })()
         ] })
       }
     )
@@ -3653,31 +3900,34 @@ function OrderDetail(props) {
 }
 
 // src/react/components/account/OrdersPanel.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("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] = (0, import_react26.useState)(null);
+  const [openId, setOpenId] = (0, import_react27.useState)(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__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       OrderDetail,
       {
         orderId: openId,
         onBack: () => setOpenId(null),
+        onPayNow: props.onPayNow,
+        onReorder: props.onReorder,
+        onTrackShipment: props.onTrackShipment,
         onViewSubscription: props.onViewSubscription,
         appearance: props.appearance,
         localization: props.localization
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ...a.el("ordersPanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.el("ordersPanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     PanelState,
     {
       resource,
@@ -3686,7 +3936,7 @@ function OrdersPanel(props) {
       isEmpty: (rows) => rows.length === 0,
       emptyTitle: t.orders.empty,
       emptyDescription: t.orders.emptyDescription,
-      children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         DataTable,
         {
           tableKey: "ordersPanel.table",
@@ -3700,25 +3950,25 @@ function OrdersPanel(props) {
             {
               key: "status",
               label: t.orders.status,
-              render: (o) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
+              render: (o) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
             },
             {
               key: "total",
               label: t.orders.total,
-              render: (o) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "throttle-table__money", children: formatMoney(o.total, o.currency, locale) })
+              render: (o) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "throttle-table__money", children: formatMoney(o.total, o.currency, locale) })
             }
           ]
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ...a.el("ordersPanel.list", listBase), children: rows.map((o) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ...a.el("ordersPanel.item", itemBase), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("strong", { children: o.orderNumber }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.el("ordersPanel.list", listBase), children: rows.map((o) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("ordersPanel.item", itemBase), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: o.orderNumber }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "throttle-muted", children: formatDate(o.createdAt, locale) }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "throttle-muted", children: formatMoney(o.total, o.currency, locale) })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "throttle-muted", children: formatDate(o.createdAt, locale) }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "throttle-muted", children: formatMoney(o.total, o.currency, locale) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "throttle-actions", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "throttle-actions", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           Button,
           {
             variant: rowsVariant ? "link" : "secondary",
@@ -3733,14 +3983,14 @@ function OrdersPanel(props) {
 }
 
 // src/react/components/account/InvoicesPanel.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/react/components/account/InvoiceDetail.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Line2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "throttle-row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "throttle-muted", children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: props.value })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "throttle-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "throttle-muted", children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: props.value })
   ] });
 }
 function InvoiceDetail(props) {
@@ -3750,7 +4000,7 @@ function InvoiceDetail(props) {
   const { account } = useAuth();
   const resource = useInvoice(props.invoiceId);
   const { submitting, error, run } = useAction();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ...a.el("invoiceDetail.root", "throttle-panel"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("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`
@@ -3758,25 +4008,25 @@ function InvoiceDetail(props) {
       // 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__ */ (0, import_jsx_runtime38.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) })
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) })
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "throttle-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h3", { children: invoice.number }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "throttle-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { children: invoice.number }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Line2, { label: t.invoices.issued, value: formatDate(invoice.issuedAt, locale) }),
-        invoice.dueAt ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
-        invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Line2, { label: t.invoices.issued, value: formatDate(invoice.issuedAt, locale) }),
+        invoice.dueAt ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
+        invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           Line2,
           {
             label: t.invoices.period,
             value: `${formatDate(invoice.periodStart, locale)} \u2013 ${formatDate(invoice.periodEnd, locale)}`
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Line2, { label: t.invoices.total, value: formatMoney(invoice.total, invoice.currency, locale) }),
-        invoice.amountRefunded ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Line2, { label: t.invoices.total, value: formatMoney(invoice.total, invoice.currency, locale) }),
+        invoice.amountRefunded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           Line2,
           {
             label: t.invoices.refunded,
@@ -3784,8 +4034,8 @@ function InvoiceDetail(props) {
           }
         ) : null
       ] }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Alert, { tone: "error", children: error }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      error ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Alert, { tone: "error", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         Button,
         {
           variant: "secondary",
@@ -3804,20 +4054,20 @@ function InvoiceDetail(props) {
 }
 
 // src/react/components/account/InvoicesPanel.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("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] = (0, import_react27.useState)(null);
+  const [openId, setOpenId] = (0, import_react28.useState)(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__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       InvoiceDetail,
       {
         invoiceId: openId,
@@ -3827,7 +4077,7 @@ function InvoicesPanel(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...a.el("invoicesPanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ...a.el("invoicesPanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     PanelState,
     {
       resource,
@@ -3836,7 +4086,7 @@ function InvoicesPanel(props) {
       isEmpty: (rows) => rows.length === 0,
       emptyTitle: t.invoices.empty,
       emptyDescription: t.invoices.emptyDescription,
-      children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         DataTable,
         {
           tableKey: "invoicesPanel.table",
@@ -3847,24 +4097,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__ */ (0, import_jsx_runtime39.jsx)(StatusBadge, { status: i.status, labels: t.invoices.statusLabels }) },
+            { key: "status", label: t.invoices.status, render: (i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StatusBadge, { status: i.status, labels: t.invoices.statusLabels }) },
             {
               key: "total",
               label: t.invoices.total,
-              render: (i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-table__money", children: formatMoney(i.total, i.currency, locale) })
+              render: (i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "throttle-table__money", children: formatMoney(i.total, i.currency, locale) })
             }
           ]
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...a.el("invoicesPanel.list", listBase), children: rows.map((i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("invoicesPanel.item", itemBase), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: i.number }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StatusBadge, { status: i.status, labels: t.invoices.statusLabels })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ...a.el("invoicesPanel.list", listBase), children: rows.map((i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ...a.el("invoicesPanel.item", itemBase), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("strong", { children: i.number }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StatusBadge, { status: i.status, labels: t.invoices.statusLabels })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "throttle-muted", children: formatDate(i.issuedAt, locale) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "throttle-muted", children: formatMoney(i.total, i.currency, locale) })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "throttle-muted", children: formatDate(i.issuedAt, locale) }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "throttle-muted", children: formatMoney(i.total, i.currency, locale) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "throttle-actions", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "throttle-actions", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Button,
           {
             variant: rowsVariant ? "link" : "secondary",
@@ -3879,7 +4129,7 @@ function InvoicesPanel(props) {
 }
 
 // src/react/components/account/SubscriptionsPanel.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("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"]);
@@ -3890,62 +4140,79 @@ function SubscriptionsPanel(props) {
   const { emailVerified } = useAuth();
   const resource = useSubscriptions();
   const { submitting, error, run } = useAction();
+  const confirm = useConfirm();
   const variant = props.variant ?? "rows";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
   const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
   const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
-  const confirmThen = (fn) => () => {
-    if (!window.confirm(t.subscriptions.cancelConfirm)) return;
-    void run(fn);
+  const confirmThen = (fn, ask) => () => {
+    void (async () => {
+      if (!await confirm({ ...ask, tone: ask.tone ?? "neutral" })) return;
+      await run(fn);
+    })();
   };
   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__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-actions", children: [
-    CAN_PAUSE.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  const lifecycleActions = (sub, variantFor) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "throttle-actions", children: [
+    CAN_PAUSE.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Button,
       {
         variant: variantFor("secondary"),
         loading: submitting,
         elementKey: "subscriptionsPanel.pauseButton",
-        onClick: () => void run(() => resource.pause(sub.id)),
+        onClick: confirmThen(() => resource.pause(sub.id), {
+          title: t.subscriptions.pauseConfirm,
+          confirmLabel: t.subscriptions.pauseButton
+        }),
         children: t.subscriptions.pauseButton
       }
     ) : null,
-    CAN_RESUME.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    CAN_RESUME.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Button,
       {
         variant: variantFor("secondary"),
         loading: submitting,
         elementKey: "subscriptionsPanel.resumeButton",
-        onClick: () => void run(() => resource.resume(sub.id)),
+        onClick: confirmThen(() => resource.resume(sub.id), {
+          title: t.subscriptions.resumeConfirm,
+          confirmLabel: t.subscriptions.resumeButton
+        }),
         children: t.subscriptions.resumeButton
       }
     ) : null,
-    CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Button,
       {
         variant: variantFor("secondary"),
         elementKey: "subscriptionsPanel.cancelButton",
         disabled: submitting,
-        onClick: confirmThen(() => resource.cancel(sub.id, { atPeriodEnd: true })),
+        onClick: confirmThen(() => resource.cancel(sub.id, { atPeriodEnd: true }), {
+          title: t.subscriptions.cancelConfirm,
+          confirmLabel: t.subscriptions.cancelConfirmAction,
+          tone: "danger"
+        }),
         children: t.subscriptions.cancelAtPeriodEnd
       }
     ) : null,
-    CAN_CANCEL.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    CAN_CANCEL.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Button,
       {
         variant: variantFor("danger"),
         elementKey: "subscriptionsPanel.cancelNowButton",
         disabled: submitting,
-        onClick: confirmThen(() => resource.cancel(sub.id, { atPeriodEnd: false })),
+        onClick: confirmThen(() => resource.cancel(sub.id, { atPeriodEnd: false }), {
+          title: t.subscriptions.cancelNowConfirm,
+          confirmLabel: t.subscriptions.cancelConfirmAction,
+          tone: "danger"
+        }),
         children: t.subscriptions.cancelNow
       }
     ) : null
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("subscriptionsPanel.root", "throttle-panel"), children: [
-    error ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Alert, { tone: "error", children: error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ...a.el("subscriptionsPanel.root", "throttle-panel"), children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       PanelState,
       {
         resource,
@@ -3954,7 +4221,7 @@ function SubscriptionsPanel(props) {
         isEmpty: (rows) => rows.length === 0,
         emptyTitle: t.subscriptions.empty,
         emptyDescription: t.subscriptions.emptyDescription,
-        children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           DataTable,
           {
             tableKey: "subscriptionsPanel.table",
@@ -3963,42 +4230,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__ */ (0, import_jsx_runtime40.jsx)("span", { className: "throttle-table__money", children: priceLabel(sub) }) },
+              { key: "price", label: t.subscriptions.columnPrice, render: (sub) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-row", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels }),
-                sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
+              { key: "status", label: t.subscriptions.columnStatus, render: (sub) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "throttle-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels }),
+                sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
               ] }) },
               { key: "actions", label: t.common.actions, render: (sub) => lifecycleActions(sub, (base) => base) }
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...a.el("subscriptionsPanel.list", listBase), children: rows.map((sub) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("subscriptionsPanel.item", itemBase), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("strong", { children: sub.planName ?? sub.planReference }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ...a.el("subscriptionsPanel.list", listBase), children: rows.map((sub) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { ...a.el("subscriptionsPanel.item", itemBase), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("strong", { children: sub.planName ?? sub.planReference }),
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "throttle-muted", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("p", { className: "throttle-muted", children: [
               formatMoney(sub.amount, sub.currency, locale),
               " / ",
               sub.interval,
               sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""
             ] }),
-            sub.status === "cancelled" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "throttle-muted", children: [
+            sub.status === "cancelled" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("p", { className: "throttle-muted", children: [
               t.subscriptions.cancelledOn,
               " ",
               formatDate(sub.cancelledAt ?? sub.currentPeriodEnd, locale)
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "throttle-muted", children: [
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("p", { className: "throttle-muted", children: [
               sub.cancelAtPeriodEnd ? t.subscriptions.endsOn : t.subscriptions.renewsOn,
               " ",
               formatDate(sub.currentPeriodEnd, locale)
             ] }),
-            sub.trialEnd ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "throttle-muted", children: [
+            sub.trialEnd ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("p", { className: "throttle-muted", children: [
               t.subscriptions.trialEnds,
               " ",
               formatDate(sub.trialEnd, locale)
             ] }) : null,
-            sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
+            sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
           ] }),
           lifecycleActions(sub, actionVariant)
         ] }, sub.id)) })
@@ -4008,7 +4275,7 @@ function SubscriptionsPanel(props) {
 }
 
 // src/react/components/account/SecurityPanel.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/react/components/account/device.ts
 var BROWSERS = [
@@ -4041,7 +4308,7 @@ function describeDevice(userAgent) {
 }
 
 // src/react/components/account/SecurityPanel.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function SecurityPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -4051,16 +4318,16 @@ function SecurityPanel(props) {
   const rowsVariant = variant === "rows";
   const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
   const revokeVariant = rowsVariant ? "linkDanger" : "danger";
-  const [password, setPassword] = (0, import_react28.useState)("");
+  const [password, setPassword] = (0, import_react29.useState)("");
   const passwordAction = useAction();
   const sessionAction = useAction();
-  const [sessions, setSessions] = (0, import_react28.useState)(null);
-  const [listError, setListError] = (0, import_react28.useState)(null);
-  const errorMessageRef = (0, import_react28.useRef)(errorMessage);
-  (0, import_react28.useEffect)(() => {
+  const [sessions, setSessions] = (0, import_react29.useState)(null);
+  const [listError, setListError] = (0, import_react29.useState)(null);
+  const errorMessageRef = (0, import_react29.useRef)(errorMessage);
+  (0, import_react29.useEffect)(() => {
     errorMessageRef.current = errorMessage;
   });
-  const load = (0, import_react28.useCallback)(async () => {
+  const load = (0, import_react29.useCallback)(async () => {
     try {
       setSessions(await auth.listSessions());
       setListError(null);
@@ -4068,12 +4335,12 @@ function SecurityPanel(props) {
       setListError(errorMessageRef.current(err));
     }
   }, [auth]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     void load();
   }, [load]);
   const others = (sessions ?? []).filter((s) => !s.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("securityPanel.root", "throttle-panel"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ...a.el("securityPanel.root", "throttle-panel"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
       "form",
       {
         ...a.el("securityPanel.passwordForm", "throttle-stack"),
@@ -4086,8 +4353,8 @@ function SecurityPanel(props) {
           });
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { children: t.security.passwordTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h3", { children: t.security.passwordTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             Field,
             {
               label: t.security.newPassword,
@@ -4098,21 +4365,21 @@ function SecurityPanel(props) {
               onChange: setPassword
             }
           ),
-          passwordAction.error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Alert, { tone: "error", children: passwordAction.error }) : null,
-          passwordAction.notice ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Alert, { tone: "success", children: passwordAction.notice }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { type: "submit", loading: passwordAction.submitting, elementKey: "securityPanel.passwordButton", children: t.security.changeButton })
+          passwordAction.error ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Alert, { tone: "error", children: passwordAction.error }) : null,
+          passwordAction.notice ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Alert, { tone: "success", children: passwordAction.notice }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { type: "submit", loading: passwordAction.submitting, elementKey: "securityPanel.passwordButton", children: t.security.changeButton })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("securityPanel.sessionList", "throttle-stack"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { children: t.security.sessionsTitle }),
-      listError ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Alert, { tone: "error", children: listError }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { variant: "secondary", onClick: () => void load(), children: t.common.retry })
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ...a.el("securityPanel.sessionList", "throttle-stack"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("h3", { children: t.security.sessionsTitle }),
+      listError ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Alert, { tone: "error", children: listError }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { variant: "secondary", onClick: () => void load(), children: t.common.retry })
       ] }) : null,
-      sessionAction.error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Alert, { tone: "error", children: sessionAction.error }) : null,
-      sessions === null && !listError ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Skeleton, { count: 2 }) : null,
-      sessions !== null && !listError && variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      sessionAction.error ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Alert, { tone: "error", children: sessionAction.error }) : null,
+      sessions === null && !listError ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Skeleton, { count: 2 }) : null,
+      sessions !== null && !listError && variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         DataTable,
         {
           tableKey: "securityPanel.table",
@@ -4120,12 +4387,12 @@ function SecurityPanel(props) {
           rowKey: (session) => session.id,
           rows: sessions,
           columns: [
-            { key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
-              session.current ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Badge, { tone: "success", children: t.security.thisDevice }) : null
+            { key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
+              session.current ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(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__ */ (0, import_jsx_runtime41.jsx)(
+            { key: "actions", label: t.common.actions, render: (session) => !session.current ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               Button,
               {
                 variant: "danger",
@@ -4140,19 +4407,19 @@ function SecurityPanel(props) {
             ) : null }
           ]
         }
-      ) : (sessions ?? []).map((session) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("securityPanel.sessionItem", itemBase), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
-            session.current ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Badge, { tone: "success", children: t.security.thisDevice }) : null
+      ) : (sessions ?? []).map((session) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ...a.el("securityPanel.sessionItem", itemBase), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("strong", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
+            session.current ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Badge, { tone: "success", children: t.security.thisDevice }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { className: "throttle-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("p", { className: "throttle-muted", children: [
             t.security.lastActive,
             " ",
             formatDate(session.lastUsedAt, locale)
           ] })
         ] }),
-        !session.current ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        !session.current ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           Button,
           {
             variant: revokeVariant,
@@ -4166,8 +4433,8 @@ function SecurityPanel(props) {
           }
         ) : null
       ] }, session.id)),
-      sessions !== null && others.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "throttle-muted", children: t.security.sessionsEmpty }) : null,
-      others.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      sessions !== null && others.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "throttle-muted", children: t.security.sessionsEmpty }) : null,
+      others.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         Button,
         {
           variant: "danger",
@@ -4187,7 +4454,7 @@ function SecurityPanel(props) {
 }
 
 // src/react/components/account/AccountDashboard.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var ACCOUNT_TABS = [
   "profile",
   "addresses",
@@ -4216,9 +4483,9 @@ function AccountDashboard(props) {
   const { status } = useAuth();
   const shown = props.tabs ?? [...ACCOUNT_TABS];
   const controlled = props.tab !== void 0;
-  const [internal, setInternal] = (0, import_react29.useState)(shown[0] ?? "profile");
-  const idBase = (0, import_react29.useId)();
-  (0, import_react29.useEffect)(() => {
+  const [internal, setInternal] = (0, import_react30.useState)(shown[0] ?? "profile");
+  const idBase = (0, import_react30.useId)();
+  (0, import_react30.useEffect)(() => {
     if (props.routing !== "hash" || typeof window === "undefined") return;
     const apply = () => {
       const next = TAB_FOR_HASH[window.location.hash] ?? shown[0];
@@ -4239,7 +4506,7 @@ function AccountDashboard(props) {
   };
   const shared = { appearance: props.appearance, localization: props.localization };
   const sidebar = (props.layout ?? "sidebar") === "sidebar";
-  const nav = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  const nav = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     Tabs,
     {
       idBase,
@@ -4255,7 +4522,7 @@ function AccountDashboard(props) {
       }))
     }
   );
-  const panel = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  const panel = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
       ...a.el("accountDashboard.panel", sidebar ? "throttle-account__content" : "throttle-tabs__panel"),
@@ -4264,36 +4531,46 @@ function AccountDashboard(props) {
       "aria-labelledby": `${idBase}-tab-${active}`,
       tabIndex: 0,
       children: [
-        active === "profile" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ProfilePanel, { ...shared }) : null,
-        active === "addresses" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AddressesPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "paymentMethods" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PaymentMethodsPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "orders" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(OrdersPanel, { ...shared, variant: props.panelVariant, onViewSubscription: () => go("subscriptions") }) : null,
-        active === "invoices" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(InvoicesPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "subscriptions" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SubscriptionsPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "security" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SecurityPanel, { ...shared, variant: props.panelVariant }) : null
+        active === "profile" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ProfilePanel, { ...shared }) : null,
+        active === "addresses" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AddressesPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "paymentMethods" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PaymentMethodsPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "orders" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          OrdersPanel,
+          {
+            ...shared,
+            variant: props.panelVariant,
+            onViewSubscription: () => go("subscriptions"),
+            onPayNow: props.onPayNow,
+            onReorder: props.onReorder,
+            onTrackShipment: props.onTrackShipment
+          }
+        ) : null,
+        active === "invoices" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(InvoicesPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "subscriptions" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SubscriptionsPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "security" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SecurityPanel, { ...shared, variant: props.panelVariant }) : null
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ...a.el("accountDashboard.root", "throttle-panel throttle-account-root"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(VerifyEmailBanner, { ...shared }),
-    sidebar ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "throttle-account", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ...a.el("accountDashboard.sidebar"), children: nav }),
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { ...a.el("accountDashboard.root", "throttle-panel throttle-account-root"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(VerifyEmailBanner, { ...shared }),
+    sidebar ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "throttle-account", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...a.el("accountDashboard.sidebar"), children: nav }),
       panel
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ...a.el("accountDashboard.tabs"), children: nav }),
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ...a.el("accountDashboard.tabs"), children: nav }),
       panel
     ] })
   ] }) }) });
 }
 
 // src/react/components/account/AccountModal.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function AccountModal(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t } = useCopy(props.localization);
-  const titleId = (0, import_react30.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  const titleId = (0, import_react31.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     Modal,
     {
       open: props.open,
@@ -4303,15 +4580,15 @@ function AccountModal(props) {
       overlayKey: "accountModal.overlay",
       containerKey: "accountModal.container",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ...a.el("accountModal.header", "throttle-modal__header"), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h2", { id: titleId, ...a.el("accountModal.title", "throttle-modal__title"), children: t.account.title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { ...a.el("accountModal.body", "throttle-modal__body"), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccountDashboard, { tabs: props.tabs, appearance: props.appearance, localization: props.localization }) })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...a.el("accountModal.header", "throttle-modal__header"), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h2", { id: titleId, ...a.el("accountModal.title", "throttle-modal__title"), children: t.account.title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...a.el("accountModal.body", "throttle-modal__body"), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AccountDashboard, { tabs: props.tabs, appearance: props.appearance, localization: props.localization }) })
       ]
     }
   ) });
 }
 
 // src/react/components/provider.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var warned = /* @__PURE__ */ new Set();
 function warnOnce(key, message) {
   if (process.env.NODE_ENV === "production") return;
@@ -4319,9 +4596,9 @@ function warnOnce(key, message) {
   warned.add(key);
   console.warn(`[@usethrottle/auth] ${message}`);
 }
-var ThrottleUIContext = (0, import_react31.createContext)(null);
+var ThrottleUIContext = (0, import_react32.createContext)(null);
 function useThrottle() {
-  const ctx = (0, import_react31.useContext)(ThrottleUIContext);
+  const ctx = (0, import_react32.useContext)(ThrottleUIContext);
   if (!ctx) {
     warnOnce(
       "use-throttle-no-provider",
@@ -4356,51 +4633,51 @@ function ThrottleProvider(props) {
     __captureStepUp
   } = props;
   useInjectStyles(injectStyles);
-  const [stepUpOpen, setStepUpOpen] = (0, import_react31.useState)(false);
-  const resolveStepUp = (0, import_react31.useRef)(null);
-  const claimRef = (0, import_react31.useRef)(claimCartOnSignIn);
+  const [stepUpOpen, setStepUpOpen] = (0, import_react32.useState)(false);
+  const resolveStepUp = (0, import_react32.useRef)(null);
+  const claimRef = (0, import_react32.useRef)(claimCartOnSignIn);
   claimRef.current = claimCartOnSignIn;
-  const [overlay, setOverlay] = (0, import_react31.useState)(null);
-  const overlayRestoreFocus = (0, import_react31.useRef)(null);
-  const [accountTabs, setAccountTabs] = (0, import_react31.useState)(void 0);
-  const onOverlaySuccess = (0, import_react31.useRef)(null);
-  const openSignIn = (0, import_react31.useCallback)((onSuccess) => {
+  const [overlay, setOverlay] = (0, import_react32.useState)(null);
+  const overlayRestoreFocus = (0, import_react32.useRef)(null);
+  const [accountTabs, setAccountTabs] = (0, import_react32.useState)(void 0);
+  const onOverlaySuccess = (0, import_react32.useRef)(null);
+  const openSignIn = (0, import_react32.useCallback)((onSuccess) => {
     onOverlaySuccess.current = onSuccess ?? null;
     setOverlay("signIn");
   }, []);
-  const openSignUp = (0, import_react31.useCallback)((onSuccess) => {
+  const openSignUp = (0, import_react32.useCallback)((onSuccess) => {
     onOverlaySuccess.current = onSuccess ?? null;
     setOverlay("signUp");
   }, []);
-  const openAccount = (0, import_react31.useCallback)((opts) => {
+  const openAccount = (0, import_react32.useCallback)((opts) => {
     onOverlaySuccess.current = null;
     overlayRestoreFocus.current = opts?.restoreFocusTo ?? null;
     setAccountTabs(opts?.tabs);
     setOverlay("account");
   }, []);
-  const closeOverlay = (0, import_react31.useCallback)(() => {
+  const closeOverlay = (0, import_react32.useCallback)(() => {
     onOverlaySuccess.current = null;
     overlayRestoreFocus.current = null;
     setOverlay(null);
   }, []);
-  const handleOverlaySuccess = (0, import_react31.useCallback)(() => {
+  const handleOverlaySuccess = (0, import_react32.useCallback)(() => {
     const fn = onOverlaySuccess.current;
     onOverlaySuccess.current = null;
     setOverlay(null);
     fn?.();
   }, []);
-  const ui = (0, import_react31.useMemo)(
+  const ui = (0, import_react32.useMemo)(
     () => ({ overlay, openSignIn, openSignUp, openAccount, close: closeOverlay }),
     [overlay, openSignIn, openSignUp, openAccount, closeOverlay]
   );
-  const askForStepUp = (0, import_react31.useCallback)(
+  const askForStepUp = (0, import_react32.useCallback)(
     () => new Promise((resolve) => {
       resolveStepUp.current = resolve;
       setStepUpOpen(true);
     }),
     []
   );
-  const auth = (0, import_react31.useMemo)(() => {
+  const auth = (0, import_react32.useMemo)(() => {
     __captureStepUp?.(askForStepUp);
     const client = injected ?? createThrottleAuth({ publishableKey, baseUrl, storage, onStepUpRequired: askForStepUp });
     const account = createAccount(client);
@@ -4433,10 +4710,10 @@ function ThrottleProvider(props) {
     resolve?.(password);
   };
   const authOverlayOpen = overlay === "signIn" || overlay === "signUp";
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ThrottleUIContext.Provider, { value: ui, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ConfirmProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ThrottleUIContext.Provider, { value: ui, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StepUpDialog, { open: stepUpOpen, onResolve: finishStepUp }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(StepUpDialog, { open: stepUpOpen, onResolve: finishStepUp }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       AuthModal,
       {
         open: authOverlayOpen,
@@ -4447,23 +4724,23 @@ function ThrottleProvider(props) {
       },
       overlay === "signUp" ? "signUp" : "signIn"
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AccountModal, { open: overlay === "account", onClose: closeOverlay, tabs: accountTabs, restoreFocusTo: overlayRestoreFocus.current })
-  ] }) }) }) }) });
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AccountModal, { open: overlay === "account", onClose: closeOverlay, tabs: accountTabs, restoreFocusTo: overlayRestoreFocus.current })
+  ] }) }) }) }) }) });
 }
 
 // src/react/components/auth/SignInButton.tsx
-var import_react32 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function SignInButton(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t } = useCopy(props.localization);
-  const ui = (0, import_react32.useContext)(ThrottleUIContext);
-  const [localOpen, setLocalOpen] = (0, import_react32.useState)(false);
+  const ui = (0, import_react33.useContext)(ThrottleUIContext);
+  const [localOpen, setLocalOpen] = (0, import_react33.useState)(false);
   const useShared = ui !== null && props.initialView === void 0;
   const label = props.children ?? t.signIn.submitButton;
   if (props.mode === "redirect") {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("a", { ...a.el("signInButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("a", { ...a.el("signInButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
   }
   const openModal = () => {
     if (useShared) ui.openSignIn(props.afterSignIn);
@@ -4473,10 +4750,10 @@ function SignInButton(props) {
     if (useShared) ui.close();
     else setLocalOpen(false);
   };
-  const trigger = props.asChild && (0, import_react32.isValidElement)(props.children) ? (0, import_react32.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { elementKey: "signInButton.root", onClick: openModal, children: label });
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AppearanceProvider, { value: scoped, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { ...a.rootProps, children: trigger }),
-    !useShared ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  const trigger = props.asChild && (0, import_react33.isValidElement)(props.children) ? (0, import_react33.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { elementKey: "signInButton.root", onClick: openModal, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(AppearanceProvider, { value: scoped, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { ...a.rootProps, children: trigger }),
+    !useShared ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       AuthModal,
       {
         open: localOpen,
@@ -4494,18 +4771,18 @@ function SignInButton(props) {
 }
 
 // src/react/components/auth/SignUpButton.tsx
-var import_react33 = require("react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_react34 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function SignUpButton(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t } = useCopy(props.localization);
-  const ui = (0, import_react33.useContext)(ThrottleUIContext);
-  const [localOpen, setLocalOpen] = (0, import_react33.useState)(false);
+  const ui = (0, import_react34.useContext)(ThrottleUIContext);
+  const [localOpen, setLocalOpen] = (0, import_react34.useState)(false);
   const useShared = ui !== null && props.initialView === void 0;
   const label = props.children ?? t.signUp.submitButton;
   if (props.mode === "redirect") {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("a", { ...a.el("signUpButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("a", { ...a.el("signUpButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
   }
   const openModal = () => {
     if (useShared) ui.openSignUp(props.afterSignUp);
@@ -4515,10 +4792,10 @@ function SignUpButton(props) {
     if (useShared) ui.close();
     else setLocalOpen(false);
   };
-  const trigger = props.asChild && (0, import_react33.isValidElement)(props.children) ? (0, import_react33.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { elementKey: "signUpButton.root", onClick: openModal, children: label });
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AppearanceProvider, { value: scoped, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { ...a.rootProps, children: trigger }),
-    !useShared ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  const trigger = props.asChild && (0, import_react34.isValidElement)(props.children) ? (0, import_react34.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Button, { elementKey: "signUpButton.root", onClick: openModal, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(AppearanceProvider, { value: scoped, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { ...a.rootProps, children: trigger }),
+    !useShared ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       AuthModal,
       {
         open: localOpen,
@@ -4536,14 +4813,14 @@ function SignUpButton(props) {
 }
 
 // src/react/components/auth/SignOutButton.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("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__ */ (0, import_jsx_runtime47.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     Button,
     {
       variant: "secondary",
@@ -4560,13 +4837,13 @@ function SignOutButton(props) {
 }
 
 // src/react/components/auth/SignInPage.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function SignInPage(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ...a.el("signInPage.root", "throttle-page"), children: [
-    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...a.el("signInPage.logo", "throttle-page__logo"), children: props.logo }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { ...a.el("signInPage.root", "throttle-page"), children: [
+    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...a.el("signInPage.logo", "throttle-page__logo"), children: props.logo }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       SignIn,
       {
         onSuccess: props.onSuccess,
@@ -4576,18 +4853,18 @@ function SignInPage(props) {
         localization: props.localization
       }
     ),
-    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...a.el("signInPage.footer", "throttle-page__footer"), children: props.footer }) : null
+    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...a.el("signInPage.footer", "throttle-page__footer"), children: props.footer }) : null
   ] }) }) });
 }
 
 // src/react/components/auth/SignUpPage.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function SignUpPage(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ...a.el("signUpPage.root", "throttle-page"), children: [
-    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ...a.el("signUpPage.logo", "throttle-page__logo"), children: props.logo }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { ...a.el("signUpPage.root", "throttle-page"), children: [
+    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ...a.el("signUpPage.logo", "throttle-page__logo"), children: props.logo }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       SignUp,
       {
         onSuccess: props.onSuccess,
@@ -4596,42 +4873,42 @@ function SignUpPage(props) {
         localization: props.localization
       }
     ),
-    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ...a.el("signUpPage.footer", "throttle-page__footer"), children: props.footer }) : null
+    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ...a.el("signUpPage.footer", "throttle-page__footer"), children: props.footer }) : null
   ] }) }) });
 }
 
 // src/react/components/guards.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function SignedIn(props) {
   const { status } = useAuth();
-  return status === "authenticated" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: props.children }) : null;
+  return status === "authenticated" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: props.children }) : null;
 }
 function SignedOut(props) {
   const { status } = useAuth();
-  return status === "unauthenticated" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: props.children }) : null;
+  return status === "unauthenticated" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: props.children }) : null;
 }
 function Protect(props) {
   const { status, emailVerified } = useAuth();
   if (status === "loading") return null;
-  if (status !== "authenticated") return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: props.fallback ?? null });
-  if (props.requireVerified && !emailVerified) return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: props.fallback ?? null });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: props.children });
+  if (status !== "authenticated") return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: props.fallback ?? null });
+  if (props.requireVerified && !emailVerified) return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: props.fallback ?? null });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: props.children });
 }
 
 // src/react/components/UserButton.tsx
-var import_react34 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_jsx_runtime55 = require("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 = (0, import_react34.useContext)(ThrottleUIContext);
-  const [localOpen, setLocalOpen] = (0, import_react34.useState)(false);
+  const ui = (0, import_react35.useContext)(ThrottleUIContext);
+  const [localOpen, setLocalOpen] = (0, import_react35.useState)(false);
   const accountOpen = ui ? false : localOpen;
-  const titleId = (0, import_react34.useId)();
-  const rootRef = (0, import_react34.useRef)(null);
-  const openerRef = (0, import_react34.useRef)(null);
+  const titleId = (0, import_react35.useId)();
+  const rootRef = (0, import_react35.useRef)(null);
+  const openerRef = (0, import_react35.useRef)(null);
   const openAccount = () => {
     const opener = rootRef.current?.querySelector('button[aria-haspopup="menu"]') ?? null;
     openerRef.current = opener;
@@ -4640,25 +4917,25 @@ function UserButtonRoot(props) {
   };
   if (status !== "authenticated" || !customer) return null;
   const name = [customer.firstName, customer.lastName].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { ref: rootRef, ...a.el("userButton.root"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { ref: rootRef, ...a.el("userButton.root"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       Dropdown,
       {
         label: t.userButton.openMenu,
         triggerKey: "userButton.trigger",
         menuKey: "userButton.menu",
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Avatar, { name, email: customer.email }),
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Avatar, { name, email: customer.email }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...a.el("userButton.identity", "throttle-dropdown__item"), children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { ...a.el("userButton.email"), children: customer.email }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("br", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Badge, { tone: emailVerified ? "success" : "warning", elementKey: "userButton.badge", children: emailVerified ? t.userButton.verified : t.userButton.unverified })
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ...a.el("userButton.identity", "throttle-dropdown__item"), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { ...a.el("userButton.email"), children: customer.email }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Badge, { tone: emailVerified ? "success" : "warning", elementKey: "userButton.badge", children: emailVerified ? t.userButton.verified : t.userButton.unverified })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DropdownSeparator, {}),
-          props.mode === "navigate" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DropdownItem, { itemKey: "userButton.manageButton", href: props.accountUrl ?? "#", children: t.userButton.manage }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DropdownItem, { itemKey: "userButton.manageButton", onClick: openAccount, children: t.userButton.manage }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownSeparator, {}),
+          props.mode === "navigate" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownItem, { itemKey: "userButton.manageButton", href: props.accountUrl ?? "#", children: t.userButton.manage }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownItem, { itemKey: "userButton.manageButton", onClick: openAccount, children: t.userButton.manage }),
           props.children,
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DropdownSeparator, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             DropdownItem,
             {
               itemKey: "userButton.signOutButton",
@@ -4666,7 +4943,7 @@ function UserButtonRoot(props) {
               children: t.userButton.signOut
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             DropdownItem,
             {
               itemKey: "userButton.signOutAllButton",
@@ -4677,7 +4954,7 @@ function UserButtonRoot(props) {
         ]
       }
     ),
-    props.mode !== "navigate" && !ui ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    props.mode !== "navigate" && !ui ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       Modal,
       {
         open: accountOpen,
@@ -4685,8 +4962,8 @@ function UserButtonRoot(props) {
         labelledBy: titleId,
         restoreFocusTo: openerRef.current,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("h2", { id: titleId, style: { padding: "16px 16px 0", margin: 0 }, children: t.account.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: { padding: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h2", { id: titleId, style: { padding: "16px 16px 0", margin: 0 }, children: t.account.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { padding: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             AccountDashboard,
             {
               tabs: props.tabs,
@@ -4700,13 +4977,13 @@ function UserButtonRoot(props) {
   ] }) }) });
 }
 function UserButtonLink(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(DropdownItem, { itemKey: "userButton.item", href: props.href, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DropdownItem, { itemKey: "userButton.item", href: props.href, children: [
     props.icon,
     props.label
   ] });
 }
 function UserButtonAction(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(DropdownItem, { itemKey: "userButton.item", onClick: props.onClick, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(DropdownItem, { itemKey: "userButton.item", onClick: props.onClick, children: [
     props.icon,
     props.label
   ] });