@usethrottle/auth 0.1.2 → 0.2.1

package/dist/react/components/index.cjs

@@ -0,0 +1,4558 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/components/index.tsx
+var components_exports = {};
+__export(components_exports, {
+  ACCOUNT_TABS: () => ACCOUNT_TABS,
+  AccountDashboard: () => AccountDashboard,
+  AccountModal: () => AccountModal,
+  AddressesPanel: () => AddressesPanel,
+  AuthFlow: () => AuthFlow,
+  AuthModal: () => AuthModal,
+  ForgotPassword: () => ForgotPassword,
+  InvoiceDetail: () => InvoiceDetail,
+  InvoicesPanel: () => InvoicesPanel,
+  OrderDetail: () => OrderDetail,
+  OrdersPanel: () => OrdersPanel,
+  PaymentMethodsPanel: () => PaymentMethodsPanel,
+  ProfilePanel: () => ProfilePanel,
+  Protect: () => Protect,
+  ResetPassword: () => ResetPassword,
+  SecurityPanel: () => SecurityPanel,
+  SignIn: () => SignIn,
+  SignInButton: () => SignInButton,
+  SignInPage: () => SignInPage,
+  SignOutButton: () => SignOutButton,
+  SignUp: () => SignUp,
+  SignUpButton: () => SignUpButton,
+  SignUpPage: () => SignUpPage,
+  SignedIn: () => SignedIn,
+  SignedOut: () => SignedOut,
+  SubscriptionsPanel: () => SubscriptionsPanel,
+  THROTTLE_ELEMENT_KEYS: () => THROTTLE_ELEMENT_KEYS,
+  THROTTLE_STYLES: () => THROTTLE_STYLES,
+  THROTTLE_STYLE_ID: () => THROTTLE_STYLE_ID,
+  ThrottleAuthError: () => ThrottleAuthError,
+  ThrottleAuthProvider: () => ThrottleAuthProvider,
+  ThrottleProvider: () => ThrottleProvider,
+  UserButton: () => UserButton,
+  VerifyEmail: () => VerifyEmail,
+  VerifyEmailBanner: () => VerifyEmailBanner,
+  createAccount: () => createAccount,
+  createThrottleAuth: () => createThrottleAuth,
+  enUS: () => enUS,
+  formatDate: () => formatDate,
+  formatMoney: () => formatMoney,
+  localStorageAdapter: () => localStorageAdapter,
+  memoryStorage: () => memoryStorage,
+  useAddresses: () => useAddresses,
+  useAuth: () => useAuth,
+  useAuthContext: () => useAuthContext,
+  useCustomer: () => useCustomer,
+  useInvoice: () => useInvoice,
+  useInvoices: () => useInvoices,
+  useOrder: () => useOrder,
+  useOrders: () => useOrders,
+  useSavedCards: () => useSavedCards,
+  useSubscriptions: () => useSubscriptions,
+  useThrottle: () => useThrottle
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/react/components/provider.tsx
+var import_react29 = require("react");
+
+// src/errors.ts
+var ThrottleAuthError = class extends Error {
+  code;
+  statusCode;
+  retryAfter;
+  details;
+  constructor(args) {
+    super(args.message);
+    this.name = "ThrottleAuthError";
+    this.code = args.code;
+    this.statusCode = args.statusCode;
+    this.retryAfter = args.retryAfter;
+    this.details = args.details;
+  }
+};
+
+// src/request.ts
+async function request(input) {
+  const headers = { "X-API-Key": input.publishableKey };
+  if (input.body !== void 0) headers["Content-Type"] = "application/json";
+  if (input.accessToken) headers.Authorization = `Bearer ${input.accessToken}`;
+  if (input.stepUpToken) headers["X-Step-Up"] = input.stepUpToken;
+  const res = await fetch(`${input.baseUrl}/v1/storefront${input.path}`, {
+    method: input.method,
+    headers,
+    ...input.body !== void 0 ? { body: JSON.stringify(input.body) } : {}
+  });
+  const text = await res.text();
+  let parsed = {};
+  try {
+    parsed = text ? JSON.parse(text) : {};
+  } catch {
+  }
+  if (!res.ok) {
+    const e = parsed?.error ?? {};
+    const ra = Number(res.headers.get("retry-after"));
+    throw new ThrottleAuthError({
+      code: e.code ?? "request_failed",
+      message: e.message ?? `Request failed with ${res.status}`,
+      statusCode: res.status,
+      retryAfter: Number.isFinite(ra) && ra >= 0 ? ra : void 0,
+      details: e.details
+    });
+  }
+  return parsed && typeof parsed === "object" && "data" in parsed ? parsed.data : parsed ?? {};
+}
+
+// src/session.ts
+var SessionState = class {
+  #snapshot = { status: "loading", customer: null, emailVerified: false };
+  #accessToken = null;
+  #expiresAt = null;
+  #listeners = /* @__PURE__ */ new Set();
+  get() {
+    return this.#snapshot;
+  }
+  accessToken() {
+    return this.#accessToken;
+  }
+  expiresAt() {
+    return this.#expiresAt;
+  }
+  setSession(session) {
+    this.#accessToken = session.accessToken;
+    this.#expiresAt = Date.parse(session.expiresAt);
+    this.#publish({
+      status: "authenticated",
+      customer: session.customer,
+      emailVerified: Boolean(session.customer?.emailVerified)
+    });
+  }
+  setStatus(status) {
+    this.#publish({ ...this.#snapshot, status });
+  }
+  clear() {
+    this.#accessToken = null;
+    this.#expiresAt = null;
+    this.#publish({ status: "unauthenticated", customer: null, emailVerified: false });
+  }
+  subscribe(fn) {
+    this.#listeners.add(fn);
+    return () => {
+      this.#listeners.delete(fn);
+    };
+  }
+  #publish(next) {
+    const same = next.status === this.#snapshot.status && next.emailVerified === this.#snapshot.emailVerified && customerEquals(next.customer, this.#snapshot.customer);
+    if (same) return;
+    this.#snapshot = next;
+    for (const fn of [...this.#listeners]) {
+      try {
+        fn(next);
+      } catch {
+      }
+    }
+  }
+};
+function customerEquals(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const k of keys) if (a[k] !== b[k]) return false;
+  return true;
+}
+
+// src/storage.ts
+function memoryStorage() {
+  const map = /* @__PURE__ */ new Map();
+  return {
+    get: (k) => map.get(k) ?? null,
+    set: (k, v) => void map.set(k, v),
+    remove: (k) => void map.delete(k)
+  };
+}
+function localStorageAdapter() {
+  const fallback = memoryStorage();
+  const ls = () => {
+    try {
+      return typeof localStorage !== "undefined" ? localStorage : null;
+    } catch {
+      return null;
+    }
+  };
+  return {
+    get(k) {
+      try {
+        const v = ls()?.getItem(k);
+        if (v != null) return v;
+      } catch {
+      }
+      return fallback.get(k);
+    },
+    set(k, v) {
+      fallback.set(k, v);
+      try {
+        ls()?.setItem(k, v);
+      } catch {
+      }
+    },
+    remove(k) {
+      fallback.remove(k);
+      try {
+        ls()?.removeItem(k);
+      } catch {
+      }
+    }
+  };
+}
+
+// src/client.ts
+var DEFAULT_BASE_URL = "https://api.usethrottle.dev";
+var REFRESH_SKEW_MS = 3e4;
+function createThrottleAuth(config) {
+  const baseUrl = (config.baseUrl ?? DEFAULT_BASE_URL).replace(/\/$/, "");
+  const storage = config.storage ?? localStorageAdapter();
+  const storageKey = `throttle_auth_rt:${config.publishableKey}`;
+  const lockName = `throttle_auth_refresh:${config.publishableKey}`;
+  const state = new SessionState();
+  let refreshInFlight = null;
+  let stepUpToken = null;
+  let stepUpExpiresAt = 0;
+  const base = { baseUrl, publishableKey: config.publishableKey };
+  async function persist(session) {
+    state.setSession(session);
+    await storage.set(storageKey, session.refreshToken);
+  }
+  async function forget() {
+    stepUpToken = null;
+    state.clear();
+    await storage.remove(storageKey);
+  }
+  function withLock(fn) {
+    const locks = globalThis.navigator?.locks;
+    return locks?.request ? locks.request(lockName, fn) : fn();
+  }
+  async function doRefresh() {
+    await withLock(async () => {
+      const refreshToken = await storage.get(storageKey);
+      if (!refreshToken) {
+        await forget();
+        throw new ThrottleAuthError({ code: "session_revoked", message: "No session", statusCode: 401 });
+      }
+      try {
+        const data = await request({ ...base, method: "POST", path: "/auth/refresh", body: { refreshToken } });
+        await persist(data);
+      } catch (err) {
+        const refused = err instanceof ThrottleAuthError && (err.statusCode === 401 || err.statusCode === 403);
+        if (refused) await forget();
+        throw err;
+      }
+    });
+  }
+  function refresh() {
+    if (!refreshInFlight) {
+      refreshInFlight = doRefresh().finally(() => {
+        refreshInFlight = null;
+      });
+    }
+    return refreshInFlight;
+  }
+  async function accessToken() {
+    const expires = state.expiresAt();
+    if (state.accessToken() && expires && expires - Date.now() > REFRESH_SKEW_MS) {
+      return state.accessToken();
+    }
+    if (await storage.get(storageKey)) {
+      await refresh();
+      return state.accessToken();
+    }
+    return state.accessToken();
+  }
+  async function ensureStepUp() {
+    if (stepUpToken && stepUpExpiresAt > Date.now()) return true;
+    if (!config.onStepUpRequired) return false;
+    const password = await config.onStepUpRequired();
+    if (!password) return false;
+    await stepUp(password);
+    return true;
+  }
+  async function stepUp(password) {
+    const data = await request({
+      ...base,
+      method: "POST",
+      path: "/auth/step-up",
+      accessToken: await accessToken() ?? void 0,
+      body: { password }
+    });
+    stepUpToken = data.stepUpToken;
+    stepUpExpiresAt = Date.now() + (Number(data.expiresIn) || 300) * 1e3 - 5e3;
+  }
+  async function call(method, path, body) {
+    let retriedAuth = false;
+    let retriedStepUp = false;
+    let sendStepUp = false;
+    for (; ; ) {
+      const token = await accessToken();
+      try {
+        return await request({
+          ...base,
+          method,
+          path,
+          body,
+          accessToken: token ?? void 0,
+          stepUpToken: sendStepUp ? stepUpToken ?? void 0 : void 0
+        });
+      } catch (err) {
+        const e = err;
+        const expired = e.statusCode === 401 && (e.code === "unauthorized" || e.code === "token_expired" || e.code === "session_revoked");
+        if (expired && !retriedAuth) {
+          retriedAuth = true;
+          await refresh();
+          continue;
+        }
+        if (e.code === "step_up_required" && !retriedStepUp) {
+          retriedStepUp = true;
+          if (await ensureStepUp()) {
+            sendStepUp = true;
+            continue;
+          }
+        }
+        throw err;
+      }
+    }
+  }
+  return {
+    async register(email, password) {
+      const data = await request({ ...base, method: "POST", path: "/auth/register", body: { email, password } });
+      if (data?.status === "pending") return { status: "pending" };
+      await persist(data);
+      return { status: "active" };
+    },
+    async signIn(email, password) {
+      const data = await request({ ...base, method: "POST", path: "/auth/login", body: { email, password } });
+      await persist(data);
+    },
+    async signOut() {
+      try {
+        await call("POST", "/auth/logout");
+      } catch {
+      }
+      await forget();
+    },
+    async signOutEverywhere() {
+      try {
+        await call("POST", "/auth/logout-all");
+      } catch {
+      }
+      await forget();
+    },
+    async restore() {
+      if (!await storage.get(storageKey)) {
+        state.setStatus("unauthenticated");
+        return;
+      }
+      try {
+        await refresh();
+      } catch {
+      }
+    },
+    getSnapshot: () => state.get(),
+    subscribe: (fn) => state.subscribe(fn),
+    stepUp,
+    call,
+    async verifyEmail(token) {
+      await request({ ...base, method: "POST", path: "/auth/verify-email", body: { token } });
+      if (await storage.get(storageKey)) {
+        try {
+          await refresh();
+        } catch {
+        }
+      }
+    },
+    async resendVerification() {
+      await call("POST", "/auth/verify-email/resend");
+    },
+    async forgotPassword(email) {
+      await request({ ...base, method: "POST", path: "/auth/forgot-password", body: { email } });
+    },
+    async resetPassword(token, password) {
+      await request({ ...base, method: "POST", path: "/auth/reset-password", body: { token, password } });
+      await forget();
+    },
+    async changePassword(password) {
+      await call("POST", "/me/change-password", { password });
+      try {
+        await refresh();
+      } catch {
+      }
+    },
+    async listSessions() {
+      return call("GET", "/me/sessions");
+    },
+    async revokeSession(id) {
+      const mine = await call("GET", "/me/sessions");
+      const current = mine.find((s) => s.current);
+      await call("DELETE", `/me/sessions/${encodeURIComponent(id)}`);
+      if (current?.id === id) await forget();
+    }
+  };
+}
+
+// src/account.ts
+var seg = (v) => encodeURIComponent(v);
+function query(page) {
+  const params = new URLSearchParams();
+  if (page?.cursor) params.set("cursor", page.cursor);
+  if (page?.limit != null) params.set("limit", String(page.limit));
+  const s = params.toString();
+  return s ? `?${s}` : "";
+}
+function createAccount(auth) {
+  const { call } = auth;
+  return {
+    getProfile: () => call("GET", "/me"),
+    updateProfile: (patch) => call("PATCH", "/me", patch),
+    listAddresses: () => call("GET", "/me/addresses"),
+    createAddress: (input) => call("POST", "/me/addresses", input),
+    updateAddress: (id, patch) => call("PATCH", `/me/addresses/${seg(id)}`, patch),
+    deleteAddress: (id) => call("DELETE", `/me/addresses/${seg(id)}`),
+    listPaymentMethods: () => call("GET", "/me/payment-methods"),
+    // The platform has no "change this subscription's card" capability, so
+    // this is how a buyer changes what they are billed on: move the default.
+    setDefaultPaymentMethod: (id) => call("PATCH", `/me/payment-methods/${seg(id)}`, { isDefault: true }),
+    deletePaymentMethod: (id) => call("DELETE", `/me/payment-methods/${seg(id)}`),
+    listOrders: (page) => call("GET", `/me/orders${query(page)}`),
+    getOrder: (id) => call("GET", `/me/orders/${seg(id)}`),
+    listInvoices: (page) => call("GET", `/me/invoices${query(page)}`),
+    getInvoice: (id) => call("GET", `/me/invoices/${seg(id)}`),
+    getInvoicePdfUrl: (id) => call("GET", `/me/invoices/${seg(id)}/pdf`),
+    listSubscriptions: (page) => call("GET", `/me/subscriptions${query(page)}`),
+    getSubscription: (id) => call("GET", `/me/subscriptions/${seg(id)}`),
+    cancelSubscription: (id, opts) => call("POST", `/me/subscriptions/${seg(id)}/cancel`, opts),
+    pauseSubscription: (id) => call("POST", `/me/subscriptions/${seg(id)}/pause`),
+    resumeSubscription: (id) => call("POST", `/me/subscriptions/${seg(id)}/resume`),
+    claimCart: (cartId) => call("POST", `/me/carts/${seg(cartId)}/claim`)
+  };
+}
+
+// src/react/context.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Ctx = (0, import_react.createContext)(null);
+function ThrottleAuthProvider(props) {
+  const { auth: injected, publishableKey, baseUrl, storage, onStepUpRequired, children } = props;
+  const value = (0, import_react.useMemo)(() => {
+    const auth = injected ?? createThrottleAuth({ publishableKey, baseUrl, storage, onStepUpRequired });
+    return { auth, account: createAccount(auth) };
+  }, [injected, publishableKey, baseUrl]);
+  const restored = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (restored.current === value.auth) return;
+    restored.current = value.auth;
+    void value.auth.restore();
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ctx.Provider, { value, children });
+}
+function useCtx() {
+  const ctx = (0, import_react.useContext)(Ctx);
+  if (!ctx) throw new Error("useAuth must be used inside a <ThrottleAuthProvider>");
+  return ctx;
+}
+function useAuthContext() {
+  return useCtx();
+}
+function useAuth() {
+  const { auth, account } = useCtx();
+  const snapshot = (0, import_react.useSyncExternalStore)(auth.subscribe, auth.getSnapshot, auth.getSnapshot);
+  return {
+    ...snapshot,
+    isLoading: snapshot.status === "loading",
+    isAuthenticated: snapshot.status === "authenticated",
+    auth,
+    account
+  };
+}
+
+// src/react/components/appearance.tsx
+var import_react2 = require("react");
+
+// src/react/components/contrast.ts
+var DEFAULT_DANGER = { light: "#c2321f", dark: "#ff6b58" };
+var DEFAULT_PRIMARY_FOREGROUND = { light: "#ffffff", dark: "#0d1117" };
+function channel(value) {
+  const c = value / 255;
+  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function luminance(hex) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  const h = m[1].length === 3 ? m[1].replace(/./g, (c) => c + c) : m[1];
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function contrastRatio(a, b) {
+  const la = luminance(a);
+  const lb = luminance(b);
+  if (la === null || lb === null) return null;
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+function primaryContrastWarning(variables, theme) {
+  const primary = variables.colorPrimary;
+  if (!primary) return null;
+  const themes = theme === "auto" ? ["light", "dark"] : [theme];
+  const failures = [];
+  for (const t of themes) {
+    const fg = variables.colorPrimaryForeground ?? DEFAULT_PRIMARY_FOREGROUND[t];
+    const ratio = contrastRatio(primary, fg);
+    if (ratio === null) return null;
+    if (ratio < 4.5) failures.push(`${t} ${ratio.toFixed(2)}:1 against ${fg}`);
+  }
+  if (failures.length === 0) return null;
+  const advice = variables.colorPrimaryForeground ? "Pick a foreground with more contrast against it." : "You set `colorPrimary` without `colorPrimaryForeground`, so the theme default is being used. Set both.";
+  return `[@usethrottle/auth] Primary button text may be hard to read on ${primary}: ${failures.join("; ")}. WCAG asks for 4.5:1. ${advice}`;
+}
+function toLab(hex) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  const h = m[1].length === 3 ? m[1].replace(/./g, (c) => c + c) : m[1];
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(h.slice(i, i + 2), 16) / 255;
+    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  const X = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+  const Y = r * 0.2126 + g * 0.7152 + b * 0.0722;
+  const Z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+  const f = (t) => t > 8856e-6 ? Math.cbrt(t) : 7.787 * t + 16 / 116;
+  const [fx, fy, fz] = [f(X), f(Y), f(Z)];
+  return [116 * fy - 16, 500 * (fx - fy), 200 * (fy - fz)];
+}
+function colourDistance(a, b) {
+  const la = toLab(a);
+  const lb = toLab(b);
+  if (!la || !lb) return null;
+  return Math.hypot(la[0] - lb[0], la[1] - lb[1], la[2] - lb[2]);
+}
+var MIN_DISTINCT = 25;
+function dangerCollisionWarning(variables, theme) {
+  const primary = variables.colorPrimary;
+  if (!primary) return null;
+  const themes = theme === "auto" ? ["light", "dark"] : [theme];
+  const failures = [];
+  for (const t of themes) {
+    const danger = variables.colorDanger ?? DEFAULT_DANGER[t];
+    const d = colourDistance(primary, danger);
+    if (d === null) return null;
+    if (d < MIN_DISTINCT) failures.push(`${t} \u0394E ${d.toFixed(1)} against ${danger}`);
+  }
+  if (failures.length === 0) return null;
+  return `[@usethrottle/auth] Your brand colour ${primary} is too close to the destructive colour to tell apart: ${failures.join("; ")}. Delete and Edit sit side by side in the account panels and a buyer distinguishes them by colour alone, so pick a more distinct \`colorPrimary\`, or override \`colorDanger\` to something further from it.`;
+}
+
+// src/react/components/appearance.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var warnedPairings = /* @__PURE__ */ new Set();
+function warnOnUnreadablePrimary(variables, theme) {
+  if (process.env.NODE_ENV === "production") return;
+  const key = `${variables.colorPrimary}|${variables.colorPrimaryForeground}|${variables.colorDanger}|${theme}`;
+  if (warnedPairings.has(key)) return;
+  const messages = [
+    primaryContrastWarning(variables, theme),
+    dangerCollisionWarning(variables, theme)
+  ].filter(Boolean);
+  if (messages.length === 0) return;
+  warnedPairings.add(key);
+  for (const m of messages) console.warn(m);
+}
+var VARIABLE_PROPERTY = {
+  colorPrimary: "--throttle-color-primary",
+  colorPrimaryForeground: "--throttle-color-primary-foreground",
+  colorBackground: "--throttle-color-background",
+  colorSurface: "--throttle-color-surface",
+  colorForeground: "--throttle-color-foreground",
+  colorMuted: "--throttle-color-muted",
+  colorMutedForeground: "--throttle-color-muted-foreground",
+  colorBorder: "--throttle-color-border",
+  colorDanger: "--throttle-color-danger",
+  colorDangerSurface: "--throttle-color-danger-surface",
+  colorDangerBorder: "--throttle-color-danger-border",
+  colorSuccess: "--throttle-color-success",
+  colorSuccessSurface: "--throttle-color-success-surface",
+  colorSuccessBorder: "--throttle-color-success-border",
+  colorWarning: "--throttle-color-warning",
+  colorWarningSurface: "--throttle-color-warning-surface",
+  colorWarningBorder: "--throttle-color-warning-border",
+  fontFamily: "--throttle-font-family",
+  fontSize: "--throttle-font-size",
+  borderRadius: "--throttle-radius",
+  borderWidth: "--throttle-border-width",
+  spacing: "--throttle-spacing",
+  shadowCard: "--throttle-shadow-card",
+  shadowPopover: "--throttle-shadow-popover",
+  transition: "--throttle-transition",
+  zModal: "--throttle-z-modal",
+  zPopover: "--throttle-z-popover"
+};
+var THROTTLE_ELEMENT_KEYS = [
+  // shared primitives
+  "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",
+  // auth
+  "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",
+  // user button
+  "userButton.root",
+  "userButton.trigger",
+  "userButton.menu",
+  "userButton.identity",
+  "userButton.email",
+  "userButton.badge",
+  "userButton.item",
+  "userButton.manageButton",
+  "userButton.signOutButton",
+  "userButton.signOutAllButton",
+  // account
+  "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.table",
+  "paymentMethodsPanel.row",
+  "ordersPanel.root",
+  "ordersPanel.table",
+  "ordersPanel.row",
+  "ordersPanel.list",
+  "ordersPanel.item",
+  "ordersPanel.viewButton",
+  "orderDetail.root",
+  "orderDetail.backButton",
+  "orderDetail.lineItems",
+  "orderDetail.lineItem",
+  "orderDetail.totals",
+  "invoicesPanel.root",
+  "invoicesPanel.table",
+  "invoicesPanel.row",
+  "invoicesPanel.list",
+  "invoicesPanel.item",
+  "invoicesPanel.viewButton",
+  "invoiceDetail.root",
+  "invoiceDetail.backButton",
+  "invoiceDetail.downloadButton",
+  "invoiceDetail.totals",
+  "subscriptionsPanel.root",
+  "subscriptionsPanel.list",
+  "subscriptionsPanel.item",
+  "subscriptionsPanel.cancelButton",
+  "subscriptionsPanel.cancelNowButton",
+  "subscriptionsPanel.pauseButton",
+  "subscriptionsPanel.resumeButton",
+  "subscriptionsPanel.table",
+  "subscriptionsPanel.row",
+  "securityPanel.root",
+  "securityPanel.passwordForm",
+  "securityPanel.passwordButton",
+  "securityPanel.sessionList",
+  "securityPanel.sessionItem",
+  "securityPanel.revokeButton",
+  "securityPanel.revokeAllButton",
+  "securityPanel.table",
+  "securityPanel.row"
+];
+var Ctx2 = (0, import_react2.createContext)(null);
+function AppearanceProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Ctx2.Provider, { value: props.value, children: props.children });
+}
+function useAppearance(local) {
+  const provider = (0, import_react2.useContext)(Ctx2);
+  return (0, import_react2.useMemo)(() => {
+    const theme = local?.theme ?? provider?.theme ?? "light";
+    const variables = { ...provider?.variables, ...local?.variables };
+    const elements = { ...provider?.elements, ...local?.elements };
+    const slots = { ...provider?.components, ...local?.components };
+    const style = {};
+    for (const [key, value] of Object.entries(variables)) {
+      const property = VARIABLE_PROPERTY[key];
+      if (property && value != null) style[property] = value;
+    }
+    warnOnUnreadablePrimary(variables, theme);
+    return {
+      theme,
+      rootProps: { className: "throttle-root", style, "data-throttle-theme": theme },
+      el(key, base) {
+        const extra = elements[key];
+        return {
+          className: [base, extra].filter(Boolean).join(" ") || void 0,
+          "data-throttle-element": key
+        };
+      },
+      slots
+    };
+  }, [provider, local]);
+}
+function useAppearanceProviderValue(local) {
+  const provider = (0, import_react2.useContext)(Ctx2);
+  return (0, import_react2.useMemo)(
+    () => ({
+      theme: local?.theme ?? provider?.theme,
+      variables: { ...provider?.variables, ...local?.variables },
+      elements: { ...provider?.elements, ...local?.elements },
+      components: { ...provider?.components, ...local?.components }
+    }),
+    [provider, local]
+  );
+}
+
+// src/react/components/branding.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Ctx3 = (0, import_react3.createContext)(null);
+function BrandLogoProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Ctx3.Provider, { value: props.value, children: props.children });
+}
+function useBrandLogo(local) {
+  const provider = (0, import_react3.useContext)(Ctx3);
+  return local ?? provider ?? null;
+}
+
+// src/react/components/localization.tsx
+var import_react4 = require("react");
+
+// src/react/forms/messages.ts
+function waitCopy(seconds) {
+  if (!seconds || !Number.isFinite(seconds)) return "Please wait a moment and try again.";
+  if (seconds < 60) return `Please wait ${Math.ceil(seconds)} seconds and try again.`;
+  const minutes = Math.ceil(seconds / 60);
+  return `Please wait ${minutes} ${minutes === 1 ? "minute" : "minutes"} and try again.`;
+}
+function messageForError(err) {
+  const e = err;
+  switch (e?.code) {
+    case "invalid_credentials":
+      return "That email or password is not correct.";
+    case "weak_password":
+      return e.message || "Please choose a stronger password.";
+    case "too_many_attempts":
+      return `Too many attempts. ${waitCopy(e.retryAfter)}`;
+    case "verification_required":
+      return "Please verify your email address to continue.";
+    case "step_up_required":
+      return "Please re-enter your password to continue.";
+    case "session_revoked":
+      return "Your session has ended. Please sign in again.";
+    case "token_expired":
+    case "token_invalid":
+    case "token_already_used":
+      return "That link is no longer valid. Please request a new link.";
+    case "auth_unavailable":
+      return "Accounts are briefly unavailable. Please try again shortly.";
+    case "origin_not_allowed":
+    case "auth_not_enabled":
+    case "invalid_api_key":
+    case "environment_mismatch":
+      return "Accounts are not available right now. Please contact support.";
+    case "cart_already_claimed":
+      return "That cart belongs to a different account.";
+    case "not_found":
+      return "We could not find that.";
+    case "payment_method_in_use":
+      return e.message || "That payment method is in use and cannot be removed.";
+    default:
+      return "Something went wrong. Please try again.";
+  }
+}
+
+// src/react/components/localization.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var enUS = {
+  locale: "en-US",
+  common: {
+    save: "Save",
+    cancel: "Cancel",
+    delete: "Delete",
+    edit: "Edit",
+    back: "Back",
+    retry: "Try again",
+    loading: "Loading\u2026",
+    close: "Close",
+    confirm: "Are you sure?",
+    somethingWentWrong: "Something went wrong.",
+    actions: "Actions",
+    view: "View"
+  },
+  signIn: {
+    title: "Sign in",
+    description: "Sign in to your account.",
+    email: "Email",
+    password: "Password",
+    submitButton: "Sign in",
+    forgotLink: "Forgot your password?",
+    switchPrompt: "Don't have an account?",
+    switchLink: "Sign up"
+  },
+  signUp: {
+    title: "Create your account",
+    description: "",
+    email: "Email",
+    password: "Password",
+    submitButton: "Create account",
+    switchPrompt: "Already have an account?",
+    switchLink: "Sign in",
+    // Deliberately conditional. Registering onto an address that already has
+    // an account returns the same `pending` status and sends no email, so
+    // asserting one was sent would be false for that buyer.
+    pendingNotice: "If that email is new, check your inbox for a link to finish signing up."
+  },
+  forgotPassword: {
+    title: "Reset your password",
+    description: "We will email you a link if an account exists.",
+    email: "Email",
+    submitButton: "Send reset link",
+    sentNotice: "If an account exists for that email, a reset link is on its way.",
+    backLink: "Back to sign in"
+  },
+  resetPassword: {
+    title: "Choose a new password",
+    password: "New password",
+    submitButton: "Update password",
+    doneNotice: "Your password has been updated.",
+    missingToken: "That link is missing its token. Request a new one."
+  },
+  verifyEmail: {
+    title: "Verify your email",
+    verifying: "Confirming your email\u2026",
+    success: "Your email is verified.",
+    resendButton: "Resend the link",
+    resentNotice: "We sent a new link.",
+    instructions: "Check your inbox for a verification link."
+  },
+  stepUp: {
+    title: "Confirm your password",
+    description: "For your security, please re-enter your password to continue.",
+    password: "Password",
+    submitButton: "Confirm",
+    cancelButton: "Cancel"
+  },
+  userButton: {
+    manage: "Manage account",
+    signOut: "Sign out",
+    signOutAll: "Sign out of all devices",
+    verified: "Verified",
+    unverified: "Unverified",
+    openMenu: "Account menu"
+  },
+  verifyBanner: {
+    message: "Verify your email to see your full account history.",
+    resendButton: "Resend link",
+    dismissButton: "Dismiss"
+  },
+  account: {
+    title: "Your account",
+    tabs: {
+      profile: "Profile",
+      addresses: "Addresses",
+      paymentMethods: "Saved cards",
+      orders: "Orders",
+      invoices: "Invoices",
+      subscriptions: "Subscriptions",
+      security: "Security"
+    }
+  },
+  profile: {
+    firstName: "First name",
+    lastName: "Last name",
+    phone: "Phone",
+    company: "Company",
+    acceptsMarketing: "Send me product news and offers",
+    email: "Email",
+    emailReadOnly: "Your email address cannot be changed here.",
+    saveButton: "Save changes",
+    savedNotice: "Profile updated."
+  },
+  addresses: {
+    addButton: "Add address",
+    defaultBadge: "Default",
+    makeDefault: "Make default",
+    empty: "No saved addresses",
+    emptyDescription: "Addresses you use at checkout can be saved here.",
+    label: "Label",
+    firstName: "First name",
+    lastName: "Last name",
+    company: "Company",
+    addressLine1: "Address",
+    addressLine2: "Apartment, suite, etc.",
+    city: "City",
+    stateProvince: "State / Province",
+    postalCode: "Postal code",
+    countryCode: "Country code",
+    phone: "Phone",
+    deleteConfirm: "Delete this address?",
+    columnAddress: "Address"
+  },
+  paymentMethods: {
+    empty: "No saved cards",
+    // True today and still true once a buyer-plane add-card route exists.
+    emptyDescription: "Cards you use at checkout will be saved here.",
+    // Shown whenever the panel is empty with no error and the buyer is not
+    // verified — including simply being signed out — matching the copy
+    // orders/invoices/subscriptions already show in that state.
+    gatedDescription: "Verify your email to see your saved cards.",
+    defaultBadge: "Default",
+    makeDefault: "Make default",
+    expires: "Expires",
+    deleteConfirm: "Remove this card?",
+    columnCard: "Card"
+  },
+  orders: {
+    empty: "No orders yet",
+    emptyDescription: "Orders you place will appear here.",
+    gatedDescription: "Verify your email to see your order history.",
+    number: "Order",
+    date: "Date",
+    status: "Status",
+    total: "Total",
+    /**
+     * Display copy for `order.status`. Mirrors ORDER_STATUS_META in
+     * `@commerce/orders`, which is the server's single source of status copy —
+     * copied rather than imported because this package ships with no runtime
+     * dependencies and is a client for the wire API, not for server packages.
+     * If a status is added there, add it here.
+     */
+    statusLabels: {
+      draft: "Draft",
+      pending: "Pending",
+      processing: "Processing",
+      partiallyFulfilled: "Partially fulfilled",
+      fulfilled: "Fulfilled",
+      cancelled: "Cancelled",
+      closed: "Closed"
+    },
+    /**
+     * The money half of the label, shown as a second badge beside the
+     * lifecycle one. `captured` is deliberately empty: paid in full is the
+     * assumed happy path, and announcing it on every settled order is noise.
+     */
+    paymentLabels: {
+      pending: "Awaiting payment",
+      authorized: "Authorized",
+      captured: "",
+      partiallyPaid: "Partially paid",
+      partiallyRefunded: "Partially refunded",
+      refunded: "Refunded",
+      failed: "Payment failed",
+      voided: "Voided",
+      processing: "Payment processing",
+      disputed: "Disputed",
+      expired: "Authorization expired"
+    },
+    items: "Items",
+    subtotal: "Subtotal",
+    discount: "Discount",
+    shipping: "Shipping",
+    tax: "Tax",
+    quantity: "Qty",
+    shippingAddress: "Shipping address",
+    billingAddress: "Billing address",
+    viewSubscription: "View subscription"
+  },
+  invoices: {
+    empty: "No invoices yet",
+    emptyDescription: "Invoices will appear here.",
+    gatedDescription: "Verify your email to see your invoices.",
+    number: "Invoice",
+    issued: "Issued",
+    due: "Due",
+    status: "Status",
+    total: "Total",
+    refunded: "Refunded",
+    period: "Period",
+    downloadButton: "Download PDF",
+    /** Display copy for `invoice.status` — the wire values are paid|open|void. */
+    statusLabels: { paid: "Paid", open: "Open", void: "Void" },
+    downloadUnavailable: "This invoice is not available to download right now."
+  },
+  subscriptions: {
+    empty: "No subscriptions",
+    emptyDescription: "Subscriptions will appear here.",
+    gatedDescription: "Verify your email to see your subscriptions.",
+    renewsOn: "Renews on",
+    endsOn: "Ends on",
+    cancelledOn: "Cancelled on",
+    trialEnds: "Trial ends",
+    cancelButton: "Cancel",
+    cancelAtPeriodEnd: "Cancel at period end",
+    cancelNow: "Cancel immediately",
+    pauseButton: "Pause",
+    resumeButton: "Resume",
+    cancelConfirm: "Cancel this subscription?",
+    cancelScheduled: "Cancels at the end of the period",
+    columnPlan: "Plan",
+    columnPrice: "Price",
+    columnRenews: "Renews",
+    columnStatus: "Status",
+    /**
+     * Display copy for `subscription.status`. Mirrors SubscriptionStatus in
+     * `@commerce/subscriptions`; copied rather than imported because this
+     * package has no runtime dependencies. Without it a buyer in dunning saw
+     * the literal pill `past_due`.
+     */
+    statusLabels: {
+      active: "Active",
+      paused: "Paused",
+      cancelled: "Cancelled",
+      pastDue: "Payment overdue",
+      trialing: "Trial",
+      unpaid: "Unpaid"
+    }
+  },
+  security: {
+    passwordTitle: "Change password",
+    newPassword: "New password",
+    changeButton: "Update password",
+    changedNotice: "Password updated.",
+    sessionsTitle: "Devices",
+    thisDevice: "This device",
+    lastActive: "Last active",
+    revokeButton: "Sign out",
+    revokeAllButton: "Sign out of all other devices",
+    sessionsEmpty: "No other devices",
+    columnDevice: "Device"
+  },
+  errors: {}
+};
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function deepMerge(base, over, path = "") {
+  if (!over) return base;
+  const out = Array.isArray(base) ? [...base] : { ...base };
+  for (const [key, value] of Object.entries(over)) {
+    if (value == null) continue;
+    const current = base[key];
+    const keyPath = path ? `${path}.${key}` : key;
+    const currentIsObject = isPlainObject(current);
+    const valueIsObject = isPlainObject(value);
+    if (current !== void 0 && currentIsObject !== valueIsObject) {
+      if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+        console.warn(
+          `[useCopy] ignoring localization override at "${keyPath}": expected ${currentIsObject ? "an object" : "a string"}, got ${valueIsObject ? "an object" : typeof value}`
+        );
+      }
+      continue;
+    }
+    out[key] = currentIsObject && valueIsObject ? deepMerge(current, value, keyPath) : value;
+  }
+  return out;
+}
+var Ctx4 = (0, import_react4.createContext)(null);
+function LocalizationProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Ctx4.Provider, { value: props.value, children: props.children });
+}
+function useCopy(local) {
+  const provider = (0, import_react4.useContext)(Ctx4);
+  return (0, import_react4.useMemo)(() => {
+    const t = deepMerge(deepMerge(enUS, provider), local);
+    return {
+      t,
+      locale: t.locale,
+      /**
+       * A merchant's `errors` map wins; otherwise the shipped mapper decides.
+       * `messageForError` stays the floor because it encodes two deliberate
+       * non-passthroughs — `invalid_credentials` stays vague to avoid account
+       * enumeration, and unknown codes stay generic.
+       */
+      errorMessage(err) {
+        const code = err?.code;
+        const override = code ? t.errors[code] : void 0;
+        return override ?? messageForError(err);
+      }
+    };
+  }, [provider, local]);
+}
+
+// src/react/components/styles.ts
+var import_react5 = require("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;
+  --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-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-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: 400px;
+  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);
+  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); min-height: 1rem; line-height: 1rem; }
+
+.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;
+  transition: opacity var(--throttle-transition), background-color var(--throttle-transition), border-color var(--throttle-transition), filter var(--throttle-transition), box-shadow var(--throttle-transition);
+}
+.throttle-button:disabled { opacity: .55; cursor: not-allowed; }
+.throttle-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--throttle-color-background), 0 0 0 4px var(--throttle-color-primary); }
+.throttle-button--primary { background: var(--throttle-color-primary); color: var(--throttle-color-primary-foreground); width: 100%; }
+.throttle-button--primary: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); }
+.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); } }
+@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-account-root { container-type: inline-size; background: var(--throttle-color-background); color: var(--throttle-color-foreground); }
+.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-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; }
+.throttle-table__money { display: block; text-align: right; font-variant-numeric: tabular-nums; }
+.throttle-lineitem { display: flex; align-items: center; gap: var(--throttle-space-3); padding: var(--throttle-space-2) 0; }
+.throttle-lineitem__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); }
+
+@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) {
+  (0, import_react5.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/auth/StepUpDialog.tsx
+var import_react10 = require("react");
+
+// src/react/components/surface.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Ctx5 = (0, import_react6.createContext)("standalone");
+function SurfaceProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Ctx5.Provider, { value: props.value, children: props.children });
+}
+function useSurface() {
+  return (0, import_react6.useContext)(Ctx5);
+}
+function useCardClass() {
+  return useSurface() === "modal" ? "throttle-card throttle-card--bare" : "throttle-card";
+}
+
+// src/react/components/primitives/Card.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CardHeader(props) {
+  const a = useAppearance();
+  const headerClass = `throttle-card__header${props.branded ? " throttle-card__header--branded" : ""}`;
+  const titleClass = `throttle-card__title${props.branded ? " throttle-card__title--branded" : ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ...a.el("card.header", headerClass), children: [
+    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...a.el(props.logoKey ?? "card.logo", "throttle-card__logo"), children: props.logo }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { ...a.el(props.titleKey ?? "card.title", titleClass), children: props.title }),
+    props.description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { ...a.el("card.description", "throttle-card__description"), children: props.description }) : null
+  ] });
+}
+function CardBody(props) {
+  const a = useAppearance();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...a.el("card.body", "throttle-card__body"), children: props.children });
+}
+function CardFooter(props) {
+  const a = useAppearance();
+  const className = `throttle-card__footer${props.ruled ? " throttle-card__footer--ruled" : ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ...a.el("card.footer", className), children: props.children });
+}
+
+// src/react/components/primitives/Spinner.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Spinner() {
+  const a = useAppearance();
+  const Slot = a.slots.Spinner;
+  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Slot, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { ...a.el("spinner", "throttle-spinner"), "aria-hidden": "true" });
+}
+
+// src/react/components/primitives/Button.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Button({ variant = "primary", size = "default", elementKey, loading, children, ...rest }) {
+  const a = useAppearance();
+  const Slot = a.slots.Button;
+  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slot, { variant, loading, ...rest, children });
+  const base = `throttle-button throttle-button--${variant}${size === "xs" ? " throttle-button--xs" : ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "button",
+    {
+      type: "button",
+      ...rest,
+      ...a.el(elementKey ?? "button", base),
+      disabled: rest.disabled || loading,
+      children: [
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, {}) : null,
+        children
+      ]
+    }
+  );
+}
+
+// src/react/components/primitives/Field.tsx
+var import_react7 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Field(props) {
+  const a = useAppearance();
+  const base = (0, import_react7.useId)();
+  const inputId = `${base}-input`;
+  const hintId = `${base}-hint`;
+  const errorId = `${base}-error`;
+  const describedBy = [props.hint ? hintId : null, props.error ? errorId : null].filter(Boolean).join(" ");
+  const label = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { ...a.el("field.label", "throttle-field__label"), htmlFor: inputId, children: props.label });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ...a.el(props.elementKey ?? "field", "throttle-field"), children: [
+    props.labelExtra ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "throttle-field__labelrow", children: [
+      label,
+      props.labelExtra
+    ] }) : label,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "input",
+      {
+        ...a.el("field.input", `throttle-field__input${props.grouped ? " throttle-field__input--grouped" : ""}`),
+        id: inputId,
+        name: props.name,
+        type: props.type ?? "text",
+        value: props.value,
+        required: props.required,
+        disabled: props.disabled,
+        autoComplete: props.autoComplete,
+        "aria-describedby": describedBy || void 0,
+        "aria-invalid": props.error ? true : void 0,
+        onChange: (e) => props.onChange(e.target.value)
+      }
+    ),
+    props.hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ...a.el("field.hint", "throttle-field__hint"), id: hintId, children: props.hint }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ...a.el("field.error", "throttle-field__error"), id: errorId, role: "alert", children: props.error ?? "" })
+  ] });
+}
+function FieldGroup(props) {
+  const a = useAppearance();
+  const items = import_react7.Children.toArray(props.children).filter(Boolean);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...a.el(props.elementKey ?? "field.group", "throttle-field-group"), children: items.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react7.Fragment, { children: [
+    i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "throttle-field-group__divider" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "throttle-field-group__item", children: child })
+  ] }, i)) });
+}
+
+// src/react/components/primitives/Alert.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Alert(props) {
+  const a = useAppearance();
+  const Slot = a.slots.Alert;
+  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Slot, { tone: props.tone, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "p",
+    {
+      ...a.el("alert", `throttle-alert throttle-alert--${props.tone}`),
+      role: props.tone === "error" ? "alert" : "status",
+      children: props.children
+    }
+  );
+}
+
+// src/react/components/primitives/Skeleton.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Skeleton(props) {
+  const a = useAppearance();
+  const rows = Array.from({ length: props.count ?? 1 });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "aria-hidden": "true", className: "throttle-stack", children: rows.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { ...a.el("skeleton", "throttle-skeleton") }, i)) });
+}
+
+// src/react/components/primitives/Modal.tsx
+var import_react8 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Modal(props) {
+  const a = useAppearance();
+  const { t } = useCopy();
+  const panel = (0, import_react8.useRef)(null);
+  const returnFocusTo = (0, import_react8.useRef)(null);
+  const [mounted, setMounted] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  const onCloseRef = (0, import_react8.useRef)(props.onClose);
+  (0, import_react8.useEffect)(() => {
+    onCloseRef.current = props.onClose;
+  });
+  (0, import_react8.useEffect)(() => {
+    if (!props.open || !mounted) return;
+    returnFocusTo.current = props.restoreFocusTo ?? document.activeElement;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    panel.current?.focus();
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onCloseRef.current();
+        return;
+      }
+      if (e.key !== "Tab" || !panel.current) return;
+      const items = Array.from(panel.current.querySelectorAll(FOCUSABLE));
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousOverflow;
+      returnFocusTo.current?.focus?.();
+    };
+  }, [props.open, mounted]);
+  if (!props.open || !mounted) return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        ...a.el(props.overlayKey ?? "modal.overlay", "throttle-modal__overlay"),
+        "data-testid": "throttle-modal-overlay",
+        onClick: (e) => {
+          if (e.target === e.currentTarget) props.onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            ...a.el(props.containerKey ?? "modal.container", props.size === "compact" ? "throttle-modal__container throttle-modal__container--compact" : "throttle-modal__container"),
+            ref: panel,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": props.labelledBy,
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "button",
+                {
+                  ...a.el("modal.closeButton", "throttle-modal__close"),
+                  type: "button",
+                  "aria-label": t.common.close,
+                  onClick: props.onClose,
+                  children: "\xD7"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SurfaceProvider, { value: "modal", children: props.children })
+            ]
+          }
+        )
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/react/components/primitives/Dropdown.tsx
+var import_react9 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Dropdown(props) {
+  const a = useAppearance();
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const root = (0, import_react9.useRef)(null);
+  const trigger = (0, import_react9.useRef)(null);
+  const menu = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!open) return;
+    menu.current?.querySelector('[role="menuitem"]')?.focus();
+    const onDown = (e) => {
+      if (root.current && !root.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        trigger.current?.focus();
+      }
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const move = (delta) => {
+    const items = Array.from(menu.current?.querySelectorAll('[role="menuitem"]') ?? []);
+    if (items.length === 0) return;
+    const at = items.indexOf(document.activeElement);
+    const next = (at + delta + items.length) % items.length;
+    items[next < 0 ? items.length - 1 : next].focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref: root, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "button",
+      {
+        ref: trigger,
+        type: "button",
+        ...a.el(props.triggerKey ?? "dropdown.trigger", "throttle-dropdown__trigger"),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-label": props.label,
+        onClick: () => setOpen((v) => !v),
+        children: props.trigger
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        ref: menu,
+        ...a.el(props.menuKey ?? "dropdown.menu", "throttle-dropdown__menu"),
+        role: "menu",
+        onClick: () => setOpen(false),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            move(1);
+          }
+          if (e.key === "ArrowUp") {
+            e.preventDefault();
+            move(-1);
+          }
+        },
+        children: props.children
+      }
+    ) : null
+  ] });
+}
+function DropdownItem(props) {
+  const a = useAppearance();
+  const attrs = a.el(props.itemKey ?? "dropdown.item", "throttle-dropdown__item");
+  if (props.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { ...attrs, role: "menuitem", href: props.href, tabIndex: -1, children: props.children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { ...attrs, role: "menuitem", type: "button", tabIndex: -1, onClick: props.onClick, children: props.children });
+}
+function DropdownSeparator() {
+  const a = useAppearance();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("hr", { ...a.el("dropdown.separator", "throttle-dropdown__separator") });
+}
+
+// src/react/components/primitives/Tabs.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Tabs(props) {
+  const a = useAppearance();
+  const at = props.tabs.findIndex((t) => t.id === props.active);
+  const vertical = props.orientation === "vertical";
+  const listClass = vertical ? "throttle-tabs__rail" : "throttle-tabs__list";
+  const itemClass = vertical ? "throttle-tabs__railitem" : "throttle-tabs__tab";
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      ...a.el("tabs.list", listClass),
+      role: "tablist",
+      "aria-orientation": vertical ? "vertical" : void 0,
+      onKeyDown: (e) => {
+        const next = vertical ? "ArrowDown" : "ArrowRight";
+        const prev = vertical ? "ArrowUp" : "ArrowLeft";
+        const delta = e.key === next ? 1 : e.key === prev ? -1 : 0;
+        if (!delta) return;
+        e.preventDefault();
+        const nextIndex = (at + delta + props.tabs.length) % props.tabs.length;
+        props.onChange(props.tabs[nextIndex].id);
+        e.currentTarget.querySelectorAll('[role="tab"]')[nextIndex]?.focus();
+      },
+      children: props.tabs.map((tab) => {
+        const selected = tab.id === props.active;
+        const { className, ...rest } = a.el("tabs.tab", itemClass);
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "button",
+          {
+            ...rest,
+            className: [className, selected ? `${itemClass}--active` : null].filter(Boolean).join(" "),
+            role: "tab",
+            type: "button",
+            id: props.idBase ? `${props.idBase}-tab-${tab.id}` : void 0,
+            "aria-controls": props.idBase ? `${props.idBase}-panel-${tab.id}` : void 0,
+            "aria-selected": selected,
+            tabIndex: selected ? 0 : -1,
+            onClick: () => props.onChange(tab.id),
+            children: [
+              tab.icon,
+              tab.label
+            ]
+          },
+          tab.id
+        );
+      })
+    }
+  );
+}
+
+// src/react/components/primitives/DataTable.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function DataTable(props) {
+  const a = useAppearance();
+  const clickable = Boolean(props.onRowClick);
+  return (
+    // Tables are the one thing allowed to be wider than the panel; it scrolls
+    // rather than forcing the whole page to.
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "throttle-table__scroll", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { ...a.el(props.tableKey ?? "table", "throttle-table"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { children: props.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("th", { ...a.el("table.head", "throttle-table__head"), scope: "col", children: col.label }, col.key)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { children: props.rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "tr",
+        {
+          ...a.el(props.rowElementKey ?? "table.row", "throttle-table__row"),
+          tabIndex: clickable ? 0 : void 0,
+          onClick: clickable ? () => props.onRowClick(row) : void 0,
+          onKeyDown: clickable ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              props.onRowClick(row);
+            }
+          } : void 0,
+          children: props.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { ...a.el("table.cell", "throttle-table__cell"), children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
+        },
+        props.rowKey(row)
+      )) })
+    ] }) })
+  );
+}
+
+// src/react/components/primitives/EmptyState.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function EmptyState(props) {
+  const a = useAppearance();
+  const Slot = a.slots.EmptyState;
+  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Slot, { title: props.title, description: props.description });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ...a.el("emptyState", "throttle-empty"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { ...a.el("emptyState.title", "throttle-empty__title"), children: props.title }),
+    props.description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { ...a.el("emptyState.description", "throttle-empty__description"), children: props.description }) : null
+  ] });
+}
+
+// src/react/components/primitives/Avatar.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Avatar(props) {
+  const a = useAppearance();
+  const Slot = a.slots.Avatar;
+  if (Slot) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Slot, { name: props.name, email: props.email });
+  const initials = props.name.split(" ").map((part) => part.trim()[0]).filter(Boolean).slice(0, 2).join("") || props.email.trim()[0] || "?";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { ...a.el("avatar", "throttle-avatar"), title: props.email, children: initials.toUpperCase() });
+}
+
+// src/react/components/primitives/Badge.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Badge(props) {
+  const a = useAppearance();
+  const tone = props.tone ?? "neutral";
+  const base = tone === "neutral" ? "throttle-badge" : `throttle-badge throttle-badge--${tone}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { ...a.el(props.elementKey ?? "badge", base), children: props.children });
+}
+
+// src/react/components/auth/StepUpDialog.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function StepUpDialog(props) {
+  const a = useAppearance();
+  const cardClass = useCardClass();
+  const { t } = useCopy();
+  const [password, setPassword] = (0, import_react10.useState)("");
+  const titleId = (0, import_react10.useId)();
+  (0, import_react10.useEffect)(() => {
+    if (!props.open) setPassword("");
+  }, [props.open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Modal, { open: props.open, onClose: () => props.onResolve(null), labelledBy: titleId, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ...a.el("stepUp.root", cardClass), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        props.onResolve(password);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "throttle-card__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { id: titleId, ...a.el("stepUp.title", "throttle-card__title"), children: t.stepUp.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "throttle-card__description", children: t.stepUp.description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            Field,
+            {
+              label: t.stepUp.password,
+              type: "password",
+              autoComplete: "current-password",
+              value: password,
+              onChange: setPassword,
+              required: true,
+              elementKey: "stepUp.passwordField"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { type: "submit", elementKey: "stepUp.submitButton", children: t.stepUp.submitButton }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { variant: "link", elementKey: "stepUp.cancelButton", onClick: () => props.onResolve(null), children: t.stepUp.cancelButton })
+        ] })
+      ]
+    }
+  ) }) });
+}
+
+// src/react/components/auth/AuthModal.tsx
+var import_react18 = require("react");
+
+// src/react/components/auth/AuthFlow.tsx
+var import_react17 = require("react");
+
+// src/react/components/auth/SignIn.tsx
+var import_react12 = require("react");
+
+// src/react/components/useAction.ts
+var import_react11 = require("react");
+function useAction() {
+  const { errorMessage } = useCopy();
+  const [submitting, setSubmitting] = (0, import_react11.useState)(false);
+  const [error, setError] = (0, import_react11.useState)(null);
+  const [notice, setNotice] = (0, import_react11.useState)(null);
+  const inFlight = (0, import_react11.useRef)(false);
+  const run = (0, import_react11.useCallback)(
+    async (fn) => {
+      if (inFlight.current) return;
+      inFlight.current = true;
+      setSubmitting(true);
+      setError(null);
+      setNotice(null);
+      try {
+        const message = await fn();
+        if (typeof message === "string") setNotice(message);
+      } catch (err) {
+        setError(errorMessage(err));
+      } finally {
+        inFlight.current = false;
+        setSubmitting(false);
+      }
+    },
+    [errorMessage]
+  );
+  return { submitting, error, notice, run };
+}
+
+// src/react/components/auth/SignIn.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function SignIn(props) {
+  const a = useAppearance(props.appearance);
+  const cardClass = useCardClass();
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const { auth } = useAuth();
+  const { submitting, error, run } = useAction();
+  const [email, setEmail] = (0, import_react12.useState)("");
+  const [password, setPassword] = (0, import_react12.useState)("");
+  const variant = props.variant ?? "quiet";
+  const branded = variant === "branded";
+  const grouped = variant === "grouped";
+  const logo = useBrandLogo(props.logo);
+  const forgotLink = props.onForgotPassword ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "link", size: "xs", elementKey: "signIn.forgotLink", onClick: props.onForgotPassword, children: t.signIn.forgotLink }) : null;
+  const emailField = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    Field,
+    {
+      label: t.signIn.email,
+      type: "email",
+      autoComplete: "email",
+      required: true,
+      value: email,
+      onChange: setEmail,
+      elementKey: "signIn.emailField",
+      grouped
+    }
+  );
+  const passwordField = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    Field,
+    {
+      label: t.signIn.password,
+      type: "password",
+      autoComplete: "current-password",
+      required: true,
+      value: password,
+      onChange: setPassword,
+      elementKey: "signIn.passwordField",
+      grouped,
+      labelExtra: grouped ? void 0 : forgotLink
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "form",
+    {
+      ...a.el("signIn.root", cardClass),
+      onSubmit: (e) => {
+        e.preventDefault();
+        void run(async () => {
+          await auth.signIn(email, password);
+          props.onSuccess?.();
+        });
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          CardHeader,
+          {
+            title: t.signIn.title,
+            description: branded ? t.signIn.description : void 0,
+            titleKey: "signIn.title",
+            logo: branded ? logo : null,
+            logoKey: "signIn.logo",
+            branded
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardBody, { children: [
+          grouped ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(FieldGroup, { children: [
+            emailField,
+            passwordField
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            emailField,
+            passwordField
+          ] }),
+          grouped && forgotLink ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "throttle-field-group__forgot", children: forgotLink }) : null,
+          error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Alert, { tone: "error", children: error }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { type: "submit", loading: submitting, elementKey: "signIn.submitButton", children: t.signIn.submitButton })
+        ] }),
+        props.onSignUp ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardFooter, { ruled: !branded, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "throttle-muted", children: [
+            t.signIn.switchPrompt,
+            " "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { variant: "link", elementKey: "signIn.switchLink", onClick: props.onSignUp, children: t.signIn.switchLink })
+        ] }) : null
+      ]
+    }
+  ) }) });
+}
+
+// src/react/components/auth/SignUp.tsx
+var import_react13 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function SignUp(props) {
+  const a = useAppearance(props.appearance);
+  const cardClass = useCardClass();
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const { auth } = useAuth();
+  const { submitting, error, notice, run } = useAction();
+  const [email, setEmail] = (0, import_react13.useState)("");
+  const [password, setPassword] = (0, import_react13.useState)("");
+  const variant = props.variant ?? "quiet";
+  const branded = variant === "branded";
+  const grouped = variant === "grouped";
+  const logo = useBrandLogo(props.logo);
+  const emailField = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Field,
+    {
+      label: t.signUp.email,
+      type: "email",
+      autoComplete: "email",
+      required: true,
+      value: email,
+      onChange: setEmail,
+      elementKey: "signUp.emailField",
+      grouped
+    }
+  );
+  const passwordField = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Field,
+    {
+      label: t.signUp.password,
+      type: "password",
+      autoComplete: "new-password",
+      required: true,
+      value: password,
+      onChange: setPassword,
+      elementKey: "signUp.passwordField",
+      grouped
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "form",
+    {
+      ...a.el("signUp.root", cardClass),
+      onSubmit: (e) => {
+        e.preventDefault();
+        void run(async () => {
+          const result = await auth.register(email, password);
+          if (result.status === "active") {
+            props.onSuccess?.();
+            return;
+          }
+          return t.signUp.pendingNotice;
+        });
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          CardHeader,
+          {
+            title: t.signUp.title,
+            description: branded ? t.signUp.description : void 0,
+            titleKey: "signUp.title",
+            logo: branded ? logo : null,
+            logoKey: "signUp.logo",
+            branded
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardBody, { children: [
+          grouped ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(FieldGroup, { children: [
+            emailField,
+            passwordField
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            emailField,
+            passwordField
+          ] }),
+          error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Alert, { tone: "error", children: error }) : null,
+          notice ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Alert, { tone: "info", children: notice }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { type: "submit", loading: submitting, elementKey: "signUp.submitButton", children: t.signUp.submitButton })
+        ] }),
+        props.onSignIn ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardFooter, { ruled: !branded, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "throttle-muted", children: [
+            t.signUp.switchPrompt,
+            " "
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "link", elementKey: "signUp.switchLink", onClick: props.onSignIn, children: t.signUp.switchLink })
+        ] }) : null
+      ]
+    }
+  ) }) });
+}
+
+// src/react/components/auth/ForgotPassword.tsx
+var import_react14 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function ForgotPassword(props) {
+  const a = useAppearance(props.appearance);
+  const cardClass = useCardClass();
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const { auth } = useAuth();
+  const { submitting, error, notice, run } = useAction();
+  const [email, setEmail] = (0, import_react14.useState)("");
+  const branded = (props.variant ?? "quiet") === "branded";
+  const logo = useBrandLogo(props.logo);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "form",
+    {
+      ...a.el("forgotPassword.root", cardClass),
+      onSubmit: (e) => {
+        e.preventDefault();
+        void run(async () => {
+          await auth.forgotPassword(email);
+          return t.forgotPassword.sentNotice;
+        });
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          CardHeader,
+          {
+            title: t.forgotPassword.title,
+            description: branded ? t.forgotPassword.description : void 0,
+            titleKey: "forgotPassword.title",
+            logo: branded ? logo : null,
+            logoKey: "forgotPassword.logo",
+            branded
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardBody, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Field,
+            {
+              label: t.forgotPassword.email,
+              type: "email",
+              autoComplete: "email",
+              required: true,
+              value: email,
+              onChange: setEmail,
+              elementKey: "forgotPassword.emailField"
+            }
+          ),
+          error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Alert, { tone: "error", children: error }) : null,
+          notice ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Alert, { tone: "success", children: notice }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { type: "submit", loading: submitting, elementKey: "forgotPassword.submitButton", children: t.forgotPassword.submitButton })
+        ] }),
+        props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardFooter, { ruled: !branded, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", elementKey: "forgotPassword.backLink", onClick: props.onBack, children: t.forgotPassword.backLink }) }) : null
+      ]
+    }
+  ) }) });
+}
+
+// src/react/components/auth/ResetPassword.tsx
+var import_react15 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function ResetPassword(props) {
+  const a = useAppearance(props.appearance);
+  const cardClass = useCardClass();
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const { auth } = useAuth();
+  const { submitting, error, notice, run } = useAction();
+  const [password, setPassword] = (0, import_react15.useState)("");
+  const branded = (props.variant ?? "quiet") === "branded";
+  const logo = useBrandLogo(props.logo);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ...a.el("resetPassword.root", cardClass), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      CardHeader,
+      {
+        title: t.resetPassword.title,
+        titleKey: "resetPassword.title",
+        logo: branded ? logo : null,
+        logoKey: "resetPassword.logo",
+        branded
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CardBody, { children: !props.token ? (
+      // No form at all without a token. A submit button that can only
+      // fail is worse than an explanation.
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Alert, { tone: "error", children: t.resetPassword.missingToken })
+    ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "form",
+      {
+        onSubmit: (e) => {
+          e.preventDefault();
+          void run(async () => {
+            await auth.resetPassword(props.token, password);
+            props.onSuccess?.();
+            return t.resetPassword.doneNotice;
+          });
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "throttle-stack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            Field,
+            {
+              label: t.resetPassword.password,
+              type: "password",
+              autoComplete: "new-password",
+              required: true,
+              value: password,
+              onChange: setPassword,
+              elementKey: "resetPassword.passwordField"
+            }
+          ),
+          error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Alert, { tone: "error", children: error }) : null,
+          notice ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Alert, { tone: "success", children: notice }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { type: "submit", loading: submitting, elementKey: "resetPassword.submitButton", children: t.resetPassword.submitButton })
+        ] })
+      }
+    ) })
+  ] }) }) });
+}
+
+// src/react/components/auth/VerifyEmail.tsx
+var import_react16 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function VerifyEmail(props) {
+  const a = useAppearance(props.appearance);
+  const cardClass = useCardClass();
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t, errorMessage } = useCopy(props.localization);
+  const { auth } = useAuth();
+  const { submitting, notice, run } = useAction();
+  const [state, setState] = (0, import_react16.useState)(props.token ? "verifying" : "idle");
+  const [error, setError] = (0, import_react16.useState)(null);
+  const branded = (props.variant ?? "quiet") === "branded";
+  const logo = useBrandLogo(props.logo);
+  const attempted = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
+    const token = props.token;
+    if (!token || attempted.current === token) return;
+    attempted.current = token;
+    setState("verifying");
+    auth.verifyEmail(token).then(() => {
+      setState("done");
+      props.onSuccess?.();
+    }).catch((err) => {
+      setError(errorMessage(err));
+      setState("failed");
+    });
+  }, [props.token, auth]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ...a.el("verifyEmail.root", cardClass), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      CardHeader,
+      {
+        title: t.verifyEmail.title,
+        titleKey: "verifyEmail.title",
+        logo: branded ? logo : null,
+        logoKey: "verifyEmail.logo",
+        branded
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(CardBody, { children: [
+      state === "verifying" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Spinner, {}),
+        " ",
+        t.verifyEmail.verifying
+      ] }) : null,
+      state === "done" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Alert, { tone: "success", children: t.verifyEmail.success }) : null,
+      state === "failed" && error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Alert, { tone: "error", children: error }) : null,
+      state === "idle" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "throttle-muted", children: t.verifyEmail.instructions }) : null,
+      notice ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Alert, { tone: "success", children: notice }) : null,
+      state !== "done" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        Button,
+        {
+          variant: "secondary",
+          loading: submitting,
+          elementKey: "verifyEmail.resendButton",
+          onClick: () => void run(async () => {
+            await auth.resendVerification();
+            return t.verifyEmail.resentNotice;
+          }),
+          children: t.verifyEmail.resendButton
+        }
+      ) : null
+    ] })
+  ] }) }) });
+}
+
+// src/react/components/auth/AuthFlow.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var HASH_FOR = {
+  signIn: "#/sign-in",
+  signUp: "#/sign-up",
+  forgotPassword: "#/forgot-password",
+  resetPassword: "#/reset-password",
+  verifyEmail: "#/verify-email"
+};
+var VIEW_FOR_HASH = Object.fromEntries(
+  Object.entries(HASH_FOR).map(([view, hash]) => [hash, view])
+);
+function readLocation() {
+  if (typeof window === "undefined") return { view: null };
+  const params = new URLSearchParams(window.location.search);
+  const token = params.get("token") ?? void 0;
+  const hashView = VIEW_FOR_HASH[window.location.hash];
+  if (hashView) return { view: hashView, token };
+  if (!token) return { view: null };
+  const path = window.location.pathname.toLowerCase();
+  if (path.includes("reset")) return { view: "resetPassword", token };
+  if (path.includes("verif")) return { view: "verifyEmail", token };
+  return { view: null, token };
+}
+function AuthFlow(props) {
+  const a = useAppearance(props.appearance);
+  const controlled = props.view !== void 0;
+  const [internal, setInternal] = (0, import_react17.useState)(props.initialView ?? "signIn");
+  const [urlToken, setUrlToken] = (0, import_react17.useState)(void 0);
+  (0, import_react17.useEffect)(() => {
+    const found = readLocation();
+    if (found.token) setUrlToken(found.token);
+    if (found.view && !controlled && props.initialView === void 0) setInternal(found.view);
+  }, []);
+  const view = controlled ? props.view : internal;
+  const token = props.token ?? urlToken;
+  const go = (next) => {
+    props.onViewChange?.(next);
+    if (!controlled) setInternal(next);
+    if (props.routing === "hash" && typeof window !== "undefined") {
+      window.location.hash = HASH_FOR[next];
+    }
+  };
+  (0, import_react17.useEffect)(() => {
+    if (props.routing !== "hash" || typeof window === "undefined") return;
+    const onHashChange = () => {
+      if (controlled) return;
+      const hash = window.location.hash;
+      if (hash === "") {
+        setInternal(props.initialView ?? "signIn");
+        return;
+      }
+      const next = VIEW_FOR_HASH[hash];
+      if (next) setInternal(next);
+    };
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, [props.routing, controlled]);
+  const shared = { appearance: props.appearance, localization: props.localization };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ...a.el("authFlow.root"), children: [
+    view === "signIn" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      SignIn,
+      {
+        ...shared,
+        onSuccess: props.afterSignIn,
+        onForgotPassword: () => go("forgotPassword"),
+        onSignUp: () => go("signUp")
+      }
+    ) : null,
+    view === "signUp" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SignUp, { ...shared, onSuccess: props.afterSignUp, onSignIn: () => go("signIn") }) : null,
+    view === "forgotPassword" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ForgotPassword, { ...shared, onBack: () => go("signIn") }) : null,
+    view === "resetPassword" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ResetPassword, { ...shared, token, onSuccess: () => go("signIn") }) : null,
+    view === "verifyEmail" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(VerifyEmail, { ...shared, token }) : null
+  ] }) });
+}
+
+// src/react/components/auth/AuthModal.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function AuthModal(props) {
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const titleId = (0, import_react18.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    Modal,
+    {
+      open: props.open,
+      onClose: props.onClose,
+      labelledBy: titleId,
+      size: "compact",
+      overlayKey: "authModal.overlay",
+      containerKey: "authModal.container",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h2", { id: titleId, style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Account" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          AuthFlow,
+          {
+            initialView: props.initialView,
+            afterSignIn: props.afterSignIn,
+            afterSignUp: props.afterSignUp,
+            appearance: props.appearance,
+            localization: props.localization
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/react/components/account/AccountModal.tsx
+var import_react28 = require("react");
+
+// src/react/components/account/AccountDashboard.tsx
+var import_react27 = require("react");
+
+// src/react/components/account/VerifyEmailBanner.tsx
+var import_react19 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var DISMISS_KEY = "throttle-auth:verify-banner-dismissed";
+function readDismissed() {
+  try {
+    return sessionStorage.getItem(DISMISS_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+function writeDismissed() {
+  try {
+    sessionStorage.setItem(DISMISS_KEY, "1");
+  } catch {
+  }
+}
+function VerifyEmailBanner(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const { auth, status, emailVerified } = useAuth();
+  const { submitting, notice, error, run } = useAction();
+  const [dismissed, setDismissed] = (0, import_react19.useState)(readDismissed);
+  if (status !== "authenticated" || emailVerified || dismissed) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ...a.el("verifyBanner.root", "throttle-banner"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { ...a.el("verifyBanner.message"), children: t.verifyBanner.message }),
+    notice ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Alert, { tone: "success", children: notice }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "throttle-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        Button,
+        {
+          variant: "secondary",
+          loading: submitting,
+          elementKey: "verifyBanner.resendButton",
+          onClick: () => void run(async () => {
+            await auth.resendVerification();
+            return t.verifyEmail.resentNotice;
+          }),
+          children: t.verifyBanner.resendButton
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        Button,
+        {
+          variant: "link",
+          elementKey: "verifyBanner.dismissButton",
+          onClick: () => {
+            writeDismissed();
+            setDismissed(true);
+          },
+          children: t.verifyBanner.dismissButton
+        }
+      )
+    ] })
+  ] }) }) });
+}
+
+// src/react/components/account/icons.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function Glyph(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "svg",
+    {
+      className: "throttle-tabs__railicon",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: props.children
+    }
+  );
+}
+var ACCOUNT_ICONS = {
+  profile: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "8", r: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M4 21c0-4 3.6-6 8-6s8 2 8 6" })
+  ] }),
+  addresses: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M12 21s7-5.3 7-11a7 7 0 1 0-14 0c0 5.7 7 11 7 11Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "10", r: "2.5" })
+  ] }),
+  paymentMethods: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("rect", { x: "2.5", y: "5.5", width: "19", height: "13", rx: "2.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M2.5 10h19" })
+  ] }),
+  orders: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M4 7h16v13H4z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M8 7V4h8v3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M8 12h8" })
+  ] }),
+  invoices: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M6 3h12v18l-3-2-3 2-3-2-3 2Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M9 8h6M9 12h6" })
+  ] }),
+  subscriptions: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M3 12a9 9 0 0 1 15.5-6.2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M21 12a9 9 0 0 1-15.5 6.2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M18 3v4h-4M6 21v-4h4" })
+  ] }),
+  security: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M12 3 4 6.5V12c0 5 3.4 8.3 8 9 4.6-.7 8-4 8-9V6.5Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "m9 12 2 2 4-4" })
+  ] })
+};
+
+// src/react/components/account/ProfilePanel.tsx
+var import_react21 = require("react");
+
+// src/react/hooks.ts
+var import_react20 = require("react");
+function asError(err) {
+  if (err instanceof ThrottleAuthError) return err;
+  const anyErr = err;
+  return new ThrottleAuthError({
+    code: anyErr?.code ?? "request_failed",
+    message: anyErr?.message ?? String(err),
+    statusCode: anyErr?.statusCode ?? 0
+  });
+}
+function useResource(empty, load, deps) {
+  const { status, emailVerified } = useAuth();
+  const [data, setData] = (0, import_react20.useState)(empty);
+  const [isLoading, setIsLoading] = (0, import_react20.useState)(status === "loading");
+  const [error, setError] = (0, import_react20.useState)(null);
+  const gen = (0, import_react20.useRef)(0);
+  const alive = (0, import_react20.useRef)(true);
+  (0, import_react20.useEffect)(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+      gen.current++;
+    };
+  }, []);
+  const refetch = (0, import_react20.useCallback)(async () => {
+    const mine = ++gen.current;
+    setIsLoading(true);
+    try {
+      const next = await load();
+      if (!alive.current || gen.current !== mine) return;
+      setData(next);
+      setError(null);
+    } catch (err) {
+      if (!alive.current || gen.current !== mine) return;
+      setError(asError(err));
+    } finally {
+      if (alive.current && gen.current === mine) setIsLoading(false);
+    }
+  }, deps);
+  (0, import_react20.useEffect)(() => {
+    if (status !== "authenticated") {
+      gen.current++;
+      setData(empty);
+      setError(null);
+      setIsLoading(status === "loading");
+      return;
+    }
+    void refetch();
+  }, [status, emailVerified, refetch]);
+  return { data, isLoading, error, refetch };
+}
+function useCustomer() {
+  const { account } = useAuth();
+  const res = useResource(null, () => account.getProfile(), [account]);
+  const update = (0, import_react20.useCallback)(async (patch) => {
+    await account.updateProfile(patch);
+    await res.refetch();
+  }, [account, res]);
+  return { ...res, update };
+}
+function useAddresses() {
+  const { account } = useAuth();
+  const res = useResource([], () => account.listAddresses(), [account]);
+  const after = async (p) => {
+    await p;
+    await res.refetch();
+  };
+  return {
+    ...res,
+    create: (input) => after(account.createAddress(input)),
+    update: (id, patch) => after(account.updateAddress(id, patch)),
+    remove: (id) => after(account.deleteAddress(id))
+  };
+}
+function useSavedCards() {
+  const { account } = useAuth();
+  const res = useResource([], () => account.listPaymentMethods(), [account]);
+  const after = async (p) => {
+    await p;
+    await res.refetch();
+  };
+  return {
+    ...res,
+    setDefault: (id) => after(account.setDefaultPaymentMethod(id)),
+    remove: (id) => after(account.deletePaymentMethod(id))
+  };
+}
+function useOrders(page) {
+  const { account } = useAuth();
+  return useResource([], () => account.listOrders(page), [account, page?.cursor, page?.limit]);
+}
+function useInvoices(page) {
+  const { account } = useAuth();
+  return useResource([], () => account.listInvoices(page), [account, page?.cursor, page?.limit]);
+}
+function useSubscriptions(page) {
+  const { account } = useAuth();
+  const res = useResource(
+    [],
+    () => account.listSubscriptions(page),
+    [account, page?.cursor, page?.limit]
+  );
+  const after = async (p) => {
+    await p;
+    await res.refetch();
+  };
+  return {
+    ...res,
+    cancel: (id, opts) => after(account.cancelSubscription(id, opts)),
+    pause: (id) => after(account.pauseSubscription(id)),
+    resume: (id) => after(account.resumeSubscription(id))
+  };
+}
+function useOrder(id) {
+  const { account } = useAuth();
+  return useResource(null, async () => id ? account.getOrder(id) : null, [account, id]);
+}
+function useInvoice(id) {
+  const { account } = useAuth();
+  return useResource(null, async () => id ? account.getInvoice(id) : null, [account, id]);
+}
+
+// src/react/components/account/PanelState.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function PanelState(props) {
+  const { t, errorMessage } = useCopy();
+  const { data, isLoading, error, refetch } = props.resource;
+  const empty = props.isEmpty(data);
+  if (isLoading && empty) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Skeleton, { count: props.skeletonRows ?? 3 });
+  const errorBanner = error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "throttle-stack", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Alert, { tone: "error", children: errorMessage(error) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { variant: "secondary", onClick: () => void refetch(), children: t.common.retry })
+  ] }) : null;
+  const gatedByVerification = error?.code === "verification_required";
+  if (gatedByVerification && empty) {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EmptyState, { title: props.emptyTitle, description: props.gatedDescription ?? props.emptyDescription });
+  }
+  if (error && empty) return errorBanner;
+  if (empty) {
+    return props.gated ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EmptyState, { title: props.emptyTitle, description: props.gatedDescription }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(EmptyState, { title: props.emptyTitle, description: props.emptyDescription });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    errorBanner,
+    props.children(data)
+  ] });
+}
+
+// src/react/components/account/ProfilePanel.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function ProfilePanel(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const { status } = useAuth();
+  const resource = useCustomer();
+  const { submitting, error, notice, run } = useAction();
+  const [form, setForm] = (0, import_react21.useState)({ firstName: "", lastName: "", phone: "", company: "", acceptsMarketing: false });
+  (0, import_react21.useEffect)(() => {
+    const c = resource.data;
+    if (!c) return;
+    setForm({
+      firstName: c.firstName ?? "",
+      lastName: c.lastName ?? "",
+      phone: c.phone ?? "",
+      company: c.company ?? "",
+      acceptsMarketing: Boolean(c.acceptsMarketing)
+    });
+  }, [resource.data]);
+  if (status === "unauthenticated") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ...a.el("profilePanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    PanelState,
+    {
+      resource,
+      isEmpty: (c) => c === null,
+      emptyTitle: t.common.somethingWentWrong,
+      skeletonRows: 4,
+      children: (customer) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        "form",
+        {
+          ...a.el("profilePanel.form", "throttle-stack"),
+          onSubmit: (e) => {
+            e.preventDefault();
+            void run(async () => {
+              await resource.update({
+                firstName: form.firstName,
+                lastName: form.lastName,
+                phone: form.phone,
+                company: form.company || null,
+                acceptsMarketing: form.acceptsMarketing
+              });
+              return t.profile.savedNotice;
+            });
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              Field,
+              {
+                label: t.profile.email,
+                type: "email",
+                value: customer.email,
+                onChange: () => {
+                },
+                disabled: true,
+                hint: t.profile.emailReadOnly
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              Field,
+              {
+                label: t.profile.firstName,
+                value: form.firstName,
+                autoComplete: "given-name",
+                onChange: (v) => setForm((f) => ({ ...f, firstName: v }))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              Field,
+              {
+                label: t.profile.lastName,
+                value: form.lastName,
+                autoComplete: "family-name",
+                onChange: (v) => setForm((f) => ({ ...f, lastName: v }))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              Field,
+              {
+                label: t.profile.phone,
+                type: "tel",
+                value: form.phone,
+                autoComplete: "tel",
+                onChange: (v) => setForm((f) => ({ ...f, phone: v }))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              Field,
+              {
+                label: t.profile.company,
+                value: form.company,
+                autoComplete: "organization",
+                onChange: (v) => setForm((f) => ({ ...f, company: v }))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: "throttle-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: form.acceptsMarketing,
+                  onChange: (e) => setForm((f) => ({ ...f, acceptsMarketing: e.target.checked }))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: t.profile.acceptsMarketing })
+            ] }),
+            error ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Alert, { tone: "error", children: error }) : null,
+            notice ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Alert, { tone: "success", children: notice }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { type: "submit", loading: submitting, elementKey: "profilePanel.submitButton", children: t.profile.saveButton })
+          ]
+        }
+      )
+    }
+  ) }) }) });
+}
+
+// src/react/components/account/AddressesPanel.tsx
+var import_react23 = require("react");
+
+// src/react/components/account/AddressForm.tsx
+var import_react22 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function AddressForm(props) {
+  const a = useAppearance();
+  const { t } = useCopy();
+  const i = props.initial;
+  const [form, setForm] = (0, import_react22.useState)({
+    label: i?.label ?? "",
+    firstName: i?.firstName ?? "",
+    lastName: i?.lastName ?? "",
+    company: i?.company ?? "",
+    addressLine1: i?.addressLine1 ?? "",
+    addressLine2: i?.addressLine2 ?? "",
+    city: i?.city ?? "",
+    stateProvince: i?.stateProvince ?? "",
+    postalCode: i?.postalCode ?? "",
+    countryCode: i?.countryCode ?? "",
+    phone: i?.phone ?? ""
+  });
+  const set = (key) => (value) => setForm((f) => ({ ...f, [key]: value }));
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    "form",
+    {
+      ...a.el("addressesPanel.form", "throttle-stack"),
+      onSubmit: (e) => {
+        e.preventDefault();
+        props.onSubmit({
+          label: form.label || void 0,
+          firstName: form.firstName || void 0,
+          lastName: form.lastName || void 0,
+          company: form.company || void 0,
+          addressLine1: form.addressLine1,
+          addressLine2: form.addressLine2 || void 0,
+          city: form.city,
+          stateProvince: form.stateProvince || void 0,
+          postalCode: form.postalCode || void 0,
+          // The API wants ISO-3166 alpha-2; uppercase so "gb" is not rejected.
+          countryCode: form.countryCode.toUpperCase(),
+          phone: form.phone || void 0
+        });
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.label, value: form.label, onChange: set("label") }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.firstName, value: form.firstName, onChange: set("firstName"), autoComplete: "given-name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.lastName, value: form.lastName, onChange: set("lastName"), autoComplete: "family-name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.company, value: form.company, onChange: set("company"), autoComplete: "organization" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          Field,
+          {
+            label: t.addresses.addressLine1,
+            value: form.addressLine1,
+            onChange: set("addressLine1"),
+            required: true,
+            autoComplete: "address-line1"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          Field,
+          {
+            label: t.addresses.addressLine2,
+            value: form.addressLine2,
+            onChange: set("addressLine2"),
+            autoComplete: "address-line2"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.city, value: form.city, onChange: set("city"), required: true, autoComplete: "address-level2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          Field,
+          {
+            label: t.addresses.stateProvince,
+            value: form.stateProvince,
+            onChange: set("stateProvince"),
+            autoComplete: "address-level1"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          Field,
+          {
+            label: t.addresses.postalCode,
+            value: form.postalCode,
+            onChange: set("postalCode"),
+            autoComplete: "postal-code"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          Field,
+          {
+            label: t.addresses.countryCode,
+            value: form.countryCode,
+            onChange: set("countryCode"),
+            required: true,
+            autoComplete: "country",
+            hint: "ISO 3166-1 alpha-2, e.g. GB"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Field, { label: t.addresses.phone, type: "tel", value: form.phone, onChange: set("phone"), autoComplete: "tel" }),
+        props.error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Alert, { tone: "error", children: props.error }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "throttle-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { type: "submit", loading: props.submitting, children: t.common.save }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { variant: "link", onClick: props.onCancel, children: t.common.cancel })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/components/account/AddressesPanel.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function AddressesPanel(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const resource = useAddresses();
+  const { submitting, error, run } = useAction();
+  const [editing, setEditing] = (0, import_react23.useState)(null);
+  const variant = props.variant ?? "rows";
+  const rowsVariant = variant === "rows";
+  const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
+  const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
+  const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
+  const close = () => setEditing(null);
+  const formatAddress = (address) => [address.addressLine2, address.city, address.stateProvince, address.postalCode, address.countryCode].filter(Boolean).join(", ");
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...a.el("addressesPanel.root", "throttle-panel"), children: [
+    !editing && error ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Alert, { tone: "error", children: error }) : null,
+    editing ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      AddressForm,
+      {
+        initial: editing === "new" ? void 0 : editing,
+        submitting,
+        error,
+        onCancel: close,
+        onSubmit: (input) => void run(async () => {
+          if (editing === "new") await resource.create(input);
+          else await resource.update(editing.id, input);
+          close();
+        })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { elementKey: "addressesPanel.addButton", variant: "secondary", onClick: () => setEditing("new"), children: t.addresses.addButton }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        PanelState,
+        {
+          resource,
+          isEmpty: (rows) => rows.length === 0,
+          emptyTitle: t.addresses.empty,
+          emptyDescription: t.addresses.emptyDescription,
+          children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            DataTable,
+            {
+              tableKey: "addressesPanel.table",
+              rowElementKey: "addressesPanel.row",
+              rowKey: (address) => address.id,
+              rows,
+              columns: [
+                { key: "label", label: t.addresses.label, render: (address) => address.label || address.addressLine1 },
+                { key: "address", label: t.addresses.columnAddress, render: (address) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                  address.addressLine1,
+                  formatAddress(address) ? `, ${formatAddress(address)}` : ""
+                ] }) },
+                { key: "default", label: t.addresses.defaultBadge, render: (address) => address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null },
+                { key: "actions", label: t.common.actions, render: (address) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "throttle-actions", children: [
+                  !address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    Button,
+                    {
+                      variant: "secondary",
+                      elementKey: "addressesPanel.defaultButton",
+                      onClick: () => void run(() => resource.update(address.id, { isDefault: true })),
+                      children: t.addresses.makeDefault
+                    }
+                  ) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    Button,
+                    {
+                      variant: "secondary",
+                      elementKey: "addressesPanel.editButton",
+                      onClick: () => setEditing(address),
+                      children: t.common.edit
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    Button,
+                    {
+                      variant: "danger",
+                      elementKey: "addressesPanel.deleteButton",
+                      disabled: submitting,
+                      onClick: () => {
+                        if (!window.confirm(t.addresses.deleteConfirm)) return;
+                        void run(() => resource.remove(address.id));
+                      },
+                      children: t.common.delete
+                    }
+                  )
+                ] }) }
+              ]
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...a.el("addressesPanel.list", listBase), children: rows.map((address) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ...a.el("addressesPanel.item", itemBase), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "throttle-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: address.label || address.addressLine1 }),
+                address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { tone: "success", children: t.addresses.defaultBadge }) : null
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "throttle-muted", children: address.addressLine1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "throttle-muted", children: formatAddress(address) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "throttle-actions", children: [
+              !address.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                Button,
+                {
+                  variant: actionVariant("secondary"),
+                  elementKey: "addressesPanel.defaultButton",
+                  onClick: () => void run(() => resource.update(address.id, { isDefault: true })),
+                  children: t.addresses.makeDefault
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                Button,
+                {
+                  variant: actionVariant("secondary"),
+                  elementKey: "addressesPanel.editButton",
+                  onClick: () => setEditing(address),
+                  children: t.common.edit
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                Button,
+                {
+                  variant: actionVariant("danger"),
+                  elementKey: "addressesPanel.deleteButton",
+                  disabled: submitting,
+                  onClick: () => {
+                    if (!window.confirm(t.addresses.deleteConfirm)) return;
+                    void run(() => resource.remove(address.id));
+                  },
+                  children: t.common.delete
+                }
+              )
+            ] })
+          ] }, address.id)) })
+        }
+      )
+    ] })
+  ] }) }) });
+}
+
+// src/react/components/account/PaymentMethodsPanel.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function PaymentMethodsPanel(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const { emailVerified } = useAuth();
+  const resource = useSavedCards();
+  const { submitting, error, run } = useAction();
+  const variant = props.variant ?? "rows";
+  const rowsVariant = variant === "rows";
+  const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
+  const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
+  const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
+  const cardLabel = (card) => `${(card.cardBrand ?? card.methodType).toUpperCase()} \u2022\u2022\u2022\u2022 ${card.cardLastFour ?? "____"}`;
+  const expiryLabel = (card) => card.cardExpMonth && card.cardExpYear ? `${String(card.cardExpMonth).padStart(2, "0")}/${card.cardExpYear}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...a.el("paymentMethodsPanel.root", "throttle-panel"), children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      PanelState,
+      {
+        resource,
+        gated: !emailVerified,
+        gatedDescription: t.paymentMethods.gatedDescription,
+        isEmpty: (rows) => rows.length === 0,
+        emptyTitle: t.paymentMethods.empty,
+        emptyDescription: t.paymentMethods.emptyDescription,
+        children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          DataTable,
+          {
+            tableKey: "paymentMethodsPanel.table",
+            rowElementKey: "paymentMethodsPanel.row",
+            rowKey: (card) => card.id,
+            rows,
+            columns: [
+              { key: "card", label: t.paymentMethods.columnCard, render: (card) => cardLabel(card) },
+              { key: "expires", label: t.paymentMethods.expires, render: (card) => expiryLabel(card) },
+              { key: "default", label: t.paymentMethods.defaultBadge, render: (card) => card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null },
+              { key: "actions", label: t.common.actions, render: (card) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "throttle-actions", children: [
+                !card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  Button,
+                  {
+                    variant: "secondary",
+                    loading: submitting,
+                    elementKey: "paymentMethodsPanel.defaultButton",
+                    onClick: () => void run(() => resource.setDefault(card.id)),
+                    children: t.paymentMethods.makeDefault
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  Button,
+                  {
+                    variant: "danger",
+                    elementKey: "paymentMethodsPanel.deleteButton",
+                    disabled: submitting,
+                    onClick: () => {
+                      if (!window.confirm(t.paymentMethods.deleteConfirm)) return;
+                      void run(() => resource.remove(card.id));
+                    },
+                    children: t.common.delete
+                  }
+                )
+              ] }) }
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...a.el("paymentMethodsPanel.list", listBase), children: rows.map((card) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ...a.el("paymentMethodsPanel.item", itemBase), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: cardLabel(card) }),
+              card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Badge, { tone: "success", children: t.paymentMethods.defaultBadge }) : null
+            ] }),
+            card.cardExpMonth && card.cardExpYear ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "throttle-muted", children: [
+              t.paymentMethods.expires,
+              " ",
+              String(card.cardExpMonth).padStart(2, "0"),
+              "/",
+              card.cardExpYear
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "throttle-actions", children: [
+            !card.isDefault ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              Button,
+              {
+                variant: actionVariant("secondary"),
+                loading: submitting,
+                elementKey: "paymentMethodsPanel.defaultButton",
+                onClick: () => void run(() => resource.setDefault(card.id)),
+                children: t.paymentMethods.makeDefault
+              }
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              Button,
+              {
+                variant: actionVariant("danger"),
+                elementKey: "paymentMethodsPanel.deleteButton",
+                disabled: submitting,
+                onClick: () => {
+                  if (!window.confirm(t.paymentMethods.deleteConfirm)) return;
+                  void run(() => resource.remove(card.id));
+                },
+                children: t.common.delete
+              }
+            )
+          ] })
+        ] }, card.id)) })
+      }
+    )
+  ] }) }) });
+}
+
+// src/react/components/account/OrdersPanel.tsx
+var import_react24 = require("react");
+
+// src/react/components/format.ts
+function formatMoney(minorUnits, currency, locale) {
+  const code = (currency || "USD").toUpperCase();
+  let digits = 2;
+  try {
+    digits = new Intl.NumberFormat("en-US", { style: "currency", currency: code }).resolvedOptions().maximumFractionDigits ?? 2;
+  } catch {
+  }
+  const major = minorUnits / 10 ** digits;
+  try {
+    return new Intl.NumberFormat(locale, { style: "currency", currency: code }).format(major);
+  } catch {
+    try {
+      return new Intl.NumberFormat("en-US", { style: "currency", currency: code }).format(major);
+    } catch {
+      return `${code} ${major.toFixed(digits)}`;
+    }
+  }
+}
+function formatDate(value, locale) {
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
+  } catch {
+    return date.toISOString().slice(0, 10);
+  }
+}
+
+// src/react/components/account/OrderStatus.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function copyKey(wire) {
+  return wire.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
+}
+var ATTENTION_PAYMENT_STATES = /* @__PURE__ */ new Set(["pending", "failed", "disputed", "expired"]);
+var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["cancelled", "closed", "void", "expired", "voided"]);
+function StatusBadge(props) {
+  const label = props.labels[copyKey(props.status)] ?? props.status.replace(/_/g, " ");
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: label });
+}
+function OrderStatus(props) {
+  const labels = props.t.orders.statusLabels;
+  const payLabels = props.t.orders.paymentLabels;
+  const lifecycle = labels[copyKey(props.status)] ?? props.status.replace(/_/g, " ");
+  const money = props.paymentStatus ? payLabels[copyKey(props.paymentStatus)] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { tone: TERMINAL_STATUSES.has(props.status) ? "muted" : "neutral", children: lifecycle }),
+    money ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { tone: ATTENTION_PAYMENT_STATES.has(props.paymentStatus) ? "warning" : "neutral", children: money }) : null
+  ] });
+}
+
+// src/react/components/account/OrderDetail.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function Line(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "throttle-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "throttle-muted", children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: props.value })
+  ] });
+}
+function OrderDetail(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t, locale } = useCopy(props.localization);
+  const resource = useOrder(props.orderId);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ...a.el("orderDetail.root", "throttle-panel"), children: [
+    props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "link", elementKey: "orderDetail.backButton", onClick: props.onBack, children: t.common.back }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      PanelState,
+      {
+        resource,
+        isEmpty: (o) => o === null,
+        emptyTitle: t.orders.empty,
+        skeletonRows: 5,
+        children: (order) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h3", { children: order.orderNumber }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(OrderStatus, { status: order.status, paymentStatus: order.paymentStatus, t })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "throttle-muted", children: formatDate(order.createdAt, locale) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ...a.el("orderDetail.lineItems", "throttle-stack"), children: order.lineItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ...a.el("orderDetail.lineItem", "throttle-lineitem"), children: [
+            item.imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { className: "throttle-lineitem__image", src: item.imageUrl, alt: "" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("strong", { children: item.name }),
+              item.description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "throttle-muted", children: item.description }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "throttle-muted", children: [
+                t.orders.quantity,
+                " ",
+                item.quantity,
+                " \xD7 ",
+                formatMoney(item.unitPrice, order.currency, locale)
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: formatMoney(item.total, order.currency, locale) })
+          ] }, item.id)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ...a.el("orderDetail.totals", "throttle-totals"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Line, { label: t.orders.subtotal, value: formatMoney(order.subtotal, order.currency, locale) }),
+            order.discountTotal ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Line, { label: t.orders.discount, value: formatMoney(-order.discountTotal, order.currency, locale) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Line, { label: t.orders.shipping, value: formatMoney(order.shippingTotal, order.currency, locale) }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Line, { label: t.orders.tax, value: formatMoney(order.taxTotal, order.currency, locale) }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Line, { label: t.orders.total, value: formatMoney(order.total, order.currency, locale) })
+          ] }),
+          order.subscriptionId && props.onViewSubscription ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "secondary", onClick: () => props.onViewSubscription(order.subscriptionId), children: t.orders.viewSubscription }) : null
+        ] })
+      }
+    )
+  ] }) }) });
+}
+
+// src/react/components/account/OrdersPanel.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function OrdersPanel(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t, locale } = useCopy(props.localization);
+  const { emailVerified } = useAuth();
+  const resource = useOrders();
+  const [openId, setOpenId] = (0, import_react24.useState)(null);
+  const variant = props.variant ?? "table";
+  const rowsVariant = variant === "rows";
+  const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
+  const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
+  if (openId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      OrderDetail,
+      {
+        orderId: openId,
+        onBack: () => setOpenId(null),
+        onViewSubscription: props.onViewSubscription,
+        appearance: props.appearance,
+        localization: props.localization
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...a.el("ordersPanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    PanelState,
+    {
+      resource,
+      gated: !emailVerified,
+      gatedDescription: t.orders.gatedDescription,
+      isEmpty: (rows) => rows.length === 0,
+      emptyTitle: t.orders.empty,
+      emptyDescription: t.orders.emptyDescription,
+      children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        DataTable,
+        {
+          tableKey: "ordersPanel.table",
+          rowElementKey: "ordersPanel.row",
+          rowKey: (o) => o.id,
+          onRowClick: (o) => setOpenId(o.id),
+          rows,
+          columns: [
+            { key: "orderNumber", label: t.orders.number },
+            { key: "createdAt", label: t.orders.date, render: (o) => formatDate(o.createdAt, locale) },
+            {
+              key: "status",
+              label: t.orders.status,
+              render: (o) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
+            },
+            {
+              key: "total",
+              label: t.orders.total,
+              render: (o) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "throttle-table__money", children: formatMoney(o.total, o.currency, locale) })
+            }
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ...a.el("ordersPanel.list", listBase), children: rows.map((o) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ...a.el("ordersPanel.item", itemBase), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("strong", { children: o.orderNumber }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OrderStatus, { status: o.status, paymentStatus: o.paymentStatus, t })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "throttle-muted", children: formatDate(o.createdAt, locale) }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "throttle-muted", children: formatMoney(o.total, o.currency, locale) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "throttle-actions", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          Button,
+          {
+            variant: rowsVariant ? "link" : "secondary",
+            elementKey: "ordersPanel.viewButton",
+            onClick: () => setOpenId(o.id),
+            children: t.common.view
+          }
+        ) })
+      ] }, o.id)) })
+    }
+  ) }) }) });
+}
+
+// src/react/components/account/InvoicesPanel.tsx
+var import_react25 = require("react");
+
+// src/react/components/account/InvoiceDetail.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function Line2(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "throttle-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "throttle-muted", children: props.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: props.value })
+  ] });
+}
+function InvoiceDetail(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t, locale } = useCopy(props.localization);
+  const { account } = useAuth();
+  const resource = useInvoice(props.invoiceId);
+  const { submitting, error, run } = useAction();
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ...a.el("invoiceDetail.root", "throttle-panel"), children: [
+    props.onBack ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Button, { variant: "link", elementKey: "invoiceDetail.backButton", onClick: props.onBack, children: t.common.back }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PanelState, { resource, isEmpty: (i) => i === null, emptyTitle: t.invoices.empty, skeletonRows: 4, children: (invoice) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "throttle-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { children: invoice.number }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StatusBadge, { status: invoice.status, labels: t.invoices.statusLabels })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ...a.el("invoiceDetail.totals", "throttle-totals"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Line2, { label: t.invoices.issued, value: formatDate(invoice.issuedAt, locale) }),
+        invoice.dueAt ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Line2, { label: t.invoices.due, value: formatDate(invoice.dueAt, locale) }) : null,
+        invoice.periodStart && invoice.periodEnd ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          Line2,
+          {
+            label: t.invoices.period,
+            value: `${formatDate(invoice.periodStart, locale)} \u2013 ${formatDate(invoice.periodEnd, locale)}`
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Line2, { label: t.invoices.total, value: formatMoney(invoice.total, invoice.currency, locale) }),
+        invoice.amountRefunded ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          Line2,
+          {
+            label: t.invoices.refunded,
+            value: formatMoney(invoice.amountRefunded, invoice.currency, locale)
+          }
+        ) : null
+      ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Alert, { tone: "error", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        Button,
+        {
+          variant: "secondary",
+          loading: submitting,
+          elementKey: "invoiceDetail.downloadButton",
+          onClick: () => void run(async () => {
+            const { url } = await account.getInvoicePdfUrl(invoice.id);
+            const opened = window.open(url, "_blank", "noopener,noreferrer");
+            if (!opened) window.location.assign(url);
+          }),
+          children: t.invoices.downloadButton
+        }
+      )
+    ] }) })
+  ] }) }) });
+}
+
+// src/react/components/account/InvoicesPanel.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function InvoicesPanel(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t, locale } = useCopy(props.localization);
+  const { emailVerified } = useAuth();
+  const resource = useInvoices();
+  const [openId, setOpenId] = (0, import_react25.useState)(null);
+  const variant = props.variant ?? "table";
+  const rowsVariant = variant === "rows";
+  const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
+  const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
+  if (openId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      InvoiceDetail,
+      {
+        invoiceId: openId,
+        onBack: () => setOpenId(null),
+        appearance: props.appearance,
+        localization: props.localization
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ...a.el("invoicesPanel.root", "throttle-panel"), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    PanelState,
+    {
+      resource,
+      gated: !emailVerified,
+      gatedDescription: t.invoices.gatedDescription,
+      isEmpty: (rows) => rows.length === 0,
+      emptyTitle: t.invoices.empty,
+      emptyDescription: t.invoices.emptyDescription,
+      children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        DataTable,
+        {
+          tableKey: "invoicesPanel.table",
+          rowElementKey: "invoicesPanel.row",
+          rowKey: (i) => i.id,
+          onRowClick: (i) => setOpenId(i.id),
+          rows,
+          columns: [
+            { key: "number", label: t.invoices.number },
+            { key: "issuedAt", label: t.invoices.issued, render: (i) => formatDate(i.issuedAt, locale) },
+            { key: "status", label: t.invoices.status, render: (i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StatusBadge, { status: i.status, labels: t.invoices.statusLabels }) },
+            {
+              key: "total",
+              label: t.invoices.total,
+              render: (i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "throttle-table__money", children: formatMoney(i.total, i.currency, locale) })
+            }
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ...a.el("invoicesPanel.list", listBase), children: rows.map((i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ...a.el("invoicesPanel.item", itemBase), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("strong", { children: i.number }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StatusBadge, { status: i.status, labels: t.invoices.statusLabels })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "throttle-muted", children: formatDate(i.issuedAt, locale) }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "throttle-muted", children: formatMoney(i.total, i.currency, locale) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "throttle-actions", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          Button,
+          {
+            variant: rowsVariant ? "link" : "secondary",
+            elementKey: "invoicesPanel.viewButton",
+            onClick: () => setOpenId(i.id),
+            children: t.common.view
+          }
+        ) })
+      ] }, i.id)) })
+    }
+  ) }) }) });
+}
+
+// src/react/components/account/SubscriptionsPanel.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var CAN_PAUSE = /* @__PURE__ */ new Set(["active", "trialing"]);
+var CAN_RESUME = /* @__PURE__ */ new Set(["paused"]);
+var CAN_CANCEL = /* @__PURE__ */ new Set(["active", "trialing", "paused", "past_due", "unpaid"]);
+function SubscriptionsPanel(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t, locale } = useCopy(props.localization);
+  const { emailVerified } = useAuth();
+  const resource = useSubscriptions();
+  const { submitting, error, run } = useAction();
+  const variant = props.variant ?? "rows";
+  const rowsVariant = variant === "rows";
+  const listBase = rowsVariant ? "throttle-rows" : "throttle-stack";
+  const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
+  const actionVariant = (base) => rowsVariant ? base === "danger" ? "linkDanger" : "link" : base;
+  const confirmThen = (fn) => () => {
+    if (!window.confirm(t.subscriptions.cancelConfirm)) return;
+    void run(fn);
+  };
+  const priceLabel = (sub) => `${formatMoney(sub.amount, sub.currency, locale)} / ${sub.interval}${sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""}`;
+  const renewsLabel = (sub) => formatDate(sub.status === "cancelled" ? sub.cancelledAt ?? sub.currentPeriodEnd : sub.currentPeriodEnd, locale);
+  const lifecycleActions = (sub, variantFor) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-actions", children: [
+    CAN_PAUSE.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      Button,
+      {
+        variant: variantFor("secondary"),
+        loading: submitting,
+        elementKey: "subscriptionsPanel.pauseButton",
+        onClick: () => void run(() => resource.pause(sub.id)),
+        children: t.subscriptions.pauseButton
+      }
+    ) : null,
+    CAN_RESUME.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      Button,
+      {
+        variant: variantFor("secondary"),
+        loading: submitting,
+        elementKey: "subscriptionsPanel.resumeButton",
+        onClick: () => void run(() => resource.resume(sub.id)),
+        children: t.subscriptions.resumeButton
+      }
+    ) : null,
+    CAN_CANCEL.has(sub.status) && !sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      Button,
+      {
+        variant: variantFor("secondary"),
+        elementKey: "subscriptionsPanel.cancelButton",
+        disabled: submitting,
+        onClick: confirmThen(() => resource.cancel(sub.id, { atPeriodEnd: true })),
+        children: t.subscriptions.cancelAtPeriodEnd
+      }
+    ) : null,
+    CAN_CANCEL.has(sub.status) ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      Button,
+      {
+        variant: variantFor("danger"),
+        elementKey: "subscriptionsPanel.cancelNowButton",
+        disabled: submitting,
+        onClick: confirmThen(() => resource.cancel(sub.id, { atPeriodEnd: false })),
+        children: t.subscriptions.cancelNow
+      }
+    ) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("subscriptionsPanel.root", "throttle-panel"), children: [
+    error ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Alert, { tone: "error", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      PanelState,
+      {
+        resource,
+        gated: !emailVerified,
+        gatedDescription: t.subscriptions.gatedDescription,
+        isEmpty: (rows) => rows.length === 0,
+        emptyTitle: t.subscriptions.empty,
+        emptyDescription: t.subscriptions.emptyDescription,
+        children: (rows) => variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          DataTable,
+          {
+            tableKey: "subscriptionsPanel.table",
+            rowElementKey: "subscriptionsPanel.row",
+            rowKey: (sub) => sub.id,
+            rows,
+            columns: [
+              { key: "plan", label: t.subscriptions.columnPlan, render: (sub) => sub.planName ?? sub.planReference },
+              { key: "price", label: t.subscriptions.columnPrice, render: (sub) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "throttle-table__money", children: priceLabel(sub) }) },
+              { key: "renews", label: t.subscriptions.columnRenews, render: (sub) => renewsLabel(sub) },
+              { key: "status", label: t.subscriptions.columnStatus, render: (sub) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-row", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels }),
+                sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
+              ] }) },
+              { key: "actions", label: t.common.actions, render: (sub) => lifecycleActions(sub, (base) => base) }
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ...a.el("subscriptionsPanel.list", listBase), children: rows.map((sub) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ...a.el("subscriptionsPanel.item", itemBase), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: sub.planName ?? sub.planReference }),
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(StatusBadge, { status: sub.status, labels: t.subscriptions.statusLabels })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "throttle-muted", children: [
+              formatMoney(sub.amount, sub.currency, locale),
+              " / ",
+              sub.interval,
+              sub.quantity > 1 ? ` \xD7 ${sub.quantity}` : ""
+            ] }),
+            sub.status === "cancelled" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "throttle-muted", children: [
+              t.subscriptions.cancelledOn,
+              " ",
+              formatDate(sub.cancelledAt ?? sub.currentPeriodEnd, locale)
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "throttle-muted", children: [
+              sub.cancelAtPeriodEnd ? t.subscriptions.endsOn : t.subscriptions.renewsOn,
+              " ",
+              formatDate(sub.currentPeriodEnd, locale)
+            ] }),
+            sub.trialEnd ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "throttle-muted", children: [
+              t.subscriptions.trialEnds,
+              " ",
+              formatDate(sub.trialEnd, locale)
+            ] }) : null,
+            sub.cancelAtPeriodEnd ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Badge, { tone: "warning", children: t.subscriptions.cancelScheduled }) : null
+          ] }),
+          lifecycleActions(sub, actionVariant)
+        ] }, sub.id)) })
+      }
+    )
+  ] }) }) });
+}
+
+// src/react/components/account/SecurityPanel.tsx
+var import_react26 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function SecurityPanel(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t, locale, errorMessage } = useCopy(props.localization);
+  const { auth } = useAuth();
+  const variant = props.variant ?? "rows";
+  const rowsVariant = variant === "rows";
+  const itemBase = rowsVariant ? "throttle-rowitem" : "throttle-listitem";
+  const revokeVariant = rowsVariant ? "linkDanger" : "danger";
+  const [password, setPassword] = (0, import_react26.useState)("");
+  const passwordAction = useAction();
+  const sessionAction = useAction();
+  const [sessions, setSessions] = (0, import_react26.useState)(null);
+  const [listError, setListError] = (0, import_react26.useState)(null);
+  const errorMessageRef = (0, import_react26.useRef)(errorMessage);
+  (0, import_react26.useEffect)(() => {
+    errorMessageRef.current = errorMessage;
+  });
+  const load = (0, import_react26.useCallback)(async () => {
+    try {
+      setSessions(await auth.listSessions());
+      setListError(null);
+    } catch (err) {
+      setListError(errorMessageRef.current(err));
+    }
+  }, [auth]);
+  (0, import_react26.useEffect)(() => {
+    void load();
+  }, [load]);
+  const others = (sessions ?? []).filter((s) => !s.current);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("securityPanel.root", "throttle-panel"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      "form",
+      {
+        ...a.el("securityPanel.passwordForm", "throttle-stack"),
+        onSubmit: (e) => {
+          e.preventDefault();
+          void passwordAction.run(async () => {
+            await auth.changePassword(password);
+            setPassword("");
+            return t.security.changedNotice;
+          });
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h3", { children: t.security.passwordTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            Field,
+            {
+              label: t.security.newPassword,
+              type: "password",
+              autoComplete: "new-password",
+              required: true,
+              value: password,
+              onChange: setPassword
+            }
+          ),
+          passwordAction.error ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Alert, { tone: "error", children: passwordAction.error }) : null,
+          passwordAction.notice ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Alert, { tone: "success", children: passwordAction.notice }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { type: "submit", loading: passwordAction.submitting, elementKey: "securityPanel.passwordButton", children: t.security.changeButton })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("securityPanel.sessionList", "throttle-stack"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h3", { children: t.security.sessionsTitle }),
+      listError ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Alert, { tone: "error", children: listError }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button, { variant: "secondary", onClick: () => void load(), children: t.common.retry })
+      ] }) : null,
+      sessionAction.error ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Alert, { tone: "error", children: sessionAction.error }) : null,
+      sessions === null && !listError ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Skeleton, { count: 2 }) : null,
+      sessions !== null && !listError && variant === "table" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        DataTable,
+        {
+          tableKey: "securityPanel.table",
+          rowElementKey: "securityPanel.row",
+          rowKey: (session) => session.id,
+          rows: sessions,
+          columns: [
+            { key: "device", label: t.security.columnDevice, render: (session) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: session.userAgent || session.ipPrefix || session.id }),
+              session.current ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge, { tone: "success", children: t.security.thisDevice }) : null
+            ] }) },
+            { key: "lastActive", label: t.security.lastActive, render: (session) => formatDate(session.lastUsedAt, locale) },
+            { key: "actions", label: t.common.actions, render: (session) => !session.current ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              Button,
+              {
+                variant: "danger",
+                loading: sessionAction.submitting,
+                elementKey: "securityPanel.revokeButton",
+                onClick: () => void sessionAction.run(async () => {
+                  await auth.revokeSession(session.id);
+                  await load();
+                }),
+                children: t.security.revokeButton
+              }
+            ) : null }
+          ]
+        }
+      ) : (sessions ?? []).map((session) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ...a.el("securityPanel.sessionItem", itemBase), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "throttle-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("strong", { children: session.userAgent || session.ipPrefix || session.id }),
+            session.current ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge, { tone: "success", children: t.security.thisDevice }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "throttle-muted", children: [
+            t.security.lastActive,
+            " ",
+            formatDate(session.lastUsedAt, locale)
+          ] })
+        ] }),
+        !session.current ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          Button,
+          {
+            variant: revokeVariant,
+            loading: sessionAction.submitting,
+            elementKey: "securityPanel.revokeButton",
+            onClick: () => void sessionAction.run(async () => {
+              await auth.revokeSession(session.id);
+              await load();
+            }),
+            children: t.security.revokeButton
+          }
+        ) : null
+      ] }, session.id)),
+      sessions !== null && others.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "throttle-muted", children: t.security.sessionsEmpty }) : null,
+      others.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        Button,
+        {
+          variant: "danger",
+          loading: sessionAction.submitting,
+          elementKey: "securityPanel.revokeAllButton",
+          onClick: () => void sessionAction.run(async () => {
+            for (const session of others) {
+              await auth.revokeSession(session.id);
+            }
+            await load();
+          }),
+          children: t.security.revokeAllButton
+        }
+      ) : null
+    ] })
+  ] }) }) });
+}
+
+// src/react/components/account/AccountDashboard.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var ACCOUNT_TABS = [
+  "profile",
+  "addresses",
+  "paymentMethods",
+  "orders",
+  "invoices",
+  "subscriptions",
+  "security"
+];
+var HASH_FOR2 = {
+  profile: "#/profile",
+  addresses: "#/addresses",
+  paymentMethods: "#/payment-methods",
+  orders: "#/orders",
+  invoices: "#/invoices",
+  subscriptions: "#/subscriptions",
+  security: "#/security"
+};
+var TAB_FOR_HASH = Object.fromEntries(
+  Object.entries(HASH_FOR2).map(([tab, hash]) => [hash, tab])
+);
+function AccountDashboard(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const { status } = useAuth();
+  const shown = props.tabs ?? [...ACCOUNT_TABS];
+  const controlled = props.tab !== void 0;
+  const [internal, setInternal] = (0, import_react27.useState)(shown[0] ?? "profile");
+  const idBase = (0, import_react27.useId)();
+  (0, import_react27.useEffect)(() => {
+    if (props.routing !== "hash" || typeof window === "undefined") return;
+    const apply = () => {
+      const next = TAB_FOR_HASH[window.location.hash] ?? shown[0];
+      if (!next || !shown.includes(next)) return;
+      if (controlled) props.onTabChange?.(next);
+      else setInternal(next);
+    };
+    apply();
+    window.addEventListener("hashchange", apply);
+    return () => window.removeEventListener("hashchange", apply);
+  }, [props.routing, controlled, shown.join(",")]);
+  if (status !== "authenticated") return null;
+  const active = controlled ? props.tab : internal;
+  const go = (next) => {
+    props.onTabChange?.(next);
+    if (!controlled) setInternal(next);
+    if (props.routing === "hash" && typeof window !== "undefined") window.location.hash = HASH_FOR2[next];
+  };
+  const shared = { appearance: props.appearance, localization: props.localization };
+  const sidebar = (props.layout ?? "sidebar") === "sidebar";
+  const nav = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    Tabs,
+    {
+      idBase,
+      orientation: sidebar ? "vertical" : "horizontal",
+      active,
+      onChange: (id) => go(id),
+      tabs: shown.map((id) => ({
+        id,
+        label: t.account.tabs[id],
+        // Icons ride the rail only. In the horizontal strip they cost
+        // horizontal room, which is the scarce axis there.
+        icon: sidebar ? ACCOUNT_ICONS[id] : void 0
+      }))
+    }
+  );
+  const panel = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "div",
+    {
+      ...a.el("accountDashboard.panel", sidebar ? "throttle-account__content" : "throttle-tabs__panel"),
+      role: "tabpanel",
+      id: `${idBase}-panel-${active}`,
+      "aria-labelledby": `${idBase}-tab-${active}`,
+      tabIndex: 0,
+      children: [
+        active === "profile" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ProfilePanel, { ...shared }) : null,
+        active === "addresses" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AddressesPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "paymentMethods" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PaymentMethodsPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "orders" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OrdersPanel, { ...shared, variant: props.panelVariant, onViewSubscription: () => go("subscriptions") }) : null,
+        active === "invoices" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(InvoicesPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "subscriptions" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SubscriptionsPanel, { ...shared, variant: props.panelVariant }) : null,
+        active === "security" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SecurityPanel, { ...shared, variant: props.panelVariant }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ...a.el("accountDashboard.root", "throttle-panel throttle-account-root"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(VerifyEmailBanner, { ...shared }),
+    sidebar ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "throttle-account", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.el("accountDashboard.sidebar"), children: nav }),
+      panel
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...a.el("accountDashboard.tabs"), children: nav }),
+      panel
+    ] })
+  ] }) }) });
+}
+
+// src/react/components/account/AccountModal.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function AccountModal(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const titleId = (0, import_react28.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    Modal,
+    {
+      open: props.open,
+      onClose: props.onClose,
+      labelledBy: titleId,
+      restoreFocusTo: props.restoreFocusTo,
+      overlayKey: "accountModal.overlay",
+      containerKey: "accountModal.container",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ...a.el("accountModal.header", "throttle-modal__header"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h2", { id: titleId, ...a.el("accountModal.title", "throttle-modal__title"), children: t.account.title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ...a.el("accountModal.body", "throttle-modal__body"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AccountDashboard, { tabs: props.tabs, appearance: props.appearance, localization: props.localization }) })
+      ]
+    }
+  ) });
+}
+
+// src/react/components/provider.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+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 = (0, import_react29.createContext)(null);
+function useThrottle() {
+  const ctx = (0, import_react29.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] = (0, import_react29.useState)(false);
+  const resolveStepUp = (0, import_react29.useRef)(null);
+  const claimRef = (0, import_react29.useRef)(claimCartOnSignIn);
+  claimRef.current = claimCartOnSignIn;
+  const [overlay, setOverlay] = (0, import_react29.useState)(null);
+  const overlayRestoreFocus = (0, import_react29.useRef)(null);
+  const [accountTabs, setAccountTabs] = (0, import_react29.useState)(void 0);
+  const onOverlaySuccess = (0, import_react29.useRef)(null);
+  const openSignIn = (0, import_react29.useCallback)((onSuccess) => {
+    onOverlaySuccess.current = onSuccess ?? null;
+    setOverlay("signIn");
+  }, []);
+  const openSignUp = (0, import_react29.useCallback)((onSuccess) => {
+    onOverlaySuccess.current = onSuccess ?? null;
+    setOverlay("signUp");
+  }, []);
+  const openAccount = (0, import_react29.useCallback)((opts) => {
+    onOverlaySuccess.current = null;
+    overlayRestoreFocus.current = opts?.restoreFocusTo ?? null;
+    setAccountTabs(opts?.tabs);
+    setOverlay("account");
+  }, []);
+  const closeOverlay = (0, import_react29.useCallback)(() => {
+    onOverlaySuccess.current = null;
+    overlayRestoreFocus.current = null;
+    setOverlay(null);
+  }, []);
+  const handleOverlaySuccess = (0, import_react29.useCallback)(() => {
+    const fn = onOverlaySuccess.current;
+    onOverlaySuccess.current = null;
+    setOverlay(null);
+    fn?.();
+  }, []);
+  const ui = (0, import_react29.useMemo)(
+    () => ({ overlay, openSignIn, openSignUp, openAccount, close: closeOverlay }),
+    [overlay, openSignIn, openSignUp, openAccount, closeOverlay]
+  );
+  const askForStepUp = (0, import_react29.useCallback)(
+    () => new Promise((resolve) => {
+      resolveStepUp.current = resolve;
+      setStepUpOpen(true);
+    }),
+    []
+  );
+  const auth = (0, import_react29.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}`);
+      }
+    };
+    return {
+      ...client,
+      async signIn(email, password) {
+        await client.signIn(email, password);
+        await claim();
+      },
+      async register(email, password) {
+        const result = await client.register(email, password);
+        if (result.status === "active") await claim();
+        return result;
+      }
+    };
+  }, [injected, publishableKey, baseUrl]);
+  const finishStepUp = (password) => {
+    setStepUpOpen(false);
+    const resolve = resolveStepUp.current;
+    resolveStepUp.current = null;
+    resolve?.(password);
+  };
+  const authOverlayOpen = overlay === "signIn" || overlay === "signUp";
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppearanceProvider, { value: appearance ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(LocalizationProvider, { value: localization ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(BrandLogoProvider, { value: logo ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ThrottleAuthProvider, { auth, publishableKey, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ThrottleUIContext.Provider, { value: ui, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StepUpDialog, { open: stepUpOpen, onResolve: finishStepUp }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      AuthModal,
+      {
+        open: authOverlayOpen,
+        onClose: closeOverlay,
+        initialView: overlay === "signUp" ? "signUp" : "signIn",
+        afterSignIn: handleOverlaySuccess,
+        afterSignUp: handleOverlaySuccess
+      },
+      overlay === "signUp" ? "signUp" : "signIn"
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccountModal, { open: overlay === "account", onClose: closeOverlay, tabs: accountTabs, restoreFocusTo: overlayRestoreFocus.current })
+  ] }) }) }) }) });
+}
+
+// src/react/components/auth/SignInButton.tsx
+var import_react30 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function SignInButton(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const ui = (0, import_react30.useContext)(ThrottleUIContext);
+  const [localOpen, setLocalOpen] = (0, import_react30.useState)(false);
+  const useShared = ui !== null && props.initialView === void 0;
+  const label = props.children ?? t.signIn.submitButton;
+  if (props.mode === "redirect") {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("a", { ...a.el("signInButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
+  }
+  const openModal = () => {
+    if (useShared) ui.openSignIn(props.afterSignIn);
+    else setLocalOpen(true);
+  };
+  const closeModal = () => {
+    if (useShared) ui.close();
+    else setLocalOpen(false);
+  };
+  const trigger = props.asChild && (0, import_react30.isValidElement)(props.children) ? (0, import_react30.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { elementKey: "signInButton.root", onClick: openModal, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(AppearanceProvider, { value: scoped, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { ...a.rootProps, children: trigger }),
+    !useShared ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      AuthModal,
+      {
+        open: localOpen,
+        onClose: closeModal,
+        initialView: props.initialView,
+        appearance: props.appearance,
+        localization: props.localization,
+        afterSignIn: () => {
+          closeModal();
+          props.afterSignIn?.();
+        }
+      }
+    ) : null
+  ] });
+}
+
+// src/react/components/auth/SignUpButton.tsx
+var import_react31 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function SignUpButton(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const ui = (0, import_react31.useContext)(ThrottleUIContext);
+  const [localOpen, setLocalOpen] = (0, import_react31.useState)(false);
+  const useShared = ui !== null && props.initialView === void 0;
+  const label = props.children ?? t.signUp.submitButton;
+  if (props.mode === "redirect") {
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("a", { ...a.el("signUpButton.root", "throttle-button throttle-button--primary"), href: props.url ?? "#", children: label }) }) });
+  }
+  const openModal = () => {
+    if (useShared) ui.openSignUp(props.afterSignUp);
+    else setLocalOpen(true);
+  };
+  const closeModal = () => {
+    if (useShared) ui.close();
+    else setLocalOpen(false);
+  };
+  const trigger = props.asChild && (0, import_react31.isValidElement)(props.children) ? (0, import_react31.cloneElement)(props.children, { onClick: openModal }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { elementKey: "signUpButton.root", onClick: openModal, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AppearanceProvider, { value: scoped, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { ...a.rootProps, children: trigger }),
+    !useShared ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      AuthModal,
+      {
+        open: localOpen,
+        onClose: closeModal,
+        initialView: props.initialView ?? "signUp",
+        appearance: props.appearance,
+        localization: props.localization,
+        afterSignUp: () => {
+          closeModal();
+          props.afterSignUp?.();
+        }
+      }
+    ) : null
+  ] });
+}
+
+// src/react/components/auth/SignOutButton.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function SignOutButton(props) {
+  const a = useAppearance();
+  const { auth } = useAuth();
+  const { t } = useCopy(props.localization);
+  const { submitting, run } = useAction();
+  const label = props.children ?? (props.everywhere ? t.userButton.signOutAll : t.userButton.signOut);
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    Button,
+    {
+      variant: "secondary",
+      loading: submitting,
+      elementKey: "signOutButton.root",
+      onClick: () => void run(async () => {
+        if (props.everywhere) await auth.signOutEverywhere();
+        else await auth.signOut();
+        props.onSignedOut?.();
+      }),
+      children: label
+    }
+  ) });
+}
+
+// src/react/components/auth/SignInPage.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function SignInPage(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { ...a.el("signInPage.root", "throttle-page"), children: [
+    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...a.el("signInPage.logo", "throttle-page__logo"), children: props.logo }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      SignIn,
+      {
+        onSuccess: props.onSuccess,
+        onForgotPassword: props.onForgotPassword,
+        onSignUp: props.onSignUp,
+        appearance: props.appearance,
+        localization: props.localization
+      }
+    ),
+    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...a.el("signInPage.footer", "throttle-page__footer"), children: props.footer }) : null
+  ] }) }) });
+}
+
+// src/react/components/auth/SignUpPage.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function SignUpPage(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { ...a.el("signUpPage.root", "throttle-page"), children: [
+    props.logo ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...a.el("signUpPage.logo", "throttle-page__logo"), children: props.logo }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      SignUp,
+      {
+        onSuccess: props.onSuccess,
+        onSignIn: props.onSignIn,
+        appearance: props.appearance,
+        localization: props.localization
+      }
+    ),
+    props.footer ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { ...a.el("signUpPage.footer", "throttle-page__footer"), children: props.footer }) : null
+  ] }) }) });
+}
+
+// src/react/components/guards.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function SignedIn(props) {
+  const { status } = useAuth();
+  return status === "authenticated" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: props.children }) : null;
+}
+function SignedOut(props) {
+  const { status } = useAuth();
+  return status === "unauthenticated" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: props.children }) : null;
+}
+function Protect(props) {
+  const { status, emailVerified } = useAuth();
+  if (status === "loading") return null;
+  if (status !== "authenticated") return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: props.fallback ?? null });
+  if (props.requireVerified && !emailVerified) return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: props.fallback ?? null });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_jsx_runtime49.Fragment, { children: props.children });
+}
+
+// src/react/components/UserButton.tsx
+var import_react32 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function UserButtonRoot(props) {
+  const a = useAppearance(props.appearance);
+  const scoped = useAppearanceProviderValue(props.appearance);
+  const { t } = useCopy(props.localization);
+  const { auth, status, customer, emailVerified } = useAuth();
+  const ui = (0, import_react32.useContext)(ThrottleUIContext);
+  const [localOpen, setLocalOpen] = (0, import_react32.useState)(false);
+  const accountOpen = ui ? false : localOpen;
+  const titleId = (0, import_react32.useId)();
+  const rootRef = (0, import_react32.useRef)(null);
+  const openerRef = (0, import_react32.useRef)(null);
+  const openAccount = () => {
+    const opener = rootRef.current?.querySelector('button[aria-haspopup="menu"]') ?? null;
+    openerRef.current = opener;
+    if (ui) ui.openAccount({ tabs: props.tabs, restoreFocusTo: opener });
+    else setLocalOpen(true);
+  };
+  if (status !== "authenticated" || !customer) return null;
+  const name = [customer.firstName, customer.lastName].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AppearanceProvider, { value: scoped, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { ...a.rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { ref: rootRef, ...a.el("userButton.root"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      Dropdown,
+      {
+        label: t.userButton.openMenu,
+        triggerKey: "userButton.trigger",
+        menuKey: "userButton.menu",
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Avatar, { name, email: customer.email }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ...a.el("userButton.identity", "throttle-dropdown__item"), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { ...a.el("userButton.email"), children: customer.email }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Badge, { tone: emailVerified ? "success" : "warning", elementKey: "userButton.badge", children: emailVerified ? t.userButton.verified : t.userButton.unverified })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DropdownSeparator, {}),
+          props.mode === "navigate" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DropdownItem, { itemKey: "userButton.manageButton", href: props.accountUrl ?? "#", children: t.userButton.manage }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DropdownItem, { itemKey: "userButton.manageButton", onClick: openAccount, children: t.userButton.manage }),
+          props.children,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DropdownSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            DropdownItem,
+            {
+              itemKey: "userButton.signOutButton",
+              onClick: () => void auth.signOut().then(() => props.afterSignOut?.()),
+              children: t.userButton.signOut
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            DropdownItem,
+            {
+              itemKey: "userButton.signOutAllButton",
+              onClick: () => void auth.signOutEverywhere().then(() => props.afterSignOut?.()),
+              children: t.userButton.signOutAll
+            }
+          )
+        ]
+      }
+    ),
+    props.mode !== "navigate" && !ui ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      Modal,
+      {
+        open: accountOpen,
+        onClose: () => setLocalOpen(false),
+        labelledBy: titleId,
+        restoreFocusTo: openerRef.current,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("h2", { id: titleId, style: { padding: "16px 16px 0", margin: 0 }, children: t.account.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { padding: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            AccountDashboard,
+            {
+              tabs: props.tabs,
+              appearance: props.appearance,
+              localization: props.localization
+            }
+          ) })
+        ]
+      }
+    ) : null
+  ] }) }) });
+}
+function UserButtonLink(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(DropdownItem, { itemKey: "userButton.item", href: props.href, children: [
+    props.icon,
+    props.label
+  ] });
+}
+function UserButtonAction(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(DropdownItem, { itemKey: "userButton.item", onClick: props.onClick, children: [
+    props.icon,
+    props.label
+  ] });
+}
+var UserButton = Object.assign(UserButtonRoot, {
+  Link: UserButtonLink,
+  Action: UserButtonAction
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ACCOUNT_TABS,
+  AccountDashboard,
+  AccountModal,
+  AddressesPanel,
+  AuthFlow,
+  AuthModal,
+  ForgotPassword,
+  InvoiceDetail,
+  InvoicesPanel,
+  OrderDetail,
+  OrdersPanel,
+  PaymentMethodsPanel,
+  ProfilePanel,
+  Protect,
+  ResetPassword,
+  SecurityPanel,
+  SignIn,
+  SignInButton,
+  SignInPage,
+  SignOutButton,
+  SignUp,
+  SignUpButton,
+  SignUpPage,
+  SignedIn,
+  SignedOut,
+  SubscriptionsPanel,
+  THROTTLE_ELEMENT_KEYS,
+  THROTTLE_STYLES,
+  THROTTLE_STYLE_ID,
+  ThrottleAuthError,
+  ThrottleAuthProvider,
+  ThrottleProvider,
+  UserButton,
+  VerifyEmail,
+  VerifyEmailBanner,
+  createAccount,
+  createThrottleAuth,
+  enUS,
+  formatDate,
+  formatMoney,
+  localStorageAdapter,
+  memoryStorage,
+  useAddresses,
+  useAuth,
+  useAuthContext,
+  useCustomer,
+  useInvoice,
+  useInvoices,
+  useOrder,
+  useOrders,
+  useSavedCards,
+  useSubscriptions,
+  useThrottle
+});
+//# sourceMappingURL=index.cjs.map