stackable-components 1.0.0

package/dist/components/FeatureBenefit/FeatureBenefitRenderer.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type FeatureBenefitVariant = 'strip' | 'cards' | 'grid' | 'dark' | 'circle' | 'image' | 'outline' | 'colored';
+export interface FeatureBenefitFeature {
+    title?: string;
+    description?: string;
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    icon?: string | {
+        url?: string;
+    };
+}
+export interface FeatureBenefitRendererProps {
+    variant?: FeatureBenefitVariant | string;
+    eyebrow?: string;
+    heading?: string;
+    subheading?: string;
+    features?: FeatureBenefitFeature[];
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    image?: string | {
+        url?: string;
+    };
+    icon_color?: string;
+    background?: string;
+    className?: string;
+}
+export declare function FeatureBenefitRenderer({ variant, className, ...props }: FeatureBenefitRendererProps): React.JSX.Element;
+export default FeatureBenefitRenderer;

package/dist/components/FeatureBenefit/FeatureBenefitStrip.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface FeatureBenefitStripItem {
+    title?: string;
+    description?: string;
+    icon?: string;
+}
+export interface FeatureBenefitStripProps {
+    items?: FeatureBenefitStripItem[];
+    icon_color?: string;
+    divider_color?: string;
+    background_color?: string;
+    className?: string;
+}
+export declare function FeatureBenefitStrip({ items, icon_color, divider_color, background_color, className, }: FeatureBenefitStripProps): React.JSX.Element;
+export default FeatureBenefitStrip;

