@usethrottle/auth 0.11.0 → 0.12.1

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 (68) hide show
  1. package/README.md +52 -0
  2. package/dist/AccountDashboard-V63ghvjY.d.ts +90 -0
  3. package/dist/AccountModal-KA54WUFW.js +13 -0
  4. package/dist/AccountModal-KA54WUFW.js.map +1 -0
  5. package/dist/AccountModal-pIMgledL.d.ts +141 -0
  6. package/dist/AuthModal-T2GYI6ZF.js +13 -0
  7. package/dist/AuthModal-T2GYI6ZF.js.map +1 -0
  8. package/dist/SignUpPage-BJcMUb2V.d.ts +160 -0
  9. package/dist/chunk-3B4DNX5T.js +2 -0
  10. package/dist/chunk-3B4DNX5T.js.map +1 -0
  11. package/dist/chunk-5EUZYJJL.js +29 -0
  12. package/dist/chunk-5EUZYJJL.js.map +1 -0
  13. package/dist/chunk-6WN3J5MM.js +2075 -0
  14. package/dist/chunk-6WN3J5MM.js.map +1 -0
  15. package/dist/chunk-CUNMJ2PH.js +1320 -0
  16. package/dist/chunk-CUNMJ2PH.js.map +1 -0
  17. package/dist/chunk-ETYOOYYV.js +2 -0
  18. package/dist/chunk-ETYOOYYV.js.map +1 -0
  19. package/dist/chunk-JSDZMPCV.js +520 -0
  20. package/dist/chunk-JSDZMPCV.js.map +1 -0
  21. package/dist/chunk-QPVS6JXP.js +39 -0
  22. package/dist/chunk-QPVS6JXP.js.map +1 -0
  23. package/dist/chunk-RCNUWITB.js +747 -0
  24. package/dist/chunk-RCNUWITB.js.map +1 -0
  25. package/dist/{chunk-YY6YATXT.js → chunk-TDQC3LMQ.js} +17 -3
  26. package/dist/chunk-TDQC3LMQ.js.map +1 -0
  27. package/dist/{chunk-EFMKBOTL.js → chunk-UFGW76AZ.js} +2 -2
  28. package/dist/chunk-VDK23T6L.js +230 -0
  29. package/dist/chunk-VDK23T6L.js.map +1 -0
  30. package/dist/chunk-X6D35EAX.js +19 -0
  31. package/dist/chunk-X6D35EAX.js.map +1 -0
  32. package/dist/client-7LVKfuXO.d.ts +319 -0
  33. package/dist/hooks-DkpLrEiC.d.ts +148 -0
  34. package/dist/index.cjs +16 -2
  35. package/dist/index.cjs.map +1 -1
  36. package/dist/index.d.cts +34 -3
  37. package/dist/index.d.ts +34 -3
  38. package/dist/index.js +16 -2
  39. package/dist/index.js.map +1 -1
  40. package/dist/localization-SnIAZXJn.d.ts +389 -0
  41. package/dist/react/components/account/index.d.ts +37 -0
  42. package/dist/react/components/account/index.js +44 -0
  43. package/dist/react/components/account/index.js.map +1 -0
  44. package/dist/react/components/auth/index.d.ts +17 -0
  45. package/dist/react/components/auth/index.js +40 -0
  46. package/dist/react/components/auth/index.js.map +1 -0
  47. package/dist/react/components/guards.d.ts +21 -0
  48. package/dist/react/components/guards.js +13 -0
  49. package/dist/react/components/guards.js.map +1 -0
  50. package/dist/react/components/index.cjs +3561 -2805
  51. package/dist/react/components/index.cjs.map +1 -1
  52. package/dist/react/components/index.d.cts +14 -2
  53. package/dist/react/components/index.d.ts +14 -821
  54. package/dist/react/components/index.js +90 -4680
  55. package/dist/react/components/index.js.map +1 -1
  56. package/dist/react/components/provider.d.ts +79 -0
  57. package/dist/react/components/provider.js +18 -0
  58. package/dist/react/components/provider.js.map +1 -0
  59. package/dist/react/forms/index.js +1 -1
  60. package/dist/react/index.cjs +16 -2
  61. package/dist/react/index.cjs.map +1 -1
  62. package/dist/react/index.d.cts +34 -3
  63. package/dist/react/index.d.ts +5 -433
  64. package/dist/react/index.js +3 -2
  65. package/dist/styles.css +7 -4
  66. package/package.json +4 -1
  67. package/dist/chunk-YY6YATXT.js.map +0 -1
  68. /package/dist/{chunk-EFMKBOTL.js.map → chunk-UFGW76AZ.js.map} +0 -0
