@openwarelabs/blocks 0.8.0 → 0.10.0

package/dist/blog/Blog01/Blog01.types.d.cts

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+/** Who wrote a post. */
+export interface Blog01Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it: "Product lead". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A post in the grid. */
+export interface Blog01Post {
+    /** The post's title, which links to it. */
+    title: ReactNode;
+    /** Where the post is. The whole card opens it. */
+    href: string;
+    /** A sentence or two under the title. */
+    excerpt?: ReactNode;
+    /** Its category, shown as a tag and matched against `categories` by the filter: "Product". */
+    category?: string;
+    /** When it was published, as people read it: "8 Oct 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** How long it takes to read: "4 min read". */
+    readingTime?: ReactNode;
+    /** Who wrote it, along the card's foot. */
+    author?: Blog01Author;
+    /** The image at the card's top, which fills a 16:10 frame: an `<img alt="">` or a drawing. */
+    cover?: ReactNode;
+}
+/** The words around the posts that aren't content, in English unless you pass your own. */
+export interface Blog01Labels {
+    /** The filter's first option, which shows every post. @default "All" */
+    all?: string;
+    /** The filter's accessible name. @default "Show posts about" */
+    filter?: string;
+}
+export interface Blog01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Blog". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** The posts, newest first, three to a row. */
+    posts: Blog01Post[];
+    /** Categories to filter the posts by, beside the heading; "All" comes first. Leave out for no filter. */
+    categories?: string[];
+    /** A button under the posts: "Browse every post". */
+    moreAction?: BlockAction;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog01Labels;
+}

package/dist/blog/Blog01/Blog01.types.d.ts

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+/** Who wrote a post. */
+export interface Blog01Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it: "Product lead". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A post in the grid. */
+export interface Blog01Post {
+    /** The post's title, which links to it. */
+    title: ReactNode;
+    /** Where the post is. The whole card opens it. */
+    href: string;
+    /** A sentence or two under the title. */
+    excerpt?: ReactNode;
+    /** Its category, shown as a tag and matched against `categories` by the filter: "Product". */
+    category?: string;
+    /** When it was published, as people read it: "8 Oct 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** How long it takes to read: "4 min read". */
+    readingTime?: ReactNode;
+    /** Who wrote it, along the card's foot. */
+    author?: Blog01Author;
+    /** The image at the card's top, which fills a 16:10 frame: an `<img alt="">` or a drawing. */
+    cover?: ReactNode;
+}
+/** The words around the posts that aren't content, in English unless you pass your own. */
+export interface Blog01Labels {
+    /** The filter's first option, which shows every post. @default "All" */
+    all?: string;
+    /** The filter's accessible name. @default "Show posts about" */
+    filter?: string;
+}
+export interface Blog01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Blog". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** The posts, newest first, three to a row. */
+    posts: Blog01Post[];
+    /** Categories to filter the posts by, beside the heading; "All" comes first. Leave out for no filter. */
+    categories?: string[];
+    /** A button under the posts: "Browse every post". */
+    moreAction?: BlockAction;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog01Labels;
+}

package/dist/blog/Blog02/Blog02.d.cts

@@ -0,0 +1,3 @@
+import type { Blog02Props } from "./Blog02.types.cjs";
+/** One post large, with its cover, excerpt, figures and author, and the next few in a row below it. */
+export declare function Blog02({ title, allLink, featured, posts, className, ...props }: Blog02Props): import("react").JSX.Element;

package/dist/blog/Blog02/Blog02.d.ts

@@ -0,0 +1,3 @@
+import type { Blog02Props } from "./Blog02.types.js";
+/** One post large, with its cover, excerpt, figures and author, and the next few in a row below it. */
+export declare function Blog02({ title, allLink, featured, posts, className, ...props }: Blog02Props): import("react").JSX.Element;

