stackable-components 1.0.0

package/dist/components/Banner/CountdownBanner.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface CountdownBannerCtaButton {
+    title?: string;
+    href?: string;
+}
+export interface CountdownBannerProps {
+    heading?: string;
+    description?: string;
+    /** ISO datetime the countdown ticks down to. */
+    target_date_time?: string;
+    cta_button?: CountdownBannerCtaButton;
+    expiry_behavior?: 'hide' | 'show_message' | string;
+    /** Shown in place of `description` once `target_date_time` has passed, when `expiry_behavior` is `show_message`. */
+    expiry_message?: string;
+    /** Shows a manual close (X) button that hides the banner for the rest of the session. */
+    dismissible?: boolean;
+    /** Flips each number tile when its value ticks over. Off for anyone with `prefers-reduced-motion`. */
+    animate_flip?: boolean;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function CountdownBanner({ heading, description, target_date_time, cta_button, expiry_behavior, expiry_message, dismissible, animate_flip, background_color, text_color, button_color, button_text_color, className, }: CountdownBannerProps): React.JSX.Element | null;
+export default CountdownBanner;

package/dist/components/Banner/PromoBanner.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Native Contentstack link field: `{ title, href }`. */
+export interface PromoBannerLink {
+    title?: string;
+    href?: string;
+}
+export interface PromoBannerSlide {
+    /** Small uppercase line above the heading, e.g. `NEW ARRIVAL`. */
+    eyebrow_text?: string;
+    heading?: string;
+    /** Supporting copy. Line breaks are kept. */
+    description?: string;
+    /** Text for the arrow link. Falls back to the link's own title. */
+    cta_label?: string;
+    cta_link?: PromoBannerLink;
+    /**
+     * 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.
+     */
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    /** Panel colour for this slide. Empty falls back to the rotating palette. */
+    background_color?: StackableColorValue;
+}
+export interface PromoBannerProps {
+    slides?: PromoBannerSlide[];
+    /** Small glyph before the eyebrow text. */
+    show_eyebrow_icon?: boolean;
+    /** Which side the image panel sits on. */
+    media_position?: 'Right' | 'Left' | string;
+    /** Strip height. These are deliberately short — this is a banner, not a hero. */
+    banner_height?: 'Short' | 'Medium' | 'Tall' | string;
+    corner_style?: 'Rounded' | 'Square' | string;
+    show_arrows?: boolean;
+    show_dots?: boolean;
+    /** Advances on a timer. Ignored when the visitor prefers reduced motion. */
+    autoplay?: boolean;
+    autoplay_seconds?: number;
+    /** The area behind the card. */
+    background_color?: StackableColorValue;
+    /** Copy on the panel, and the arrow controls. */
+    text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function PromoBanner({ slides, show_eyebrow_icon, media_position, banner_height, corner_style, show_arrows, show_dots, autoplay, autoplay_seconds, background_color, text_color, className, }: PromoBannerProps): React.JSX.Element;
+export default PromoBanner;

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

@@ -0,0 +1,14 @@
+export { Banner } from './Banner';
+export type { BannerProps, BannerCtaButton, BannerReference } from './Banner';
+export { BannerLight } from './BannerLight';
+export type { BannerLightProps, BannerLightCtaButton, BannerLightReference } from './BannerLight';
+export { BannerCallout } from './BannerCallout';
+export type { BannerCalloutProps, BannerCalloutCtaButton } from './BannerCallout';
+export { CommunityBanner } from './CommunityBanner';
+export type { CommunityBannerProps, CommunityBannerAvatar, CommunityBannerCtaButton } from './CommunityBanner';
+export { CountdownBanner } from './CountdownBanner';
+export type { CountdownBannerProps, CountdownBannerCtaButton } from './CountdownBanner';
+export { CookieConsentBanner } from './CookieConsentBanner';
+export type { CookieConsentBannerProps, CookieConsentBannerLink } from './CookieConsentBanner';
+export { PromoBanner } from './PromoBanner';
+export type { PromoBannerProps, PromoBannerSlide, PromoBannerLink } from './PromoBanner';

package/dist/components/Button/PrimaryButton.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface PrimaryButtonProps {
+    title?: string;
+    url?: string;
+    open_in_new_tab?: boolean;
+    disable_?: boolean;
+    /**
+     * `Rounded` is a filled pill, `Box` an outlined rectangle, `Link` plain text.
+     * All three take their colour from the same two fields, so a brand only has
+     * to be set once.
+     */
+    variant?: 'Rounded' | 'Box' | 'Link' | string;
+    enable_icon_?: boolean;
+    icon_alignment?: 'left' | 'right' | string;
+    /**
+     * The brand colour: the fill on `Rounded`, the border and text on `Box`, the
+     * text on `Link`. Defaults to `DEFAULT_BRAND` so the button is never unstyled.
+     */
+    background_color?: StackableColorValue;
+    /** Label colour on `Rounded`. Ignored by `Box` and `Link`, which use the brand. */
+    text_color?: StackableColorValue;
+    className?: string;
+    /**
+     * @deprecated Accepted and ignored. There is one button size now; this only
+     * remains so existing call sites keep compiling. It is not in the content
+     * model, so no editor can reach it.
+     */
+    size?: string;
+}
+export declare function PrimaryButton({ title, url, open_in_new_tab, disable_, variant, enable_icon_, icon_alignment, background_color, text_color, className, }: PrimaryButtonProps): React.JSX.Element;
+export default PrimaryButton;

package/dist/components/Button/ToggleSwitch.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface ToggleSwitchProps {
+    on_label?: string;
+    off_label?: string;
+    /** Initial state; editors can preview either side from the controls panel. */
+    default_on?: boolean;
+    /**
+     * `Knob` slides a pill-shaped handle between the two labels.
+     * `Label` keeps a plain pill that just shows the current state.
+     */
+    variant?: 'Knob' | 'Label' | string;
+    /** Accessible name, since the visible labels are the two states. */
+    aria_label?: string;
+    /** Track fill. Defaults to `DEFAULT_TRACK` so the switch is never unstyled. */
+    background_color?: StackableColorValue;
+    /** Colour of the label sitting on the track. */
+    text_color?: StackableColorValue;
+    /** Knob fill. The knob's own label is derived from this, so it stays legible. */
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function ToggleSwitch({ on_label, off_label, default_on, variant, aria_label, background_color, text_color, accent_color, className, }: ToggleSwitchProps): React.JSX.Element;
+export default ToggleSwitch;

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

@@ -0,0 +1,3 @@
+export { PrimaryButton } from './PrimaryButton';
+export { ToggleSwitch } from './ToggleSwitch';
+export type { ToggleSwitchProps } from './ToggleSwitch';

package/dist/components/Cards/CardAccordion.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface CardAccordionLink {
+    title?: string;
+    href?: string;
+}
+export interface CardAccordionItem {
+    /** Top-left pill, e.g. "Skincare". */
+    tag?: string;
+    /** Shown only while this card is the expanded one. */
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    /** Body copy, shown only while this card is the expanded one. */
+    heading?: string;
+    /** Bottom-left label — always visible, expanded or collapsed. */
+    caption?: string;
+    /** The arrow button's destination; `title` becomes its accessible label. */
+    link?: CardAccordionLink;
+    /** Collapsed-state surface colour for this card. Ignored while expanded, where
+     *  the image takes over (or, with no image, this colour shows through instead). */
+    card_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+}
+export interface CardAccordionProps {
+    heading?: string;
+    description?: string;
+    /** Up to three — a fourth would leave collapsed panels too narrow to read. */
+    items?: CardAccordionItem[];
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    /** The arrow button's icon and background tint. */
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function CardAccordion({ heading, description, items, background_color, text_color, accent_color, className, }: CardAccordionProps): React.JSX.Element | null;
+export default CardAccordion;

package/dist/components/Cards/FeatureCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface FeatureCardProps {
+    title?: string;
+    description?: string;
+    icon?: string;
+    image_aspect_ratio?: '1:1' | '4:3' | '16:9' | '3:2' | '21:9' | string;
+    text_alignment?: 'left' | 'center' | 'right' | string;
+    className?: string;
+}
+export declare function FeatureCard({ title, description, icon, image_aspect_ratio, text_alignment, className, }: FeatureCardProps): React.JSX.Element;
+export default FeatureCard;

package/dist/components/Cards/FlipCard.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface FlipCardLink {
+    title?: string;
+    href?: string;
+}
+export interface FlipCardImage {
+    file?: string | {
+        url?: string;
+    };
+    alt_text?: string;
+}
+export interface FlipCardProps {
+    /** Shown on the front. */
+    image?: FlipCardImage;
+    /** Shown on both the front and the back — a name, a feature title, a plan name,
+     *  whatever this card is actually about. */
+    heading?: string;
+    /** Shown on the front only, under Heading — a role, a tag, a short label. */
+    subheading?: string;
+    /** Shown on the back only, once flipped — a bio, an explanation, more detail. */
+    description?: string;
+    /** Shown on the back only, once flipped. */
+    link?: FlipCardLink;
+    /** `hover` flips on mouse-over (click/keyboard still work as a touch fallback);
+     *  `click` only flips on click/Enter/Space. */
+    flip_trigger?: 'hover' | 'click' | string;
+    /** Used on both the front and the back, so the flip reads as one object turning
+     *  over rather than two differently-coloured cards. */
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    /** The flip icon and the back-card link. */
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function FlipCard({ image, heading, subheading, description, link, flip_trigger, background_color, text_color, accent_color, className, }: FlipCardProps): React.JSX.Element | null;
+export default FlipCard;

package/dist/components/Cards/ProfileCard.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Curated icon set — keeps stats consistent without editors uploading SVGs. */
+declare const STAT_ICONS: Record<string, React.ComponentType<{
+    className?: string;
+}>>;
+export interface ProfileCardStat {
+    icon?: keyof typeof STAT_ICONS | string;
+    value?: string;
+}
+export interface ProfileCardProps {
+    name?: string;
+    verified?: boolean;
+    bio?: string;
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    profile_image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    image_aspect_ratio?: 'Square' | 'Portrait' | 'Landscape' | string;
+    image_fit?: 'Cover' | 'Contain' | string;
+    /** Fades the photo into the card body instead of a hard edge. */
+    image_fade?: boolean;
+    /** Where the name links to. */
+    href?: string;
+    stats?: ProfileCardStat[];
+    cta_label?: string;
+    /** Label once the follow button is toggled on. */
+    cta_label_active?: string;
+    cta_url?: string;
+    button_style?: 'Light' | 'Dark' | string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    /** Verified badge fill. */
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function ProfileCard({ name, verified, bio, profile_image, image_alt, image_aspect_ratio, image_fit, image_fade, href, stats, cta_label, cta_label_active, cta_url, button_style, background_color, text_color, accent_color, className, }: ProfileCardProps): React.JSX.Element;
+export default ProfileCard;

package/dist/components/Cards/ResourceCard.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface ResourceCardItem {
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    image?: string | {
+        url?: string;
+    };
+    tag?: string;
+    title?: string;
+    description?: string;
+    url?: string;
+    card_background_color?: StackableColorValue;
+    card_text_color?: StackableColorValue;
+}
+export interface ResourceCardSectionProps {
+    heading?: string;
+    subheading?: string;
+    heading_alignment?: 'left' | 'center' | 'right' | string;
+    item_alignment?: 'left' | 'center' | 'right' | string;
+    cards_per_row?: 1 | 2 | 3 | number | string;
+    view_all_label?: string;
+    view_all_url?: string;
+    background_color?: StackableColorValue;
+    heading_text_color?: StackableColorValue;
+    items?: ResourceCardItem[];
+    className?: string;
+}
+export declare function ResourceCard({ heading, subheading, heading_alignment, item_alignment, cards_per_row, view_all_label, view_all_url, background_color, heading_text_color, items: itemsProp, className, }: ResourceCardSectionProps): React.JSX.Element;
+export default ResourceCard;

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

@@ -0,0 +1,9 @@
+export { FeatureCard } from './FeatureCard';
+export { ResourceCard } from './ResourceCard';
+export type { ResourceCardSectionProps, ResourceCardItem } from './ResourceCard';
+export { ProfileCard } from './ProfileCard';
+export type { ProfileCardProps, ProfileCardStat } from './ProfileCard';
+export { FlipCard } from './FlipCard';
+export type { FlipCardProps, FlipCardLink, FlipCardImage } from './FlipCard';
+export { CardAccordion } from './CardAccordion';
+export type { CardAccordionProps, CardAccordionItem, CardAccordionLink } from './CardAccordion';

package/dist/components/Carousels/CircleImageCarousel.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface CircleCarouselItem {
+    image?: {
+        url?: string;
+        title?: string;
+    } | string;
+    title?: string;
+    link?: string;
+}
+export interface CircleImageCarouselProps {
+    className?: string;
+    heading?: string;
+    subheading?: string;
+    heading_alignment?: 'left' | 'center' | 'right';
+    navigation?: 'arrows' | 'scrollbar' | 'dots';
+    items?: CircleCarouselItem[];
+}
+export declare function CircleImageCarousel({ className, heading, subheading, heading_alignment, navigation, items, }: CircleImageCarouselProps): React.JSX.Element;
+export default CircleImageCarousel;

package/dist/components/Carousels/GalleryCarousel.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Native Contentstack link field: `{ title, href }`. */
+export interface GalleryCarouselLink {
+    title?: string;
+    href?: string;
+}
+export interface GalleryCarouselSlide {
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    /**
+     * Headline over the slide. Named `slide_title` rather than `title` because a
+     * group subfield with that uid collides with the content type's mandatory
+     * Title field on import; props map 1:1 onto field uids.
+     */
+    slide_title?: string;
+    /** Supporting line under the title. */
+    caption?: string;
+    /** Small line under the caption — a place, a date, a credit. */
+    meta?: string;
+    /**
+     * Groups the slide under a filter chip. Chips are built from the distinct
+     * values found here, so a chip can never point at an empty set.
+     */
+    category?: string;
+    /** Present means the slide is a video: it shows a play badge and plays in place.
+     *  Asset URL, or a Contentstack asset object — both are accepted. */
+    video_url?: string | {
+        url?: string;
+    };
+    link?: GalleryCarouselLink;
+}
+export interface GalleryCarouselProps {
+    eyebrow_text?: string;
+    heading?: string;
+    subheading?: string;
+    heading_alignment?: 'left' | 'center' | 'right' | string;
+    heading_font?: 'Sans' | 'Serif' | 'Display' | string;
+    /** Face for the text overlaid on each slide. */
+    caption_font?: 'Sans' | 'Serif' | 'Display' | string;
+    /** Shows each slide's category as a pill in its top corner. */
+    show_category_badge?: boolean;
+    slides?: GalleryCarouselSlide[];
+    /** Slides either side of the focused one. 2 gives the five-across look. */
+    visible_neighbours?: number;
+    /** How much each step away from centre shrinks a slide, as a percentage. */
+    scale_falloff?: number;
+    slide_aspect_ratio?: 'Portrait' | 'Square' | 'Landscape' | string;
+    show_filters?: boolean;
+    /** Chip shown first, before the derived category chips. */
+    all_filter_label?: string;
+    /** Optional link at the end of the chip row. */
+    view_more?: GalleryCarouselLink;
+    /**
+     * `Continuous` drifts without stopping. `Stepped` advances a slide at a time
+     * on a timer. `Manual` moves only when a visitor asks.
+     */
+    motion?: 'Continuous' | 'Stepped' | 'Manual' | string;
+    /** Seconds per slide of travel. Lower is faster. */
+    pace_seconds?: number;
+    pause_on_hover?: boolean;
+    /** Prev/next controls. Hidden while drifting, since they would fight it. */
+    show_arrows?: boolean;
+    video_muted?: boolean;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    /** Active chip fill, and the play badge. */
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function GalleryCarousel({ eyebrow_text, heading, subheading, heading_alignment, heading_font, caption_font, show_category_badge, slides, visible_neighbours, scale_falloff, slide_aspect_ratio, show_filters, all_filter_label, view_more, motion, pace_seconds, pause_on_hover, show_arrows, video_muted, background_color, text_color, accent_color, className, }: GalleryCarouselProps): React.JSX.Element;
+export default GalleryCarousel;

package/dist/components/Carousels/ImageVideoCarousel.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface CarouselSlideImage {
+    url?: string;
+    title?: string;
+}
+export interface CarouselSlideVideo {
+    url?: string;
+}
+export interface CarouselSlide {
+    image?: CarouselSlideImage;
+    video?: CarouselSlideVideo;
+    caption?: string;
+}
+export interface ImageVideoCarouselProps {
+    className?: string;
+    title?: string;
+    slides?: CarouselSlide[];
+    autoplay?: boolean;
+    interval?: number;
+    muted?: boolean;
+    loop?: boolean;
+}
+export declare function ImageVideoCarousel({ className, title, slides, autoplay, interval, muted, loop, }: ImageVideoCarouselProps): React.JSX.Element;
+export default ImageVideoCarousel;

package/dist/components/Carousels/VerticalProductCarousel.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface VerticalCarouselProductColor {
+    label?: string;
+    hex?: string;
+}
+export interface VerticalCarouselProductItem {
+    product_name?: string;
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    product_image?: string | {
+        url?: string;
+    };
+    price?: number;
+    colors?: VerticalCarouselProductColor[];
+    href?: string;
+}
+export interface VerticalProductCarouselCtaButton {
+    text?: string;
+    link?: string;
+}
+export interface VerticalProductCarouselProps {
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    cta_button?: VerticalProductCarouselCtaButton;
+    text_alignment?: 'Left' | 'Center' | 'Right' | string;
+    text_color?: StackableColorValue;
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    background_image?: string | {
+        url?: string;
+    };
+    background_color?: StackableColorValue;
+    carousel_position?: 'Left' | 'Right' | string;
+    item_shape?: 'Rectangle' | 'Square' | 'Circle' | string;
+    visible_items?: number;
+    products?: VerticalCarouselProductItem[];
+    className?: string;
+}
+export declare function VerticalProductCarousel({ eyebrow, heading, description, cta_button, text_alignment, text_color, background_image, background_color, carousel_position, item_shape, visible_items, products, className, }: VerticalProductCarouselProps): React.JSX.Element;
+export default VerticalProductCarousel;

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

@@ -0,0 +1,7 @@
+export { ImageVideoCarousel } from './ImageVideoCarousel';
+export { CircleImageCarousel } from './CircleImageCarousel';
+export type { CircleImageCarouselProps, CircleCarouselItem } from './CircleImageCarousel';
+export { VerticalProductCarousel } from './VerticalProductCarousel';
+export type { VerticalProductCarouselProps, VerticalProductCarouselCtaButton, VerticalCarouselProductItem, VerticalCarouselProductColor, } from './VerticalProductCarousel';
+export { GalleryCarousel } from './GalleryCarousel';
+export type { GalleryCarouselProps, GalleryCarouselSlide, GalleryCarouselLink } from './GalleryCarousel';

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface EmptyStateLink {
+    title?: string;
+    href?: string;
+}
+export interface EmptyStateProps {
+    state_type?: '404' | 'no_results' | 'empty_cart' | 'generic' | string;
+    heading?: string;
+    description?: string;
+    illustration?: string;
+    primary_cta?: EmptyStateLink;
+    secondary_cta?: EmptyStateLink;
+    suggested_links?: EmptyStateLink[];
+    alignment?: 'left' | 'center' | 'right' | string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function EmptyState({ state_type, heading, description, illustration, primary_cta, secondary_cta, suggested_links, alignment, background_color, text_color, className, }: EmptyStateProps): React.JSX.Element;
+export default EmptyState;

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

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateLink } from './EmptyState';

package/dist/components/FAQ/FAQ.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface FaqItem {
+    question?: string;
+    answer?: string;
+}
+export interface FaqProps {
+    heading?: string;
+    subheading?: string;
+    heading_alignment?: 'left' | 'center' | string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    layout?: 'offset' | 'list' | 'grid' | string;
+    style?: 'plain' | 'accordion' | string;
+    columns?: number;
+    support_text?: string;
+    support_link_label?: string;
+    support_link_url?: string;
+    faqs?: FaqItem[];
+    className?: string;
+}
+export declare function FAQ({ heading, subheading, heading_alignment, background_color, text_color, layout, style, columns, support_text, support_link_label, support_link_url, faqs, className, }: FaqProps): React.JSX.Element;
+export default FAQ;

package/dist/components/FAQ/FaqCategorized.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface FaqCategorizedItem {
+    question?: string;
+    answer?: string;
+    /** Rendered as a link inside the answer — inline if this exact text appears in `answer`, appended after it otherwise. */
+    link_label?: string;
+    link_url?: string;
+}
+export interface FaqCategorizedCategory {
+    name?: string;
+    /** Uploaded asset URL, or a Contentstack asset object. Shown beside every question in this
+     *  category, and on the category's own filter pill. Nothing renders when it's empty.
+     *  Alt text comes from `name` — no separate field for editors to fill. */
+    icon?: string | {
+        url?: string;
+    };
+    items?: FaqCategorizedItem[];
+}
+export interface FaqCategorizedProps {
+    heading?: string;
+    subheading?: string;
+    /** Rendered as a link inside the subheading, same inline-or-appended behavior as an item's link. */
+    support_link_label?: string;
+    support_link_url?: string;
+    theme?: 'light' | 'dark' | 'auto' | string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    /** Active category pill, item icon borders, and inline links. */
+    accent_color?: StackableColorValue;
+    categories?: FaqCategorizedCategory[];
+    className?: string;
+}
+export declare function FaqCategorized({ heading, subheading, support_link_label, support_link_url, theme, background_color, text_color, accent_color, categories, className, }: FaqCategorizedProps): React.JSX.Element | null;
+export default FaqCategorized;

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

@@ -0,0 +1,4 @@
+export { FAQ } from './FAQ';
+export type { FaqProps, FaqItem } from './FAQ';
+export { FaqCategorized } from './FaqCategorized';
+export type { FaqCategorizedProps, FaqCategorizedCategory, FaqCategorizedItem } from './FaqCategorized';

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

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface FeatureBenefitItem {
+    title?: string;
+    description?: string;
+    icon?: string;
+}
+export interface FeatureBenefitProps {
+    eyebrow?: string;
+    heading?: string;
+    subheading?: string;
+    items?: FeatureBenefitItem[];
+    columns?: 2 | 3 | 4 | string | number;
+    icon_style?: 'plain' | 'circle' | 'square' | string;
+    icon_color?: string;
+    card_style?: 'none' | 'bordered' | 'elevated' | string;
+    background_color?: string;
+    className?: string;
+}
+export declare function FeatureBenefit({ eyebrow, heading, subheading, items, columns, icon_style, icon_color, card_style, background_color, className, }: FeatureBenefitProps): React.JSX.Element;
+export default FeatureBenefit;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface FeatureBenefitDarkItem {
+    title?: string;
+    description?: string;
+    icon?: string;
+}
+export interface FeatureBenefitDarkProps {
+    heading?: string;
+    subheading?: string;
+    items?: FeatureBenefitDarkItem[];
+    columns?: 2 | 3 | 4 | string | number;
+    background_color?: string;
+    icon_color?: string;
+    icon_style?: 'plain' | 'circle' | 'square' | string;
+    className?: string;
+}
+export declare function FeatureBenefitDark({ heading, subheading, items, columns, background_color, icon_color, icon_style, className, }: FeatureBenefitDarkProps): React.JSX.Element;
+export default FeatureBenefitDark;