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

package/dist/components/suggestions/MobileSheetDropdown.js

@@ -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: {

package/dist/components/suggestions/ShopifyDropdown.js

@@ -23,8 +23,8 @@ const createStyles = (isMobile = false) => ({
         right: 0,
         bottom: isMobile ? 0 : 'auto',
         marginTop: isMobile ? 0 : '8px',
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        color: 'var(--seekora-text-primary, #121212)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        color: 'var(--seekora-text-primary, inherit)',
         borderRadius: isMobile ? 0 : '16px',
         boxShadow: isMobile ? 'none' : '0 4px 30px rgba(0, 0, 0, 0.12)',
         overflow: 'hidden',
@@ -42,14 +42,14 @@ const createStyles = (isMobile = false) => ({
         overflowY: 'auto',
     },
     leftPanel: {
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        borderRight: isMobile ? 'none' : '1px solid var(--seekora-border-color, #e8e8e1)',
-        borderBottom: isMobile ? '1px solid var(--seekora-border-color, #e8e8e1)' : 'none',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        borderRight: isMobile ? 'none' : '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderBottom: isMobile ? '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))' : 'none',
         display: 'flex',
         flexDirection: 'column',
     },
     rightPanel: {
-        backgroundColor: 'var(--seekora-bg-secondary, #fafafa)',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
         padding: isMobile ? '16px' : '24px',
         display: 'flex',
         flexDirection: 'column',
@@ -64,7 +64,7 @@ const createStyles = (isMobile = false) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        borderBottom: '1px solid var(--seekora-border-color, #e8e8e1)',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
     },
     sectionTitle: {
         fontSize: '11px',
@@ -75,7 +75,7 @@ const createStyles = (isMobile = false) => ({
     },
     viewAllLink: {
         fontSize: '12px',
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         textDecoration: 'underline',
         cursor: 'pointer',
     },
@@ -89,11 +89,11 @@ const createStyles = (isMobile = false) => ({
         minHeight: '48px',
         margin: '4px 8px',
         borderRadius: '10px',
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     suggestionItemActive: {
-        backgroundColor: 'var(--seekora-bg-hover, #f5f5f5)',
-        color: 'var(--seekora-text-primary, #121212)',
+        backgroundColor: 'var(--seekora-bg-hover, rgba(255, 255, 255, 0.1))',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     suggestionIcon: {
         display: 'flex',
@@ -108,12 +108,12 @@ const createStyles = (isMobile = false) => ({
     },
     suggestionQuery: {
         fontSize: '14px',
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         fontWeight: 400,
     },
     suggestionMeta: {
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #666)',
+        color: 'var(--seekora-text-secondary, inherit)',
         marginTop: '2px',
     },
     suggestionArrow: {
@@ -131,29 +131,29 @@ const createStyles = (isMobile = false) => ({
         display: 'grid',
         gridTemplateColumns: 'repeat(2, 1fr)',
         gap: '1px',
-        backgroundColor: 'var(--seekora-border-color, #e8e8e1)',
-        borderTop: '1px solid var(--seekora-border-color, #e8e8e1)',
+        backgroundColor: 'var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
     },
     collectionItem: {
-        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
-        color: 'var(--seekora-text-primary, #121212)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        color: 'var(--seekora-text-primary, inherit)',
         padding: '16px 20px',
         cursor: 'pointer',
         transition: 'background-color 150ms',
     },
     collectionItemHover: {
-        backgroundColor: 'var(--seekora-bg-hover, #f0f0f0)',
-        color: 'var(--seekora-text-primary, #121212)',
+        backgroundColor: 'var(--seekora-bg-hover, rgba(255, 255, 255, 0.1))',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     collectionName: {
         fontSize: '13px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         marginBottom: '4px',
     },
     collectionCount: {
         fontSize: '11px',
-        color: 'var(--seekora-text-secondary, #666)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     heroProduct: {
         marginBottom: '24px',
@@ -169,13 +169,13 @@ const createStyles = (isMobile = false) => ({
     heroTitle: {
         fontSize: '16px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         marginBottom: '8px',
         lineHeight: 1.3,
     },
     heroBrand: {
         fontSize: '12px',
-        color: 'var(--seekora-text-secondary, #666)',
+        color: 'var(--seekora-text-secondary, inherit)',
         marginBottom: '12px',
         textTransform: 'uppercase',
         letterSpacing: '0.05em',
@@ -189,7 +189,7 @@ const createStyles = (isMobile = false) => ({
     heroPrice: {
         fontSize: '18px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     heroComparePrice: {
         fontSize: '14px',
@@ -207,8 +207,8 @@ const createStyles = (isMobile = false) => ({
     heroButton: {
         width: '100%',
         padding: '14px 20px',
-        backgroundColor: 'var(--seekora-text-primary, #121212)',
-        color: 'var(--seekora-bg-surface, #ffffff)',
+        backgroundColor: 'var(--seekora-text-primary, inherit)',
+        color: 'var(--seekora-bg-surface, transparent)',
         border: 'none',
         borderRadius: '2px',
         fontSize: '13px',
@@ -219,8 +219,8 @@ const createStyles = (isMobile = false) => ({
         transition: 'background-color 150ms',
     },
     heroButtonHover: {
-        backgroundColor: 'var(--seekora-text-secondary, #666666)',
-        color: 'var(--seekora-bg-surface, #ffffff)',
+        backgroundColor: 'var(--seekora-text-secondary, inherit)',
+        color: 'var(--seekora-bg-surface, transparent)',
     },
     productsScroll: {
         flex: 1,
@@ -248,7 +248,7 @@ const createStyles = (isMobile = false) => ({
     },
     productTitle: {
         fontSize: '12px',
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         marginBottom: '4px',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -257,20 +257,20 @@ const createStyles = (isMobile = false) => ({
     productPrice: {
         fontSize: '12px',
         fontWeight: 500,
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
     },
     footer: {
         padding: '12px 20px',
-        borderTop: '1px solid var(--seekora-border-color, #e8e8e1)',
-        backgroundColor: 'var(--seekora-bg-secondary, #fafafa)',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         fontSize: '11px',
-        color: 'var(--seekora-text-secondary, #666)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     footerLink: {
-        color: 'var(--seekora-text-primary, #121212)',
+        color: 'var(--seekora-text-primary, inherit)',
         textDecoration: 'underline',
         cursor: 'pointer',
     },
@@ -279,13 +279,13 @@ const createStyles = (isMobile = false) => ({
         alignItems: 'center',
         justifyContent: 'center',
         padding: '60px',
-        color: 'var(--seekora-text-secondary, #666)',
+        color: 'var(--seekora-text-secondary, inherit)',
     },
     spinner: {
         width: '24px',
         height: '24px',
-        border: '2px solid var(--seekora-border-color, #e8e8e1)',
-        borderTopColor: 'var(--seekora-text-primary, #121212)',
+        border: '2px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderTopColor: 'var(--seekora-text-primary, inherit)',
         borderRadius: '50%',
         animation: 'seekora-spin 0.8s linear infinite',
     },

package/dist/components/suggestions-primitives/DropdownPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownPanel.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/DropdownPanel.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAqB,EACrB,GAAY,EACZ,IAAQ,EACR,KAAK,EACL,KAAc,EACd,SAAkB,EAClB,MAAa,EACb,SAAS,EACT,KAAK,EACL,mBAA0B,EAC1B,aAAoB,GACrB,EAAE,kBAAkB,4BAqDpB"}
+{"version":3,"file":"DropdownPanel.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/DropdownPanel.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAmB9D,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAqB,EACrB,GAAY,EACZ,IAAQ,EACR,KAAK,EACL,KAAc,EACd,SAAkB,EAClB,MAAyB,EACzB,SAAS,EACT,KAAK,EACL,mBAA0B,EAC1B,aAAoB,GACrB,EAAE,kBAAkB,4BAqDpB"}

package/dist/components/suggestions-primitives/DropdownPanel.js

@@ -7,7 +7,20 @@
 import React, { useRef, useEffect, useCallback } from 'react';
 import { useSuggestionsContext } from './SuggestionsContext';
 import { clsx } from 'clsx';
-export function DropdownPanel({ children, position = 'absolute', top = '100%', left = 0, right, width = '100%', maxHeight = '80vh', zIndex = 1000, className, style, closeOnClickOutside = true, closeOnEscape = true, }) {
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
+// Z-index scale for consistent layering
+const Z_INDEX = {
+    dropdown: 100,
+    modal: 200,
+    overlay: 300,
+    tooltip: 50,
+};
+export function DropdownPanel({ children, position = 'absolute', top = '100%', left = 0, right, width = '100%', maxHeight = '80vh', zIndex = Z_INDEX.dropdown, className, style, closeOnClickOutside = true, closeOnEscape = true, }) {
     const { isOpen, close } = useSuggestionsContext();
     const panelRef = useRef(null);
     useEffect(() => {
@@ -46,7 +59,7 @@ export function DropdownPanel({ children, position = 'absolute', top = '100%', l
         overflow: 'auto',
         backgroundColor: 'var(--seekora-bg-surface, #fff)',
         border: '1px solid var(--seekora-border-color, #e5e7eb)',
-        borderRadius: 'var(--seekora-border-radius, 6px)',
+        borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
         boxShadow: 'var(--seekora-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05))',
         marginTop: 4,
     };

package/dist/components/suggestions-primitives/ItemCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemCard.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ItemCard.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE,sFAAsF;AACtF,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;AAE/F,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,qFAAqF;IACrF,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACnC,mDAAmD;IACnD,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;IAC1E,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAwBD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAa,EACb,YAAuB,EACvB,MAAmB,EACnB,aAAa,EACb,qBAA2C,EAC3C,gBAAwB,GACzB,EAAE,aAAa,qBAyFf"}
+{"version":3,"file":"ItemCard.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ItemCard.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAehE,sFAAsF;AACtF,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;AAE/F,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,qFAAqF;IACrF,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACnC,mDAAmD;IACnD,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;IAC1E,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA0BD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAa,EACb,YAAuB,EACvB,MAAmB,EACnB,aAAa,EACb,qBAA2C,EAC3C,gBAAwB,GACzB,EAAE,aAAa,qBAyFf"}

package/dist/components/suggestions-primitives/ItemCard.js

@@ -9,6 +9,17 @@ import React from 'react';
 import { clsx } from 'clsx';
 import { ImageDisplay } from '../primitives/ImageDisplay';
 import { ActionButtons } from '../primitives/ActionButtons';
+const TRANSITIONS = {
+    fast: '150ms ease-in-out',
+    normal: '200ms ease-in-out',
+    slow: '300ms ease-in-out',
+};
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
 const cardStyle = {
     display: 'flex',
     flexDirection: 'column',
@@ -16,19 +27,21 @@ const cardStyle = {
     padding: 8,
     cursor: 'pointer',
     border: 'none',
-    borderRadius: 'var(--seekora-border-radius, 6px)',
+    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
     backgroundColor: 'transparent',
     textAlign: 'left',
     fontSize: 'inherit',
     fontFamily: 'inherit',
-    transition: 'background-color 120ms ease',
+    transition: `background-color ${TRANSITIONS.fast}`,
 };
 const imgStyle = {
     width: '100%',
-    aspectRatio: '1',
+    aspectRatio: 'var(--seekora-card-aspect-ratio, 1)',
     objectFit: 'cover',
-    borderRadius: 4,
+    borderRadius: BORDER_RADIUS.sm,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    display: 'block',
+    overflow: 'hidden',
 };
 export function ItemCard({ item, position, onSelect, className, style, asLink = true, imageVariant = 'single', layout = 'vertical', actionButtons, actionButtonsPosition = 'overlay-top-right', showActionLabels = false, }) {
     const images = item.images?.length ? item.images : item.image ?? item.imageUrl ? [String(item.image ?? item.imageUrl)] : [];
@@ -36,12 +49,12 @@ export function ItemCard({ item, position, onSelect, className, style, asLink =
     const description = item.description ?? item.secondaryText;
     const href = item.url;
     const isHorizontal = layout === 'horizontal';
-    const imageBlock = images.length > 0 ? (React.createElement("div", { style: { position: 'relative', ...(isHorizontal ? { width: 80, flexShrink: 0 } : {}) } },
+    const imageBlock = images.length > 0 ? (React.createElement("div", { style: { position: 'relative', overflow: 'hidden', borderRadius: 4, ...(isHorizontal ? { minWidth: 80, flexBasis: '20%', maxWidth: 120, 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, ...(isHorizontal ? { width: 80, height: 80, flexShrink: 0 } : {}) }, "aria-hidden": true }));
+        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, ...(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 } }, String(title)),
-        description ? (React.createElement("span", { className: "seekora-item-card-description", style: { fontSize: '0.8125rem', color: 'var(--seekora-text-secondary, #6b7280)', lineHeight: 1.3 } }, String(description))) : null,
+        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 === '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' } },
         imageBlock,

package/dist/components/suggestions-primitives/ItemGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemGrid.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ItemGrid.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAExD,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,WAAW;IAC5C,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,6DAA6D;IAC7D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAC/C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAC7C,8DAA8D;IAC9D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2BD,wBAAgB,QAAQ,CAAC,CAAC,GAAG,WAAW,EAAE,EACxC,KAAK,EACL,WAAW,EACX,SAA2C,EAC3C,YAAiD,EACjD,YAAiD,EACjD,kBAA6D,EAC7D,UAA6C,EAC7C,UAAU,EACV,QAAa,EACb,OAAW,EACX,SAAS,EACT,KAAK,EACL,aAAa,GACd,EAAE,aAAa,CAAC,CAAC,CAAC,4BA2BlB"}
+{"version":3,"file":"ItemGrid.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ItemGrid.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAUxD,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,WAAW;IAC5C,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,6DAA6D;IAC7D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAC/C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAC7C,8DAA8D;IAC9D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0BD,wBAAgB,QAAQ,CAAC,CAAC,GAAG,WAAW,EAAE,EACxC,KAAK,EACL,WAAW,EACX,SAA2C,EAC3C,YAAiD,EACjD,YAAiD,EACjD,kBAA6D,EAC7D,UAA6C,EAC7C,UAAU,EACV,QAAa,EACb,OAAW,EACX,SAAS,EACT,KAAK,EACL,aAAa,GACd,EAAE,aAAa,CAAC,CAAC,CAAC,4BA2BlB"}

package/dist/components/suggestions-primitives/ItemGrid.js

@@ -8,11 +8,17 @@
 import React from 'react';
 import { clsx } from 'clsx';
 import { ItemCard } from './ItemCard';
+const SPACING = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+};
 const defaultGridStyle = {
     display: 'grid',
-    gridTemplateColumns: 'repeat(var(--seekora-grid-cols, 4), minmax(0, 1fr))',
-    gap: 12,
-    padding: 12,
+    gap: SPACING.md,
+    padding: SPACING.md,
 };
 function toGenericItem(item, getItemId, getItemTitle, getItemImage, getItemDescription, getItemUrl) {
     return {

package/dist/components/suggestions-primitives/ProductCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductCard.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAA2C,MAAM,0BAA0B,CAAC;AACrG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAWjE,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;AAEnG,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,wDAAwD;IACxD,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,2EAA2E;IAC3E,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,uFAAuF;IACvF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;IAC1E,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kGAAkG;IAClG,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACpD,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAuB,EACvB,aAAa,EACb,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,aAAa,EACb,qBAA2C,EAC3C,gBAAwB,EACxB,eAAuB,EACvB,aAAsB,EACtB,cAAoB,GACrB,EAAE,gBAAgB,qBAuLlB"}
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductCard.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAA2C,MAAM,0BAA0B,CAAC;AACrG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAwBjE,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAC;AAEnG,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,wDAAwD;IACxD,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,2EAA2E;IAC3E,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,uFAAuF;IACvF,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7D,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,mBAAmB,GAAG,gBAAgB,GAAG,QAAQ,CAAC;IAC1E,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kGAAkG;IAClG,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACpD,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAsBD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,YAAuB,EACvB,aAAa,EACb,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,aAAa,EACb,qBAAgC,EAChC,gBAAwB,EACxB,eAAuB,EACvB,aAAsB,EACtB,cAAoB,GACrB,EAAE,gBAAgB,qBA+LlB"}

package/dist/components/suggestions-primitives/ProductCard.js

@@ -8,6 +8,17 @@ import React, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { ImageDisplay } from '../primitives/ImageDisplay';
 import { extractBadges, getPriceRange, findVariantBySelections } from '../suggestions/utils';
+const TRANSITIONS = {
+    fast: '150ms ease-in-out',
+    normal: '200ms ease-in-out',
+    slow: '300ms ease-in-out',
+};
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
 import { MinimalLayout, StandardLayout, DetailedLayout, CompactLayout, HorizontalLayout, } from './ProductCardLayouts';
 const cardStyle = {
     display: 'flex',
@@ -16,19 +27,19 @@ const cardStyle = {
     padding: 8,
     cursor: 'pointer',
     border: 'none',
-    borderRadius: 'var(--seekora-border-radius, 6px)',
+    borderRadius: `var(--seekora-border-radius, ${BORDER_RADIUS.md}px)`,
     backgroundColor: 'transparent',
     textAlign: 'left',
-    transition: 'background-color 120ms ease',
+    transition: `background-color ${TRANSITIONS.fast}`,
 };
 const imgStyle = {
     width: '100%',
     aspectRatio: '1',
     objectFit: 'cover',
-    borderRadius: 4,
+    borderRadius: BORDER_RADIUS.sm,
     backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
 };
-export function ProductCard({ product, position, section, tabId, onSelect, className, style, imageVariant = 'single', displayConfig, onVariantHover, onVariantClick, selectedVariants, asLink, actionButtons, actionButtonsPosition = 'overlay-top-right', showActionLabels = false, enableImageZoom = false, imageZoomMode = 'both', imageZoomLevel = 2.5, }) {
+export 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
     const selectedVariant = useMemo(() => {
         if (!selectedVariants || !product.options || !product.variants)
@@ -73,9 +84,11 @@ export function ProductCard({ product, position, section, tabId, onSelect, class
     const price = effectivePrice;
     // If no displayConfig, render original minimal layout (backwards compat)
     if (!displayConfig) {
-        return (React.createElement("button", { type: "button", className: clsx('seekora-suggestions-product-card', className), style: { ...cardStyle, ...style }, onMouseDown: (e) => {
-                e.preventDefault();
-                onSelect();
+        return (React.createElement("div", { role: "button", tabIndex: 0, className: clsx('seekora-suggestions-product-card', className), style: { ...cardStyle, ...style }, onClick: () => onSelect(), onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onSelect();
+                }
             }, "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),
@@ -145,9 +158,11 @@ export function ProductCard({ product, position, section, tabId, onSelect, class
             }, "data-position": position, "data-section": section, "data-tab-id": tabId },
             React.createElement(LayoutComponent, { ...layoutProps })));
     }
-    return (React.createElement("button", { type: "button", className: rootClassName, style: rootStyle, onMouseDown: (e) => {
-            e.preventDefault();
-            onSelect();
+    return (React.createElement("div", { role: "button", tabIndex: 0, className: rootClassName, style: rootStyle, onClick: () => onSelect(), onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onSelect();
+            }
         }, "data-position": position, "data-section": section, "data-tab-id": tabId },
         React.createElement(LayoutComponent, { ...layoutProps })));
 }

package/dist/components/suggestions-primitives/ProductCardLayouts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductCardLayouts.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductCardLayouts.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProductCardLayouts.d.ts","sourceRoot":"","sources":["../../../src/components/suggestions-primitives/ProductCardLayouts.tsx"],"names":[],"mappings":"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"}