package/dist/blog/Blog02/Blog02.types.d.cts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+/** Who wrote a post. */
+export interface Blog02Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it, on the featured post: "Customer success". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A figure on the featured post, such as "Deploys a day: 2.3". */
+export interface Blog02Fact {
+    /** What it measures, under the figure. */
+    label: ReactNode;
+    /** The figure. */
+    value: ReactNode;
+}
+/** A post: the featured one, or one of those below it. */
+export interface Blog02Post {
+    /** The post's title, which links to it. */
+    title: ReactNode;
+    /** Where the post is. The whole post opens it. */
+    href: string;
+    /** Its category: a tag on the featured post, a word before the date on the others. */
+    category?: ReactNode;
+    /** When it was published, as people read it: "15 Sep 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-09-15". */
+    dateTime?: string;
+    /** Who wrote it. */
+    author?: Blog02Author;
+    /** The post's image, which fills its frame: an `<img alt="">` or a drawing. A 16:10 thumbnail on the smaller posts. */
+    cover?: ReactNode;
+    /** A sentence or two under the title. Featured post only. */
+    excerpt?: ReactNode;
+    /** Up to three figures in a row under the excerpt. Featured post only. */
+    facts?: Blog02Fact[];
+    /** How long it takes to read: "6 min read". Featured post only. */
+    readingTime?: ReactNode;
+}
+export interface Blog02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A link beside it, with an arrow: "All posts". */
+    allLink?: BlockLink;
+    /** The post in the large card: its cover on the left, the story on the right. */
+    featured: Blog02Post;
+    /** The next few posts in a row below it, with a small cover beside each title. Three fit best. */
+    posts?: Blog02Post[];
+}

package/dist/blog/Blog02/Blog02.types.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+/** Who wrote a post. */
+export interface Blog02Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it, on the featured post: "Customer success". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A figure on the featured post, such as "Deploys a day: 2.3". */
+export interface Blog02Fact {
+    /** What it measures, under the figure. */
+    label: ReactNode;
+    /** The figure. */
+    value: ReactNode;
+}
+/** A post: the featured one, or one of those below it. */
+export interface Blog02Post {
+    /** The post's title, which links to it. */
+    title: ReactNode;
+    /** Where the post is. The whole post opens it. */
+    href: string;
+    /** Its category: a tag on the featured post, a word before the date on the others. */
+    category?: ReactNode;
+    /** When it was published, as people read it: "15 Sep 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-09-15". */
+    dateTime?: string;
+    /** Who wrote it. */
+    author?: Blog02Author;
+    /** The post's image, which fills its frame: an `<img alt="">` or a drawing. A 16:10 thumbnail on the smaller posts. */
+    cover?: ReactNode;
+    /** A sentence or two under the title. Featured post only. */
+    excerpt?: ReactNode;
+    /** Up to three figures in a row under the excerpt. Featured post only. */
+    facts?: Blog02Fact[];
+    /** How long it takes to read: "6 min read". Featured post only. */
+    readingTime?: ReactNode;
+}
+export interface Blog02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A link beside it, with an arrow: "All posts". */
+    allLink?: BlockLink;
+    /** The post in the large card: its cover on the left, the story on the right. */
+    featured: Blog02Post;
+    /** The next few posts in a row below it, with a small cover beside each title. Three fit best. */
+    posts?: Blog02Post[];
+}

package/dist/blog/Blog03/Blog03.d.cts

@@ -0,0 +1,3 @@
+import type { Blog03Props } from "./Blog03.types.cjs";
+/** A changelog: releases down a timeline, the date and version on the left, the headline and its changes by group on the right. */
+export declare function Blog03({ eyebrow, title, description, links, releases, initialCount, labels, className, ...props }: Blog03Props): import("react").JSX.Element;

package/dist/blog/Blog03/Blog03.d.ts

@@ -0,0 +1,3 @@
+import type { Blog03Props } from "./Blog03.types.js";
+/** A changelog: releases down a timeline, the date and version on the left, the headline and its changes by group on the right. */
+export declare function Blog03({ eyebrow, title, description, links, releases, initialCount, labels, className, ...props }: Blog03Props): import("react").JSX.Element;

package/dist/blog/Blog03/Blog03.types.d.cts

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BadgeVariant } from "@openwarelabs/ui";
+/** A group of a release's changes under a badge, such as New, Improved or Fixed. */
+export interface Blog03Change {
+    /** The group's badge: "New". */
+    label: string;
+    /** The badge's colour: "active" for new, "success" for improved, "neutral" for fixed.
+     * @default "neutral" */
+    variant?: BadgeVariant;
+    /** The changes, a sentence each. */
+    items: ReactNode[];
+}
+/** A release on the timeline. */
+export interface Blog03Release {
+    /** Its version, shown in code type after `labels.versionPrefix`: "2.14". */
+    version: string;
+    /** When it shipped, as people read it: "8 Oct 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** The headline change. */
+    title: ReactNode;
+    /** A sentence or two about it. */
+    summary?: ReactNode;
+    /** A picture of the headline change under the summary: a screenshot, or a drawing of it. */
+    visual?: ReactNode;
+    /** The changes, group by group. */
+    changes?: Blog03Change[];
+}
+/** A way to follow the changelog, beside the heading. */
+export interface Blog03Link {
+    /** The link's words: "RSS feed". */
+    label: ReactNode;
+    /** Where it goes. */
+    href: string;
+    /** A 15px icon before the words. */
+    icon?: ReactNode;
+}
+/** The words around the releases that aren't content, in English unless you pass your own. */
+export interface Blog03Labels {
+    /** What goes before each version. @default "v" */
+    versionPrefix?: string;
+    /** The badge on the newest release. @default "Latest" */
+    latest?: string;
+    /** The button that shows the rest, given how many are hidden. @default `Show ${count} older releases` */
+    showOlder?(count: number): string;
+    /** A group's list's accessible name. @default `${label} in ${version}` */
+    changes?(label: string, version: string): string;
+}
+export interface Blog03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Changelog". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** Ways to follow along, beside the heading: a feed, an email. */
+    links?: Blog03Link[];
+    /** The releases, newest first, down a timeline. */
+    releases: Blog03Release[];
+    /** How many releases show before the button that shows the rest.
+     * @default 3 */
+    initialCount?: number;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog03Labels;
+}

