@openwarelabs/blocks 0.6.0 → 0.8.0

package/dist/features/Features01/Features01.d.cts

@@ -0,0 +1,3 @@
+import type { Features01Props } from "./Features01.types.cjs";
+/** An icon, a short title and a sentence for each feature, in a grid that drops to one column on phones. */
+export declare function Features01({ eyebrow, title, description, features, footer, className, ...props }: Features01Props): import("react").JSX.Element;

package/dist/features/Features01/Features01.d.ts

@@ -0,0 +1,3 @@
+import type { Features01Props } from "./Features01.types.js";
+/** An icon, a short title and a sentence for each feature, in a grid that drops to one column on phones. */
+export declare function Features01({ eyebrow, title, description, features, footer, className, ...props }: Features01Props): import("react").JSX.Element;

package/dist/features/Features01/Features01.types.d.cts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Features01Feature {
+    /** A 16px icon, usually from lucide-react, on a tinted tile. */
+    icon?: ReactNode;
+    /** The feature's name. */
+    title: ReactNode;
+    /** A sentence or two. */
+    description: ReactNode;
+}
+export interface Features01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** In three columns, two on tablets and one on phones; six fill two rows. */
+    features: Features01Feature[];
+    /** A line under the grid, often with a link: "Plus webhooks and an API. Read the docs". */
+    footer?: ReactNode;
+}

package/dist/features/Features01/Features01.types.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Features01Feature {
+    /** A 16px icon, usually from lucide-react, on a tinted tile. */
+    icon?: ReactNode;
+    /** The feature's name. */
+    title: ReactNode;
+    /** A sentence or two. */
+    description: ReactNode;
+}
+export interface Features01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** In three columns, two on tablets and one on phones; six fill two rows. */
+    features: Features01Feature[];
+    /** A line under the grid, often with a link: "Plus webhooks and an API. Read the docs". */
+    footer?: ReactNode;
+}

package/dist/features/Features02/Features02.d.cts

@@ -0,0 +1,3 @@
+import type { Features02Props } from "./Features02.types.cjs";
+/** Rows that swap sides, each a few lines and points beside a picture on a dot grid. */
+export declare function Features02({ eyebrow, title, description, rows, className, ...props }: Features02Props): import("react").JSX.Element;

package/dist/features/Features02/Features02.d.ts

@@ -0,0 +1,3 @@
+import type { Features02Props } from "./Features02.types.js";
+/** Rows that swap sides, each a few lines and points beside a picture on a dot grid. */
+export declare function Features02({ eyebrow, title, description, rows, className, ...props }: Features02Props): import("react").JSX.Element;

package/dist/features/Features02/Features02.types.d.cts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+export interface Features02Row {
+    /** A small line above the title, in the brand colour: "Agents". */
+    kicker?: ReactNode;
+    /** A 15px icon before the kicker. */
+    icon?: ReactNode;
+    /** The row's heading. */
+    title: ReactNode;
+    /** A sentence or two about it. */
+    description: ReactNode;
+    /** Short points under it, each with a tick. */
+    points?: ReactNode[];
+    /** A link at the end, with an arrow: "How agents work". */
+    link?: BlockLink;
+    /** The picture beside it, on a dot grid: a screenshot, or something drawn. */
+    visual: ReactNode;
+    /** Describes the visual for screen readers when it isn't an <img> with alt text of its own. */
+    visualLabel?: string;
+}
+export interface Features02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The features, one per row, the picture swapping sides each time. They stack on phones. */
+    rows: Features02Row[];
+}

package/dist/features/Features02/Features02.types.d.ts

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+export interface Features02Row {
+    /** A small line above the title, in the brand colour: "Agents". */
+    kicker?: ReactNode;
+    /** A 15px icon before the kicker. */
+    icon?: ReactNode;
+    /** The row's heading. */
+    title: ReactNode;
+    /** A sentence or two about it. */
+    description: ReactNode;
+    /** Short points under it, each with a tick. */
+    points?: ReactNode[];
+    /** A link at the end, with an arrow: "How agents work". */
+    link?: BlockLink;
+    /** The picture beside it, on a dot grid: a screenshot, or something drawn. */
+    visual: ReactNode;
+    /** Describes the visual for screen readers when it isn't an <img> with alt text of its own. */
+    visualLabel?: string;
+}
+export interface Features02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The features, one per row, the picture swapping sides each time. They stack on phones. */
+    rows: Features02Row[];
+}

