@athoscommerce/snap-preact 1.13.2 → 1.13.3-beta.187

package/dist/cjs/components/src/components/Organisms/ChatButton/ChatButton.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatButtonOrganism = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_2 = require("../../../hooks");
+const Button_1 = require("../../Atoms/Button");
+const Chat_lang_1 = require("../Chat/Chat.lang");
+const ChatButton_lang_1 = require("./ChatButton.lang");
+const defaultStyles = ({ theme }) => {
+    // primary may be 'currentColor' (base theme) — background stays fixed so the
+    // pill remains legible wherever it inherits its color from
+    const color = theme?.variables?.colors?.primary || '#333';
+    return (0, react_1.css)({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '8px',
+        padding: '8px 16px',
+        background: '#fff',
+        color: color,
+        border: `1px solid ${color}`,
+        borderRadius: '24px',
+        fontSize: '14px',
+        fontWeight: 600,
+        lineHeight: 1.2,
+        cursor: 'pointer',
+        transition: 'box-shadow 0.15s ease',
+        '&:hover': {
+            boxShadow: '0 2px 6px rgba(0, 0, 0, 0.15)',
+        },
+        '&:focus-visible': {
+            outline: '2px solid currentColor',
+            outlineOffset: '2px',
+        },
+        // native Button always renders its content span — collapse it when empty
+        // so the flex gap doesn't offset icon-only buttons
+        '.ss__button__content:empty': {
+            display: 'none',
+        },
+        '.ss__icon': {
+            fill: 'currentColor',
+            stroke: 'currentColor',
+        },
+    });
+};
+exports.ChatButtonOrganism = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        icon: 'chat',
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('chatButton', globalTheme, defaultProps, properties);
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('chatButton', props);
+    const { className, internalClassName, controller, content, children, icon, disableStyles, treePath } = props;
+    const { store } = controller;
+    // Register with the store so the Chat organism hides its built-in bubble while
+    // an external launcher is mounted. Runs before any early return (hooks-order safe).
+    (0, hooks_1.useEffect)(() => store.registerLauncher(), [store]);
+    // Same visibility rule as the Chat organism: hidden when disabled at bootstrap,
+    // but kept mounted when chat becomes disabled mid-session.
+    const wasVisibleRef = (0, hooks_1.useRef)(false);
+    if (!store.chatEnabled && !wasVisibleRef.current) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    wasVisibleRef.current = true;
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const subProps = {
+        button: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const lang = (0, deepmerge_1.default)(ChatButton_lang_1.chatButtonDefaultLang, props.lang || {});
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { ...styling, ...subProps.button, native: true, type: "button", className: (0, classnames_1.default)('ss__chat-button', { 'ss__chat-button--open': store.open }, className, internalClassName), "aria-label": store.open ? (0, Chat_lang_1.langAttrOf)(lang.closeChatButton, 'aria-label') : (0, Chat_lang_1.langAttrOf)(lang.openChatButton, 'aria-label'), title: store.open ? (0, Chat_lang_1.langAttrOf)(lang.closeChatButton, 'title') : (0, Chat_lang_1.langAttrOf)(lang.openChatButton, 'title'), "aria-expanded": store.open, onClick: () => controller.handlers.button.click(), content: content || children ? ((0, jsx_runtime_1.jsxs)("span", { className: "ss__chat-button__content", children: [(0, utilities_1.cloneWithProps)(content, { treePath }), (0, utilities_1.cloneWithProps)(children, { treePath })] })) : undefined, icon: icon && { internalClassName: 'ss__chat-button__icon', ...(typeof icon == 'string' ? { icon: icon } : typeof icon == 'object' ? icon : {}) } }) }));
+});

package/dist/cjs/components/src/components/Organisms/ChatButton/ChatButton.lang.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chatButtonDefaultLang = void 0;
+exports.chatButtonDefaultLang = {
+    openChatButton: {
+        attributes: { 'aria-label': 'Open chat', title: 'Open Chat' },
+    },
+    closeChatButton: {
+        attributes: { 'aria-label': 'Close chat', title: 'Close Chat' },
+    },
+};

