@athoscommerce/snap-preact 1.13.3-beta.168 → 1.13.3-beta.191

package/dist/esm/components/src/components/Molecules/ChatQuickview/ChatQuickview.js

@@ -0,0 +1,508 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import deepmerge from 'deepmerge';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { Colour, defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useCustomComponentOverride } from '../../../hooks';
+import { Button } from '../../Atoms/Button';
+import { QuickviewLayout } from '../../Organisms/QuickviewLayout';
+const defaultStyles = ({ primaryColor, primaryColorText, theme }) => {
+    const colorPrimary = primaryColor || Colour.concrete(theme?.variables?.colors?.primary) || '#253B80';
+    const colorPrimaryText = primaryColorText || '#fff';
+    const colorCta = Colour.concrete(theme?.variables?.colors?.accent) || '#feeeae';
+    // neutral colors — no theme variable equivalents
+    const colorText = '#374151';
+    const colorBorder = '#E5E7EB';
+    return css({
+        display: 'flex',
+        flexDirection: 'column',
+        paddingBottom: '1em',
+        '.ss__chat-quickview__header__back.ss__button': {
+            // Overlay banner pinned to the top of the secondary chat's scrollable messages
+            // container so it stays visible while the product details scroll underneath.
+            // Styling mirrors `.ss__chat__session-feedback` (dark primary bg, primary text,
+            // 8px/15px padding, 10px gap, 14px font).
+            position: 'sticky',
+            top: 0,
+            zIndex: 2,
+            display: 'flex',
+            flexDirection: 'row-reverse',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: '10px',
+            padding: '8px 15px',
+            background: colorPrimary,
+            color: colorPrimaryText,
+            fontSize: '14px',
+            cursor: 'pointer',
+            border: 'none',
+            font: 'inherit',
+            width: 'auto',
+            '.ss__button__content': {
+                width: 'auto',
+            },
+            // pin the background so the Chat organism's generic `.ss__button:hover`
+            // lightening rule (higher specificity) doesn't recolor the banner
+            '&:not(.ss__button--disabled):hover': {
+                background: colorPrimary,
+            },
+            '&:focus-visible': {
+                outline: `2px solid ${colorPrimaryText}`,
+                outlineOffset: '-2px',
+            },
+            svg: {
+                fill: colorPrimaryText,
+                stroke: colorPrimaryText,
+            },
+        },
+        // Content sizing for the chat's secondary window, overriding QuickviewLayout's modal sizing
+        // (close-button padding and min/max widths) — the extra `.ss__quickview` class out-ranks the
+        // layout's own same-specificity rule, whose styles are inserted after these. The content
+        // spans the panel with no gutter of its own so the header banner can bleed to the panel
+        // edges; every other section row gets the standard gutter below.
+        '.ss__quickview .ss__quickview__content': {
+            padding: 0,
+            minWidth: 'auto',
+            maxWidth: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1em',
+        },
+        '.ss__quickview__content > .ss__quickview__row': {
+            padding: '0 1em',
+        },
+        // Default layout only: the component fills the chat's secondary window, the header banner row
+        // stays put, and the remaining rows (grouped in column 3) scroll on their own. A custom
+        // `layout` opts out since its rows are not grouped this way.
+        '&.ss__chat-quickview--default-layout': {
+            height: '100%',
+            minHeight: 0,
+            boxSizing: 'border-box',
+            '.ss__quickview, .ss__quickview__content': {
+                flex: '1 1 auto',
+                minHeight: 0,
+                display: 'flex',
+                flexDirection: 'column',
+            },
+            '.ss__quickview__content > .ss__quickview__row:first-of-type': {
+                flex: '0 0 auto',
+            },
+            '.ss__quickview__content > .ss__quickview__row:first-of-type + .ss__quickview__row': {
+                flex: '1 1 auto',
+                minHeight: 0,
+                overflowY: 'auto',
+                padding: 0,
+            },
+            '.ss__quickview__column.ss__quickview__column--c3': {
+                padding: '0 1em',
+                gap: '1em',
+            },
+        },
+        // Header banner: product image beside the name/price/actions on the primary color.
+        // The column flex rules out-rank QuickviewLayout's own (viewport-based) column sizing so
+        // the header keeps its side-by-side arrangement at every panel width.
+        '.ss__quickview__content > .ss__quickview__row:first-of-type': {
+            background: colorPrimary,
+            color: colorPrimaryText,
+            padding: '1em',
+            gap: '1em',
+            flexWrap: 'nowrap',
+            '.ss__quickview__column.ss__quickview__column--c1': {
+                flex: '0 0 25%',
+                maxWidth: '25%',
+            },
+            '.ss__quickview__column.ss__quickview__column--c2': {
+                flex: '1 1 auto',
+                maxWidth: '100%',
+                gap: '0.5em',
+                justifyContent: 'space-evenly',
+                '.ss__quickview__row': {
+                    padding: 0,
+                    gap: '0.5em',
+                },
+            },
+            // the header thumbnail is a plain image — hide the slideshow chrome
+            '.ss__quickview__slideshow': {
+                background: '#fff',
+                borderRadius: '0.33em',
+                overflow: 'hidden',
+                '.ss__slideshow__navigation, .ss__slideshow__pagination': {
+                    display: 'none',
+                },
+            },
+            '.ss__quickview__title': {
+                fontWeight: 'bold',
+                fontSize: '1.2em',
+                padding: 0,
+            },
+            '.ss__quickview__price': {
+                fontWeight: 'bold',
+                fontSize: '1.1em',
+                '.ss__price': {
+                    color: colorPrimaryText,
+                },
+            },
+            '.ss__button': {
+                flexDirection: 'row-reverse', // icon renders after the label — reverse to place it left
+                borderRadius: '0.5em',
+                padding: '0.4em 0.75em',
+                fontWeight: 'bold',
+                whiteSpace: 'nowrap',
+                cursor: 'pointer',
+                fontSize: '0.8em',
+                justifyContent: 'center',
+                textAlign: 'center',
+                '.ss__button__content': {
+                    width: 'auto',
+                },
+            },
+        },
+        // Action button colors. Kept at the same specificity as the Chat organism's accent theme
+        // (chatAccentTheme.ts), which is applied after these and wins. The hover rules pin the
+        // backgrounds so the Chat organism's generic `.ss__button:hover` lightening rule doesn't
+        // recolor them.
+        '.ss__quickview__add-to-cart.ss__button': {
+            background: colorCta,
+            color: '#000',
+            border: 'none',
+            svg: {
+                fill: '#000',
+                stroke: '#000',
+            },
+            '&:not(.ss__button--disabled):hover': {
+                background: colorCta,
+                filter: 'brightness(0.97)',
+            },
+        },
+        '.ss__quickview__more-info.ss__button, .ss__quickview__similar.ss__button, .ss__quickview__discuss.ss__button': {
+            background: '#000',
+            color: '#fff',
+            border: 'none',
+            svg: {
+                fill: '#fff',
+                stroke: '#fff',
+            },
+            '&:not(.ss__button--disabled):hover': {
+                background: '#000',
+            },
+        },
+        '.ss__quickview__content .ss__quickview__variant-title': {
+            fontWeight: 600,
+            fontSize: '0.9em',
+            color: colorText,
+            textTransform: 'uppercase',
+            marginBottom: '0.5em',
+        },
+        // untyped selections (e.g. size) render as a row of selectable tiles
+        '.ss__variant-selection--list': {
+            '.ss__list__title': {
+                display: 'none', // the variant-title above already labels the selection
+            },
+            '.ss__list__options': {
+                display: 'flex',
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                gap: '0.5em',
+                margin: 0,
+                padding: 0,
+            },
+            '.ss__list__option': {
+                flex: '1 1 auto',
+                justifyContent: 'center',
+                textAlign: 'center',
+                border: '2px solid transparent',
+                borderRadius: '0.5em',
+                padding: '0.4em 0.75em',
+                color: colorText,
+                cursor: 'pointer',
+                transition: 'border-color 0.15s ease',
+                '.ss__list__option__label': {
+                    cursor: 'pointer',
+                },
+                '&:hover': {
+                    borderColor: colorPrimary,
+                },
+                '&.ss__list__option--selected': {
+                    borderColor: colorPrimary,
+                    borderWidth: '3px',
+                    padding: '0.3em 0.65em',
+                    fontWeight: 'normal',
+                },
+                '&.ss__list__option--unavailable': {
+                    opacity: 0.4,
+                },
+            },
+        },
+        // a selection with a single value offers no choice — the legacy panel left these out
+        '.ss__quickview__variant:has(.ss__list__option:only-child), .ss__quickview__variant:has(.ss__slideshow__slide:only-child)': {
+            display: 'none',
+        },
+        // swatch selections (e.g. colour) mirror the legacy chat panel: the Swatches slideshow is
+        // flattened into a wrapping row of tiles, each a thumbnail with its value label
+        // beneath. Values without a thumbnail fall back to the legacy text-only pill.
+        '.ss__variant-selection--swatches .ss__swatches': {
+            '.ss__slideshow': {
+                overflow: 'visible',
+                '.ss__slideshow__navigation, .ss__slideshow__pagination': {
+                    display: 'none',
+                },
+                '.ss__slideshow__container': {
+                    width: '100%',
+                    margin: 0,
+                },
+                '.ss__slideshow__track': {
+                    flexWrap: 'wrap',
+                    justifyContent: 'flex-start',
+                    gap: '0.5em',
+                    width: '100%',
+                    transform: 'none !important',
+                    transition: 'none',
+                },
+                '.ss__slideshow__slide': {
+                    display: 'flex',
+                    flex: '1 1 auto',
+                    width: 'auto',
+                    minWidth: 0,
+                    maxWidth: 'none',
+                    margin: 0,
+                },
+            },
+            '.ss__swatches__slideshow__swatch': {
+                boxSizing: 'border-box',
+                width: '100%',
+                aspectRatio: 'auto',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                padding: '0.25em',
+                paddingBottom: 'calc(0.25em + 1em)', // reserve room for the label positioned below the thumbnail
+                border: '2px solid transparent',
+                borderRadius: '0.5em',
+                background: 'transparent',
+                color: colorText,
+                transition: 'border-color 0.15s ease',
+                '&:hover': {
+                    borderColor: colorPrimary,
+                },
+                '&:focus-visible': {
+                    outline: `2px solid ${colorPrimary}`,
+                    outlineOffset: '2px',
+                },
+                '&.ss__swatches__slideshow__swatch--selected': {
+                    borderColor: colorPrimary,
+                    borderWidth: '3px',
+                    padding: '0.15em',
+                    paddingBottom: 'calc(0.15em + 1em)',
+                },
+                '&.ss__swatches__slideshow__swatch--disabled, &.ss__swatches__slideshow__swatch--unavailable': {
+                    opacity: 0.4,
+                    '&:before': {
+                        display: 'none', // the faded tile replaces the strike-through
+                    },
+                },
+                '&.ss__swatches__slideshow__swatch--unavailable': {
+                    cursor: 'not-allowed',
+                },
+                '&.ss__swatches__slideshow__swatch--dark': {
+                    color: colorText,
+                },
+                '.ss__swatches__slideshow__swatch__inner': {
+                    position: 'relative',
+                    flex: '0 0 auto',
+                    width: '48px',
+                    height: '48px',
+                    '.ss__image': {
+                        width: '100%',
+                        height: '100%',
+                        img: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'contain',
+                        },
+                    },
+                },
+                '.ss__swatches__slideshow__swatch__value': {
+                    position: 'absolute',
+                    top: '100%',
+                    left: '50%',
+                    transform: 'translateX(-50%)',
+                    marginTop: '0.25em',
+                    fontSize: '0.75em',
+                    lineHeight: 1,
+                    color: colorText,
+                    textAlign: 'center',
+                    maxWidth: '60px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                },
+                // text-only tile: no thumbnail to show, so the colour chip is dropped and the label
+                // itself becomes the pill
+                '&:not(:has(.ss__image))': {
+                    padding: '0.4em 0.75em',
+                    alignSelf: 'center',
+                    '&.ss__swatches__slideshow__swatch--selected': {
+                        padding: '0.3em 0.65em',
+                    },
+                    '.ss__swatches__slideshow__swatch__inner': {
+                        width: 'auto',
+                        height: 'auto',
+                        background: 'none !important',
+                    },
+                    '.ss__swatches__slideshow__swatch__value': {
+                        position: 'static',
+                        transform: 'none',
+                        margin: 0,
+                        fontSize: '1em',
+                        lineHeight: 'inherit',
+                        maxWidth: 'none',
+                    },
+                },
+            },
+        },
+        '.ss__quickview__content .ss__quickview__attributes': {
+            '& tr': {
+                borderBottom: `1px solid ${colorBorder}`,
+                transition: 'background-color 0.15s ease',
+            },
+            '& tbody tr:hover': {
+                background: '#F3F4F6',
+            },
+            '& th': {
+                color: '#6B7280',
+                letterSpacing: '0.03em',
+            },
+            '& td': {
+                textAlign: 'right',
+                color: '#111827',
+                fontWeight: 500,
+            },
+        },
+        '.ss__quickview__content .ss__quickview__description': {
+            fontSize: '0.9em',
+            color: colorText,
+            lineHeight: 1.5,
+        },
+    });
+};
+export const ChatQuickview = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        hideBadge: true,
+        // legacy chat presentation: non-swatch selections render as a row of selectable tiles
+        variantDropdownType: 'list',
+        // mirrors the legacy chat product panel: a header banner (image beside name/price and the
+        // add-to-cart/more-info/similar/discuss actions) followed by variants, the attribute table,
+        // and the description — the banner styling lives in defaultStyles above. The detail rows are
+        // grouped in column 3 so they can scroll independently of the banner (see defaultStyles).
+        layout: [['c1', 'c2'], ['c3']],
+        column1: {
+            layout: ['slideshow'],
+            width: '25%',
+        },
+        column2: {
+            layout: [
+                ['productDetail.mappings.core.name'],
+                ['productDetail.mappings.core.price'],
+                ['button.add-to-cart', 'button.more-info', 'button.similar', 'button.discuss'],
+            ],
+            width: 'auto',
+        },
+        column3: {
+            layout: [['variantSelections'], ['productDetailTable'], ['productDetail.mappings.core.description']],
+            width: '100%',
+        },
+    };
+    const props = mergeProps('chatQuickview', globalTheme, defaultProps, properties);
+    const { chatItem, controller, disableStyles, className, internalClassName, treePath, layout, hideBadge, variantDropdownType, column1, column2, column3, column4, recommendation, } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('chatQuickview', props);
+    // the fixed-header/scrolling-details styling only applies to this component's own default layout
+    const isDefaultLayout = layout === defaultProps.layout;
+    const styling = mergeStyles(props, defaultStyles);
+    const { messageType } = chatItem;
+    const quickviewManager = controller?.quickviewManager;
+    const chatMessages = controller?.store.currentChat?.chat || [];
+    const sourceMessage = chatItem.sourceMessageId ? chatMessages.find((m) => m.id === chatItem.sourceMessageId) : null;
+    const cameFromInspiration = sourceMessage?.messageType === 'inspirationResult';
+    const cameFromComparison = sourceMessage?.messageType === 'productComparison';
+    // after all hooks — an override that resolves or fails mid-lifecycle must not
+    // change the hook count between renders
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    //initialize lang
+    const defaultLang = {
+        backToComparisonButton: {
+            value: 'Back to comparison',
+            attributes: {
+                'aria-label': 'Back to comparison',
+            },
+        },
+        backToInspirationButton: {
+            value: 'Back to inspiration',
+            attributes: {
+                'aria-label': 'Back to inspiration',
+            },
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    if (messageType !== 'productQuery') {
+        controller?.log?.warn('ChatQuickview received message with unsupported type:', messageType, 'Expected type: productQuery');
+        return null;
+    }
+    if (!quickviewManager) {
+        controller?.log?.warn(`ChatQuickview requires the controller's quickview manager — chat controllers receive one from Snap whenever they are configured`);
+        return null;
+    }
+    // legacy chat presentation, injected through the theme so the children apply it via their own
+    // prop pipeline (the incoming theme wins on conflict): the action buttons carry icons, and swatch
+    // tiles show their value label beneath (the Swatches default hides labels).
+    const themePresentationProps = {
+        components: {
+            'button.add-to-cart': {
+                icon: 'cart',
+            },
+            'button.more-info': {
+                icon: 'info',
+            },
+            'button.similar': {
+                icon: 'search-thin',
+            },
+            'button.discuss': {
+                icon: 'chat',
+            },
+            swatches: {
+                hideLabels: false,
+            },
+        },
+    };
+    props.theme = deepmerge.all([themePresentationProps, props?.theme || {}], { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+    const subProps = {
+        button: {
+            disableStyles,
+            theme: props.theme,
+            treePath,
+        },
+        quickviewLayout: {
+            // default props
+            ...defined({ hideBadge, variantDropdownType, column1, column2, column3, column4, recommendation, lang }),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const handleBack = () => {
+        controller?.store.currentChat?.popProductQueryMessage(chatItem.sourceMessageId);
+        controller?.closeProductQuickview();
+    };
+    return (_jsx(CacheProvider, { children: _jsxs("div", { className: classnames('ss__chat-quickview', { 'ss__chat-quickview--default-layout': isDefaultLayout }, className, internalClassName), ...styling, children: [(cameFromInspiration || cameFromComparison) && (_jsx(Button, { ...subProps.button, internalClassName: classnames('ss__chat-quickview__header__back'), icon: { icon: 'angle-left', size: '14px' }, onClick: handleBack, lang: { button: cameFromComparison ? lang.backToComparisonButton : lang.backToInspirationButton } })), _jsx(QuickviewLayout, { inline: true, quickviewManager: quickviewManager, ...subProps.quickviewLayout, layout: layout })] }) }));
+});

package/dist/esm/components/src/components/Molecules/ChatQuickview/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChatQuickview';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/ChatQuickview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ChatQuickview/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/esm/components/src/components/Molecules/ChatQuickview/index.js

@@ -0,0 +1 @@
+export * from './ChatQuickview';

package/dist/esm/components/src/components/Molecules/ChatResultsDisplay/ChatResultsDisplay.js

@@ -50,10 +50,10 @@ export const ChatResultsDisplay = observer((properties) => {
         currentChat?.dismissedSideChatMessageId !== activeMessage.id;
     const isNarrow = useMediaQuery('(max-width: 549px)');
     // only the tablet range needs the narrower slideshow when the side chat is open;
-    // at >= 1200px there's room to keep 2.9 slides alongside the secondary chat
+    // at >= 1200px there's room to keep 3 slides alongside the secondary chat
     const isTabletRange = useMediaQuery('(min-width: 768px) and (max-width: 1200px)');
     const isConstrained = !isNarrow && isSideChatOpen && isTabletRange;
-    const slidesToShow = isNarrow || isConstrained ? 1.9 : 2.9;
+    const slidesToShow = isNarrow || isConstrained ? 2 : 3;
     // after all hooks — an override that resolves or fails mid-lifecycle must not
     // change the hook count between renders
     if (!shouldRenderDefault) {

package/dist/esm/components/src/components/Molecules/Slideshow/Slideshow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAyJxD,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CAgvB3D,CAAC;AAEH,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"Slideshow.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Slideshow/Slideshow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAM3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AA6JxD,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CA2wB3D,CAAC;AAEH,MAAM,WAAW,aAAa;IAC7B,WAAW,EAAE,IAAI,CAAC;QACjB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,gBAAgB,EAAE,cAAc,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,UAAU,EAAE,IAAI,CAAC;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,OAAO,CAAC;QACxB,cAAc,EAAE,OAAO,CAAC;KACxB,CAAC,CAAC;IACH,KAAK,EAAE,cAAc,CAAC;QACrB,eAAe,EAAE,OAAO,CAAC;QACzB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;IACH,cAAc,EAAE,IAAI,CAAC;QACpB,aAAa,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAC9B,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC"}

package/dist/esm/components/src/components/Molecules/Slideshow/Slideshow.js

@@ -24,6 +24,10 @@ const defaultStyles = ({ theme, slidesToShow = 1, slideWidth, gap = 16, overlayN
             display: 'flex',
             width: `100%`,
             transition: 'transform 0.3s ease-in-out',
+            // keep the track on its own compositor layer at all times; otherwise Chrome promotes it
+            // when a transform transition starts and demotes it when it ends, re-rasterizing the
+            // (scaled) slide content each time, which reads as every image flickering
+            willChange: 'transform',
             // Disable transition during dragging
             '&.ss__slideshow__track--dragging': {
                 transition: 'none',
@@ -265,6 +269,8 @@ export const Slideshow = observer((properties) => {
         return () => observer.disconnect();
     }, []);
     // Touch/Drag state
+    // drag positions live in refs so the document-level mousemove/mouseup listeners
+    // (registered once per drag) always read current values instead of stale state
     const [isDragging, setIsDragging] = useState(false);
     // mirrors `isDragging` state - the state drives renders (the dragging class, the transform,
     // the autoplay effect), but the drag handlers below run through refs and can fire before
@@ -424,8 +430,17 @@ export const Slideshow = observer((properties) => {
             return;
         const diff = currentXRef.current - startXRef.current;
         const threshold = getNavigationThreshold();
+        const slideWidthPx = (trackRef.current?.parentElement?.offsetWidth || 0) / visibleSlides;
         if (Math.abs(diff) > threshold) {
-            if (diff > 0 && (loop || currentIndex > 0)) {
+            const slidesDragged = slideWidthPx > 0 ? Math.round(Math.abs(diff) / slideWidthPx) : 0;
+            if (slidesDragged > slidesToMove) {
+                // long drags land on the slide group they were dragged to instead of snapping back
+                setCurrentIndex((prevIndex) => {
+                    const newIndex = diff > 0 ? prevIndex - slidesDragged : prevIndex + slidesDragged;
+                    return Math.max(0, Math.min(maxIndex, newIndex));
+                });
+            }
+            else if (diff > 0 && (loop || currentIndex > 0)) {
                 // Dragged right - go to previous
                 goToPrevious();
             }
@@ -510,6 +525,16 @@ export const Slideshow = observer((properties) => {
             }, autoPlayInterval);
         }
     };
+    // The browser fires a click after a drag's mouseup/touchend. Catch it in the capture phase on
+    // the container so it never reaches slide content that carries its own onClick (e.g. product
+    // cards that open a quickview) — those handlers can't know a drag just happened.
+    const handleContainerClickCapture = (event) => {
+        if (!hasDraggedRef.current)
+            return;
+        hasDraggedRef.current = false;
+        event.stopPropagation();
+        event.preventDefault();
+    };
     // Handle image click
     const handleSlideClick = (slide, index) => {
         if (slide.onClick && !isDragging && !hasDraggedRef.current) {
@@ -656,27 +681,29 @@ export const Slideshow = observer((properties) => {
     }, { activeBreakpoint: globalTheme?.activeBreakpoint });
     return (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__slideshow', className), ref: slideshowRef, role: "region", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-roledescription": "slideshow", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, 
             // @ts-ignore - ignore
-            onKeyDown: handleKeyDown, tabIndex: 0, children: [_jsx("div", { className: "ss__slideshow__sr-only", ...mergedLang.srInstructions.all }), _jsx("div", { className: "ss__slideshow__container", children: _jsx("div", { ref: trackRef, className: classnames('ss__slideshow__track', {
+            onKeyDown: handleKeyDown, tabIndex: 0, children: [_jsx("div", { className: "ss__slideshow__sr-only", ...mergedLang.srInstructions.all }), _jsx("div", { className: "ss__slideshow__container", 
+                    // @ts-ignore - capture-phase click
+                    onClickCapture: touchDragging ? handleContainerClickCapture : undefined, 
+                    // Touch events
+                    // @ts-ignore - touch events
+                    onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0].clientX) : undefined, 
+                    // @ts-ignore - touch events
+                    onTouchMove: touchDragging
+                        ? (event) => {
+                            if (isDraggingRef.current) {
+                                event.preventDefault(); // Prevent scrolling while dragging
+                            }
+                            const touch = event.touches[0];
+                            handleDragMove(touch.clientX);
+                        }
+                        : undefined, onTouchEnd: touchDragging ? handleDragEnd : undefined, 
+                    // mouse events for desktop dragging
+                    // move/up are bound on document in handleMouseDown so the drag keeps tracking outside the container
+                    // @ts-ignore - mouse events
+                    onMouseDown: touchDragging ? handleMouseDown : undefined, children: _jsx("div", { ref: trackRef, className: classnames('ss__slideshow__track', {
                             'ss__slideshow__track--dragging': isDragging,
                             'ss__slideshow__track--centered': centerInsufficientSlides && totalSlides <= computedSlidesToShow,
-                        }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, 
-                        // Touch events
-                        // @ts-ignore - touch events
-                        onTouchStart: touchDragging ? (event) => handleDragStart(event.touches[0].clientX) : undefined, 
-                        // @ts-ignore - touch events
-                        onTouchMove: touchDragging
-                            ? (event) => {
-                                if (isDraggingRef.current) {
-                                    event.preventDefault(); // Prevent scrolling while dragging
-                                }
-                                const touch = event.touches[0];
-                                handleDragMove(touch.clientX);
-                            }
-                            : undefined, onTouchEnd: touchDragging ? handleDragEnd : undefined, 
-                        // mouse events for desktop dragging
-                        // move/up are bound on document in handleMouseDown so the drag keeps tracking outside the track
-                        // @ts-ignore - mouse events
-                        onMouseDown: touchDragging ? handleMouseDown : undefined, children: normalizedSlides.map((slide, index) => {
+                        }), style: { transform: `translateX(${translateX}${translateUnit})` }, role: "group", "aria-label": `Slide group ${currentIndex} of ${totalDots}`, children: normalizedSlides.map((slide, index) => {
                             const isVisible = index >= currentIndex && index < currentIndex + computedSlidesToShow;
                             const hasClickHandler = !!slide.onClick;
                             const hasContent = !!slide.content;

package/dist/esm/components/src/components/Organisms/Chat/Chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAa7D,OAAO,EAAE,QAAQ,EAA2C,MAAM,aAAa,CAAC;AA8BhF,MAAM,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC;AAqVF,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAycjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,uBAAuB,GAAG;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C;;kGAE8F;IAC9F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Chat/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAa7D,OAAO,EAAE,QAAQ,EAA2C,MAAM,aAAa,CAAC;AA8BhF,MAAM,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC;AAqVF,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAkdjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CACzB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,uBAAuB,GAAG;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+BAA+B,CAAC,EAAE,OAAO,CAAC;IAC1C;;kGAE8F;IAC9F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC"}