@usethrottle/auth 0.3.0 → 0.4.0

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_react32 = require("react");
+var import_react31 = require("react");
 
 // src/errors.ts
 var ThrottleAuthError = class extends Error {
@@ -459,6 +459,8 @@ function createAccount(auth) {
     getInvoicePdfUrl: (id) => call("GET", `/me/invoices/${seg(id)}/pdf`),
     listSubscriptions: (page) => call("GET", `/me/subscriptions${query(page)}`),
     getSubscription: (id) => call("GET", `/me/subscriptions/${seg(id)}`),
+    cancelOrder: (id, opts) => call("POST", `/me/orders/${seg(id)}/cancel`, opts),
+    requestOrderReturn: (id, input) => call("POST", `/me/orders/${seg(id)}/return-request`, input),
     cancelSubscription: (id, opts) => call("POST", `/me/subscriptions/${seg(id)}/cancel`, opts),
     pauseSubscription: (id) => call("POST", `/me/subscriptions/${seg(id)}/pause`),
     resumeSubscription: (id) => call("POST", `/me/subscriptions/${seg(id)}/resume`),
@@ -771,6 +773,24 @@ var THROTTLE_ELEMENT_KEYS = [
   "orderDetail.payButton",
   "orderDetail.trackButton",
   "orderDetail.reorderButton",
+  // Two-column detail layout, shared by the order and invoice pages.
+  "orderDetail.layout",
+  "orderDetail.main",
+  "orderDetail.rail",
+  "orderDetail.cancelButton",
+  "orderDetail.returnButton",
+  "orderDetail.invoiceButton",
+  "orderDetail.actions",
+  "invoiceDetail.layout",
+  "invoiceDetail.main",
+  "invoiceDetail.rail",
+  "invoiceDetail.lineItems",
+  "invoiceDetail.lineItem",
+  "invoiceDetail.orderLink",
+  "invoiceDetail.subscriptionLink",
+  "invoiceDetail.payButton",
+  "invoiceDetail.actions",
+  "fieldRow",
   "confirm.header",
   "confirm.title",
   "confirm.body",
@@ -920,6 +940,23 @@ function messageForError(err) {
       return "We could not find that.";
     case "payment_method_in_use":
       return e.message || "That payment method is in use and cannot be removed.";
+    // Order and return refusals. Every one of these is a state the buyer can
+    // see and act on — the order shipped, the money was taken, that quantity
+    // is already on another return — and the server's message names which and
+    // what to do instead. Flattening them to "Something went wrong" sent a
+    // buyer to support for something the screen could have answered. Same
+    // argument as payment_method_in_use above.
+    case "order_not_cancellable":
+    case "order_already_paid":
+    case "order_not_returnable":
+    case "quantity_exceeds_returnable":
+    case "no_items":
+    case "unknown_line_item":
+    case "return_rejected":
+      return e.message || "That change is not possible for this order.";
+    case "orders_unavailable":
+    case "returns_unavailable":
+      return "That is unavailable right now. Please contact support.";
     case "validation_error": {
       const first2 = e.details?.[0];
       if (first2?.path && first2?.message) {
@@ -1090,6 +1127,17 @@ var enUS = {
     payNow: "Pay now",
     track: "Track shipment",
     reorder: "Order again",
+    cancelOrder: "Cancel order",
+    cancelOrderConfirm: "Cancel this order?",
+    cancelOrderBody: "This cannot be undone. Nothing has been charged, so there is nothing to refund.",
+    cancelOrderAction: "Cancel order",
+    requestReturn: "Request a return",
+    requestReturnConfirm: "Request a return for this order?",
+    requestReturnBody: "The merchant reviews your request and will be in touch. Nothing is refunded until they approve it.",
+    requestReturnAction: "Send request",
+    returnRequested: "Return requested. The merchant will be in touch.",
+    downloadInvoice: "Download invoice",
+    summary: "Summary",
     empty: "No orders yet",
     emptyDescription: "Orders you place will appear here.",
     gatedDescription: "Verify your email to see your order history.",
@@ -1153,6 +1201,12 @@ var enUS = {
     refunded: "Refunded",
     period: "Period",
     downloadButton: "Download PDF",
+    items: "Items",
+    summary: "Summary",
+    viewOrder: "View order",
+    viewSubscription: "View subscription",
+    payButton: "Pay this invoice",
+    billedTo: "Billed to",
     /** Display copy for `invoice.status` — the wire values are paid|open|void. */
     statusLabels: { paid: "Paid", open: "Open", void: "Void" },
     downloadUnavailable: "This invoice is not available to download right now."
@@ -1467,11 +1521,13 @@ var THROTTLE_STYLES = `
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  /* A label that wraps turns a control into a two-line block of text. */
+  white-space: nowrap;
   transition: opacity var(--throttle-transition), background-color var(--throttle-transition), border-color var(--throttle-transition), filter var(--throttle-transition), box-shadow var(--throttle-transition);
 }
 .throttle-button:disabled { opacity: .55; cursor: not-allowed; }
 .throttle-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary); }
-.throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: 100%; }
+.throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: var(--throttle-button-width, 100%); }
 .throttle-button--primary:hover:not(:disabled) { filter: brightness(0.92); }
 .throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border-control); }
 .throttle-button--secondary:hover:not(:disabled) { background: var(--throttle-color-muted); }
@@ -1590,6 +1646,7 @@ 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; }
@@ -1635,7 +1692,12 @@ var THROTTLE_STYLES = `
      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%; }
+  /* One column, and the rail stops sticking \u2014 on a phone a sticky summary
+     covers the very line items it is summarising. */
+  .throttle-detail { grid-template-columns: 1fr; }
+  .throttle-detail__rail { position: static; }
 }
 
 .throttle-table { width: 100%; border-collapse: collapse; text-align: left; }
@@ -1713,12 +1775,50 @@ var THROTTLE_STYLES = `
   padding: var(--throttle-space-3) 0;
 }
 .throttle-rowitem:first-child { border-top: none; padding-top: 0; }
-.throttle-actions { display: flex; gap: var(--throttle-space-2); flex-wrap: wrap; }
+.throttle-actions {
+  display: flex; gap: var(--throttle-space-2); flex-wrap: wrap; align-items: center;
+  /* Primary buttons are full-width so a form's submit fills its card. In a row
+     of sibling actions that same rule made every button claim 100% and then
+     shrink to share the line, squeezing Resume to 59px so its label wrapped to
+     two lines inside a 48px box. A custom property INHERITS to the buttons, so
+     the row opts them back to content width without a descendant selector \u2014
+     those outrank the merchant overrides in appearance.elements. */
+  --throttle-button-width: auto;
+}
 .throttle-table__money { display: block; text-align: right; font-variant-numeric: tabular-nums; }
-.throttle-lineitem { display: flex; align-items: center; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }
+.throttle-lineitem { display: flex; align-items: flex-start; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }
+/* The UA's 1em paragraph margins pushed a two-line item to 96px, so five
+   items filled a screen with mostly whitespace. These carry the spacing
+   instead. Separate classes, not a ".throttle-lineitem p" descendant
+   selector -- those outrank the merchant's appearance.elements overrides. */
+.throttle-lineitem__desc { margin: var(--throttle-space-1) 0 0; color: var(--throttle-color-muted-foreground); }
+.throttle-lineitem__meta { margin: var(--throttle-space-1) 0 0; color: var(--throttle-color-muted-foreground); font-size: var(--throttle-font-size-sm); }
 .throttle-lineitem__image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--throttle-radius-sm); flex: none; }
 .throttle-totals { display: flex; flex-direction: column; gap: var(--throttle-space-1); }
 
+/* Order and invoice detail: the record on the left, what it costs and what
+   you can do about it on the right. The rail sticks so the total and the
+   actions stay reachable on an order with thirty lines, which is exactly when
+   a buyer most wants them. Collapses below, where a sticky rail would eat a
+   phone screen. */
+.throttle-detail { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--throttle-space-6); align-items: start; }
+.throttle-detail__main { display: flex; flex-direction: column; gap: var(--throttle-space-5); min-width: 0; }
+.throttle-detail__rail {
+  display: flex; flex-direction: column; gap: var(--throttle-space-4);
+  position: sticky; top: var(--throttle-space-4);
+  padding: var(--throttle-space-4);
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius-md);
+  background: var(--throttle-color-surface);
+}
+/* The one number the buyer came for. */
+.throttle-detail__headline { font-size: var(--throttle-font-size-xl); font-weight: 600; line-height: 1.2; }
+.throttle-detail__section { display: flex; flex-direction: column; gap: var(--throttle-space-2); }
+.throttle-detail__label { font-size: var(--throttle-font-size-sm); font-weight: 500; color: var(--throttle-color-muted-foreground); letter-spacing: .04em; text-transform: uppercase; }
+/* A rail action column: full width, stacked, so the primary reads as primary. */
+.throttle-detail__actions { display: flex; flex-direction: column; gap: var(--throttle-space-2); --throttle-button-width: 100%; }
+.throttle-detail__link { display: inline-flex; align-items: center; gap: var(--throttle-space-1); }
+
 @media (prefers-reduced-motion: reduce) {
   .throttle-button, .throttle-field__input, .throttle-dropdown__item, .throttle-dropdown__trigger, .throttle-tabs__tab, .throttle-table__row, .throttle-modal__close {
     transition: none;
@@ -1837,13 +1937,20 @@ function FieldGroup(props) {
   ] }, i)) });
 }
 
-// src/react/components/primitives/Alert.tsx
+// 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) {
   const a = useAppearance();
   const Slot = a.slots.Alert;
-  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slot, { tone: props.tone, children: props.children });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Slot, { tone: props.tone, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "p",
     {
       ...a.el("alert", `throttle-alert throttle-alert--${props.tone}`),
@@ -1854,11 +1961,11 @@ function Alert(props) {
 }
 
 // src/react/components/primitives/Skeleton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Skeleton(props) {
   const a = useAppearance();
   const rows = Array.from({ length: props.count ?? 1 });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "aria-hidden": "true", className: "throttle-stack", children: rows.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { ...a.el("skeleton", "throttle-skeleton") }, i)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "aria-hidden": "true", className: "throttle-stack", children: rows.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { ...a.el("skeleton", "throttle-skeleton") }, i)) });
 }
 
 // src/react/components/primitives/Modal.tsx
@@ -1867,10 +1974,10 @@ var import_react_dom = require("react-dom");
 
 // src/react/components/surface.tsx
 var import_react7 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Ctx5 = (0, import_react7.createContext)("standalone");
 function SurfaceProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Ctx5.Provider, { value: props.value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Ctx5.Provider, { value: props.value, children: props.children });
 }
 function useSurface() {
   return (0, import_react7.useContext)(Ctx5);
@@ -1880,7 +1987,7 @@ function useCardClass() {
 }
 
 // src/react/components/primitives/Modal.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+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();
@@ -1931,7 +2038,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"),
@@ -1939,7 +2046,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"),
@@ -1949,7 +2056,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"),
@@ -1959,7 +2066,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 })
             ]
           }
         )
@@ -1971,14 +2078,22 @@ function Modal(props) {
 
 // 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 }) {
+function ConfirmProvider({
+  children,
+  stepUpOpen = false,
+  onStepUpResolve
+}) {
   const [request2, setRequest] = (0, import_react9.useState)(null);
+  const [password, setPassword] = (0, import_react9.useState)("");
   const { t } = useCopy();
   const a = useAppearance();
   const titleId = (0, import_react9.useId)();
   const settle = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!stepUpOpen) setPassword("");
+  }, [stepUpOpen]);
   const answer = (0, import_react9.useCallback)((value) => {
     settle.current?.(value);
     settle.current = null;
@@ -1991,14 +2106,52 @@ function ConfirmProvider({ children }) {
       settle.current = resolve;
     });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ConfirmContext.Provider, { value: ask, children: [
+  const showStepUp = stepUpOpen && Boolean(onStepUpResolve);
+  const open = showStepUp || request2 !== null;
+  const close = () => {
+    if (showStepUp) onStepUpResolve(null);
+    else answer(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ConfirmContext.Provider, { value: ask, children: [
     children,
-    request2 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Modal, { open: true, onClose: () => answer(false), labelledBy: titleId, size: "compact", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ...a.el("confirm.header", "throttle-modal__header"), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { id: titleId, ...a.el("confirm.title", "throttle-modal__title"), children: request2.title }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...a.el("confirm.body", "throttle-modal__body"), children: [
-        request2.body ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "throttle-muted", children: request2.body }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "throttle-actions", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Modal, { open: true, onClose: close, labelledBy: titleId, size: "compact", children: showStepUp ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("form", { onSubmit: (e) => {
+      e.preventDefault();
+      onStepUpResolve(password);
+    }, 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("stepUp.title", "throttle-modal__title"), children: t.stepUp.title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ...a.el("confirm.body", "throttle-modal__body"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "throttle-muted", children: t.stepUp.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Field,
+          {
+            label: t.stepUp.password,
+            type: "password",
+            autoComplete: "current-password",
+            value: password,
+            onChange: setPassword,
+            required: true,
+            elementKey: "stepUp.passwordField"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "throttle-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { type: "submit", elementKey: "stepUp.submitButton", children: t.stepUp.submitButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Button,
+            {
+              variant: "secondary",
+              elementKey: "stepUp.cancelButton",
+              onClick: () => onStepUpResolve(null),
+              children: t.stepUp.cancelButton
+            }
+          )
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { 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",
@@ -2007,10 +2160,10 @@ function ConfirmProvider({ children }) {
               children: request2.confirmLabel ?? t.common.delete
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { elementKey: "confirm.cancelButton", variant: "secondary", onClick: () => answer(false), children: request2.cancelLabel ?? t.common.keepIt })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { elementKey: "confirm.cancelButton", variant: "secondary", onClick: () => answer(false), children: request2.cancelLabel ?? t.common.keepIt })
         ] })
       ] })
-    ] }) : null
+    ] }) }) : null
   ] });
 }
 function useConfirm() {
@@ -2024,7 +2177,7 @@ function useConfirm() {
 
 // src/react/components/primitives/Dropdown.tsx
 var import_react10 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Dropdown(props) {
   const a = useAppearance();
   const [open, setOpen] = (0, import_react10.useState)(false);
@@ -2057,8 +2210,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_runtime14.jsxs)("div", { ref: root, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.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,
@@ -2071,7 +2224,7 @@ function Dropdown(props) {
         children: props.trigger
       }
     ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    open ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "div",
       {
         ref: menu,
@@ -2097,24 +2250,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_runtime14.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_runtime14.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_runtime14.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_runtime15 = 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_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       ...a.el("tabs.list", listClass),
@@ -2133,7 +2286,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_runtime15.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           "button",
           {
             ...rest,
@@ -2158,16 +2311,16 @@ function Tabs(props) {
 }
 
 // src/react/components/primitives/DataTable.tsx
-var import_jsx_runtime16 = 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_runtime16.jsx)("div", { className: "throttle-table__scroll", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { ...a.el(props.tableKey ?? "table", "throttle-table"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tr", { children: props.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("th", { ...a.el("table.head", "throttle-table__head"), scope: "col", children: col.label }, col.key)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("tbody", { children: props.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime16.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"),
@@ -2179,7 +2332,7 @@ function DataTable(props) {
               props.onRowClick(row);
             }
           } : void 0,
-          children: props.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime16.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)
       )) })
@@ -2188,99 +2341,54 @@ function DataTable(props) {
 }
 
 // src/react/components/primitives/EmptyState.tsx
-var import_jsx_runtime17 = 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_runtime17.jsx)(Slot, { title: props.title, description: props.description });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ...a.el("emptyState", "throttle-empty"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { ...a.el("emptyState.title", "throttle-empty__title"), children: props.title }),
-    props.description ? /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime18 = 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_runtime18.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_runtime18.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_runtime19 = 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_runtime19.jsx)("span", { ...a.el(props.elementKey ?? "badge", base), children: props.children });
-}
-
-// src/react/components/auth/StepUpDialog.tsx
-var import_react11 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-function StepUpDialog(props) {
-  const a = useAppearance();
-  const cardClass = useCardClass();
-  const { t } = useCopy();
-  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_runtime20.jsx)(Modal, { open: props.open, onClose: () => props.onResolve(null), labelledBy: titleId, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...a.el("stepUp.root", cardClass), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    "form",
-    {
-      onSubmit: (e) => {
-        e.preventDefault();
-        props.onResolve(password);
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "throttle-card__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { id: titleId, ...a.el("stepUp.title", "throttle-card__title"), children: t.stepUp.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "throttle-card__description", children: t.stepUp.description })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardBody, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            Field,
-            {
-              label: t.stepUp.password,
-              type: "password",
-              autoComplete: "current-password",
-              value: password,
-              onChange: setPassword,
-              required: true,
-              elementKey: "stepUp.passwordField"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { type: "submit", elementKey: "stepUp.submitButton", children: t.stepUp.submitButton }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "link", elementKey: "stepUp.cancelButton", onClick: () => props.onResolve(null), children: t.stepUp.cancelButton })
-        ] })
-      ]
-    }
-  ) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { ...a.el(props.elementKey ?? "badge", base), children: props.children });
 }
 
 // src/react/components/auth/AuthModal.tsx
-var import_react19 = require("react");
+var import_react18 = require("react");
 
 // src/react/components/auth/AuthFlow.tsx
-var import_react18 = require("react");
+var import_react17 = require("react");
 
 // src/react/components/auth/SignIn.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 
 // src/react/components/useAction.ts
-var import_react12 = require("react");
+var import_react11 = require("react");
 function useAction() {
   const { errorMessage } = useCopy();
-  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)(
+  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)(
     async (fn) => {
       if (inFlight.current) return;
       inFlight.current = true;
@@ -2311,8 +2419,8 @@ function SignIn(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, run } = useAction();
-  const [email, setEmail] = (0, import_react13.useState)("");
-  const [password, setPassword] = (0, import_react13.useState)("");
+  const [email, setEmail] = (0, import_react12.useState)("");
+  const [password, setPassword] = (0, import_react12.useState)("");
   const variant = props.variant ?? "quiet";
   const branded = variant === "branded";
   const grouped = variant === "grouped";
@@ -2393,7 +2501,7 @@ function SignIn(props) {
 }
 
 // src/react/components/auth/SignUp.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function SignUp(props) {
   const a = useAppearance(props.appearance);
@@ -2402,8 +2510,8 @@ function SignUp(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, notice, run } = useAction();
-  const [email, setEmail] = (0, import_react14.useState)("");
-  const [password, setPassword] = (0, import_react14.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";
@@ -2486,7 +2594,7 @@ function SignUp(props) {
 }
 
 // src/react/components/auth/ForgotPassword.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function ForgotPassword(props) {
   const a = useAppearance(props.appearance);
@@ -2495,7 +2603,7 @@ function ForgotPassword(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, notice, run } = useAction();
-  const [email, setEmail] = (0, import_react15.useState)("");
+  const [email, setEmail] = (0, import_react14.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)(
@@ -2545,7 +2653,7 @@ function ForgotPassword(props) {
 }
 
 // src/react/components/auth/ResetPassword.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function ResetPassword(props) {
   const a = useAppearance(props.appearance);
@@ -2554,7 +2662,7 @@ function ResetPassword(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, notice, run } = useAction();
-  const [password, setPassword] = (0, import_react16.useState)("");
+  const [password, setPassword] = (0, import_react15.useState)("");
   const branded = (props.variant ?? "quiet") === "branded";
   const logo = useBrandLogo(props.logo);
   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("resetPassword.root", cardClass), children: [
@@ -2606,7 +2714,7 @@ function ResetPassword(props) {
 }
 
 // src/react/components/auth/VerifyEmail.tsx
-var import_react17 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function VerifyEmail(props) {
   const a = useAppearance(props.appearance);
@@ -2615,12 +2723,12 @@ function VerifyEmail(props) {
   const { t, errorMessage } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, notice, run } = useAction();
-  const [state, setState] = (0, import_react17.useState)(props.token ? "verifying" : "idle");
-  const [error, setError] = (0, import_react17.useState)(null);
+  const [state, setState] = (0, import_react16.useState)(props.token ? "verifying" : "idle");
+  const [error, setError] = (0, import_react16.useState)(null);
   const branded = (props.variant ?? "quiet") === "branded";
   const logo = useBrandLogo(props.logo);
-  const attempted = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
+  const attempted = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     const token = props.token;
     if (!token || attempted.current === token) return;
     attempted.current = token;
@@ -2698,9 +2806,9 @@ function readLocation() {
 function AuthFlow(props) {
   const a = useAppearance(props.appearance);
   const controlled = props.view !== void 0;
-  const [internal, setInternal] = (0, import_react18.useState)(props.initialView ?? "signIn");
-  const [urlToken, setUrlToken] = (0, import_react18.useState)(void 0);
-  (0, import_react18.useEffect)(() => {
+  const [internal, setInternal] = (0, import_react17.useState)(props.initialView ?? "signIn");
+  const [urlToken, setUrlToken] = (0, import_react17.useState)(void 0);
+  (0, import_react17.useEffect)(() => {
     const found = readLocation();
     if (found.token) setUrlToken(found.token);
     if (found.view && !controlled && props.initialView === void 0) setInternal(found.view);
@@ -2714,7 +2822,7 @@ function AuthFlow(props) {
       window.location.hash = HASH_FOR[next];
     }
   };
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (props.routing !== "hash" || typeof window === "undefined") return;
     const onHashChange = () => {
       if (controlled) return;
@@ -2751,7 +2859,7 @@ function AuthFlow(props) {
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function AuthModal(props) {
   const scoped = useAppearanceProviderValue(props.appearance);
-  const titleId = (0, import_react19.useId)();
+  const titleId = (0, import_react18.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     Modal,
     {
@@ -2779,13 +2887,13 @@ function AuthModal(props) {
 }
 
 // src/react/components/account/AccountModal.tsx
-var import_react31 = require("react");
+var import_react30 = require("react");
 
 // src/react/components/account/AccountDashboard.tsx
-var import_react30 = require("react");
+var import_react29 = require("react");
 
 // src/react/components/account/VerifyEmailBanner.tsx
-var import_react20 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var DISMISS_KEY = "throttle-auth:verify-banner-dismissed";
 function readDismissed() {
@@ -2807,7 +2915,7 @@ function VerifyEmailBanner(props) {
   const { t } = useCopy(props.localization);
   const { auth, status, emailVerified } = useAuth();
   const { submitting, notice, error, run } = useAction();
-  const [dismissed, setDismissed] = (0, import_react20.useState)(readDismissed);
+  const [dismissed, setDismissed] = (0, import_react19.useState)(readDismissed);
   if (status !== "authenticated" || emailVerified || dismissed) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ...a.el("verifyBanner.root", "throttle-banner"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { ...a.el("verifyBanner.message"), children: t.verifyBanner.message }),
@@ -2898,10 +3006,10 @@ var ACCOUNT_ICONS = {
 };
 
 // src/react/components/account/ProfilePanel.tsx
-var import_react22 = require("react");
+var import_react21 = require("react");
 
 // src/react/hooks.ts
-var import_react21 = require("react");
+var import_react20 = require("react");
 function asError(err) {
   if (err instanceof ThrottleAuthError) return err;
   const anyErr = err;
@@ -2913,19 +3021,19 @@ function asError(err) {
 }
 function useResource(empty, load, deps) {
   const { status, emailVerified } = useAuth();
-  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)(() => {
+  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)(() => {
     alive.current = true;
     return () => {
       alive.current = false;
       gen.current++;
     };
   }, []);
-  const refetch = (0, import_react21.useCallback)(async () => {
+  const refetch = (0, import_react20.useCallback)(async () => {
     const mine = ++gen.current;
     setIsLoading(true);
     try {
@@ -2940,7 +3048,7 @@ function useResource(empty, load, deps) {
       if (alive.current && gen.current === mine) setIsLoading(false);
     }
   }, deps);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (status !== "authenticated") {
       gen.current++;
       setData(empty);
@@ -2955,7 +3063,7 @@ function useResource(empty, load, deps) {
 function useCustomer() {
   const { account } = useAuth();
   const res = useResource(null, () => account.getProfile(), [account]);
-  const update = (0, import_react21.useCallback)(async (patch) => {
+  const update = (0, import_react20.useCallback)(async (patch) => {
     await account.updateProfile(patch);
     await res.refetch();
   }, [account, res]);
@@ -3057,9 +3165,9 @@ function ProfilePanel(props) {
   const { status } = useAuth();
   const resource = useCustomer();
   const { submitting, error, notice, run } = useAction();
-  const [form, setForm] = (0, import_react22.useState)({ firstName: "", lastName: "", phone: "", company: "" });
-  const edited = (0, import_react22.useRef)(false);
-  (0, import_react22.useEffect)(() => {
+  const [form, setForm] = (0, import_react21.useState)({ firstName: "", lastName: "", phone: "", company: "" });
+  const edited = (0, import_react21.useRef)(false);
+  (0, import_react21.useEffect)(() => {
     const c = resource.data;
     if (!c || edited.current) return;
     setForm({
@@ -3107,55 +3215,59 @@ function ProfilePanel(props) {
                 hint: t.profile.emailReadOnly
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsxs)(FieldRow, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.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_runtime31.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_runtime31.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_runtime31.jsxs)(FieldRow, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.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_runtime31.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_runtime31.jsx)(Alert, { tone: "error", children: error }) : null,
             notice ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Alert, { tone: "success", children: notice }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { type: "submit", loading: submitting, elementKey: "profilePanel.submitButton", children: t.profile.saveButton })
@@ -3167,16 +3279,16 @@ function ProfilePanel(props) {
 }
 
 // src/react/components/account/AddressesPanel.tsx
-var import_react24 = require("react");
+var import_react23 = require("react");
 
 // src/react/components/account/AddressForm.tsx
-var import_react23 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function AddressForm(props) {
   const a = useAppearance();
   const { t } = useCopy();
   const i = props.initial;
-  const [form, setForm] = (0, import_react23.useState)({
+  const [form, setForm] = (0, import_react22.useState)({
     label: i?.label ?? "",
     firstName: i?.firstName ?? "",
     lastName: i?.lastName ?? "",
@@ -3212,10 +3324,14 @@ function AddressForm(props) {
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label: t.addresses.label, value: form.label, onChange: set("label") }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label: t.addresses.firstName, value: form.firstName, onChange: set("firstName"), autoComplete: "given-name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label: t.addresses.lastName, value: form.lastName, onChange: set("lastName"), autoComplete: "family-name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label: t.addresses.company, value: form.company, onChange: set("company"), autoComplete: "organization" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(FieldRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label: t.addresses.label, value: form.label, onChange: set("label") }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label: t.addresses.company, value: form.company, onChange: set("company"), autoComplete: "organization" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(FieldRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label: t.addresses.firstName, value: form.firstName, onChange: set("firstName"), autoComplete: "given-name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label: t.addresses.lastName, value: form.lastName, onChange: set("lastName"), autoComplete: "family-name" })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Field,
           {
@@ -3235,36 +3351,40 @@ function AddressForm(props) {
             autoComplete: "address-line2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label: t.addresses.city, value: form.city, onChange: set("city"), required: true, autoComplete: "address-level2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          Field,
-          {
-            label: t.addresses.stateProvince,
-            value: form.stateProvince,
-            onChange: set("stateProvince"),
-            autoComplete: "address-level1"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          Field,
-          {
-            label: t.addresses.postalCode,
-            value: form.postalCode,
-            onChange: set("postalCode"),
-            autoComplete: "postal-code"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsxs)(FieldRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Field, { label: t.addresses.city, value: form.city, onChange: set("city"), required: true, autoComplete: "address-level2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            Field,
+            {
+              label: t.addresses.stateProvince,
+              value: form.stateProvince,
+              onChange: set("stateProvince"),
+              autoComplete: "address-level1"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(FieldRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            Field,
+            {
+              label: t.addresses.postalCode,
+              value: form.postalCode,
+              onChange: set("postalCode"),
+              autoComplete: "postal-code"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)(Field, { label: t.addresses.phone, type: "tel", value: form.phone, onChange: set("phone"), autoComplete: "tel" }),
         props.error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Alert, { tone: "error", children: props.error }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "throttle-actions", children: [
@@ -3285,7 +3405,7 @@ function AddressesPanel(props) {
   const resource = useAddresses();
   const { submitting, error, run } = useAction();
   const confirm = useConfirm();
-  const [editing, setEditing] = (0, import_react24.useState)(null);
+  const [editing, setEditing] = (0, import_react23.useState)(null);
   const variant = props.variant ?? "rows";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
@@ -3416,23 +3536,23 @@ function AddressesPanel(props) {
 }
 
 // src/react/components/account/PaymentMethodsPanel.tsx
-var import_react26 = require("react");
+var import_react25 = require("react");
 
 // src/react/components/account/AddCardDialog.tsx
-var import_react25 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function AddCardDialog(props) {
   const { account } = useAuth();
-  const titleId = (0, import_react25.useId)();
+  const titleId = (0, import_react24.useId)();
   const { t } = useCopy(props.localization);
-  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);
+  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);
   onAdded.current = props.onAdded;
   onClose.current = props.onClose;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!props.open) {
       setSrc(null);
       setError(null);
@@ -3460,7 +3580,7 @@ function AddCardDialog(props) {
       live = false;
     };
   }, [props.open, account]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!src) return;
     const frameOrigin = (() => {
       try {
@@ -3522,7 +3642,7 @@ function PaymentMethodsPanel(props) {
   const resource = useSavedCards();
   const { submitting, error, run } = useAction();
   const confirm = useConfirm();
-  const [adding, setAdding] = (0, import_react26.useState)(false);
+  const [adding, setAdding] = (0, import_react25.useState)(false);
   const variant = props.variant ?? "rows";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
@@ -3637,7 +3757,7 @@ function PaymentMethodsPanel(props) {
 }
 
 // src/react/components/account/OrdersPanel.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 
 // src/react/components/format.ts
 function formatMoney(minorUnits, currency, locale) {
@@ -3743,17 +3863,25 @@ function OrderTimeline(props) {
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var CAN_PAY = /* @__PURE__ */ new Set(["draft", "pending"]);
 var CAN_REORDER = /* @__PURE__ */ new Set(["fulfilled", "cancelled", "closed"]);
+var CAN_CANCEL = /* @__PURE__ */ new Set(["draft", "pending", "processing"]);
+var SETTLED_PAYMENT = /* @__PURE__ */ new Set(["captured", "paid", "partially_refunded", "refunded"]);
+var CAN_RETURN = /* @__PURE__ */ new Set(["fulfilled", "partially_fulfilled", "closed"]);
 function Line(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-muted", children: props.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: props.value })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: props.strong ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: props.value }) : props.value })
   ] });
 }
 function OrderDetail(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t, locale } = useCopy(props.localization);
+  const { account } = useAuth();
   const resource = useOrder(props.orderId);
+  const { submitting, error, run } = useAction();
+  const confirm = useConfirm();
+  const allowCancel = props.allowCancel ?? true;
+  const allowReturn = props.allowReturn ?? true;
   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.jsxs)("div", { ...a.el("orderDetail.root", "throttle-panel"), children: [
     props.onBack ? (
       // Wrapped on purpose. The panel is a column flex container, so a
@@ -3764,6 +3892,7 @@ function OrderDetail(props) {
       // those outrank the merchant overrides in `appearance.elements`.
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) })
     ) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Alert, { tone: "error", children: error }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       PanelState,
       {
@@ -3771,107 +3900,183 @@ function OrderDetail(props) {
         isEmpty: (o) => o === null,
         emptyTitle: t.orders.empty,
         skeletonRows: 5,
-        children: (order) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { children: order.orderNumber }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
-            item.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: item.name }),
-              item.description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "throttle-muted", children: item.description }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "throttle-muted", children: [
-                t.orders.quantity,
-                " ",
-                item.quantity,
-                " \xD7 ",
-                formatMoney(item.unitPrice, order.currency, locale)
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: formatMoney(item.total, order.currency, locale) })
-          ] }, item.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Line, { label: t.orders.subtotal, value: formatMoney(order.subtotal, order.currency, locale) }),
-            order.discountTotal ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Line, { label: t.orders.discount, value: formatMoney(-order.discountTotal, order.currency, locale) }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Line, { label: t.orders.shipping, value: formatMoney(order.shippingTotal, order.currency, locale) }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Line, { label: t.orders.tax, value: formatMoney(order.taxTotal, order.currency, locale) }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Line, { label: t.orders.total, value: formatMoney(order.total, order.currency, locale) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.addresses", "throttle-addresses"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              AddressBlock,
-              {
-                heading: t.orders.shipTo,
-                address: order.shippingAddress,
-                elementKey: "orderDetail.shippingAddress"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              AddressBlock,
-              {
-                heading: t.orders.billTo,
-                address: order.billingAddress,
-                elementKey: "orderDetail.billingAddress"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsxs)("div", { className: "throttle-actions", children: [
-              props.onPayNow && CAN_PAY.has(order.status) ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-                Button,
-                {
-                  elementKey: "orderDetail.payButton",
-                  onClick: () => props.onPayNow(target),
-                  children: t.orders.payNow
-                }
-              ) : null,
-              props.onTrackShipment && order.status === "partially_fulfilled" ? /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)(
-                Button,
+        children: (order) => {
+          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
+            }))
+          };
+          const money = (v) => formatMoney(v, order.currency, locale);
+          const paid = SETTLED_PAYMENT.has(order.paymentStatus);
+          const showCancel = allowCancel && CAN_CANCEL.has(order.status) && !paid;
+          const showReturn = allowReturn && CAN_RETURN.has(order.status);
+          return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.layout", "throttle-detail"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.main", "throttle-detail__main"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-detail__section", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-row", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h3", { children: order.orderNumber }),
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-detail__section", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-detail__label", children: t.orders.items }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
+                  item.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { flex: 1 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: item.name }),
+                    item.description ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "throttle-lineitem__desc", children: item.description }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "throttle-lineitem__meta", children: [
+                      t.orders.quantity,
+                      " ",
+                      item.quantity,
+                      " \xD7 ",
+                      money(item.unitPrice)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: money(item.total) })
+                ] }, item.id)) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                OrderTimeline,
                 {
-                  variant: "secondary",
-                  elementKey: "orderDetail.reorderButton",
-                  onClick: () => props.onReorder(target),
-                  children: t.orders.reorder
+                  heading: t.orders.history,
+                  locale,
+                  entries: orderTimeline(order, {
+                    placed: t.orders.placed,
+                    completed: t.orders.completed,
+                    cancelled: t.orders.cancelledAt,
+                    closed: t.orders.closedAt
+                  })
                 }
-              ) : null,
-              order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { variant: "secondary", onClick: () => props.onViewSubscription(order.subscriptionId), children: t.orders.viewSubscription }) : null
-            ] });
-          })()
-        ] })
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.addresses", "throttle-addresses"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  AddressBlock,
+                  {
+                    heading: t.orders.shipTo,
+                    address: order.shippingAddress,
+                    elementKey: "orderDetail.shippingAddress"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  AddressBlock,
+                  {
+                    heading: t.orders.billTo,
+                    address: order.billingAddress,
+                    elementKey: "orderDetail.billingAddress"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("aside", { ...a.el("orderDetail.rail", "throttle-detail__rail"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-detail__section", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-detail__label", children: t.orders.total }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-detail__headline", children: money(order.total) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Line, { label: t.orders.subtotal, value: money(order.subtotal) }),
+                order.discountTotal ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Line, { label: t.orders.discount, value: money(-order.discountTotal) }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Line, { label: t.orders.shipping, value: money(order.shippingTotal) }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Line, { label: t.orders.tax, value: money(order.taxTotal) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("orderDetail.actions", "throttle-detail__actions"), children: [
+                props.onPayNow && CAN_PAY.has(order.status) ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { elementKey: "orderDetail.payButton", onClick: () => props.onPayNow(target), children: t.orders.payNow }) : null,
+                order.invoiceId ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  Button,
+                  {
+                    variant: "secondary",
+                    loading: submitting,
+                    elementKey: "orderDetail.invoiceButton",
+                    onClick: () => void run(async () => {
+                      const { url } = await account.getInvoicePdfUrl(order.invoiceId);
+                      const opened = window.open(url, "_blank", "noopener,noreferrer");
+                      if (!opened) window.location.assign(url);
+                    }),
+                    children: t.orders.downloadInvoice
+                  }
+                ) : null,
+                props.onTrackShipment && order.status === "partially_fulfilled" ? /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)(
+                  Button,
+                  {
+                    variant: "secondary",
+                    elementKey: "orderDetail.reorderButton",
+                    onClick: () => props.onReorder(target),
+                    children: t.orders.reorder
+                  }
+                ) : null,
+                order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  Button,
+                  {
+                    variant: "secondary",
+                    onClick: () => props.onViewSubscription(order.subscriptionId),
+                    children: t.orders.viewSubscription
+                  }
+                ) : null,
+                showReturn ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  Button,
+                  {
+                    variant: "secondary",
+                    disabled: submitting,
+                    elementKey: "orderDetail.returnButton",
+                    onClick: () => void (async () => {
+                      if (!await confirm({
+                        title: t.orders.requestReturnConfirm,
+                        body: t.orders.requestReturnBody,
+                        confirmLabel: t.orders.requestReturnAction
+                      })) return;
+                      await run(async () => {
+                        await account.requestOrderReturn(order.id, {
+                          items: order.lineItems.map((li) => ({
+                            lineItemId: li.id,
+                            quantity: li.quantity
+                          }))
+                        });
+                        await resource.refetch();
+                      });
+                    })(),
+                    children: t.orders.requestReturn
+                  }
+                ) : null,
+                showCancel ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                  Button,
+                  {
+                    variant: "danger",
+                    disabled: submitting,
+                    elementKey: "orderDetail.cancelButton",
+                    onClick: () => void (async () => {
+                      if (!await confirm({
+                        title: t.orders.cancelOrderConfirm,
+                        body: t.orders.cancelOrderBody,
+                        confirmLabel: t.orders.cancelOrderAction,
+                        tone: "danger"
+                      })) return;
+                      await run(async () => {
+                        await account.cancelOrder(order.id);
+                        await resource.refetch();
+                      });
+                    })(),
+                    children: t.orders.cancelOrder
+                  }
+                ) : null
+              ] })
+            ] })
+          ] });
+        }
       }
     )
   ] }) }) });
@@ -3885,7 +4090,10 @@ function OrdersPanel(props) {
   const { t, locale } = useCopy(props.localization);
   const { emailVerified } = useAuth();
   const resource = useOrders();
-  const [openId, setOpenId] = (0, import_react27.useState)(null);
+  const [openId, setOpenId] = (0, import_react26.useState)(props.initialOpenId ?? null);
+  (0, import_react26.useEffect)(() => {
+    if (props.initialOpenId) setOpenId(props.initialOpenId);
+  }, [props.initialOpenId]);
   const variant = props.variant ?? "table";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
@@ -3900,6 +4108,8 @@ function OrdersPanel(props) {
         onReorder: props.onReorder,
         onTrackShipment: props.onTrackShipment,
         onViewSubscription: props.onViewSubscription,
+        allowCancel: props.allowCancel,
+        allowReturn: props.allowReturn,
         appearance: props.appearance,
         localization: props.localization
       }
@@ -3961,10 +4171,11 @@ function OrdersPanel(props) {
 }
 
 // src/react/components/account/InvoicesPanel.tsx
-var import_react28 = require("react");
+var import_react27 = require("react");
 
 // src/react/components/account/InvoiceDetail.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
+var PAYABLE = /* @__PURE__ */ new Set(["open"]);
 function Line2(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "throttle-muted", children: props.label }),
@@ -3980,54 +4191,111 @@ function InvoiceDetail(props) {
   const { submitting, error, run } = useAction();
   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("invoiceDetail.root", "throttle-panel"), children: [
     props.onBack ? (
-      // Wrapped on purpose. The panel is a column flex container, so a
-      // direct child stretches to its full width however `width: auto`
-      // the link variant is — the control rendered 748px wide with a
-      // centred label. The wrapper takes the stretch; the button keeps
-      // its own width. A CSS fix would need a compound selector, and
-      // those outrank the merchant overrides in `appearance.elements`.
+      // Wrapped on purpose — see OrderDetail's back button for why a
+      // direct flex child stretched to 748px.
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) })
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { children: invoice.number }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Line2, { label: t.invoices.issued, value: formatDate(invoice.issuedAt, locale) }),
-        invoice.dueAt ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
-        invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          Line2,
-          {
-            label: t.invoices.period,
-            value: `${formatDate(invoice.periodStart, locale)} \u2013 ${formatDate(invoice.periodEnd, locale)}`
-          }
-        ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Line2, { label: t.invoices.total, value: formatMoney(invoice.total, invoice.currency, locale) }),
-        invoice.amountRefunded ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          Line2,
-          {
-            label: t.invoices.refunded,
-            value: formatMoney(invoice.amountRefunded, invoice.currency, locale)
-          }
-        ) : null
-      ] }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Alert, { tone: "error", children: error }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        Button,
-        {
-          variant: "secondary",
-          loading: submitting,
-          elementKey: "invoiceDetail.downloadButton",
-          onClick: () => void run(async () => {
-            const { url } = await account.getInvoicePdfUrl(invoice.id);
-            const opened = window.open(url, "_blank", "noopener,noreferrer");
-            if (!opened) window.location.assign(url);
-          }),
-          children: t.invoices.downloadButton
-        }
-      )
-    ] }) })
+    error ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => {
+      const money = (v) => formatMoney(v, invoice.currency, locale);
+      const lines = invoice.lineItems ?? [];
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("invoiceDetail.layout", "throttle-detail"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("invoiceDetail.main", "throttle-detail__main"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-detail__section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { children: invoice.number }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { className: "throttle-muted", children: [
+              t.invoices.issued,
+              " ",
+              formatDate(invoice.issuedAt, locale)
+            ] })
+          ] }),
+          lines.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-detail__section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "throttle-detail__label", children: t.invoices.items }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.el("invoiceDetail.lineItems", "throttle-stack"), children: lines.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("invoiceDetail.lineItem", "throttle-lineitem"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: item.name }),
+                item.description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "throttle-lineitem__desc", children: item.description }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("p", { className: "throttle-lineitem__meta", children: [
+                  t.orders.quantity,
+                  " ",
+                  item.quantity,
+                  " \xD7 ",
+                  money(item.unitPrice)
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: money(item.total) })
+            ] }, i)) })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("aside", { ...a.el("invoiceDetail.rail", "throttle-detail__rail"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-detail__section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "throttle-detail__label", children: t.invoices.total }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "throttle-detail__headline", children: money(invoice.total) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
+            invoice.dueAt ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
+            invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              Line2,
+              {
+                label: t.invoices.period,
+                value: `${formatDate(invoice.periodStart, locale)} \u2013 ${formatDate(invoice.periodEnd, locale)}`
+              }
+            ) : null,
+            invoice.amountRefunded ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Line2, { label: t.invoices.refunded, value: money(invoice.amountRefunded) }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("invoiceDetail.actions", "throttle-detail__actions"), children: [
+            props.onPay && PAYABLE.has(invoice.status) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              Button,
+              {
+                elementKey: "invoiceDetail.payButton",
+                onClick: () => props.onPay({
+                  id: invoice.id,
+                  number: invoice.number,
+                  total: invoice.total,
+                  currency: invoice.currency
+                }),
+                children: t.invoices.payButton
+              }
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              Button,
+              {
+                variant: "secondary",
+                loading: submitting,
+                elementKey: "invoiceDetail.downloadButton",
+                onClick: () => void run(async () => {
+                  const { url } = await account.getInvoicePdfUrl(invoice.id);
+                  const opened = window.open(url, "_blank", "noopener,noreferrer");
+                  if (!opened) window.location.assign(url);
+                }),
+                children: t.invoices.downloadButton
+              }
+            ),
+            invoice.orderId && props.onViewOrder ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              Button,
+              {
+                variant: "secondary",
+                elementKey: "invoiceDetail.orderLink",
+                onClick: () => props.onViewOrder(invoice.orderId),
+                children: invoice.orderNumber ? `${t.invoices.viewOrder} ${invoice.orderNumber}` : t.invoices.viewOrder
+              }
+            ) : null,
+            invoice.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              Button,
+              {
+                variant: "secondary",
+                elementKey: "invoiceDetail.subscriptionLink",
+                onClick: () => props.onViewSubscription(invoice.subscriptionId),
+                children: t.invoices.viewSubscription
+              }
+            ) : null
+          ] })
+        ] })
+      ] });
+    } })
   ] }) }) });
 }
 
@@ -4039,7 +4307,10 @@ function InvoicesPanel(props) {
   const { t, locale } = useCopy(props.localization);
   const { emailVerified } = useAuth();
   const resource = useInvoices();
-  const [openId, setOpenId] = (0, import_react28.useState)(null);
+  const [openId, setOpenId] = (0, import_react27.useState)(props.initialOpenId ?? null);
+  (0, import_react27.useEffect)(() => {
+    if (props.initialOpenId) setOpenId(props.initialOpenId);
+  }, [props.initialOpenId]);
   const variant = props.variant ?? "table";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
@@ -4050,6 +4321,9 @@ function InvoicesPanel(props) {
       {
         invoiceId: openId,
         onBack: () => setOpenId(null),
+        onViewOrder: props.onViewOrder,
+        onViewSubscription: props.onViewSubscription,
+        onPay: props.onPay,
         appearance: props.appearance,
         localization: props.localization
       }
@@ -4110,7 +4384,7 @@ function InvoicesPanel(props) {
 var import_jsx_runtime43 = 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"]);
+var CAN_CANCEL2 = /* @__PURE__ */ new Set(["active", "trialing", "paused", "past_due", "unpaid"]);
 function SubscriptionsPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -4123,7 +4397,7 @@ function SubscriptionsPanel(props) {
   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 actionVariant = (base) => base;
   const confirmThen = (fn, ask) => () => {
     void (async () => {
       if (!await confirm({ ...ask, tone: ask.tone ?? "neutral" })) return;
@@ -4159,7 +4433,7 @@ function SubscriptionsPanel(props) {
         children: t.subscriptions.resumeButton
       }
     ) : null,
-    CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    CAN_CANCEL2.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Button,
       {
         variant: variantFor("secondary"),
@@ -4173,7 +4447,7 @@ function SubscriptionsPanel(props) {
         children: t.subscriptions.cancelAtPeriodEnd
       }
     ) : null,
-    CAN_CANCEL.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    CAN_CANCEL2.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Button,
       {
         variant: variantFor("danger"),
@@ -4253,7 +4527,7 @@ function SubscriptionsPanel(props) {
 }
 
 // src/react/components/account/SecurityPanel.tsx
-var import_react29 = require("react");
+var import_react28 = require("react");
 
 // src/react/components/account/device.ts
 var BROWSERS = [
@@ -4296,16 +4570,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_react29.useState)("");
+  const [password, setPassword] = (0, import_react28.useState)("");
   const passwordAction = useAction();
   const sessionAction = useAction();
-  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)(() => {
+  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)(() => {
     errorMessageRef.current = errorMessage;
   });
-  const load = (0, import_react29.useCallback)(async () => {
+  const load = (0, import_react28.useCallback)(async () => {
     try {
       setSessions(await auth.listSessions());
       setListError(null);
@@ -4313,7 +4587,7 @@ function SecurityPanel(props) {
       setListError(errorMessageRef.current(err));
     }
   }, [auth]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     void load();
   }, [load]);
   const others = (sessions ?? []).filter((s) => !s.current);
@@ -4461,9 +4735,10 @@ function AccountDashboard(props) {
   const { status } = useAuth();
   const shown = props.tabs ?? [...ACCOUNT_TABS];
   const controlled = props.tab !== void 0;
-  const [internal, setInternal] = (0, import_react30.useState)(shown[0] ?? "profile");
-  const idBase = (0, import_react30.useId)();
-  (0, import_react30.useEffect)(() => {
+  const [internal, setInternal] = (0, import_react29.useState)(shown[0] ?? "profile");
+  const [openOrderId, setOpenOrderId] = (0, import_react29.useState)(null);
+  const idBase = (0, import_react29.useId)();
+  (0, import_react29.useEffect)(() => {
     if (props.routing !== "hash" || typeof window === "undefined") return;
     const apply = () => {
       const next = TAB_FOR_HASH[window.location.hash] ?? shown[0];
@@ -4517,13 +4792,25 @@ function AccountDashboard(props) {
           {
             ...shared,
             variant: props.panelVariant,
+            initialOpenId: openOrderId,
             onViewSubscription: () => go("subscriptions"),
             onPayNow: props.onPayNow,
             onReorder: props.onReorder,
             onTrackShipment: props.onTrackShipment
           }
         ) : null,
-        active === "invoices" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InvoicesPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "invoices" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          InvoicesPanel,
+          {
+            ...shared,
+            variant: props.panelVariant,
+            onViewOrder: (orderId) => {
+              setOpenOrderId(orderId);
+              go("orders");
+            },
+            onViewSubscription: () => go("subscriptions")
+          }
+        ) : null,
         active === "subscriptions" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SubscriptionsPanel, { ...shared, variant: props.panelVariant }) : null,
         active === "security" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SecurityPanel, { ...shared, variant: props.panelVariant }) : null
       ]
@@ -4547,7 +4834,7 @@ function AccountModal(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t } = useCopy(props.localization);
-  const titleId = (0, import_react31.useId)();
+  const titleId = (0, import_react30.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     Modal,
     {
@@ -4574,9 +4861,9 @@ function warnOnce(key, message) {
   warned.add(key);
   console.warn(`[@usethrottle/auth] ${message}`);
 }
-var ThrottleUIContext = (0, import_react32.createContext)(null);
+var ThrottleUIContext = (0, import_react31.createContext)(null);
 function useThrottle() {
-  const ctx = (0, import_react32.useContext)(ThrottleUIContext);
+  const ctx = (0, import_react31.useContext)(ThrottleUIContext);
   if (!ctx) {
     warnOnce(
       "use-throttle-no-provider",
@@ -4611,51 +4898,51 @@ function ThrottleProvider(props) {
     __captureStepUp
   } = props;
   useInjectStyles(injectStyles);
-  const [stepUpOpen, setStepUpOpen] = (0, import_react32.useState)(false);
-  const resolveStepUp = (0, import_react32.useRef)(null);
-  const claimRef = (0, import_react32.useRef)(claimCartOnSignIn);
+  const [stepUpOpen, setStepUpOpen] = (0, import_react31.useState)(false);
+  const resolveStepUp = (0, import_react31.useRef)(null);
+  const claimRef = (0, import_react31.useRef)(claimCartOnSignIn);
   claimRef.current = claimCartOnSignIn;
-  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) => {
+  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) => {
     onOverlaySuccess.current = onSuccess ?? null;
     setOverlay("signIn");
   }, []);
-  const openSignUp = (0, import_react32.useCallback)((onSuccess) => {
+  const openSignUp = (0, import_react31.useCallback)((onSuccess) => {
     onOverlaySuccess.current = onSuccess ?? null;
     setOverlay("signUp");
   }, []);
-  const openAccount = (0, import_react32.useCallback)((opts) => {
+  const openAccount = (0, import_react31.useCallback)((opts) => {
     onOverlaySuccess.current = null;
     overlayRestoreFocus.current = opts?.restoreFocusTo ?? null;
     setAccountTabs(opts?.tabs);
     setOverlay("account");
   }, []);
-  const closeOverlay = (0, import_react32.useCallback)(() => {
+  const closeOverlay = (0, import_react31.useCallback)(() => {
     onOverlaySuccess.current = null;
     overlayRestoreFocus.current = null;
     setOverlay(null);
   }, []);
-  const handleOverlaySuccess = (0, import_react32.useCallback)(() => {
+  const handleOverlaySuccess = (0, import_react31.useCallback)(() => {
     const fn = onOverlaySuccess.current;
     onOverlaySuccess.current = null;
     setOverlay(null);
     fn?.();
   }, []);
-  const ui = (0, import_react32.useMemo)(
+  const ui = (0, import_react31.useMemo)(
     () => ({ overlay, openSignIn, openSignUp, openAccount, close: closeOverlay }),
     [overlay, openSignIn, openSignUp, openAccount, closeOverlay]
   );
-  const askForStepUp = (0, import_react32.useCallback)(
+  const askForStepUp = (0, import_react31.useCallback)(
     () => new Promise((resolve) => {
       resolveStepUp.current = resolve;
       setStepUpOpen(true);
     }),
     []
   );
-  const auth = (0, import_react32.useMemo)(() => {
+  const auth = (0, import_react31.useMemo)(() => {
     __captureStepUp?.(askForStepUp);
     const client = injected ?? createThrottleAuth({ publishableKey, baseUrl, storage, onStepUpRequired: askForStepUp });
     const account = createAccount(client);
@@ -4688,9 +4975,8 @@ function ThrottleProvider(props) {
     resolve?.(password);
   };
   const authOverlayOpen = overlay === "signIn" || overlay === "signUp";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ConfirmProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ThrottleUIContext.Provider, { value: ui, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ConfirmProvider, { stepUpOpen, onStepUpResolve: finishStepUp, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ThrottleUIContext.Provider, { value: ui, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(StepUpDialog, { open: stepUpOpen, onResolve: finishStepUp }),
     /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       AuthModal,
       {
@@ -4706,9 +4992,13 @@ function ThrottleProvider(props) {
   ] }) }) }) }) }) });
 }
 
+// src/react/components/auth/StepUpDialog.tsx
+var import_react32 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+
 // src/react/components/auth/SignInButton.tsx
 var import_react33 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function SignInButton(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -4718,7 +5008,7 @@ function SignInButton(props) {
   const useShared = ui !== null && props.initialView === void 0;
   const label = props.children ?? t.signIn.submitButton;
   if (props.mode === "redirect") {
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime48.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);
@@ -4728,10 +5018,10 @@ function SignInButton(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_runtime48.jsx)(Button, { elementKey: "signInButton.root", onClick: openModal, children: label });
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(AppearanceProvider, { value: scoped, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { ...a.rootProps, children: trigger }),
-    !useShared ? /* @__PURE__ */ (0, import_jsx_runtime48.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,
@@ -4750,7 +5040,7 @@ function SignInButton(props) {
 
 // src/react/components/auth/SignUpButton.tsx
 var import_react34 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function SignUpButton(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -4760,7 +5050,7 @@ function SignUpButton(props) {
   const useShared = ui !== null && props.initialView === void 0;
   const label = props.children ?? t.signUp.submitButton;
   if (props.mode === "redirect") {
-    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("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);
@@ -4770,10 +5060,10 @@ function SignUpButton(props) {
     if (useShared) ui.close();
     else setLocalOpen(false);
   };
-  const trigger = props.asChild && (0, import_react34.isValidElement)(props.children) ? (0, import_react34.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { elementKey: "signUpButton.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)(
+  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,
@@ -4791,14 +5081,14 @@ function SignUpButton(props) {
 }
 
 // src/react/components/auth/SignOutButton.tsx
-var import_jsx_runtime50 = 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_runtime50.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     Button,
     {
       variant: "secondary",
@@ -4815,13 +5105,13 @@ function SignOutButton(props) {
 }
 
 // src/react/components/auth/SignInPage.tsx
-var import_jsx_runtime51 = 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_runtime51.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ...a.el("signInPage.root", "throttle-page"), children: [
-    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { ...a.el("signInPage.logo", "throttle-page__logo"), children: props.logo }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime51.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,
@@ -4831,18 +5121,18 @@ function SignInPage(props) {
         localization: props.localization
       }
     ),
-    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime52 = 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_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("signUpPage.root", "throttle-page"), children: [
-    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...a.el("signUpPage.logo", "throttle-page__logo"), children: props.logo }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime52.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,
@@ -4851,31 +5141,31 @@ function SignUpPage(props) {
         localization: props.localization
       }
     ),
-    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime53 = 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_runtime53.jsx)(import_jsx_runtime53.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_runtime53.jsx)(import_jsx_runtime53.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_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: props.fallback ?? null });
-  if (props.requireVerified && !emailVerified) return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: props.fallback ?? null });
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.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_react35 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function UserButtonRoot(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -4895,25 +5185,25 @@ function UserButtonRoot(props) {
   };
   if (status !== "authenticated" || !customer) return null;
   const name = [customer.firstName, customer.lastName].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { ref: rootRef, ...a.el("userButton.root"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(Avatar, { name, email: customer.email }),
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Avatar, { name, email: customer.email }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ...a.el("userButton.identity", "throttle-dropdown__item"), children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { ...a.el("userButton.email"), children: customer.email }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("br", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(DropdownSeparator, {}),
-          props.mode === "navigate" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DropdownItem, { itemKey: "userButton.manageButton", href: props.accountUrl ?? "#", children: t.userButton.manage }) : /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(DropdownSeparator, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DropdownSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             DropdownItem,
             {
               itemKey: "userButton.signOutButton",
@@ -4921,7 +5211,7 @@ function UserButtonRoot(props) {
               children: t.userButton.signOut
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             DropdownItem,
             {
               itemKey: "userButton.signOutAllButton",
@@ -4932,7 +5222,7 @@ function UserButtonRoot(props) {
         ]
       }
     ),
-    props.mode !== "navigate" && !ui ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    props.mode !== "navigate" && !ui ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       Modal,
       {
         open: accountOpen,
@@ -4940,8 +5230,8 @@ function UserButtonRoot(props) {
         labelledBy: titleId,
         restoreFocusTo: openerRef.current,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h2", { id: titleId, style: { padding: "16px 16px 0", margin: 0 }, children: t.account.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { style: { padding: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime54.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,
@@ -4955,13 +5245,13 @@ function UserButtonRoot(props) {
   ] }) }) });
 }
 function UserButtonLink(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.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
   ] });