@seekora-ai/ui-sdk-react 0.2.15 → 0.2.16

package/dist/src/index.esm.js

@@ -580,6 +580,87 @@ class SearchStateManager {
         this.abVariant = abVariant;
         log.verbose('SearchStateManager: A/B test updated', { abTestId, abVariant });
     }
+    // =========================================================================
+    // Filters API
+    // =========================================================================
+    /** Build filter_by string from current refinements */
+    buildFilterString() {
+        if (this.state.refinements.length === 0)
+            return '';
+        const filtersByField = {};
+        this.state.refinements.forEach((refinement) => {
+            if (!filtersByField[refinement.field]) {
+                filtersByField[refinement.field] = [];
+            }
+            filtersByField[refinement.field].push(refinement.value);
+        });
+        const filterParts = [];
+        Object.entries(filtersByField).forEach(([field, values]) => {
+            values.forEach((value) => {
+                filterParts.push(`${field}:${value}`);
+            });
+        });
+        return filterParts.join(' && ');
+    }
+    /** Fetch filter values independently from search */
+    async fetchFilters(options) {
+        log.verbose('SearchStateManager: Fetching filters', { options });
+        try {
+            const filterString = this.buildFilterString();
+            const response = await this.client.getFilters({
+                q: this.state.query || undefined,
+                filter: filterString || undefined,
+                ...options,
+            });
+            log.info('SearchStateManager: Filters fetched', {
+                filterCount: response?.filters?.length,
+            });
+            return response;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            log.error('SearchStateManager: Failed to fetch filters', { error: error.message });
+            throw error;
+        }
+    }
+    /** Search within a facet's values (for autocomplete in facet search boxes) */
+    async searchFacetValues(facetName, query) {
+        log.verbose('SearchStateManager: Searching facet values', { facetName, query });
+        try {
+            const filterString = this.buildFilterString();
+            const response = await this.client.searchFacetValues(facetName, {
+                q: this.state.query || undefined,
+                filter: filterString || undefined,
+                facetQuery: query,
+            });
+            log.info('SearchStateManager: Facet values fetched', {
+                facetName,
+                valueCount: response?.values?.length,
+            });
+            return response;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            log.error('SearchStateManager: Failed to search facet values', { facetName, error: error.message });
+            throw error;
+        }
+    }
+    /** Get filter schema (for UI initialization) */
+    async getFiltersSchema() {
+        log.verbose('SearchStateManager: Getting filters schema');
+        try {
+            const response = await this.client.getFiltersSchema();
+            log.info('SearchStateManager: Filters schema fetched', {
+                fieldCount: response?.fields?.length,
+            });
+            return response;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            log.error('SearchStateManager: Failed to get filters schema', { error: error.message });
+            throw error;
+        }
+    }
     // Clear all state
     clear() {
         this.state = {
@@ -1387,9 +1468,7 @@ const SearchProvider = ({ client, theme: themeConfig, enableAnalytics = true, au
     useEffect(() => {
         if (abTestId !== undefined || abVariant !== undefined) {
             stateManager.setAbTest(abTestId, abVariant);
-            if (typeof client.setAbTest === 'function') {
-                client.setAbTest(abTestId, abVariant);
-            }
+            client.setAbTest(abTestId, abVariant);
         }
     }, [stateManager, client, abTestId, abVariant]);
     const value = useMemo(() => ({
@@ -1606,7 +1685,7 @@ const DefaultSearchIcon = ({ size = 18 }) => (React.createElement("svg", { width
 const DefaultClearIcon = ({ size = 14 }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
     React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
     React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
-const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, showLoadingState = false, renderSuggestion, renderLoading, renderSearchIcon, showClearButton = true, renderClearIcon, showSubmitButton = false, renderSubmitButton, size = 'medium', }) => {
+const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, renderSuggestion, renderSearchIcon, showClearButton = true, renderClearIcon, showSubmitButton = false, renderSubmitButton, size = 'medium', }) => {
     const { client, theme, enableAnalytics, autoTrackSearch } = useSearchContext();
     const { query, setQuery, search: triggerSearch, results, loading: searchLoading, error: searchError } = useSearchState();
     const [isFocused, setIsFocused] = useState(false);
@@ -1736,12 +1815,11 @@ const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounce
         }, 200);
     }, []);
     const defaultRenderSuggestion = (suggestion, index) => (React.createElement("div", { key: index }, suggestion));
-    const defaultRenderLoading = () => (React.createElement("div", { style: { padding: theme.spacing.medium, textAlign: 'center' } }, "Loading suggestions..."));
     const searchBarTheme = customTheme || {};
     const isLoading = suggestionsLoading || searchLoading;
     // Show list when we have suggestions (including previous while loading) or when loading and showLoadingState
     const hasSuggestions = displayedSuggestions.length > 0;
-    const showSuggestionsList = isFocused && showSuggestions && query.length >= minQueryLength && (hasSuggestions || (isLoading && showLoadingState));
+    const showSuggestionsList = isFocused && showSuggestions && query.length >= minQueryLength && hasSuggestions;
     // Get processing time from results
     const res = results;
     const processingTime = res?.processingTimeMS
@@ -1869,7 +1947,6 @@ const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounce
                 zIndex: Z_INDEX$2.dropdown,
                 boxSizing: 'border-box',
             } },
-            isLoading && displayedSuggestions.length === 0 && showLoadingState && (renderLoading ? renderLoading() : defaultRenderLoading()),
             displayedSuggestions.length > 0 && (React.createElement(React.Fragment, null, displayedSuggestions.map((suggestion, index) => {
                 const isSelected = index === selectedIndex;
                 const renderFn = renderSuggestion || defaultRenderSuggestion;
@@ -1912,7 +1989,7 @@ const formatPrice$1 = (value, currency = '₹') => {
     }
     return String(value);
 };
-const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, showLoadingState = false, renderLoading, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, minHeight = '400px', minWidth = '100%', loadingOpacity = 0.7, }) => {
+const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, minHeight = '400px', minWidth = '100%', }) => {
     const { theme, client, enableAnalytics } = useSearchContext();
     const { results: stateResults, loading: stateLoading, error: stateError, currentPage, itemsPerPage: stateItemsPerPage } = useSearchState();
     const searchResultsTheme = customTheme || {};
@@ -2182,11 +2259,6 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
             textAlign: 'center',
             color: theme.colors.text,
         } }, "No results found"));
