@fairgarden/design 0.1.0-0.canary.0

package/page/announcement-bar/AnnouncementBar.js

@@ -0,0 +1,215 @@
+'use client';
+import * as React from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../../foundations/ground';
+import { Icon, iconHost } from '../../foundations/icon';
+import { Link } from '../../actions/link';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './announcement-bar.module.css';
+/*
+ * Announcement Bar (§11.4): one short, authored site notice per page (a
+ * closure, a deadline, shipping terms, a policy change). An `aside`
+ * labelled "Announcement" holding a `p` with at most one link, an optional
+ * countdown in `time` and an optional dismiss Button. It is not a Toast.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: announcement-bar.module.css; CVA function `announcementBar`.
+ * - Axes: `kind` → bar | field → `bar`, `field` [D180]: a full-bleed
+ *   page-ground bar, or a full-container field; `voice` → standard | mono |
+ *   dual → `standard`, `mono`, `dual`; `record` → `record` (a notice of
+ *   record: prints); `ruled` → `ruled` (the required bottom rule: always
+ *   on with `kind: bar`, excluded with `kind: field`, whose --primary12
+ *   edge does that job); `primary`, `secondary` → scales module classes.
+ *   `interactive` is computed, never a prop: a bar holding a link or the
+ *   dismiss grows to the --fgd-size-hit minimum.
+ * - Compound variants: none.
+ * - Defaults: kind bar, voice standard, record false, ruled true; color
+ *   axes: none [D133].
+ * - Color fallback: inherits the bar's own preset (or the page ground when
+ *   the bar names none); on a preset bar `primary` and `secondary` override
+ *   its Ground's scales. Secondary drives only the link underline
+ *   (--role-accent) and its hover ink (--role-link-hover).
+ * - States: on the dismiss (a Base UI Button) `:hover` per §9.2 icon-only
+ *   (the glyph at the next tier's weight, never an added circle) [D181],
+ *   `:active` → the inverse pair, `:focus-visible` → the ring.
+ *   `data-disabled` is never set. Dismissal removes the element and is
+ *   remembered per viewer. The link is a §9.3 Link with its own states.
+ * - Parts: base, container, message, accent (the dual voice's serif
+ *   phrase), link, countdown, cell, unit, dismiss, fieldBar (the field
+ *   kind's Ground); the bottom `rule` is the ruled bar's own border.
+ * - Scope: with `kind: bar`, the root is a `kind="band"` Ground of a page
+ *   ground when `preset` is given (otherwise it inherits the page ground);
+ *   with `kind: field`, a `kind="field"` Ground of a field preset, inset to
+ *   the full width of --fgd-container-content, with its radius and its
+ *   --primary12 edge [D178, D180].
+ * - Container: none: it inherits its context and never reflows as a
+ *   module; the responsive rules are viewport rules [D163].
+ */
+export const announcementBar = cva(styles.base, {
+    variants: {
+        kind: {
+            bar: styles.bar,
+            field: styles.field,
+        },
+        voice: {
+            standard: styles.standard,
+            mono: styles.mono,
+            dual: styles.dual,
+        },
+        record: {
+            true: styles.record,
+        },
+        ruled: {
+            true: styles.ruled,
+        },
+        // Computed: a link or the dismiss raises the minimum height to --fgd-size-hit.
+        interactive: {
+            true: styles.interactive,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'bar',
+        voice: 'standard',
+        record: false,
+        ruled: true,
+    },
+});
+const STORAGE_PREFIX = 'fg-announcement-dismissed:';
+function readDismissed(key) {
+    if (!key)
+        return false;
+    try {
+        return window.localStorage.getItem(STORAGE_PREFIX + key) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+function writeDismissed(key) {
+    if (!key)
+        return;
+    try {
+        window.localStorage.setItem(STORAGE_PREFIX + key, '1');
+    }
+    catch {
+        // Storage may be unavailable (private window, blocked site data); the bar still goes.
+    }
+}
+function toDate(value) {
+    return value instanceof Date ? value : new Date(value);
+}
+const pad = (value) => String(value).padStart(2, '0');
+/** Remaining whole days, hours and minutes to `end`, or null once it has passed. */
+function remaining(end, now) {
+    const total = Math.floor((end.getTime() - now) / 60000);
+    if (total <= 0)
+        return null;
+    return {
+        days: Math.floor(total / 1440),
+        hours: Math.floor((total % 1440) / 60),
+        minutes: total % 60,
+    };
+}
+function Countdown({ countdown }) {
+    const { expired, locale = 'en-GB', units = ['d', 'h', 'min'] } = countdown;
+    const end = toDate(countdown.end);
+    // Server rendering cannot know "now": the digits fill in after mount.
+    const [now, setNow] = React.useState(null);
+    React.useEffect(() => {
+        setNow(Date.now());
+        // One update a minute: digits never flip or pulse, and the polite
+        // region announces at most once a minute.
+        const timer = window.setInterval(() => setNow(Date.now()), 60000);
+        return () => window.clearInterval(timer);
+    }, []);
+    // Formatted in the reader's time zone, so only once mounted (print comes later).
+    const endLabel = countdown.endLabel ??
+        (now == null
+            ? null
+            : `Ends ${new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short', year: 'numeric' }).format(end)}`);
+    const left = now == null ? undefined : remaining(end, now);
+    if (left === null) {
+        return React.createElement("span", { className: styles.countdown }, expired);
+    }
+    const cells = [
+        [left?.days, units[0]],
+        [left?.hours, units[1]],
+        [left?.minutes, units[2]],
+    ];
+    const spoken = left == null
+        ? ''
+        : `${left.days} ${units[0]}, ${left.hours} ${units[1]}, ${left.minutes} ${units[2]} left`;
+    return (React.createElement("time", { className: styles.countdown, dateTime: end.toISOString() },
+        React.createElement("span", { className: styles.cells, "aria-hidden": "true" }, cells.map(([value, unit]) => (React.createElement("span", { key: unit, className: styles.cellGroup },
+            React.createElement("span", { className: styles.cell }, value == null ? '––' : pad(value)),
+            React.createElement("span", { className: styles.unit }, unit))))),
+        React.createElement("span", { className: styles.visuallyHidden, "aria-live": "polite" }, spoken),
+        React.createElement("span", { className: styles.endDate }, endLabel)));
+}
+/**
+ * The announcement bar. Never sticky, never rotating, never truncated with
+ * an ellipsis; it scrolls away with the page. Hidden in print unless it is
+ * a `record`, whose countdown prints its end date.
+ */
+export function AnnouncementBar(props) {
+    const { kind, preset, ruled: _ruled, voice, record, link, countdown, dismissible, dismissLabel = 'Dismiss announcement', storageKey, onDismiss, primary, secondary, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const resolvedKind = kind ?? 'bar';
+    const [dismissed, setDismissed] = React.useState(false);
+    React.useEffect(() => {
+        if (readDismissed(storageKey))
+            setDismissed(true);
+    }, [storageKey]);
+    if (dismissed)
+        return null;
+    const dismiss = () => {
+        writeDismissed(storageKey);
+        setDismissed(true);
+        onDismiss?.();
+    };
+    const variants = {
+        kind: resolvedKind,
+        voice,
+        record,
+        ruled: resolvedKind === 'bar',
+        interactive: link != null || dismissible === true,
+        className,
+    };
+    const classes = announcementBar({ ...variants, primary, secondary });
+    const content = (React.createElement(React.Fragment, null,
+        React.createElement("p", { className: styles.message },
+            children,
+            link ? (React.createElement(React.Fragment, null,
+                ' ',
+                React.createElement(Link, { href: link.href, className: styles.link }, link.label))) : null),
+        countdown ? React.createElement(Countdown, { countdown: countdown }) : null,
+        dismissible ? (React.createElement(BaseButton, { className: `${styles.dismiss} ${iconHost}`, "aria-label": dismissLabel, onClick: dismiss },
+            React.createElement(Icon, { name: "close", weight: "interactive" }))) : null));
+    const aside = { ...rest, 'aria-label': rest['aria-label'] ?? 'Announcement' };
+    if (resolvedKind === 'field') {
+        return (React.createElement("aside", { ...aside, ...scope, className: classes },
+            React.createElement("div", { className: styles.container },
+                React.createElement(Ground, { kind: "field", preset: preset ?? 'forest', render: React.createElement("div", null), className: styles.fieldBar }, content))));
+    }
+    const inner = React.createElement("div", { className: styles.container }, content);
+    if (preset) {
+        return (React.createElement(Ground, { ...aside, kind: "band", preset: preset, 
+            // The color props override the preset on the Ground itself.
+            primary: primary ?? undefined, secondary: secondary ?? undefined, render: React.createElement("aside", null), className: announcementBar(variants) }, inner));
+    }
+    return (React.createElement("aside", { ...aside, ...scope, className: classes }, inner));
+}
+/**
+ * The dual voice's one serif caps phrase, set inside the message at the
+ * run's cap height. Use it once, with `voice="dual"`.
+ */
+export function AnnouncementBarAccent(props) {
+    const { className, ...rest } = props;
+    return React.createElement("span", { ...rest, className: className ? `${styles.accent} ${className}` : styles.accent });
+}
+//# sourceMappingURL=AnnouncementBar.js.map

package/page/announcement-bar/AnnouncementBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementBar.js","sourceRoot":"","sources":["../../src/page/announcement-bar/AnnouncementBar.tsx"],"names":[],"mappings":"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"}

package/page/announcement-bar/announcement-bar.module.css

@@ -0,0 +1,271 @@
+/*
+ * Announcement Bar (§11.4). CVA function `announcementBar`.
+ * Color roles (§11.4): the bar's preset ground (Ground paints it); field
+ * edge --role-edge (the field's --primary12, drawn by Ground); message
+ * --primary12; link: the §9.3 body link (--primary12, --role-accent
+ * underline, --role-link-hover on hover); countdown cells --role-rule
+ * edge with --primary12 digits; dismiss glyph --primary12, pressed the
+ * inverse pair; bottom rule --role-rule. Colors are role variables only;
+ * local custom properties carry dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+/* The voice is the bar's type role, inherited by the message and link. */
+.standard,
+.dual {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.mono {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.cell {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.endDate {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    --announcement-min: var(--fgd-size-bar-utility);
+
+    display: block;
+    color: var(--primary12);
+  }
+
+  /*
+   * One row inside the page margins: the message centered and growing, the
+   * countdown after it, the dismiss at the end; --size-px-2 vertical
+   * padding; 36 px tall for text alone, 44 px with a link or the dismiss.
+   */
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-px-2) var(--size-px-3);
+    box-sizing: content-box;
+    max-inline-size: var(--fgd-container-content);
+    margin-inline: auto;
+    padding-inline: var(--fgd-space-margin);
+  }
+
+  .message {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+    text-align: center;
+    overflow-wrap: break-word;
+  }
+
+  .link {
+    white-space: nowrap;
+  }
+
+  /* Countdown: boxed tabular digits, never flipping; each cell ≥ 2.5ch. */
+  .countdown {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--primary12);
+  }
+
+  .cells {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  .cellGroup {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--size-px-1);
+  }
+
+  .cell {
+    box-sizing: border-box;
+    min-inline-size: 2.5ch;
+    padding: 0 var(--size-px-1);
+    border: var(--border-size-1) solid var(--role-rule);
+    border-radius: var(--radius-1);
+    color: var(--primary12);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  .unit {
+    color: var(--primary12);
+  }
+
+  .endDate {
+    display: none;
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* The accent phrase stays in caps whatever its voice. */
+  .accent {
+    text-transform: uppercase;
+  }
+
+  /* Dismiss: the close glyph (inline tier) in a --fgd-size-hit target; no circle [D181]. */
+  .dismiss {
+    position: relative;
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
+    margin: 0;
+    /* The glyph, not its target, meets the container edge (from --lg-n-above, the container's own edge). */
+    margin-inline-end: calc((var(--fgd-size-hit) - var(--size-px-3)) / -2);
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-round);
+    background: none;
+    color: var(--primary12);
+    cursor: pointer;
+    appearance: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .dismiss {
+      transition-property: color, background-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+
+  /* ≤ 2 lines at base; one line from --md-n-above (authored short). */
+  @media (min-width: 768px) {
+    .message {
+      text-wrap: balance;
+    }
+  }
+}
+
+@layer variants {
+  /* Page-ground bar: --size-px-2 vertical padding, 36 / 44 px minimum. */
+  .bar .container {
+    box-sizing: border-box;
+    min-block-size: var(--announcement-min);
+    padding-block: var(--size-px-2);
+  }
+
+  /* The required bottom rule: --border-size-1, full-bleed, the bar's --role-rule [D179]. */
+  .ruled {
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /*
+   * Field bar [D180]: the strip keeps --size-px-2 of page ground above and
+   * below; the field spans the container with Ground's --radius-2-25 and
+   * --primary12 edge, and the row inside it.
+   */
+  .field .container {
+    padding-block: var(--size-px-2);
+  }
+
+  .fieldBar {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-px-2) var(--size-px-3);
+    box-sizing: border-box;
+    min-block-size: var(--announcement-min);
+    padding-block: var(--size-px-2);
+    padding-inline: var(--size-px-3);
+  }
+
+  .interactive {
+    --announcement-min: var(--fgd-size-hit);
+  }
+
+  /* Mono: type-data set in caps for dated or technical notices ("CLOSED 24–26 DEC"). */
+  .mono {
+    font-variant-numeric: tabular-nums;
+    text-transform: uppercase;
+  }
+
+  /*
+   * Dual: the caps run keeps its UI face; the one accent phrase switches to
+   * the text serif, untracked, at the run's size (cap heights within ≈ 5%).
+   */
+  .dual .accent {
+    font-family: var(--fgd-font-text);
+    font-weight: var(--font-weight-6);
+    letter-spacing: 0;
+  }
+}
+
+@layer states {
+  .dismiss:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-1 * var(--border-size-2));
+  }
+
+  /* Hover: the glyph's next tier weight comes from iconHost (§9.2 icon-only); forced colors add an outline [D181]. */
+  @media (forced-colors: active) {
+    .dismiss:hover {
+      outline: var(--border-size-2) solid currentColor;
+      outline-offset: calc(-1 * var(--border-size-2));
+    }
+  }
+
+  /* Pressed: the inverse pair. */
+  .dismiss:active {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Hidden by default (§11.4). */
+    .base {
+      display: none;
+    }
+
+    /*
+     * A notice of record prints once, black on white between two 0.75 pt
+     * rules; its link prints its short URL (the Link's own print rule).
+     */
+    .record {
+      display: block;
+      margin-block-end: var(--size-px-3);
+      border-block: var(--border-size-1) solid var(--primary12);
+      break-inside: avoid;
+    }
+
+    .fieldBar {
+      border: 0;
+      padding-inline: 0;
+    }
+
+    .dismiss,
+    .cells {
+      display: none;
+    }
+
+    /* A countdown prints its end date ("Ends 30 Sept 2026"). */
+    .endDate {
+      display: inline;
+    }
+  }
+}

package/page/announcement-bar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AnnouncementBar';
+//# sourceMappingURL=index.d.ts.map

package/page/announcement-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/page/announcement-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/page/announcement-bar/index.js

@@ -0,0 +1,2 @@
+export * from './AnnouncementBar';
+//# sourceMappingURL=index.js.map

package/page/announcement-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/page/announcement-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA"}

package/page/cta-block/CTABlock.d.ts

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const ctaBlock: (props?: ({
+    kind?: "framed" | "sunburst" | "mission" | "saturated" | "deep" | null | undefined;
+    patterned?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CTABlockVariants = VariantProps<typeof ctaBlock>;
+/** An action: title-case label, authored [D160]; a destination prints as "Label (short URL)". */
+export interface CTAAction {
+    /** Verb plus object, title case: "Find a Garden". */
+    label: string;
+    /** Where it goes; the Button renders an anchor. */
+    href?: string;
+    /** Called on click (with or without `href`). */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+/** The saturated campaign field's presets [D177, D180]. */
+export type CTASaturatedField = 'amber' | 'leaf' | 'clay' | 'royal' | 'brick';
+/** The deep field's presets: `forest`, or `royal` (the companion of tide and heather) [D177]. */
+export type CTADeepField = 'forest' | 'royal';
+interface CTABlockCommonProps extends Omit<React.ComponentPropsWithRef<'section'>, 'children'> {
+    /** The headline, `type-h2`, centered, ≤ 45ch and ≤ 4 lines. It names the section. */
+    headline: React.ReactNode;
+    /** The headline's level. Default `2`. */
+    headingLevel?: 2 | 3;
+    /**
+     * The kicker (`type-kicker`, `--role-heading`), starting ≈ 15% of the
+     * column in while the headline centers.
+     */
+    kicker?: React.ReactNode;
+    /**
+     * The trail before the kicker, in `--role-accent`, ≤ `--size-px-12` wide.
+     * Omitted, the `sunburst` kind draws `ornament-trail` (`<OrnamentTrail />`,
+     * the short tail) and the other kinds none; pass your own `aria-hidden`
+     * SVG in `currentColor`, or `null` for none. It prints at 0.75 pt.
+     */
+    trail?: React.ReactNode;
+    /** An optional support line, `--primary12`. */
+    support?: React.ReactNode;
+    /** The primary action: the `solid` pill at `--size-px-8` with a leading arrow. */
+    action: CTAAction;
+    /** The optional outline twin, same height. */
+    secondaryAction?: CTAAction;
+    /**
+     * Decoration behind the content, in `--role-tint`, clipped by the block
+     * (the `sunburst` kind's reaches `--size-px-7-5` below it). Omitted, the
+     * `sunburst` kind draws `pattern-sunburst` from an origin `--size-px-7-5`
+     * below the block's bottom edge, and the other kinds none; pass your own
+     * art in `currentColor` (centred on the bottom edge), or `null` for none.
+     * A mission band's `pattern-speckle` belongs on its band's Ground, which
+     * is full-bleed. Dropped in print; the block reads completely without it.
+     * Sunburst ≤ 1 per page.
+     */
+    decor?: React.ReactNode;
+    /**
+     * `patterned`: the headline takes `--primary12`, since only `--primary12`
+     * text sits on a pattern. Always on for `sunburst` and `mission`. Default
+     * `false`.
+     */
+    patterned?: boolean;
+    /**
+     * Primary Radix scale: text, rules, marks and the outline twin. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: CTABlockVariants['primary'];
+    /** Secondary Radix scale: kicker and unpatterned headline, trail, blob discs. Never defaulted. */
+    secondary?: CTABlockVariants['secondary'];
+}
+interface CTABlockPageProps extends CTABlockCommonProps {
+    /**
+     * `sunburst` (default): trail kicker, centered serif headline, arrow pill,
+     * the sunburst rising behind (white or the page ground, just before the
+     * footer). `mission`: blob mount, centered H2, body, pill. `framed`: the
+     * crop-mark box (technical pages). `saturated`: the campaign field, one
+     * ink. `deep`: a `forest` or `royal` field with the pill and its outline
+     * twin.
+     */
+    kind?: 'sunburst' | 'mission' | 'framed';
+    field?: never;
+    /**
+     * `mission` only: the mark on the blob mount (`ornament-blob`, an
+     * `OrnamentBlob`): a logo, block icon or numeral in `currentColor`, which
+     * takes the front disc's `--secondary-contrast`, about 57 px wide. The
+     * discs are `--secondary9` over `--secondary7`; once per page, never on
+     * fields. In print the discs drop and the mark prints black.
+     */
+    mount?: React.ReactNode;
+}
+interface CTABlockSaturatedProps extends CTABlockCommonProps {
+    kind: 'saturated';
+    /** The campaign field: `amber` (default), `leaf`, `clay`, `royal` (if no other royal card) or `brick`. */
+    field?: CTASaturatedField;
+    mount?: never;
+}
+interface CTABlockDeepProps extends CTABlockCommonProps {
+    kind: 'deep';
+    /** The deep field: `forest` (default) or `royal`. */
+    field?: CTADeepField;
+    mount?: never;
+}
+/**
+ * Props for CTABlock: `section` props, the kind (with its field for the
+ * field kinds), the headline and its companions, the actions, the
+ * decoration and the color axes.
+ */
+export type CTABlockProps = CTABlockPageProps | CTABlockSaturatedProps | CTABlockDeepProps;
+/**
+ * The CTA block. At most one per page, the page's ornament peak; never a
+ * form (use Newsletter), a repeated mid-page promo or a floating bar. In
+ * print the ornament drops, the action prints "Label (short URL)" and a
+ * CTA field prints its edge as a black frame.
+ */
+export declare function CTABlock(props: CTABlockProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=CTABlock.d.ts.map

package/page/cta-block/CTABlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CTABlock.d.ts","sourceRoot":"","sources":["../../src/page/cta-block/CTABlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA+CjE,eAAO,MAAM,QAAQ;;;;;8EAoBnB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAErD,iGAAiG;AACjG,MAAM,WAAW,SAAS;IACxB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;CACzD;AAED,2DAA2D;AAC3D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;AAE7E,iGAAiG;AACjG,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE7C,UAAU,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC;IAC5F,qFAAqF;IACrF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,kFAAkF;IAClF,MAAM,EAAE,SAAS,CAAA;IACjB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,SAAS,CAAA;IAC3B;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,kGAAkG;IAClG,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CAC1C;AAED,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAA;IACxC,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAED,UAAU,sBAAuB,SAAQ,mBAAmB;IAC1D,IAAI,EAAE,WAAW,CAAA;IACjB,0GAA0G;IAC1G,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,UAAU,iBAAkB,SAAQ,mBAAmB;IACrD,IAAI,EAAE,MAAM,CAAA;IACZ,qDAAqD;IACrD,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,sBAAsB,GAAG,iBAAiB,CAAA;AA8B1F;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAkH5C"}