package/dist/blog/Blog03/Blog03.types.d.ts

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BadgeVariant } from "@openwarelabs/ui";
+/** A group of a release's changes under a badge, such as New, Improved or Fixed. */
+export interface Blog03Change {
+    /** The group's badge: "New". */
+    label: string;
+    /** The badge's colour: "active" for new, "success" for improved, "neutral" for fixed.
+     * @default "neutral" */
+    variant?: BadgeVariant;
+    /** The changes, a sentence each. */
+    items: ReactNode[];
+}
+/** A release on the timeline. */
+export interface Blog03Release {
+    /** Its version, shown in code type after `labels.versionPrefix`: "2.14". */
+    version: string;
+    /** When it shipped, as people read it: "8 Oct 2026". */
+    date: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** The headline change. */
+    title: ReactNode;
+    /** A sentence or two about it. */
+    summary?: ReactNode;
+    /** A picture of the headline change under the summary: a screenshot, or a drawing of it. */
+    visual?: ReactNode;
+    /** The changes, group by group. */
+    changes?: Blog03Change[];
+}
+/** A way to follow the changelog, beside the heading. */
+export interface Blog03Link {
+    /** The link's words: "RSS feed". */
+    label: ReactNode;
+    /** Where it goes. */
+    href: string;
+    /** A 15px icon before the words. */
+    icon?: ReactNode;
+}
+/** The words around the releases that aren't content, in English unless you pass your own. */
+export interface Blog03Labels {
+    /** What goes before each version. @default "v" */
+    versionPrefix?: string;
+    /** The badge on the newest release. @default "Latest" */
+    latest?: string;
+    /** The button that shows the rest, given how many are hidden. @default `Show ${count} older releases` */
+    showOlder?(count: number): string;
+    /** A group's list's accessible name. @default `${label} in ${version}` */
+    changes?(label: string, version: string): string;
+}
+export interface Blog03Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A short line in a Chip above the title, such as "Changelog". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence under the title. */
+    description?: ReactNode;
+    /** Ways to follow along, beside the heading: a feed, an email. */
+    links?: Blog03Link[];
+    /** The releases, newest first, down a timeline. */
+    releases: Blog03Release[];
+    /** How many releases show before the button that shows the rest.
+     * @default 3 */
+    initialCount?: number;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog03Labels;
+}

package/dist/blog/Blog04/Blog04.d.cts

@@ -0,0 +1,3 @@
+import type { Blog04Props } from "./Blog04.types.cjs";
+/** An article's page: the title, author and date, a wide cover, then the text at a readable width with On this page beside it. */
+export declare function Blog04({ backLink, category, topic, title, description, author, date, dateTime, readingTime, cover, children, sections, tags, shareUrl, labels, className, ...props }: Blog04Props): import("react").JSX.Element;

package/dist/blog/Blog04/Blog04.d.ts

@@ -0,0 +1,3 @@
+import type { Blog04Props } from "./Blog04.types.js";
+/** An article's page: the title, author and date, a wide cover, then the text at a readable width with On this page beside it. */
+export declare function Blog04({ backLink, category, topic, title, description, author, date, dateTime, readingTime, cover, children, sections, tags, shareUrl, labels, className, ...props }: Blog04Props): import("react").JSX.Element;