package/dist/cjs/components/src/components/Organisms/ChatButton/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./ChatButton"), exports);
+__exportStar(require("./ChatButton.lang"), exports);

package/dist/cjs/components/src/components/Organisms/QuickviewLayout/QuickviewLayout.js

@@ -258,7 +258,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         hideBadge: false,
     };
     const props = (0, utilities_1.mergeProps)('quickviewLayout', globalTheme, defaultProps, properties);
-    const { quickviewManager, className, internalClassName, disableStyles, treePath, hideBadge, column1, column2, column3, column4, recommendation } = props;
+    const { quickviewManager, className, internalClassName, disableStyles, treePath, hideBadge, variantDropdownType, column1, column2, column3, column4, recommendation, } = props;
     // NOTE: the `!shouldRenderDefault` return lives below the last hook call — every hook in this
     // component must run unconditionally on every render (shouldRenderDefault can flip while
     // mounted, e.g. when a pending customComponent import resolves or fails).
@@ -281,6 +281,12 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         moreInfoButton: {
             value: 'More info',
         },
+        similarButton: {
+            value: 'Similar',
+        },
+        discussButton: {
+            value: 'Discuss',
+        },
         loadingText: {
             value: 'Loading…',
         },
@@ -343,7 +349,8 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
     // is within it).
     (0, hooks_1.useEffect)(() => {
         const isOpenNow = Boolean(quickviewManager?.store?.isOpen);
-        if (!shouldRenderDefault || !isOpenNow)
+        // inline embeds (e.g. the chat secondary window) are not modal — Escape must not close them
+        if (!shouldRenderDefault || !isOpenNow || props.inline)
             return;
         const onKey = (e) => {
             if (e.key === 'Escape' && !galleryOpen) {
@@ -352,7 +359,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         };
         window.addEventListener('keydown', onKey);
         return () => window.removeEventListener('keydown', onKey);
-    }, [shouldRenderDefault, quickviewManager?.store?.isOpen, galleryOpen]);
+    }, [shouldRenderDefault, quickviewManager?.store?.isOpen, galleryOpen, props.inline]);
     // Recommendation modules. `findModule` runs inside .map()/recursion and must not call hooks, so
     // resolve every referenced profile's controller + components here (stable order) and let
     // findModule read from this map. Mirrors Organisms/NoResults.
@@ -449,12 +456,18 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
     };
     // Dialog semantics + focus trap for the quickview content, following the autocomplete
     // containers (AutocompleteModal/AutocompleteSlideout): useA11y traps Tab within the
-    // content and wires Escape to the callback above.
+    // content and wires Escape to the callback above. Inline embeds (e.g. the chat secondary
+    // window) are part of the surrounding page — no dialog role and no focus trap, which
+    // would otherwise stop the shopper tabbing out to the chat composer.
     const contentProps = {
         className: 'ss__quickview__content',
-        role: 'dialog',
-        'aria-modal': 'true',
-        ref: (e) => (0, hooks_2.useA11y)(e, 0, true, handleEscape),
+        ...(props.inline
+            ? {}
+            : {
+                role: 'dialog',
+                'aria-modal': 'true',
+                ref: (e) => (0, hooks_2.useA11y)(e, 0, true, handleEscape),
+            }),
         ...mergedLang.quickview?.attributes,
     };
     // Prefer `product.display` so the displayed name/image/attributes reflect the
@@ -549,17 +562,23 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         // the selection whose field matches (e.g. `variantSelection.color`). The field also matches its
         // component-name form (`color_family` → `color-family`). A bare `variantSelection` module is
         // not supported.
