@usethrottle/auth 0.3.1 → 0.5.0

package/dist/react/components/index.js

@@ -8,10 +8,10 @@ import {
   useOrders,
   useSavedCards,
   useSubscriptions
-} from "../../chunk-2DREGJUF.js";
+} from "../../chunk-TKSBAC7W.js";
 import {
   messageForError
-} from "../../chunk-ST77QX7X.js";
+} from "../../chunk-K7RCWADI.js";
 import {
   ThrottleAuthError,
   ThrottleAuthProvider,
@@ -21,10 +21,10 @@ import {
   memoryStorage,
   useAuth,
   useAuthContext
-} from "../../chunk-NCSTIPJF.js";
+} from "../../chunk-HQP5QTHQ.js";
 
 // src/react/components/provider.tsx
-import { createContext as createContext6, useCallback as useCallback4, useContext as useContext6, useMemo as useMemo4, useRef as useRef9, useState as useState22 } from "react";
+import { createContext as createContext6, useCallback as useCallback4, useContext as useContext6, useMemo as useMemo4, useRef as useRef9, useState as useState21 } from "react";
 
 // src/react/components/appearance.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -293,6 +293,23 @@ 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",
@@ -556,6 +573,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.",
@@ -619,6 +647,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."
@@ -933,11 +967,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); }
@@ -1104,6 +1140,10 @@ var THROTTLE_STYLES = `
   .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; }
@@ -1181,12 +1221,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;
@@ -1445,15 +1523,23 @@ function Modal(props) {
 }
 
 // src/react/components/primitives/Confirm.tsx
-import { createContext as createContext5, useCallback, useContext as useContext5, useId as useId2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { createContext as createContext5, useCallback, useContext as useContext5, useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var ConfirmContext = createContext5(null);
-function ConfirmProvider({ children }) {
+function ConfirmProvider({
+  children,
+  stepUpOpen = false,
+  onStepUpResolve
+}) {
   const [request, setRequest] = useState2(null);
+  const [password, setPassword] = useState2("");
   const { t } = useCopy();
   const a = useAppearance();
   const titleId = useId2();
   const settle = useRef2(null);
+  useEffect2(() => {
+    if (!stepUpOpen) setPassword("");
+  }, [stepUpOpen]);
   const answer = useCallback((value) => {
     settle.current?.(value);
     settle.current = null;
@@ -1466,9 +1552,47 @@ function ConfirmProvider({ children }) {
       settle.current = resolve;
     });
   }, []);
+  const showStepUp = stepUpOpen && Boolean(onStepUpResolve);
+  const open = showStepUp || request !== null;
+  const close = () => {
+    if (showStepUp) onStepUpResolve(null);
+    else answer(false);
+  };
   return /* @__PURE__ */ jsxs5(ConfirmContext.Provider, { value: ask, children: [
     children,
-    request ? /* @__PURE__ */ jsxs5(Modal, { open: true, onClose: () => answer(false), labelledBy: titleId, size: "compact", children: [
+    open ? /* @__PURE__ */ jsx13(Modal, { open: true, onClose: close, labelledBy: titleId, size: "compact", children: showStepUp ? /* @__PURE__ */ jsxs5("form", { onSubmit: (e) => {
+      e.preventDefault();
+      onStepUpResolve(password);
+    }, children: [
+      /* @__PURE__ */ jsx13("div", { ...a.el("confirm.header", "throttle-modal__header"), children: /* @__PURE__ */ jsx13("h2", { id: titleId, ...a.el("stepUp.title", "throttle-modal__title"), children: t.stepUp.title }) }),
+      /* @__PURE__ */ jsxs5("div", { ...a.el("confirm.body", "throttle-modal__body"), children: [
+        /* @__PURE__ */ jsx13("p", { className: "throttle-muted", children: t.stepUp.description }),
+        /* @__PURE__ */ jsx13(
+          Field,
+          {
+            label: t.stepUp.password,
+            type: "password",
+            autoComplete: "current-password",
+            value: password,
+            onChange: setPassword,
+            required: true,
+            elementKey: "stepUp.passwordField"
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { className: "throttle-actions", children: [
+          /* @__PURE__ */ jsx13(Button, { type: "submit", elementKey: "stepUp.submitButton", children: t.stepUp.submitButton }),
+          /* @__PURE__ */ jsx13(
+            Button,
+            {
+              variant: "secondary",
+              elementKey: "stepUp.cancelButton",
+              onClick: () => onStepUpResolve(null),
+              children: t.stepUp.cancelButton
+            }
+          )
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
       /* @__PURE__ */ jsx13("div", { ...a.el("confirm.header", "throttle-modal__header"), children: /* @__PURE__ */ jsx13("h2", { id: titleId, ...a.el("confirm.title", "throttle-modal__title"), children: request.title }) }),
       /* @__PURE__ */ jsxs5("div", { ...a.el("confirm.body", "throttle-modal__body"), children: [
         request.body ? /* @__PURE__ */ jsx13("p", { className: "throttle-muted", children: request.body }) : null,
@@ -1485,7 +1609,7 @@ function ConfirmProvider({ children }) {
           /* @__PURE__ */ jsx13(Button, { elementKey: "confirm.cancelButton", variant: "secondary", onClick: () => answer(false), children: request.cancelLabel ?? t.common.keepIt })
         ] })
       ] })
-    ] }) : null
+    ] }) }) : null
   ] });
 }
 function useConfirm() {
@@ -1498,7 +1622,7 @@ function useConfirm() {
 }
 
 // src/react/components/primitives/Dropdown.tsx
-import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function Dropdown(props) {
   const a = useAppearance();
@@ -1506,7 +1630,7 @@ function Dropdown(props) {
   const root = useRef3(null);
   const trigger = useRef3(null);
   const menu = useRef3(null);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!open) return;
     menu.current?.querySelector('[role="menuitem"]')?.focus();
     const onDown = (e) => {
@@ -1693,67 +1817,22 @@ function Badge(props) {
   return /* @__PURE__ */ jsx19("span", { ...a.el(props.elementKey ?? "badge", base), children: props.children });
 }
 
-// src/react/components/auth/StepUpDialog.tsx
-import { useEffect as useEffect3, useId as useId3, useState as useState4 } from "react";
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
-function StepUpDialog(props) {
-  const a = useAppearance();
-  const cardClass = useCardClass();
-  const { t } = useCopy();
-  const [password, setPassword] = useState4("");
-  const titleId = useId3();
-  useEffect3(() => {
-    if (!props.open) setPassword("");
-  }, [props.open]);
-  return /* @__PURE__ */ jsx20(Modal, { open: props.open, onClose: () => props.onResolve(null), labelledBy: titleId, children: /* @__PURE__ */ jsx20("div", { ...a.el("stepUp.root", cardClass), children: /* @__PURE__ */ jsxs10(
-    "form",
-    {
-      onSubmit: (e) => {
-        e.preventDefault();
-        props.onResolve(password);
-      },
-      children: [
-        /* @__PURE__ */ jsxs10("div", { className: "throttle-card__header", children: [
-          /* @__PURE__ */ jsx20("h2", { id: titleId, ...a.el("stepUp.title", "throttle-card__title"), children: t.stepUp.title }),
-          /* @__PURE__ */ jsx20("p", { className: "throttle-card__description", children: t.stepUp.description })
-        ] }),
-        /* @__PURE__ */ jsxs10(CardBody, { children: [
-          /* @__PURE__ */ jsx20(
-            Field,
-            {
-              label: t.stepUp.password,
-              type: "password",
-              autoComplete: "current-password",
-              value: password,
-              onChange: setPassword,
-              required: true,
-              elementKey: "stepUp.passwordField"
-            }
-          ),
-          /* @__PURE__ */ jsx20(Button, { type: "submit", elementKey: "stepUp.submitButton", children: t.stepUp.submitButton }),
-          /* @__PURE__ */ jsx20(Button, { variant: "link", elementKey: "stepUp.cancelButton", onClick: () => props.onResolve(null), children: t.stepUp.cancelButton })
-        ] })
-      ]
-    }
-  ) }) });
-}
-
 // src/react/components/auth/AuthModal.tsx
-import { useId as useId4 } from "react";
+import { useId as useId3 } from "react";
 
 // src/react/components/auth/AuthFlow.tsx
-import { useEffect as useEffect5, useState as useState11 } from "react";
+import { useEffect as useEffect5, useState as useState10 } from "react";
 
 // src/react/components/auth/SignIn.tsx
-import { useState as useState6 } from "react";
+import { useState as useState5 } from "react";
 
 // src/react/components/useAction.ts
-import { useCallback as useCallback2, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback2, useRef as useRef4, useState as useState4 } from "react";
 function useAction() {
   const { errorMessage } = useCopy();
-  const [submitting, setSubmitting] = useState5(false);
-  const [error, setError] = useState5(null);
-  const [notice, setNotice] = useState5(null);
+  const [submitting, setSubmitting] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [notice, setNotice] = useState4(null);
   const inFlight = useRef4(false);
   const run = useCallback2(
     async (fn) => {
@@ -1778,7 +1857,7 @@ function useAction() {
 }
 
 // src/react/components/auth/SignIn.tsx
-import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function SignIn(props) {
   const a = useAppearance(props.appearance);
   const cardClass = useCardClass();
@@ -1786,14 +1865,14 @@ function SignIn(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, run } = useAction();
-  const [email, setEmail] = useState6("");
-  const [password, setPassword] = useState6("");
+  const [email, setEmail] = useState5("");
+  const [password, setPassword] = useState5("");
   const variant = props.variant ?? "quiet";
   const branded = variant === "branded";
   const grouped = variant === "grouped";
   const logo = useBrandLogo(props.logo);
-  const forgotLink = props.onForgotPassword ? /* @__PURE__ */ jsx21(Button, { variant: "link", size: "xs", elementKey: "signIn.forgotLink", onClick: props.onForgotPassword, children: t.signIn.forgotLink }) : null;
-  const emailField = /* @__PURE__ */ jsx21(
+  const forgotLink = props.onForgotPassword ? /* @__PURE__ */ jsx20(Button, { variant: "link", size: "xs", elementKey: "signIn.forgotLink", onClick: props.onForgotPassword, children: t.signIn.forgotLink }) : null;
+  const emailField = /* @__PURE__ */ jsx20(
     Field,
     {
       label: t.signIn.email,
@@ -1806,7 +1885,7 @@ function SignIn(props) {
       grouped
     }
   );
-  const passwordField = /* @__PURE__ */ jsx21(
+  const passwordField = /* @__PURE__ */ jsx20(
     Field,
     {
       label: t.signIn.password,
@@ -1820,7 +1899,7 @@ function SignIn(props) {
       labelExtra: grouped ? void 0 : forgotLink
     }
   );
-  return /* @__PURE__ */ jsx21(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx21("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx20(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx20("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs10(
     "form",
     {
       ...a.el("signIn.root", cardClass),
@@ -1832,7 +1911,7 @@ function SignIn(props) {
         });
       },
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx20(
           CardHeader,
           {
             title: t.signIn.title,
@@ -1843,24 +1922,24 @@ function SignIn(props) {
             branded
           }
         ),
-        /* @__PURE__ */ jsxs11(CardBody, { children: [
-          grouped ? /* @__PURE__ */ jsxs11(FieldGroup, { children: [
+        /* @__PURE__ */ jsxs10(CardBody, { children: [
+          grouped ? /* @__PURE__ */ jsxs10(FieldGroup, { children: [
             emailField,
             passwordField
-          ] }) : /* @__PURE__ */ jsxs11(Fragment2, { children: [
+          ] }) : /* @__PURE__ */ jsxs10(Fragment3, { children: [
             emailField,
             passwordField
           ] }),
-          grouped && forgotLink ? /* @__PURE__ */ jsx21("div", { className: "throttle-field-group__forgot", children: forgotLink }) : null,
-          error ? /* @__PURE__ */ jsx21(Alert, { tone: "error", children: error }) : null,
-          /* @__PURE__ */ jsx21(Button, { type: "submit", loading: submitting, elementKey: "signIn.submitButton", children: t.signIn.submitButton })
+          grouped && forgotLink ? /* @__PURE__ */ jsx20("div", { className: "throttle-field-group__forgot", children: forgotLink }) : null,
+          error ? /* @__PURE__ */ jsx20(Alert, { tone: "error", children: error }) : null,
+          /* @__PURE__ */ jsx20(Button, { type: "submit", loading: submitting, elementKey: "signIn.submitButton", children: t.signIn.submitButton })
         ] }),
-        props.onSignUp ? /* @__PURE__ */ jsxs11(CardFooter, { ruled: !branded, children: [
-          /* @__PURE__ */ jsxs11("span", { className: "throttle-muted", children: [
+        props.onSignUp ? /* @__PURE__ */ jsxs10(CardFooter, { ruled: !branded, children: [
+          /* @__PURE__ */ jsxs10("span", { className: "throttle-muted", children: [
             t.signIn.switchPrompt,
             " "
           ] }),
-          /* @__PURE__ */ jsx21(Button, { variant: "link", elementKey: "signIn.switchLink", onClick: props.onSignUp, children: t.signIn.switchLink })
+          /* @__PURE__ */ jsx20(Button, { variant: "link", elementKey: "signIn.switchLink", onClick: props.onSignUp, children: t.signIn.switchLink })
         ] }) : null
       ]
     }
@@ -1868,8 +1947,8 @@ function SignIn(props) {
 }
 
 // src/react/components/auth/SignUp.tsx
-import { useState as useState7 } from "react";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 function SignUp(props) {
   const a = useAppearance(props.appearance);
   const cardClass = useCardClass();
@@ -1877,13 +1956,13 @@ function SignUp(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, notice, run } = useAction();
-  const [email, setEmail] = useState7("");
-  const [password, setPassword] = useState7("");
+  const [email, setEmail] = useState6("");
+  const [password, setPassword] = useState6("");
   const variant = props.variant ?? "quiet";
   const branded = variant === "branded";
   const grouped = variant === "grouped";
   const logo = useBrandLogo(props.logo);
-  const emailField = /* @__PURE__ */ jsx22(
+  const emailField = /* @__PURE__ */ jsx21(
     Field,
     {
       label: t.signUp.email,
@@ -1896,7 +1975,7 @@ function SignUp(props) {
       grouped
     }
   );
-  const passwordField = /* @__PURE__ */ jsx22(
+  const passwordField = /* @__PURE__ */ jsx21(
     Field,
     {
       label: t.signUp.password,
@@ -1909,7 +1988,7 @@ function SignUp(props) {
       grouped
     }
   );
-  return /* @__PURE__ */ jsx22(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx22("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx21(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx21("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs11(
     "form",
     {
       ...a.el("signUp.root", cardClass),
@@ -1925,7 +2004,7 @@ function SignUp(props) {
         });
       },
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx21(
           CardHeader,
           {
             title: t.signUp.title,
@@ -1936,24 +2015,24 @@ function SignUp(props) {
             branded
           }
         ),
-        /* @__PURE__ */ jsxs12(CardBody, { children: [
-          grouped ? /* @__PURE__ */ jsxs12(FieldGroup, { children: [
+        /* @__PURE__ */ jsxs11(CardBody, { children: [
+          grouped ? /* @__PURE__ */ jsxs11(FieldGroup, { children: [
             emailField,
             passwordField
-          ] }) : /* @__PURE__ */ jsxs12(Fragment3, { children: [
+          ] }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
             emailField,
             passwordField
           ] }),
-          error ? /* @__PURE__ */ jsx22(Alert, { tone: "error", children: error }) : null,
-          notice ? /* @__PURE__ */ jsx22(Alert, { tone: "info", children: notice }) : null,
-          /* @__PURE__ */ jsx22(Button, { type: "submit", loading: submitting, elementKey: "signUp.submitButton", children: t.signUp.submitButton })
+          error ? /* @__PURE__ */ jsx21(Alert, { tone: "error", children: error }) : null,
+          notice ? /* @__PURE__ */ jsx21(Alert, { tone: "info", children: notice }) : null,
+          /* @__PURE__ */ jsx21(Button, { type: "submit", loading: submitting, elementKey: "signUp.submitButton", children: t.signUp.submitButton })
         ] }),
-        props.onSignIn ? /* @__PURE__ */ jsxs12(CardFooter, { ruled: !branded, children: [
-          /* @__PURE__ */ jsxs12("span", { className: "throttle-muted", children: [
+        props.onSignIn ? /* @__PURE__ */ jsxs11(CardFooter, { ruled: !branded, children: [
+          /* @__PURE__ */ jsxs11("span", { className: "throttle-muted", children: [
             t.signUp.switchPrompt,
             " "
           ] }),
-          /* @__PURE__ */ jsx22(Button, { variant: "link", elementKey: "signUp.switchLink", onClick: props.onSignIn, children: t.signUp.switchLink })
+          /* @__PURE__ */ jsx21(Button, { variant: "link", elementKey: "signUp.switchLink", onClick: props.onSignIn, children: t.signUp.switchLink })
         ] }) : null
       ]
     }
@@ -1961,8 +2040,8 @@ function SignUp(props) {
 }
 
 // src/react/components/auth/ForgotPassword.tsx
-import { useState as useState8 } from "react";
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function ForgotPassword(props) {
   const a = useAppearance(props.appearance);
   const cardClass = useCardClass();
@@ -1970,10 +2049,10 @@ function ForgotPassword(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, notice, run } = useAction();
-  const [email, setEmail] = useState8("");
+  const [email, setEmail] = useState7("");
   const branded = (props.variant ?? "quiet") === "branded";
   const logo = useBrandLogo(props.logo);
-  return /* @__PURE__ */ jsx23(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx23("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx22(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx22("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs12(
     "form",
     {
       ...a.el("forgotPassword.root", cardClass),
@@ -1985,7 +2064,7 @@ function ForgotPassword(props) {
         });
       },
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx22(
           CardHeader,
           {
             title: t.forgotPassword.title,
@@ -1996,8 +2075,8 @@ function ForgotPassword(props) {
             branded
           }
         ),
-        /* @__PURE__ */ jsxs13(CardBody, { children: [
-          /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsxs12(CardBody, { children: [
+          /* @__PURE__ */ jsx22(
             Field,
             {
               label: t.forgotPassword.email,
@@ -2009,19 +2088,19 @@ function ForgotPassword(props) {
               elementKey: "forgotPassword.emailField"
             }
           ),
-          error ? /* @__PURE__ */ jsx23(Alert, { tone: "error", children: error }) : null,
-          notice ? /* @__PURE__ */ jsx23(Alert, { tone: "success", children: notice }) : null,
-          /* @__PURE__ */ jsx23(Button, { type: "submit", loading: submitting, elementKey: "forgotPassword.submitButton", children: t.forgotPassword.submitButton })
+          error ? /* @__PURE__ */ jsx22(Alert, { tone: "error", children: error }) : null,
+          notice ? /* @__PURE__ */ jsx22(Alert, { tone: "success", children: notice }) : null,
+          /* @__PURE__ */ jsx22(Button, { type: "submit", loading: submitting, elementKey: "forgotPassword.submitButton", children: t.forgotPassword.submitButton })
         ] }),
-        props.onBack ? /* @__PURE__ */ jsx23(CardFooter, { ruled: !branded, children: /* @__PURE__ */ jsx23(Button, { variant: "link", elementKey: "forgotPassword.backLink", onClick: props.onBack, children: t.forgotPassword.backLink }) }) : null
+        props.onBack ? /* @__PURE__ */ jsx22(CardFooter, { ruled: !branded, children: /* @__PURE__ */ jsx22(Button, { variant: "link", elementKey: "forgotPassword.backLink", onClick: props.onBack, children: t.forgotPassword.backLink }) }) : null
       ]
     }
   ) }) });
 }
 
 // src/react/components/auth/ResetPassword.tsx
-import { useState as useState9 } from "react";
-import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 function ResetPassword(props) {
   const a = useAppearance(props.appearance);
   const cardClass = useCardClass();
@@ -2029,11 +2108,11 @@ function ResetPassword(props) {
   const { t } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, error, notice, run } = useAction();
-  const [password, setPassword] = useState9("");
+  const [password, setPassword] = useState8("");
   const branded = (props.variant ?? "quiet") === "branded";
   const logo = useBrandLogo(props.logo);
-  return /* @__PURE__ */ jsx24(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx24("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs14("div", { ...a.el("resetPassword.root", cardClass), children: [
-    /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx23(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx23("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs13("div", { ...a.el("resetPassword.root", cardClass), children: [
+    /* @__PURE__ */ jsx23(
       CardHeader,
       {
         title: t.resetPassword.title,
@@ -2043,11 +2122,11 @@ function ResetPassword(props) {
         branded
       }
     ),
-    /* @__PURE__ */ jsx24(CardBody, { children: !props.token ? (
+    /* @__PURE__ */ jsx23(CardBody, { children: !props.token ? (
       // No form at all without a token. A submit button that can only
       // fail is worse than an explanation.
-      /* @__PURE__ */ jsx24(Alert, { tone: "error", children: t.resetPassword.missingToken })
-    ) : /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx23(Alert, { tone: "error", children: t.resetPassword.missingToken })
+    ) : /* @__PURE__ */ jsx23(
       "form",
       {
         onSubmit: (e) => {
@@ -2058,8 +2137,8 @@ function ResetPassword(props) {
             return t.resetPassword.doneNotice;
           });
         },
-        children: /* @__PURE__ */ jsxs14("div", { className: "throttle-stack", children: [
-          /* @__PURE__ */ jsx24(
+        children: /* @__PURE__ */ jsxs13("div", { className: "throttle-stack", children: [
+          /* @__PURE__ */ jsx23(
             Field,
             {
               label: t.resetPassword.password,
@@ -2071,9 +2150,9 @@ function ResetPassword(props) {
               elementKey: "resetPassword.passwordField"
             }
           ),
-          error ? /* @__PURE__ */ jsx24(Alert, { tone: "error", children: error }) : null,
-          notice ? /* @__PURE__ */ jsx24(Alert, { tone: "success", children: notice }) : null,
-          /* @__PURE__ */ jsx24(Button, { type: "submit", loading: submitting, elementKey: "resetPassword.submitButton", children: t.resetPassword.submitButton })
+          error ? /* @__PURE__ */ jsx23(Alert, { tone: "error", children: error }) : null,
+          notice ? /* @__PURE__ */ jsx23(Alert, { tone: "success", children: notice }) : null,
+          /* @__PURE__ */ jsx23(Button, { type: "submit", loading: submitting, elementKey: "resetPassword.submitButton", children: t.resetPassword.submitButton })
         ] })
       }
     ) })
@@ -2081,8 +2160,8 @@ function ResetPassword(props) {
 }
 
 // src/react/components/auth/VerifyEmail.tsx
-import { useEffect as useEffect4, useRef as useRef5, useState as useState10 } from "react";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState9 } from "react";
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 function VerifyEmail(props) {
   const a = useAppearance(props.appearance);
   const cardClass = useCardClass();
@@ -2090,8 +2169,8 @@ function VerifyEmail(props) {
   const { t, errorMessage } = useCopy(props.localization);
   const { auth } = useAuth();
   const { submitting, notice, run } = useAction();
-  const [state, setState] = useState10(props.token ? "verifying" : "idle");
-  const [error, setError] = useState10(null);
+  const [state, setState] = useState9(props.token ? "verifying" : "idle");
+  const [error, setError] = useState9(null);
   const branded = (props.variant ?? "quiet") === "branded";
   const logo = useBrandLogo(props.logo);
   const attempted = useRef5(null);
@@ -2108,8 +2187,8 @@ function VerifyEmail(props) {
       setState("failed");
     });
   }, [props.token, auth]);
-  return /* @__PURE__ */ jsx25(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx25("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs15("div", { ...a.el("verifyEmail.root", cardClass), children: [
-    /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx24(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx24("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs14("div", { ...a.el("verifyEmail.root", cardClass), children: [
+    /* @__PURE__ */ jsx24(
       CardHeader,
       {
         title: t.verifyEmail.title,
@@ -2119,17 +2198,17 @@ function VerifyEmail(props) {
         branded
       }
     ),
-    /* @__PURE__ */ jsxs15(CardBody, { children: [
-      state === "verifying" ? /* @__PURE__ */ jsxs15("p", { children: [
-        /* @__PURE__ */ jsx25(Spinner, {}),
+    /* @__PURE__ */ jsxs14(CardBody, { children: [
+      state === "verifying" ? /* @__PURE__ */ jsxs14("p", { children: [
+        /* @__PURE__ */ jsx24(Spinner, {}),
         " ",
         t.verifyEmail.verifying
       ] }) : null,
-      state === "done" ? /* @__PURE__ */ jsx25(Alert, { tone: "success", children: t.verifyEmail.success }) : null,
-      state === "failed" && error ? /* @__PURE__ */ jsx25(Alert, { tone: "error", children: error }) : null,
-      state === "idle" ? /* @__PURE__ */ jsx25("p", { className: "throttle-muted", children: t.verifyEmail.instructions }) : null,
-      notice ? /* @__PURE__ */ jsx25(Alert, { tone: "success", children: notice }) : null,
-      state !== "done" ? /* @__PURE__ */ jsx25(
+      state === "done" ? /* @__PURE__ */ jsx24(Alert, { tone: "success", children: t.verifyEmail.success }) : null,
+      state === "failed" && error ? /* @__PURE__ */ jsx24(Alert, { tone: "error", children: error }) : null,
+      state === "idle" ? /* @__PURE__ */ jsx24("p", { className: "throttle-muted", children: t.verifyEmail.instructions }) : null,
+      notice ? /* @__PURE__ */ jsx24(Alert, { tone: "success", children: notice }) : null,
+      state !== "done" ? /* @__PURE__ */ jsx24(
         Button,
         {
           variant: "secondary",
@@ -2147,7 +2226,7 @@ function VerifyEmail(props) {
 }
 
 // src/react/components/auth/AuthFlow.tsx
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var HASH_FOR = {
   signIn: "#/sign-in",
   signUp: "#/sign-up",
@@ -2173,8 +2252,8 @@ function readLocation() {
 function AuthFlow(props) {
   const a = useAppearance(props.appearance);
   const controlled = props.view !== void 0;
-  const [internal, setInternal] = useState11(props.initialView ?? "signIn");
-  const [urlToken, setUrlToken] = useState11(void 0);
+  const [internal, setInternal] = useState10(props.initialView ?? "signIn");
+  const [urlToken, setUrlToken] = useState10(void 0);
   useEffect5(() => {
     const found = readLocation();
     if (found.token) setUrlToken(found.token);
@@ -2205,8 +2284,8 @@ function AuthFlow(props) {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [props.routing, controlled]);
   const shared = { appearance: props.appearance, localization: props.localization };
-  return /* @__PURE__ */ jsx26("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs16("div", { ...a.el("authFlow.root"), children: [
-    view === "signIn" ? /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx25("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs15("div", { ...a.el("authFlow.root"), children: [
+    view === "signIn" ? /* @__PURE__ */ jsx25(
       SignIn,
       {
         ...shared,
@@ -2215,19 +2294,19 @@ function AuthFlow(props) {
         onSignUp: () => go("signUp")
       }
     ) : null,
-    view === "signUp" ? /* @__PURE__ */ jsx26(SignUp, { ...shared, onSuccess: props.afterSignUp, onSignIn: () => go("signIn") }) : null,
-    view === "forgotPassword" ? /* @__PURE__ */ jsx26(ForgotPassword, { ...shared, onBack: () => go("signIn") }) : null,
-    view === "resetPassword" ? /* @__PURE__ */ jsx26(ResetPassword, { ...shared, token, onSuccess: () => go("signIn") }) : null,
-    view === "verifyEmail" ? /* @__PURE__ */ jsx26(VerifyEmail, { ...shared, token }) : null
+    view === "signUp" ? /* @__PURE__ */ jsx25(SignUp, { ...shared, onSuccess: props.afterSignUp, onSignIn: () => go("signIn") }) : null,
+    view === "forgotPassword" ? /* @__PURE__ */ jsx25(ForgotPassword, { ...shared, onBack: () => go("signIn") }) : null,
+    view === "resetPassword" ? /* @__PURE__ */ jsx25(ResetPassword, { ...shared, token, onSuccess: () => go("signIn") }) : null,
+    view === "verifyEmail" ? /* @__PURE__ */ jsx25(VerifyEmail, { ...shared, token }) : null
   ] }) });
 }
 
 // src/react/components/auth/AuthModal.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 function AuthModal(props) {
   const scoped = useAppearanceProviderValue(props.appearance);
-  const titleId = useId4();
-  return /* @__PURE__ */ jsx27(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsxs17(
+  const titleId = useId3();
+  return /* @__PURE__ */ jsx26(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsxs16(
     Modal,
     {
       open: props.open,
@@ -2237,8 +2316,8 @@ function AuthModal(props) {
       overlayKey: "authModal.overlay",
       containerKey: "authModal.container",
       children: [
-        /* @__PURE__ */ jsx27("h2", { id: titleId, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Account" }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx26("h2", { id: titleId, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Account" }),
+        /* @__PURE__ */ jsx26(
           AuthFlow,
           {
             initialView: props.initialView,
@@ -2254,14 +2333,14 @@ function AuthModal(props) {
 }
 
 // src/react/components/account/AccountModal.tsx
-import { useId as useId7 } from "react";
+import { useId as useId6 } from "react";
 
 // src/react/components/account/AccountDashboard.tsx
-import { useEffect as useEffect9, useId as useId6, useState as useState21 } from "react";
+import { useEffect as useEffect11, useId as useId5, useState as useState20 } from "react";
 
 // src/react/components/account/VerifyEmailBanner.tsx
-import { useState as useState12 } from "react";
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var DISMISS_KEY = "throttle-auth:verify-banner-dismissed";
 function readDismissed() {
   try {
@@ -2282,14 +2361,14 @@ function VerifyEmailBanner(props) {
   const { t } = useCopy(props.localization);
   const { auth, status, emailVerified } = useAuth();
   const { submitting, notice, error, run } = useAction();
-  const [dismissed, setDismissed] = useState12(readDismissed);
+  const [dismissed, setDismissed] = useState11(readDismissed);
   if (status !== "authenticated" || emailVerified || dismissed) return null;
-  return /* @__PURE__ */ jsx28(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx28("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs18("div", { ...a.el("verifyBanner.root", "throttle-banner"), children: [
-    /* @__PURE__ */ jsx28("span", { ...a.el("verifyBanner.message"), children: t.verifyBanner.message }),
-    notice ? /* @__PURE__ */ jsx28(Alert, { tone: "success", children: notice }) : null,
-    error ? /* @__PURE__ */ jsx28(Alert, { tone: "error", children: error }) : null,
-    /* @__PURE__ */ jsxs18("span", { className: "throttle-actions", children: [
-      /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx27(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx27("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs17("div", { ...a.el("verifyBanner.root", "throttle-banner"), children: [
+    /* @__PURE__ */ jsx27("span", { ...a.el("verifyBanner.message"), children: t.verifyBanner.message }),
+    notice ? /* @__PURE__ */ jsx27(Alert, { tone: "success", children: notice }) : null,
+    error ? /* @__PURE__ */ jsx27(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ jsxs17("span", { className: "throttle-actions", children: [
+      /* @__PURE__ */ jsx27(
         Button,
         {
           variant: "secondary",
@@ -2302,7 +2381,7 @@ function VerifyEmailBanner(props) {
           children: t.verifyBanner.resendButton
         }
       ),
-      /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsx27(
         Button,
         {
           variant: "link",
@@ -2319,9 +2398,9 @@ function VerifyEmailBanner(props) {
 }
 
 // src/react/components/account/icons.tsx
-import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 function Glyph(props) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx28(
     "svg",
     {
       className: "throttle-tabs__railicon",
@@ -2340,68 +2419,68 @@ function Glyph(props) {
   );
 }
 var ACCOUNT_ICONS = {
-  profile: /* @__PURE__ */ jsxs19(Glyph, { children: [
-    /* @__PURE__ */ jsx29("circle", { cx: "12", cy: "8", r: "4" }),
-    /* @__PURE__ */ jsx29("path", { d: "M4 21c0-4 3.6-6 8-6s8 2 8 6" })
+  profile: /* @__PURE__ */ jsxs18(Glyph, { children: [
+    /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "8", r: "4" }),
+    /* @__PURE__ */ jsx28("path", { d: "M4 21c0-4 3.6-6 8-6s8 2 8 6" })
   ] }),
-  addresses: /* @__PURE__ */ jsxs19(Glyph, { children: [
-    /* @__PURE__ */ jsx29("path", { d: "M12 21s7-5.3 7-11a7 7 0 1 0-14 0c0 5.7 7 11 7 11Z" }),
-    /* @__PURE__ */ jsx29("circle", { cx: "12", cy: "10", r: "2.5" })
+  addresses: /* @__PURE__ */ jsxs18(Glyph, { children: [
+    /* @__PURE__ */ jsx28("path", { d: "M12 21s7-5.3 7-11a7 7 0 1 0-14 0c0 5.7 7 11 7 11Z" }),
+    /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "10", r: "2.5" })
   ] }),
-  paymentMethods: /* @__PURE__ */ jsxs19(Glyph, { children: [
-    /* @__PURE__ */ jsx29("rect", { x: "2.5", y: "5.5", width: "19", height: "13", rx: "2.5" }),
-    /* @__PURE__ */ jsx29("path", { d: "M2.5 10h19" })
+  paymentMethods: /* @__PURE__ */ jsxs18(Glyph, { children: [
+    /* @__PURE__ */ jsx28("rect", { x: "2.5", y: "5.5", width: "19", height: "13", rx: "2.5" }),
+    /* @__PURE__ */ jsx28("path", { d: "M2.5 10h19" })
   ] }),
-  orders: /* @__PURE__ */ jsxs19(Glyph, { children: [
-    /* @__PURE__ */ jsx29("path", { d: "M4 7h16v13H4z" }),
-    /* @__PURE__ */ jsx29("path", { d: "M8 7V4h8v3" }),
-    /* @__PURE__ */ jsx29("path", { d: "M8 12h8" })
+  orders: /* @__PURE__ */ jsxs18(Glyph, { children: [
+    /* @__PURE__ */ jsx28("path", { d: "M4 7h16v13H4z" }),
+    /* @__PURE__ */ jsx28("path", { d: "M8 7V4h8v3" }),
+    /* @__PURE__ */ jsx28("path", { d: "M8 12h8" })
   ] }),
-  invoices: /* @__PURE__ */ jsxs19(Glyph, { children: [
-    /* @__PURE__ */ jsx29("path", { d: "M6 3h12v18l-3-2-3 2-3-2-3 2Z" }),
-    /* @__PURE__ */ jsx29("path", { d: "M9 8h6M9 12h6" })
+  invoices: /* @__PURE__ */ jsxs18(Glyph, { children: [
+    /* @__PURE__ */ jsx28("path", { d: "M6 3h12v18l-3-2-3 2-3-2-3 2Z" }),
+    /* @__PURE__ */ jsx28("path", { d: "M9 8h6M9 12h6" })
   ] }),
-  subscriptions: /* @__PURE__ */ jsxs19(Glyph, { children: [
-    /* @__PURE__ */ jsx29("path", { d: "M3 12a9 9 0 0 1 15.5-6.2" }),
-    /* @__PURE__ */ jsx29("path", { d: "M21 12a9 9 0 0 1-15.5 6.2" }),
-    /* @__PURE__ */ jsx29("path", { d: "M18 3v4h-4M6 21v-4h4" })
+  subscriptions: /* @__PURE__ */ jsxs18(Glyph, { children: [
+    /* @__PURE__ */ jsx28("path", { d: "M3 12a9 9 0 0 1 15.5-6.2" }),
+    /* @__PURE__ */ jsx28("path", { d: "M21 12a9 9 0 0 1-15.5 6.2" }),
+    /* @__PURE__ */ jsx28("path", { d: "M18 3v4h-4M6 21v-4h4" })
   ] }),
-  security: /* @__PURE__ */ jsxs19(Glyph, { children: [
-    /* @__PURE__ */ jsx29("path", { d: "M12 3 4 6.5V12c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6.5Z" }),
-    /* @__PURE__ */ jsx29("path", { d: "m9 12 2 2 4-4" })
+  security: /* @__PURE__ */ jsxs18(Glyph, { children: [
+    /* @__PURE__ */ jsx28("path", { d: "M12 3 4 6.5V12c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6.5Z" }),
+    /* @__PURE__ */ jsx28("path", { d: "m9 12 2 2 4-4" })
   ] })
 };
 
 // src/react/components/account/ProfilePanel.tsx
-import { useEffect as useEffect6, useState as useState13, useRef as useRef6 } from "react";
+import { useEffect as useEffect6, useState as useState12, useRef as useRef6 } from "react";
 
 // src/react/components/account/PanelState.tsx
-import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 function PanelState(props) {
   const { t, errorMessage } = useCopy();
   const { data, isLoading, error, refetch } = props.resource;
   const empty = props.isEmpty(data);
-  if (isLoading && empty) return /* @__PURE__ */ jsx30(Skeleton, { count: props.skeletonRows ?? 3 });
-  const errorBanner = error ? /* @__PURE__ */ jsxs20("div", { className: "throttle-stack", children: [
-    /* @__PURE__ */ jsx30(Alert, { tone: "error", children: errorMessage(error) }),
-    /* @__PURE__ */ jsx30(Button, { variant: "secondary", onClick: () => void refetch(), children: t.common.retry })
+  if (isLoading && empty) return /* @__PURE__ */ jsx29(Skeleton, { count: props.skeletonRows ?? 3 });
+  const errorBanner = error ? /* @__PURE__ */ jsxs19("div", { className: "throttle-stack", children: [
+    /* @__PURE__ */ jsx29(Alert, { tone: "error", children: errorMessage(error) }),
+    /* @__PURE__ */ jsx29(Button, { variant: "secondary", onClick: () => void refetch(), children: t.common.retry })
   ] }) : null;
   const gatedByVerification = error?.code === "verification_required";
   if (gatedByVerification && empty) {
-    return /* @__PURE__ */ jsx30(EmptyState, { title: props.emptyTitle, description: props.gatedDescription ?? props.emptyDescription });
+    return /* @__PURE__ */ jsx29(EmptyState, { title: props.emptyTitle, description: props.gatedDescription ?? props.emptyDescription });
   }
   if (error && empty) return errorBanner;
   if (empty) {
-    return props.gated ? /* @__PURE__ */ jsx30(EmptyState, { title: props.emptyTitle, description: props.gatedDescription }) : /* @__PURE__ */ jsx30(EmptyState, { title: props.emptyTitle, description: props.emptyDescription });
+    return props.gated ? /* @__PURE__ */ jsx29(EmptyState, { title: props.emptyTitle, description: props.gatedDescription }) : /* @__PURE__ */ jsx29(EmptyState, { title: props.emptyTitle, description: props.emptyDescription });
   }
-  return /* @__PURE__ */ jsxs20(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
     errorBanner,
     props.children(data)
   ] });
 }
 
 // src/react/components/account/ProfilePanel.tsx
-import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function ProfilePanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -2409,7 +2488,7 @@ function ProfilePanel(props) {
   const { status } = useAuth();
   const resource = useCustomer();
   const { submitting, error, notice, run } = useAction();
-  const [form, setForm] = useState13({ firstName: "", lastName: "", phone: "", company: "" });
+  const [form, setForm] = useState12({ firstName: "", lastName: "", phone: "", company: "" });
   const edited = useRef6(false);
   useEffect6(() => {
     const c = resource.data;
@@ -2422,14 +2501,14 @@ function ProfilePanel(props) {
     });
   }, [resource.data]);
   if (status === "unauthenticated") return null;
-  return /* @__PURE__ */ jsx31(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx31("div", { ...a.rootProps, children: /* @__PURE__ */ jsx31("div", { ...a.el("profilePanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx30(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx30("div", { ...a.rootProps, children: /* @__PURE__ */ jsx30("div", { ...a.el("profilePanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx30(
     PanelState,
     {
       resource,
       isEmpty: (c) => c === null,
       emptyTitle: t.common.somethingWentWrong,
       skeletonRows: 4,
-      children: (customer) => /* @__PURE__ */ jsxs21(
+      children: (customer) => /* @__PURE__ */ jsxs20(
         "form",
         {
           ...a.el("profilePanel.form", "throttle-stack"),
@@ -2447,7 +2526,7 @@ function ProfilePanel(props) {
             });
           },
           children: [
-            /* @__PURE__ */ jsx31(
+            /* @__PURE__ */ jsx30(
               Field,
               {
                 label: t.profile.email,
@@ -2459,8 +2538,8 @@ function ProfilePanel(props) {
                 hint: t.profile.emailReadOnly
               }
             ),
-            /* @__PURE__ */ jsxs21(FieldRow, { children: [
-              /* @__PURE__ */ jsx31(
+            /* @__PURE__ */ jsxs20(FieldRow, { children: [
+              /* @__PURE__ */ jsx30(
                 Field,
                 {
                   label: t.profile.firstName,
@@ -2472,7 +2551,7 @@ function ProfilePanel(props) {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx30(
                 Field,
                 {
                   label: t.profile.lastName,
@@ -2485,8 +2564,8 @@ function ProfilePanel(props) {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs21(FieldRow, { children: [
-              /* @__PURE__ */ jsx31(
+            /* @__PURE__ */ jsxs20(FieldRow, { children: [
+              /* @__PURE__ */ jsx30(
                 Field,
                 {
                   label: t.profile.phone,
@@ -2499,7 +2578,7 @@ function ProfilePanel(props) {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx31(
+              /* @__PURE__ */ jsx30(
                 Field,
                 {
                   label: t.profile.company,
@@ -2512,9 +2591,9 @@ function ProfilePanel(props) {
                 }
               )
             ] }),
-            error ? /* @__PURE__ */ jsx31(Alert, { tone: "error", children: error }) : null,
-            notice ? /* @__PURE__ */ jsx31(Alert, { tone: "success", children: notice }) : null,
-            /* @__PURE__ */ jsx31(Button, { type: "submit", loading: submitting, elementKey: "profilePanel.submitButton", children: t.profile.saveButton })
+            error ? /* @__PURE__ */ jsx30(Alert, { tone: "error", children: error }) : null,
+            notice ? /* @__PURE__ */ jsx30(Alert, { tone: "success", children: notice }) : null,
+            /* @__PURE__ */ jsx30(Button, { type: "submit", loading: submitting, elementKey: "profilePanel.submitButton", children: t.profile.saveButton })
           ]
         }
       )
@@ -2523,16 +2602,16 @@ function ProfilePanel(props) {
 }
 
 // src/react/components/account/AddressesPanel.tsx
-import { useState as useState15 } from "react";
+import { useState as useState14 } from "react";
 
 // src/react/components/account/AddressForm.tsx
-import { useState as useState14 } from "react";
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 function AddressForm(props) {
   const a = useAppearance();
   const { t } = useCopy();
   const i = props.initial;
-  const [form, setForm] = useState14({
+  const [form, setForm] = useState13({
     label: i?.label ?? "",
     firstName: i?.firstName ?? "",
     lastName: i?.lastName ?? "",
@@ -2546,7 +2625,7 @@ function AddressForm(props) {
     phone: i?.phone ?? ""
   });
   const set = (key) => (value) => setForm((f) => ({ ...f, [key]: value }));
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs21(
     "form",
     {
       ...a.el("addressesPanel.form", "throttle-stack"),
@@ -2568,15 +2647,15 @@ function AddressForm(props) {
         });
       },
       children: [
-        /* @__PURE__ */ jsxs22(FieldRow, { children: [
-          /* @__PURE__ */ jsx32(Field, { label: t.addresses.label, value: form.label, onChange: set("label") }),
-          /* @__PURE__ */ jsx32(Field, { label: t.addresses.company, value: form.company, onChange: set("company"), autoComplete: "organization" })
+        /* @__PURE__ */ jsxs21(FieldRow, { children: [
+          /* @__PURE__ */ jsx31(Field, { label: t.addresses.label, value: form.label, onChange: set("label") }),
+          /* @__PURE__ */ jsx31(Field, { label: t.addresses.company, value: form.company, onChange: set("company"), autoComplete: "organization" })
         ] }),
-        /* @__PURE__ */ jsxs22(FieldRow, { children: [
-          /* @__PURE__ */ jsx32(Field, { label: t.addresses.firstName, value: form.firstName, onChange: set("firstName"), autoComplete: "given-name" }),
-          /* @__PURE__ */ jsx32(Field, { label: t.addresses.lastName, value: form.lastName, onChange: set("lastName"), autoComplete: "family-name" })
+        /* @__PURE__ */ jsxs21(FieldRow, { children: [
+          /* @__PURE__ */ jsx31(Field, { label: t.addresses.firstName, value: form.firstName, onChange: set("firstName"), autoComplete: "given-name" }),
+          /* @__PURE__ */ jsx31(Field, { label: t.addresses.lastName, value: form.lastName, onChange: set("lastName"), autoComplete: "family-name" })
         ] }),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx31(
           Field,
           {
             label: t.addresses.addressLine1,
@@ -2586,7 +2665,7 @@ function AddressForm(props) {
             autoComplete: "address-line1"
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx31(
           Field,
           {
             label: t.addresses.addressLine2,
@@ -2595,9 +2674,9 @@ function AddressForm(props) {
             autoComplete: "address-line2"
           }
         ),
-        /* @__PURE__ */ jsxs22(FieldRow, { children: [
-          /* @__PURE__ */ jsx32(Field, { label: t.addresses.city, value: form.city, onChange: set("city"), required: true, autoComplete: "address-level2" }),
-          /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsxs21(FieldRow, { children: [
+          /* @__PURE__ */ jsx31(Field, { label: t.addresses.city, value: form.city, onChange: set("city"), required: true, autoComplete: "address-level2" }),
+          /* @__PURE__ */ jsx31(
             Field,
             {
               label: t.addresses.stateProvince,
@@ -2607,8 +2686,8 @@ function AddressForm(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs22(FieldRow, { children: [
-          /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsxs21(FieldRow, { children: [
+          /* @__PURE__ */ jsx31(
             Field,
             {
               label: t.addresses.postalCode,
@@ -2617,7 +2696,7 @@ function AddressForm(props) {
               autoComplete: "postal-code"
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx31(
             Field,
             {
               label: t.addresses.countryCode,
@@ -2629,11 +2708,11 @@ function AddressForm(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx32(Field, { label: t.addresses.phone, type: "tel", value: form.phone, onChange: set("phone"), autoComplete: "tel" }),
-        props.error ? /* @__PURE__ */ jsx32(Alert, { tone: "error", children: props.error }) : null,
-        /* @__PURE__ */ jsxs22("div", { className: "throttle-actions", children: [
-          /* @__PURE__ */ jsx32(Button, { type: "submit", loading: props.submitting, children: t.common.save }),
-          /* @__PURE__ */ jsx32(Button, { variant: "link", onClick: props.onCancel, children: t.common.cancel })
+        /* @__PURE__ */ jsx31(Field, { label: t.addresses.phone, type: "tel", value: form.phone, onChange: set("phone"), autoComplete: "tel" }),
+        props.error ? /* @__PURE__ */ jsx31(Alert, { tone: "error", children: props.error }) : null,
+        /* @__PURE__ */ jsxs21("div", { className: "throttle-actions", children: [
+          /* @__PURE__ */ jsx31(Button, { type: "submit", loading: props.submitting, children: t.common.save }),
+          /* @__PURE__ */ jsx31(Button, { variant: "link", onClick: props.onCancel, children: t.common.cancel })
         ] })
       ]
     }
@@ -2641,7 +2720,7 @@ function AddressForm(props) {
 }
 
 // src/react/components/account/AddressesPanel.tsx
-import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 function AddressesPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -2649,7 +2728,7 @@ function AddressesPanel(props) {
   const resource = useAddresses();
   const { submitting, error, run } = useAction();
   const confirm = useConfirm();
-  const [editing, setEditing] = useState15(null);
+  const [editing, setEditing] = useState14(null);
   const variant = props.variant ?? "rows";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
@@ -2657,9 +2736,9 @@ function AddressesPanel(props) {
   const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
   const close = () => setEditing(null);
   const formatAddress = (address) => [address.addressLine2, address.city, address.stateProvince, address.postalCode, address.countryCode].filter(Boolean).join(", ");
-  return /* @__PURE__ */ jsx33(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx33("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs23("div", { ...a.el("addressesPanel.root", "throttle-panel"), children: [
-    !editing && error ? /* @__PURE__ */ jsx33(Alert, { tone: "error", children: error }) : null,
-    editing ? /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx32("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs22("div", { ...a.el("addressesPanel.root", "throttle-panel"), children: [
+    !editing && error ? /* @__PURE__ */ jsx32(Alert, { tone: "error", children: error }) : null,
+    editing ? /* @__PURE__ */ jsx32(
       AddressForm,
       {
         initial: editing === "new" ? void 0 : editing,
@@ -2672,16 +2751,16 @@ function AddressesPanel(props) {
           close();
         })
       }
-    ) : /* @__PURE__ */ jsxs23(Fragment5, { children: [
-      /* @__PURE__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(Button, { elementKey: "addressesPanel.addButton", variant: "secondary", onClick: () => setEditing("new"), children: t.addresses.addButton }) }),
-      /* @__PURE__ */ jsx33(
+    ) : /* @__PURE__ */ jsxs22(Fragment6, { children: [
+      /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsx32(Button, { elementKey: "addressesPanel.addButton", variant: "secondary", onClick: () => setEditing("new"), children: t.addresses.addButton }) }),
+      /* @__PURE__ */ jsx32(
         PanelState,
         {
           resource,
           isEmpty: (rows) => rows.length === 0,
           emptyTitle: t.addresses.empty,
           emptyDescription: t.addresses.emptyDescription,
-          children: (rows) => variant === "table" ? /* @__PURE__ */ jsx33(
+          children: (rows) => variant === "table" ? /* @__PURE__ */ jsx32(
             DataTable,
             {
               tableKey: "addressesPanel.table",
@@ -2690,13 +2769,13 @@ function AddressesPanel(props) {
               rows,
               columns: [
                 { key: "label", label: t.addresses.label, render: (address) => address.label || address.addressLine1 },
-                { key: "address", label: t.addresses.columnAddress, render: (address) => /* @__PURE__ */ jsxs23(Fragment5, { children: [
+                { key: "address", label: t.addresses.columnAddress, render: (address) => /* @__PURE__ */ jsxs22(Fragment6, { children: [
                   address.addressLine1,
                   formatAddress(address) ? `, ${formatAddress(address)}` : ""
                 ] }) },
-                { key: "default", label: t.addresses.defaultBadge, render: (address) => address.isDefault ? /* @__PURE__ */ jsx33(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null },
-                { key: "actions", label: t.common.actions, render: (address) => /* @__PURE__ */ jsxs23("div", { className: "throttle-actions", children: [
-                  !address.isDefault ? /* @__PURE__ */ jsx33(
+                { key: "default", label: t.addresses.defaultBadge, render: (address) => address.isDefault ? /* @__PURE__ */ jsx32(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null },
+                { key: "actions", label: t.common.actions, render: (address) => /* @__PURE__ */ jsxs22("div", { className: "throttle-actions", children: [
+                  !address.isDefault ? /* @__PURE__ */ jsx32(
                     Button,
                     {
                       variant: "secondary",
@@ -2705,7 +2784,7 @@ function AddressesPanel(props) {
                       children: t.addresses.makeDefault
                     }
                   ) : null,
-                  /* @__PURE__ */ jsx33(
+                  /* @__PURE__ */ jsx32(
                     Button,
                     {
                       variant: "secondary",
@@ -2714,7 +2793,7 @@ function AddressesPanel(props) {
                       children: t.common.edit
                     }
                   ),
-                  /* @__PURE__ */ jsx33(
+                  /* @__PURE__ */ jsx32(
                     Button,
                     {
                       variant: "danger",
@@ -2730,17 +2809,17 @@ function AddressesPanel(props) {
                 ] }) }
               ]
             }
-          ) : /* @__PURE__ */ jsx33("div", { ...a.el("addressesPanel.list", listBase), children: rows.map((address) => /* @__PURE__ */ jsxs23("div", { ...a.el("addressesPanel.item", itemBase), children: [
-            /* @__PURE__ */ jsxs23("div", { children: [
-              /* @__PURE__ */ jsxs23("div", { className: "throttle-row", children: [
-                /* @__PURE__ */ jsx33("strong", { children: address.label || address.addressLine1 }),
-                address.isDefault ? /* @__PURE__ */ jsx33(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null
+          ) : /* @__PURE__ */ jsx32("div", { ...a.el("addressesPanel.list", listBase), children: rows.map((address) => /* @__PURE__ */ jsxs22("div", { ...a.el("addressesPanel.item", itemBase), children: [
+            /* @__PURE__ */ jsxs22("div", { children: [
+              /* @__PURE__ */ jsxs22("div", { className: "throttle-row", children: [
+                /* @__PURE__ */ jsx32("strong", { children: address.label || address.addressLine1 }),
+                address.isDefault ? /* @__PURE__ */ jsx32(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null
               ] }),
-              /* @__PURE__ */ jsx33("p", { className: "throttle-muted", children: address.addressLine1 }),
-              /* @__PURE__ */ jsx33("p", { className: "throttle-muted", children: formatAddress(address) })
+              /* @__PURE__ */ jsx32("p", { className: "throttle-muted", children: address.addressLine1 }),
+              /* @__PURE__ */ jsx32("p", { className: "throttle-muted", children: formatAddress(address) })
             ] }),
-            /* @__PURE__ */ jsxs23("div", { className: "throttle-actions", children: [
-              !address.isDefault ? /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsxs22("div", { className: "throttle-actions", children: [
+              !address.isDefault ? /* @__PURE__ */ jsx32(
                 Button,
                 {
                   variant: actionVariant("secondary"),
@@ -2749,7 +2828,7 @@ function AddressesPanel(props) {
                   children: t.addresses.makeDefault
                 }
               ) : null,
-              /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx32(
                 Button,
                 {
                   variant: actionVariant("secondary"),
@@ -2758,7 +2837,7 @@ function AddressesPanel(props) {
                   children: t.common.edit
                 }
               ),
-              /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx32(
                 Button,
                 {
                   variant: actionVariant("danger"),
@@ -2780,18 +2859,18 @@ function AddressesPanel(props) {
 }
 
 // src/react/components/account/PaymentMethodsPanel.tsx
-import { useState as useState17 } from "react";
+import { useState as useState16 } from "react";
 
 // src/react/components/account/AddCardDialog.tsx
-import { useEffect as useEffect7, useId as useId5, useRef as useRef7, useState as useState16 } from "react";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useId as useId4, useRef as useRef7, useState as useState15 } from "react";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function AddCardDialog(props) {
   const { account } = useAuth();
-  const titleId = useId5();
+  const titleId = useId4();
   const { t } = useCopy(props.localization);
-  const [src, setSrc] = useState16(null);
-  const [error, setError] = useState16(null);
-  const [busy, setBusy] = useState16(false);
+  const [src, setSrc] = useState15(null);
+  const [error, setError] = useState15(null);
+  const [busy, setBusy] = useState15(false);
   const onAdded = useRef7(props.onAdded);
   const onClose = useRef7(props.onClose);
   onAdded.current = props.onAdded;
@@ -2859,11 +2938,11 @@ function AddCardDialog(props) {
     return () => window.removeEventListener("message", onMessage);
   }, [src, account, t]);
   if (!props.open) return null;
-  return /* @__PURE__ */ jsxs24(Modal, { open: true, onClose: props.onClose, labelledBy: titleId, children: [
-    /* @__PURE__ */ jsx34("div", { className: "throttle-modal__header", children: /* @__PURE__ */ jsx34("h2", { id: titleId, className: "throttle-modal__title", children: t.paymentMethods.addTitle }) }),
-    /* @__PURE__ */ jsxs24("div", { className: "throttle-modal__body", children: [
-      error ? /* @__PURE__ */ jsx34(Alert, { tone: "error", children: error }) : null,
-      busy ? /* @__PURE__ */ jsx34("div", { className: "throttle-centre", children: /* @__PURE__ */ jsx34(Spinner, {}) }) : src ? /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs23(Modal, { open: true, onClose: props.onClose, labelledBy: titleId, children: [
+    /* @__PURE__ */ jsx33("div", { className: "throttle-modal__header", children: /* @__PURE__ */ jsx33("h2", { id: titleId, className: "throttle-modal__title", children: t.paymentMethods.addTitle }) }),
+    /* @__PURE__ */ jsxs23("div", { className: "throttle-modal__body", children: [
+      error ? /* @__PURE__ */ jsx33(Alert, { tone: "error", children: error }) : null,
+      busy ? /* @__PURE__ */ jsx33("div", { className: "throttle-centre", children: /* @__PURE__ */ jsx33(Spinner, {}) }) : src ? /* @__PURE__ */ jsx33(
         "iframe",
         {
           className: "throttle-cardframe",
@@ -2871,13 +2950,13 @@ function AddCardDialog(props) {
           title: t.paymentMethods.addTitle,
           sandbox: "allow-scripts allow-forms allow-same-origin"
         }
-      ) : !error ? /* @__PURE__ */ jsx34("div", { className: "throttle-centre", children: /* @__PURE__ */ jsx34(Spinner, {}) }) : null
+      ) : !error ? /* @__PURE__ */ jsx33("div", { className: "throttle-centre", children: /* @__PURE__ */ jsx33(Spinner, {}) }) : null
     ] })
   ] });
 }
 
 // src/react/components/account/PaymentMethodsPanel.tsx
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function PaymentMethodsPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -2886,7 +2965,7 @@ function PaymentMethodsPanel(props) {
   const resource = useSavedCards();
   const { submitting, error, run } = useAction();
   const confirm = useConfirm();
-  const [adding, setAdding] = useState17(false);
+  const [adding, setAdding] = useState16(false);
   const variant = props.variant ?? "rows";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
@@ -2894,10 +2973,10 @@ function PaymentMethodsPanel(props) {
   const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
   const cardLabel = (card) => `${(card.cardBrand ?? card.methodType).toUpperCase()} \u2022\u2022\u2022\u2022 ${card.cardLastFour ?? "____"}`;
   const expiryLabel = (card) => card.cardExpMonth && card.cardExpYear ? `${String(card.cardExpMonth).padStart(2, "0")}/${card.cardExpYear}` : "";
-  return /* @__PURE__ */ jsx35(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx35("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs25("div", { ...a.el("paymentMethodsPanel.root", "throttle-panel"), children: [
-    error ? /* @__PURE__ */ jsx35(Alert, { tone: "error", children: error }) : null,
-    emailVerified ? /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(Button, { elementKey: "paymentMethodsPanel.addButton", variant: "secondary", onClick: () => setAdding(true), children: t.paymentMethods.addButton }) }) : null,
-    /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx34(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx34("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs24("div", { ...a.el("paymentMethodsPanel.root", "throttle-panel"), children: [
+    error ? /* @__PURE__ */ jsx34(Alert, { tone: "error", children: error }) : null,
+    emailVerified ? /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(Button, { elementKey: "paymentMethodsPanel.addButton", variant: "secondary", onClick: () => setAdding(true), children: t.paymentMethods.addButton }) }) : null,
+    /* @__PURE__ */ jsx34(
       AddCardDialog,
       {
         open: adding,
@@ -2908,7 +2987,7 @@ function PaymentMethodsPanel(props) {
         localization: props.localization
       }
     ),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx34(
       PanelState,
       {
         resource,
@@ -2917,7 +2996,7 @@ function PaymentMethodsPanel(props) {
         isEmpty: (rows) => rows.length === 0,
         emptyTitle: t.paymentMethods.empty,
         emptyDescription: t.paymentMethods.emptyDescription,
-        children: (rows) => variant === "table" ? /* @__PURE__ */ jsx35(
+        children: (rows) => variant === "table" ? /* @__PURE__ */ jsx34(
           DataTable,
           {
             tableKey: "paymentMethodsPanel.table",
@@ -2927,9 +3006,9 @@ function PaymentMethodsPanel(props) {
             columns: [
               { key: "card", label: t.paymentMethods.columnCard, render: (card) => cardLabel(card) },
               { key: "expires", label: t.paymentMethods.expires, render: (card) => expiryLabel(card) },
-              { key: "default", label: t.paymentMethods.defaultBadge, render: (card) => card.isDefault ? /* @__PURE__ */ jsx35(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null },
-              { key: "actions", label: t.common.actions, render: (card) => /* @__PURE__ */ jsxs25("div", { className: "throttle-actions", children: [
-                !card.isDefault ? /* @__PURE__ */ jsx35(
+              { key: "default", label: t.paymentMethods.defaultBadge, render: (card) => card.isDefault ? /* @__PURE__ */ jsx34(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null },
+              { key: "actions", label: t.common.actions, render: (card) => /* @__PURE__ */ jsxs24("div", { className: "throttle-actions", children: [
+                !card.isDefault ? /* @__PURE__ */ jsx34(
                   Button,
                   {
                     variant: "secondary",
@@ -2939,7 +3018,7 @@ function PaymentMethodsPanel(props) {
                     children: t.paymentMethods.makeDefault
                   }
                 ) : null,
-                /* @__PURE__ */ jsx35(
+                /* @__PURE__ */ jsx34(
                   Button,
                   {
                     variant: "danger",
@@ -2955,13 +3034,13 @@ function PaymentMethodsPanel(props) {
               ] }) }
             ]
           }
-        ) : /* @__PURE__ */ jsx35("div", { ...a.el("paymentMethodsPanel.list", listBase), children: rows.map((card) => /* @__PURE__ */ jsxs25("div", { ...a.el("paymentMethodsPanel.item", itemBase), children: [
-          /* @__PURE__ */ jsxs25("div", { children: [
-            /* @__PURE__ */ jsxs25("div", { className: "throttle-row", children: [
-              /* @__PURE__ */ jsx35("strong", { children: cardLabel(card) }),
-              card.isDefault ? /* @__PURE__ */ jsx35(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null
+        ) : /* @__PURE__ */ jsx34("div", { ...a.el("paymentMethodsPanel.list", listBase), children: rows.map((card) => /* @__PURE__ */ jsxs24("div", { ...a.el("paymentMethodsPanel.item", itemBase), children: [
+          /* @__PURE__ */ jsxs24("div", { children: [
+            /* @__PURE__ */ jsxs24("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ jsx34("strong", { children: cardLabel(card) }),
+              card.isDefault ? /* @__PURE__ */ jsx34(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null
             ] }),
-            card.cardExpMonth && card.cardExpYear ? /* @__PURE__ */ jsxs25("p", { className: "throttle-muted", children: [
+            card.cardExpMonth && card.cardExpYear ? /* @__PURE__ */ jsxs24("p", { className: "throttle-muted", children: [
               t.paymentMethods.expires,
               " ",
               String(card.cardExpMonth).padStart(2, "0"),
@@ -2969,8 +3048,8 @@ function PaymentMethodsPanel(props) {
               card.cardExpYear
             ] }) : null
           ] }),
-          /* @__PURE__ */ jsxs25("div", { className: "throttle-actions", children: [
-            !card.isDefault ? /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsxs24("div", { className: "throttle-actions", children: [
+            !card.isDefault ? /* @__PURE__ */ jsx34(
               Button,
               {
                 variant: actionVariant("secondary"),
@@ -2980,7 +3059,7 @@ function PaymentMethodsPanel(props) {
                 children: t.paymentMethods.makeDefault
               }
             ) : null,
-            /* @__PURE__ */ jsx35(
+            /* @__PURE__ */ jsx34(
               Button,
               {
                 variant: actionVariant("danger"),
@@ -3001,7 +3080,7 @@ function PaymentMethodsPanel(props) {
 }
 
 // src/react/components/account/OrdersPanel.tsx
-import { useState as useState18 } from "react";
+import { useEffect as useEffect8, useState as useState17 } from "react";
 
 // src/react/components/format.ts
 function formatMoney(minorUnits, currency, locale) {
@@ -3033,7 +3112,7 @@ function formatDate(value, locale) {
 }
 
 // src/react/components/account/OrderStatus.tsx
-import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function copyKey(wire) {
   return wire.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
 }
@@ -3041,21 +3120,21 @@ var ATTENTION_PAYMENT_STATES = /* @__PURE__ */ new Set(["pending", "failed", "di
 var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["cancelled", "closed", "void", "expired", "voided"]);
 function StatusBadge(props) {
   const label = props.labels[copyKey(props.status)] ?? props.status.replace(/_/g, " ");
-  return /* @__PURE__ */ jsx36(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: label });
+  return /* @__PURE__ */ jsx35(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: label });
 }
 function OrderStatus(props) {
   const labels = props.t.orders.statusLabels;
   const payLabels = props.t.orders.paymentLabels;
   const lifecycle = labels[copyKey(props.status)] ?? props.status.replace(/_/g, " ");
   const money = props.paymentStatus ? payLabels[copyKey(props.paymentStatus)] : void 0;
-  return /* @__PURE__ */ jsxs26(Fragment6, { children: [
-    /* @__PURE__ */ jsx36(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: lifecycle }),
-    money ? /* @__PURE__ */ jsx36(Badge, { tone: ATTENTION_PAYMENT_STATES.has(props.paymentStatus) ? "warning" : "neutral", children: money }) : null
+  return /* @__PURE__ */ jsxs25(Fragment7, { children: [
+    /* @__PURE__ */ jsx35(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: lifecycle }),
+    money ? /* @__PURE__ */ jsx35(Badge, { tone: ATTENTION_PAYMENT_STATES.has(props.paymentStatus) ? "warning" : "neutral", children: money }) : null
   ] });
 }
 
 // src/react/components/account/AddressBlock.tsx
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 function addressLines(address) {
   if (!address || typeof address !== "object") return [];
   const a = address;
@@ -3075,14 +3154,14 @@ function AddressBlock(props) {
   const a = useAppearance();
   const lines = addressLines(props.address);
   if (lines.length === 0) return null;
-  return /* @__PURE__ */ jsxs27("div", { ...a.el(props.elementKey ?? "orderDetail.address", "throttle-addressblock"), children: [
-    /* @__PURE__ */ jsx37("h4", { className: "throttle-section__title", children: props.heading }),
-    lines.map((l) => /* @__PURE__ */ jsx37("p", { className: "throttle-addressblock__line throttle-muted", children: l }, l))
+  return /* @__PURE__ */ jsxs26("div", { ...a.el(props.elementKey ?? "orderDetail.address", "throttle-addressblock"), children: [
+    /* @__PURE__ */ jsx36("h4", { className: "throttle-section__title", children: props.heading }),
+    lines.map((l) => /* @__PURE__ */ jsx36("p", { className: "throttle-addressblock__line throttle-muted", children: l }, l))
   ] });
 }
 
 // src/react/components/account/OrderTimeline.tsx
-import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 function orderTimeline(order, labels) {
   const entries = [{ label: labels.placed, at: order.createdAt }];
   if (order.completedAt) entries.push({ label: labels.completed, at: order.completedAt });
@@ -3093,32 +3172,40 @@ function orderTimeline(order, labels) {
 function OrderTimeline(props) {
   const a = useAppearance();
   if (props.entries.length <= 1) return null;
-  return /* @__PURE__ */ jsxs28("div", { ...a.el("orderDetail.timeline", "throttle-timeline"), children: [
-    /* @__PURE__ */ jsx38("h4", { className: "throttle-section__title", children: props.heading }),
-    props.entries.map((e) => /* @__PURE__ */ jsxs28("div", { className: "throttle-timeline__row", children: [
-      /* @__PURE__ */ jsx38("span", { className: "throttle-timeline__dot", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx38("span", { className: "throttle-timeline__label", children: e.label }),
-      /* @__PURE__ */ jsx38("span", { className: "throttle-muted", children: formatDate(e.at, props.locale) })
+  return /* @__PURE__ */ jsxs27("div", { ...a.el("orderDetail.timeline", "throttle-timeline"), children: [
+    /* @__PURE__ */ jsx37("h4", { className: "throttle-section__title", children: props.heading }),
+    props.entries.map((e) => /* @__PURE__ */ jsxs27("div", { className: "throttle-timeline__row", children: [
+      /* @__PURE__ */ jsx37("span", { className: "throttle-timeline__dot", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx37("span", { className: "throttle-timeline__label", children: e.label }),
+      /* @__PURE__ */ jsx37("span", { className: "throttle-muted", children: formatDate(e.at, props.locale) })
     ] }, `${e.label}-${e.at}`))
   ] });
 }
 
 // src/react/components/account/OrderDetail.tsx
-import { Fragment as Fragment7, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "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__ */ jsxs29("div", { className: "throttle-row", children: [
-    /* @__PURE__ */ jsx39("span", { className: "throttle-muted", children: props.label }),
-    /* @__PURE__ */ jsx39("span", { children: props.value })
+  return /* @__PURE__ */ jsxs28("div", { className: "throttle-row", children: [
+    /* @__PURE__ */ jsx38("span", { className: "throttle-muted", children: props.label }),
+    /* @__PURE__ */ jsx38("span", { children: props.strong ? /* @__PURE__ */ jsx38("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);
-  return /* @__PURE__ */ jsx39(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx39("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs29("div", { ...a.el("orderDetail.root", "throttle-panel"), children: [
+  const { submitting, error, run } = useAction();
+  const confirm = useConfirm();
+  const allowCancel = props.allowCancel ?? true;
+  const allowReturn = props.allowReturn ?? true;
+  return /* @__PURE__ */ jsx38(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx38("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs28("div", { ...a.el("orderDetail.root", "throttle-panel"), children: [
     props.onBack ? (
       // Wrapped on purpose. The panel is a column flex container, so a
       // direct child stretches to its full width however `width: auto`
@@ -3126,136 +3213,216 @@ function OrderDetail(props) {
       // centred label. The wrapper takes the stretch; the button keeps
       // its own width. A CSS fix would need a compound selector, and
       // those outrank the merchant overrides in `appearance.elements`.
-      /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsx39(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) })
+      /* @__PURE__ */ jsx38("div", { children: /* @__PURE__ */ jsx38(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) })
     ) : null,
-    /* @__PURE__ */ jsx39(
+    error ? /* @__PURE__ */ jsx38(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ jsx38(
       PanelState,
       {
         resource,
         isEmpty: (o) => o === null,
         emptyTitle: t.orders.empty,
         skeletonRows: 5,
-        children: (order) => /* @__PURE__ */ jsxs29(Fragment7, { children: [
-          /* @__PURE__ */ jsxs29("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ jsx39("h3", { children: order.orderNumber }),
-            /* @__PURE__ */ jsx39(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
-          ] }),
-          /* @__PURE__ */ jsx39("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) }),
-          /* @__PURE__ */ jsx39("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ jsxs29("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
-            item.imageUrl ? /* @__PURE__ */ jsx39("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
-            /* @__PURE__ */ jsxs29("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx39("strong", { children: item.name }),
-              item.description ? /* @__PURE__ */ jsx39("p", { className: "throttle-muted", children: item.description }) : null,
-              /* @__PURE__ */ jsxs29("p", { className: "throttle-muted", children: [
-                t.orders.quantity,
-                " ",
-                item.quantity,
-                " \xD7 ",
-                formatMoney(item.unitPrice, order.currency, locale)
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx39("span", { children: formatMoney(item.total, order.currency, locale) })
-          ] }, item.id)) }),
-          /* @__PURE__ */ jsxs29("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
-            /* @__PURE__ */ jsx39(Line, { label: t.orders.subtotal, value: formatMoney(order.subtotal, order.currency, locale) }),
-            order.discountTotal ? /* @__PURE__ */ jsx39(Line, { label: t.orders.discount, value: formatMoney(-order.discountTotal, order.currency, locale) }) : null,
-            /* @__PURE__ */ jsx39(Line, { label: t.orders.shipping, value: formatMoney(order.shippingTotal, order.currency, locale) }),
-            /* @__PURE__ */ jsx39(Line, { label: t.orders.tax, value: formatMoney(order.taxTotal, order.currency, locale) }),
-            /* @__PURE__ */ jsx39(Line, { label: t.orders.total, value: formatMoney(order.total, order.currency, locale) })
-          ] }),
-          /* @__PURE__ */ jsxs29("div", { ...a.el("orderDetail.addresses", "throttle-addresses"), children: [
-            /* @__PURE__ */ jsx39(
-              AddressBlock,
-              {
-                heading: t.orders.shipTo,
-                address: order.shippingAddress,
-                elementKey: "orderDetail.shippingAddress"
-              }
-            ),
-            /* @__PURE__ */ jsx39(
-              AddressBlock,
-              {
-                heading: t.orders.billTo,
-                address: order.billingAddress,
-                elementKey: "orderDetail.billingAddress"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx39(
-            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__ */ jsxs29("div", { className: "throttle-actions", children: [
-              props.onPayNow && CAN_PAY.has(order.status) ? /* @__PURE__ */ jsx39(
-                Button,
-                {
-                  elementKey: "orderDetail.payButton",
-                  onClick: () => props.onPayNow(target),
-                  children: t.orders.payNow
-                }
-              ) : null,
-              props.onTrackShipment && order.status === "partially_fulfilled" ? /* @__PURE__ */ jsx39(
-                Button,
-                {
-                  variant: "secondary",
-                  elementKey: "orderDetail.trackButton",
-                  onClick: () => props.onTrackShipment(target),
-                  children: t.orders.track
-                }
-              ) : null,
-              props.onReorder && CAN_REORDER.has(order.status) ? /* @__PURE__ */ jsx39(
-                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__ */ jsxs28("div", { ...a.el("orderDetail.layout", "throttle-detail"), children: [
+            /* @__PURE__ */ jsxs28("div", { ...a.el("orderDetail.main", "throttle-detail__main"), children: [
+              /* @__PURE__ */ jsxs28("div", { className: "throttle-detail__section", children: [
+                /* @__PURE__ */ jsxs28("div", { className: "throttle-row", children: [
+                  /* @__PURE__ */ jsx38("h3", { children: order.orderNumber }),
+                  /* @__PURE__ */ jsx38(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
+                ] }),
+                /* @__PURE__ */ jsx38("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) })
+              ] }),
+              /* @__PURE__ */ jsxs28("div", { className: "throttle-detail__section", children: [
+                /* @__PURE__ */ jsx38("span", { className: "throttle-detail__label", children: t.orders.items }),
+                /* @__PURE__ */ jsx38("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ jsxs28("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
+                  item.imageUrl ? /* @__PURE__ */ jsx38("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
+                  /* @__PURE__ */ jsxs28("div", { style: { flex: 1 }, children: [
+                    /* @__PURE__ */ jsx38("strong", { children: item.name }),
+                    item.description ? /* @__PURE__ */ jsx38("p", { className: "throttle-lineitem__desc", children: item.description }) : null,
+                    /* @__PURE__ */ jsxs28("p", { className: "throttle-lineitem__meta", children: [
+                      t.orders.quantity,
+                      " ",
+                      item.quantity,
+                      " \xD7 ",
+                      money(item.unitPrice)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx38("span", { children: money(item.total) })
+                ] }, item.id)) })
+              ] }),
+              /* @__PURE__ */ jsx38(
+                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__ */ jsx39(Button, { variant: "secondary", onClick: () => props.onViewSubscription(order.subscriptionId), children: t.orders.viewSubscription }) : null
-            ] });
-          })()
-        ] })
+              ),
+              /* @__PURE__ */ jsxs28("div", { ...a.el("orderDetail.addresses", "throttle-addresses"), children: [
+                /* @__PURE__ */ jsx38(
+                  AddressBlock,
+                  {
+                    heading: t.orders.shipTo,
+                    address: order.shippingAddress,
+                    elementKey: "orderDetail.shippingAddress"
+                  }
+                ),
+                /* @__PURE__ */ jsx38(
+                  AddressBlock,
+                  {
+                    heading: t.orders.billTo,
+                    address: order.billingAddress,
+                    elementKey: "orderDetail.billingAddress"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs28("aside", { ...a.el("orderDetail.rail", "throttle-detail__rail"), children: [
+              /* @__PURE__ */ jsxs28("div", { className: "throttle-detail__section", children: [
+                /* @__PURE__ */ jsx38("span", { className: "throttle-detail__label", children: t.orders.total }),
+                /* @__PURE__ */ jsx38("span", { className: "throttle-detail__headline", children: money(order.total) })
+              ] }),
+              /* @__PURE__ */ jsxs28("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
+                /* @__PURE__ */ jsx38(Line, { label: t.orders.subtotal, value: money(order.subtotal) }),
+                order.discountTotal ? /* @__PURE__ */ jsx38(Line, { label: t.orders.discount, value: money(-order.discountTotal) }) : null,
+                /* @__PURE__ */ jsx38(Line, { label: t.orders.shipping, value: money(order.shippingTotal) }),
+                /* @__PURE__ */ jsx38(Line, { label: t.orders.tax, value: money(order.taxTotal) })
+              ] }),
+              /* @__PURE__ */ jsxs28("div", { ...a.el("orderDetail.actions", "throttle-detail__actions"), children: [
+                props.onPayNow && CAN_PAY.has(order.status) ? /* @__PURE__ */ jsx38(Button, { elementKey: "orderDetail.payButton", onClick: () => props.onPayNow(target), children: t.orders.payNow }) : null,
+                order.invoiceId ? /* @__PURE__ */ jsx38(
+                  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__ */ jsx38(
+                  Button,
+                  {
+                    variant: "secondary",
+                    elementKey: "orderDetail.trackButton",
+                    onClick: () => props.onTrackShipment(target),
+                    children: t.orders.track
+                  }
+                ) : null,
+                props.onReorder && CAN_REORDER.has(order.status) ? /* @__PURE__ */ jsx38(
+                  Button,
+                  {
+                    variant: "secondary",
+                    elementKey: "orderDetail.reorderButton",
+                    onClick: () => props.onReorder(target),
+                    children: t.orders.reorder
+                  }
+                ) : null,
+                order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ jsx38(
+                  Button,
+                  {
+                    variant: "secondary",
+                    onClick: () => props.onViewSubscription(order.subscriptionId),
+                    children: t.orders.viewSubscription
+                  }
+                ) : null,
+                showReturn ? /* @__PURE__ */ jsx38(
+                  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__ */ jsx38(
+                  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
+              ] })
+            ] })
+          ] });
+        }
       }
     )
   ] }) }) });
 }
 
 // src/react/components/account/OrdersPanel.tsx
-import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 function OrdersPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t, locale } = useCopy(props.localization);
   const { emailVerified } = useAuth();
   const resource = useOrders();
-  const [openId, setOpenId] = useState18(null);
+  const [openId, setOpenId] = useState17(props.initialOpenId ?? null);
+  useEffect8(() => {
+    if (props.initialOpenId) setOpenId(props.initialOpenId);
+  }, [props.initialOpenId]);
   const variant = props.variant ?? "table";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
   const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
   if (openId) {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx39(
       OrderDetail,
       {
         orderId: openId,
@@ -3264,12 +3431,14 @@ function OrdersPanel(props) {
         onReorder: props.onReorder,
         onTrackShipment: props.onTrackShipment,
         onViewSubscription: props.onViewSubscription,
+        allowCancel: props.allowCancel,
+        allowReturn: props.allowReturn,
         appearance: props.appearance,
         localization: props.localization
       }
     );
   }
-  return /* @__PURE__ */ jsx40(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx40("div", { ...a.rootProps, children: /* @__PURE__ */ jsx40("div", { ...a.el("ordersPanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx39(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx39("div", { ...a.rootProps, children: /* @__PURE__ */ jsx39("div", { ...a.el("ordersPanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx39(
     PanelState,
     {
       resource,
@@ -3278,7 +3447,7 @@ function OrdersPanel(props) {
       isEmpty: (rows) => rows.length === 0,
       emptyTitle: t.orders.empty,
       emptyDescription: t.orders.emptyDescription,
-      children: (rows) => variant === "table" ? /* @__PURE__ */ jsx40(
+      children: (rows) => variant === "table" ? /* @__PURE__ */ jsx39(
         DataTable,
         {
           tableKey: "ordersPanel.table",
@@ -3292,25 +3461,25 @@ function OrdersPanel(props) {
             {
               key: "status",
               label: t.orders.status,
-              render: (o) => /* @__PURE__ */ jsx40(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
+              render: (o) => /* @__PURE__ */ jsx39(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
             },
             {
               key: "total",
               label: t.orders.total,
-              render: (o) => /* @__PURE__ */ jsx40("span", { className: "throttle-table__money", children: formatMoney(o.total, o.currency, locale) })
+              render: (o) => /* @__PURE__ */ jsx39("span", { className: "throttle-table__money", children: formatMoney(o.total, o.currency, locale) })
             }
           ]
         }
-      ) : /* @__PURE__ */ jsx40("div", { ...a.el("ordersPanel.list", listBase), children: rows.map((o) => /* @__PURE__ */ jsxs30("div", { ...a.el("ordersPanel.item", itemBase), children: [
-        /* @__PURE__ */ jsxs30("div", { children: [
-          /* @__PURE__ */ jsxs30("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ jsx40("strong", { children: o.orderNumber }),
-            /* @__PURE__ */ jsx40(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
+      ) : /* @__PURE__ */ jsx39("div", { ...a.el("ordersPanel.list", listBase), children: rows.map((o) => /* @__PURE__ */ jsxs29("div", { ...a.el("ordersPanel.item", itemBase), children: [
+        /* @__PURE__ */ jsxs29("div", { children: [
+          /* @__PURE__ */ jsxs29("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ jsx39("strong", { children: o.orderNumber }),
+            /* @__PURE__ */ jsx39(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
           ] }),
-          /* @__PURE__ */ jsx40("p", { className: "throttle-muted", children: formatDate(o.createdAt, locale) }),
-          /* @__PURE__ */ jsx40("p", { className: "throttle-muted", children: formatMoney(o.total, o.currency, locale) })
+          /* @__PURE__ */ jsx39("p", { className: "throttle-muted", children: formatDate(o.createdAt, locale) }),
+          /* @__PURE__ */ jsx39("p", { className: "throttle-muted", children: formatMoney(o.total, o.currency, locale) })
         ] }),
-        /* @__PURE__ */ jsx40("div", { className: "throttle-actions", children: /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx39("div", { className: "throttle-actions", children: /* @__PURE__ */ jsx39(
           Button,
           {
             variant: rowsVariant ? "link" : "secondary",
@@ -3325,14 +3494,15 @@ function OrdersPanel(props) {
 }
 
 // src/react/components/account/InvoicesPanel.tsx
-import { useState as useState19 } from "react";
+import { useEffect as useEffect9, useState as useState18 } from "react";
 
 // src/react/components/account/InvoiceDetail.tsx
-import { Fragment as Fragment8, jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+var PAYABLE = /* @__PURE__ */ new Set(["open"]);
 function Line2(props) {
-  return /* @__PURE__ */ jsxs31("div", { className: "throttle-row", children: [
-    /* @__PURE__ */ jsx41("span", { className: "throttle-muted", children: props.label }),
-    /* @__PURE__ */ jsx41("span", { children: props.value })
+  return /* @__PURE__ */ jsxs30("div", { className: "throttle-row", children: [
+    /* @__PURE__ */ jsx40("span", { className: "throttle-muted", children: props.label }),
+    /* @__PURE__ */ jsx40("span", { children: props.value })
   ] });
 }
 function InvoiceDetail(props) {
@@ -3342,84 +3512,147 @@ function InvoiceDetail(props) {
   const { account } = useAuth();
   const resource = useInvoice(props.invoiceId);
   const { submitting, error, run } = useAction();
-  return /* @__PURE__ */ jsx41(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx41("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs31("div", { ...a.el("invoiceDetail.root", "throttle-panel"), children: [
+  return /* @__PURE__ */ jsx40(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx40("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs30("div", { ...a.el("invoiceDetail.root", "throttle-panel"), children: [
     props.onBack ? (
-      // Wrapped on purpose. The panel is a column flex container, so a
-      // direct child stretches to its full width however `width: auto`
-      // the link variant is — the control rendered 748px wide with a
-      // centred label. The wrapper takes the stretch; the button keeps
-      // its own width. A CSS fix would need a compound selector, and
-      // those outrank the merchant overrides in `appearance.elements`.
-      /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) })
+      // Wrapped on purpose — see OrderDetail's back button for why a
+      // direct flex child stretched to 748px.
+      /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsx40(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) })
     ) : null,
-    /* @__PURE__ */ jsx41(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => /* @__PURE__ */ jsxs31(Fragment8, { children: [
-      /* @__PURE__ */ jsxs31("div", { className: "throttle-row", children: [
-        /* @__PURE__ */ jsx41("h3", { children: invoice.number }),
-        /* @__PURE__ */ jsx41(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
-      ] }),
-      /* @__PURE__ */ jsxs31("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
-        /* @__PURE__ */ jsx41(Line2, { label: t.invoices.issued, value: formatDate(invoice.issuedAt, locale) }),
-        invoice.dueAt ? /* @__PURE__ */ jsx41(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
-        invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ jsx41(
-          Line2,
-          {
-            label: t.invoices.period,
-            value: `${formatDate(invoice.periodStart, locale)} \u2013 ${formatDate(invoice.periodEnd, locale)}`
-          }
-        ) : null,
-        /* @__PURE__ */ jsx41(Line2, { label: t.invoices.total, value: formatMoney(invoice.total, invoice.currency, locale) }),
-        invoice.amountRefunded ? /* @__PURE__ */ jsx41(
-          Line2,
-          {
-            label: t.invoices.refunded,
-            value: formatMoney(invoice.amountRefunded, invoice.currency, locale)
-          }
-        ) : null
-      ] }),
-      error ? /* @__PURE__ */ jsx41(Alert, { tone: "error", children: error }) : null,
-      /* @__PURE__ */ jsx41(
-        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__ */ jsx40(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ jsx40(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__ */ jsxs30("div", { ...a.el("invoiceDetail.layout", "throttle-detail"), children: [
+        /* @__PURE__ */ jsxs30("div", { ...a.el("invoiceDetail.main", "throttle-detail__main"), children: [
+          /* @__PURE__ */ jsxs30("div", { className: "throttle-detail__section", children: [
+            /* @__PURE__ */ jsxs30("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ jsx40("h3", { children: invoice.number }),
+              /* @__PURE__ */ jsx40(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
+            ] }),
+            /* @__PURE__ */ jsxs30("p", { className: "throttle-muted", children: [
+              t.invoices.issued,
+              " ",
+              formatDate(invoice.issuedAt, locale)
+            ] })
+          ] }),
+          lines.length > 0 ? /* @__PURE__ */ jsxs30("div", { className: "throttle-detail__section", children: [
+            /* @__PURE__ */ jsx40("span", { className: "throttle-detail__label", children: t.invoices.items }),
+            /* @__PURE__ */ jsx40("div", { ...a.el("invoiceDetail.lineItems", "throttle-stack"), children: lines.map((item, i) => /* @__PURE__ */ jsxs30("div", { ...a.el("invoiceDetail.lineItem", "throttle-lineitem"), children: [
+              /* @__PURE__ */ jsxs30("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx40("strong", { children: item.name }),
+                item.description ? /* @__PURE__ */ jsx40("p", { className: "throttle-lineitem__desc", children: item.description }) : null,
+                /* @__PURE__ */ jsxs30("p", { className: "throttle-lineitem__meta", children: [
+                  t.orders.quantity,
+                  " ",
+                  item.quantity,
+                  " \xD7 ",
+                  money(item.unitPrice)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx40("span", { children: money(item.total) })
+            ] }, i)) })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs30("aside", { ...a.el("invoiceDetail.rail", "throttle-detail__rail"), children: [
+          /* @__PURE__ */ jsxs30("div", { className: "throttle-detail__section", children: [
+            /* @__PURE__ */ jsx40("span", { className: "throttle-detail__label", children: t.invoices.total }),
+            /* @__PURE__ */ jsx40("span", { className: "throttle-detail__headline", children: money(invoice.total) })
+          ] }),
+          /* @__PURE__ */ jsxs30("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
+            invoice.dueAt ? /* @__PURE__ */ jsx40(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
+            invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ jsx40(
+              Line2,
+              {
+                label: t.invoices.period,
+                value: `${formatDate(invoice.periodStart, locale)} \u2013 ${formatDate(invoice.periodEnd, locale)}`
+              }
+            ) : null,
+            invoice.amountRefunded ? /* @__PURE__ */ jsx40(Line2, { label: t.invoices.refunded, value: money(invoice.amountRefunded) }) : null
+          ] }),
+          /* @__PURE__ */ jsxs30("div", { ...a.el("invoiceDetail.actions", "throttle-detail__actions"), children: [
+            props.onPay && PAYABLE.has(invoice.status) ? /* @__PURE__ */ jsx40(
+              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__ */ jsx40(
+              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__ */ jsx40(
+              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__ */ jsx40(
+              Button,
+              {
+                variant: "secondary",
+                elementKey: "invoiceDetail.subscriptionLink",
+                onClick: () => props.onViewSubscription(invoice.subscriptionId),
+                children: t.invoices.viewSubscription
+              }
+            ) : null
+          ] })
+        ] })
+      ] });
+    } })
   ] }) }) });
 }
 
 // src/react/components/account/InvoicesPanel.tsx
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 function InvoicesPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t, locale } = useCopy(props.localization);
   const { emailVerified } = useAuth();
   const resource = useInvoices();
-  const [openId, setOpenId] = useState19(null);
+  const [openId, setOpenId] = useState18(props.initialOpenId ?? null);
+  useEffect9(() => {
+    if (props.initialOpenId) setOpenId(props.initialOpenId);
+  }, [props.initialOpenId]);
   const variant = props.variant ?? "table";
   const rowsVariant = variant === "rows";
   const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
   const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
   if (openId) {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx41(
       InvoiceDetail,
       {
         invoiceId: openId,
         onBack: () => setOpenId(null),
+        onViewOrder: props.onViewOrder,
+        onViewSubscription: props.onViewSubscription,
+        onPay: props.onPay,
         appearance: props.appearance,
         localization: props.localization
       }
     );
   }
-  return /* @__PURE__ */ jsx42(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx42("div", { ...a.rootProps, children: /* @__PURE__ */ jsx42("div", { ...a.el("invoicesPanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx41("div", { ...a.rootProps, children: /* @__PURE__ */ jsx41("div", { ...a.el("invoicesPanel.root", "throttle-panel"), children: /* @__PURE__ */ jsx41(
     PanelState,
     {
       resource,
@@ -3428,7 +3661,7 @@ function InvoicesPanel(props) {
       isEmpty: (rows) => rows.length === 0,
       emptyTitle: t.invoices.empty,
       emptyDescription: t.invoices.emptyDescription,
-      children: (rows) => variant === "table" ? /* @__PURE__ */ jsx42(
+      children: (rows) => variant === "table" ? /* @__PURE__ */ jsx41(
         DataTable,
         {
           tableKey: "invoicesPanel.table",
@@ -3439,24 +3672,24 @@ function InvoicesPanel(props) {
           columns: [
             { key: "number", label: t.invoices.number },
             { key: "issuedAt", label: t.invoices.issued, render: (i) => formatDate(i.issuedAt, locale) },
-            { key: "status", label: t.invoices.status, render: (i) => /* @__PURE__ */ jsx42(StatusBadge, { status: i.status, labels: t.invoices.statusLabels }) },
+            { key: "status", label: t.invoices.status, render: (i) => /* @__PURE__ */ jsx41(StatusBadge, { status: i.status, labels: t.invoices.statusLabels }) },
             {
               key: "total",
               label: t.invoices.total,
-              render: (i) => /* @__PURE__ */ jsx42("span", { className: "throttle-table__money", children: formatMoney(i.total, i.currency, locale) })
+              render: (i) => /* @__PURE__ */ jsx41("span", { className: "throttle-table__money", children: formatMoney(i.total, i.currency, locale) })
             }
           ]
         }
-      ) : /* @__PURE__ */ jsx42("div", { ...a.el("invoicesPanel.list", listBase), children: rows.map((i) => /* @__PURE__ */ jsxs32("div", { ...a.el("invoicesPanel.item", itemBase), children: [
-        /* @__PURE__ */ jsxs32("div", { children: [
-          /* @__PURE__ */ jsxs32("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ jsx42("strong", { children: i.number }),
-            /* @__PURE__ */ jsx42(StatusBadge, { status: i.status, labels: t.invoices.statusLabels })
+      ) : /* @__PURE__ */ jsx41("div", { ...a.el("invoicesPanel.list", listBase), children: rows.map((i) => /* @__PURE__ */ jsxs31("div", { ...a.el("invoicesPanel.item", itemBase), children: [
+        /* @__PURE__ */ jsxs31("div", { children: [
+          /* @__PURE__ */ jsxs31("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ jsx41("strong", { children: i.number }),
+            /* @__PURE__ */ jsx41(StatusBadge, { status: i.status, labels: t.invoices.statusLabels })
           ] }),
-          /* @__PURE__ */ jsx42("p", { className: "throttle-muted", children: formatDate(i.issuedAt, locale) }),
-          /* @__PURE__ */ jsx42("p", { className: "throttle-muted", children: formatMoney(i.total, i.currency, locale) })
+          /* @__PURE__ */ jsx41("p", { className: "throttle-muted", children: formatDate(i.issuedAt, locale) }),
+          /* @__PURE__ */ jsx41("p", { className: "throttle-muted", children: formatMoney(i.total, i.currency, locale) })
         ] }),
-        /* @__PURE__ */ jsx42("div", { className: "throttle-actions", children: /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx41("div", { className: "throttle-actions", children: /* @__PURE__ */ jsx41(
           Button,
           {
             variant: rowsVariant ? "link" : "secondary",
@@ -3471,10 +3704,18 @@ function InvoicesPanel(props) {
 }
 
 // src/react/components/account/SubscriptionsPanel.tsx
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 var CAN_PAUSE = /* @__PURE__ */ new Set(["active", "trialing"]);
 var CAN_RESUME = /* @__PURE__ */ new Set(["paused"]);
-var CAN_CANCEL = /* @__PURE__ */ new Set(["active", "trialing", "paused", "past_due", "unpaid"]);
+var CAN_CANCEL2 = /* @__PURE__ */ new Set(["active", "trialing", "paused", "past_due", "unpaid"]);
+var INTERVAL_WORD = {
+  weekly: "week",
+  biweekly: "2 weeks",
+  monthly: "month",
+  quarterly: "quarter",
+  yearly: "year"
+};
+var intervalWord = (interval) => INTERVAL_WORD[interval] ?? interval;
 function SubscriptionsPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -3487,17 +3728,17 @@ 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;
       await run(fn);
     })();
   };
-  const priceLabel = (sub) => `${formatMoney(sub.amount, sub.currency, locale)} / ${sub.interval}${sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""}`;
+  const priceLabel = (sub) => `${formatMoney(sub.amount, sub.currency, locale)} / ${intervalWord(sub.interval)}${sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""}`;
   const renewsLabel = (sub) => formatDate(sub.status === "cancelled" ? sub.cancelledAt ?? sub.currentPeriodEnd : sub.currentPeriodEnd, locale);
-  const lifecycleActions = (sub, variantFor) => /* @__PURE__ */ jsxs33("div", { className: "throttle-actions", children: [
-    CAN_PAUSE.has(sub.status) ? /* @__PURE__ */ jsx43(
+  const lifecycleActions = (sub, variantFor) => /* @__PURE__ */ jsxs32("div", { className: "throttle-actions", children: [
+    CAN_PAUSE.has(sub.status) ? /* @__PURE__ */ jsx42(
       Button,
       {
         variant: variantFor("secondary"),
@@ -3510,7 +3751,7 @@ function SubscriptionsPanel(props) {
         children: t.subscriptions.pauseButton
       }
     ) : null,
-    CAN_RESUME.has(sub.status) ? /* @__PURE__ */ jsx43(
+    CAN_RESUME.has(sub.status) ? /* @__PURE__ */ jsx42(
       Button,
       {
         variant: variantFor("secondary"),
@@ -3523,7 +3764,7 @@ function SubscriptionsPanel(props) {
         children: t.subscriptions.resumeButton
       }
     ) : null,
-    CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx43(
+    CAN_CANCEL2.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx42(
       Button,
       {
         variant: variantFor("secondary"),
@@ -3537,7 +3778,7 @@ function SubscriptionsPanel(props) {
         children: t.subscriptions.cancelAtPeriodEnd
       }
     ) : null,
-    CAN_CANCEL.has(sub.status) ? /* @__PURE__ */ jsx43(
+    CAN_CANCEL2.has(sub.status) ? /* @__PURE__ */ jsx42(
       Button,
       {
         variant: variantFor("danger"),
@@ -3552,9 +3793,9 @@ function SubscriptionsPanel(props) {
       }
     ) : null
   ] });
-  return /* @__PURE__ */ jsx43(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx43("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs33("div", { ...a.el("subscriptionsPanel.root", "throttle-panel"), children: [
-    error ? /* @__PURE__ */ jsx43(Alert, { tone: "error", children: error }) : null,
-    /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx42(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx42("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs32("div", { ...a.el("subscriptionsPanel.root", "throttle-panel"), children: [
+    error ? /* @__PURE__ */ jsx42(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ jsx42(
       PanelState,
       {
         resource,
@@ -3563,7 +3804,7 @@ function SubscriptionsPanel(props) {
         isEmpty: (rows) => rows.length === 0,
         emptyTitle: t.subscriptions.empty,
         emptyDescription: t.subscriptions.emptyDescription,
-        children: (rows) => variant === "table" ? /* @__PURE__ */ jsx43(
+        children: (rows) => variant === "table" ? /* @__PURE__ */ jsx42(
           DataTable,
           {
             tableKey: "subscriptionsPanel.table",
@@ -3572,42 +3813,42 @@ function SubscriptionsPanel(props) {
             rows,
             columns: [
               { key: "plan", label: t.subscriptions.columnPlan, render: (sub) => sub.planName ?? sub.planReference },
-              { key: "price", label: t.subscriptions.columnPrice, render: (sub) => /* @__PURE__ */ jsx43("span", { className: "throttle-table__money", children: priceLabel(sub) }) },
+              { key: "price", label: t.subscriptions.columnPrice, render: (sub) => /* @__PURE__ */ jsx42("span", { className: "throttle-table__money", children: priceLabel(sub) }) },
               { key: "renews", label: t.subscriptions.columnRenews, render: (sub) => renewsLabel(sub) },
-              { key: "status", label: t.subscriptions.columnStatus, render: (sub) => /* @__PURE__ */ jsxs33("div", { className: "throttle-row", children: [
-                /* @__PURE__ */ jsx43(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels }),
-                sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx43(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
+              { key: "status", label: t.subscriptions.columnStatus, render: (sub) => /* @__PURE__ */ jsxs32("div", { className: "throttle-row", children: [
+                /* @__PURE__ */ jsx42(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels }),
+                sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx42(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
               ] }) },
               { key: "actions", label: t.common.actions, render: (sub) => lifecycleActions(sub, (base) => base) }
             ]
           }
-        ) : /* @__PURE__ */ jsx43("div", { ...a.el("subscriptionsPanel.list", listBase), children: rows.map((sub) => /* @__PURE__ */ jsxs33("div", { ...a.el("subscriptionsPanel.item", itemBase), children: [
-          /* @__PURE__ */ jsxs33("div", { children: [
-            /* @__PURE__ */ jsxs33("div", { className: "throttle-row", children: [
-              /* @__PURE__ */ jsx43("strong", { children: sub.planName ?? sub.planReference }),
-              /* @__PURE__ */ jsx43(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels })
+        ) : /* @__PURE__ */ jsx42("div", { ...a.el("subscriptionsPanel.list", listBase), children: rows.map((sub) => /* @__PURE__ */ jsxs32("div", { ...a.el("subscriptionsPanel.item", itemBase), children: [
+          /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsxs32("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ jsx42("strong", { children: sub.planName ?? sub.planReference }),
+              /* @__PURE__ */ jsx42(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels })
             ] }),
-            /* @__PURE__ */ jsxs33("p", { className: "throttle-muted", children: [
+            /* @__PURE__ */ jsxs32("p", { className: "throttle-muted", children: [
               formatMoney(sub.amount, sub.currency, locale),
               " / ",
-              sub.interval,
+              intervalWord(sub.interval),
               sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""
             ] }),
-            sub.status === "cancelled" ? /* @__PURE__ */ jsxs33("p", { className: "throttle-muted", children: [
+            sub.status === "cancelled" ? /* @__PURE__ */ jsxs32("p", { className: "throttle-muted", children: [
               t.subscriptions.cancelledOn,
               " ",
               formatDate(sub.cancelledAt ?? sub.currentPeriodEnd, locale)
-            ] }) : /* @__PURE__ */ jsxs33("p", { className: "throttle-muted", children: [
+            ] }) : /* @__PURE__ */ jsxs32("p", { className: "throttle-muted", children: [
               sub.cancelAtPeriodEnd ? t.subscriptions.endsOn : t.subscriptions.renewsOn,
               " ",
               formatDate(sub.currentPeriodEnd, locale)
             ] }),
-            sub.trialEnd ? /* @__PURE__ */ jsxs33("p", { className: "throttle-muted", children: [
+            sub.trialEnd ? /* @__PURE__ */ jsxs32("p", { className: "throttle-muted", children: [
               t.subscriptions.trialEnds,
               " ",
               formatDate(sub.trialEnd, locale)
             ] }) : null,
-            sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx43(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
+            sub.cancelAtPeriodEnd ? /* @__PURE__ */ jsx42(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
           ] }),
           lifecycleActions(sub, actionVariant)
         ] }, sub.id)) })
@@ -3617,7 +3858,7 @@ function SubscriptionsPanel(props) {
 }
 
 // src/react/components/account/SecurityPanel.tsx
-import { useCallback as useCallback3, useEffect as useEffect8, useRef as useRef8, useState as useState20 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect10, useRef as useRef8, useState as useState19 } from "react";
 
 // src/react/components/account/device.ts
 var BROWSERS = [
@@ -3650,7 +3891,7 @@ function describeDevice(userAgent) {
 }
 
 // src/react/components/account/SecurityPanel.tsx
-import { Fragment as Fragment9, jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 function SecurityPanel(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
@@ -3660,13 +3901,13 @@ function SecurityPanel(props) {
   const rowsVariant = variant === "rows";
   const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
   const revokeVariant = rowsVariant ? "linkDanger" : "danger";
-  const [password, setPassword] = useState20("");
+  const [password, setPassword] = useState19("");
   const passwordAction = useAction();
   const sessionAction = useAction();
-  const [sessions, setSessions] = useState20(null);
-  const [listError, setListError] = useState20(null);
+  const [sessions, setSessions] = useState19(null);
+  const [listError, setListError] = useState19(null);
   const errorMessageRef = useRef8(errorMessage);
-  useEffect8(() => {
+  useEffect10(() => {
     errorMessageRef.current = errorMessage;
   });
   const load = useCallback3(async () => {
@@ -3677,12 +3918,12 @@ function SecurityPanel(props) {
       setListError(errorMessageRef.current(err));
     }
   }, [auth]);
-  useEffect8(() => {
+  useEffect10(() => {
     void load();
   }, [load]);
   const others = (sessions ?? []).filter((s) => !s.current);
-  return /* @__PURE__ */ jsx44(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx44("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs34("div", { ...a.el("securityPanel.root", "throttle-panel"), children: [
-    /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsx43(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx43("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs33("div", { ...a.el("securityPanel.root", "throttle-panel"), children: [
+    /* @__PURE__ */ jsxs33(
       "form",
       {
         ...a.el("securityPanel.passwordForm", "throttle-stack"),
@@ -3695,8 +3936,8 @@ function SecurityPanel(props) {
           });
         },
         children: [
-          /* @__PURE__ */ jsx44("h3", { children: t.security.passwordTitle }),
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx43("h3", { children: t.security.passwordTitle }),
+          /* @__PURE__ */ jsx43(
             Field,
             {
               label: t.security.newPassword,
@@ -3707,21 +3948,21 @@ function SecurityPanel(props) {
               onChange: setPassword
             }
           ),
-          passwordAction.error ? /* @__PURE__ */ jsx44(Alert, { tone: "error", children: passwordAction.error }) : null,
-          passwordAction.notice ? /* @__PURE__ */ jsx44(Alert, { tone: "success", children: passwordAction.notice }) : null,
-          /* @__PURE__ */ jsx44(Button, { type: "submit", loading: passwordAction.submitting, elementKey: "securityPanel.passwordButton", children: t.security.changeButton })
+          passwordAction.error ? /* @__PURE__ */ jsx43(Alert, { tone: "error", children: passwordAction.error }) : null,
+          passwordAction.notice ? /* @__PURE__ */ jsx43(Alert, { tone: "success", children: passwordAction.notice }) : null,
+          /* @__PURE__ */ jsx43(Button, { type: "submit", loading: passwordAction.submitting, elementKey: "securityPanel.passwordButton", children: t.security.changeButton })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs34("div", { ...a.el("securityPanel.sessionList", "throttle-stack"), children: [
-      /* @__PURE__ */ jsx44("h3", { children: t.security.sessionsTitle }),
-      listError ? /* @__PURE__ */ jsxs34(Fragment9, { children: [
-        /* @__PURE__ */ jsx44(Alert, { tone: "error", children: listError }),
-        /* @__PURE__ */ jsx44(Button, { variant: "secondary", onClick: () => void load(), children: t.common.retry })
+    /* @__PURE__ */ jsxs33("div", { ...a.el("securityPanel.sessionList", "throttle-stack"), children: [
+      /* @__PURE__ */ jsx43("h3", { children: t.security.sessionsTitle }),
+      listError ? /* @__PURE__ */ jsxs33(Fragment8, { children: [
+        /* @__PURE__ */ jsx43(Alert, { tone: "error", children: listError }),
+        /* @__PURE__ */ jsx43(Button, { variant: "secondary", onClick: () => void load(), children: t.common.retry })
       ] }) : null,
-      sessionAction.error ? /* @__PURE__ */ jsx44(Alert, { tone: "error", children: sessionAction.error }) : null,
-      sessions === null && !listError ? /* @__PURE__ */ jsx44(Skeleton, { count: 2 }) : null,
-      sessions !== null && !listError && variant === "table" ? /* @__PURE__ */ jsx44(
+      sessionAction.error ? /* @__PURE__ */ jsx43(Alert, { tone: "error", children: sessionAction.error }) : null,
+      sessions === null && !listError ? /* @__PURE__ */ jsx43(Skeleton, { count: 2 }) : null,
+      sessions !== null && !listError && variant === "table" ? /* @__PURE__ */ jsx43(
         DataTable,
         {
           tableKey: "securityPanel.table",
@@ -3729,12 +3970,12 @@ function SecurityPanel(props) {
           rowKey: (session) => session.id,
           rows: sessions,
           columns: [
-            { key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ jsxs34("div", { className: "throttle-row", children: [
-              /* @__PURE__ */ jsx44("span", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
-              session.current ? /* @__PURE__ */ jsx44(Badge, { tone: "success", children: t.security.thisDevice }) : null
+            { key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ jsxs33("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ jsx43("span", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
+              session.current ? /* @__PURE__ */ jsx43(Badge, { tone: "success", children: t.security.thisDevice }) : null
             ] }) },
             { key: "lastActive", label: t.security.lastActive, render: (session) => formatDate(session.lastUsedAt, locale) },
-            { key: "actions", label: t.common.actions, render: (session) => !session.current ? /* @__PURE__ */ jsx44(
+            { key: "actions", label: t.common.actions, render: (session) => !session.current ? /* @__PURE__ */ jsx43(
               Button,
               {
                 variant: "danger",
@@ -3749,19 +3990,19 @@ function SecurityPanel(props) {
             ) : null }
           ]
         }
-      ) : (sessions ?? []).map((session) => /* @__PURE__ */ jsxs34("div", { ...a.el("securityPanel.sessionItem", itemBase), children: [
-        /* @__PURE__ */ jsxs34("div", { children: [
-          /* @__PURE__ */ jsxs34("div", { className: "throttle-row", children: [
-            /* @__PURE__ */ jsx44("strong", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
-            session.current ? /* @__PURE__ */ jsx44(Badge, { tone: "success", children: t.security.thisDevice }) : null
+      ) : (sessions ?? []).map((session) => /* @__PURE__ */ jsxs33("div", { ...a.el("securityPanel.sessionItem", itemBase), children: [
+        /* @__PURE__ */ jsxs33("div", { children: [
+          /* @__PURE__ */ jsxs33("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ jsx43("strong", { children: describeDevice(session.userAgent) || session.ipPrefix || session.id }),
+            session.current ? /* @__PURE__ */ jsx43(Badge, { tone: "success", children: t.security.thisDevice }) : null
           ] }),
-          /* @__PURE__ */ jsxs34("p", { className: "throttle-muted", children: [
+          /* @__PURE__ */ jsxs33("p", { className: "throttle-muted", children: [
             t.security.lastActive,
             " ",
             formatDate(session.lastUsedAt, locale)
           ] })
         ] }),
-        !session.current ? /* @__PURE__ */ jsx44(
+        !session.current ? /* @__PURE__ */ jsx43(
           Button,
           {
             variant: revokeVariant,
@@ -3775,8 +4016,8 @@ function SecurityPanel(props) {
           }
         ) : null
       ] }, session.id)),
-      sessions !== null && others.length === 0 ? /* @__PURE__ */ jsx44("p", { className: "throttle-muted", children: t.security.sessionsEmpty }) : null,
-      others.length > 0 ? /* @__PURE__ */ jsx44(
+      sessions !== null && others.length === 0 ? /* @__PURE__ */ jsx43("p", { className: "throttle-muted", children: t.security.sessionsEmpty }) : null,
+      others.length > 0 ? /* @__PURE__ */ jsx43(
         Button,
         {
           variant: "danger",
@@ -3796,7 +4037,7 @@ function SecurityPanel(props) {
 }
 
 // src/react/components/account/AccountDashboard.tsx
-import { Fragment as Fragment10, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var ACCOUNT_TABS = [
   "profile",
   "addresses",
@@ -3825,9 +4066,10 @@ function AccountDashboard(props) {
   const { status } = useAuth();
   const shown = props.tabs ?? [...ACCOUNT_TABS];
   const controlled = props.tab !== void 0;
-  const [internal, setInternal] = useState21(shown[0] ?? "profile");
-  const idBase = useId6();
-  useEffect9(() => {
+  const [internal, setInternal] = useState20(shown[0] ?? "profile");
+  const [openOrderId, setOpenOrderId] = useState20(null);
+  const idBase = useId5();
+  useEffect11(() => {
     if (props.routing !== "hash" || typeof window === "undefined") return;
     const apply = () => {
       const next = TAB_FOR_HASH[window.location.hash] ?? shown[0];
@@ -3848,7 +4090,7 @@ function AccountDashboard(props) {
   };
   const shared = { appearance: props.appearance, localization: props.localization };
   const sidebar = (props.layout ?? "sidebar") === "sidebar";
-  const nav = /* @__PURE__ */ jsx45(
+  const nav = /* @__PURE__ */ jsx44(
     Tabs,
     {
       idBase,
@@ -3864,7 +4106,7 @@ function AccountDashboard(props) {
       }))
     }
   );
-  const panel = /* @__PURE__ */ jsxs35(
+  const panel = /* @__PURE__ */ jsxs34(
     "div",
     {
       ...a.el("accountDashboard.panel", sidebar ? "throttle-account__content" : "throttle-tabs__panel"),
@@ -3873,46 +4115,58 @@ function AccountDashboard(props) {
       "aria-labelledby": `${idBase}-tab-${active}`,
       tabIndex: 0,
       children: [
-        active === "profile" ? /* @__PURE__ */ jsx45(ProfilePanel, { ...shared }) : null,
-        active === "addresses" ? /* @__PURE__ */ jsx45(AddressesPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "paymentMethods" ? /* @__PURE__ */ jsx45(PaymentMethodsPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "orders" ? /* @__PURE__ */ jsx45(
+        active === "profile" ? /* @__PURE__ */ jsx44(ProfilePanel, { ...shared }) : null,
+        active === "addresses" ? /* @__PURE__ */ jsx44(AddressesPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "paymentMethods" ? /* @__PURE__ */ jsx44(PaymentMethodsPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "orders" ? /* @__PURE__ */ jsx44(
           OrdersPanel,
           {
             ...shared,
             variant: props.panelVariant,
+            initialOpenId: openOrderId,
             onViewSubscription: () => go("subscriptions"),
             onPayNow: props.onPayNow,
             onReorder: props.onReorder,
             onTrackShipment: props.onTrackShipment
           }
         ) : null,
-        active === "invoices" ? /* @__PURE__ */ jsx45(InvoicesPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "subscriptions" ? /* @__PURE__ */ jsx45(SubscriptionsPanel, { ...shared, variant: props.panelVariant }) : null,
-        active === "security" ? /* @__PURE__ */ jsx45(SecurityPanel, { ...shared, variant: props.panelVariant }) : null
+        active === "invoices" ? /* @__PURE__ */ jsx44(
+          InvoicesPanel,
+          {
+            ...shared,
+            variant: props.panelVariant,
+            onViewOrder: (orderId) => {
+              setOpenOrderId(orderId);
+              go("orders");
+            },
+            onViewSubscription: () => go("subscriptions")
+          }
+        ) : null,
+        active === "subscriptions" ? /* @__PURE__ */ jsx44(SubscriptionsPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "security" ? /* @__PURE__ */ jsx44(SecurityPanel, { ...shared, variant: props.panelVariant }) : null
       ]
     }
   );
-  return /* @__PURE__ */ jsx45(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx45("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs35("div", { ...a.el("accountDashboard.root", "throttle-panel throttle-account-root"), children: [
-    /* @__PURE__ */ jsx45(VerifyEmailBanner, { ...shared }),
-    sidebar ? /* @__PURE__ */ jsxs35("div", { className: "throttle-account", children: [
-      /* @__PURE__ */ jsx45("div", { ...a.el("accountDashboard.sidebar"), children: nav }),
+  return /* @__PURE__ */ jsx44(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsx44("div", { ...a.rootProps, children: /* @__PURE__ */ jsxs34("div", { ...a.el("accountDashboard.root", "throttle-panel throttle-account-root"), children: [
+    /* @__PURE__ */ jsx44(VerifyEmailBanner, { ...shared }),
+    sidebar ? /* @__PURE__ */ jsxs34("div", { className: "throttle-account", children: [
+      /* @__PURE__ */ jsx44("div", { ...a.el("accountDashboard.sidebar"), children: nav }),
       panel
-    ] }) : /* @__PURE__ */ jsxs35(Fragment10, { children: [
-      /* @__PURE__ */ jsx45("div", { ...a.el("accountDashboard.tabs"), children: nav }),
+    ] }) : /* @__PURE__ */ jsxs34(Fragment9, { children: [
+      /* @__PURE__ */ jsx44("div", { ...a.el("accountDashboard.tabs"), children: nav }),
       panel
     ] })
   ] }) }) });
 }
 
 // src/react/components/account/AccountModal.tsx
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 function AccountModal(props) {
   const a = useAppearance(props.appearance);
   const scoped = useAppearanceProviderValue(props.appearance);
   const { t } = useCopy(props.localization);
-  const titleId = useId7();
-  return /* @__PURE__ */ jsx46(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsxs36(
+  const titleId = useId6();
+  return /* @__PURE__ */ jsx45(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ jsxs35(
     Modal,
     {
       open: props.open,
@@ -3922,15 +4176,15 @@ function AccountModal(props) {
       overlayKey: "accountModal.overlay",
       containerKey: "accountModal.container",
       children: [
-        /* @__PURE__ */ jsx46("div", { ...a.el("accountModal.header", "throttle-modal__header"), children: /* @__PURE__ */ jsx46("h2", { id: titleId, ...a.el("accountModal.title", "throttle-modal__title"), children: t.account.title }) }),
-        /* @__PURE__ */ jsx46("div", { ...a.el("accountModal.body", "throttle-modal__body"), children: /* @__PURE__ */ jsx46(AccountDashboard, { tabs: props.tabs, appearance: props.appearance, localization: props.localization }) })
+        /* @__PURE__ */ jsx45("div", { ...a.el("accountModal.header", "throttle-modal__header"), children: /* @__PURE__ */ jsx45("h2", { id: titleId, ...a.el("accountModal.title", "throttle-modal__title"), children: t.account.title }) }),
+        /* @__PURE__ */ jsx45("div", { ...a.el("accountModal.body", "throttle-modal__body"), children: /* @__PURE__ */ jsx45(AccountDashboard, { tabs: props.tabs, appearance: props.appearance, localization: props.localization }) })
       ]
     }
   ) });
 }
 
 // src/react/components/provider.tsx
-import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var warned = /* @__PURE__ */ new Set();
 function warnOnce(key, message) {
   if (process.env.NODE_ENV === "production") return;
@@ -3975,13 +4229,13 @@ function ThrottleProvider(props) {
     __captureStepUp
   } = props;
   useInjectStyles(injectStyles);
-  const [stepUpOpen, setStepUpOpen] = useState22(false);
+  const [stepUpOpen, setStepUpOpen] = useState21(false);
   const resolveStepUp = useRef9(null);
   const claimRef = useRef9(claimCartOnSignIn);
   claimRef.current = claimCartOnSignIn;
-  const [overlay, setOverlay] = useState22(null);
+  const [overlay, setOverlay] = useState21(null);
   const overlayRestoreFocus = useRef9(null);
-  const [accountTabs, setAccountTabs] = useState22(void 0);
+  const [accountTabs, setAccountTabs] = useState21(void 0);
   const onOverlaySuccess = useRef9(null);
   const openSignIn = useCallback4((onSuccess) => {
     onOverlaySuccess.current = onSuccess ?? null;
@@ -4052,10 +4306,9 @@ function ThrottleProvider(props) {
     resolve?.(password);
   };
   const authOverlayOpen = overlay === "signIn" || overlay === "signUp";
-  return /* @__PURE__ */ jsx47(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ jsx47(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ jsx47(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ jsx47(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ jsx47(ConfirmProvider, { children: /* @__PURE__ */ jsxs37(ThrottleUIContext.Provider, { value: ui, children: [
+  return /* @__PURE__ */ jsx46(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ jsx46(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ jsx46(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ jsx46(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ jsx46(ConfirmProvider, { stepUpOpen, onStepUpResolve: finishStepUp, children: /* @__PURE__ */ jsxs36(ThrottleUIContext.Provider, { value: ui, children: [
     children,
-    /* @__PURE__ */ jsx47(StepUpDialog, { open: stepUpOpen, onResolve: finishStepUp }),
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx46(
       AuthModal,
       {
         open: authOverlayOpen,
@@ -4066,10 +4319,14 @@ function ThrottleProvider(props) {
       },
       overlay === "signUp" ? "signUp" : "signIn"
     ),
-    /* @__PURE__ */ jsx47(AccountModal, { open: overlay === "account", onClose: closeOverlay, tabs: accountTabs, restoreFocusTo: overlayRestoreFocus.current })
+    /* @__PURE__ */ jsx46(AccountModal, { open: overlay === "account", onClose: closeOverlay, tabs: accountTabs, restoreFocusTo: overlayRestoreFocus.current })
   ] }) }) }) }) }) });
 }
 
+// src/react/components/auth/StepUpDialog.tsx
+import { useEffect as useEffect12, useId as useId7, useState as useState22 } from "react";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+
 // src/react/components/auth/SignInButton.tsx
 import { cloneElement, isValidElement, useContext as useContext7, useState as useState23 } from "react";
 import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -4220,21 +4477,21 @@ function SignUpPage(props) {
 }
 
 // src/react/components/guards.tsx
-import { Fragment as Fragment11, jsx as jsx53 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx53 } from "react/jsx-runtime";
 function SignedIn(props) {
   const { status } = useAuth();
-  return status === "authenticated" ? /* @__PURE__ */ jsx53(Fragment11, { children: props.children }) : null;
+  return status === "authenticated" ? /* @__PURE__ */ jsx53(Fragment10, { children: props.children }) : null;
 }
 function SignedOut(props) {
   const { status } = useAuth();
-  return status === "unauthenticated" ? /* @__PURE__ */ jsx53(Fragment11, { children: props.children }) : null;
+  return status === "unauthenticated" ? /* @__PURE__ */ jsx53(Fragment10, { children: props.children }) : null;
 }
 function Protect(props) {
   const { status, emailVerified } = useAuth();
   if (status === "loading") return null;
-  if (status !== "authenticated") return /* @__PURE__ */ jsx53(Fragment11, { children: props.fallback ?? null });
-  if (props.requireVerified && !emailVerified) return /* @__PURE__ */ jsx53(Fragment11, { children: props.fallback ?? null });
-  return /* @__PURE__ */ jsx53(Fragment11, { children: props.children });
+  if (status !== "authenticated") return /* @__PURE__ */ jsx53(Fragment10, { children: props.fallback ?? null });
+  if (props.requireVerified && !emailVerified) return /* @__PURE__ */ jsx53(Fragment10, { children: props.fallback ?? null });
+  return /* @__PURE__ */ jsx53(Fragment10, { children: props.children });
 }
 
 // src/react/components/UserButton.tsx