@openwarelabs/blocks 0.9.0 → 0.10.1

package/dist/sign-in/SignIn02/SignIn02.types.d.cts

@@ -0,0 +1,79 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SignInProvider } from "../../shared/shared.types.cjs";
+export interface SignIn02Labels {
+    /** @default "Work email" */
+    email?: string;
+    /** @default "maya@example.com" */
+    emailPlaceholder?: string;
+    /** @default "Password" */
+    password?: string;
+    /** Under the password until there's an error. @default `At least ${passwordMinLength} characters.` */
+    passwordHint?: string;
+    /** The form's button. @default "Create account" */
+    submit?: string;
+    /** The word on the line between the providers and the form. @default "or" */
+    separator?: string;
+    /** The plate's name for screen readers. @default "About the product" */
+    plate?: string;
+    /** @default "Enter your work email." */
+    emailEmpty?: string;
+    /** @default "That doesn't look like an email address." */
+    emailInvalid?: string;
+    /** @default "Choose a password." */
+    passwordEmpty?: string;
+    /** When the password is too short, given how many characters it still needs. @default `Add ${missing} more characters.` */
+    passwordShort?(missing: number): string;
+}
+/** What was typed into the form. */
+export interface SignIn02Values {
+    /** The email address, trimmed. */
+    email: string;
+    password: string;
+}
+/** A quote at the foot of the plate. */
+export interface SignIn02Quote {
+    /** The words, with their quotation marks. */
+    text: ReactNode;
+    /** Who said it: "Lena Fischer, Head of Platform at Halcyon". */
+    author: ReactNode;
+    /** A small outlined label after the name, such as "Sample quote". */
+    badge?: ReactNode;
+}
+export interface SignIn02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** The product's name at the top left, with its mark before it (an `<img>` or an inline SVG about 24px square). */
+    brand: {
+        name: ReactNode;
+        logo?: ReactNode;
+    };
+    /** The form's heading: "Create your account". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Buttons above the form for signing up with another account. */
+    providers?: SignInProvider[];
+    /** Starts signing up with a provider. While its promise is pending the button shows a spinner. */
+    onProviderSelect?(id: string): void | Promise<void>;
+    /** Creates the account, once the email is valid and the password long enough. While its promise is pending the button shows a spinner; if it throws, its message shows under the email. */
+    onSubmit?(values: SignIn02Values): void | Promise<void>;
+    /** The shortest password it takes.
+     * @default 12 */
+    passwordMinLength?: number;
+    /** Small print under the button, such as the terms you agree to. */
+    terms?: ReactNode;
+    /** A line at the foot of the form's side: "Already have an account? Sign in". */
+    footer?: ReactNode;
+    /** A short line at the top of the plate, after a brass dot. */
+    eyebrow?: ReactNode;
+    /** The plate's headline. */
+    headline?: ReactNode;
+    /** The product on the plate: a screenshot, or a picture drawn with components. */
+    visual?: ReactNode;
+    /** A quote under it. */
+    quote?: SignIn02Quote;
+    /** Words that aren't content (the fields' labels, the button, the messages), in English unless you pass your own. */
+    labels?: SignIn02Labels;
+}
+export interface SignIn02Errors {
+    email?: string;
+    password?: string;
+}

package/dist/sign-in/SignIn02/SignIn02.types.d.ts