-    const defaultRenderLoading = () => (React.createElement("div", { className: searchResultsTheme.loadingState, style: {
-            padding: theme.spacing.large,
-            textAlign: 'center',
-            color: theme.colors.text,
-        } }, "Loading results..."));
     const defaultRenderError = (err) => (React.createElement("div", { className: searchResultsTheme.errorState, style: {
             padding: theme.spacing.large,
             textAlign: 'center',
@@ -2295,8 +2367,6 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
     const containerStyle = {
         minHeight: `var(--seekora-results-min-height, ${minHeight})`,
         minWidth: `var(--seekora-results-min-width, ${minWidth})`,
-        transition: 'opacity 200ms ease-in-out',
-        opacity: loading && resultItems.length > 0 ? loadingOpacity : 1,
         ...style,
     };
     // Determine results list style based on view mode
@@ -2320,12 +2390,6 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
         hasError: !!error,
         isLoading: loading,
     });
-    // When loading with no previous results, show loading only if showLoadingState (default: show previous results, no loading screen)
-    if (loading && resultItems.length === 0 && showLoadingState) {
-        log.verbose('SearchResults: Rendering loading state');
-        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: containerStyle }, renderLoading ? renderLoading() : defaultRenderLoading()));
-    }
-    // When loading with previous results, fall through and render them (with opacity transition)
     if (error) {
         log.error('SearchResults: Rendering error state', {
             error: error.message,
@@ -2549,6 +2613,183 @@ const Stats = ({ results: resultsProp, renderStats, className, style, theme: cus
     return null;
 };
 
+/**
+ * Responsive utilities for adaptive layouts across all screen sizes
+ *
+ * Provides hooks and utilities for:
+ * - Responsive breakpoints
+ * - Responsive grid columns
+ * - Responsive spacing
+ * - Responsive font sizes
+ * - Touch target sizing
+ */
+/**
+ * Standard breakpoints (in pixels)
+ */
+const BREAKPOINTS = {
+    sm: 576, // Small devices (landscape phones, ≥ 576px)
+    md: 768, // Medium devices (tablets, ≥ 768px)
+    lg: 992, // Large devices (desktops, ≥ 992px)
+    xl: 1200, // Extra large devices (large desktops, ≥ 1200px)
+    xxl: 1400, // Extra extra large devices (larger desktops, ≥ 1400px)
+};
+/**
+ * Get current breakpoint based on window width
+ */
+function getCurrentBreakpoint(width) {
+    if (width >= BREAKPOINTS.xxl)
+        return 'xxl';
+    if (width >= BREAKPOINTS.xl)
+        return 'xl';
+    if (width >= BREAKPOINTS.lg)
+        return 'lg';
+    if (width >= BREAKPOINTS.md)
+        return 'md';
+    if (width >= BREAKPOINTS.sm)
+        return 'sm';
+    return 'xs';
+}
+/**
+ * Hook to get current breakpoint
+ */
+function useBreakpoint() {
+    const [breakpoint, setBreakpoint] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'lg';
+        return getCurrentBreakpoint(window.innerWidth);
+    });
+    useEffect(() => {
+        const handleResize = () => {
+            setBreakpoint(getCurrentBreakpoint(window.innerWidth));
+        };
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return breakpoint;
+}
+/**
+ * Hook to check if current viewport matches breakpoint
+ */
+function useMediaQuery(query) {
+    const [matches, setMatches] = useState(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.matchMedia(query).matches;
+    });
+    useEffect(() => {
+        const mediaQuery = window.matchMedia(query);
+        const handleChange = () => setMatches(mediaQuery.matches);
+        handleChange();
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [query]);
+    return matches;
+}
+/**
+ * Check if mobile viewport (< 768px)
+ */
+function useIsMobile() {
+    return useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`);
+}
+/**
+ * Get responsive grid columns based on breakpoint
+ */
+function getResponsiveColumns(breakpoint, defaultColumns = 4) {
+    switch (breakpoint) {
+        case 'xs':
+            return Math.min(defaultColumns, 1); // 1 column on extra small
+        case 'sm':
+            return Math.min(defaultColumns, 2); // 2 columns on small
+        case 'md':
+            return Math.min(defaultColumns, 3); // 3 columns on medium
+        case 'lg':
+            return Math.min(defaultColumns, 4); // 4 columns on large
+        case 'xl':
+            return Math.min(defaultColumns, 5); // 5 columns on extra large
+        case 'xxl':
+            return defaultColumns; // Full columns on extra extra large
+        default:
+            return defaultColumns;
+    }
+}
+/**
+ * Hook to get responsive grid columns
+ */
+function useResponsiveColumns(defaultColumns = 4) {
+    const breakpoint = useBreakpoint();
+    return getResponsiveColumns(breakpoint, defaultColumns);
+}
+/**
+ * Minimum touch target size (WCAG AAA)
+ */
+const MIN_TOUCH_TARGET = 44; // 44x44px minimum for touch
+/**
+ * Get touch target size based on device type
+ */
+function getTouchTargetSize(isMobile, baseSize = 32) {
+    return isMobile ? Math.max(MIN_TOUCH_TARGET, baseSize) : baseSize;
+}
+/**
+ * Hook to get responsive touch target size
+ */
+function useTouchTargetSize(baseSize = 32) {
+    const isMobile = useIsMobile();
+    return getTouchTargetSize(isMobile, baseSize);
+}
+/**
+ * Get responsive gap/padding for grids
+ */
+function getResponsiveGap(breakpoint, baseGap = 12) {
+    switch (breakpoint) {
+        case 'xs':
+            return Math.max(4, baseGap * 0.5); // 50% on extra small
+        case 'sm':
+            return Math.max(6, baseGap * 0.75); // 75% on small
+        case 'md':
+        case 'lg':
+            return baseGap; // 100% on medium/large
+        case 'xl':
+        case 'xxl':
+            return baseGap * 1.25; // 125% on extra large
+        default:
+            return baseGap;
+    }
+}
+/**
+ * Hook to get responsive gap
+ */
+function useResponsiveGap(baseGap = 12) {
+    const breakpoint = useBreakpoint();
+    return getResponsiveGap(breakpoint, baseGap);
+}
+/**
+ * Get responsive padding for containers
+ */
+function getResponsivePadding(breakpoint, basePadding = 12) {
+    switch (breakpoint) {
+        case 'xs':
+            return Math.max(8, basePadding * 0.67); // ~67% on extra small
+        case 'sm':
+            return Math.max(10, basePadding * 0.83); // ~83% on small
+        case 'md':
+        case 'lg':
+            return basePadding; // 100% on medium/large
+        case 'xl':
+        case 'xxl':
+            return basePadding * 1.33; // ~133% on extra large
+        default:
+            return basePadding;
+    }
+}
+/**
+ * Hook to get responsive padding
+ */
+function useResponsivePadding(basePadding = 12) {
+    const breakpoint = useBreakpoint();
+    return getResponsivePadding(breakpoint, basePadding);
+}
+
 /**
  * Pagination Component
  *
@@ -2563,16 +2804,29 @@ const Stats = ({ results: resultsProp, renderStats, className, style, theme: cus
  *   --seekora-pagination-border
  *   --seekora-pagination-radius
  */
-/** Size-specific style tokens */
-const SIZE_TOKENS = {
-    small: { paddingKey: 'small', fontSizeKey: 'small', minWidth: '32px' },
-    medium: { paddingKey: 'small', fontSizeKey: 'medium', minWidth: '40px' },
-    large: { paddingKey: 'medium', fontSizeKey: 'large', minWidth: '48px' },
+/** Size-specific style tokens (responsive) */
+const getSizeTokens = (size, isMobile) => {
+    if (isMobile) {
+        // Larger touch targets on mobile
+        return {
+            small: { paddingKey: 'small', fontSizeKey: 'small', minWidth: '40px', minHeight: '40px' },
+            medium: { paddingKey: 'small', fontSizeKey: 'medium', minWidth: '44px', minHeight: '44px' },
+            large: { paddingKey: 'medium', fontSizeKey: 'large', minWidth: '48px', minHeight: '48px' },
+        }[size];
+    }
+    return {
+        small: { paddingKey: 'small', fontSizeKey: 'small', minWidth: '32px', minHeight: '32px' },
+        medium: { paddingKey: 'small', fontSizeKey: 'medium', minWidth: '40px', minHeight: '40px' },
+        large: { paddingKey: 'medium', fontSizeKey: 'large', minWidth: '48px', minHeight: '48px' },
+    }[size];
 };
-const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, variant = 'numbered', loadMoreText = 'Load More', size = 'medium', showPageInfo, previousLabel = 'Previous', nextLabel = 'Next', }) => {
+const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages: maxPagesProp = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, variant = 'numbered', loadMoreText = 'Load More', size = 'medium', showPageInfo, previousLabel = 'Previous', nextLabel = 'Next', }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, currentPage: stateCurrentPage, setPage } = useSearchState();
     const paginationTheme = customTheme || {};
+    const isMobile = useIsMobile();
+    // Responsive maxPages - show fewer pages on mobile
+    const maxPages = isMobile ? Math.min(maxPagesProp, 5) : maxPagesProp;
     // Use results from prop if provided, otherwise from state manager
     const results = resultsProp || stateResults;
     // Use currentPage from prop if provided, otherwise from state manager
@@ -2596,8 +2850,8 @@ const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsP
     const resolvedShowPageInfo = showPageInfo !== undefined
         ? showPageInfo
         : variant === 'simple';
-    // Size tokens
-    const sizeTokens = SIZE_TOKENS[size];
+    // Size tokens (responsive)
+    const sizeTokens = getSizeTokens(size, isMobile);
     // CSS variable aware helpers — allow overrides via custom properties
     const cssVarBg = 'var(--seekora-pagination-bg, ' + theme.colors.background + ')';
     const cssVarColor = 'var(--seekora-pagination-color, ' + theme.colors.text + ')';
@@ -2617,7 +2871,7 @@ const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsP
     };
     const defaultRenderPageButton = (page, isActive, isDisabled) => (React.createElement("button", { type: "button", disabled: isDisabled, onClick: () => handlePageChange(page), "aria-current": isActive ? 'page' : undefined, "aria-label": `Page ${page}`, className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled), style: {
             padding: theme.spacing[sizeTokens.paddingKey],
-            margin: `0 ${theme.spacing.small}`,
+            margin: isMobile ? `0 4px` : `0 ${theme.spacing.small}`,
             border: `1px solid ${cssVarBorder}`,
             borderRadius: cssVarRadius,
             backgroundColor: isActive ? cssVarActiveBg : cssVarBg,
@@ -2626,6 +2880,10 @@ const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsP
             opacity: 1,
             fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
             minWidth: sizeTokens.minWidth,
+            minHeight: sizeTokens.minHeight,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
             ...(isActive && {
                 fontWeight: 'bold',
             }),
@@ -3009,6 +3267,71 @@ const SortBy = ({ options, value: valueProp, defaultValue, onSortChange, renderS
     return null;
 };
 
+/**
+ * useFilters Hook
+ *
+ * React hook for fetching filter values, searching facet values,
+ * and retrieving filter schema via the dedicated Filters API.
+ */
+const useFilters = (options) => {
+    const { stateManager } = useSearchContext();
+    const [filters, setFilters] = useState([]);
+    const [schema, setSchema] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const mountedRef = useRef(true);
+    const autoFetch = options?.autoFetch !== false;
+    // Extract non-autoFetch options to pass to fetchFilters
+    const fetchFilters = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const { autoFetch: _, ...filterOptions } = options || {};
+            const response = await stateManager.fetchFilters(filterOptions);
+            if (mountedRef.current) {
+                setFilters(response?.filters || []);
+                setLoading(false);
+            }
+        }
+        catch (err) {
+            if (mountedRef.current) {
+                setError(err instanceof Error ? err : new Error(String(err)));
+                setLoading(false);
+            }
+        }
+    }, [stateManager, options?.facetBy, options?.maxFacetValues, options?.disjunctiveFacets?.join(',')]);
+    // Refetch when query or refinements change
+    useEffect(() => {
+        if (!autoFetch)
+            return;
+        const unsubscribe = stateManager.subscribe((_state) => {
+            fetchFilters();
+        });
+        return unsubscribe;
+    }, [stateManager, autoFetch, fetchFilters]);
+    // Fetch schema once on mount
+    useEffect(() => {
+        stateManager.getFiltersSchema().then((response) => {
+            if (mountedRef.current) {
+                setSchema(response);
+            }
+        }).catch(() => {
+            // Schema fetch failure is non-critical
+        });
+    }, [stateManager]);
+    // Cleanup
+    useEffect(() => {
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const searchFacetValues = useCallback((facetName, query) => stateManager.searchFacetValues(facetName, query), [stateManager]);
+    const refetch = useCallback(async () => {
+        await fetchFilters();
+    }, [fetchFilters]);
+    return { filters, schema, loading, error, searchFacetValues, refetch };
+};
+
 /**
  * RangeSlider Component
  *
@@ -3325,10 +3648,12 @@ const CSS_VAR_DEFAULTS = {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, variant = 'checkbox', searchable = false, showCounts = true, colorMap, defaultCollapsed = false, size = 'medium', facetRanges, }) => {
+const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, variant = 'checkbox', searchable = false, showCounts = true, colorMap, defaultCollapsed = false, size = 'medium', facetRanges, useFiltersApi = false, disjunctiveFacets, }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, refinements, addRefinement, removeRefinement } = useSearchState();
     const facetsTheme = customTheme || {};
+    // Use dedicated Filters API when useFiltersApi is enabled
+    const { filters: filtersApiData, searchFacetValues } = useFilters(useFiltersApi ? { disjunctiveFacets } : { autoFetch: false });
     // expandedFacets is used for "Show more/less" in checkbox/color-swatch variants
     // AND for collapse/expand in collapsible variant.
     const [expandedFacets, setExpandedFacets] = useState({});
@@ -3336,11 +3661,27 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
     // Use results from prop if provided, otherwise from state manager
     const results = resultsProp || stateResults;
     // -------------------------------------------------------------------
-    // Extract facets from results
+    // Extract facets from results (or Filters API)
     // -------------------------------------------------------------------
     const extractFacets = () => {
         if (facetsProp)
             return facetsProp;
+        // When using Filters API, convert FilterField[] to Facet[]
+        if (useFiltersApi && filtersApiData.length > 0) {
+            log.verbose('Facets: Using Filters API data', { filterCount: filtersApiData.length });
+            return filtersApiData.map((filter) => ({
+                field: filter.field || '',
+                label: filter.field || '',
+                items: (filter.values || []).map((v) => ({
+                    value: v.value || '',
+                    count: v.count || 0,
+                    selected: refinements.some(r => r.field === filter.field && r.value === v.value),
+                })),
+                stats: filter.stats?.min != null && filter.stats?.max != null
+                    ? { min: filter.stats.min, max: filter.stats.max, avg: filter.stats.avg, sum: filter.stats.sum }
+                    : undefined,
+            }));
+        }
         // Try to get facets from various locations in the response
         // Primary location: data.facets (widget_mode response structure)
         const rawFacets = results?.data?.facets
@@ -4064,8 +4405,8 @@ const Z_INDEX$1 = {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-const FacetDropdown = ({ field, placeholder = 'All Categories', className, theme: customTheme = {}, onChange, value: controlledValue, maxOptions = 10, showCounts = true, options: providedOptions, client: providedClient, applyFilter = true, navigateOnSelect = false, searchPageUrl = '/search', }) => {
-    const { client: contextClient, theme } = useSearchContext();
+const FacetDropdown = ({ field, placeholder = 'All Categories', className, theme: customTheme = {}, onChange, value: controlledValue, maxOptions = 10, showCounts = true, options: providedOptions, client: providedClient, applyFilter = true, navigateOnSelect = false, searchPageUrl = '/search', useFiltersApi = false, }) => {
+    const { client: contextClient, theme, stateManager } = useSearchContext();
     const { addRefinement, removeRefinement, refinements, search } = useSearchState();
     const client = providedClient || contextClient;
     const [open, setOpen] = useState(false);
@@ -4083,30 +4424,52 @@ const FacetDropdown = ({ field, placeholder = 'All Categories', className, theme
         if (providedOptions || !client)
             return;
         try {
-            log.verbose('FacetDropdown: Fetching facet values', { field });
-            // Perform a search with facet_by parameter to get facet counts
-            const response = await client.search('*', {
-                facet_by: field,
-                max_facet_values: 100,
-                per_page: 0, // We only need facets, not results
-            });
-            log.verbose('FacetDropdown: Search response', { response });
-            // Extract facet counts from the response
-            const facetsData = response?.data?.facets || response?.facets;
-            const facets = Array.isArray(facetsData) ? facetsData : [];
-            const targetFacet = facets.find((f) => f.field_name === field || f.field === field);
-            if (targetFacet && targetFacet.counts) {
-                const options = targetFacet.counts.map((count) => ({
-                    value: count.value,
-                    count: count.count,
-                    label: count.value,
-                }));
-                setFacetOptions(options);
-                log.verbose('FacetDropdown: Facet options loaded', { field, count: options.length });
+            log.verbose('FacetDropdown: Fetching facet values', { field, useFiltersApi });
+            if (useFiltersApi) {
+                // Use dedicated Filters API via state manager
+                const response = await stateManager.fetchFilters({
+                    facetBy: field,
+                    maxFacetValues: 100,
+                });
+                const targetFilter = (response?.filters || []).find((f) => f.field === field);
+                if (targetFilter && targetFilter.values) {
+                    const options = targetFilter.values.map((v) => ({
+                        value: v.value || '',
+                        count: v.count || 0,
+                        label: v.value || '',
+                    }));
+                    setFacetOptions(options);
+                    log.verbose('FacetDropdown: Facet options loaded via Filters API', { field, count: options.length });
+                }
+                else {
+                    log.verbose('FacetDropdown: No filter data found', { field });
+                    setFacetOptions([]);
+                }
             }
             else {
-                log.verbose('FacetDropdown: No facet data found', { field, facets });
-                setFacetOptions([]);
+                // Fallback: use search API with per_page=0
+                const response = await client.search('*', {
+                    facet_by: field,
+                    max_facet_values: 100,
+                    per_page: 0,
+                });
+                log.verbose('FacetDropdown: Search response', { response });
+                const facetsData = response?.data?.facets || response?.facets;
+                const facets = Array.isArray(facetsData) ? facetsData : [];
+                const targetFacet = facets.find((f) => f.field_name === field || f.field === field);
+                if (targetFacet && targetFacet.counts) {
+                    const options = targetFacet.counts.map((count) => ({
+                        value: count.value,
+                        count: count.count,
+                        label: count.value,
+                    }));
+                    setFacetOptions(options);
+                    log.verbose('FacetDropdown: Facet options loaded', { field, count: options.length });
+                }
+                else {
+                    log.verbose('FacetDropdown: No facet data found', { field, facets });
+                    setFacetOptions([]);
+                }
             }
         }
         catch (error) {
@@ -4117,7 +4480,7 @@ const FacetDropdown = ({ field, placeholder = 'All Categories', className, theme
             });
             setFacetOptions([]);
         }
-    }, [field, client, providedOptions]);
+    }, [field, client, providedOptions, useFiltersApi]);
     useEffect(() => {
         if (!providedOptions && client) {
             fetchFacetValues();
@@ -4752,15 +5115,9 @@ const ClearRefinements = ({ clearsQuery = false, resetLabel = 'Clear all filters
 const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth = '300px', className, style, theme: customTheme, showSidebarOnMobile = false, }) => {
     const { theme } = useSearchContext();
     const layoutTheme = customTheme || {};
-    const [isMobile, setIsMobile] = useState(false);
-    useEffect(() => {
-        const checkMobile = () => {
-            setIsMobile(window.innerWidth <= 768);
-        };
-        checkMobile();
-        window.addEventListener('resize', checkMobile);
-        return () => window.removeEventListener('resize', checkMobile);
-    }, []);
+    const isMobile = useIsMobile();
+    const responsivePadding = useResponsivePadding(parseInt(theme.spacing.medium) || 16);
+    const responsiveGap = useResponsiveGap(parseInt(theme.spacing.large) || 24);
     return (React.createElement("div", { className: clsx(layoutTheme.container, className), style: {
             display: 'flex',
             flexDirection: 'column',
@@ -4771,7 +5128,7 @@ const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth = '300px
             ...style,
         } },
         header && (React.createElement("header", { className: layoutTheme.header, style: {
-                padding: theme.spacing.medium,
+                padding: responsivePadding,
                 borderBottom: `1px solid ${theme.colors.border}`,
                 backgroundColor: theme.colors.background,
             } }, header)),
@@ -4780,15 +5137,16 @@ const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth = '300px
                 flex: 1,
                 width: '100%',
                 maxWidth: '100%',
-                gap: theme.spacing.large,
-                padding: theme.spacing.medium,
+                flexDirection: isMobile ? 'column' : 'row',
+                gap: responsiveGap,
+                padding: responsivePadding,
                 backgroundColor: theme.colors.background,
                 color: theme.colors.text,
-                overflow: 'hidden',
+                overflow: isMobile ? 'visible' : 'hidden',
             } },
             sidebar && (!isMobile || showSidebarOnMobile) && (React.createElement("aside", { className: layoutTheme.sidebar, style: {
-                    width: sidebarWidth,
-                    minWidth: sidebarWidth,
+                    width: isMobile ? '100%' : sidebarWidth,
+                    minWidth: isMobile ? '100%' : sidebarWidth,
                     flexShrink: 0,
                 } }, sidebar)),
             React.createElement("main", { className: layoutTheme.main, style: {
@@ -4801,7 +5159,7 @@ const SearchLayout = ({ sidebar, children, header, footer, sidebarWidth = '300px
                     overflow: 'auto',
                 } }, children)),
         footer && (React.createElement("footer", { className: layoutTheme.footer, style: {
-                padding: theme.spacing.medium,
+                padding: responsivePadding,
                 borderTop: `1px solid ${theme.colors.border}`,
                 backgroundColor: theme.colors.background,
             } }, footer))));
@@ -5082,7 +5440,7 @@ const HitsPerPage = ({ items, onHitsPerPageChange, renderSelect, className, styl
  * Displays search results with infinite scroll or "Show More" button
  * Accumulates results as user loads more pages
  */
-const InfiniteHits = ({ renderHit, renderEmpty, showInitialLoading = false, renderLoading, renderShowMore, showMoreButton = true, useInfiniteScroll = false, scrollThreshold = 0.1, fieldMapping, showMoreLabel = 'Show more', loadingLabel = 'Loading...', onHitClick, className, style, theme: customTheme, syncWithState = true, }) => {
+const InfiniteHits = ({ renderHit, renderEmpty, renderShowMore, showMoreButton = true, useInfiniteScroll = false, scrollThreshold = 0.1, fieldMapping, showMoreLabel = 'Show more', onHitClick, className, style, theme: customTheme, syncWithState = true, }) => {
     const { theme, stateManager } = useSearchContext();
     const { results, loading, currentPage, setPage } = useSearchState();
     const infiniteHitsTheme = customTheme || {};
@@ -5214,12 +5572,6 @@ const InfiniteHits = ({ renderHit, renderEmpty, showInitialLoading = false, rend
             textAlign: 'center',
             color: theme.colors.textSecondary,
         } }, "No results found"));
-    // Default loading state
-    const defaultRenderLoading = () => (React.createElement("div", { className: infiniteHitsTheme.loading, style: {
-            padding: theme.spacing.medium,
-            textAlign: 'center',
-            color: theme.colors.textSecondary,
-        } }, loadingLabel));
     // Default "Show More" button
     const defaultRenderShowMore = () => (React.createElement("button", { type: "button", onClick: handleShowMore, disabled: isLastPage || isLoadingMore, className: clsx(infiniteHitsTheme.loadMore, (isLastPage || isLoadingMore) && infiniteHitsTheme.loadMoreDisabled), style: {
             display: 'block',
@@ -5236,11 +5588,7 @@ const InfiniteHits = ({ renderHit, renderEmpty, showInitialLoading = false, rend
                 : theme.borderRadius.medium,
             cursor: isLastPage || isLoadingMore ? 'not-allowed' : 'pointer',
             transition: theme.transitions?.fast || '150ms ease-in-out',
-        } }, isLoadingMore ? loadingLabel : isLastPage ? 'No more results' : showMoreLabel));
-    // Initial loading state (only when showInitialLoading: default no loading screen)
-    if (loading && accumulatedHits.length === 0 && showInitialLoading) {
-        return (React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style }, renderLoading ? renderLoading() : defaultRenderLoading()));
-    }
+        } }, isLastPage ? 'No more results' : showMoreLabel));
     if (loading && accumulatedHits.length === 0) {
         return React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style });
     }
@@ -5253,7 +5601,6 @@ const InfiniteHits = ({ renderHit, renderEmpty, showInitialLoading = false, rend
         showMoreButton && !useInfiniteScroll && !isLastPage && (renderShowMore
             ? renderShowMore({ isLoading: isLoadingMore, isLastPage, onClick: handleShowMore })
             : defaultRenderShowMore()),
-        isLoadingMore && (renderLoading ? renderLoading() : defaultRenderLoading()),
         useInfiniteScroll && !isLastPage && (React.createElement("div", { ref: sentinelRef, className: infiniteHitsTheme.sentinel, style: { height: '1px', visibility: 'hidden' }, "aria-hidden": "true" }))));
 };
 
@@ -6045,16 +6392,11 @@ const MobileFiltersButton = ({ onClick, text = 'Filters', showCount = true, clas
  * - FrequentlyBoughtTogether: Bundle recommendations
  * - RecentlyViewed: User's recently viewed items
  */
-const RelatedProducts = ({ productId, items: itemsProp, loading: loadingProp = false, showLoadingState = false, title = 'Related Products', maxItems = 6, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
+const RelatedProducts = ({ productId, items: itemsProp, loading: loadingProp = false, title = 'Related Products', maxItems = 6, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
     const { theme } = useSearchContext();
-    const recommendationTheme = customTheme || {};
     // If items are provided, use them directly
     const items = itemsProp?.slice(0, maxItems) || [];
     const loading = loadingProp;
-    if (loading && items.length === 0 && showLoadingState) {
-        return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
-            React.createElement("div", { className: recommendationTheme.loading, style: getLoadingStyle(theme) }, "Loading related products...")));
-    }
     if (loading && items.length === 0)
         return null;
     if (items.length === 0) {
@@ -6062,15 +6404,10 @@ const RelatedProducts = ({ productId, items: itemsProp, loading: loadingProp = f
     }
     return (React.createElement(RecommendationSection, { title: title, items: items, renderItem: renderItem, onItemClick: onItemClick, className: className, style: style, theme: customTheme, layout: layout, currencySymbol: currencySymbol }));
 };
-const TrendingItems = ({ items: itemsProp, loading: loadingProp = false, showLoadingState = false, title = 'Trending Now', maxItems = 8, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
+const TrendingItems = ({ items: itemsProp, loading: loadingProp = false, title = 'Trending Now', maxItems = 8, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', }) => {
     const { theme } = useSearchContext();
-    const recommendationTheme = customTheme || {};
     const items = itemsProp?.slice(0, maxItems) || [];
     const loading = loadingProp;
-    if (loading && items.length === 0 && showLoadingState) {
-        return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
-            React.createElement("div", { className: recommendationTheme.loading, style: getLoadingStyle(theme) }, "Loading trending items...")));
-    }
     if (loading && items.length === 0)
         return null;
     if (items.length === 0) {
@@ -6078,7 +6415,7 @@ const TrendingItems = ({ items: itemsProp, loading: loadingProp = false, showLoa
     }
     return (React.createElement(RecommendationSection, { title: title, items: items, renderItem: renderItem, onItemClick: onItemClick, className: className, style: style, theme: customTheme, layout: layout, currencySymbol: currencySymbol }));
 };
-const FrequentlyBoughtTogether = ({ productId, items: itemsProp, loading: loadingProp = false, showLoadingState = false, title = 'Frequently Bought Together', maxItems = 4, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', showAddAllButton = true, onAddAll, }) => {
+const FrequentlyBoughtTogether = ({ productId, items: itemsProp, loading: loadingProp = false, title = 'Frequently Bought Together', maxItems = 4, renderItem, onItemClick, className, style, theme: customTheme, layout = 'horizontal', currencySymbol = '$', showAddAllButton = true, onAddAll, }) => {
     const { theme } = useSearchContext();
     const recommendationTheme = customTheme || {};
     const items = itemsProp?.slice(0, maxItems) || [];
@@ -6091,10 +6428,6 @@ const FrequentlyBoughtTogether = ({ productId, items: itemsProp, loading: loadin
             return sum + price;
         }, 0);
     }, [items]);
-    if (loading && items.length === 0 && showLoadingState) {
-        return (React.createElement("div", { className: clsx(recommendationTheme.root, className), style: style },
-            React.createElement("div", { className: recommendationTheme.loading, style: getLoadingStyle(theme) }, "Loading recommendations...")));
-    }
     if (loading && items.length === 0)
         return null;
     if (items.length === 0) {
@@ -6301,21 +6634,13 @@ const DefaultRecommendationItem = ({ item, theme: recommendationTheme, currencyS
                 currencySymbol,
                 typeof price === 'number' ? price.toFixed(2) : price)))));
 };
-// Helper function
-function getLoadingStyle(theme) {
-    return {
-        padding: theme.spacing.large,
-        textAlign: 'center',
-        color: theme.colors.textSecondary,
-    };
-}
 
 /**
  * QuerySuggestions Component
  *
  * Standalone component for displaying query suggestions
  */
-const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, minQueryLength = 2, onSuggestionClick, renderSuggestion, showLoadingState = false, renderLoading, renderEmpty, showTitle = false, title = 'Suggestions', className, style, theme: customTheme, }) => {
+const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, minQueryLength = 2, onSuggestionClick, renderSuggestion, renderEmpty, showTitle = false, title = 'Suggestions', className, style, theme: customTheme, }) => {
     const { client, theme } = useSearchContext();
     const [selectedIndex, setSelectedIndex] = useState(-1);
     const { suggestions, loading, error } = useQuerySuggestions({
@@ -6333,11 +6658,6 @@ const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, m
             "(",
             suggestion.count,
             ")"))));
-    const defaultRenderLoading = () => (React.createElement("div", { style: {
-            padding: theme.spacing.medium,
-            textAlign: 'center',
-            color: theme.colors.text,
-        } }, "Loading suggestions..."));
     const defaultRenderEmpty = () => (React.createElement("div", { style: {
             padding: theme.spacing.medium,
             textAlign: 'center',
@@ -6352,17 +6672,6 @@ const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, m
     if (query.length < minQueryLength) {
         return null;
     }
-    // When loading with no previous results, show loading only if showLoadingState (default: show previous results, no loading screen)
-    if (loading && displayedSuggestions.length === 0 && showLoadingState) {
-        return (React.createElement("div", { className: clsx(suggestionsTheme.container, className), style: style },
-            showTitle && (React.createElement("div", { className: suggestionsTheme.title, style: {
-                    fontSize: theme.typography.fontSize.large,
-                    fontWeight: 'bold',
-                    marginBottom: theme.spacing.medium,
-                    color: theme.colors.text,
-                } }, title)),
-            renderLoading ? renderLoading() : defaultRenderLoading()));
-    }
     if (error || (!loading && displayedSuggestions.length === 0)) {
         return (React.createElement("div", { className: clsx(suggestionsTheme.container, className), style: style },
             showTitle && (React.createElement("div", { className: suggestionsTheme.title, style: {
@@ -6904,15 +7213,6 @@ const defaultStyles$1 = {
     removeButtonVisible: {
         opacity: 1,
     },
-    loadingState: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '24px 16px',
-        color: 'var(--seekora-text-secondary, inherit)',
-        fontSize: '14px',
-        gap: '8px',
-    },
     emptyState: {
         display: 'flex',
         flexDirection: 'column',
@@ -6966,14 +7266,11 @@ const ClockIcon$6 = ({ className, style }) => (React.createElement("svg", { clas
     React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" })));
 const CloseIcon$1 = ({ className, style }) => (React.createElement("svg", { className: className, style: style, viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16" },
     React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" })));
-const LoadingSpinner = ({ style }) => (React.createElement("svg", { style: { animation: 'spin 1s linear infinite', ...style }, viewBox: "0 0 24 24", width: "20", height: "20" },
-    React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", fill: "none", opacity: "0.25" }),
-    React.createElement("path", { fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })));
 // ============================================================================
 // Component
 // ============================================================================
 const QuerySuggestionsDropdown = forwardRef(function QuerySuggestionsDropdown(props, ref) {
-    const { query, isOpen = true, maxSuggestions = 8, minQueryLength = 1, debounceMs = 200, showRecentSearches = true, maxRecentSearches = 5, showCounts = true, showLoading = false, showEmptyState = true, highlight = { enabled: true, preTag: '<mark>', postTag: '</mark>' }, keyboardNav = { enabled: true }, animation = { enabled: true, duration: 150, entrance: 'fade' }, classNames = {}, style, renderSuggestion, renderRecentSearch, renderLoading, renderEmpty, footer, position = 'absolute', width = '100%', zIndex = 1000, closeOnClickOutside = true, closeOnEscape = true, ariaLabel = 'Search suggestions', onSuggestionSelect, onRecentSearchClick, onRecentSearchRemove, onOpen, onClose, onNavigate, } = props;
+    const { query, isOpen = true, maxSuggestions = 8, minQueryLength = 1, debounceMs = 200, showRecentSearches = true, maxRecentSearches = 5, showCounts = true, showEmptyState = true, highlight = { enabled: true, preTag: '<mark>', postTag: '</mark>' }, keyboardNav = { enabled: true }, animation = { enabled: true, duration: 150, entrance: 'fade' }, classNames = {}, style, renderSuggestion, renderRecentSearch, renderEmpty, footer, position = 'absolute', width = '100%', zIndex = 1000, closeOnClickOutside = true, closeOnEscape = true, ariaLabel = 'Search suggestions', onSuggestionSelect, onRecentSearchClick, onRecentSearchRemove, onOpen, onClose, onNavigate, } = props;
     const { client, theme } = useSearchContext();
     const containerRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -7155,9 +7452,6 @@ const QuerySuggestionsDropdown = forwardRef(function QuerySuggestionsDropdown(pr
             ...animationStyle,
             ...style,
         } },
-        loading && showLoading && (React.createElement("div", { className: classNames.loadingState, style: defaultStyles$1.loadingState }, renderLoading ? renderLoading() : (React.createElement(React.Fragment, null,
-            React.createElement(LoadingSpinner, null),
-            React.createElement("span", null, "Searching..."))))),
         showRecent && (React.createElement("div", { className: clsx('seekora-suggestions-section', classNames.section, classNames.recentSearches) },
             React.createElement("div", { className: classNames.sectionTitle, style: defaultStyles$1.sectionTitle }, "Recent Searches"),
             recentSearches.slice(0, maxRecentSearches).map((search, index) => {
@@ -7404,14 +7698,6 @@ const styles$2 = {
         fontSize: '12px',
         color: 'var(--seekora-text-secondary, inherit)',
     },
-    loadingOverlay: {
-        position: 'absolute',
-        inset: 0,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    },
     emptyState: {
         padding: '32px 16px',
         textAlign: 'center',
@@ -7439,7 +7725,7 @@ const CloseIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill
 // Component
 // ============================================================================
 const RichQuerySuggestions = forwardRef(function RichQuerySuggestions(props, ref) {
-    const { query, isOpen = true, sections = DEFAULT_SECTIONS, maxSuggestionsPerSection = 8, minQueryLength = 0, debounceMs = 200, includeDropdownRecommendations = true, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, maxCategories = 3, showCounts = true, showCategoryCounts = true, showSectionHeaders = true, classNames = {}, style, renderSuggestion, renderCategory, renderTrendingItem, renderRecentItem, header, footer, width = '100%', maxHeight = '480px', zIndex = 1000, ariaLabel = 'Search suggestions', analyticsTags, onSuggestionSelect, onCategoryClick, onRecentSearchClick, onRecentSearchRemove, onViewAllClick, onOpen, onClose, showLoadingOverlay = false, renderLoading, } = props;
+    const { query, isOpen = true, sections = DEFAULT_SECTIONS, maxSuggestionsPerSection = 8, minQueryLength = 0, debounceMs = 200, includeDropdownRecommendations = true, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, maxCategories = 3, showCounts = true, showCategoryCounts = true, showSectionHeaders = true, classNames = {}, style, renderSuggestion, renderCategory, renderTrendingItem, renderRecentItem, header, footer, width = '100%', maxHeight = '480px', zIndex = 1000, ariaLabel = 'Search suggestions', analyticsTags, onSuggestionSelect, onCategoryClick, onRecentSearchClick, onRecentSearchRemove, onViewAllClick, onOpen, onClose, } = props;
     const { client } = useSearchContext();
     const containerRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -7658,7 +7944,6 @@ const RichQuerySuggestions = forwardRef(function RichQuerySuggestions(props, ref
         } },
         header && React.createElement("div", { style: styles$2.header }, header),
         React.createElement("div", { style: { ...styles$2.content, maxHeight } },
-            loading && showLoadingOverlay && (React.createElement("div", { style: styles$2.loadingOverlay }, renderLoading ? renderLoading() : React.createElement("span", null, "Loading..."))),
             enabledSections.map((section, index) => {
                 let content = null;
                 switch (section.id) {
@@ -8532,7 +8817,7 @@ const ClearIcon$1 = () => (React.createElement("svg", { viewBox: "0 0 20 20", fi
 // Component
 // ============================================================================
 const SearchBarWithSuggestions = forwardRef(function SearchBarWithSuggestions(props, ref) {
-    const { variant = 'classic', placeholder = 'Search...', initialQuery = '', value, onQueryChange, onSearch, onSuggestionSelect, onProductClick, showSearchButton = false, searchButtonText = 'Search', showClearButton = true, autoFocus = false, minQueryLength = 1, maxSuggestions = 8, maxProducts = 8, debounceMs = 200, showRecentSearches = true, showTrendingOnEmpty = true, includeDropdownRecommendations = false, filteredTabs, enableAnalytics = true, analyticsTags, includeFacets, includeCategories, dropdownWidth, dropdownMaxHeight, classNames = {}, style, inputStyle, ariaLabel = 'Search', } = props;
+    const { variant = 'classic', placeholder = 'Powered by Seekora', initialQuery = '', value, onQueryChange, onSearch, onSuggestionSelect, onProductClick, showSearchButton = false, searchButtonText = 'Search', showClearButton = true, autoFocus = false, minQueryLength = 1, maxSuggestions = 8, maxProducts = 8, debounceMs = 200, showRecentSearches = true, showTrendingOnEmpty = true, includeDropdownRecommendations = false, filteredTabs, enableAnalytics = true, analyticsTags, includeFacets, includeCategories, dropdownWidth, dropdownMaxHeight, classNames = {}, style, inputStyle, ariaLabel = 'Search', } = props;
     const { client } = useSearchContext();
     const inputRef = useRef(null);
     const dropdownRef = useRef(null);
@@ -8987,7 +9272,7 @@ const inputStyles = {
     color: 'var(--seekora-text-primary, inherit)',
     fontFamily: 'inherit',
 };
-function SearchInput({ placeholder = 'Search...', autoFocus = false, showClearButton = true, closeOnBlur = true, leftIcon, className, style, inputClassName, inputStyle, ariaLabel = 'Search', }) {
+function SearchInput({ placeholder = 'Powered by Seekora', autoFocus = false, showClearButton = true, closeOnBlur = true, leftIcon, className, style, inputClassName, inputStyle, ariaLabel = 'Search', }) {
     const { query, setQuery, isOpen, setIsOpen, navigateNext, navigatePrev, selectActive, close, } = useSuggestionsContext();
     const inputRef = useRef(null);
     const handleFocus = useCallback(() => {
@@ -9195,17 +9480,19 @@ const defaultItemStyle = {
     whiteSpace: 'nowrap',
 };
 function SuggestionItem({ suggestion, index, isActive, onSelect, className, style, enableHighlightMarkup = true, highlightMarkupOptions, renderHighlight, }) {
+    const [isHovered, setIsHovered] = React.useState(false);
     const displayText = suggestion.highlightedQuery ?? suggestion.query;
     const content = renderHighlight != null
         ? renderHighlight(displayText)
         : enableHighlightMarkup
             ? parseHighlightMarkup(displayText ?? '', highlightMarkupOptions)
             : (suggestion.query ?? displayText ?? '');
-    return (React.createElement("li", { role: "option", "aria-selected": isActive, id: `seekora-suggestion-${index}`, className: clsx('seekora-suggestions-item', isActive && 'seekora-suggestions-item--active', className), style: {
+    const showHighlight = isActive || isHovered;
+    return (React.createElement("li", { role: "option", "aria-selected": isActive, id: `seekora-suggestion-${index}`, className: clsx('seekora-suggestions-item', isActive && 'seekora-suggestions-item--active', isHovered && 'seekora-suggestions-item--hover', className), style: {
             ...defaultItemStyle,
-            ...(isActive ? { backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)' } : {}),
+            ...(showHighlight ? { backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)' } : {}),
             ...style,
-        }, onMouseDown: (e) => {
+        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
             e.preventDefault();
             onSelect();
         } },
@@ -9224,18 +9511,12 @@ const listStyle = {
     margin: 0,
     padding: '4px 0',
 };
-function SuggestionList({ maxItems = 10, className, style, listClassName, showLoadingState = false, renderLoading, enableHighlightMarkup = true, highlightMarkupOptions, renderItem, }) {
+function SuggestionList({ maxItems = 10, className, style, listClassName, enableHighlightMarkup = true, highlightMarkupOptions, renderItem, }) {
     const { suggestions, activeIndex, loading, selectSuggestion, getAllNavigableItems, } = useSuggestionsContext();
     const items = suggestions.slice(0, maxItems);
     const navigableItems = getAllNavigableItems();
     const suggestionStartIndex = navigableItems.findIndex((n) => n.type === 'suggestion');
     const activeIsInSuggestions = suggestionStartIndex >= 0 && activeIndex >= suggestionStartIndex && activeIndex < suggestionStartIndex + items.length;
-    // When loading with no previous results, show loading only if showLoadingState (default: don't show loading screen)
-    if (loading && items.length === 0 && showLoadingState) {
-        if (renderLoading)
-            return React.createElement(React.Fragment, null, renderLoading());
-        return (React.createElement("div", { className: clsx('seekora-suggestions-loading', className), style: { padding: 16, color: 'var(--seekora-text-secondary, #6b7280)', fontSize: '0.875rem', ...style } }, "Loading..."));
-    }
     // When loading with previous results, show previous results (no loading UI)
     if (items.length === 0)
         return null;
@@ -9365,10 +9646,66 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
         const rect = containerRef.current.getBoundingClientRect();
         const bgPosX = (cursorPos.x / rect.width) * 100;
         const bgPosY = (cursorPos.y / rect.height) * 100;
+        // Calculate available space in all directions
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const gap = 16;
+        const mouseBuffer = 50; // Minimum distance from mouse cursor
+        // Calculate mouse position in viewport
+        const mouseX = rect.left + cursorPos.x;
+        const mouseY = rect.top + cursorPos.y;
+        // Calculate space available in each direction
+        const spaceRight = viewportWidth - rect.right - gap;
+        const spaceLeft = rect.left - gap;
+        // Determine optimal horizontal position
+        let left;
+        let top = rect.top;
+        // Try right side first (default Amazon-style)
+        if (spaceRight >= zoomPanelSize.width) {
+            left = rect.right + gap;
+        }
+        // Try left side
+        else if (spaceLeft >= zoomPanelSize.width) {
+            left = rect.left - zoomPanelSize.width - gap;
+        }
+        // Not enough space on either side - center on the side with more space
+        else if (spaceRight > spaceLeft) {
+            left = rect.right + gap;
+        }
+        else {
+            left = Math.max(gap, rect.left - zoomPanelSize.width - gap);
+        }
+        // Adjust vertical position to keep within viewport
+        // Try to align with image top by default
+        if (rect.top + zoomPanelSize.height > viewportHeight - gap) {
+            // Panel would overflow bottom - adjust upward
+            top = Math.max(gap, viewportHeight - zoomPanelSize.height - gap);
+        }
+        // Ensure panel doesn't overlap with mouse cursor
+        const panelRight = left + zoomPanelSize.width;
+        const panelBottom = top + zoomPanelSize.height;
+        // Check if mouse is inside the panel area
+        if (mouseX >= left - mouseBuffer &&
+            mouseX <= panelRight + mouseBuffer &&
+            mouseY >= top - mouseBuffer &&
+            mouseY <= panelBottom + mouseBuffer) {
+            // Mouse is too close - try to reposition
+            // If on right side and there's space on left, flip to left
+            if (left > rect.right && spaceLeft >= zoomPanelSize.width) {
+                left = rect.left - zoomPanelSize.width - gap;
+            }
+            // If on left side and there's space on right, flip to right
+            else if (left < rect.left && spaceRight >= zoomPanelSize.width) {
+                left = rect.right + gap;
+            }
+        }
+        // Clamp to viewport boundaries
+        left = Math.max(gap, Math.min(left, viewportWidth - zoomPanelSize.width - gap));
+        top = Math.max(gap, Math.min(top, viewportHeight - zoomPanelSize.height - gap));
         return {
-            position: 'fixed', // Changed from absolute to fixed for better positioning
-            top: rect.top,
-            left: rect.right + 16, // 16px gap from the image
+            position: 'fixed',
+            top,
+            left,
             width: zoomPanelSize.width,
             height: zoomPanelSize.height,
             backgroundImage: `url(${src})`,
@@ -9405,7 +9742,6 @@ function ImageZoom({ src, alt = '', mode = 'both', zoomLevel = 2.5, className, s
         if (!containerRef.current || !imageRef.current)
             return {};
         const rect = containerRef.current.getBoundingClientRect();
-        imageRef.current.getBoundingClientRect();
         return {
             position: 'absolute',
             width: rect.width * zoomLevel,
@@ -9628,6 +9964,11 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
     const [hovering, setHovering] = useState(false);
     const safeImages = Array.isArray(images) ? images.filter(Boolean) : [];
     const current = safeImages[index] ?? safeImages[0];
+    // Responsive values
+    const isMobile = useIsMobile();
+    const arrowSize = useTouchTargetSize(32); // 44px on mobile, 32px on desktop
+    const thumbSize = isMobile ? 56 : 48; // Larger thumbnails on mobile
+    const responsiveGap = useResponsiveGap(8);
     if (safeImages.length === 0) {
         return React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-placeholder', className), style: { ...imgBaseStyle, ...style }, "aria-hidden": true });
     }
@@ -9664,22 +10005,24 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
         return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-carousel', className), style: { position: 'relative', ...style } },
             mainImage,
             safeImages.length > 1 && (React.createElement(React.Fragment, null,
-                React.createElement("button", { type: "button", "aria-label": "Previous", className: "seekora-img-carousel-prev", style: arrowStyle(true), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(-1); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg-hover, rgba(255,255,255,1))'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg, rgba(255,255,255,0.9))'; } }, "\u2039"),
-                React.createElement("button", { type: "button", "aria-label": "Next", className: "seekora-img-carousel-next", style: arrowStyle(false), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(1); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg-hover, rgba(255,255,255,1))'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg, rgba(255,255,255,0.9))'; } }, "\u203A"),
+                React.createElement("button", { type: "button", "aria-label": "Previous", className: "seekora-img-carousel-prev", style: arrowStyle(true, arrowSize), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(-1); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg-hover, rgba(255,255,255,1))'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg, rgba(255,255,255,0.9))'; } }, "\u2039"),
+                React.createElement("button", { type: "button", "aria-label": "Next", className: "seekora-img-carousel-next", style: arrowStyle(false, arrowSize), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(1); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg-hover, rgba(255,255,255,1))'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg, rgba(255,255,255,0.9))'; } }, "\u203A"),
                 showDots && (React.createElement("div", { className: "seekora-img-carousel-dots", style: {
                         position: 'absolute',
-                        bottom: 8,
+                        bottom: isMobile ? 12 : 8,
                         left: '50%',
                         transform: 'translateX(-50%)',
                         display: 'flex',
-                        gap: 6,
-                        padding: '6px 12px',
+                        gap: isMobile ? 8 : 6,
+                        padding: isMobile ? '8px 16px' : '6px 12px',
                         backgroundColor: 'var(--seekora-carousel-dots-bg, rgba(0,0,0,0.5))',
                         borderRadius: 12,
                         zIndex: 10,
                     } }, safeImages.map((_, i) => (React.createElement("button", { key: i, type: "button", "aria-label": `Go to image ${i + 1}`, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); setIndex(i); }, style: {
-                        width: 8,
-                        height: 8,
+                        width: isMobile ? 10 : 8,
+                        height: isMobile ? 10 : 8,
+                        minWidth: isMobile ? 44 : 32, // Ensure touch target
+                        minHeight: isMobile ? 44 : 32,
                         borderRadius: '50%',
                         border: 'none',
                         padding: 0,
@@ -9691,26 +10034,28 @@ function ImageDisplay({ images, variant = 'single', alt = '', className, style,
     if (variant === 'thumbStrip' || variant === 'thumbList') {
         const thumbMainStyle = style?.aspectRatio ? { ...imgBaseStyle, aspectRatio: style.aspectRatio } : imgBaseStyle;
         const mainImage = enableZoom ? (React.createElement(ImageZoom, { src: current, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: index, className: "seekora-img-thumb-main", style: thumbMainStyle })) : (React.createElement("img", { src: current, alt: alt, className: "seekora-img-thumb-main", style: thumbMainStyle, loading: "lazy" }));
-        return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-thumbstrip', className), style: { display: 'flex', flexDirection: 'column', gap: 8, ...style } },
+        return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-thumbstrip', className), style: { display: 'flex', flexDirection: 'column', gap: responsiveGap, ...style } },
             mainImage,
-            React.createElement("div", { className: "seekora-img-thumbs", style: { display: 'flex', gap: 4, overflowX: 'auto', paddingBottom: 4 } }, safeImages.map((src, i) => (React.createElement("button", { type: "button", key: i, className: clsx('seekora-img-thumb', i === index && 'seekora-img-thumb--active'), style: { flexShrink: 0, width: 48, height: 48, padding: 0, border: i === index ? '2px solid var(--seekora-primary)' : '1px solid transparent', borderRadius: 4, overflow: 'hidden', cursor: 'pointer', background: 'none' }, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); setIndex(i); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); } },
+            React.createElement("div", { className: "seekora-img-thumbs", style: { display: 'flex', gap: isMobile ? 6 : 4, overflowX: 'auto', paddingBottom: isMobile ? 6 : 4 } }, safeImages.map((src, i) => (React.createElement("button", { type: "button", key: i, className: clsx('seekora-img-thumb', i === index && 'seekora-img-thumb--active'), style: { flexShrink: 0, width: thumbSize, height: thumbSize, minWidth: thumbSize, minHeight: thumbSize, padding: 0, border: i === index ? '2px solid var(--seekora-primary)' : '1px solid transparent', borderRadius: 4, overflow: 'hidden', cursor: 'pointer', background: 'none' }, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); setIndex(i); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); } },
                 React.createElement("img", { src: src, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } })))))));
     }
     return React.createElement("img", { src: current, alt: alt, className: clsx('seekora-img-display', className), style: { ...imgBaseStyle, ...style }, loading: "lazy" });
 }
-function arrowStyle(left) {
+function arrowStyle(left, size = 32) {
     return {
         position: 'absolute',
         top: '50%',
-        [left ? 'left' : 'right']: 8,
+        [left ? 'left' : 'right']: size >= 44 ? 4 : 8, // Less offset on mobile for larger buttons
         transform: 'translateY(-50%)',
-        width: 32,
-        height: 32,
+        width: size,
+        height: size,
+        minWidth: size,
+        minHeight: size,
         borderRadius: '50%',
         border: 'none',
         backgroundColor: 'var(--seekora-carousel-btn-bg, rgba(255, 255, 255, 0.9))',
         color: 'var(--seekora-carousel-btn-text, #111)',
-        fontSize: '1.25rem',
+        fontSize: size >= 44 ? '1.5rem' : '1.25rem', // Larger font on mobile
         fontWeight: 'bold',
         cursor: 'pointer',
         display: 'flex',
@@ -9831,7 +10176,7 @@ const cardStyle$1 = {
     textAlign: 'left',
     fontSize: 'inherit',
     fontFamily: 'inherit',
-    transition: `background-color ${TRANSITIONS$1.fast}`,
+    transition: `background-color ${TRANSITIONS$1.fast}, box-shadow ${TRANSITIONS$1.fast}`,
 };
 const imgStyle$1 = {
     width: '100%',
@@ -9847,28 +10192,51 @@ function ItemCard({ item, position, onSelect, className, style, asLink = true, i
     const title = item.title ?? item.primaryText ?? '';
     const description = item.description ?? item.secondaryText;
     const href = item.url;
+    const isMobile = useIsMobile();
+    const horizontalGap = useResponsiveGap(12);
     const isHorizontal = layout === 'horizontal';
-    const imageBlock = images.length > 0 ? (React.createElement("div", { style: { position: 'relative', overflow: 'hidden', borderRadius: 4, ...(isHorizontal ? { minWidth: 80, flexBasis: '20%', maxWidth: 120, flexShrink: 0 } : {}) } },
+    const [isHovered, setIsHovered] = React.useState(false);
+    // Responsive dimensions for horizontal layout
+    const imageMinWidth = isMobile ? 60 : 80;
+    const imageMaxWidth = isMobile ? 100 : 120;
+    const imageFlex = isMobile ? '20%' : '20%';
+    const imageHeight = isMobile ? 60 : 80;
+    // Responsive font sizes
+    const titleFontSize = isMobile ? '0.9375rem' : '0.875rem';
+    const descriptionFontSize = isMobile ? '0.875rem' : '0.8125rem';
+    const textGap = isMobile ? 6 : 4;
+    const lineClamp = isMobile ? 3 : 2; // More lines on mobile
+    // Hover style
+    const cardHoverStyle = isHovered
+        ? {
+            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, #f9fafb))',
+            boxShadow: 'var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08))',
+        }
+        : {};
+    const imageBlock = images.length > 0 ? (React.createElement("div", { style: { position: 'relative', overflow: 'hidden', borderRadius: 4, ...(isHorizontal ? { minWidth: imageMinWidth, flexBasis: imageFlex, maxWidth: imageMaxWidth, flexShrink: 0 } : {}) } },
         React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: String(title), className: "seekora-item-card-image" }),
-        actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" })))) : (React.createElement("div", { className: "seekora-item-card-placeholder", style: { ...imgStyle$1, ...(isHorizontal ? { minWidth: 80, flexBasis: '20%', maxWidth: 120, height: 80, flexShrink: 0 } : {}) }, "aria-hidden": true }));
-    const textBlock = (React.createElement("div", { style: isHorizontal ? { display: 'flex', flexDirection: 'column', gap: 4, flex: 1, minWidth: 0 } : undefined },
-        React.createElement("span", { className: "seekora-item-card-title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, String(title)),
-        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: '0.8125rem', color: 'var(--seekora-text-secondary, #6b7280)', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' } }, String(description))) : null,
+        actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" })))) : (React.createElement("div", { className: "seekora-item-card-placeholder", style: { ...imgStyle$1, ...(isHorizontal ? { minWidth: imageMinWidth, flexBasis: imageFlex, maxWidth: imageMaxWidth, height: imageHeight, flexShrink: 0 } : {}) }, "aria-hidden": true }));
+    const textBlock = (React.createElement("div", { style: isHorizontal ? { display: 'flex', flexDirection: 'column', gap: textGap, flex: 1, minWidth: 0 } : undefined },
+        React.createElement("span", { className: "seekora-item-card-title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: isHorizontal ? 2 : 3, WebkitBoxOrient: 'vertical' } }, String(title)),
+        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: descriptionFontSize, color: 'var(--seekora-text-secondary, #6b7280)', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: lineClamp, WebkitBoxOrient: 'vertical', overflow: 'hidden' } }, String(description))) : null,
         actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" }))));
-    const content = isHorizontal ? (React.createElement("div", { style: { display: 'flex', gap: 12, alignItems: 'flex-start' } },
+    const content = isHorizontal ? (React.createElement("div", { style: { display: 'flex', gap: horizontalGap, alignItems: 'flex-start' } },
         imageBlock,
         textBlock)) : (React.createElement(React.Fragment, null,
         imageBlock,
         textBlock));
     const commonProps = {
-        className: clsx('seekora-item-card', isHorizontal && 'seekora-item-card--horizontal', className),
+        className: clsx('seekora-item-card', isHorizontal && 'seekora-item-card--horizontal', isHovered && 'seekora-item-card--hover', className),
         style: {
             ...cardStyle$1,
             ...(isHorizontal ? { flexDirection: 'row' } : {}),
+            ...cardHoverStyle,
             ...style,
         },
         'data-position': position,
         onClick: onSelect,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
         onMouseDown: onSelect ? (e) => { e.preventDefault(); onSelect(); } : undefined,
     };
     if (asLink && href) {
@@ -9886,11 +10254,6 @@ function ItemCard({ item, position, onSelect, className, style, asLink = true, i
  */
 const SPACING$1 = {
     md: 12};
-const defaultGridStyle = {
-    display: 'grid',
-    gap: SPACING$1.md,
-    padding: SPACING$1.md,
-};
 function toGenericItem(item, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl) {
     return {
         id: getItemId(item),
@@ -9902,12 +10265,18 @@ function toGenericItem(item, getItemId, getItemTitle, getItemImage, getItemDescr
     };
 }
 function ItemGrid({ items, onItemClick, getItemId = (i) => i.id, getItemTitle = (i) => i.title, getItemImage = (i) => i.image, getItemDescription = (i) => i.description, getItemUrl = (i) => i.url, renderItem, maxItems = 24, columns = 4, className, style, gridClassName, }) {
+    // Responsive columns and spacing
+    const responsiveColumns = useResponsiveColumns(columns);
+    const responsiveGap = useResponsiveGap(SPACING$1.md);
+    const responsivePadding = useResponsivePadding(SPACING$1.md);
     const slice = items.slice(0, maxItems);
     if (slice.length === 0)
         return null;
     const gridStyle = {
-        ...defaultGridStyle,
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        display: 'grid',
+        gap: responsiveGap,
+        padding: responsivePadding,
+        gridTemplateColumns: `repeat(${responsiveColumns}, minmax(0, 1fr))`,
     };
     return (React.createElement("div", { className: clsx('seekora-item-grid', className), style: style },
         React.createElement("div", { className: clsx('seekora-item-grid-inner', gridClassName), style: gridStyle }, slice.map((item, i) => {
@@ -10706,6 +11075,12 @@ const getAvailability$1 = (optionName, value, options, variants, selectedValues)
 };
 function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, selectedValues, variants, showAvailability = true, onSwatchHover, onSwatchClick, className, style, }) {
     const [expandedOptions, setExpandedOptions] = useState(new Set());
+    const isMobile = useIsMobile();
+    // Responsive sizing
+    const colorSwatchSize = isMobile ? 20 : 14; // Larger on mobile for touch
+    const textSwatchPadding = isMobile ? '4px 10px' : '1px 6px';
+    const textSwatchFontSize = isMobile ? '0.75rem' : '0.6875rem';
+    const gap = isMobile ? 6 : 4;
     if (!options || options.length === 0)
         return null;
     const filtered = visibleOptions
@@ -10726,14 +11101,14 @@ function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, sel
             return next;
         });
     };
-    return (React.createElement("div", { className: clsx('seekora-variant-swatches', className), style: { display: 'flex', flexDirection: 'column', gap: 4, ...style } }, filtered.map((option) => {
+    return (React.createElement("div", { className: clsx('seekora-variant-swatches', className), style: { display: 'flex', flexDirection: 'column', gap, ...style } }, filtered.map((option) => {
         const isColor = isColorOption$1(option.name);
         const isExpanded = expandedOptions.has(option.name);
         const visible = isExpanded ? option.values : option.values.slice(0, maxValues);
         const overflow = option.values.length - maxValues;
         const hasOverflow = overflow > 0;
         const selectedValue = selectedValues?.[option.name];
-        return (React.createElement("div", { key: option.name, className: "seekora-variant-swatch-group", style: { display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' } },
+        return (React.createElement("div", { key: option.name, className: "seekora-variant-swatch-group", style: { display: 'flex', alignItems: 'center', gap, flexWrap: 'wrap' } },
             visible.map((value) => {
                 const color = isColor ? resolveColor$1(value, colorMap) : null;
                 const isSelected = selectedValue === value;
@@ -10742,9 +11117,13 @@ function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, sel
                     : true;
                 if (color) {
                     return (React.createElement("span", { key: value, className: clsx('seekora-variant-swatch', 'seekora-variant-swatch--color', isSelected && 'seekora-variant-swatch--selected', !isAvailable && 'seekora-variant-swatch--unavailable'), title: `${value}${!isAvailable ? ' (Unavailable)' : ''}`, style: {
-                            display: 'inline-block',
-                            width: 14,
-                            height: 14,
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: colorSwatchSize,
+                            height: colorSwatchSize,
+                            minWidth: colorSwatchSize,
+                            minHeight: colorSwatchSize,
                             borderRadius: '50%',
                             backgroundColor: color,
                             border: isSelected
@@ -10776,9 +11155,12 @@ function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, sel
                         } }))));
                 }
                 return (React.createElement("span", { key: value, className: clsx('seekora-variant-swatch', 'seekora-variant-swatch--text', isSelected && 'seekora-variant-swatch--selected', !isAvailable && 'seekora-variant-swatch--unavailable'), style: {
-                        display: 'inline-block',
-                        padding: '1px 6px',
-                        fontSize: '0.6875rem',
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        padding: textSwatchPadding,
+                        minHeight: isMobile ? 32 : 24, // Minimum touch target on mobile
+                        fontSize: textSwatchFontSize,
                         borderRadius: 3,
                         border: isSelected
                             ? '1px solid var(--seekora-primary, #111827)'
@@ -10805,11 +11187,12 @@ function VariantSwatches({ options, visibleOptions, maxValues = 5, colorMap, sel
                     } }, value));
             }),
             hasOverflow && (React.createElement("button", { type: "button", className: "seekora-variant-swatch--overflow", onClick: (e) => toggleExpanded(option.name, e), style: {
-                    fontSize: '0.6875rem',
+                    fontSize: textSwatchFontSize,
                     color: 'var(--seekora-primary, #2563eb)',
                     background: 'none',
                     border: 'none',
-                    padding: 0,
+                    padding: isMobile ? '4px 8px' : 0,
+                    minHeight: isMobile ? 32 : 'auto', // Touch target on mobile
                     cursor: 'pointer',
                     textDecoration: 'underline',
                     fontWeight: 500,
@@ -10844,16 +11227,24 @@ function ImageBlock({ images, title, imageVariant, aspectRatio, enableZoom, zoom
 }
 /** minimal: image, title, price (current default behavior) */
 function MinimalLayout({ images, title, price, product, imageVariant, displayConfig, enableImageZoom, imageZoomMode, imageZoomLevel }) {
+    const isMobile = useIsMobile();
+    const titleFontSize = isMobile ? '0.9375rem' : '0.875rem'; // Slightly larger on mobile
+    const priceFontSize = isMobile ? '0.9375rem' : '0.875rem';
     return (React.createElement(React.Fragment, null,
         React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: displayConfig.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
-        React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, title),
-        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price", style: { fontSize: '0.875rem', color: 'var(--seekora-text-secondary, #6b7280)' } },
+        React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' } }, title),
+        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price", style: { fontSize: priceFontSize, color: 'var(--seekora-text-secondary, #6b7280)' } },
             product.currency ?? '$',
             price.toFixed(2)))));
 }
 /** standard: image, badges, brand, title, price + compare price, color swatches */
 function StandardLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
     const cfg = displayConfig;
+    const isMobile = useIsMobile();
+    const bodyGap = isMobile ? 6 : 4; // More gap on mobile
+    const titleFontSize = isMobile ? '0.9375rem' : '0.875rem';
+    const brandFontSize = isMobile ? '0.8125rem' : '0.75rem';
+    const priceFontSize = isMobile ? '0.9375rem' : '0.875rem';
     // Normalize position: 'overlay-*' positions render over image, everything else renders inline
     const isOverlayPosition = actionButtonsPosition?.startsWith('overlay');
     return (React.createElement(React.Fragment, null,
@@ -10861,11 +11252,11 @@ function StandardLayout({ images, title, price, comparePrice, brand, badges, opt
             React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: cfg.imageAspectRatio, enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 2 })),
             actionButtons && actionButtons.length > 0 && isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
-        React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4 } },
-            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
-            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, title),
+        React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: bodyGap } },
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: brandFontSize, color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase', letterSpacing: '0.02em' } }, brand)),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' } }, title),
             React.createElement("div", { className: "seekora-product-card__price" },
-                React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: '0.875rem' } })),
+                React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: priceFontSize } })),
             cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
             actionButtons && actionButtons.length > 0 && !isOverlayPosition && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
 }
@@ -10910,16 +11301,27 @@ function CompactLayout({ images, title, price, product, imageVariant, displayCon
 /** horizontal: image left + content right (title, brand, price, swatches) */
 function HorizontalLayout({ images, title, price, comparePrice, brand, badges, options, variants, product, imageVariant, displayConfig, onVariantHover, onVariantClick, selectedVariants, actionButtons, actionButtonsPosition, showActionLabels, enableImageZoom, imageZoomMode, imageZoomLevel, }) {
     const cfg = displayConfig;
-    return (React.createElement("div", { style: { display: 'flex', gap: 12, alignItems: 'flex-start' } },
-        React.createElement("div", { style: { position: 'relative', minWidth: 80, flexBasis: '25%', maxWidth: 120, flexShrink: 0 } },
+    const isMobile = useIsMobile();
+    const containerGap = useResponsiveGap(12);
+    const bodyGap = isMobile ? 6 : 4;
+    // Responsive image dimensions
+    const imageMinWidth = isMobile ? 60 : 80;
+    const imageMaxWidth = isMobile ? 100 : 120;
+    const imageFlex = isMobile ? '20%' : '25%';
+    // Responsive font sizes
+    const brandFontSize = isMobile ? '0.6875rem' : '0.75rem';
+    const titleFontSize = isMobile ? '0.875rem' : '0.875rem';
+    const priceFontSize = isMobile ? '0.875rem' : '0.875rem';
+    return (React.createElement("div", { style: { display: 'flex', gap: containerGap, alignItems: 'flex-start' } },
+        React.createElement("div", { style: { position: 'relative', minWidth: imageMinWidth, flexBasis: imageFlex, maxWidth: imageMaxWidth, flexShrink: 0 } },
             React.createElement(ImageBlock, { images: images, title: title, imageVariant: imageVariant, aspectRatio: "1:1", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel }),
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left", maxBadges: 1 })),
             actionButtons && actionButtons.length > 0 && actionButtonsPosition?.startsWith('overlay') && (React.createElement(ActionButtons, { buttons: actionButtons, position: actionButtonsPosition === 'overlay-top-right' ? 'top-right' : 'bottom-center', showLabels: showActionLabels, size: "small" }))),
-        React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: 4, flex: 1, minWidth: 0 } },
-            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase' } }, brand)),
-            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: '0.875rem', fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis' } }, title),
+        React.createElement("div", { className: "seekora-product-card__body", style: { display: 'flex', flexDirection: 'column', gap: bodyGap, flex: 1, minWidth: 0 } },
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: brandFontSize, color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase' } }, brand)),
+            React.createElement("span", { className: "seekora-product-card__title", style: { fontSize: titleFontSize, fontWeight: 500, lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: isMobile ? 3 : 2, WebkitBoxOrient: 'vertical' } }, title),
             React.createElement("div", { className: "seekora-product-card__price" },
-                React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: '0.875rem' } })),
+                React.createElement(PriceDisplay, { price: price ?? undefined, comparePrice: comparePrice ?? undefined, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, showDiscount: cfg.showDiscount, style: { fontSize: priceFontSize } })),
             cfg.showVariants !== false && options.length > 0 && (React.createElement(VariantSwatches, { options: options, visibleOptions: cfg.variantOptionsToShow, maxValues: cfg.maxVariantValues ?? 3, selectedValues: selectedVariants, variants: variants, onSwatchHover: onVariantHover, onSwatchClick: onVariantClick })),
             actionButtons && actionButtons.length > 0 && actionButtonsPosition === 'inline' && (React.createElement(ActionButtons, { buttons: actionButtons, position: "inline", showLabels: showActionLabels, size: "small", layout: "horizontal" })))));
 }
@@ -10945,7 +11347,7 @@ const cardStyle = {
     borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
     backgroundColor: 'transparent',
     textAlign: 'left',
-    transition: `background-color ${TRANSITIONS.fast}`,
+    transition: `background-color ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
 };
 const imgStyle = {
     width: '100%',
@@ -10997,9 +11399,17 @@ function ProductCard({ product, position, section, tabId, onSelect, className, s
     const images = effectiveImages;
     const title = effectiveTitle;
     const price = effectivePrice;
+    // Hover state for card
+    const [isHovered, setIsHovered] = React.useState(false);
+    const cardHoverStyle = isHovered
+        ? {
+            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, #f9fafb))',
+            boxShadow: 'var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08))',
+        }
+        : {};
     // If no displayConfig, render original minimal layout (backwards compat)
     if (!displayConfig) {
-        return (React.createElement("div", { role: "button", tabIndex: 0, className: clsx('seekora-suggestions-product-card', className), style: { ...cardStyle, ...style }, onClick: () => onSelect(), onKeyDown: (e) => {
+        return (React.createElement("div", { role: "button", tabIndex: 0, className: clsx('seekora-suggestions-product-card', isHovered && 'seekora-suggestions-product-card--hover', className), style: { ...cardStyle, ...cardHoverStyle, ...style }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(), onKeyDown: (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     onSelect();
@@ -11060,20 +11470,21 @@ function ProductCard({ product, position, section, tabId, onSelect, className, s
         horizontal: HorizontalLayout,
     };
     const LayoutComponent = layoutMap[layoutStyle] ?? MinimalLayout;
-    const rootClassName = clsx('seekora-product-card', `seekora-product-card--${layoutStyle}`, 'seekora-suggestions-product-card', className);
+    const rootClassName = clsx('seekora-product-card', `seekora-product-card--${layoutStyle}`, 'seekora-suggestions-product-card', isHovered && 'seekora-product-card--hover', className);
     const rootStyle = {
         ...cardStyle,
         ...(layoutStyle === 'horizontal' ? { flexDirection: 'row' } : {}),
+        ...cardHoverStyle,
         ...style,
     };
     if (asLink && product.url) {
-        return (React.createElement("a", { href: product.url, className: rootClassName, style: { ...rootStyle, textDecoration: 'none', color: 'inherit' }, onClick: (e) => {
+        return (React.createElement("a", { href: product.url, className: rootClassName, style: { ...rootStyle, textDecoration: 'none', color: 'inherit' }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: (e) => {
                 e.preventDefault();
                 onSelect();
             }, "data-position": position, "data-section": section, "data-tab-id": tabId },
             React.createElement(LayoutComponent, { ...layoutProps })));
     }
-    return (React.createElement("div", { role: "button", tabIndex: 0, className: rootClassName, style: rootStyle, onClick: () => onSelect(), onKeyDown: (e) => {
+    return (React.createElement("div", { role: "button", tabIndex: 0, className: rootClassName, style: rootStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => onSelect(), onKeyDown: (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
                 onSelect();
@@ -11089,6 +11500,10 @@ function ProductCard({ product, position, section, tabId, onSelect, className, s
  */
 function ProductGrid({ maxItems = 8, source = 'trending', columns = 4, className, style, gridClassName, displayConfig, onVariantHover, }) {
     const { trendingProducts, filteredTabs, activeTabId, selectProduct, getAllNavigableItems, } = useSuggestionsContext();
+    // Responsive columns and spacing
+    const responsiveColumns = useResponsiveColumns(columns);
+    const responsiveGap = useResponsiveGap(12);
+    const responsivePadding = useResponsivePadding(12);
     const products = useMemo(() => {
         if (source === 'trending')
             return trendingProducts;
@@ -11102,9 +11517,9 @@ function ProductGrid({ maxItems = 8, source = 'trending', columns = 4, className
         return null;
     const gridStyle = {
         display: 'grid',
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-        gap: 12,
-        padding: 12,
+        gridTemplateColumns: `repeat(${responsiveColumns}, minmax(0, 1fr))`,
+        gap: responsiveGap,
+        padding: responsivePadding,
     };
     return (React.createElement("div", { className: clsx('seekora-suggestions-product-grid', className), style: style },
         React.createElement("div", { className: clsx('seekora-suggestions-product-grid-inner', gridClassName), style: gridStyle }, items.map((product, i) => {
@@ -11165,6 +11580,17 @@ const itemStyle$1 = {
     color: 'var(--seekora-text-primary, #111827)',
     transition: 'background-color 120ms ease',
 };
+function RecentSearchItem({ search, onSelect }) {
+    const [isHovered, setIsHovered] = React.useState(false);
+    return (React.createElement("li", null,
+        React.createElement("button", { type: "button", className: clsx('seekora-suggestions-recent-item', isHovered && 'seekora-suggestions-recent-item--hover'), style: {
+                ...itemStyle$1,
+                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)' } : {}),
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
+                e.preventDefault();
+                onSelect();
+            } }, search.query)));
+}
 function RecentSearchesList({ title = 'Recent', maxItems = 8, className, style, listClassName, renderItem, }) {
     const { recentSearches, query, selectRecentSearch } = useSuggestionsContext();
     const items = recentSearches.slice(0, maxItems);
@@ -11177,11 +11603,7 @@ function RecentSearchesList({ title = 'Recent', maxItems = 8, className, style,
             if (renderItem) {
                 return React.createElement("li", { key: `${search.query}-${search.timestamp}` }, renderItem(search, i, onSelect));
             }
-            return (React.createElement("li", { key: `${search.query}-${search.timestamp}` },
-                React.createElement("button", { type: "button", className: "seekora-suggestions-recent-item", style: itemStyle$1, onMouseDown: (e) => {
-                        e.preventDefault();
-                        onSelect();
-                    } }, search.query)));
+            return (React.createElement(RecentSearchItem, { key: `${search.query}-${search.timestamp}`, search: search, onSelect: onSelect }));
         }))));
 }
 
@@ -11202,6 +11624,19 @@ const itemStyle = {
     color: 'var(--seekora-text-primary, #111827)',
     transition: 'background-color 120ms ease',
 };
+function TrendingItem({ trending, onSelect }) {
+    const [isHovered, setIsHovered] = React.useState(false);
+    return (React.createElement("li", null,
+        React.createElement("button", { type: "button", className: clsx('seekora-suggestions-trending-item', isHovered && 'seekora-suggestions-trending-item--hover'), style: {
+                ...itemStyle,
+                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)' } : {}),
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
+                e.preventDefault();
+                onSelect();
+            } },
+            trending.query,
+            trending.count != null ? (React.createElement("span", { style: { marginLeft: 8, color: 'var(--seekora-text-secondary, #6b7280)', fontSize: '0.875em' } }, trending.count)) : null)));
+}
 function TrendingList({ title = 'Trending', maxItems = 8, className, style, listClassName, renderItem, }) {
     const { trendingSearches, selectTrendingSearch } = useSuggestionsContext();
     const items = trendingSearches.slice(0, maxItems);
@@ -11214,31 +11649,10 @@ function TrendingList({ title = 'Trending', maxItems = 8, className, style, list
             if (renderItem) {
                 return React.createElement("li", { key: `${trending.query}-${i}` }, renderItem(trending, i, onSelect));
             }
-            return (React.createElement("li", { key: `${trending.query}-${i}` },
-                React.createElement("button", { type: "button", className: "seekora-suggestions-trending-item", style: itemStyle, onMouseDown: (e) => {
-                        e.preventDefault();
-                        onSelect();
-                    } },
-                    trending.query,
-                    trending.count != null ? (React.createElement("span", { style: { marginLeft: 8, color: 'var(--seekora-text-secondary, #6b7280)', fontSize: '0.875em' } }, trending.count)) : null)));
+            return (React.createElement(TrendingItem, { key: `${trending.query}-${i}`, trending: trending, onSelect: onSelect }));
         }))));
 }
 
-/**
- * SuggestionsLoading – loading indicator (primitive)
- */
-function SuggestionsLoading({ className, style, text = 'Loading...' }) {
-    const { loading } = useSuggestionsContext();
-    if (!loading)
-        return null;
-    return (React.createElement("div", { className: clsx('seekora-suggestions-loading', className), style: {
-            padding: 16,
-            color: 'var(--seekora-text-secondary, #6b7280)',
-            fontSize: '0.875rem',
-            ...style,
-        } }, text));
-}
-
 /**
  * SuggestionsError – error message (primitive)
  */
@@ -11716,16 +12130,6 @@ function SectionSearchProvider({ children, query, refinements = [], maxItems = 1
     return React.createElement(SectionSearchContext.Provider, { value: value }, children);
 }
 
-/**
- * SectionLoading – loading state for section (primitive)
- */
-function SectionLoading({ className, style, text = 'Loading...' }) {
-    const { loading } = useSectionSearchContext();
-    if (!loading)
-        return null;
-    return (React.createElement("div", { className: className, style: { padding: 16, color: 'var(--seekora-text-secondary)', fontSize: '0.875rem', ...style } }, text));
-}
-
 /**
  * SectionError – error state for section (primitive)
  */
@@ -11741,10 +12145,8 @@ function SectionError({ className, style, render }) {
 /**
  * SectionItemGrid – generic grid of items from SectionSearchProvider (primitive)
  */
-function SectionItemGrid({ columns = 4, maxItems = 12, className, style, showLoadingState = false, getItemId = (i) => i.id ?? String(i?.objectID ?? ''), getItemTitle = (i) => i.title ?? i?.title ?? '', getItemImage = (i) => i.image ?? i?.image, getItemDescription = (i) => i.description ?? i?.description, getItemUrl = (i) => i.url ?? i?.url, renderItem, }) {
+function SectionItemGrid({ columns = 4, maxItems = 12, className, style, getItemId = (i) => i.id ?? String(i?.objectID ?? ''), getItemTitle = (i) => i.title ?? i?.title ?? '', getItemImage = (i) => i.image ?? i?.image, getItemDescription = (i) => i.description ?? i?.description, getItemUrl = (i) => i.url ?? i?.url, renderItem, }) {
     const { items, loading, error, trackClick } = useSectionSearchContext();
-    if (loading && items.length === 0 && showLoadingState)
-        return React.createElement(SectionLoading, { className: className, style: style });
     if (error)
         return React.createElement(SectionError, { className: className, style: style });
     // When loading with previous items, show them (no loading screen)
@@ -12405,22 +12807,6 @@ const createStyles$7 = (theme = {}, isMobile = false) => ({
         fontWeight: 700,
         color: 'var(--seekora-text-primary, #0f1111)',
     },
-    loading: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '40px',
-        color: 'var(--seekora-text-secondary, #565959)',
-        gap: '10px',
-    },
-    spinner: {
-        width: '20px',
-        height: '20px',
-        border: '2px solid var(--seekora-border-color, #ddd)',
-        borderTopColor: 'var(--seekora-primary, #f90)',
-        borderRadius: '50%',
-        animation: 'seekora-spin 0.8s linear infinite',
-    },
     empty: {
         padding: '40px 20px',
         textAlign: 'center',
@@ -12484,7 +12870,7 @@ const RatingStars = ({ rating, count }) => {
             ")"))));
 };
 const AmazonDropdown = forwardRef(function AmazonDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], recentSearches = [], trendingSearches = [], filteredTabs = [], activeTab = 'all', suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showDepartments = true, currentDepartment, departments = [], showPrime = false, width = '700px', maxHeight = '500px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onRecentClick, onRecentRemove, onRecentClearAll, onViewAll, onClose, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], recentSearches = [], trendingSearches = [], filteredTabs = [], activeTab = 'all', suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showDepartments = true, currentDepartment, departments = [], showPrime = false, width = '700px', maxHeight = '500px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onRecentClick, onRecentRemove, onRecentClearAll, onViewAll, onClose, header, footer, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -12581,9 +12967,7 @@ const AmazonDropdown = forwardRef(function AmazonDropdown(props, ref) {
           }
         `),
         header,
-        (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
-            React.createElement("div", { style: styles.spinner }),
-            React.createElement("span", null, "Searching...")))) : (React.createElement(React.Fragment, null,
+        React.createElement(React.Fragment, null,
             filteredTabs.length > 0 && (React.createElement("div", { style: {
                     display: 'flex',
                     gap: '8px',
@@ -12688,7 +13072,7 @@ const AmazonDropdown = forwardRef(function AmazonDropdown(props, ref) {
                                 currency: '',
                                 priceDecimals: productDisplay.priceDecimals
                             }))),
-                        product.rating && (React.createElement(RatingStars, { rating: parseFloat(String(product.rating)), count: product.reviewCount ? parseInt(String(product.reviewCount)) : undefined }))))))))))),
+                        product.rating && (React.createElement(RatingStars, { rating: parseFloat(String(product.rating)), count: product.reviewCount ? parseInt(String(product.reviewCount)) : undefined })))))))))),
         footer !== undefined ? footer : (React.createElement("div", { style: styles.footer },
             React.createElement("div", { style: styles.keyboard },
                 React.createElement("span", { style: styles.key }, "\u2191"),
@@ -12878,22 +13262,6 @@ const createStyles$6 = (isMobile = false) => ({
         backgroundColor: 'var(--seekora-bg-hover, #f1f3f4)',
         color: 'var(--seekora-text-primary, #202124)',
     },
-    loading: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '24px',
-        color: 'var(--seekora-text-secondary, #5f6368)',
-        gap: '12px',
-    },
-    spinner: {
-        width: '24px',
-        height: '24px',
-        border: '3px solid var(--seekora-border-color, #e8eaed)',
-        borderTopColor: 'var(--seekora-primary, #4285f4)',
-        borderRadius: '50%',
-        animation: 'seekora-spin 0.8s linear infinite',
-    },
     empty: {
         padding: '24px',
         textAlign: 'center',
@@ -12913,7 +13281,7 @@ const TrendingIcon$2 = () => (React.createElement("svg", { width: "20", height:
 const ArrowIcon$1 = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", width: "20", height: "20" },
     React.createElement("path", { d: "M9 5l-4 4 4 4", stroke: "currentColor", strokeWidth: "2", fill: "none", transform: "rotate(-90 12 12)" })));
 const GoogleDropdown = forwardRef(function GoogleDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], recentSearches = [], trendingSearches = [], suggestionFields = { query: 'query' }, theme = {}, showFeelingLucky = true, feelingLuckyText = "I'm Feeling Lucky", showRemoveRecent = true, showVoiceSearch = false, showTrendingIndicator = true, width = '100%', maxHeight = '400px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onRecentClick, onRecentRemove, onVoiceSearch, onFeelingLucky, onClose, onSearchSubmit, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], recentSearches = [], trendingSearches = [], suggestionFields = { query: 'query' }, theme = {}, showFeelingLucky = true, feelingLuckyText = "I'm Feeling Lucky", showRemoveRecent = true, showVoiceSearch = false, showTrendingIndicator = true, width = '100%', maxHeight = '400px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onRecentClick, onRecentRemove, onVoiceSearch, onFeelingLucky, onClose, onSearchSubmit, header, footer, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -13028,8 +13396,7 @@ const GoogleDropdown = forwardRef(function GoogleDropdown(props, ref) {
           }
         `),
         header,
-        (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
-            React.createElement("div", { style: styles.spinner })))) : (React.createElement(React.Fragment, null,
+        React.createElement(React.Fragment, null,
             React.createElement("ul", { style: styles.list },
                 showRecent && (React.createElement(React.Fragment, null,
                     recentQueries.map((q, idx) => {
@@ -13059,7 +13426,7 @@ const GoogleDropdown = forwardRef(function GoogleDropdown(props, ref) {
                     "\"")))),
             (showFeelingLucky || showVoiceSearch) && (React.createElement("div", { style: styles.footer }, showFeelingLucky && (React.createElement(React.Fragment, null,
                 React.createElement("button", { style: mergeStyles(styles.footerButton, hoveredBtn === 'search' ? styles.footerButtonHover : undefined), onMouseEnter: () => setHoveredBtn('search'), onMouseLeave: () => setHoveredBtn(null), onClick: () => onSearchSubmit?.(query || (activeIndex >= 0 ? allItems[activeIndex]?.query : '')) }, "Search"),
-                React.createElement("button", { style: mergeStyles(styles.footerButton, hoveredBtn === 'lucky' ? styles.footerButtonHover : undefined), onMouseEnter: () => setHoveredBtn('lucky'), onMouseLeave: () => setHoveredBtn(null), onClick: () => onFeelingLucky?.(query || (activeIndex >= 0 ? allItems[activeIndex]?.query : '')) }, feelingLuckyText))))))),
+                React.createElement("button", { style: mergeStyles(styles.footerButton, hoveredBtn === 'lucky' ? styles.footerButtonHover : undefined), onMouseEnter: () => setHoveredBtn('lucky'), onMouseLeave: () => setHoveredBtn(null), onClick: () => onFeelingLucky?.(query || (activeIndex >= 0 ? allItems[activeIndex]?.query : '')) }, feelingLuckyText)))))),
         footer));
 });
 
@@ -13363,7 +13730,7 @@ const ImageIcon = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill
     React.createElement("polyline", { points: "21 15 16 10 5 21" })));
 const PinterestDropdown = forwardRef(function PinterestDropdown(props, ref) {
     const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showSaveButton = true, activeCategory: initialActiveCategory, activeTab, // From BaseDropdownProps
-    showPriceOverlay = true, gridColumns = 4, width = '800px', maxHeight = '600px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onSaveProduct, onViewAll, onClose, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
+    showPriceOverlay = true, gridColumns = 4, width = '800px', maxHeight = '600px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onSaveProduct, onViewAll, onClose, header, footer, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -13457,47 +13824,47 @@ const PinterestDropdown = forwardRef(function PinterestDropdown(props, ref) {
                         "(",
                         cat.count,
                         ")"))))))))),
-        React.createElement("div", { style: { ...styles.content, maxHeight } }, (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
-            React.createElement("div", { style: styles.spinner })))) : (React.createElement(React.Fragment, null,
-            processedSuggestions.length > 0 && (React.createElement("div", { style: styles.suggestionsRow }, processedSuggestions.slice(0, 8).map((s, idx) => (React.createElement("button", { key: s.id || idx, "data-index": idx, style: mergeStyles(styles.suggestionPill, activeIndex === idx ? styles.suggestionPillActive : undefined, hoveredSuggestion === idx && activeIndex !== idx ? styles.suggestionPillHover : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => {
-                    setHoveredSuggestion(idx);
-                    setActiveIndex(idx);
-                }, onMouseLeave: () => setHoveredSuggestion(-1) },
-                React.createElement("span", { style: styles.suggestionIcon }, query ? highlightTextReact(s.query, query, { tag: 'strong' }) : s.query)))))),
-            displayProducts.length > 0 && (React.createElement(React.Fragment, null,
-                React.createElement("div", { style: styles.sectionTitle },
-                    React.createElement(TrendingIcon$1, null),
-                    "Ideas for you"),
-                React.createElement("div", { style: {
-                        ...styles.productsGrid,
-                        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
-                    } }, displayProducts.slice(0, 12).map((product, idx) => (React.createElement("div", { key: product.id, style: mergeStyles(styles.productCard, hoveredProduct === product.id ? styles.productCardHover : undefined), onClick: () => onProductClick?.(product._raw, idx), onMouseEnter: () => setHoveredProduct(product.id), onMouseLeave: () => setHoveredProduct(null) },
-                    React.createElement("div", { style: styles.productImageContainer },
-                        product.image ? (React.createElement("img", { src: product.image, alt: product.title, style: styles.productImage, loading: "lazy" })) : (React.createElement("div", { style: styles.productImagePlaceholder },
-                            React.createElement(ImageIcon, null))),
-                        showSaveButton && (React.createElement("button", { style: mergeStyles(styles.productSaveBtn, hoveredProduct === product.id ? styles.productSaveBtnVisible : undefined), onClick: (e) => {
-                                e.stopPropagation();
-                                onSaveProduct?.(product._raw);
-                            }, "aria-label": "Save" },
-                            React.createElement(HeartIcon, null))),
-                        showPriceOverlay && product.price !== undefined && (React.createElement("div", { style: mergeStyles(styles.productOverlay, hoveredProduct === product.id ? styles.productOverlayVisible : undefined) },
-                            React.createElement("div", { style: styles.productTitleOverlay }, product.title),
-                            React.createElement("div", { style: styles.productPriceOverlay }, formatPrice(product.price, {
+        React.createElement("div", { style: { ...styles.content, maxHeight } },
+            React.createElement(React.Fragment, null,
+                processedSuggestions.length > 0 && (React.createElement("div", { style: styles.suggestionsRow }, processedSuggestions.slice(0, 8).map((s, idx) => (React.createElement("button", { key: s.id || idx, "data-index": idx, style: mergeStyles(styles.suggestionPill, activeIndex === idx ? styles.suggestionPillActive : undefined, hoveredSuggestion === idx && activeIndex !== idx ? styles.suggestionPillHover : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => {
+                        setHoveredSuggestion(idx);
+                        setActiveIndex(idx);
+                    }, onMouseLeave: () => setHoveredSuggestion(-1) },
+                    React.createElement("span", { style: styles.suggestionIcon }, query ? highlightTextReact(s.query, query, { tag: 'strong' }) : s.query)))))),
+                displayProducts.length > 0 && (React.createElement(React.Fragment, null,
+                    React.createElement("div", { style: styles.sectionTitle },
+                        React.createElement(TrendingIcon$1, null),
+                        "Ideas for you"),
+                    React.createElement("div", { style: {
+                            ...styles.productsGrid,
+                            gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+                        } }, displayProducts.slice(0, 12).map((product, idx) => (React.createElement("div", { key: product.id, style: mergeStyles(styles.productCard, hoveredProduct === product.id ? styles.productCardHover : undefined), onClick: () => onProductClick?.(product._raw, idx), onMouseEnter: () => setHoveredProduct(product.id), onMouseLeave: () => setHoveredProduct(null) },
+                        React.createElement("div", { style: styles.productImageContainer },
+                            product.image ? (React.createElement("img", { src: product.image, alt: product.title, style: styles.productImage, loading: "lazy" })) : (React.createElement("div", { style: styles.productImagePlaceholder },
+                                React.createElement(ImageIcon, null))),
+                            showSaveButton && (React.createElement("button", { style: mergeStyles(styles.productSaveBtn, hoveredProduct === product.id ? styles.productSaveBtnVisible : undefined), onClick: (e) => {
+                                    e.stopPropagation();
+                                    onSaveProduct?.(product._raw);
+                                }, "aria-label": "Save" },
+                                React.createElement(HeartIcon, null))),
+                            showPriceOverlay && product.price !== undefined && (React.createElement("div", { style: mergeStyles(styles.productOverlay, hoveredProduct === product.id ? styles.productOverlayVisible : undefined) },
+                                React.createElement("div", { style: styles.productTitleOverlay }, product.title),
+                                React.createElement("div", { style: styles.productPriceOverlay }, formatPrice(product.price, {
+                                    currency: productDisplay.currency || product.currency || '$'
+                                }))))),
+                        !showPriceOverlay && (React.createElement("div", { style: styles.productInfo },
+                            React.createElement("div", { style: styles.productTitle }, product.title),
+                            product.price !== undefined && (React.createElement("div", { style: styles.productPrice }, formatPrice(product.price, {
                                 currency: productDisplay.currency || product.currency || '$'
-                            }))))),
-                    !showPriceOverlay && (React.createElement("div", { style: styles.productInfo },
-                        React.createElement("div", { style: styles.productTitle }, product.title),
-                        product.price !== undefined && (React.createElement("div", { style: styles.productPrice }, formatPrice(product.price, {
-                            currency: productDisplay.currency || product.currency || '$'
-                        }))))))))))),
-            !loading && displayProducts.length === 0 && processedSuggestions.length === 0 && (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty },
-                React.createElement("div", { style: styles.emptyIcon },
-                    React.createElement(SearchIcon$3, null)),
-                React.createElement("p", null,
-                    "No ideas found for \"",
-                    query,
-                    "\""),
-                React.createElement("p", { style: { fontSize: '14px', marginTop: '8px' } }, "Try searching for something else"))))))),
+                            }))))))))))),
+                !loading && displayProducts.length === 0 && processedSuggestions.length === 0 && (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty },
+                    React.createElement("div", { style: styles.emptyIcon },
+                        React.createElement(SearchIcon$3, null)),
+                    React.createElement("p", null,
+                        "No ideas found for \"",
+                        query,
+                        "\""),
+                    React.createElement("p", { style: { fontSize: '14px', marginTop: '8px' } }, "Try searching for something else")))))),
         footer !== undefined ? footer : (displayProducts.length > 0 && (React.createElement("div", { style: styles.footer },
             React.createElement("span", { style: { color: 'var(--seekora-text-secondary, #767676)', fontSize: '14px' } },
                 displayProducts.length,
@@ -13797,7 +14164,7 @@ const ShoppingIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", f
 const ClockIcon$1 = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: "16", height: "16" },
     React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" })));
 const SpotlightDropdown = forwardRef(function SpotlightDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showPreview = true, asOverlay = true, placeholder = 'Search...', showShortcuts = true, actions = [], width = '680px', maxHeight = '500px', zIndex = 9999, className, style, classNames = {}, inputRef, onSuggestionSelect, onProductClick, onRecentClick, onClose, onSearchSubmit, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showPreview = true, asOverlay = true, placeholder = 'Powered by Seekora', showShortcuts = true, actions = [], width = '680px', maxHeight = '500px', zIndex = 9999, className, style, classNames = {}, inputRef, onSuggestionSelect, onProductClick, onRecentClick, onClose, onSearchSubmit, header, footer, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -13951,8 +14318,7 @@ const SpotlightDropdown = forwardRef(function SpotlightDropdown(props, ref) {
                 React.createElement("span", { style: styles.kbd }, "K")))),
         header,
         React.createElement("div", { style: styles.content },
-            React.createElement("div", { ref: listRef, style: { ...styles.resultsColumn, maxHeight } }, (loading && allItems.length === 0 && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
-                React.createElement("div", { style: styles.spinner })))) : allItems.length === 0 ? (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty },
+            React.createElement("div", { ref: listRef, style: { ...styles.resultsColumn, maxHeight } }, allItems.length === 0 ? (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty },
                 "No results for \"",
                 query,
                 "\""))) : (React.createElement(React.Fragment, null,
@@ -14348,7 +14714,7 @@ const SearchIcon$1 = () => (React.createElement("svg", { width: "18", height: "1
 const ArrowIcon = () => (React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor" },
     React.createElement("path", { fillRule: "evenodd", d: "M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z", clipRule: "evenodd" })));
 const ShopifyDropdown = forwardRef(function ShopifyDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showHeroProduct = true, showCollections = true, showAddToCart = true, addToCartText = 'Quick Add', showComparePrice = true, width = '100%', maxHeight = '500px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onAddToCart, onViewAll, onClose, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], categories = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, categoryFields = { id: 'id', label: 'label' }, productDisplay = {}, theme = {}, showHeroProduct = true, showCollections = true, showAddToCart = true, addToCartText = 'Quick Add', showComparePrice = true, width = '100%', maxHeight = '500px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, onAddToCart, onViewAll, onClose, header, footer, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -14420,8 +14786,7 @@ const ShopifyDropdown = forwardRef(function ShopifyDropdown(props, ref) {
           }
         `),
         header,
-        (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
-            React.createElement("div", { style: styles.spinner })))) : (React.createElement("div", { style: styles.layout },
+        React.createElement("div", { style: styles.layout },
             React.createElement("div", { style: styles.leftPanel },
                 React.createElement("div", { style: styles.section },
                     React.createElement("div", { style: styles.sectionHeader },
@@ -14476,7 +14841,7 @@ const ShopifyDropdown = forwardRef(function ShopifyDropdown(props, ref) {
                         React.createElement("div", { style: styles.productTitle }, product.title),
                         product.price !== undefined && (React.createElement("div", { style: styles.productPrice }, formatPrice(product.price, {
                             currency: productDisplay.currency || product.currency || '$'
-                        })))))))))))),
+                        }))))))))))),
         footer !== undefined ? footer : (React.createElement("div", { style: styles.footer },
             React.createElement("span", null,
                 "Press ",
@@ -14753,7 +15118,7 @@ const ChevronIcon = () => (React.createElement("svg", { viewBox: "0 0 24 24", fi
 const ArrowUpIcon = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "20", height: "20" },
     React.createElement("path", { d: "M7 17l5-5-5-5M13 17l5-5-5-5" })));
 const MobileSheetDropdown = forwardRef(function MobileSheetDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], trendingSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showSearchInput = true, showCancel = true, cancelText = 'Cancel', showDragHandle = true, swipeToDismiss = true, footerButtonText = 'Search', showFooterButton = true, width = '100%', maxHeight = '85vh', zIndex = 9999, className, style, classNames = {}, inputRef, onSuggestionSelect, onProductClick, onRecentClick, onRecentClearAll, onSearchSubmit, onClose, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], trendingSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showSearchInput = true, showCancel = true, cancelText = 'Cancel', showDragHandle = true, swipeToDismiss = true, footerButtonText = 'Search', showFooterButton = true, width = '100%', maxHeight = '85vh', zIndex = 9999, className, style, classNames = {}, inputRef, onSuggestionSelect, onProductClick, onRecentClick, onRecentClearAll, onSearchSubmit, onClose, header, footer, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     const styles = useMemo(() => createStyles$2(), []);
@@ -14872,7 +15237,7 @@ const MobileSheetDropdown = forwardRef(function MobileSheetDropdown(props, ref)
                 React.createElement("div", { style: styles.searchContainer },
                     React.createElement("div", { style: styles.searchIcon },
                         React.createElement(SearchIcon, null)),
-                    React.createElement("input", { ref: inputRef, type: "text", placeholder: "Search...", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: (e) => {
+                    React.createElement("input", { ref: inputRef, type: "text", placeholder: "Powered by Seekora", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 e.preventDefault();
                                 if (activeIndex >= 0) {
@@ -14895,70 +15260,70 @@ const MobileSheetDropdown = forwardRef(function MobileSheetDropdown(props, ref)
                             }
                         }, style: styles.searchInput, autoFocus: true })),
                 showCancel && (React.createElement("button", { style: styles.cancelBtn, onClick: onClose }, cancelText)))))),
-            React.createElement("div", { style: styles.content }, (loading && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading },
-                React.createElement("div", { style: styles.spinner })))) : (React.createElement(React.Fragment, null,
-                showRecent && (React.createElement("div", { style: styles.section },
-                    React.createElement("div", { style: styles.sectionHeader },
-                        React.createElement("span", { style: styles.sectionTitle }, "Recent"),
-                        React.createElement("button", { style: styles.clearBtn, onClick: onRecentClearAll }, "Clear")),
-                    recentQueries.map((q, idx) => (React.createElement("div", { key: `recent-${q}`, "data-index": idx, style: mergeStyles(styles.item, activeIndex === idx ? styles.itemActive : undefined), onClick: () => {
-                            onRecentClick?.(q);
-                            setInputValue(q);
-                        }, onMouseEnter: () => setActiveIndex(idx) },
-                        React.createElement("div", { style: styles.itemIcon },
-                            React.createElement(ClockIcon, null)),
-                        React.createElement("div", { style: styles.itemContent },
-                            React.createElement("div", { style: styles.itemTitle }, q)),
-                        React.createElement("div", { style: styles.itemAction },
-                            React.createElement(ArrowUpIcon, null))))))),
-                showTrending && (React.createElement("div", { style: styles.section },
-                    React.createElement("div", { style: styles.sectionHeader },
-                        React.createElement("span", { style: styles.sectionTitle }, "Trending")),
-                    trendingQueries.map((q, idx) => {
-                        const globalIdx = recentQueries.length + idx;
-                        return (React.createElement("div", { key: `trending-${q}`, "data-index": globalIdx, style: mergeStyles(styles.item, activeIndex === globalIdx ? styles.itemActive : undefined), onClick: () => {
+            React.createElement("div", { style: styles.content },
+                React.createElement(React.Fragment, null,
+                    showRecent && (React.createElement("div", { style: styles.section },
+                        React.createElement("div", { style: styles.sectionHeader },
+                            React.createElement("span", { style: styles.sectionTitle }, "Recent"),
+                            React.createElement("button", { style: styles.clearBtn, onClick: onRecentClearAll }, "Clear")),
+                        recentQueries.map((q, idx) => (React.createElement("div", { key: `recent-${q}`, "data-index": idx, style: mergeStyles(styles.item, activeIndex === idx ? styles.itemActive : undefined), onClick: () => {
                                 onRecentClick?.(q);
                                 setInputValue(q);
-                            }, onMouseEnter: () => setActiveIndex(globalIdx) },
+                            }, onMouseEnter: () => setActiveIndex(idx) },
                             React.createElement("div", { style: styles.itemIcon },
-                                React.createElement(TrendingIcon, null)),
+                                React.createElement(ClockIcon, null)),
                             React.createElement("div", { style: styles.itemContent },
                                 React.createElement("div", { style: styles.itemTitle }, q)),
                             React.createElement("div", { style: styles.itemAction },
-                                React.createElement(ChevronIcon, null))));
-                    }))),
-                inputValue && processedSuggestions.length > 0 && (React.createElement("div", { style: styles.section },
-                    React.createElement("div", { style: styles.sectionHeader },
-                        React.createElement("span", { style: styles.sectionTitle }, "Suggestions")),
-                    processedSuggestions.map((s, idx) => {
-                        const globalIdx = recentQueries.length + trendingQueries.length + idx;
-                        return (React.createElement("div", { key: s.id || idx, "data-index": globalIdx, style: mergeStyles(styles.item, activeIndex === globalIdx ? styles.itemActive : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => setActiveIndex(globalIdx) },
-                            React.createElement("div", { style: styles.itemIcon },
-                                React.createElement(SearchIcon, null)),
-                            React.createElement("div", { style: styles.itemContent },
-                                React.createElement("div", { style: styles.itemTitle }, highlightTextReact(s.query, inputValue, { tag: 'strong' })),
-                                s.count && (React.createElement("div", { style: styles.itemSubtitle },
-                                    s.count,
-                                    " results"))),
-                            React.createElement("div", { style: styles.itemAction },
-                                React.createElement(ChevronIcon, null))));
-                    }))),
-                showProducts && (React.createElement("div", { style: styles.section },
-                    React.createElement("div", { style: styles.sectionHeader },
-                        React.createElement("span", { style: styles.sectionTitle }, "Products")),
-                    React.createElement("div", { style: styles.productsScroll }, processedProducts.slice(0, 8).map((p, idx) => (React.createElement("div", { key: p.id, style: styles.productCard, onClick: () => onProductClick?.(p._raw, idx) },
-                        p.image ? (React.createElement("img", { src: p.image, alt: p.title, style: styles.productImage, loading: "lazy" })) : (React.createElement("div", { style: styles.productImage })),
-                        React.createElement("div", { style: styles.productTitle }, p.title),
-                        p.price !== undefined && (React.createElement("div", { style: styles.productPrice }, formatPrice(p.price, {
-                            currency: productDisplay.currency || p.currency || '$'
-                        }))))))))),
-                inputValue && processedSuggestions.length === 0 && !loading && (renderEmpty ? renderEmpty(inputValue) : (React.createElement("div", { style: styles.empty },
-                    React.createElement("div", { style: styles.emptyIcon },
-                        React.createElement(SearchIcon, null)),
-                    React.createElement("p", null,
-                        "No results for \"",
-                        inputValue,
-                        "\""))))))),
+                                React.createElement(ArrowUpIcon, null))))))),
+                    showTrending && (React.createElement("div", { style: styles.section },
+                        React.createElement("div", { style: styles.sectionHeader },
+                            React.createElement("span", { style: styles.sectionTitle }, "Trending")),
+                        trendingQueries.map((q, idx) => {
+                            const globalIdx = recentQueries.length + idx;
+                            return (React.createElement("div", { key: `trending-${q}`, "data-index": globalIdx, style: mergeStyles(styles.item, activeIndex === globalIdx ? styles.itemActive : undefined), onClick: () => {
+                                    onRecentClick?.(q);
+                                    setInputValue(q);
+                                }, onMouseEnter: () => setActiveIndex(globalIdx) },
+                                React.createElement("div", { style: styles.itemIcon },
+                                    React.createElement(TrendingIcon, null)),
+                                React.createElement("div", { style: styles.itemContent },
+                                    React.createElement("div", { style: styles.itemTitle }, q)),
+                                React.createElement("div", { style: styles.itemAction },
+                                    React.createElement(ChevronIcon, null))));
+                        }))),
+                    inputValue && processedSuggestions.length > 0 && (React.createElement("div", { style: styles.section },
+                        React.createElement("div", { style: styles.sectionHeader },
+                            React.createElement("span", { style: styles.sectionTitle }, "Suggestions")),
+                        processedSuggestions.map((s, idx) => {
+                            const globalIdx = recentQueries.length + trendingQueries.length + idx;
+                            return (React.createElement("div", { key: s.id || idx, "data-index": globalIdx, style: mergeStyles(styles.item, activeIndex === globalIdx ? styles.itemActive : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => setActiveIndex(globalIdx) },
+                                React.createElement("div", { style: styles.itemIcon },
+                                    React.createElement(SearchIcon, null)),
+                                React.createElement("div", { style: styles.itemContent },
+                                    React.createElement("div", { style: styles.itemTitle }, highlightTextReact(s.query, inputValue, { tag: 'strong' })),
+                                    s.count && (React.createElement("div", { style: styles.itemSubtitle },
+                                        s.count,
+                                        " results"))),
+                                React.createElement("div", { style: styles.itemAction },
+                                    React.createElement(ChevronIcon, null))));
+                        }))),
+                    showProducts && (React.createElement("div", { style: styles.section },
+                        React.createElement("div", { style: styles.sectionHeader },
+                            React.createElement("span", { style: styles.sectionTitle }, "Products")),
+                        React.createElement("div", { style: styles.productsScroll }, processedProducts.slice(0, 8).map((p, idx) => (React.createElement("div", { key: p.id, style: styles.productCard, onClick: () => onProductClick?.(p._raw, idx) },
+                            p.image ? (React.createElement("img", { src: p.image, alt: p.title, style: styles.productImage, loading: "lazy" })) : (React.createElement("div", { style: styles.productImage })),
+                            React.createElement("div", { style: styles.productTitle }, p.title),
+                            p.price !== undefined && (React.createElement("div", { style: styles.productPrice }, formatPrice(p.price, {
+                                currency: productDisplay.currency || p.currency || '$'
+                            }))))))))),
+                    inputValue && processedSuggestions.length === 0 && !loading && (renderEmpty ? renderEmpty(inputValue) : (React.createElement("div", { style: styles.empty },
+                        React.createElement("div", { style: styles.emptyIcon },
+                            React.createElement(SearchIcon, null)),
+                        React.createElement("p", null,
+                            "No results for \"",
+                            inputValue,
+                            "\"")))))),
             footer !== undefined ? footer : (showFooterButton && inputValue && (React.createElement("div", { style: styles.footer },
                 React.createElement("button", { style: styles.footerBtn, onClick: () => onSearchSubmit?.(inputValue) },
                     footerButtonText,
@@ -15129,7 +15494,7 @@ const createStyles$1 = () => ({
     },
 });
 const MinimalDropdown = forwardRef(function MinimalDropdown(props, ref) {
-    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showIndices = false, showTypeLabels = false, showSectionDividers = true, width = '100%', maxHeight = '400px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onRecentClick, onClose, onSearchSubmit, header, footer, showLoadingState = false, renderLoading, renderEmpty, } = props;
+    const { query, isOpen = true, loading = false, suggestions = [], products = [], recentSearches = [], suggestionFields = { query: 'query' }, productFields = { id: 'id', title: 'title' }, productDisplay = {}, theme = {}, showIndices = false, showTypeLabels = false, showSectionDividers = true, width = '100%', maxHeight = '400px', zIndex = 1000, className, style, classNames = {}, onSuggestionSelect, onProductClick, onRecentClick, onClose, onSearchSubmit, header, footer, renderEmpty, } = props;
     // Inject global responsive styles
     useInjectResponsiveStyles();
     // Responsive state
@@ -15215,7 +15580,7 @@ const MinimalDropdown = forwardRef(function MinimalDropdown(props, ref) {
           }
         `),
         header,
-        React.createElement("div", { ref: listRef, style: { maxHeight, overflowY: 'auto' } }, (loading && allItems.length === 0 && showLoadingState) ? (renderLoading ? renderLoading() : (React.createElement("div", { style: styles.loading }, "Loading..."))) : allItems.length === 0 ? (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty }, query ? `No results for "${query}"` : 'Start typing to search'))) : (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: listRef, style: { maxHeight, overflowY: 'auto' } }, allItems.length === 0 ? (renderEmpty ? renderEmpty(query) : (React.createElement("div", { style: styles.empty }, query ? `No results for "${query}"` : 'Start typing to search'))) : (React.createElement(React.Fragment, null,
             showRecent && (React.createElement(React.Fragment, null,
                 showSectionDividers && (React.createElement("div", { style: styles.divider }, "Recent")),
                 recentQueries.map((q, idx) => {
@@ -15423,24 +15788,12 @@ const createStyles = (isMobile) => ({
         flexShrink: 0,
         transition: 'color 150ms',
     },
-    loadingSpinner: {
-        width: '18px',
-        height: '18px',
-        borderWidth: '2px',
-        borderStyle: 'solid',
-        borderColor: '#e5e7eb',
-        borderTopColor: '#f90',
-        borderRadius: '50%',
-        animation: 'seekora-spin 0.8s linear infinite',
-        marginRight: '12px',
-        flexShrink: 0,
-    },
 });
 // ============================================================================
 // Component
 // ============================================================================
 const SuggestionSearchBar = forwardRef(function SuggestionSearchBar(props, ref) {
-    const { client, variant = 'amazon', autoMobileVariant = true, placeholder = 'Search...', defaultQuery = '', value, minQueryLength = 1, maxSuggestions = 8, debounceMs = 200, includeDropdownRecommendations = true, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, filteredTabs, analyticsTags, enableRecentSearches = true, maxRecentSearches = 10, showProducts = true, showTrendingOnEmpty = true, enableAnalytics = true, analyticsConfig, suggestionFields, productFields, theme, onSearch, onQueryChange, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, className, style, inputClassName, dropdownWidth, dropdownMaxHeight = '500px', zIndex = 1000, enableCache = true, cacheTtlMs = 30000, cacheMaxSize = 100, } = props;
+    const { client, variant = 'amazon', autoMobileVariant = true, placeholder = 'Powered by Seekora', defaultQuery = '', value, minQueryLength = 1, maxSuggestions = 8, debounceMs = 200, includeDropdownRecommendations = true, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, filteredTabs, analyticsTags, enableRecentSearches = true, maxRecentSearches = 10, showProducts = true, showTrendingOnEmpty = true, enableAnalytics = true, analyticsConfig, suggestionFields, productFields, theme, onSearch, onQueryChange, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, className, style, inputClassName, dropdownWidth, dropdownMaxHeight = '500px', zIndex = 1000, enableCache = true, cacheTtlMs = 30000, cacheMaxSize = 100, } = props;
     // Theme: prop overrides context (SearchProvider theme)
     const searchContext = useSearchContext();
     const effectiveTheme = theme ?? searchContext.theme;
@@ -15904,8 +16257,7 @@ const SuggestionSearchBar = forwardRef(function SuggestionSearchBar(props, ref)
                 React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: "20", height: "20" },
                     React.createElement("path", { fillRule: "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", clipRule: "evenodd" }))),
             React.createElement("input", { ref: inputRef, type: "text", value: currentQuery, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, className: inputClassName, style: styles.input, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": "Search", "aria-expanded": isOpen, "aria-haspopup": "listbox" }),
-            loading && React.createElement("div", { style: styles.loadingSpinner }),
-            currentQuery && !loading && (React.createElement("button", { type: "button", onClick: handleClear, style: styles.clearButton, "aria-label": "Clear search" }, "\u00D7"))),
+            currentQuery && (React.createElement("button", { type: "button", onClick: handleClear, style: styles.clearButton, "aria-label": "Clear search" }, "\u00D7"))),
         isOpen && (React.createElement(DropdownComponent, { query: currentQuery, isOpen: isOpen, loading: loading, suggestions: suggestions, products: currentTabProducts, categories: tabs.map(t => ({ id: t.id, label: t.label, count: t.nb_hits })), recentSearches: recentSearches.map(r => typeof r === 'string' ? r : r.query), trendingSearches: trendingSearches, filteredTabs: tabs, activeTab: activeTab, suggestionFields: suggestionFields, productFields: productFields, theme: themeToDropdownConfig(effectiveTheme) ?? effectiveTheme, width: dropdownWidth || '100%', maxHeight: dropdownMaxHeight, zIndex: zIndex, analytics: {
                 enabled: enableAnalytics,
                 trackSuggestionClicks: analyticsConfig?.trackSuggestionClicks ?? true,
@@ -15990,18 +16342,16 @@ function Modal({ isOpen, onClose, children }) {
     return createPortal(modalContent, document.body);
 }
 
-function SearchBox({ value, onChange, onKeyDown, placeholder = 'Search documentation...', isLoading = false, onClear, }) {
+function SearchBox({ value, onChange, onKeyDown, placeholder = 'Search documentation...', onClear, }) {
     const inputRef = useRef(null);
     useEffect(() => { if (inputRef.current)
         inputRef.current.focus(); }, []);
     const handleChange = (event) => onChange(event.target.value);
     const handleClear = () => { onChange(''); onClear?.(); inputRef.current?.focus(); };
     return (React.createElement("div", { className: "seekora-docsearch-searchbox" },
-        React.createElement("label", { className: "seekora-docsearch-searchbox-icon", htmlFor: "seekora-docsearch-input" }, isLoading ? (React.createElement("span", { className: "seekora-docsearch-spinner", "aria-hidden": "true" },
-            React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20" },
-                React.createElement("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "40", strokeDashoffset: "10" },
-                    React.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "0.8s", repeatCount: "indefinite" }))))) : (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
-            React.createElement("path", { d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", fill: "currentColor" })))),
+        React.createElement("label", { className: "seekora-docsearch-searchbox-icon", htmlFor: "seekora-docsearch-input" },
+            React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+                React.createElement("path", { d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z", fill: "currentColor" }))),
         React.createElement("input", { ref: inputRef, id: "seekora-docsearch-input", className: "seekora-docsearch-input", type: "text", value: value, onChange: handleChange, onKeyDown: onKeyDown, placeholder: placeholder, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-autocomplete": "list", "aria-controls": "seekora-docsearch-results" }),
         value && (React.createElement("button", { type: "button", className: "seekora-docsearch-clear", onClick: handleClear, "aria-label": "Clear search" },
             React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
@@ -16230,7 +16580,7 @@ function getHitKey(hit, index) {
         return hit.objectID;
     return `suggestion-${hit.url}-${index}`;
 }
-function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSelectionIntoViewRef, query, isLoading, showLoadingState = false, error, translations = {}, sources: _sources = [], }) {
+function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSelectionIntoViewRef, query, isLoading, error, translations = {}, sources: _sources = [], }) {
     const listRef = useRef(null);
     useEffect(() => {
         if (!listRef.current || hits.length === 0)
@@ -16264,14 +16614,6 @@ function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSe
         return (React.createElement("div", { className: "seekora-docsearch-empty" },
             React.createElement("p", { className: "seekora-docsearch-empty-text" }, translations.searchPlaceholder || 'Type to start searching...')));
     }
-    if (isLoading && hits.length === 0 && showLoadingState) {
-        return (React.createElement("div", { className: "seekora-docsearch-loading" },
-            React.createElement("div", { className: "seekora-docsearch-loading-spinner" },
-                React.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", "aria-hidden": "true" },
-                    React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "50", strokeDashoffset: "15" },
-                        React.createElement("animateTransform", { attributeName: "transform", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "0.8s", repeatCount: "indefinite" })))),
-            React.createElement("p", { className: "seekora-docsearch-loading-text" }, translations.loadingText || 'Searching...')));
-    }
     if (isLoading && hits.length === 0) {
         return React.createElement("div", { className: "seekora-docsearch-empty" });
     }
@@ -16684,6 +17026,12 @@ function useSeekoraSearch$1(options) {
             readSecret: storeSecret,
             logLevel: 'warn',
             enableContextCollection: true,
+            enableEventQueue: true, // Enable batching for better performance
+            eventQueue: {
+                batchSize: 10,
+                flushInterval: 5000, // 5 seconds
+                enablePersistence: true,
+            },
         };
         if (apiEndpoint) {
             if (['local', 'stage', 'production'].includes(apiEndpoint)) {
@@ -16895,7 +17243,7 @@ function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiK
         React.createElement(Modal, { isOpen: isOpen, onClose: handleClose },
             React.createElement("div", { className: "seekora-docsearch-modal", onKeyDown: handleKeyDown },
                 React.createElement("header", { className: "seekora-docsearch-header" },
-                    React.createElement(SearchBox, { value: query, onChange: setQuery, onKeyDown: handleKeyDown, placeholder: placeholder, isLoading: isLoading, onClear: reset }),
+                    React.createElement(SearchBox, { value: query, onChange: setQuery, onKeyDown: handleKeyDown, placeholder: placeholder, onClear: reset }),
                     React.createElement("button", { type: "button", className: "seekora-docsearch-close", onClick: handleClose, "aria-label": "Close search" },
                         React.createElement("span", { className: "seekora-docsearch-close-text" }, "esc"))),
                 React.createElement("div", { className: "seekora-docsearch-body" },
@@ -18180,5 +18528,5 @@ function updateSuggestionsStyles(theme) {
     injectSuggestionsStyles(theme, true);
 }
 
-export { ActionButtons, AmazonDropdown, AnalyticsProvider, BadgeList, Breadcrumb, CategoriesTabs, ClearRefinements, CurrentRefinements, DocSearch, DocSearchButton, DropdownPanel, FacetDropdown, Facets, FederatedDropdown, Fingerprint, FrequentlyBoughtTogether, GoogleDropdown, HierarchicalMenu, Highlight$1 as 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, SectionLoading, SectionSearchProvider, ShopifyDropdown, Snippet, SortBy, SpotlightDropdown, Stats, SuggestionDropdownVariants, SuggestionItem, SuggestionList, SuggestionSearchBar, SuggestionsDropdownComposition, SuggestionsError, SuggestionsLoading, 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, getFingerprint, getPriceRange, getRecentSearches, getShortcutText, getSuggestionsCache, highlightText, injectGlobalResponsiveStyles, injectSuggestionsStyles, lightThemeVariables, mediaQueries, mergeThemes, minimalTheme, minimalThemeVariables, parseHighlightMarkup, removeRecentSearch, touchTargets, updateSuggestionsStyles, useAnalytics, useAnalyticsProvider, useDocSearch, useSeekoraSearch$1 as useDocSearchSeekoraSearch, useInjectResponsiveStyles, useKeyboard, useNaturalLanguageFilters, useProductAnalytics, useQuerySuggestions, useQuerySuggestionsEnhanced, useResponsive, useSearchContext, useSearchState, useSectionSearchContext, useSeekoraSearch, useSmartSuggestions, useSuggestionsAnalytics, useSuggestionsContext, useVariantSelection, withAnalytics };
+export { ActionButtons, AmazonDropdown, AnalyticsProvider, BadgeList, Breadcrumb, CategoriesTabs, ClearRefinements, CurrentRefinements, DocSearch, DocSearchButton, DropdownPanel, FacetDropdown, Facets, FederatedDropdown, Fingerprint, FrequentlyBoughtTogether, GoogleDropdown, HierarchicalMenu, Highlight$1 as 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, SuggestionList, SuggestionSearchBar, 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, getFingerprint, getPriceRange, getRecentSearches, getShortcutText, getSuggestionsCache, highlightText, injectGlobalResponsiveStyles, injectSuggestionsStyles, lightThemeVariables, mediaQueries, mergeThemes, 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 };
 //# sourceMappingURL=index.esm.js.map