stackable-components 1.0.0

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Native Contentstack link field: `{ title, href }`. */
+export interface IndexSectionLink {
+    title?: string;
+    href?: string;
+}
+export interface IndexSectionItem {
+    /** Shown large behind/above the image. Falls back to the row's position, zero-padded. */
+    number?: string;
+    title?: string;
+    /** Small line under the title — a page range, date, or category. */
+    caption?: string;
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    link?: IndexSectionLink;
+}
+export interface IndexSectionProps {
+    heading?: string;
+    heading_alignment?: 'left' | 'center' | 'right' | string;
+    items?: IndexSectionItem[];
+    /** Panels per row at wide widths; wraps below that. */
+    columns?: number;
+    image_aspect_ratio?: 'Portrait' | 'Square' | 'Landscape' | string;
+    /** Small centred credit line under the row. */
+    footer_text?: string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    /** Colour of the large index numerals. */
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function IndexSection({ heading, heading_alignment, items, columns, image_aspect_ratio, footer_text, background_color, text_color, accent_color, className, }: IndexSectionProps): React.JSX.Element;
+export default IndexSection;

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

@@ -0,0 +1,10 @@
+export { BentoGrid } from './BentoGrid';
+export type { BentoGridProps, BentoCell, BentoCellLink } from './BentoGrid';
+export { IndexSection } from './IndexSection';
+export type { IndexSectionProps, IndexSectionItem, IndexSectionLink } from './IndexSection';
+export { HexTileGrid } from './HexTileGrid';
+export type { HexTileGridProps, HexTileGridTile, HexTileGridLink } from './HexTileGrid';
+export { CategoryGrid } from './CategoryGrid';
+export type { CategoryGridProps, CategoryGridItem, CategoryGridLink } from './CategoryGrid';
+export { FlipCardGrid } from './FlipCardGrid';
+export type { FlipCardGridProps, FlipCardGridItem, FlipCardGridLink } from './FlipCardGrid';

package/dist/components/HeroBanners/HeroBanner.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface HeroBannerCtaButton {
+    text?: string;
+    link?: string;
+}
+export interface HeroBannerCarouselImage {
+    image?: string | {
+        url?: string;
+    };
+}
+export interface HeroBannerProps {
+    heading?: string;
+    subheading?: string;
+    cta_button?: HeroBannerCtaButton;
+    background_video?: string | {
+        url?: string;
+    };
+    background_image?: string | {
+        url?: string;
+    };
+    enable_carousel?: boolean;
+    carousel_images?: HeroBannerCarouselImage[];
+    text_alignment?: 'left' | 'center' | 'right' | string;
+    banner_height?: 'Screen' | 'Auto' | string;
+    banner_width?: 'Screen' | string;
+    gradient?: 'Black' | string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function HeroBanner({ heading, subheading, cta_button, background_video, background_image, enable_carousel, carousel_images, text_alignment, banner_height, banner_width, gradient, background_color, text_color, button_color, button_text_color, className, }: HeroBannerProps): React.JSX.Element;
+export default HeroBanner;

package/dist/components/HeroBanners/HeroBannerClassic.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Native Contentstack link field: `{ title, href }`. */
+export interface HeroBannerClassicLink {
+    title?: string;
+    href?: string;
+}
+/**
+ * One line of the headline. `text` renders in the body colour, `accent_text`
+ * follows it in the accent colour — which is what lets a single repeater cover
+ * a fully accented second line, a trailing accented full stop, or neither.
+ */
+export interface HeroBannerClassicHeadingLine {
+    text?: string;
+    accent_text?: string;
+}
+export interface HeroBannerClassicAvatar {
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+}
+/** One rotation of a `Statement` footer item. */
+export interface HeroBannerClassicStatementEntry {
+    text?: string;
+    /** Small line under the statement — a route, a date, an attribution. */
+    meta?: string;
+}
+/**
+ * Heterogeneous footer cell, discriminated by `type`. Fields not relevant to a
+ * type are simply ignored, the same arrangement `BentoGrid`'s cells use.
+ */
+export interface HeroBannerClassicFooterItem {
+    type?: 'Stat' | 'Social Proof' | 'Statement' | 'Promo' | string;
+    /** `Stat` figure, or the `Social Proof` count. */
+    value?: string;
+    label?: string;
+    description?: string;
+    /** Asset URL, or a Contentstack asset object. */
+    icon?: string | {
+        url?: string;
+    };
+    link?: HeroBannerClassicLink;
+    /** Floods the card in the accent colour — the highlighted promo cell. */
+    emphasis?: boolean;
+    /** `Statement` only. More than one adds prev/next controls. */
+    entries?: HeroBannerClassicStatementEntry[];
+}
+export interface HeroBannerClassicProps {
+    eyebrow_text?: string;
+    heading_lines?: HeroBannerClassicHeadingLine[];
+    heading_font?: 'Sans' | 'Serif' | string;
+    description?: string;
+    primary_cta?: HeroBannerClassicLink;
+    primary_cta_icon?: 'None' | 'Arrow' | 'Play' | string;
+    secondary_cta?: HeroBannerClassicLink;
+    secondary_cta_icon?: 'None' | 'Arrow' | 'Play' | string;
+    image?: string | {
+        url?: string;
+    };
+    image_alt?: string;
+    media_position?: 'left' | 'right' | string;
+    /** Overlay on the media. Rendered only when `badge_value` is filled. */
+    badge_label?: string;
+    badge_value?: string;
+    badge_caption?: string;
+    /** Shared by the inline social proof and by a `Social Proof` footer cell. */
+    avatars?: HeroBannerClassicAvatar[];
+    /** `Inline` sits under the CTAs; `Cards` spans the full width below. */
+    footer_layout?: 'None' | 'Inline' | 'Cards' | string;
+    footer_items?: HeroBannerClassicFooterItem[];
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function HeroBannerClassic({ eyebrow_text, heading_lines, heading_font, description, primary_cta, primary_cta_icon, secondary_cta, secondary_cta_icon, image, image_alt, media_position, badge_label, badge_value, badge_caption, avatars, footer_layout, footer_items, background_color, text_color, accent_color, className, }: HeroBannerClassicProps): React.JSX.Element;
+export default HeroBannerClassic;

package/dist/components/HeroBanners/SplitHeroBanner.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface SplitHeroBannerCtaButton {
+    text?: string;
+    link?: string;
+}
+export interface SplitHeroBannerVideoOptions {
+    video?: string | {
+        url?: string;
+    };
+    video_controls?: string;
+    style?: string;
+    in_loop?: boolean;
+}
+export interface SplitHeroBannerProps {
+    heading?: string;
+    description?: string;
+    cta_button?: SplitHeroBannerCtaButton;
+    video_options?: SplitHeroBannerVideoOptions;
+    image?: string | {
+        url?: string;
+    };
+    media_position?: 'left' | 'right' | string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function SplitHeroBanner({ heading, description, cta_button, video_options: videoOptions, image, media_position: mediaPosition, background_color, text_color, className, }: SplitHeroBannerProps): React.JSX.Element;
+export default SplitHeroBanner;

package/dist/components/HeroBanners/SpotlightHero.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface SpotlightHeroCtaLink {
+    title?: string;
+    href?: string;
+}
+export interface SpotlightHeroCtaItem {
+    link?: SpotlightHeroCtaLink;
+    type?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | string;
+}
+/** Deliberately one look, always dark — a spotlight only reads as a spotlight
+ * against near-black. There's no light-mode version of this design, so unlike
+ * most components in this library there's no `theme` prop here. */
+export interface SpotlightHeroProps {
+    heading?: string;
+    subheading?: string;
+    description?: string;
+    /** Repeatable — each entry picks its own visual weight via `type`. */
+    cta?: SpotlightHeroCtaItem[];
+    /** Where the light fixture sits — the beam always angles down toward the
+     * content, which never moves. Only the source (and its angle) changes. */
+    spotlight_position?: 'left-top' | 'center-top' | 'right-top' | string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    /** The spotlight's own color — also tints the CTA outline and the heading's glow. */
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function SpotlightHero({ heading, subheading, description, cta, spotlight_position, background_color, text_color, accent_color, className, }: SpotlightHeroProps): React.JSX.Element;
+export default SpotlightHero;

package/dist/components/HeroBanners/VideoDemoHero.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export type VideoDemoHeroAnimationStyle = 'from-center' | 'from-bottom' | 'from-top' | 'from-left' | 'from-right' | string;
+export interface VideoDemoHeroLink {
+    title?: string;
+    href?: string;
+}
+export interface VideoDemoHeroThumbnail {
+    image?: string | {
+        url?: string;
+    };
+    alt_text?: string;
+}
+export interface VideoDemoHeroProps {
+    eyebrow_text?: string;
+    heading?: string;
+    subheading?: string;
+    /** A YouTube, Vimeo or Loom link (a normal watch/share link is fine, it's rewritten to
+     *  the embeddable form automatically), any other embeddable player URL, or a direct
+     *  .mp4/.webm/.ogg file — detected by extension and played in a native `<video>` tag
+     *  instead of an iframe. Only `.href` is used; the link's own title isn't rendered. */
+    video_url?: VideoDemoHeroLink;
+    thumbnail?: VideoDemoHeroThumbnail;
+    /** How the player enters — and leaves back out the same way. */
+    animation_style?: VideoDemoHeroAnimationStyle;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    /** The play button's glow and gradient. */
+    accent_color?: StackableColorValue;
+    className?: string;
+}
+export declare function VideoDemoHero({ eyebrow_text, heading, subheading, video_url, thumbnail, animation_style, background_color, text_color, accent_color, className, }: VideoDemoHeroProps): React.JSX.Element;
+export default VideoDemoHero;

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

@@ -0,0 +1,8 @@
+export { HeroBanner } from './HeroBanner';
+export { SplitHeroBanner } from './SplitHeroBanner';
+export { HeroBannerClassic } from './HeroBannerClassic';
+export type { HeroBannerClassicProps, HeroBannerClassicLink, HeroBannerClassicHeadingLine, HeroBannerClassicAvatar, HeroBannerClassicStatementEntry, HeroBannerClassicFooterItem, } from './HeroBannerClassic';
+export { SpotlightHero } from './SpotlightHero';
+export type { SpotlightHeroProps, SpotlightHeroCtaLink, SpotlightHeroCtaItem } from './SpotlightHero';
+export { VideoDemoHero } from './VideoDemoHero';
+export type { VideoDemoHeroProps, VideoDemoHeroAnimationStyle, VideoDemoHeroLink, VideoDemoHeroThumbnail } from './VideoDemoHero';

package/dist/components/ImageGrid/ImageGrid.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface ImageGridItem {
+    image?: string;
+    alt?: string;
+    title?: string;
+    caption?: string;
+    href?: string;
+    colSpan?: number;
+    rowSpan?: number;
+}
+export interface ImageGridProps {
+    heading?: string;
+    subheading?: string;
+    theme?: 'light' | 'dark' | string;
+    text_alignment?: 'left' | 'center' | 'right' | string;
+    columns?: number;
+    gap?: 'sm' | 'md' | 'lg' | string;
+    aspect_ratio?: 'square' | '4:3' | '16:9' | 'auto' | string;
+    hover_effect?: 'none' | 'zoom' | 'overlay' | string;
+    lightbox?: boolean;
+    images?: ImageGridItem[];
+    className?: string;
+}
+export declare function ImageGrid({ heading, subheading, theme, text_alignment, columns, gap, aspect_ratio, hover_effect, lightbox, images, className, }: ImageGridProps): React.JSX.Element;
+export default ImageGrid;

package/dist/components/ImageGrid/ImageGridDynamic.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface DynamicGridImage {
+    image?: string;
+    alt?: string;
+    title?: string;
+}
+export interface ImageGridDynamicProps {
+    heading?: string;
+    subheading?: string;
+    heading_alignment?: 'left' | 'center' | 'right' | string;
+    background_color?: StackableColorValue;
+    gap?: 'none' | 'sm' | 'md' | 'lg' | string;
+    images?: DynamicGridImage[];
+    className?: string;
+}
+export declare function ImageGridDynamic({ heading, subheading, heading_alignment, background_color, gap, images, className, }: ImageGridDynamicProps): React.JSX.Element;
+export default ImageGridDynamic;

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

@@ -0,0 +1,2 @@
+export { ImageGrid } from './ImageGrid';
+export { ImageGridDynamic } from './ImageGridDynamic';

package/dist/components/LogoCloud/LogoCloud.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export type LogoCloudScrollMode = 'static' | 'auto';
+export type LogoCloudDirection = 'horizontal' | 'grid';
+export type LogoCloudLogoStyle = 'plain' | 'card';
+export interface LogoCloudLogo {
+    /** Asset URL, or a Contentstack asset object — both are accepted. */
+    image?: string | {
+        url?: string;
+    };
+    name?: string;
+    url?: string;
+}
+export interface LogoCloudProps {
+    className?: string;
+    eyebrow_text?: string;
+    heading?: string;
+    subheading?: string;
+    logos?: LogoCloudLogo[];
+    /** 'static' renders a plain list, 'auto' scrolls continuously on a timer */
+    scroll_mode?: LogoCloudScrollMode | string;
+    /** Layout: 'horizontal' is a single row (can auto-scroll), 'grid' wraps logos into a fixed-column grid */
+    direction?: LogoCloudDirection | string;
+    logo_style?: LogoCloudLogoStyle | string;
+    /** Seconds for one full auto-scroll loop (only used when scroll_mode is 'auto') */
+    scroll_speed?: number;
+    /** Number of columns per row when direction is 'grid' */
+    grid_columns?: number;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+}
+export declare function LogoCloud({ className, eyebrow_text: eyebrowText, heading, subheading, logos: logosProp, scroll_mode, direction, logo_style, scroll_speed, grid_columns, background_color, text_color, }: LogoCloudProps): React.JSX.Element;
+export default LogoCloud;

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

@@ -0,0 +1,2 @@
+export { LogoCloud } from './LogoCloud';
+export type { LogoCloudProps, LogoCloudLogo, LogoCloudScrollMode, LogoCloudDirection, LogoCloudLogoStyle, } from './LogoCloud';

package/dist/components/Navigation/BreadcrumbNavigation.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Curated preset — editors pick one of these, or override with `icon_image`. */
+declare const CRUMB_ICONS: Record<string, React.ComponentType<{
+    className?: string;
+}>>;
+export interface BreadcrumbItem {
+    title?: string;
+    url?: string;
+    /** Preset icon key from the curated set, or `"None"` — the default — for no icon.
+     *  Ignored when `icon_image` is set. */
+    icon?: keyof typeof CRUMB_ICONS | 'None' | string;
+    /** Uploaded asset URL, or a Contentstack asset object — takes precedence over `icon`. */
+    icon_image?: string | {
+        url?: string;
+    };
+}
+export interface BreadcrumbNavigationProps {
+    items?: BreadcrumbItem[];
+    separator_style?: 'slash' | 'chevron' | 'arrow' | string;
+    /** Collapses a trail longer than this into first item → "…" → last two items,
+     *  clicking "…" reveals the full trail. 0 disables collapsing entirely. On narrow
+     *  screens this collapses further regardless (down to 3), unless set to 0. */
+    max_items?: number;
+    /** Shows a pill-shaped prev/next pair to the left of the trail, stepping through
+     *  the browser's own session history — the same back/forward the browser chrome
+     *  already offers, just skinned to match the component. No CMS link config needed. */
+    show_prev_next?: boolean;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function BreadcrumbNavigation({ items, separator_style, max_items, show_prev_next, background_color, text_color, className, }: BreadcrumbNavigationProps): React.JSX.Element | null;
+export default BreadcrumbNavigation;

package/dist/components/Navigation/ExtendedNavigation.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export interface ExtendedNavLink {
+    title?: string;
+    href?: string;
+}
+export interface ExtendedNavColumn {
+    column_heading?: string;
+    link?: ExtendedNavLink[];
+}
+export interface MenuBanner {
+    heading?: string;
+    description?: string;
+    image?: string | {
+        url?: string;
+    };
+    link?: string;
+}
+export interface ExtendedNavMenuItem {
+    label?: string;
+    link?: string;
+    extended_nav?: ExtendedNavColumn[];
+    menu_banner?: MenuBanner;
+}
+export interface ExtendedNavigationProps {
+    logo?: string;
+    className?: string;
+    menu_items?: ExtendedNavMenuItem[];
+    nav_alignment?: 'left' | 'right' | 'centered-logo' | string;
+}
+export declare function ExtendedNavigation({ logo, className, menu_items, nav_alignment, }: ExtendedNavigationProps): React.JSX.Element;
+export default ExtendedNavigation;

package/dist/components/Navigation/FloatingDock.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+/** Curated preset — editors pick one of these, or override with `icon_image`. */
+declare const DOCK_ICONS: Record<string, React.ComponentType<{
+    className?: string;
+    style?: React.CSSProperties;
+}>>;
+export interface FloatingDockLink {
+    title?: string;
+    href?: string;
+}
+export interface FloatingDockItem {
+    link?: FloatingDockLink;
+    /** Preset icon key from the curated set. Ignored when `icon_image` is set;
+     *  falls back to the link title's first letter when neither is provided. */
+    icon?: keyof typeof DOCK_ICONS | string;
+    /** Uploaded asset URL, or a Contentstack asset object — takes precedence over `icon`. */
+    icon_image?: string | {
+        url?: string;
+    };
+}
+export interface FloatingDockProps {
+    items?: FloatingDockItem[];
+    /** Which edge of the bottom the dock hugs. Empty falls back to centered. */
+    position?: 'left' | 'center' | 'right' | string;
+    /** Pins the dock to the bottom of the viewport, which is what an editor dropping
+     *  it onto a page expects. Set false to emit no positioning or z-index at all —
+     *  the dock then renders in normal flow and the host decides placement, stacking,
+     *  offsets and any overflow handling by wrapping it (shrink-to-fit sizing is also
+     *  skipped, see below). Code-only (like `className`); not a CMS field, since
+     *  `position` is the only placement choice editors make. */
+    fixed_position?: boolean;
+    /** Magnifies icons near the cursor, macOS-dock style. Off for anyone with
+     *  `prefers-reduced-motion` regardless. Tooltips show either way. */
+    animate_magnify?: boolean;
+    /** The dock pill's own background. */
+    background_color?: StackableColorValue;
+    /** Each icon's resting chip background, sitting one shade lifted off `background_color`. */
+    accent_color?: StackableColorValue;
+    /** Icon glyph color. */
+    icon_color?: StackableColorValue;
+    className?: string;
+}
+export declare function FloatingDock({ items, position, fixed_position, animate_magnify, background_color, icon_color, accent_color, className, }: FloatingDockProps): React.JSX.Element | null;
+export default FloatingDock;

package/dist/components/Navigation/NavigationBar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface NavMenuItem {
+    label?: string;
+    link?: string;
+}
+export interface NavigationBarProps {
+    logo?: string;
+    className?: string;
+    menu_items?: NavMenuItem[];
+    nav_alignment?: 'left' | 'right' | 'centered-logo' | string;
+}
+export declare function NavigationBar({ logo, className, menu_items, nav_alignment, }: NavigationBarProps): React.JSX.Element;
+export default NavigationBar;

package/dist/components/Navigation/Sidebar.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface SidebarLink {
+    text?: string;
+    link?: string;
+}
+export interface SidebarItem {
+    link?: SidebarLink;
+    /** Recognized icon keyword (see ICON_MAP), an image URL, or a Contentstack asset object. */
+    icon?: string | {
+        url?: string;
+    };
+}
+export interface SidebarProps {
+    title?: string;
+    subtitle?: string;
+    logo?: string;
+    items?: SidebarItem[];
+    cta_button?: SidebarLink;
+    collapsible?: boolean;
+    default_open?: boolean;
+    position?: 'left' | 'right' | string;
+    width?: 'narrow' | 'medium' | 'wide' | string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    className?: string;
+}
+export declare function Sidebar({ title, subtitle, logo, items, cta_button, collapsible, default_open, position, width, background_color, text_color, className, }: SidebarProps): React.JSX.Element;
+export default Sidebar;

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

@@ -0,0 +1,8 @@
+export { NavigationBar } from './NavigationBar';
+export { ExtendedNavigation } from './ExtendedNavigation';
+export { BreadcrumbNavigation } from './BreadcrumbNavigation';
+export type { BreadcrumbNavigationProps, BreadcrumbItem } from './BreadcrumbNavigation';
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarItem, SidebarLink } from './Sidebar';
+export { FloatingDock } from './FloatingDock';
+export type { FloatingDockProps, FloatingDockItem, FloatingDockLink } from './FloatingDock';

package/dist/components/PDP/ProductDetails.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+type ImageSource = string | {
+    url?: string;
+    asset?: {
+        url?: string;
+    };
+    file?: {
+        url?: string;
+    };
+} | null | undefined;
+export interface ProductColorOption {
+    label?: string;
+    hex?: string;
+}
+export interface AdditionalDetail {
+    title?: string;
+    list?: string[];
+    _metadata?: {
+        uid?: string;
+    };
+}
+export interface ProductCtaButton {
+    title?: string;
+    url?: string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    open_in_new_tab?: boolean;
+}
+export interface ProductDetailsProps {
+    product_name?: string;
+    price?: number | string;
+    description?: string;
+    rating?: number;
+    review_count?: number;
+    color?: ProductColorOption | ProductColorOption[];
+    product_images?: ImageSource | ImageSource[];
+    product_image?: ImageSource;
+    additional_details?: AdditionalDetail[];
+    cta?: ProductCtaButton;
+}
+export declare function ProductDetails({ product_name: productName, price, description, rating, review_count: reviewCount, color, product_images: productImages, product_image: productImage, additional_details: additionalDetails, cta, }: ProductDetailsProps): React.JSX.Element;
+export default ProductDetails;

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

@@ -0,0 +1 @@
+export { ProductDetails } from './ProductDetails';

package/dist/components/PLP/ProductListing.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ProductGridItem {
+    id?: string | number;
+    uid?: string;
+    [key: string]: unknown;
+}
+export interface ProductGridProps {
+    products?: ProductGridItem[];
+    image_size?: string;
+    list_type?: 'Grid' | 'Carousel' | string;
+    columns?: number;
+    className?: string;
+}
+export declare function ProductListing({ products, image_size, list_type, columns, className, }: ProductGridProps): React.JSX.Element;
+export default ProductListing;

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

@@ -0,0 +1 @@
+export { ProductListing } from './ProductListing';

package/dist/components/Pricing/Pricing.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { StackableColorValue } from '../../types';
+export interface PricingFeature {
+    text?: string;
+}
+export interface PricingLogo {
+    image?: string;
+    alt?: string;
+}
+export interface PricingTier {
+    name?: string;
+    description?: string;
+    price_monthly?: string;
+    price_annually?: string;
+    price_suffix?: string;
+    price_annual_note?: string;
+    currency?: string;
+    custom_price_text?: string;
+    feature_section_label?: string;
+    features?: PricingFeature[];
+    cta_label?: string;
+    cta_url?: string;
+    is_featured?: boolean;
+    featured_label?: string;
+    display_as_row?: boolean;
+}
+export interface PricingProps {
+    eyebrow?: string;
+    heading?: string;
+    description?: string;
+    theme?: 'light' | 'dark' | string;
+    background_color?: StackableColorValue;
+    text_color?: StackableColorValue;
+    button_color?: StackableColorValue;
+    button_text_color?: StackableColorValue;
+    heading_alignment?: 'left' | 'center' | string;
+    emphasized_tier?: number;
+    emphasis_style?: 'dark-card' | 'outline' | 'none' | string;
+    feature_icon?: 'check' | 'plus' | 'circle-check' | string;
+    cta_position?: 'above_features' | 'below_features' | string;
+    show_billing_toggle?: boolean;
+    show_logo_bar?: boolean;
+    logos?: PricingLogo[];
+    tiers?: PricingTier[];
+    className?: string;
+}
+export declare function Pricing({ eyebrow, heading, description, theme, background_color, text_color, button_color, button_text_color, heading_alignment, emphasized_tier, emphasis_style, feature_icon, cta_position, show_billing_toggle, show_logo_bar, logos, tiers, className, }: PricingProps): React.JSX.Element;
+export default Pricing;