@@ -1,520 +1,16 @@
1
+ export { ThrottleProvider, ThrottleProviderProps, UseThrottleResult, useThrottle } from './provider.js';
2
+ import { a as ThrottleAppearance, c as ThrottleLocalization } from '../../localization-SnIAZXJn.js';
3
+ export { T as THROTTLE_ELEMENT_KEYS, b as ThrottleElementKey, d as ThrottleSlots, e as ThrottleThemeName, f as ThrottleVariables, g as enUS } from '../../localization-SnIAZXJn.js';
4
+ export { A as AuthCardVariant, a as AuthFlow, b as AuthFlowProps, c as AuthModal, d as AuthModalProps, e as AuthView, F as ForgotPassword, f as ForgotPasswordProps, R as ResetPassword, g as ResetPasswordProps, S as SignIn, h as SignInButton, i as SignInButtonProps, j as SignInPage, k as SignInPageProps, l as SignInProps, m as SignOutButton, n as SignOutButtonProps, o as SignUp, p as SignUpButton, q as SignUpButtonProps, r as SignUpPage, s as SignUpPageProps, t as SignUpProps, V as VerifyEmail, u as VerifyEmailProps } from '../../SignUpPage-BJcMUb2V.js';
5
+ export { Protect, SignedIn, SignedOut } from './guards.js';
1
6
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ComponentType, ReactNode } from 'react';
3
- import { ThrottleAuthConfig, ThrottleAuth } from '../index.js';
4
- export { Address, AddressInput, AuthSnapshot, AuthStatus, AuthStorage, Customer, DeviceSession, Invoice, Order, Page, PaymentMethod, ProfilePatch, Resource, Session, Subscription, SubscriptionShippingAddress, ThrottleAccount, ThrottleAuthError, ThrottleAuthProvider, ThrottleAuthProviderProps, UseAuthResult, createAccount, createThrottleAuth, localStorageAdapter, memoryStorage, useAddresses, useAuth, useAuthContext, useCustomer, useInvoice, useInvoices, useOrder, useOrders, useSavedCards, useSubscriptions } from '../index.js';
5
-
6
- type ThrottleThemeName = 'light' | 'dark' | 'auto';
7
- declare const VARIABLE_PROPERTY: {
8
- readonly colorPrimary: "--throttle-color-primary";
9
- readonly colorPrimaryForeground: "--throttle-color-primary-foreground";
10
- readonly colorBackground: "--throttle-color-background";
11
- readonly colorSurface: "--throttle-color-surface";
12
- readonly colorForeground: "--throttle-color-foreground";
13
- readonly colorMuted: "--throttle-color-muted";
14
- readonly colorMutedForeground: "--throttle-color-muted-foreground";
15
- readonly colorBorder: "--throttle-color-border";
16
- readonly colorBorderControl: "--throttle-color-border-control";
17
- readonly colorDanger: "--throttle-color-danger";
18
- readonly colorDangerSurface: "--throttle-color-danger-surface";
19
- readonly colorDangerBorder: "--throttle-color-danger-border";
20
- readonly colorSuccess: "--throttle-color-success";
21
- readonly colorSuccessSurface: "--throttle-color-success-surface";
22
- readonly colorSuccessBorder: "--throttle-color-success-border";
23
- readonly colorWarning: "--throttle-color-warning";
24
- readonly colorWarningSurface: "--throttle-color-warning-surface";
25
- readonly colorWarningBorder: "--throttle-color-warning-border";
26
- readonly fontFamily: "--throttle-font-family";
27
- readonly fontSize: "--throttle-font-size";
28
- readonly borderRadius: "--throttle-radius";
29
- readonly borderWidth: "--throttle-border-width";
30
- readonly spacing: "--throttle-spacing";
31
- readonly cardWidth: "--throttle-card-width";
32
- readonly accountSurface: "--throttle-color-account-surface";
33
- readonly accountPadding: "--throttle-account-padding";
34
- readonly shadowCard: "--throttle-shadow-card";
35
- readonly shadowPopover: "--throttle-shadow-popover";
36
- readonly transition: "--throttle-transition";
37
- readonly zModal: "--throttle-z-modal";
38
- readonly zPopover: "--throttle-z-popover";
39
- };
40
- type ThrottleVariables = Partial<Record<keyof typeof VARIABLE_PROPERTY, string>>;
41
- /**
42
- * Every addressable part of every component. A merchant maps any of these to a
43
- * className through `appearance.elements`. The list is the API: adding a
44
- * rendered element without adding its key here ships something a merchant
45
- * cannot restyle, which the drift test in Task 15 catches.
46
- */
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", "orderDetail.layout", "orderDetail.main", "orderDetail.rail", "orderDetail.cancelButton", "orderDetail.returnButton", "orderDetail.invoiceButton", "orderDetail.subscriptionButton", "orderDetail.actions", "invoiceDetail.layout", "invoiceDetail.main", "invoiceDetail.rail", "invoiceDetail.lineItems", "invoiceDetail.lineItem", "invoiceDetail.orderLink", "invoiceDetail.subscriptionLink", "invoiceDetail.payButton", "invoiceDetail.actions", "fieldRow", "confirm.header", "confirm.title", "confirm.body", "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.changeAddressButton", "subscriptionsPanel.addressForm", "subscriptionsPanel.table", "subscriptionsPanel.row", "securityPanel.root", "securityPanel.passwordForm", "securityPanel.passwordButton", "securityPanel.sessionList", "securityPanel.sessionItem", "securityPanel.revokeButton", "securityPanel.revokeAllButton", "securityPanel.table", "securityPanel.row"];
48
- type ThrottleElementKey = (typeof THROTTLE_ELEMENT_KEYS)[number];
49
- interface ThrottleSlots {
50
- Spinner?: ComponentType<{
51
- className?: string;
52
- }>;
53
- Avatar?: ComponentType<{
54
- name: string;
55
- email: string;
56
- className?: string;
57
- }>;
58
- Alert?: ComponentType<{
59
- tone: 'error' | 'success' | 'info';
60
- children: ReactNode;
61
- className?: string;
62
- }>;
63
- EmptyState?: ComponentType<{
64
- title: string;
65
- description?: string;
66
- className?: string;
67
- }>;
68
- Button?: ComponentType<any>;
69
- }
70
- interface ThrottleAppearance {
71
- theme?: ThrottleThemeName;
72
- variables?: ThrottleVariables;
73
- elements?: Partial<Record<ThrottleElementKey, string>>;
74
- components?: ThrottleSlots;
75
- }
76
-
77
- declare const enUS: {
78
- locale: string;
79
- common: {
80
- save: string;
81
- cancel: string;
82
- delete: string;
83
- edit: string;
84
- back: string;
85
- retry: string;
86
- loading: string;
87
- close: string;
88
- confirm: string;
89
- keepIt: string;
90
- somethingWentWrong: string;
91
- actions: string;
92
- view: string;
93
- };
94
- signIn: {
95
- title: string;
96
- description: string;
97
- email: string;
98
- password: string;
99
- submitButton: string;
100
- forgotLink: string;
101
- switchPrompt: string;
102
- switchLink: string;
103
- };
104
- signUp: {
105
- title: string;
106
- description: string;
107
- email: string;
108
- password: string;
109
- submitButton: string;
110
- switchPrompt: string;
111
- switchLink: string;
112
- pendingNotice: string;
113
- };
114
- forgotPassword: {
115
- title: string;
116
- description: string;
117
- email: string;
118
- submitButton: string;
119
- sentNotice: string;
120
- backLink: string;
121
- };
122
- resetPassword: {
123
- title: string;
124
- password: string;
125
- submitButton: string;
126
- doneNotice: string;
127
- missingToken: string;
128
- };
129
- verifyEmail: {
130
- title: string;
131
- verifying: string;
132
- success: string;
133
- resendButton: string;
134
- resentNotice: string;
135
- instructions: string;
136
- };
137
- stepUp: {
138
- title: string;
139
- description: string;
140
- password: string;
141
- submitButton: string;
142
- cancelButton: string;
143
- };
144
- userButton: {
145
- manage: string;
146
- signOut: string;
147
- signOutAll: string;
148
- verified: string;
149
- unverified: string;
150
- openMenu: string;
151
- };
152
- verifyBanner: {
153
- message: string;
154
- resendButton: string;
155
- dismissButton: string;
156
- };
157
- account: {
158
- title: string;
159
- tabs: {
160
- profile: string;
161
- addresses: string;
162
- paymentMethods: string;
163
- orders: string;
164
- invoices: string;
165
- subscriptions: string;
166
- security: string;
167
- };
168
- };
169
- profile: {
170
- firstName: string;
171
- lastName: string;
172
- phone: string;
173
- company: string;
174
- acceptsMarketing: string;
175
- email: string;
176
- emailReadOnly: string;
177
- saveButton: string;
178
- savedNotice: string;
179
- };
180
- addresses: {
181
- addButton: string;
182
- defaultBadge: string;
183
- makeDefault: string;
184
- deleteConfirmAction: string;
185
- empty: string;
186
- emptyDescription: string;
187
- label: string;
188
- firstName: string;
189
- lastName: string;
190
- company: string;
191
- addressLine1: string;
192
- addressLine2: string;
193
- city: string;
194
- stateProvince: string;
195
- postalCode: string;
196
- countryCode: string;
197
- phone: string;
198
- deleteConfirm: string;
199
- columnAddress: string;
200
- };
201
- paymentMethods: {
202
- empty: string;
203
- emptyDescription: string;
204
- addButton: string;
205
- addTitle: string;
206
- gatedDescription: string;
207
- defaultBadge: string;
208
- makeDefault: string;
209
- expires: string;
210
- deleteConfirm: string;
211
- deleteConfirmAction: string;
212
- columnCard: string;
213
- };
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;
225
- cancelOrder: string;
226
- cancelOrderConfirm: string;
227
- cancelOrderBody: string;
228
- cancelOrderAction: string;
229
- requestReturn: string;
230
- requestReturnConfirm: string;
231
- requestReturnBody: string;
232
- requestReturnAction: string;
233
- returnRequested: string;
234
- downloadInvoice: string;
235
- summary: string;
236
- empty: string;
237
- emptyDescription: string;
238
- gatedDescription: string;
239
- number: string;
240
- date: string;
241
- status: string;
242
- total: string;
243
- /**
244
- * Display copy for `order.status`. Mirrors ORDER_STATUS_META in
245
- * `@commerce/orders`, which is the server's single source of status copy —
246
- * copied rather than imported because this package ships with no runtime
247
- * dependencies and is a client for the wire API, not for server packages.
248
- * If a status is added there, add it here.
249
- */
250
- statusLabels: {
251
- draft: string;
252
- pending: string;
253
- processing: string;
254
- partiallyFulfilled: string;
255
- fulfilled: string;
256
- cancelled: string;
257
- closed: string;
258
- };
259
- /**
260
- * The money half of the label, shown as a second badge beside the
261
- * lifecycle one. `captured` is deliberately empty: paid in full is the
262
- * assumed happy path, and announcing it on every settled order is noise.
263
- */
264
- paymentLabels: {
265
- pending: string;
266
- authorized: string;
267
- captured: string;
268
- partiallyPaid: string;
269
- partiallyRefunded: string;
270
- refunded: string;
271
- failed: string;
272
- voided: string;
273
- processing: string;
274
- disputed: string;
275
- expired: string;
276
- };
277
- items: string;
278
- subtotal: string;
279
- discount: string;
280
- shipping: string;
281
- tax: string;
282
- quantity: string;
283
- shippingAddress: string;
284
- billingAddress: string;
285
- viewSubscription: string;
286
- viewSubscriptionFor: string;
287
- };
288
- invoices: {
289
- empty: string;
290
- emptyDescription: string;
291
- gatedDescription: string;
292
- number: string;
293
- issued: string;
294
- due: string;
295
- status: string;
296
- total: string;
297
- refunded: string;
298
- period: string;
299
- downloadButton: string;
300
- items: string;
301
- summary: string;
302
- viewOrder: string;
303
- viewSubscription: string;
304
- payButton: string;
305
- billedTo: string;
306
- /** Shown when an invoice bills less than the order, matching the PDF. */
307
- orderTotal: string;
308
- amountPaid: string;
309
- waived: string;
310
- amountDue: string;
311
- balanceDue: string;
312
- /** Display copy for `invoice.status` — the wire values are paid|open|void. */
313
- statusLabels: {
314
- paid: string;
315
- open: string;
316
- void: string;
317
- };
318
- downloadUnavailable: string;
319
- };
320
- subscriptions: {
321
- cancelConfirmAction: string;
322
- pauseConfirm: string;
323
- resumeConfirm: string;
324
- cancelNowConfirm: string;
325
- empty: string;
326
- emptyDescription: string;
327
- gatedDescription: string;
328
- renewsOn: string;
329
- endsOn: string;
330
- cancelledOn: string;
331
- trialEnds: string;
332
- installmentProgress: string;
333
- installmentTotal: string;
334
- installmentNext: string;
335
- /** Spec §5: a varied schedule's dated list; dates are estimates, hence "~". */
336
- upcomingPayments: string;
337
- upcomingPayment: string;
338
- cancelButton: string;
339
- cancelAtPeriodEnd: string;
340
- cancelNow: string;
341
- pauseButton: string;
342
- resumeButton: string;
343
- /** A physical subscription's ship-to, and the control that changes it. */
344
- shipsTo: string;
345
- changeAddress: string;
346
- changeAddressTitle: string;
347
- changeAddressHint: string;
348
- cancelConfirm: string;
349
- cancelScheduled: string;
350
- columnPlan: string;
351
- columnPrice: string;
352
- columnRenews: string;
353
- columnStatus: string;
354
- /**
355
- * Display copy for `subscription.status`. Mirrors SubscriptionStatus in
356
- * `@commerce/subscriptions`; copied rather than imported because this
357
- * package has no runtime dependencies. Without it a buyer in dunning saw
358
- * the literal pill `past_due`. `completed` is an installment plan that
359
- * has taken its last payment.
360
- */
361
- statusLabels: {
362
- active: string;
363
- paused: string;
364
- cancelled: string;
365
- pastDue: string;
366
- trialing: string;
367
- unpaid: string;
368
- completed: string;
369
- };
370
- };
371
- security: {
372
- passwordTitle: string;
373
- newPassword: string;
374
- changeButton: string;
375
- changedNotice: string;
376
- sessionsTitle: string;
377
- thisDevice: string;
378
- lastActive: string;
379
- revokeButton: string;
380
- revokeAllButton: string;
381
- sessionsEmpty: string;
382
- columnDevice: string;
383
- };
384
- errors: Record<string, string>;
385
- };
386
- /** Every field optional, at every depth — a merchant overrides one string. */
387
- type ThrottleLocalization = DeepPartial<typeof enUS>;
388
- type DeepPartial<T> = {
389
- [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
390
- };
391
-
392
- /**
393
- * Composition of the list of records a panel renders. `'boxed'` is today's
394
- * shipped look (each item its own bordered box, outlined action buttons) and
395
- * must stay byte-for-byte identical to it. `'rows'` separates items with a
396
- * hairline instead, and renders actions as plain text — the motivation is
397
- * that the account dashboard is itself a bordered card, so a panel built from
398
- * bordered boxes is a card inside a card with nothing establishing hierarchy.
399
- * `'table'` is a real `<table>` with column headers, for merchants who want
400
- * their buyer's records (especially money) in aligned tabular columns.
401
- */
402
- type AccountPanelVariant = 'rows' | 'boxed' | 'table';
403
- declare function AddressesPanel(props: {
404
- appearance?: ThrottleAppearance;
405
- localization?: ThrottleLocalization;
406
- variant?: AccountPanelVariant;
407
- }): react_jsx_runtime.JSX.Element;
408
-
409
- /**
410
- * The order the buyer is acting on, including its line items — so "order
411
- * again" can rebuild a cart without fetching the order a second time.
412
- */
413
- interface OrderActionTarget {
414
- id: string;
415
- orderNumber: string;
416
- currency: string;
417
- lineItems: Array<{
418
- name: string;
419
- unitPrice: number;
420
- quantity: number;
421
- }>;
422
- }
423
- interface OrderActionHandlers {
424
- onPayNow?(order: OrderActionTarget): void;
425
- onReorder?(order: OrderActionTarget): void;
426
- onTrackShipment?(order: OrderActionTarget): void;
427
- }
428
- declare function OrdersPanel(props: OrderActionHandlers & {
429
- appearance?: ThrottleAppearance;
430
- localization?: ThrottleLocalization;
431
- variant?: AccountPanelVariant;
432
- onViewSubscription?(id: string): void;
433
- /** Forwarded to `OrderDetail`, where both default to on. */
434
- allowCancel?: boolean;
435
- allowReturn?: boolean;
436
- /** Opens straight to this order. Set by the dashboard on cross-panel navigation. */
437
- initialOpenId?: string | null;
438
- }): react_jsx_runtime.JSX.Element;
439
-
440
- type AccountTab = 'profile' | 'addresses' | 'paymentMethods' | 'orders' | 'invoices' | 'subscriptions' | 'security';
441
- declare const ACCOUNT_TABS: readonly AccountTab[];
442
- interface AccountDashboardProps extends OrderActionHandlers {
443
- /** Which panels to show, in order. Defaults to all seven. */
444
- tabs?: AccountTab[];
445
- tab?: AccountTab;
446
- onTabChange?(tab: AccountTab): void;
447
- routing?: 'virtual' | 'hash';
448
- /**
449
- * `'sidebar'` (default) puts the seven panels in a vertical rail beside the
450
- * content; `'tabs'` is the original horizontal strip above it. Seven is a lot
451
- * for a strip — at narrow widths most of them sit off-screen behind a scroll
452
- * with nothing signalling they exist — so the rail is the default. The strip
453
- * remains for merchants whose surrounding page already has a side nav and
454
- * would end up with two.
455
- */
456
- layout?: 'sidebar' | 'tabs';
457
- /**
458
- * Default composition for every panel rendered here. A panel's own
459
- * `variant` prop cannot be set through the dashboard (it does not expose
460
- * per-tab overrides), so in practice this is the only source of `variant`
461
- * each panel receives when rendered through `AccountDashboard` — a panel
462
- * rendered directly, outside the dashboard, keeps deciding its own default
463
- * from its own `variant` prop rather than this one.
464
- */
465
- panelVariant?: AccountPanelVariant;
466
- appearance?: ThrottleAppearance;
467
- localization?: ThrottleLocalization;
468
- }
469
- declare function AccountDashboard(props: AccountDashboardProps): react_jsx_runtime.JSX.Element | null;
470
-
471
- interface ThrottleProviderProps extends Partial<ThrottleAuthConfig> {
472
- publishableKey: string;
473
- appearance?: ThrottleAppearance;
474
- localization?: ThrottleLocalization;
475
- /** Default logo for the `branded` card variant. A card's own `logo` prop wins over this. */
476
- logo?: ReactNode;
477
- /** Default true. Set false and import `@usethrottle/auth/styles.css` for a flash-free SSR paint. */
478
- injectStyles?: boolean;
479
- /** Returns the guest cart id to attach after a successful sign-in or sign-up. */
480
- claimCartOnSignIn?: () => string | null | undefined;
481
- /** Inject a pre-built client. Tests use it. */
482
- auth?: ThrottleAuth;
483
- children: ReactNode;
484
- /** @internal test seam — receives the step-up callback handed to the core. */
485
- __captureStepUp?: (fn: () => Promise<string | null>) => void;
486
- }
487
- interface UseThrottleResult {
488
- openSignIn(): void;
489
- openSignUp(): void;
490
- openAccount(): void;
491
- close(): void;
492
- isOpen: boolean;
493
- }
494
- /**
495
- * The equivalent of Clerk's `useClerk().openSignIn()`. Lets a merchant open
496
- * the auth/account overlay from their own UI — a pricing CTA, a gated action,
497
- * a keyboard shortcut — driving the SAME modal `SignInButton`/`SignUpButton`
498
- * open, rather than a second competing one.
499
- *
500
- * Outside a `<ThrottleProvider>` (e.g. under a plain `ThrottleAuthProvider`)
501
- * this degrades to no-op functions and `isOpen: false`, with a one-time
502
- * development warning, rather than throwing.
503
- */
504
- declare function useThrottle(): UseThrottleResult;
505
- /**
506
- * Composes rather than replaces. It creates the client (so it can supply
507
- * `onStepUpRequired` at construction time, which is the only moment the core
508
- * reads it) and hands it to the existing `<ThrottleAuthProvider>` through the
509
- * `auth` injection prop that already exists for this purpose. Every hook —
510
- * useAuth, useCustomer, useOrders — keeps working underneath unchanged.
511
- *
512
- * It also owns the ONE modal overlay (sign-in/sign-up/account) alongside the
513
- * step-up dialog it already hosts, so a `SignInButton`/`SignUpButton` click
514
- * and a programmatic `useThrottle().openSignIn()` call always drive the same
515
- * dialog rather than stacking two.
516
- */
517
- declare function ThrottleProvider(props: ThrottleProviderProps): react_jsx_runtime.JSX.Element;
7
+ import { ReactNode } from 'react';
8
+ import { d as AccountTab } from '../../AccountDashboard-V63ghvjY.js';
9
+ export { A as ACCOUNT_TABS, a as AccountDashboard, b as AccountDashboardProps, c as AccountPanelVariant, e as AddressesPanel, f as OrdersPanel } from '../../AccountDashboard-V63ghvjY.js';
10
+ export { P as Page, R as Resource, T as ThrottleAccount, a as ThrottleAuthError, c as createAccount, u as useAddresses, b as useCustomer, d as useInvoice, e as useInvoices, f as useOrder, g as useOrders, h as useSavedCards, i as useSubscriptions } from '../../hooks-DkpLrEiC.js';
11
+ export { A as AccountModal, a as AccountModalProps, b as AddCardDialog, I as InvoiceDetail, c as InvoicesPanel, O as OrderDetail, P as PaymentMethodsPanel, d as ProfilePanel, S as SecurityPanel, e as SubscriptionsPanel, V as VerifyEmailBanner } from '../../AccountModal-pIMgledL.js';
12
+ export { A as Address, a as AddressInput, b as AuthSnapshot, c as AuthStatus, d as AuthStorage, C as Customer, D as DeviceSession, I as Invoice, O as OpenCart, e as Order, P as PaymentMethod, g as ProfilePatch, S as Session, h as Subscription, i as SubscriptionShippingAddress, T as ThrottleAuth, j as ThrottleAuthConfig, k as createThrottleAuth } from '../../client-7LVKfuXO.js';
13
+ export { ThrottleAuthProvider, ThrottleAuthProviderProps, UseAuthResult, localStorageAdapter, memoryStorage, useAuth, useAuthContext } from '../index.js';
518
14
 
519
15
  declare const THROTTLE_STYLE_ID = "throttle-auth-styles";
520
16
  /**
@@ -528,7 +24,7 @@ declare const THROTTLE_STYLE_ID = "throttle-auth-styles";
528
24
  * specificity plus source order is what lets them win. A descendant selector
529
25
  * here would silently outrank them.
530
26
  */
531
- 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 /* A label that wraps turns a control into a two-line block of text. */\n white-space: nowrap;\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: var(--throttle-button-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-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-4); align-items: start; }\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-fieldrow { grid-template-columns: 1fr; }\n .throttle-tabs__rail { width: 100%; }\n /* One column, and the rail stops sticking \u2014 on a phone a sticky summary\n covers the very line items it is summarising. */\n .throttle-detail { grid-template-columns: 1fr; }\n .throttle-detail__rail { position: static; }\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 {\n display: flex; gap: var(--throttle-space-2); flex-wrap: wrap; align-items: center;\n /* Primary buttons are full-width so a form's submit fills its card. In a row\n of sibling actions that same rule made every button claim 100% and then\n shrink to share the line, squeezing Resume to 59px so its label wrapped to\n two lines inside a 48px box. A custom property INHERITS to the buttons, so\n the row opts them back to content width without a descendant selector \u2014\n those outrank the merchant overrides in appearance.elements. */\n --throttle-button-width: auto;\n}\n.throttle-table__money { display: block; text-align: right; font-variant-numeric: tabular-nums; }\n.throttle-lineitem { display: flex; align-items: flex-start; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }\n/* The UA's 1em paragraph margins pushed a two-line item to 96px, so five\n items filled a screen with mostly whitespace. These carry the spacing\n instead. Separate classes, not a \".throttle-lineitem p\" descendant\n selector -- those outrank the merchant's appearance.elements overrides. */\n.throttle-lineitem__desc { margin: var(--throttle-space-1) 0 0; color: var(--throttle-color-muted-foreground); }\n.throttle-lineitem__meta { margin: var(--throttle-space-1) 0 0; color: var(--throttle-color-muted-foreground); font-size: var(--throttle-font-size-sm); }\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/* Order and invoice detail: the record on the left, what it costs and what\n you can do about it on the right. The rail sticks so the total and the\n actions stay reachable on an order with thirty lines, which is exactly when\n a buyer most wants them. Collapses below, where a sticky rail would eat a\n phone screen. */\n.throttle-detail { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--throttle-space-6); align-items: start; }\n.throttle-detail__main { display: flex; flex-direction: column; gap: var(--throttle-space-5); min-width: 0; }\n.throttle-detail__rail {\n display: flex; flex-direction: column; gap: var(--throttle-space-4);\n position: sticky; top: var(--throttle-space-4);\n padding: var(--throttle-space-4);\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius-md);\n background: var(--throttle-color-surface);\n}\n/* The one number the buyer came for. */\n.throttle-detail__headline { font-size: var(--throttle-font-size-xl); font-weight: 600; line-height: 1.2; }\n.throttle-detail__section { display: flex; flex-direction: column; gap: var(--throttle-space-2); }\n.throttle-detail__label { font-size: var(--throttle-font-size-sm); font-weight: 500; color: var(--throttle-color-muted-foreground); letter-spacing: .04em; text-transform: uppercase; }\n/* A rail action column: full width, stacked, so the primary reads as primary. */\n.throttle-detail__actions { display: flex; flex-direction: column; gap: var(--throttle-space-2); --throttle-button-width: 100%; }\n.throttle-detail__link { display: inline-flex; align-items: center; 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";
27
+ 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 /* A label that wraps turns a control into a two-line block of text. */\n white-space: nowrap;\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: var(--throttle-button-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-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-4); align-items: start; }\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-fieldrow { 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 {\n display: flex; gap: var(--throttle-space-2); flex-wrap: wrap; align-items: center;\n /* Primary buttons are full-width so a form's submit fills its card. In a row\n of sibling actions that same rule made every button claim 100% and then\n shrink to share the line, squeezing Resume to 59px so its label wrapped to\n two lines inside a 48px box. A custom property INHERITS to the buttons, so\n the row opts them back to content width without a descendant selector \u2014\n those outrank the merchant overrides in appearance.elements. */\n --throttle-button-width: auto;\n}\n.throttle-table__money { display: block; text-align: right; font-variant-numeric: tabular-nums; }\n.throttle-lineitem { display: flex; align-items: flex-start; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }\n/* The UA's 1em paragraph margins pushed a two-line item to 96px, so five\n items filled a screen with mostly whitespace. These carry the spacing\n instead. Separate classes, not a \".throttle-lineitem p\" descendant\n selector -- those outrank the merchant's appearance.elements overrides. */\n.throttle-lineitem__desc { margin: var(--throttle-space-1) 0 0; color: var(--throttle-color-muted-foreground); }\n.throttle-lineitem__meta { margin: var(--throttle-space-1) 0 0; color: var(--throttle-color-muted-foreground); font-size: var(--throttle-font-size-sm); }\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/* Order and invoice detail: the record on the left, what it costs and what\n you can do about it on the right. The rail sticks so the total and the\n actions stay reachable on an order with thirty lines, which is exactly when\n a buyer most wants them. Collapses below, where a sticky rail would eat a\n phone screen. */\n.throttle-detail { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--throttle-space-6); align-items: start; }\n.throttle-detail__main { display: flex; flex-direction: column; gap: var(--throttle-space-5); min-width: 0; }\n.throttle-detail__rail {\n display: flex; flex-direction: column; gap: var(--throttle-space-4);\n position: sticky; top: var(--throttle-space-4);\n padding: var(--throttle-space-4);\n border: var(--throttle-border-width) solid var(--throttle-color-border);\n border-radius: var(--throttle-radius-md);\n background: var(--throttle-color-surface);\n}\n/* One column, and the rail stops sticking \u2014 on a phone a sticky summary covers\n the very line items it is summarising. Placed AFTER the base rules above: a\n container query adds no specificity, so the later rule wins. */\n@container (max-width: 560px) {\n .throttle-detail { grid-template-columns: 1fr; }\n .throttle-detail__rail { position: static; }\n}\n/* The one number the buyer came for. */\n.throttle-detail__headline { font-size: var(--throttle-font-size-xl); font-weight: 600; line-height: 1.2; }\n.throttle-detail__section { display: flex; flex-direction: column; gap: var(--throttle-space-2); }\n.throttle-detail__label { font-size: var(--throttle-font-size-sm); font-weight: 500; color: var(--throttle-color-muted-foreground); letter-spacing: .04em; text-transform: uppercase; }\n/* A rail action column: full width, stacked, so the primary reads as primary. */\n.throttle-detail__actions { display: flex; flex-direction: column; gap: var(--throttle-space-2); --throttle-button-width: 100%; }\n.throttle-detail__link { display: inline-flex; align-items: center; 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";
532
28
 
533
29
  /**
534
30
  * The only place minor units become major units. Every amount on the wire is
@@ -539,178 +35,6 @@ declare const THROTTLE_STYLES = "\n.throttle-root {\n --throttle-color-primary:
539
35
  declare function formatMoney(minorUnits: number, currency: string, locale: string): string;
540
36
  declare function formatDate(value: string | Date, locale: string): string;
541
37
 
542
- type AuthCardVariant = 'quiet' | 'grouped' | 'branded';
543
- interface SignInProps {
544
- appearance?: ThrottleAppearance;
545
- localization?: ThrottleLocalization;
546
- /** Composition of the card. Default `'quiet'`. */
547
- variant?: AuthCardVariant;
548
- /** Rendered above the title in the `branded` variant. Falls back to `ThrottleProvider`'s `logo`. */
549
- logo?: ReactNode;
550
- onSuccess?(): void;
551
- onForgotPassword?(): void;
552
- onSignUp?(): void;
553
- }
554
- declare function SignIn(props: SignInProps): react_jsx_runtime.JSX.Element;
555
-
556
- interface SignUpProps {
557
- appearance?: ThrottleAppearance;
558
- localization?: ThrottleLocalization;
559
- /** Composition of the card. Default `'quiet'`. */
560
- variant?: AuthCardVariant;
561
- /** Rendered above the title in the `branded` variant. Falls back to `ThrottleProvider`'s `logo`. */
562
- logo?: ReactNode;
563
- onSuccess?(): void;
564
- onSignIn?(): void;
565
- }
566
- declare function SignUp(props: SignUpProps): react_jsx_runtime.JSX.Element;
567
-
568
- interface ForgotPasswordProps {
569
- appearance?: ThrottleAppearance;
570
- localization?: ThrottleLocalization;
571
- /** Composition of the card. Default `'quiet'`. A single input, so `'grouped'` renders the same as `'quiet'`. */
572
- variant?: AuthCardVariant;
573
- /** Rendered above the title in the `branded` variant. Falls back to `ThrottleProvider`'s `logo`. */
574
- logo?: ReactNode;
575
- onBack?(): void;
576
- }
577
- declare function ForgotPassword(props: ForgotPasswordProps): react_jsx_runtime.JSX.Element;
578
-
579
- interface ResetPasswordProps {
580
- token?: string;
581
- appearance?: ThrottleAppearance;
582
- localization?: ThrottleLocalization;
583
- /** Composition of the card. Default `'quiet'`. A single input, so `'grouped'` renders the same as `'quiet'`. */
584
- variant?: AuthCardVariant;
585
- /** Rendered above the title in the `branded` variant. Falls back to `ThrottleProvider`'s `logo`. */
586
- logo?: ReactNode;
587
- onSuccess?(): void;
588
- }
589
- declare function ResetPassword(props: ResetPasswordProps): react_jsx_runtime.JSX.Element;
590
-
591
- interface VerifyEmailProps {
592
- token?: string;
593
- appearance?: ThrottleAppearance;
594
- localization?: ThrottleLocalization;
595
- /** Composition of the card. Default `'quiet'`. This card has no inputs, so `'grouped'` renders the same as `'quiet'`. */
596
- variant?: AuthCardVariant;
597
- /** Rendered above the title in the `branded` variant. Falls back to `ThrottleProvider`'s `logo`. */
598
- logo?: ReactNode;
599
- onSuccess?(): void;
600
- }
601
- declare function VerifyEmail(props: VerifyEmailProps): react_jsx_runtime.JSX.Element;
602
-
603
- type AuthView = 'signIn' | 'signUp' | 'forgotPassword' | 'resetPassword' | 'verifyEmail';
604
- interface AuthFlowProps {
605
- initialView?: AuthView;
606
- /** Controlled mode: pass both to own the value yourself. */
607
- view?: AuthView;
608
- onViewChange?(view: AuthView): void;
609
- /** Wins over the token in the URL. */
610
- token?: string;
611
- routing?: 'virtual' | 'hash';
612
- afterSignIn?(): void;
613
- afterSignUp?(): void;
614
- appearance?: ThrottleAppearance;
615
- localization?: ThrottleLocalization;
616
- }
617
- declare function AuthFlow(props: AuthFlowProps): react_jsx_runtime.JSX.Element;
618
-
619
- interface AuthModalProps {
620
- open: boolean;
621
- onClose(): void;
622
- initialView?: AuthView;
623
- afterSignIn?(): void;
624
- afterSignUp?(): void;
625
- appearance?: ThrottleAppearance;
626
- localization?: ThrottleLocalization;
627
- }
628
- declare function AuthModal(props: AuthModalProps): react_jsx_runtime.JSX.Element;
629
-
630
- interface SignInButtonProps {
631
- mode?: 'modal' | 'redirect';
632
- /** Required when mode is "redirect". */
633
- url?: string;
634
- initialView?: AuthView;
635
- asChild?: boolean;
636
- children?: ReactNode;
637
- appearance?: ThrottleAppearance;
638
- localization?: ThrottleLocalization;
639
- afterSignIn?(): void;
640
- }
641
- declare function SignInButton(props: SignInButtonProps): react_jsx_runtime.JSX.Element;
642
-
643
- /** The twin of `SignInButton`, opening the same flow on the sign-up view. */
644
- interface SignUpButtonProps {
645
- mode?: 'modal' | 'redirect';
646
- /** Required when mode is "redirect". */
647
- url?: string;
648
- initialView?: AuthView;
649
- asChild?: boolean;
650
- children?: ReactNode;
651
- appearance?: ThrottleAppearance;
652
- localization?: ThrottleLocalization;
653
- afterSignUp?(): void;
654
- }
655
- declare function SignUpButton(props: SignUpButtonProps): react_jsx_runtime.JSX.Element;
656
-
657
- interface SignOutButtonProps {
658
- /** Revokes every session, not just this device. May raise a step-up prompt. */
659
- everywhere?: boolean;
660
- children?: ReactNode;
661
- localization?: ThrottleLocalization;
662
- onSignedOut?(): void;
663
- }
664
- declare function SignOutButton(props: SignOutButtonProps): react_jsx_runtime.JSX.Element;
665
-
666
- interface SignInPageProps {
667
- /** Rendered above the card. Absent by default. */
668
- logo?: ReactNode;
669
- /** Rendered below the card. Absent by default. */
670
- footer?: ReactNode;
671
- appearance?: ThrottleAppearance;
672
- localization?: ThrottleLocalization;
673
- onSuccess?(): void;
674
- onForgotPassword?(): void;
675
- onSignUp?(): void;
676
- }
677
- /**
678
- * A full-viewport, centred shell around `<SignIn/>` for merchants who drop it
679
- * directly on a route (e.g. `/sign-in`) and would otherwise get a card stuck
680
- * at the top of a bare page. `100dvh`, not `100vh` — see styles.ts.
681
- */
682
- declare function SignInPage(props: SignInPageProps): react_jsx_runtime.JSX.Element;
683
-
684
- interface SignUpPageProps {
685
- /** Rendered above the card. Absent by default. */
686
- logo?: ReactNode;
687
- /** Rendered below the card. Absent by default. */
688
- footer?: ReactNode;
689
- appearance?: ThrottleAppearance;
690
- localization?: ThrottleLocalization;
691
- onSuccess?(): void;
692
- onSignIn?(): void;
693
- }
694
- /** The `<SignUp/>` twin of `SignInPage`. */
695
- declare function SignUpPage(props: SignUpPageProps): react_jsx_runtime.JSX.Element;
696
-
697
- /**
698
- * All three render nothing while `status === 'loading'`. A guard that treated
699
- * loading as signed-out would flash a "Sign in" button at a buyer whose
700
- * session is a few milliseconds from being restored.
701
- */
702
- declare function SignedIn(props: {
703
- children: ReactNode;
704
- }): react_jsx_runtime.JSX.Element | null;
705
- declare function SignedOut(props: {
706
- children: ReactNode;
707
- }): react_jsx_runtime.JSX.Element | null;
708
- declare function Protect(props: {
709
- requireVerified?: boolean;
710
- fallback?: ReactNode;
711
- children: ReactNode;
712
- }): react_jsx_runtime.JSX.Element | null;
713
-
714
38
  interface UserButtonProps {
715
39
  /** "modal" opens the dashboard in an overlay; "navigate" links to accountUrl. */
716
40
  mode?: 'modal' | 'navigate';
@@ -740,135 +64,4 @@ declare const UserButton: typeof UserButtonRoot & {
740
64
  Action: typeof UserButtonAction;
741
65
  };
742
66
 
743
- declare function VerifyEmailBanner(props: {
744
- appearance?: ThrottleAppearance;
745
- localization?: ThrottleLocalization;
746
- }): react_jsx_runtime.JSX.Element | null;
747
-
748
- declare function ProfilePanel(props: {
749
- appearance?: ThrottleAppearance;
750
- localization?: ThrottleLocalization;
751
- }): react_jsx_runtime.JSX.Element | null;
752
-
753
- /**
754
- * Add, set-default and remove. The card form is hosted by the processor and
755
- * shown in an iframe by AddCardDialog, so a card number never reaches this
756
- * component. Adding is verified-only, like listing: what it hands out is the
757
- * ability to attach a payment instrument to the account.
758
- */
759
- declare function PaymentMethodsPanel(props: {
760
- appearance?: ThrottleAppearance;
761
- localization?: ThrottleLocalization;
762
- variant?: AccountPanelVariant;
763
- }): react_jsx_runtime.JSX.Element;
764
-
765
- /**
766
- * The card form itself is hosted by the processor and shown in an iframe, so a
767
- * card number never touches this SDK, the merchant's page, or our API. When the
768
- * card is vaulted the frame posts `throttle.completed`, and the transaction id
769
- * on that message is what we hand back to record the card.
770
- */
771
- declare function AddCardDialog(props: {
772
- open: boolean;
773
- onClose(): void;
774
- onAdded(): void;
775
- localization?: ThrottleLocalization;
776
- }): react_jsx_runtime.JSX.Element | null;
777
-
778
- declare function OrderDetail(props: {
779
- orderId: string;
780
- onBack?(): void;
781
- onViewSubscription?(id: string): void;
782
- onViewInvoice?(id: string): void;
783
- /**
784
- * Status-dependent actions the MERCHANT owns. Each renders only when its
785
- * handler is supplied, because the buyer plane cannot perform them: a
786
- * built-in Pay or Track button would be a control that always fails.
787
- */
788
- onPayNow?(order: OrderActionTarget): void;
789
- onReorder?(order: OrderActionTarget): void;
790
- onTrackShipment?(order: OrderActionTarget): void;
791
- /**
792
- * Cancel and return, by contrast, ARE buyer-plane capabilities, so they are
793
- * wired in here and need no handler. Opt out with `false` for a storefront
794
- * that handles them elsewhere.
795
- */
796
- allowCancel?: boolean;
797
- allowReturn?: boolean;
798
- appearance?: ThrottleAppearance;
799
- localization?: ThrottleLocalization;
800
- }): react_jsx_runtime.JSX.Element;
801
-
802
- declare function InvoicesPanel(props: {
803
- appearance?: ThrottleAppearance;
804
- localization?: ThrottleLocalization;
805
- variant?: AccountPanelVariant;
806
- /** Navigation out of an invoice, forwarded to `InvoiceDetail`. */
807
- onViewOrder?(orderId: string): void;
808
- onViewSubscription?(subscriptionId: string): void;
809
- onPay?(invoice: {
810
- id: string;
811
- number: string;
812
- total: number;
813
- currency: string;
814
- }): void;
815
- /** Opens straight to this invoice. Set by the dashboard on cross-panel navigation. */
816
- initialOpenId?: string | null;
817
- }): react_jsx_runtime.JSX.Element;
818
-
819
- declare function InvoiceDetail(props: {
820
- invoiceId: string;
821
- onBack?(): void;
822
- /**
823
- * Navigation out of the invoice. An invoice is a record OF something — an
824
- * order or a subscription — and without these it was a dead end: the buyer
825
- * could read what they were charged but not reach the thing that charged
826
- * them. Each link renders only when the handler is supplied AND the server
827
- * resolved the id.
828
- */
829
- onViewOrder?(orderId: string): void;
830
- onViewSubscription?(subscriptionId: string): void;
831
- /** Settle an open invoice. Merchant-owned, like the order's Pay now. */
832
- onPay?(invoice: {
833
- id: string;
834
- number: string;
835
- total: number;
836
- currency: string;
837
- }): void;
838
- appearance?: ThrottleAppearance;
839
- localization?: ThrottleLocalization;
840
- }): react_jsx_runtime.JSX.Element;
841
-
842
- declare function SubscriptionsPanel(props: {
843
- appearance?: ThrottleAppearance;
844
- localization?: ThrottleLocalization;
845
- variant?: AccountPanelVariant;
846
- }): react_jsx_runtime.JSX.Element;
847
-
848
- declare function SecurityPanel(props: {
849
- appearance?: ThrottleAppearance;
850
- localization?: ThrottleLocalization;
851
- variant?: AccountPanelVariant;
852
- }): react_jsx_runtime.JSX.Element;
853
-
854
- interface AccountModalProps {
855
- open: boolean;
856
- onClose(): void;
857
- tabs?: AccountTab[];
858
- appearance?: ThrottleAppearance;
859
- localization?: ThrottleLocalization;
860
- /** Where focus returns on close. See `Modal`'s own doc for why a caller
861
- * sometimes has to name this rather than let the modal capture it. */
862
- restoreFocusTo?: Element | null;
863
- }
864
- /**
865
- * The account dashboard, reachable without going through `UserButton`'s
866
- * menu — a merchant can wire this to a "Settings" control anywhere. Mirrors
867
- * `AuthModal`'s shape (a `Modal` hosting the existing card/dashboard), so a
868
- * merchant who wants to own the open/close state themselves has the same
869
- * kind of component available for the account surface that they already
870
- * have for sign-in.
871
- */
872
- declare function AccountModal(props: AccountModalProps): react_jsx_runtime.JSX.Element;
873
-
874
- export { ACCOUNT_TABS, AccountDashboard, type AccountDashboardProps, AccountModal, type AccountModalProps, type AccountPanelVariant, type AccountTab, AddCardDialog, AddressesPanel, type AuthCardVariant, AuthFlow, type AuthFlowProps, AuthModal, type AuthModalProps, type AuthView, ForgotPassword, type ForgotPasswordProps, InvoiceDetail, InvoicesPanel, OrderDetail, OrdersPanel, PaymentMethodsPanel, ProfilePanel, Protect, ResetPassword, type ResetPasswordProps, SecurityPanel, SignIn, SignInButton, type SignInButtonProps, SignInPage, type SignInPageProps, type SignInProps, SignOutButton, type SignOutButtonProps, SignUp, SignUpButton, type SignUpButtonProps, SignUpPage, type SignUpPageProps, type SignUpProps, SignedIn, SignedOut, SubscriptionsPanel, THROTTLE_ELEMENT_KEYS, THROTTLE_STYLES, THROTTLE_STYLE_ID, type ThrottleAppearance, ThrottleAuth, ThrottleAuthConfig, type ThrottleElementKey, type ThrottleLocalization, ThrottleProvider, type ThrottleProviderProps, type ThrottleSlots, type ThrottleThemeName, type ThrottleVariables, type UseThrottleResult, UserButton, type UserButtonProps, VerifyEmail, VerifyEmailBanner, type VerifyEmailProps, enUS, formatDate, formatMoney, useThrottle };
67
+ export { AccountTab, THROTTLE_STYLES, THROTTLE_STYLE_ID, ThrottleAppearance, ThrottleLocalization, UserButton, type UserButtonProps, formatDate, formatMoney };