package/dist/components/FeatureBenefit/FeatureBenefitWithImage.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export type BenefitWithImageIconPos = 'left' | 'top' | 'center' | 'right';
+export type BenefitWithImageAlign = 'left' | 'center' | 'right';
+export interface FeatureBenefitWithImageItem {
+    title?: string;
+    description?: string;
+    icon?: string;
+}
+export interface FeatureBenefitWithImageProps {
+    eyebrow?: string;
+    heading?: string;
+    subheading?: string;
+    heading_alignment?: BenefitWithImageAlign | string;
+    image?: string;
+    /** left: [img|heading|grid]  right: [heading|grid|img]  center: [heading|img|grid] */
+    image_position?: 'left' | 'right' | 'center' | string;
+    /** Icon position within each benefit item */
+    item_icon_position?: BenefitWithImageIconPos | string;
+    items?: FeatureBenefitWithImageItem[];
+    icon_color?: StackableColorValue | string;
+    background_color?: StackableColorValue | string;
+    text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function FeatureBenefitWithImage({ eyebrow, heading, subheading, heading_alignment, image, image_position, item_icon_position, items, icon_color, background_color, text_color, className, }: FeatureBenefitWithImageProps): React.JSX.Element;
+export default FeatureBenefitWithImage;

package/dist/components/FeatureBenefit/StandardBenefit.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export type StandardBenefitIconPos = 'left' | 'right' | 'top' | 'center';
+export type StandardBenefitLayout = 'plain' | 'card';
+export type StandardBenefitAlign = 'left' | 'center' | 'right';
+export interface StandardBenefitItem {
+    title?: string;
+    description?: string;
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    icon?: string | {
+        url?: string;
+    };
+}
+export interface StandardBenefitProps {
+    heading?: string;
+    subheading?: string;
+    heading_alignment?: StandardBenefitAlign | string;
+    icon_position?: StandardBenefitIconPos | string;
+    /** Alignment of icon + text within each item column (applies when icon_position is top or center) */
+    item_alignment?: StandardBenefitAlign | string;
+    layout?: StandardBenefitLayout | string;
+    background_color?: StackableColorValue;
+    icon_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    items?: StandardBenefitItem[];
+    className?: string;
+}
+export declare function StandardBenefit({ heading, subheading, heading_alignment, icon_position, item_alignment, layout, background_color, icon_color, text_color, items: itemsProp, className, }: StandardBenefitProps): React.JSX.Element;
+export default StandardBenefit;

package/dist/components/FeatureBenefit/index.d.ts

@@ -0,0 +1,12 @@
+export { FeatureBenefitStrip } from './FeatureBenefitStrip';
+export type { FeatureBenefitStripProps, FeatureBenefitStripItem } from './FeatureBenefitStrip';
+export { FeatureBenefit } from './FeatureBenefit';
+export type { FeatureBenefitProps, FeatureBenefitItem } from './FeatureBenefit';
+export { FeatureBenefitDark } from './FeatureBenefitDark';
+export type { FeatureBenefitDarkProps, FeatureBenefitDarkItem } from './FeatureBenefitDark';
+export { FeatureBenefitWithImage } from './FeatureBenefitWithImage';
+export type { FeatureBenefitWithImageProps, FeatureBenefitWithImageItem, BenefitWithImageIconPos, BenefitWithImageAlign } from './FeatureBenefitWithImage';
+export { FeatureBenefitRenderer } from './FeatureBenefitRenderer';
+export type { FeatureBenefitRendererProps, FeatureBenefitFeature, FeatureBenefitVariant } from './FeatureBenefitRenderer';
+export { StandardBenefit } from './StandardBenefit';
+export type { StandardBenefitProps, StandardBenefitItem, StandardBenefitIconPos, StandardBenefitLayout, StandardBenefitAlign } from './StandardBenefit';

package/dist/components/FeatureComparison/FeatureComparisonCards.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface FeatureComparisonProduct {
+    name?: string;
+    price?: string;
+    image?: string;
+    tag?: string;
+    badge?: string;
+    specs?: string[];
+    score?: number;
+}
+export interface FeatureComparisonCategory {
+    label?: string;
+    /** One value per product, in product order. */
+    values?: string[];
+}
+export interface FeatureComparisonCardsProps {
+    heading?: string;
+    description?: string;
+    products?: FeatureComparisonProduct[];
+    categories?: FeatureComparisonCategory[];
+    background_color?: StackableColorValue;
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function FeatureComparisonCards({ heading, description, products: productsProp, categories: categoriesProp, background_color, accent_color, className, }: FeatureComparisonCardsProps): React.JSX.Element;
+export default FeatureComparisonCards;

package/dist/components/FeatureComparison/FeatureComparisonTable.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface FeatureComparisonPlan {
+    name?: string;
+    price_monthly?: string;
+    price_annually?: string;
+    price_suffix?: string;
+    cta_label?: string;
+    cta_url?: string;
+    is_featured?: boolean;
+    featured_label?: string;
+}
+export interface FeatureComparisonRow {
+    label?: string;
+    tooltip?: string;
+    /** One value per plan, in plan order. "yes"/"true" and "no"/"false" render as check/cross icons; anything else renders as text (e.g. "100 uses", "Unlimited"). */
+    values?: string[];
+}
+export interface FeatureComparisonGroup {
+    group_name?: string;
+    rows?: FeatureComparisonRow[];
+}
+export interface FeatureComparisonTableProps {
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    show_billing_toggle?: boolean;
+    background_color?: StackableColorValue;
+    accent_color?: StackableColorValue;
+    plans?: FeatureComparisonPlan[];
+    groups?: FeatureComparisonGroup[];
+    className?: string;
+}
+export declare function FeatureComparisonTable({ eyebrow, heading, description, show_billing_toggle, background_color, accent_color, plans: plansProp, groups: groupsProp, className, }: FeatureComparisonTableProps): React.JSX.Element;
+export default FeatureComparisonTable;

package/dist/components/FeatureComparison/FeatureComparisonVs.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface FeatureComparisonVsColumn {
+    name?: string;
+    tagline?: string;
+    logo?: string;
+    highlighted?: boolean;
+}
+export interface FeatureComparisonVsCell {
+    /** "yes" | "no" — anything else falls back to "yes" when text is present, "no" otherwise. */
+    status?: string;
+    text?: string;
+}
+export interface FeatureComparisonVsRow {
+    label?: string;
+    icon?: string;
+    badge?: string;
+    ours?: FeatureComparisonVsCell;
+    competitor?: FeatureComparisonVsCell;
+}
+export interface FeatureComparisonVsProps {
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    ours?: FeatureComparisonVsColumn;
+    competitor?: FeatureComparisonVsColumn;
+    rows?: FeatureComparisonVsRow[];
+    cta_label?: string;
+    cta_url?: string;
+    background_color?: StackableColorValue;
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function FeatureComparisonVs({ eyebrow, heading, description, ours: oursProp, competitor: competitorProp, rows: rowsProp, cta_label, cta_url, background_color, accent_color, className, }: FeatureComparisonVsProps): React.JSX.Element;
+export default FeatureComparisonVs;

package/dist/components/FeatureComparison/index.d.ts

@@ -0,0 +1,6 @@
+export { FeatureComparisonTable } from './FeatureComparisonTable';
+export type { FeatureComparisonTableProps, FeatureComparisonPlan, FeatureComparisonRow, FeatureComparisonGroup } from './FeatureComparisonTable';
+export { FeatureComparisonVs } from './FeatureComparisonVs';
+export type { FeatureComparisonVsProps, FeatureComparisonVsColumn, FeatureComparisonVsCell, FeatureComparisonVsRow } from './FeatureComparisonVs';
+export { FeatureComparisonCards } from './FeatureComparisonCards';
+export type { FeatureComparisonCardsProps, FeatureComparisonProduct, FeatureComparisonCategory } from './FeatureComparisonCards';

package/dist/components/FeatureShowcase/StickyCardStack.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface StickyCardStackLink {
+    title?: string;
+    url?: string;
+}
+export interface StickyCardStackCard {
+    badge_text?: string;
+    card_title?: string;
+    description?: string;
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    link?: StickyCardStackLink;
+    /** Per-card surface colour. Falls back to the section's card colour. */
+    background_color?: StackableColorValue;
+}
+export interface StickyCardStackProps {
+    eyebrow_text?: string;
+    heading?: string;
+    subheading?: string;
+    cards?: StickyCardStackCard[];
+    /** Shrinks each card slightly as the next one covers it, for a stacked-paper
+     *  sense of depth. Off for anyone with `prefers-reduced-motion`. */
+    animate_scale?: boolean;
+    background_color?: StackableColorValue;
+    /** Default surface for cards that don't set their own `background_color`. */
+    card_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function StickyCardStack({ eyebrow_text, heading, subheading, cards, animate_scale, background_color, card_color, text_color, accent_color, className, }: StickyCardStackProps): React.JSX.Element | null;
+export default StickyCardStack;

package/dist/components/FeatureShowcase/StickyScrollFeature.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface StickyScrollFeatureItem {
+    title?: string;
+    description?: string;
+    badge_text?: string;
+    /** Asset URL, or a Contentstack asset object — both are accepted. Image or video; detected from the file itself. */
+    media?: string | {
+        url?: string;
+        content_type?: string;
+    };
+    media_alt?: string;
+}
+export interface StickyScrollFeatureProps {
+    eyebrow_text?: string;
+    heading?: string;
+    subheading?: string;
+    /** Which side the pinned media panel sits on; text sections always sit opposite it. */
+    media_position?: 'left' | 'right' | string;
+    items?: StickyScrollFeatureItem[];
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function StickyScrollFeature({ eyebrow_text, heading, subheading, media_position, items, background_color, text_color, accent_color, className, }: StickyScrollFeatureProps): React.JSX.Element;
+export default StickyScrollFeature;

package/dist/components/FeatureShowcase/index.d.ts

@@ -0,0 +1,2 @@
+export { StickyScrollFeature } from './StickyScrollFeature';
+export type { StickyScrollFeatureProps, StickyScrollFeatureItem } from './StickyScrollFeature';

package/dist/components/Footers/FooterMultiColumn.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface FooterColumnLink {
+    label: string;
+    url?: string;
+}
+export interface FooterColumn {
+    title: string;
+    links: FooterColumnLink[];
+}
+export interface FooterMultiColumnSocialLink {
+    name: string;
+    url?: string;
+}
+export interface FooterMultiColumnProps {
+    logo?: string | null;
+    columns?: FooterColumn[];
+    social_links?: FooterMultiColumnSocialLink[];
+    copyright_text?: string;
+    bottom_section_alignment?: 'left' | 'center' | 'right' | string;
+    className?: string;
+}
+export declare function FooterMultiColumn({ logo, columns, social_links, copyright_text, bottom_section_alignment, className, }: FooterMultiColumnProps): React.JSX.Element;
+export default FooterMultiColumn;

package/dist/components/Footers/FooterSimple.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface FooterLink {
+    label?: string;
+    url?: string;
+}
+export interface FooterSocialLink {
+    platform: string;
+    url?: string;
+    icon?: string;
+}
+export interface FooterSimpleProps {
+    className?: string;
+    links?: FooterLink[];
+    social_links?: FooterSocialLink[];
+    copyright_text?: string;
+}
+export declare function FooterSimple({ className, links, social_links, copyright_text, }: FooterSimpleProps): React.JSX.Element;
+export default FooterSimple;

package/dist/components/Footers/index.d.ts

@@ -0,0 +1,2 @@
+export { FooterSimple } from './FooterSimple';
+export { FooterMultiColumn } from './FooterMultiColumn';

package/dist/components/Forms/ContactForm.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ContactFormProps {
+    form_title?: string;
+    submit_button_text?: string;
+    className?: string;
+}
+export declare function ContactForm({ form_title, submit_button_text, className, }: ContactFormProps): React.JSX.Element;
+export default ContactForm;

package/dist/components/Forms/ContactFormSplit.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Native Contentstack link field: `{ title, href }`. */
+export interface ContactFormSplitLink {
+    title?: string;
+    href?: string;
+}
+export interface ContactFormSplitField {
+    label?: string;
+    /** Used as the input's `name`/`id`; falls back to a slug of the label. */
+    field_name?: string;
+    type?: 'text' | 'email' | 'tel' | 'textarea' | string;
+    /** `Half` sits two-per-row on wide panels; `Full` always spans. */
+    width?: 'Half' | 'Full' | string;
+    placeholder?: string;
+    required?: boolean;
+}
+export interface ContactFormSplitProps {
+    logo?: string | {
+        url?: string;
+    };
+    logo_text?: string;
+    panel_heading?: string;
+    panel_subheading?: string;
+    panel_description?: string;
+    panel_cta?: ContactFormSplitLink;
+    panel_image?: string | {
+        url?: string;
+    };
+    panel_image_alt?: string;
+    /** Decorative chevron under the panel heading, as in the reference. */
+    show_scroll_indicator?: boolean;
+    form_heading?: string;
+    form_description?: string;
+    fields?: ContactFormSplitField[];
+    submit_label?: string;
+    /** Shown in place of the form once submitted. */
+    success_message?: string;
+    /** Which side the form sits on. */
+    form_position?: 'left' | 'right' | string;
+    /** Shows a ✕ in the form panel's top corner. */
+    dismissible?: boolean;
+    /** Promo panel background. */
+    background_color?: StackableColorValue;
+    /** Form panel flood, and the promo CTA fill. */
+    accent_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function ContactFormSplit({ logo, logo_text, panel_heading, panel_subheading, panel_description, panel_cta, panel_image, panel_image_alt, show_scroll_indicator, form_heading, form_description, fields, submit_label, success_message, form_position, dismissible, background_color, accent_color, text_color, button_color, button_text_color, className, }: ContactFormSplitProps): React.JSX.Element | null;
+export default ContactFormSplit;

package/dist/components/Forms/NewsletterSignup.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface NewsletterSignupLink {
+    title?: string;
+    href?: string;
+}
+export interface NewsletterSignupProps {
+    logo?: string | {
+        url?: string;
+    };
+    logo_text?: string;
+    heading?: string;
+    description?: string;
+    /** Substring of `description` rendered bold + underlined, e.g. "25% Off". */
+    highlight_text?: string;
+    email_placeholder?: string;
+    button_text?: string;
+    disclaimer_prefix?: string;
+    privacy_policy_link?: NewsletterSignupLink;
+    terms_link?: NewsletterSignupLink;
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    image_caption?: string;
+    image_position?: 'left' | 'right' | string;
+    dismissible?: boolean;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function NewsletterSignup({ logo, logo_text, heading, description, highlight_text, email_placeholder, button_text, disclaimer_prefix, privacy_policy_link, terms_link, image, image_alt, image_caption, image_position, dismissible, background_color, text_color, button_color, button_text_color, className, }: NewsletterSignupProps): React.JSX.Element | null;
+export default NewsletterSignup;

package/dist/components/Forms/index.d.ts

@@ -0,0 +1,4 @@
+export { ContactForm } from './ContactForm';
+export { NewsletterSignup } from './NewsletterSignup';
+export { ContactFormSplit } from './ContactFormSplit';
+export type { ContactFormSplitProps, ContactFormSplitField, ContactFormSplitLink } from './ContactFormSplit';

package/dist/components/Grids/BentoGrid.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface BentoCellLink {
+    title?: string;
+    href?: string;
+}
+export interface BentoCell {
+    type?: 'text' | 'image' | 'stat' | string;
+    size?: 'small' | 'medium' | 'wide' | 'tall' | 'large' | string;
+    heading?: string;
+    description?: string;
+    /** Recognized icon keyword (see ICON_MAP), an image URL, or a Contentstack asset object. */
+    image?: string | {
+        url?: string;
+    };
+    badge_text?: string;
+    stat_value?: string;
+    stat_label?: string;
+    content_align?: 'left' | 'center' | string;
+    background_color?: StackableColorValue;
+    links?: BentoCellLink[];
+}
+export interface BentoGridProps {
+    eyebrow_text?: string;
+    heading?: string;
+    subheading?: string;
+    cells?: BentoCell[];
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function BentoGrid({ eyebrow_text, heading, subheading, cells, background_color, text_color, accent_color, className, }: BentoGridProps): React.JSX.Element;
+export default BentoGrid;

package/dist/components/Grids/CategoryGrid.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Native Contentstack link field: `{ title, href }`. */
+export interface CategoryGridLink {
+    title?: string;
+    href?: string;
+}
+export interface CategoryGridItem {
+    title?: string;
+    /** Supporting copy under the title. Line breaks are kept. */
+    description?: string;
+    /** Text for the arrow link. Falls back to the section's shared label. */
+    link_label?: string;
+    link?: CategoryGridLink;
+    /**
+     * The product cut-out. Asset URL or a Contentstack asset object — both are
+     * accepted, since a file field arrives as a URL from the catalog but as
+     * `{ url, … }` from the Delivery API. Artwork on a transparent or matching
+     * background sits best against the card.
+     */
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    /** Card colour for this entry. Empty falls back to the shared card colour. */
+    background_color?: StackableColorValue;
+}
+export interface CategoryGridProps {
+    heading?: string;
+    subheading?: string;
+    heading_alignment?: 'left' | 'center' | 'right' | string;
+    categories?: CategoryGridItem[];
+    /**
+     * How each pair of cards divides the row. `Alternating` puts the wide card on
+     * the left, then the right, and so on.
+     */
+    layout?: 'Alternating' | 'Wide Left' | 'Wide Right' | 'Equal' | string;
+    /** How lopsided the wide/narrow split is. Ignored when layout is `Equal`. */
+    emphasis?: 'Subtle' | 'Medium' | 'Strong' | string;
+    card_height?: 'Short' | 'Medium' | 'Tall' | string;
+    /** Which top corner the artwork sits in. */
+    image_position?: 'Right' | 'Left' | string;
+    image_size?: 'Small' | 'Medium' | 'Large' | string;
+    corner_style?: 'Rounded' | 'Square' | string;
+    /** Used by any entry that sets no label of its own. */
+    link_label?: string;
+    background_color?: StackableColorValue;
+    card_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function CategoryGrid({ heading, subheading, heading_alignment, categories, layout, emphasis, card_height, image_position, image_size, corner_style, link_label, background_color, card_color, text_color, className, }: CategoryGridProps): React.JSX.Element;
+export default CategoryGrid;

package/dist/components/Grids/FlipCardGrid.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface FlipCardGridLink {
+    title?: string;
+    href?: string;
+}
+export interface FlipCardGridItem {
+    /** Top-left pill, on both faces. */
+    tag?: string;
+    /** Shown centered on the front instead of the card's position in the list —
+     *  leave blank to fall back to that position (1, 2, 3, ...). Ignored once
+     *  `front_image` is set. */
+    number_label?: string;
+    /** Optional logo/artwork shown centered on the front instead of the number —
+     *  upload a high-quality PNG, ideally with a transparent background. */
+    front_image?: string | {
+        url?: string;
+    };
+    front_image_alt?: string;
+    /** Body copy, shown only on the back once flipped. Clamped to three lines. */
+    description?: string;
+    /** Exact substring of `description` to underline. */
+    underline_text?: string;
+    /** Shown only on the back, in the lower 70% of the card. */
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    /** Bottom-left label — shown on both faces. */
+    caption?: string;
+    /** The arrow button's destination; `title` becomes its accessible label. */
+    link?: FlipCardGridLink;
+    /** The front face's surface colour — falls back to FRONT_PALETTE, cycled by
+     *  the item's position, when not set. */
+    front_color?: StackableColorValue;
+    /** The back face's surface colour. */
+    card_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+}
+export interface FlipCardGridProps {
+    heading?: string;
+    description?: string;
+    /** Exact substring of `description` to underline. */
+    description_underline_text?: string;
+    /** Each card flips independently — unlike `CardAccordion`, hovering one never
+     *  affects the others' size or position. On touch (no real hover), opening one
+     *  card automatically closes whichever was already open. */
+    items?: FlipCardGridItem[];
+    /** `hover` flips on mouse-over on devices that actually support hover (click/
+     *  keyboard/touch always work too); `click` only flips on click/Enter/Space. */
+    flip_trigger?: 'hover' | 'click' | string;
+    background_color?: StackableColorValue;
+    /** The front face's number and tag outline. */
+    text_color?: StackableColorValue;
+    /** Decorative background grid — columns 1-4. */
+    grid_left_color?: StackableColorValue;
+    /** Decorative background grid — columns 5-8. */
+    grid_right_color?: StackableColorValue;
+    /** Decorative background grid — the line colour, shared by every cell. */
+    grid_line_color?: StackableColorValue;
+    className?: string;
+}
+export declare function FlipCardGrid({ heading, description, description_underline_text, items, flip_trigger, background_color, text_color, grid_left_color, grid_right_color, grid_line_color, className, }: FlipCardGridProps): React.JSX.Element | null;
+export default FlipCardGrid;

package/dist/components/Grids/HexTileGrid.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Native Contentstack link field: `{ title, href }`. */
+export interface HexTileGridLink {
+    title?: string;
+    href?: string;
+}
+export interface HexTileGridTile {
+    /** Caption over the image, e.g. `ATHLETES`. */
+    label?: string;
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    /** `title` becomes the button text; falls back to the section's CTA label. */
+    link?: HexTileGridLink;
+}
+export interface HexTileGridProps {
+    heading?: string;
+    subheading?: string;
+    heading_alignment?: 'left' | 'center' | 'right' | string;
+    tiles?: HexTileGridTile[];
+    /** Tiles in a full row. Short rows hold one fewer, which is what interlocks them. */
+    columns?: number;
+    tile_size?: 'Small' | 'Medium' | 'Large' | string;
+    /** The reference art is heavily desaturated; `Muted` reproduces that. */
+    image_treatment?: 'None' | 'Muted' | 'Grayscale' | string;
+    show_cta?: boolean;
+    /** Used when a tile's link has no title of its own. */
+    cta_label?: string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    /** Tile label and the CTA outline. */
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function HexTileGrid({ heading, subheading, heading_alignment, tiles, columns, tile_size, image_treatment, show_cta, cta_label, background_color, text_color, accent_color, className, }: HexTileGridProps): React.JSX.Element;
+export default HexTileGrid;