package/dist/features/Features03/Features03.d.cts

@@ -0,0 +1,3 @@
+import type { Features03Props } from "./Features03.types.cjs";
+/** A bento grid: cards of different sizes, the biggest for the feature that matters most. */
+export declare function Features03({ eyebrow, title, description, cards, className, ...props }: Features03Props): import("react").JSX.Element;

package/dist/features/Features03/Features03.d.ts

@@ -0,0 +1,3 @@
+import type { Features03Props } from "./Features03.types.js";
+/** A bento grid: cards of different sizes, the biggest for the feature that matters most. */
+export declare function Features03({ eyebrow, title, description, cards, className, ...props }: Features03Props): import("react").JSX.Element;

package/dist/features/Features03/Features03.types.d.cts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Features03Card {
+    /** The card's heading. */
+    title: ReactNode;
+    /** A line or two about it. */
+    description: ReactNode;
+    /** The picture in the card: a screenshot, or something drawn. */
+    visual: ReactNode;
+    /** Describes the visual for screen readers when it isn't an <img> with alt text of its own. */
+    visualLabel?: string;
+}
+export interface Features03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A lead beside the title, on the right. */
+    description?: ReactNode;
+    /**
+     * The cards. The first is the big one, two columns wide and two rows tall, with a heading and a lead; the rest
+     * are dense cards around it. Six fill the grid; on tablets the first and the last span the full width.
+     */
+    cards: Features03Card[];
+}

package/dist/features/Features03/Features03.types.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Features03Card {
+    /** The card's heading. */
+    title: ReactNode;
+    /** A line or two about it. */
+    description: ReactNode;
+    /** The picture in the card: a screenshot, or something drawn. */
+    visual: ReactNode;
+    /** Describes the visual for screen readers when it isn't an <img> with alt text of its own. */
+    visualLabel?: string;
+}
+export interface Features03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A lead beside the title, on the right. */
+    description?: ReactNode;
+    /**
+     * The cards. The first is the big one, two columns wide and two rows tall, with a heading and a lead; the rest
+     * are dense cards around it. Six fill the grid; on tablets the first and the last span the full width.
+     */
+    cards: Features03Card[];
+}

package/dist/features/Features04/Features04.d.cts

@@ -0,0 +1,3 @@
+import type { Features04Props } from "./Features04.types.cjs";
+/** A row of tabs, each showing its part of the product with a caption above it. */
+export declare function Features04({ eyebrow, title, description, tabs, defaultTab, labels, className, ...props }: Features04Props): import("react").JSX.Element;

package/dist/features/Features04/Features04.d.ts

@@ -0,0 +1,3 @@
+import type { Features04Props } from "./Features04.types.js";
+/** A row of tabs, each showing its part of the product with a caption above it. */
+export declare function Features04({ eyebrow, title, description, tabs, defaultTab, labels, className, ...props }: Features04Props): import("react").JSX.Element;

package/dist/features/Features04/Features04.types.d.cts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Features04Tab {
+    /** The tab's name: "Plan". */
+    label: ReactNode;
+    /** A 16px icon before it. */
+    icon?: ReactNode;
+    /** A sentence above the picture when the tab is open. */
+    caption?: ReactNode;
+    /** The part of the product it shows: a screenshot, or something drawn. */
+    visual: ReactNode;
+}
+export interface Features04Labels {
+    /** The row of tabs, for screen readers. @default "Features" */
+    tabs?: string;
+}
+export interface Features04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** A row of tabs; each shows its part of the product. */
+    tabs: Features04Tab[];
+    /** The tab open at first, by index. @default 0 */
+    defaultTab?: number;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Features04Labels;
+}