@@ -0,0 +1,79 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SignInProvider } from "../../shared/shared.types.js";
+export interface SignIn02Labels {
+    /** @default "Work email" */
+    email?: string;
+    /** @default "maya@example.com" */
+    emailPlaceholder?: string;
+    /** @default "Password" */
+    password?: string;
+    /** Under the password until there's an error. @default `At least ${passwordMinLength} characters.` */
+    passwordHint?: string;
+    /** The form's button. @default "Create account" */
+    submit?: string;
+    /** The word on the line between the providers and the form. @default "or" */
+    separator?: string;
+    /** The plate's name for screen readers. @default "About the product" */
+    plate?: string;
+    /** @default "Enter your work email." */
+    emailEmpty?: string;
+    /** @default "That doesn't look like an email address." */
+    emailInvalid?: string;
+    /** @default "Choose a password." */
+    passwordEmpty?: string;
+    /** When the password is too short, given how many characters it still needs. @default `Add ${missing} more characters.` */
+    passwordShort?(missing: number): string;
+}
+/** What was typed into the form. */
+export interface SignIn02Values {
+    /** The email address, trimmed. */
+    email: string;
+    password: string;
+}
+/** A quote at the foot of the plate. */
+export interface SignIn02Quote {
+    /** The words, with their quotation marks. */
+    text: ReactNode;
+    /** Who said it: "Lena Fischer, Head of Platform at Halcyon". */
+    author: ReactNode;
+    /** A small outlined label after the name, such as "Sample quote". */
+    badge?: ReactNode;
+}
+export interface SignIn02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** The product's name at the top left, with its mark before it (an `<img>` or an inline SVG about 24px square). */
+    brand: {
+        name: ReactNode;
+        logo?: ReactNode;
+    };
+    /** The form's heading: "Create your account". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Buttons above the form for signing up with another account. */
+    providers?: SignInProvider[];
+    /** Starts signing up with a provider. While its promise is pending the button shows a spinner. */
+    onProviderSelect?(id: string): void | Promise<void>;
+    /** Creates the account, once the email is valid and the password long enough. While its promise is pending the button shows a spinner; if it throws, its message shows under the email. */
+    onSubmit?(values: SignIn02Values): void | Promise<void>;
+    /** The shortest password it takes.
+     * @default 12 */
+    passwordMinLength?: number;
+    /** Small print under the button, such as the terms you agree to. */
+    terms?: ReactNode;
+    /** A line at the foot of the form's side: "Already have an account? Sign in". */
+    footer?: ReactNode;
+    /** A short line at the top of the plate, after a brass dot. */
+    eyebrow?: ReactNode;
+    /** The plate's headline. */
+    headline?: ReactNode;
+    /** The product on the plate: a screenshot, or a picture drawn with components. */
+    visual?: ReactNode;
+    /** A quote under it. */
+    quote?: SignIn02Quote;
+    /** Words that aren't content (the fields' labels, the button, the messages), in English unless you pass your own. */
+    labels?: SignIn02Labels;
+}
+export interface SignIn02Errors {
+    email?: string;
+    password?: string;
+}

package/dist/sign-in/SignIn03/SignIn03.d.cts

@@ -0,0 +1,3 @@
+import type { SignIn03Props } from "./SignIn03.types.cjs";
+/** Signing in with a link by email: one field, then a page saying where the link went, with a way to send it again. */
+export declare function SignIn03({ brand, link, title, description, onSubmit, onResend, cooldown, sentDescription, sentNote, labels, className, ...props }: SignIn03Props): import("react").JSX.Element;

package/dist/sign-in/SignIn03/SignIn03.d.ts

@@ -0,0 +1,3 @@
+import type { SignIn03Props } from "./SignIn03.types.js";
+/** Signing in with a link by email: one field, then a page saying where the link went, with a way to send it again. */
+export declare function SignIn03({ brand, link, title, description, onSubmit, onResend, cooldown, sentDescription, sentNote, labels, className, ...props }: SignIn03Props): import("react").JSX.Element;

package/dist/sign-in/SignIn03/SignIn03.types.d.cts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface SignIn03Labels {
+    /** @default "Email" */
+    email?: string;
+    /** @default "maya@example.com" */
+    emailPlaceholder?: string;
+    /** The form's button. @default "Email me a link" */
+    submit?: string;
+    /** @default "Enter your email address." */
+    emailEmpty?: string;
+    /** @default "That doesn't look like an email address." */
+    emailInvalid?: string;
+    /** Shown when `onSubmit` fails without a message of its own. @default "That didn't go through. Try again in a moment." */
+    failed?: string;
+    /** The second page's heading. @default "Check your email" */
+    sentTitle?: string;
+    /** @default "Send the link again" */
+    resend?: string;
+    /** The resend button while it waits, given the seconds left. @default `Send again in ${seconds} s` */
+    resendIn?(seconds: number): string;
+    /** The button that goes back to the form. @default "Use a different email" */
+    back?: string;
+}
+export interface SignIn03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** The product's name at the top left, with its mark before it (an `<img>` or an inline SVG about 24px square). */
+    brand: {
+        name: ReactNode;
+        logo?: ReactNode;
+    };
+    /** A link at the top right, such as "Sign in with a password". */
+    link?: BlockLink;
+    /** The form's heading: "Sign in with email". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Sends the link, once the address is valid. While its promise is pending the button shows a spinner; if it throws, its message shows under the field. Then the page says where the link went. */
+    onSubmit?(email: string): void | Promise<void>;
+    /** Sends another link from the second page; the button waits `cooldown` seconds after each one. */
+    onResend?(email: string): void | Promise<void>;
+    /** Seconds before another link can be sent.
+     * @default 30 */
+    cooldown?: number;
+    /** The second page's line, given the address on a line of its own to put in it.
+     * @default (email) => <>We sent a sign-in link to{email}It works once, for the next 15 minutes, on any device.</> */
+    sentDescription?(email: ReactNode): ReactNode;
+    /** Small print at the foot of the second page: where else to look for the email. */
+    sentNote?: ReactNode;
+    /** Words that aren't content (the field's label, the buttons, the messages), in English unless you pass your own. */
+    labels?: SignIn03Labels;
+}

