@usethrottle/auth 0.2.3 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/react/components/index.cjs +872 -617
  2. package/dist/react/components/index.cjs.map +1 -1
  3. package/dist/react/components/index.d.cts +56 -10
  4. package/dist/react/components/index.d.ts +56 -10
  5. package/dist/react/components/index.js +845 -590
  6. package/dist/react/components/index.js.map +1 -1
  7. package/dist/styles.css +10 -1
  8. package/package.json +1 -1
package/dist/react/components/index.d.cts CHANGED
@@ -28,6 +28,7 @@ declare const VARIABLE_PROPERTY: {
28
28
  readonly borderRadius: "--throttle-radius";
29
29
  readonly borderWidth: "--throttle-border-width";
30
30
  readonly spacing: "--throttle-spacing";
31
+ readonly cardWidth: "--throttle-card-width";
31
32
  readonly accountSurface: "--throttle-color-account-surface";
32
33
  readonly accountPadding: "--throttle-account-padding";
33
34
  readonly shadowCard: "--throttle-shadow-card";
@@ -43,7 +44,7 @@ type ThrottleVariables = Partial<Record<keyof typeof VARIABLE_PROPERTY, string>>
43
44
  * rendered element without adding its key here ships something a merchant
44
45
  * cannot restyle, which the drift test in Task 15 catches.
45
46
  */
46
- declare const THROTTLE_ELEMENT_KEYS: readonly ["card", "card.header", "card.title", "card.description", "card.body", "card.footer", "card.logo", "field", "field.label", "field.input", "field.hint", "field.error", "field.group", "button", "alert", "spinner", "skeleton", "avatar", "badge", "emptyState", "emptyState.title", "emptyState.description", "modal.overlay", "modal.container", "modal.closeButton", "dropdown.trigger", "dropdown.menu", "dropdown.item", "dropdown.separator", "tabs.list", "tabs.tab", "table", "table.head", "table.row", "table.cell", "signIn.root", "signIn.title", "signIn.logo", "signIn.emailField", "signIn.passwordField", "signIn.submitButton", "signIn.forgotLink", "signIn.switchLink", "signUp.root", "signUp.title", "signUp.logo", "signUp.emailField", "signUp.passwordField", "signUp.submitButton", "signUp.switchLink", "forgotPassword.root", "forgotPassword.title", "forgotPassword.logo", "forgotPassword.emailField", "forgotPassword.submitButton", "forgotPassword.backLink", "resetPassword.root", "resetPassword.title", "resetPassword.logo", "resetPassword.passwordField", "resetPassword.submitButton", "verifyEmail.root", "verifyEmail.title", "verifyEmail.logo", "verifyEmail.resendButton", "authFlow.root", "authModal.overlay", "authModal.container", "signInButton.root", "signUpButton.root", "signOutButton.root", "stepUp.root", "stepUp.title", "stepUp.passwordField", "stepUp.submitButton", "stepUp.cancelButton", "signInPage.root", "signInPage.logo", "signInPage.footer", "signUpPage.root", "signUpPage.logo", "signUpPage.footer", "userButton.root", "userButton.trigger", "userButton.menu", "userButton.identity", "userButton.email", "userButton.badge", "userButton.item", "userButton.manageButton", "userButton.signOutButton", "userButton.signOutAllButton", "accountDashboard.root", "accountDashboard.tabs", "accountDashboard.sidebar", "accountDashboard.panel", "accountModal.overlay", "accountModal.container", "accountModal.header", "accountModal.title", "accountModal.body", "verifyBanner.root", "verifyBanner.message", "verifyBanner.resendButton", "verifyBanner.dismissButton", "profilePanel.root", "profilePanel.form", "profilePanel.submitButton", "addressesPanel.root", "addressesPanel.list", "addressesPanel.item", "addressesPanel.addButton", "addressesPanel.form", "addressesPanel.defaultButton", "addressesPanel.editButton", "addressesPanel.deleteButton", "addressesPanel.table", "addressesPanel.row", "paymentMethodsPanel.root", "paymentMethodsPanel.list", "paymentMethodsPanel.item", "paymentMethodsPanel.defaultButton", "paymentMethodsPanel.deleteButton", "paymentMethodsPanel.addButton", "paymentMethodsPanel.addDialog", "paymentMethodsPanel.table", "paymentMethodsPanel.row", "ordersPanel.root", "ordersPanel.table", "ordersPanel.row", "ordersPanel.list", "ordersPanel.item", "ordersPanel.viewButton", "orderDetail.root", "orderDetail.backButton", "orderDetail.lineItems", "orderDetail.lineItem", "orderDetail.totals", "invoicesPanel.root", "invoicesPanel.table", "invoicesPanel.row", "invoicesPanel.list", "invoicesPanel.item", "invoicesPanel.viewButton", "invoiceDetail.root", "invoiceDetail.backButton", "invoiceDetail.downloadButton", "invoiceDetail.totals", "subscriptionsPanel.root", "subscriptionsPanel.list", "subscriptionsPanel.item", "subscriptionsPanel.cancelButton", "subscriptionsPanel.cancelNowButton", "subscriptionsPanel.pauseButton", "subscriptionsPanel.resumeButton", "subscriptionsPanel.table", "subscriptionsPanel.row", "securityPanel.root", "securityPanel.passwordForm", "securityPanel.passwordButton", "securityPanel.sessionList", "securityPanel.sessionItem", "securityPanel.revokeButton", "securityPanel.revokeAllButton", "securityPanel.table", "securityPanel.row"];
47
+ declare const THROTTLE_ELEMENT_KEYS: readonly ["card", "card.header", "card.title", "card.description", "card.body", "card.footer", "card.logo", "field", "field.label", "field.input", "field.hint", "field.error", "field.group", "button", "alert", "spinner", "skeleton", "avatar", "badge", "emptyState", "emptyState.title", "emptyState.description", "modal.overlay", "modal.container", "modal.closeButton", "dropdown.trigger", "dropdown.menu", "dropdown.item", "dropdown.separator", "tabs.list", "tabs.tab", "table", "table.head", "table.row", "table.cell", "signIn.root", "signIn.title", "signIn.logo", "signIn.emailField", "signIn.passwordField", "signIn.submitButton", "signIn.forgotLink", "signIn.switchLink", "signUp.root", "signUp.title", "signUp.logo", "signUp.emailField", "signUp.passwordField", "signUp.submitButton", "signUp.switchLink", "forgotPassword.root", "forgotPassword.title", "forgotPassword.logo", "forgotPassword.emailField", "forgotPassword.submitButton", "forgotPassword.backLink", "resetPassword.root", "resetPassword.title", "resetPassword.logo", "resetPassword.passwordField", "resetPassword.submitButton", "verifyEmail.root", "verifyEmail.title", "verifyEmail.logo", "verifyEmail.resendButton", "authFlow.root", "authModal.overlay", "authModal.container", "signInButton.root", "signUpButton.root", "signOutButton.root", "stepUp.root", "stepUp.title", "stepUp.passwordField", "stepUp.submitButton", "stepUp.cancelButton", "signInPage.root", "signInPage.logo", "signInPage.footer", "signUpPage.root", "signUpPage.logo", "signUpPage.footer", "userButton.root", "userButton.trigger", "userButton.menu", "userButton.identity", "userButton.email", "userButton.badge", "userButton.item", "userButton.manageButton", "userButton.signOutButton", "userButton.signOutAllButton", "accountDashboard.root", "accountDashboard.tabs", "accountDashboard.sidebar", "accountDashboard.panel", "accountModal.overlay", "accountModal.container", "accountModal.header", "accountModal.title", "accountModal.body", "verifyBanner.root", "verifyBanner.message", "verifyBanner.resendButton", "verifyBanner.dismissButton", "profilePanel.root", "profilePanel.form", "profilePanel.submitButton", "addressesPanel.root", "addressesPanel.list", "addressesPanel.item", "addressesPanel.addButton", "addressesPanel.form", "addressesPanel.defaultButton", "addressesPanel.editButton", "addressesPanel.deleteButton", "addressesPanel.table", "addressesPanel.row", "paymentMethodsPanel.root", "paymentMethodsPanel.list", "paymentMethodsPanel.item", "paymentMethodsPanel.defaultButton", "paymentMethodsPanel.deleteButton", "paymentMethodsPanel.addButton", "paymentMethodsPanel.addDialog", "orderDetail.addresses", "orderDetail.shippingAddress", "orderDetail.billingAddress", "orderDetail.timeline", "orderDetail.payButton", "orderDetail.trackButton", "orderDetail.reorderButton", "confirm.header", "confirm.title", "confirm.body", "confirm.confirmButton", "confirm.cancelButton", "paymentMethodsPanel.table", "paymentMethodsPanel.row", "ordersPanel.root", "ordersPanel.table", "ordersPanel.row", "ordersPanel.list", "ordersPanel.item", "ordersPanel.viewButton", "orderDetail.root", "orderDetail.backButton", "orderDetail.lineItems", "orderDetail.lineItem", "orderDetail.totals", "invoicesPanel.root", "invoicesPanel.table", "invoicesPanel.row", "invoicesPanel.list", "invoicesPanel.item", "invoicesPanel.viewButton", "invoiceDetail.root", "invoiceDetail.backButton", "invoiceDetail.downloadButton", "invoiceDetail.totals", "subscriptionsPanel.root", "subscriptionsPanel.list", "subscriptionsPanel.item", "subscriptionsPanel.cancelButton", "subscriptionsPanel.cancelNowButton", "subscriptionsPanel.pauseButton", "subscriptionsPanel.resumeButton", "subscriptionsPanel.table", "subscriptionsPanel.row", "securityPanel.root", "securityPanel.passwordForm", "securityPanel.passwordButton", "securityPanel.sessionList", "securityPanel.sessionItem", "securityPanel.revokeButton", "securityPanel.revokeAllButton", "securityPanel.table", "securityPanel.row"];
47
48
  type ThrottleElementKey = (typeof THROTTLE_ELEMENT_KEYS)[number];
48
49
  interface ThrottleSlots {
49
50
  Spinner?: ComponentType<{
@@ -85,6 +86,7 @@ declare const enUS: {
85
86
  loading: string;
86
87
  close: string;
87
88
  confirm: string;
89
+ keepIt: string;
88
90
  somethingWentWrong: string;
89
91
  actions: string;
90
92
  view: string;
@@ -179,6 +181,7 @@ declare const enUS: {
179
181
  addButton: string;
180
182
  defaultBadge: string;
181
183
  makeDefault: string;
184
+ deleteConfirmAction: string;
182
185
  empty: string;
183
186
  emptyDescription: string;
184
187
  label: string;
@@ -205,9 +208,20 @@ declare const enUS: {
205
208
  makeDefault: string;
206
209
  expires: string;
207
210
  deleteConfirm: string;
211
+ deleteConfirmAction: string;
208
212
  columnCard: string;
209
213
  };
210
214
  orders: {
215
+ shipTo: string;
216
+ billTo: string;
217
+ history: string;
218
+ placed: string;
219
+ completed: string;
220
+ cancelledAt: string;
221
+ closedAt: string;
222
+ payNow: string;
223
+ track: string;
224
+ reorder: string;
211
225
  empty: string;
212
226
  emptyDescription: string;
213
227
  gatedDescription: string;
@@ -280,6 +294,10 @@ declare const enUS: {
280
294
  downloadUnavailable: string;
281
295
  };
282
296
  subscriptions: {
297
+ cancelConfirmAction: string;
298
+ pauseConfirm: string;
299
+ resumeConfirm: string;
300
+ cancelNowConfirm: string;
283
301
  empty: string;
284
302
  emptyDescription: string;
285
303
  gatedDescription: string;
@@ -351,9 +369,35 @@ declare function AddressesPanel(props: {
351
369
  variant?: AccountPanelVariant;
352
370
  }): react_jsx_runtime.JSX.Element;
353
371
 
372
+ /**
373
+ * The order the buyer is acting on, including its line items — so "order
374
+ * again" can rebuild a cart without fetching the order a second time.
375
+ */
376
+ interface OrderActionTarget {
377
+ id: string;
378
+ orderNumber: string;
379
+ currency: string;
380
+ lineItems: Array<{
381
+ name: string;
382
+ unitPrice: number;
383
+ quantity: number;
384
+ }>;
385
+ }
386
+ interface OrderActionHandlers {
387
+ onPayNow?(order: OrderActionTarget): void;
388
+ onReorder?(order: OrderActionTarget): void;
389
+ onTrackShipment?(order: OrderActionTarget): void;
390
+ }
391
+ declare function OrdersPanel(props: OrderActionHandlers & {
392
+ appearance?: ThrottleAppearance;
393
+ localization?: ThrottleLocalization;
394
+ variant?: AccountPanelVariant;
395
+ onViewSubscription?(id: string): void;
396
+ }): react_jsx_runtime.JSX.Element;
397
+
354
398
  type AccountTab = 'profile' | 'addresses' | 'paymentMethods' | 'orders' | 'invoices' | 'subscriptions' | 'security';
355
399
  declare const ACCOUNT_TABS: readonly AccountTab[];
356
- interface AccountDashboardProps {
400
+ interface AccountDashboardProps extends OrderActionHandlers {
357
401
  /** Which panels to show, in order. Defaults to all seven. */
358
402
  tabs?: AccountTab[];
359
403
  tab?: AccountTab;
@@ -442,7 +486,7 @@ declare const THROTTLE_STYLE_ID = "throttle-auth-styles";
442
486
  * specificity plus source order is what lets them win. A descendant selector
443
487
  * here would silently outrank them.
444
488
  */
445
- declare const THROTTLE_STYLES = "\n.throttle-root {\n --throttle-color-primary: #18181b;\n --throttle-color-primary-foreground: #ffffff;\n --throttle-color-background: #ffffff;\n --throttle-color-surface: #f8fafc;\n --throttle-color-foreground: #0e1116;\n --throttle-color-muted: #eceef2;\n --throttle-color-muted-foreground: #5b6472;\n --throttle-color-border: #e2e8f0;\n /* The boundary of an INTERACTIVE control, which WCAG 1.4.11 requires to\n reach 3:1 against its adjacent colour \u2014 an input identified only by a\n 1.23:1 hairline is not identifiable at all. Decorative separators (card\n edges, table rules, dividers) keep --throttle-color-border: they do not\n identify a control, so the requirement does not apply and darkening\n them would only add noise. */\n /* The account dashboard paints nothing by default so it can drop into a\n merchant's page without fighting their background. The accountSurface and\n accountPadding appearance variables opt back into a card.\n No backticks in this comment: the sheet is a TS template literal. */\n --throttle-color-account-surface: transparent;\n --throttle-account-padding: 0;\n --throttle-color-border-control: #8b93a1;\n --throttle-color-danger: #c2321f;\n --throttle-color-danger-surface: #fef2f2;\n --throttle-color-danger-border: #fecaca;\n --throttle-color-success: #127a4a;\n --throttle-color-success-surface: #ecfdf5;\n --throttle-color-success-border: #a7f3d0;\n --throttle-color-warning: #92400e;\n --throttle-color-warning-surface: #fffbeb;\n --throttle-color-warning-border: #fde68a;\n --throttle-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --throttle-font-size: 16px;\n --throttle-font-size-xs: 12px;\n --throttle-font-size-sm: 14px;\n --throttle-font-size-lg: 20px;\n --throttle-font-size-xl: 24px;\n --throttle-line-height: 1.5;\n --throttle-line-height-tight: 1.25;\n --throttle-radius: 12px;\n --throttle-radius-sm: 8px;\n --throttle-radius-full: 999px;\n --throttle-border-width: 1px;\n --throttle-spacing: 8px;\n --throttle-space-1: 4px;\n --throttle-space-2: var(--throttle-spacing);\n --throttle-space-3: 12px;\n --throttle-space-4: 16px;\n --throttle-space-5: 24px;\n --throttle-space-6: 32px;\n --throttle-control-height: 48px;\n --throttle-control-padding-x: 16px;\n --throttle-shadow-card: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);\n --throttle-shadow-popover: 0 10px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);\n --throttle-transition: 150ms cubic-bezier(.2,0,.2,1);\n --throttle-z-modal: 2147483000;\n --throttle-z-popover: 2147482000;\n font-family: var(--throttle-font-family);\n font-size: var(--throttle-font-size);\n line-height: var(--throttle-line-height);\n color: var(--throttle-color-foreground);\n box-sizing: border-box;\n}\n.throttle-root *, .throttle-root *::before, .throttle-root *::after { box-sizing: inherit; }\n\n.throttle-root[data-throttle-theme=\"dark\"] {\n --throttle-color-primary: #e6edf3;\n --throttle-color-primary-foreground: #0d1117;\n --throttle-color-background: #0d1117;\n --throttle-color-surface: #1c2129;\n --throttle-color-foreground: #e6edf3;\n --throttle-color-muted: #21262d;\n --throttle-color-muted-foreground: #9aa4b2;\n --throttle-color-border: #30363d;\n --throttle-color-border-control: #5c6570;\n --throttle-color-danger: #ff6b58;\n --throttle-color-danger-surface: #2a1513;\n --throttle-color-danger-border: #5c2b25;\n --throttle-color-success: #45c08a;\n --throttle-color-success-surface: #0f2419;\n --throttle-color-success-border: #1f4d36;\n --throttle-color-warning: #e0a53a;\n --throttle-color-warning-surface: #2a2113;\n --throttle-color-warning-border: #5c4a25;\n --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);\n --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);\n}\n@media (prefers-color-scheme: dark) {\n .throttle-root[data-throttle-theme=\"auto\"] {\n --throttle-color-primary: #e6edf3;\n --throttle-color-primary-foreground: #0d1117;\n --throttle-color-background: #0d1117;\n --throttle-color-surface: #1c2129;\n --throttle-color-foreground: #e6edf3;\n --throttle-color-muted: #21262d;\n --throttle-color-muted-foreground: #9aa4b2;\n --throttle-color-border: #30363d;\n --throttle-color-border-control: #5c6570;\n --throttle-color-danger: #ff6b58;\n --throttle-color-danger-surface: #2a1513;\n --throttle-color-danger-border: #5c2b25;\n --throttle-color-success: #45c08a;\n --throttle-color-success-surface: #0f2419;\n --throttle-color-success-border: #1f4d36;\n --throttle-color-warning: #e0a53a;\n --throttle-color-warning-surface: #2a2113;\n --throttle-color-warning-border: #5c4a25;\n --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);\n --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);\n }\n}\n\n.throttle-card {\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-card);\n padding: var(--throttle-space-5);\n width: 100%;\n max-width: 400px;\n margin-inline: auto;\n}\n/* Inside a Modal the dialog already provides the surface \u2014 background, radius\n and elevation. A card that draws its own on top is the \"box inside a box\":\n two shadowed rounded rectangles nested, with the card's max-width stranding\n it in the middle of a much wider dialog. */\n.throttle-card--bare { border: none; box-shadow: none; background: none; max-width: none; }\n.throttle-card__header { margin-bottom: var(--throttle-space-4); }\n.throttle-card__header--branded { text-align: center; }\n.throttle-card__logo { display: flex; justify-content: center; margin-bottom: var(--throttle-space-3); }\n.throttle-card__title { font-size: var(--throttle-font-size-xl); line-height: var(--throttle-line-height-tight); font-weight: 600; letter-spacing: -0.02em; margin: 0; }\n.throttle-card__title--branded { font-size: var(--throttle-font-size-xl); }\n.throttle-card__description { color: var(--throttle-color-muted-foreground); margin: var(--throttle-space-1) 0 0; }\n.throttle-card__body { display: flex; flex-direction: column; gap: var(--throttle-space-3); }\n.throttle-card__footer { margin-top: var(--throttle-space-4); text-align: center; }\n.throttle-card__footer--ruled { border-top: var(--throttle-border-width) solid var(--throttle-color-border); padding-top: var(--throttle-space-4); }\n\n.throttle-field { display: flex; flex-direction: column; gap: var(--throttle-space-1); }\n.throttle-field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--throttle-space-2); }\n.throttle-field__label { font-weight: 500; }\n.throttle-field__input {\n font: inherit;\n font-size: var(--throttle-font-size);\n color: var(--throttle-color-foreground);\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border-control);\n border-radius: var(--throttle-radius-sm);\n /* padding-block stays 0 so min-height alone owns the height, exactly as\n .throttle-button does. With 12px vertical padding the box computed to\n 50px against the button's 48px \u2014 a 2px mismatch, measured in a browser\n across 19 controls. An input element centres its own text vertically. */\n padding-block: 0;\n padding-inline: var(--throttle-control-padding-x);\n min-height: var(--throttle-control-height);\n width: 100%;\n transition: border-color var(--throttle-transition), box-shadow var(--throttle-transition);\n}\n.throttle-field__input:focus-visible {\n outline: none;\n border-color: var(--throttle-color-primary);\n box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary);\n}\n.throttle-field__input:disabled { background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground); cursor: not-allowed; }\n.throttle-field__input::placeholder { color: var(--throttle-color-muted-foreground); opacity: 1; }\n.throttle-field__input--grouped { border: none; border-radius: 0; padding-inline: 0; }\n.throttle-field__hint { color: var(--throttle-color-muted-foreground); font-size: var(--throttle-font-size-xs); }\n/* Always mounted, so it reserves its line whether or not there is an error:\n an error appearing on submit must not push the submit button out from\n under the buyer's pointer. */\n.throttle-field__error { color: var(--throttle-color-danger); font-size: var(--throttle-font-size-xs); line-height: 1rem; }\n/* Reserved a full line under EVERY input even with nothing to say, which\n with the stack gap put 28px of dead space beneath each field, on every\n form and all seven account panels. The element stays mounted when empty\n because role=alert only announces changes to a live region that was\n already there; it just stops occupying a line. */\n.throttle-field__error:empty { display: none; }\n\n.throttle-field-group {\n display: flex;\n flex-direction: column;\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius-sm);\n overflow: hidden;\n}\n.throttle-field-group__item { padding: var(--throttle-space-3) var(--throttle-control-padding-x); }\n.throttle-field-group__divider { height: var(--throttle-border-width); background: var(--throttle-color-border); }\n.throttle-field-group__forgot { margin-left: auto; }\n\n.throttle-button {\n font: inherit;\n font-weight: 500;\n border-radius: var(--throttle-radius-sm);\n border: var(--throttle-border-width) solid transparent;\n padding-inline: var(--throttle-control-padding-x);\n padding-block: 0;\n min-height: var(--throttle-control-height);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: opacity var(--throttle-transition), background-color var(--throttle-transition), border-color var(--throttle-transition), filter var(--throttle-transition), box-shadow var(--throttle-transition);\n}\n.throttle-button:disabled { opacity: .55; cursor: not-allowed; }\n.throttle-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary); }\n.throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: 100%; }\n.throttle-button--primary:hover:not(:disabled) { filter: brightness(0.92); }\n.throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border-control); }\n.throttle-button--secondary:hover:not(:disabled) { background: var(--throttle-color-muted); }\n.throttle-button--danger { background: transparent; color: var(--throttle-color-danger); border-color: var(--throttle-color-border); }\n.throttle-button--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--throttle-color-danger) 10%, transparent); }\n/* Link-style actions are the rows panel default, and they carry Delete,\n Remove, Cancel and Sign out. Zero padding with min-height 0 made those\n roughly 20px tall and ~8px apart \u2014 a mis-tap on a phone lands on something\n irreversible. The target is expanded with vertical padding and pulled back\n with an equal negative margin, so the hit box clears 44px while the text\n sits exactly where it did. Collapsing this back to zero padding shrinks the\n target again. */\n.throttle-button--link { background: none; border: none; color: var(--throttle-color-primary); padding-inline: 0; padding-block: var(--throttle-space-3); margin-block: calc(var(--throttle-space-3) * -1); min-height: 0; text-decoration: underline; width: auto; }\n.throttle-button--link:hover:not(:disabled) { opacity: .8; }\n.throttle-button--linkDanger { background: none; border: none; color: var(--throttle-color-danger); padding-inline: 0; padding-block: var(--throttle-space-3); margin-block: calc(var(--throttle-space-3) * -1); min-height: 0; text-decoration: underline; width: auto; }\n.throttle-button--linkDanger:hover:not(:disabled) { opacity: .8; }\n.throttle-button--xs { font-size: var(--throttle-font-size-xs); }\n\n.throttle-alert { border-radius: var(--throttle-radius-sm); padding: var(--throttle-space-3); font-size: var(--throttle-font-size-sm); }\n.throttle-alert--error { background: var(--throttle-color-danger-surface); border: var(--throttle-border-width) solid var(--throttle-color-danger-border); color: var(--throttle-color-danger); }\n.throttle-alert--success { background: var(--throttle-color-success-surface); border: var(--throttle-border-width) solid var(--throttle-color-success-border); color: var(--throttle-color-success); }\n.throttle-alert--info { background: var(--throttle-color-surface); color: var(--throttle-color-muted-foreground); }\n\n.throttle-spinner {\n display: inline-block; width: 1em; height: 1em;\n border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;\n animation: throttle-spin 700ms linear infinite;\n}\n@keyframes throttle-spin { to { transform: rotate(360deg); } }\n.throttle-button--loading { position: relative; }\n.throttle-button__label { display: inline-flex; align-items: center; justify-content: center; gap: var(--throttle-space-2); }\n.throttle-button__label--hidden { visibility: hidden; }\n.throttle-spinner--centred { position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.5em; }\n\n@media (prefers-reduced-motion: reduce) { .throttle-spinner { animation-duration: 2.4s; } }\n\n.throttle-skeleton {\n background: var(--throttle-color-muted);\n border-radius: var(--throttle-radius-sm);\n animation: throttle-pulse 1.4s ease-in-out infinite; height: 2.5em; }\n@keyframes throttle-pulse { 50% { opacity: .5; } }\n@media (prefers-reduced-motion: reduce) { .throttle-skeleton { animation: none; } }\n\n.throttle-modal__overlay {\n position: fixed; inset: 0; z-index: var(--throttle-z-modal);\n background: rgba(14,17,22,.45);\n display: flex; align-items: center; justify-content: center;\n padding: var(--throttle-space-4);\n overflow-y: auto;\n}\n.throttle-modal__container {\n background: var(--throttle-color-background);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-popover);\n max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto;\n position: relative;\n}\n/* After the base rule on purpose: both are single-class, so equal specificity\n means source order decides. Declared before it, this silently lost. */\n.throttle-modal__container--compact { max-width: 440px; }\n.throttle-modal__close {\n position: absolute; top: var(--throttle-space-3); right: var(--throttle-space-3);\n background: none; border: none; cursor: pointer; font-size: var(--throttle-font-size-lg);\n color: var(--throttle-color-muted-foreground);\n transition: color var(--throttle-transition);\n}\n.throttle-modal__close:hover { color: var(--throttle-color-foreground); }\n.throttle-modal__header { padding: var(--throttle-space-4) var(--throttle-space-4) 0; }\n.throttle-modal__title { font-size: var(--throttle-font-size-lg); line-height: var(--throttle-line-height-tight); font-weight: 600; margin: 0; }\n.throttle-modal__body { padding: var(--throttle-space-4); }\n\n.throttle-dropdown__trigger { background: none; border: none; cursor: pointer; padding: 0; border-radius: var(--throttle-radius-full); transition: background-color var(--throttle-transition); }\n.throttle-dropdown__trigger:hover { background: var(--throttle-color-surface); }\n.throttle-dropdown__trigger:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: 2px; }\n.throttle-dropdown__menu {\n position: absolute; right: 0; top: calc(100% + var(--throttle-space-2));\n z-index: var(--throttle-z-popover);\n min-width: 260px;\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-popover);\n padding: var(--throttle-space-1);\n}\n.throttle-dropdown__item {\n display: flex; align-items: center; gap: var(--throttle-space-2);\n width: 100%; text-align: left; font: inherit; color: inherit;\n background: none; border: none; cursor: pointer;\n padding: var(--throttle-space-3);\n border-radius: var(--throttle-radius-sm);\n text-decoration: none;\n transition: background-color var(--throttle-transition);\n}\n.throttle-dropdown__item:hover { background: var(--throttle-color-surface); }\n.throttle-dropdown__item:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-dropdown__separator { height: 1px; background: var(--throttle-color-border); margin: var(--throttle-space-1) 0; border: 0; }\n\n.throttle-tabs__list {\n display: flex; gap: var(--throttle-space-1);\n border-bottom: var(--throttle-border-width) solid var(--throttle-color-border);\n overflow-x: auto; scrollbar-width: thin;\n}\n.throttle-tabs__tab {\n font: inherit; background: none; border: none; cursor: pointer; white-space: nowrap;\n padding: var(--throttle-space-3);\n color: var(--throttle-color-muted-foreground);\n border-bottom: 2px solid transparent;\n transition: color var(--throttle-transition), border-color var(--throttle-transition);\n}\n.throttle-tabs__tab:hover { color: var(--throttle-color-foreground); }\n.throttle-tabs__tab--active { color: var(--throttle-color-foreground); border-bottom-color: var(--throttle-color-primary); }\n.throttle-tabs__panel { padding-top: var(--throttle-space-4); }\n\n/* Paints its own ground. A UserButton in a navbar should stay transparent, but\n the dashboard is a large surface of themed text: in dark theme its foreground\n is near-white, so on a light host page it was rendering white-on-white. */\n.throttle-cardframe { width: 100%; min-height: 420px; border: 0; display: block; }\n.throttle-centre { display: flex; align-items: center; justify-content: center; min-height: 160px; }\n.throttle-account-root { container-type: inline-size; background: var(--throttle-color-account-surface); color: var(--throttle-color-foreground); padding: var(--throttle-account-padding); }\n.throttle-account { display: flex; gap: var(--throttle-space-5); align-items: flex-start; }\n.throttle-account__content { flex: 1; min-width: 0; }\n.throttle-tabs__rail { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; }\n.throttle-tabs__railitem {\n font: inherit;\n font-size: var(--throttle-font-size-sm);\n display: flex;\n align-items: center;\n gap: var(--throttle-space-3);\n width: 100%;\n text-align: left;\n background: none;\n border: none;\n border-radius: var(--throttle-radius-sm);\n padding: 0 var(--throttle-space-3);\n min-height: var(--throttle-control-height);\n color: var(--throttle-color-muted-foreground);\n cursor: pointer;\n transition: background var(--throttle-transition), color var(--throttle-transition);\n}\n.throttle-tabs__railitem:hover { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); }\n.throttle-tabs__railitem:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-tabs__tab:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-tabs__railitem--active { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); font-weight: 500; }\n.throttle-tabs__railicon { flex: none; opacity: .75; }\n\n/* A CONTAINER query, not a viewport one: these components render inside a\n merchant's page, so the viewport says nothing about how much room the\n dashboard actually has \u2014 it could sit in a 400px column on a 1920px screen.\n Below ~560px of container the rail becomes a full-width list above the\n panel: all seven still visible, each still a 44px target. */\n@container (max-width: 560px) {\n /* align-items: flex-start is right in row direction and wrong in column \u2014\n it shrinks the rail to its content width, so width:100% alone cannot make\n it span. Stretch it explicitly when stacked. */\n .throttle-account { flex-direction: column; align-items: stretch; gap: var(--throttle-space-4); }\n .throttle-tabs__rail { width: 100%; }\n}\n\n.throttle-table { width: 100%; border-collapse: collapse; text-align: left; }\n.throttle-table__head { color: var(--throttle-color-muted-foreground); font-weight: 500; font-size: var(--throttle-font-size-sm); }\n.throttle-table__row { border-top: var(--throttle-border-width) solid var(--throttle-color-border); cursor: pointer; transition: background-color var(--throttle-transition); }\n.throttle-table__row:hover { background: var(--throttle-color-surface); }\n.throttle-table__row:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-table__cell { padding: var(--throttle-space-3) var(--throttle-space-2); height: 56px; box-sizing: border-box; }\n.throttle-table__scroll { overflow-x: auto; }\n\n.throttle-empty { text-align: center; padding: var(--throttle-space-6) var(--throttle-space-4); }\n.throttle-empty__title { font-weight: 600; margin: 0 0 var(--throttle-space-1); }\n.throttle-empty__description { color: var(--throttle-color-muted-foreground); margin: 0; }\n\n.throttle-avatar {\n display: inline-flex; align-items: center; justify-content: center;\n width: 32px; height: 32px; border-radius: var(--throttle-radius-full);\n background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground);\n font-size: var(--throttle-font-size-xs); font-weight: 600; text-transform: uppercase;\n}\n\n.throttle-badge {\n display: inline-block; font-size: var(--throttle-font-size-xs); font-weight: 500;\n padding: 2px var(--throttle-space-2); border-radius: var(--throttle-radius-full);\n background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground);\n}\n.throttle-badge--muted { background: none; border: var(--throttle-border-width) solid var(--throttle-color-border); color: var(--throttle-color-muted-foreground); font-weight: 400; padding: 1px calc(var(--throttle-space-2) - 1px); }\n.throttle-badge--success { background: color-mix(in srgb, var(--throttle-color-success) 15%, transparent); color: var(--throttle-color-success); }\n.throttle-badge--warning { background: color-mix(in srgb, var(--throttle-color-warning) 15%, transparent); color: var(--throttle-color-warning); }\n.throttle-badge--danger { background: color-mix(in srgb, var(--throttle-color-danger) 15%, transparent); color: var(--throttle-color-danger); }\n\n.throttle-stack { display: flex; flex-direction: column; gap: var(--throttle-space-3); }\n.throttle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2); flex-wrap: wrap; }\n.throttle-muted { color: var(--throttle-color-muted-foreground); }\n.throttle-banner {\n display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n background: color-mix(in srgb, var(--throttle-color-warning) 12%, transparent);\n color: var(--throttle-color-warning);\n border-radius: var(--throttle-radius-sm);\n padding: var(--throttle-space-3);\n margin-bottom: var(--throttle-space-4);\n}\n.throttle-panel { display: flex; flex-direction: column; gap: var(--throttle-space-4); }\n/* 100dvh, not 100vh: on mobile browsers 100vh includes the space behind the\n dynamic address/toolbar, so the page would be taller than the visible\n viewport and the card would sit off-centre until the toolbar collapsed. */\n.throttle-page {\n min-height: 100dvh;\n width: 100%;\n background: var(--throttle-color-surface);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--throttle-space-5);\n padding: var(--throttle-space-5);\n}\n.throttle-page__logo { display: flex; justify-content: center; }\n.throttle-page__footer { color: var(--throttle-color-muted-foreground); text-align: center; font-size: var(--throttle-font-size-sm); }\n.throttle-listitem {\n display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius-sm);\n padding: var(--throttle-space-3);\n}\n/* 'rows' variant: hairline rules between items instead of each item carrying\n its own border+radius, so a panel does not read as a card inside a card. */\n.throttle-rows { display: flex; flex-direction: column; }\n.throttle-rowitem {\n display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n border-top: var(--throttle-border-width) solid var(--throttle-color-border);\n padding: var(--throttle-space-3) 0;\n}\n.throttle-rowitem:first-child { border-top: none; padding-top: 0; }\n.throttle-actions { display: flex; gap: var(--throttle-space-2); flex-wrap: wrap; }\n.throttle-table__money { display: block; text-align: right; font-variant-numeric: tabular-nums; }\n.throttle-lineitem { display: flex; align-items: center; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }\n.throttle-lineitem__image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--throttle-radius-sm); flex: none; }\n.throttle-totals { display: flex; flex-direction: column; gap: var(--throttle-space-1); }\n\n@media (prefers-reduced-motion: reduce) {\n .throttle-button, .throttle-field__input, .throttle-dropdown__item, .throttle-dropdown__trigger, .throttle-tabs__tab, .throttle-table__row, .throttle-modal__close {\n transition: none;\n }\n}\n";
489
+ declare const THROTTLE_STYLES = "\n.throttle-root {\n --throttle-color-primary: #18181b;\n --throttle-color-primary-foreground: #ffffff;\n --throttle-color-background: #ffffff;\n --throttle-color-surface: #f8fafc;\n --throttle-color-foreground: #0e1116;\n --throttle-color-muted: #eceef2;\n --throttle-color-muted-foreground: #5b6472;\n --throttle-color-border: #e2e8f0;\n /* The boundary of an INTERACTIVE control, which WCAG 1.4.11 requires to\n reach 3:1 against its adjacent colour \u2014 an input identified only by a\n 1.23:1 hairline is not identifiable at all. Decorative separators (card\n edges, table rules, dividers) keep --throttle-color-border: they do not\n identify a control, so the requirement does not apply and darkening\n them would only add noise. */\n /* The account dashboard paints nothing by default so it can drop into a\n merchant's page without fighting their background. The accountSurface and\n accountPadding appearance variables opt back into a card.\n No backticks in this comment: the sheet is a TS template literal. */\n --throttle-card-width: 400px;\n --throttle-color-account-surface: transparent;\n --throttle-account-padding: 0;\n --throttle-color-border-control: #8b93a1;\n --throttle-color-danger: #c2321f;\n --throttle-color-danger-surface: #fef2f2;\n --throttle-color-danger-border: #fecaca;\n --throttle-color-success: #127a4a;\n --throttle-color-success-surface: #ecfdf5;\n --throttle-color-success-border: #a7f3d0;\n --throttle-color-warning: #92400e;\n --throttle-color-warning-surface: #fffbeb;\n --throttle-color-warning-border: #fde68a;\n --throttle-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --throttle-font-size: 16px;\n --throttle-font-size-xs: 12px;\n --throttle-font-size-sm: 14px;\n --throttle-font-size-lg: 20px;\n --throttle-font-size-xl: 24px;\n --throttle-line-height: 1.5;\n --throttle-line-height-tight: 1.25;\n --throttle-radius: 12px;\n --throttle-radius-sm: 8px;\n --throttle-radius-full: 999px;\n --throttle-border-width: 1px;\n --throttle-spacing: 8px;\n --throttle-space-1: 4px;\n --throttle-space-2: var(--throttle-spacing);\n --throttle-space-3: 12px;\n --throttle-space-4: 16px;\n --throttle-space-5: 24px;\n --throttle-space-6: 32px;\n --throttle-control-height: 48px;\n --throttle-control-padding-x: 16px;\n --throttle-shadow-card: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);\n --throttle-shadow-popover: 0 10px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);\n --throttle-transition: 150ms cubic-bezier(.2,0,.2,1);\n --throttle-z-modal: 2147483000;\n --throttle-z-popover: 2147482000;\n font-family: var(--throttle-font-family);\n font-size: var(--throttle-font-size);\n line-height: var(--throttle-line-height);\n color: var(--throttle-color-foreground);\n box-sizing: border-box;\n}\n.throttle-root *, .throttle-root *::before, .throttle-root *::after { box-sizing: inherit; }\n\n.throttle-root[data-throttle-theme=\"dark\"] {\n --throttle-color-primary: #e6edf3;\n --throttle-color-primary-foreground: #0d1117;\n --throttle-color-background: #0d1117;\n --throttle-color-surface: #1c2129;\n --throttle-color-foreground: #e6edf3;\n --throttle-color-muted: #21262d;\n --throttle-color-muted-foreground: #9aa4b2;\n --throttle-color-border: #30363d;\n --throttle-color-border-control: #5c6570;\n --throttle-color-danger: #ff6b58;\n --throttle-color-danger-surface: #2a1513;\n --throttle-color-danger-border: #5c2b25;\n --throttle-color-success: #45c08a;\n --throttle-color-success-surface: #0f2419;\n --throttle-color-success-border: #1f4d36;\n --throttle-color-warning: #e0a53a;\n --throttle-color-warning-surface: #2a2113;\n --throttle-color-warning-border: #5c4a25;\n --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);\n --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);\n}\n@media (prefers-color-scheme: dark) {\n .throttle-root[data-throttle-theme=\"auto\"] {\n --throttle-color-primary: #e6edf3;\n --throttle-color-primary-foreground: #0d1117;\n --throttle-color-background: #0d1117;\n --throttle-color-surface: #1c2129;\n --throttle-color-foreground: #e6edf3;\n --throttle-color-muted: #21262d;\n --throttle-color-muted-foreground: #9aa4b2;\n --throttle-color-border: #30363d;\n --throttle-color-border-control: #5c6570;\n --throttle-color-danger: #ff6b58;\n --throttle-color-danger-surface: #2a1513;\n --throttle-color-danger-border: #5c2b25;\n --throttle-color-success: #45c08a;\n --throttle-color-success-surface: #0f2419;\n --throttle-color-success-border: #1f4d36;\n --throttle-color-warning: #e0a53a;\n --throttle-color-warning-surface: #2a2113;\n --throttle-color-warning-border: #5c4a25;\n --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);\n --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);\n }\n}\n\n.throttle-card {\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-card);\n padding: var(--throttle-space-5);\n width: 100%;\n max-width: var(--throttle-card-width);\n margin-inline: auto;\n}\n/* Inside a Modal the dialog already provides the surface \u2014 background, radius\n and elevation. A card that draws its own on top is the \"box inside a box\":\n two shadowed rounded rectangles nested, with the card's max-width stranding\n it in the middle of a much wider dialog. */\n.throttle-card--bare { border: none; box-shadow: none; background: none; max-width: none; }\n.throttle-card__header { margin-bottom: var(--throttle-space-4); }\n.throttle-card__header--branded { text-align: center; }\n.throttle-card__logo { display: flex; justify-content: center; margin-bottom: var(--throttle-space-3); }\n.throttle-card__title { font-size: var(--throttle-font-size-xl); line-height: var(--throttle-line-height-tight); font-weight: 600; letter-spacing: -0.02em; margin: 0; }\n.throttle-card__title--branded { font-size: var(--throttle-font-size-xl); }\n.throttle-card__description { color: var(--throttle-color-muted-foreground); margin: var(--throttle-space-1) 0 0; }\n.throttle-card__body { display: flex; flex-direction: column; gap: var(--throttle-space-3); }\n.throttle-card__footer { margin-top: var(--throttle-space-4); text-align: center; }\n.throttle-card__footer--ruled { border-top: var(--throttle-border-width) solid var(--throttle-color-border); padding-top: var(--throttle-space-4); }\n\n.throttle-field { display: flex; flex-direction: column; gap: var(--throttle-space-1); }\n.throttle-field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--throttle-space-2); }\n.throttle-field__label { font-weight: 500; }\n.throttle-field__input {\n font: inherit;\n font-size: var(--throttle-font-size);\n color: var(--throttle-color-foreground);\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border-control);\n border-radius: var(--throttle-radius-sm);\n /* padding-block stays 0 so min-height alone owns the height, exactly as\n .throttle-button does. With 12px vertical padding the box computed to\n 50px against the button's 48px \u2014 a 2px mismatch, measured in a browser\n across 19 controls. An input element centres its own text vertically. */\n padding-block: 0;\n padding-inline: var(--throttle-control-padding-x);\n min-height: var(--throttle-control-height);\n width: 100%;\n transition: border-color var(--throttle-transition), box-shadow var(--throttle-transition);\n}\n.throttle-field__input:focus-visible {\n outline: none;\n border-color: var(--throttle-color-primary);\n box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary);\n}\n.throttle-field__input:disabled { background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground); cursor: not-allowed; }\n.throttle-field__input::placeholder { color: var(--throttle-color-muted-foreground); opacity: 1; }\n.throttle-field__input--grouped { border: none; border-radius: 0; padding-inline: 0; }\n.throttle-field__hint { color: var(--throttle-color-muted-foreground); font-size: var(--throttle-font-size-xs); }\n/* Always mounted, so it reserves its line whether or not there is an error:\n an error appearing on submit must not push the submit button out from\n under the buyer's pointer. */\n.throttle-field__error { color: var(--throttle-color-danger); font-size: var(--throttle-font-size-xs); line-height: 1rem; }\n/* Reserved a full line under EVERY input even with nothing to say, which\n with the stack gap put 28px of dead space beneath each field, on every\n form and all seven account panels. The element stays mounted when empty\n because role=alert only announces changes to a live region that was\n already there; it just stops occupying a line. */\n.throttle-field__error:empty { display: none; }\n\n.throttle-field-group {\n display: flex;\n flex-direction: column;\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius-sm);\n overflow: hidden;\n}\n.throttle-field-group__item { padding: var(--throttle-space-3) var(--throttle-control-padding-x); }\n.throttle-field-group__divider { height: var(--throttle-border-width); background: var(--throttle-color-border); }\n.throttle-field-group__forgot { margin-left: auto; }\n\n.throttle-button {\n font: inherit;\n font-weight: 500;\n border-radius: var(--throttle-radius-sm);\n border: var(--throttle-border-width) solid transparent;\n padding-inline: var(--throttle-control-padding-x);\n padding-block: 0;\n min-height: var(--throttle-control-height);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: opacity var(--throttle-transition), background-color var(--throttle-transition), border-color var(--throttle-transition), filter var(--throttle-transition), box-shadow var(--throttle-transition);\n}\n.throttle-button:disabled { opacity: .55; cursor: not-allowed; }\n.throttle-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary); }\n.throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: 100%; }\n.throttle-button--primary:hover:not(:disabled) { filter: brightness(0.92); }\n.throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border-control); }\n.throttle-button--secondary:hover:not(:disabled) { background: var(--throttle-color-muted); }\n.throttle-button--danger { background: transparent; color: var(--throttle-color-danger); border-color: var(--throttle-color-border); }\n.throttle-button--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--throttle-color-danger) 10%, transparent); }\n/* Link-style actions are the rows panel default, and they carry Delete,\n Remove, Cancel and Sign out. Zero padding with min-height 0 made those\n roughly 20px tall and ~8px apart \u2014 a mis-tap on a phone lands on something\n irreversible. The target is expanded with vertical padding and pulled back\n with an equal negative margin, so the hit box clears 44px while the text\n sits exactly where it did. Collapsing this back to zero padding shrinks the\n target again. */\n.throttle-button--link { background: none; border: none; color: var(--throttle-color-primary); padding-inline: 0; padding-block: var(--throttle-space-3); margin-block: calc(var(--throttle-space-3) * -1); min-height: 0; text-decoration: underline; width: auto; }\n.throttle-button--link:hover:not(:disabled) { opacity: .8; }\n.throttle-button--linkDanger { background: none; border: none; color: var(--throttle-color-danger); padding-inline: 0; padding-block: var(--throttle-space-3); margin-block: calc(var(--throttle-space-3) * -1); min-height: 0; text-decoration: underline; width: auto; }\n.throttle-button--linkDanger:hover:not(:disabled) { opacity: .8; }\n.throttle-button--xs { font-size: var(--throttle-font-size-xs); }\n\n.throttle-alert { border-radius: var(--throttle-radius-sm); padding: var(--throttle-space-3); font-size: var(--throttle-font-size-sm); }\n.throttle-alert--error { background: var(--throttle-color-danger-surface); border: var(--throttle-border-width) solid var(--throttle-color-danger-border); color: var(--throttle-color-danger); }\n.throttle-alert--success { background: var(--throttle-color-success-surface); border: var(--throttle-border-width) solid var(--throttle-color-success-border); color: var(--throttle-color-success); }\n.throttle-alert--info { background: var(--throttle-color-surface); color: var(--throttle-color-muted-foreground); }\n\n.throttle-spinner {\n display: inline-block; width: 1em; height: 1em;\n border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;\n animation: throttle-spin 700ms linear infinite;\n}\n@keyframes throttle-spin { to { transform: rotate(360deg); } }\n.throttle-button--loading { position: relative; }\n.throttle-button__label { display: inline-flex; align-items: center; justify-content: center; gap: var(--throttle-space-2); }\n.throttle-button__label--hidden { visibility: hidden; }\n.throttle-spinner--centred { position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.5em; }\n\n@media (prefers-reduced-motion: reduce) { .throttle-spinner { animation-duration: 2.4s; } }\n\n.throttle-skeleton {\n background: var(--throttle-color-muted);\n border-radius: var(--throttle-radius-sm);\n animation: throttle-pulse 1.4s ease-in-out infinite; height: 2.5em; }\n@keyframes throttle-pulse { 50% { opacity: .5; } }\n@media (prefers-reduced-motion: reduce) { .throttle-skeleton { animation: none; } }\n\n.throttle-modal__overlay {\n position: fixed; inset: 0; z-index: var(--throttle-z-modal);\n background: rgba(14,17,22,.45);\n display: flex; align-items: center; justify-content: center;\n padding: var(--throttle-space-4);\n overflow-y: auto;\n}\n.throttle-modal__container {\n background: var(--throttle-color-background);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-popover);\n max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto;\n position: relative;\n}\n/* After the base rule on purpose: both are single-class, so equal specificity\n means source order decides. Declared before it, this silently lost. */\n.throttle-modal__container--compact { max-width: 440px; }\n.throttle-modal__close {\n position: absolute; top: var(--throttle-space-3); right: var(--throttle-space-3);\n background: none; border: none; cursor: pointer; font-size: var(--throttle-font-size-lg);\n color: var(--throttle-color-muted-foreground);\n transition: color var(--throttle-transition);\n}\n.throttle-modal__close:hover { color: var(--throttle-color-foreground); }\n.throttle-modal__header { padding: var(--throttle-space-4) var(--throttle-space-4) 0; }\n.throttle-modal__title { font-size: var(--throttle-font-size-lg); line-height: var(--throttle-line-height-tight); font-weight: 600; margin: 0; }\n.throttle-modal__body { padding: var(--throttle-space-4); }\n\n.throttle-dropdown__trigger { background: none; border: none; cursor: pointer; padding: 0; border-radius: var(--throttle-radius-full); transition: background-color var(--throttle-transition); }\n.throttle-dropdown__trigger:hover { background: var(--throttle-color-surface); }\n.throttle-dropdown__trigger:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: 2px; }\n.throttle-dropdown__menu {\n position: absolute; right: 0; top: calc(100% + var(--throttle-space-2));\n z-index: var(--throttle-z-popover);\n min-width: 260px;\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-popover);\n padding: var(--throttle-space-1);\n}\n.throttle-dropdown__item {\n display: flex; align-items: center; gap: var(--throttle-space-2);\n width: 100%; text-align: left; font: inherit; color: inherit;\n background: none; border: none; cursor: pointer;\n padding: var(--throttle-space-3);\n border-radius: var(--throttle-radius-sm);\n text-decoration: none;\n transition: background-color var(--throttle-transition);\n}\n.throttle-dropdown__item:hover { background: var(--throttle-color-surface); }\n.throttle-dropdown__item:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-dropdown__separator { height: 1px; background: var(--throttle-color-border); margin: var(--throttle-space-1) 0; border: 0; }\n\n.throttle-tabs__list {\n display: flex; gap: var(--throttle-space-1);\n border-bottom: var(--throttle-border-width) solid var(--throttle-color-border);\n overflow-x: auto; scrollbar-width: thin;\n}\n.throttle-tabs__tab {\n font: inherit; background: none; border: none; cursor: pointer; white-space: nowrap;\n padding: var(--throttle-space-3);\n color: var(--throttle-color-muted-foreground);\n border-bottom: 2px solid transparent;\n transition: color var(--throttle-transition), border-color var(--throttle-transition);\n}\n.throttle-tabs__tab:hover { color: var(--throttle-color-foreground); }\n.throttle-tabs__tab--active { color: var(--throttle-color-foreground); border-bottom-color: var(--throttle-color-primary); }\n.throttle-tabs__panel { padding-top: var(--throttle-space-4); }\n\n/* Paints its own ground. A UserButton in a navbar should stay transparent, but\n the dashboard is a large surface of themed text: in dark theme its foreground\n is near-white, so on a light host page it was rendering white-on-white. */\n.throttle-cardframe { width: 100%; min-height: 420px; border: 0; display: block; }\n.throttle-centre { display: flex; align-items: center; justify-content: center; min-height: 160px; }\n.throttle-section__title { font-size: var(--throttle-font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--throttle-color-muted-foreground); margin: 0 0 var(--throttle-space-2); font-weight: 600; }\n.throttle-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-5); }\n.throttle-addressblock__line { margin: 0 0 2px; }\n.throttle-timeline { display: flex; flex-direction: column; gap: var(--throttle-space-2); }\n.throttle-timeline__row { display: flex; align-items: center; gap: var(--throttle-space-2); }\n.throttle-timeline__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--throttle-color-border-control); flex: none; }\n.throttle-timeline__label { flex: 1; }\n.throttle-account-root { container-type: inline-size; background: var(--throttle-color-account-surface); color: var(--throttle-color-foreground); padding: var(--throttle-account-padding); }\n.throttle-account { display: flex; gap: var(--throttle-space-5); align-items: flex-start; }\n.throttle-account__content { flex: 1; min-width: 0; }\n.throttle-tabs__rail { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; }\n.throttle-tabs__railitem {\n font: inherit;\n font-size: var(--throttle-font-size-sm);\n display: flex;\n align-items: center;\n gap: var(--throttle-space-3);\n width: 100%;\n text-align: left;\n background: none;\n border: none;\n border-radius: var(--throttle-radius-sm);\n padding: 0 var(--throttle-space-3);\n min-height: var(--throttle-control-height);\n color: var(--throttle-color-muted-foreground);\n cursor: pointer;\n transition: background var(--throttle-transition), color var(--throttle-transition);\n}\n.throttle-tabs__railitem:hover { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); }\n.throttle-tabs__railitem:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-tabs__tab:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-tabs__railitem--active { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); font-weight: 500; }\n.throttle-tabs__railicon { flex: none; opacity: .75; }\n\n/* A CONTAINER query, not a viewport one: these components render inside a\n merchant's page, so the viewport says nothing about how much room the\n dashboard actually has \u2014 it could sit in a 400px column on a 1920px screen.\n Below ~560px of container the rail becomes a full-width list above the\n panel: all seven still visible, each still a 44px target. */\n@container (max-width: 560px) {\n /* align-items: flex-start is right in row direction and wrong in column \u2014\n it shrinks the rail to its content width, so width:100% alone cannot make\n it span. Stretch it explicitly when stacked. */\n .throttle-account { flex-direction: column; align-items: stretch; gap: var(--throttle-space-4); }\n .throttle-addresses { grid-template-columns: 1fr; }\n .throttle-tabs__rail { width: 100%; }\n}\n\n.throttle-table { width: 100%; border-collapse: collapse; text-align: left; }\n.throttle-table__head { color: var(--throttle-color-muted-foreground); font-weight: 500; font-size: var(--throttle-font-size-sm); }\n.throttle-table__row { border-top: var(--throttle-border-width) solid var(--throttle-color-border); cursor: pointer; transition: background-color var(--throttle-transition); }\n.throttle-table__row:hover { background: var(--throttle-color-surface); }\n.throttle-table__row:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-table__cell { padding: var(--throttle-space-3) var(--throttle-space-2); height: 56px; box-sizing: border-box; }\n.throttle-table__scroll { overflow-x: auto; }\n\n.throttle-empty { text-align: center; padding: var(--throttle-space-6) var(--throttle-space-4); }\n.throttle-empty__title { font-weight: 600; margin: 0 0 var(--throttle-space-1); }\n.throttle-empty__description { color: var(--throttle-color-muted-foreground); margin: 0; }\n\n.throttle-avatar {\n display: inline-flex; align-items: center; justify-content: center;\n width: 32px; height: 32px; border-radius: var(--throttle-radius-full);\n background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground);\n font-size: var(--throttle-font-size-xs); font-weight: 600; text-transform: uppercase;\n}\n\n.throttle-badge {\n display: inline-block; font-size: var(--throttle-font-size-xs); font-weight: 500;\n padding: 2px var(--throttle-space-2); border-radius: var(--throttle-radius-full);\n background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground);\n}\n.throttle-badge--muted { background: none; border: var(--throttle-border-width) solid var(--throttle-color-border); color: var(--throttle-color-muted-foreground); font-weight: 400; padding: 1px calc(var(--throttle-space-2) - 1px); }\n.throttle-badge--success { background: color-mix(in srgb, var(--throttle-color-success) 15%, transparent); color: var(--throttle-color-success); }\n.throttle-badge--warning { background: color-mix(in srgb, var(--throttle-color-warning) 15%, transparent); color: var(--throttle-color-warning); }\n.throttle-badge--danger { background: color-mix(in srgb, var(--throttle-color-danger) 15%, transparent); color: var(--throttle-color-danger); }\n\n.throttle-stack { display: flex; flex-direction: column; gap: var(--throttle-space-3); }\n.throttle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2); flex-wrap: wrap; }\n.throttle-muted { color: var(--throttle-color-muted-foreground); }\n.throttle-banner {\n display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n background: color-mix(in srgb, var(--throttle-color-warning) 12%, transparent);\n color: var(--throttle-color-warning);\n border-radius: var(--throttle-radius-sm);\n padding: var(--throttle-space-3);\n margin-bottom: var(--throttle-space-4);\n}\n.throttle-panel { display: flex; flex-direction: column; gap: var(--throttle-space-4); }\n/* 100dvh, not 100vh: on mobile browsers 100vh includes the space behind the\n dynamic address/toolbar, so the page would be taller than the visible\n viewport and the card would sit off-centre until the toolbar collapsed. */\n.throttle-page {\n min-height: 100dvh;\n width: 100%;\n background: var(--throttle-color-surface);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--throttle-space-5);\n padding: var(--throttle-space-5);\n}\n.throttle-page__logo { display: flex; justify-content: center; }\n.throttle-page__footer { color: var(--throttle-color-muted-foreground); text-align: center; font-size: var(--throttle-font-size-sm); }\n.throttle-listitem {\n display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius-sm);\n padding: var(--throttle-space-3);\n}\n/* 'rows' variant: hairline rules between items instead of each item carrying\n its own border+radius, so a panel does not read as a card inside a card. */\n.throttle-rows { display: flex; flex-direction: column; }\n.throttle-rowitem {\n display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n border-top: var(--throttle-border-width) solid var(--throttle-color-border);\n padding: var(--throttle-space-3) 0;\n}\n.throttle-rowitem:first-child { border-top: none; padding-top: 0; }\n.throttle-actions { display: flex; gap: var(--throttle-space-2); flex-wrap: wrap; }\n.throttle-table__money { display: block; text-align: right; font-variant-numeric: tabular-nums; }\n.throttle-lineitem { display: flex; align-items: center; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }\n.throttle-lineitem__image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--throttle-radius-sm); flex: none; }\n.throttle-totals { display: flex; flex-direction: column; gap: var(--throttle-space-1); }\n\n@media (prefers-reduced-motion: reduce) {\n .throttle-button, .throttle-field__input, .throttle-dropdown__item, .throttle-dropdown__trigger, .throttle-tabs__tab, .throttle-table__row, .throttle-modal__close {\n transition: none;\n }\n}\n";
446
490
 
447
491
  /**
448
492
  * The only place minor units become major units. Every amount on the wire is
@@ -689,17 +733,19 @@ declare function AddCardDialog(props: {
689
733
  localization?: ThrottleLocalization;
690
734
  }): react_jsx_runtime.JSX.Element | null;
691
735
 
692
- declare function OrdersPanel(props: {
693
- appearance?: ThrottleAppearance;
694
- localization?: ThrottleLocalization;
695
- variant?: AccountPanelVariant;
696
- onViewSubscription?(id: string): void;
697
- }): react_jsx_runtime.JSX.Element;
698
-
699
736
  declare function OrderDetail(props: {
700
737
  orderId: string;
701
738
  onBack?(): void;
702
739
  onViewSubscription?(id: string): void;
740
+ /**
741
+ * Status-dependent actions. Each renders ONLY when its handler is supplied,
742
+ * because the buyer plane has no commerce writes: a built-in Cancel or Track
743
+ * button would be a control that always fails. The merchant owns the
744
+ * behaviour, the component owns when it is offered.
745
+ */
746
+ onPayNow?(order: OrderActionTarget): void;
747
+ onReorder?(order: OrderActionTarget): void;
748
+ onTrackShipment?(order: OrderActionTarget): void;
703
749
  appearance?: ThrottleAppearance;
704
750
  localization?: ThrottleLocalization;
705
751
  }): react_jsx_runtime.JSX.Element;
package/dist/react/components/index.d.ts CHANGED
@@ -28,6 +28,7 @@ declare const VARIABLE_PROPERTY: {
28
28
  readonly borderRadius: "--throttle-radius";
29
29
  readonly borderWidth: "--throttle-border-width";
30
30
  readonly spacing: "--throttle-spacing";
31
+ readonly cardWidth: "--throttle-card-width";
31
32
  readonly accountSurface: "--throttle-color-account-surface";
32
33
  readonly accountPadding: "--throttle-account-padding";
33
34
  readonly shadowCard: "--throttle-shadow-card";
@@ -43,7 +44,7 @@ type ThrottleVariables = Partial<Record<keyof typeof VARIABLE_PROPERTY, string>>
43
44
  * rendered element without adding its key here ships something a merchant
44
45
  * cannot restyle, which the drift test in Task 15 catches.
45
46
  */
46
- declare const THROTTLE_ELEMENT_KEYS: readonly ["card", "card.header", "card.title", "card.description", "card.body", "card.footer", "card.logo", "field", "field.label", "field.input", "field.hint", "field.error", "field.group", "button", "alert", "spinner", "skeleton", "avatar", "badge", "emptyState", "emptyState.title", "emptyState.description", "modal.overlay", "modal.container", "modal.closeButton", "dropdown.trigger", "dropdown.menu", "dropdown.item", "dropdown.separator", "tabs.list", "tabs.tab", "table", "table.head", "table.row", "table.cell", "signIn.root", "signIn.title", "signIn.logo", "signIn.emailField", "signIn.passwordField", "signIn.submitButton", "signIn.forgotLink", "signIn.switchLink", "signUp.root", "signUp.title", "signUp.logo", "signUp.emailField", "signUp.passwordField", "signUp.submitButton", "signUp.switchLink", "forgotPassword.root", "forgotPassword.title", "forgotPassword.logo", "forgotPassword.emailField", "forgotPassword.submitButton", "forgotPassword.backLink", "resetPassword.root", "resetPassword.title", "resetPassword.logo", "resetPassword.passwordField", "resetPassword.submitButton", "verifyEmail.root", "verifyEmail.title", "verifyEmail.logo", "verifyEmail.resendButton", "authFlow.root", "authModal.overlay", "authModal.container", "signInButton.root", "signUpButton.root", "signOutButton.root", "stepUp.root", "stepUp.title", "stepUp.passwordField", "stepUp.submitButton", "stepUp.cancelButton", "signInPage.root", "signInPage.logo", "signInPage.footer", "signUpPage.root", "signUpPage.logo", "signUpPage.footer", "userButton.root", "userButton.trigger", "userButton.menu", "userButton.identity", "userButton.email", "userButton.badge", "userButton.item", "userButton.manageButton", "userButton.signOutButton", "userButton.signOutAllButton", "accountDashboard.root", "accountDashboard.tabs", "accountDashboard.sidebar", "accountDashboard.panel", "accountModal.overlay", "accountModal.container", "accountModal.header", "accountModal.title", "accountModal.body", "verifyBanner.root", "verifyBanner.message", "verifyBanner.resendButton", "verifyBanner.dismissButton", "profilePanel.root", "profilePanel.form", "profilePanel.submitButton", "addressesPanel.root", "addressesPanel.list", "addressesPanel.item", "addressesPanel.addButton", "addressesPanel.form", "addressesPanel.defaultButton", "addressesPanel.editButton", "addressesPanel.deleteButton", "addressesPanel.table", "addressesPanel.row", "paymentMethodsPanel.root", "paymentMethodsPanel.list", "paymentMethodsPanel.item", "paymentMethodsPanel.defaultButton", "paymentMethodsPanel.deleteButton", "paymentMethodsPanel.addButton", "paymentMethodsPanel.addDialog", "paymentMethodsPanel.table", "paymentMethodsPanel.row", "ordersPanel.root", "ordersPanel.table", "ordersPanel.row", "ordersPanel.list", "ordersPanel.item", "ordersPanel.viewButton", "orderDetail.root", "orderDetail.backButton", "orderDetail.lineItems", "orderDetail.lineItem", "orderDetail.totals", "invoicesPanel.root", "invoicesPanel.table", "invoicesPanel.row", "invoicesPanel.list", "invoicesPanel.item", "invoicesPanel.viewButton", "invoiceDetail.root", "invoiceDetail.backButton", "invoiceDetail.downloadButton", "invoiceDetail.totals", "subscriptionsPanel.root", "subscriptionsPanel.list", "subscriptionsPanel.item", "subscriptionsPanel.cancelButton", "subscriptionsPanel.cancelNowButton", "subscriptionsPanel.pauseButton", "subscriptionsPanel.resumeButton", "subscriptionsPanel.table", "subscriptionsPanel.row", "securityPanel.root", "securityPanel.passwordForm", "securityPanel.passwordButton", "securityPanel.sessionList", "securityPanel.sessionItem", "securityPanel.revokeButton", "securityPanel.revokeAllButton", "securityPanel.table", "securityPanel.row"];
47
+ declare const THROTTLE_ELEMENT_KEYS: readonly ["card", "card.header", "card.title", "card.description", "card.body", "card.footer", "card.logo", "field", "field.label", "field.input", "field.hint", "field.error", "field.group", "button", "alert", "spinner", "skeleton", "avatar", "badge", "emptyState", "emptyState.title", "emptyState.description", "modal.overlay", "modal.container", "modal.closeButton", "dropdown.trigger", "dropdown.menu", "dropdown.item", "dropdown.separator", "tabs.list", "tabs.tab", "table", "table.head", "table.row", "table.cell", "signIn.root", "signIn.title", "signIn.logo", "signIn.emailField", "signIn.passwordField", "signIn.submitButton", "signIn.forgotLink", "signIn.switchLink", "signUp.root", "signUp.title", "signUp.logo", "signUp.emailField", "signUp.passwordField", "signUp.submitButton", "signUp.switchLink", "forgotPassword.root", "forgotPassword.title", "forgotPassword.logo", "forgotPassword.emailField", "forgotPassword.submitButton", "forgotPassword.backLink", "resetPassword.root", "resetPassword.title", "resetPassword.logo", "resetPassword.passwordField", "resetPassword.submitButton", "verifyEmail.root", "verifyEmail.title", "verifyEmail.logo", "verifyEmail.resendButton", "authFlow.root", "authModal.overlay", "authModal.container", "signInButton.root", "signUpButton.root", "signOutButton.root", "stepUp.root", "stepUp.title", "stepUp.passwordField", "stepUp.submitButton", "stepUp.cancelButton", "signInPage.root", "signInPage.logo", "signInPage.footer", "signUpPage.root", "signUpPage.logo", "signUpPage.footer", "userButton.root", "userButton.trigger", "userButton.menu", "userButton.identity", "userButton.email", "userButton.badge", "userButton.item", "userButton.manageButton", "userButton.signOutButton", "userButton.signOutAllButton", "accountDashboard.root", "accountDashboard.tabs", "accountDashboard.sidebar", "accountDashboard.panel", "accountModal.overlay", "accountModal.container", "accountModal.header", "accountModal.title", "accountModal.body", "verifyBanner.root", "verifyBanner.message", "verifyBanner.resendButton", "verifyBanner.dismissButton", "profilePanel.root", "profilePanel.form", "profilePanel.submitButton", "addressesPanel.root", "addressesPanel.list", "addressesPanel.item", "addressesPanel.addButton", "addressesPanel.form", "addressesPanel.defaultButton", "addressesPanel.editButton", "addressesPanel.deleteButton", "addressesPanel.table", "addressesPanel.row", "paymentMethodsPanel.root", "paymentMethodsPanel.list", "paymentMethodsPanel.item", "paymentMethodsPanel.defaultButton", "paymentMethodsPanel.deleteButton", "paymentMethodsPanel.addButton", "paymentMethodsPanel.addDialog", "orderDetail.addresses", "orderDetail.shippingAddress", "orderDetail.billingAddress", "orderDetail.timeline", "orderDetail.payButton", "orderDetail.trackButton", "orderDetail.reorderButton", "confirm.header", "confirm.title", "confirm.body", "confirm.confirmButton", "confirm.cancelButton", "paymentMethodsPanel.table", "paymentMethodsPanel.row", "ordersPanel.root", "ordersPanel.table", "ordersPanel.row", "ordersPanel.list", "ordersPanel.item", "ordersPanel.viewButton", "orderDetail.root", "orderDetail.backButton", "orderDetail.lineItems", "orderDetail.lineItem", "orderDetail.totals", "invoicesPanel.root", "invoicesPanel.table", "invoicesPanel.row", "invoicesPanel.list", "invoicesPanel.item", "invoicesPanel.viewButton", "invoiceDetail.root", "invoiceDetail.backButton", "invoiceDetail.downloadButton", "invoiceDetail.totals", "subscriptionsPanel.root", "subscriptionsPanel.list", "subscriptionsPanel.item", "subscriptionsPanel.cancelButton", "subscriptionsPanel.cancelNowButton", "subscriptionsPanel.pauseButton", "subscriptionsPanel.resumeButton", "subscriptionsPanel.table", "subscriptionsPanel.row", "securityPanel.root", "securityPanel.passwordForm", "securityPanel.passwordButton", "securityPanel.sessionList", "securityPanel.sessionItem", "securityPanel.revokeButton", "securityPanel.revokeAllButton", "securityPanel.table", "securityPanel.row"];
47
48
  type ThrottleElementKey = (typeof THROTTLE_ELEMENT_KEYS)[number];
48
49
  interface ThrottleSlots {
49
50
  Spinner?: ComponentType<{
@@ -85,6 +86,7 @@ declare const enUS: {
85
86
  loading: string;
86
87
  close: string;
87
88
  confirm: string;
89
+ keepIt: string;
88
90
  somethingWentWrong: string;
89
91
  actions: string;
90
92
  view: string;
@@ -179,6 +181,7 @@ declare const enUS: {
179
181
  addButton: string;
180
182
  defaultBadge: string;
181
183
  makeDefault: string;
184
+ deleteConfirmAction: string;
182
185
  empty: string;
183
186
  emptyDescription: string;
184
187
  label: string;
@@ -205,9 +208,20 @@ declare const enUS: {
205
208
  makeDefault: string;
206
209
  expires: string;
207
210
  deleteConfirm: string;
211
+ deleteConfirmAction: string;
208
212
  columnCard: string;
209
213
  };
210
214
  orders: {
215
+ shipTo: string;
216
+ billTo: string;
217
+ history: string;
218
+ placed: string;
219
+ completed: string;
220
+ cancelledAt: string;
221
+ closedAt: string;
222
+ payNow: string;
223
+ track: string;
224
+ reorder: string;
211
225
  empty: string;
212
226
  emptyDescription: string;
213
227
  gatedDescription: string;
@@ -280,6 +294,10 @@ declare const enUS: {
280
294
  downloadUnavailable: string;
281
295
  };
282
296
  subscriptions: {
297
+ cancelConfirmAction: string;
298
+ pauseConfirm: string;
299
+ resumeConfirm: string;
300
+ cancelNowConfirm: string;
283
301
  empty: string;
284
302
  emptyDescription: string;
285
303
  gatedDescription: string;
@@ -351,9 +369,35 @@ declare function AddressesPanel(props: {
351
369
  variant?: AccountPanelVariant;
352
370
  }): react_jsx_runtime.JSX.Element;
353
371
 
372
+ /**
373
+ * The order the buyer is acting on, including its line items — so "order
374
+ * again" can rebuild a cart without fetching the order a second time.
375
+ */
376
+ interface OrderActionTarget {
377
+ id: string;
378
+ orderNumber: string;
379
+ currency: string;
380
+ lineItems: Array<{
381
+ name: string;
382
+ unitPrice: number;
383
+ quantity: number;
384
+ }>;
385
+ }
386
+ interface OrderActionHandlers {
387
+ onPayNow?(order: OrderActionTarget): void;
388
+ onReorder?(order: OrderActionTarget): void;
389
+ onTrackShipment?(order: OrderActionTarget): void;
390
+ }
391
+ declare function OrdersPanel(props: OrderActionHandlers & {
392
+ appearance?: ThrottleAppearance;
393
+ localization?: ThrottleLocalization;
394
+ variant?: AccountPanelVariant;
395
+ onViewSubscription?(id: string): void;
396
+ }): react_jsx_runtime.JSX.Element;
397
+
354
398
  type AccountTab = 'profile' | 'addresses' | 'paymentMethods' | 'orders' | 'invoices' | 'subscriptions' | 'security';
355
399
  declare const ACCOUNT_TABS: readonly AccountTab[];
356
- interface AccountDashboardProps {
400
+ interface AccountDashboardProps extends OrderActionHandlers {
357
401
  /** Which panels to show, in order. Defaults to all seven. */
358
402
  tabs?: AccountTab[];
359
403
  tab?: AccountTab;
@@ -442,7 +486,7 @@ declare const THROTTLE_STYLE_ID = "throttle-auth-styles";
442
486
  * specificity plus source order is what lets them win. A descendant selector
443
487
  * here would silently outrank them.
444
488
  */
445
- declare const THROTTLE_STYLES = "\n.throttle-root {\n --throttle-color-primary: #18181b;\n --throttle-color-primary-foreground: #ffffff;\n --throttle-color-background: #ffffff;\n --throttle-color-surface: #f8fafc;\n --throttle-color-foreground: #0e1116;\n --throttle-color-muted: #eceef2;\n --throttle-color-muted-foreground: #5b6472;\n --throttle-color-border: #e2e8f0;\n /* The boundary of an INTERACTIVE control, which WCAG 1.4.11 requires to\n reach 3:1 against its adjacent colour \u2014 an input identified only by a\n 1.23:1 hairline is not identifiable at all. Decorative separators (card\n edges, table rules, dividers) keep --throttle-color-border: they do not\n identify a control, so the requirement does not apply and darkening\n them would only add noise. */\n /* The account dashboard paints nothing by default so it can drop into a\n merchant's page without fighting their background. The accountSurface and\n accountPadding appearance variables opt back into a card.\n No backticks in this comment: the sheet is a TS template literal. */\n --throttle-color-account-surface: transparent;\n --throttle-account-padding: 0;\n --throttle-color-border-control: #8b93a1;\n --throttle-color-danger: #c2321f;\n --throttle-color-danger-surface: #fef2f2;\n --throttle-color-danger-border: #fecaca;\n --throttle-color-success: #127a4a;\n --throttle-color-success-surface: #ecfdf5;\n --throttle-color-success-border: #a7f3d0;\n --throttle-color-warning: #92400e;\n --throttle-color-warning-surface: #fffbeb;\n --throttle-color-warning-border: #fde68a;\n --throttle-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --throttle-font-size: 16px;\n --throttle-font-size-xs: 12px;\n --throttle-font-size-sm: 14px;\n --throttle-font-size-lg: 20px;\n --throttle-font-size-xl: 24px;\n --throttle-line-height: 1.5;\n --throttle-line-height-tight: 1.25;\n --throttle-radius: 12px;\n --throttle-radius-sm: 8px;\n --throttle-radius-full: 999px;\n --throttle-border-width: 1px;\n --throttle-spacing: 8px;\n --throttle-space-1: 4px;\n --throttle-space-2: var(--throttle-spacing);\n --throttle-space-3: 12px;\n --throttle-space-4: 16px;\n --throttle-space-5: 24px;\n --throttle-space-6: 32px;\n --throttle-control-height: 48px;\n --throttle-control-padding-x: 16px;\n --throttle-shadow-card: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);\n --throttle-shadow-popover: 0 10px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);\n --throttle-transition: 150ms cubic-bezier(.2,0,.2,1);\n --throttle-z-modal: 2147483000;\n --throttle-z-popover: 2147482000;\n font-family: var(--throttle-font-family);\n font-size: var(--throttle-font-size);\n line-height: var(--throttle-line-height);\n color: var(--throttle-color-foreground);\n box-sizing: border-box;\n}\n.throttle-root *, .throttle-root *::before, .throttle-root *::after { box-sizing: inherit; }\n\n.throttle-root[data-throttle-theme=\"dark\"] {\n --throttle-color-primary: #e6edf3;\n --throttle-color-primary-foreground: #0d1117;\n --throttle-color-background: #0d1117;\n --throttle-color-surface: #1c2129;\n --throttle-color-foreground: #e6edf3;\n --throttle-color-muted: #21262d;\n --throttle-color-muted-foreground: #9aa4b2;\n --throttle-color-border: #30363d;\n --throttle-color-border-control: #5c6570;\n --throttle-color-danger: #ff6b58;\n --throttle-color-danger-surface: #2a1513;\n --throttle-color-danger-border: #5c2b25;\n --throttle-color-success: #45c08a;\n --throttle-color-success-surface: #0f2419;\n --throttle-color-success-border: #1f4d36;\n --throttle-color-warning: #e0a53a;\n --throttle-color-warning-surface: #2a2113;\n --throttle-color-warning-border: #5c4a25;\n --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);\n --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);\n}\n@media (prefers-color-scheme: dark) {\n .throttle-root[data-throttle-theme=\"auto\"] {\n --throttle-color-primary: #e6edf3;\n --throttle-color-primary-foreground: #0d1117;\n --throttle-color-background: #0d1117;\n --throttle-color-surface: #1c2129;\n --throttle-color-foreground: #e6edf3;\n --throttle-color-muted: #21262d;\n --throttle-color-muted-foreground: #9aa4b2;\n --throttle-color-border: #30363d;\n --throttle-color-border-control: #5c6570;\n --throttle-color-danger: #ff6b58;\n --throttle-color-danger-surface: #2a1513;\n --throttle-color-danger-border: #5c2b25;\n --throttle-color-success: #45c08a;\n --throttle-color-success-surface: #0f2419;\n --throttle-color-success-border: #1f4d36;\n --throttle-color-warning: #e0a53a;\n --throttle-color-warning-surface: #2a2113;\n --throttle-color-warning-border: #5c4a25;\n --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);\n --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);\n }\n}\n\n.throttle-card {\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-card);\n padding: var(--throttle-space-5);\n width: 100%;\n max-width: 400px;\n margin-inline: auto;\n}\n/* Inside a Modal the dialog already provides the surface \u2014 background, radius\n and elevation. A card that draws its own on top is the \"box inside a box\":\n two shadowed rounded rectangles nested, with the card's max-width stranding\n it in the middle of a much wider dialog. */\n.throttle-card--bare { border: none; box-shadow: none; background: none; max-width: none; }\n.throttle-card__header { margin-bottom: var(--throttle-space-4); }\n.throttle-card__header--branded { text-align: center; }\n.throttle-card__logo { display: flex; justify-content: center; margin-bottom: var(--throttle-space-3); }\n.throttle-card__title { font-size: var(--throttle-font-size-xl); line-height: var(--throttle-line-height-tight); font-weight: 600; letter-spacing: -0.02em; margin: 0; }\n.throttle-card__title--branded { font-size: var(--throttle-font-size-xl); }\n.throttle-card__description { color: var(--throttle-color-muted-foreground); margin: var(--throttle-space-1) 0 0; }\n.throttle-card__body { display: flex; flex-direction: column; gap: var(--throttle-space-3); }\n.throttle-card__footer { margin-top: var(--throttle-space-4); text-align: center; }\n.throttle-card__footer--ruled { border-top: var(--throttle-border-width) solid var(--throttle-color-border); padding-top: var(--throttle-space-4); }\n\n.throttle-field { display: flex; flex-direction: column; gap: var(--throttle-space-1); }\n.throttle-field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--throttle-space-2); }\n.throttle-field__label { font-weight: 500; }\n.throttle-field__input {\n font: inherit;\n font-size: var(--throttle-font-size);\n color: var(--throttle-color-foreground);\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border-control);\n border-radius: var(--throttle-radius-sm);\n /* padding-block stays 0 so min-height alone owns the height, exactly as\n .throttle-button does. With 12px vertical padding the box computed to\n 50px against the button's 48px \u2014 a 2px mismatch, measured in a browser\n across 19 controls. An input element centres its own text vertically. */\n padding-block: 0;\n padding-inline: var(--throttle-control-padding-x);\n min-height: var(--throttle-control-height);\n width: 100%;\n transition: border-color var(--throttle-transition), box-shadow var(--throttle-transition);\n}\n.throttle-field__input:focus-visible {\n outline: none;\n border-color: var(--throttle-color-primary);\n box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary);\n}\n.throttle-field__input:disabled { background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground); cursor: not-allowed; }\n.throttle-field__input::placeholder { color: var(--throttle-color-muted-foreground); opacity: 1; }\n.throttle-field__input--grouped { border: none; border-radius: 0; padding-inline: 0; }\n.throttle-field__hint { color: var(--throttle-color-muted-foreground); font-size: var(--throttle-font-size-xs); }\n/* Always mounted, so it reserves its line whether or not there is an error:\n an error appearing on submit must not push the submit button out from\n under the buyer's pointer. */\n.throttle-field__error { color: var(--throttle-color-danger); font-size: var(--throttle-font-size-xs); line-height: 1rem; }\n/* Reserved a full line under EVERY input even with nothing to say, which\n with the stack gap put 28px of dead space beneath each field, on every\n form and all seven account panels. The element stays mounted when empty\n because role=alert only announces changes to a live region that was\n already there; it just stops occupying a line. */\n.throttle-field__error:empty { display: none; }\n\n.throttle-field-group {\n display: flex;\n flex-direction: column;\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius-sm);\n overflow: hidden;\n}\n.throttle-field-group__item { padding: var(--throttle-space-3) var(--throttle-control-padding-x); }\n.throttle-field-group__divider { height: var(--throttle-border-width); background: var(--throttle-color-border); }\n.throttle-field-group__forgot { margin-left: auto; }\n\n.throttle-button {\n font: inherit;\n font-weight: 500;\n border-radius: var(--throttle-radius-sm);\n border: var(--throttle-border-width) solid transparent;\n padding-inline: var(--throttle-control-padding-x);\n padding-block: 0;\n min-height: var(--throttle-control-height);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: opacity var(--throttle-transition), background-color var(--throttle-transition), border-color var(--throttle-transition), filter var(--throttle-transition), box-shadow var(--throttle-transition);\n}\n.throttle-button:disabled { opacity: .55; cursor: not-allowed; }\n.throttle-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary); }\n.throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: 100%; }\n.throttle-button--primary:hover:not(:disabled) { filter: brightness(0.92); }\n.throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border-control); }\n.throttle-button--secondary:hover:not(:disabled) { background: var(--throttle-color-muted); }\n.throttle-button--danger { background: transparent; color: var(--throttle-color-danger); border-color: var(--throttle-color-border); }\n.throttle-button--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--throttle-color-danger) 10%, transparent); }\n/* Link-style actions are the rows panel default, and they carry Delete,\n Remove, Cancel and Sign out. Zero padding with min-height 0 made those\n roughly 20px tall and ~8px apart \u2014 a mis-tap on a phone lands on something\n irreversible. The target is expanded with vertical padding and pulled back\n with an equal negative margin, so the hit box clears 44px while the text\n sits exactly where it did. Collapsing this back to zero padding shrinks the\n target again. */\n.throttle-button--link { background: none; border: none; color: var(--throttle-color-primary); padding-inline: 0; padding-block: var(--throttle-space-3); margin-block: calc(var(--throttle-space-3) * -1); min-height: 0; text-decoration: underline; width: auto; }\n.throttle-button--link:hover:not(:disabled) { opacity: .8; }\n.throttle-button--linkDanger { background: none; border: none; color: var(--throttle-color-danger); padding-inline: 0; padding-block: var(--throttle-space-3); margin-block: calc(var(--throttle-space-3) * -1); min-height: 0; text-decoration: underline; width: auto; }\n.throttle-button--linkDanger:hover:not(:disabled) { opacity: .8; }\n.throttle-button--xs { font-size: var(--throttle-font-size-xs); }\n\n.throttle-alert { border-radius: var(--throttle-radius-sm); padding: var(--throttle-space-3); font-size: var(--throttle-font-size-sm); }\n.throttle-alert--error { background: var(--throttle-color-danger-surface); border: var(--throttle-border-width) solid var(--throttle-color-danger-border); color: var(--throttle-color-danger); }\n.throttle-alert--success { background: var(--throttle-color-success-surface); border: var(--throttle-border-width) solid var(--throttle-color-success-border); color: var(--throttle-color-success); }\n.throttle-alert--info { background: var(--throttle-color-surface); color: var(--throttle-color-muted-foreground); }\n\n.throttle-spinner {\n display: inline-block; width: 1em; height: 1em;\n border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;\n animation: throttle-spin 700ms linear infinite;\n}\n@keyframes throttle-spin { to { transform: rotate(360deg); } }\n.throttle-button--loading { position: relative; }\n.throttle-button__label { display: inline-flex; align-items: center; justify-content: center; gap: var(--throttle-space-2); }\n.throttle-button__label--hidden { visibility: hidden; }\n.throttle-spinner--centred { position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.5em; }\n\n@media (prefers-reduced-motion: reduce) { .throttle-spinner { animation-duration: 2.4s; } }\n\n.throttle-skeleton {\n background: var(--throttle-color-muted);\n border-radius: var(--throttle-radius-sm);\n animation: throttle-pulse 1.4s ease-in-out infinite; height: 2.5em; }\n@keyframes throttle-pulse { 50% { opacity: .5; } }\n@media (prefers-reduced-motion: reduce) { .throttle-skeleton { animation: none; } }\n\n.throttle-modal__overlay {\n position: fixed; inset: 0; z-index: var(--throttle-z-modal);\n background: rgba(14,17,22,.45);\n display: flex; align-items: center; justify-content: center;\n padding: var(--throttle-space-4);\n overflow-y: auto;\n}\n.throttle-modal__container {\n background: var(--throttle-color-background);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-popover);\n max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto;\n position: relative;\n}\n/* After the base rule on purpose: both are single-class, so equal specificity\n means source order decides. Declared before it, this silently lost. */\n.throttle-modal__container--compact { max-width: 440px; }\n.throttle-modal__close {\n position: absolute; top: var(--throttle-space-3); right: var(--throttle-space-3);\n background: none; border: none; cursor: pointer; font-size: var(--throttle-font-size-lg);\n color: var(--throttle-color-muted-foreground);\n transition: color var(--throttle-transition);\n}\n.throttle-modal__close:hover { color: var(--throttle-color-foreground); }\n.throttle-modal__header { padding: var(--throttle-space-4) var(--throttle-space-4) 0; }\n.throttle-modal__title { font-size: var(--throttle-font-size-lg); line-height: var(--throttle-line-height-tight); font-weight: 600; margin: 0; }\n.throttle-modal__body { padding: var(--throttle-space-4); }\n\n.throttle-dropdown__trigger { background: none; border: none; cursor: pointer; padding: 0; border-radius: var(--throttle-radius-full); transition: background-color var(--throttle-transition); }\n.throttle-dropdown__trigger:hover { background: var(--throttle-color-surface); }\n.throttle-dropdown__trigger:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: 2px; }\n.throttle-dropdown__menu {\n position: absolute; right: 0; top: calc(100% + var(--throttle-space-2));\n z-index: var(--throttle-z-popover);\n min-width: 260px;\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-popover);\n padding: var(--throttle-space-1);\n}\n.throttle-dropdown__item {\n display: flex; align-items: center; gap: var(--throttle-space-2);\n width: 100%; text-align: left; font: inherit; color: inherit;\n background: none; border: none; cursor: pointer;\n padding: var(--throttle-space-3);\n border-radius: var(--throttle-radius-sm);\n text-decoration: none;\n transition: background-color var(--throttle-transition);\n}\n.throttle-dropdown__item:hover { background: var(--throttle-color-surface); }\n.throttle-dropdown__item:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-dropdown__separator { height: 1px; background: var(--throttle-color-border); margin: var(--throttle-space-1) 0; border: 0; }\n\n.throttle-tabs__list {\n display: flex; gap: var(--throttle-space-1);\n border-bottom: var(--throttle-border-width) solid var(--throttle-color-border);\n overflow-x: auto; scrollbar-width: thin;\n}\n.throttle-tabs__tab {\n font: inherit; background: none; border: none; cursor: pointer; white-space: nowrap;\n padding: var(--throttle-space-3);\n color: var(--throttle-color-muted-foreground);\n border-bottom: 2px solid transparent;\n transition: color var(--throttle-transition), border-color var(--throttle-transition);\n}\n.throttle-tabs__tab:hover { color: var(--throttle-color-foreground); }\n.throttle-tabs__tab--active { color: var(--throttle-color-foreground); border-bottom-color: var(--throttle-color-primary); }\n.throttle-tabs__panel { padding-top: var(--throttle-space-4); }\n\n/* Paints its own ground. A UserButton in a navbar should stay transparent, but\n the dashboard is a large surface of themed text: in dark theme its foreground\n is near-white, so on a light host page it was rendering white-on-white. */\n.throttle-cardframe { width: 100%; min-height: 420px; border: 0; display: block; }\n.throttle-centre { display: flex; align-items: center; justify-content: center; min-height: 160px; }\n.throttle-account-root { container-type: inline-size; background: var(--throttle-color-account-surface); color: var(--throttle-color-foreground); padding: var(--throttle-account-padding); }\n.throttle-account { display: flex; gap: var(--throttle-space-5); align-items: flex-start; }\n.throttle-account__content { flex: 1; min-width: 0; }\n.throttle-tabs__rail { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; }\n.throttle-tabs__railitem {\n font: inherit;\n font-size: var(--throttle-font-size-sm);\n display: flex;\n align-items: center;\n gap: var(--throttle-space-3);\n width: 100%;\n text-align: left;\n background: none;\n border: none;\n border-radius: var(--throttle-radius-sm);\n padding: 0 var(--throttle-space-3);\n min-height: var(--throttle-control-height);\n color: var(--throttle-color-muted-foreground);\n cursor: pointer;\n transition: background var(--throttle-transition), color var(--throttle-transition);\n}\n.throttle-tabs__railitem:hover { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); }\n.throttle-tabs__railitem:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-tabs__tab:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-tabs__railitem--active { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); font-weight: 500; }\n.throttle-tabs__railicon { flex: none; opacity: .75; }\n\n/* A CONTAINER query, not a viewport one: these components render inside a\n merchant's page, so the viewport says nothing about how much room the\n dashboard actually has \u2014 it could sit in a 400px column on a 1920px screen.\n Below ~560px of container the rail becomes a full-width list above the\n panel: all seven still visible, each still a 44px target. */\n@container (max-width: 560px) {\n /* align-items: flex-start is right in row direction and wrong in column \u2014\n it shrinks the rail to its content width, so width:100% alone cannot make\n it span. Stretch it explicitly when stacked. */\n .throttle-account { flex-direction: column; align-items: stretch; gap: var(--throttle-space-4); }\n .throttle-tabs__rail { width: 100%; }\n}\n\n.throttle-table { width: 100%; border-collapse: collapse; text-align: left; }\n.throttle-table__head { color: var(--throttle-color-muted-foreground); font-weight: 500; font-size: var(--throttle-font-size-sm); }\n.throttle-table__row { border-top: var(--throttle-border-width) solid var(--throttle-color-border); cursor: pointer; transition: background-color var(--throttle-transition); }\n.throttle-table__row:hover { background: var(--throttle-color-surface); }\n.throttle-table__row:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-table__cell { padding: var(--throttle-space-3) var(--throttle-space-2); height: 56px; box-sizing: border-box; }\n.throttle-table__scroll { overflow-x: auto; }\n\n.throttle-empty { text-align: center; padding: var(--throttle-space-6) var(--throttle-space-4); }\n.throttle-empty__title { font-weight: 600; margin: 0 0 var(--throttle-space-1); }\n.throttle-empty__description { color: var(--throttle-color-muted-foreground); margin: 0; }\n\n.throttle-avatar {\n display: inline-flex; align-items: center; justify-content: center;\n width: 32px; height: 32px; border-radius: var(--throttle-radius-full);\n background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground);\n font-size: var(--throttle-font-size-xs); font-weight: 600; text-transform: uppercase;\n}\n\n.throttle-badge {\n display: inline-block; font-size: var(--throttle-font-size-xs); font-weight: 500;\n padding: 2px var(--throttle-space-2); border-radius: var(--throttle-radius-full);\n background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground);\n}\n.throttle-badge--muted { background: none; border: var(--throttle-border-width) solid var(--throttle-color-border); color: var(--throttle-color-muted-foreground); font-weight: 400; padding: 1px calc(var(--throttle-space-2) - 1px); }\n.throttle-badge--success { background: color-mix(in srgb, var(--throttle-color-success) 15%, transparent); color: var(--throttle-color-success); }\n.throttle-badge--warning { background: color-mix(in srgb, var(--throttle-color-warning) 15%, transparent); color: var(--throttle-color-warning); }\n.throttle-badge--danger { background: color-mix(in srgb, var(--throttle-color-danger) 15%, transparent); color: var(--throttle-color-danger); }\n\n.throttle-stack { display: flex; flex-direction: column; gap: var(--throttle-space-3); }\n.throttle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2); flex-wrap: wrap; }\n.throttle-muted { color: var(--throttle-color-muted-foreground); }\n.throttle-banner {\n display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n background: color-mix(in srgb, var(--throttle-color-warning) 12%, transparent);\n color: var(--throttle-color-warning);\n border-radius: var(--throttle-radius-sm);\n padding: var(--throttle-space-3);\n margin-bottom: var(--throttle-space-4);\n}\n.throttle-panel { display: flex; flex-direction: column; gap: var(--throttle-space-4); }\n/* 100dvh, not 100vh: on mobile browsers 100vh includes the space behind the\n dynamic address/toolbar, so the page would be taller than the visible\n viewport and the card would sit off-centre until the toolbar collapsed. */\n.throttle-page {\n min-height: 100dvh;\n width: 100%;\n background: var(--throttle-color-surface);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--throttle-space-5);\n padding: var(--throttle-space-5);\n}\n.throttle-page__logo { display: flex; justify-content: center; }\n.throttle-page__footer { color: var(--throttle-color-muted-foreground); text-align: center; font-size: var(--throttle-font-size-sm); }\n.throttle-listitem {\n display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius-sm);\n padding: var(--throttle-space-3);\n}\n/* 'rows' variant: hairline rules between items instead of each item carrying\n its own border+radius, so a panel does not read as a card inside a card. */\n.throttle-rows { display: flex; flex-direction: column; }\n.throttle-rowitem {\n display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n border-top: var(--throttle-border-width) solid var(--throttle-color-border);\n padding: var(--throttle-space-3) 0;\n}\n.throttle-rowitem:first-child { border-top: none; padding-top: 0; }\n.throttle-actions { display: flex; gap: var(--throttle-space-2); flex-wrap: wrap; }\n.throttle-table__money { display: block; text-align: right; font-variant-numeric: tabular-nums; }\n.throttle-lineitem { display: flex; align-items: center; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }\n.throttle-lineitem__image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--throttle-radius-sm); flex: none; }\n.throttle-totals { display: flex; flex-direction: column; gap: var(--throttle-space-1); }\n\n@media (prefers-reduced-motion: reduce) {\n .throttle-button, .throttle-field__input, .throttle-dropdown__item, .throttle-dropdown__trigger, .throttle-tabs__tab, .throttle-table__row, .throttle-modal__close {\n transition: none;\n }\n}\n";
489
+ declare const THROTTLE_STYLES = "\n.throttle-root {\n --throttle-color-primary: #18181b;\n --throttle-color-primary-foreground: #ffffff;\n --throttle-color-background: #ffffff;\n --throttle-color-surface: #f8fafc;\n --throttle-color-foreground: #0e1116;\n --throttle-color-muted: #eceef2;\n --throttle-color-muted-foreground: #5b6472;\n --throttle-color-border: #e2e8f0;\n /* The boundary of an INTERACTIVE control, which WCAG 1.4.11 requires to\n reach 3:1 against its adjacent colour \u2014 an input identified only by a\n 1.23:1 hairline is not identifiable at all. Decorative separators (card\n edges, table rules, dividers) keep --throttle-color-border: they do not\n identify a control, so the requirement does not apply and darkening\n them would only add noise. */\n /* The account dashboard paints nothing by default so it can drop into a\n merchant's page without fighting their background. The accountSurface and\n accountPadding appearance variables opt back into a card.\n No backticks in this comment: the sheet is a TS template literal. */\n --throttle-card-width: 400px;\n --throttle-color-account-surface: transparent;\n --throttle-account-padding: 0;\n --throttle-color-border-control: #8b93a1;\n --throttle-color-danger: #c2321f;\n --throttle-color-danger-surface: #fef2f2;\n --throttle-color-danger-border: #fecaca;\n --throttle-color-success: #127a4a;\n --throttle-color-success-surface: #ecfdf5;\n --throttle-color-success-border: #a7f3d0;\n --throttle-color-warning: #92400e;\n --throttle-color-warning-surface: #fffbeb;\n --throttle-color-warning-border: #fde68a;\n --throttle-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n --throttle-font-size: 16px;\n --throttle-font-size-xs: 12px;\n --throttle-font-size-sm: 14px;\n --throttle-font-size-lg: 20px;\n --throttle-font-size-xl: 24px;\n --throttle-line-height: 1.5;\n --throttle-line-height-tight: 1.25;\n --throttle-radius: 12px;\n --throttle-radius-sm: 8px;\n --throttle-radius-full: 999px;\n --throttle-border-width: 1px;\n --throttle-spacing: 8px;\n --throttle-space-1: 4px;\n --throttle-space-2: var(--throttle-spacing);\n --throttle-space-3: 12px;\n --throttle-space-4: 16px;\n --throttle-space-5: 24px;\n --throttle-space-6: 32px;\n --throttle-control-height: 48px;\n --throttle-control-padding-x: 16px;\n --throttle-shadow-card: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);\n --throttle-shadow-popover: 0 10px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);\n --throttle-transition: 150ms cubic-bezier(.2,0,.2,1);\n --throttle-z-modal: 2147483000;\n --throttle-z-popover: 2147482000;\n font-family: var(--throttle-font-family);\n font-size: var(--throttle-font-size);\n line-height: var(--throttle-line-height);\n color: var(--throttle-color-foreground);\n box-sizing: border-box;\n}\n.throttle-root *, .throttle-root *::before, .throttle-root *::after { box-sizing: inherit; }\n\n.throttle-root[data-throttle-theme=\"dark\"] {\n --throttle-color-primary: #e6edf3;\n --throttle-color-primary-foreground: #0d1117;\n --throttle-color-background: #0d1117;\n --throttle-color-surface: #1c2129;\n --throttle-color-foreground: #e6edf3;\n --throttle-color-muted: #21262d;\n --throttle-color-muted-foreground: #9aa4b2;\n --throttle-color-border: #30363d;\n --throttle-color-border-control: #5c6570;\n --throttle-color-danger: #ff6b58;\n --throttle-color-danger-surface: #2a1513;\n --throttle-color-danger-border: #5c2b25;\n --throttle-color-success: #45c08a;\n --throttle-color-success-surface: #0f2419;\n --throttle-color-success-border: #1f4d36;\n --throttle-color-warning: #e0a53a;\n --throttle-color-warning-surface: #2a2113;\n --throttle-color-warning-border: #5c4a25;\n --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);\n --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);\n}\n@media (prefers-color-scheme: dark) {\n .throttle-root[data-throttle-theme=\"auto\"] {\n --throttle-color-primary: #e6edf3;\n --throttle-color-primary-foreground: #0d1117;\n --throttle-color-background: #0d1117;\n --throttle-color-surface: #1c2129;\n --throttle-color-foreground: #e6edf3;\n --throttle-color-muted: #21262d;\n --throttle-color-muted-foreground: #9aa4b2;\n --throttle-color-border: #30363d;\n --throttle-color-border-control: #5c6570;\n --throttle-color-danger: #ff6b58;\n --throttle-color-danger-surface: #2a1513;\n --throttle-color-danger-border: #5c2b25;\n --throttle-color-success: #45c08a;\n --throttle-color-success-surface: #0f2419;\n --throttle-color-success-border: #1f4d36;\n --throttle-color-warning: #e0a53a;\n --throttle-color-warning-surface: #2a2113;\n --throttle-color-warning-border: #5c4a25;\n --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);\n --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);\n }\n}\n\n.throttle-card {\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-card);\n padding: var(--throttle-space-5);\n width: 100%;\n max-width: var(--throttle-card-width);\n margin-inline: auto;\n}\n/* Inside a Modal the dialog already provides the surface \u2014 background, radius\n and elevation. A card that draws its own on top is the \"box inside a box\":\n two shadowed rounded rectangles nested, with the card's max-width stranding\n it in the middle of a much wider dialog. */\n.throttle-card--bare { border: none; box-shadow: none; background: none; max-width: none; }\n.throttle-card__header { margin-bottom: var(--throttle-space-4); }\n.throttle-card__header--branded { text-align: center; }\n.throttle-card__logo { display: flex; justify-content: center; margin-bottom: var(--throttle-space-3); }\n.throttle-card__title { font-size: var(--throttle-font-size-xl); line-height: var(--throttle-line-height-tight); font-weight: 600; letter-spacing: -0.02em; margin: 0; }\n.throttle-card__title--branded { font-size: var(--throttle-font-size-xl); }\n.throttle-card__description { color: var(--throttle-color-muted-foreground); margin: var(--throttle-space-1) 0 0; }\n.throttle-card__body { display: flex; flex-direction: column; gap: var(--throttle-space-3); }\n.throttle-card__footer { margin-top: var(--throttle-space-4); text-align: center; }\n.throttle-card__footer--ruled { border-top: var(--throttle-border-width) solid var(--throttle-color-border); padding-top: var(--throttle-space-4); }\n\n.throttle-field { display: flex; flex-direction: column; gap: var(--throttle-space-1); }\n.throttle-field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--throttle-space-2); }\n.throttle-field__label { font-weight: 500; }\n.throttle-field__input {\n font: inherit;\n font-size: var(--throttle-font-size);\n color: var(--throttle-color-foreground);\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border-control);\n border-radius: var(--throttle-radius-sm);\n /* padding-block stays 0 so min-height alone owns the height, exactly as\n .throttle-button does. With 12px vertical padding the box computed to\n 50px against the button's 48px \u2014 a 2px mismatch, measured in a browser\n across 19 controls. An input element centres its own text vertically. */\n padding-block: 0;\n padding-inline: var(--throttle-control-padding-x);\n min-height: var(--throttle-control-height);\n width: 100%;\n transition: border-color var(--throttle-transition), box-shadow var(--throttle-transition);\n}\n.throttle-field__input:focus-visible {\n outline: none;\n border-color: var(--throttle-color-primary);\n box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary);\n}\n.throttle-field__input:disabled { background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground); cursor: not-allowed; }\n.throttle-field__input::placeholder { color: var(--throttle-color-muted-foreground); opacity: 1; }\n.throttle-field__input--grouped { border: none; border-radius: 0; padding-inline: 0; }\n.throttle-field__hint { color: var(--throttle-color-muted-foreground); font-size: var(--throttle-font-size-xs); }\n/* Always mounted, so it reserves its line whether or not there is an error:\n an error appearing on submit must not push the submit button out from\n under the buyer's pointer. */\n.throttle-field__error { color: var(--throttle-color-danger); font-size: var(--throttle-font-size-xs); line-height: 1rem; }\n/* Reserved a full line under EVERY input even with nothing to say, which\n with the stack gap put 28px of dead space beneath each field, on every\n form and all seven account panels. The element stays mounted when empty\n because role=alert only announces changes to a live region that was\n already there; it just stops occupying a line. */\n.throttle-field__error:empty { display: none; }\n\n.throttle-field-group {\n display: flex;\n flex-direction: column;\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius-sm);\n overflow: hidden;\n}\n.throttle-field-group__item { padding: var(--throttle-space-3) var(--throttle-control-padding-x); }\n.throttle-field-group__divider { height: var(--throttle-border-width); background: var(--throttle-color-border); }\n.throttle-field-group__forgot { margin-left: auto; }\n\n.throttle-button {\n font: inherit;\n font-weight: 500;\n border-radius: var(--throttle-radius-sm);\n border: var(--throttle-border-width) solid transparent;\n padding-inline: var(--throttle-control-padding-x);\n padding-block: 0;\n min-height: var(--throttle-control-height);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: opacity var(--throttle-transition), background-color var(--throttle-transition), border-color var(--throttle-transition), filter var(--throttle-transition), box-shadow var(--throttle-transition);\n}\n.throttle-button:disabled { opacity: .55; cursor: not-allowed; }\n.throttle-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary); }\n.throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: 100%; }\n.throttle-button--primary:hover:not(:disabled) { filter: brightness(0.92); }\n.throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border-control); }\n.throttle-button--secondary:hover:not(:disabled) { background: var(--throttle-color-muted); }\n.throttle-button--danger { background: transparent; color: var(--throttle-color-danger); border-color: var(--throttle-color-border); }\n.throttle-button--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--throttle-color-danger) 10%, transparent); }\n/* Link-style actions are the rows panel default, and they carry Delete,\n Remove, Cancel and Sign out. Zero padding with min-height 0 made those\n roughly 20px tall and ~8px apart \u2014 a mis-tap on a phone lands on something\n irreversible. The target is expanded with vertical padding and pulled back\n with an equal negative margin, so the hit box clears 44px while the text\n sits exactly where it did. Collapsing this back to zero padding shrinks the\n target again. */\n.throttle-button--link { background: none; border: none; color: var(--throttle-color-primary); padding-inline: 0; padding-block: var(--throttle-space-3); margin-block: calc(var(--throttle-space-3) * -1); min-height: 0; text-decoration: underline; width: auto; }\n.throttle-button--link:hover:not(:disabled) { opacity: .8; }\n.throttle-button--linkDanger { background: none; border: none; color: var(--throttle-color-danger); padding-inline: 0; padding-block: var(--throttle-space-3); margin-block: calc(var(--throttle-space-3) * -1); min-height: 0; text-decoration: underline; width: auto; }\n.throttle-button--linkDanger:hover:not(:disabled) { opacity: .8; }\n.throttle-button--xs { font-size: var(--throttle-font-size-xs); }\n\n.throttle-alert { border-radius: var(--throttle-radius-sm); padding: var(--throttle-space-3); font-size: var(--throttle-font-size-sm); }\n.throttle-alert--error { background: var(--throttle-color-danger-surface); border: var(--throttle-border-width) solid var(--throttle-color-danger-border); color: var(--throttle-color-danger); }\n.throttle-alert--success { background: var(--throttle-color-success-surface); border: var(--throttle-border-width) solid var(--throttle-color-success-border); color: var(--throttle-color-success); }\n.throttle-alert--info { background: var(--throttle-color-surface); color: var(--throttle-color-muted-foreground); }\n\n.throttle-spinner {\n display: inline-block; width: 1em; height: 1em;\n border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;\n animation: throttle-spin 700ms linear infinite;\n}\n@keyframes throttle-spin { to { transform: rotate(360deg); } }\n.throttle-button--loading { position: relative; }\n.throttle-button__label { display: inline-flex; align-items: center; justify-content: center; gap: var(--throttle-space-2); }\n.throttle-button__label--hidden { visibility: hidden; }\n.throttle-spinner--centred { position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.5em; }\n\n@media (prefers-reduced-motion: reduce) { .throttle-spinner { animation-duration: 2.4s; } }\n\n.throttle-skeleton {\n background: var(--throttle-color-muted);\n border-radius: var(--throttle-radius-sm);\n animation: throttle-pulse 1.4s ease-in-out infinite; height: 2.5em; }\n@keyframes throttle-pulse { 50% { opacity: .5; } }\n@media (prefers-reduced-motion: reduce) { .throttle-skeleton { animation: none; } }\n\n.throttle-modal__overlay {\n position: fixed; inset: 0; z-index: var(--throttle-z-modal);\n background: rgba(14,17,22,.45);\n display: flex; align-items: center; justify-content: center;\n padding: var(--throttle-space-4);\n overflow-y: auto;\n}\n.throttle-modal__container {\n background: var(--throttle-color-background);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-popover);\n max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto;\n position: relative;\n}\n/* After the base rule on purpose: both are single-class, so equal specificity\n means source order decides. Declared before it, this silently lost. */\n.throttle-modal__container--compact { max-width: 440px; }\n.throttle-modal__close {\n position: absolute; top: var(--throttle-space-3); right: var(--throttle-space-3);\n background: none; border: none; cursor: pointer; font-size: var(--throttle-font-size-lg);\n color: var(--throttle-color-muted-foreground);\n transition: color var(--throttle-transition);\n}\n.throttle-modal__close:hover { color: var(--throttle-color-foreground); }\n.throttle-modal__header { padding: var(--throttle-space-4) var(--throttle-space-4) 0; }\n.throttle-modal__title { font-size: var(--throttle-font-size-lg); line-height: var(--throttle-line-height-tight); font-weight: 600; margin: 0; }\n.throttle-modal__body { padding: var(--throttle-space-4); }\n\n.throttle-dropdown__trigger { background: none; border: none; cursor: pointer; padding: 0; border-radius: var(--throttle-radius-full); transition: background-color var(--throttle-transition); }\n.throttle-dropdown__trigger:hover { background: var(--throttle-color-surface); }\n.throttle-dropdown__trigger:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: 2px; }\n.throttle-dropdown__menu {\n position: absolute; right: 0; top: calc(100% + var(--throttle-space-2));\n z-index: var(--throttle-z-popover);\n min-width: 260px;\n background: var(--throttle-color-background);\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius);\n box-shadow: var(--throttle-shadow-popover);\n padding: var(--throttle-space-1);\n}\n.throttle-dropdown__item {\n display: flex; align-items: center; gap: var(--throttle-space-2);\n width: 100%; text-align: left; font: inherit; color: inherit;\n background: none; border: none; cursor: pointer;\n padding: var(--throttle-space-3);\n border-radius: var(--throttle-radius-sm);\n text-decoration: none;\n transition: background-color var(--throttle-transition);\n}\n.throttle-dropdown__item:hover { background: var(--throttle-color-surface); }\n.throttle-dropdown__item:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-dropdown__separator { height: 1px; background: var(--throttle-color-border); margin: var(--throttle-space-1) 0; border: 0; }\n\n.throttle-tabs__list {\n display: flex; gap: var(--throttle-space-1);\n border-bottom: var(--throttle-border-width) solid var(--throttle-color-border);\n overflow-x: auto; scrollbar-width: thin;\n}\n.throttle-tabs__tab {\n font: inherit; background: none; border: none; cursor: pointer; white-space: nowrap;\n padding: var(--throttle-space-3);\n color: var(--throttle-color-muted-foreground);\n border-bottom: 2px solid transparent;\n transition: color var(--throttle-transition), border-color var(--throttle-transition);\n}\n.throttle-tabs__tab:hover { color: var(--throttle-color-foreground); }\n.throttle-tabs__tab--active { color: var(--throttle-color-foreground); border-bottom-color: var(--throttle-color-primary); }\n.throttle-tabs__panel { padding-top: var(--throttle-space-4); }\n\n/* Paints its own ground. A UserButton in a navbar should stay transparent, but\n the dashboard is a large surface of themed text: in dark theme its foreground\n is near-white, so on a light host page it was rendering white-on-white. */\n.throttle-cardframe { width: 100%; min-height: 420px; border: 0; display: block; }\n.throttle-centre { display: flex; align-items: center; justify-content: center; min-height: 160px; }\n.throttle-section__title { font-size: var(--throttle-font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--throttle-color-muted-foreground); margin: 0 0 var(--throttle-space-2); font-weight: 600; }\n.throttle-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-5); }\n.throttle-addressblock__line { margin: 0 0 2px; }\n.throttle-timeline { display: flex; flex-direction: column; gap: var(--throttle-space-2); }\n.throttle-timeline__row { display: flex; align-items: center; gap: var(--throttle-space-2); }\n.throttle-timeline__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--throttle-color-border-control); flex: none; }\n.throttle-timeline__label { flex: 1; }\n.throttle-account-root { container-type: inline-size; background: var(--throttle-color-account-surface); color: var(--throttle-color-foreground); padding: var(--throttle-account-padding); }\n.throttle-account { display: flex; gap: var(--throttle-space-5); align-items: flex-start; }\n.throttle-account__content { flex: 1; min-width: 0; }\n.throttle-tabs__rail { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; }\n.throttle-tabs__railitem {\n font: inherit;\n font-size: var(--throttle-font-size-sm);\n display: flex;\n align-items: center;\n gap: var(--throttle-space-3);\n width: 100%;\n text-align: left;\n background: none;\n border: none;\n border-radius: var(--throttle-radius-sm);\n padding: 0 var(--throttle-space-3);\n min-height: var(--throttle-control-height);\n color: var(--throttle-color-muted-foreground);\n cursor: pointer;\n transition: background var(--throttle-transition), color var(--throttle-transition);\n}\n.throttle-tabs__railitem:hover { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); }\n.throttle-tabs__railitem:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-tabs__tab:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-tabs__railitem--active { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); font-weight: 500; }\n.throttle-tabs__railicon { flex: none; opacity: .75; }\n\n/* A CONTAINER query, not a viewport one: these components render inside a\n merchant's page, so the viewport says nothing about how much room the\n dashboard actually has \u2014 it could sit in a 400px column on a 1920px screen.\n Below ~560px of container the rail becomes a full-width list above the\n panel: all seven still visible, each still a 44px target. */\n@container (max-width: 560px) {\n /* align-items: flex-start is right in row direction and wrong in column \u2014\n it shrinks the rail to its content width, so width:100% alone cannot make\n it span. Stretch it explicitly when stacked. */\n .throttle-account { flex-direction: column; align-items: stretch; gap: var(--throttle-space-4); }\n .throttle-addresses { grid-template-columns: 1fr; }\n .throttle-tabs__rail { width: 100%; }\n}\n\n.throttle-table { width: 100%; border-collapse: collapse; text-align: left; }\n.throttle-table__head { color: var(--throttle-color-muted-foreground); font-weight: 500; font-size: var(--throttle-font-size-sm); }\n.throttle-table__row { border-top: var(--throttle-border-width) solid var(--throttle-color-border); cursor: pointer; transition: background-color var(--throttle-transition); }\n.throttle-table__row:hover { background: var(--throttle-color-surface); }\n.throttle-table__row:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }\n.throttle-table__cell { padding: var(--throttle-space-3) var(--throttle-space-2); height: 56px; box-sizing: border-box; }\n.throttle-table__scroll { overflow-x: auto; }\n\n.throttle-empty { text-align: center; padding: var(--throttle-space-6) var(--throttle-space-4); }\n.throttle-empty__title { font-weight: 600; margin: 0 0 var(--throttle-space-1); }\n.throttle-empty__description { color: var(--throttle-color-muted-foreground); margin: 0; }\n\n.throttle-avatar {\n display: inline-flex; align-items: center; justify-content: center;\n width: 32px; height: 32px; border-radius: var(--throttle-radius-full);\n background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground);\n font-size: var(--throttle-font-size-xs); font-weight: 600; text-transform: uppercase;\n}\n\n.throttle-badge {\n display: inline-block; font-size: var(--throttle-font-size-xs); font-weight: 500;\n padding: 2px var(--throttle-space-2); border-radius: var(--throttle-radius-full);\n background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground);\n}\n.throttle-badge--muted { background: none; border: var(--throttle-border-width) solid var(--throttle-color-border); color: var(--throttle-color-muted-foreground); font-weight: 400; padding: 1px calc(var(--throttle-space-2) - 1px); }\n.throttle-badge--success { background: color-mix(in srgb, var(--throttle-color-success) 15%, transparent); color: var(--throttle-color-success); }\n.throttle-badge--warning { background: color-mix(in srgb, var(--throttle-color-warning) 15%, transparent); color: var(--throttle-color-warning); }\n.throttle-badge--danger { background: color-mix(in srgb, var(--throttle-color-danger) 15%, transparent); color: var(--throttle-color-danger); }\n\n.throttle-stack { display: flex; flex-direction: column; gap: var(--throttle-space-3); }\n.throttle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2); flex-wrap: wrap; }\n.throttle-muted { color: var(--throttle-color-muted-foreground); }\n.throttle-banner {\n display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n background: color-mix(in srgb, var(--throttle-color-warning) 12%, transparent);\n color: var(--throttle-color-warning);\n border-radius: var(--throttle-radius-sm);\n padding: var(--throttle-space-3);\n margin-bottom: var(--throttle-space-4);\n}\n.throttle-panel { display: flex; flex-direction: column; gap: var(--throttle-space-4); }\n/* 100dvh, not 100vh: on mobile browsers 100vh includes the space behind the\n dynamic address/toolbar, so the page would be taller than the visible\n viewport and the card would sit off-centre until the toolbar collapsed. */\n.throttle-page {\n min-height: 100dvh;\n width: 100%;\n background: var(--throttle-color-surface);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--throttle-space-5);\n padding: var(--throttle-space-5);\n}\n.throttle-page__logo { display: flex; justify-content: center; }\n.throttle-page__footer { color: var(--throttle-color-muted-foreground); text-align: center; font-size: var(--throttle-font-size-sm); }\n.throttle-listitem {\n display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius-sm);\n padding: var(--throttle-space-3);\n}\n/* 'rows' variant: hairline rules between items instead of each item carrying\n its own border+radius, so a panel does not read as a card inside a card. */\n.throttle-rows { display: flex; flex-direction: column; }\n.throttle-rowitem {\n display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);\n flex-wrap: wrap;\n border-top: var(--throttle-border-width) solid var(--throttle-color-border);\n padding: var(--throttle-space-3) 0;\n}\n.throttle-rowitem:first-child { border-top: none; padding-top: 0; }\n.throttle-actions { display: flex; gap: var(--throttle-space-2); flex-wrap: wrap; }\n.throttle-table__money { display: block; text-align: right; font-variant-numeric: tabular-nums; }\n.throttle-lineitem { display: flex; align-items: center; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }\n.throttle-lineitem__image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--throttle-radius-sm); flex: none; }\n.throttle-totals { display: flex; flex-direction: column; gap: var(--throttle-space-1); }\n\n@media (prefers-reduced-motion: reduce) {\n .throttle-button, .throttle-field__input, .throttle-dropdown__item, .throttle-dropdown__trigger, .throttle-tabs__tab, .throttle-table__row, .throttle-modal__close {\n transition: none;\n }\n}\n";
446
490
 
447
491
  /**
448
492
  * The only place minor units become major units. Every amount on the wire is
@@ -689,17 +733,19 @@ declare function AddCardDialog(props: {
689
733
  localization?: ThrottleLocalization;
690
734
  }): react_jsx_runtime.JSX.Element | null;
691
735
 
692
- declare function OrdersPanel(props: {
693
- appearance?: ThrottleAppearance;
694
- localization?: ThrottleLocalization;
695
- variant?: AccountPanelVariant;
696
- onViewSubscription?(id: string): void;
697
- }): react_jsx_runtime.JSX.Element;
698
-
699
736
  declare function OrderDetail(props: {
700
737
  orderId: string;
701
738
  onBack?(): void;
702
739
  onViewSubscription?(id: string): void;
740
+ /**
741
+ * Status-dependent actions. Each renders ONLY when its handler is supplied,
742
+ * because the buyer plane has no commerce writes: a built-in Cancel or Track
743
+ * button would be a control that always fails. The merchant owns the
744
+ * behaviour, the component owns when it is offered.
745
+ */
746
+ onPayNow?(order: OrderActionTarget): void;
747
+ onReorder?(order: OrderActionTarget): void;
748
+ onTrackShipment?(order: OrderActionTarget): void;
703
749
  appearance?: ThrottleAppearance;
704
750
  localization?: ThrottleLocalization;
705
751
  }): react_jsx_runtime.JSX.Element;