package/dist/features/Features04/Features04.types.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface Features04Tab {
+    /** The tab's name: "Plan". */
+    label: ReactNode;
+    /** A 16px icon before it. */
+    icon?: ReactNode;
+    /** A sentence above the picture when the tab is open. */
+    caption?: ReactNode;
+    /** The part of the product it shows: a screenshot, or something drawn. */
+    visual: ReactNode;
+}
+export interface Features04Labels {
+    /** The row of tabs, for screen readers. @default "Features" */
+    tabs?: string;
+}
+export interface Features04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** A row of tabs; each shows its part of the product. */
+    tabs: Features04Tab[];
+    /** The tab open at first, by index. @default 0 */
+    defaultTab?: number;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Features04Labels;
+}

package/dist/features/Features05/Features05.d.cts

@@ -0,0 +1,3 @@
+import type { Features05Props } from "./Features05.types.cjs";
+/** A checklist of what's included, with a button, beside one large picture. */
+export declare function Features05({ eyebrow, title, description, items, primaryAction, secondaryLink, visual, className, ...props }: Features05Props): import("react").JSX.Element;

package/dist/features/Features05/Features05.d.ts

@@ -0,0 +1,3 @@
+import type { Features05Props } from "./Features05.types.js";
+/** A checklist of what's included, with a button, beside one large picture. */
+export declare function Features05({ eyebrow, title, description, items, primaryAction, secondaryLink, visual, className, ...props }: Features05Props): import("react").JSX.Element;

package/dist/features/Features05/Features05.types.d.cts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockLink } from "../../shared/shared.types.cjs";
+export interface Features05Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** What's included, in two columns, each with a tick. */
+    items: ReactNode[];
+    /** The main button under the list. */
+    primaryAction?: BlockAction;
+    /** A text link beside it: "Compare plans". */
+    secondaryLink?: BlockLink;
+    /** The large picture on the right (under the list on phones), usually a screenshot. */
+    visual: ReactNode;
+}

package/dist/features/Features05/Features05.types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockLink } from "../../shared/shared.types.js";
+export interface Features05Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small line above the title, such as the section's name. */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** What's included, in two columns, each with a tick. */
+    items: ReactNode[];
+    /** The main button under the list. */
+    primaryAction?: BlockAction;
+    /** A text link beside it: "Compare plans". */
+    secondaryLink?: BlockLink;
+    /** The large picture on the right (under the list on phones), usually a screenshot. */
+    visual: ReactNode;
+}

package/dist/footers/Footer01/Footer01.d.cts

@@ -0,0 +1,3 @@
+import type { Footer01Props } from "./Footer01.types.cjs";
+/** The logo and a line, then three or four columns of links, with the small print and a theme switch below. */
+export declare function Footer01({ brand, description, status, columns, legal, legalLinks, themeSwitch, labels, className, ...props }: Footer01Props): import("react").JSX.Element;

package/dist/footers/Footer01/Footer01.d.ts

@@ -0,0 +1,3 @@
+import type { Footer01Props } from "./Footer01.types.js";
+/** The logo and a line, then three or four columns of links, with the small print and a theme switch below. */
+export declare function Footer01({ brand, description, status, columns, legal, legalLinks, themeSwitch, labels, className, ...props }: Footer01Props): import("react").JSX.Element;

package/dist/footers/Footer01/Footer01.types.d.cts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockBrand, BlockLink, FooterColumn } from "../../shared/shared.types.cjs";
+export interface Footer01Labels {
+    /** The logo link's name. @default `${brand.name} home`, when the name is text */
+    home?: string;
+    /** Beside the theme switch. @default "Theme" */
+    theme?: string;
+    /** @default "Light" */
+    light?: string;
+    /** @default "Dark" */
+    dark?: string;
+    /** @default "Match the system" */
+    system?: string;
+}
+export interface Footer01Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The logo and name at the top left. */
+    brand: BlockBrand;
+    /** A line under it about the product. */
+    description?: ReactNode;
+    /** A link with a green dot under that: "All systems normal". */
+    status?: BlockLink;
+    /** Three or four columns of links beside the brand. A link's badge ("New") shows after it. */
+    columns: FooterColumn[];
+    /** The small print at the bottom left: "© 2026 Acme Ltd." */
+    legal: ReactNode;
+    /** Links after it: "Cookie settings". */
+    legalLinks?: BlockLink[];
+    /** A light, dark and system switch at the bottom right, which sets data-theme on <html>. */
+    themeSwitch?: boolean;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Footer01Labels;
+}