package/dist/sign-in/SignIn03/SignIn03.types.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface SignIn03Labels {
+    /** @default "Email" */
+    email?: string;
+    /** @default "maya@example.com" */
+    emailPlaceholder?: string;
+    /** The form's button. @default "Email me a link" */
+    submit?: string;
+    /** @default "Enter your email address." */
+    emailEmpty?: string;
+    /** @default "That doesn't look like an email address." */
+    emailInvalid?: string;
+    /** Shown when `onSubmit` fails without a message of its own. @default "That didn't go through. Try again in a moment." */
+    failed?: string;
+    /** The second page's heading. @default "Check your email" */
+    sentTitle?: string;
+    /** @default "Send the link again" */
+    resend?: string;
+    /** The resend button while it waits, given the seconds left. @default `Send again in ${seconds} s` */
+    resendIn?(seconds: number): string;
+    /** The button that goes back to the form. @default "Use a different email" */
+    back?: string;
+}
+export interface SignIn03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** The product's name at the top left, with its mark before it (an `<img>` or an inline SVG about 24px square). */
+    brand: {
+        name: ReactNode;
+        logo?: ReactNode;
+    };
+    /** A link at the top right, such as "Sign in with a password". */
+    link?: BlockLink;
+    /** The form's heading: "Sign in with email". */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** Sends the link, once the address is valid. While its promise is pending the button shows a spinner; if it throws, its message shows under the field. Then the page says where the link went. */
+    onSubmit?(email: string): void | Promise<void>;
+    /** Sends another link from the second page; the button waits `cooldown` seconds after each one. */
+    onResend?(email: string): void | Promise<void>;
+    /** Seconds before another link can be sent.
+     * @default 30 */
+    cooldown?: number;
+    /** The second page's line, given the address on a line of its own to put in it.
+     * @default (email) => <>We sent a sign-in link to{email}It works once, for the next 15 minutes, on any device.</> */
+    sentDescription?(email: ReactNode): ReactNode;
+    /** Small print at the foot of the second page: where else to look for the email. */
+    sentNote?: ReactNode;
+    /** Words that aren't content (the field's label, the buttons, the messages), in English unless you pass your own. */
+    labels?: SignIn03Labels;
+}

package/dist/sign-in/SignIn04/SignIn04.d.cts

@@ -0,0 +1,3 @@
+import type { SignIn04Props } from "./SignIn04.types.cjs";
+/** Six boxes for the code from an authenticator app, checked as the last digit goes in, with a backup code as the way round. */
+export declare function SignIn04({ title, description, onVerify, footer, labels, className, ...props }: SignIn04Props): import("react").JSX.Element;

package/dist/sign-in/SignIn04/SignIn04.d.ts

@@ -0,0 +1,3 @@
+import type { SignIn04Props } from "./SignIn04.types.js";
+/** Six boxes for the code from an authenticator app, checked as the last digit goes in, with a backup code as the way round. */
+export declare function SignIn04({ title, description, onVerify, footer, labels, className, ...props }: SignIn04Props): import("react").JSX.Element;

package/dist/sign-in/SignIn04/SignIn04.types.d.cts