+        // `variantDropdownType` swaps the component for selections that aren't swatches.
+        const renderSelection = (selection) => {
+            const isSwatch = selection.type === 'swatch' || selection.type === 'swatches';
+            const type = variantDropdownType && !isSwatch ? variantDropdownType : selection.type;
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__quickview__variant", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variant-title", children: selection.label || selection.field }), (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { selection: selection, type: type, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }, selection.field));
+        };
         if (module == 'variantSelections') {
             if (!selections || selections.length === 0)
                 return null;
-            return ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variants", children: selections.map((selection) => ((0, jsx_runtime_1.jsxs)("div", { className: "ss__quickview__variant", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variant-title", children: selection.label || selection.field }), (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { selection: selection, type: selection.type, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }, selection.field))) }));
+            return (0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variants", children: selections.map((selection) => renderSelection(selection)) });
         }
         if (module.startsWith('variantSelection.')) {
             const name = module.slice('variantSelection.'.length);
             const selection = selections?.find((selection) => selection.field === name || (0, snap_toolbox_1.fieldNameToComponentName)(selection.field) === name);
             if (!name || !selection)
                 return null;
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__quickview__variant", children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__variant-title", children: selection.label || selection.field }), (0, jsx_runtime_1.jsx)(VariantSelection_1.VariantSelection, { selection: selection, type: selection.type, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }));
+            return renderSelection(selection);
         }
         if (module == 'button.add-to-cart') {
             if (!product)
@@ -569,7 +588,7 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
         if (module == 'button.more-info') {
             if (!url)
                 return null;
-            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "more-info", internalClassName: "ss__quickview__go-to-product", lang: { button: lang.moreInfoButton }, onClick: (e) => {
+            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "more-info", internalClassName: "ss__quickview__more-info", lang: { button: lang.moreInfoButton }, onClick: (e) => {
                     // track the redirect to the product page as a quickview clickThrough
                     // before navigating away (delegated with `quickView: true`)
                     if (product) {
@@ -578,6 +597,20 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
                     window.location.href = url;
                 }, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
         }
+        // Chat-only modules: `button.similar` and `button.discuss` forward to the chat controller
+        // that opened the quickview. They render nothing for non-chat source controllers, so a
+        // layout carrying them stays safe to share across surfaces.
+        if (module == 'button.similar' || module == 'button.discuss') {
+            const chatController = quickviewManager.sourceController?.type === 'chat' ? quickviewManager.sourceController : undefined;
+            if (!product || !chatController)
+                return null;
+            if (module == 'button.similar') {
+                if (!chatController.store.features?.similarProducts?.enabled)
+                    return null;
+                return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "similar", internalClassName: "ss__quickview__similar", lang: { button: lang.similarButton }, onClick: () => chatController.productSimilar(product), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
+            }
+            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "discuss", internalClassName: "ss__quickview__discuss", lang: { button: lang.discussButton }, onClick: () => chatController.productQuery(product), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
+        }
         // `quantityPicker` binds to the observable `product.quantity`, which `button.add-to-cart`
         // (via the cart store) picks up when the product is added.
         if (module == 'quantityPicker') {
@@ -613,5 +646,5 @@ exports.QuickviewLayout = (0, mobx_react_lite_1.observer)((properties) => {
     }
     const topRowCounter = { value: 0 };
     const closeButton = ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "close", internalClassName: "ss__quickview__close", icon: "close-thin", lang: { button: lang.closeButton }, onClick: () => onClose(), theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) }));
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__quickview', className, internalClassName), children: error || loading || product ? ((0, jsx_runtime_1.jsxs)("div", { ...contentProps, children: [closeButton, error ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__error", role: "alert", children: error.message })) : loading ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__loading", ...mergedLang.loadingText?.all })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [layout?.map((module) => findModule(module, topRowCounter)), (0, jsx_runtime_1.jsx)(Gallery_1.Gallery, { images: galleryImages, open: galleryOpen, startIndex: galleryIndex, onClose: () => setGalleryOpen(false), alt: name, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }))] })) : null }) }));
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__quickview', className, internalClassName), children: error || loading || product ? ((0, jsx_runtime_1.jsxs)("div", { ...contentProps, children: [!props.inline && closeButton, error ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__error", role: "alert", children: error.message })) : loading ? ((0, jsx_runtime_1.jsx)("div", { className: "ss__quickview__loading", ...mergedLang.loadingText?.all })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [layout?.map((module) => findModule(module, topRowCounter)), (0, jsx_runtime_1.jsx)(Gallery_1.Gallery, { images: galleryImages, open: galleryOpen, startIndex: galleryIndex, onClose: () => setGalleryOpen(false), alt: name, theme: props.theme, treePath: treePath, ...(0, utilities_1.defined)({ disableStyles }) })] }))] })) : null }) }));
 });

