@seekora-ai/ui-sdk-react 0.2.17 → 0.2.20

package/dist/src/index.js

@@ -1687,7 +1687,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 = '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 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', searchAsYouType = false, }) => {
     const { client, theme, enableAnalytics, autoTrackSearch } = useSearchContext();
     const { query, setQuery, search: triggerSearch, results, loading: searchLoading, error: searchError } = useSearchState();
     const [isFocused, setIsFocused] = React.useState(false);
@@ -1695,6 +1695,14 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
     const inputRef = React.useRef(null);
     const containerRef = React.useRef(null);
     const isSearchingRef = React.useRef(false); // Flag to prevent blur handler from interfering
+    const searchAsYouTypeRef = React.useRef(null);
+    // Cleanup searchAsYouType timer on unmount
+    React.useEffect(() => {
+        return () => {
+            if (searchAsYouTypeRef.current)
+                clearTimeout(searchAsYouTypeRef.current);
+        };
+    }, []);
     const { suggestions, loading: suggestionsLoading } = useQuerySuggestions({
         client,
         query,
@@ -1724,6 +1732,11 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
         }
     }, [query, onQueryChange]);
     const handleSearch = React.useCallback(async (searchQuery) => {
+        // Cancel any pending searchAsYouType debounce — user explicitly submitted
+        if (searchAsYouTypeRef.current) {
+            clearTimeout(searchAsYouTypeRef.current);
+            searchAsYouTypeRef.current = null;
+        }
         // Allow empty queries - use empty string for search
         const query = searchQuery.trim();
         log.info('SearchBar: Triggering search', { query, originalQuery: searchQuery, isEmpty: !query });
@@ -1760,10 +1773,18 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
     const handleInputChange = React.useCallback((e) => {
         const value = e.target.value;
         // Update query in state manager but don't trigger search immediately
-        // Search will be triggered on Enter or suggestion select
+        // Search will be triggered on Enter, suggestion select, or after debounce if searchAsYouType
         setQuery(value, false); // false = don't trigger search immediately
         setSelectedIndex(-1);
-    }, [setQuery]);
+        if (searchAsYouType) {
+            if (searchAsYouTypeRef.current)
+                clearTimeout(searchAsYouTypeRef.current);
+            searchAsYouTypeRef.current = setTimeout(() => {
+                searchAsYouTypeRef.current = null;
+                triggerSearch();
+            }, debounceMs);
+        }
+    }, [setQuery, searchAsYouType, debounceMs, triggerSearch]);
     const handleKeyDown = React.useCallback((e) => {
         switch (e.key) {
             case 'ArrowDown':
@@ -1839,10 +1860,17 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
         ? `0 0 0 3px var(--seekora-border-focus-alpha, ${theme.colors.focus}33)`
         : undefined;
     const handleClear = React.useCallback(() => {
+        if (searchAsYouTypeRef.current) {
+            clearTimeout(searchAsYouTypeRef.current);
+            searchAsYouTypeRef.current = null;
+        }
         setQuery('', false);
         setSelectedIndex(-1);
         inputRef.current?.focus();
-    }, [setQuery]);
+        if (searchAsYouType) {
+            triggerSearch();
+        }
+    }, [setQuery, searchAsYouType, triggerSearch]);
     const handleSubmit = React.useCallback(() => {
         const currentValue = inputRef.current?.value || query;
         handleSearch(currentValue);
@@ -6802,7 +6830,7 @@ function transformFilteredTab(raw) {
 // Main Hook
 // ============================================================================
 function useQuerySuggestionsEnhanced(options) {
-    const { client, query, enabled = true, debounceMs = 200, maxSuggestions = 10, minQueryLength = 1, includeDropdownRecommendations = false, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, includeFacets = true, // CHANGED: Enable facets by default
+    const { client, query, enabled = true, prefetch = false, debounceMs = 200, maxSuggestions = 10, minQueryLength = 1, includeDropdownRecommendations = false, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, includeFacets = true, // CHANGED: Enable facets by default
     maxCategories = 3, maxFacets = 5, filteredTabs, minPopularity, timeRange, disableTypoTolerance, analyticsTags, enableRecentSearches = true, maxRecentSearches = MAX_RECENT_SEARCHES_DEFAULT, recentSearchesKey = RECENT_SEARCHES_DEFAULT_KEY, onSuggestionsLoaded, onError, } = options;
     // State
     const [suggestions, setSuggestions] = React.useState([]);
@@ -6975,17 +7003,41 @@ function useQuerySuggestionsEnhanced(options) {
         onSuggestionsLoaded,
         onError,
     ]);
+    // Prefetch: fire initial empty-query fetch once client is ready (before dropdown opens)
+    const prefetchedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (!prefetch || prefetchedRef.current)
+            return;
+        if (minQueryLength > 0)
+            return;
+        if (!client?.getSuggestions)
+            return;
+        prefetchedRef.current = true;
+        fetchSuggestions('');
+    }, [prefetch, client, minQueryLength, fetchSuggestions]);
     // Debounced fetch effect
     React.useEffect(() => {
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
         }
         if (!enabled || query.length < minQueryLength) {
+            // Don't clear prefetched data when dropdown is closed
+            if (prefetch && prefetchedRef.current && query === '') {
+                // Keep prefetched data intact
+                setLoading(false);
+                setError(null);
+                return;
+            }
             setSuggestions([]);
+            setDropdownRecommendations(null);
             setLoading(false);
             setError(null);
             return;
         }
+        // When dropdown opens with empty query and we already have prefetched data, skip re-fetch
+        if (prefetch && prefetchedRef.current && query === '') {
+            return;
+        }
         setLoading(true);
         debounceTimerRef.current = setTimeout(() => {
             fetchSuggestions(query);
@@ -6995,7 +7047,7 @@ function useQuerySuggestionsEnhanced(options) {
                 clearTimeout(debounceTimerRef.current);
             }
         };
-    }, [query, enabled, minQueryLength, debounceMs, fetchSuggestions]);
+    }, [query, enabled, prefetch, minQueryLength, debounceMs, fetchSuggestions]);
     // Recent search management
     const addRecentSearch = React.useCallback((searchQuery, resultsCount) => {
         if (!enableRecentSearches || !searchQuery.trim())
@@ -9030,10 +9082,28 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
     const [isOpen, setIsOpenState] = React.useState(false);
     const [activeIndex, setActiveIndex] = React.useState(-1);
     const [activeTabId, setActiveTabId] = React.useState('');
+    const [prefetchedProducts, setPrefetchedProducts] = React.useState([]);
+    // Prefetch product results on mount so they're available instantly when dropdown opens
+    const prefetchedProductsRef = React.useRef(false);
+    React.useEffect(() => {
+        if (prefetchedProductsRef.current || !client?.search)
+            return;
+        prefetchedProductsRef.current = true;
+        client.search('*', { per_page: 12, page: 1 })
+            .then((res) => {
+            const data = res?.data;
+            const items = data?.results || data?.data || res?.results || res?.hits || [];
+            if (Array.isArray(items) && items.length > 0) {
+                setPrefetchedProducts(items);
+            }
+        })
+            .catch(() => { });
+    }, [client]);
     const suggestionsData = useQuerySuggestionsEnhanced({
         client,
         query,
         enabled: isOpen,
+        prefetch: minQueryLength === 0,
         minQueryLength,
         debounceMs,
         maxSuggestions,
@@ -9051,7 +9121,22 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
         trackClicks: true,
         trackImpressions: true,
     });
-    const { suggestions, recentSearches, trendingSearches, trendingProducts, filteredTabs: filteredTabsData, loading, error, hasContent, getAllNavigableItems, addRecentSearch, } = suggestionsData;
+    const { suggestions, recentSearches, trendingSearches, trendingProducts, filteredTabs: filteredTabsData, loading, error, hasContent, getAllNavigableItems, addRecentSearch, clearRecentSearches, } = suggestionsData;
+    // Wrap getAllNavigableItems to include prefetchedProducts when trendingProducts is empty
+    const getAllNavigableItemsWithPrefetched = React.useCallback(() => {
+        const items = getAllNavigableItems();
+        // If there are already product items in the list, return as-is
+        if (items.some(i => i.type === 'product'))
+            return items;
+        // Otherwise append prefetchedProducts as navigable product items
+        if (prefetchedProducts.length > 0) {
+            let idx = items.length;
+            prefetchedProducts.forEach(product => {
+                items.push({ type: 'product', index: idx++, data: product });
+            });
+        }
+        return items;
+    }, [getAllNavigableItems, prefetchedProducts]);
     const onSearchRef = React.useRef(onSearch);
     const onSuggestionSelectRef = React.useRef(onSuggestionSelect);
     const onProductClickRef = React.useRef(onProductClick);
@@ -9129,19 +9214,19 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
         onSearchRef.current?.(trimmed);
     }, [analytics, addRecentSearch, close]);
     const navigateNext = React.useCallback(() => {
-        const items = getAllNavigableItems();
+        const items = getAllNavigableItemsWithPrefetched();
         if (items.length === 0)
             return;
         setActiveIndex((i) => (i < items.length - 1 ? i + 1 : 0));
-    }, [getAllNavigableItems]);
+    }, [getAllNavigableItemsWithPrefetched]);
     const navigatePrev = React.useCallback(() => {
-        const items = getAllNavigableItems();
+        const items = getAllNavigableItemsWithPrefetched();
         if (items.length === 0)
             return;
         setActiveIndex((i) => (i <= 0 ? items.length - 1 : i - 1));
-    }, [getAllNavigableItems]);
+    }, [getAllNavigableItemsWithPrefetched]);
     const selectActive = React.useCallback(() => {
-        const items = getAllNavigableItems();
+        const items = getAllNavigableItemsWithPrefetched();
         if (activeIndex < 0 || activeIndex >= items.length) {
             submitSearch(query);
             return;
@@ -9163,7 +9248,7 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
             default:
                 submitSearch(query);
         }
-    }, [activeIndex, getAllNavigableItems, query, submitSearch, selectSuggestion, selectProduct, selectRecentSearch, selectTrendingSearch]);
+    }, [activeIndex, getAllNavigableItemsWithPrefetched, query, submitSearch, selectSuggestion, selectProduct, selectRecentSearch, selectTrendingSearch]);
     // Impression when open and content changes
     React.useEffect(() => {
         if (!isOpen || !hasContent || !query)
@@ -9186,19 +9271,21 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
         recentSearches,
         trendingSearches,
         trendingProducts,
+        prefetchedProducts,
         filteredTabs: filteredTabsData,
         activeTabId,
         setActiveTabId,
         loading,
         error,
         hasContent,
-        getAllNavigableItems,
+        getAllNavigableItems: getAllNavigableItemsWithPrefetched,
         selectSuggestion,
         selectProduct,
         selectRecentSearch,
         selectTrendingSearch,
         setActiveTab,
         submitSearch,
+        clearRecentSearches,
         close,
         navigateNext,
         navigatePrev,
@@ -9214,19 +9301,21 @@ function SuggestionsProvider({ children, minQueryLength = 1, debounceMs = 200, m
         recentSearches,
         trendingSearches,
         trendingProducts,
+        prefetchedProducts,
         filteredTabsData,
         activeTabId,
         setActiveTabId,
         loading,
         error,
         hasContent,
-        getAllNavigableItems,
+        getAllNavigableItemsWithPrefetched,
         selectSuggestion,
         selectProduct,
         selectRecentSearch,
         selectTrendingSearch,
         setActiveTab,
         submitSearch,
+        clearRecentSearches,
         close,
         navigateNext,
         navigatePrev,
@@ -9317,14 +9406,14 @@ function SearchInput({ placeholder = 'Powered by Seekora', autoFocus = false, sh
     }, [setQuery]);
     return (React.createElement("div", { className: clsx('seekora-suggestions-search-input-wrapper', className), style: { ...defaultStyles, ...style } },
         React.createElement("div", { className: "seekora-suggestions-input-wrapper", style: inputWrapperStyles },
-            leftIcon ? (React.createElement("span", { className: "seekora-suggestions-input-left-icon", style: { display: 'flex', flexShrink: 0, color: 'var(--seekora-text-secondary, #6b7280)' } }, leftIcon)) : null,
+            leftIcon ? (React.createElement("span", { className: "seekora-suggestions-input-left-icon", style: { display: 'flex', flexShrink: 0, color: 'inherit', opacity: 0.5 } }, leftIcon)) : null,
             React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-autocomplete": "list", role: "combobox", className: clsx('seekora-suggestions-input', inputClassName), style: { ...inputStyles, ...inputStyle } }),
             showClearButton && query ? (React.createElement("button", { type: "button", onClick: handleClear, className: "seekora-suggestions-input-clear", "aria-label": "Clear search", style: {
                     padding: 8,
                     border: 'none',
                     background: 'transparent',
                     cursor: 'pointer',
-                    color: 'var(--seekora-text-secondary, #6b7280)',
+                    color: 'inherit', opacity: 0.5,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -9475,7 +9564,7 @@ const defaultItemStyle = {
     fontSize: 'inherit',
     fontFamily: 'inherit',
     backgroundColor: 'transparent',
-    color: 'var(--seekora-text-primary, #111827)',
+    color: 'inherit',
     transition: 'background-color 120ms ease',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -9492,14 +9581,14 @@ function SuggestionItem({ suggestion, index, isActive, onSelect, className, styl
     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,
-            ...(showHighlight ? { backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)' } : {}),
+            ...(showHighlight ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
             ...style,
         }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
             e.preventDefault();
             onSelect();
         } },
         content,
-        suggestion.count != null ? (React.createElement("span", { className: "seekora-suggestions-item-count", style: { marginLeft: 8, color: 'var(--seekora-text-secondary, #6b7280)', fontSize: '0.875em' } }, suggestion.count)) : null));
+        suggestion.count != null ? (React.createElement("span", { className: "seekora-suggestions-item-count", style: { marginLeft: 8, color: 'inherit', opacity: 0.6, fontSize: '0.875em' } }, suggestion.count)) : null));
 }
 
 /**
@@ -10185,7 +10274,7 @@ const imgStyle$1 = {
     aspectRatio: 'var(--seekora-card-aspect-ratio, 1)',
     objectFit: 'cover',
     borderRadius: BORDER_RADIUS$3.sm,
-    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
     display: 'block',
     overflow: 'hidden',
 };
@@ -10211,7 +10300,7 @@ function ItemCard({ item, position, onSelect, className, style, asLink = true, i
     // Hover style
     const cardHoverStyle = isHovered
         ? {
-            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, #f9fafb))',
+            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, rgba(0,0,0,0.03)))',
             boxShadow: 'var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08))',
         }
         : {};
@@ -10220,7 +10309,7 @@ function ItemCard({ item, position, onSelect, className, style, asLink = true, i
         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,
+        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: descriptionFontSize, color: 'inherit', opacity: 0.6, 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: horizontalGap, alignItems: 'flex-start' } },
         imageBlock,
@@ -11215,7 +11304,7 @@ const imgPlaceholderStyle = {
     aspectRatio: '1',
     objectFit: 'cover',
     borderRadius: BORDER_RADIUS$1.sm,
-    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
 };
 function ImageBlock({ images, title, imageVariant, aspectRatio, enableZoom, zoomMode, zoomLevel }) {
     const ar = aspectRatio
@@ -11235,7 +11324,7 @@ function MinimalLayout({ images, title, price, product, imageVariant, displayCon
     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: 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)' } },
+        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price seekora-suggestions-product-card-price", style: { fontSize: priceFontSize, color: 'inherit', opacity: 0.6 } },
             product.currency ?? '$',
             price.toFixed(2)))));
 }
@@ -11255,7 +11344,7 @@ function StandardLayout({ images, title, price, comparePrice, brand, badges, opt
             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: 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)),
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: brandFontSize, color: 'inherit', opacity: 0.6, 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: priceFontSize } })),
@@ -11274,7 +11363,7 @@ function DetailedLayout({ images, title, price, comparePrice, brand, badges, pri
             cfg.showBadges !== false && badges.length > 0 && (React.createElement(BadgeList, { badges: badges, position: "top-left" })),
             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)),
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: '0.75rem', color: 'inherit', opacity: 0.6, 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),
             cfg.showRating !== false && product.rating != null && (React.createElement(RatingDisplay, { rating: product.rating, reviewCount: product.reviewCount, variant: "compact", size: "small", showNumeric: false, showReviewCount: true, className: "seekora-product-card__rating" })),
             React.createElement("div", { className: "seekora-product-card__price" }, cfg.showPriceRange && priceRange ? (React.createElement(PriceDisplay, { priceRange: priceRange, currency: cfg.currency ?? product.currency, currencyPosition: cfg.currencyPosition, priceDecimals: cfg.priceDecimals, 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: '0.875rem' } }))),
@@ -11296,7 +11385,7 @@ function CompactLayout({ images, title, price, product, imageVariant, displayCon
                 textOverflow: 'ellipsis',
                 whiteSpace: 'nowrap',
             } }, title),
-        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price", style: { fontSize: '0.8125rem', color: 'var(--seekora-text-secondary, #6b7280)' } },
+        price != null && !Number.isNaN(price) && (React.createElement("span", { className: "seekora-product-card__price", style: { fontSize: '0.8125rem', color: 'inherit', opacity: 0.6 } },
             product.currency ?? '$',
             price.toFixed(2)))));
 }
@@ -11320,7 +11409,7 @@ function HorizontalLayout({ images, title, price, comparePrice, brand, badges, o
             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: 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)),
+            cfg.showBrand !== false && brand && (React.createElement("span", { className: "seekora-product-card__brand", style: { fontSize: brandFontSize, color: 'inherit', opacity: 0.6, 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: priceFontSize } })),
@@ -11356,7 +11445,7 @@ const imgStyle = {
     aspectRatio: '1',
     objectFit: 'cover',
     borderRadius: BORDER_RADIUS.sm,
-    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    backgroundColor: 'var(--seekora-bg-secondary, rgba(0,0,0,0.04))',
 };
 function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant = 'single', displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition = 'inline', showActionLabels = false, enableImageZoom = false, imageZoomMode = 'both', imageZoomLevel = 2.5, }) {
     // Find selected variant if selections are provided
@@ -11405,7 +11494,7 @@ function ProductCard({ product, position, section, tabId, onSelect, className, s
     const [isHovered, setIsHovered] = React.useState(false);
     const cardHoverStyle = isHovered
         ? {
-            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, #f9fafb))',
+            backgroundColor: 'var(--seekora-card-hover-bg, var(--seekora-bg-hover, rgba(0,0,0,0.03)))',
             boxShadow: 'var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08))',
         }
         : {};
@@ -11419,7 +11508,7 @@ function ProductCard({ product, position, section, tabId, onSelect, className, s
             }, "data-position": position, "data-section": section, "data-tab-id": tabId },
             images.length > 0 ? (React.createElement(ImageDisplay, { images: images, variant: imageVariant, alt: title, className: "seekora-suggestions-product-card-image", enableZoom: enableImageZoom, zoomMode: imageZoomMode, zoomLevel: imageZoomLevel })) : (React.createElement("div", { className: "seekora-suggestions-product-card-placeholder", style: imgStyle, "aria-hidden": true })),
             React.createElement("span", { className: "seekora-suggestions-product-card-title", style: { fontSize: '0.875rem', fontWeight: 500 } }, title),
-            price != null && !Number.isNaN(price) ? (React.createElement("span", { className: "seekora-suggestions-product-card-price", style: { fontSize: '0.875rem', color: 'var(--seekora-text-secondary, #6b7280)' } },
+            price != null && !Number.isNaN(price) ? (React.createElement("span", { className: "seekora-suggestions-product-card-price", style: { fontSize: '0.875rem', color: 'inherit', opacity: 0.6 } },
                 product.currency ?? '$',
                 price.toFixed(2))) : null));
     }
@@ -11555,7 +11644,7 @@ function CategoriesTabs({ className, style, tabClassName }) {
                 border: 'none',
                 borderRadius: 'var(--seekora-border-radius, 6px)',
                 backgroundColor: isActive ? 'var(--seekora-primary-light, rgba(59, 130, 246, 0.1))' : 'transparent',
-                color: isActive ? 'var(--seekora-primary, #3b82f6)' : 'var(--seekora-text-primary, #111827)',
+                color: isActive ? 'var(--seekora-primary, #3b82f6)' : 'inherit',
                 cursor: 'pointer',
                 fontSize: '0.875rem',
                 fontWeight: isActive ? 600 : 400,
@@ -11579,7 +11668,7 @@ const itemStyle$1 = {
     fontSize: 'inherit',
     fontFamily: 'inherit',
     backgroundColor: 'transparent',
-    color: 'var(--seekora-text-primary, #111827)',
+    color: 'inherit',
     transition: 'background-color 120ms ease',
 };
 function RecentSearchItem({ search, onSelect }) {
@@ -11587,7 +11676,7 @@ function RecentSearchItem({ search, onSelect }) {
     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)' } : {}),
+                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
             }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
                 e.preventDefault();
                 onSelect();
@@ -11599,7 +11688,7 @@ function RecentSearchesList({ title = 'Recent', maxItems = 8, className, style,
     if (items.length === 0)
         return null;
     return (React.createElement("div", { className: clsx('seekora-suggestions-recent-list', className), style: style },
-        title ? (React.createElement("div", { className: "seekora-suggestions-recent-title", style: { padding: '8px 12px', fontSize: '0.75rem', fontWeight: 600, color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase' } }, title)) : null,
+        title ? (React.createElement("div", { className: "seekora-suggestions-recent-title", style: { padding: '8px 12px', fontSize: '0.75rem', fontWeight: 600, color: 'inherit', opacity: 0.6, textTransform: 'uppercase' } }, title)) : null,
         React.createElement("ul", { className: clsx('seekora-suggestions-recent-ul', listClassName), style: { margin: 0, padding: 0, listStyle: 'none' } }, items.map((search, i) => {
             const onSelect = () => selectRecentSearch(search);
             if (renderItem) {
@@ -11623,7 +11712,7 @@ const itemStyle = {
     fontSize: 'inherit',
     fontFamily: 'inherit',
     backgroundColor: 'transparent',
-    color: 'var(--seekora-text-primary, #111827)',
+    color: 'inherit',
     transition: 'background-color 120ms ease',
 };
 function TrendingItem({ trending, onSelect }) {
@@ -11631,13 +11720,13 @@ function TrendingItem({ trending, onSelect }) {
     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)' } : {}),
+                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
             }, 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)));
+            trending.count != null ? (React.createElement("span", { style: { marginLeft: 8, color: 'inherit', opacity: 0.6, fontSize: '0.875em' } }, trending.count)) : null)));
 }
 function TrendingList({ title = 'Trending', maxItems = 8, className, style, listClassName, renderItem, }) {
     const { trendingSearches, selectTrendingSearch } = useSuggestionsContext();
@@ -11645,7 +11734,7 @@ function TrendingList({ title = 'Trending', maxItems = 8, className, style, list
     if (items.length === 0)
         return null;
     return (React.createElement("div", { className: clsx('seekora-suggestions-trending-list', className), style: style },
-        title ? (React.createElement("div", { className: "seekora-suggestions-trending-title", style: { padding: '8px 12px', fontSize: '0.75rem', fontWeight: 600, color: 'var(--seekora-text-secondary, #6b7280)', textTransform: 'uppercase' } }, title)) : null,
+        title ? (React.createElement("div", { className: "seekora-suggestions-trending-title", style: { padding: '8px 12px', fontSize: '0.75rem', fontWeight: 600, color: 'inherit', opacity: 0.6, textTransform: 'uppercase' } }, title)) : null,
         React.createElement("ul", { className: clsx('seekora-suggestions-trending-ul', listClassName), style: { margin: 0, padding: 0, listStyle: 'none' } }, items.map((trending, i) => {
             const onSelect = () => selectTrendingSearch(trending, i);
             if (renderItem) {