@@ -0,0 +1,56 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface SignIn04Labels {
+    /** The code boxes' name for screen readers. @default "Six-digit code" */
+    code?: string;
+    /** Under the boxes. @default "It's checked as soon as you type the last digit." */
+    codeHint?: string;
+    /** Under the boxes while the code is checked. @default "Checking the code…" */
+    checking?: string;
+    /** Under the boxes when the code is wrong. @default "That code didn't work. Codes change every 30 seconds, so try the newest one." */
+    wrong?: string;
+    /** The heading for a backup code. @default "Use a backup code" */
+    backupTitle?: string;
+    /** The line under it. @default "Enter one of the codes you saved when you turned on two-factor. Each one works once." */
+    backupDescription?: string;
+    /** @default "Backup code" */
+    backupCode?: string;
+    /** @default "xxxx-xxxx" */
+    backupPlaceholder?: string;
+    /** @default "Backup codes have 8 letters and numbers, like 4f7k-29xq." */
+    backupInvalid?: string;
+    /** The checkbox for remembering the device. @default "Don't ask again on this device for 30 days" */
+    trust?: string;
+    /** The form's button. @default "Verify" */
+    submit?: string;
+    /** @default "Use a backup code instead" */
+    useBackup?: string;
+    /** @default "Use your authenticator app" */
+    useApp?: string;
+    /** The heading once the code is right. @default "You're in" */
+    doneTitle?: string;
+    /** The line under it. @default "Taking you to your workspace…" */
+    doneDescription?: string;
+}
+/** A code to check. */
+export interface SignIn04Values {
+    /** Six digits from the app, or a backup code in lower case. */
+    code: string;
+    /** Where the code came from. */
+    method: "app" | "backup";
+    /** Whether they ticked "Don't ask again on this device". */
+    trust: boolean;
+}
+export interface SignIn04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** The heading over the code boxes: "Enter your code". */
+    title: ReactNode;
+    /** A line under it: which app, and for what. */
+    description?: ReactNode;
+    /** Checks the code, as soon as the sixth digit is typed (or the form is sent). Return false, or throw, when it's wrong: the boxes turn red and say so. Otherwise the card says they're in. */
+    onVerify?(values: SignIn04Values): boolean | void | Promise<boolean | void>;
+    /** A line under the card, such as who's signing in and a "Not you?" link. It goes once they're in. */
+    footer?: ReactNode;
+    /** Words that aren't content (the fields' labels, the buttons, the messages), in English unless you pass your own. */
+    labels?: SignIn04Labels;
+}
+export type SignIn04Mode = "app" | "backup";
+export type SignIn04Status = "idle" | "checking" | "wrong" | "done";

package/dist/sign-in/SignIn04/SignIn04.types.d.ts

@@ -0,0 +1,56 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface SignIn04Labels {
+    /** The code boxes' name for screen readers. @default "Six-digit code" */
+    code?: string;
+    /** Under the boxes. @default "It's checked as soon as you type the last digit." */
+    codeHint?: string;
+    /** Under the boxes while the code is checked. @default "Checking the code…" */
+    checking?: string;
+    /** Under the boxes when the code is wrong. @default "That code didn't work. Codes change every 30 seconds, so try the newest one." */
+    wrong?: string;
+    /** The heading for a backup code. @default "Use a backup code" */
+    backupTitle?: string;
+    /** The line under it. @default "Enter one of the codes you saved when you turned on two-factor. Each one works once." */
+    backupDescription?: string;
+    /** @default "Backup code" */
+    backupCode?: string;
+    /** @default "xxxx-xxxx" */
+    backupPlaceholder?: string;
+    /** @default "Backup codes have 8 letters and numbers, like 4f7k-29xq." */
+    backupInvalid?: string;
+    /** The checkbox for remembering the device. @default "Don't ask again on this device for 30 days" */
+    trust?: string;
+    /** The form's button. @default "Verify" */
+    submit?: string;
+    /** @default "Use a backup code instead" */
+    useBackup?: string;
+    /** @default "Use your authenticator app" */
+    useApp?: string;
+    /** The heading once the code is right. @default "You're in" */
+    doneTitle?: string;
+    /** The line under it. @default "Taking you to your workspace…" */
+    doneDescription?: string;
+}
+/** A code to check. */
+export interface SignIn04Values {
+    /** Six digits from the app, or a backup code in lower case. */
+    code: string;
+    /** Where the code came from. */
+    method: "app" | "backup";
+    /** Whether they ticked "Don't ask again on this device". */
+    trust: boolean;
+}
+export interface SignIn04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children" | "onSubmit"> {
+    /** The heading over the code boxes: "Enter your code". */
+    title: ReactNode;
+    /** A line under it: which app, and for what. */
+    description?: ReactNode;
+    /** Checks the code, as soon as the sixth digit is typed (or the form is sent). Return false, or throw, when it's wrong: the boxes turn red and say so. Otherwise the card says they're in. */
+    onVerify?(values: SignIn04Values): boolean | void | Promise<boolean | void>;
+    /** A line under the card, such as who's signing in and a "Not you?" link. It goes once they're in. */
+    footer?: ReactNode;
+    /** Words that aren't content (the fields' labels, the buttons, the messages), in English unless you pass your own. */
+    labels?: SignIn04Labels;
+}
+export type SignIn04Mode = "app" | "backup";
+export type SignIn04Status = "idle" | "checking" | "wrong" | "done";

