@seekora-ai/ui-sdk-react 0.0.0-stage-20260517092419

package/dist/src/index.d.ts

@@ -0,0 +1,4469 @@
+import * as React$1 from 'react';
+import React__default, { ReactNode, CSSProperties } from 'react';
+import { SearchOptions, SearchResponse, SeekoraClient, SearchContext, DataTypesEventPayload, ExtendedEventPayload, FilterOptions, FilterField, FiltersSchemaResponse, FacetValuesSearchResponse } from '@seekora-ai/search-sdk';
+export { FacetSearchOptions, FacetValuesSearchResponse, FilterField, FilterOptions, FilterSchemaField, FilterStats, FilterValue, FiltersResponse, FiltersSchemaResponse } from '@seekora-ai/search-sdk';
+import * as _seekora_ai_ui_sdk_types from '@seekora-ai/ui-sdk-types';
+import { ResultItem, ViewMode, FieldMapping, ThemeConfig, Theme, QuerySuggestionsEventHandlers, HighlightConfig, KeyboardNavConfig, AnimationConfig, QuerySuggestionsClassNames, SuggestionItem as SuggestionItem$3, RecentSearch, DropdownSectionConfig, SuggestionCategory, TrendingSearch, ProductItem, PopularBrand, FilteredTab, QuerySuggestionsVariant, QuerySuggestionsResponse, DropdownRecommendations, TopSearch, RelatedSearch, PriceRange, ProductBadge, ProductOption, ProductVariant } from '@seekora-ai/ui-sdk-types';
+export { FieldMapping, PriceRange, ProductBadge, ProductOption, ProductVariant, ResultItem, Theme, ThemeConfig, ViewMode } from '@seekora-ai/ui-sdk-types';
+import { SearchStateManagerConfig, SearchStateManager, HighlightPart, SearchState } from '@seekora-ai/ui-sdk-core';
+export { Fingerprint, FingerprintComponents, FingerprintConfig, FingerprintResult, getFingerprint, mergeThemes } from '@seekora-ai/ui-sdk-core';
+
+/**
+ * SearchBar Component
+ *
+ * Interactive search input component with query suggestions support
+ */
+
+type SearchBarSize = 'small' | 'medium' | 'large';
+interface SearchBarTheme {
+    container?: string;
+    input?: string;
+    inputFocused?: string;
+    suggestionsContainer?: string;
+    suggestionItem?: string;
+    suggestionItemHover?: string;
+    suggestionItemActive?: string;
+    searchIcon?: string;
+    clearButton?: string;
+    submitButton?: string;
+}
+interface SearchBarProps {
+    placeholder?: string;
+    showSuggestions?: boolean;
+    debounceMs?: number;
+    minQueryLength?: number;
+    maxSuggestions?: number;
+    onSearch?: (query: string, results: any) => void;
+    onQueryChange?: (query: string) => void;
+    onSuggestionSelect?: (suggestion: string) => void;
+    onSearchStateChange?: (state: {
+        results: any;
+        loading: boolean;
+        error: Error | null;
+    }) => void;
+    searchOptions?: Omit<SearchOptions, 'q'>;
+    className?: string;
+    style?: React__default.CSSProperties;
+    theme?: SearchBarTheme;
+    renderSuggestion?: (suggestion: string, index: number) => React__default.ReactNode;
+    /** Custom render for the search icon. If not provided, a default magnifying glass SVG is rendered. */
+    renderSearchIcon?: () => React__default.ReactNode;
+    /** Whether to show a clear button when the query is non-empty (default: true) */
+    showClearButton?: boolean;
+    /** Custom render for the clear icon */
+    renderClearIcon?: () => React__default.ReactNode;
+    /** Whether to show a submit button to the right of the input (default: false) */
+    showSubmitButton?: boolean;
+    /** Custom render for the submit button */
+    renderSubmitButton?: () => React__default.ReactNode;
+    /** Size variant controlling padding and font size (default: 'medium') */
+    size?: SearchBarSize;
+    /** Trigger search automatically as user types, with debounce (default: false).
+     *  When true, uses `debounceMs` for the delay. Enter still triggers immediately. */
+    searchAsYouType?: boolean;
+}
+declare const SearchBar: React__default.FC<SearchBarProps>;
+
+/**
+ * SearchResults Component
+ *
+ * Displays search results with customizable rendering
+ * Includes keyboard navigation support (arrow keys, Enter to select)
+ */
+
+interface SearchResultsTheme {
+    container?: string;
+    header?: string;
+    resultsList?: string;
+    resultItem?: string;
+    resultItemHover?: string;
+    resultTitle?: string;
+    resultDescription?: string;
+    resultImage?: string;
+    resultPrice?: string;
+    emptyState?: string;
+    errorState?: string;
+    pagination?: string;
+    /** Custom min-height class override */
+    minHeight?: string;
+    /** Custom min-width class override */
+    minWidth?: string;
+}
+interface SearchResultsProps {
+    results?: SearchResponse | null;
+    loading?: boolean;
+    error?: Error | null;
+    onResultClick?: (result: ResultItem, index: number) => void;
+    renderResult?: (result: ResultItem, index: number, isActive?: boolean) => React__default.ReactNode;
+    renderEmpty?: () => React__default.ReactNode;
+    renderError?: (error: Error) => React__default.ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+    theme?: SearchResultsTheme;
+    itemsPerPage?: number;
+    showPagination?: boolean;
+    /** Display mode: 'list' (default), 'card', or 'grid' */
+    viewMode?: ViewMode;
+    /** Field mapping configuration for extracting data from results */
+    fieldMapping?: FieldMapping;
+    /** Function to extract results array from the response (if custom structure) */
+    extractResults?: (response: any) => any[];
+    /** Enable keyboard navigation (arrow keys, Enter to select) */
+    enableKeyboardNavigation?: boolean;
+    /** Auto-focus the results container */
+    autoFocus?: boolean;
+    /** Minimum height to prevent container collapse when empty (default: '400px') */
+    minHeight?: string;
+    /** Minimum width to prevent container shrinking (default: '100%') */
+    minWidth?: string;
+}
+declare const SearchResults: React__default.FC<SearchResultsProps>;
+
+/**
+ * SearchProvider Component
+ *
+ * Provides Seekora client and context to child components.
+ * Supports A/B testing via abTestId/abVariant props.
+ */
+
+interface SearchContextValue {
+    client: SeekoraClient;
+    theme: Theme;
+    enableAnalytics: boolean;
+    autoTrackSearch: boolean;
+    stateManager: SearchStateManager;
+}
+interface SearchProviderProps {
+    client: SeekoraClient;
+    theme?: ThemeConfig;
+    enableAnalytics?: boolean;
+    autoTrackSearch?: boolean;
+    stateManager?: SearchStateManagerConfig;
+    children: ReactNode;
+    /** A/B test experiment ID to include in all analytics events */
+    abTestId?: string;
+    /** A/B test variant to include in all analytics events */
+    abVariant?: string;
+    /** Auto-fetch experiment assignments on mount (default: false) */
+    experiments?: boolean;
+}
+declare const SearchProvider: React__default.FC<SearchProviderProps>;
+declare const useSearchContext: () => SearchContextValue;
+
+/**
+ * Stats Component
+ *
+ * Displays search statistics (total results, processing time, etc.)
+ * Supports inline, badge, and detailed display variants.
+ */
+
+interface StatsTheme {
+    container?: string;
+    text?: string;
+    highlight?: string;
+    separator?: string;
+    badge?: string;
+    badgeLabel?: string;
+    badgeValue?: string;
+    detailed?: string;
+    detailedRow?: string;
+    detailedLabel?: string;
+    detailedValue?: string;
+}
+interface StatsProps {
+    /** Search results response */
+    results?: SearchResponse | null;
+    /** Custom render function */
+    renderStats?: (stats: {
+        totalResults: number;
+        processingTime?: number;
+        query?: string;
+    }) => React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: StatsTheme;
+    /** Show processing time */
+    showProcessingTime?: boolean;
+    /** Show query */
+    showQuery?: boolean;
+    /** Custom separator between stats */
+    separator?: string;
+    /** Display variant */
+    variant?: 'inline' | 'badge' | 'detailed';
+    /** Show result count (default: true) */
+    showResultCount?: boolean;
+    /** Custom number formatter (default: toLocaleString) */
+    formatNumber?: (n: number) => string;
+}
+declare const Stats: React__default.FC<StatsProps>;
+
+/**
+ * Pagination Component
+ *
+ * Displays pagination controls for search results.
+ * Supports three display variants: numbered, load-more, and simple.
+ *
+ * CSS Variables (applied to the container element):
+ *   --seekora-pagination-bg
+ *   --seekora-pagination-color
+ *   --seekora-pagination-active-bg
+ *   --seekora-pagination-active-color
+ *   --seekora-pagination-border
+ *   --seekora-pagination-radius
+ */
+
+interface PaginationTheme {
+    container?: string;
+    list?: string;
+    item?: string;
+    itemActive?: string;
+    itemDisabled?: string;
+    link?: string;
+    ellipsis?: string;
+    /** Class for the Load More button */
+    loadMoreButton?: string;
+    /** Class for the Load More descriptive text (e.g. "X remaining") */
+    loadMoreText?: string;
+    /** Class for the simple variant outer container */
+    simpleContainer?: string;
+    /** Class for the "Page X of Y" text in the simple variant */
+    simpleText?: string;
+    /** Class for Previous/Next buttons in the simple variant */
+    simpleButton?: string;
+    /** Class for the "Page X of Y" info text (usable in any variant) */
+    pageInfo?: string;
+}
+interface PaginationProps {
+    /** Search results response */
+    results?: SearchResponse | null;
+    /** Current page number (1-indexed) */
+    currentPage?: number;
+    /** Items per page */
+    itemsPerPage?: number;
+    /** Total number of pages */
+    totalPages?: number;
+    /** Callback when page changes */
+    onPageChange?: (page: number) => void;
+    /** Maximum number of page buttons to show */
+    maxPages?: number;
+    /** Show first/last page buttons */
+    showFirstLast?: boolean;
+    /** Show previous/next buttons */
+    showPrevNext?: boolean;
+    /** Custom render function for page button */
+    renderPageButton?: (page: number, isActive: boolean, isDisabled: boolean) => React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: PaginationTheme;
+    /**
+     * Display variant.
+     * - 'numbered' (default): numbered page buttons with prev/next
+     * - 'load-more': single "Load More" button
+     * - 'simple': Previous / Next buttons with "Page X of Y" text
+     */
+    variant?: 'numbered' | 'load-more' | 'simple';
+    /** Label for the Load More button (default: "Load More") */
+    loadMoreText?: string;
+    /**
+     * Button / text sizing.
+     * - 'small': compact
+     * - 'medium' (default): standard
+     * - 'large': spacious
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Show "Page X of Y" text.
+     * Defaults to false for numbered, true for simple.
+     */
+    showPageInfo?: boolean;
+    /** Label for the Previous button (default: "Previous") */
+    previousLabel?: string;
+    /** Label for the Next button (default: "Next") */
+    nextLabel?: string;
+}
+declare const Pagination: React__default.FC<PaginationProps>;
+
+/**
+ * SortBy Component
+ *
+ * Displays sort options for search results in multiple display variants:
+ * - dropdown (default) — native select element
+ * - button-group — horizontal row of toggle buttons
+ * - radio-group — vertical list of radio inputs
+ *
+ * Integrates with SearchStateManager for automatic state sync.
+ *
+ * CSS Variables (apply on a parent element to customize):
+ * --seekora-sort-bg           — background color
+ * --seekora-sort-color        — text color
+ * --seekora-sort-border       — border color
+ * --seekora-sort-active-bg    — active item background
+ * --seekora-sort-active-color — active item text color
+ */
+
+interface SortOption {
+    value: string;
+    label: string;
+}
+type SortByVariant = 'dropdown' | 'button-group' | 'radio-group';
+type SortBySize = 'small' | 'medium' | 'large';
+interface SortByTheme {
+    /** Root container */
+    container?: string;
+    /** Dropdown select element */
+    select?: string;
+    /** Dropdown option element */
+    option?: string;
+    /** Optional label above the control */
+    label?: string;
+    /** Button group wrapper */
+    buttonGroup?: string;
+    /** Individual button in the group */
+    buttonGroupItem?: string;
+    /** Active button in the group */
+    buttonGroupItemActive?: string;
+    /** Radio group wrapper */
+    radioGroup?: string;
+    /** Individual radio row (input + label) */
+    radioItem?: string;
+    /** Active radio row */
+    radioItemActive?: string;
+    /** Radio label text */
+    radioLabel?: string;
+}
+interface SortByProps {
+    /** Available sort options */
+    options: SortOption[];
+    /** Current sort value (controlled mode - overrides StateManager) */
+    value?: string;
+    /** Default sort value */
+    defaultValue?: string;
+    /** Callback when sort changes */
+    onSortChange?: (value: string) => void;
+    /** Custom render function for select (only used in dropdown variant) */
+    renderSelect?: (props: {
+        value: string;
+        onChange: (e: React__default.ChangeEvent<HTMLSelectElement>) => void;
+        options: SortOption[];
+    }) => React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: SortByTheme;
+    /** Placeholder text (dropdown variant) */
+    placeholder?: string;
+    /** Whether to sync with SearchStateManager (default: true) */
+    syncWithState?: boolean;
+    /** Display variant (default: 'dropdown') */
+    variant?: SortByVariant;
+    /** Optional label text displayed above the control */
+    label?: string;
+    /** Whether to show the label (default: true when label is provided) */
+    showLabel?: boolean;
+    /** Size variant affecting padding and font size (default: 'medium') */
+    size?: SortBySize;
+}
+declare const SortBy: React__default.FC<SortByProps>;
+
+/**
+ * Facets Component
+ *
+ * Displays facet filters for search results with multiple display variants,
+ * client-side search, count badges, and color swatch support.
+ */
+
+interface FacetItem {
+    value: string;
+    count: number;
+    selected?: boolean;
+}
+interface FacetStats {
+    min: number;
+    max: number;
+    avg?: number;
+    sum?: number;
+}
+interface FacetRangeItem {
+    label: string;
+    from?: number;
+    to?: number;
+}
+interface FacetRangeConfig {
+    field: string;
+    ranges: FacetRangeItem[];
+}
+interface Facet {
+    field: string;
+    label?: string;
+    items: FacetItem[];
+    stats?: FacetStats;
+}
+interface FacetsTheme {
+    container?: string;
+    facet?: string;
+    facetHeader?: string;
+    facetTitle?: string;
+    facetList?: string;
+    facetItem?: string;
+    facetItemActive?: string;
+    facetItemCount?: string;
+    facetItemLabel?: string;
+    checkbox?: string;
+    /** Color swatch circle/square */
+    colorSwatch?: string;
+    /** Color swatch when selected */
+    colorSwatchSelected?: string;
+    /** Inner element of color swatch (for checkmark overlay) */
+    colorSwatchInner?: string;
+    /** Search input within a facet group */
+    searchInput?: string;
+    /** Collapsible header row */
+    collapsibleHeader?: string;
+    /** Chevron/expand icon in collapsible header */
+    collapsibleIcon?: string;
+    /** Count badge pill */
+    countBadge?: string;
+    /** Range button (pre-configured range option) */
+    rangeButton?: string;
+    /** Active range button */
+    rangeButtonActive?: string;
+    /** Count badge on range button */
+    rangeButtonCount?: string;
+    /** Clear button for range filters */
+    rangeClear?: string;
+}
+type FacetVariant = 'checkbox' | 'color-swatch' | 'collapsible';
+type FacetSize = 'small' | 'medium' | 'large';
+interface FacetsProps {
+    /** Search results response */
+    results?: SearchResponse | null;
+    /** Custom facets data */
+    facets?: Facet[];
+    /** Callback when facet is selected/deselected */
+    onFacetChange?: (field: string, value: string, selected: boolean) => void;
+    /** Custom render function for facet */
+    renderFacet?: (facet: Facet, index: number) => React__default.ReactNode;
+    /** Custom render function for facet item */
+    renderFacetItem?: (item: FacetItem, facet: Facet, index: number) => React__default.ReactNode;
+    /** Maximum number of items to show per facet */
+    maxItems?: number;
+    /** Show "Show more" button */
+    showMore?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: FacetsTheme;
+    /** Display variant: checkbox (default), color-swatch, or collapsible */
+    variant?: FacetVariant;
+    /** When true, show a search input at the top of each facet group */
+    searchable?: boolean;
+    /** Show count badges (default: true) */
+    showCounts?: boolean;
+    /** Maps facet values to CSS colors (used by color-swatch variant) */
+    colorMap?: Record<string, string>;
+    /** For collapsible variant, whether facets start collapsed (default: false) */
+    defaultCollapsed?: boolean;
+    /** Size preset: small, medium (default), or large */
+    size?: FacetSize;
+    /** Pre-configured range button definitions for numeric facets */
+    facetRanges?: FacetRangeConfig[];
+    /** Use dedicated Filters API instead of extracting facets from search results */
+    useFiltersApi?: boolean;
+    /** Fields that should use disjunctive (OR) faceting (only with useFiltersApi) */
+    disjunctiveFacets?: string[];
+    /** Hide facets that have no selectable values (default: true) */
+    hideEmptyFacets?: boolean;
+    /** Fields that should start collapsed (collapsible variant only). Overrides defaultCollapsed for listed fields. */
+    defaultCollapsedFields?: string[];
+    /** Callback fired when facet availability changes. Receives true when facets are available, false when empty. */
+    onFacetsAvailable?: (available: boolean) => void;
+}
+declare const Facets: React__default.FC<FacetsProps>;
+
+/**
+ * FacetDropdown Component
+ *
+ * A dropdown component that displays facet values from a specific field
+ * and allows users to filter search results by selecting values.
+ *
+ * Can be used standalone (fetches its own data) or integrated with SearchProvider.
+ *
+ * @cssVariables
+ * Customize the dropdown appearance using CSS variables:
+ *
+ * Button:
+ * - `--facet-dropdown-button-bg`: Button background color
+ * - `--facet-dropdown-text`: Button text color
+ * - `--facet-dropdown-border`: Button and panel border color
+ * - `--facet-dropdown-font-size`: Button font size (default: 0.875rem)
+ * - `--facet-dropdown-font-weight`: Button font weight (default: 500)
+ *
+ * Dropdown Panel:
+ * - `--facet-dropdown-bg`: Panel background color
+ * - `--facet-dropdown-shadow`: Panel box shadow
+ *
+ * Options:
+ * - `--facet-dropdown-option-text`: Option text color
+ * - `--facet-dropdown-option-font-size`: Option font size (default: 0.875rem)
+ * - `--facet-dropdown-option-font-weight-active`: Active option font weight (default: 500)
+ * - `--facet-dropdown-option-active-bg`: Active option background color
+ *
+ * Count Badge:
+ * - `--facet-dropdown-count-text`: Count text color
+ * - `--facet-dropdown-count-font-size`: Count font size (default: 0.75rem)
+ *
+ * Scrollbar:
+ * - `--facet-dropdown-scrollbar-thumb`: Scrollbar thumb color
+ * - `--facet-dropdown-scrollbar-thumb-hover`: Scrollbar thumb hover color
+ *
+ * @example
+ * ```tsx
+ * <FacetDropdown
+ *   field="category"
+ *   placeholder="All Categories"
+ *   applyFilter={true}
+ *   showCounts={true}
+ * />
+ * ```
+ */
+
+interface FacetDropdownOption {
+    value: string;
+    count: number;
+    label?: string;
+}
+interface FacetDropdownTheme {
+    button?: string;
+    buttonOpen?: string;
+    panel?: string;
+    option?: string;
+    optionActive?: string;
+    optionHover?: string;
+    caretIcon?: string;
+}
+interface FacetDropdownProps {
+    /** The facet field to display (e.g., "category", "brand", "product_type") */
+    field: string;
+    /** Placeholder text when no value is selected */
+    placeholder?: string;
+    /** Custom className for the button */
+    className?: string;
+    /** Custom theme overrides */
+    theme?: FacetDropdownTheme;
+    /** Called when a value is selected */
+    onChange?: (value: string) => void;
+    /** Current selected value (controlled mode) */
+    value?: string;
+    /** Maximum number of options to show before scrolling */
+    maxOptions?: number;
+    /** Whether to show facet counts */
+    showCounts?: boolean;
+    /** Custom options (if you want to provide static options instead of fetching) */
+    options?: FacetDropdownOption[];
+    /** Standalone mode: provide your own search client */
+    client?: SeekoraClient;
+    /** Apply filter immediately on selection (default: true) */
+    applyFilter?: boolean;
+    /** Navigate to search page on selection (default: false) */
+    navigateOnSelect?: boolean;
+    /** Base URL for navigation (e.g., "/search") */
+    searchPageUrl?: string;
+    /** Use dedicated Filters API instead of search API for fetching facet values */
+    useFiltersApi?: boolean;
+}
+declare const FacetDropdown: React__default.FC<FacetDropdownProps>;
+
+/**
+ * CurrentRefinements Component
+ *
+ * Displays currently active filters/refinements with ability to clear them.
+ * Supports StateManager auto-sync, display variants, layout modes, and animations.
+ */
+
+interface Refinement {
+    field: string;
+    label?: string;
+    value: string;
+    displayValue?: string;
+}
+interface CurrentRefinementsTheme {
+    container?: string;
+    list?: string;
+    item?: string;
+    label?: string;
+    value?: string;
+    clearButton?: string;
+    clearAllButton?: string;
+    /** Variant-specific class slots */
+    chip?: string;
+    tag?: string;
+    pill?: string;
+    badge?: string;
+    group?: string;
+    groupLabel?: string;
+}
+/** Display variant for refinement items */
+type RefinementVariant = 'chips' | 'tags' | 'pills' | 'badges' | 'text-list';
+/** Layout variant for the container */
+type RefinementLayout = 'horizontal' | 'vertical' | 'grouped';
+interface CurrentRefinementsProps {
+    /** Current refinements (if not provided, auto-reads from StateManager) */
+    refinements?: Refinement[];
+    /** Callback when a refinement is cleared */
+    onRefinementClear?: (field: string, value: string) => void;
+    /** Callback when all refinements are cleared */
+    onClearAll?: () => void;
+    /** Custom render function for refinement */
+    renderRefinement?: (refinement: Refinement, index: number) => React__default.ReactNode;
+    /** Show "Clear all" button */
+    showClearAll?: boolean;
+    /** Display variant (default: 'chips') */
+    variant?: RefinementVariant;
+    /** Layout mode (default: 'horizontal') */
+    layout?: RefinementLayout;
+    /** Per-field color mapping */
+    fieldColors?: Record<string, string>;
+    /** Custom close icon renderer */
+    renderCloseIcon?: () => React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: CurrentRefinementsTheme;
+    /** Fields to exclude from display (e.g. ['category'] on collection pages) */
+    excludeFields?: string[];
+}
+declare const CurrentRefinements: React__default.FC<CurrentRefinementsProps>;
+
+/**
+ * ClearRefinements Component
+ *
+ * A standalone button to clear all active refinements/filters
+ * Integrates with SearchStateManager for automatic state sync
+ */
+
+interface ClearRefinementsTheme {
+    root?: string;
+    button?: string;
+    buttonDisabled?: string;
+}
+interface ClearRefinementsProps {
+    /** Button text when there are refinements to clear */
+    clearsQuery?: boolean;
+    /** Whether clicking should also clear the search query */
+    resetLabel?: string;
+    /** Button text shown when there are no refinements */
+    disabledLabel?: string;
+    /** Fields to include (if not specified, all fields are included) */
+    includedFields?: string[];
+    /** Fields to exclude from clearing */
+    excludedFields?: string[];
+    /** Callback when refinements are cleared */
+    onClear?: () => void;
+    /** Custom render function */
+    renderButton?: (props: {
+        canClear: boolean;
+        onClick: () => void;
+        disabled: boolean;
+    }) => React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: ClearRefinementsTheme;
+    /** Whether to hide when there are no refinements */
+    hideWhenEmpty?: boolean;
+}
+declare const ClearRefinements: React__default.FC<ClearRefinementsProps>;
+
+/**
+ * SearchLayout Component
+ *
+ * Provides a layout structure for search interfaces with sidebar and main content
+ */
+
+interface SearchLayoutTheme {
+    container?: string;
+    sidebar?: string;
+    main?: string;
+    header?: string;
+    footer?: string;
+}
+interface SearchLayoutProps {
+    /** Content to render in the sidebar (filters, facets, etc.) */
+    sidebar?: React__default.ReactNode;
+    /** Content to render in the main area (results, etc.) */
+    children: React__default.ReactNode;
+    /** Header content */
+    header?: React__default.ReactNode;
+    /** Footer content */
+    footer?: React__default.ReactNode;
+    /** Sidebar width */
+    sidebarWidth?: string;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: SearchLayoutTheme;
+    /** Show sidebar on mobile */
+    showSidebarOnMobile?: boolean;
+}
+declare const SearchLayout: React__default.FC<SearchLayoutProps>;
+
+/**
+ * RangeInput Component
+ *
+ * Displays a range input for filtering numeric values (e.g., price range)
+ * Integrates with SearchStateManager for automatic state sync
+ */
+
+interface RangeInputTheme {
+    container?: string;
+    label?: string;
+    inputGroup?: string;
+    input?: string;
+    separator?: string;
+    button?: string;
+}
+interface RangeInputProps {
+    /** Field name for the range filter */
+    field: string;
+    /** Label for the range input */
+    label?: string;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Current minimum value (controlled mode) */
+    currentMin?: number;
+    /** Current maximum value (controlled mode) */
+    currentMax?: number;
+    /** Step value for inputs */
+    step?: number;
+    /** Callback when range changes */
+    onRangeChange?: (min: number | undefined, max: number | undefined) => void;
+    /** Custom render function */
+    renderRangeInput?: (props: {
+        min: number | undefined;
+        max: number | undefined;
+        onMinChange: (value: number | undefined) => void;
+        onMaxChange: (value: number | undefined) => void;
+        onApply: () => void;
+    }) => React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: RangeInputTheme;
+    /** Show apply button */
+    showApplyButton?: boolean;
+    /** Placeholder text for inputs */
+    placeholder?: {
+        min?: string;
+        max?: string;
+    };
+    /** Whether to sync with SearchStateManager (default: true) */
+    syncWithState?: boolean;
+}
+declare const RangeInput: React__default.FC<RangeInputProps>;
+
+/**
+ * HitsPerPage Component
+ *
+ * A dropdown to let users change the number of displayed hits per page
+ * Integrates with SearchStateManager for automatic state sync
+ */
+
+interface HitsPerPageItem {
+    value: number;
+    label: string;
+    default?: boolean;
+}
+interface HitsPerPageTheme {
+    root?: string;
+    select?: string;
+    option?: string;
+}
+interface HitsPerPageProps {
+    /** Available items per page options */
+    items: HitsPerPageItem[];
+    /** Callback when hits per page changes */
+    onHitsPerPageChange?: (value: number) => void;
+    /** Custom render function for select */
+    renderSelect?: (props: {
+        value: number;
+        onChange: (e: React__default.ChangeEvent<HTMLSelectElement>) => void;
+        items: HitsPerPageItem[];
+    }) => React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: HitsPerPageTheme;
+    /** Label text before the select */
+    label?: string;
+    /** Whether to sync with SearchStateManager (default: true) */
+    syncWithState?: boolean;
+}
+declare const HitsPerPage: React__default.FC<HitsPerPageProps>;
+
+/**
+ * InfiniteHits Component
+ *
+ * Displays search results with infinite scroll or "Show More" button
+ * Accumulates results as user loads more pages
+ */
+
+interface InfiniteHitsTheme {
+    root?: string;
+    list?: string;
+    item?: string;
+    loadMore?: string;
+    loadMoreDisabled?: string;
+    empty?: string;
+    sentinel?: string;
+}
+interface InfiniteHitsProps {
+    /** Custom render function for each hit */
+    renderHit?: (hit: ResultItem, index: number) => React__default.ReactNode;
+    /** Custom render for empty state */
+    renderEmpty?: () => React__default.ReactNode;
+    /** Custom render for "Show More" button */
+    renderShowMore?: (props: {
+        isLoading: boolean;
+        isLastPage: boolean;
+        onClick: () => void;
+    }) => React__default.ReactNode;
+    /** Whether to show the "Show More" button (default: true) */
+    showMoreButton?: boolean;
+    /** Whether to use infinite scroll with IntersectionObserver (default: false) */
+    useInfiniteScroll?: boolean;
+    /** Threshold for IntersectionObserver (default: 0.1) */
+    scrollThreshold?: number;
+    /** Field mapping for extracting data from hits */
+    fieldMapping?: FieldMapping;
+    /** Text for "Show More" button */
+    showMoreLabel?: string;
+    /** Callback when a hit is clicked */
+    onHitClick?: (hit: ResultItem, index: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: InfiniteHitsTheme;
+    /** Whether to sync with SearchStateManager (default: true) */
+    syncWithState?: boolean;
+}
+declare const InfiniteHits: React__default.FC<InfiniteHitsProps>;
+
+/**
+ * Highlight Component
+ *
+ * Renders highlighted search result text with matching terms emphasized
+ */
+
+interface HighlightTheme {
+    root?: string;
+    highlighted?: string;
+    nonHighlighted?: string;
+}
+interface HighlightProps {
+    /** The search hit containing highlight data */
+    hit: Record<string, any>;
+    /** The attribute to highlight */
+    attribute: string;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: HighlightTheme;
+    /** Tag name for root element (default: 'span') */
+    tagName?: keyof JSX.IntrinsicElements;
+    /** Custom render for highlighted parts */
+    renderHighlighted?: (part: HighlightPart, index: number) => React__default.ReactNode;
+    /** Custom render for non-highlighted parts */
+    renderNonHighlighted?: (part: HighlightPart, index: number) => React__default.ReactNode;
+    /** Fallback query for client-side highlighting (when server highlight not available) */
+    query?: string;
+}
+declare const Highlight: React__default.FC<HighlightProps>;
+/**
+ * Snippet Component
+ *
+ * Renders a truncated, highlighted excerpt from search results
+ */
+interface SnippetTheme extends HighlightTheme {
+    ellipsis?: string;
+}
+interface SnippetProps extends Omit<HighlightProps, 'theme'> {
+    /** Maximum length of snippet (default: 100) */
+    maxLength?: number;
+    /** Ellipsis to use when truncating (default: '...') */
+    ellipsis?: string;
+    /** Custom theme */
+    theme?: SnippetTheme;
+}
+declare const Snippet: React__default.FC<SnippetProps>;
+
+/**
+ * HierarchicalMenu Component
+ *
+ * Displays a hierarchical menu for nested category navigation
+ * Example: Electronics > Phones > iPhone
+ */
+
+interface HierarchicalMenuItem {
+    label: string;
+    value: string;
+    count?: number;
+    isRefined?: boolean;
+    data?: HierarchicalMenuItem[];
+}
+interface HierarchicalMenuTheme {
+    root?: string;
+    list?: string;
+    item?: string;
+    itemSelected?: string;
+    itemParent?: string;
+    link?: string;
+    label?: string;
+    count?: string;
+    showMore?: string;
+}
+interface HierarchicalMenuProps {
+    /** Attributes for each level of hierarchy (e.g., ['category.lvl0', 'category.lvl1', 'category.lvl2']) */
+    attributes: string[];
+    /** Separator used in the hierarchical values (default: ' > ') */
+    separator?: string;
+    /** Maximum number of items to show per level (default: 10) */
+    limit?: number;
+    /** Show "Show more" button (default: true) */
+    showMore?: boolean;
+    /** Maximum items when "Show more" is clicked (default: 20) */
+    showMoreLimit?: number;
+    /** Custom render function for items */
+    renderItem?: (item: HierarchicalMenuItem, level: number) => React__default.ReactNode;
+    /** Callback when an item is selected */
+    onSelect?: (value: string, level: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: HierarchicalMenuTheme;
+    /** Root path (for pre-selecting a category) */
+    rootPath?: string | null;
+    /** Sort by (default: 'name') */
+    sortBy?: 'name' | 'count' | 'isRefined';
+    /** Custom facet data (if not using StateManager) */
+    items?: HierarchicalMenuItem[];
+}
+declare const HierarchicalMenu: React__default.FC<HierarchicalMenuProps>;
+
+/**
+ * RangeSlider Component
+ *
+ * Visual slider for numeric range filtering
+ * Alternative to RangeInput for a more interactive UX
+ */
+
+interface RangeSliderTheme {
+    root?: string;
+    label?: string;
+    slider?: string;
+    track?: string;
+    trackFilled?: string;
+    thumb?: string;
+    values?: string;
+    value?: string;
+}
+interface RangeSliderProps {
+    /** Field name for the range filter */
+    field: string;
+    /** Label for the slider */
+    label?: string;
+    /** Minimum value */
+    min: number;
+    /** Maximum value */
+    max: number;
+    /** Step value (default: 1) */
+    step?: number;
+    /** Current minimum value */
+    currentMin?: number;
+    /** Current maximum value */
+    currentMax?: number;
+    /** Callback when range changes */
+    onRangeChange?: (min: number, max: number) => void;
+    /** Format value for display (default: (v) => v.toString()) */
+    formatValue?: (value: number) => string;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: RangeSliderTheme;
+    /** Show current values (default: true) */
+    showValues?: boolean;
+    /** Whether to sync with SearchStateManager (default: true) */
+    syncWithState?: boolean;
+    /** Debounce delay for updates (default: 300ms) */
+    debounceMs?: number;
+}
+declare const RangeSlider: React__default.FC<RangeSliderProps>;
+
+/**
+ * Breadcrumb Component
+ *
+ * Displays the current hierarchical navigation path
+ * Allows users to navigate back to parent categories
+ */
+
+interface BreadcrumbItem {
+    label: string;
+    value: string;
+}
+interface BreadcrumbTheme {
+    root?: string;
+    list?: string;
+    item?: string;
+    link?: string;
+    separator?: string;
+    current?: string;
+}
+interface BreadcrumbProps {
+    /** Attributes for each level of hierarchy */
+    attributes: string[];
+    /** Separator between items (default: ' > ') */
+    separator?: string;
+    /** Root label (default: 'Home') */
+    rootLabel?: string;
+    /** Custom render function for items */
+    renderItem?: (item: BreadcrumbItem, index: number, isLast: boolean) => React__default.ReactNode;
+    /** Custom render for separator */
+    renderSeparator?: () => React__default.ReactNode;
+    /** Callback when an item is clicked */
+    onNavigate?: (item: BreadcrumbItem | null, index: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: BreadcrumbTheme;
+    /** Custom breadcrumb items (overrides automatic detection) */
+    items?: BreadcrumbItem[];
+}
+declare const Breadcrumb: React__default.FC<BreadcrumbProps>;
+
+/**
+ * MobileFilters Component
+ *
+ * A full-screen filter drawer optimized for mobile devices
+ * Slides in from the side or bottom to display facets and filters
+ */
+
+interface MobileFiltersTheme {
+    overlay?: string;
+    drawer?: string;
+    header?: string;
+    title?: string;
+    closeButton?: string;
+    content?: string;
+    footer?: string;
+    applyButton?: string;
+    clearButton?: string;
+    filterCount?: string;
+}
+interface MobileFiltersProps {
+    /** Whether the drawer is open */
+    isOpen: boolean;
+    /** Callback when drawer should close */
+    onClose: () => void;
+    /** Callback when filters are applied */
+    onApply?: () => void;
+    /** Title text */
+    title?: string;
+    /** Apply button text */
+    applyButtonText?: string;
+    /** Clear button text */
+    clearButtonText?: string;
+    /** Position of the drawer */
+    position?: 'left' | 'right' | 'bottom';
+    /** Children (filter components) */
+    children: React__default.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom theme */
+    theme?: MobileFiltersTheme;
+    /** Show header */
+    showHeader?: boolean;
+    /** Show footer with apply/clear buttons */
+    showFooter?: boolean;
+    /** Show filter count badge */
+    showFilterCount?: boolean;
+    /** Close on backdrop click */
+    closeOnBackdropClick?: boolean;
+    /** Close on escape key */
+    closeOnEscape?: boolean;
+}
+declare const MobileFilters: React__default.FC<MobileFiltersProps>;
+/**
+ * MobileFiltersButton Component
+ *
+ * A button to toggle the MobileFilters drawer
+ */
+interface MobileFiltersButtonProps {
+    /** Callback when clicked */
+    onClick: () => void;
+    /** Button text */
+    text?: string;
+    /** Show filter count */
+    showCount?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+}
+declare const MobileFiltersButton: React__default.FC<MobileFiltersButtonProps>;
+
+/**
+ * Recommendation Components
+ *
+ * Components for displaying product recommendations:
+ * - RelatedProducts: Show related items based on a product
+ * - TrendingItems: Display trending/popular products
+ * - FrequentlyBoughtTogether: Bundle recommendations
+ * - RecentlyViewed: User's recently viewed items
+ */
+
+interface RecommendationItem extends ResultItem {
+    [key: string]: any;
+}
+interface RecommendationTheme {
+    root?: string;
+    title?: string;
+    list?: string;
+    item?: string;
+    image?: string;
+    content?: string;
+    name?: string;
+    price?: string;
+    empty?: string;
+}
+interface BaseRecommendationProps {
+    /** Title for the section */
+    title?: string;
+    /** Maximum items to show */
+    maxItems?: number;
+    /** Custom render function for items */
+    renderItem?: (item: RecommendationItem, index: number) => React__default.ReactNode;
+    /** Callback when item is clicked */
+    onItemClick?: (item: RecommendationItem, index: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom theme */
+    theme?: RecommendationTheme;
+    /** Layout mode */
+    layout?: 'horizontal' | 'grid' | 'list';
+    /** Currency symbol for prices */
+    currencySymbol?: string;
+}
+interface RelatedProductsProps extends BaseRecommendationProps {
+    /** Product ID to get related products for */
+    productId: string;
+    /** Custom items (if not using API) */
+    items?: RecommendationItem[];
+    /** Loading state */
+    loading?: boolean;
+}
+declare const RelatedProducts: React__default.FC<RelatedProductsProps>;
+interface TrendingItemsProps extends BaseRecommendationProps {
+    /** Custom items (if not using API) */
+    items?: RecommendationItem[];
+    /** Loading state */
+    loading?: boolean;
+    /** Facet name for trending (if using facet data) */
+    facetName?: string;
+}
+declare const TrendingItems: React__default.FC<TrendingItemsProps>;
+interface FrequentlyBoughtTogetherProps extends BaseRecommendationProps {
+    /** Product ID to get frequently bought together items for */
+    productId: string;
+    /** Custom items (if not using API) */
+    items?: RecommendationItem[];
+    /** Loading state */
+    loading?: boolean;
+    /** Show "Add all to cart" button */
+    showAddAllButton?: boolean;
+    /** Callback when "Add all" is clicked */
+    onAddAll?: (items: RecommendationItem[]) => void;
+}
+declare const FrequentlyBoughtTogether: React__default.FC<FrequentlyBoughtTogetherProps>;
+interface RecentlyViewedProps extends BaseRecommendationProps {
+    /** Storage key for localStorage */
+    storageKey?: string;
+    /** Custom items (overrides localStorage) */
+    items?: RecommendationItem[];
+}
+declare const RecentlyViewed: React__default.FC<RecentlyViewedProps>;
+/**
+ * Add item to recently viewed (utility function)
+ */
+declare function addToRecentlyViewed(item: RecommendationItem, storageKey?: string, maxItems?: number): void;
+
+/**
+ * QuerySuggestions Component
+ *
+ * Standalone component for displaying query suggestions
+ */
+
+interface SuggestionItem$2 {
+    query: string;
+    count?: number;
+    metadata?: Record<string, any>;
+}
+interface QuerySuggestionsTheme {
+    container?: string;
+    title?: string;
+    suggestionsList?: string;
+    suggestionItem?: string;
+    suggestionItemHover?: string;
+    suggestionItemActive?: string;
+    emptyState?: string;
+}
+interface QuerySuggestionsProps {
+    query?: string;
+    maxSuggestions?: number;
+    debounceMs?: number;
+    minQueryLength?: number;
+    onSuggestionClick?: (suggestion: string) => void;
+    renderSuggestion?: (suggestion: SuggestionItem$2, index: number) => React__default.ReactNode;
+    renderEmpty?: () => React__default.ReactNode;
+    showTitle?: boolean;
+    title?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    theme?: QuerySuggestionsTheme;
+}
+declare const QuerySuggestions: React__default.FC<QuerySuggestionsProps>;
+
+/**
+ * QuerySuggestionsDropdown Component
+ *
+ * Classic dropdown variant with:
+ * - Highlighted matches
+ * - Keyboard navigation
+ * - Recent searches
+ * - Customizable styling
+ * - Analytics tracking
+ * - Accessibility support
+ */
+
+interface QuerySuggestionsDropdownProps extends QuerySuggestionsEventHandlers {
+    /** Current query string */
+    query: string;
+    /** Whether the dropdown is visible */
+    isOpen?: boolean;
+    /** Maximum suggestions to display */
+    maxSuggestions?: number;
+    /** Minimum query length to trigger suggestions */
+    minQueryLength?: number;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Show recent searches section */
+    showRecentSearches?: boolean;
+    /** Maximum recent searches to display */
+    maxRecentSearches?: number;
+    /** Show suggestion counts */
+    showCounts?: boolean;
+    /** Show empty state when no results */
+    showEmptyState?: boolean;
+    /** Highlight configuration */
+    highlight?: HighlightConfig;
+    /** Keyboard navigation configuration */
+    keyboardNav?: KeyboardNavConfig;
+    /** Animation configuration */
+    animation?: AnimationConfig;
+    /** Custom class names */
+    classNames?: QuerySuggestionsClassNames;
+    /** Custom CSS styles */
+    style?: React__default.CSSProperties;
+    /** Custom render for suggestion item */
+    renderSuggestion?: (suggestion: SuggestionItem$3, index: number, isActive: boolean, highlight: (text: string) => React__default.ReactNode) => React__default.ReactNode;
+    /** Custom render for recent search item */
+    renderRecentSearch?: (search: RecentSearch, index: number, isActive: boolean) => React__default.ReactNode;
+    /** Custom render for empty state */
+    renderEmpty?: () => React__default.ReactNode;
+    /** Custom footer content */
+    footer?: React__default.ReactNode;
+    /** Position of dropdown */
+    position?: 'absolute' | 'fixed';
+    /** Dropdown width */
+    width?: string | number;
+    /** Z-index for dropdown */
+    zIndex?: number;
+    /** Input element ref for positioning */
+    inputRef?: React__default.RefObject<HTMLInputElement>;
+    /** Close on click outside */
+    closeOnClickOutside?: boolean;
+    /** Close on escape key */
+    closeOnEscape?: boolean;
+    /** ARIA label */
+    ariaLabel?: string;
+}
+interface QuerySuggestionsDropdownRef {
+    /** Select the currently active item */
+    selectActive: () => void;
+    /** Navigate to next item */
+    navigateNext: () => void;
+    /** Navigate to previous item */
+    navigatePrevious: () => void;
+    /** Reset selection */
+    resetSelection: () => void;
+    /** Get active index */
+    getActiveIndex: () => number;
+    /** Get total items count */
+    getTotalItems: () => number;
+}
+declare const QuerySuggestionsDropdown: React__default.ForwardRefExoticComponent<QuerySuggestionsDropdownProps & React__default.RefAttributes<QuerySuggestionsDropdownRef>>;
+
+/**
+ * RichQuerySuggestions Component
+ *
+ * Advanced multi-section dropdown with:
+ * - Suggestions with categories
+ * - Trending searches
+ * - Recent searches
+ * - Top searches (popular)
+ * - Related searches
+ * - Configurable sections
+ * - Rich styling options
+ */
+
+interface RichQuerySuggestionsProps extends QuerySuggestionsEventHandlers {
+    /** Current query string */
+    query: string;
+    /** Whether the dropdown is visible */
+    isOpen?: boolean;
+    /** Section configuration */
+    sections?: DropdownSectionConfig[];
+    /** Maximum suggestions per section */
+    maxSuggestionsPerSection?: number;
+    /** Minimum query length */
+    minQueryLength?: number;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Include dropdown recommendations from API */
+    includeDropdownRecommendations?: boolean;
+    /** When false, omit product hits list from dropdown (default true) */
+    includeDropdownProductList?: boolean;
+    /** When false, omit filtered_tabs from dropdown (default true) */
+    includeFilteredTabs?: boolean;
+    /** Include categories in suggestions */
+    includeCategories?: boolean;
+    /** Max categories per suggestion */
+    maxCategories?: number;
+    /** Show suggestion counts */
+    showCounts?: boolean;
+    /** Show category counts */
+    showCategoryCounts?: boolean;
+    /** Show section headers */
+    showSectionHeaders?: boolean;
+    /** Custom class names */
+    classNames?: QuerySuggestionsClassNames;
+    /** Custom CSS styles */
+    style?: React__default.CSSProperties;
+    /** Custom render for suggestion */
+    renderSuggestion?: (suggestion: SuggestionItem$3, isActive: boolean) => React__default.ReactNode;
+    /** Custom render for category pill */
+    renderCategory?: (category: SuggestionCategory) => React__default.ReactNode;
+    /** Custom render for trending item */
+    renderTrendingItem?: (item: TrendingSearch, index: number) => React__default.ReactNode;
+    /** Custom render for recent item */
+    renderRecentItem?: (item: RecentSearch) => React__default.ReactNode;
+    /** Custom header content */
+    header?: React__default.ReactNode;
+    /** Custom footer content */
+    footer?: React__default.ReactNode;
+    /** Dropdown width */
+    width?: string | number;
+    /** Dropdown max height */
+    maxHeight?: string | number;
+    /** Z-index */
+    zIndex?: number;
+    /** ARIA label */
+    ariaLabel?: string;
+    /** Analytics tags */
+    analyticsTags?: string[];
+    /** Highlight options for query suggestions (passed to highlight rendering) */
+    highlightOptions?: {
+        highlightColor?: string;
+        highlightTextColor?: string;
+        highlightFontWeight?: string | number;
+        highlightStyle?: 'background' | 'underline' | 'bold' | 'color-only';
+    };
+}
+interface RichQuerySuggestionsRef {
+    getActiveIndex: () => number;
+    setActiveIndex: (index: number) => void;
+    selectActive: () => void;
+    navigateNext: () => void;
+    navigatePrevious: () => void;
+    getTotalItems: () => number;
+}
+declare const RichQuerySuggestions: React__default.ForwardRefExoticComponent<RichQuerySuggestionsProps & React__default.RefAttributes<RichQuerySuggestionsRef>>;
+
+/**
+ * FederatedDropdown Component
+ *
+ * Full-featured federated search dropdown with:
+ * - Multi-column layout (suggestions + products)
+ * - Filtered tabs with product results
+ * - Popular brands
+ * - Trending products
+ * - Category navigation
+ * - Responsive design
+ * - Rich product cards
+ */
+
+interface FederatedDropdownProps extends QuerySuggestionsEventHandlers {
+    /** Current query string */
+    query: string;
+    /** Whether the dropdown is visible */
+    isOpen?: boolean;
+    /** Maximum suggestions to show */
+    maxSuggestions?: number;
+    /** Maximum products to show per section */
+    maxProducts?: number;
+    /** Maximum brands to show */
+    maxBrands?: number;
+    /** Minimum query length */
+    minQueryLength?: number;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Filtered tabs configuration */
+    filteredTabs?: Array<{
+        id?: string;
+        label: string;
+        filter: string;
+    }>;
+    /** Show products section */
+    showProducts?: boolean;
+    /** Show brands section */
+    showBrands?: boolean;
+    /** Show filtered tabs */
+    showFilteredTabs?: boolean;
+    /** Show recent searches */
+    showRecentSearches?: boolean;
+    /** Layout mode */
+    layout?: 'side-by-side' | 'stacked' | 'full-width';
+    /** Products column width (for side-by-side) */
+    productsColumnWidth?: string;
+    /** Suggestions column width (for side-by-side) */
+    suggestionsColumnWidth?: string;
+    /** Show product prices */
+    showPrices?: boolean;
+    /** Currency symbol */
+    currencySymbol?: string;
+    /** Custom class names */
+    classNames?: QuerySuggestionsClassNames;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Custom product card renderer */
+    renderProduct?: (product: ProductItem, index: number) => React__default.ReactNode;
+    /** Custom suggestion renderer */
+    renderSuggestion?: (suggestion: SuggestionItem$3, index: number, isActive: boolean) => React__default.ReactNode;
+    /** Custom brand renderer */
+    renderBrand?: (brand: PopularBrand, index: number) => React__default.ReactNode;
+    /** Custom tab renderer */
+    renderTab?: (tab: FilteredTab, isActive: boolean) => React__default.ReactNode;
+    /** Header content */
+    header?: React__default.ReactNode;
+    /** Footer content */
+    footer?: React__default.ReactNode;
+    /** View all products link */
+    viewAllProductsLink?: string;
+    /** Width */
+    width?: string | number;
+    /** Max height */
+    maxHeight?: string | number;
+    /** Z-index */
+    zIndex?: number;
+    /** Analytics tags */
+    analyticsTags?: string[];
+    /** Include facets in suggestions API response */
+    includeFacets?: boolean;
+    /** Include categories in suggestions API response */
+    includeCategories?: boolean;
+    /** Include dropdown recommendations (trending products, top searches, etc.) */
+    includeDropdownRecommendations?: boolean;
+}
+interface FederatedDropdownRef {
+    getActiveIndex: () => number;
+    setActiveIndex: (index: number) => void;
+    selectActive: () => void;
+    navigateNext: () => void;
+    navigatePrevious: () => void;
+    getActiveTab: () => string | null;
+    setActiveTab: (tabId: string) => void;
+}
+declare const FederatedDropdown: React__default.ForwardRefExoticComponent<FederatedDropdownProps & React__default.RefAttributes<FederatedDropdownRef>>;
+
+/**
+ * SearchBarWithSuggestions Component
+ *
+ * Integrated search bar with query suggestions dropdown.
+ * Combines SearchBar with any of the suggestion dropdown variants.
+ */
+
+interface SearchBarWithSuggestionsProps {
+    /** Dropdown variant to use */
+    variant?: QuerySuggestionsVariant;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Initial query value */
+    initialQuery?: string;
+    /** Controlled query value */
+    value?: string;
+    /** Callback when query changes */
+    onQueryChange?: (query: string) => void;
+    /** Callback when search is submitted */
+    onSearch?: (query: string) => void;
+    /** Callback when suggestion is selected */
+    onSuggestionSelect?: (suggestion: SuggestionItem$3) => void;
+    /** Callback when product is clicked */
+    onProductClick?: (product: ProductItem) => void;
+    /** Show search button */
+    showSearchButton?: boolean;
+    /** Search button text */
+    searchButtonText?: string;
+    /** Show clear button */
+    showClearButton?: boolean;
+    /** Auto focus on mount */
+    autoFocus?: boolean;
+    /** Min query length for suggestions */
+    minQueryLength?: number;
+    /** Max suggestions to show */
+    maxSuggestions?: number;
+    /** Max products to show in dropdown (federated/rich) */
+    maxProducts?: number;
+    /** Debounce delay (ms) */
+    debounceMs?: number;
+    /** Show recent searches */
+    showRecentSearches?: boolean;
+    /** Show trending when empty */
+    showTrendingOnEmpty?: boolean;
+    /** Include dropdown recommendations */
+    includeDropdownRecommendations?: boolean;
+    /** Filtered tabs config */
+    filteredTabs?: Array<{
+        id?: string;
+        label: string;
+        filter: string;
+    }>;
+    /** Enable analytics tracking */
+    enableAnalytics?: boolean;
+    /** Analytics tags */
+    analyticsTags?: string[];
+    /** Include facets in suggestions API response (federated/rich) */
+    includeFacets?: boolean;
+    /** Include categories in suggestions API response (federated/rich) */
+    includeCategories?: boolean;
+    /** Dropdown width */
+    dropdownWidth?: string | number;
+    /** Dropdown max height */
+    dropdownMaxHeight?: string | number;
+    /** Custom class names */
+    classNames?: {
+        wrapper?: string;
+        input?: string;
+        button?: string;
+        clearButton?: string;
+        dropdown?: string;
+    } & QuerySuggestionsClassNames;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Input style */
+    inputStyle?: React__default.CSSProperties;
+    /** ARIA label */
+    ariaLabel?: string;
+}
+interface SearchBarWithSuggestionsRef {
+    /** Focus the input */
+    focus: () => void;
+    /** Blur the input */
+    blur: () => void;
+    /** Clear the input */
+    clear: () => void;
+    /** Get current query */
+    getQuery: () => string;
+    /** Set query value */
+    setQuery: (query: string) => void;
+    /** Open dropdown */
+    openDropdown: () => void;
+    /** Close dropdown */
+    closeDropdown: () => void;
+    /** Navigate to next suggestion */
+    navigateNext: () => void;
+    /** Navigate to previous suggestion */
+    navigatePrevious: () => void;
+    /** Select current suggestion */
+    selectCurrent: () => void;
+}
+declare const SearchBarWithSuggestions: React__default.ForwardRefExoticComponent<SearchBarWithSuggestionsProps & React__default.RefAttributes<SearchBarWithSuggestionsRef>>;
+
+/**
+ * Enhanced Query Suggestions Hook
+ *
+ * Provides full support for query suggestions API including:
+ * - Basic suggestions
+ * - Dropdown recommendations (trending, top searches, related)
+ * - Filtered tabs with products
+ * - Recent searches (local storage)
+ * - Analytics tracking
+ */
+
+interface UseQuerySuggestionsEnhancedOptions {
+    /** Seekora client instance */
+    client: SeekoraClient;
+    /** Current search query */
+    query: string;
+    /** Enable/disable the hook */
+    enabled?: boolean;
+    /** Prefetch initial (empty-query) data on mount even if not enabled yet */
+    prefetch?: boolean;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Max suggestions to fetch */
+    maxSuggestions?: number;
+    /** Minimum query length to trigger search */
+    minQueryLength?: number;
+    /** Include dropdown recommendations (trending, products, etc.) */
+    includeDropdownRecommendations?: boolean;
+    /** When false, omit product hits list from dropdown (default true) */
+    includeDropdownProductList?: boolean;
+    /** When false, omit filtered_tabs from dropdown extensions (default true) */
+    includeFilteredTabs?: boolean;
+    /** Include categories in suggestions */
+    includeCategories?: boolean;
+    /** Include facets in suggestions */
+    includeFacets?: boolean;
+    /** Max categories per suggestion */
+    maxCategories?: number;
+    /** Max facets per suggestion */
+    maxFacets?: number;
+    /** Filtered tabs configuration */
+    filteredTabs?: Array<{
+        id?: string;
+        label: string;
+        filter: string;
+    }>;
+    /** Minimum popularity threshold */
+    minPopularity?: number;
+    /** Time range for analytics data */
+    timeRange?: '7d' | '30d' | '90d';
+    /** Disable typo tolerance */
+    disableTypoTolerance?: boolean;
+    /** Analytics tags */
+    analyticsTags?: string[];
+    /** Enable recent searches from localStorage */
+    enableRecentSearches?: boolean;
+    /** Max recent searches to store */
+    maxRecentSearches?: number;
+    /** Local storage key for recent searches */
+    recentSearchesKey?: string;
+    /** Callback when suggestions are loaded */
+    onSuggestionsLoaded?: (response: QuerySuggestionsResponse) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+interface UseQuerySuggestionsEnhancedReturn {
+    /** Basic suggestion items */
+    suggestions: SuggestionItem$3[];
+    /** Loading state */
+    loading: boolean;
+    /** Error state */
+    error: Error | null;
+    /** Dropdown recommendations */
+    dropdownRecommendations: DropdownRecommendations | null;
+    /** Trending searches */
+    trendingSearches: TrendingSearch[];
+    /** Top searches */
+    topSearches: TopSearch[];
+    /** Related searches */
+    relatedSearches: RelatedSearch[];
+    /** Popular brands */
+    popularBrands: PopularBrand[];
+    /** Filtered tabs with products */
+    filteredTabs: FilteredTab[];
+    /** Trending products */
+    trendingProducts: ProductItem[];
+    /** Recent searches (from localStorage) */
+    recentSearches: RecentSearch[];
+    /** Processing time in ms */
+    processingTimeMs: number | null;
+    /** Total hits count */
+    totalHits: number;
+    /** Current page */
+    currentPage: number;
+    /** Total pages */
+    totalPages: number;
+    /** Original query */
+    originalQuery: string;
+    /** Add a search to recent searches */
+    addRecentSearch: (query: string, resultsCount?: number) => void;
+    /** Remove a search from recent searches */
+    removeRecentSearch: (query: string) => void;
+    /** Clear all recent searches */
+    clearRecentSearches: () => void;
+    /** Manually refetch suggestions */
+    refetch: () => Promise<void>;
+    /** Check if dropdown has any content to show */
+    hasContent: boolean;
+    /** Get all items for keyboard navigation (flattened) */
+    getAllNavigableItems: () => NavigableItem[];
+}
+interface NavigableItem {
+    type: 'suggestion' | 'recent' | 'trending' | 'product' | 'category' | 'brand' | 'tab';
+    index: number;
+    data: SuggestionItem$3 | RecentSearch | TrendingSearch | ProductItem | SuggestionCategory | PopularBrand | FilteredTab;
+}
+declare function useQuerySuggestionsEnhanced(options: UseQuerySuggestionsEnhancedOptions): UseQuerySuggestionsEnhancedReturn;
+
+/**
+ * Suggestions Context
+ *
+ * Type definitions and React context for composable suggestions primitives.
+ * Consuming components use useSuggestionsContext() for state and actions.
+ */
+
+interface SuggestionsContextValue {
+    query: string;
+    setQuery: (query: string) => void;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    activeIndex: number;
+    setActiveIndex: (index: number) => void;
+    suggestions: SuggestionItem$3[];
+    recentSearches: RecentSearch[];
+    trendingSearches: TrendingSearch[];
+    trendingProducts: ProductItem[];
+    /** Products prefetched on mount via client.search("*") — available before dropdown opens */
+    prefetchedProducts: unknown[];
+    filteredTabs: FilteredTab[];
+    activeTabId: string;
+    setActiveTabId: (id: string) => void;
+    loading: boolean;
+    error: Error | null;
+    hasContent: boolean;
+    getAllNavigableItems: () => NavigableItem[];
+    selectSuggestion: (suggestion: SuggestionItem$3, position: number) => void;
+    selectProduct: (product: ProductItem, position: number, section?: string, tabId?: string) => void;
+    selectRecentSearch: (search: RecentSearch) => void;
+    selectTrendingSearch: (trending: TrendingSearch, position: number) => void;
+    setActiveTab: (tab: FilteredTab) => void;
+    submitSearch: (query: string, fromSuggestion?: boolean, suggestion?: SuggestionItem$3) => void;
+    clearRecentSearches: () => void;
+    close: () => void;
+    navigateNext: () => void;
+    navigatePrev: () => void;
+    selectActive: () => void;
+}
+declare function useSuggestionsContext(): SuggestionsContextValue;
+
+/**
+ * SuggestionsProvider
+ *
+ * Provides suggestions state (query, suggestions, products, recent, trending, tabs),
+ * actions (selectSuggestion, selectProduct, submitSearch, etc.), and keyboard navigation.
+ * Uses useQuerySuggestionsEnhanced and useSuggestionsAnalytics; must be inside SearchProvider.
+ */
+
+interface SuggestionsProviderProps {
+    children: React__default.ReactNode;
+    /** Min query length to fetch suggestions */
+    minQueryLength?: number;
+    /** Debounce ms for suggestion fetch */
+    debounceMs?: number;
+    /** Max suggestions */
+    maxSuggestions?: number;
+    /** Include dropdown recommendations (trending, products, etc.) */
+    includeDropdownRecommendations?: boolean;
+    /** Filtered tabs config */
+    filteredTabs?: Array<{
+        id?: string;
+        label: string;
+        filter: string;
+    }>;
+    /** Enable analytics (V3) */
+    enableAnalytics?: boolean;
+    /** Analytics tags */
+    analyticsTags?: string[];
+    /** Callback when user submits search (e.g. navigate to results page) */
+    onSearch?: (query: string) => void;
+    /** Callback when user selects a suggestion */
+    onSuggestionSelect?: (suggestion: SuggestionItem$3) => void;
+    /** Callback when user clicks a product */
+    onProductClick?: (product: ProductItem) => void;
+}
+declare function SuggestionsProvider({ children, minQueryLength, debounceMs, maxSuggestions, includeDropdownRecommendations, filteredTabs, enableAnalytics, analyticsTags, onSearch, onSuggestionSelect, onProductClick, }: SuggestionsProviderProps): React__default.JSX.Element;
+
+/**
+ * SearchInput – suggestion-scoped search input (primitive)
+ *
+ * Single input bound to suggestions context: query, setQuery, focus opens dropdown,
+ * keydown ArrowUp/Down/Enter/Escape delegates to context. Overridable via className/style.
+ */
+
+interface SearchInputProps {
+    placeholder?: string;
+    autoFocus?: boolean;
+    showClearButton?: boolean;
+    /** When false, blur does not close the dropdown (e.g. for overlay mode). Default true. */
+    closeOnBlur?: boolean;
+    /** Optional icon (e.g. magnifying glass) rendered to the left of the input */
+    leftIcon?: React__default.ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+    inputClassName?: string;
+    inputStyle?: React__default.CSSProperties;
+    ariaLabel?: string;
+}
+declare function SearchInput({ placeholder, autoFocus, showClearButton, closeOnBlur, leftIcon, className, style, inputClassName, inputStyle, ariaLabel, }: SearchInputProps): React__default.JSX.Element;
+
+/**
+ * DropdownPanel – floating panel for suggestions (primitive)
+ *
+ * Shows when isOpen; handles click-outside and Escape to close. Children = any composition
+ * of SuggestionList, ProductGrid, etc. Position and z-index configurable.
+ */
+
+interface DropdownPanelProps {
+    children: React__default.ReactNode;
+    position?: 'absolute' | 'fixed';
+    /** CSS top offset (e.g. '100%', '4px') */
+    top?: string | number;
+    left?: string | number;
+    right?: string | number;
+    width?: string | number;
+    maxHeight?: string | number;
+    zIndex?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    closeOnClickOutside?: boolean;
+    closeOnEscape?: boolean;
+}
+declare function DropdownPanel({ children, position, top, left, right, width, maxHeight, zIndex, className, style, closeOnClickOutside, closeOnEscape, }: DropdownPanelProps): React__default.JSX.Element | null;
+
+/**
+ * Parses suggestion text containing <mark>...</mark> and returns React nodes
+ * with the marked segments rendered as styled elements. Safe: inner content
+ * is rendered as text, not HTML.
+ */
+
+/** Visual highlight styles */
+type HighlightStyle = 'background' | 'underline' | 'bold' | 'color-only';
+interface HighlightMarkupOptions {
+    /** Class name for the highlight element. */
+    markClassName?: string;
+    /** Inline style for the highlight element (merged with computed styles). */
+    markStyle?: React__default.CSSProperties;
+    /** Override background color for highlighted segments */
+    highlightColor?: string;
+    /** Text color for highlighted segments */
+    highlightTextColor?: string;
+    /** Font weight for highlighted segments */
+    highlightFontWeight?: string | number;
+    /** Visual highlight style (default: 'background') */
+    highlightStyle?: HighlightStyle;
+    /** Which HTML element to render for highlights (default: 'mark') */
+    highlightTag?: keyof JSX.IntrinsicElements;
+}
+/**
+ * Converts a string like "lined <mark>blue</mark>" into React nodes with
+ * the marked part rendered as a styled element. When no <mark> tags are
+ * present, returns the string as-is.
+ */
+declare function parseHighlightMarkup(text: string, options?: HighlightMarkupOptions): React__default.ReactNode;
+
+interface SuggestionListProps {
+    maxItems?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    listClassName?: string;
+    /**
+     * When true (default), suggestion text with <mark>...</mark> is rendered
+     * with those segments highlighted. When false, plain text is shown.
+     * Only applies when not using custom renderItem.
+     */
+    enableHighlightMarkup?: boolean;
+    /** Options for default highlight <mark> styling. Only applies when not using custom renderItem. */
+    highlightMarkupOptions?: HighlightMarkupOptions;
+    renderItem?: (suggestion: _seekora_ai_ui_sdk_types.SuggestionItem, index: number, isActive: boolean, onSelect: () => void) => React__default.ReactNode;
+}
+declare function SuggestionList({ maxItems, className, style, listClassName, enableHighlightMarkup, highlightMarkupOptions, renderItem, }: SuggestionListProps): React__default.JSX.Element | null;
+
+/**
+ * SuggestionItem – single text suggestion row (primitive)
+ *
+ * Highlights when isActive; onClick calls context selectSuggestion.
+ * When enableHighlightMarkup is true (default), parses <mark>...</mark> in
+ * suggestion text and renders as highlighted <mark> elements. Overridable via
+ * renderHighlight, className/style.
+ */
+
+interface SuggestionItemProps {
+    suggestion: SuggestionItem$3;
+    index: number;
+    isActive: boolean;
+    onSelect: () => void;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /**
+     * When true (default), text containing <mark>...</mark> is rendered with
+     * those segments as highlighted <mark> elements. When false, plain query
+     * text is shown with no markup parsing.
+     */
+    enableHighlightMarkup?: boolean;
+    /** Options for the default highlight <mark> styling when enableHighlightMarkup is true. */
+    highlightMarkupOptions?: HighlightMarkupOptions;
+    /** Custom renderer for suggestion text; overrides default highlight parsing when provided. */
+    renderHighlight?: (text: string) => React__default.ReactNode;
+}
+declare function SuggestionItem$1({ suggestion, index, isActive, onSelect, className, style, enableHighlightMarkup, highlightMarkupOptions, renderHighlight, }: SuggestionItemProps): React__default.JSX.Element;
+
+/**
+ * ActionButtons – card action buttons (add to cart, wishlist, buy now, quick view)
+ *
+ * Renders a set of action buttons for product cards. Can be positioned absolutely
+ * over the image (on hover) or inline below the card content.
+ */
+
+type ActionButtonType = 'addToCart' | 'wishlist' | 'buyNow' | 'quickView' | 'compare';
+interface ActionButton {
+    type: ActionButtonType;
+    label?: string;
+    icon?: React__default.ReactNode;
+    onClick?: (e: React__default.MouseEvent) => void;
+    disabled?: boolean;
+    loading?: boolean;
+}
+interface ActionButtonsProps {
+    buttons: ActionButton[];
+    layout?: 'horizontal' | 'vertical' | 'overlay';
+    position?: 'top-right' | 'bottom-center' | 'inline';
+    showLabels?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function ActionButtons({ buttons, layout, position, showLabels, size, className, style, }: ActionButtonsProps): React__default.JSX.Element;
+
+/**
+ * ItemCard – generic item tile (primitive)
+ *
+ * Domain-agnostic: works for docs, articles, products, or any hit with id, title,
+ * optional description, image, url. Overridable via className/style. Use for
+ * search results, section blocks, or any list; for e-commerce products use ProductCard.
+ */
+
+/** Generic item shape for ItemCard – compatible with ResultItem and most hit types */
+interface GenericItem {
+    id: string;
+    title: string;
+    description?: string;
+    image?: string;
+    /** Multiple images for carousel/hover/thumbStrip */
+    images?: string[];
+    url?: string;
+    /** Widget/display fields */
+    primaryText?: string;
+    secondaryText?: string;
+    tertiaryText?: string;
+    imageUrl?: string;
+    [key: string]: unknown;
+}
+type ImageDisplayVariant$1 = 'single' | 'carousel' | 'hover' | 'thumbStrip' | 'thumbList';
+interface ItemCardProps {
+    item: GenericItem;
+    /** Position in list (for analytics) */
+    position?: number;
+    onSelect?: () => void;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /** Render as link (anchor) when item.url is set; otherwise button */
+    asLink?: boolean;
+    /** When multiple images, use ImageDisplay with this variant */
+    imageVariant?: ImageDisplayVariant$1;
+    /** Layout direction: vertical (default) or horizontal (image left, content right) */
+    layout?: 'vertical' | 'horizontal';
+    /** Action buttons (add to cart, wishlist, etc.) */
+    actionButtons?: ActionButton[];
+    /** Action buttons position */
+    actionButtonsPosition?: 'overlay-top-right' | 'overlay-bottom' | 'inline';
+    /** Show action button labels */
+    showActionLabels?: boolean;
+}
+declare function ItemCard({ item, position, onSelect, className, style, asLink, imageVariant, layout, actionButtons, actionButtonsPosition, showActionLabels, }: ItemCardProps): React__default.JSX.Element;
+
+/**
+ * ItemGrid – generic grid of items (primitive)
+ *
+ * Domain-agnostic: accepts any items[] and onItemClick. Renders ItemCard by default
+ * or custom renderItem. Use for search hits, section blocks, docs, articles; for
+ * product-only lists use ProductGrid.
+ */
+
+interface ItemGridProps<T = GenericItem> {
+    items: T[];
+    onItemClick?: (item: T, index: number) => void;
+    /** Map item to GenericItem for default ItemCard rendering */
+    getItemId?: (item: T) => string;
+    getItemTitle?: (item: T) => string;
+    getItemImage?: (item: T) => string | undefined;
+    getItemDescription?: (item: T) => string | undefined;
+    getItemUrl?: (item: T) => string | undefined;
+    /** Custom render for each item; overrides default ItemCard */
+    renderItem?: (item: T, index: number) => React__default.ReactNode;
+    maxItems?: number;
+    columns?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    gridClassName?: string;
+}
+declare function ItemGrid<T = GenericItem>({ items, onItemClick, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl, renderItem, maxItems, columns, className, style, gridClassName, }: ItemGridProps<T>): React__default.JSX.Element | null;
+
+/** Maps client's data fields to component expected fields */
+interface SuggestionFieldMapping {
+    /** Field path for suggestion text (e.g., "query", "searchTerm", "text") */
+    query: string;
+    /** Field path for suggestion count/popularity */
+    count?: string;
+    /** Field path for object ID */
+    id?: string;
+    /** Field path for categories array */
+    categories?: string;
+    /** Field path for highlighted text */
+    highlighted?: string;
+    /** Custom field mappings */
+    custom?: Record<string, string>;
+}
+/** Maps client's product fields to component expected fields */
+interface ProductFieldMapping {
+    /** Field path for product ID */
+    id: string;
+    /** Field path for product title/name */
+    title: string;
+    /** Field path for product image URL */
+    image?: string;
+    /** Field path for product price */
+    price?: string;
+    /** Field path for original/compare price */
+    comparePrice?: string;
+    /** Field path for product URL */
+    url?: string;
+    /** Field path for brand name */
+    brand?: string;
+    /** Field path for category */
+    category?: string;
+    /** Field path for rating */
+    rating?: string;
+    /** Field path for review count */
+    reviewCount?: string;
+    /** Field path for discount percentage */
+    discount?: string;
+    /** Field path for availability/in stock */
+    inStock?: string;
+    /** Field path for currency */
+    currency?: string;
+    /** Field path for multiple images */
+    images?: string;
+    /** Field path for original/compare price (alias) */
+    originalPrice?: string;
+    /** Field path for availability */
+    available?: string;
+    /** Field path for product options (Color, Size axes) */
+    options?: string;
+    /** Field path for product variants */
+    variants?: string;
+    /** Field path for product tags */
+    tags?: string;
+    /** Custom field mappings */
+    custom?: Record<string, string>;
+}
+/** Maps client's category/tab fields */
+interface CategoryFieldMapping {
+    id: string;
+    label: string;
+    count?: string;
+    icon?: string;
+    image?: string;
+}
+/** Maps client's brand fields */
+interface BrandFieldMapping {
+    id?: string;
+    name: string;
+    logo?: string;
+    count?: string;
+}
+type DropdownLayout = 'list' | 'two-column' | 'three-column' | 'grid' | 'hero' | 'full-width' | 'mobile-sheet' | 'overlay';
+type ProductCardSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ProductCardStyle = 'minimal' | 'standard' | 'detailed' | 'compact' | 'horizontal';
+/** Available dropdown variants */
+type SuggestionDropdownVariant$1 = 'amazon' | 'google' | 'pinterest' | 'spotlight' | 'shopify' | 'mobile-sheet' | 'minimal';
+interface VisualConfig {
+    /** Overall dropdown layout */
+    layout?: DropdownLayout;
+    /** Show/hide shadows */
+    shadows?: boolean;
+    /** Border radius (px or CSS value) */
+    borderRadius?: number | string;
+    /** Animation style */
+    animation?: 'none' | 'fade' | 'slide' | 'scale' | 'spring';
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Blur background when open */
+    backdropBlur?: boolean;
+    /** Show dividers between sections */
+    showDividers?: boolean;
+    /** Compact mode (reduced padding) */
+    compact?: boolean;
+}
+type SectionType = 'suggestions' | 'recent' | 'trending' | 'products' | 'categories' | 'brands' | 'collections' | 'pages' | 'custom';
+interface SectionConfig {
+    /** Section identifier */
+    id: SectionType | string;
+    /** Section title (can be ReactNode for custom rendering) */
+    title?: string | ReactNode;
+    /** Whether section is enabled */
+    enabled?: boolean;
+    /** Maximum items to show */
+    maxItems?: number;
+    /** Section display order (lower = higher) */
+    order?: number;
+    /** Section-specific layout override */
+    layout?: 'list' | 'grid' | 'horizontal-scroll' | 'chips';
+    /** Number of columns for grid layout */
+    columns?: number;
+    /** Show "View All" link */
+    showViewAll?: boolean;
+    /** View All link URL or handler */
+    viewAllLink?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Custom renderer for entire section */
+    render?: (data: any[], config: SectionConfig) => ReactNode;
+    /** Custom renderer for individual items */
+    renderItem?: (item: any, index: number) => ReactNode;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Icon for section header */
+    icon?: ReactNode;
+}
+interface ProductDisplayConfig {
+    /** Card size */
+    size?: ProductCardSize;
+    /** Card style */
+    style?: ProductCardStyle;
+    /** Show product image */
+    showImage?: boolean;
+    /** Image aspect ratio */
+    imageAspectRatio?: '1:1' | '4:3' | '3:4' | '16:9' | 'auto';
+    /** Image object-fit: 'cover' crops to fill (default), 'contain' fits entire image */
+    imageObjectFit?: 'cover' | 'contain';
+    /** Show price */
+    showPrice?: boolean;
+    /** Show compare/original price */
+    showComparePrice?: boolean;
+    /** Show discount badge */
+    showDiscount?: boolean;
+    /** Show brand */
+    showBrand?: boolean;
+    /** Show rating */
+    showRating?: boolean;
+    /** Show stock status */
+    showStock?: boolean;
+    /** Show add to cart button */
+    showAddToCart?: boolean;
+    /** Currency symbol */
+    currency?: string;
+    /** Currency position */
+    currencyPosition?: 'before' | 'after';
+    /** Decimal places for price */
+    priceDecimals?: number;
+    /** Truncate title after N lines */
+    titleLines?: number;
+    /** Hover effect */
+    hoverEffect?: 'none' | 'lift' | 'glow' | 'scale' | 'border';
+    /** Image placeholder */
+    imagePlaceholder?: ReactNode;
+    /** Lazy load images */
+    lazyLoadImages?: boolean;
+    /** Show variant swatches on card */
+    showVariants?: boolean;
+    /** Which option names to show as swatches (e.g., ['Color']). Default: all */
+    variantOptionsToShow?: string[];
+    /** Max variant values before "+N more" (default: 5) */
+    maxVariantValues?: number;
+    /** Show price range when variants have different prices */
+    showPriceRange?: boolean;
+    /** Show badges (sale, new, sold out, etc.) */
+    showBadges?: boolean;
+    /** Custom badge extractor from tags */
+    badgeExtractor?: (tags?: string[], product?: any) => _seekora_ai_ui_sdk_types.ProductBadge[];
+}
+interface SuggestionDisplayConfig {
+    /** Show search icon */
+    showIcon?: boolean;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Show hit count */
+    showCount?: boolean;
+    /** Show categories inline */
+    showCategories?: boolean;
+    /** Max categories to show */
+    maxCategories?: number;
+    /** Highlight matching text */
+    highlightMatches?: boolean;
+    /** Highlight style */
+    highlightStyle?: CSSProperties;
+    /** Show arrow on hover */
+    showArrow?: boolean;
+    /** Category click behavior */
+    categoryClickable?: boolean;
+}
+interface DropdownThemeConfig {
+    /** Light/dark mode */
+    mode?: 'light' | 'dark' | 'auto';
+    /** Primary brand color */
+    primaryColor?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Surface color (cards, sections) */
+    surfaceColor?: string;
+    /** Text color */
+    textColor?: string;
+    /** Secondary text color */
+    textSecondaryColor?: string;
+    /** Border color */
+    borderColor?: string;
+    /** Hover background */
+    hoverColor?: string;
+    /** Highlight/match color */
+    highlightColor?: string;
+    /** Success color (in stock, etc.) */
+    successColor?: string;
+    /** Error color (out of stock, etc.) */
+    errorColor?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Base font size */
+    fontSize?: number | string;
+    /** Border radius */
+    borderRadius?: number | string;
+    /** Box shadow */
+    boxShadow?: string;
+    /** Custom CSS variables */
+    cssVariables?: Record<string, string>;
+}
+interface AnalyticsConfig {
+    /** Enable analytics */
+    enabled?: boolean;
+    /** Track suggestion clicks */
+    trackSuggestionClicks?: boolean;
+    /** Track product clicks */
+    trackProductClicks?: boolean;
+    /** Track impressions */
+    trackImpressions?: boolean;
+    /** Impression debounce time (ms) */
+    impressionDebounce?: number;
+    /** Track category clicks */
+    trackCategoryClicks?: boolean;
+    /** Track brand clicks */
+    trackBrandClicks?: boolean;
+    /** Track search submissions */
+    trackSearchSubmit?: boolean;
+    /** Custom analytics tags */
+    tags?: string[];
+    /** User ID for personalization */
+    userId?: string;
+    /** Session ID */
+    sessionId?: string;
+    /** Custom event handler */
+    onEvent?: (eventType: string, data: any) => void;
+}
+interface DropdownEventHandlers<TSuggestion = any, TProduct = any, TCategory = any, TBrand = any> {
+    /** Suggestion selected */
+    onSuggestionSelect?: (suggestion: TSuggestion, index: number) => void;
+    /** Product clicked */
+    onProductClick?: (product: TProduct, index: number) => void;
+    /** Category clicked */
+    onCategoryClick?: (category: TCategory, suggestion?: TSuggestion) => void;
+    /** Brand clicked */
+    onBrandClick?: (brand: TBrand) => void;
+    /** Tab/filter changed */
+    onTabChange?: (tabId: string, tab?: any) => void;
+    /** Recent search clicked */
+    onRecentClick?: (query: string) => void;
+    /** Recent search removed */
+    onRecentRemove?: (query: string) => void;
+    /** Clear all recent searches */
+    onRecentClearAll?: () => void;
+    /** View all clicked */
+    onViewAll?: (section: SectionType | string) => void;
+    /** Search submitted */
+    onSearchSubmit?: (query: string) => void;
+    /** Dropdown opened */
+    onOpen?: () => void;
+    /** Dropdown closed */
+    onClose?: () => void;
+    /** Keyboard navigation */
+    onNavigate?: (direction: 'up' | 'down' | 'left' | 'right', index: number) => void;
+    /** Add to cart clicked (if enabled) */
+    onAddToCart?: (product: TProduct) => void;
+}
+interface AccessibilityConfig {
+    /** ARIA label for dropdown */
+    ariaLabel?: string;
+    /** ARIA labelledby */
+    ariaLabelledBy?: string;
+    /** Announce selection to screen readers */
+    announceSelection?: boolean;
+    /** Custom announcement text */
+    getAnnouncementText?: (item: any, type: string) => string;
+    /** Keyboard navigation enabled */
+    keyboardNavigation?: boolean;
+    /** Focus trap (keep focus within dropdown) */
+    focusTrap?: boolean;
+    /** Auto focus first item */
+    autoFocus?: boolean;
+    /** Close on escape */
+    closeOnEscape?: boolean;
+    /** Close on click outside */
+    closeOnClickOutside?: boolean;
+}
+interface BaseDropdownProps<TSuggestion = any, TProduct = any, TCategory = any, TBrand = any> extends DropdownEventHandlers<TSuggestion, TProduct, TCategory, TBrand> {
+    /** Current search query */
+    query: string;
+    /** Whether dropdown is open/visible */
+    isOpen?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Error state */
+    error?: Error | string | null;
+    /** Suggestion items */
+    suggestions?: TSuggestion[];
+    /** Product items */
+    products?: TProduct[];
+    /** Category/filter tabs */
+    categories?: TCategory[];
+    /** Brand items */
+    brands?: TBrand[];
+    /** Recent searches (strings or objects) */
+    recentSearches?: string[] | Array<{
+        query: string;
+        timestamp?: number;
+    }>;
+    /** Trending searches */
+    trendingSearches?: string[] | TSuggestion[];
+    /** Filtered tabs with products */
+    filteredTabs?: Array<{
+        id: string;
+        label: string;
+        products?: TProduct[];
+        nb_hits?: number;
+        filter?: string;
+    }>;
+    /** Currently active tab ID */
+    activeTab?: string;
+    /** Map suggestion data fields */
+    suggestionFields?: SuggestionFieldMapping;
+    /** Map product data fields */
+    productFields?: ProductFieldMapping;
+    /** Map category data fields */
+    categoryFields?: CategoryFieldMapping;
+    /** Map brand data fields */
+    brandFields?: BrandFieldMapping;
+    /** Section configurations */
+    sections?: SectionConfig[];
+    /** Product display config */
+    productDisplay?: ProductDisplayConfig;
+    /** Suggestion display config */
+    suggestionDisplay?: SuggestionDisplayConfig;
+    /** Visual/layout config */
+    visual?: VisualConfig;
+    /** Theme config */
+    theme?: DropdownThemeConfig;
+    /** Analytics config */
+    analytics?: AnalyticsConfig;
+    /** Accessibility config */
+    accessibility?: AccessibilityConfig;
+    /** Dropdown width */
+    width?: string | number;
+    /** Dropdown max height */
+    maxHeight?: string | number;
+    /** Dropdown min height */
+    minHeight?: string | number;
+    /** Z-index */
+    zIndex?: number;
+    /** Root CSS class */
+    className?: string;
+    /** Root inline styles */
+    style?: CSSProperties;
+    /** CSS classes for parts */
+    classNames?: Partial<DropdownClassNames>;
+    /** Inline styles for parts */
+    styles?: Partial<DropdownStyles>;
+    /** Custom header */
+    header?: ReactNode;
+    /** Custom footer */
+    footer?: ReactNode;
+    /** Custom empty state */
+    renderEmpty?: (query: string) => ReactNode;
+    /** Custom error state */
+    renderError?: (error: Error | string) => ReactNode;
+    /** Reference to input element (for focus management) */
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+interface DropdownClassNames {
+    root: string;
+    container: string;
+    header: string;
+    content: string;
+    footer: string;
+    section: string;
+    sectionHeader: string;
+    sectionTitle: string;
+    sectionContent: string;
+    sectionViewAll: string;
+    suggestionsList: string;
+    suggestionItem: string;
+    suggestionItemActive: string;
+    suggestionIcon: string;
+    suggestionText: string;
+    suggestionHighlight: string;
+    suggestionCount: string;
+    suggestionCategories: string;
+    suggestionCategory: string;
+    suggestionArrow: string;
+    productsList: string;
+    productCard: string;
+    productCardHover: string;
+    productImage: string;
+    productImagePlaceholder: string;
+    productInfo: string;
+    productTitle: string;
+    productBrand: string;
+    productPrice: string;
+    productComparePrice: string;
+    productDiscount: string;
+    productRating: string;
+    productStock: string;
+    productAddToCart: string;
+    categoriesList: string;
+    categoryItem: string;
+    categoryItemActive: string;
+    categoryIcon: string;
+    categoryLabel: string;
+    categoryCount: string;
+    brandsList: string;
+    brandItem: string;
+    brandLogo: string;
+    brandName: string;
+    recentList: string;
+    recentItem: string;
+    recentIcon: string;
+    recentText: string;
+    recentRemove: string;
+    recentClearAll: string;
+    trendingList: string;
+    trendingItem: string;
+    trendingIcon: string;
+    tabsList: string;
+    tabItem: string;
+    tabItemActive: string;
+    tabCount: string;
+    empty: string;
+    emptyIcon: string;
+    emptyText: string;
+    error: string;
+    errorIcon: string;
+    errorText: string;
+    keyboard: string;
+    keyboardHint: string;
+    keyboardKey: string;
+}
+interface DropdownStyles {
+    root: CSSProperties;
+    container: CSSProperties;
+    header: CSSProperties;
+    content: CSSProperties;
+    footer: CSSProperties;
+    section: CSSProperties;
+    suggestionItem: CSSProperties;
+    productCard: CSSProperties;
+    categoryItem: CSSProperties;
+    brandItem: CSSProperties;
+}
+interface DropdownRef {
+    /** Get currently active/focused index */
+    getActiveIndex: () => number;
+    /** Set active index */
+    setActiveIndex: (index: number) => void;
+    /** Select currently active item */
+    selectActive: () => void;
+    /** Navigate to next item */
+    navigateNext: () => void;
+    /** Navigate to previous item */
+    navigatePrevious: () => void;
+    /** Focus the dropdown */
+    focus: () => void;
+    /** Close the dropdown */
+    close: () => void;
+    /** Get active tab ID (if tabs exist) */
+    getActiveTab?: () => string | null;
+    /** Set active tab */
+    setActiveTab?: (tabId: string) => void;
+    /** Scroll to item */
+    scrollToItem?: (index: number) => void;
+}
+
+/**
+ * ProductCard – one product tile (primitive)
+ *
+ * Without displayConfig: renders the original minimal layout (image, title, price).
+ * With displayConfig: renders layout variants (minimal, standard, detailed, compact, horizontal).
+ */
+
+type ProductCardImageVariant = 'single' | 'carousel' | 'hover' | 'thumbStrip' | 'thumbList';
+interface ProductCardProps {
+    product: ProductItem;
+    position: number;
+    section?: string;
+    tabId?: string;
+    onSelect: () => void;
+    className?: string;
+    style?: React__default.CSSProperties;
+    imageVariant?: ProductCardImageVariant;
+    /** Product display configuration for layout variants */
+    displayConfig?: ProductDisplayConfig;
+    /** Callback when a variant swatch is hovered (e.g., to swap card image) */
+    onVariantHover?: (optionName: string, value: string) => void;
+    /** Callback when a variant swatch is clicked (e.g., to swap card image permanently) */
+    onVariantClick?: (optionName: string, value: string) => void;
+    /** Currently selected variant values (e.g., { Color: 'Black', Size: 'M' }) */
+    selectedVariants?: Record<string, string>;
+    /** Render as link when true and product.url exists */
+    asLink?: boolean;
+    /** Action buttons (add to cart, wishlist, etc.) */
+    actionButtons?: ActionButton[];
+    /** Action buttons position */
+    actionButtonsPosition?: 'overlay-top-right' | 'overlay-bottom' | 'inline';
+    /** Show action button labels */
+    showActionLabels?: boolean;
+    /** Enable image zoom functionality */
+    enableImageZoom?: boolean;
+    /** Image zoom mode: 'hover' (Amazon-style), 'lens', 'click' (lightbox), 'both' (hover + click) */
+    imageZoomMode?: 'hover' | 'lens' | 'click' | 'both';
+    /** Image zoom magnification level (2 = 200%, 3 = 300%) */
+    imageZoomLevel?: number;
+}
+declare function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }: ProductCardProps): React__default.JSX.Element;
+
+/**
+ * ProductGrid – grid of product cards from context (primitive)
+ *
+ * Uses trendingProducts or active tab products; each click calls context selectProduct.
+ */
+
+interface ProductGridProps {
+    maxItems?: number;
+    /** 'trending' | tab id for filtered tab products */
+    source?: 'trending' | string;
+    columns?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    gridClassName?: string;
+    /** Product display configuration passed through to each ProductCard */
+    displayConfig?: ProductDisplayConfig;
+    /** Callback when a variant swatch is hovered on a card */
+    onVariantHover?: (optionName: string, value: string) => void;
+}
+declare function ProductGrid({ maxItems, source, columns, className, style, gridClassName, displayConfig, onVariantHover, }: ProductGridProps): React__default.JSX.Element | null;
+
+/**
+ * CategoriesTabs – horizontal tabs (e.g. filtered tabs) (primitive)
+ *
+ * Active tab from context; on select updates context and tracks analytics.
+ */
+
+interface CategoriesTabsProps {
+    className?: string;
+    style?: React__default.CSSProperties;
+    tabClassName?: string;
+}
+declare function CategoriesTabs({ className, style, tabClassName }: CategoriesTabsProps): React__default.JSX.Element | null;
+
+/**
+ * RecentSearchesList – list of recent queries (primitive)
+ *
+ * Reads recentSearches from context; each click calls selectRecentSearch. Optional title/render.
+ */
+
+interface RecentSearchesListProps {
+    title?: string;
+    maxItems?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    listClassName?: string;
+    renderItem?: (search: RecentSearch, index: number, onSelect: () => void) => React__default.ReactNode;
+}
+declare function RecentSearchesList({ title, maxItems, className, style, listClassName, renderItem, }: RecentSearchesListProps): React__default.JSX.Element | null;
+
+/**
+ * TrendingList – list of trending searches (primitive)
+ *
+ * Reads trendingSearches from context; each click calls selectTrendingSearch. Optional title/render.
+ */
+
+interface TrendingListProps {
+    title?: string;
+    maxItems?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    listClassName?: string;
+    renderItem?: (trending: TrendingSearch, index: number, onSelect: () => void) => React__default.ReactNode;
+}
+declare function TrendingList({ title, maxItems, className, style, listClassName, renderItem, }: TrendingListProps): React__default.JSX.Element | null;
+
+/**
+ * SuggestionsError – error message (primitive)
+ */
+
+interface SuggestionsErrorProps {
+    className?: string;
+    style?: React__default.CSSProperties;
+    render?: (error: Error) => React__default.ReactNode;
+}
+declare function SuggestionsError({ className, style, render }: SuggestionsErrorProps): React__default.JSX.Element | null;
+
+/**
+ * SuggestionsDropdownComposition – reference composition
+ *
+ * Example layout built from primitives: SearchInput + DropdownPanel containing
+ * RecentSearchesList (when query empty), SuggestionList, CategoriesTabs, ProductGrid, TrendingList.
+ * Wrap with SearchProvider and SuggestionsProvider. Use as reference or replace
+ * with your own arrangement of the same primitives.
+ */
+
+interface SuggestionsDropdownCompositionProps extends Omit<SuggestionsProviderProps, 'children'> {
+    /** Show recent searches when query is empty */
+    showRecentSearches?: boolean;
+    /** Show trending list */
+    showTrending?: boolean;
+    /** Show categories/filtered tabs */
+    showTabs?: boolean;
+    /** Show product grid */
+    showProducts?: boolean;
+    /** SearchInput placeholder */
+    placeholder?: string;
+}
+declare function SuggestionsDropdownComposition({ showRecentSearches, showTrending, showTabs, showProducts, placeholder, ...providerProps }: SuggestionsDropdownCompositionProps): React__default.JSX.Element;
+
+/**
+ * ImageZoom – zoom on hover and click (Amazon-style magnifier + lightbox)
+ *
+ * Supports three zoom modes:
+ * - hover: Magnified view in a separate panel on the right (Amazon style)
+ * - lens: Magnifying glass that follows cursor
+ * - click: Full-screen lightbox modal
+ */
+
+type ImageZoomMode = 'hover' | 'lens' | 'click' | 'both';
+interface ImageZoomProps {
+    src: string;
+    alt?: string;
+    mode?: ImageZoomMode;
+    zoomLevel?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /** Show zoom indicator icon */
+    showZoomIndicator?: boolean;
+    /** Lens size in pixels (for lens mode) */
+    lensSize?: number;
+    /** Zoom panel size (for hover mode) */
+    zoomPanelSize?: {
+        width: number;
+        height: number;
+    };
+    /** Multiple images for lightbox carousel */
+    images?: string[];
+    /** Current image index (for multi-image support) */
+    currentIndex?: number;
+}
+declare function ImageZoom({ src, alt, mode, zoomLevel, className, style, showZoomIndicator, lensSize, zoomPanelSize, images, currentIndex, }: ImageZoomProps): React__default.JSX.Element;
+
+/**
+ * ImageDisplay – configurable multi-image display (primitive)
+ *
+ * Variants: single, carousel, hover, thumbStrip, thumbList. Use in ItemCard,
+ * ProductCard, ProductGallery. Overridable via className/style.
+ */
+
+type ImageDisplayVariant = 'single' | 'carousel' | 'hover' | 'thumbStrip' | 'thumbList';
+interface ImageDisplayProps {
+    images: string[];
+    variant?: ImageDisplayVariant;
+    alt?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    carouselAutoplay?: boolean;
+    carouselIntervalMs?: number;
+    /** Enable zoom functionality */
+    enableZoom?: boolean;
+    /** Zoom mode: 'hover' (Amazon-style), 'lens', 'click' (lightbox), 'both' (hover + click) */
+    zoomMode?: ImageZoomMode;
+    /** Zoom magnification level (2 = 200%, 3 = 300%) */
+    zoomLevel?: number;
+    /** Show navigation dots for carousel */
+    showDots?: boolean;
+}
+declare function ImageDisplay({ images, variant, alt, className, style, carouselAutoplay, carouselIntervalMs, enableZoom, zoomMode, zoomLevel, showDots, }: ImageDisplayProps): React__default.JSX.Element;
+
+/**
+ * PriceDisplay – reusable price display primitive
+ *
+ * Handles single price, compare price with strikethrough, discount percentage,
+ * and price range display.
+ */
+
+interface PriceDisplayProps {
+    price?: number;
+    comparePrice?: number;
+    priceRange?: PriceRange | null;
+    currency?: string;
+    currencyPosition?: 'before' | 'after';
+    priceDecimals?: number;
+    showDiscount?: boolean;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function PriceDisplay({ price, comparePrice, priceRange, currency, currencyPosition, priceDecimals, showDiscount, className, style, }: PriceDisplayProps): React__default.JSX.Element | null;
+
+/**
+ * BadgeList – renders product badges (sale, new, sold out, custom)
+ */
+
+interface BadgeListProps {
+    badges: ProductBadge[];
+    maxBadges?: number;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'inline';
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function BadgeList({ badges, maxBadges, position, className, style, }: BadgeListProps): React__default.JSX.Element | null;
+
+/**
+ * RatingDisplay – star rating display with review count
+ *
+ * Supports multiple variants: stars-only, compact, full, inline.
+ * Can be read-only (display) or interactive (for reviews).
+ */
+
+type RatingVariant = 'stars-only' | 'compact' | 'full' | 'inline';
+type RatingSize = 'small' | 'medium' | 'large';
+interface RatingDisplayProps {
+    /** Rating value (0-5) */
+    rating: number;
+    /** Total number of reviews */
+    reviewCount?: number;
+    /** Display variant */
+    variant?: RatingVariant;
+    /** Size of stars */
+    size?: RatingSize;
+    /** Maximum rating (default: 5) */
+    maxRating?: number;
+    /** Show decimal rating number */
+    showNumeric?: boolean;
+    /** Show half stars */
+    showHalfStars?: boolean;
+    /** Interactive mode (for leaving reviews) */
+    interactive?: boolean;
+    /** Callback when rating is clicked (interactive mode) */
+    onRatingChange?: (rating: number) => void;
+    /** Custom star color */
+    starColor?: string;
+    /** Custom empty star color */
+    emptyStarColor?: string;
+    /** Custom text color */
+    textColor?: string;
+    /** Show review count in parentheses */
+    showReviewCount?: boolean;
+    /** Custom review count format */
+    reviewCountFormat?: (count: number) => string;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function RatingDisplay({ rating, reviewCount, variant, size, maxRating, showNumeric, showHalfStars, interactive, onRatingChange, starColor, emptyStarColor, textColor, showReviewCount, reviewCountFormat, className, style, }: RatingDisplayProps): React__default.JSX.Element | null;
+
+/**
+ * VariantSwatches – inline variant indicators for card display
+ *
+ * Shows color dots, size labels, and "+N more" overflow for compact card views.
+ */
+
+interface VariantSwatchesProps {
+    options: ProductOption[];
+    /** Which option names to show (default: all) */
+    visibleOptions?: string[];
+    /** Max values per option before "+N more" (default: 5) */
+    maxValues?: number;
+    /** Map option value names to CSS color strings */
+    colorMap?: Record<string, string>;
+    /** Currently selected value per option (e.g., { Color: 'Black', Size: 'M' }) */
+    selectedValues?: Record<string, string>;
+    /** Product variants for availability checking */
+    variants?: ProductVariant[];
+    /** Show availability cross-out for unavailable combos (default: true) */
+    showAvailability?: boolean;
+    onSwatchHover?: (optionName: string, value: string) => void;
+    onSwatchClick?: (optionName: string, value: string) => void;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function VariantSwatches({ options, visibleOptions, maxValues, colorMap, selectedValues, variants, showAvailability, onSwatchHover, onSwatchClick, className, style, }: VariantSwatchesProps): React__default.JSX.Element | null;
+
+/**
+ * VariantSelector – full variant selector for product detail pages
+ *
+ * Three render modes per option:
+ * - swatch: color circles (auto-detected for "Color" option or when colorMap provided)
+ * - button: rectangular buttons (default for most options)
+ * - dropdown: <select> for options with many values
+ */
+
+interface VariantSelectorProps {
+    options: ProductOption[];
+    variants: ProductVariant[];
+    selections: Record<string, string>;
+    onSelectionChange: (optionName: string, value: string) => void;
+    /** Override render mode per option name */
+    optionRenderModes?: Record<string, 'swatch' | 'button' | 'dropdown'>;
+    /** Auto-switch to dropdown when values exceed this count (default: 8) */
+    dropdownThreshold?: number;
+    /** Map value names to CSS colors */
+    colorMap?: Record<string, string>;
+    /** Show availability cross-out for unavailable combos */
+    showAvailability?: boolean;
+    /** Currently matched variant (for display) */
+    selectedVariant?: ProductVariant | null;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function VariantSelector({ options, variants, selections, onSelectionChange, optionRenderModes, dropdownThreshold, colorMap, showAvailability, selectedVariant: _selectedVariant, className, style, }: VariantSelectorProps): React__default.JSX.Element | null;
+
+/**
+ * withAnalytics – HOC that wraps any React component to inject analytics tracking
+ */
+
+interface WithAnalyticsConfig {
+    /** Track clicks on the component */
+    trackClick?: boolean;
+    /** Track impressions (visibility) */
+    trackImpression?: boolean;
+    /** Custom event name for click */
+    clickEventName?: string;
+    /** Extract product/item data from props */
+    getProductFromProps?: (props: any) => ProductItem | null;
+    /** Extract position from props */
+    getPositionFromProps?: (props: any) => number;
+}
+interface WithAnalyticsInjectedProps {
+    seekoraClient?: SeekoraClient;
+    seekoraContext?: SearchContext | Partial<SearchContext>;
+}
+declare function withAnalytics<P extends object>(Component: React__default.ComponentType<P>, config?: WithAnalyticsConfig): React__default.ComponentType<P & WithAnalyticsInjectedProps>;
+
+/**
+ * AnalyticsProvider – context + delegated event listener for data-seekora-* attribute-based analytics
+ *
+ * Installs a delegated click listener on a container. Any descendant with
+ * data-seekora-track="click"|"add-to-cart" and data-seekora-product-id="..."
+ * automatically fires analytics events without React wiring.
+ */
+
+interface AnalyticsProviderProps {
+    client: SeekoraClient;
+    context?: SearchContext | Partial<SearchContext>;
+    children: React__default.ReactNode;
+}
+interface AnalyticsContextValue {
+    client: SeekoraClient;
+    context?: SearchContext | Partial<SearchContext>;
+}
+declare const useAnalyticsProvider: () => AnalyticsContextValue | null;
+declare function AnalyticsProvider({ client, context, children }: AnalyticsProviderProps): React__default.JSX.Element;
+
+/**
+ * CustomSelect — lightweight, accessible custom dropdown replacement for native <select>.
+ *
+ * CSS Variables (apply on a parent element to customize):
+ * --seekora-select-bg           — background color (default: #fff)
+ * --seekora-select-color        — text color (default: inherit)
+ * --seekora-select-border       — border color (default: rgba(128,128,128,0.3))
+ * --seekora-select-hover-bg     — option hover background (default: #f3f4f6)
+ * --seekora-select-active-bg    — selected option background (default: #eff6ff)
+ * --seekora-select-active-color — selected option text color (default: inherit)
+ * --seekora-select-radius       — border radius (default: 6px)
+ * --seekora-select-font-size    — font size (default: 0.875rem)
+ */
+
+interface CustomSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface CustomSelectTheme {
+    trigger?: string;
+    menu?: string;
+    option?: string;
+    optionActive?: string;
+    optionDisabled?: string;
+}
+interface CustomSelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: CustomSelectOption[];
+    placeholder?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    theme?: CustomSelectTheme;
+    /** aria-label for the trigger button */
+    'aria-label'?: string;
+    disabled?: boolean;
+}
+declare const CustomSelect: React__default.FC<CustomSelectProps>;
+
+/**
+ * SectionSearchProvider – preset query + filter section
+ *
+ * Runs client.search(query, { refinements, hitsPerPage, sortBy }) on mount and when
+ * query/filters change. Does not use global SearchStateManager. Use for menus,
+ * sidebar, front-page blocks (e.g. "New arrivals", "On sale").
+ */
+
+interface RefinementInput {
+    field: string;
+    value: string;
+}
+interface SectionSearchProviderProps {
+    children: React__default.ReactNode;
+    query: string;
+    refinements?: RefinementInput[];
+    maxItems?: number;
+    sortBy?: string;
+    enabled?: boolean;
+    sectionId?: string;
+    /** Additional search options merged into the request (e.g. { widget_mode: false }). */
+    searchOptions?: Record<string, unknown>;
+}
+declare function SectionSearchProvider({ children, query, refinements, maxItems, sortBy, enabled, sectionId, searchOptions, }: SectionSearchProviderProps): React__default.JSX.Element;
+
+/**
+ * SectionSearchContext – preset query/filter section state
+ *
+ * For menus, sidebar, front-page blocks. Independent of main search state.
+ */
+
+interface SectionSearchContextValue {
+    items: unknown[];
+    loading: boolean;
+    error: Error | null;
+    totalCount: number;
+    sectionId?: string;
+    trackClick: (item: unknown, position: number) => void;
+}
+declare function useSectionSearchContext(): SectionSearchContextValue;
+
+/**
+ * SectionItemGrid – generic grid of items from SectionSearchProvider (primitive)
+ */
+
+interface SectionItemGridProps {
+    columns?: number;
+    maxItems?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    getItemId?: (item: unknown) => string;
+    getItemTitle?: (item: unknown) => string;
+    getItemImage?: (item: unknown) => string | undefined;
+    getItemDescription?: (item: unknown) => string | undefined;
+    getItemUrl?: (item: unknown) => string | undefined;
+    renderItem?: (item: unknown, index: number) => React__default.ReactNode;
+}
+declare function SectionItemGrid({ columns, maxItems, className, style, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl, renderItem, }: SectionItemGridProps): React__default.JSX.Element;
+
+/**
+ * SectionError – error state for section (primitive)
+ */
+
+interface SectionErrorProps {
+    className?: string;
+    style?: React__default.CSSProperties;
+    render?: (error: Error) => React__default.ReactNode;
+}
+declare function SectionError({ className, style, render }: SectionErrorProps): React__default.JSX.Element | null;
+
+/**
+ * ProductGallery – product detail image gallery (primitive)
+ *
+ * Uses ImageDisplay with configurable variant (carousel, thumbStrip, etc.).
+ * For use on individual product page.
+ */
+
+interface ProductGalleryProps {
+    images: string[];
+    variant?: ImageDisplayVariant;
+    alt?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    carouselAutoplay?: boolean;
+    carouselIntervalMs?: number;
+    /** Enable zoom functionality on product images */
+    enableZoom?: boolean;
+    /** Zoom mode: 'hover' (Amazon-style), 'lens', 'click' (lightbox), 'both' */
+    zoomMode?: ImageZoomMode;
+    /** Zoom magnification level (2 = 200%, 3 = 300%) */
+    zoomLevel?: number;
+}
+declare function ProductGallery({ images, variant, alt, className, style, carouselAutoplay, carouselIntervalMs, enableZoom, zoomMode, zoomLevel, }: ProductGalleryProps): React__default.JSX.Element;
+
+/**
+ * ProductInfo – product detail block (primitive)
+ *
+ * Title, description, price, optional variant selector and CTA. Minimal layout;
+ * override with className/style. For use on individual product page.
+ *
+ * When options/variants/selections/onSelectionChange are provided and
+ * renderVariantSelector is NOT provided, renders the built-in VariantSelector.
+ * renderVariantSelector still takes priority as an override.
+ */
+
+interface ProductInfoProps {
+    title: string;
+    description?: string;
+    price?: number | string;
+    currency?: string;
+    /** Compare/original price for strikethrough display */
+    comparePrice?: number | string;
+    /** Product brand */
+    brand?: string;
+    /** Whether product is available */
+    available?: boolean;
+    /** Badges to display */
+    badges?: ProductBadge[];
+    /** Product option axes (Color, Size, etc.) */
+    options?: ProductOption[];
+    /** Product variants */
+    variants?: ProductVariant[];
+    /** Currently selected variant */
+    selectedVariant?: ProductVariant | null;
+    /** Current option selections */
+    selections?: Record<string, string>;
+    /** Called when an option value is selected */
+    onSelectionChange?: (optionName: string, value: string) => void;
+    /** Optional variant selector override (takes priority over built-in) */
+    renderVariantSelector?: () => React__default.ReactNode;
+    /** Optional CTA (e.g. Add to cart) */
+    renderCTA?: () => React__default.ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function ProductInfo({ title, description, price, currency, comparePrice, brand, available, badges, options, variants, selectedVariant: _selectedVariant, selections, onSelectionChange, renderVariantSelector, renderCTA, className, style, }: ProductInfoProps): React__default.JSX.Element;
+
+/**
+ * ProductRecommendations – related / frequently bought (primitive)
+ *
+ * Renders a section of recommended items (generic ItemGrid or product list).
+ * Pass items and onItemClick; or wrap SectionSearchProvider with preset query for "related".
+ * For use on individual product page.
+ */
+
+interface ProductRecommendationsProps {
+    title?: string;
+    items: GenericItem[] | unknown[];
+    onItemClick?: (item: unknown, index: number) => void;
+    maxItems?: number;
+    columns?: number;
+    className?: string;
+    style?: React__default.CSSProperties;
+    renderItem?: (item: unknown, index: number) => React__default.ReactNode;
+}
+declare function ProductRecommendations({ title, items, onItemClick, maxItems, columns, className, style, renderItem, }: ProductRecommendationsProps): React__default.JSX.Element | null;
+
+/**
+ * MinimalDropdown - Ultra-Clean Minimalist Style
+ *
+ * Features:
+ * - Stripped-down, distraction-free design
+ * - Focus on typography and whitespace
+ * - Subtle animations
+ * - Perfect for editorial/content sites
+ */
+
+interface MinimalDropdownProps extends BaseDropdownProps {
+    /** Show item indices */
+    showIndices?: boolean;
+    /** Show item type labels */
+    showTypeLabels?: boolean;
+    /** Show dividers between sections */
+    showSectionDividers?: boolean;
+    /** Monospace indices */
+    monoIndices?: boolean;
+}
+declare const MinimalDropdown: React__default.ForwardRefExoticComponent<MinimalDropdownProps & React__default.RefAttributes<DropdownRef>>;
+
+/**
+ * MobileSheetDropdown - Mobile-First Bottom Sheet Style
+ *
+ * Features:
+ * - iOS-style bottom sheet with drag handle
+ * - Full-screen overlay with smooth transitions
+ * - Touch-friendly large tap targets
+ * - Swipe to dismiss
+ * - Optimized for small screens
+ */
+
+interface MobileSheetDropdownProps extends BaseDropdownProps {
+    /** Show search input in header */
+    showSearchInput?: boolean;
+    /** Show cancel button */
+    showCancel?: boolean;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Show drag handle */
+    showDragHandle?: boolean;
+    /** Enable swipe to dismiss */
+    swipeToDismiss?: boolean;
+    /** Footer button text */
+    footerButtonText?: string;
+    /** Show footer button */
+    showFooterButton?: boolean;
+}
+declare const MobileSheetDropdown: React__default.ForwardRefExoticComponent<MobileSheetDropdownProps & React__default.RefAttributes<DropdownRef>>;
+
+/**
+ * ShopifyDropdown - Modern E-commerce Style Suggestions
+ *
+ * Features:
+ * - Hero product with large image
+ * - Horizontal product scroll
+ * - Collection/category links
+ * - Clean, modern design
+ * - Quick add to cart
+ */
+
+interface ShopifyDropdownProps extends BaseDropdownProps {
+    /** Show hero product */
+    showHeroProduct?: boolean;
+    /** Show collections/categories */
+    showCollections?: boolean;
+    /** Show add to cart button */
+    showAddToCart?: boolean;
+    /** Add to cart text */
+    addToCartText?: string;
+    /** Show compare price */
+    showComparePrice?: boolean;
+}
+declare const ShopifyDropdown: React__default.ForwardRefExoticComponent<ShopifyDropdownProps & React__default.RefAttributes<DropdownRef>>;
+
+/**
+ * SpotlightDropdown - macOS Spotlight / Command Palette Style
+ *
+ * Features:
+ * - Clean, centered modal design
+ * - Category grouping with keyboard navigation
+ * - Instant preview panel
+ * - Actions/commands support
+ * - Keyboard-first interaction
+ */
+
+interface SpotlightDropdownProps extends BaseDropdownProps {
+    /** Show preview panel */
+    showPreview?: boolean;
+    /** Show as overlay */
+    asOverlay?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Show keyboard shortcuts */
+    showShortcuts?: boolean;
+    /** Quick actions */
+    actions?: Array<{
+        id: string;
+        label: string;
+        icon?: React__default.ReactNode;
+        shortcut?: string;
+        onAction: () => void;
+    }>;
+}
+declare const SpotlightDropdown: React__default.ForwardRefExoticComponent<SpotlightDropdownProps & React__default.RefAttributes<DropdownRef>>;
+
+/**
+ * PinterestDropdown - Visual Discovery Style Suggestions
+ *
+ * Features:
+ * - Visually-driven masonry/grid product display
+ * - Large hero images
+ * - Category chips/pills for filtering
+ * - Smooth hover effects with quick preview
+ * - Color palette extraction ready
+ */
+
+interface PinterestDropdownProps extends BaseDropdownProps {
+    /** Show save/pin button on products */
+    showSaveButton?: boolean;
+    /** Save button handler */
+    onSaveProduct?: (product: any) => void;
+    /** Active category ID */
+    activeCategory?: string;
+    /** Show price overlay on hover */
+    showPriceOverlay?: boolean;
+    /** Grid columns */
+    gridColumns?: number;
+    /** Card aspect ratio */
+    cardAspectRatio?: 'square' | 'portrait' | 'landscape';
+}
+declare const PinterestDropdown: React__default.ForwardRefExoticComponent<PinterestDropdownProps & React__default.RefAttributes<DropdownRef>>;
+
+/**
+ * GoogleDropdown - Google-style Clean Search Suggestions
+ *
+ * Features:
+ * - Ultra-clean, minimal design
+ * - Instant suggestions with smooth animations
+ * - Trending searches when empty
+ * - "I'm Feeling Lucky" style quick actions
+ * - Voice search integration ready
+ */
+
+interface GoogleDropdownProps extends BaseDropdownProps {
+    /** Show "I'm Feeling Lucky" button */
+    showFeelingLucky?: boolean;
+    /** Feeling lucky button text */
+    feelingLuckyText?: string;
+    /** Show remove button on recent searches */
+    showRemoveRecent?: boolean;
+    /** Show voice search button */
+    showVoiceSearch?: boolean;
+    /** Voice search handler */
+    onVoiceSearch?: () => void;
+    /** Feeling lucky handler */
+    onFeelingLucky?: (query: string) => void;
+    /** Show trending indicator */
+    showTrendingIndicator?: boolean;
+}
+declare const GoogleDropdown: React__default.ForwardRefExoticComponent<GoogleDropdownProps & React__default.RefAttributes<DropdownRef>>;
+
+/**
+ * AmazonDropdown - Amazon-style Search Suggestions
+ *
+ * Features:
+ * - Department/category scoping in search
+ * - Suggestions with category context
+ * - Product grid with images
+ * - "in Department" suffix for scoped searches
+ * - Clean, functional design
+ */
+
+interface AmazonDropdownProps extends BaseDropdownProps {
+    /** Show department scoping in suggestions */
+    showDepartments?: boolean;
+    /** Current department filter */
+    currentDepartment?: string;
+    /** Available departments */
+    departments?: Array<{
+        id: string;
+        label: string;
+    }>;
+    /** Show Prime badge */
+    showPrime?: boolean;
+    /** Prime icon URL */
+    primeIconUrl?: string;
+}
+declare const AmazonDropdown: React__default.ForwardRefExoticComponent<AmazonDropdownProps & React__default.RefAttributes<DropdownRef>>;
+
+/**
+ * SuggestionSearchBar - Unified Search Component with Premium Dropdowns
+ *
+ * A self-contained search component that:
+ * - Fetches suggestions from the API automatically
+ * - Parses responses internally (no user-side parsing needed)
+ * - Renders any of the 7 premium dropdown variants
+ * - Handles analytics tracking
+ * - Supports recent searches via localStorage
+ * - Fully responsive and mobile-ready
+ *
+ * Usage:
+ * ```tsx
+ * <SuggestionSearchBar
+ *   client={seekoraClient}
+ *   variant="amazon"
+ *   onSearch={(query) => router.push(`/search?q=${query}`)}
+ * />
+ * ```
+ */
+
+interface SuggestionSearchBarProps {
+    /** Seekora client instance - REQUIRED */
+    client: SeekoraClient;
+    /** Dropdown variant to use */
+    variant?: SuggestionDropdownVariant$1;
+    /** Auto-select mobile variant on small screens */
+    autoMobileVariant?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Initial/default query */
+    defaultQuery?: string;
+    /** Controlled query value */
+    value?: string;
+    /** Min characters before fetching */
+    minQueryLength?: number;
+    /** Max suggestions to fetch */
+    maxSuggestions?: number;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Include dropdown recommendations (products, tabs, trending) */
+    includeDropdownRecommendations?: boolean;
+    /** When false, omit product hits list from dropdown (default true) */
+    includeDropdownProductList?: boolean;
+    /** When false, omit filtered_tabs from dropdown (default true) */
+    includeFilteredTabs?: boolean;
+    /** Include categories per suggestion */
+    includeCategories?: boolean;
+    /** Filtered tabs configuration */
+    filteredTabs?: Array<{
+        id?: string;
+        label: string;
+        filter: string;
+    }>;
+    /** Analytics tags */
+    analyticsTags?: string[];
+    /** Enable recent searches */
+    enableRecentSearches?: boolean;
+    /** Max recent searches to store */
+    maxRecentSearches?: number;
+    /** Show products in dropdown */
+    showProducts?: boolean;
+    /** Show trending when empty */
+    showTrendingOnEmpty?: boolean;
+    /** Enable analytics tracking */
+    enableAnalytics?: boolean;
+    /** Analytics configuration */
+    analyticsConfig?: AnalyticsConfig;
+    /** Map suggestion fields to your data */
+    suggestionFields?: SuggestionFieldMapping;
+    /** Map product fields to your data */
+    productFields?: ProductFieldMapping;
+    /** Theme configuration */
+    theme?: DropdownThemeConfig;
+    /** Called when search is submitted */
+    onSearch?: (query: string) => void;
+    /** Called when query changes */
+    onQueryChange?: (query: string) => void;
+    /** Called when a suggestion is selected */
+    onSuggestionSelect?: (suggestion: any, index: number) => void;
+    /** Called when a product is clicked */
+    onProductClick?: (product: any, index: number) => void;
+    /** Called when a category/tab is clicked */
+    onCategoryClick?: (category: any, index: number) => void;
+    /** Called when a tab is changed */
+    onTabChange?: (tabId: string) => void;
+    /** Container class name */
+    className?: string;
+    /** Container style */
+    style?: React__default.CSSProperties;
+    /** Input class name */
+    inputClassName?: string;
+    /** Dropdown width */
+    dropdownWidth?: string | number;
+    /** Dropdown max height */
+    dropdownMaxHeight?: string | number;
+    /** Z-index for dropdown */
+    zIndex?: number;
+    /** Enable caching for suggestions (reduces API calls) */
+    enableCache?: boolean;
+    /** Cache TTL in milliseconds (default: 30000 = 30 seconds) */
+    cacheTtlMs?: number;
+    /** Maximum cache entries (default: 100) */
+    cacheMaxSize?: number;
+}
+interface SuggestionSearchBarRef {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+    getQuery: () => string;
+    setQuery: (query: string) => void;
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    refresh: () => void;
+    /** Clear the suggestions cache */
+    clearCache: () => void;
+    /** Get cache statistics */
+    getCacheStats: () => {
+        size: number;
+        maxSize: number;
+    } | null;
+}
+declare const SuggestionSearchBar: React__default.ForwardRefExoticComponent<SuggestionSearchBarProps & React__default.RefAttributes<SuggestionSearchBarRef>>;
+
+/**
+ * Utility functions for Query Suggestions components
+ */
+
+/**
+ * Extract suggestion fields from raw data
+ */
+declare const extractSuggestion: (item: any, mapping?: SuggestionFieldMapping) => {
+    query: any;
+    count: any;
+    id: any;
+    categories: any;
+    highlighted: any;
+    _raw: any;
+};
+/**
+ * Extract product fields from raw data
+ */
+declare const extractProduct: (item: any, mapping?: ProductFieldMapping) => {
+    id: any;
+    title: any;
+    image: any;
+    price: any;
+    comparePrice: any;
+    url: any;
+    brand: any;
+    category: any;
+    rating: any;
+    reviewCount: any;
+    discount: any;
+    inStock: any;
+    currency: any;
+    images: any;
+    originalPrice: any;
+    available: any;
+    options: any;
+    variants: any;
+    tags: any;
+    _raw: any;
+};
+/**
+ * Extract category fields from raw data
+ */
+declare const extractCategory: (item: any, mapping?: CategoryFieldMapping) => {
+    id: any;
+    label: any;
+    count: any;
+    icon: any;
+    image: any;
+    _raw: any;
+};
+/**
+ * Extract brand fields from raw data
+ */
+declare const extractBrand: (item: any, mapping?: BrandFieldMapping) => {
+    id: any;
+    name: any;
+    logo: any;
+    count: any;
+    _raw: any;
+};
+/**
+ * Format price with currency
+ */
+declare const formatPrice: (value: number | string | undefined, config?: Pick<ProductDisplayConfig, "currency" | "currencyPosition" | "priceDecimals">) => string;
+/**
+ * Highlight matching text in a string
+ */
+declare const highlightText: (text: string, query: string, options?: {
+    tag?: string;
+    className?: string;
+    style?: CSSProperties;
+}) => string;
+/**
+ * Extract badges from product tags (Shopify convention: "badge:new", "badge:limited")
+ * and auto-generate sale/soldOut badges from product data.
+ */
+declare const extractBadges: (tags?: string[], product?: {
+    price?: number;
+    original_price?: number;
+    compare_at_price?: number;
+    available?: boolean;
+}) => ProductBadge[];
+/**
+ * Compute min/max price from variants. Returns null if all variants have the same price.
+ */
+declare const getPriceRange: (variants?: ProductVariant[]) => PriceRange | null;
+/**
+ * Format a price range like "$54.00 - $72.00"
+ */
+declare const formatPriceRange: (range: PriceRange, config?: Pick<ProductDisplayConfig, "currency" | "currencyPosition" | "priceDecimals">) => string;
+/**
+ * Given current selections, return which values for an option are still available
+ * based on variant availability.
+ */
+declare const getAvailableValuesForOption: (optionName: string, options: ProductOption[], variants: ProductVariant[], selections: Record<string, string>) => {
+    value: string;
+    available: boolean;
+}[];
+/**
+ * Find the exact variant matching all selected options.
+ */
+declare const findVariantBySelections: (options: ProductOption[], variants: ProductVariant[], selections: Record<string, string>) => ProductVariant | null;
+declare const getRecentSearches: (storeId?: string) => string[];
+declare const addRecentSearch: (query: string, storeId?: string) => string[];
+declare const removeRecentSearch: (query: string, storeId?: string) => string[];
+declare const clearRecentSearches: (storeId?: string) => void;
+/**
+ * Simple in-memory cache with TTL support for suggestions
+ * Reduces API calls by caching results for quick repeated queries
+ */
+declare class SuggestionsCache {
+    private cache;
+    private maxSize;
+    private defaultTtl;
+    constructor(options?: {
+        maxSize?: number;
+        defaultTtlMs?: number;
+    });
+    /**
+     * Generate a cache key from query and options
+     */
+    generateKey(query: string, options?: Record<string, any>): string;
+    /**
+     * Get cached data if valid (not expired)
+     */
+    get<T>(key: string): T | null;
+    /**
+     * Store data in cache
+     */
+    set<T>(key: string, data: T, ttlMs?: number): void;
+    /**
+     * Check if key exists and is valid
+     */
+    has(key: string): boolean;
+    /**
+     * Clear all cached entries
+     */
+    clear(): void;
+    /**
+     * Clear expired entries
+     */
+    cleanup(): void;
+    /**
+     * Get cache statistics
+     */
+    getStats(): {
+        size: number;
+        maxSize: number;
+    };
+}
+/**
+ * Get the global suggestions cache instance
+ */
+declare const getSuggestionsCache: (options?: {
+    maxSize?: number;
+    defaultTtlMs?: number;
+}) => SuggestionsCache;
+/**
+ * Create a new cache instance (for isolated caching per component)
+ */
+declare const createSuggestionsCache: (options?: {
+    maxSize?: number;
+    defaultTtlMs?: number;
+}) => SuggestionsCache;
+/**
+ * Clear the global cache
+ */
+declare const clearSuggestionsCache: () => void;
+
+/**
+ * Responsive Utilities and Breakpoints
+ *
+ * Shared responsive design utilities for all dropdown components
+ */
+
+declare const breakpoints: {
+    readonly xs: 0;
+    readonly sm: 480;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+type Breakpoint = keyof typeof breakpoints;
+declare const mediaQueries: {
+    readonly xs: `@media (max-width: ${number}px)`;
+    readonly sm: `@media (min-width: 480px) and (max-width: ${number}px)`;
+    readonly md: `@media (min-width: 768px) and (max-width: ${number}px)`;
+    readonly lg: `@media (min-width: 1024px) and (max-width: ${number}px)`;
+    readonly xl: "@media (min-width: 1280px)";
+    readonly mobile: `@media (max-width: ${number}px)`;
+    readonly tablet: `@media (min-width: 768px) and (max-width: ${number}px)`;
+    readonly desktop: "@media (min-width: 1024px)";
+    readonly touch: "@media (hover: none) and (pointer: coarse)";
+    readonly mouse: "@media (hover: hover) and (pointer: fine)";
+};
+declare const touchTargets: {
+    /** Minimum touch target size per WCAG guidelines */
+    readonly minimum: 44;
+    /** Comfortable touch target size */
+    readonly comfortable: 48;
+    /** Large touch target for primary actions */
+    readonly large: 56;
+};
+interface ResponsiveState {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isTouch: boolean;
+    width: number;
+    height: number;
+    breakpoint: Breakpoint;
+}
+declare const useResponsive: () => ResponsiveState;
+
+/**
+ * Shared Styles Index
+ */
+
+declare const injectGlobalResponsiveStyles: () => void;
+/**
+ * Hook to auto-inject styles on mount
+ */
+declare const useInjectResponsiveStyles: () => void;
+
+declare const SuggestionDropdownVariants: {
+    readonly amazon: React$1.ForwardRefExoticComponent<AmazonDropdownProps & React$1.RefAttributes<DropdownRef>>;
+    readonly google: React$1.ForwardRefExoticComponent<GoogleDropdownProps & React$1.RefAttributes<DropdownRef>>;
+    readonly pinterest: React$1.ForwardRefExoticComponent<PinterestDropdownProps & React$1.RefAttributes<DropdownRef>>;
+    readonly spotlight: React$1.ForwardRefExoticComponent<SpotlightDropdownProps & React$1.RefAttributes<DropdownRef>>;
+    readonly shopify: React$1.ForwardRefExoticComponent<ShopifyDropdownProps & React$1.RefAttributes<DropdownRef>>;
+    readonly 'mobile-sheet': React$1.ForwardRefExoticComponent<MobileSheetDropdownProps & React$1.RefAttributes<DropdownRef>>;
+    readonly minimal: React$1.ForwardRefExoticComponent<MinimalDropdownProps & React$1.RefAttributes<DropdownRef>>;
+};
+type SuggestionDropdownVariant = keyof typeof SuggestionDropdownVariants;
+
+/**
+ * Seekora DocSearch Types
+ */
+
+interface DocSearchHit {
+    objectID: string;
+    url: string;
+    anchor?: string;
+    title: string;
+    content: string;
+    section_level: number;
+    hierarchy: {
+        lvl0?: string;
+        lvl1?: string;
+        lvl2?: string;
+        lvl3?: string;
+        lvl4?: string;
+        lvl5?: string;
+    };
+    _highlightResult?: {
+        title?: {
+            value: string;
+            matchLevel: string;
+        };
+        content?: {
+            value: string;
+            matchLevel: string;
+        };
+        hierarchy?: {
+            lvl0?: {
+                value: string;
+                matchLevel: string;
+            };
+            lvl1?: {
+                value: string;
+                matchLevel: string;
+            };
+            lvl2?: {
+                value: string;
+                matchLevel: string;
+            };
+            lvl3?: {
+                value: string;
+                matchLevel: string;
+            };
+        };
+    };
+    _source?: string;
+}
+interface DocSearchSuggestion {
+    url: string;
+    title: string;
+    content?: string;
+    description?: string;
+    category?: string;
+    hierarchy?: {
+        lvl0?: string;
+        lvl1?: string;
+        lvl2?: string;
+        lvl3?: string;
+        lvl4?: string;
+        lvl5?: string;
+    };
+    highlight?: {
+        title?: string;
+        content?: string;
+    };
+    _source?: string;
+    route?: string;
+    parentTitle?: string;
+    type?: string;
+    anchor?: string;
+}
+interface SearchSource {
+    id: string;
+    name: string;
+    endpoint: string;
+    apiKey?: string;
+    storeId?: string;
+    storeSecret?: string;
+    maxResults?: number;
+    minQueryLength?: number;
+    transformResults?: (data: any) => DocSearchSuggestion[];
+    openInNewTab?: boolean;
+    icon?: string;
+}
+interface DocSearchResponse {
+    hits: DocSearchHit[];
+    query: string;
+    total?: number;
+    page?: number;
+    nbPages?: number;
+}
+interface DocSearchSuggestionsResponse {
+    suggestions: DocSearchSuggestion[];
+    query: string;
+}
+interface DocSearchProps {
+    storeId?: string;
+    storeSecret?: string;
+    seekoraApiEndpoint?: string;
+    apiEndpoint?: string;
+    apiKey?: string;
+    sources?: SearchSource[];
+    indexName?: string;
+    placeholder?: string;
+    maxResults?: number;
+    debounceMs?: number;
+    onSelect?: (hit: DocSearchHit | DocSearchSuggestion) => void;
+    onClose?: () => void;
+    translations?: DocSearchTranslations;
+    renderButton?: boolean;
+    buttonComponent?: React__default.ComponentType<DocSearchButtonProps>;
+    initialOpen?: boolean;
+    disableShortcut?: boolean;
+    shortcutKey?: string;
+    /** Post-process results per source (e.g. filter by permission, resolve :storeId). */
+    processGroupedResults?: (sourceId: string, items: DocSearchSuggestion[]) => DocSearchSuggestion[];
+    /** Additional CSS class applied to the modal overlay and container — use to scope CSS variable overrides. */
+    className?: string;
+}
+interface DocSearchButtonProps {
+    onClick: () => void;
+    placeholder?: string;
+    /** Additional CSS class for the button element. */
+    className?: string;
+}
+interface DocSearchTranslations {
+    buttonText?: string;
+    buttonAriaLabel?: string;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    errorText?: string;
+    footerText?: string;
+    closeText?: string;
+    searchByText?: string;
+}
+interface DocSearchState {
+    query: string;
+    results: DocSearchHit[];
+    suggestions: DocSearchSuggestion[];
+    isLoading: boolean;
+    error: string | null;
+    selectedIndex: number;
+    mode: "suggestions" | "results";
+}
+type DocSearchAction = {
+    type: "SET_QUERY";
+    payload: string;
+} | {
+    type: "SET_RESULTS";
+    payload: DocSearchHit[];
+} | {
+    type: "SET_SUGGESTIONS";
+    payload: DocSearchSuggestion[];
+} | {
+    type: "SET_LOADING";
+    payload: boolean;
+} | {
+    type: "SET_ERROR";
+    payload: string | null;
+} | {
+    type: "SET_SELECTED_INDEX";
+    payload: number;
+} | {
+    type: "SELECT_NEXT";
+} | {
+    type: "SELECT_PREV";
+} | {
+    type: "SET_MODE";
+    payload: "suggestions" | "results";
+} | {
+    type: "RESET";
+};
+
+declare function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiKey, sources, placeholder, maxResults, debounceMs, onSelect, onClose, translations, renderButton, buttonComponent: ButtonComponent, initialOpen, disableShortcut, shortcutKey, processGroupedResults, className, }: DocSearchProps): React__default.JSX.Element;
+
+declare function DocSearchButton({ onClick, placeholder, className, }: DocSearchButtonProps): React__default.JSX.Element;
+
+interface UseDocSearchOptions {
+    apiEndpoint?: string;
+    apiKey?: string;
+    sources?: SearchSource[];
+    maxResults?: number;
+    debounceMs?: number;
+    processGroupedResults?: (sourceId: string, items: DocSearchSuggestion[]) => DocSearchSuggestion[];
+}
+declare function useDocSearch(options: UseDocSearchOptions): {
+    sources: SearchSource[];
+    setQuery: (query: string) => void;
+    search: (q: string) => Promise<void>;
+    fetchSuggestions: (query: string) => Promise<void>;
+    selectNext: () => void;
+    selectPrev: () => void;
+    setSelectedIndex: (index: number) => void;
+    reset: () => void;
+    getSelectedItem: () => DocSearchHit | DocSearchSuggestion | null;
+    groupedSuggestions: {
+        source: SearchSource;
+        items: DocSearchSuggestion[];
+    }[];
+    query: string;
+    results: DocSearchHit[];
+    suggestions: DocSearchSuggestion[];
+    isLoading: boolean;
+    error: string | null;
+    selectedIndex: number;
+    mode: "suggestions" | "results";
+};
+
+interface UseSeekoraSearchOptions$1 {
+    storeId: string;
+    storeSecret?: string;
+    apiEndpoint?: string;
+    maxResults?: number;
+    debounceMs?: number;
+    analyticsTags?: string[];
+    groupField?: string;
+    groupSize?: number;
+}
+interface UseSeekoraSearchResult {
+    query: string;
+    suggestions: DocSearchSuggestion[];
+    isLoading: boolean;
+    error: string | null;
+    selectedIndex: number;
+    setQuery: (query: string) => void;
+    selectNext: () => void;
+    selectPrev: () => void;
+    setSelectedIndex: (index: number) => void;
+    reset: () => void;
+    getSelectedItem: () => DocSearchSuggestion | null;
+    trackDocClick: (hit: DocSearchSuggestion, position: number) => void | Promise<void>;
+}
+declare function useSeekoraSearch$1(options: UseSeekoraSearchOptions$1): UseSeekoraSearchResult;
+
+interface UseKeyboardOptions {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onSelectNext: () => void;
+    onSelectPrev: () => void;
+    onEnter: () => void;
+    disableShortcut?: boolean;
+    shortcutKey?: string;
+}
+declare function useKeyboard(options: UseKeyboardOptions): {
+    handleModalKeyDown: (event: KeyboardEvent | React__default.KeyboardEvent) => void;
+};
+declare function getShortcutText(key?: string): string;
+
+/**
+ * useSeekoraSearch Hook
+ *
+ * Hook for performing searches with the Seekora SDK
+ */
+
+interface UseSeekoraSearchOptions {
+    client: SeekoraClient;
+    autoTrack?: boolean;
+}
+interface UseSeekoraSearchReturn {
+    search: (options: SearchOptions) => Promise<SearchResponse | null>;
+    results: SearchResponse | null;
+    loading: boolean;
+    error: Error | null;
+    context: SearchContext | null;
+    clearResults: () => void;
+}
+declare const useSeekoraSearch: ({ client, autoTrack, }: UseSeekoraSearchOptions) => UseSeekoraSearchReturn;
+
+/**
+ * Common types for Seekora UI SDK
+ */
+
+interface SuggestionItem {
+    query: string;
+    count?: number;
+    metadata?: Record<string, any>;
+}
+
+/**
+ * useQuerySuggestions Hook
+ *
+ * Hook for fetching query suggestions with debouncing
+ */
+
+interface UseQuerySuggestionsOptions {
+    client: SeekoraClient;
+    query: string;
+    enabled?: boolean;
+    debounceMs?: number;
+    maxSuggestions?: number;
+}
+interface UseQuerySuggestionsReturn {
+    suggestions: SuggestionItem[];
+    loading: boolean;
+    error: Error | null;
+}
+declare const useQuerySuggestions: ({ client, query, enabled, debounceMs, maxSuggestions, }: UseQuerySuggestionsOptions) => UseQuerySuggestionsReturn;
+
+/**
+ * Suggestions Analytics Hook
+ *
+ * Provides analytics tracking for query suggestions components using
+ * Analytics V3 event structure and schema/fields (event_name, event_ts,
+ * correlation_id/search_id via context, and V3 top-level fields such as
+ * original_query, position, section, clicked_item_id, click_type, tab_id,
+ * suggestions_count, etc.). All events are sent via client.trackEvent(payload, context)
+ * so the SDK can attach correlation_id, search_id, event_ts, orgcode, xstoreid.
+ */
+
+interface UseSuggestionsAnalyticsOptions {
+    /** Seekora client instance */
+    client: SeekoraClient;
+    /** Enable analytics tracking */
+    enabled?: boolean;
+    /** Analytics tags to include with all events */
+    analyticsTags?: string[];
+    /** Debounce impression events (ms) */
+    impressionDebounce?: number;
+    /** Track suggestion impressions automatically */
+    trackImpressions?: boolean;
+    /** Track clicks automatically */
+    trackClicks?: boolean;
+    /** Optional search context (correlationId, searchId) to attach to events when available */
+    context?: SearchContext | Partial<SearchContext>;
+}
+interface SuggestionClickEventData {
+    /** The clicked suggestion */
+    suggestion: SuggestionItem$3;
+    /** Position in the list (0-indexed) */
+    position: number;
+    /** Section where the suggestion appeared */
+    section?: 'suggestions' | 'trending' | 'recent' | 'related';
+    /** Original query that triggered suggestions */
+    query?: string;
+    /** Total suggestions shown */
+    totalSuggestions?: number;
+}
+interface ProductClickEventData {
+    /** The clicked product */
+    product: ProductItem;
+    /** Position in the list (0-indexed) */
+    position: number;
+    /** Section where the product appeared */
+    section?: 'products' | 'trending' | 'recommendations' | 'filtered_tab';
+    /** Tab ID if from filtered tab */
+    tabId?: string;
+    /** Original query */
+    query?: string;
+}
+interface SuggestionImpressionEventData {
+    /** Suggestions that were shown */
+    suggestions: SuggestionItem$3[];
+    /** Products that were shown */
+    products?: ProductItem[];
+    /** Categories that were shown */
+    categories?: SuggestionCategory[];
+    /** Brands that were shown */
+    brands?: PopularBrand[];
+    /** Original query */
+    query: string;
+    /** Timestamp when impressions occurred */
+    timestamp: number;
+}
+interface UseSuggestionsAnalyticsReturn {
+    /** Track a suggestion click */
+    trackSuggestionClick: (data: SuggestionClickEventData) => void;
+    /** Track a product click from suggestions dropdown */
+    trackProductClick: (data: ProductClickEventData) => void;
+    /** Track a category click */
+    trackCategoryClick: (category: SuggestionCategory, query?: string) => void;
+    /** Track a brand click */
+    trackBrandClick: (brand: PopularBrand, query?: string) => void;
+    /** Track a tab selection */
+    trackTabSelect: (tab: FilteredTab, query?: string) => void;
+    /** Track recent search click */
+    trackRecentSearchClick: (search: RecentSearch) => void;
+    /** Track trending search click */
+    trackTrendingClick: (trending: TrendingSearch, position: number) => void;
+    /** Track suggestions impression */
+    trackImpression: (data: SuggestionImpressionEventData) => void;
+    /** Track search submission from suggestion */
+    trackSearchSubmit: (query: string, fromSuggestion: boolean, suggestion?: SuggestionItem$3) => void;
+    /** Track dropdown open */
+    trackDropdownOpen: (query: string) => void;
+    /** Track dropdown close */
+    trackDropdownClose: (query: string, selectedSuggestion?: string) => void;
+}
+declare function useSuggestionsAnalytics(options: UseSuggestionsAnalyticsOptions): UseSuggestionsAnalyticsReturn;
+
+/**
+ * useAnalytics Hook
+ *
+ * Hook for tracking analytics events with the Seekora SDK.
+ * Supports Analytics V3 payload fields (event_ts, anonymous_id, orgcode, xstoreid);
+ * the SDK sends both legacy and v3 fields for backend compatibility.
+ */
+
+interface UseAnalyticsOptions {
+    client: SeekoraClient;
+    enabled?: boolean;
+}
+/** Payload for trackEvent/trackBatch: supports legacy and Analytics V3 field names */
+type AnalyticsEventPayload = Partial<DataTypesEventPayload> & Partial<ExtendedEventPayload>;
+interface UseAnalyticsReturn {
+    trackEvent: (eventType: string, payload: AnalyticsEventPayload, context?: SearchContext | Partial<SearchContext>) => Promise<void>;
+    trackClick: (resultId: string, result: any, context?: SearchContext | Partial<SearchContext>, position?: number) => Promise<void>;
+    trackConversion: (resultId: string, result: any, value?: number, currency?: string, context?: SearchContext | Partial<SearchContext>) => Promise<void>;
+    trackBatch: (events: (AnalyticsEventPayload & {
+        event_name?: string;
+    })[], context?: SearchContext) => Promise<void>;
+}
+declare const useAnalytics: ({ client, enabled, }: UseAnalyticsOptions) => UseAnalyticsReturn;
+
+/**
+ * useSearchState Hook
+ *
+ * React hook for accessing and managing search state via SearchStateManager
+ * Provides reactive state and methods to update search parameters
+ */
+
+interface UseSearchStateReturn {
+    query: string;
+    refinements: Array<{
+        field: string;
+        value: string;
+    }>;
+    currentPage: number;
+    itemsPerPage: number;
+    sortBy?: string;
+    results: SearchState['results'];
+    loading: boolean;
+    error: Error | null;
+    setQuery: (query: string, triggerSearch?: boolean) => void;
+    addRefinement: (field: string, value: string, triggerSearch?: boolean) => void;
+    removeRefinement: (field: string, value: string, triggerSearch?: boolean) => void;
+    clearRefinements: (triggerSearch?: boolean) => void;
+    setPage: (page: number, triggerSearch?: boolean) => void;
+    setSortBy: (sortBy: string, triggerSearch?: boolean) => void;
+    search: (additionalOptions?: Parameters<SearchStateManager['search']>[0]) => Promise<SearchResponse | null>;
+    clear: () => void;
+}
+/**
+ * Hook to access and manage search state
+ * Automatically subscribes to state changes and re-renders when state updates
+ */
+declare const useSearchState: () => UseSearchStateReturn;
+
+/**
+ * useSmartSuggestions Hook
+ *
+ * AI-enhanced query suggestions with intent understanding
+ * Provides context-aware suggestions based on user behavior and query patterns
+ */
+interface SmartSuggestion {
+    text: string;
+    type: 'query' | 'correction' | 'expansion' | 'related' | 'trending';
+    confidence: number;
+    metadata?: {
+        intent?: string;
+        category?: string;
+        correctedFrom?: string;
+        expandedTo?: string[];
+    };
+}
+interface SmartSuggestionsOptions {
+    /** Minimum query length */
+    minQueryLength?: number;
+    /** Maximum suggestions to return */
+    maxSuggestions?: number;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Enable spell correction */
+    enableSpellCorrection?: boolean;
+    /** Enable query expansion */
+    enableQueryExpansion?: boolean;
+    /** Enable intent detection */
+    enableIntentDetection?: boolean;
+    /** Include trending queries when query is empty */
+    includeTrending?: boolean;
+    /** User context for personalization */
+    userContext?: {
+        recentSearches?: string[];
+        preferences?: Record<string, any>;
+    };
+}
+interface UseSmartSuggestionsReturn {
+    suggestions: SmartSuggestion[];
+    loading: boolean;
+    error: Error | null;
+    /** Detected intent from the query */
+    detectedIntent: string | null;
+    /** Suggested corrections if query has typos */
+    corrections: string[];
+    /** Expanded query terms */
+    expansions: string[];
+    /** Process a query for smart suggestions */
+    getSuggestions: (query: string) => Promise<SmartSuggestion[]>;
+    /** Clear current suggestions */
+    clear: () => void;
+}
+declare function useSmartSuggestions(query: string, options?: SmartSuggestionsOptions): UseSmartSuggestionsReturn;
+
+/**
+ * useNaturalLanguageFilters Hook
+ *
+ * Convert natural language queries to structured filters
+ * Examples:
+ * - "red shirts under $50" → color: red, category: shirts, price: <= 50
+ * - "size large blue jeans" → size: L, color: blue, category: jeans
+ */
+interface ParsedFilter {
+    field: string;
+    value: string;
+    operator: '=' | '>' | '<' | '>=' | '<=' | 'contains';
+    confidence: number;
+    matchedText: string;
+}
+interface NaturalLanguageResult {
+    /** Cleaned query with filter terms removed */
+    cleanedQuery: string;
+    /** Extracted filters */
+    filters: ParsedFilter[];
+    /** Original query */
+    originalQuery: string;
+    /** Whether any filters were detected */
+    hasFilters: boolean;
+}
+interface NaturalLanguageFiltersOptions {
+    /** Custom field mappings */
+    fieldMappings?: Record<string, string>;
+    /** Custom value mappings */
+    valueMappings?: Record<string, Record<string, string>>;
+    /** Whether to auto-apply filters to search state */
+    autoApply?: boolean;
+    /** Currency symbol for price parsing */
+    currencySymbol?: string;
+}
+declare function useNaturalLanguageFilters(options?: NaturalLanguageFiltersOptions): {
+    /** Parse a natural language query */
+    parse: (query: string) => NaturalLanguageResult;
+    /** Apply parsed filters to search state */
+    applyFilters: (filters: ParsedFilter[]) => void;
+    /** Parse and apply in one step */
+    parseAndApply: (query: string) => NaturalLanguageResult;
+};
+/**
+ * Utility to format parsed filters for display
+ */
+declare function formatParsedFilters(filters: ParsedFilter[]): string;
+
+/**
+ * useVariantSelection – manages variant selection state
+ *
+ * Single source of truth for variant interactions on product pages.
+ * Cards display variants passively; product pages use this hook.
+ */
+
+interface UseVariantSelectionOptions {
+    options?: ProductOption[];
+    variants?: ProductVariant[];
+    initialSelections?: Record<string, string>;
+    onVariantChange?: (variant: ProductVariant | null, selections: Record<string, string>) => void;
+}
+interface UseVariantSelectionReturn {
+    selections: Record<string, string>;
+    setSelection: (optionName: string, value: string) => void;
+    resetSelections: () => void;
+    selectedVariant: ProductVariant | null;
+    availableValues: Record<string, {
+        value: string;
+        available: boolean;
+    }[]>;
+    isComplete: boolean;
+    effectivePrice: number | null;
+    effectiveComparePrice: number | null;
+}
+declare function useVariantSelection({ options, variants, initialSelections, onVariantChange, }?: UseVariantSelectionOptions): UseVariantSelectionReturn;
+
+/**
+ * useProductAnalytics – analytics event binding hook for custom components
+ *
+ * Returns event handler props ready to spread onto any element, plus imperative
+ * tracking methods. Builds on existing useAnalytics infrastructure.
+ */
+
+interface UseProductAnalyticsOptions {
+    client: SeekoraClient;
+    product: ProductItem;
+    position?: number;
+    section?: string;
+    tabId?: string;
+    query?: string;
+    context?: SearchContext | Partial<SearchContext>;
+    enabled?: boolean;
+}
+interface UseProductAnalyticsReturn {
+    /** Spread onto any clickable element to track product click */
+    clickProps: {
+        onClick: (e?: React.MouseEvent) => void;
+        'data-seekora-product-id': string;
+        'data-seekora-position': number;
+    };
+    /** Spread onto any element to track variant selection */
+    variantSelectProps: (optionName: string, value: string) => {
+        onClick: (e?: React.MouseEvent) => void;
+        'data-seekora-variant-option': string;
+        'data-seekora-variant-value': string;
+    };
+    /** Spread onto any element to track add-to-cart */
+    addToCartProps: (variant?: ProductVariant) => {
+        onClick: (e?: React.MouseEvent) => void;
+        'data-seekora-action': 'add-to-cart';
+    };
+    /** Spread onto any element to track impression (uses IntersectionObserver) */
+    impressionRef: React.RefCallback<HTMLElement>;
+    /** Imperative: track product click */
+    trackClick: () => void;
+    /** Imperative: track variant select */
+    trackVariantSelect: (optionName: string, value: string) => void;
+    /** Imperative: track add to cart */
+    trackAddToCart: (variant?: ProductVariant) => void;
+    /** Imperative: track custom event with product context */
+    trackCustomEvent: (eventName: string, metadata?: Record<string, any>) => void;
+}
+declare function useProductAnalytics({ client, product, position, section, tabId, query, context, enabled, }: UseProductAnalyticsOptions): UseProductAnalyticsReturn;
+
+/**
+ * useFilters Hook
+ *
+ * React hook for fetching filter values, searching facet values,
+ * and retrieving filter schema via the dedicated Filters API.
+ */
+
+interface UseFiltersOptions extends FilterOptions {
+    /** Whether to automatically refetch filters when query or refinements change (default: true) */
+    autoFetch?: boolean;
+}
+interface UseFiltersReturn {
+    /** Filter fields with values and counts */
+    filters: FilterField[];
+    /** Filter schema metadata (fetched once on mount) */
+    schema: FiltersSchemaResponse | null;
+    /** Whether filters are currently loading */
+    loading: boolean;
+    /** Error from the last fetch, if any */
+    error: Error | null;
+    /** Search within a facet's values (for typeahead/autocomplete) */
+    searchFacetValues: (facetName: string, query: string) => Promise<FacetValuesSearchResponse>;
+    /** Manually refetch filters */
+    refetch: () => Promise<void>;
+}
+declare const useFilters: (options?: UseFiltersOptions) => UseFiltersReturn;
+
+/**
+ * Default Theme
+ */
+
+declare const defaultTheme: Theme;
+
+/**
+ * Dark Theme
+ */
+
+declare const darkTheme: Theme;
+
+/**
+ * Minimal Theme
+ */
+
+declare const minimalTheme: Theme;
+
+/**
+ * Query Suggestions Theme System
+ *
+ * Provides comprehensive theming for query suggestions components including:
+ * - CSS variables for easy customization
+ * - Pre-built theme presets (light, dark, minimal, branded)
+ * - Component-specific style generators
+ * - Responsive utilities
+ */
+
+interface SuggestionsThemeVariables {
+    '--seekora-bg-surface': string;
+    '--seekora-bg-secondary': string;
+    '--seekora-bg-tertiary': string;
+    '--seekora-bg-hover': string;
+    '--seekora-text-primary': string;
+    '--seekora-text-secondary': string;
+    '--seekora-text-tertiary': string;
+    '--seekora-border-color': string;
+    '--seekora-primary': string;
+    '--seekora-primary-light': string;
+    '--seekora-primary-dark': string;
+    '--seekora-highlight-bg': string;
+    '--seekora-success': string;
+    '--seekora-warning': string;
+    '--seekora-error': string;
+    '--seekora-font-family': string;
+    '--seekora-font-size-xs': string;
+    '--seekora-font-size-sm': string;
+    '--seekora-font-size-base': string;
+    '--seekora-font-size-lg': string;
+    '--seekora-font-weight-normal': string;
+    '--seekora-font-weight-medium': string;
+    '--seekora-font-weight-semibold': string;
+    '--seekora-font-weight-bold': string;
+    '--seekora-line-height-tight': string;
+    '--seekora-line-height-normal': string;
+    '--seekora-line-height-relaxed': string;
+    '--seekora-spacing-xs': string;
+    '--seekora-spacing-sm': string;
+    '--seekora-spacing-md': string;
+    '--seekora-spacing-lg': string;
+    '--seekora-spacing-xl': string;
+    '--seekora-border-radius-sm': string;
+    '--seekora-border-radius': string;
+    '--seekora-border-radius-lg': string;
+    '--seekora-border-radius-xl': string;
+    '--seekora-border-radius-full': string;
+    '--seekora-shadow-sm': string;
+    '--seekora-shadow': string;
+    '--seekora-shadow-md': string;
+    '--seekora-shadow-lg': string;
+    '--seekora-shadow-xl': string;
+    '--seekora-transition-fast': string;
+    '--seekora-transition-normal': string;
+    '--seekora-transition-slow': string;
+    '--seekora-z-dropdown': string;
+    '--seekora-z-modal': string;
+    '--seekora-z-tooltip': string;
+}
+declare const lightThemeVariables: SuggestionsThemeVariables;
+declare const darkThemeVariables: SuggestionsThemeVariables;
+declare const minimalThemeVariables: SuggestionsThemeVariables;
+declare const brandPresets: {
+    blue: {
+        '--seekora-primary': string;
+        '--seekora-primary-light': string;
+        '--seekora-primary-dark': string;
+    };
+    green: {
+        '--seekora-primary': string;
+        '--seekora-primary-light': string;
+        '--seekora-primary-dark': string;
+    };
+    purple: {
+        '--seekora-primary': string;
+        '--seekora-primary-light': string;
+        '--seekora-primary-dark': string;
+    };
+    red: {
+        '--seekora-primary': string;
+        '--seekora-primary-light': string;
+        '--seekora-primary-dark': string;
+    };
+    orange: {
+        '--seekora-primary': string;
+        '--seekora-primary-light': string;
+        '--seekora-primary-dark': string;
+    };
+    teal: {
+        '--seekora-primary': string;
+        '--seekora-primary-light': string;
+        '--seekora-primary-dark': string;
+    };
+    pink: {
+        '--seekora-primary': string;
+        '--seekora-primary-light': string;
+        '--seekora-primary-dark': string;
+    };
+};
+/**
+ * Create a complete theme object from variables
+ */
+declare function createSuggestionsTheme(baseTheme?: 'light' | 'dark' | 'minimal', overrides?: Partial<SuggestionsThemeVariables>, brandColor?: keyof typeof brandPresets): SuggestionsThemeVariables;
+/**
+ * Generate complete CSS stylesheet for suggestions components
+ */
+declare function generateSuggestionsStylesheet(theme?: SuggestionsThemeVariables): string;
+/**
+ * Inject suggestions styles into the document
+ */
+declare function injectSuggestionsStyles(theme?: SuggestionsThemeVariables, force?: boolean): void;
+/**
+ * Update injected styles with new theme
+ */
+declare function updateSuggestionsStyles(theme: SuggestionsThemeVariables): void;
+
+declare const createTheme: (config: ThemeConfig) => _seekora_ai_ui_sdk_types.Theme;
+
+export { ActionButtons, AmazonDropdown, AnalyticsProvider, BadgeList, Breadcrumb, CategoriesTabs, ClearRefinements, CurrentRefinements, CustomSelect, DocSearch, DocSearchButton, DropdownPanel, FacetDropdown, Facets, FederatedDropdown, FrequentlyBoughtTogether, GoogleDropdown, HierarchicalMenu, Highlight, HitsPerPage, ImageDisplay, ImageZoom, InfiniteHits, ItemCard, ItemGrid, MinimalDropdown, MobileFilters, MobileFiltersButton, MobileSheetDropdown, Pagination, PinterestDropdown, PriceDisplay, ProductCard, ProductGallery, ProductGrid, ProductInfo, ProductRecommendations, QuerySuggestions, QuerySuggestionsDropdown, RangeInput, RangeSlider, RatingDisplay, RecentSearchesList, RecentlyViewed, RelatedProducts, RichQuerySuggestions, SearchBar, SearchBarWithSuggestions, SearchInput, SearchLayout, SearchProvider, SearchResults, SectionError, SectionItemGrid, SectionSearchProvider, ShopifyDropdown, Snippet, SortBy, SpotlightDropdown, Stats, SuggestionDropdownVariants, SuggestionItem$1 as SuggestionItem, SuggestionList, SuggestionSearchBar, SuggestionsCache, SuggestionsDropdownComposition, SuggestionsError, SuggestionsProvider, TrendingItems, TrendingList, VariantSelector, VariantSwatches, addRecentSearch, addToRecentlyViewed, brandPresets, breakpoints, clearRecentSearches, clearSuggestionsCache, createSuggestionsCache, createSuggestionsTheme, createTheme, darkTheme, darkThemeVariables, defaultTheme, extractBadges, extractBrand, extractCategory, extractProduct, extractSuggestion, findVariantBySelections, formatParsedFilters, formatPriceRange, formatPrice as formatSuggestionPrice, generateSuggestionsStylesheet, getAvailableValuesForOption, getPriceRange, getRecentSearches, getShortcutText, getSuggestionsCache, highlightText, injectGlobalResponsiveStyles, injectSuggestionsStyles, lightThemeVariables, mediaQueries, minimalTheme, minimalThemeVariables, parseHighlightMarkup, removeRecentSearch, touchTargets, updateSuggestionsStyles, useAnalytics, useAnalyticsProvider, useDocSearch, useSeekoraSearch$1 as useDocSearchSeekoraSearch, useFilters, useInjectResponsiveStyles, useKeyboard, useNaturalLanguageFilters, useProductAnalytics, useQuerySuggestions, useQuerySuggestionsEnhanced, useResponsive, useSearchContext, useSearchState, useSectionSearchContext, useSeekoraSearch, useSmartSuggestions, useSuggestionsAnalytics, useSuggestionsContext, useVariantSelection, withAnalytics };
+export type { ActionButton, ActionButtonType, ActionButtonsProps, AnalyticsConfig, AnalyticsEventPayload, AnalyticsProviderProps, BadgeListProps, BaseDropdownProps, BrandFieldMapping, BreadcrumbItem, BreadcrumbProps, BreadcrumbTheme, CategoriesTabsProps, CategoryFieldMapping, ClearRefinementsProps, ClearRefinementsTheme, CustomSelectOption, CustomSelectProps, CustomSelectTheme, DocSearchAction, DocSearchButtonProps, DocSearchHit, DocSearchProps, DocSearchResponse, DocSearchState, DocSearchSuggestion, DocSearchSuggestionsResponse, DocSearchTranslations, DropdownClassNames, DropdownEventHandlers, DropdownPanelProps, DropdownRef, DropdownThemeConfig, Facet, FacetDropdownOption, FacetDropdownProps, FacetDropdownTheme, FacetItem, FacetRangeConfig, FacetRangeItem, FacetSize, FacetStats, FacetVariant, FacetsProps, FacetsTheme, FederatedDropdownProps, FederatedDropdownRef, FrequentlyBoughtTogetherProps, GenericItem, HierarchicalMenuItem, HierarchicalMenuProps, HierarchicalMenuTheme, HighlightMarkupOptions, HighlightProps, HighlightTheme, HitsPerPageItem, HitsPerPageProps, HitsPerPageTheme, ImageDisplayProps, ImageDisplayVariant, ImageZoomMode, ImageZoomProps, InfiniteHitsProps, InfiniteHitsTheme, ImageDisplayVariant$1 as ItemCardImageVariant, ItemCardProps, ItemGridProps, MobileFiltersButtonProps, MobileFiltersProps, MobileFiltersTheme, NaturalLanguageFiltersOptions, NaturalLanguageResult, NavigableItem, PaginationProps, PaginationTheme, ParsedFilter, PriceDisplayProps, ProductCardImageVariant, ProductCardProps, ProductClickEventData, ProductDisplayConfig, ProductFieldMapping, ProductGalleryProps, ProductGridProps, ProductInfoProps, ProductRecommendationsProps, QuerySuggestionsDropdownProps, QuerySuggestionsDropdownRef, QuerySuggestionsProps, QuerySuggestionsTheme, RangeSliderProps, RangeSliderTheme, RatingDisplayProps, RatingSize, RatingVariant, RecentSearchesListProps, RecentlyViewedProps, RecommendationItem, RecommendationTheme, RefinementInput, RelatedProductsProps, ResponsiveState, RichQuerySuggestionsProps, RichQuerySuggestionsRef, SearchBarProps, SearchBarSize, SearchBarTheme, SearchBarWithSuggestionsProps, SearchBarWithSuggestionsRef, SearchInputProps, SearchProviderProps, SearchResultsProps, SearchResultsTheme, SearchSource, SectionConfig, SectionErrorProps, SectionItemGridProps, SectionSearchContextValue, SectionSearchProviderProps, SmartSuggestion, SmartSuggestionsOptions, SnippetProps, SnippetTheme, SortByProps, SortBySize, SortByTheme, SortByVariant, SortOption, SuggestionClickEventData, SuggestionDisplayConfig, SuggestionDropdownVariant, SuggestionFieldMapping, SuggestionImpressionEventData, SuggestionItemProps, SuggestionListProps, SuggestionSearchBarProps, SuggestionSearchBarRef, SuggestionsContextValue, SuggestionsDropdownCompositionProps, SuggestionsErrorProps, SuggestionsProviderProps, SuggestionsThemeVariables, TrendingItemsProps, TrendingListProps, UseAnalyticsOptions, UseAnalyticsReturn, UseSeekoraSearchOptions$1 as UseDocSearchSeekoraSearchOptions, UseSeekoraSearchResult as UseDocSearchSeekoraSearchResult, UseFiltersOptions, UseFiltersReturn, UseProductAnalyticsOptions, UseProductAnalyticsReturn, UseQuerySuggestionsEnhancedOptions, UseQuerySuggestionsEnhancedReturn, UseSmartSuggestionsReturn, UseSuggestionsAnalyticsOptions, UseSuggestionsAnalyticsReturn, UseVariantSelectionOptions, UseVariantSelectionReturn, VariantSelectorProps, VariantSwatchesProps, WithAnalyticsConfig, WithAnalyticsInjectedProps };