@skyfall_ai/bazaar 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,4652 @@
+import { AnchorHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import { ElementType } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { LabelHTMLAttributes } from 'react';
+import { LegendProps } from 'recharts';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SelectHTMLAttributes } from 'react';
+import { SVGProps } from 'react';
+import { TableHTMLAttributes } from 'react';
+import { TdHTMLAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
+import { ThHTMLAttributes } from 'react';
+import { TooltipProps as TooltipProps_2 } from 'recharts';
+
+/** Reward accent — Warm Amber. Loyalty, rewards, gold-tier. */
+export declare const accentAmber: {
+    readonly 50: "#FBF2DF";
+    readonly 100: "#F5E1B6";
+    readonly 200: "#EAC079";
+    readonly 300: "#D9A046";
+    readonly 400: "#B58235";
+    readonly 500: "#8C6324";
+    readonly 600: "#6C4B1A";
+    readonly 700: "#513712";
+};
+
+/** Support accent — Sage. Confirmation, in-stock, eco. */
+export declare const accentMint: {
+    readonly 50: "#EAF1EA";
+    readonly 100: "#D1DFD3";
+    readonly 200: "#A8C1AC";
+    readonly 300: "#7BA181";
+    readonly 400: "#4A7C59";
+    readonly 500: "#3A6547";
+    readonly 600: "#2E5237";
+    readonly 700: "#22402A";
+};
+
+export declare const accentTeal: {
+    readonly 50: "#EAF1EA";
+    readonly 100: "#D1DFD3";
+    readonly 200: "#A8C1AC";
+    readonly 300: "#7BA181";
+    readonly 400: "#4A7C59";
+    readonly 500: "#3A6547";
+    readonly 600: "#2E5237";
+    readonly 700: "#22402A";
+};
+
+/**
+ * Accordion — expandable/collapsible content sections.
+ *
+ * Accessibility:
+ * - Button triggers with aria-expanded and aria-controls
+ * - Content panels have role="region" and aria-labelledby
+ * - Animated expand/collapse with proper height transitions
+ * - Supports single or multiple open panels
+ */
+export declare function Accordion({ items, allowMultiple, defaultOpenIds, className }: AccordionProps): JSX_2.Element;
+
+export declare interface AccordionItem {
+    /** Unique identifier */
+    id: string;
+    /** Header title */
+    title: string;
+    /** Panel content */
+    content: ReactNode;
+}
+
+export declare interface AccordionProps {
+    /** Accordion items */
+    items: AccordionItem[];
+    /** Allow multiple panels to be open simultaneously */
+    allowMultiple?: boolean;
+    /** IDs of panels open by default */
+    defaultOpenIds?: string[];
+    /** Additional className */
+    className?: string;
+}
+
+export declare interface AccountDashboardSection {
+    id: string;
+    title: ReactNode;
+    actionLabel?: string;
+    onAction?: () => void;
+    content: ReactNode;
+}
+
+/**
+ * AccountDashboardTemplate — logged-in account overview shell. Sidebar nav,
+ * summary tiles (orders/points/rewards), and stacked content sections.
+ */
+export declare function AccountDashboardTemplate({ header, footer, title, subtitle, sidebar, summary, sections, className, ...rest }: AccountDashboardTemplateProps): JSX_2.Element;
+
+export declare interface AccountDashboardTemplateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    header?: ReactNode;
+    footer?: ReactNode;
+    /** Page heading — e.g., "Hello, Mara". */
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Sidebar nav — typically AccountNav. */
+    sidebar: ReactNode;
+    /** Summary tiles across the top of the content area. */
+    summary?: AccountSummaryStat[];
+    /** Stacked content sections (Recent orders, Saved addresses, etc.). */
+    sections?: AccountDashboardSection[];
+}
+
+/**
+ * AccountNav — sidebar navigation for the logged-in account area. Vertical
+ * list with optional counts + a subdued sign-out affordance.
+ */
+export declare function AccountNav({ name, greeting, items, activeId, signOutLabel, onSignOut, className, ...rest }: AccountNavProps): JSX_2.Element;
+
+export declare interface AccountNavItem {
+    id: string;
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    /** Small count badge (orders, wishlist size). */
+    count?: number;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+}
+
+export declare interface AccountNavProps extends HTMLAttributes<HTMLElement> {
+    /** Customer first name or display label shown in the header. */
+    name?: ReactNode;
+    greeting?: string;
+    items: AccountNavItem[];
+    /** Id of the currently-active item. */
+    activeId?: string;
+    signOutLabel?: string;
+    onSignOut?: () => void;
+}
+
+export declare interface AccountSummaryStat {
+    id: string;
+    label: string;
+    value: ReactNode;
+    meta?: ReactNode;
+}
+
+export declare interface ActiveFilterChip {
+    id: string;
+    label: string;
+}
+
+export declare interface Address {
+    id?: string;
+    name: string;
+    line1: string;
+    line2?: string;
+    city: string;
+    region: string;
+    postalCode: string;
+    country: string;
+    phone?: string;
+    isDefault?: boolean;
+}
+
+/**
+ * AddressBook — grid of saved shipping/billing addresses with a "default"
+ * badge and per-card edit/remove/set-as-default actions. Includes a dashed
+ * "Add address" tile as the final cell.
+ */
+export declare function AddressBook({ addresses, title, onEdit, onRemove, onSetDefault, onAdd, className, ...rest }: AddressBookProps): JSX_2.Element;
+
+export declare interface AddressBookProps extends HTMLAttributes<HTMLElement> {
+    addresses: Address[];
+    title?: string;
+    onEdit?: (address: Address) => void;
+    onRemove?: (address: Address) => void;
+    onSetDefault?: (address: Address) => void;
+    onAdd?: () => void;
+}
+
+/**
+ * AddressForm — shipping / billing address capture with a region-aware
+ * grid. Fully controlled; callers own validation.
+ */
+export declare function AddressForm({ value, onChange, errors, title, countries, showSaveToggle, compact, className, ...rest }: AddressFormProps): JSX_2.Element;
+
+export declare interface AddressFormProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    value: Partial<Address>;
+    onChange: (next: Partial<Address>) => void;
+    /** Field-level errors. */
+    errors?: Partial<Record<keyof Address, string>>;
+    title?: string;
+    /** Country options — pass a string[] of labels or skip for the default. */
+    countries?: string[];
+    /** Show a "Save this address to my account" toggle below the form. */
+    showSaveToggle?: boolean;
+    /** Form is embedded inside a step; don't render an outer title. */
+    compact?: boolean;
+}
+
+/**
+ * Alert — contextual message banner.
+ *
+ * Accessibility:
+ * - Uses role="alert" for errors/warnings (live region, immediately announced)
+ * - Uses role="status" for info/success (polite announcement)
+ * - Icon + color + text ensures meaning is communicated multiple ways
+ */
+export declare function Alert({ status, title, action, className, children, ...props }: AlertProps): JSX_2.Element;
+
+export declare interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    /** Semantic status */
+    status?: 'info' | 'success' | 'warning' | 'error';
+    /** Optional title */
+    title?: string;
+    /** Optional action element (e.g., a close button) */
+    action?: ReactNode;
+}
+
+/**
+ * AnnouncementBar — thin site-wide bar for shipping promises, drops or
+ * limited-time promos. Rotates through messages when more than one is
+ * supplied.
+ */
+export declare function AnnouncementBar({ messages, dismissible, onDismiss, interval, tone, className, ...rest }: AnnouncementBarProps): JSX_2.Element | null;
+
+export declare interface AnnouncementBarProps extends HTMLAttributes<HTMLElement> {
+    /** One or many messages — when multiple, they rotate. */
+    messages: AnnouncementMessage[];
+    /** Dismissible? */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    /** Rotation interval (ms). Defaults to 4500. Set 0 to disable. */
+    interval?: number;
+    /** Visual tone. */
+    tone?: 'ink' | 'sand' | 'warm';
+}
+
+export declare interface AnnouncementMessage {
+    id: string;
+    body: ReactNode;
+    /** Optional inline CTA. */
+    cta?: {
+        label: string;
+        onClick?: () => void;
+    };
+}
+
+/**
+ * AppBar — horizontal top navigation bar for application headers.
+ *
+ * Accessibility:
+ * - Uses <header> with <nav> for semantic structure
+ * - Navigation items should be provided as links or buttons
+ * - Fixed height with clean horizontal layout
+ */
+export declare function AppBar({ logo, children, actions, className, ...props }: AppBarProps): JSX_2.Element;
+
+export declare interface AppBarProps extends HTMLAttributes<HTMLElement> {
+    /** Logo or brand element */
+    logo?: ReactNode;
+    /** Navigation items (center/left area) */
+    children?: ReactNode;
+    /** Action elements on the right (profile, notifications, etc.) */
+    actions?: ReactNode;
+}
+
+export declare interface AppliedCoupon {
+    code: string;
+    /** Display label, e.g. "10% off entire order". */
+    label: string;
+}
+
+/**
+ * Autocomplete — combobox input with filtered suggestions dropdown.
+ *
+ * Accessibility:
+ * - role="combobox" on input with aria-expanded, aria-controls, aria-activedescendant
+ * - Dropdown uses role="listbox" with role="option" items
+ * - Arrow keys navigate options, Enter selects, Escape closes
+ * - Full ARIA combobox pattern per WAI-ARIA 1.2
+ */
+export declare function Autocomplete({ options, value, onChange, onInputChange, placeholder, disabled, error, size, loading, noResultsText, className, }: AutocompleteProps): JSX_2.Element;
+
+export declare interface AutocompleteOption {
+    value: string;
+    label: string;
+}
+
+export declare interface AutocompleteProps {
+    /** Available options */
+    options: AutocompleteOption[];
+    /** Selected value */
+    value?: string;
+    /** Change handler — receives the selected value */
+    onChange?: (value: string) => void;
+    /** Callback when the text input changes */
+    onInputChange?: (inputValue: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show a loading spinner in the dropdown */
+    loading?: boolean;
+    /** Text shown when no results match */
+    noResultsText?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+
+/**
+ * Avatar — circular user image with initials fallback and optional status.
+ *
+ * Accessibility:
+ * - Image includes alt text when src is provided
+ * - Initials fallback uses aria-label with the full name
+ * - Status dot includes a visually-hidden label
+ * - Healthcare note: use avatars to identify care team members,
+ *   patients, and providers in clinical workflows
+ */
+export declare function Avatar({ src, alt, name, size, status, className, ...props }: AvatarProps): JSX_2.Element;
+
+export declare interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Full name used to generate initials fallback */
+    name?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Optional status dot overlay */
+    status?: 'active' | 'inactive' | 'busy' | 'away';
+}
+
+/**
+ * Backdrop — fullscreen overlay primitive.
+ *
+ * Backdrop provides the scrim layer behind Modal, Drawer, and Dialog.
+ * It handles body scroll locking, click-to-dismiss, and fade animation.
+ *
+ * Accessibility:
+ * - aria-hidden="true" — the backdrop itself is not interactive content
+ * - Focus management is the responsibility of the surface component (Modal, Drawer)
+ * - Body scroll lock prevents background content from scrolling under the overlay
+ */
+export declare function Backdrop({ open, onClick, disableClick, lockScroll, variant, className, children, ...props }: BackdropProps): JSX_2.Element | null;
+
+export declare interface BackdropProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /** Whether the backdrop is visible */
+    open: boolean;
+    /** Called when the backdrop is clicked */
+    onClick?: (e: MouseEvent_2<HTMLDivElement>) => void;
+    /** Whether clicking the backdrop should be ignored (e.g. mandatory dialog) */
+    disableClick?: boolean;
+    /** Whether to lock body scroll while open */
+    lockScroll?: boolean;
+    /** Visual intensity */
+    variant?: 'default' | 'light' | 'opaque';
+}
+
+export declare type BackInStockChannel = 'email' | 'sms';
+
+/**
+ * BackInStockForm — capture form shown on sold-out variants. Supports email
+ * and optional SMS capture with a channel toggle.
+ */
+export declare function BackInStockForm({ productName, variantLabel, channels, defaultChannel, submitLabel, note, submitted, successMessage, onSubscribe, className, ...rest }: BackInStockFormProps): JSX_2.Element;
+
+export declare interface BackInStockFormProps extends Omit<HTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+    productName: ReactNode;
+    /** e.g., "Size M / Oat" */
+    variantLabel?: ReactNode;
+    /** Channels offered. Defaults to email only. */
+    channels?: BackInStockChannel[];
+    defaultChannel?: BackInStockChannel;
+    submitLabel?: string;
+    note?: ReactNode;
+    submitted?: boolean;
+    successMessage?: ReactNode;
+    onSubscribe?: (input: {
+        channel: BackInStockChannel;
+        value: string;
+    }) => void;
+}
+
+/**
+ * Badge / StatusChip — small label for status or metadata.
+ *
+ * Accessibility:
+ * - Always include meaningful text content (not color alone)
+ * - In healthcare contexts, pair with text like "Active", "Pending",
+ *   "Critical" rather than relying on color to communicate status
+ */
+export declare function Badge({ status, className, children, ...props }: BadgeProps): JSX_2.Element;
+
+export declare interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Status variant */
+    status?: 'neutral' | 'success' | 'warning' | 'error' | 'info';
+}
+
+/**
+ * Banner — full-width banner for page-level messages.
+ *
+ * Accessibility:
+ * - Uses role="alert" for error/warning (assertive announcement)
+ * - Uses role="status" for info/success (polite announcement)
+ * - Icon + color + text ensures meaning is communicated multiple ways
+ * - Dismiss button has accessible label
+ */
+export declare function Banner({ status, dismissible, onDismiss, action, children, className, ...props }: BannerProps): JSX_2.Element;
+
+export declare interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Status variant */
+    status?: BannerStatus;
+    /** Whether the banner can be dismissed */
+    dismissible?: boolean;
+    /** Called when dismiss button is clicked */
+    onDismiss?: () => void;
+    /** Optional action element */
+    action?: ReactNode;
+    /** Banner content */
+    children: ReactNode;
+}
+
+export declare type BannerStatus = 'info' | 'success' | 'warning' | 'error';
+
+/**
+ * Bazaar BarChart — for categorical comparisons.
+ *
+ * Set `stacked` for stacked bars, `horizontal` for horizontal layout
+ * (better for long category labels).
+ */
+export declare function BarChart<T extends Record<string, unknown>>({ data, xKey, series, height, showLegend, showGrid, stacked, horizontal, valueFormatter, referenceLines, state, ...cardProps }: BarChartProps<T>): JSX_2.Element;
+
+export declare interface BarChartProps<T extends Record<string, unknown>> extends Omit<ChartCardProps, 'children'> {
+    data: T[];
+    xKey: keyof T & string;
+    series: ChartSeries<T>[];
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    /** Stack bars (renders as a stacked bar chart) */
+    stacked?: boolean;
+    /** Render bars horizontally */
+    horizontal?: boolean;
+    valueFormatter?: ValueFormatter;
+    referenceLines?: {
+        value: number;
+        label?: string;
+    }[];
+}
+
+/**
+ * Token-driven chart theme. Used to style axes, gridlines, tooltips,
+ * legends, etc. so every chart in Bazaar feels like part of one system.
+ */
+export declare const bazaarChartTheme: {
+    readonly axis: {
+        readonly stroke: "var(--bazaar-data-vis-axis)";
+        readonly fontSize: 12;
+        readonly fontFamily: "var(--bazaar-font-family-sans)";
+        readonly tickColor: "var(--bazaar-color-text-muted)";
+    };
+    readonly grid: {
+        readonly stroke: "var(--bazaar-data-vis-gridline)";
+        readonly strokeDasharray: "3 3";
+    };
+    readonly tooltip: {
+        readonly background: "var(--bazaar-color-surface-overlay)";
+        readonly border: "var(--bazaar-color-border-default)";
+        readonly text: "var(--bazaar-color-text-primary)";
+        readonly muted: "var(--bazaar-color-text-secondary)";
+    };
+    readonly reference: {
+        readonly stroke: "var(--bazaar-color-text-muted)";
+        readonly strokeDasharray: "4 4";
+    };
+};
+
+/**
+ * The Bazaar chart series palette. Order is intentional — earlier colors
+ * are used first so simple charts always pull from the most credible,
+ * brand-aligned hues before moving into supporting accents.
+ */
+export declare const bazaarSeriesPalette: readonly ["var(--bazaar-data-vis-1)", "var(--bazaar-data-vis-2)", "var(--bazaar-data-vis-3)", "var(--bazaar-data-vis-4)", "var(--bazaar-data-vis-5)"];
+
+/** Border aliases */
+export declare const border: {
+    readonly default: "#D9D2C1";
+    readonly strong: "#B8AE97";
+    readonly inverse: "#2E2A23";
+};
+
+export declare const borderStyle: {
+    readonly default: "solid";
+};
+
+export declare const borderWidth: {
+    readonly none: "0";
+    readonly hairline: "1px";
+    readonly medium: "2px";
+    readonly strong: "3px";
+};
+
+export declare interface BrandPillar {
+    id: string;
+    title: string;
+    body?: ReactNode;
+    /** Optional small icon or glyph (ReactNode). */
+    icon?: ReactNode;
+}
+
+/** Brand primary palette — Warm Ink. Near-black scale used for text,
+ *  primary CTA surfaces, and high-emphasis elevation. */
+export declare const brandPrimary: {
+    readonly 50: "#F5F3EE";
+    readonly 100: "#E5E1D5";
+    readonly 200: "#C6BFAC";
+    readonly 300: "#8A816B";
+    readonly 400: "#5E5749";
+    readonly 500: "#433D32";
+    readonly 600: "#2E2A23";
+    readonly 700: "#1F1C17";
+    readonly 800: "#161310";
+    readonly 900: "#0E0B09";
+};
+
+/** Brand secondary palette — Terracotta / Clay. Accent color, reserved
+ *  for sale badges, promo surfaces, and editorial highlights. */
+export declare const brandSecondary: {
+    readonly 50: "#FBEEE4";
+    readonly 100: "#F6D9C5";
+    readonly 200: "#ECB690";
+    readonly 300: "#DF9662";
+    readonly 400: "#C96C3E";
+    readonly 500: "#AB5428";
+    readonly 600: "#873F1C";
+    readonly 700: "#662E13";
+    readonly 800: "#4A2110";
+    readonly 900: "#2E160A";
+};
+
+/**
+ * BrandStory — the "about" module. Usually placed on the homepage mid-way
+ * or on a dedicated About page. Combines a short manifesto, a hero image,
+ * a pull-quote and the brand's core pillars.
+ */
+export declare function BrandStory({ eyebrow, headline, body, image, pillars, pullQuote, cta, className, ...rest }: BrandStoryProps): JSX_2.Element;
+
+export declare interface BrandStoryProps extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    headline: string;
+    /** Paragraphs of body copy. */
+    body?: ReactNode;
+    image?: {
+        src?: string;
+        alt: string;
+        seed?: string;
+    };
+    /** 2–4 short pillars summarising what the brand stands for. */
+    pillars?: BrandPillar[];
+    /** Pull-quote rendered between body and pillars. */
+    pullQuote?: {
+        text: string;
+        attribution?: string;
+    };
+    cta?: {
+        label: string;
+        onClick?: () => void;
+    };
+}
+
+export declare interface BreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** Optional URL for link items */
+    href?: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+
+/**
+ * Breadcrumbs — navigational aid showing the current location within a hierarchy.
+ *
+ * Accessibility:
+ * - Wrapped in <nav> with aria-label="Breadcrumb"
+ * - Uses semantic <ol>/<li> list structure
+ * - Last item has aria-current="page" to indicate current location
+ * - Separator is aria-hidden so screen readers skip it
+ */
+export declare function Breadcrumbs({ items, separator, className }: BreadcrumbsProps): JSX_2.Element;
+
+export declare interface BreadcrumbsProps {
+    /** Breadcrumb path items */
+    items: BreadcrumbItem[];
+    /** Separator between items */
+    separator?: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+
+export declare interface BundleItem {
+    product: Product;
+    /** If true, user cannot deselect this item (the anchor product). */
+    required?: boolean;
+    /** Start selected (default true). */
+    defaultSelected?: boolean;
+}
+
+/**
+ * BundleModule — "frequently bought together" / outfit-builder block.
+ *
+ * Renders media tiles joined by plus glyphs, each with a checkbox-style
+ * toggle, and a summarised bundle price with discount relative to the sum
+ * of individual prices.
+ */
+export declare function BundleModule({ title, items, discountPercent, bundlePrice, onAddBundle, ctaLabel, className, ...rest }: BundleModuleProps): JSX_2.Element;
+
+export declare interface BundleModuleProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    items: BundleItem[];
+    /** Percent discount applied to the bundle total (e.g. 10 for 10% off). */
+    discountPercent?: number;
+    /** Fixed amount bundled price — overrides discountPercent. */
+    bundlePrice?: Money;
+    onAddBundle?: (selected: Product[]) => void;
+    ctaLabel?: string;
+}
+
+/**
+ * Button — primary interactive element.
+ *
+ * Accessibility:
+ * - Uses native <button> for keyboard and screen reader support
+ * - aria-disabled used during loading to maintain focusability
+ * - aria-busy signals loading state to assistive technology
+ * - Minimum 44px touch target on md/lg sizes
+ */
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+/**
+ * ButtonGroup — layout wrapper for grouping related buttons.
+ *
+ * Renders multiple Button children in a connected or spaced row/column.
+ * When connected, adjacent buttons share borders for a toolbar appearance.
+ *
+ * Accessibility:
+ * - Uses role="group" with optional aria-label for grouping context
+ * - Individual buttons retain their own keyboard navigation
+ */
+export declare function ButtonGroup({ orientation, size, connected, className, children, ...props }: ButtonGroupProps): JSX_2.Element;
+
+export declare interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Layout direction */
+    orientation?: 'horizontal' | 'vertical';
+    /** Size applied to all child buttons */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether buttons should share borders (connected style) */
+    connected?: boolean;
+}
+
+export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    /** Size of the button */
+    size?: 'sm' | 'md' | 'lg';
+    /** Full width */
+    fullWidth?: boolean;
+    /** Loading state — disables interaction and shows spinner */
+    loading?: boolean;
+    /** Icon before the label */
+    iconLeft?: ReactNode;
+    /** Icon after the label */
+    iconRight?: ReactNode;
+}
+
+export declare interface CampaignCTA {
+    label: string;
+    onClick?: () => void;
+    /** Renders as an outline-style button. Default is solid. */
+    variant?: 'primary' | 'secondary';
+}
+
+/**
+ * CampaignHero — headline/CTA banner for the homepage or a collection
+ * landing. Three layouts: overlay (copy on top of imagery), split-left
+ * (copy on left, image on right), split-right (inverse).
+ */
+export declare function CampaignHero({ eyebrow, headline, body, ctas, image, variant, scrim, height, tone, className, ...rest }: CampaignHeroProps): JSX_2.Element;
+
+export declare interface CampaignHeroProps extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    headline: string;
+    body?: ReactNode;
+    /** Primary + optional secondary CTA. */
+    ctas?: CampaignCTA[];
+    /** Background image seed/alt (uses MediaPlaceholder when src is absent). */
+    image?: {
+        src?: string;
+        alt: string;
+        seed?: string;
+    };
+    /** Placement of copy relative to the image. Defaults to 'overlay'. */
+    variant?: 'overlay' | 'split-left' | 'split-right';
+    /** Overlay scrim opacity for readability in 'overlay' mode (0..1). */
+    scrim?: number;
+    /** Shorter/taller crop. */
+    height?: 'short' | 'medium' | 'tall';
+    /** Eyebrow color tone — 'dark' for over light imagery. */
+    tone?: 'light' | 'dark';
+}
+
+/**
+ * Card — surface container for grouping related content.
+ *
+ * Composes: Paper
+ *
+ * Card is a constrained Paper preset with two elevation levels and
+ * opinionated padding. Use Paper directly when you need full control
+ * over surface, elevation, and radius.
+ *
+ * Accessibility:
+ * - Uses semantic HTML; add role="region" + aria-label when card
+ *   represents a distinct content section
+ * - Border provides separation independent of shadow (not shadow alone)
+ */
+export declare function Card({ elevation, padding, className, children, ...props }: CardProps): JSX_2.Element;
+
+export declare interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Elevation level */
+    elevation?: 'flat' | 'raised';
+    /** Padding size */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+/**
+ * CartDrawer — off-canvas container for MiniCart or custom cart views.
+ *
+ * Adds a scrim, close affordance, and Escape-to-close. Focus management
+ * is the caller's responsibility — pair with your app's focus trap.
+ */
+export declare function CartDrawer({ open, onClose, title, side, width, children, className, ...rest }: CartDrawerProps): JSX_2.Element | null;
+
+export declare interface CartDrawerProps extends HTMLAttributes<HTMLDivElement> {
+    open: boolean;
+    onClose: () => void;
+    /** Drawer title — defaults to "Your bag". */
+    title?: string;
+    /** Side of the viewport to pin to. */
+    side?: 'right' | 'left';
+    /** Drawer width — CSS dimension. */
+    width?: string;
+    children?: ReactNode;
+}
+
+export declare interface CartLine {
+    id: string;
+    productId: string;
+    variantId?: string;
+    title: string;
+    brand?: string;
+    image?: ProductImage;
+    price: Money;
+    compareAtPrice?: Money;
+    quantity: number;
+    options?: CartLineOption[];
+    savedForLater?: boolean;
+}
+
+/**
+ * CartLineItem — thumbnail + title + option summary + quantity stepper +
+ * line total. The visual backbone of MiniCart, CartPage and order summaries.
+ */
+export declare function CartLineItem({ line, onQuantityChange, onRemove, onSaveForLater, density, hidePrice, readOnlyQuantity, className, ...rest }: CartLineItemProps): JSX_2.Element;
+
+export declare interface CartLineItemProps extends HTMLAttributes<HTMLDivElement> {
+    line: CartLine;
+    onQuantityChange?: (line: CartLine, next: number) => void;
+    onRemove?: (line: CartLine) => void;
+    onSaveForLater?: (line: CartLine) => void;
+    /** Compact density for mini-cart / drawer. */
+    density?: 'default' | 'compact';
+    /** Hide per-line price column (used when rendering in a price-free summary). */
+    hidePrice?: boolean;
+    /** Disable quantity changes (e.g. saved-for-later). */
+    readOnlyQuantity?: boolean;
+}
+
+export declare interface CartLineOption {
+    name: string;
+    value: string;
+}
+
+/**
+ * CartPage — full-width layout for the /cart route. Two-column on desktop
+ * (lines + summary rail), stacked on mobile. Renders a friendly empty
+ * state when no lines are present.
+ */
+export declare function CartPage({ lines, title, sidebar, below, emptyCta, onEmptyCta, onQuantityChange, onRemove, onSaveForLater, className, ...rest }: CartPageProps): JSX_2.Element;
+
+export declare interface CartPageProps extends HTMLAttributes<HTMLDivElement> {
+    lines: CartLine[];
+    title?: string;
+    /** Right-rail slot — typically a CartSummary. */
+    sidebar: ReactNode;
+    /** Content shown below the lines, above the footer — saved-for-later, cross-sells. */
+    below?: ReactNode;
+    /** Empty-state CTA. */
+    emptyCta?: string;
+    onEmptyCta?: () => void;
+    onQuantityChange?: (line: CartLine, next: number) => void;
+    onRemove?: (line: CartLine) => void;
+    onSaveForLater?: (line: CartLine) => void;
+}
+
+/**
+ * CartSummary — subtotal, adjustments (shipping, taxes, discounts) and
+ * total, plus optional slots for promos, reassurance and the primary CTA.
+ */
+export declare function CartSummary({ subtotal, lines, total, totalLabel, children, ctaSlot, density, className, ...rest }: CartSummaryProps): JSX_2.Element;
+
+export declare interface CartSummaryLine {
+    id: string;
+    label: string;
+    value: Money | string;
+    /** Render as a discount (green + negative sign). */
+    tone?: 'default' | 'discount' | 'muted';
+    /** Small helper text below the value, e.g. "Calculated at checkout". */
+    note?: string;
+}
+
+export declare interface CartSummaryProps extends HTMLAttributes<HTMLDivElement> {
+    subtotal: Money;
+    /** Ordered list of adjustment lines between subtotal and total. */
+    lines?: CartSummaryLine[];
+    total: Money;
+    totalLabel?: string;
+    /** Slot for FreeShippingMeter, CouponField, terms copy, etc. */
+    children?: ReactNode;
+    /** Primary CTA slot (e.g. "Checkout" button). */
+    ctaSlot?: ReactNode;
+    /** Compact density for drawer / mini-cart use. */
+    density?: 'default' | 'compact';
+}
+
+/**
+ * ChartCard — the unifying shell for every Bazaar chart component.
+ *
+ * Provides a consistent header (title, subtitle, headline metric, trend chip,
+ * actions), body slot, footer slot, and built-in loading / empty / error states.
+ *
+ * Every chart component in Bazaar composes this card so the system feels
+ * cohesive and developers get visual states for free.
+ */
+export declare function ChartCard({ title, subtitle, metric, trend, actions, footer, density, state, emptyState, loadingState, errorState, ariaLabel, className, children, ...props }: ChartCardProps): JSX_2.Element;
+
+export declare interface ChartCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Card title (e.g. "30-day patient adherence") */
+    title?: ReactNode;
+    /** Optional subtitle / explanation */
+    subtitle?: ReactNode;
+    /** Headline metric displayed prominently in the header */
+    metric?: ReactNode;
+    /** Trend chip beside the metric (use the Bazaar Badge or any node) */
+    trend?: ReactNode;
+    /** Optional actions (filters, export, etc.) rendered in the header */
+    actions?: ReactNode;
+    /** Footer content rendered below the chart body */
+    footer?: ReactNode;
+    /** Visual padding density */
+    density?: 'comfortable' | 'compact';
+    /** Render state — controls whether children, loader, empty, or error renders */
+    state?: ChartCardState;
+    /** Custom empty-state node */
+    emptyState?: ReactNode;
+    /** Custom loading-state node */
+    loadingState?: ReactNode;
+    /** Custom error-state node */
+    errorState?: ReactNode;
+    /** Optional aria-label for the chart region */
+    ariaLabel?: string;
+}
+
+export declare type ChartCardState = 'ready' | 'loading' | 'empty' | 'error';
+
+/**
+ * Bazaar-styled chart legend. Pass to Recharts via:
+ *   <Legend content={<ChartLegend />} />
+ */
+export declare function ChartLegend({ payload }: LegendProps): JSX_2.Element | null;
+
+export declare type ChartSeries<T = Record<string, unknown>> = {
+    /** Property key on the data row that holds the series value */
+    dataKey: keyof T & string;
+    /** Display label for tooltip / legend */
+    label?: string;
+    /** Optional explicit color (defaults to Bazaar palette) */
+    color?: string;
+};
+
+/**
+ * Bazaar-styled tooltip used by every chart in the system.
+ *
+ * Pass directly to Recharts `<Tooltip content={<ChartTooltip />} />`.
+ */
+export declare function ChartTooltip({ active, payload, label, valueFormatter, labelFormatter, }: ChartTooltipProps): JSX_2.Element | null;
+
+export declare interface ChartTooltipProps extends TooltipProps_2<number, string> {
+    /** Optional formatter for displayed values */
+    valueFormatter?: ValueFormatter;
+    /** Optional formatter for the tooltip label (e.g. axis category) */
+    labelFormatter?: (label: string) => string;
+}
+
+/**
+ * Checkbox — boolean toggle with label.
+ *
+ * Accessibility:
+ * - Uses native <input type="checkbox"> for full keyboard/screen reader support
+ * - Checkmark is CSS-only, no JS required for visual state
+ * - Label is clickable and linked to input
+ * - 44px minimum touch target maintained via padding
+ */
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+/**
+ * CheckboxGroup — group of checkboxes with fieldset/legend for accessibility.
+ *
+ * Accessibility:
+ * - Uses <fieldset> and <legend> for semantic grouping
+ * - Error message linked via role="alert"
+ * - Each checkbox is individually focusable
+ */
+export declare function CheckboxGroup({ label, name, options, value, onChange, error, orientation, disabled, className, }: CheckboxGroupProps): JSX_2.Element;
+
+export declare interface CheckboxGroupOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare interface CheckboxGroupProps {
+    /** Group label rendered as fieldset legend */
+    label: string;
+    /** Shared name attribute for all checkboxes */
+    name: string;
+    /** Array of checkbox options */
+    options: CheckboxGroupOption[];
+    /** Currently selected values */
+    value?: string[];
+    /** Change handler — receives updated array of selected values */
+    onChange?: (value: string[]) => void;
+    /** Error message */
+    error?: string;
+    /** Layout direction */
+    orientation?: 'vertical' | 'horizontal';
+    /** Disabled state for all checkboxes */
+    disabled?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+
+export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Label text displayed next to the checkbox */
+    label?: string;
+    /** Error state */
+    error?: boolean;
+}
+
+/**
+ * CheckoutContactStep — email capture and optional marketing opt-in.
+ *
+ * Fully controlled; validation is caller's responsibility — surface errors
+ * via `emailError`.
+ */
+export declare function CheckoutContactStep({ value, onChange, emailError, title, signInSlot, className, ...rest }: CheckoutContactStepProps): JSX_2.Element;
+
+export declare interface CheckoutContactStepProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value: CheckoutContactValue;
+    onChange: (next: CheckoutContactValue) => void;
+    /** Validation error for the email field. */
+    emailError?: string;
+    title?: string;
+    /** Slot for "Already have an account? Sign in" link. */
+    signInSlot?: React.ReactNode;
+}
+
+export declare interface CheckoutContactValue {
+    email: string;
+    marketingOptIn?: boolean;
+}
+
+/**
+ * CheckoutOrderSummary — the right-rail (or collapsible on mobile) recap of
+ * the order during checkout. Combines line items with CartSummary math.
+ */
+export declare function CheckoutOrderSummary({ lines, subtotal, adjustments, total, defaultOpen, topSlot, footerSlot, className, ...rest }: CheckoutOrderSummaryProps): JSX_2.Element;
+
+export declare interface CheckoutOrderSummaryProps extends HTMLAttributes<HTMLDivElement> {
+    lines: CartLine[];
+    subtotal: Money;
+    adjustments?: CartSummaryLine[];
+    total: Money;
+    /** Start with the line-item list expanded (default false on desktop, true on mobile). */
+    defaultOpen?: boolean;
+    /** Slot above totals — e.g. CouponField. */
+    topSlot?: ReactNode;
+    /** Slot below the totals — terms, reassurance, etc. */
+    footerSlot?: ReactNode;
+}
+
+/**
+ * CheckoutShell — minimal, distraction-free layout for the checkout funnel.
+ *
+ * Strips global nav, pins the brand at top-left, optionally centers a
+ * CheckoutStepper, and renders a two-column grid (form + order summary)
+ * that stacks on mobile.
+ */
+export declare function CheckoutShell({ brand, stepperSlot, children, sidebar, footerSlot, className, ...rest }: CheckoutShellProps): JSX_2.Element;
+
+export declare interface CheckoutShellProps extends HTMLAttributes<HTMLDivElement> {
+    /** Brand slot — logo or wordmark. */
+    brand: ReactNode;
+    /** CheckoutStepper instance, rendered centered below the brand on desktop. */
+    stepperSlot?: ReactNode;
+    /** Main step form. */
+    children: ReactNode;
+    /** Right-rail order summary. */
+    sidebar?: ReactNode;
+    /** Footer slot — small-print links, trust seal, etc. */
+    footerSlot?: ReactNode;
+}
+
+export declare interface CheckoutStep {
+    id: string;
+    label: string;
+}
+
+/**
+ * CheckoutStepper — numbered progress indicator for multi-step checkout.
+ *
+ * Collapses to a compact "Step 2 of 4" label on narrow viewports.
+ */
+export declare function CheckoutStepper({ steps, currentStepId, onStepClick, className, ...rest }: CheckoutStepperProps): JSX_2.Element;
+
+export declare interface CheckoutStepperProps extends HTMLAttributes<HTMLElement> {
+    steps: CheckoutStep[];
+    currentStepId: string;
+    /** Allow clicking a completed step to jump back. */
+    onStepClick?: (step: CheckoutStep) => void;
+}
+
+/**
+ * Chip — compact interactive element for tags, filters, and selections.
+ *
+ * Distinct from Badge: Chip is interactive (clickable, deletable) and
+ * larger; Badge is a read-only status label.
+ *
+ * Accessibility:
+ * - Clickable chips render with role="button" and tabIndex
+ * - Delete button has an accessible aria-label
+ * - Disabled state applies aria-disabled
+ * - Healthcare note: useful for allergy tags, condition labels,
+ *   insurance plan tags, filter selections
+ */
+export declare const Chip: ForwardRefExoticComponent<ChipProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> {
+    /** Visual color variant */
+    color?: 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    /** Size */
+    size?: 'sm' | 'md';
+    /** Chip style */
+    variant?: 'filled' | 'outlined';
+    /** Icon or avatar slot (leading) */
+    icon?: ReactNode;
+    /** Whether the chip is clickable */
+    onClick?: (e: MouseEvent_2<HTMLSpanElement>) => void;
+    /** Show a delete/dismiss button */
+    onDelete?: (e: MouseEvent_2<HTMLButtonElement>) => void;
+    /** Disabled state */
+    disabled?: boolean;
+}
+
+/** Merge CSS module class names, filtering out falsy values */
+export declare function cn(...classes: (string | false | null | undefined)[]): string;
+
+/**
+ * CollapsiblePanel — a single collapsible section with animated expand/collapse.
+ *
+ * Accessibility:
+ * - Button trigger with aria-expanded
+ * - Content region with aria-labelledby linking to the trigger
+ * - Chevron icon rotates on expand/collapse
+ * - Supports both controlled and uncontrolled modes
+ */
+export declare function CollapsiblePanel({ title, defaultOpen, open: controlledOpen, onToggle, children, className, }: CollapsiblePanelProps): JSX_2.Element;
+
+export declare interface CollapsiblePanelProps {
+    /** Panel title */
+    title: string;
+    /** Whether panel is open by default (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onToggle?: (open: boolean) => void;
+    /** Panel content */
+    children: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+
+export declare function CollectionHero({ title, description, eyebrow, imageSrc, imageAlt, imageSeed, tone, actions, className, ...rest }: CollectionHeroProps): JSX_2.Element;
+
+export declare interface CollectionHeroProps extends HTMLAttributes<HTMLElement> {
+    title: string;
+    description?: string;
+    eyebrow?: string;
+    /** Image src — falls back to MediaPlaceholder gradient if omitted. */
+    imageSrc?: string;
+    imageAlt?: string;
+    imageSeed?: string;
+    /** Layout tone. "overlay" = image behind content; "side" = 2-column. */
+    tone?: 'overlay' | 'side';
+    /** CTA slot — usually 1–2 Buttons. */
+    actions?: ReactNode;
+}
+
+/**
+ * CollectionPageTemplate — product-listing-page shell. Composes header,
+ * breadcrumbs, collection hero, a toolbar (sort + active filter chips),
+ * a sticky left-rail FilterPanel, and a results column.
+ */
+export declare function CollectionPageTemplate({ header, footer, breadcrumbs, hero, toolbarLeft, toolbarRight, filters, results, pagination, className, ...rest }: CollectionPageTemplateProps): JSX_2.Element;
+
+export declare interface CollectionPageTemplateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'results'> {
+    header?: ReactNode;
+    footer?: ReactNode;
+    breadcrumbs?: ReactNode;
+    /** Hero / banner above the listing — CollectionHero is a natural fit. */
+    hero?: ReactNode;
+    /** Toolbar row — typically SearchResultsHeader on the left + SortMenu on the right. */
+    toolbarLeft?: ReactNode;
+    toolbarRight?: ReactNode;
+    /** Left-rail filters (FilterPanel). */
+    filters?: ReactNode;
+    /** Main results column — typically a ProductGrid. */
+    results: ReactNode;
+    /** Optional pagination/load-more row below the grid. */
+    pagination?: ReactNode;
+}
+
+/**
+ * ColorPicker — color selection input with swatch palette and native picker.
+ *
+ * Provides a swatch grid for quick selection plus a native `<input type="color">`
+ * fallback for custom colors.
+ *
+ * Accessibility:
+ * - Swatch buttons have aria-label with hex value
+ * - Selected swatch indicated with aria-pressed
+ * - Native color input provides full keyboard + assistive tech support
+ */
+export declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Current color value (hex) */
+    value?: string;
+    /** Called when color changes */
+    onChange?: (color: string) => void;
+    /** Predefined color swatches */
+    swatches?: string[];
+    /** Label */
+    label?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md';
+}
+
+export declare interface CommandItem {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional description shown below the label */
+    description?: string;
+    /** Leading icon */
+    icon?: ReactNode;
+    /** Group/category name */
+    group?: string;
+    /** Keyboard shortcut hint */
+    shortcut?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Custom search keywords (in addition to label) */
+    keywords?: string[];
+}
+
+/**
+ * CommandPalette — keyboard-driven command search dialog (Cmd+K pattern).
+ *
+ * Renders a modal search input with filterable command list,
+ * grouped results, keyboard navigation, and shortcut hints.
+ *
+ * Accessibility:
+ * - Uses combobox + listbox ARIA pattern
+ * - Arrow keys navigate items, Enter selects
+ * - Escape closes the palette
+ * - Focus is trapped within the dialog
+ * - aria-activedescendant tracks highlighted item
+ */
+export declare const CommandPalette: ForwardRefExoticComponent<CommandPaletteProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CommandPaletteProps {
+    /** Whether the palette is open */
+    open: boolean;
+    /** Called when the palette should close */
+    onClose: () => void;
+    /** Available commands */
+    items: CommandItem[];
+    /** Called when a command is selected */
+    onSelect: (item: CommandItem) => void;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Additional className for the overlay */
+    className?: string;
+}
+
+/**
+ * Container — max-width content wrapper with responsive padding.
+ *
+ * Provides consistent horizontal padding and a constrained max-width
+ * for page-level content sections.
+ *
+ * Accessibility:
+ * - Purely presentational — no ARIA roles needed
+ * - Use semantic HTML elements via the `as` prop (e.g., main, section)
+ */
+export declare const Container: ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLDivElement>>;
+
+export declare const container: {
+    readonly max: "1280px";
+    readonly reading: "720px";
+};
+
+export declare interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Max-width preset */
+    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Horizontal padding */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Center the container horizontally */
+    centered?: boolean;
+    /** Render as a different HTML element */
+    as?: ElementType;
+}
+
+export declare const controlSize: {
+    readonly sm: "32px";
+    readonly md: "40px";
+    readonly lg: "48px";
+};
+
+/**
+ * CouponField — promo/discount code entry with applied-code chips.
+ *
+ * Controlled error message for async validation. Pair with `collapsible`
+ * to tuck the input behind a disclosure link on slimmer summary panels.
+ */
+export declare function CouponField({ applied, onApply, onRemove, error, placeholder, collapsible, className, ...rest }: CouponFieldProps): JSX_2.Element;
+
+export declare interface CouponFieldProps extends Omit<HTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+    applied?: AppliedCoupon[];
+    onApply?: (code: string) => void | Promise<void>;
+    onRemove?: (code: string) => void;
+    /** Error state set by the caller after failed validation. */
+    error?: string;
+    placeholder?: string;
+    /** Render as a collapsed "Have a code?" link initially. */
+    collapsible?: boolean;
+}
+
+/**
+ * CrossSellStrip — compact "You might also like" row used inline in a cart
+ * or drawer. Each item exposes a one-tap add action (no variant pickers).
+ */
+export declare function CrossSellStrip({ title, products, onAdd, onSelectProduct, className, ...rest }: CrossSellStripProps): JSX_2.Element | null;
+
+export declare interface CrossSellStripProps extends HTMLAttributes<HTMLElement> {
+    title?: string;
+    products: Product[];
+    onAdd?: (product: Product) => void;
+    onSelectProduct?: (product: Product) => void;
+}
+
+/**
+ * Shared commerce primitives for Skyfall Bazaar.
+ * Kept intentionally small — the kit is presentational, callers map their
+ * own domain objects into these shapes at the boundary.
+ */
+export declare type CurrencyCode = 'USD' | 'EUR' | 'GBP' | 'CAD' | 'AUD' | 'JPY' | string;
+
+/**
+ * DataGrid — composable data grid built on Table primitives.
+ *
+ * Accessibility:
+ * - Built on semantic Table components (table/thead/tbody/tr/th/td)
+ * - Sortable columns use aria-sort
+ * - Selection checkboxes include accessible labels
+ * - Loading state announced via aria-busy
+ * - Healthcare note: designed for patient lists, lab results,
+ *   appointment schedules, and other clinical data views
+ */
+export declare function DataGrid<T extends Record<string, unknown>>({ columns, data, selectable, onSelectionChange, selectedRows, sortColumn, sortDirection, onSort, loading, emptyMessage, density, stickyHeader, striped, onRowClick, className, ...props }: DataGridProps<T>): JSX_2.Element;
+
+export declare interface DataGridColumn<T = Record<string, unknown>> {
+    /** Unique key for the column, used as the data accessor */
+    key: string;
+    /** Column header label */
+    header: ReactNode;
+    /** Custom render function for cell content */
+    render?: (value: unknown, row: T, rowIndex: number) => ReactNode;
+    /** Whether this column is sortable */
+    sortable?: boolean;
+    /** Column width (CSS value) */
+    width?: string | number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+
+export declare interface DataGridProps<T = Record<string, unknown>> extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Column definitions */
+    columns: DataGridColumn<T>[];
+    /** Data array */
+    data: T[];
+    /** Enable row selection with checkboxes */
+    selectable?: boolean;
+    /** Callback when selection changes, receives array of selected row indices */
+    onSelectionChange?: (selectedIndices: number[]) => void;
+    /** Currently selected row indices (controlled) */
+    selectedRows?: number[];
+    /** Current sort column key */
+    sortColumn?: string;
+    /** Current sort direction */
+    sortDirection?: SortDirection;
+    /** Callback when a sortable column header is clicked */
+    onSort?: (column: string, direction: SortDirection) => void;
+    /** Show loading skeleton */
+    loading?: boolean;
+    /** Message shown when data is empty */
+    emptyMessage?: string;
+    /** Row density */
+    density?: 'default' | 'compact' | 'comfortable';
+    /** Sticky header */
+    stickyHeader?: boolean;
+    /** Striped rows */
+    striped?: boolean;
+    /** Callback when a row is clicked */
+    onRowClick?: (row: T, index: number) => void;
+}
+
+/** Data visualization — warm commerce palette (account/admin charts). */
+export declare const dataVis: {
+    readonly 1: "#1F1C17";
+    readonly 2: "#C96C3E";
+    readonly 3: "#4A7C59";
+    readonly 4: "#B58235";
+    readonly 5: "#8A816B";
+    readonly gridline: "#ECE7DC";
+    readonly axis: "#8A816B";
+};
+
+/**
+ * DatePicker — styled native date input for consistent appearance.
+ *
+ * Accessibility:
+ * - Uses native input[type="date"] for built-in AT support
+ * - Date picker popup provided by the browser
+ * - aria-invalid signals error state
+ * - Consistent sizing with other Bazaar form controls
+ */
+export declare const DatePicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Minimum date (ISO format YYYY-MM-DD) */
+    min?: string;
+    /** Maximum date (ISO format YYYY-MM-DD) */
+    max?: string;
+}
+
+/**
+ * Convenience preset — spread `DEFAULT_TRUST_BADGES` into `items` to get
+ * Shipping, Returns, Secure, Sustainability, Packaging out of the box.
+ */
+export declare const DEFAULT_TRUST_BADGES: TrustBadgeItem[];
+
+/** Default number formatter — locale-aware, with sensible compact behavior */
+export declare const defaultValueFormatter: ValueFormatter;
+
+/**
+ * DeliveryEstimate — ZIP-based delivery promise block, shown on PDPs and
+ * in the cart. Leads with "Get it by {date}" and supports a "change
+ * location" affordance when already personalized.
+ */
+export declare function DeliveryEstimate({ destination, arrivesBy, orderByAt, carrier, shippingTier, note, onChangeLocation, changeLocationLabel, className, ...rest }: DeliveryEstimateProps): JSX_2.Element;
+
+export declare interface DeliveryEstimateProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Destination description (e.g., "Brooklyn, NY 11222"). Leave blank to show the CTA. */
+    destination?: string;
+    /** ISO date of the soonest eligible delivery. */
+    arrivesBy?: string;
+    /** ISO cutoff for same-day processing — e.g. "2026-04-15T15:00:00". */
+    orderByAt?: string;
+    /** Shipping carrier (e.g., "UPS Ground"). */
+    carrier?: string;
+    /** Eligible shipping tier. */
+    shippingTier?: 'standard' | 'express' | 'overnight';
+    /** Additional promise copy, e.g. "Free over $75". */
+    note?: ReactNode;
+    /** Called when the user wants to change the ZIP/location. */
+    onChangeLocation?: () => void;
+    changeLocationLabel?: string;
+}
+
+/**
+ * DescriptionList — semantic key-value display using dl/dt/dd.
+ *
+ * Accessibility:
+ * - Uses <dl>, <dt>, <dd> semantic HTML
+ * - Screen readers will announce terms and definitions
+ * - Healthcare note: ideal for patient demographics, encounter details,
+ *   and insurance information panels
+ */
+export declare function DescriptionList({ items, layout, columns, className, style, ...props }: DescriptionListProps): JSX_2.Element;
+
+export declare interface DescriptionListItem {
+    /** Label / term */
+    label: ReactNode;
+    /** Value / description */
+    value: ReactNode;
+}
+
+export declare interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    /** Array of label-value pairs */
+    items: DescriptionListItem[];
+    /** Layout mode */
+    layout?: 'vertical' | 'horizontal' | 'grid';
+    /** Number of columns for grid layout */
+    columns?: number;
+}
+
+/**
+ * Dialog — confirmation dialog built on native <dialog>.
+ *
+ * Accessibility:
+ * - Uses native <dialog> for built-in focus trapping and Escape handling
+ * - aria-labelledby links to the title
+ * - aria-describedby links to the message
+ * - Focus moves to cancel button on open (safe default)
+ * - Escape key closes the dialog
+ * - Backdrop click cancels
+ */
+export declare function Dialog({ open, onConfirm, onCancel, title, message, confirmLabel, cancelLabel, variant, loading, className, }: DialogProps): JSX_2.Element;
+
+export declare interface DialogProps {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Called when the user confirms */
+    onConfirm: () => void;
+    /** Called when the user cancels */
+    onCancel: () => void;
+    /** Dialog title */
+    title: string;
+    /** Message or content */
+    message: string | ReactNode;
+    /** Confirm button label */
+    confirmLabel?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Visual variant */
+    variant?: 'default' | 'danger';
+    /** Show loading state on confirm button */
+    loading?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+
+/**
+ * Divider — horizontal rule for visual separation.
+ *
+ * Accessibility:
+ * - Uses semantic <hr> which conveys a thematic break
+ * - role="separator" is implicit for <hr>
+ */
+export declare function Divider({ spacing, className, ...props }: DividerProps): JSX_2.Element;
+
+export declare interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    /** Spacing above and below */
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+/**
+ * Drawer — side panel overlay for detail views and forms.
+ *
+ * Accessibility:
+ * - Uses native <dialog> element for focus trapping
+ * - Escape key closes the drawer
+ * - aria-labelledby links to the title
+ * - Scrim click closes the drawer
+ * - Healthcare note: use drawers for patient detail views, order entry,
+ *   and contextual forms that don't require full-page navigation
+ */
+export declare function Drawer({ open, onClose, title, size, position, footer, className, children, }: DrawerProps): JSX_2.Element;
+
+export declare interface DrawerProps {
+    /** Additional className */
+    className?: string;
+    /** Whether the drawer is visible */
+    open: boolean;
+    /** Called when the drawer should close */
+    onClose: () => void;
+    /** Drawer title */
+    title: ReactNode;
+    /** Width preset */
+    size?: 'sm' | 'md' | 'lg';
+    /** Which side the drawer slides from */
+    position?: 'left' | 'right';
+    /** Footer actions */
+    footer?: ReactNode;
+    /** Drawer body content */
+    children?: ReactNode;
+}
+
+export declare const duration: {
+    readonly fast: "120ms";
+    readonly base: "180ms";
+    readonly slow: "240ms";
+};
+
+export declare const easing: {
+    readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
+};
+
+/**
+ * EditorialProductStory — long-form editorial layout with a sticky product
+ * rail that shadows the story. Alternates image-left / image-right beats.
+ */
+export declare function EditorialProductStory({ eyebrow, headline, intro, beats, product, onBuy, buyLabel, className, ...rest }: EditorialProductStoryProps): JSX_2.Element;
+
+export declare interface EditorialProductStoryBeat {
+    id: string;
+    image: {
+        src?: string;
+        alt: string;
+        seed?: string;
+    };
+    heading?: string;
+    body?: ReactNode;
+    caption?: string;
+}
+
+export declare interface EditorialProductStoryProps extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    headline: string;
+    intro?: ReactNode;
+    beats: EditorialProductStoryBeat[];
+    /** Product the story is about — pinned to the sticky side-rail. */
+    product: Product;
+    onBuy?: (product: Product) => void;
+    buyLabel?: string;
+}
+
+/**
+ * EmptyState — centered placeholder for empty tables, lists, or views.
+ *
+ * Accessibility:
+ * - Uses semantic heading and paragraph elements
+ * - Healthcare note: provide clear, actionable guidance in empty states
+ *   (e.g., "No patients match your filters. Try adjusting your search.")
+ */
+export declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): JSX_2.Element;
+
+export declare interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+    /** Optional icon displayed above the title */
+    icon?: ReactNode;
+    /** Title text */
+    title: string;
+    /** Descriptive text below the title */
+    description?: string;
+    /** Optional action element (e.g., a button) */
+    action?: ReactNode;
+}
+
+/**
+ * ErrorState — centered error placeholder with retry action.
+ *
+ * Composes: Typography
+ *
+ * Use in place of content when a data fetch fails, a page errors,
+ * or a section cannot render. Provides clear messaging, an optional
+ * error code for support, and a retry action.
+ *
+ * Accessibility:
+ * - Uses role="alert" to announce the error to screen readers
+ * - Action button receives focus for quick retry
+ */
+export declare function ErrorState({ title, description, icon, action, errorCode, className, ...props }: ErrorStateProps): JSX_2.Element;
+
+export declare interface ErrorStateProps extends HTMLAttributes<HTMLDivElement> {
+    /** Error title */
+    title?: string;
+    /** Descriptive message */
+    description?: string;
+    /** Custom icon (defaults to a warning icon) */
+    icon?: ReactNode;
+    /** Retry action element (e.g., a button) */
+    action?: ReactNode;
+    /** Error code or reference for support */
+    errorCode?: string;
+}
+
+/**
+ * ExpressCheckout — row of wallet buttons that bypass the multi-step form.
+ *
+ * Presentational only: the actual wallet SDK integration is expected to live
+ * in the `onClick` handler.
+ */
+export declare function ExpressCheckout({ methods, heading, divider, className, ...rest }: ExpressCheckoutProps): JSX_2.Element;
+
+export declare interface ExpressCheckoutProps extends HTMLAttributes<HTMLDivElement> {
+    methods: ExpressMethod[];
+    /** Legend shown above the buttons. */
+    heading?: string;
+    /** Divider copy shown below ("or"). */
+    divider?: string;
+}
+
+export declare interface ExpressMethod {
+    brand: PaymentBrand;
+    label?: string;
+    onClick?: () => void;
+}
+
+/**
+ * FeaturedCollection — editorial collection module with a hero image, a
+ * copy block and a tight grid of product cards. Use to merchandise a
+ * drop or curation on the homepage.
+ */
+export declare function FeaturedCollection({ eyebrow, headline, body, image, products, layout, cta, onSelectProduct, className, ...rest }: FeaturedCollectionProps): JSX_2.Element;
+
+export declare interface FeaturedCollectionProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'> {
+    eyebrow?: string;
+    headline: string;
+    body?: ReactNode;
+    /** Hero imagery for the collection. */
+    image: {
+        src?: string;
+        alt: string;
+        seed?: string;
+    };
+    products: Product[];
+    /** Layout — 'image-left' places hero on the left with products in a 2×2 grid. */
+    layout?: 'image-left' | 'image-right' | 'stacked';
+    cta?: {
+        label: string;
+        onClick?: () => void;
+    };
+    onSelectProduct?: (product: Product) => void;
+}
+
+/**
+ * FileUpload — dropzone for file upload with click and drag support.
+ *
+ * Accessibility:
+ * - Keyboard accessible via Enter/Space to open file dialog
+ * - Uses role="button" on the dropzone
+ * - aria-describedby links to instructions
+ * - File list announced after selection
+ */
+export declare function FileUpload({ accept, multiple, maxSize, onFilesSelected, disabled, error, className, }: FileUploadProps): JSX_2.Element;
+
+export declare interface FileUploadProps {
+    /** Accepted file types (e.g., ".pdf,.jpg,image/*") */
+    accept?: string;
+    /** Allow multiple files */
+    multiple?: boolean;
+    /** Max file size in bytes */
+    maxSize?: number;
+    /** Callback when files are selected or dropped */
+    onFilesSelected?: (files: File[]) => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error message */
+    error?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+
+export declare interface FilterGroup {
+    id: string;
+    title: string;
+    kind: FilterKind;
+    options?: FilterOption[];
+    /** For price groups — current low/high in major units. */
+    min?: number;
+    max?: number;
+    /** Initial expanded state (default true). */
+    defaultExpanded?: boolean;
+}
+
+export declare type FilterKind = 'checkbox' | 'swatch' | 'price' | 'rating';
+
+export declare interface FilterOption {
+    value: string;
+    label: string;
+    /** Shown as the subtle count on the right (e.g. 42). */
+    count?: number;
+    /** For swatch filters — CSS color. */
+    swatchColor?: string;
+}
+
+/**
+ * FilterPanel — left-rail faceted navigation for collection pages.
+ *
+ * Supports checkbox, color-swatch, and price-range facets. Controlled via
+ * `selected` + `onChange` so callers own query-string state.
+ */
+export declare function FilterPanel({ groups, selected, onChange, onClearAll, title, className, ...rest }: FilterPanelProps): JSX_2.Element;
+
+export declare interface FilterPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    groups: FilterGroup[];
+    /** Map of group id -> selected values (or for price: [min, max]). */
+    selected?: Record<string, string[] | [number, number] | undefined>;
+    onChange?: (groupId: string, next: string[] | [number, number]) => void;
+    onClearAll?: () => void;
+    title?: string;
+}
+
+export declare const focusRing: {
+    readonly width: "3px";
+    readonly color: "rgba(47, 111, 228, 0.28)";
+    readonly offset: "2px";
+    readonly outlineColor: "#2F6FE4";
+};
+
+export declare const fontFamily: {
+    readonly sans: "\"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+    readonly display: "\"Fraunces\", \"Inter\", system-ui, serif";
+    readonly mono: "\"IBM Plex Mono\", \"SFMono-Regular\", Consolas, monospace";
+};
+
+export declare const fontSize: {
+    readonly 'display-lg': "40px";
+    readonly 'display-md': "32px";
+    readonly 'heading-xl': "28px";
+    readonly 'heading-lg': "24px";
+    readonly 'heading-md': "20px";
+    readonly 'heading-sm': "18px";
+    readonly 'body-lg': "16px";
+    readonly 'body-md': "14px";
+    readonly 'body-sm': "13px";
+    readonly 'label-lg': "14px";
+    readonly 'label-md': "13px";
+    readonly caption: "12px";
+    readonly data: "14px";
+    readonly code: "13px";
+};
+
+export declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+
+export declare interface FooterColumn {
+    id: string;
+    title: string;
+    links: FooterLink[];
+}
+
+export declare interface FooterLink {
+    id: string;
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+
+export declare interface FooterSocial {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: ReactNode;
+}
+
+/**
+ * Format a Money value for display. Prefers the caller-supplied `display`
+ * string, otherwise uses Intl.NumberFormat with currency style.
+ */
+export declare function formatMoney(money: Money, locale?: string): string;
+
+/**
+ * FormField — composable wrapper that renders Label + input + HelperText/error.
+ *
+ * Accessibility:
+ * - Generates aria-describedby linking between input and helper/error text
+ * - Error messages use role="alert" via HelperText
+ * - Required indicator on Label
+ * - Disabled state dims the entire field
+ */
+export declare function FormField({ label, htmlFor, required, error, helperText, children, disabled, className, }: FormFieldProps): JSX_2.Element;
+
+export declare interface FormFieldProps {
+    /** Label text for the field */
+    label?: string;
+    /** HTML for attribute to associate label with input */
+    htmlFor?: string;
+    /** Mark field as required */
+    required?: boolean;
+    /** Error message string — renders HelperText in error state */
+    error?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** The form control element (Input, Select, Textarea, etc.) */
+    children: ReactNode;
+    /** Disabled state — visually dims the field */
+    disabled?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+
+/**
+ * FreeShippingMeter — progress indicator toward a free-shipping threshold.
+ *
+ * Animates to a green "unlocked" state when subtotal >= threshold. Intended
+ * for placement above the cart list, in the mini-cart header, or at the top
+ * of checkout.
+ */
+export declare function FreeShippingMeter({ subtotal, threshold, unlockedMessage, progressMessage, size, className, ...rest }: FreeShippingMeterProps): JSX_2.Element;
+
+export declare interface FreeShippingMeterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current cart subtotal. */
+    subtotal: Money;
+    /** Threshold that unlocks free shipping. */
+    threshold: Money;
+    /** Override the "You unlocked free shipping" message. */
+    unlockedMessage?: string;
+    /** Override the progress message — receives the remaining Money value. */
+    progressMessage?: (remaining: Money) => string;
+    size?: 'sm' | 'md';
+}
+
+/**
+ * Resolve a series color by index, wrapping the palette if more series
+ * exist than available colors. Accepts an explicit override.
+ */
+export declare function getSeriesColor(index: number, override?: string): string;
+
+/**
+ * Grid — CSS grid layout primitive.
+ *
+ * Provides a responsive grid with preset column counts or auto-fill
+ * behavior based on minimum item width.
+ *
+ * Accessibility:
+ * - Purely presentational — no ARIA roles needed
+ * - Grid layout does not affect reading order for screen readers
+ */
+export declare const Grid: ForwardRefExoticComponent<GridProps & RefAttributes<HTMLDivElement>>;
+
+export declare const grid: {
+    readonly columns: 12;
+    readonly gutter: "24px";
+    readonly margin: {
+        readonly desktop: "32px";
+        readonly tablet: "24px";
+        readonly mobile: "16px";
+    };
+};
+
+export declare interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of columns (1-12) or 'auto' for auto-fill */
+    columns?: number | 'auto';
+    /** Gap between grid items */
+    gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Minimum item width when columns='auto' */
+    minItemWidth?: number;
+    /** Align items vertically */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+}
+
+/**
+ * HelperText — descriptive or error text beneath a form field.
+ *
+ * Accessibility:
+ * - Link to input via aria-describedby on the input, matching this element's id
+ * - Error messages use role="alert" for immediate screen reader announcement
+ * - Error state uses both color and icon (not color alone)
+ */
+export declare function HelperText({ error, className, children, ...props }: HelperTextProps): JSX_2.Element;
+
+export declare interface HelperTextProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Render as error message */
+    error?: boolean;
+}
+
+export declare interface HomePageSection {
+    id: string;
+    content: ReactNode;
+    /** Full-bleed section (no padding/max-width). */
+    bleed?: boolean;
+    /** Muted background wrapper while keeping inner max-width. */
+    muted?: boolean;
+}
+
+/**
+ * HomePageTemplate — marketing home-page shell. Composes a header, a hero
+ * slot, an arbitrary list of sections (normal, bleed, or muted), and a
+ * footer.
+ */
+export declare function HomePageTemplate({ header, footer, hero, sections, className, ...rest }: HomePageTemplateProps): JSX_2.Element;
+
+export declare interface HomePageTemplateProps extends HTMLAttributes<HTMLDivElement> {
+    header?: ReactNode;
+    footer?: ReactNode;
+    /** Hero module above the fold — rendered full-bleed by default. */
+    hero?: ReactNode;
+    sections?: HomePageSection[];
+}
+
+/**
+ * IconButton — icon-only interactive button.
+ *
+ * Accessibility:
+ * - aria-label is required to provide screen reader context
+ * - Meets 44px minimum touch target at md/lg sizes
+ */
+export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Accessible label (required — icon-only buttons need text for screen readers) */
+    'aria-label': string;
+    /** The icon element */
+    icon: ReactNode;
+    /** Visual variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export declare const iconSize: {
+    readonly xs: "12px";
+    readonly sm: "16px";
+    readonly md: "20px";
+    readonly lg: "24px";
+};
+
+/**
+ * InputGroup — wrapper that adds prefix/suffix addons to an input.
+ *
+ * Wraps a TextField (or other input) with leading/trailing elements
+ * like icons, currency symbols, units, or action buttons.
+ *
+ * Accessibility:
+ * - Addons are presentational and should not duplicate input labels
+ * - Use aria-describedby on the input to associate addon context
+ */
+export declare function InputGroup({ startAddon, endAddon, size, error, disabled, className, children, }: InputGroupProps): JSX_2.Element;
+
+export declare interface InputGroupProps {
+    /** Content rendered before the input (e.g., icon, label, currency symbol) */
+    startAddon?: ReactNode;
+    /** Content rendered after the input (e.g., icon, button, unit label) */
+    endAddon?: ReactNode;
+    /** Size variant — matches TextField sizes */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional className */
+    className?: string;
+    /** Input element */
+    children: ReactNode;
+}
+
+/**
+ * InventoryIndicator — compact stock-state pill with a tone-coded dot.
+ *
+ * Pairs with a ProductBuyBox to answer the "should I buy this?" question
+ * at a glance.
+ */
+export declare function InventoryIndicator({ state, size, className, children, ...rest }: InventoryIndicatorProps): JSX_2.Element;
+
+export declare interface InventoryIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    state: InventoryState;
+    /** Size variant. */
+    size?: 'sm' | 'md';
+}
+
+export declare interface InventoryState {
+    status: InventoryStatus;
+    remaining?: number;
+    expectedDate?: string;
+}
+
+export declare type InventoryStatus = 'in-stock' | 'low-stock' | 'out-of-stock' | 'preorder' | 'backorder';
+
+/**
+ * Kbd — keyboard shortcut / key indicator.
+ *
+ * Renders an inline `<kbd>` element styled to look like a physical key.
+ * Use to display keyboard shortcuts in menus, tooltips, and documentation.
+ *
+ * Accessibility:
+ * - Uses semantic <kbd> element for screen readers
+ * - Screen readers will announce the content as keyboard input
+ */
+export declare function Kbd({ size, className, children, ...props }: KbdProps): JSX_2.Element;
+
+export declare interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /** Size variant */
+    size?: 'sm' | 'md';
+}
+
+/**
+ * KpiStatCard — premium stat card with optional inline sparkline.
+ *
+ * The chart-aware evolution of StatCard. Use for headline KPIs in
+ * dashboards. Pair with `inverse` for metrics where a decrease is positive
+ * (e.g. wait time, error rate).
+ *
+ * Accessibility:
+ * - Trend icons are aria-hidden; meaning is conveyed in visible text plus an
+ *   sr-only direction phrase.
+ * - Sparkline accepts `aria-label` for screen reader trend description.
+ */
+export declare function KpiStatCard({ label, value, unit, change, changeLabel, trend, inverse, icon, sparklineData, sparklineColor, sparklineVariant, density, className, ...props }: KpiStatCardProps): JSX_2.Element;
+
+export declare interface KpiStatCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Metric label (e.g. "Active patients") */
+    label: string;
+    /** Headline value (e.g. 1284 or "98.2%") */
+    value: ReactNode;
+    /** Optional unit/suffix shown next to the value */
+    unit?: ReactNode;
+    /** Percent change (number) — positive renders as up, negative as down */
+    change?: number;
+    /** Label for the change context (e.g. "vs last 30 days") */
+    changeLabel?: string;
+    /** Override trend direction (otherwise inferred from `change`) */
+    trend?: TrendDirection;
+    /**
+     * For success-positive metrics, set `inverse` to flip color semantics
+     * (e.g. "wait time" — a decrease is good).
+     */
+    inverse?: boolean;
+    /** Optional icon rendered top-right */
+    icon?: ReactNode;
+    /** Optional sparkline data — when present, renders an inline trend chart */
+    sparklineData?: SparklineProps['data'];
+    /** Sparkline color override */
+    sparklineColor?: string;
+    /** Sparkline render variant */
+    sparklineVariant?: SparklineProps['variant'];
+    /** Density variant */
+    density?: 'comfortable' | 'compact';
+}
+
+/**
+ * Label — form field label.
+ *
+ * Accessibility:
+ * - Always associate with an input via htmlFor
+ * - Required indicator uses both visual (*) and sr-only text
+ */
+export declare function Label({ required, className, children, ...props }: LabelProps): JSX_2.Element;
+
+export declare interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** Mark the field as required — adds visual indicator */
+    required?: boolean;
+}
+
+/**
+ * Bazaar LineChart — wraps Recharts with Bazaar tokens, shell, and states.
+ *
+ * Time-series and trend visualization for dashboards. Pair with KpiStatCard
+ * for headline metrics or use standalone in a ChartCard layout.
+ */
+export declare function LineChart<T extends Record<string, unknown>>({ data, xKey, series, height, showLegend, showGrid, valueFormatter, referenceLines, smooth, state, ...cardProps }: LineChartProps<T>): JSX_2.Element;
+
+export declare interface LineChartProps<T extends Record<string, unknown>> extends Omit<ChartCardProps, 'children'> {
+    /** Row-shaped data — each row represents one x-axis category */
+    data: T[];
+    /** Property name on each row used for the x-axis */
+    xKey: keyof T & string;
+    /** One or more series definitions */
+    series: ChartSeries<T>[];
+    /** Chart height in pixels (defaults to 280) */
+    height?: number;
+    /** Show legend (defaults to true when more than one series) */
+    showLegend?: boolean;
+    /** Show grid (defaults to true) */
+    showGrid?: boolean;
+    /** Format values in tooltip / axis */
+    valueFormatter?: ValueFormatter;
+    /** Optional reference line value(s) (e.g. target threshold) */
+    referenceLines?: {
+        value: number;
+        label?: string;
+    }[];
+    /** Smooth curves (defaults to true) */
+    smooth?: boolean;
+}
+
+export declare const lineHeight: {
+    readonly 'display-lg': "48px";
+    readonly 'display-md': "40px";
+    readonly 'heading-xl': "36px";
+    readonly 'heading-lg': "32px";
+    readonly 'heading-md': "28px";
+    readonly 'heading-sm': "26px";
+    readonly 'body-lg': "24px";
+    readonly 'body-md': "22px";
+    readonly 'body-sm': "20px";
+    readonly 'label-lg': "20px";
+    readonly 'label-md': "18px";
+    readonly caption: "16px";
+    readonly data: "20px";
+    readonly code: "18px";
+};
+
+/**
+ * Link — styled anchor primitive for navigation.
+ *
+ * Variants:
+ * - `default` — underlined inline link
+ * - `subtle` — underline on hover only
+ * - `standalone` — no underline, bolder weight, for navigation items
+ *
+ * Accessibility:
+ * - Uses native <a> element for full keyboard + screen reader support
+ * - External links get target="_blank" with rel="noopener noreferrer"
+ * - aria-disabled prevents interaction without removing from tab order
+ */
+export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
+
+export declare interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Visual variant */
+    variant?: 'default' | 'subtle' | 'standalone';
+    /** Color */
+    color?: 'primary' | 'secondary' | 'inherit';
+    /** Whether to show an external indicator */
+    external?: boolean;
+    /** Icon slot (leading) */
+    startIcon?: ReactNode;
+    /** Disabled state (prevents navigation) */
+    disabled?: boolean;
+}
+
+/**
+ * List — composable list container for displaying groups of items.
+ *
+ * Accessibility:
+ * - Uses semantic <ul>/<li> structure
+ * - Interactive items rendered as buttons for keyboard access
+ * - Disabled items use aria-disabled
+ * - Selected items use aria-selected
+ */
+export declare const List: ForwardRefExoticComponent<ListProps & RefAttributes<HTMLUListElement>>;
+
+export declare const ListItem: ForwardRefExoticComponent<ListItemProps & RefAttributes<HTMLLIElement>>;
+
+export declare interface ListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'prefix'> {
+    /** Click handler — makes the item interactive */
+    onClick?: () => void;
+    /** Whether this item is selected */
+    selected?: boolean;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Leading element (icon, avatar, etc.) */
+    prefix?: ReactNode;
+    /** Trailing element (badge, action button, etc.) */
+    suffix?: ReactNode;
+    /** Secondary description text */
+    description?: string;
+}
+
+export declare interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /** Show dividers between items */
+    divided?: boolean;
+    /** Padding inside list items */
+    padding?: 'none' | 'sm' | 'md';
+}
+
+/**
+ * LookbookGallery — asymmetric editorial image grid. Variable cell spans
+ * and tall variants create visual rhythm without turning into a single
+ * magazine-mosaic preset.
+ */
+export declare function LookbookGallery({ eyebrow, headline, intro, images, onImageClick, className, ...rest }: LookbookGalleryProps): JSX_2.Element;
+
+export declare interface LookbookGalleryProps extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    headline?: string;
+    intro?: ReactNode;
+    images: LookbookImage[];
+    onImageClick?: (image: LookbookImage) => void;
+}
+
+export declare interface LookbookImage {
+    id: string;
+    alt: string;
+    src?: string;
+    seed?: string;
+    caption?: string;
+    /** Span in columns (1..3). Use sparingly. */
+    span?: 1 | 2 | 3;
+    /** Taller aspect cell. */
+    tall?: boolean;
+}
+
+export declare interface LookHotspot {
+    id: string;
+    /** Position (%). */
+    x: number;
+    y: number;
+    productId: string;
+    label?: string;
+}
+
+/**
+ * LoyaltyPanel — tier, progress-to-next-tier, current points, and a list
+ * of perks with unlocked/locked state.
+ */
+export declare function LoyaltyPanel({ programName, memberSince, tiers, currentTierId, points, perks, cta, className, ...rest }: LoyaltyPanelProps): JSX_2.Element;
+
+export declare interface LoyaltyPanelProps extends HTMLAttributes<HTMLElement> {
+    /** Program name — e.g., "House Circle". */
+    programName?: string;
+    memberSince?: string;
+    /** Ordered low→high. */
+    tiers: LoyaltyTier[];
+    currentTierId: string;
+    points: number;
+    perks?: LoyaltyPerk[];
+    /** Optional call-to-action — e.g., open rewards catalog. */
+    cta?: ReactNode;
+}
+
+export declare interface LoyaltyPerk {
+    label: string;
+    description?: string;
+    /** Lowest tier that unlocks the perk. Defaults to the first tier. */
+    unlockTierId?: string;
+}
+
+export declare interface LoyaltyTier {
+    id: string;
+    name: string;
+    /** Points needed to unlock this tier. */
+    threshold: number;
+}
+
+export declare function MediaPlaceholder({ src, alt, seed, aspectRatio, width, height, className, style, ...rest }: MediaPlaceholderProps): JSX_2.Element;
+
+export declare interface MediaPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
+    /** If provided, renders an actual <img> instead of the gradient placeholder. */
+    src?: string;
+    /** Alt / label. Shown as overlay text on the gradient and as alt on the img. */
+    alt: string;
+    /** Seed used to pick the gradient pair deterministically. Defaults to alt. */
+    seed?: string;
+    /** CSS aspect ratio (e.g. "4 / 5", "1 / 1"). Defaults to 4 / 5 (portrait product). */
+    aspectRatio?: string;
+    /** Optional explicit size (width/height) via style. */
+    width?: string | number;
+    height?: string | number;
+}
+
+/**
+ * MegaMenu — multi-column navigation panel. Meant to be rendered by
+ * SiteHeader inside a dropdown; provides the layout only, not the
+ * open/close behaviour.
+ */
+export declare function MegaMenu({ columns, features, className, ...rest }: MegaMenuProps): JSX_2.Element;
+
+export declare interface MegaMenuColumn {
+    id: string;
+    title: string;
+    links: MegaMenuLink[];
+}
+
+export declare interface MegaMenuFeature {
+    id: string;
+    title: string;
+    body?: ReactNode;
+    image: {
+        src?: string;
+        alt: string;
+        seed?: string;
+    };
+    cta?: {
+        label: string;
+        onClick?: () => void;
+    };
+}
+
+export declare interface MegaMenuLink {
+    id: string;
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    /** Tag rendered next to the label — e.g., "New". */
+    badge?: string;
+}
+
+export declare interface MegaMenuProps extends HTMLAttributes<HTMLDivElement> {
+    columns: MegaMenuColumn[];
+    /** Featured tile(s) rendered on the right. */
+    features?: MegaMenuFeature[];
+}
+
+/**
+ * Menu — dropdown action menu surface.
+ *
+ * Composes MenuItem, MenuDivider, and MenuGroup as children.
+ *
+ * Accessibility:
+ * - role="menu" on the dropdown, role="menuitem" on each item
+ * - Arrow-key navigation between items
+ * - Escape closes the menu
+ * - Focus returns to trigger on close
+ * - Click outside closes the menu
+ * - Healthcare note: ideal for patient action menus, record options,
+ *   context menus on rows
+ */
+export declare function Menu({ trigger, align, width, className, children, ...props }: MenuProps): JSX_2.Element;
+
+export declare function MenuDivider(): JSX_2.Element;
+
+export declare function MenuGroup({ label, children }: MenuGroupProps): JSX_2.Element;
+
+export declare interface MenuGroupProps {
+    /** Group label */
+    label: string;
+    children: ReactNode;
+}
+
+export declare function MenuItem({ icon, trailing, disabled, danger, onClick, className, children, ...props }: MenuItemProps): JSX_2.Element;
+
+export declare interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /** Leading icon */
+    icon?: ReactNode;
+    /** Trailing content (shortcut, badge, etc.) */
+    trailing?: ReactNode;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Destructive / danger styling */
+    danger?: boolean;
+    /** Click handler */
+    onClick?: (e: MouseEvent_2<HTMLDivElement>) => void;
+}
+
+export declare interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    /** The trigger element — a single React element */
+    trigger: ReactNode;
+    /** Horizontal alignment relative to trigger */
+    align?: 'start' | 'end';
+    /** Menu width */
+    width?: number | 'trigger';
+}
+
+/**
+ * MiniCart — dropdown/popover cart summary. Typically rendered inside a
+ * CartDrawer or anchored popover from the header bag icon.
+ *
+ * Handles empty state internally; composes CartLineItem and renders a
+ * compact summary footer with view-cart / checkout CTAs.
+ */
+export declare function MiniCart({ lines, subtotal, topSlot, onQuantityChange, onRemove, onViewCart, onCheckout, emptyCta, onEmptyCta, className, ...rest }: MiniCartProps): JSX_2.Element;
+
+export declare interface MiniCartProps extends HTMLAttributes<HTMLDivElement> {
+    lines: CartLine[];
+    subtotal: Money;
+    /** Slot above the list — commonly FreeShippingMeter. */
+    topSlot?: ReactNode;
+    onQuantityChange?: (line: CartLine, next: number) => void;
+    onRemove?: (line: CartLine) => void;
+    onViewCart?: () => void;
+    onCheckout?: () => void;
+    /** Empty-state CTA label. */
+    emptyCta?: string;
+    onEmptyCta?: () => void;
+}
+
+/**
+ * Modal / Dialog — overlay dialog for focused interactions.
+ *
+ * Accessibility:
+ * - Uses native <dialog> element for built-in focus trapping and Escape handling
+ * - aria-labelledby links to the title
+ * - Focus is moved into the dialog on open
+ * - Escape key closes the dialog
+ * - Scrim click closes the dialog
+ * - Healthcare note: for destructive actions (e.g., cancel appointment,
+ *   delete record), always include clear confirmation language in the
+ *   dialog and use danger-variant buttons
+ */
+export declare function Modal({ open, onClose, title, size, footer, className, children }: ModalProps & {
+    children?: ReactNode;
+}): JSX_2.Element;
+
+export declare interface ModalProps {
+    /** Additional className */
+    className?: string;
+    /** Whether the modal is visible */
+    open: boolean;
+    /** Called when the modal should close */
+    onClose: () => void;
+    /** Modal title (rendered in header) */
+    title: ReactNode;
+    /** Max width */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Footer actions */
+    footer?: ReactNode;
+}
+
+export declare const modalSize: {
+    readonly sm: "400px";
+    readonly md: "560px";
+    readonly lg: "720px";
+    readonly xl: "880px";
+};
+
+export declare interface Money {
+    /** Amount in major units (e.g. dollars, not cents). */
+    amount: number;
+    currency: CurrencyCode;
+    /** Optional pre-formatted display override. Falls back to Intl.NumberFormat. */
+    display?: string;
+}
+
+/**
+ * MultiSelect — multi-value select with tags and dropdown checkboxes.
+ *
+ * Accessibility:
+ * - Uses role="combobox" with aria-expanded
+ * - Dropdown uses role="listbox" with role="option" items
+ * - Tags are removable via keyboard (Backspace removes last)
+ * - Escape closes dropdown, focus remains on control
+ */
+export declare function MultiSelect({ options, value, onChange, placeholder, disabled, error, size, maxDisplayedTags, className, }: MultiSelectProps): JSX_2.Element;
+
+export declare interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+
+export declare interface MultiSelectProps {
+    /** Available options */
+    options: MultiSelectOption[];
+    /** Currently selected values */
+    value?: string[];
+    /** Change handler — receives updated array of selected values */
+    onChange?: (value: string[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Maximum number of tags visible before showing "+N more" */
+    maxDisplayedTags?: number;
+    /** Additional CSS class */
+    className?: string;
+}
+
+export declare interface NavItem {
+    id: string;
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    /** When provided, this item becomes a mega-menu trigger. */
+    megaMenu?: {
+        columns: MegaMenuColumn[];
+        features?: MegaMenuFeature[];
+    };
+}
+
+/** Neutral palette — Oat / Ecru / Ink. Warm undertone throughout. */
+export declare const neutral: {
+    readonly 0: "#FFFFFF";
+    readonly 25: "#FBF9F4";
+    readonly 50: "#F4F2EC";
+    readonly 100: "#ECE7DC";
+    readonly 200: "#D9D2C1";
+    readonly 300: "#B8AE97";
+    readonly 400: "#8A816B";
+    readonly 500: "#5E5749";
+    readonly 600: "#433D32";
+    readonly 700: "#2E2A23";
+    readonly 800: "#1F1C17";
+    readonly 900: "#131110";
+};
+
+/**
+ * NewsletterSignup — email-capture form for footers, promo modals, and
+ * checkout thank-you pages. Manages submitting/success/error state internally
+ * unless `status` is provided.
+ */
+export declare function NewsletterSignup({ title, copy, placeholder, submitLabel, consent, status: statusProp, successMessage, errorMessage, onSubscribe, variant, className, ...rest }: NewsletterSignupProps): JSX_2.Element;
+
+export declare interface NewsletterSignupProps extends Omit<HTMLAttributes<HTMLFormElement>, 'onSubmit' | 'title'> {
+    title?: ReactNode;
+    copy?: ReactNode;
+    placeholder?: string;
+    submitLabel?: string;
+    consent?: ReactNode;
+    /** Controlled status — when provided, overrides internal state. */
+    status?: NewsletterStatus;
+    successMessage?: ReactNode;
+    errorMessage?: ReactNode;
+    onSubscribe?: (email: string) => void;
+    variant?: 'inline' | 'stacked';
+}
+
+export declare type NewsletterStatus = 'idle' | 'submitting' | 'success' | 'error';
+
+/**
+ * NumberField — numeric input with increment/decrement buttons.
+ *
+ * Accessibility:
+ * - Uses native input[type="number"] for spinbutton role
+ * - Increment/decrement buttons have aria-labels
+ * - Buttons are hidden from tab order (input handles keyboard)
+ * - min/max constraints are communicated to AT
+ */
+export declare const NumberField: ForwardRefExoticComponent<NumberFieldProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value' | 'prefix'> {
+    /** Current numeric value */
+    value?: number;
+    /** Change handler */
+    onChange?: (value: number) => void;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Increment step */
+    step?: number;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Prefix text (e.g., "$") */
+    prefix?: string;
+    /** Suffix text (e.g., "mg") */
+    suffix?: string;
+}
+
+export declare const opacity: {
+    readonly disabled: 0.48;
+    readonly subtle: 0.72;
+    readonly overlay: 0.48;
+    readonly scrimStrong: 0.64;
+};
+
+export declare interface Order {
+    id: string;
+    placedAt: string;
+    status: OrderStatus;
+    total: Money;
+    lines: OrderLine[];
+    shippingAddress?: Address;
+    tracking?: {
+        carrier: string;
+        number: string;
+        url?: string;
+        estimatedDelivery?: string;
+    };
+}
+
+/**
+ * OrderConfirmation — post-purchase "thank you" page. Presents a clear
+ * confirmation, delivery summary, and an itemised receipt.
+ */
+export declare function OrderConfirmation({ orderNumber, email, headline, estimatedDelivery, shippingAddress, lines, subtotal, adjustments, total, ctaSlot, extraSlot, className, ...rest }: OrderConfirmationProps): JSX_2.Element;
+
+export declare interface OrderConfirmationProps extends HTMLAttributes<HTMLDivElement> {
+    orderNumber: string;
+    email: string;
+    /** Headline — defaults to a friendly thank-you. */
+    headline?: string;
+    /** Estimated arrival window copy — e.g. "April 24 – April 26". */
+    estimatedDelivery?: string;
+    shippingAddress?: Address;
+    lines: CartLine[];
+    subtotal: Money;
+    adjustments?: CartSummaryLine[];
+    total: Money;
+    /** CTA slot — e.g. "Track order" link, "Continue shopping" button. */
+    ctaSlot?: ReactNode;
+    /** Optional post-purchase cross-sell or reassurance below the summary. */
+    extraSlot?: ReactNode;
+}
+
+/**
+ * OrderHistoryList — stacked card list of past orders. Each card shows a
+ * compact header (status, date, total, number), a thumbnail strip of the
+ * first few items, and a row of contextual actions.
+ */
+export declare function OrderHistoryList({ orders, title, onSelectOrder, onReorder, onTrack, previewCount, className, ...rest }: OrderHistoryListProps): JSX_2.Element;
+
+export declare interface OrderHistoryListProps extends HTMLAttributes<HTMLElement> {
+    orders: Order[];
+    title?: string;
+    onSelectOrder?: (order: Order) => void;
+    onReorder?: (order: Order) => void;
+    onTrack?: (order: Order) => void;
+    /** Max previews rendered inline — defaults to 3. */
+    previewCount?: number;
+}
+
+export declare interface OrderLine {
+    id: string;
+    title: string;
+    brand?: string;
+    image?: ProductImage;
+    price: Money;
+    quantity: number;
+    options?: CartLineOption[];
+}
+
+export declare type OrderStatus = 'placed' | 'processing' | 'shipped' | 'out-for-delivery' | 'delivered' | 'cancelled' | 'returned';
+
+/**
+ * OrderTracking — carrier, ETA and a step-by-step timeline for an in-flight
+ * order. Renders a hero row with carrier + tracking number actions, a big
+ * "arriving" callout and a vertical timeline with past/current/upcoming steps.
+ */
+export declare function OrderTracking({ order, events, onCopyTrackingNumber, onOpenCarrier, className, ...rest }: OrderTrackingProps): JSX_2.Element;
+
+export declare interface OrderTrackingProps extends HTMLAttributes<HTMLElement> {
+    order: Order;
+    /** Event history (latest last). When omitted, a default timeline is
+     * synthesized from `order.status`. */
+    events?: TrackingEvent[];
+    onCopyTrackingNumber?: () => void;
+    onOpenCarrier?: () => void;
+}
+
+/**
+ * OTPInput — code/OTP input with separate boxes that auto-advance.
+ *
+ * Accessibility:
+ * - Each digit input has aria-label describing its position
+ * - Supports keyboard navigation (Backspace moves to previous)
+ * - Paste support fills all boxes at once
+ * - Error state communicated via aria-invalid
+ */
+export declare function OTPInput({ length, value, onChange, error, disabled, autoFocus, className, }: OTPInputProps): JSX_2.Element;
+
+export declare interface OTPInputProps {
+    /** Number of OTP digits */
+    length?: number;
+    /** Current value string */
+    value?: string;
+    /** Change handler — receives the full OTP string */
+    onChange?: (value: string) => void;
+    /** Error state */
+    error?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Auto-focus first input on mount */
+    autoFocus?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+
+/**
+ * Pagination — page navigation for paginated data.
+ *
+ * Accessibility:
+ * - Wraps in <nav> with aria-label="Pagination"
+ * - Current page indicated with aria-current="page"
+ * - Previous/Next buttons disabled at boundaries
+ * - Healthcare note: use pagination for patient lists, lab results,
+ *   and audit logs to keep pages manageable
+ */
+export declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, size, className, ...props }: PaginationProps): JSX_2.Element | null;
+
+export declare interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Current active page (1-based) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Number of sibling pages to show around the current page */
+    siblingCount?: number;
+    /** Size variant */
+    size?: 'sm' | 'md';
+}
+
+/**
+ * Paper — the foundational surface primitive.
+ *
+ * Paper provides a styled surface (background, border, shadow, radius)
+ * without any layout opinions. It is the atom from which Card, Modal
+ * content areas, Drawer panels, and other surface components compose.
+ *
+ * Accessibility:
+ * - Paper is a visual primitive with no semantic role by default
+ * - Use the `as` prop to select the correct semantic element
+ * - Add `role` and `aria-label` when the surface represents a landmark
+ */
+export declare const Paper: ForwardRefExoticComponent<PaperProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface PaperProps extends HTMLAttributes<HTMLDivElement> {
+    /** Surface background */
+    surface?: 'default' | 'subtle' | 'canvas' | 'raised' | 'overlay';
+    /** Elevation level (shadow depth) */
+    elevation?: 0 | 1 | 2 | 3 | 4;
+    /** Border radius preset */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Whether to render a border */
+    bordered?: boolean;
+    /** Padding preset */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Render as a different HTML element */
+    as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer';
+}
+
+export declare type PaymentBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'paypal' | 'apple-pay' | 'google-pay' | 'shop-pay' | 'klarna' | 'afterpay';
+
+export declare type PaymentChannel = 'card' | 'paypal' | 'apple-pay' | 'klarna' | 'afterpay';
+
+/**
+ * PaymentConfidence — payment-brand rail plus a secure-checkout reassurance
+ * block. Typically placed in a cart sidebar, checkout footer, or site footer.
+ */
+export declare function PaymentConfidence({ brands, headline, compliance, layout, className, ...rest }: PaymentConfidenceProps): JSX_2.Element;
+
+export declare interface PaymentConfidenceProps extends HTMLAttributes<HTMLElement> {
+    /** Brands to display as chips. Defaults to a standard set. */
+    brands?: PaymentBrand[];
+    /** Lead-in copy. */
+    headline?: string;
+    /** Optional compliance line. */
+    compliance?: ReactNode;
+    /** Layout — `rail` = brand row with secure chip; `stack` = split headline + chips below. */
+    layout?: 'rail' | 'stack';
+}
+
+export declare interface PaymentMethod {
+    id: string;
+    brand: PaymentBrand;
+    label: string;
+    last4?: string;
+    expires?: string;
+}
+
+/**
+ * PaymentMethodSelector — channel chooser (card, PayPal, wallets, BNPL)
+ * plus a saved-card list when the card channel is active.
+ *
+ * The actual card form is not rendered here — compose a separate form (or
+ * a PSP element) next to it, gated by `value === 'card'` and `!savedMethodId`.
+ */
+export declare function PaymentMethodSelector({ channels, value, onChange, savedMethods, savedMethodId, onSavedMethodChange, onUseNewCard, title, className, ...rest }: PaymentMethodSelectorProps): JSX_2.Element;
+
+export declare interface PaymentMethodSelectorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Available channels (in display order). */
+    channels?: PaymentChannel[];
+    value?: PaymentChannel;
+    onChange?: (channel: PaymentChannel) => void;
+    /** Previously saved cards — shown under the "card" option. */
+    savedMethods?: PaymentMethod[];
+    savedMethodId?: string;
+    onSavedMethodChange?: (method: PaymentMethod) => void;
+    /** Called when the user opts into a new card (clears `savedMethodId` upstream). */
+    onUseNewCard?: () => void;
+    title?: string;
+}
+
+/**
+ * PaymentMethodsList — saved cards and wallets with default badge and
+ * per-row edit/remove/set-default actions. Includes a final "Add payment
+ * method" row.
+ */
+export declare function PaymentMethodsList({ methods, defaultMethodId, title, onEdit, onRemove, onSetDefault, onAdd, className, ...rest }: PaymentMethodsListProps): JSX_2.Element;
+
+export declare interface PaymentMethodsListProps extends HTMLAttributes<HTMLElement> {
+    methods: PaymentMethod[];
+    defaultMethodId?: string;
+    title?: string;
+    onEdit?: (method: PaymentMethod) => void;
+    onRemove?: (method: PaymentMethod) => void;
+    onSetDefault?: (method: PaymentMethod) => void;
+    onAdd?: () => void;
+}
+
+export declare interface PDPSection {
+    id: string;
+    content: ReactNode;
+    /** Render on a muted background (good for reviews, cross-sell, trust). */
+    muted?: boolean;
+}
+
+/** Percent savings between compareAt and price. Returns rounded integer or null. */
+export declare function percentOff(price: Money, compareAt?: Money): number | null;
+
+/**
+ * Popover — positioned overlay content triggered by a reference element.
+ *
+ * Accessibility:
+ * - Escape key closes the popover
+ * - Focus is managed: moves into popover on open, returns on close
+ * - Click outside closes the popover
+ * - Healthcare note: use for additional context like patient quick-view,
+ *   medication details, or field-level help without navigating away
+ */
+export declare function Popover({ trigger, content, open: controlledOpen, onOpenChange, placement, align, className, ...props }: PopoverProps): JSX_2.Element;
+
+export declare interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** Trigger element that opens the popover */
+    trigger: ReactNode;
+    /** Content rendered inside the popover */
+    content: ReactNode;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Placement relative to the trigger */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Alignment along the placement axis */
+    align?: 'start' | 'center' | 'end';
+}
+
+/**
+ * Portal — renders children into a DOM node outside the parent hierarchy.
+ *
+ * Use for overlays, tooltips, modals, and other floating content that
+ * needs to escape stacking context or overflow constraints.
+ *
+ * Falls back to inline rendering during SSR or when disabled.
+ *
+ * Accessibility:
+ * - Portal does not affect the accessibility tree
+ * - Focus management is the responsibility of the portal content
+ * - Ensure ARIA relationships (aria-describedby, aria-labelledby)
+ *   still work across the portal boundary
+ */
+export declare function Portal({ children, container, disabled }: PortalProps): JSX_2.Element;
+
+export declare interface PortalProps {
+    /** Content to render in the portal */
+    children: ReactNode;
+    /** Target container element (defaults to document.body) */
+    container?: Element | null;
+    /** Whether the portal is active (renders inline when false) */
+    disabled?: boolean;
+}
+
+export declare interface PressQuote {
+    id: string;
+    source: string;
+    quote: string;
+}
+
+/**
+ * PriceBlock — canonical way to render a price in Bazaar.
+ *
+ * Handles current + compare-at + percent-off with consistent hierarchy,
+ * so cards, buy boxes, cart lines, and summaries all feel the same.
+ */
+export declare function PriceBlock({ price, compareAtPrice, from, showPercent, size, stacked, locale, className, ...rest }: PriceBlockProps): JSX_2.Element;
+
+export declare interface PriceBlockProps extends HTMLAttributes<HTMLDivElement> {
+    price: Money;
+    compareAtPrice?: Money;
+    /** Show a "From" prefix — useful when a product has a price range across variants. */
+    from?: boolean;
+    /** Show a percent-off pill when compareAtPrice is present. */
+    showPercent?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Stack current price above compareAt + percent on a second line. */
+    stacked?: boolean;
+    locale?: string;
+}
+
+export declare interface Product {
+    id: string;
+    slug?: string;
+    name: string;
+    brand?: string;
+    price: Money;
+    compareAtPrice?: Money;
+    rating?: RatingSummary;
+    images: ProductImage[];
+    badges?: ProductBadgeData[];
+    /** Short one-liner for cards and rails. */
+    tagline?: string;
+    /** Long-form description for PDP. */
+    description?: string;
+    variants?: VariantAxis[];
+    inStock?: boolean;
+    categories?: string[];
+}
+
+/**
+ * ProductBadge — compact merchandising badge for cards, tiles, and PDPs.
+ * Differs from the generic <Badge /> in that it uses commerce-specific tones
+ * (new, sale, bestSeller, lowStock, soldOut, exclusive) and typography suited
+ * to overlaying product imagery.
+ */
+export declare function ProductBadge({ label, tone, size, className, ...rest }: ProductBadgeProps): JSX_2.Element;
+
+export declare interface ProductBadgeData {
+    label: string;
+    tone?: ProductBadgeTone;
+}
+
+export declare interface ProductBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    label: string;
+    tone?: ProductBadgeTone;
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export declare type ProductBadgeTone = 'new' | 'sale' | 'bestSeller' | 'lowStock' | 'soldOut' | 'exclusive';
+
+/**
+ * ProductBuyBox — composite that orchestrates PriceBlock, VariantSelectors,
+ * quantity, CTAs, and trust signals for a product detail page.
+ *
+ * Controlled variant selection: pass `selection` + `onVariantChange`. The
+ * component does not enforce a "complete selection required to buy" rule —
+ * wire that in via the parent if needed.
+ */
+export declare function ProductBuyBox({ product, selection, onVariantChange, inventory, wishlisted, onWishlistToggle, onAddToCart, ctaLabel, reassuranceSlot, showQuantity, expressSlot, className, ...rest }: ProductBuyBoxProps): JSX_2.Element;
+
+export declare interface ProductBuyBoxProps extends HTMLAttributes<HTMLDivElement> {
+    product: Product;
+    /** Selected variant values keyed by axis name (e.g. { Color: 'sand', Size: 'm' }). */
+    selection?: Record<string, string>;
+    onVariantChange?: (axisName: string, option: VariantOption) => void;
+    inventory?: InventoryState;
+    wishlisted?: boolean;
+    onWishlistToggle?: (product: Product) => void;
+    onAddToCart?: (product: Product, quantity: number) => void;
+    /** Optional alternate primary CTA label (e.g. "Pre-order", "Notify me"). */
+    ctaLabel?: string;
+    /** Slot below the CTA — commonly used for ShippingReassurance. */
+    reassuranceSlot?: ReactNode;
+    /** Helper content above variants (e.g. color: "Sand"). Auto-generated by default. */
+    showQuantity?: boolean;
+    /** Render an Express Checkout block (Apple Pay, PayPal, etc.) above the main CTA. */
+    expressSlot?: ReactNode;
+}
+
+/**
+ * ProductCard — image-first merchandising tile.
+ *
+ * Composes MediaPlaceholder, ProductBadge, PriceBlock, and ReviewsSummary
+ * into the canonical Bazaar product presentation. Quick actions (wishlist,
+ * quick view, quick add) appear on hover or focus.
+ */
+export declare function ProductCard({ product, href, onSelect, wishlisted, onWishlistToggle, onQuickView, onQuickAdd, hideQuickAdd, size, density, mediaAspectRatio, className, ...rest }: ProductCardProps): JSX_2.Element;
+
+export declare interface ProductCardProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onSelect'> {
+    product: Product;
+    /** Card element renders as <a> when provided, otherwise <article>. */
+    href?: string;
+    /** Called when the card surface is clicked. */
+    onSelect?: (product: Product) => void;
+    /** Wishlist state — controlled. */
+    wishlisted?: boolean;
+    onWishlistToggle?: (product: Product) => void;
+    onQuickView?: (product: Product) => void;
+    onQuickAdd?: (product: Product) => void;
+    /** Hide the hover "Quick add" button. */
+    hideQuickAdd?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual density — "minimal" hides brand, tagline, quick-add (editorial pages). */
+    density?: 'default' | 'minimal';
+    /** Aspect ratio for the media area. Defaults to 4/5 (portrait) for apparel. */
+    mediaAspectRatio?: string;
+}
+
+/**
+ * ProductDetailPageTemplate — PDP shell. Gallery on the left, sticky
+ * buy box on the right, scrollable sections (details, reviews,
+ * recommendations) below, with optional mobile ATC pinned to the bottom.
+ */
+export declare function ProductDetailPageTemplate({ header, footer, breadcrumbs, gallery, buyBox, sections, mobileAtc, className, ...rest }: ProductDetailPageTemplateProps): JSX_2.Element;
+
+export declare interface ProductDetailPageTemplateProps extends HTMLAttributes<HTMLDivElement> {
+    header?: ReactNode;
+    footer?: ReactNode;
+    breadcrumbs?: ReactNode;
+    /** Main gallery — typically ProductMediaGallery. */
+    gallery: ReactNode;
+    /** Sticky right-rail buy box — typically ProductBuyBox. */
+    buyBox: ReactNode;
+    /** Scrollable sections below the fold — details, reviews, cross-sell. */
+    sections?: PDPSection[];
+    /** Fixed mobile ATC — typically StickyMobileATC. */
+    mobileAtc?: ReactNode;
+}
+
+/**
+ * ProductDetailsAccordion — stacked disclosure sections for long-form PDP
+ * content: description, materials, care, shipping, returns.
+ */
+export declare function ProductDetailsAccordion({ sections, allowMultiple, className, ...rest }: ProductDetailsAccordionProps): JSX_2.Element;
+
+export declare interface ProductDetailsAccordionProps extends HTMLAttributes<HTMLDivElement> {
+    sections: ProductDetailsSection[];
+    /** Allow multiple sections open at once (default true). */
+    allowMultiple?: boolean;
+}
+
+export declare interface ProductDetailsSection {
+    id: string;
+    title: string;
+    /** Rendered content — body copy, spec tables, care instructions, etc. */
+    content: ReactNode;
+    /** Start expanded. */
+    defaultOpen?: boolean;
+}
+
+/**
+ * ProductGrid — responsive grid shell for ProductCards.
+ *
+ * Unopinionated about what lives inside so it can also host recommendation
+ * rails, editorial tiles, or empty-state placeholders.
+ */
+export declare function ProductGrid({ columns, mdColumns, smColumns, density, className, style, children, ...rest }: ProductGridProps): JSX_2.Element;
+
+export declare interface ProductGridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Desktop column count (default 4). Responsive breakpoints downshift to `mdColumns` and `smColumns`. */
+    columns?: 2 | 3 | 4 | 5 | 6;
+    mdColumns?: 2 | 3 | 4;
+    smColumns?: 1 | 2;
+    density?: 'default' | 'loose' | 'tight';
+    children?: ReactNode;
+}
+
+export declare interface ProductImage {
+    src?: string;
+    alt: string;
+    /** Optional background gradient seed (used by <MediaPlaceholder /> for label gradients). */
+    seed?: string;
+}
+
+/**
+ * ProductMediaGallery — hero image plus thumbnail strip with keyboard nav.
+ *
+ * Uncontrolled active index with arrow-key support; pair with a Lightbox
+ * via the `onZoom` callback to open a zoomed view.
+ */
+export declare function ProductMediaGallery({ images, thumbLayout, aspectRatio, onZoom, videoIndex, className, ...rest }: ProductMediaGalleryProps): JSX_2.Element;
+
+export declare interface ProductMediaGalleryProps extends HTMLAttributes<HTMLDivElement> {
+    images: ProductImage[];
+    /** Thumbnail layout — left rail (desktop) or below (mobile-first). */
+    thumbLayout?: 'left' | 'below';
+    /** CSS aspect-ratio for the hero tile. */
+    aspectRatio?: string;
+    onZoom?: (index: number) => void;
+    /** Index of a video frame (rendered with a play-indicator overlay). */
+    videoIndex?: number;
+}
+
+/**
+ * Progress — horizontal bar indicating completion or progress.
+ *
+ * Accessibility:
+ * - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
+ * - aria-label derived from the label prop
+ * - Useful for course progress, lesson completion, multi-step forms,
+ *   onboarding flows, and any "X of Y complete" surface
+ */
+export declare function Progress({ value, max, size, variant, label, showValue, className, ...props }: ProgressProps): JSX_2.Element;
+
+/** Bazaar-specific progress tokens */
+export declare const progress: {
+    readonly track: "#ECE7DC";
+    readonly fillDefault: "#1F1C17";
+    readonly fillSuccess: "#4A7C59";
+    readonly fillReward: "#C96C3E";
+    readonly gradient: "linear-gradient(90deg, #C96C3E 0%, #1F1C17 100%)";
+};
+
+export declare interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current value (0-100) */
+    value: number;
+    /** Maximum value (defaults to 100) */
+    max?: number;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Color variant */
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    /** Visible label text */
+    label?: string;
+    /** Show the numeric value */
+    showValue?: boolean;
+}
+
+/**
+ * ProgressRing — circular progress indicator.
+ *
+ * Bazaar learning surface — used in dashboards, course cards, and learner
+ * profile summaries to show completion percentage in a glanceable form.
+ *
+ * Accessibility:
+ * - role="progressbar" with aria-valuenow / min / max
+ * - When `label` is provided, it's announced via aria-label
+ */
+export declare function ProgressRing({ value, max, size, tone, label, showValue, centerContent, className, ...props }: ProgressRingProps): JSX_2.Element;
+
+export declare interface ProgressRingProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current value (0-100) */
+    value: number;
+    /** Maximum value (defaults to 100) */
+    max?: number;
+    /** Size variant */
+    size?: ProgressRingSize;
+    /** Visual tone */
+    tone?: ProgressRingTone;
+    /** Optional label rendered alongside the ring */
+    label?: string;
+    /** Show the numeric percentage in the center */
+    showValue?: boolean;
+    /** Custom center content (overrides showValue) */
+    centerContent?: ReactNode;
+}
+
+export declare type ProgressRingSize = 'sm' | 'md' | 'lg';
+
+export declare type ProgressRingTone = 'default' | 'success' | 'reward';
+
+export declare function PromoStrip({ message, icon, ctaLabel, onCta, dismissible, tone, className, ...rest }: PromoStripProps): JSX_2.Element | null;
+
+export declare interface PromoStripProps extends HTMLAttributes<HTMLDivElement> {
+    message: ReactNode;
+    /** Optional leading icon. */
+    icon?: ReactNode;
+    /** Inline CTA — rendered as a link-styled button. */
+    ctaLabel?: string;
+    onCta?: () => void;
+    /** Allow the strip to be dismissed (client-side only). */
+    dismissible?: boolean;
+    tone?: 'dark' | 'subtle' | 'accent';
+}
+
+/**
+ * QuantityStepper — minus / value / plus control used in carts and on PDPs.
+ * Supports controlled and uncontrolled usage; clamps to `min` / `max`.
+ */
+export declare function QuantityStepper({ value, defaultValue, min, max, onChange, size, disabled, label, className, ...rest }: QuantityStepperProps): JSX_2.Element;
+
+export declare interface QuantityStepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    onChange?: (value: number) => void;
+    /** Visual density. */
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    label?: string;
+}
+
+/**
+ * Radio — single-selection option within a group.
+ *
+ * Accessibility:
+ * - Uses native <input type="radio">
+ * - Wrap multiple Radios in a fieldset with legend for group labeling
+ * - Arrow keys navigate between radios within the same name group
+ */
+export declare const Radio: ForwardRefExoticComponent<RadioProps & RefAttributes<HTMLInputElement>>;
+
+/**
+ * RadioGroup — group of radio buttons with fieldset/legend for accessibility.
+ *
+ * Accessibility:
+ * - Uses <fieldset> and <legend> for semantic grouping
+ * - Arrow keys navigate between radios within the group
+ * - Error message rendered with role="alert"
+ */
+export declare function RadioGroup({ label, name, options, value, onChange, error, orientation, disabled, className, }: RadioGroupProps): JSX_2.Element;
+
+export declare interface RadioGroupOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare interface RadioGroupProps {
+    /** Group label rendered as fieldset legend */
+    label: string;
+    /** Shared name attribute for all radios */
+    name: string;
+    /** Array of radio options */
+    options: RadioGroupOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Change handler — receives the selected value */
+    onChange?: (value: string) => void;
+    /** Error message */
+    error?: string;
+    /** Layout direction */
+    orientation?: 'vertical' | 'horizontal';
+    /** Disabled state for all radios */
+    disabled?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+
+export declare interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Label text */
+    label?: string;
+    /** Error state */
+    error?: boolean;
+}
+
+export declare const radius: {
+    readonly none: "0";
+    readonly sm: "6px";
+    readonly md: "10px";
+    readonly lg: "14px";
+    readonly xl: "18px";
+    readonly full: "9999px";
+};
+
+/**
+ * Rating — star-based rating input with keyboard navigation.
+ *
+ * Supports custom max values, read-only display, and custom icon rendering.
+ *
+ * Accessibility:
+ * - Uses radio group pattern with arrow key navigation
+ * - Each star has aria-label with its value
+ * - Supports keyboard: ArrowLeft/Right to navigate, Enter/Space to select
+ */
+export declare const Rating: ForwardRefExoticComponent<RatingProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Current rating value (0 = no rating) */
+    value?: number;
+    /** Called when rating changes */
+    onChange?: (value: number) => void;
+    /** Maximum rating value */
+    max?: number;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether the rating is read-only */
+    readOnly?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Label for accessibility */
+    label?: string;
+    /** Custom icon renderer — receives filled state */
+    renderIcon?: (filled: boolean, index: number) => React.ReactNode;
+}
+
+export declare interface RatingSummary {
+    value: number;
+    count: number;
+}
+
+export declare const ReassuranceIcons: {
+    Truck: (p: SVGProps<SVGSVGElement>) => JSX_2.Element;
+    Return: (p: SVGProps<SVGSVGElement>) => JSX_2.Element;
+    Shield: (p: SVGProps<SVGSVGElement>) => JSX_2.Element;
+    Leaf: (p: SVGProps<SVGSVGElement>) => JSX_2.Element;
+    Package: (p: SVGProps<SVGSVGElement>) => JSX_2.Element;
+};
+
+export declare interface ReassuranceItem {
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+}
+
+export declare function RecommendationRail({ title, subtitle, products, columns, children, onSelectProduct, onWishlistToggle, className, style, ...rest }: RecommendationRailProps): JSX_2.Element;
+
+export declare interface RecommendationRailProps extends HTMLAttributes<HTMLElement> {
+    title: string;
+    subtitle?: string;
+    products?: Product[];
+    /** Desktop column count (default 4). */
+    columns?: 3 | 4 | 5;
+    /** Custom children — when provided, `products` is ignored. */
+    children?: ReactNode;
+    onSelectProduct?: (product: Product) => void;
+    onWishlistToggle?: (product: Product) => void;
+}
+
+/**
+ * ReturnsPolicy — headline + bullet list of the returns promise. Slots
+ * into PDPs (below the buy box), cart summaries and the order
+ * confirmation page.
+ */
+export declare function ReturnsPolicy({ headline, description, bullets, onReadFullPolicy, readFullPolicyLabel, footer, className, ...rest }: ReturnsPolicyProps): JSX_2.Element;
+
+export declare interface ReturnsPolicyBullet {
+    id: string;
+    label: string;
+    body?: string;
+}
+
+export declare interface ReturnsPolicyProps extends HTMLAttributes<HTMLElement> {
+    /** Headline — e.g. "60-day free returns". */
+    headline?: string;
+    /** Sub-headline text describing the overall guarantee. */
+    description?: string;
+    bullets?: ReturnsPolicyBullet[];
+    /** Optional affordance that links to the full policy page. */
+    onReadFullPolicy?: () => void;
+    readFullPolicyLabel?: string;
+    /** Optional visual slot rendered at the end (e.g., signed-for illustration). */
+    footer?: ReactNode;
+}
+
+export declare interface Review {
+    id: string;
+    author: string;
+    rating: number;
+    title?: string;
+    body: string;
+    /** ISO date string. */
+    date: string;
+    verified?: boolean;
+    helpful?: number;
+}
+
+/**
+ * ReviewsList — aggregate rating, star-distribution histogram, and paged
+ * review feed. Presentational only — filtering/sorting live upstream.
+ */
+export declare function ReviewsList({ summary, reviews, distribution, onWriteReview, pageSize, className, ...rest }: ReviewsListProps): JSX_2.Element;
+
+export declare interface ReviewsListProps extends HTMLAttributes<HTMLDivElement> {
+    summary: RatingSummary;
+    reviews: Review[];
+    /** Distribution — counts keyed 1..5. Used for the histogram. */
+    distribution?: Record<1 | 2 | 3 | 4 | 5, number>;
+    onWriteReview?: () => void;
+    /** Max reviews shown before "Show more" — 0 disables the limit. */
+    pageSize?: number;
+}
+
+export declare function ReviewsSummary({ value, count, size, hideStars, formatCount, className, ...rest }: ReviewsSummaryProps): JSX_2.Element;
+
+export declare interface ReviewsSummaryProps extends HTMLAttributes<HTMLDivElement> {
+    /** Average rating, 0–5 (supports decimals). */
+    value: number;
+    /** Total review count. */
+    count: number;
+    size?: 'sm' | 'md' | 'lg';
+    /** Hide stars — useful in dense contexts (cards, cart lines). */
+    hideStars?: boolean;
+    /** Format the count (e.g. compact 1.2k). */
+    formatCount?: (n: number) => string;
+}
+
+/**
+ * SaveForLaterList — secondary list below the cart of items the user
+ * deferred. Each line swaps its "Save for later" action for "Move to bag".
+ */
+export declare function SaveForLaterList({ lines, title, onMoveToCart, onRemove, className, ...rest }: SaveForLaterListProps): JSX_2.Element | null;
+
+export declare interface SaveForLaterListProps extends HTMLAttributes<HTMLDivElement> {
+    lines: CartLine[];
+    title?: string;
+    onMoveToCart?: (line: CartLine) => void;
+    onRemove?: (line: CartLine) => void;
+}
+
+/**
+ * SearchBar — input with a dropdown panel containing recent searches,
+ * typeahead suggestions and product hits. Uncontrolled by default;
+ * pass `value` + `onChange` for controlled usage.
+ */
+export declare function SearchBar({ placeholder, value, onChange, onSubmit, recent, suggestions, productHits, onSelectSuggestion, onSelectProduct, onClearRecent, size, className, ...rest }: SearchBarProps): JSX_2.Element;
+
+export declare interface SearchBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit'> {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    /** Recent searches shown above suggestions when focused with empty input. */
+    recent?: SearchSuggestion[];
+    /** Live query suggestions. */
+    suggestions?: SearchSuggestion[];
+    /** Product hits rendered alongside suggestions. */
+    productHits?: Product[];
+    onSelectSuggestion?: (s: SearchSuggestion) => void;
+    onSelectProduct?: (p: Product) => void;
+    onClearRecent?: () => void;
+    size?: 'md' | 'lg';
+}
+
+/**
+ * SearchField — search input with magnifying glass icon and optional clear button.
+ *
+ * Accessibility:
+ * - Uses role="searchbox" for semantic search intent
+ * - Clear button has aria-label for screen readers
+ * - Search icon is decorative (aria-hidden)
+ */
+export declare const SearchField: ForwardRefExoticComponent<SearchFieldProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Size of the search control */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Callback when clear button is clicked */
+    onClear?: () => void;
+    /** Show the clear button when input has a value */
+    showClearButton?: boolean;
+}
+
+export declare function SearchResultsHeader({ title, count, query, activeFilters, onRemoveFilter, rightSlot, className, ...rest }: SearchResultsHeaderProps): JSX_2.Element;
+
+export declare interface SearchResultsHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Main heading (e.g., "Results for 'linen'" or "All women's apparel"). */
+    title: string;
+    /** Result count. Used in the subtext line with the optional query. */
+    count: number;
+    /** Optional search query echo. */
+    query?: string;
+    /** Active filter chips. */
+    activeFilters?: ActiveFilterChip[];
+    onRemoveFilter?: (id: string) => void;
+    /** Controls on the right side (SortMenu, layout toggles, etc.). */
+    rightSlot?: ReactNode;
+}
+
+/**
+ * SearchResultsPageTemplate — shell for full-page search. Mirrors the
+ * collection-page layout but emphasizes the search field and supports an
+ * empty-state slot when the query returns no results.
+ */
+export declare function SearchResultsPageTemplate({ header, footer, searchSlot, suggestionsSlot, resultsHeader, resultsControls, filters, results, empty, isEmpty, pagination, className, ...rest }: SearchResultsPageTemplateProps): JSX_2.Element;
+
+export declare interface SearchResultsPageTemplateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'results'> {
+    header?: ReactNode;
+    footer?: ReactNode;
+    /** Large top-of-page SearchBar — slot stays rendered above the fold. */
+    searchSlot?: ReactNode;
+    /** Did-you-mean / spelling suggestion row. */
+    suggestionsSlot?: ReactNode;
+    /** SearchResultsHeader (title + count + chips). */
+    resultsHeader?: ReactNode;
+    /** SortMenu or view-toggle. */
+    resultsControls?: ReactNode;
+    /** FilterPanel on the left. */
+    filters?: ReactNode;
+    /** Main results — typically a ProductGrid. */
+    results?: ReactNode;
+    /** Rendered instead of `results` when no matches. */
+    empty?: ReactNode;
+    /** True when `results` should be replaced by the empty state. */
+    isEmpty?: boolean;
+    pagination?: ReactNode;
+}
+
+export declare interface SearchSuggestion {
+    id: string;
+    label: string;
+}
+
+/**
+ * SeasonalPromo — bold banner for sales, drops, or limited-time offers.
+ * Renders eyebrow + headline + optional coupon chip + countdown. Reserve
+ * for time-bound campaigns — use CampaignHero or PromoStrip for evergreen.
+ */
+export declare function SeasonalPromo({ eyebrow, headline, body, code, endsAt, cta, tone, dismissible, onDismiss, className, ...rest }: SeasonalPromoProps): JSX_2.Element;
+
+export declare interface SeasonalPromoProps extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    headline: string;
+    body?: ReactNode;
+    /** Coupon / promo code chip. */
+    code?: string;
+    /** Optional deadline (ISO). Drives the countdown. */
+    endsAt?: string;
+    cta?: {
+        label: string;
+        onClick?: () => void;
+    };
+    /** Visual tone. */
+    tone?: 'warm' | 'sand' | 'ink';
+    /** Dismissible — shows a close button when true. */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+}
+
+/**
+ * Select — native dropdown select.
+ *
+ * Accessibility:
+ * - Uses native <select> for full keyboard and screen reader support
+ * - Associate with Label via htmlFor/id
+ * - Custom chevron is decorative (aria-hidden on the icon)
+ */
+export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;
+
+export declare interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+}
+
+/** Semantic colors — warm-tuned to sit naturally against ecru neutrals. */
+export declare const semantic: {
+    readonly success: {
+        readonly 50: "#EAF1EA";
+        readonly 500: "#4A7C59";
+        readonly 700: "#2E5237";
+    };
+    readonly warning: {
+        readonly 50: "#FBF2DF";
+        readonly 500: "#B58235";
+        readonly 700: "#6C4B1A";
+    };
+    readonly error: {
+        readonly 50: "#F9E8E4";
+        readonly 500: "#B04848";
+        readonly 700: "#7D2E2E";
+    };
+    readonly info: {
+        readonly 50: "#F4F2EC";
+        readonly 500: "#433D32";
+        readonly 700: "#1F1C17";
+    };
+};
+
+export declare const shadow: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px rgba(22, 32, 43, 0.05)";
+    readonly sm: "0 1px 3px rgba(22, 32, 43, 0.06), 0 2px 8px rgba(22, 32, 43, 0.04)";
+    readonly md: "0 2px 4px rgba(22, 32, 43, 0.04), 0 8px 20px rgba(22, 32, 43, 0.08)";
+    readonly lg: "0 4px 8px rgba(22, 32, 43, 0.04), 0 16px 40px rgba(22, 32, 43, 0.12)";
+    readonly xl: "0 8px 16px rgba(22, 32, 43, 0.06), 0 24px 56px rgba(22, 32, 43, 0.16)";
+    readonly focus: "0 0 0 3px rgba(47, 111, 228, 0.28)";
+    readonly focusError: "0 0 0 3px rgba(194, 58, 58, 0.2)";
+    readonly focusSuccess: "0 0 0 3px rgba(47, 143, 87, 0.2)";
+    readonly insetXs: "inset 0 1px 2px rgba(22, 32, 43, 0.06)";
+    readonly insetSm: "inset 0 2px 4px rgba(22, 32, 43, 0.08)";
+};
+
+export declare interface ShippingMethod {
+    id: string;
+    label: string;
+    description?: string;
+    price: Money;
+    estimate?: string;
+    recommended?: boolean;
+}
+
+/**
+ * ShippingMethodList — radio-group of shipping rates. Each row shows price,
+ * label, delivery estimate, and an optional "Recommended" tag.
+ */
+export declare function ShippingMethodList({ methods, value, onChange, title, className, ...rest }: ShippingMethodListProps): JSX_2.Element;
+
+export declare interface ShippingMethodListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    methods: ShippingMethod[];
+    value?: string;
+    onChange?: (method: ShippingMethod) => void;
+    title?: string;
+}
+
+/**
+ * ShippingReassurance — trust signals shown near the buy button.
+ *
+ * Renders a compact list of benefits (free shipping, easy returns, secure
+ * checkout). Callers can override the default items for campaign-specific
+ * messaging.
+ */
+export declare function ShippingReassurance({ items, layout, className, ...rest }: ShippingReassuranceProps): JSX_2.Element;
+
+export declare interface ShippingReassuranceProps extends HTMLAttributes<HTMLDivElement> {
+    items?: ReassuranceItem[];
+    /** Layout — inline row for PDP sidebar, stacked for cart. */
+    layout?: 'row' | 'stacked' | 'grid';
+}
+
+/**
+ * ShopTheLook — editorial image with numbered hotspots and a companion
+ * product rail. Clicking a hotspot highlights the matching product card.
+ */
+export declare function ShopTheLook({ image, products, hotspots, activeId, onActiveChange, title, onAddToCart, onSelectProduct, className, ...rest }: ShopTheLookProps): JSX_2.Element;
+
+export declare interface ShopTheLookProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'> {
+    /** Editorial image the hotspots sit on. */
+    image: {
+        src?: string;
+        alt: string;
+        seed?: string;
+    };
+    /** Products featured in the look (keyed by id). */
+    products: Product[];
+    hotspots: LookHotspot[];
+    /** Selected hotspot id (controlled). */
+    activeId?: string;
+    onActiveChange?: (id: string) => void;
+    title?: string;
+    /** Called when the user clicks a product card's CTA. */
+    onAddToCart?: (product: Product) => void;
+    onSelectProduct?: (product: Product) => void;
+}
+
+export declare const sidebarDefault = "280px";
+
+/**
+ * SideNav — vertical sidebar navigation for dashboard layouts.
+ *
+ * Accessibility:
+ * - Semantic <nav> with <ul>/<li> structure
+ * - aria-current="page" on the active item
+ * - Collapse toggle button with aria-label
+ * - Title attribute on items when collapsed for tooltip-style labels
+ * - Nested items rendered as sub-lists for proper hierarchy
+ */
+export declare function SideNav({ items, collapsed, onCollapse, className }: SideNavProps): JSX_2.Element;
+
+export declare interface SideNavItem {
+    /** Display label */
+    label: string;
+    /** Optional URL */
+    href?: string;
+    /** Optional click handler */
+    onClick?: () => void;
+    /** Optional icon element */
+    icon?: ReactNode;
+    /** Whether this item is the active/current page */
+    active?: boolean;
+    /** Nested child items */
+    children?: SideNavItem[];
+}
+
+export declare interface SideNavProps {
+    /** Navigation items */
+    items: SideNavItem[];
+    /** Whether the sidebar is collapsed to icon-only mode */
+    collapsed?: boolean;
+    /** Callback when collapse state changes */
+    onCollapse?: (collapsed: boolean) => void;
+    /** Additional className */
+    className?: string;
+}
+
+/**
+ * SiteFooter — lede column (brand + pitch + optional newsletter slot) +
+ * navigation columns + a bottom rail with legal links, payment/cert chips,
+ * social buttons, and copyright.
+ */
+export declare function SiteFooter({ brand, pitch, newsletterSlot, columns, legalLinks, brandChips, socials, copyright, className, ...rest }: SiteFooterProps): JSX_2.Element;
+
+export declare interface SiteFooterProps extends HTMLAttributes<HTMLElement> {
+    brand: ReactNode;
+    /** Lead paragraph below the brand mark. */
+    pitch?: ReactNode;
+    /** Slot for a NewsletterSignup or custom CTA. */
+    newsletterSlot?: ReactNode;
+    columns: FooterColumn[];
+    legalLinks?: FooterLink[];
+    /** Small all-caps chips (payment brands, certifications). */
+    brandChips?: string[];
+    socials?: FooterSocial[];
+    /** e.g., "© 2026 House" — rendered verbatim. */
+    copyright?: ReactNode;
+}
+
+/**
+ * SiteHeader — announcement slot + brand + primary nav (with mega-menu
+ * support) + utility icons. Open/close state for mega menus is managed
+ * internally via hover + focus-within.
+ */
+export declare function SiteHeader({ brand, nav, search, cartCount, wishlistCount, onOpenSearch, onOpenAccount, onOpenWishlist, onOpenCart, topSlot, className, ...rest }: SiteHeaderProps): JSX_2.Element;
+
+export declare interface SiteHeaderProps extends HTMLAttributes<HTMLElement> {
+    brand: ReactNode;
+    nav: NavItem[];
+    /** Slot for a SearchBar — rendered in the utility row. */
+    search?: ReactNode;
+    cartCount?: number;
+    wishlistCount?: number;
+    onOpenSearch?: () => void;
+    onOpenAccount?: () => void;
+    onOpenWishlist?: () => void;
+    onOpenCart?: () => void;
+    /** Slot above the nav (e.g., AnnouncementBar). */
+    topSlot?: ReactNode;
+}
+
+export declare type Size = 'sm' | 'md' | 'lg';
+
+/**
+ * SizeGuide — measurement table with unit toggle.
+ *
+ * Intended to render inside a modal, drawer, or accordion. Accepts rows
+ * keyed by unit so "in ↔ cm" switching is instant and doesn't require
+ * re-computing.
+ */
+export declare function SizeGuide({ title, intro, columns, rowsByUnit, units, defaultUnit, illustration, className, ...rest }: SizeGuideProps): JSX_2.Element;
+
+export declare interface SizeGuideColumn {
+    /** Column header, e.g. "Chest", "Waist". */
+    label: string;
+    /** Optional note shown below the label. */
+    note?: string;
+}
+
+export declare interface SizeGuideProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    /** Short intro copy. */
+    intro?: ReactNode;
+    columns: SizeGuideColumn[];
+    /** Map of unit id (e.g. "in", "cm") -> rows. */
+    rowsByUnit: Record<string, SizeGuideRow[]>;
+    units?: SizeGuideUnit[];
+    defaultUnit?: string;
+    /** Optional illustration/diagram slot. */
+    illustration?: ReactNode;
+}
+
+export declare interface SizeGuideRow {
+    /** Row label — e.g. size name "S". */
+    size: string;
+    /** Values by column index, aligned with `columns`. */
+    values: (string | number)[];
+}
+
+export declare interface SizeGuideUnit {
+    id: string;
+    label: string;
+}
+
+/**
+ * Skeleton — placeholder loading indicator with shimmer animation.
+ *
+ * Accessibility:
+ * - aria-hidden="true" since it is purely decorative
+ * - Healthcare note: use Skeleton loaders in clinical dashboards to
+ *   indicate data is loading, reducing perceived wait time
+ */
+export declare function Skeleton({ variant, width, height, lines, className, style, ...props }: SkeletonProps): JSX_2.Element;
+
+export declare interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Shape variant */
+    variant?: 'text' | 'circular' | 'rectangular';
+    /** Width (CSS value) */
+    width?: string | number;
+    /** Height (CSS value) */
+    height?: string | number;
+    /** Number of text lines (only for text variant) */
+    lines?: number;
+}
+
+/**
+ * Slider — range input with custom styling.
+ *
+ * Accessibility:
+ * - Uses native input[type="range"] for full keyboard and AT support
+ * - Label linked via htmlFor/id
+ * - aria-valuemin, aria-valuemax, aria-valuenow communicated natively
+ * - showValue provides visual readout of current value
+ */
+export declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value'> {
+    /** Current value */
+    value?: number;
+    /** Change handler */
+    onChange?: (value: number) => void;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Accessible label text */
+    label?: string;
+    /** Show current value next to the slider */
+    showValue?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+
+/**
+ * SocialProof — a press/quote strip with optional stats and rating summary.
+ * Meant for above-the-fold hero bands and mid-page reassurance blocks.
+ */
+export declare function SocialProof({ headline, quotes, stats, ratingValue, ratingCount, footer, className, ...rest }: SocialProofProps): JSX_2.Element;
+
+export declare interface SocialProofProps extends HTMLAttributes<HTMLElement> {
+    /** Headline above the quote row. */
+    headline?: string;
+    quotes?: PressQuote[];
+    /** Summary stats — e.g., "4.8★ across 12k reviews". */
+    stats?: SocialProofStat[];
+    /** Optional star rating to show next to the headline (0–5). */
+    ratingValue?: number;
+    ratingCount?: number;
+    /** Optional footer slot — e.g., "As featured in" logo strip. */
+    footer?: ReactNode;
+}
+
+export declare interface SocialProofStat {
+    id: string;
+    value: string;
+    label: string;
+}
+
+export declare type SortDirection = 'asc' | 'desc';
+
+export declare function SortMenu({ options, value, onChange, label, className, ...rest }: SortMenuProps): JSX_2.Element;
+
+export declare interface SortMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    options: SortOption[];
+    value: string;
+    onChange: (value: string) => void;
+    label?: string;
+}
+
+export declare interface SortOption {
+    value: string;
+    label: string;
+}
+
+export declare const space: {
+    readonly 0: "0";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+};
+
+/**
+ * Bazaar Sparkline — minimal inline trend chart for KPIs and table cells.
+ *
+ * Pure visual: no axes, grid, tooltip, or legend. Designed to live inside
+ * stat cards, data grid cells, and dense dashboard surfaces.
+ */
+export declare function Sparkline({ data, dataKey, variant, width, height, color, strokeWidth, ariaLabel, }: SparklineProps): JSX_2.Element;
+
+export declare interface SparklineProps {
+    /** Array of numeric values OR row objects */
+    data: number[] | Record<string, unknown>[];
+    /** Property name when `data` is row-shaped (defaults to "value") */
+    dataKey?: string;
+    /** Render style */
+    variant?: 'line' | 'area';
+    /** Width in px (defaults to 120) — accepts any CSS length */
+    width?: number | string;
+    /** Height in px (defaults to 36) */
+    height?: number | string;
+    /** Line/area color (defaults to first Bazaar series color) */
+    color?: string;
+    /** Stroke width (defaults to 2) */
+    strokeWidth?: number;
+    /** Optional accessible label */
+    ariaLabel?: string;
+}
+
+/**
+ * Spinner / LoadingIndicator — visual loading state.
+ *
+ * Accessibility:
+ * - role="status" with aria-label for screen reader announcement
+ * - aria-live="polite" so loading state is announced without interrupting
+ * - Healthcare note: in clinical workflows, always pair with text
+ *   context ("Loading patient records...") so users understand what
+ *   they are waiting for
+ */
+export declare function Spinner({ size, label, className, ...props }: SpinnerProps): JSX_2.Element;
+
+export declare interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible label */
+    label?: string;
+}
+
+/**
+ * SplitImageCopy — 50/50 editorial block. Use for "About the fabric",
+ * "From the studio", etc. Reverses direction on narrow viewports.
+ */
+export declare function SplitImageCopy({ eyebrow, headline, body, image, imageSide, aspectRatio, cta, caption, className, ...rest }: SplitImageCopyProps): JSX_2.Element;
+
+export declare interface SplitImageCopyProps extends HTMLAttributes<HTMLElement> {
+    eyebrow?: string;
+    headline: string;
+    body?: ReactNode;
+    image: {
+        src?: string;
+        alt: string;
+        seed?: string;
+    };
+    /** Image on left ('image-left') or right ('image-right'). */
+    imageSide?: 'image-left' | 'image-right';
+    /** Aspect ratio of the image cell. */
+    aspectRatio?: string;
+    /** Optional CTA rendered inside the copy column. */
+    cta?: {
+        label: string;
+        onClick?: () => void;
+    };
+    /** Optional caption rendered under the image. */
+    caption?: string;
+}
+
+/**
+ * Stack — flex layout primitive for vertical or horizontal spacing.
+ *
+ * The most common layout component: arranges children with consistent
+ * gaps. Defaults to a vertical stack (column).
+ *
+ * Accessibility:
+ * - Purely presentational — no ARIA roles needed
+ * - Use semantic HTML via `as` prop when appropriate
+ */
+export declare const Stack: ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    /** Stack direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Gap between items */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Align items on the cross axis */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Justify items on the main axis */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    /** Whether items should wrap */
+    wrap?: boolean;
+    /** Render as a different HTML element */
+    as?: ElementType;
+}
+
+export declare type Status = 'success' | 'warning' | 'error' | 'info';
+
+/**
+ * StatusBadge — semantic status pill, shared across Skyfall kits.
+ *
+ * Accessibility:
+ * - Always displays text label alongside color (no color-only meaning)
+ * - Use `label` to override the default label per status
+ */
+export declare function StatusBadge({ status, label, size, dot, className, ...props }: StatusBadgeProps): JSX_2.Element;
+
+export declare interface StatusBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Semantic status */
+    status: StatusBadgeStatus;
+    /** Override the default label text */
+    label?: string;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Show a colored status dot before the label */
+    dot?: boolean;
+}
+
+/**
+ * Generic, cross-kit semantic status vocabulary.
+ *
+ * NOTE: This is a Bazaar refactor of an Aegis component that previously shipped
+ * a healthcare-specific status set (critical, discharged, scheduled). The shared
+ * vocabulary below is more reusable across kits — Aegis can map clinical
+ * severities and Bazaar can map learning states onto the same primitives.
+ */
+export declare type StatusBadgeStatus = 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'pending' | 'in-progress' | 'inactive' | 'completed' | 'locked';
+
+/**
+ * Stepper — multi-step form progress indicator.
+ *
+ * Accessibility:
+ * - Uses role="navigation" with aria-label
+ * - Each step is a button (when clickable) or div with aria-current="step"
+ * - Completed steps indicated via visual checkmark and sr-only text
+ * - Step descriptions provide additional context
+ */
+export declare function Stepper({ steps, activeStep, orientation, onStepClick, className, }: StepperProps): JSX_2.Element;
+
+export declare interface StepperProps {
+    /** Array of step definitions */
+    steps: StepperStep[];
+    /** Currently active step (0-indexed) */
+    activeStep: number;
+    /** Layout orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Callback when a step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+
+export declare interface StepperStep {
+    label: string;
+    description?: string;
+}
+
+/**
+ * StickyMobileATC — thin bottom-anchored bar for mobile product pages.
+ *
+ * On viewports < 768px it pins to the bottom of the viewport with a product
+ * thumb, price, and primary CTA. On larger screens it hides itself unless
+ * `alwaysVisible` is set (useful for stories).
+ */
+export declare function StickyMobileATC({ product, selectionLabel, onAddToCart, ctaLabel, disabled, alwaysVisible, className, ...rest }: StickyMobileATCProps): JSX_2.Element;
+
+export declare interface StickyMobileATCProps extends HTMLAttributes<HTMLDivElement> {
+    product: Product;
+    /** Short selection summary, e.g. "Sand · M". */
+    selectionLabel?: string;
+    onAddToCart?: (product: Product) => void;
+    ctaLabel?: string;
+    /** Disable the CTA (e.g. selection incomplete). */
+    disabled?: boolean;
+    /** Force-display on larger viewports (bypass the mobile-only media query). */
+    alwaysVisible?: boolean;
+}
+
+export declare interface Subscription {
+    id: string;
+    title: string;
+    brand?: string;
+    image?: ProductImage;
+    price: Money;
+    cadence: SubscriptionCadence;
+    /** ISO — next scheduled ship date. */
+    nextDelivery?: string;
+    status: SubscriptionStatus;
+    /** Optional variant summary like "Sand · Medium". */
+    variantSummary?: string;
+}
+
+export declare type SubscriptionCadence = 'weekly' | 'biweekly' | 'monthly' | 'bimonthly' | 'quarterly';
+
+/**
+ * SubscriptionsList — recurring deliveries with cadence, next-ship date and
+ * pause/skip/cancel actions. Muted styling applied when paused or cancelled.
+ */
+export declare function SubscriptionsList({ subscriptions, title, onPause, onResume, onSkip, onCancel, onEdit, className, ...rest }: SubscriptionsListProps): JSX_2.Element;
+
+export declare interface SubscriptionsListProps extends Omit<HTMLAttributes<HTMLElement>, 'onPause' | 'onResume'> {
+    subscriptions: Subscription[];
+    title?: string;
+    onPause?: (sub: Subscription) => void;
+    onResume?: (sub: Subscription) => void;
+    onSkip?: (sub: Subscription) => void;
+    onCancel?: (sub: Subscription) => void;
+    onEdit?: (sub: Subscription) => void;
+}
+
+export declare type SubscriptionStatus = 'active' | 'paused' | 'cancelled';
+
+/** Surface aliases */
+export declare const surface: {
+    readonly canvas: "#FBF9F4";
+    readonly default: "#FFFFFF";
+    readonly subtle: "#F4F2EC";
+    readonly raised: "#FFFFFF";
+    readonly spotlight: "#FBEEE4";
+};
+
+/**
+ * Switch — on/off toggle control.
+ *
+ * Accessibility:
+ * - Uses role="switch" with native checkbox for AT support
+ * - aria-checked reflects state
+ * - Label is clickable and linked
+ * - Healthcare note: use for non-critical preferences only.
+ *   For high-risk toggles (e.g., medication alerts), prefer explicit
+ *   confirmation patterns instead.
+ */
+export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Label text */
+    label?: string;
+}
+
+export declare interface Tab {
+    id: string;
+    label: string;
+    content: ReactNode;
+    disabled?: boolean;
+}
+
+/**
+ * Table — data table with accessible defaults.
+ *
+ * Accessibility:
+ * - Semantic <table> / <thead> / <tbody> / <th> structure
+ * - Use scope="col" on header cells
+ * - For complex tables, use aria-describedby to link to a caption
+ * - Healthcare note: clinical data tables should use tabular numerals
+ *   (monospace) and adequate row height for readability under stress
+ */
+export declare function Table({ density, striped, className, children, ...props }: TableProps): JSX_2.Element;
+
+export declare function TableBody({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>): JSX_2.Element;
+
+export declare function TableCell({ className, children, ...props }: TdHTMLAttributes<HTMLTableCellElement>): JSX_2.Element;
+
+export declare function TableHead({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>): JSX_2.Element;
+
+export declare function TableHeaderCell({ className, children, ...props }: ThHTMLAttributes<HTMLTableCellElement>): JSX_2.Element;
+
+export declare interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Compact density for admin/operational views */
+    density?: 'default' | 'compact';
+    /** Striped rows for scan-ability */
+    striped?: boolean;
+}
+
+export declare function TableRow({ className, children, ...props }: HTMLAttributes<HTMLTableRowElement>): JSX_2.Element;
+
+/**
+ * Tabs — tabbed interface for switching between content panels.
+ *
+ * Accessibility:
+ * - Full WAI-ARIA tabs pattern: role="tablist", role="tab", role="tabpanel"
+ * - Arrow key navigation between tabs
+ * - Home/End keys jump to first/last tab
+ * - aria-selected, aria-controls, aria-labelledby for AT relationships
+ * - Only active panel is in the tab order (tabIndex=0 on active tab)
+ */
+export declare function Tabs({ tabs, activeTab, onTabChange, className }: TabsProps): JSX_2.Element;
+
+export declare interface TabsProps {
+    /** Tab definitions */
+    tabs: Tab[];
+    /** Controlled active tab id */
+    activeTab?: string;
+    /** Callback when tab changes */
+    onTabChange?: (id: string) => void;
+    /** Additional className for the wrapper */
+    className?: string;
+}
+
+/**
+ * TagInput — multi-value text input that creates tag chips.
+ *
+ * Users type text and press Enter or comma to create tags.
+ * Tags can be removed with Backspace or by clicking the remove button.
+ *
+ * Accessibility:
+ * - Tags have aria-label and remove button with aria-label
+ * - Backspace removes last tag when input is empty
+ * - Screen readers announce tag count via aria-describedby
+ */
+export declare const TagInput: ForwardRefExoticComponent<TagInputProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface TagInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Current tag values */
+    value?: string[];
+    /** Called when tags change */
+    onChange?: (tags: string[]) => void;
+    /** Placeholder for the text input */
+    placeholder?: string;
+    /** Label */
+    label?: string;
+    /** Maximum number of tags allowed */
+    max?: number;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Characters that trigger tag creation (default: Enter, comma) */
+    separators?: string[];
+    /** Whether duplicates are allowed */
+    allowDuplicates?: boolean;
+}
+
+/** Text aliases */
+export declare const text: {
+    readonly primary: "#1F1C17";
+    readonly secondary: "#433D32";
+    readonly muted: "#8A816B";
+    readonly inverse: "#FBF9F4";
+    readonly brand: "#C96C3E";
+};
+
+/**
+ * Textarea — multi-line text input.
+ *
+ * Accessibility:
+ * - Associate with Label via htmlFor/id
+ * - Link to HelperText via aria-describedby
+ */
+export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Error state */
+    error?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Allow vertical resize */
+    resize?: 'none' | 'vertical' | 'both';
+}
+
+/**
+ * TextField — single-line text input.
+ *
+ * Accessibility:
+ * - Use with <Label> and associate via htmlFor/id
+ * - Use aria-describedby to link to HelperText or error messages
+ * - aria-invalid signals error state to assistive technology
+ * - Visible border change + color signals error (not color alone)
+ */
+export declare const TextField: ForwardRefExoticComponent<TextFieldProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Size of the input control */
+    size?: 'sm' | 'md' | 'lg';
+    /** Error state */
+    error?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+}
+
+/**
+ * Timeline — vertical timeline for displaying sequential events.
+ *
+ * Accessibility:
+ * - Uses semantic <ol> for ordered event sequence
+ * - Each event is an <li> for proper list semantics
+ * - Icons are decorative (aria-hidden)
+ */
+export declare function Timeline({ items, className, ...props }: TimelineProps): JSX_2.Element;
+
+export declare interface TimelineItem {
+    /** Unique identifier */
+    id: string;
+    /** Event title */
+    title: string;
+    /** Optional description */
+    description?: string;
+    /** Timestamp display string */
+    timestamp: string;
+    /** Optional icon to replace the default dot */
+    icon?: ReactNode;
+    /** Visual variant */
+    variant?: TimelineItemVariant;
+}
+
+export declare type TimelineItemVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+export declare interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+    /** Timeline items in chronological order */
+    items: TimelineItem[];
+}
+
+/**
+ * Toast — transient notification that auto-dismisses.
+ *
+ * Accessibility:
+ * - Uses role="alert" for error/warning (assertive), role="status" for info/success (polite)
+ * - Close button has accessible label
+ * - Auto-dismiss can be disabled for important messages
+ * - Icon + color + text ensures meaning is communicated multiple ways
+ */
+export declare function Toast({ message, title, status, action, onClose, duration, className, }: ToastProps): JSX_2.Element;
+
+export declare interface ToastProps {
+    /** Toast message */
+    message: string;
+    /** Optional title */
+    title?: string;
+    /** Status variant */
+    status?: ToastStatus;
+    /** Optional action element */
+    action?: ReactNode;
+    /** Called when toast is closed */
+    onClose: () => void;
+    /** Auto-dismiss duration in ms (0 to disable) */
+    duration?: number;
+    /** Additional class name */
+    className?: string;
+}
+
+export declare type ToastStatus = 'info' | 'success' | 'warning' | 'error';
+
+/**
+ * Toolbar — horizontal action bar with grouped controls.
+ *
+ * Use with ToolbarGroup to visually separate related actions
+ * and ToolbarDivider for explicit separators.
+ *
+ * Accessibility:
+ * - Uses toolbar ARIA role
+ * - Children should be buttons or controls with labels
+ */
+export declare const Toolbar: ForwardRefExoticComponent<ToolbarProps & RefAttributes<HTMLDivElement>>;
+
+export declare const ToolbarDivider: ForwardRefExoticComponent<ToolbarDividerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ToolbarDividerProps extends HTMLAttributes<HTMLDivElement> {
+}
+
+export declare const ToolbarGroup: ForwardRefExoticComponent<ToolbarGroupProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ToolbarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Group content */
+    children: ReactNode;
+}
+
+export declare interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Size variant — affects padding and child button sizing */
+    size?: 'sm' | 'md';
+    /** Visual variant */
+    variant?: 'default' | 'outlined';
+    /** Toolbar content (buttons, groups, dividers) */
+    children: ReactNode;
+}
+
+/**
+ * Tooltip — supplementary text on hover/focus.
+ *
+ * Accessibility:
+ * - Shows on both hover and keyboard focus
+ * - Uses role="tooltip" with aria-describedby linking
+ * - Respects reduced motion preferences (no animation)
+ * - Healthcare note: never put critical information in tooltips alone.
+ *   Use for supplementary context only, since tooltips are easy to miss
+ *   and not accessible on touch devices.
+ */
+export declare function Tooltip({ content, children, placement, delay, className }: TooltipProps): JSX_2.Element;
+
+export declare interface TooltipProps {
+    /** Tooltip content */
+    content: ReactNode;
+    /** Trigger element */
+    children: ReactNode;
+    /** Placement */
+    placement?: 'top' | 'bottom';
+    /** Delay before showing (ms) */
+    delay?: number;
+    /** Additional className */
+    className?: string;
+}
+
+export declare const touchMin = "44px";
+
+export declare const tracking: {
+    readonly tight: "-0.02em";
+    readonly normal: "0em";
+    readonly wide: "0.01em";
+};
+
+export declare interface TrackingEvent {
+    status: OrderStatus | 'label-created';
+    label: string;
+    description?: string;
+    /** ISO timestamp. */
+    at?: string;
+    location?: string;
+}
+
+export declare interface TreeNode {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Child nodes */
+    children?: TreeNode[];
+    /** Whether the node is disabled */
+    disabled?: boolean;
+}
+
+/**
+ * TreeView — hierarchical data display with expand/collapse.
+ *
+ * Renders nested tree data with keyboard navigation, selection,
+ * and optional connecting guide lines.
+ *
+ * Accessibility:
+ * - Uses tree/treeitem/group ARIA roles
+ * - Arrow keys expand/collapse nodes
+ * - Enter/Space selects nodes
+ * - aria-expanded on branch nodes
+ */
+export declare const TreeView: ForwardRefExoticComponent<TreeViewProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface TreeViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Tree data */
+    data: TreeNode[];
+    /** IDs of initially expanded nodes (uncontrolled) */
+    defaultExpanded?: string[];
+    /** IDs of expanded nodes (controlled) */
+    expanded?: string[];
+    /** Called when a node is expanded/collapsed */
+    onExpandChange?: (expanded: string[]) => void;
+    /** Currently selected node ID */
+    selected?: string | null;
+    /** Called when a node is selected */
+    onSelect?: (nodeId: string, node: TreeNode) => void;
+    /** Size variant */
+    size?: 'sm' | 'md';
+    /** Show connecting lines between levels */
+    showLines?: boolean;
+}
+
+export declare type TrendDirection = 'up' | 'down' | 'neutral';
+
+/**
+ * TrendStatCard — KPI card with a prominent trend chart underneath.
+ *
+ * Larger than KpiStatCard's inline sparkline, designed to fill more space
+ * in dashboard rows where a trend story is the primary message.
+ */
+export declare function TrendStatCard<T extends Record<string, unknown>>({ label, value, unit, data, xKey, yKey, change, changeLabel, inverse, color, valueFormatter, chartHeight, className, ...props }: TrendStatCardProps<T>): JSX_2.Element;
+
+export declare interface TrendStatCardProps<T extends Record<string, unknown>> extends HTMLAttributes<HTMLDivElement> {
+    /** Metric label (e.g. "30-day readmissions") */
+    label: string;
+    /** Headline value */
+    value: ReactNode;
+    /** Optional unit (e.g. "%", "patients") */
+    unit?: ReactNode;
+    /** Trend chart data — row-shaped */
+    data: T[];
+    /** X-axis key on each row */
+    xKey: keyof T & string;
+    /** Y value key on each row */
+    yKey: keyof T & string;
+    /** Percent change value */
+    change?: number;
+    /** Change context label */
+    changeLabel?: string;
+    /** Inverse semantics — set true when a decrease is "good" */
+    inverse?: boolean;
+    /** Color override for the trend area */
+    color?: string;
+    /** Format values shown in tooltip */
+    valueFormatter?: ValueFormatter;
+    /** Chart height (defaults to 80) */
+    chartHeight?: number;
+}
+
+/**
+ * TrustBadgeCluster — a row (or grid) of reassurance badges. Use in a
+ * footer band, on a PDP below the buy box, or on a cart / confirmation
+ * page to underline policy.
+ */
+export declare function TrustBadgeCluster({ items, layout, eyebrow, className, ...rest }: TrustBadgeClusterProps): JSX_2.Element;
+
+export declare interface TrustBadgeClusterProps extends HTMLAttributes<HTMLElement> {
+    items: TrustBadgeItem[];
+    /** 'card' places each badge in its own bordered cell; 'inline' renders a
+     * flat icon-and-text row separated by thin dividers. */
+    layout?: 'card' | 'inline';
+    /** Label displayed above the cluster (optional). */
+    eyebrow?: string;
+}
+
+export declare interface TrustBadgeItem {
+    id: string;
+    icon?: ReactNode;
+    label: string;
+    sublabel?: string;
+}
+
+/**
+ * Typography — text rendering primitive.
+ *
+ * Maps directly to the Bazaar type scale tokens and provides a consistent
+ * API for rendering text at any level of the hierarchy.
+ *
+ * Accessibility:
+ * - Defaults to the semantically correct HTML element for each variant
+ *   (h1–h4 for headings, p for body, code for code, span for labels)
+ * - Use `as` to override when the visual style and semantic level differ
+ * - `color="inherit"` defers to the parent color
+ */
+export declare const Typography: ForwardRefExoticComponent<TypographyProps & RefAttributes<HTMLElement>>;
+
+export declare type TypographyAlign = 'left' | 'center' | 'right';
+
+export declare type TypographyColor = 'primary' | 'secondary' | 'muted' | 'inverse' | 'success' | 'warning' | 'error' | 'info' | 'inherit';
+
+export declare interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    /** Typographic scale variant */
+    variant?: TypographyVariant;
+    /** Text color */
+    color?: TypographyColor;
+    /** Font weight override */
+    weight?: TypographyWeight;
+    /** Text alignment */
+    align?: TypographyAlign;
+    /** Render as a specific HTML element (overrides the variant default) */
+    as?: ElementType;
+    /** Truncate with ellipsis */
+    truncate?: boolean;
+    /** Clamp to N lines */
+    lineClamp?: number;
+}
+
+export declare type TypographyVariant = 'display-lg' | 'display-md' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'caption' | 'data' | 'code';
+
+export declare type TypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold';
+
+export declare type ValueFormatter = (value: number | string) => string;
+
+export declare type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
+
+export declare interface VariantAxis {
+    /** Axis name shown above the selector, e.g. "Color", "Size". */
+    name: string;
+    kind: VariantKind;
+    options: VariantOption[];
+    /** Visual density for the axis. */
+    style?: 'pills' | 'swatches' | 'dropdown' | 'image-swatches';
+}
+
+export declare type VariantKind = 'color' | 'size' | 'material' | 'option' | 'image';
+
+export declare interface VariantOption {
+    kind: VariantKind;
+    label: string;
+    value: string;
+    /** For color swatches — CSS color or gradient. */
+    swatchColor?: string;
+    /** For image swatches — background image URL. */
+    swatchImage?: string;
+    available?: boolean;
+    priceDelta?: Money;
+}
+
+/**
+ * VariantSelector — renders a single variant axis (color, size, material...).
+ *
+ * The axis's `style` drives layout: `swatches` for color chips, `pills` for
+ * size buttons, `dropdown` for a native select, `image-swatches` for product
+ * thumbnails. Unavailable options render with a strikethrough indicator.
+ */
+export declare function VariantSelector({ axis, value, onChange, helper, showSelectionLabel, className, ...rest }: VariantSelectorProps): JSX_2.Element;
+
+export declare interface VariantSelectorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    axis: VariantAxis;
+    /** Currently-selected option value. */
+    value?: string;
+    onChange?: (option: VariantOption) => void;
+    /** Optional right-side helper slot, e.g. "Size guide". */
+    helper?: React.ReactNode;
+    /** Show the selected option label next to the axis name. */
+    showSelectionLabel?: boolean;
+}
+
+/**
+ * VisuallyHidden — renders content that is hidden visually but accessible
+ * to screen readers and other assistive technology.
+ *
+ * Use for:
+ * - Labels for icon-only buttons
+ * - Additional context for screen readers
+ * - Skip navigation links
+ * - Form labels that are visually unnecessary but needed for a11y
+ *
+ * This uses the standard screen-reader-only CSS technique that keeps
+ * content in the document flow for assistive tech while hiding it
+ * from sighted users.
+ */
+export declare function VisuallyHidden({ as: Component, children, ...props }: VisuallyHiddenProps): JSX_2.Element;
+
+export declare interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Render as a different element */
+    as?: 'span' | 'div' | 'label';
+}
+
+/**
+ * WishlistGrid — account-section presentation of saved products. Wraps
+ * ProductGrid + ProductCard with per-card remove/add actions.
+ */
+export declare function WishlistGrid({ products, title, onRemove, onAddToCart, onSelectProduct, emptyCta, emptyTitle, emptyBody, className, ...rest }: WishlistGridProps): JSX_2.Element;
+
+export declare interface WishlistGridProps extends HTMLAttributes<HTMLElement> {
+    products: Product[];
+    title?: string;
+    onRemove?: (product: Product) => void;
+    onAddToCart?: (product: Product) => void;
+    onSelectProduct?: (product: Product) => void;
+    /** Empty-state CTA slot. */
+    emptyCta?: React.ReactNode;
+    /** Override the default "Your wishlist is empty" copy. */
+    emptyTitle?: string;
+    emptyBody?: string;
+}
+
+export declare const zIndex: {
+    readonly base: 0;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly banner: 1200;
+    readonly overlay: 1300;
+    readonly modal: 1400;
+    readonly toast: 1500;
+    readonly tooltip: 1600;
+};
+
+export { }