package/dist/footers/Footer01/Footer01.types.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockBrand, BlockLink, FooterColumn } from "../../shared/shared.types.js";
+export interface Footer01Labels {
+    /** The logo link's name. @default `${brand.name} home`, when the name is text */
+    home?: string;
+    /** Beside the theme switch. @default "Theme" */
+    theme?: string;
+    /** @default "Light" */
+    light?: string;
+    /** @default "Dark" */
+    dark?: string;
+    /** @default "Match the system" */
+    system?: string;
+}
+export interface Footer01Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The logo and name at the top left. */
+    brand: BlockBrand;
+    /** A line under it about the product. */
+    description?: ReactNode;
+    /** A link with a green dot under that: "All systems normal". */
+    status?: BlockLink;
+    /** Three or four columns of links beside the brand. A link's badge ("New") shows after it. */
+    columns: FooterColumn[];
+    /** The small print at the bottom left: "© 2026 Acme Ltd." */
+    legal: ReactNode;
+    /** Links after it: "Cookie settings". */
+    legalLinks?: BlockLink[];
+    /** A light, dark and system switch at the bottom right, which sets data-theme on <html>. */
+    themeSwitch?: boolean;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Footer01Labels;
+}

package/dist/footers/Footer02/Footer02.d.cts

@@ -0,0 +1,3 @@
+import type { Footer02Props } from "./Footer02.types.cjs";
+/** The logo, one line of links and the small print, centred. */
+export declare function Footer02({ brand, links, legal, labels, className, ...props }: Footer02Props): import("react").JSX.Element;

package/dist/footers/Footer02/Footer02.d.ts

@@ -0,0 +1,3 @@
+import type { Footer02Props } from "./Footer02.types.js";
+/** The logo, one line of links and the small print, centred. */
+export declare function Footer02({ brand, links, legal, labels, className, ...props }: Footer02Props): import("react").JSX.Element;

package/dist/footers/Footer02/Footer02.types.d.cts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockBrand, BlockLink } from "../../shared/shared.types.cjs";
+export interface Footer02Labels {
+    /** The logo link's name. @default `${brand.name} home`, when the name is text */
+    home?: string;
+    /** The links' name for screen readers. @default "Footer" */
+    nav?: string;
+}
+export interface Footer02Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Only its logo shows, as a link home; the name is its accessible name. */
+    brand: BlockBrand;
+    /** One line of links, centred; it wraps on phones. */
+    links: BlockLink[];
+    /** The small print under them: "© 2026 Acme Ltd. All rights reserved." */
+    legal: ReactNode;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Footer02Labels;
+}

package/dist/footers/Footer02/Footer02.types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockBrand, BlockLink } from "../../shared/shared.types.js";
+export interface Footer02Labels {
+    /** The logo link's name. @default `${brand.name} home`, when the name is text */
+    home?: string;
+    /** The links' name for screen readers. @default "Footer" */
+    nav?: string;
+}
+export interface Footer02Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** Only its logo shows, as a link home; the name is its accessible name. */
+    brand: BlockBrand;
+    /** One line of links, centred; it wraps on phones. */
+    links: BlockLink[];
+    /** The small print under them: "© 2026 Acme Ltd. All rights reserved." */
+    legal: ReactNode;
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Footer02Labels;
+}

package/dist/footers/Footer03/Footer03.d.cts