package/dist/blog/Blog04/Blog04.types.d.cts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.cjs";
+/** Who wrote the article. */
+export interface Blog04Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it: "Product lead". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A heading in the article, for On this page. */
+export interface Blog04Section {
+    /** The id of the heading in the article's text, which the link scrolls to. */
+    id: string;
+    /** The link's words, usually the heading's. */
+    title: ReactNode;
+}
+/** The words around the article that aren't content, in English unless you pass your own. */
+export interface Blog04Labels {
+    /** The heading over the list of sections, beside the text and in the fold above it. @default "On this page" */
+    contents?: string;
+    /** The tags' accessible name. @default "Topics" */
+    topics?: string;
+    /** The button that copies `shareUrl`. @default "Copy link" */
+    copyLink?: string;
+    /** What it says once it has. @default "Link copied" */
+    linkCopied?: string;
+}
+export interface Blog04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A link back above the title, with an arrow: "All posts". */
+    backLink?: BlockLink;
+    /** The article's category, as a tag above the title: "Product". */
+    category?: ReactNode;
+    /** A word beside it: "Agents". */
+    topic?: ReactNode;
+    /** The article's title: the page's h1. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** Who wrote it. */
+    author?: Blog04Author;
+    /** When it was published, as people read it: "8 Oct 2026". */
+    date?: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** How long it takes to read: "4 min read". */
+    readingTime?: ReactNode;
+    /** A wide image under the header, which fills a 12:5 frame (16:10 on phones): an `<img alt="">` or a drawing. */
+    cover?: ReactNode;
+    /**
+     * The text, at a readable width: `Text variant="prose"` paragraphs, `h2` headings (with the ids in `sections`), lists,
+     * a `blockquote`, a `CodeBlock`.
+     */
+    children: ReactNode;
+    /** The article's headings, listed in On this page beside the text (folded above it on smaller screens), the one being read marked. */
+    sections?: Blog04Section[];
+    /** Tags at the end of the text: "Agents", "Reviews". */
+    tags?: ReactNode[];
+    /** The article's address, which Copy link copies, at the end of the text and under On this page. */
+    shareUrl?: string;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog04Labels;
+}

package/dist/blog/Blog04/Blog04.types.d.ts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockLink } from "../../shared/shared.types.js";
+/** Who wrote the article. */
+export interface Blog04Author {
+    /** Their name, which also gives the avatar's initials. */
+    name: string;
+    /** A line under it: "Product lead". */
+    jobTitle?: ReactNode;
+    /** A photo URL; the initials show without one. */
+    avatar?: string;
+}
+/** A heading in the article, for On this page. */
+export interface Blog04Section {
+    /** The id of the heading in the article's text, which the link scrolls to. */
+    id: string;
+    /** The link's words, usually the heading's. */
+    title: ReactNode;
+}
+/** The words around the article that aren't content, in English unless you pass your own. */
+export interface Blog04Labels {
+    /** The heading over the list of sections, beside the text and in the fold above it. @default "On this page" */
+    contents?: string;
+    /** The tags' accessible name. @default "Topics" */
+    topics?: string;
+    /** The button that copies `shareUrl`. @default "Copy link" */
+    copyLink?: string;
+    /** What it says once it has. @default "Link copied" */
+    linkCopied?: string;
+}
+export interface Blog04Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A link back above the title, with an arrow: "All posts". */
+    backLink?: BlockLink;
+    /** The article's category, as a tag above the title: "Product". */
+    category?: ReactNode;
+    /** A word beside it: "Agents". */
+    topic?: ReactNode;
+    /** The article's title: the page's h1. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** Who wrote it. */
+    author?: Blog04Author;
+    /** When it was published, as people read it: "8 Oct 2026". */
+    date?: ReactNode;
+    /** The same date for machines, as in <time dateTime>: "2026-10-08". */
+    dateTime?: string;
+    /** How long it takes to read: "4 min read". */
+    readingTime?: ReactNode;
+    /** A wide image under the header, which fills a 12:5 frame (16:10 on phones): an `<img alt="">` or a drawing. */
+    cover?: ReactNode;
+    /**
+     * The text, at a readable width: `Text variant="prose"` paragraphs, `h2` headings (with the ids in `sections`), lists,
+     * a `blockquote`, a `CodeBlock`.
+     */
+    children: ReactNode;
+    /** The article's headings, listed in On this page beside the text (folded above it on smaller screens), the one being read marked. */
+    sections?: Blog04Section[];
+    /** Tags at the end of the text: "Agents", "Reviews". */
+    tags?: ReactNode[];
+    /** The article's address, which Copy link copies, at the end of the text and under On this page. */
+    shareUrl?: string;
+    /** Words that aren't content (field labels, names for screen readers, messages), in English unless you pass your own. */
+    labels?: Blog04Labels;
+}

package/dist/calls-to-action/Cta01/Cta01.d.cts

