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

package/dist/components/primitives/VariantSelector.js

@@ -76,10 +76,10 @@ export function VariantSelector({ options, variants, selections, onSelectionChan
                     fontSize: '0.875rem',
                     fontWeight: 600,
                     marginBottom: 8,
-                    color: 'var(--seekora-text-primary, #111827)',
+                    color: 'var(--seekora-text-primary, inherit)',
                 } },
                 option.name,
-                selected && (React.createElement("span", { style: { fontWeight: 400, marginLeft: 6, color: 'var(--seekora-text-secondary, #6b7280)' } }, selected))),
+                selected && (React.createElement("span", { style: { fontWeight: 400, marginLeft: 6, color: 'var(--seekora-text-secondary, inherit)' } }, selected))),
             mode === 'dropdown' ? (React.createElement("select", { className: "seekora-variant-dropdown", value: selected ?? '', onChange: (e) => {
                     e.stopPropagation();
                     onSelectionChange(option.name, e.target.value);
@@ -87,9 +87,9 @@ export function VariantSelector({ options, variants, selections, onSelectionChan
                     padding: '8px 12px',
                     fontSize: '0.875rem',
                     borderRadius: 6,
-                    border: '1px solid var(--seekora-border-color, #e5e7eb)',
-                    backgroundColor: 'var(--seekora-bg-surface, #fff)',
-                    color: 'var(--seekora-text-primary, #111827)',
+                    border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+                    backgroundColor: 'var(--seekora-bg-surface, transparent)',
+                    color: 'var(--seekora-text-primary, inherit)',
                     cursor: 'pointer',
                     minWidth: 120,
                 } },
@@ -123,7 +123,7 @@ export function VariantSelector({ options, variants, selections, onSelectionChan
                             backgroundColor: color,
                             border: isActive
                                 ? '2px solid var(--seekora-primary, #111827)'
-                                : '1px solid var(--seekora-border-color, #e5e7eb)',
+                                : '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
                             outline: isActive ? '2px solid var(--seekora-primary, #111827)' : 'none',
                             outlineOffset: 2,
                             cursor: available ? 'pointer' : 'not-allowed',
@@ -144,13 +144,13 @@ export function VariantSelector({ options, variants, selections, onSelectionChan
                         borderRadius: 6,
                         border: isActive
                             ? '2px solid var(--seekora-primary, #111827)'
-                            : '1px solid var(--seekora-border-color, #e5e7eb)',
+                            : '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
                         backgroundColor: isActive
                             ? 'var(--seekora-primary, #111827)'
-                            : 'var(--seekora-bg-surface, #fff)',
+                            : 'var(--seekora-bg-surface, transparent)',
                         color: isActive
-                            ? '#fff'
-                            : 'var(--seekora-text-primary, #111827)',
+                            ? 'transparent'
+                            : 'var(--seekora-text-primary, inherit)',
                         cursor: available ? 'pointer' : 'not-allowed',
                         opacity: available ? 1 : 0.5,
                         textDecoration: !available ? 'line-through' : 'none',

package/dist/components/primitives/VariantSwatches.js

@@ -109,7 +109,7 @@ export function VariantSwatches({ options, visibleOptions, maxValues = 5, colorM
                             outlineOffset: 2,
                             cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
                             flexShrink: 0,
-                            boxShadow: isSelected ? '0 0 0 1px #fff' : 'none',
+                            boxShadow: isSelected ? 'var(--seekora-swatch-ring, 0 0 0 1px #fff)' : 'none',
                             opacity: isAvailable ? 1 : 0.3,
                             position: 'relative',
                         }, onMouseEnter: () => isAvailable && onSwatchHover?.(option.name, value), onMouseDown: (e) => {
@@ -126,7 +126,7 @@ export function VariantSwatches({ options, visibleOptions, maxValues = 5, colorM
                             left: '-2px',
                             right: '-2px',
                             height: 1,
-                            backgroundColor: '#ef4444',
+                            backgroundColor: 'var(--seekora-unavailable-line, #ef4444)',
                             transform: 'translateY(-50%) rotate(-45deg)',
                         } }))));
                 }
@@ -142,7 +142,7 @@ export function VariantSwatches({ options, visibleOptions, maxValues = 5, colorM
                             ? 'var(--seekora-primary, #111827)'
                             : 'transparent',
                         color: isSelected
-                            ? '#fff'
+                            ? 'var(--seekora-primary-text, #fff)'
                             : 'var(--seekora-text-secondary, #6b7280)',
                         cursor: onSwatchClick && isAvailable ? 'pointer' : 'not-allowed',
                         whiteSpace: 'nowrap',

package/dist/components/product-page/ProductGallery.d.ts

@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import { type ImageDisplayVariant } from '../primitives/ImageDisplay';
+import type { ImageZoomMode } from '../primitives/ImageZoom';
 export interface ProductGalleryProps {
     images: string[];
     variant?: ImageDisplayVariant;
@@ -14,6 +15,12 @@ export interface ProductGalleryProps {
     style?: React.CSSProperties;
     carouselAutoplay?: boolean;
     carouselIntervalMs?: number;
+    /** Enable zoom functionality on product images */
+    enableZoom?: boolean;
+    /** Zoom mode: 'hover' (Amazon-style), 'lens', 'click' (lightbox), 'both' */
+    zoomMode?: ImageZoomMode;
+    /** Zoom magnification level (2 = 200%, 3 = 300%) */
+    zoomLevel?: number;
 }
-export declare function ProductGallery({ images, variant, alt, className, style, carouselAutoplay, carouselIntervalMs, }: ProductGalleryProps): React.JSX.Element;
+export declare function ProductGallery({ images, variant, alt, className, style, carouselAutoplay, carouselIntervalMs, enableZoom, zoomMode, zoomLevel, }: ProductGalleryProps): React.JSX.Element;
 //# sourceMappingURL=ProductGallery.d.ts.map

package/dist/components/product-page/ProductGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductGallery.d.ts","sourceRoot":"","sources":["../../../src/components/product-page/ProductGallery.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAgB,KAAK,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEpF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAsB,EACtB,GAAe,EACf,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,kBAAkB,GACnB,EAAE,mBAAmB,qBAYrB"}
+{"version":3,"file":"ProductGallery.d.ts","sourceRoot":"","sources":["../../../src/components/product-page/ProductGallery.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAgB,KAAK,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAsB,EACtB,GAAe,EACf,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,qBAerB"}

package/dist/components/product-page/ProductGallery.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import { clsx } from 'clsx';
 import { ImageDisplay } from '../primitives/ImageDisplay';
-export function ProductGallery({ images, variant = 'thumbStrip', alt = 'Product', className, style, carouselAutoplay, carouselIntervalMs, }) {
+export function ProductGallery({ images, variant = 'thumbStrip', alt = 'Product', className, style, carouselAutoplay, carouselIntervalMs, enableZoom, zoomMode, zoomLevel, }) {
     return (React.createElement("div", { className: clsx('seekora-product-gallery', className), style: style },
-        React.createElement(ImageDisplay, { images: images, variant: variant, alt: alt, carouselAutoplay: carouselAutoplay, carouselIntervalMs: carouselIntervalMs })));
+        React.createElement(ImageDisplay, { images: images, variant: variant, alt: alt, carouselAutoplay: carouselAutoplay, carouselIntervalMs: carouselIntervalMs, enableZoom: enableZoom, zoomMode: zoomMode, zoomLevel: zoomLevel })));
 }

package/dist/components/section-primitives/SectionSearchProvider.d.ts

@@ -18,6 +18,8 @@ export interface SectionSearchProviderProps {
     sortBy?: string;
     enabled?: boolean;
     sectionId?: string;
+    /** Additional search options merged into the request (e.g. { widget_mode: false }). */
+    searchOptions?: Record<string, unknown>;
 }
-export declare function SectionSearchProvider({ children, query, refinements, maxItems, sortBy, enabled, sectionId, }: SectionSearchProviderProps): React.JSX.Element;
+export declare function SectionSearchProvider({ children, query, refinements, maxItems, sortBy, enabled, sectionId, searchOptions, }: SectionSearchProviderProps): React.JSX.Element;
 //# sourceMappingURL=SectionSearchProvider.d.ts.map

package/dist/components/section-primitives/SectionSearchProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SectionSearchProvider.d.ts","sourceRoot":"","sources":["../../../src/components/section-primitives/SectionSearchProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AAIzE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,WAAgB,EAChB,QAAa,EACb,MAAM,EACN,OAAc,EACd,SAAS,GACV,EAAE,0BAA0B,qBAgF5B"}
+{"version":3,"file":"SectionSearchProvider.d.ts","sourceRoot":"","sources":["../../../src/components/section-primitives/SectionSearchProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AAIzE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAsBD,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,WAAgB,EAChB,QAAa,EACb,MAAM,EACN,OAAc,EACd,SAAS,EACT,aAAa,GACd,EAAE,0BAA0B,qBAiF5B"}

package/dist/components/section-primitives/SectionSearchProvider.js

@@ -35,7 +35,7 @@ function extractTotal(response) {
         return Number(data.data.total_results);
     return 0;
 }
-export function SectionSearchProvider({ children, query, refinements = [], maxItems = 12, sortBy, enabled = true, sectionId, }) {
+export function SectionSearchProvider({ children, query, refinements = [], maxItems = 12, sortBy, enabled = true, sectionId, searchOptions, }) {
     const { client } = useSearchContext();
     const [items, setItems] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -53,6 +53,7 @@ export function SectionSearchProvider({ children, query, refinements = [], maxIt
         setLoading(true);
         setError(null);
         const options = {
+            ...searchOptions,
             per_page: maxItems,
             page: 1,
         };
@@ -80,7 +81,7 @@ export function SectionSearchProvider({ children, query, refinements = [], maxIt
         return () => {
             cancelled = true;
         };
-    }, [client, enabled, query, maxItems, sortBy, refinements]);
+    }, [client, enabled, query, maxItems, sortBy, refinements, searchOptions]);
     const trackClick = useCallback((item, position) => {
         if (!client?.trackEvent)
             return;

package/dist/components/suggestions/AmazonDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmazonDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/AmazonDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiV9D,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,yFAod1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AmazonDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/AmazonDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkV9D,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,6CAA6C;IAC7C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,yFAid1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/suggestions/AmazonDropdown.js

@@ -9,7 +9,7 @@
  * - Clean, functional design
  */
 import React, { useState, useRef, useEffect, useCallback, forwardRef, useImperativeHandle, useMemo, } from 'react';
-import { extractSuggestion, extractProduct, extractCategory, formatPrice, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, extractProduct, extractCategory, formatPrice, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useResponsive, touchTargets } from './styles/responsive';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
@@ -485,9 +485,7 @@ export const AmazonDropdown = forwardRef(function AmazonDropdown(props, ref) {
                                 React.createElement("div", { style: styles.suggestionIcon },
                                     React.createElement(SearchIcon, null)),
                                 React.createElement("div", { style: styles.suggestionContent },
-                                    React.createElement("div", { style: styles.suggestionQuery, dangerouslySetInnerHTML: {
-                                            __html: highlightText(suggestion.query, query, { className: 'highlight' })
-                                        } }),
+                                    React.createElement("div", { style: styles.suggestionQuery }, highlightTextReact(suggestion.query, query, { className: 'highlight' })),
                                     showDepartments && firstCategory && (React.createElement("div", { style: styles.suggestionContext },
                                         React.createElement("span", { style: styles.suggestionDepartment },
                                             "in ",

package/dist/components/suggestions/GoogleDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GoogleDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/GoogleDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgP9D,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,4BAA4B;IAC5B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,yFA4U1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"GoogleDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/GoogleDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAiP9D,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,+BAA+B;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2BAA2B;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,4BAA4B;IAC5B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,yFAuU1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/suggestions/GoogleDropdown.js

@@ -9,7 +9,7 @@
  * - Voice search integration ready
  */
 import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react';
-import { extractSuggestion, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useResponsive } from './styles/responsive';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
@@ -309,11 +309,7 @@ export const GoogleDropdown = forwardRef(function GoogleDropdown(props, ref) {
                 item.type === 'trending' ? React.createElement(TrendingIcon, null) :
                     React.createElement(SearchIcon, null)),
             React.createElement("div", { style: styles.itemContent },
-                React.createElement("span", { style: styles.itemText, dangerouslySetInnerHTML: {
-                        __html: query
-                            ? highlightText(item.query, query, { tag: 'b' })
-                            : item.query
-                    } }),
+                React.createElement("span", { style: styles.itemText }, query ? highlightTextReact(item.query, query, { tag: 'b' }) : item.query),
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
                     item.type === 'trending' && showTrendingIndicator && (React.createElement("span", { style: styles.trending },
                         React.createElement(TrendingIcon, null),

package/dist/components/suggestions/MinimalDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MinimalDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/MinimalDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA4K9D,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,0FAqU3B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"MinimalDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/MinimalDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA6K9D,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,eAAe,0FAkU3B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/suggestions/MinimalDropdown.js

@@ -8,7 +8,7 @@
  * - Perfect for editorial/content sites
  */
 import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react';
-import { extractSuggestion, extractProduct, formatPrice, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, extractProduct, formatPrice, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useResponsive } from './styles/responsive';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
@@ -272,9 +272,7 @@ export const MinimalDropdown = forwardRef(function MinimalDropdown(props, ref) {
                     return (React.createElement("div", { key: s.id || `suggestion-${idx}`, "data-index": itemIdx, style: mergeStyles(styles.item, isActive ? styles.itemActive : undefined, isLast ? styles.itemLast : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => setActiveIndex(itemIdx) },
                         showIndices && (React.createElement("span", { style: styles.itemIndex }, itemIdx + 1)),
                         React.createElement("div", { style: styles.itemContent },
-                            React.createElement("div", { style: styles.itemQuery, dangerouslySetInnerHTML: {
-                                    __html: highlightText(s.query, query, { tag: 'mark' })
-                                } }),
+                            React.createElement("div", { style: styles.itemQuery }, highlightTextReact(s.query, query, { tag: 'mark' })),
                             s.count && (React.createElement("div", { style: styles.itemMeta },
                                 s.count.toLocaleString(),
                                 " results"))),

package/dist/components/suggestions/MobileSheetDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileSheetDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/MobileSheetDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuS9D,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,8FAgc/B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"MobileSheetDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/MobileSheetDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAwS9D,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,8FA6b/B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/suggestions/MobileSheetDropdown.js

@@ -9,7 +9,7 @@
  * - Optimized for small screens
  */
 import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react';
-import { extractSuggestion, extractProduct, formatPrice, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, extractProduct, formatPrice, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
 // Styles
@@ -30,7 +30,7 @@ const createStyles = () => ({
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: 'var(--seekora-bg-surface, #fff)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
         borderRadius: '16px 16px 0 0',
         boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.15)',
         fontFamily: 'var(--seekora-font-family, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif)',
@@ -54,17 +54,17 @@ const createStyles = () => ({
     dragBar: {
         width: '36px',
         height: '5px',
-        backgroundColor: 'var(--seekora-border-color, #e0e0e0)',
+        backgroundColor: 'var(--seekora-border-color, rgba(128,128,128,0.2))',
         borderRadius: '3px',
     },
     header: {
         padding: '0 16px 16px',
-        borderBottom: '1px solid var(--seekora-border-color, #f0f0f0)',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
     },
     searchContainer: {
         display: 'flex',
         alignItems: 'center',
-        backgroundColor: 'var(--seekora-bg-secondary, #f5f5f5)',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
         borderRadius: '12px',
         padding: '12px 16px',
         gap: '12px',
@@ -80,7 +80,7 @@ const createStyles = () => ({
         border: 'none',
         background: 'transparent',
         fontSize: '17px',
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
         outline: 'none',
     },
     cancelBtn: {
@@ -128,11 +128,11 @@ const createStyles = () => ({
         cursor: 'pointer',
         transition: 'background-color 100ms',
         minHeight: '56px', // Touch-friendly
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     itemActive: {
-        backgroundColor: 'var(--seekora-bg-hover, #f2f2f7)',
-        color: 'var(--seekora-text-primary, #000)',
+        backgroundColor: 'var(--seekora-bg-hover, rgba(255, 255, 255, 0.1))',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     itemIcon: {
         width: '24px',
@@ -154,14 +154,14 @@ const createStyles = () => ({
     },
     itemTitle: {
         fontSize: '17px',
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
     itemSubtitle: {
         fontSize: '15px',
-        color: 'var(--seekora-text-secondary, #8e8e93)',
+        color: 'var(--seekora-text-secondary, inherit)',
         marginTop: '2px',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -194,7 +194,7 @@ const createStyles = () => ({
     },
     productTitle: {
         fontSize: '15px',
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
         marginBottom: '4px',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -203,19 +203,19 @@ const createStyles = () => ({
     productPrice: {
         fontSize: '15px',
         fontWeight: 600,
-        color: 'var(--seekora-text-primary, #000)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     footer: {
         padding: '12px 16px',
         paddingBottom: 'calc(12px + env(safe-area-inset-bottom, 0px))',
-        borderTop: '1px solid var(--seekora-border-color, #f0f0f0)',
-        backgroundColor: 'var(--seekora-bg-secondary, #f8f8f8)',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
     },
     footerBtn: {
         width: '100%',
         padding: '16px',
         backgroundColor: 'var(--seekora-primary, #007aff)',
-        color: 'var(--seekora-text-inverse, #ffffff)',
+        color: 'var(--seekora-text-inverse, transparent)',
         border: 'none',
         borderRadius: '12px',
         fontSize: '17px',
@@ -227,12 +227,12 @@ const createStyles = () => ({
         alignItems: 'center',
         justifyContent: 'center',
         padding: '60px',
-        color: 'var(--seekora-text-secondary, #8e8e93)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     spinner: {
         width: '28px',
         height: '28px',
-        border: '3px solid var(--seekora-border-color, #e5e5ea)',
+        border: '3px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
         borderTopColor: 'var(--seekora-primary, #007aff)',
         borderRadius: '50%',
         animation: 'seekora-spin 0.8s linear infinite',
@@ -240,7 +240,7 @@ const createStyles = () => ({
     empty: {
         padding: '60px 20px',
         textAlign: 'center',
-        color: 'var(--seekora-text-secondary, #8e8e93)',
+        color: 'var(--seekora-text-secondary, inherit)',
         fontSize: '17px',
     },
     emptyIcon: {
@@ -450,9 +450,7 @@ export const MobileSheetDropdown = forwardRef(function MobileSheetDropdown(props
                             React.createElement("div", { style: styles.itemIcon },
                                 React.createElement(SearchIcon, null)),
                             React.createElement("div", { style: styles.itemContent },
-                                React.createElement("div", { style: styles.itemTitle, dangerouslySetInnerHTML: {
-                                        __html: highlightText(s.query, inputValue, { tag: 'strong' })
-                                    } }),
+                                React.createElement("div", { style: styles.itemTitle }, highlightTextReact(s.query, inputValue, { tag: 'strong' })),
                                 s.count && (React.createElement("div", { style: styles.itemSubtitle },
                                     s.count,
                                     " results"))),

package/dist/components/suggestions/PinterestDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinterestDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/PinterestDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAsU9D,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,yBAAyB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;CACvD;AAED,eAAO,MAAM,iBAAiB,4FA2X7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PinterestDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/PinterestDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuU9D,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB;IAC/D,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,yBAAyB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC;CACvD;AAED,eAAO,MAAM,iBAAiB,4FAsX7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/suggestions/PinterestDropdown.js

@@ -9,7 +9,7 @@
  * - Color palette extraction ready
  */
 import React, { useState, useRef, useCallback, forwardRef, useImperativeHandle, useMemo, useEffect, } from 'react';
-import { extractSuggestion, extractProduct, extractCategory, formatPrice, highlightText, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
+import { extractSuggestion, extractProduct, extractCategory, formatPrice, highlightTextReact, cx, mergeStyles, generateCSSVariables, scrollIntoViewIfNeeded, } from './utils';
 import { useResponsive } from './styles/responsive';
 import { useInjectResponsiveStyles } from './styles';
 // ============================================================================
@@ -402,11 +402,7 @@ export const PinterestDropdown = forwardRef(function PinterestDropdown(props, re
                     setHoveredSuggestion(idx);
                     setActiveIndex(idx);
                 }, onMouseLeave: () => setHoveredSuggestion(-1) },
-                React.createElement("span", { style: styles.suggestionIcon, dangerouslySetInnerHTML: {
-                        __html: query
-                            ? highlightText(s.query, query, { tag: 'strong' })
-                            : s.query
-                    } })))))),
+                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, null),

package/dist/components/suggestions/ShopifyDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShopifyDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/ShopifyDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAsU9D,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,0FA8W3B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ShopifyDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions/ShopifyDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAuU9D,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8BAA8B;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,0FA2W3B,CAAC;AAEF,eAAe,eAAe,CAAC"}