@usethrottle/auth 0.11.0 → 0.12.1

package/dist/chunk-RCNUWITB.js

@@ -0,0 +1,747 @@
+"use client";
+import {
+  BrandLogoProvider
+} from "./chunk-X6D35EAX.js";
+import {
+  AppearanceProvider,
+  ConfirmProvider,
+  LocalizationProvider
+} from "./chunk-CUNMJ2PH.js";
+import {
+  ThrottleAuthProvider,
+  createAccount,
+  createThrottleAuth
+} from "./chunk-TDQC3LMQ.js";
+
+// src/react/components/provider.tsx
+import { Component, createContext, lazy, Suspense, useCallback, useContext, useMemo, useRef, useState } from "react";
+
+// src/react/components/styles.ts
+import { useInsertionEffect } from "react";
+var THROTTLE_STYLE_ID = "throttle-auth-styles";
+var THROTTLE_STYLES = `
+.throttle-root {
+  --throttle-color-primary: #18181b;
+  --throttle-color-primary-foreground: #ffffff;
+  --throttle-color-background: #ffffff;
+  --throttle-color-surface: #f8fafc;
+  --throttle-color-foreground: #0e1116;
+  --throttle-color-muted: #eceef2;
+  --throttle-color-muted-foreground: #5b6472;
+  --throttle-color-border: #e2e8f0;
+  /* The boundary of an INTERACTIVE control, which WCAG 1.4.11 requires to
+     reach 3:1 against its adjacent colour \u2014 an input identified only by a
+     1.23:1 hairline is not identifiable at all. Decorative separators (card
+     edges, table rules, dividers) keep --throttle-color-border: they do not
+     identify a control, so the requirement does not apply and darkening
+     them would only add noise. */
+  /* The account dashboard paints nothing by default so it can drop into a
+     merchant's page without fighting their background. The accountSurface and
+     accountPadding appearance variables opt back into a card.
+     No backticks in this comment: the sheet is a TS template literal. */
+  --throttle-card-width: 400px;
+  --throttle-color-account-surface: transparent;
+  --throttle-account-padding: 0;
+  --throttle-color-border-control: #8b93a1;
+  --throttle-color-danger: #c2321f;
+  --throttle-color-danger-surface: #fef2f2;
+  --throttle-color-danger-border: #fecaca;
+  --throttle-color-success: #127a4a;
+  --throttle-color-success-surface: #ecfdf5;
+  --throttle-color-success-border: #a7f3d0;
+  --throttle-color-warning: #92400e;
+  --throttle-color-warning-surface: #fffbeb;
+  --throttle-color-warning-border: #fde68a;
+  --throttle-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --throttle-font-size: 16px;
+  --throttle-font-size-xs: 12px;
+  --throttle-font-size-sm: 14px;
+  --throttle-font-size-lg: 20px;
+  --throttle-font-size-xl: 24px;
+  --throttle-line-height: 1.5;
+  --throttle-line-height-tight: 1.25;
+  --throttle-radius: 12px;
+  --throttle-radius-sm: 8px;
+  --throttle-radius-full: 999px;
+  --throttle-border-width: 1px;
+  --throttle-spacing: 8px;
+  --throttle-space-1: 4px;
+  --throttle-space-2: var(--throttle-spacing);
+  --throttle-space-3: 12px;
+  --throttle-space-4: 16px;
+  --throttle-space-5: 24px;
+  --throttle-space-6: 32px;
+  --throttle-control-height: 48px;
+  --throttle-control-padding-x: 16px;
+  --throttle-shadow-card: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
+  --throttle-shadow-popover: 0 10px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
+  --throttle-transition: 150ms cubic-bezier(.2,0,.2,1);
+  --throttle-z-modal: 2147483000;
+  --throttle-z-popover: 2147482000;
+  font-family: var(--throttle-font-family);
+  font-size: var(--throttle-font-size);
+  line-height: var(--throttle-line-height);
+  color: var(--throttle-color-foreground);
+  box-sizing: border-box;
+}
+.throttle-root *, .throttle-root *::before, .throttle-root *::after { box-sizing: inherit; }
+
+.throttle-root[data-throttle-theme="dark"] {
+  --throttle-color-primary: #e6edf3;
+  --throttle-color-primary-foreground: #0d1117;
+  --throttle-color-background: #0d1117;
+  --throttle-color-surface: #1c2129;
+  --throttle-color-foreground: #e6edf3;
+  --throttle-color-muted: #21262d;
+  --throttle-color-muted-foreground: #9aa4b2;
+  --throttle-color-border: #30363d;
+  --throttle-color-border-control: #5c6570;
+  --throttle-color-danger: #ff6b58;
+  --throttle-color-danger-surface: #2a1513;
+  --throttle-color-danger-border: #5c2b25;
+  --throttle-color-success: #45c08a;
+  --throttle-color-success-surface: #0f2419;
+  --throttle-color-success-border: #1f4d36;
+  --throttle-color-warning: #e0a53a;
+  --throttle-color-warning-surface: #2a2113;
+  --throttle-color-warning-border: #5c4a25;
+  --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
+  --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
+}
+@media (prefers-color-scheme: dark) {
+  .throttle-root[data-throttle-theme="auto"] {
+    --throttle-color-primary: #e6edf3;
+    --throttle-color-primary-foreground: #0d1117;
+    --throttle-color-background: #0d1117;
+    --throttle-color-surface: #1c2129;
+    --throttle-color-foreground: #e6edf3;
+    --throttle-color-muted: #21262d;
+    --throttle-color-muted-foreground: #9aa4b2;
+    --throttle-color-border: #30363d;
+    --throttle-color-border-control: #5c6570;
+    --throttle-color-danger: #ff6b58;
+    --throttle-color-danger-surface: #2a1513;
+    --throttle-color-danger-border: #5c2b25;
+    --throttle-color-success: #45c08a;
+    --throttle-color-success-surface: #0f2419;
+    --throttle-color-success-border: #1f4d36;
+    --throttle-color-warning: #e0a53a;
+    --throttle-color-warning-surface: #2a2113;
+    --throttle-color-warning-border: #5c4a25;
+    --throttle-shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
+    --throttle-shadow-popover: 0 10px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
+  }
+}
+
+.throttle-card {
+  background: var(--throttle-color-background);
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius);
+  box-shadow: var(--throttle-shadow-card);
+  padding: var(--throttle-space-5);
+  width: 100%;
+  max-width: var(--throttle-card-width);
+  margin-inline: auto;
+}
+/* Inside a Modal the dialog already provides the surface \u2014 background, radius
+   and elevation. A card that draws its own on top is the "box inside a box":
+   two shadowed rounded rectangles nested, with the card's max-width stranding
+   it in the middle of a much wider dialog. */
+.throttle-card--bare { border: none; box-shadow: none; background: none; max-width: none; }
+.throttle-card__header { margin-bottom: var(--throttle-space-4); }
+.throttle-card__header--branded { text-align: center; }
+.throttle-card__logo { display: flex; justify-content: center; margin-bottom: var(--throttle-space-3); }
+.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; }
+.throttle-card__title--branded { font-size: var(--throttle-font-size-xl); }
+.throttle-card__description { color: var(--throttle-color-muted-foreground); margin: var(--throttle-space-1) 0 0; }
+.throttle-card__body { display: flex; flex-direction: column; gap: var(--throttle-space-3); }
+.throttle-card__footer { margin-top: var(--throttle-space-4); text-align: center; }
+.throttle-card__footer--ruled { border-top: var(--throttle-border-width) solid var(--throttle-color-border); padding-top: var(--throttle-space-4); }
+
+.throttle-field { display: flex; flex-direction: column; gap: var(--throttle-space-1); }
+.throttle-field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--throttle-space-2); }
+.throttle-field__label { font-weight: 500; }
+.throttle-field__input {
+  font: inherit;
+  font-size: var(--throttle-font-size);
+  color: var(--throttle-color-foreground);
+  background: var(--throttle-color-background);
+  border: var(--throttle-border-width) solid var(--throttle-color-border-control);
+  border-radius: var(--throttle-radius-sm);
+  /* padding-block stays 0 so min-height alone owns the height, exactly as
+     .throttle-button does. With 12px vertical padding the box computed to
+     50px against the button's 48px \u2014 a 2px mismatch, measured in a browser
+     across 19 controls. An input element centres its own text vertically. */
+  padding-block: 0;
+  padding-inline: var(--throttle-control-padding-x);
+  min-height: var(--throttle-control-height);
+  width: 100%;
+  transition: border-color var(--throttle-transition), box-shadow var(--throttle-transition);
+}
+.throttle-field__input:focus-visible {
+  outline: none;
+  border-color: var(--throttle-color-primary);
+  box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary);
+}
+.throttle-field__input:disabled { background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground); cursor: not-allowed; }
+.throttle-field__input::placeholder { color: var(--throttle-color-muted-foreground); opacity: 1; }
+.throttle-field__input--grouped { border: none; border-radius: 0; padding-inline: 0; }
+.throttle-field__hint { color: var(--throttle-color-muted-foreground); font-size: var(--throttle-font-size-xs); }
+/* Always mounted, so it reserves its line whether or not there is an error:
+   an error appearing on submit must not push the submit button out from
+   under the buyer's pointer. */
+.throttle-field__error { color: var(--throttle-color-danger); font-size: var(--throttle-font-size-xs); line-height: 1rem; }
+/* Reserved a full line under EVERY input even with nothing to say, which
+   with the stack gap put 28px of dead space beneath each field, on every
+   form and all seven account panels. The element stays mounted when empty
+   because role=alert only announces changes to a live region that was
+   already there; it just stops occupying a line. */
+.throttle-field__error:empty { display: none; }
+
+.throttle-field-group {
+  display: flex;
+  flex-direction: column;
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius-sm);
+  overflow: hidden;
+}
+.throttle-field-group__item { padding: var(--throttle-space-3) var(--throttle-control-padding-x); }
+.throttle-field-group__divider { height: var(--throttle-border-width); background: var(--throttle-color-border); }
+.throttle-field-group__forgot { margin-left: auto; }
+
+.throttle-button {
+  font: inherit;
+  font-weight: 500;
+  border-radius: var(--throttle-radius-sm);
+  border: var(--throttle-border-width) solid transparent;
+  padding-inline: var(--throttle-control-padding-x);
+  padding-block: 0;
+  min-height: var(--throttle-control-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  /* A label that wraps turns a control into a two-line block of text. */
+  white-space: nowrap;
+  transition: opacity var(--throttle-transition), background-color var(--throttle-transition), border-color var(--throttle-transition), filter var(--throttle-transition), box-shadow var(--throttle-transition);
+}
+.throttle-button:disabled { opacity: .55; cursor: not-allowed; }
+.throttle-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary); }
+.throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: var(--throttle-button-width, 100%); }
+.throttle-button--primary:hover:not(:disabled) { filter: brightness(0.92); }
+.throttle-button--secondary { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); border-color: var(--throttle-color-border-control); }
+.throttle-button--secondary:hover:not(:disabled) { background: var(--throttle-color-muted); }
+.throttle-button--danger { background: transparent; color: var(--throttle-color-danger); border-color: var(--throttle-color-border); }
+.throttle-button--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--throttle-color-danger) 10%, transparent); }
+/* Link-style actions are the rows panel default, and they carry Delete,
+   Remove, Cancel and Sign out. Zero padding with min-height 0 made those
+   roughly 20px tall and ~8px apart \u2014 a mis-tap on a phone lands on something
+   irreversible. The target is expanded with vertical padding and pulled back
+   with an equal negative margin, so the hit box clears 44px while the text
+   sits exactly where it did. Collapsing this back to zero padding shrinks the
+   target again. */
+.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; }
+.throttle-button--link:hover:not(:disabled) { opacity: .8; }
+.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; }
+.throttle-button--linkDanger:hover:not(:disabled) { opacity: .8; }
+.throttle-button--xs { font-size: var(--throttle-font-size-xs); }
+
+.throttle-alert { border-radius: var(--throttle-radius-sm); padding: var(--throttle-space-3); font-size: var(--throttle-font-size-sm); }
+.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); }
+.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); }
+.throttle-alert--info { background: var(--throttle-color-surface); color: var(--throttle-color-muted-foreground); }
+
+.throttle-spinner {
+  display: inline-block; width: 1em; height: 1em;
+  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
+  animation: throttle-spin 700ms linear infinite;
+}
+@keyframes throttle-spin { to { transform: rotate(360deg); } }
+.throttle-button--loading { position: relative; }
+.throttle-button__label { display: inline-flex; align-items: center; justify-content: center; gap: var(--throttle-space-2); }
+.throttle-button__label--hidden { visibility: hidden; }
+.throttle-spinner--centred { position: absolute; top: 50%; left: 50%; margin: -0.5em 0 0 -0.5em; }
+
+@media (prefers-reduced-motion: reduce) { .throttle-spinner { animation-duration: 2.4s; } }
+
+.throttle-skeleton {
+  background: var(--throttle-color-muted);
+  border-radius: var(--throttle-radius-sm);
+  animation: throttle-pulse 1.4s ease-in-out infinite; height: 2.5em; }
+@keyframes throttle-pulse { 50% { opacity: .5; } }
+@media (prefers-reduced-motion: reduce) { .throttle-skeleton { animation: none; } }
+
+.throttle-modal__overlay {
+  position: fixed; inset: 0; z-index: var(--throttle-z-modal);
+  background: rgba(14,17,22,.45);
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--throttle-space-4);
+  overflow-y: auto;
+}
+.throttle-modal__container {
+  background: var(--throttle-color-background);
+  border-radius: var(--throttle-radius);
+  box-shadow: var(--throttle-shadow-popover);
+  max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto;
+  position: relative;
+}
+/* After the base rule on purpose: both are single-class, so equal specificity
+   means source order decides. Declared before it, this silently lost. */
+.throttle-modal__container--compact { max-width: 440px; }
+.throttle-modal__close {
+  position: absolute; top: var(--throttle-space-3); right: var(--throttle-space-3);
+  background: none; border: none; cursor: pointer; font-size: var(--throttle-font-size-lg);
+  color: var(--throttle-color-muted-foreground);
+  transition: color var(--throttle-transition);
+}
+.throttle-modal__close:hover { color: var(--throttle-color-foreground); }
+.throttle-modal__header { padding: var(--throttle-space-4) var(--throttle-space-4) 0; }
+.throttle-modal__title { font-size: var(--throttle-font-size-lg); line-height: var(--throttle-line-height-tight); font-weight: 600; margin: 0; }
+.throttle-modal__body { padding: var(--throttle-space-4); }
+
+.throttle-dropdown__trigger { background: none; border: none; cursor: pointer; padding: 0; border-radius: var(--throttle-radius-full); transition: background-color var(--throttle-transition); }
+.throttle-dropdown__trigger:hover { background: var(--throttle-color-surface); }
+.throttle-dropdown__trigger:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: 2px; }
+.throttle-dropdown__menu {
+  position: absolute; right: 0; top: calc(100% + var(--throttle-space-2));
+  z-index: var(--throttle-z-popover);
+  min-width: 260px;
+  background: var(--throttle-color-background);
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius);
+  box-shadow: var(--throttle-shadow-popover);
+  padding: var(--throttle-space-1);
+}
+.throttle-dropdown__item {
+  display: flex; align-items: center; gap: var(--throttle-space-2);
+  width: 100%; text-align: left; font: inherit; color: inherit;
+  background: none; border: none; cursor: pointer;
+  padding: var(--throttle-space-3);
+  border-radius: var(--throttle-radius-sm);
+  text-decoration: none;
+  transition: background-color var(--throttle-transition);
+}
+.throttle-dropdown__item:hover { background: var(--throttle-color-surface); }
+.throttle-dropdown__item:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }
+.throttle-dropdown__separator { height: 1px; background: var(--throttle-color-border); margin: var(--throttle-space-1) 0; border: 0; }
+
+.throttle-tabs__list {
+  display: flex; gap: var(--throttle-space-1);
+  border-bottom: var(--throttle-border-width) solid var(--throttle-color-border);
+  overflow-x: auto; scrollbar-width: thin;
+}
+.throttle-tabs__tab {
+  font: inherit; background: none; border: none; cursor: pointer; white-space: nowrap;
+  padding: var(--throttle-space-3);
+  color: var(--throttle-color-muted-foreground);
+  border-bottom: 2px solid transparent;
+  transition: color var(--throttle-transition), border-color var(--throttle-transition);
+}
+.throttle-tabs__tab:hover { color: var(--throttle-color-foreground); }
+.throttle-tabs__tab--active { color: var(--throttle-color-foreground); border-bottom-color: var(--throttle-color-primary); }
+.throttle-tabs__panel { padding-top: var(--throttle-space-4); }
+
+/* Paints its own ground. A UserButton in a navbar should stay transparent, but
+   the dashboard is a large surface of themed text: in dark theme its foreground
+   is near-white, so on a light host page it was rendering white-on-white. */
+.throttle-cardframe { width: 100%; min-height: 420px; border: 0; display: block; }
+.throttle-centre { display: flex; align-items: center; justify-content: center; min-height: 160px; }
+.throttle-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-4); align-items: start; }
+.throttle-section__title { font-size: var(--throttle-font-size-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--throttle-color-muted-foreground); margin: 0 0 var(--throttle-space-2); font-weight: 600; }
+.throttle-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--throttle-space-5); }
+.throttle-addressblock__line { margin: 0 0 2px; }
+.throttle-timeline { display: flex; flex-direction: column; gap: var(--throttle-space-2); }
+.throttle-timeline__row { display: flex; align-items: center; gap: var(--throttle-space-2); }
+.throttle-timeline__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--throttle-color-border-control); flex: none; }
+.throttle-timeline__label { flex: 1; }
+.throttle-account-root { container-type: inline-size; background: var(--throttle-color-account-surface); color: var(--throttle-color-foreground); padding: var(--throttle-account-padding); }
+.throttle-account { display: flex; gap: var(--throttle-space-5); align-items: flex-start; }
+.throttle-account__content { flex: 1; min-width: 0; }
+.throttle-tabs__rail { flex: none; width: 220px; display: flex; flex-direction: column; gap: 2px; }
+.throttle-tabs__railitem {
+  font: inherit;
+  font-size: var(--throttle-font-size-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--throttle-space-3);
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  border-radius: var(--throttle-radius-sm);
+  padding: 0 var(--throttle-space-3);
+  min-height: var(--throttle-control-height);
+  color: var(--throttle-color-muted-foreground);
+  cursor: pointer;
+  transition: background var(--throttle-transition), color var(--throttle-transition);
+}
+.throttle-tabs__railitem:hover { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); }
+.throttle-tabs__railitem:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }
+.throttle-tabs__tab:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }
+.throttle-tabs__railitem--active { background: var(--throttle-color-surface); color: var(--throttle-color-foreground); font-weight: 500; }
+.throttle-tabs__railicon { flex: none; opacity: .75; }
+
+/* A CONTAINER query, not a viewport one: these components render inside a
+   merchant's page, so the viewport says nothing about how much room the
+   dashboard actually has \u2014 it could sit in a 400px column on a 1920px screen.
+   Below ~560px of container the rail becomes a full-width list above the
+   panel: all seven still visible, each still a 44px target. */
+@container (max-width: 560px) {
+  /* align-items: flex-start is right in row direction and wrong in column \u2014
+     it shrinks the rail to its content width, so width:100% alone cannot make
+     it span. Stretch it explicitly when stacked. */
+  .throttle-account { flex-direction: column; align-items: stretch; gap: var(--throttle-space-4); }
+  .throttle-addresses { grid-template-columns: 1fr; }
+  .throttle-fieldrow { grid-template-columns: 1fr; }
+  .throttle-tabs__rail { width: 100%; }
+}
+
+.throttle-table { width: 100%; border-collapse: collapse; text-align: left; }
+.throttle-table__head { color: var(--throttle-color-muted-foreground); font-weight: 500; font-size: var(--throttle-font-size-sm); }
+.throttle-table__row { border-top: var(--throttle-border-width) solid var(--throttle-color-border); cursor: pointer; transition: background-color var(--throttle-transition); }
+.throttle-table__row:hover { background: var(--throttle-color-surface); }
+.throttle-table__row:focus-visible { outline: 2px solid var(--throttle-color-primary); outline-offset: -2px; }
+.throttle-table__cell { padding: var(--throttle-space-3) var(--throttle-space-2); height: 56px; box-sizing: border-box; }
+.throttle-table__scroll { overflow-x: auto; }
+
+.throttle-empty { text-align: center; padding: var(--throttle-space-6) var(--throttle-space-4); }
+.throttle-empty__title { font-weight: 600; margin: 0 0 var(--throttle-space-1); }
+.throttle-empty__description { color: var(--throttle-color-muted-foreground); margin: 0; }
+
+.throttle-avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: var(--throttle-radius-full);
+  background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground);
+  font-size: var(--throttle-font-size-xs); font-weight: 600; text-transform: uppercase;
+}
+
+.throttle-badge {
+  display: inline-block; font-size: var(--throttle-font-size-xs); font-weight: 500;
+  padding: 2px var(--throttle-space-2); border-radius: var(--throttle-radius-full);
+  background: var(--throttle-color-muted); color: var(--throttle-color-muted-foreground);
+}
+.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); }
+.throttle-badge--success { background: color-mix(in srgb, var(--throttle-color-success) 15%, transparent); color: var(--throttle-color-success); }
+.throttle-badge--warning { background: color-mix(in srgb, var(--throttle-color-warning) 15%, transparent); color: var(--throttle-color-warning); }
+.throttle-badge--danger { background: color-mix(in srgb, var(--throttle-color-danger) 15%, transparent); color: var(--throttle-color-danger); }
+
+.throttle-stack { display: flex; flex-direction: column; gap: var(--throttle-space-3); }
+.throttle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2); flex-wrap: wrap; }
+.throttle-muted { color: var(--throttle-color-muted-foreground); }
+.throttle-banner {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--throttle-space-2);
+  flex-wrap: wrap;
+  background: color-mix(in srgb, var(--throttle-color-warning) 12%, transparent);
+  color: var(--throttle-color-warning);
+  border-radius: var(--throttle-radius-sm);
+  padding: var(--throttle-space-3);
+  margin-bottom: var(--throttle-space-4);
+}
+.throttle-panel { display: flex; flex-direction: column; gap: var(--throttle-space-4); }
+/* 100dvh, not 100vh: on mobile browsers 100vh includes the space behind the
+   dynamic address/toolbar, so the page would be taller than the visible
+   viewport and the card would sit off-centre until the toolbar collapsed. */
+.throttle-page {
+  min-height: 100dvh;
+  width: 100%;
+  background: var(--throttle-color-surface);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--throttle-space-5);
+  padding: var(--throttle-space-5);
+}
+.throttle-page__logo { display: flex; justify-content: center; }
+.throttle-page__footer { color: var(--throttle-color-muted-foreground); text-align: center; font-size: var(--throttle-font-size-sm); }
+.throttle-listitem {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);
+  flex-wrap: wrap;
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius-sm);
+  padding: var(--throttle-space-3);
+}
+/* 'rows' variant: hairline rules between items instead of each item carrying
+   its own border+radius, so a panel does not read as a card inside a card. */
+.throttle-rows { display: flex; flex-direction: column; }
+.throttle-rowitem {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--throttle-space-2);
+  flex-wrap: wrap;
+  border-top: var(--throttle-border-width) solid var(--throttle-color-border);
+  padding: var(--throttle-space-3) 0;
+}
+.throttle-rowitem:first-child { border-top: none; padding-top: 0; }
+.throttle-actions {
+  display: flex; gap: var(--throttle-space-2); flex-wrap: wrap; align-items: center;
+  /* Primary buttons are full-width so a form's submit fills its card. In a row
+     of sibling actions that same rule made every button claim 100% and then
+     shrink to share the line, squeezing Resume to 59px so its label wrapped to
+     two lines inside a 48px box. A custom property INHERITS to the buttons, so
+     the row opts them back to content width without a descendant selector \u2014
+     those outrank the merchant overrides in appearance.elements. */
+  --throttle-button-width: auto;
+}
+.throttle-table__money { display: block; text-align: right; font-variant-numeric: tabular-nums; }
+.throttle-lineitem { display: flex; align-items: flex-start; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }
+/* The UA's 1em paragraph margins pushed a two-line item to 96px, so five
+   items filled a screen with mostly whitespace. These carry the spacing
+   instead. Separate classes, not a ".throttle-lineitem p" descendant
+   selector -- those outrank the merchant's appearance.elements overrides. */
+.throttle-lineitem__desc { margin: var(--throttle-space-1) 0 0; color: var(--throttle-color-muted-foreground); }
+.throttle-lineitem__meta { margin: var(--throttle-space-1) 0 0; color: var(--throttle-color-muted-foreground); font-size: var(--throttle-font-size-sm); }
+.throttle-lineitem__image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--throttle-radius-sm); flex: none; }
+.throttle-totals { display: flex; flex-direction: column; gap: var(--throttle-space-1); }
+
+/* Order and invoice detail: the record on the left, what it costs and what
+   you can do about it on the right. The rail sticks so the total and the
+   actions stay reachable on an order with thirty lines, which is exactly when
+   a buyer most wants them. Collapses below, where a sticky rail would eat a
+   phone screen. */
+.throttle-detail { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--throttle-space-6); align-items: start; }
+.throttle-detail__main { display: flex; flex-direction: column; gap: var(--throttle-space-5); min-width: 0; }
+.throttle-detail__rail {
+  display: flex; flex-direction: column; gap: var(--throttle-space-4);
+  position: sticky; top: var(--throttle-space-4);
+  padding: var(--throttle-space-4);
+  border: var(--throttle-border-width) solid var(--throttle-color-border);
+  border-radius: var(--throttle-radius-md);
+  background: var(--throttle-color-surface);
+}
+/* One column, and the rail stops sticking \u2014 on a phone a sticky summary covers
+   the very line items it is summarising. Placed AFTER the base rules above: a
+   container query adds no specificity, so the later rule wins. */
+@container (max-width: 560px) {
+  .throttle-detail { grid-template-columns: 1fr; }
+  .throttle-detail__rail { position: static; }
+}
+/* The one number the buyer came for. */
+.throttle-detail__headline { font-size: var(--throttle-font-size-xl); font-weight: 600; line-height: 1.2; }
+.throttle-detail__section { display: flex; flex-direction: column; gap: var(--throttle-space-2); }
+.throttle-detail__label { font-size: var(--throttle-font-size-sm); font-weight: 500; color: var(--throttle-color-muted-foreground); letter-spacing: .04em; text-transform: uppercase; }
+/* A rail action column: full width, stacked, so the primary reads as primary. */
+.throttle-detail__actions { display: flex; flex-direction: column; gap: var(--throttle-space-2); --throttle-button-width: 100%; }
+.throttle-detail__link { display: inline-flex; align-items: center; gap: var(--throttle-space-1); }
+
+@media (prefers-reduced-motion: reduce) {
+  .throttle-button, .throttle-field__input, .throttle-dropdown__item, .throttle-dropdown__trigger, .throttle-tabs__tab, .throttle-table__row, .throttle-modal__close {
+    transition: none;
+  }
+}
+`;
+function useInjectStyles(enabled) {
+  useInsertionEffect(() => {
+    if (!enabled) return;
+    if (typeof document === "undefined") return;
+    if (document.getElementById(THROTTLE_STYLE_ID)) return;
+    const tag = document.createElement("style");
+    tag.id = THROTTLE_STYLE_ID;
+    tag.textContent = THROTTLE_STYLES;
+    document.head.appendChild(tag);
+  }, [enabled]);
+}
+
+// src/react/components/provider.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var loadAuthModal = () => import("./AuthModal-T2GYI6ZF.js").then((m) => ({ default: m.AuthModal }));
+var loadAccountModal = () => import("./AccountModal-KA54WUFW.js").then((m) => ({ default: m.AccountModal }));
+var AuthModal = lazy(loadAuthModal);
+var AccountModal = lazy(loadAccountModal);
+function resetModal(which) {
+  if (which === "auth") AuthModal = lazy(loadAuthModal);
+  else AccountModal = lazy(loadAccountModal);
+}
+var modalLoadLogged = false;
+var ModalLoadBoundary = class extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    resetModal(this.props.which);
+    if (!modalLoadLogged) {
+      modalLoadLogged = true;
+      console.warn(`[@usethrottle/auth] the ${this.props.which} dialog failed to load or render: ${error?.message ?? "unknown error"}`);
+    }
+    this.props.onFail();
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+};
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (process.env.NODE_ENV === "production") return;
+  if (warned.has(key)) return;
+  warned.add(key);
+  console.warn(`[@usethrottle/auth] ${message}`);
+}
+var ThrottleUIContext = createContext(null);
+function useThrottle() {
+  const ctx = useContext(ThrottleUIContext);
+  if (!ctx) {
+    warnOnce(
+      "use-throttle-no-provider",
+      "useThrottle() was called without a <ThrottleProvider> above it in the tree. openSignIn/openSignUp/openAccount will do nothing \u2014 wrap your app in <ThrottleProvider> to use them."
+    );
+    return { openSignIn: () => {
+    }, openSignUp: () => {
+    }, openAccount: () => {
+    }, close: () => {
+    }, isOpen: false };
+  }
+  return {
+    openSignIn: () => ctx.openSignIn(),
+    openSignUp: () => ctx.openSignUp(),
+    openAccount: ctx.openAccount,
+    close: ctx.close,
+    isOpen: ctx.overlay !== null
+  };
+}
+function ThrottleProvider(props) {
+  const {
+    publishableKey,
+    baseUrl,
+    storage,
+    appearance,
+    localization,
+    logo,
+    injectStyles = true,
+    claimCartOnSignIn,
+    auth: injected,
+    children,
+    __captureStepUp
+  } = props;
+  useInjectStyles(injectStyles);
+  const [stepUpOpen, setStepUpOpen] = useState(false);
+  const resolveStepUp = useRef(null);
+  const claimRef = useRef(claimCartOnSignIn);
+  claimRef.current = claimCartOnSignIn;
+  const [overlay, setOverlay] = useState(null);
+  const overlayRestoreFocus = useRef(null);
+  const [accountTabs, setAccountTabs] = useState(void 0);
+  const onOverlaySuccess = useRef(null);
+  const openSignIn = useCallback((onSuccess) => {
+    onOverlaySuccess.current = onSuccess ?? null;
+    setOverlay("signIn");
+  }, []);
+  const openSignUp = useCallback((onSuccess) => {
+    onOverlaySuccess.current = onSuccess ?? null;
+    setOverlay("signUp");
+  }, []);
+  const openAccount = useCallback((opts) => {
+    onOverlaySuccess.current = null;
+    overlayRestoreFocus.current = opts?.restoreFocusTo ?? null;
+    setAccountTabs(opts?.tabs);
+    setOverlay("account");
+  }, []);
+  const closeOverlay = useCallback(() => {
+    onOverlaySuccess.current = null;
+    overlayRestoreFocus.current = null;
+    setOverlay(null);
+  }, []);
+  const handleOverlaySuccess = useCallback(() => {
+    const fn = onOverlaySuccess.current;
+    onOverlaySuccess.current = null;
+    setOverlay(null);
+    fn?.();
+  }, []);
+  const ui = useMemo(
+    () => ({ overlay, openSignIn, openSignUp, openAccount, close: closeOverlay }),
+    [overlay, openSignIn, openSignUp, openAccount, closeOverlay]
+  );
+  const askForStepUp = useCallback(
+    () => new Promise((resolve) => {
+      resolveStepUp.current = resolve;
+      setStepUpOpen(true);
+    }),
+    []
+  );
+  const pendingRef = useRef(null);
+  const auth = useMemo(() => {
+    __captureStepUp?.(askForStepUp);
+    const client = injected ?? createThrottleAuth({ publishableKey, baseUrl, storage, onStepUpRequired: askForStepUp });
+    const account = createAccount(client);
+    const claim = async () => {
+      const cartId = claimRef.current?.();
+      if (!cartId) return;
+      try {
+        await account.claimCart(cartId);
+      } catch (err) {
+        warnOnce("claim-cart", `claimCartOnSignIn failed: ${err?.message ?? err}`);
+      }
+    };
+    const track = (run) => {
+      const prior = pendingRef.current;
+      let done;
+      const mine = new Promise((r) => {
+        done = r;
+      }).finally(() => {
+        if (pendingRef.current === mine) pendingRef.current = null;
+      });
+      pendingRef.current = mine;
+      const op = (async () => {
+        if (prior) await prior;
+        return run();
+      })();
+      op.then(done, done);
+      return op;
+    };
+    return {
+      ...client,
+      signIn: (email, password) => track(async () => {
+        await client.signIn(email, password);
+        await claim();
+      }),
+      register: (email, password) => track(async () => {
+        const result = await client.register(email, password);
+        if (result.status === "active") await claim();
+        return result;
+      }),
+      whenClaimSettled: () => pendingRef.current ?? Promise.resolve()
+    };
+  }, [injected, publishableKey, baseUrl]);
+  const finishStepUp = (password) => {
+    setStepUpOpen(false);
+    const resolve = resolveStepUp.current;
+    resolveStepUp.current = null;
+    resolve?.(password);
+  };
+  const authOverlayOpen = overlay === "signIn" || overlay === "signUp";
+  const [authSeen, setAuthSeen] = useState(false);
+  const [accountSeen, setAccountSeen] = useState(false);
+  if (authOverlayOpen && !authSeen) setAuthSeen(true);
+  if (overlay === "account" && !accountSeen) setAccountSeen(true);
+  const failAuthLoad = () => {
+    setAuthSeen(false);
+    setOverlay(null);
+  };
+  const failAccountLoad = () => {
+    setAccountSeen(false);
+    setOverlay(null);
+  };
+  return /* @__PURE__ */ jsx(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ jsx(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ jsx(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ jsx(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ jsx(ConfirmProvider, { stepUpOpen, onStepUpResolve: finishStepUp, children: /* @__PURE__ */ jsxs(ThrottleUIContext.Provider, { value: ui, children: [
+    children,
+    authSeen && /* @__PURE__ */ jsx(ModalLoadBoundary, { which: "auth", onFail: failAuthLoad, children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      AuthModal,
+      {
+        open: authOverlayOpen,
+        onClose: closeOverlay,
+        initialView: overlay === "signUp" ? "signUp" : "signIn",
+        afterSignIn: handleOverlaySuccess,
+        afterSignUp: handleOverlaySuccess
+      },
+      overlay === "signUp" ? "signUp" : "signIn"
+    ) }) }),
+    accountSeen && /* @__PURE__ */ jsx(ModalLoadBoundary, { which: "account", onFail: failAccountLoad, children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AccountModal, { open: overlay === "account", onClose: closeOverlay, tabs: accountTabs, restoreFocusTo: overlayRestoreFocus.current }) }) })
+  ] }) }) }) }) }) });
+}
+
+export {
+  THROTTLE_STYLE_ID,
+  THROTTLE_STYLES,
+  warnOnce,
+  ThrottleUIContext,
+  useThrottle,
+  ThrottleProvider
+};
+//# sourceMappingURL=chunk-RCNUWITB.js.map