@@ -0,0 +1,3 @@
+import type { Cta01Props } from "./Cta01.types.cjs";
+/** A wide panel on a dot grid with a headline on the left and the buttons on the right. */
+export declare function Cta01({ title, description, primaryAction, secondaryAction, note, className, ...props }: Cta01Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta01/Cta01.d.ts

@@ -0,0 +1,3 @@
+import type { Cta01Props } from "./Cta01.types.js";
+/** A wide panel on a dot grid with a headline on the left and the buttons on the right. */
+export declare function Cta01({ title, description, primaryAction, secondaryAction, note, className, ...props }: Cta01Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta01/Cta01.types.d.cts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export interface Cta01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The main call to action, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second, lower-stakes action beside it. */
+    secondaryAction?: BlockAction;
+    /** A small line under the buttons, which can start with a 14px icon: "Most teams are set up in ten minutes." */
+    note?: ReactNode;
+}

package/dist/calls-to-action/Cta01/Cta01.types.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface Cta01Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** The main call to action, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second, lower-stakes action beside it. */
+    secondaryAction?: BlockAction;
+    /** A small line under the buttons, which can start with a 14px icon: "Most teams are set up in ten minutes." */
+    note?: ReactNode;
+}

package/dist/calls-to-action/Cta02/Cta02.d.cts

@@ -0,0 +1,3 @@
+import type { Cta02Props } from "./Cta02.types.cjs";
+/** A centred call to action on the brand colour, with white text, a white button and a few facts. */
+export declare function Cta02({ eyebrow, title, description, primaryAction, secondaryLink, facts, className, ...props }: Cta02Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta02/Cta02.d.ts

@@ -0,0 +1,3 @@
+import type { Cta02Props } from "./Cta02.types.js";
+/** A centred call to action on the brand colour, with white text, a white button and a few facts. */
+export declare function Cta02({ eyebrow, title, description, primaryAction, secondaryLink, facts, className, ...props }: Cta02Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta02/Cta02.types.d.cts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockLink } from "../../shared/shared.types.cjs";
+export interface Cta02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small pill above the title, drawn for the brand colour: "Ready when you are". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** A white button on the brand colour. */
+    primaryAction: BlockAction;
+    /** A text link beside it, with an arrow: "Talk to sales". */
+    secondaryLink?: BlockLink;
+    /** Short facts under the buttons, each with a tick: "No card needed". */
+    facts?: ReactNode[];
+}

package/dist/calls-to-action/Cta02/Cta02.types.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction, BlockLink } from "../../shared/shared.types.js";
+export interface Cta02Props extends Omit<HTMLAttributes<HTMLElement>, "title" | "children"> {
+    /** A small pill above the title, drawn for the brand colour: "Ready when you are". */
+    eyebrow?: ReactNode;
+    /** The section's heading. */
+    title: ReactNode;
+    /** A sentence or two under the title. */
+    description?: ReactNode;
+    /** A white button on the brand colour. */
+    primaryAction: BlockAction;
+    /** A text link beside it, with an arrow: "Talk to sales". */
+    secondaryLink?: BlockLink;
+    /** Short facts under the buttons, each with a tick: "No card needed". */
+    facts?: ReactNode[];
+}

package/dist/calls-to-action/Cta03/Cta03.d.cts

@@ -0,0 +1,3 @@
+import type { Cta03Props } from "./Cta03.types.cjs";
+/** Words, two buttons and a few points beside a picture. */
+export declare function Cta03({ eyebrow, title, description, primaryAction, secondaryAction, points, visual, className, ...props }: Cta03Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta03/Cta03.d.ts

@@ -0,0 +1,3 @@
+import type { Cta03Props } from "./Cta03.types.js";
+/** Words, two buttons and a few points beside a picture. */
+export declare function Cta03({ eyebrow, title, description, primaryAction, secondaryAction, points, visual, className, ...props }: Cta03Props): import("react").JSX.Element;

package/dist/calls-to-action/Cta03/Cta03.types.d.cts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.cjs";
+export interface Cta03Props 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 main call to action, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second, lower-stakes action beside it. */
+    secondaryAction?: BlockAction;
+    /** Short points under the buttons, each with a tick. */
+    points?: ReactNode[];
+    /** The picture beside the words (under them on phones), usually a screenshot. */
+    visual: ReactNode;
+}

package/dist/calls-to-action/Cta03/Cta03.types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { BlockAction } from "../../shared/shared.types.js";
+export interface Cta03Props 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 main call to action, as a primary pill button. */
+    primaryAction: BlockAction;
+    /** A second, lower-stakes action beside it. */
+    secondaryAction?: BlockAction;
+    /** Short points under the buttons, each with a tick. */
+    points?: ReactNode[];
+    /** The picture beside the words (under them on phones), usually a screenshot. */
+    visual: ReactNode;
+}