package/dist/cjs/components/src/components/Organisms/Results/Results.js

@@ -25,7 +25,7 @@ const defaultStyles = ({ gapSize, columns }) => {
         flexFlow: 'row wrap',
         gap: gapSize,
         gridTemplateRows: 'auto',
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
         '& .ss__result, & .ss__result-layout': {
             boxSizing: 'border-box',
             flex: '0 1 auto',

package/dist/cjs/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.js

@@ -151,6 +151,11 @@ exports.AutocompleteFixed = (0, mobx_react_lite_1.observer)((properties) => {
             closeSearchButton: {
                 onClick: () => reset(),
             },
+            // wiring only — no default `icon`, so the button stays hidden until a site
+            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
+            chatButton: {
+                onClick: () => controller.openChat(),
+            },
             inputName: inputName,
             // inherited props
             ...(0, utilities_1.defined)({

package/dist/cjs/components/src/components/Templates/AutocompleteModal/AutocompleteModal.js

@@ -162,6 +162,11 @@ exports.AutocompleteModal = (0, mobx_react_lite_1.observer)((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
+            // wiring only — no default `icon`, so the button stays hidden until a site
+            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
+            chatButton: {
+                onClick: () => controller.openChat(),
+            },
             inputName: inputName,
             // inherited props
             ...(0, utilities_1.defined)({

package/dist/cjs/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.js

@@ -113,6 +113,11 @@ exports.AutocompleteSlideout = (0, mobx_react_lite_1.observer)((properties) => {
                 onClick: () => reset(),
                 icon: 'angle-left',
             },
+            // wiring only — no default `icon`, so the button stays hidden until a site
+            // opts in by supplying one via theme or props (see SearchInput.hideChatButton)
+            chatButton: {
+                onClick: () => controller.openChat(),
+            },
             // inherited props
             ...(0, utilities_1.defined)({
                 disableStyles,

package/dist/cjs/components/src/components/Templates/Chat/Chat.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chat = 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 providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Chat_1 = require("../../Organisms/Chat");
+const defaultStyles = () => {
+    // The template itself is layout-free — the underlying Chat organism handles
+    // fixed positioning and sizing. The wrapper exists purely so theme overrides
+    // flow through mergeProps('chat', ...) and so the Chat surface can be themed
+    // per-template like Search and Recommendation.
+    return (0, react_1.css)({});
+};
+exports.Chat = (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)('chat', globalTheme, defaultProps, properties);
+    const { className, internalClassName, controller, disableStyles, treePath } = props;
+    const subProps = {
+        Chat: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // className/internalClassName stay on the template wrapper only — spreading them
+    // into the organism would duplicate user classes on two DOM levels
+    // treePath is omitted too — the organism calls mergeProps('chat') itself, and passing
+    // this one down would append a second 'chat' segment (ss-path="chat chat")
+    const organismProps = { ...props, className: undefined, internalClassName: undefined, treePath: undefined };
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__chat-template', className, internalClassName), children: (0, jsx_runtime_1.jsx)(Chat_1.ChatOrganism, { ...subProps.Chat, ...organismProps, controller: controller }) }) }));
+});

package/dist/cjs/components/src/components/Templates/Chat/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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);

package/dist/cjs/components/src/components/Templates/ChatButton/ChatButton.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatButton = 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 providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const ChatButton_1 = require("../../Organisms/ChatButton");
+const defaultStyles = () => {
+    // inline-block so the wrapper flows alongside its siblings when injected into
+    // merchant chrome (e.g. a nav); all button styling lives in the organism
+    return (0, react_1.css)({
+        display: 'inline-block',
+    });
+};
+exports.ChatButton = (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)('chatButton', globalTheme, defaultProps, properties);
+    const { className, internalClassName, controller, disableStyles, treePath } = props;
+    const subProps = {
+        ChatButton: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // className/internalClassName stay on the template wrapper only — spreading them
+    // into the organism would duplicate user classes on two DOM levels
+    // treePath is omitted too — the organism calls mergeProps('chatButton') itself, and passing
+    // this one down would append a second 'chatButton' segment
+    const organismProps = { ...props, className: undefined, internalClassName: undefined, treePath: undefined };
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__chat-button-template', className, internalClassName), children: (0, jsx_runtime_1.jsx)(ChatButton_1.ChatButtonOrganism, { ...subProps.ChatButton, ...organismProps, controller: controller }) }) }));
+});

package/dist/cjs/components/src/components/Templates/ChatButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./ChatButton"), exports);

package/dist/cjs/components/src/components/Templates/Search/Search.js

@@ -234,8 +234,16 @@ exports.Search = (0, mobx_react_lite_1.observer)((properties) => {
         },
     };
     const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    // whitespace is not permitted in an id and would split the aria-labelledby id reference list
+    const tabControllerId = controller.id;
     return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)(classNamePrefix, className, internalClassName, sidebarOpenState ? `${classNamePrefix}--sidebar-open` : ''), children: [(0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__header-section`, children: !hideTopToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { ...subProps.TopToolbar, controller: controller }) }), (0, jsx_runtime_1.jsxs)("div", { className: `${classNamePrefix}__main-section`, children: [!hideSidebar &&
                             store.loaded &&
                             store.pagination.totalResults > 0 &&
-                            (isMobile ? ((0, jsx_runtime_1.jsx)(Slideout_1.Slideout, { ...subProps.Slideout, active: justTransitionedToMobile ? false : sidebarOpenState, children: (0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__sidebar`, children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { ...subProps.MobileSidebar, controller: controller }) }) })) : sidebarOpenState ? ((0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__sidebar`, children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { ...subProps.Sidebar, controller: controller }) })) : null), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(`${classNamePrefix}__content`), children: [!hideMiddleToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { ...subProps.MiddleToolbar, controller: controller }), store.pagination.totalResults ? ((0, jsx_runtime_1.jsx)(Results_1.Results, { ...subProps.Results, controller: controller })) : (store.pagination.totalResults === 0 && (0, jsx_runtime_1.jsx)(NoResults_1.NoResults, { ...subProps.NoResults, controller: controller })), !hideBottomToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { ...subProps.BottomToolbar, controller: controller })] })] })] }) }));
+                            (isMobile ? ((0, jsx_runtime_1.jsx)(Slideout_1.Slideout, { ...subProps.Slideout, active: justTransitionedToMobile ? false : sidebarOpenState, children: (0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__sidebar`, children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { ...subProps.MobileSidebar, controller: controller }) }) })) : sidebarOpenState ? ((0, jsx_runtime_1.jsx)("div", { className: `${classNamePrefix}__sidebar`, children: (0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { ...subProps.Sidebar, controller: controller }) })) : null), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(`${classNamePrefix}__content`), ...(tabManager?.active
+                                ? {
+                                    id: `ss__tabpanel--${tabControllerId}`,
+                                    role: 'tabpanel',
+                                    'aria-labelledby': `ss__tab--${tabControllerId}`,
+                                }
+                                : {}), children: [!hideMiddleToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { ...subProps.MiddleToolbar, controller: controller }), store.pagination.totalResults ? ((0, jsx_runtime_1.jsx)(Results_1.Results, { ...subProps.Results, controller: controller })) : (store.pagination.totalResults === 0 && (0, jsx_runtime_1.jsx)(NoResults_1.NoResults, { ...subProps.NoResults, controller: controller })), !hideBottomToolbar && (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { ...subProps.BottomToolbar, controller: controller })] })] })] }) }));
 });