package/dist/sign-in/SignIn05/SignIn05.d.cts

@@ -0,0 +1,3 @@
+import type { SignIn05Props } from "./SignIn05.types.cjs";
+/** Resetting a password on one card: ask for the email, then a new password with what it needs, then done. */
+export declare function SignIn05({ brand, backLink, title, description, onRequestLink, onSavePassword, rules, doneDescription, onContinue, labels, className, ...props }: SignIn05Props): import("react").JSX.Element;

package/dist/sign-in/SignIn05/SignIn05.d.ts

@@ -0,0 +1,3 @@
+import type { SignIn05Props } from "./SignIn05.types.js";
+/** Resetting a password on one card: ask for the email, then a new password with what it needs, then done. */
+export declare function SignIn05({ brand, backLink, title, description, onRequestLink, onSavePassword, rules, doneDescription, onContinue, labels, className, ...props }: SignIn05Props): import("react").JSX.Element;

package/dist/sign-in/SignIn05/SignIn05.types.d.cts

@@ -0,0 +1,86 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface SignIn05Labels {
+    /** @default "Email" */
+    email?: string;
+    /** @default "maya@example.com" */
+    emailPlaceholder?: string;
+    /** The first step's button. @default "Email me a reset link" */
+    sendLink?: string;
+    /** @default "Enter the email you use to sign in." */
+    emailEmpty?: string;
+    /** @default "That doesn't look like an email address." */
+    emailInvalid?: string;
+    /** Shown when a callback fails without a message of its own. @default "That didn't go through. Try again in a moment." */
+    failed?: string;
+    /** The second step's heading. @default "Choose a new password" */
+    chooseTitle?: string;
+    /** The line under it, given their address in bold. @default (email) => <>For {email}. You'll be signed in as soon as it's saved.</> */
+    chooseDescription?(email: ReactNode): ReactNode;
+    /** @default "New password" */
+    password?: string;
+    /** @default "Show password" */
+    showPassword?: string;
+    /** @default "Hide password" */
+    hidePassword?: string;
+    /** The list of rules' name for screen readers. @default "Your password needs" */
+    rules?: string;
+    /** Read out after a rule that's met. @default " (done)" */
+    ruleMet?: string;
+    /** Read out after a rule that isn't. @default " (not yet)" */
+    ruleNotMet?: string;
+    /** @default "Choose a new password." */
+    passwordEmpty?: string;
+    /** When none of the rules are met, given how many there are. @default "Your password needs all three things below." */
+    passwordNeedsAll?(count: number): string;
+    /** When some aren't, given what's missing joined with commas and "and". @default `Your password still needs ${missing}.` */
+    passwordNeeds?(missing: string): string;
+    /** The second step's button. @default "Save password and sign in" */
+    save?: string;
+    /** The last step's heading. @default "Password changed" */
+    doneTitle?: string;
+    /** The last step's button. @default "Continue" */
+    continue?: string;
+}
+/** Something a new password needs. */
+export interface SignIn05Rule {
+    /** In the list under the field: "At least 12 characters". */
+    label: string;
+    /** In the error, after "still needs": "at least 12 characters". */
+    missing: string;
+    /** Whether the password meets it. */
+    test(password: string): boolean;
+}
+/** The new password, for the account. */
+export interface SignIn05Values {
+    /** The address from the first step, trimmed. */
+    email: string;
+    password: string;
+}
+export interface SignIn05Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The product's name at the top left, with its mark before it (an `<img>` or an inline SVG about 24px square). */
+    brand: {
+        name: ReactNode;
+        logo?: ReactNode;
+    };
+    /** The link back at the top right: "Back to sign in". */
+    backLink?: BlockLink;
+    /** The first step's heading: "Reset your password". */
+    title: ReactNode;
+    /** The line under it. */
+    description?: ReactNode;
+    /** Emails the reset link, once the address is valid. While its promise is pending the button shows a spinner; if it throws, its message shows under the field. Then the next step shows; in a real flow it's the page the link opens. */
+    onRequestLink?(email: string): void | Promise<void>;
+    /** Saves the new password, once it meets every rule. Pending and errors as above; then the last step shows. */
+    onSavePassword?(values: SignIn05Values): void | Promise<void>;
+    /** What a new password needs, ticked off as it's typed.
+     * @default at least 12 characters, upper and lower case letters, and a number */
+    rules?: SignIn05Rule[];
+    /** The last step's line, under "Password changed". */
+    doneDescription?: ReactNode;
+    /** The last step's button, which usually opens the app. Without it the button starts again from the first step. */
+    onContinue?(): void;
+    /** Words that aren't content (the fields' labels, the buttons, the messages), in English unless you pass your own. */
+    labels?: SignIn05Labels;
+}
+export type SignIn05Step = "email" | "password" | "done";

