@athoscommerce/snap-preact 1.10.1-beta.150 → 1.12.0

package/dist/cjs/components/src/components/Molecules/Gallery/Gallery.js

@@ -0,0 +1,298 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gallery = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const compat_1 = require("preact/compat");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_2 = require("../../../hooks");
+const Button_1 = require("../../Atoms/Button");
+const Image_1 = require("../../Atoms/Image");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        position: 'fixed',
+        inset: 0,
+        zIndex: 10010, // above the quickview modal content (10006) and the dropdown portal (10007); full ladder in QuickviewModal defaultStyles
+        display: 'flex',
+        flexDirection: 'column',
+        background: 'rgba(0, 0, 0, 0.9)',
+        '& .ss__gallery__toolbar': {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '12px 16px',
+        },
+        // button and icon chrome (color, background, border) comes from Button/Icon props (not CSS)
+        // so that theme overrides targeting those components (e.g. `gallery button.zoom-in`) are not
+        // out-specified here — these rules stick to layout the sub-components have no props for
+        '& .ss__gallery__button': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 0,
+            boxSizing: 'border-box',
+            borderRadius: '4px',
+            width: '40px',
+            height: '40px',
+            fontSize: '1.3em',
+            lineHeight: 1,
+            cursor: 'pointer',
+            '&.ss__button--disabled': {
+                opacity: 0.4,
+                cursor: 'default',
+            },
+        },
+        '& .ss__gallery__counter': {
+            color: '#fff',
+            marginRight: 'auto',
+            padding: '0 8px',
+            fontSize: '0.9em',
+        },
+        '& .ss__gallery__stage': {
+            position: 'relative',
+            flex: '1 1 auto',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+        },
+        '& .ss__gallery__image': {
+            maxWidth: '90vw',
+            maxHeight: '80vh',
+            objectFit: 'contain',
+            userSelect: 'none',
+            touchAction: 'none',
+            transformOrigin: 'center center',
+            transition: 'transform 0.05s linear',
+        },
+        '& .ss__gallery__nav': {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            height: '100%',
+            width: '64px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 0,
+            boxSizing: 'border-box',
+            borderRadius: 0,
+            fontSize: '2em',
+            lineHeight: 1,
+            cursor: 'pointer',
+            zIndex: 1,
+            '&:hover': {
+                // a wash layered via backgroundImage so it composes with (rather than defeats)
+                // a backgroundColor set through Button props or theme overrides
+                backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.085))',
+            },
+        },
+        '& .ss__gallery__nav--prev': {
+            left: 0,
+        },
+        '& .ss__gallery__nav--next': {
+            right: 0,
+        },
+    });
+};
+exports.Gallery = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+        startIndex: 0,
+        zoomMin: 1,
+        zoomMax: 4,
+        zoomStep: 0.5,
+        swipeThreshold: 40,
+    };
+    const props = (0, utilities_1.mergeProps)('gallery', globalTheme, defaultProps, properties);
+    const { images, open, startIndex, onClose, alt, className, internalClassName } = props;
+    const zoomMin = props.zoomMin;
+    const zoomMax = props.zoomMax;
+    const zoomStep = props.zoomStep;
+    const swipeThreshold = props.swipeThreshold;
+    const clampZoom = (value) => Math.min(zoomMax, Math.max(zoomMin, value));
+    const [index, setIndex] = (0, hooks_1.useState)(startIndex || 0);
+    const [zoom, setZoom] = (0, hooks_1.useState)(zoomMin);
+    const [pan, setPan] = (0, hooks_1.useState)({ x: 0, y: 0 });
+    const dragRef = (0, hooks_1.useRef)(null);
+    const touchRef = (0, hooks_1.useRef)(null);
+    const count = images?.length || 0;
+    //initialize lang
+    const defaultLang = {
+        gallery: {
+            attributes: {
+                'aria-label': 'Image gallery',
+            },
+        },
+        zoomOutButton: {
+            attributes: {
+                'aria-label': 'Zoom out',
+            },
+        },
+        zoomInButton: {
+            attributes: {
+                'aria-label': 'Zoom in',
+            },
+        },
+        closeButton: {
+            attributes: {
+                'aria-label': 'Close gallery',
+            },
+        },
+        prevButton: {
+            attributes: {
+                'aria-label': 'Previous image',
+            },
+        },
+        nextButton: {
+            attributes: {
+                'aria-label': 'Next image',
+            },
+        },
+    };
+    //deep merge with props.lang
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {});
+    // Reset to the clicked image (and clear zoom/pan) whenever the gallery opens or the start changes.
+    (0, hooks_1.useEffect)(() => {
+        if (open) {
+            setIndex(Math.min(Math.max(startIndex || 0, 0), Math.max(count - 1, 0)));
+            setZoom(zoomMin);
+            setPan({ x: 0, y: 0 });
+        }
+    }, [open, startIndex, count]);
+    const goTo = (next) => {
+        if (count === 0)
+            return;
+        const wrapped = (next + count) % count;
+        setIndex(wrapped);
+        setZoom(zoomMin);
+        setPan({ x: 0, y: 0 });
+    };
+    const showPrev = () => goTo(index - 1);
+    const showNext = () => goTo(index + 1);
+    const zoomIn = () => setZoom((z) => clampZoom(z + zoomStep));
+    const zoomOut = () => setZoom((z) => {
+        const next = clampZoom(z - zoomStep);
+        if (next === zoomMin)
+            setPan({ x: 0, y: 0 });
+        return next;
+    });
+    // Keyboard controls while open.
+    (0, hooks_1.useEffect)(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            switch (e.key) {
+                case 'Escape':
+                    onClose && onClose();
+                    break;
+                case 'ArrowRight':
+                    showNext();
+                    break;
+                case 'ArrowLeft':
+                    showPrev();
+                    break;
+                case '+':
+                case '=':
+                    zoomIn();
+                    break;
+                case '-':
+                case '_':
+                    zoomOut();
+                    break;
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [open, index, count]);
+    // Dialog focus management — same pattern as QuickviewModal/QuickviewSlideout:
+    // remember what had focus before the gallery opened (the gallery portals to document.body,
+    // outside any surrounding focus trap), move focus into the gallery on open, restore on close.
+    const rootRef = (0, hooks_1.useRef)(null);
+    const previousFocusRef = (0, hooks_1.useRef)(null);
+    const wasOpenRef = (0, hooks_1.useRef)(false);
+    (0, hooks_1.useEffect)(() => {
+        const isOpenNow = Boolean(open && count > 0);
+        if (isOpenNow && !wasOpenRef.current) {
+            previousFocusRef.current = document.activeElement || null;
+            const closeEl = rootRef.current?.querySelector('.ss__gallery__close');
+            (closeEl || rootRef.current)?.focus();
+        }
+        else if (!isOpenNow && wasOpenRef.current) {
+            previousFocusRef.current?.focus?.();
+            previousFocusRef.current = null;
+        }
+        wasOpenRef.current = isOpenNow;
+    });
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    if (!open || count === 0)
+        return null;
+    // Drag-to-pan when zoomed in.
+    const onPointerDown = (e) => {
+        if (zoom <= zoomMin)
+            return;
+        // Block the browser defaults (native image drag, text selection) that would cancel the
+        // pointermove stream, and capture the pointer so the drag survives leaving the image bounds.
+        e.preventDefault();
+        e.currentTarget?.setPointerCapture?.(e.pointerId);
+        dragRef.current = { startX: e.clientX, startY: e.clientY, baseX: pan.x, baseY: pan.y };
+    };
+    const onPointerMove = (e) => {
+        if (!dragRef.current)
+            return;
+        setPan({ x: dragRef.current.baseX + (e.clientX - dragRef.current.startX), y: dragRef.current.baseY + (e.clientY - dragRef.current.startY) });
+    };
+    const endDrag = () => {
+        dragRef.current = null;
+    };
+    // Dismiss when the dark backdrop itself is clicked (not the image or a control). Works on
+    // the overlay root and the stage, both of which are `e.currentTarget` only for backdrop hits.
+    const onBackdropClick = (e) => {
+        if (e.target === e.currentTarget)
+            onClose && onClose();
+    };
+    // Mobile: horizontal touch-swipe paginates (only when not zoomed — zoom uses drag-to-pan).
+    const onTouchStart = (e) => {
+        if (e.touches && e.touches.length === 1) {
+            touchRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+        }
+    };
+    const onTouchEnd = (e) => {
+        const start = touchRef.current;
+        touchRef.current = null;
+        if (!start || zoom > zoomMin || count <= 1)
+            return;
+        const touch = e.changedTouches && e.changedTouches[0];
+        if (!touch)
+            return;
+        const dx = touch.clientX - start.x;
+        const dy = touch.clientY - start.y;
+        // Require a dominantly-horizontal swipe past the threshold.
+        if (Math.abs(dx) > swipeThreshold && Math.abs(dx) > Math.abs(dy)) {
+            if (dx < 0)
+                showNext();
+            else
+                showPrev();
+        }
+    };
+    const currentSrc = images[index];
+    return (0, compat_1.createPortal)((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__gallery', className, internalClassName), role: "dialog", "aria-modal": "true", ...mergedLang.gallery?.attributes, ref: (e) => {
+                rootRef.current = e;
+                (0, hooks_2.useA11y)(e, 0, true, () => onClose && onClose());
+            }, onClick: onBackdropClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__gallery__toolbar", children: [count > 1 && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__gallery__counter", children: [index + 1, " / ", count] })), (0, jsx_runtime_1.jsx)(Button_1.Button, { name: "zoom-out", internalClassName: "ss__gallery__button ss__gallery__zoom-out", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.12)", borderColor: "transparent", icon: { icon: 'minus', color: 'currentColor' }, lang: { button: lang.zoomOutButton }, disabled: zoom <= zoomMin, onClick: zoomOut, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { name: "zoom-in", internalClassName: "ss__gallery__button ss__gallery__zoom-in", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.12)", borderColor: "transparent", icon: { icon: 'plus', color: 'currentColor' }, lang: { button: lang.zoomInButton }, disabled: zoom >= zoomMax, onClick: zoomIn, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { name: "close", internalClassName: "ss__gallery__button ss__gallery__close", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.12)", borderColor: "transparent", icon: { icon: 'close', color: 'currentColor' }, lang: { button: lang.closeButton }, onClick: () => onClose && onClose(), theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__gallery__stage", onClick: onBackdropClick, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, children: [count > 1 && ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "prev", internalClassName: "ss__gallery__nav ss__gallery__nav--prev", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.06)", borderColor: "transparent", icon: { icon: 'angle-left', color: 'currentColor' }, lang: { button: lang.prevButton }, onClick: showPrev, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) })), (0, jsx_runtime_1.jsx)(Image_1.Image, { internalClassName: "ss__gallery__image", src: currentSrc, alt: alt || '', draggable: false, style: {
+                                transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                                cursor: zoom > zoomMin ? (dragRef.current ? 'grabbing' : 'grab') : 'default',
+                            }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerLeave: endDrag, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }), count > 1 && ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "next", internalClassName: "ss__gallery__nav ss__gallery__nav--next", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.06)", borderColor: "transparent", icon: { icon: 'angle-right', color: 'currentColor' }, lang: { button: lang.nextButton }, onClick: showNext, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }))] })] }) }), document.body);
+});