package/dist/cjs/components/src/index.js

@@ -14,7 +14,7 @@ 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 });
-exports.useLang = exports.RecommendationResultTracker = void 0;
+exports.useLang = exports.RecommendationResultTracker = exports.ChatButtonOrganism = exports.ChatOrganism = void 0;
 // ATOMS
 __exportStar(require("./components/Atoms/BadgeImage"), exports);
 __exportStar(require("./components/Atoms/BadgePill"), exports);
@@ -23,6 +23,7 @@ __exportStar(require("./components/Atoms/BadgeText"), exports);
 __exportStar(require("./components/Atoms/Banner"), exports);
 __exportStar(require("./components/Atoms/Breadcrumbs"), exports);
 __exportStar(require("./components/Atoms/Button"), exports);
+__exportStar(require("./components/Atoms/ChatLoadingIndicator"), exports);
 __exportStar(require("./components/Atoms/Dropdown"), exports);
 __exportStar(require("./components/Atoms/FormattedNumber"), exports);
 __exportStar(require("./components/Atoms/Icon"), exports);
@@ -38,6 +39,15 @@ __exportStar(require("./components/Atoms/Skeleton"), exports);
 // MOLECULES
 __exportStar(require("./components/Molecules/CalloutBadge"), exports);
 __exportStar(require("./components/Molecules/Carousel"), exports);