@@ -0,0 +1,3 @@
+import type { Footer03Props } from "./Footer03.types.cjs";
+/** A newsletter sign-up across the top, then the brand and columns of links, then the small print. */
+export declare function Footer03({ newsletter, brand, description, columns, legal, legalLinks, labels, className, ...props }: Footer03Props): import("react").JSX.Element;

package/dist/footers/Footer03/Footer03.d.ts

@@ -0,0 +1,3 @@
+import type { Footer03Props } from "./Footer03.types.js";
+/** A newsletter sign-up across the top, then the brand and columns of links, then the small print. */
+export declare function Footer03({ newsletter, brand, description, columns, legal, legalLinks, labels, className, ...props }: Footer03Props): import("react").JSX.Element;

package/dist/footers/Footer03/Footer03.types.d.cts

@@ -0,0 +1,53 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockBrand, BlockLink, FooterColumn } from "../../shared/shared.types.cjs";
+export interface Footer03Labels {
+    /** The logo link's name. @default `${brand.name} home`, when the name is text */
+    home?: string;
+    /** The field's accessible name. @default "Email address" */
+    email?: string;
+    /** @default "you@example.com" */
+    placeholder?: string;
+    /** The button that brings the form back. @default "Change" */
+    change?: string;
+    /** @default "Enter your email address." */
+    empty?: string;
+    /** @default "That doesn't look like an email address. Check it for a typo." */
+    invalid?: 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 sign-up at the top of the footer. */
+export interface Footer03Newsletter {
+    /** The sign-up's heading. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The button's words: "Subscribe". */
+    submitLabel: ReactNode;
+    /** An icon after them, such as an arrow. */
+    submitIcon?: ReactNode;
+    /** Adds the address to your list. While its promise is pending the button shows a spinner; if it throws, its message shows under the field. */
+    onSubmit(email: string): void | Promise<void>;
+    /** A line under the field: "One email a month. Unsubscribe whenever you like." */
+    note?: ReactNode;
+    /** What replaces the form once they've signed up: "Check your inbox". */
+    successTitle: ReactNode;
+    /** A line beside it, given their address. */
+    successDescription?(email: string): ReactNode;
+}
+export interface Footer03Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The sign-up across the top. */
+    newsletter: Footer03Newsletter;
+    /** The logo and name, linking home. */
+    brand: BlockBrand;
+    /** A line under the logo. */
+    description?: ReactNode;
+    /** Columns of links beside the brand. */
+    columns: FooterColumn[];
+    /** The small print at the bottom left. */
+    legal: ReactNode;
+    /** Links on the right of it: "Privacy", "Terms". */
+    legalLinks?: BlockLink[];
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Footer03Labels;
+}

package/dist/footers/Footer03/Footer03.types.d.ts

@@ -0,0 +1,53 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockBrand, BlockLink, FooterColumn } from "../../shared/shared.types.js";
+export interface Footer03Labels {
+    /** The logo link's name. @default `${brand.name} home`, when the name is text */
+    home?: string;
+    /** The field's accessible name. @default "Email address" */
+    email?: string;
+    /** @default "you@example.com" */
+    placeholder?: string;
+    /** The button that brings the form back. @default "Change" */
+    change?: string;
+    /** @default "Enter your email address." */
+    empty?: string;
+    /** @default "That doesn't look like an email address. Check it for a typo." */
+    invalid?: 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 sign-up at the top of the footer. */
+export interface Footer03Newsletter {
+    /** The sign-up's heading. */
+    title: ReactNode;
+    /** A line under it. */
+    description?: ReactNode;
+    /** The button's words: "Subscribe". */
+    submitLabel: ReactNode;
+    /** An icon after them, such as an arrow. */
+    submitIcon?: ReactNode;
+    /** Adds the address to your list. While its promise is pending the button shows a spinner; if it throws, its message shows under the field. */
+    onSubmit(email: string): void | Promise<void>;
+    /** A line under the field: "One email a month. Unsubscribe whenever you like." */
+    note?: ReactNode;
+    /** What replaces the form once they've signed up: "Check your inbox". */
+    successTitle: ReactNode;
+    /** A line beside it, given their address. */
+    successDescription?(email: string): ReactNode;
+}
+export interface Footer03Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The sign-up across the top. */
+    newsletter: Footer03Newsletter;
+    /** The logo and name, linking home. */
+    brand: BlockBrand;
+    /** A line under the logo. */
+    description?: ReactNode;
+    /** Columns of links beside the brand. */
+    columns: FooterColumn[];
+    /** The small print at the bottom left. */
+    legal: ReactNode;
+    /** Links on the right of it: "Privacy", "Terms". */
+    legalLinks?: BlockLink[];
+    /** Words that aren't content (names for screen readers, a menu's name), in English unless you pass your own. */
+    labels?: Footer03Labels;
+}