package/dist/cjs/components/src/components/{Templates/Chat → Molecules/Gallery}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Chat"), exports);
+__exportStar(require("./Gallery"), exports);

package/dist/cjs/components/src/components/Molecules/Grid/Grid.js

@@ -156,22 +156,18 @@ exports.Grid = (0, mobx_react_lite_1.observer)((properties) => {
     }
     // selection state
     const [selection, setSelection] = (0, hooks_1.useState)(selected || []);
-    // original selection state
-    const [originalSelected] = (0, hooks_1.useState)(selected || []);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = (0, hooks_1.useState)(() => (0, utilities_1.selectionKey)(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = (0, utilities_1.selectionKey)(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     const makeSelection = (e, option) => {
         if (multiSelect) {
             let newArray;

package/dist/cjs/components/src/components/Molecules/List/List.js

@@ -101,22 +101,18 @@ exports.List = (0, mobx_react_lite_1.observer)((properties) => {
     }
     // selection state
     const [selection, setSelection] = (0, hooks_1.useState)(selected || []);
-    // original selection state
-    const [originalSelected] = (0, hooks_1.useState)(selected || []);
+    // last 'selected' prop seen - comparing against the previous prop rather than the mount time
+    // prop keeps a selection made here from being reverted while the store catches up, without
+    // missing a 'selected' change back to a value it has held before
+    const [prevSelected, setPrevSelected] = (0, hooks_1.useState)(() => (0, utilities_1.selectionKey)(selected));
     // reset selection if 'selected' prop changes
-    try {
-        if (selected) {
-            const originalSelectedstr = JSON.stringify(originalSelected);
-            const selectedstr = JSON.stringify(selected);
-            const selectionstr = JSON.stringify(selection);
-            if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
-                setSelection(selected);
-            }
+    if (selected) {
+        const selectedKey = (0, utilities_1.selectionKey)(selected);
+        if (selectedKey !== prevSelected) {
+            setPrevSelected(selectedKey);
+            setSelection(selected);
         }
     }
-    catch (e) {
-        // noop
-    }
     const makeSelection = (e, option) => {
         let newArray;
         if (multiSelect) {

package/dist/cjs/components/src/components/Molecules/Modal/Modal.js

@@ -118,11 +118,28 @@ exports.Modal = (0, mobx_react_lite_1.observer)((properties) => {
             document.body.style.overflow = '';
         };
     }, [showContent, lockScroll]);
+    // The resize listener below is registered once (on mount), so it must read the open/lock state
+    // through refs — capturing `showContent` directly would freeze its mount-time value in the
+    // listener closure. The quickview modal mounts open, so that stale `true` would re-lock the
+    // page on any resize after the modal was closed.
+    const showContentRef = (0, hooks_1.useRef)(showContent);
+    const lockScrollRef = (0, hooks_1.useRef)(lockScroll);
+    showContentRef.current = showContent;
+    lockScrollRef.current = lockScroll;
     (0, hooks_1.useEffect)(() => {
         const existingButton = buttonSelector ? (typeof buttonSelector === 'string' ? document.querySelector(buttonSelector) : buttonSelector) : null;
+        // Re-asserts the scroll lock after a resize: other components (e.g. Slideout) write
+        // `document.body.style.overflow` on render and can clobber the lock while the modal is open.
+        // The delay lets those renders settle first; `unmounted` keeps a pending re-lock from firing
+        // after cleanup has already released the body.
+        let unmounted = false;
+        let overflowTimeout;
         const debouncedHandleResize = (0, snap_toolbox_1.debounce)(() => {
-            setTimeout(() => {
-                if (showContent && lockScroll) {
+            clearTimeout(overflowTimeout);
+            overflowTimeout = setTimeout(() => {
+                if (unmounted)
+                    return;
+                if (showContentRef.current && lockScrollRef.current) {
                     document.body.style.overflow = 'hidden';
                 }
                 else {
@@ -141,6 +158,8 @@ exports.Modal = (0, mobx_react_lite_1.observer)((properties) => {
         }
         window.addEventListener('resize', debouncedHandleResize);
         return () => {
+            unmounted = true;
+            clearTimeout(overflowTimeout);
             window.removeEventListener('resize', debouncedHandleResize);
             if (existingButton) {
                 existingButton.removeEventListener('click', clickListener);

package/dist/cjs/components/src/components/Molecules/OverlayBadge/OverlayBadge.js

@@ -100,7 +100,7 @@ exports.OverlayBadge = (0, mobx_react_lite_1.observer)((properties) => {
             name: slot.name,
             top: index == 0,
             bottom: index == sectionSlots.length - 1,
-            badges: result?.display.badges?.atLocation(`${section}/${slot.tag}`).slice(0, limit),
+            badges: result?.display?.badges?.atLocation(`${section}/${slot.tag}`).slice(0, limit),
         }))
             .filter((slot) => slot.badges?.length);
         return {

package/dist/cjs/components/src/components/Molecules/ProductDetailTable/ProductDetailTable.js

@@ -0,0 +1,115 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductDetailTable = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const mobx_1 = require("mobx");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const ProductDetail_1 = require("../../Atoms/ProductDetail");
+const ProductDetail_2 = require("../../Atoms/ProductDetail/ProductDetail");
+const Price_1 = require("../../Atoms/Price");
+const Image_1 = require("../../Atoms/Image");
+const Rating_1 = require("../Rating");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        width: '100%',
+        borderCollapse: 'collapse',
+        fontSize: '0.9em',
+        '& tr': {
+            borderBottom: '1px solid #eee',
+        },
+        '& tr:last-of-type': {
+            borderBottom: 'none',
+        },
+        '& th, & td': {
+            padding: '10px 0',
+            textAlign: 'left',
+            verticalAlign: 'top',
+        },
+        '& th': {
+            width: '40%',
+            paddingRight: '16px',
+            fontWeight: 500,
+            color: '#666',
+            textTransform: 'uppercase',
+            fontSize: '0.85em',
+            letterSpacing: '0.02em',
+        },
+        '& td': {
+            color: '#1a1a1a',
+            // Typed values render components whose defaults center them (Rating flex-centers its
+            // stars, Image stretches and letterboxes via objectFit) — left-align both so every
+            // display type lines up with the plain text values.
+            '& .ss__rating': {
+                justifyContent: 'flex-start',
+            },
+            '& .ss__image': {
+                alignItems: 'flex-start',
+                // Cap images at a row-scale thumbnail (width stays auto, preserving aspect ratio)
+                // so a full-size product image can't dwarf the table.
+                '& img': {
+                    maxHeight: '100px',
+                },
+            },
+        },
+    });
+};
+exports.ProductDetailTable = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('productDetailTable', globalTheme, defaultProps, properties);
+    const { result, displayFields, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('productDetailTable', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // Render only the configured fields that resolve to a non-empty value (preserves the opt-in
+    // behaviour: with no displayFields, nothing renders).
+    const displayedFields = (displayFields || []).filter((detail) => (0, ProductDetail_2.renderDetailValue)((0, ProductDetail_2.getProductFieldValue)(result, detail.field)) !== '');
+    if (displayedFields.length === 0)
+        return null;
+    const renderValue = (detail) => {
+        const rawValue = (0, ProductDetail_2.getProductFieldValue)(result, detail.field);
+        const componentProps = { theme: props.theme, treePath, ...(0, utilities_1.defined)({ disableStyles }) };
+        switch (detail.type) {
+            case 'price': {
+                const value = Number(rawValue);
+                if (!isNaN(value)) {
+                    return (0, jsx_runtime_1.jsx)(Price_1.Price, { value: value, ...componentProps });
+                }
+                break;
+            }
+            case 'rating': {
+                const value = Number(rawValue);
+                if (!isNaN(value)) {
+                    return (0, jsx_runtime_1.jsx)(Rating_1.Rating, { value: value, ...componentProps });
+                }
+                break;
+            }
+            case 'image': {
+                // An image field may resolve to an array of URLs — display the first.
+                const src = Array.isArray(rawValue) || (0, mobx_1.isObservableArray)(rawValue) ? Array.from(rawValue)[0] : rawValue;
+                if (typeof src === 'string' && src) {
+                    return (0, jsx_runtime_1.jsx)(Image_1.Image, { src: src, alt: detail.label || detail.field, ...componentProps });
+                }
+                break;
+            }
+            case 'html':
+                return (0, jsx_runtime_1.jsx)(ProductDetail_1.ProductDetail, { result: result, field: detail.field, html: true, ...componentProps });
+        }
+        // 'text' (the default) — and the fallback when a typed value doesn't fit its type.
+        return (0, jsx_runtime_1.jsx)(ProductDetail_1.ProductDetail, { result: result, field: detail.field, ...componentProps });
+    };
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("table", { ...styling, className: (0, classnames_1.default)('ss__product-detail-table', className, internalClassName), children: (0, jsx_runtime_1.jsx)("tbody", { children: displayedFields.map((detail, index) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: "row", children: detail.label ?? detail.field }), (0, jsx_runtime_1.jsx)("td", { children: renderValue(detail) })] }, `${detail.field}-${index}`))) }) }) }));
+});

package/dist/cjs/components/src/components/Molecules/{ChatResultsDisplay → ProductDetailTable}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ChatResultsDisplay"), exports);
+__exportStar(require("./ProductDetailTable"), exports);