+__exportStar(require("./components/Molecules/ChatAttachmentContext"), exports);
+__exportStar(require("./components/Molecules/ChatInspirationResultMessage"), exports);
+__exportStar(require("./components/Molecules/ChatMessageText"), exports);
+__exportStar(require("./components/Molecules/ChatMessageUser"), exports);
+__exportStar(require("./components/Molecules/ChatProductComparisonMessage"), exports);
+__exportStar(require("./components/Molecules/ChatQuickview"), exports);
+__exportStar(require("./components/Molecules/ChatResult"), exports);
+__exportStar(require("./components/Molecules/ChatResultsDisplay"), exports);
+__exportStar(require("./components/Molecules/ChatSuggestedQuestions"), exports);
 __exportStar(require("./components/Molecules/Checkbox"), exports);
 __exportStar(require("./components/Molecules/ErrorHandler"), exports);
 __exportStar(require("./components/Molecules/FacetGridOptions"), exports);
@@ -85,7 +95,13 @@ __exportStar(require("./components/Organisms/Sidebar"), exports);
 __exportStar(require("./components/Organisms/Toolbar"), exports);
 __exportStar(require("./components/Organisms/Autocomplete"), exports);
 __exportStar(require("./components/Organisms/TermsList"), exports);
+var Chat_1 = require("./components/Organisms/Chat");
+Object.defineProperty(exports, "ChatOrganism", { enumerable: true, get: function () { return Chat_1.ChatOrganism; } });
+var ChatButton_1 = require("./components/Organisms/ChatButton");
+Object.defineProperty(exports, "ChatButtonOrganism", { enumerable: true, get: function () { return ChatButton_1.ChatButtonOrganism; } });
 // TEMPLATES
+__exportStar(require("./components/Templates/Chat"), exports);
+__exportStar(require("./components/Templates/ChatButton"), exports);
 __exportStar(require("./components/Templates/QuickviewModal"), exports);
 __exportStar(require("./components/Templates/QuickviewSlideout"), exports);
 __exportStar(require("./components/Templates/Recommendation"), exports);

package/dist/cjs/components/src/providers/themeComponents.js