package/dist/sign-in/SignIn05/SignIn05.types.d.ts

@@ -0,0 +1,86 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface SignIn05Labels {
+    /** @default "Email" */
+    email?: string;
+    /** @default "maya@example.com" */
+    emailPlaceholder?: string;
+    /** The first step's button. @default "Email me a reset link" */
+    sendLink?: string;
+    /** @default "Enter the email you use to sign in." */
+    emailEmpty?: string;
+    /** @default "That doesn't look like an email address." */
+    emailInvalid?: string;
+    /** Shown when a callback fails without a message of its own. @default "That didn't go through. Try again in a moment." */
+    failed?: string;
+    /** The second step's heading. @default "Choose a new password" */
+    chooseTitle?: string;
+    /** The line under it, given their address in bold. @default (email) => <>For {email}. You'll be signed in as soon as it's saved.</> */
+    chooseDescription?(email: ReactNode): ReactNode;
+    /** @default "New password" */
+    password?: string;
+    /** @default "Show password" */
+    showPassword?: string;
+    /** @default "Hide password" */
+    hidePassword?: string;
+    /** The list of rules' name for screen readers. @default "Your password needs" */
+    rules?: string;
+    /** Read out after a rule that's met. @default " (done)" */
+    ruleMet?: string;
+    /** Read out after a rule that isn't. @default " (not yet)" */
+    ruleNotMet?: string;
+    /** @default "Choose a new password." */
+    passwordEmpty?: string;
+    /** When none of the rules are met, given how many there are. @default "Your password needs all three things below." */
+    passwordNeedsAll?(count: number): string;
+    /** When some aren't, given what's missing joined with commas and "and". @default `Your password still needs ${missing}.` */
+    passwordNeeds?(missing: string): string;
+    /** The second step's button. @default "Save password and sign in" */
+    save?: string;
+    /** The last step's heading. @default "Password changed" */
+    doneTitle?: string;
+    /** The last step's button. @default "Continue" */
+    continue?: string;
+}
+/** Something a new password needs. */
+export interface SignIn05Rule {
+    /** In the list under the field: "At least 12 characters". */
+    label: string;
+    /** In the error, after "still needs": "at least 12 characters". */
+    missing: string;
+    /** Whether the password meets it. */
+    test(password: string): boolean;
+}
+/** The new password, for the account. */
+export interface SignIn05Values {
+    /** The address from the first step, trimmed. */
+    email: string;
+    password: string;
+}
+export interface SignIn05Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The product's name at the top left, with its mark before it (an `<img>` or an inline SVG about 24px square). */
+    brand: {
+        name: ReactNode;
+        logo?: ReactNode;
+    };
+    /** The link back at the top right: "Back to sign in". */
+    backLink?: BlockLink;
+    /** The first step's heading: "Reset your password". */
+    title: ReactNode;
+    /** The line under it. */
+    description?: ReactNode;
+    /** Emails the reset link, once the address is valid. While its promise is pending the button shows a spinner; if it throws, its message shows under the field. Then the next step shows; in a real flow it's the page the link opens. */
+    onRequestLink?(email: string): void | Promise<void>;
+    /** Saves the new password, once it meets every rule. Pending and errors as above; then the last step shows. */
+    onSavePassword?(values: SignIn05Values): void | Promise<void>;
+    /** What a new password needs, ticked off as it's typed.
+     * @default at least 12 characters, upper and lower case letters, and a number */
+    rules?: SignIn05Rule[];
+    /** The last step's line, under "Password changed". */
+    doneDescription?: ReactNode;
+    /** The last step's button, which usually opens the app. Without it the button starts again from the first step. */
+    onContinue?(): void;
+    /** Words that aren't content (the fields' labels, the buttons, the messages), in English unless you pass your own. */
+    labels?: SignIn05Labels;
+}
+export type SignIn05Step = "email" | "password" | "done";

