@usethrottle/auth 0.11.0 → 0.12.1

package/dist/chunk-CUNMJ2PH.js

@@ -0,0 +1,1320 @@
+"use client";
+import {
+  messageForError
+} from "./chunk-K7RCWADI.js";
+
+// src/react/components/appearance.tsx
+import { createContext, useContext, useMemo } from "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
+import { jsx } from "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",
+  colorBorderControl: "--throttle-color-border-control",
+  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",
+  // The account dashboard's own surface and outer padding. Separate from
+  // colorBackground/colorSurface because a merchant embedding the dashboard
+  // in their page usually wants it to paint nothing at all, while still
+  // theming the cards inside it.
+  // How wide the auth card (sign-in, sign-up, forgot-password) is allowed
+  // to grow. It was pinned at 400px, which is narrow for a page that is
+  // nothing but that card.
+  cardWidth: "--throttle-card-width",
+  accountSurface: "--throttle-color-account-surface",
+  accountPadding: "--throttle-account-padding",
+  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.addButton",
+  "paymentMethodsPanel.addDialog",
+  "orderDetail.addresses",
+  "orderDetail.shippingAddress",
+  "orderDetail.billingAddress",
+  "orderDetail.timeline",
+  "orderDetail.payButton",
+  "orderDetail.trackButton",
+  "orderDetail.reorderButton",
+  // Two-column detail layout, shared by the order and invoice pages.
+  "orderDetail.layout",
+  "orderDetail.main",
+  "orderDetail.rail",
+  "orderDetail.cancelButton",
+  "orderDetail.returnButton",
+  "orderDetail.invoiceButton",
+  "orderDetail.subscriptionButton",
+  "orderDetail.actions",
+  "invoiceDetail.layout",
+  "invoiceDetail.main",
+  "invoiceDetail.rail",
+  "invoiceDetail.lineItems",
+  "invoiceDetail.lineItem",
+  "invoiceDetail.orderLink",
+  "invoiceDetail.subscriptionLink",
+  "invoiceDetail.payButton",
+  "invoiceDetail.actions",
+  "fieldRow",
+  "confirm.header",
+  "confirm.title",
+  "confirm.body",
+  "confirm.confirmButton",
+  "confirm.cancelButton",
+  "paymentMethodsPanel.table",
+  "paymentMethodsPanel.row",
+  "ordersPanel.root",
+  "ordersPanel.table",
+  "ordersPanel.row",
+  "ordersPanel.list",
+  "ordersPanel.item",
+  "ordersPanel.viewButton",
+  "orderDetail.root",
+  "orderDetail.backButton",
+  "orderDetail.lineItems",
+  "orderDetail.lineItem",
+  "orderDetail.totals",
+  "invoicesPanel.root",
+  "invoicesPanel.table",
+  "invoicesPanel.row",
+  "invoicesPanel.list",
+  "invoicesPanel.item",
+  "invoicesPanel.viewButton",
+  "invoiceDetail.root",
+  "invoiceDetail.backButton",
+  "invoiceDetail.downloadButton",
+  "invoiceDetail.totals",
+  "subscriptionsPanel.root",
+  "subscriptionsPanel.list",
+  "subscriptionsPanel.item",
+  "subscriptionsPanel.cancelButton",
+  "subscriptionsPanel.cancelNowButton",
+  "subscriptionsPanel.pauseButton",
+  "subscriptionsPanel.resumeButton",
+  "subscriptionsPanel.changeAddressButton",
+  "subscriptionsPanel.addressForm",
+  "subscriptionsPanel.table",
+  "subscriptionsPanel.row",
+  "securityPanel.root",
+  "securityPanel.passwordForm",
+  "securityPanel.passwordButton",
+  "securityPanel.sessionList",
+  "securityPanel.sessionItem",
+  "securityPanel.revokeButton",
+  "securityPanel.revokeAllButton",
+  "securityPanel.table",
+  "securityPanel.row"
+];
+var Ctx = createContext(null);
+function AppearanceProvider(props) {
+  return /* @__PURE__ */ jsx(Ctx.Provider, { value: props.value, children: props.children });
+}
+function useAppearance(local) {
+  const provider = useContext(Ctx);
+  return 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 = useContext(Ctx);
+  return 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/localization.tsx
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
+import { jsx as jsx2 } from "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?",
+    // The dismissive half of a confirmation. "Cancel" is ambiguous next to
+    // "Cancel subscription" — one dismisses the dialog, the other ends the plan.
+    keepIt: "Keep it",
+    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",
+    deleteConfirmAction: "Delete address",
+    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",
+    emptyDescription: "Add a card here, or one will be saved when you check out.",
+    addButton: "Add card",
+    addTitle: "Add a card",
+    // 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?",
+    deleteConfirmAction: "Remove card",
+    columnCard: "Card"
+  },
+  orders: {
+    shipTo: "Ship to",
+    billTo: "Bill to",
+    history: "History",
+    placed: "Order placed",
+    completed: "Completed",
+    cancelledAt: "Cancelled",
+    closedAt: "Closed",
+    payNow: "Pay now",
+    track: "Track shipment",
+    reorder: "Order again",
+    cancelOrder: "Cancel order",
+    cancelOrderConfirm: "Cancel this order?",
+    cancelOrderBody: "This cannot be undone. Nothing has been charged, so there is nothing to refund.",
+    cancelOrderAction: "Cancel order",
+    requestReturn: "Request a return",
+    requestReturnConfirm: "Request a return for this order?",
+    requestReturnBody: "The merchant reviews your request and will be in touch. Nothing is refunded until they approve it.",
+    requestReturnAction: "Send request",
+    returnRequested: "Return requested. The merchant will be in touch.",
+    downloadInvoice: "Download invoice",
+    summary: "Summary",
+    empty: "No orders yet",
+    emptyDescription: "Orders you place will appear here.",
+    gatedDescription: "Verify your email to see your order history.",
+    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",
+    viewSubscriptionFor: "View subscription for"
+  },
+  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",
+    items: "Items",
+    summary: "Summary",
+    viewOrder: "View order",
+    viewSubscription: "View subscription",
+    payButton: "Pay this invoice",
+    billedTo: "Billed to",
+    /** Shown when an invoice bills less than the order, matching the PDF. */
+    orderTotal: "Order total",
+    amountPaid: "Amount paid",
+    waived: "Waived",
+    amountDue: "Amount due",
+    balanceDue: "Balance due",
+    /** 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: {
+    cancelConfirmAction: "Cancel plan",
+    pauseConfirm: "Pause this subscription?",
+    resumeConfirm: "Resume this subscription?",
+    // Distinct from cancelConfirm: ending it now is not the same promise as
+    // letting it run to the end of a period the buyer already paid for.
+    cancelNowConfirm: "End this subscription immediately?",
+    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",
+    installmentProgress: "Payment {paid} of {total}",
+    installmentTotal: "{amount} total",
+    installmentNext: "Next {amount} on {date}",
+    /** Spec §5: a varied schedule's dated list; dates are estimates, hence "~". */
+    upcomingPayments: "Upcoming payments",
+    upcomingPayment: "{amount} \xB7 ~{date}",
+    cancelButton: "Cancel",
+    cancelAtPeriodEnd: "Cancel at period end",
+    cancelNow: "Cancel immediately",
+    pauseButton: "Pause",
+    resumeButton: "Resume",
+    /** A physical subscription's ship-to, and the control that changes it. */
+    shipsTo: "Ships to",
+    changeAddress: "Change address",
+    changeAddressTitle: "Change shipping address",
+    changeAddressHint: "Your next box ships here. Orders already placed keep their address.",
+    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`. `completed` is an installment plan that
+     * has taken its last payment.
+     */
+    statusLabels: {
+      active: "Active",
+      paused: "Paused",
+      cancelled: "Cancelled",
+      pastDue: "Payment overdue",
+      trialing: "Trial",
+      unpaid: "Unpaid",
+      completed: "Paid in full"
+    }
+  },
+  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 Ctx2 = createContext2(null);
+function LocalizationProvider(props) {
+  return /* @__PURE__ */ jsx2(Ctx2.Provider, { value: props.value, children: props.children });
+}
+function useCopy(local) {
+  const provider = useContext2(Ctx2);
+  return useMemo2(() => {
+    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/primitives/Modal.tsx
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+// src/react/components/surface.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Ctx3 = createContext3("standalone");
+function SurfaceProvider(props) {
+  return /* @__PURE__ */ jsx3(Ctx3.Provider, { value: props.value, children: props.children });
+}
+function useSurface() {
+  return useContext3(Ctx3);
+}
+function useCardClass() {
+  return useSurface() === "modal" ? "throttle-card throttle-card--bare" : "throttle-card";
+}
+
+// src/react/components/primitives/Modal.tsx
+import { jsx as jsx4, jsxs } from "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 = useRef(null);
+  const returnFocusTo = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const onCloseRef = useRef(props.onClose);
+  useEffect(() => {
+    onCloseRef.current = props.onClose;
+  });
+  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 createPortal(
+    /* @__PURE__ */ jsx4("div", { ...a.rootProps, children: /* @__PURE__ */ jsx4(
+      "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__ */ 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__ */ jsx4(
+                "button",
+                {
+                  ...a.el("modal.closeButton", "throttle-modal__close"),
+                  type: "button",
+                  "aria-label": t.common.close,
+                  onClick: props.onClose,
+                  children: "\xD7"
+                }
+              ),
+              /* @__PURE__ */ jsx4(SurfaceProvider, { value: "modal", children: props.children })
+            ]
+          }
+        )
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/react/components/primitives/Confirm.tsx
+import { createContext as createContext4, useCallback, useContext as useContext4, useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+
+// src/react/components/primitives/Spinner.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Spinner({ centred } = {}) {
+  const a = useAppearance();
+  const Slot = a.slots.Spinner;
+  if (Slot) return /* @__PURE__ */ jsx5(Slot, {});
+  const cls = `throttle-spinner${centred ? " throttle-spinner--centred" : ""}`;
+  return /* @__PURE__ */ jsx5("span", { ...a.el("spinner", cls), "aria-hidden": "true" });
+}
+
+// src/react/components/primitives/Button.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "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__ */ jsx6(Slot, { variant, loading, ...rest, children });
+  const base = `throttle-button throttle-button--${variant}${size === "xs" ? " throttle-button--xs" : ""}${loading ? " throttle-button--loading" : ""}`;
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      ...rest,
+      ...a.el(elementKey ?? "button", base),
+      disabled: rest.disabled || loading,
+      "aria-busy": loading ? true : void 0,
+      children: [
+        loading ? /* @__PURE__ */ jsx6(Spinner, { centred: true }) : null,
+        /* @__PURE__ */ jsx6("span", { className: `throttle-button__label${loading ? " throttle-button__label--hidden" : ""}`, children })
+      ]
+    }
+  );
+}
+
+// src/react/components/primitives/Field.tsx
+import { Children, Fragment, useId } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function Field(props) {
+  const a = useAppearance();
+  const base = 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__ */ jsx7("label", { ...a.el("field.label", "throttle-field__label"), htmlFor: inputId, children: props.label });
+  return /* @__PURE__ */ jsxs3("div", { ...a.el(props.elementKey ?? "field", "throttle-field"), children: [
+    props.labelExtra ? /* @__PURE__ */ jsxs3("div", { className: "throttle-field__labelrow", children: [
+      label,
+      props.labelExtra
+    ] }) : label,
+    /* @__PURE__ */ jsx7(
+      "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__ */ jsx7("span", { ...a.el("field.hint", "throttle-field__hint"), id: hintId, children: props.hint }) : null,
+    /* @__PURE__ */ jsx7("span", { ...a.el("field.error", "throttle-field__error"), id: errorId, role: "alert", children: props.error ?? "" })
+  ] });
+}
+function FieldGroup(props) {
+  const a = useAppearance();
+  const items = Children.toArray(props.children).filter(Boolean);
+  return /* @__PURE__ */ jsx7("div", { ...a.el(props.elementKey ?? "field.group", "throttle-field-group"), children: items.map((child, i) => /* @__PURE__ */ jsxs3(Fragment, { children: [
+    i > 0 ? /* @__PURE__ */ jsx7("div", { className: "throttle-field-group__divider" }) : null,
+    /* @__PURE__ */ jsx7("div", { className: "throttle-field-group__item", children: child })
+  ] }, i)) });
+}
+
+// src/react/components/primitives/Confirm.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var ConfirmContext = createContext4(null);
+function ConfirmProvider({
+  children,
+  stepUpOpen = false,
+  onStepUpResolve
+}) {
+  const [request, setRequest] = useState2(null);
+  const [password, setPassword] = useState2("");
+  const { t } = useCopy();
+  const a = useAppearance();
+  const titleId = useId2();
+  const settle = useRef2(null);
+  useEffect2(() => {
+    if (!stepUpOpen) setPassword("");
+  }, [stepUpOpen]);
+  const answer = useCallback((value) => {
+    settle.current?.(value);
+    settle.current = null;
+    setRequest(null);
+  }, []);
+  const ask = useCallback((next) => {
+    settle.current?.(false);
+    setRequest(next);
+    return new Promise((resolve) => {
+      settle.current = resolve;
+    });
+  }, []);
+  const showStepUp = stepUpOpen && Boolean(onStepUpResolve);
+  const open = showStepUp || request !== null;
+  const close = () => {
+    if (showStepUp) onStepUpResolve(null);
+    else answer(false);
+  };
+  return /* @__PURE__ */ jsxs4(ConfirmContext.Provider, { value: ask, children: [
+    children,
+    open ? /* @__PURE__ */ jsx8(Modal, { open: true, onClose: close, labelledBy: titleId, size: "compact", children: showStepUp ? /* @__PURE__ */ jsxs4("form", { onSubmit: (e) => {
+      e.preventDefault();
+      onStepUpResolve(password);
+    }, children: [
+      /* @__PURE__ */ jsx8("div", { ...a.el("confirm.header", "throttle-modal__header"), children: /* @__PURE__ */ jsx8("h2", { id: titleId, ...a.el("stepUp.title", "throttle-modal__title"), children: t.stepUp.title }) }),
+      /* @__PURE__ */ jsxs4("div", { ...a.el("confirm.body", "throttle-modal__body"), children: [
+        /* @__PURE__ */ jsx8("p", { className: "throttle-muted", children: t.stepUp.description }),
+        /* @__PURE__ */ jsx8(
+          Field,
+          {
+            label: t.stepUp.password,
+            type: "password",
+            autoComplete: "current-password",
+            value: password,
+            onChange: setPassword,
+            required: true,
+            elementKey: "stepUp.passwordField"
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: "throttle-actions", children: [
+          /* @__PURE__ */ jsx8(Button, { type: "submit", elementKey: "stepUp.submitButton", children: t.stepUp.submitButton }),
+          /* @__PURE__ */ jsx8(
+            Button,
+            {
+              variant: "secondary",
+              elementKey: "stepUp.cancelButton",
+              onClick: () => onStepUpResolve(null),
+              children: t.stepUp.cancelButton
+            }
+          )
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx8("div", { ...a.el("confirm.header", "throttle-modal__header"), children: /* @__PURE__ */ jsx8("h2", { id: titleId, ...a.el("confirm.title", "throttle-modal__title"), children: request.title }) }),
+      /* @__PURE__ */ jsxs4("div", { ...a.el("confirm.body", "throttle-modal__body"), children: [
+        request.body ? /* @__PURE__ */ jsx8("p", { className: "throttle-muted", children: request.body }) : null,
+        /* @__PURE__ */ jsxs4("div", { className: "throttle-actions", children: [
+          /* @__PURE__ */ jsx8(
+            Button,
+            {
+              elementKey: "confirm.confirmButton",
+              variant: request.tone === "danger" ? "danger" : "primary",
+              onClick: () => answer(true),
+              children: request.confirmLabel ?? t.common.delete
+            }
+          ),
+          /* @__PURE__ */ jsx8(Button, { elementKey: "confirm.cancelButton", variant: "secondary", onClick: () => answer(false), children: request.cancelLabel ?? t.common.keepIt })
+        ] })
+      ] })
+    ] }) }) : null
+  ] });
+}
+function useConfirm() {
+  const ask = useContext4(ConfirmContext);
+  const { t } = useCopy();
+  return useMemo3(
+    () => ask ?? (async (request) => window.confirm(request.title || t.common.confirm)),
+    [ask, t]
+  );
+}
+
+// src/react/components/primitives/Card.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "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__ */ jsxs5("div", { ...a.el("card.header", headerClass), children: [
+    props.logo ? /* @__PURE__ */ jsx9("div", { ...a.el(props.logoKey ?? "card.logo", "throttle-card__logo"), children: props.logo }) : null,
+    /* @__PURE__ */ jsx9("h2", { ...a.el(props.titleKey ?? "card.title", titleClass), children: props.title }),
+    props.description ? /* @__PURE__ */ jsx9("p", { ...a.el("card.description", "throttle-card__description"), children: props.description }) : null
+  ] });
+}
+function CardBody(props) {
+  const a = useAppearance();
+  return /* @__PURE__ */ jsx9("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__ */ jsx9("div", { ...a.el("card.footer", className), children: props.children });
+}
+
+// src/react/components/primitives/FieldRow.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function FieldRow({ children }) {
+  const a = useAppearance();
+  return /* @__PURE__ */ jsx10("div", { ...a.el("fieldRow", "throttle-fieldrow"), children });
+}
+
+// src/react/components/primitives/Alert.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Alert(props) {
+  const a = useAppearance();
+  const Slot = a.slots.Alert;
+  if (Slot) return /* @__PURE__ */ jsx11(Slot, { tone: props.tone, children: props.children });
+  return /* @__PURE__ */ jsx11(
+    "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
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Skeleton(props) {
+  const a = useAppearance();
+  const rows = Array.from({ length: props.count ?? 1 });
+  return /* @__PURE__ */ jsx12("div", { "aria-hidden": "true", className: "throttle-stack", children: rows.map((_, i) => /* @__PURE__ */ jsx12("span", { ...a.el("skeleton", "throttle-skeleton") }, i)) });
+}
+
+// src/react/components/primitives/Dropdown.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+function Dropdown(props) {
+  const a = useAppearance();
+  const [open, setOpen] = useState3(false);
+  const root = useRef3(null);
+  const trigger = useRef3(null);
+  const menu = useRef3(null);
+  useEffect3(() => {
+    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__ */ jsxs6("div", { ref: root, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx13(
+      "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__ */ jsx13(
+      "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__ */ jsx13("a", { ...attrs, role: "menuitem", href: props.href, tabIndex: -1, children: props.children });
+  }
+  return /* @__PURE__ */ jsx13("button", { ...attrs, role: "menuitem", type: "button", tabIndex: -1, onClick: props.onClick, children: props.children });
+}
+function DropdownSeparator() {
+  const a = useAppearance();
+  return /* @__PURE__ */ jsx13("hr", { ...a.el("dropdown.separator", "throttle-dropdown__separator") });
+}
+
+// src/react/components/primitives/Tabs.tsx
+import { jsx as jsx14, jsxs as jsxs7 } from "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__ */ jsx14(
+    "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__ */ jsxs7(
+          "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
+import { jsx as jsx15, jsxs as jsxs8 } from "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__ */ jsx15("div", { className: "throttle-table__scroll", children: /* @__PURE__ */ jsxs8("table", { ...a.el(props.tableKey ?? "table", "throttle-table"), children: [
+      /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { children: props.columns.map((col) => /* @__PURE__ */ jsx15("th", { ...a.el("table.head", "throttle-table__head"), scope: "col", children: col.label }, col.key)) }) }),
+      /* @__PURE__ */ jsx15("tbody", { children: props.rows.map((row) => /* @__PURE__ */ jsx15(
+        "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__ */ jsx15("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
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+function EmptyState(props) {
+  const a = useAppearance();
+  const Slot = a.slots.EmptyState;
+  if (Slot) return /* @__PURE__ */ jsx16(Slot, { title: props.title, description: props.description });
+  return /* @__PURE__ */ jsxs9("div", { ...a.el("emptyState", "throttle-empty"), children: [
+    /* @__PURE__ */ jsx16("p", { ...a.el("emptyState.title", "throttle-empty__title"), children: props.title }),
+    props.description ? /* @__PURE__ */ jsx16("p", { ...a.el("emptyState.description", "throttle-empty__description"), children: props.description }) : null
+  ] });
+}
+
+// src/react/components/primitives/Avatar.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function Avatar(props) {
+  const a = useAppearance();
+  const Slot = a.slots.Avatar;
+  if (Slot) return /* @__PURE__ */ jsx17(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__ */ jsx17("span", { ...a.el("avatar", "throttle-avatar"), title: props.email, children: initials.toUpperCase() });
+}
+
+// src/react/components/primitives/Badge.tsx
+import { jsx as jsx18 } from "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__ */ jsx18("span", { ...a.el(props.elementKey ?? "badge", base), children: props.children });
+}
+
+export {
+  THROTTLE_ELEMENT_KEYS,
+  AppearanceProvider,
+  useAppearance,
+  useAppearanceProviderValue,
+  enUS,
+  LocalizationProvider,
+  useCopy,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Spinner,
+  Button,
+  Field,
+  FieldGroup,
+  FieldRow,
+  Alert,
+  Skeleton,
+  useCardClass,
+  Modal,
+  ConfirmProvider,
+  useConfirm,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
+  Tabs,
+  DataTable,
+  EmptyState,
+  Avatar,
+  Badge
+};
+//# sourceMappingURL=chunk-CUNMJ2PH.js.map