@@ -12,6 +12,7 @@ exports.ALL_CUSTOM_COMPONENT_TYPES = [
     'breadcrumbs',
     'button',
     'dropdown',
+    'chatLoadingIndicator',
     'formattedNumber',
     'icon',
     'image',
@@ -29,6 +30,15 @@ exports.ALL_CUSTOM_COMPONENT_TYPES = [
     'calloutBadge',
     'carousel',
     'checkbox',
+    'chatAttachmentContext',
+    'chatInspirationResultMessage',
+    'chatMessageText',
+    'chatMessageUser',
+    'chatProductComparisonMessage',
+    'chatQuickview',
+    'chatResult',
+    'chatResultsDisplay',
+    'chatSuggestedQuestions',
     'grid',
     'layoutSelector',
     'list',
@@ -60,6 +70,16 @@ exports.ALL_CUSTOM_COMPONENT_TYPES = [
     'terms',
     /* organisms */
     'branchOverride',
+    'chat',
+    'chatButton',
+    'chatComparisonsTray',
+    'chatComposer',
+    'chatFacetsBar',
+    'chatHistory',
+    'chatMessages',
+    'chatSessionFeedback',
+    'chatSideChat',
+    'chatTopicDrift',
     'facet',
     'facets',
     'facetsHorizontal',

package/dist/cjs/components/src/themes/base/components/templates/chat.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chat = void 0;
+const chat_1 = require("../../../themeComponents/chat");
+// Chat component props come from Template export
+exports.chat = chat_1.chatThemeComponentProps;

package/dist/cjs/components/src/themes/base/components/templates/chatButton.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chatButton = void 0;
+const chatButton_1 = require("../../../themeComponents/chatButton");
+// ChatButton component props come from Template export
+exports.chatButton = chatButton_1.chatButtonThemeComponentProps;

package/dist/cjs/components/src/themes/base/components/templates/index.js

@@ -15,8 +15,12 @@ const searchCollapsible_1 = require("./searchCollapsible");
 const autocompleteSlideout_1 = require("./autocompleteSlideout");
 const autocompleteModal_1 = require("./autocompleteModal");
 const autocompleteFixed_1 = require("./autocompleteFixed");
+const chat_1 = require("./chat");
+const chatButton_1 = require("./chatButton");
 exports.templates = {
     default: {
+        ...chat_1.chat.default,
+        ...chatButton_1.chatButton.default,
         ...autocompleteSlideout_1.autocompleteSlideout.default,
         ...autocompleteModal_1.autocompleteModal.default,
         ...autocompleteFixed_1.autocompleteFixed.default,
@@ -32,6 +36,8 @@ exports.templates = {
         ...searchHorizontal_1.searchHorizontal.default,
     },
     mobile: {
+        ...chat_1.chat.mobile,
+        ...chatButton_1.chatButton.mobile,
         ...autocompleteSlideout_1.autocompleteSlideout.mobile,
         ...autocompleteModal_1.autocompleteModal.mobile,
         ...autocompleteFixed_1.autocompleteFixed.mobile,
@@ -47,6 +53,8 @@ exports.templates = {
         ...searchHorizontal_1.searchHorizontal.mobile,
     },
     tablet: {
+        ...chat_1.chat.tablet,
+        ...chatButton_1.chatButton.tablet,
         ...autocompleteSlideout_1.autocompleteSlideout.tablet,
         ...autocompleteModal_1.autocompleteModal.tablet,
         ...autocompleteFixed_1.autocompleteFixed.tablet,
@@ -62,6 +70,8 @@ exports.templates = {
         ...searchHorizontal_1.searchHorizontal.tablet,
     },
     desktop: {
+        ...chat_1.chat.desktop,
+        ...chatButton_1.chatButton.desktop,
         ...autocompleteSlideout_1.autocompleteSlideout.desktop,
         ...autocompleteModal_1.autocompleteModal.desktop,
         ...autocompleteFixed_1.autocompleteFixed.desktop,

package/dist/cjs/components/src/themes/bocachica/components/templates/chat.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chat = void 0;
+const chat_1 = require("../../../themeComponents/chat");
+// Chat component props come from Template export
+exports.chat = chat_1.chatThemeComponentProps;

package/dist/cjs/components/src/themes/bocachica/components/templates/chatButton.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chatButton = void 0;
+const chatButton_1 = require("../../../themeComponents/chatButton");
+// ChatButton component props come from Template export
+exports.chatButton = chatButton_1.chatButtonThemeComponentProps;