package/dist/stats/Stats01/Stats01.d.cts

@@ -0,0 +1,3 @@
+import type { Stats01Props } from "./Stats01.types.cjs";
+/** Three or four large numbers in a row, each with a short label. */
+export declare function Stats01({ eyebrow, title, stats, note, className, ...props }: Stats01Props): import("react").JSX.Element;

package/dist/stats/Stats01/Stats01.d.ts

@@ -0,0 +1,3 @@
+import type { Stats01Props } from "./Stats01.types.js";
+/** Three or four large numbers in a row, each with a short label. */
+export declare function Stats01({ eyebrow, title, stats, note, className, ...props }: Stats01Props): import("react").JSX.Element;

package/dist/stats/Stats01/Stats01.types.d.cts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Stats01Stat {
+    /** The figure: "4,200", "1.9". */
+    value: ReactNode;
+    /** A unit after it at half its size, in the muted colour: "M", "min", "%". */
+    unit?: ReactNode;
+    /** What it counts, shown under the figure: "teams ship with Acme". */
+    label: ReactNode;
+}
+export interface Stats01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading, centred over the numbers. */
+    title: ReactNode;
+    /** The numbers, in a row split by hairlines (two by two on smaller screens). Four look best. */
+    stats: Stats01Stat[];
+    /** A small line under the numbers, after a brass dot, such as where they come from. */
+    note?: ReactNode;
+}

package/dist/stats/Stats01/Stats01.types.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Stats01Stat {
+    /** The figure: "4,200", "1.9". */
+    value: ReactNode;
+    /** A unit after it at half its size, in the muted colour: "M", "min", "%". */
+    unit?: ReactNode;
+    /** What it counts, shown under the figure: "teams ship with Acme". */
+    label: ReactNode;
+}
+export interface Stats01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line in a Chip above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading, centred over the numbers. */
+    title: ReactNode;
+    /** The numbers, in a row split by hairlines (two by two on smaller screens). Four look best. */
+    stats: Stats01Stat[];
+    /** A small line under the numbers, after a brass dot, such as where they come from. */
+    note?: ReactNode;
+}

package/dist/stats/Stats02/Stats02.d.cts

@@ -0,0 +1,3 @@
+import type { Stats02Props } from "./Stats02.types.cjs";
+/** Each number on its own card, with its change and a trend line. */
+export declare function Stats02({ eyebrow, title, description, link, stats, className, ...props }: Stats02Props): import("react").JSX.Element;

package/dist/stats/Stats02/Stats02.d.ts

@@ -0,0 +1,3 @@
+import type { Stats02Props } from "./Stats02.types.js";
+/** Each number on its own card, with its change and a trend line. */
+export declare function Stats02({ eyebrow, title, description, link, stats, className, ...props }: Stats02Props): import("react").JSX.Element;