@clay-ds/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1101 @@
+import { ButtonHTMLAttributes } from 'react';
+import * as Flags from 'country-flag-icons/react/3x2';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { ImgHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { MouseEventHandler } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SVGAttributes } from 'react';
+
+export declare const ActionCard: ForwardRefExoticComponent<ActionCardProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ActionCardIntegration {
+    src: string;
+    alt?: string;
+    background?: string;
+}
+
+export declare interface ActionCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    variant?: ActionCardVariant;
+    title: string;
+    description?: string;
+    ctaLabel?: string;
+    onCtaClick?: MouseEventHandler<HTMLButtonElement>;
+    media?: ReactNode;
+    avatar?: ReactNode;
+    avatarBackground?: string;
+    rating?: string;
+    integrations?: ActionCardIntegration[];
+    tags?: string[];
+    onDismiss?: () => void;
+    onAdd?: () => void;
+    bulletItems?: string[];
+}
+
+export declare type ActionCardVariant = 'media-top' | 'integration' | 'agent';
+
+export declare const ANALYST_LOGOS: {
+    readonly gartner: string;
+    readonly forrester: string;
+};
+
+export declare interface BulletItem {
+    icon: ReactNode;
+    /** Bullet heading. 8–18 chars. */
+    title: string;
+    /** Bullet body copy. 28–84 chars. 1–2 sentences. */
+    description: string;
+}
+
+export declare type BulletsLayout = 'icons' | 'cardsRight';
+
+export declare const BulletsSection: ForwardRefExoticComponent<BulletsSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface BulletsSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    layout?: BulletsLayout;
+    /** Eyebrow label above heading. 7–17 chars. */
+    miniTitle?: string;
+    /** Section heading. 9–20 chars. Supports \n for line breaks. */
+    heading: string;
+    /** Section description. 28–84 chars. 1–2 sentences. */
+    description?: string;
+    items: BulletItem[];
+    columns?: 2 | 3;
+    action?: ReactNode;
+    containerWidth?: ContainerWidth;
+}
+
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare type ButtonColor = 'black' | 'iris' | 'white' | 'grey';
+
+export declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    size?: ButtonSize;
+    buttonStyle?: ButtonStyle;
+    color?: ButtonColor;
+    /** @deprecated Use `buttonStyle` + `color` */
+    variant?: ButtonVariant;
+    showArrow?: boolean;
+    icon?: ReactNode;
+    iconPosition?: 'start' | 'end';
+    forceHover?: boolean;
+    forceActive?: boolean;
+    children?: ReactNode;
+}
+
+export declare type ButtonSize = 'large' | 'regular' | 'mini' | 'extraMini';
+
+export declare type ButtonStyle = 'primary' | 'secondary' | 'link' | 'icon';
+
+/** @deprecated Use `buttonStyle` + `color` instead. */
+export declare type ButtonVariant = 'brand' | 'neutral' | 'white' | 'default' | 'link-neutral';
+
+export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: string;
+    children: ReactNode;
+    size?: CardSize;
+    radius?: CardRadius;
+}
+
+export declare type CardRadius = 'xl' | 'lg' | 'md' | 'sm';
+
+export declare type CardSize = 'hero' | 'feature' | 'block' | 'tile';
+
+export declare const CardsSection: ForwardRefExoticComponent<CardsSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface CardsSectionCard {
+    /** Card eyebrow label. 10–23 chars. */
+    miniTitle?: string;
+    /** Card heading. 11–26 chars. */
+    heading: string;
+    /** Card description. 26–77 chars. 1–2 sentences. */
+    description?: string;
+    actions?: ReactNode;
+    media?: ReactNode;
+}
+
+export declare type CardsSectionLayout = 'side-by-side' | 'horizontal-reveal' | 'grid' | 'value-cards' | 'one-media' | 'icon-with-link' | 'media-top';
+
+export declare interface CardsSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    layout?: CardsSectionLayout;
+    /** Section-level tagline. 10–23 chars. */
+    tagline?: string;
+    /** Section-level heading. 18–42 chars. */
+    sectionHeading?: string;
+    /** Section-level description. 24–71 chars. 1–2 sentences. */
+    sectionDescription?: string;
+    /** Cards for side-by-side layout (supports 1–5 cards) */
+    cards?: CardsSectionCard[];
+    /** Cards for horizontal-reveal layout */
+    revealCards?: RevealCard[];
+    /** Cards for value-cards layout (3-column grid with icon, heading, description, + button) */
+    valueCards?: HoverFlipCard_2[];
+    /** Feature cards for one-media layout (2 text+icon cards beside a media slot) */
+    oneMediaCards?: OneMediaCard[];
+    /** Media slot for one-media layout */
+    oneMedia?: ReactNode;
+    /** Cards for icon-with-link layout (4 cards with icon, heading, description, link) */
+    iconLinkCards?: IconLinkCard[];
+    /** Slot for navigation (e.g. SliderDots) shown on mobile for horizontal-reveal */
+    navigation?: ReactNode;
+    /** Enable seamless left-to-right marquee animation (horizontal-reveal only) */
+    autoScroll?: boolean;
+    /** Duration in seconds for one full scroll cycle (default: 30) */
+    autoScrollDuration?: number;
+    containerWidth?: ContainerWidth;
+}
+
+declare interface CaseStudyCard {
+    logo?: ReactNode;
+    ctaLabel?: string;
+    ctaHref?: string;
+    onCtaClick?: () => void;
+    media?: ReactNode;
+    stat: string;
+    statLabel: string;
+    category?: string;
+}
+
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: string;
+    sublabel?: string;
+    variant?: CheckboxVariant;
+    icon?: ReactNode;
+}
+
+export declare type CheckboxVariant = 'simple' | 'border' | 'square' | 'icon';
+
+export declare const COMPLIANCE_LOGOS: {
+    readonly gdpr: string;
+    readonly soc2: string;
+    readonly iso27001: string;
+    readonly hipaa: string;
+};
+
+export declare interface ComplianceLogo {
+    src: string;
+    label: string;
+}
+
+export declare interface ContactBadgeItem {
+    src: string;
+    label: string;
+}
+
+export declare interface ContactBulletItem {
+    icon: ReactNode;
+    text: string;
+}
+
+export declare interface ContactLogoItem {
+    src: string;
+    name: string;
+}
+
+export declare const ContactSection: ForwardRefExoticComponent<ContactSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface ContactSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onSubmit'> {
+    /** Form section heading. 11–26 chars. */
+    heading?: string;
+    /** Form section description. 24–72 chars. 1–2 sentences. */
+    description?: string;
+    bullets?: ContactBulletItem[];
+    badges?: ContactBadgeItem[];
+    ratingIcon?: ReactNode;
+    ratingValue?: string;
+    ratingLabel?: string;
+    logos?: ContactLogoItem[];
+    formTitle?: string;
+    fields?: FormField[];
+    submitLabel?: string;
+    privacyNode?: ReactNode;
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    containerWidth?: ContainerWidth;
+}
+
+export declare const Container: ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    width?: ContainerWidth;
+}
+
+export declare type ContainerWidth = 'default' | 'narrow' | 'wide' | 'full';
+
+export declare type CountryCode = keyof typeof Flags;
+
+export declare const CountryFlag: ForwardRefExoticComponent<CountryFlagProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface CountryFlagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    code: CountryCode;
+    size?: FlagSize;
+}
+
+export declare type CtaLayout = 'centered' | 'floating-card';
+
+export declare const CtaSection: ForwardRefExoticComponent<CtaSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface CtaSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    layout?: CtaLayout;
+    /** CTA heading. 24–56 chars. Direct and action-oriented. */
+    heading: string;
+    /** CTA supporting copy. 33–98 chars. 1–2 sentences. */
+    description?: string;
+    actions?: ReactNode;
+    containerWidth?: ContainerWidth;
+}
+
+export declare const CustomerLogo: ForwardRefExoticComponent<CustomerLogoProps & RefAttributes<HTMLSpanElement>>;
+
+export declare type CustomerLogoPlacement = 'web' | 'marketing';
+
+export declare interface CustomerLogoProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    src: string;
+    name: string;
+    placement?: CustomerLogoPlacement;
+    surface?: CustomerLogoSurface;
+    height?: number;
+}
+
+export declare const CustomerLogoSection: ForwardRefExoticComponent<CustomerLogoSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface CustomerLogoSectionLogo {
+    name: string;
+    srcBlack: string;
+    srcColored?: string;
+}
+
+export declare interface CustomerLogoSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Logo bar heading. 20–47 chars. */
+    heading?: string;
+    logos: CustomerLogoSectionLogo[];
+    colorMode?: LogoColorMode;
+    logoHeight?: number;
+    /** 'auto' animates only when logos overflow the container, true/false forces the state */
+    animate?: boolean | 'auto';
+}
+
+export declare type CustomerLogoSurface = 'light' | 'dark';
+
+export declare const CustomerStoryCard: ForwardRefExoticComponent<CustomerStoryCardProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CustomerStoryCardProps extends HTMLAttributes<HTMLDivElement> {
+    type?: CustomerStoryCardType;
+    stat?: string;
+    statLabel?: string;
+    category?: string;
+    quote?: string;
+    authorName?: string;
+    authorRole?: string;
+    media?: ReactNode;
+    avatarMedia?: ReactNode;
+    logo?: ReactNode;
+}
+
+export declare type CustomerStoryCardType = 'stats' | 'quote' | 'quote-bordered' | 'quote-with-picture';
+
+export declare interface FaqItem {
+    /** FAQ question. 20–48 chars. */
+    question: string;
+    /** FAQ answer. 72–216 chars. 2–4 sentences. */
+    answer: string;
+}
+
+export declare type FaqLayout = 'side-by-side' | 'centered';
+
+export declare const FaqSection: ForwardRefExoticComponent<FaqSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface FaqSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    layout?: FaqLayout;
+    /** Section heading. 13–31 chars. */
+    heading?: string;
+    items: FaqItem[];
+    defaultOpenIndices?: number[];
+    containerWidth?: ContainerWidth;
+}
+
+export declare interface FeatureItem {
+    /** Feature heading. 16–37 chars. */
+    heading: string;
+    /** Feature description. 104–312 chars. 1–3 sentences. */
+    description: string;
+    media?: ReactNode;
+    /** Category label above heading. 6–13 chars. */
+    topic?: string;
+    icon?: ReactNode;
+    bullets?: string[];
+    cta?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
+    cta2?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
+}
+
+export declare type FeaturesLayout = 'side-by-side' | 'side-by-side-lines' | 'tabs-background' | 'tabs-stroke' | 'side-by-side-bullets' | 'tab-cards-carousel' | 'stacked-rows' | 'horizontal-media-top' | 'stacked-media-left' | 'horizontal-icons' | 'horizontal-cards' | 'tabs-media-right' | 'list-right-media' | 'content-carousel' | 'stacked-cards-carousel' | 'accordion-media-right' | 'numbered-accordion' | 'split-icon-list' | 'steps-numbered';
+
+export declare const FeaturesSection: ForwardRefExoticComponent<FeaturesSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface FeaturesSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    layout?: FeaturesLayout;
+    items: FeatureItem[];
+    defaultActiveIndex?: number;
+    /** Section-level heading. 17–41 chars. */
+    sectionHeading?: string;
+    /** Section-level topic label. 11–25 chars. */
+    sectionTopic?: string;
+    /** Section-level description. 35–105 chars. 1–2 sentences. */
+    sectionDescription?: string;
+    sectionCta?: {
+        label: string;
+        onClick?: () => void;
+    };
+    sectionCta2?: {
+        label: string;
+        onClick?: () => void;
+    };
+    sectionMedia?: ReactNode;
+    containerWidth?: ContainerWidth;
+}
+
+export declare type FlagSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export declare const FOOTER_ASSETS: {
+    readonly mondayLogo: string;
+};
+
+/**
+ * Canonical footer content for all pages.
+ *
+ * Spread onto FooterSection and override only `logo` per brand:
+ *
+ *   import { FooterSection, FOOTER_DEFAULTS } from '@clay-ds/react'
+ *   <FooterSection {...FOOTER_DEFAULTS} logo={{ src: pageLogo, alt: 'Brand Name', href: '/' }} />
+ *
+ * This is the single source of truth for footer links, badges, social icons,
+ * legal links, and all other static content. Never duplicate or override this
+ * content in individual pages — only `logo` changes per brand.
+ */
+export declare const FOOTER_DEFAULTS: Omit<FooterSectionProps, 'logo'>;
+
+export declare interface FooterBadge {
+    src: string;
+    alt: string;
+    href?: string;
+    width?: number;
+    height?: number;
+}
+
+export declare interface FooterColumn {
+    heading?: string;
+    links: FooterLink[];
+}
+
+export declare interface FooterLink {
+    label: string;
+    href: string;
+}
+
+export declare interface FooterNavColumn {
+    heading?: string;
+    links: FooterNavLink[];
+    groups?: FooterNavGroup[];
+}
+
+export declare interface FooterNavGroup {
+    heading?: string;
+    links: FooterNavLink[];
+}
+
+export declare interface FooterNavLink {
+    label: string;
+    href?: string;
+    icon?: ReactNode;
+}
+
+export declare const FooterSection: ForwardRefExoticComponent<FooterSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface FooterSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    logo?: {
+        src: string;
+        alt: string;
+        href?: string;
+    };
+    columns: FooterNavColumn[];
+    socialLinks?: FooterSocialLink[];
+    complianceBadges?: FooterBadge[];
+    appStoreBadges?: FooterBadge[];
+    legalLinks?: {
+        label: string;
+        href?: string;
+    }[];
+    copyright?: string;
+    languageSelector?: ReactNode;
+    accessibilityLabel?: string;
+    accessibilityHref?: string;
+    accessibilityIcon?: ReactNode;
+}
+
+export declare interface FooterSocialLink {
+    label: string;
+    href: string;
+    icon: ReactNode;
+}
+
+export declare interface FormField {
+    name: string;
+    placeholder: string;
+    type?: 'text' | 'email' | 'tel' | 'select' | 'textarea';
+    options?: string[];
+    required?: boolean;
+}
+
+export declare const G2_BADGES: {
+    readonly bestResults: string;
+    readonly mostImplementable: string;
+    readonly momentumLeader: string;
+    readonly usersLoveUs: string;
+    readonly leader: string;
+    readonly usersMostLikelyToRecommend: string;
+    readonly bestRelationship: string;
+};
+
+export declare type G2BadgeKey = keyof typeof G2_BADGES;
+
+export declare const G2Icon: ForwardRefExoticComponent<G2IconProps & RefAttributes<SVGSVGElement>>;
+
+export declare interface G2IconProps extends SVGAttributes<SVGSVGElement> {
+    size?: number;
+}
+
+export declare const Grid: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    columns?: 1 | 2 | 3 | 4 | 6 | 12;
+}
+
+export declare type HeaderLayout = 'centered-image' | 'centered-strips' | 'default' | 'floating-card' | 'floating-left' | 'floating-scattered' | 'left-center-image' | 'split' | 'split-full-image' | 'split-mosaic' | 'split-search' | 'text-only';
+
+export declare const HeaderSection: ForwardRefExoticComponent<HeaderSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface HeaderSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    layout?: HeaderLayout;
+    /** Main hero headline. 18–43 chars. */
+    heading: string;
+    /** Supporting body copy. 104–312 chars. 1–3 sentences. */
+    description?: string;
+    actions?: ReactNode;
+    /** Caption below actions (e.g. "No credit card needed"). 26–61 chars. */
+    actionCaption?: string;
+    options?: ReactNode;
+    optionsTitle?: string;
+    logos?: ReactNode;
+    media?: ReactNode;
+    containerWidth?: ContainerWidth;
+}
+
+export declare const HoverFlipCard: ForwardRefExoticComponent<HoverFlipCardProps & RefAttributes<HTMLDivElement>>;
+
+declare interface HoverFlipCard_2 {
+    heading: string;
+    description?: string;
+    /** Icon slot — use Shapes component or any ReactNode */
+    icon?: ReactNode;
+    /** Optional click handler for the + button */
+    onClick?: () => void;
+}
+
+export declare interface HoverFlipCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Card heading — typically "Value no. 01" or a short benefit statement */
+    heading: string;
+    /** Optional body text beneath the heading */
+    description?: string;
+    /**
+     * Shape displayed above the heading.
+     * Pass a ShapeName for a specific shape, or `'random'` to pick one
+     * randomly from the square-shape set on first render (stable across re-renders).
+     * Defaults to `'random'`.
+     */
+    shape?: HoverFlipCardShape;
+    /**
+     * CSS color string for the shape fill.
+     * Defaults to white (visible on the grey-200 card background).
+     */
+    shapeColor?: string;
+    /** Click handler for the bottom-right + button */
+    onClick?: () => void;
+}
+
+export declare type HoverFlipCardShape = ShapeName | 'random';
+
+/**
+ * Renders a single-color line icon from the Clay icon registry. SVGs are injected
+ * inline so `currentColor` recoloring works; size and color are token/CSS-driven.
+ */
+export declare const Icon: ForwardRefExoticComponent<IconProps & RefAttributes<HTMLSpanElement>>;
+
+export declare type IconCategory = "Alerts & feedback" | "Arrows" | "Charts" | "Communication" | "Development" | "Editor" | "Education" | "Files" | "Finance & eCommerce" | "General" | "Images" | "Layout" | "Maps & travel" | "Media & devices" | "Security" | "Shapes" | "Time" | "Users" | "Weather";
+
+declare interface IconLinkCard {
+    heading: string;
+    description?: string;
+    /** Icon slot — 48px container, use ReactNode */
+    icon?: ReactNode;
+    /** Label for the bottom link (defaults to "Learn more") */
+    linkLabel?: string;
+    onClick?: () => void;
+}
+
+export declare type IconName = "activity" | "airplay" | "alarm-clock" | "alarm-clock-off" | "alert-circle" | "alert-hexagon" | "alert-octagon" | "alert-square" | "alert-triangle" | "align-bottom-01" | "align-bottom-02" | "align-center" | "align-horizontal-centre-01" | "align-horizontal-centre-02" | "align-justify" | "align-left" | "align-left-01" | "align-left-02" | "align-right" | "align-right-01" | "align-right-02" | "align-top-01" | "align-top-02" | "align-vertical-center-01" | "align-vertical-center-02" | "anchor" | "annotation" | "annotation-alert" | "annotation-check" | "annotation-dots" | "annotation-heart" | "annotation-info" | "annotation-x" | "announcement-01" | "archive" | "arrow-circle-broken-down" | "arrow-circle-broken-down-left" | "arrow-circle-broken-down-right" | "arrow-circle-broken-left" | "arrow-circle-broken-right" | "arrow-circle-broken-up" | "arrow-circle-broken-up-left" | "arrow-circle-broken-up-right" | "arrow-circle-down" | "arrow-circle-down-left" | "arrow-circle-down-right" | "arrow-circle-left" | "arrow-circle-right" | "arrow-circle-up" | "arrow-circle-up-left" | "arrow-circle-up-right" | "arrow-down" | "arrow-down-left" | "arrow-down-right" | "arrow-left" | "arrow-narrow-down" | "arrow-narrow-down-left" | "arrow-narrow-down-right" | "arrow-narrow-left" | "arrow-narrow-right" | "arrow-narrow-up" | "arrow-narrow-up-left" | "arrow-narrow-up-right" | "arrow-right" | "arrow-square-down" | "arrow-square-down-left" | "arrow-square-down-right" | "arrow-square-left" | "arrow-square-right" | "arrow-square-up" | "arrow-square-up-left" | "arrow-square-up-right" | "arrow-up" | "arrow-up-left" | "arrow-up-right" | "arrows-right" | "arrows-up" | "asterisk-01" | "at-sign" | "atom-01" | "attachment-01" | "attachment-02" | "award-01" | "award-02" | "award-03" | "award-04" | "award-05" | "backpack" | "bank" | "bar-chart-04" | "bar-chart-10" | "bar-chart-square-01" | "bar-chart-square-02" | "battery-charging-02" | "battery-empty" | "battery-full" | "battery-low" | "bell-02" | "bell-03" | "bell-off-01" | "bell-off-02" | "bell-off-03" | "bell-plus" | "bell-ringing-01" | "bell-ringing-03" | "bell-ringing-04" | "bezier-curve-01" | "bluetooth-connect" | "bold-01" | "book-open-01" | "bookmark" | "bookmark-check" | "box" | "brackets" | "brackets-check" | "brackets-ellipses" | "brackets-minus" | "brackets-plus" | "brackets-slash" | "brackets-x" | "briefcase-01" | "browser" | "brush-01" | "brush-03" | "building-05" | "building-07" | "building-08" | "calculator" | "calendar" | "calendar-check-01" | "calendar-date" | "calendar-heart-01" | "calendar-minus-01" | "calendar-plus-02" | "camera-01" | "camera-lens" | "camera-off" | "camera-plus" | "check" | "check-circle" | "check-done-01" | "check-heart" | "check-square" | "check-verified-02" | "chevron-down" | "chevron-down-double" | "chevron-left" | "chevron-left-double" | "chevron-right" | "chevron-right-double" | "chevron-selector-horizontal" | "chevron-selector-vertical" | "chevron-up" | "chevron-up-double" | "chrome-cast" | "circle" | "circle-cut" | "clapperboard" | "clipboard" | "clipboard-check" | "clipboard-minus" | "clipboard-plus" | "clipboard-x" | "clock" | "clock-stopwatch" | "cloud-01" | "cloud-blank-01" | "cloud-off" | "code-01" | "code-02" | "code-browser" | "code-circle-01" | "code-circle-02" | "code-circle-03" | "code-snippet-01" | "code-snippet-02" | "code-square-01" | "code-square-02" | "codepen" | "coins-01" | "coins-02" | "coins-hand" | "coins-stacked-03" | "colors" | "colors-1" | "columns-01" | "columns-02" | "columns-03" | "command" | "compass-03" | "container" | "contrast-03" | "copy-03" | "copy-07" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "cpu-chip-01" | "credit-card-02" | "credit-card-check" | "credit-card-lock" | "crop-01" | "cube-01" | "currency-dollar" | "currency-dollar-circle" | "cursor-02" | "cursor-box" | "cursor-click-01" | "database-01" | "database-03" | "dataflow-01" | "dataflow-02" | "dataflow-03" | "dataflow-04" | "delete" | "diamond-01" | "diamond-02" | "distribute-spacing-horizontal" | "distribute-spacing-vertical" | "divide-01" | "divide-03" | "divider" | "dotpoints-01" | "dots-grid" | "dots-horizontal" | "dots-vertical" | "download-01" | "download-02" | "download-03" | "download-cloud-01" | "download-cloud-02" | "drop" | "dropper" | "edit-02" | "edit-03" | "edit-05" | "equal" | "eraser" | "expand-01" | "expand-02" | "expand-03" | "expand-04" | "expand-05" | "expand-06" | "eye" | "eye-off" | "face-content" | "face-frown" | "face-happy" | "face-neutral" | "face-sad" | "face-smile" | "face-wink" | "feather" | "figma" | "file-02" | "file-03" | "file-04" | "file-05" | "file-06" | "file-07" | "file-attachment-03" | "file-check-02" | "file-check-03" | "file-code-01" | "file-code-02" | "file-download-01" | "file-download-02" | "file-download-03" | "file-heart-01" | "file-lock-02" | "file-plus-02" | "file-search-02" | "file-x-03" | "filter-funnel-02" | "flag-01" | "flash" | "flash-off" | "flex-align-bottom" | "flex-align-left" | "flex-align-right" | "flex-align-top" | "flip-backward" | "flip-forward" | "folder" | "folder-check" | "folder-code" | "folder-plus" | "gift-01" | "git-branch-01" | "glasses-01" | "globe-01" | "google-chrome" | "graduation-hat-02" | "grid-01" | "grid-02" | "grid-03" | "grid-dots-blank" | "grid-dots-bottom" | "grid-dots-horizontal-center" | "grid-dots-left" | "grid-dots-outer" | "grid-dots-right" | "grid-dots-top" | "grid-dots-vertical-center" | "hand" | "hash-01" | "heading-01" | "headphones-01" | "heart" | "heart-circle" | "heart-hand" | "heart-square" | "hearts" | "help-circle" | "home-02" | "home-03" | "home-05" | "hourglass-01" | "image-01" | "image-indent-right" | "image-user" | "inbox-02" | "infinity" | "info-circle" | "intersect-circle" | "intersect-square" | "italic-01" | "italic-02" | "italic-square" | "key-01" | "keyboard-01" | "keyboard-02" | "laptop-01" | "layer-single" | "layers-three-01" | "layers-three-02" | "layers-two-01" | "layers-two-02" | "layout-alt-01" | "layout-alt-02" | "layout-alt-03" | "layout-alt-04" | "layout-bottom" | "layout-grid-01" | "layout-grid-02" | "layout-left" | "layout-right" | "layout-top" | "left-indent-01" | "left-indent-02" | "letter-spacing-01" | "letter-spacing-02" | "life-buoy-02" | "lightbulb-02" | "lightning-01" | "line-chart-down-02" | "line-chart-up-01" | "line-chart-up-02" | "line-chart-up-03" | "line-height" | "link-01" | "link-02" | "link-03" | "link-broken-01" | "link-external-01" | "list" | "loading-02" | "lock-01" | "lock-02" | "log-in-01" | "log-out-02" | "magic-wand-02" | "mail-01" | "mail-02" | "mail-03" | "mail-04" | "map-01" | "mark" | "marker-pin-01" | "marker-pin-06" | "maximize-01" | "maximize-02" | "menu-01" | "menu-04" | "message-chat-square" | "message-circle-02" | "message-dots-circle" | "microphone-01" | "microphone-off-01" | "minimize-01" | "minimize-02" | "minus" | "minus-circle" | "minus-square" | "monitor-01" | "moon-01" | "mouse" | "move" | "music-note-01" | "navigation-pointer-01" | "navigation-pointer-02" | "notification-message" | "octagon" | "package" | "paint-pour" | "palette" | "paperclip" | "paragraph-spacing" | "paragraph-wrap" | "passcode-lock" | "pause-circle" | "pause-square" | "pen-tool-02" | "pen-tool-minus" | "pen-tool-plus" | "pencil-01" | "pentagon" | "percent-01" | "percent-03" | "phone" | "phone-01" | "phone-call-01" | "pie-chart-01" | "pie-chart-02" | "pin-01" | "pin-02" | "placeholder" | "plane" | "play" | "play-circle" | "play-square" | "plus" | "plus-circle" | "plus-square" | "podcast" | "power-01" | "presentation-chart-03" | "printer" | "puzzle-piece-01" | "qr-code-01" | "receipt" | "receipt-check" | "recording-01" | "reflect-02" | "refresh-ccw-01" | "refresh-ccw-02" | "refresh-ccw-03" | "refresh-ccw-04" | "refresh-ccw-05" | "refresh-cw-01" | "refresh-cw-02" | "refresh-cw-03" | "refresh-cw-04" | "refresh-cw-05" | "repeat-01" | "repeat-04" | "reverse-left" | "reverse-right" | "right-indent-01" | "right-indent-02" | "rocket-02" | "roller-brush" | "rows-01" | "rows-02" | "rows-03" | "sale-01" | "sale-02" | "save-01" | "scales-01" | "scales-02" | "scan" | "scissors-02" | "search-lg" | "search-md" | "search-sm" | "send-01" | "server-01" | "settings-01" | "settings-04" | "share-01" | "share-03" | "share-06" | "share-07" | "shield-01" | "shield-03" | "shield-dollar" | "shield-off" | "shield-plus" | "shield-tick" | "shield-zap" | "shopping-bag-02" | "shopping-cart-01" | "shuffle-01" | "signal-01" | "signal-02" | "skip-back" | "skip-forward" | "slash-circle-01" | "slash-circle-02" | "slash-divider" | "slash-octagon" | "sliders-04" | "snowflake-02" | "spacing-height-01" | "spacing-height-02" | "spacing-width-01" | "spacing-width-02" | "speedometer-03" | "square" | "star-01" | "star-06" | "stars-01" | "stars-03" | "sticker-circle" | "sticker-square" | "stop-circle" | "sun" | "sun-setting-01" | "sun-setting-02" | "switch-horizontal-01" | "switch-horizontal-02" | "switch-vertical-01" | "switch-vertical-02" | "table" | "tag-02" | "target-02" | "target-03" | "target-04" | "target-05" | "terminal-browser" | "thermometer-02" | "thermometer-cold" | "thermometer-warm" | "thumbs-down" | "thumbs-up" | "toggle-03-left" | "toggle-03-right" | "tool-01" | "transform" | "translate-01" | "trash-01" | "trash-03" | "trend-down-01" | "trend-down-02" | "trend-up-01" | "trend-up-02" | "triangle" | "trophy-01" | "tv-02" | "type-01" | "umbrella-01" | "umbrella-03" | "underline-01" | "upload-01" | "upload-02" | "upload-03" | "upload-cloud-01" | "upload-cloud-02" | "user-01" | "user-check-01" | "user-circle" | "user-edit" | "user-plus-01" | "user-square" | "users-01" | "users-check" | "users-edit" | "users-minus" | "users-plus" | "users-x" | "video-recorder" | "video-recorder-off" | "volume-max" | "volume-min" | "volume-minus" | "volume-plus" | "volume-x" | "wallet-02" | "waves" | "wifi" | "x" | "x-circle" | "x-close" | "x-square" | "youtube" | "zap" | "zap-fast" | "zoom-in" | "zoom-out";
+
+export declare interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color' | 'children'> {
+    /** Icon name from the registry. See docs/llm/ICONS.md or the Foundation/Icons story. */
+    name: IconName;
+    /** `sm` (16px), `md` (20px), `lg` (24px), or an explicit pixel number. Default `md`. */
+    size?: IconSize | number;
+    /** Override color (CSS value). Defaults to `currentColor` via the icon token. */
+    color?: string;
+    /** Accessible label. When set, the icon is exposed as `img`; otherwise it is `aria-hidden`. */
+    title?: string;
+}
+
+export declare type IconSize = 'sm' | 'md' | 'lg';
+
+export declare const ImageCard: ForwardRefExoticComponent<ImageCardProps & RefAttributes<HTMLDivElement>>;
+
+export declare type ImageCardLayout = 'card' | 'media';
+
+export declare type ImageCardMediaAccent = 'default' | 'neutral' | 'brand' | 'brandSecondary' | 'positive' | 'positiveSecondary';
+
+export declare type ImageCardMediaImageProps = Omit<MediaSlotProps, 'src' | 'alt' | 'type' | 'fit' | 'className' | 'children'>;
+
+export declare interface ImageCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    layout?: ImageCardLayout;
+    title?: string;
+    children?: ReactNode;
+    mediaAccent?: ImageCardMediaAccent;
+    size?: CardSize;
+    radius?: CardRadius;
+    media?: ReactNode;
+    src?: string;
+    alt?: string;
+    placeholderTint?: MediaPlaceholderTint_2;
+    fit?: MediaSlotFit;
+    mediaClassName?: string;
+    mediaImageProps?: ImageCardMediaImageProps;
+}
+
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: boolean;
+}
+
+export declare const IntegrationCard: ForwardRefExoticComponent<IntegrationCardProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface IntegrationCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    name: string;
+    src: string;
+    variant?: IntegrationCardVariant;
+    logoSize?: number;
+}
+
+export declare type IntegrationCardVariant = 'background' | 'none';
+
+export declare interface IntegrationItem {
+    name: string;
+    src: string;
+}
+
+export declare const IntegrationLogo: ForwardRefExoticComponent<IntegrationLogoProps & RefAttributes<HTMLSpanElement>>;
+
+export declare type IntegrationLogoPlacement = 'foundation' | 'web' | 'platform';
+
+export declare interface IntegrationLogoProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    src: string;
+    name: string;
+    placement?: IntegrationLogoPlacement;
+    size?: number;
+}
+
+export declare const Integrations: ForwardRefExoticComponent<IntegrationsProps & RefAttributes<HTMLElement>>;
+
+export declare type IntegrationsLayout = 'grid' | 'card-grid' | 'logo-strip';
+
+export declare interface IntegrationsProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    layout?: IntegrationsLayout;
+    heading?: string;
+    description?: string;
+    integrations?: IntegrationItem[];
+    statValue?: string;
+    statLabel?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    onCtaClick?: () => void;
+    actions?: ReactNode;
+    /** card-grid only: animate the rows as a slow horizontal marquee */
+    animate?: boolean;
+}
+
+export declare type LogoColorMode = 'black' | 'colored' | 'random';
+
+export declare const MarketingCta: ForwardRefExoticComponent<MarketingCtaProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface MarketingCtaProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: string;
+    subtitle?: string;
+    children?: ReactNode;
+    variant?: 'default' | 'dark';
+    background?: 'brand' | 'none';
+    headingSize?: 'default' | 'large';
+}
+
+export declare type MediaPlaceholderTint = 0 | 1 | 2 | 3;
+
+declare type MediaPlaceholderTint_2 = 0 | 1 | 2 | 3;
+
+/** @deprecated Use MediaSlot directly */
+export declare const MediaPrimitive: ForwardRefExoticComponent<MediaPrimitiveProps & RefAttributes<HTMLImageElement>>;
+
+export declare interface MediaPrimitiveProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> {
+    src?: string;
+    alt?: string;
+    placeholderTint?: MediaPlaceholderTint;
+    fit?: 'contain' | 'cover';
+}
+
+export declare const MediaSlot: ForwardRefExoticComponent<MediaSlotProps & RefAttributes<HTMLDivElement>>;
+
+export declare type MediaSlotAspect = '1/1' | '4/3' | '3/2' | '16/9' | '21/9' | '9/16' | '3/4';
+
+export declare type MediaSlotFit = 'contain' | 'cover' | 'fill';
+
+export declare interface MediaSlotProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Content type — determines what renders inside the slot */
+    type?: 'image' | 'video' | 'color' | 'custom';
+    /** Image/video source URL */
+    src?: string;
+    /** Alt text for images; used as aria-label for color slots */
+    alt?: string;
+    /** Object-fit for image/video content */
+    fit?: MediaSlotFit;
+    /** Poster frame URL for video */
+    poster?: string;
+    /** Autoplay video (muted by default for autoplay) */
+    autoPlay?: boolean;
+    /** Loop video playback */
+    loop?: boolean;
+    /** Show native video controls */
+    controls?: boolean;
+    /** Background color — CSS value or token reference */
+    color?: string;
+    /** Show placeholder icon (grey background with image icon) */
+    placeholder?: boolean;
+    /** Slot content for type="custom" or overlay content on other types */
+    children?: ReactNode;
+    /** Corner radius */
+    radius?: MediaSlotRadius;
+    /** Aspect ratio — CSS aspect-ratio value or preset */
+    aspectRatio?: MediaSlotAspect | string;
+    /** Explicit width (CSS value) */
+    width?: string | number;
+    /** Explicit height (CSS value) */
+    height?: string | number;
+}
+
+export declare type MediaSlotRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare type NavbarColorScheme = 'purple' | 'black';
+
+declare interface NavbarDropdownColumn {
+    heading?: string;
+    items: NavbarDropdownItem[];
+    footer?: ReactNode;
+}
+
+declare interface NavbarDropdownItem {
+    label: string;
+    href?: string;
+    description?: string;
+    icon?: ReactNode;
+    isHeading?: boolean;
+}
+
+export declare type NavbarLayout = 'full' | 'short' | 'sub';
+
+export declare const NavbarMenu: ForwardRefExoticComponent<NavbarMenuProps & RefAttributes<HTMLElement>>;
+
+export declare interface NavbarMenuProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    layout?: NavbarLayout;
+    colorScheme?: NavbarColorScheme;
+    logoSrc?: string;
+    logoHref?: string;
+    logoAriaLabel?: string;
+    navItems?: NavbarNavItem[];
+    loginHref?: string;
+    pricingHref?: string;
+    showLogin?: boolean;
+    showPricing?: boolean;
+    showProductSwitcher?: boolean;
+    productSwitcherHref?: string;
+    contactSalesHref?: string;
+    actions?: ReactNode;
+    drawerFooter?: ReactNode;
+}
+
+export declare interface NavbarNavItem {
+    label: string;
+    href?: string;
+    active?: boolean;
+    showChevron?: boolean;
+    dropdownColumns?: NavbarDropdownColumn[];
+}
+
+export declare interface NumberItem {
+    /** Stat value (e.g. "225K+", "99.9%", "3x"). 3–6 chars. */
+    value: string;
+    /** Stat label. 9–20 chars. Short phrase, not a sentence. */
+    label: string;
+}
+
+export declare type NumbersLayout = 'bento' | 'stack-bento';
+
+export declare const NumbersSection: ForwardRefExoticComponent<NumbersSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface NumbersSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    layout?: NumbersLayout;
+    /** Section heading. 13–30 chars. */
+    heading: string;
+    items: NumberItem[];
+    containerWidth?: ContainerWidth;
+}
+
+declare interface OneMediaCard {
+    heading: string;
+    description?: string;
+    /** Icon slot — use Shapes or any ReactNode, rendered above the heading */
+    icon?: ReactNode;
+}
+
+export declare const ProductLogo: ForwardRefExoticComponent<ProductLogoProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface ProductLogoProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    src: string;
+    name: string;
+    height?: number;
+}
+
+export declare interface RevealCard {
+    name: string;
+    media?: ReactNode;
+    bulletPoints?: string[];
+    tags?: string[];
+}
+
+export declare const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface SectionProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+}
+
+/** Ordered list of shape names for iteration */
+export declare const SHAPE_NAMES: ShapeName[];
+
+export declare const SHAPE_PATHS: Record<string, ShapeDefinition>;
+
+/**
+ * Shape path definitions — foundation-level primitives.
+ * Each shape is defined by its SVG path `d` attribute and viewBox dimensions.
+ * Source: Figma Web Library → Shapes component (node 886:1648)
+ *
+ * Usage:
+ * - Color fill: render as inline SVG with currentColor
+ * - Image fill: use as clip-path on an image
+ * - Container: use as clip-path on a div with children
+ */
+export declare interface ShapeDefinition {
+    /** SVG path `d` attribute */
+    path: string;
+    /** viewBox width */
+    width: number;
+    /** viewBox height */
+    height: number;
+    /** Optional clip-rule */
+    clipRule?: 'evenodd';
+    /** Aspect ratio category */
+    aspect: 'square' | 'wide';
+}
+
+export declare type ShapeMode = 'color' | 'image' | 'container';
+
+/** All available shape names */
+export declare type ShapeName = keyof typeof SHAPE_PATHS;
+
+export declare const Shapes: ForwardRefExoticComponent<ShapesProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ShapesProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Which shape to render */
+    shape?: ShapeName;
+    /**
+     * Render mode:
+     * - `color`: filled SVG shape using `color` prop or currentColor (default)
+     * - `image`: image clipped to the shape via clip-path
+     * - `container`: children clipped to the shape via clip-path
+     */
+    mode?: ShapeMode;
+    /** Fill color (for mode="color"). Defaults to currentColor. */
+    color?: string;
+    /** Image URL (for mode="image") */
+    src?: string;
+    /** Alt text for the image (mode="image") */
+    alt?: string;
+    /** Children (for mode="container") */
+    children?: ReactNode;
+    /** Stretch SVG to fill container (ignores aspect ratio). Useful when the container is non-square. */
+    stretch?: boolean;
+}
+
+export declare const SiteFooter: ForwardRefExoticComponent<SiteFooterProps & RefAttributes<HTMLElement>>;
+
+export declare interface SiteFooterProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    logo?: {
+        src: string;
+        alt: string;
+        href?: string;
+    };
+    columns: FooterColumn[];
+    bottomLeft?: ReactNode;
+    bottomRight?: ReactNode;
+    legalLinks?: FooterLink[];
+    copyright?: string;
+}
+
+export declare const SliderArrow: ForwardRefExoticComponent<SliderArrowProps & RefAttributes<HTMLButtonElement>>;
+
+export declare type SliderArrowColor = 'light' | 'dark';
+
+export declare type SliderArrowDirection = 'left' | 'right';
+
+export declare interface SliderArrowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    color?: SliderArrowColor;
+    direction?: SliderArrowDirection;
+}
+
+export declare const SliderDots: ForwardRefExoticComponent<SliderDotsProps & RefAttributes<HTMLDivElement>>;
+
+export declare type SliderDotsColor = 'light' | 'dark';
+
+export declare interface SliderDotsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    count: number;
+    activeIndex?: number;
+    color?: SliderDotsColor;
+    onDotClick?: (index: number) => void;
+}
+
+/** Square shapes only */
+export declare const SQUARE_SHAPES: string[];
+
+export declare function Tab({ value, children, className, ...rest }: TabProps): JSX.Element;
+
+export declare const TabList: ForwardRefExoticComponent<TabListProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    scrollable?: boolean;
+    align?: 'start' | 'center';
+}
+
+export declare function TabPanel({ value, children, className, ...rest }: TabPanelProps): JSX.Element;
+
+export declare interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    children: ReactNode;
+}
+
+export declare interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'value'> {
+    value: string;
+    children: ReactNode;
+}
+
+export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
+
+export declare type TabsCapsuleStyle = 'fill' | 'stroke';
+
+export declare type TabsIndicator = 'neutral' | 'brand';
+
+export declare interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+    defaultValue: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+    indicator?: TabsIndicator;
+    variant?: TabsVariant;
+    capsuleStyle?: TabsCapsuleStyle;
+}
+
+export declare const TabsShellMuted: ForwardRefExoticComponent<TabsShellMutedProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface TabsShellMutedProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+
+export declare const TabsShellStroke: ForwardRefExoticComponent<TabsShellStrokeProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface TabsShellStrokeProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+
+declare type TabsVariant = 'underline' | 'capsule';
+
+export declare const Tag: ForwardRefExoticComponent<TagProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    children: React.ReactNode;
+    variant?: TagVariant;
+    icon?: React.ReactNode;
+    showAddIcon?: boolean;
+    dropdown?: boolean;
+    clickable?: boolean;
+}
+
+export declare type TagVariant = 'background' | 'dot' | 'icon';
+
+export declare interface TestimonialCard {
+    logo?: ReactNode;
+    stars?: number;
+    stat?: string;
+    statLabel?: string;
+    /** Customer quote. 57–171 chars. Include quotation marks. */
+    quote: string;
+    /** Author full name. 6–14 chars. */
+    authorName: string;
+    /** Author title and company. 11–26 chars. */
+    authorRole: string;
+    authorImage?: string;
+    media?: ReactNode;
+    ctaLabel?: string;
+    ctaHref?: string;
+    onCtaClick?: () => void;
+}
+
+export declare interface TestimonialCarouselCard {
+    type: 'stat' | 'quote';
+    category?: string;
+    stat?: string;
+    statLabel?: string;
+    quote?: string;
+    authorName?: string;
+    authorRole?: string;
+    media?: ReactNode;
+    logo?: ReactNode;
+}
+
+export declare type TestimonialsLayout = 'carousel-with-stat' | 'mixed-stat-and-quote' | 'centered-single' | 'carousel-split-media-left' | 'carousel-case-study' | 'single-card-stat-quote' | 'quote-cards' | 'quote-cards-with-media';
+
+export declare const TestimonialsSection: ForwardRefExoticComponent<TestimonialsSectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface TestimonialsSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    layout?: TestimonialsLayout;
+    /** Section heading. 11–26 chars. */
+    heading?: string;
+    /** Section description. 26–77 chars. 1–2 sentences. */
+    description?: string;
+    /** Eyebrow label above heading. 8–19 chars. */
+    miniTitle?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    onCtaClick?: () => void;
+    cards?: TestimonialCard[];
+    carouselCards?: TestimonialCarouselCard[];
+    caseStudyCards?: CaseStudyCard[];
+    defaultActiveIndex?: number;
+    containerWidth?: ContainerWidth;
+}
+
+export declare const Toggle: ForwardRefExoticComponent<ToggleProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: string;
+}
+
+export declare const TrustBadge: ForwardRefExoticComponent<TrustBadgeProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface TrustBadgeItem {
+    src: string;
+    label: string;
+    size?: 'regular' | 'large';
+}
+
+export declare interface TrustBadgeProps extends HTMLAttributes<HTMLDivElement> {
+    src: string;
+    label: string;
+    size?: 'regular' | 'large';
+}
+
+/** @deprecated Use `<TrustSection layout="bento" />` */
+export declare const TrustBentoSection: ForwardRefExoticComponent<TrustSectionProps & RefAttributes<HTMLElement>>;
+
+/** @deprecated Use `TrustSectionProps` */
+export declare type TrustBentoSectionProps = TrustSectionProps;
+
+export declare const TrustSection: ForwardRefExoticComponent<TrustSectionProps & RefAttributes<HTMLElement>>;
+
+export declare type TrustSectionLayout = 'badges' | 'bento';
+
+export declare interface TrustSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Layout variant. `'badges'` shows a rating bar + badge grid. `'bento'` shows a security card + stat cards grid. */
+    layout?: TrustSectionLayout;
+    heading?: string;
+    ratingValue?: string;
+    ratingOut?: number;
+    ratingLabel?: string;
+    ratingIcon?: ReactNode;
+    /** Required for `layout="badges"` */
+    badges?: TrustBadgeItem[];
+    ctaLabel?: string;
+    ctaHref?: string;
+    onCtaClick?: () => void;
+    /** Eyebrow label. (`layout="bento"` only) */
+    topicLabel?: string;
+    /** Security card title. (`layout="bento"` only) */
+    securityTitle?: string;
+    /** Security card description. (`layout="bento"` only) */
+    securityDescription?: string;
+    securityLinkLabel?: string;
+    securityLinkHref?: string;
+    complianceLogos?: ComplianceLogo[];
+    statCards?: TrustStatCard[];
+}
+
+export declare interface TrustStatCard {
+    topLabel: string;
+    stat: string;
+    description: string;
+    linkLabel?: string;
+    linkHref?: string;
+    logo?: ReactNode;
+}
+
+export declare const WebLayout: ForwardRefExoticComponent<WebLayoutProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface WebLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+
+/** Wide shapes only */
+export declare const WIDE_SHAPES: string[];
+
+export { }