package/dist/footers/Footer04/Footer04.d.cts

@@ -0,0 +1,3 @@
+import type { Footer04Props } from "./Footer04.types.cjs";
+/** A last line of pitch and a button, columns of links, the small print, and the product's name set very large across the bottom. */
+export declare function Footer04({ title, titleMuted, primaryAction, columns, legal, legalLinks, wordmark, className, ...props }: Footer04Props): import("react").JSX.Element;

package/dist/footers/Footer04/Footer04.d.ts

@@ -0,0 +1,3 @@
+import type { Footer04Props } from "./Footer04.types.js";
+/** A last line of pitch and a button, columns of links, the small print, and the product's name set very large across the bottom. */
+export declare function Footer04({ title, titleMuted, primaryAction, columns, legal, legalLinks, wordmark, className, ...props }: Footer04Props): import("react").JSX.Element;

package/dist/footers/Footer04/Footer04.types.d.cts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockLink, FooterColumn } from "../../shared/shared.types.cjs";
+export interface Footer04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A last line of pitch at the top left, in the heading style. */
+    title: ReactNode;
+    /** Words after the title, in a muted colour: "All in one place." */
+    titleMuted?: ReactNode;
+    /** A button under it. */
+    primaryAction?: BlockAction;
+    /** Columns of links on the right. */
+    columns: FooterColumn[];
+    /** The small print. */
+    legal: ReactNode;
+    /** Links beside it. */
+    legalLinks?: BlockLink[];
+    /** The product's name, set very large across the bottom and cropped at the edge. It's decoration; screen readers skip it. */
+    wordmark: string;
+}

package/dist/footers/Footer04/Footer04.types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockLink, FooterColumn } from "../../shared/shared.types.js";
+export interface Footer04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A last line of pitch at the top left, in the heading style. */
+    title: ReactNode;
+    /** Words after the title, in a muted colour: "All in one place." */
+    titleMuted?: ReactNode;
+    /** A button under it. */
+    primaryAction?: BlockAction;
+    /** Columns of links on the right. */
+    columns: FooterColumn[];
+    /** The small print. */
+    legal: ReactNode;
+    /** Links beside it. */
+    legalLinks?: BlockLink[];
+    /** The product's name, set very large across the bottom and cropped at the edge. It's decoration; screen readers skip it. */
+    wordmark: string;
+}

package/dist/headers/Header01/Header01.d.cts

@@ -0,0 +1,6 @@
+import type { Header01Props } from "./Header01.types.cjs";
+/**
+ * A blurred pill that floats above the page and follows it down: the logo, the links in the middle and one call
+ * to action. On phones the links fold into a menu behind a button. Put it first inside the page's scrolling area.
+ */
+export declare function Header01({ brand, links, primaryAction, secondaryLink, labels, className, ...props }: Header01Props): import("react").JSX.Element;

package/dist/headers/Header01/Header01.d.ts

@@ -0,0 +1,6 @@
+import type { Header01Props } from "./Header01.types.js";
+/**
+ * A blurred pill that floats above the page and follows it down: the logo, the links in the middle and one call
+ * to action. On phones the links fold into a menu behind a button. Put it first inside the page's scrolling area.
+ */
+export declare function Header01({ brand, links, primaryAction, secondaryLink, labels, className, ...props }: Header01Props): import("react").JSX.Element;