@usethrottle/auth 0.11.0 → 0.12.1

package/README.md

@@ -149,6 +149,44 @@ headless core, or anywhere you want the call without the hook.
 | `pauseSubscription(id): Promise<Subscription>` | `POST /me/subscriptions/:id/pause` | Requires step-up. |
 | `resumeSubscription(id): Promise<Subscription>` | `POST /me/subscriptions/:id/resume` | Requires step-up. |
 | `claimCart(cartId): Promise<{ cartId: string; customerId: string }>` | `POST /me/carts/:cartId/claim` | Attaches a guest cart to the signed-in buyer. Throws `cart_already_claimed` if it belongs to someone else. |
+| `getOpenCart({ currency }): Promise<OpenCart \| null>` | `GET /me/cart?currency=` | The buyer's newest open or idle-abandoned cart in that currency (see `status`). `null` for none or an older API (404). A currency that is not 3 letters throws `TypeError`. |
+
+`auth.whenClaimSettled()` resolves once a sign-in or registration's cart claim has finished
+(succeeded or failed). `ThrottleProvider` marks it pending from the moment `signIn`/`register`
+is called; a bare `createThrottleAuth` client resolves at once. Both it and `getOpenCart` are
+optional on the `ThrottleAuth`/`ThrottleAccount` interfaces (and `OrderLineItem.referenceId` is
+optional in the type), so 0.11-shaped implementations still compile. Values from
+`createThrottleAuth`/`createAccount` always have them; through `useAuth()` they are optional, so
+call them as `auth.whenClaimSettled?.()` and `account.getOpenCart?.(...)`.
+
+For reorder, `onReorder` targets carry `sku` (the line's `referenceId`, never rendered) and
+`subscriptionId` per line, and `reorderOnPaid` on `AccountDashboard`, `OrdersPanel` and
+`OrderDetail` also offers "Order again" on `captured`/`paid` orders (default `false`).
+
+```ts
+// Resume the buyer's open cart once the sign-in claim has finished.
+await auth.signIn(email, password);
+await auth.whenClaimSettled();
+const cart = await account.getOpenCart({ currency: 'USD' }); // OpenCart | null
+if (cart) console.log(cart.cartId, cart.status);
+
+// Order lines carry referenceId (the merchant SKU); it is data, not UI.
+const order = await account.getOrder(orderId);
+const skus = order.lineItems.map((line) => line.referenceId);
+```
+
+```tsx
+// Reorder targets carry sku and subscriptionId per line. reorderOnPaid also
+// offers "Order again" on captured/paid orders.
+<AccountDashboard
+  reorderOnPaid
+  onReorder={(target) => {
+    for (const line of target.lineItems) {
+      if (line.sku) addToCart(line.sku, line.quantity, line.subscriptionId);
+    }
+  }}
+/>
+```
 
 Paging is `{ cursor?: string; limit?: number }`; `limit` is 1-100 and defaults to
 25. A list returns rows only — carry the last row's `id` as the next `cursor`.
@@ -429,6 +467,20 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
+### Lazy modals
+
+`ThrottleProvider` loads the sign-in and account modals on their first open. The
+first open fetches one chunk (once); a failed fetch renders nothing, logs one
+warning and is retried on the next open. In the ESM build, pages that use only the
+provider and guards ship none of the modal code; the CJS build is one bundle per
+entry and inlines the modals. Import paths are unchanged.
+
+```tsx
+const { openSignIn } = useThrottle();
+// The first call fetches the sign-in chunk, then shows the modal; later calls are instant.
+<button onClick={() => openSignIn()}>Sign in</button>
+```
+
 ### Known limits
 
 - **No add-card control.** There is no buyer-plane route for creating a saved

package/dist/AccountDashboard-V63ghvjY.d.ts

@@ -0,0 +1,90 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as ThrottleAppearance, c as ThrottleLocalization } from './localization-SnIAZXJn.js';
+
+/**
+ * Composition of the list of records a panel renders. `'boxed'` is today's
+ * shipped look (each item its own bordered box, outlined action buttons) and
+ * must stay byte-for-byte identical to it. `'rows'` separates items with a
+ * hairline instead, and renders actions as plain text — the motivation is
+ * that the account dashboard is itself a bordered card, so a panel built from
+ * bordered boxes is a card inside a card with nothing establishing hierarchy.
+ * `'table'` is a real `<table>` with column headers, for merchants who want
+ * their buyer's records (especially money) in aligned tabular columns.
+ */
+type AccountPanelVariant = 'rows' | 'boxed' | 'table';
+declare function AddressesPanel(props: {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    variant?: AccountPanelVariant;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * The order the buyer is acting on, including its line items — so "order
+ * again" can rebuild a cart without fetching the order a second time.
+ */
+interface OrderActionTarget {
+    id: string;
+    orderNumber: string;
+    currency: string;
+    lineItems: Array<{
+        name: string;
+        unitPrice: number;
+        quantity: number;
+        /** The catalog SKU (the line's `referenceId`), for re-adding it. Never display it. */
+        sku: string | null;
+        subscriptionId: string | null;
+    }>;
+}
+interface OrderActionHandlers {
+    onPayNow?(order: OrderActionTarget): void;
+    onReorder?(order: OrderActionTarget): void;
+    onTrackShipment?(order: OrderActionTarget): void;
+}
+declare function OrdersPanel(props: OrderActionHandlers & {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    variant?: AccountPanelVariant;
+    onViewSubscription?(id: string): void;
+    /** Forwarded to `OrderDetail`, where both default to on. */
+    allowCancel?: boolean;
+    allowReturn?: boolean;
+    /** Forwarded to `OrderDetail`: also offer "Order again" on orders whose payment is captured or paid. */
+    reorderOnPaid?: boolean;
+    /** Opens straight to this order. Set by the dashboard on cross-panel navigation. */
+    initialOpenId?: string | null;
+}): react_jsx_runtime.JSX.Element;
+
+type AccountTab = 'profile' | 'addresses' | 'paymentMethods' | 'orders' | 'invoices' | 'subscriptions' | 'security';
+declare const ACCOUNT_TABS: readonly AccountTab[];
+interface AccountDashboardProps extends OrderActionHandlers {
+    /** Which panels to show, in order. Defaults to all seven. */
+    tabs?: AccountTab[];
+    tab?: AccountTab;
+    onTabChange?(tab: AccountTab): void;
+    routing?: 'virtual' | 'hash';
+    /**
+     * `'sidebar'` (default) puts the seven panels in a vertical rail beside the
+     * content; `'tabs'` is the original horizontal strip above it. Seven is a lot
+     * for a strip — at narrow widths most of them sit off-screen behind a scroll
+     * with nothing signalling they exist — so the rail is the default. The strip
+     * remains for merchants whose surrounding page already has a side nav and
+     * would end up with two.
+     */
+    layout?: 'sidebar' | 'tabs';
+    /**
+     * Default composition for every panel rendered here. A panel's own
+     * `variant` prop cannot be set through the dashboard (it does not expose
+     * per-tab overrides), so in practice this is the only source of `variant`
+     * each panel receives when rendered through `AccountDashboard` — a panel
+     * rendered directly, outside the dashboard, keeps deciding its own default
+     * from its own `variant` prop rather than this one.
+     */
+    panelVariant?: AccountPanelVariant;
+    /** Also offer "Order again" on orders whose payment is captured or paid. Default false. */
+    reorderOnPaid?: boolean;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+}
+declare function AccountDashboard(props: AccountDashboardProps): react_jsx_runtime.JSX.Element | null;
+
+export { ACCOUNT_TABS as A, type OrderActionTarget as O, AccountDashboard as a, type AccountDashboardProps as b, type AccountPanelVariant as c, type AccountTab as d, AddressesPanel as e, OrdersPanel as f };

package/dist/AccountModal-KA54WUFW.js

@@ -0,0 +1,13 @@
+"use client";
+import {
+  AccountModal
+} from "./chunk-6WN3J5MM.js";
+import "./chunk-UFGW76AZ.js";
+import "./chunk-QPVS6JXP.js";
+import "./chunk-CUNMJ2PH.js";
+import "./chunk-K7RCWADI.js";
+import "./chunk-TDQC3LMQ.js";
+export {
+  AccountModal
+};
+//# sourceMappingURL=AccountModal-KA54WUFW.js.map

package/dist/AccountModal-KA54WUFW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/AccountModal-pIMgledL.d.ts

@@ -0,0 +1,141 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as ThrottleAppearance, c as ThrottleLocalization } from './localization-SnIAZXJn.js';
+import { c as AccountPanelVariant, O as OrderActionTarget, d as AccountTab } from './AccountDashboard-V63ghvjY.js';
+
+declare function VerifyEmailBanner(props: {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function ProfilePanel(props: {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+}): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Add, set-default and remove. The card form is hosted by the processor and
+ * shown in an iframe by AddCardDialog, so a card number never reaches this
+ * component. Adding is verified-only, like listing: what it hands out is the
+ * ability to attach a payment instrument to the account.
+ */
+declare function PaymentMethodsPanel(props: {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    variant?: AccountPanelVariant;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * The card form itself is hosted by the processor and shown in an iframe, so a
+ * card number never touches this SDK, the merchant's page, or our API. When the
+ * card is vaulted the frame posts `throttle.completed`, and the transaction id
+ * on that message is what we hand back to record the card.
+ */
+declare function AddCardDialog(props: {
+    open: boolean;
+    onClose(): void;
+    onAdded(): void;
+    localization?: ThrottleLocalization;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function OrderDetail(props: {
+    orderId: string;
+    onBack?(): void;
+    onViewSubscription?(id: string): void;
+    onViewInvoice?(id: string): void;
+    /**
+     * Status-dependent actions the MERCHANT owns. Each renders only when its
+     * handler is supplied, because the buyer plane cannot perform them: a
+     * built-in Pay or Track button would be a control that always fails.
+     */
+    onPayNow?(order: OrderActionTarget): void;
+    onReorder?(order: OrderActionTarget): void;
+    onTrackShipment?(order: OrderActionTarget): void;
+    /**
+     * Cancel and return, by contrast, ARE buyer-plane capabilities, so they are
+     * wired in here and need no handler. Opt out with `false` for a storefront
+     * that handles them elsewhere.
+     */
+    allowCancel?: boolean;
+    allowReturn?: boolean;
+    /**
+     * Also offer "Order again" on an order whose payment is captured or paid,
+     * whatever its status. Default false.
+     */
+    reorderOnPaid?: boolean;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+}): react_jsx_runtime.JSX.Element;
+
+declare function InvoicesPanel(props: {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    variant?: AccountPanelVariant;
+    /** Navigation out of an invoice, forwarded to `InvoiceDetail`. */
+    onViewOrder?(orderId: string): void;
+    onViewSubscription?(subscriptionId: string): void;
+    onPay?(invoice: {
+        id: string;
+        number: string;
+        total: number;
+        currency: string;
+    }): void;
+    /** Opens straight to this invoice. Set by the dashboard on cross-panel navigation. */
+    initialOpenId?: string | null;
+}): react_jsx_runtime.JSX.Element;
+
+declare function InvoiceDetail(props: {
+    invoiceId: string;
+    onBack?(): void;
+    /**
+     * Navigation out of the invoice. An invoice is a record OF something — an
+     * order or a subscription — and without these it was a dead end: the buyer
+     * could read what they were charged but not reach the thing that charged
+     * them. Each link renders only when the handler is supplied AND the server
+     * resolved the id.
+     */
+    onViewOrder?(orderId: string): void;
+    onViewSubscription?(subscriptionId: string): void;
+    /** Settle an open invoice. Merchant-owned, like the order's Pay now. */
+    onPay?(invoice: {
+        id: string;
+        number: string;
+        total: number;
+        currency: string;
+    }): void;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SubscriptionsPanel(props: {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    variant?: AccountPanelVariant;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SecurityPanel(props: {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    variant?: AccountPanelVariant;
+}): react_jsx_runtime.JSX.Element;
+
+interface AccountModalProps {
+    open: boolean;
+    onClose(): void;
+    tabs?: AccountTab[];
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    /** Where focus returns on close. See `Modal`'s own doc for why a caller
+     *  sometimes has to name this rather than let the modal capture it. */
+    restoreFocusTo?: Element | null;
+}
+/**
+ * The account dashboard, reachable without going through `UserButton`'s
+ * menu — a merchant can wire this to a "Settings" control anywhere. Mirrors
+ * `AuthModal`'s shape (a `Modal` hosting the existing card/dashboard), so a
+ * merchant who wants to own the open/close state themselves has the same
+ * kind of component available for the account surface that they already
+ * have for sign-in.
+ */
+declare function AccountModal(props: AccountModalProps): react_jsx_runtime.JSX.Element;
+
+export { AccountModal as A, InvoiceDetail as I, OrderDetail as O, PaymentMethodsPanel as P, SecurityPanel as S, VerifyEmailBanner as V, type AccountModalProps as a, AddCardDialog as b, InvoicesPanel as c, ProfilePanel as d, SubscriptionsPanel as e };

package/dist/AuthModal-T2GYI6ZF.js

@@ -0,0 +1,13 @@
+"use client";
+import {
+  AuthModal
+} from "./chunk-JSDZMPCV.js";
+import "./chunk-X6D35EAX.js";
+import "./chunk-QPVS6JXP.js";
+import "./chunk-CUNMJ2PH.js";
+import "./chunk-K7RCWADI.js";
+import "./chunk-TDQC3LMQ.js";
+export {
+  AuthModal
+};
+//# sourceMappingURL=AuthModal-T2GYI6ZF.js.map

package/dist/AuthModal-T2GYI6ZF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/SignUpPage-BJcMUb2V.d.ts

@@ -0,0 +1,160 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { a as ThrottleAppearance, c as ThrottleLocalization } from './localization-SnIAZXJn.js';
+
+type AuthCardVariant = 'quiet' | 'grouped' | 'branded';
+interface SignInProps {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    /** Composition of the card. Default `'quiet'`. */
+    variant?: AuthCardVariant;
+    /** Rendered above the title in the `branded` variant. Falls back to `ThrottleProvider`'s `logo`. */
+    logo?: ReactNode;
+    onSuccess?(): void;
+    onForgotPassword?(): void;
+    onSignUp?(): void;
+}
+declare function SignIn(props: SignInProps): react_jsx_runtime.JSX.Element;
+
+interface SignUpProps {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    /** Composition of the card. Default `'quiet'`. */
+    variant?: AuthCardVariant;
+    /** Rendered above the title in the `branded` variant. Falls back to `ThrottleProvider`'s `logo`. */
+    logo?: ReactNode;
+    onSuccess?(): void;
+    onSignIn?(): void;
+}
+declare function SignUp(props: SignUpProps): react_jsx_runtime.JSX.Element;
+
+interface ForgotPasswordProps {
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    /** Composition of the card. Default `'quiet'`. A single input, so `'grouped'` renders the same as `'quiet'`. */
+    variant?: AuthCardVariant;
+    /** Rendered above the title in the `branded` variant. Falls back to `ThrottleProvider`'s `logo`. */
+    logo?: ReactNode;
+    onBack?(): void;
+}
+declare function ForgotPassword(props: ForgotPasswordProps): react_jsx_runtime.JSX.Element;
+
+interface ResetPasswordProps {
+    token?: string;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    /** Composition of the card. Default `'quiet'`. A single input, so `'grouped'` renders the same as `'quiet'`. */
+    variant?: AuthCardVariant;
+    /** Rendered above the title in the `branded` variant. Falls back to `ThrottleProvider`'s `logo`. */
+    logo?: ReactNode;
+    onSuccess?(): void;
+}
+declare function ResetPassword(props: ResetPasswordProps): react_jsx_runtime.JSX.Element;
+
+interface VerifyEmailProps {
+    token?: string;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    /** Composition of the card. Default `'quiet'`. This card has no inputs, so `'grouped'` renders the same as `'quiet'`. */
+    variant?: AuthCardVariant;
+    /** Rendered above the title in the `branded` variant. Falls back to `ThrottleProvider`'s `logo`. */
+    logo?: ReactNode;
+    onSuccess?(): void;
+}
+declare function VerifyEmail(props: VerifyEmailProps): react_jsx_runtime.JSX.Element;
+
+type AuthView = 'signIn' | 'signUp' | 'forgotPassword' | 'resetPassword' | 'verifyEmail';
+interface AuthFlowProps {
+    initialView?: AuthView;
+    /** Controlled mode: pass both to own the value yourself. */
+    view?: AuthView;
+    onViewChange?(view: AuthView): void;
+    /** Wins over the token in the URL. */
+    token?: string;
+    routing?: 'virtual' | 'hash';
+    afterSignIn?(): void;
+    afterSignUp?(): void;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+}
+declare function AuthFlow(props: AuthFlowProps): react_jsx_runtime.JSX.Element;
+
+interface AuthModalProps {
+    open: boolean;
+    onClose(): void;
+    initialView?: AuthView;
+    afterSignIn?(): void;
+    afterSignUp?(): void;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+}
+declare function AuthModal(props: AuthModalProps): react_jsx_runtime.JSX.Element;
+
+interface SignInButtonProps {
+    mode?: 'modal' | 'redirect';
+    /** Required when mode is "redirect". */
+    url?: string;
+    initialView?: AuthView;
+    asChild?: boolean;
+    children?: ReactNode;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    afterSignIn?(): void;
+}
+declare function SignInButton(props: SignInButtonProps): react_jsx_runtime.JSX.Element;
+
+/** The twin of `SignInButton`, opening the same flow on the sign-up view. */
+interface SignUpButtonProps {
+    mode?: 'modal' | 'redirect';
+    /** Required when mode is "redirect". */
+    url?: string;
+    initialView?: AuthView;
+    asChild?: boolean;
+    children?: ReactNode;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    afterSignUp?(): void;
+}
+declare function SignUpButton(props: SignUpButtonProps): react_jsx_runtime.JSX.Element;
+
+interface SignOutButtonProps {
+    /** Revokes every session, not just this device. May raise a step-up prompt. */
+    everywhere?: boolean;
+    children?: ReactNode;
+    localization?: ThrottleLocalization;
+    onSignedOut?(): void;
+}
+declare function SignOutButton(props: SignOutButtonProps): react_jsx_runtime.JSX.Element;
+
+interface SignInPageProps {
+    /** Rendered above the card. Absent by default. */
+    logo?: ReactNode;
+    /** Rendered below the card. Absent by default. */
+    footer?: ReactNode;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    onSuccess?(): void;
+    onForgotPassword?(): void;
+    onSignUp?(): void;
+}
+/**
+ * A full-viewport, centred shell around `<SignIn/>` for merchants who drop it
+ * directly on a route (e.g. `/sign-in`) and would otherwise get a card stuck
+ * at the top of a bare page. `100dvh`, not `100vh` — see styles.ts.
+ */
+declare function SignInPage(props: SignInPageProps): react_jsx_runtime.JSX.Element;
+
+interface SignUpPageProps {
+    /** Rendered above the card. Absent by default. */
+    logo?: ReactNode;
+    /** Rendered below the card. Absent by default. */
+    footer?: ReactNode;
+    appearance?: ThrottleAppearance;
+    localization?: ThrottleLocalization;
+    onSuccess?(): void;
+    onSignIn?(): void;
+}
+/** The `<SignUp/>` twin of `SignInPage`. */
+declare function SignUpPage(props: SignUpPageProps): react_jsx_runtime.JSX.Element;
+
+export { type AuthCardVariant as A, ForgotPassword as F, ResetPassword as R, SignIn as S, VerifyEmail as V, AuthFlow as a, type AuthFlowProps as b, AuthModal as c, type AuthModalProps as d, type AuthView as e, type ForgotPasswordProps as f, type ResetPasswordProps as g, SignInButton as h, type SignInButtonProps as i, SignInPage as j, type SignInPageProps as k, type SignInProps as l, SignOutButton as m, type SignOutButtonProps as n, SignUp as o, SignUpButton as p, type SignUpButtonProps as q, SignUpPage as r, type SignUpPageProps as s, type SignUpProps as t, type VerifyEmailProps as u };

package/dist/chunk-3B4DNX5T.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-3B4DNX5T.js.map

package/dist/chunk-3B4DNX5T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-5EUZYJJL.js

@@ -0,0 +1,29 @@
+"use client";
+import {
+  useAuth
+} from "./chunk-TDQC3LMQ.js";
+
+// src/react/components/guards.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+function SignedIn(props) {
+  const { status } = useAuth();
+  return status === "authenticated" ? /* @__PURE__ */ jsx(Fragment, { children: props.children }) : null;
+}
+function SignedOut(props) {
+  const { status } = useAuth();
+  return status === "unauthenticated" ? /* @__PURE__ */ jsx(Fragment, { children: props.children }) : null;
+}
+function Protect(props) {
+  const { status, emailVerified } = useAuth();
+  if (status === "loading") return null;
+  if (status !== "authenticated") return /* @__PURE__ */ jsx(Fragment, { children: props.fallback ?? null });
+  if (props.requireVerified && !emailVerified) return /* @__PURE__ */ jsx(Fragment, { children: props.fallback ?? null });
+  return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+}
+
+export {
+  SignedIn,
+  SignedOut,
+  Protect
+};
+//# sourceMappingURL=chunk-5EUZYJJL.js.map

package/dist/chunk-5EUZYJJL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/components/guards.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useAuth } from '../context';\n\n/**\n * All three render nothing while `status === 'loading'`. A guard that treated\n * loading as signed-out would flash a \"Sign in\" button at a buyer whose\n * session is a few milliseconds from being restored.\n */\nexport function SignedIn(props: { children: ReactNode }) {\n  const { status } = useAuth();\n  return status === 'authenticated' ? <>{props.children}</> : null;\n}\n\nexport function SignedOut(props: { children: ReactNode }) {\n  const { status } = useAuth();\n  return status === 'unauthenticated' ? <>{props.children}</> : null;\n}\n\nexport function Protect(props: { requireVerified?: boolean; fallback?: ReactNode; children: ReactNode }) {\n  const { status, emailVerified } = useAuth();\n  if (status === 'loading') return null;\n  if (status !== 'authenticated') return <>{props.fallback ?? null}</>;\n  if (props.requireVerified && !emailVerified) return <>{props.fallback ?? null}</>;\n  return <>{props.children}</>;\n}\n"],"mappings":";;;;;;AAUsC;AAF/B,SAAS,SAAS,OAAgC;AACvD,QAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,SAAO,WAAW,kBAAkB,gCAAG,gBAAM,UAAS,IAAM;AAC9D;AAEO,SAAS,UAAU,OAAgC;AACxD,QAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,SAAO,WAAW,oBAAoB,gCAAG,gBAAM,UAAS,IAAM;AAChE;AAEO,SAAS,QAAQ,OAAiF;AACvG,QAAM,EAAE,QAAQ,cAAc,IAAI,QAAQ;AAC1C,MAAI,WAAW,UAAW,QAAO;AACjC,MAAI,WAAW,gBAAiB,QAAO,gCAAG,gBAAM,YAAY,MAAK;AACjE,MAAI,MAAM,mBAAmB,CAAC,cAAe,QAAO,gCAAG,gBAAM,YAAY,MAAK;AAC9E,SAAO,gCAAG,gBAAM,UAAS;AAC3B;","names":[]}