@athoscommerce/snap-preact 1.11.0 → 1.12.1-beta.152

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

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SnapTemplates = void 0;
+exports.validateTemplatesConfigUnlocked = exports.validateTemplatesConfig = exports.SnapTemplates = void 0;
 var SnapTemplates_1 = require("./SnapTemplates");
 Object.defineProperty(exports, "SnapTemplates", { enumerable: true, get: function () { return SnapTemplates_1.SnapTemplates; } });
+Object.defineProperty(exports, "validateTemplatesConfig", { enumerable: true, get: function () { return SnapTemplates_1.validateTemplatesConfig; } });
+Object.defineProperty(exports, "validateTemplatesConfigUnlocked", { enumerable: true, get: function () { return SnapTemplates_1.validateTemplatesConfigUnlocked; } });

package/dist/cjs/src/create/createAutocompleteController.js

@@ -28,6 +28,7 @@ exports.default = (config, services) => {
         profiler: services?.profiler || new snap_profiler_1.Profiler(),
         logger: services?.logger || new snap_logger_1.Logger({ mode: config.mode }),
         tracker: services?.tracker || new snap_tracker_1.Tracker(config.client.globals),
+        quickviewManager: services?.quickviewManager,
     }, config.context);
     return cntrlr;
 };

package/dist/cjs/src/create/createChatController.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const snap_controller_1 = require("@athoscommerce/snap-controller");
+const snap_client_1 = require("@athoscommerce/snap-client");
+const snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
+const snap_url_manager_1 = require("@athoscommerce/snap-url-manager");
+const snap_event_manager_1 = require("@athoscommerce/snap-event-manager");
+const snap_profiler_1 = require("@athoscommerce/snap-profiler");
+const snap_logger_1 = require("@athoscommerce/snap-logger");
+const snap_tracker_1 = require("@athoscommerce/snap-tracker");
+exports.default = (config, services) => {
+    const urlManager = (services?.urlManager || new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(config.url), snap_url_manager_1.reactLinker)).detach(true);
+    // set client mode
+    if (config.mode && config.client) {
+        config.client.config = config.client.config || {};
+        config.client.config.mode = config.mode;
+    }
+    const client = services?.client || new snap_client_1.Client(config.client.globals, config.client.config);
+    const siteId = config.client?.globals?.siteId || client.siteId;
+    const cntrlr = new snap_controller_1.ChatController(config.controller, {
+        client,
+        store: services?.store || new snap_store_mobx_1.ChatStore({ ...config.controller, siteId }, { urlManager }),
+        urlManager,
+        eventManager: services?.eventManager || new snap_event_manager_1.EventManager(),
+        profiler: services?.profiler || new snap_profiler_1.Profiler(),
+        logger: services?.logger || new snap_logger_1.Logger({ mode: config.mode }),
+        tracker: services?.tracker || new snap_tracker_1.Tracker(config.client.globals),
+    }, config.context);
+    return cntrlr;
+};

package/dist/cjs/src/create/createRecommendationController.js

@@ -23,6 +23,7 @@ exports.default = (config, services) => {
         profiler: services?.profiler || new snap_profiler_1.Profiler(),
         logger: services?.logger || new snap_logger_1.Logger({ mode: config.mode }),
         tracker: services?.tracker || new snap_tracker_1.Tracker(config.client.globals),
+        quickviewManager: services?.quickviewManager,
     }, config.context);
     return cntrlr;
 };

package/dist/cjs/src/create/createSearchController.js

@@ -23,6 +23,7 @@ exports.default = (config, services) => {
         profiler: services?.profiler || new snap_profiler_1.Profiler(),
         logger: services?.logger || new snap_logger_1.Logger({ mode: config.mode }),
         tracker: services?.tracker || new snap_tracker_1.Tracker(config.client.globals),
+        quickviewManager: services?.quickviewManager,
     }, config.context);
     return cntrlr;
 };

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

@@ -3,9 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSearchController = exports.createRecommendationController = exports.createFinderController = exports.createAutocompleteController = void 0;
+exports.createSearchController = exports.createRecommendationController = exports.createFinderController = exports.createChatController = exports.createAutocompleteController = void 0;
 var createAutocompleteController_1 = require("./createAutocompleteController");
 Object.defineProperty(exports, "createAutocompleteController", { enumerable: true, get: function () { return __importDefault(createAutocompleteController_1).default; } });
+var createChatController_1 = require("./createChatController");
+Object.defineProperty(exports, "createChatController", { enumerable: true, get: function () { return __importDefault(createChatController_1).default; } });
 var createFinderController_1 = require("./createFinderController");
 Object.defineProperty(exports, "createFinderController", { enumerable: true, get: function () { return __importDefault(createFinderController_1).default; } });
 var createRecommendationController_1 = require("./createRecommendationController");

package/dist/cjs/src/index.js

@@ -14,13 +14,15 @@ 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.polyfills = exports.TemplatesStore = exports.SnapTemplates = exports.SnapHybrid = exports.Snap = void 0;
+exports.polyfills = exports.TemplatesStore = exports.validateTemplatesConfigUnlocked = exports.validateTemplatesConfig = exports.SnapTemplates = exports.SnapHybrid = exports.Snap = void 0;
 var Snap_1 = require("./Snap");
 Object.defineProperty(exports, "Snap", { enumerable: true, get: function () { return Snap_1.Snap; } });
 var SnapHybrid_1 = require("./SnapHybrid");
 Object.defineProperty(exports, "SnapHybrid", { enumerable: true, get: function () { return SnapHybrid_1.SnapHybrid; } });
 var Templates_1 = require("./Templates");
 Object.defineProperty(exports, "SnapTemplates", { enumerable: true, get: function () { return Templates_1.SnapTemplates; } });
+Object.defineProperty(exports, "validateTemplatesConfig", { enumerable: true, get: function () { return Templates_1.validateTemplatesConfig; } });
+Object.defineProperty(exports, "validateTemplatesConfigUnlocked", { enumerable: true, get: function () { return Templates_1.validateTemplatesConfigUnlocked; } });
 var TemplateStore_1 = require("./Templates/Stores/TemplateStore");
 Object.defineProperty(exports, "TemplatesStore", { enumerable: true, get: function () { return TemplateStore_1.TemplatesStore; } });
 var polyfills_1 = require("./polyfills/polyfills");

package/dist/cjs/src/setupEvents.js

@@ -32,6 +32,50 @@ const setupEvents = () => {
         });
         await next();
     });
+    eventManager.on('controller/chat/send', async (data, next) => {
+        const { controllerIds, ...payload } = (data || {});
+        const controllers = matchControllers(controllerIds).filter((controller) => {
+            return Boolean(controller.type === 'chat');
+        });
+        // A request is dispatched only when the payload carries either an explicit
+        // requestType or a message. With nothing to send the event still opens the chat.
+        const hasRequest = 'requestType' in payload || 'message' in payload;
+        const requestData = hasRequest ? { requestType: 'general', ...payload } : null;
+        controllers.map((controller) => {
+            const chatController = controller;
+            chatController.openChat();
+            if (requestData) {
+                chatController.search({ data: requestData });
+            }
+        });
+        await next();
+    });
+    eventManager.on('controller/chat/productQuery', async (data, next) => {
+        const { controllerIds, result } = data || {};
+        const controllers = matchControllers(controllerIds).filter((controller) => {
+            return Boolean(controller.type === 'chat');
+        });
+        controllers.map((controller) => {
+            // openChat first — it replaces an expired session with a fresh chat,
+            // which would otherwise discard the attachment productQuery adds
+            controller.openChat();
+            controller.productQuery(result);
+        });
+        await next();
+    });
+    eventManager.on('controller/chat/productSimilar', async (data, next) => {
+        const { controllerIds, result } = data || {};
+        const controllers = matchControllers(controllerIds).filter((controller) => {
+            return Boolean(controller.type === 'chat');
+        });
+        controllers.map((controller) => {
+            // openChat first — it replaces an expired session with a fresh chat,
+            // which would otherwise orphan the search productSimilar fires
+            controller.openChat();
+            controller.productSimilar(result);
+        });
+        await next();
+    });
     return eventManager;
 };
 exports.setupEvents = setupEvents;

package/dist/cjs/src/utils/applyChatTargetInject.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyChatTargetInject = applyChatTargetInject;
+// Chat targets never render *into* the matched element — DomTargeter would empty it
+// (and hideTarget would hide it, e.g. a merchant's nav while injecting a ChatButton).
+// Instead, append a dedicated container to render into and never hide the host.
+// An explicit `inject` in the target config always wins.
+function applyChatTargetInject(target) {
+    if (target.inject) {
+        return target;
+    }
+    const isBody = target.selector === 'body';
+    return {
+        ...target,
+        hideTarget: false,
+        inject: {
+            action: 'append',
+            element: () => {
+                const container = document.createElement('div');
+                container.className = isBody ? 'ss__chat--target' : 'ss__chat--inline-target';
+                return container;
+            },
+        },
+    };
+}

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.combineMerge = exports.configureSnapFeatures = void 0;
+exports.combineMerge = exports.configureSnapFeatures = exports.applyChatTargetInject = void 0;
+var applyChatTargetInject_1 = require("./applyChatTargetInject");
+Object.defineProperty(exports, "applyChatTargetInject", { enumerable: true, get: function () { return applyChatTargetInject_1.applyChatTargetInject; } });
 var configureSnapFeatures_1 = require("./configureSnapFeatures/configureSnapFeatures");
 Object.defineProperty(exports, "configureSnapFeatures", { enumerable: true, get: function () { return configureSnapFeatures_1.configureSnapFeatures; } });
 var combineMerge_1 = require("./combineMerge");

package/dist/esm/components/src/components/Atoms/Button/Button.d.ts

@@ -9,6 +9,8 @@ export type ButtonProps = {
     lang?: Partial<ButtonLang>;
     name?: ButtonNames;
     content?: string | JSX.Element;
+    title?: string;
+    type?: 'button' | 'submit' | 'reset';
 } & ButtonTemplatesLegalProps & ComponentProps<ButtonProps>;
 export type ButtonTemplatesLegalProps = {
     backgroundColor?: string;
@@ -24,5 +26,5 @@ export type ButtonTemplatesLegalProps = {
 export interface ButtonLang {
     button?: Lang<never>;
 }
-export type ButtonNames = 'close' | 'apply' | 'clear' | 'slideout' | 'sidebar-toggle' | 'see-more' | 'next' | 'prev' | 'pause' | 'pagination' | 'pagination-current' | 'close-search' | 'clear-search' | 'submit-search' | 'reset-facet';
+export type ButtonNames = 'close' | 'apply' | 'chat' | 'clear' | 'slideout' | 'sidebar-toggle' | 'see-more' | 'next' | 'prev' | 'pause' | 'pagination' | 'pagination-current' | 'close-search' | 'clear-search' | 'submit-search' | 'reset-facet' | 'add-to-cart' | 'quickview' | 'more-info' | 'increment' | 'decrement' | 'zoom-in' | 'zoom-out';
 //# sourceMappingURL=Button.d.ts.map

package/dist/esm/components/src/components/Atoms/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAqC3E,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAiGrD,CAAC;AAMH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CAC/B,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAC/C,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GACpB,OAAO,GACP,OAAO,GACP,OAAO,GACP,UAAU,GACV,gBAAgB,GAChB,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,GACP,YAAY,GACZ,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,eAAe,GACf,aAAa,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAM9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAI7D,OAAO,EAAQ,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AAqC3E,eAAO,MAAM,MAAM,gBAAyB,WAAW;;CAiGrD,CAAC;AAMH,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC,GAAG,yBAAyB,GAC5B,cAAc,CAAC,WAAW,CAAC,CAAC;AAE7B,MAAM,MAAM,yBAAyB,GAAG;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAC/C,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,UAAU;IAC1B,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GACpB,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,UAAU,GACV,gBAAgB,GAChB,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,GACP,YAAY,GACZ,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,eAAe,GACf,aAAa,GACb,aAAa,GACb,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,UAAU,CAAC"}

package/dist/esm/components/src/components/Atoms/ChatLoadingIndicator/ChatLoadingIndicator.d.ts

@@ -0,0 +1,17 @@
+import { h } from 'preact';
+import { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const ChatLoadingIndicator: (properties: ChatLoadingIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null;
+export type ChatLoadingIndicatorProps = {
+    loading?: boolean;
+    verbs?: string[];
+    lang?: Partial<ChatLoadingIndicatorLang>;
+} & ComponentProps<ChatLoadingIndicatorProps>;
+export interface ChatLoadingIndicatorLang {
+    thinkingVerb?: Lang<never>;
+    searchingVerb?: Lang<never>;
+    analyzingVerb?: Lang<never>;
+    generatingVerb?: Lang<never>;
+    processingVerb?: Lang<never>;
+}
+//# sourceMappingURL=ChatLoadingIndicator.d.ts.map

package/dist/esm/components/src/components/Atoms/ChatLoadingIndicator/ChatLoadingIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatLoadingIndicator.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/ChatLoadingIndicator/ChatLoadingIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,IAAI,EAA8B,MAAM,gBAAgB,CAAC;AAiClE,eAAO,MAAM,oBAAoB,eAAgB,yBAAyB,4EA8EzE,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAC;CACzC,GAAG,cAAc,CAAC,yBAAyB,CAAC,CAAC;AAE9C,MAAM,WAAW,wBAAwB;IACxC,YAAY,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,aAAa,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,cAAc,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CAC7B"}

package/dist/esm/components/src/components/Atoms/ChatLoadingIndicator/ChatLoadingIndicator.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useState, useEffect } from 'preact/hooks';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import deepmerge from 'deepmerge';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { mergeProps, mergeStyles } from '../../../utilities';
+import { useCustomComponentOverride } from '../../../hooks';
+const DEFAULT_VERB_KEYS = ['thinkingVerb', 'searchingVerb', 'analyzingVerb', 'generatingVerb', 'processingVerb'];
+const MIN_INTERVAL = 1000;
+const MAX_INTERVAL = 5000;
+const defaultStyles = () => {
+    return css({
+        padding: '1em 2em 0 2em',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        color: '#666',
+        fontSize: '14px',
+        fontStyle: 'italic',
+        '.ss__chat-loading-indicator__verb': {
+            animation: 'ss-chat-loading-indicator-fade 0.5s ease-out',
+        },
+        '@keyframes ss-chat-loading-indicator-fade': {
+            '0%': {
+                opacity: 0,
+                transform: 'translateY(4px)',
+            },
+            '100%': {
+                opacity: 1,
+                transform: 'translateY(0)',
+            },
+        },
+    });
+};
+export const ChatLoadingIndicator = (properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('chatLoadingIndicator', globalTheme, defaultProps, properties);
+    const { loading, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('chatLoadingIndicator', props);
+    //initialize lang
+    const defaultLang = {
+        thinkingVerb: { value: 'Thinking' },
+        searchingVerb: { value: 'Searching' },
+        analyzingVerb: { value: 'Analyzing' },
+        generatingVerb: { value: 'Generating' },
+        processingVerb: { value: 'Processing' },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const defaultVerbs = DEFAULT_VERB_KEYS.map((key) => {
+        const value = lang[key]?.value;
+        return (typeof value == 'function' ? value() : value);
+    }).filter(Boolean);
+    // fall back to the lang-provided default verbs inline — can't rely on defaultProps because
+    // mergeProps spreads incoming props over defaults, so an explicit `verbs={undefined}` from a
+    // caller would wipe out the default array.
+    const verbs = props.verbs && props.verbs.length > 0 ? props.verbs : defaultVerbs;
+    // key on content (not array identity) so inline array props don't restart the cycle every render
+    const verbsKey = JSON.stringify(verbs);
+    const [verbIndex, setVerbIndex] = useState(0);
+    useEffect(() => {
+        if (!loading) {
+            setVerbIndex(0);
+            return;
+        }
+        let timeoutId;
+        const scheduleNext = () => {
+            const nextInterval = Math.floor(Math.random() * (MAX_INTERVAL - MIN_INTERVAL + 1)) + MIN_INTERVAL;
+            timeoutId = setTimeout(() => {
+                setVerbIndex((prev) => (prev + 1) % verbs.length);
+                scheduleNext();
+            }, nextInterval);
+        };
+        scheduleNext();
+        return () => clearTimeout(timeoutId);
+    }, [loading, verbsKey]);
+    // after all hooks — an override that resolves or fails mid-lifecycle must not
+    // change the hook count between renders
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const styling = mergeStyles(props, defaultStyles);
+    const verb = verbs[verbIndex % verbs.length];
+    if (!loading || !verb)
+        return null;
+    return (_jsx(CacheProvider, { children: _jsx("div", { className: classnames('ss__chat-loading-indicator', className, internalClassName), role: "status", "aria-live": "polite", ...styling, children: _jsxs("span", { className: 'ss__chat-loading-indicator__verb', children: [verb, "..."] }, verbIndex) }) }));
+};

package/dist/esm/components/src/components/Atoms/ChatLoadingIndicator/index.d.ts

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

package/dist/esm/components/src/components/Atoms/ChatLoadingIndicator/index.d.ts.map

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

package/dist/esm/components/src/components/Atoms/ChatLoadingIndicator/index.js

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

package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts

@@ -1,9 +1,13 @@
 import { ComponentChildren, h } from 'preact';
+import { MutableRef } from 'preact/hooks';
 import { ComponentProps } from '../../../types';
 export declare const Dropdown: ((properties: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
-export type DropdownProps = DropdownTemplatesLegalProps & ComponentProps<DropdownProps>;
+export type DropdownProps = {
+    /** Constrains the portal to this element's horizontal bounds instead of the viewport. */
+    boundaryRef?: MutableRef<HTMLElement | null>;
+} & DropdownTemplatesLegalProps & ComponentProps<DropdownProps>;
 export type DropdownTemplatesLegalProps = {
     button: string | JSX.Element;
     content?: string | JSX.Element;
@@ -22,5 +26,6 @@ export type DropdownTemplatesLegalProps = {
     focusTrapContent?: boolean;
     disableA11y?: boolean;
     usePortal?: boolean;
+    dropUp?: boolean;
 };
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA+B7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CAwNzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,2BAA2B,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AACxF,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAA0B,UAAU,EAAgD,MAAM,cAAc,CAAC;AAMhH,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAoC7D,eAAO,MAAM,QAAQ,gBAAyB,aAAa;;CA6QzD,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG;IAC3B,yFAAyF;IACzF,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC7C,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAC/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC"}

package/dist/esm/components/src/components/Atoms/Dropdown/Dropdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createPortal } from 'preact/compat';
-import { useState, useRef, useEffect } from 'preact/hooks';
+import { useState, useRef, useEffect, useLayoutEffect } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -8,7 +8,7 @@ import { useTheme, CacheProvider, useTreePath } from '../../../providers';
 import { useClickOutside, useCustomComponentOverride } from '../../../hooks';
 import { cloneWithProps, mergeProps, mergeStyles } from '../../../utilities';
 import { useA11y } from '../../../hooks/useA11y';
-const defaultStyles = ({ disableOverlay }) => {
+const defaultStyles = ({ disableOverlay, dropUp }) => {
     return css({
         position: 'relative',
         '&.ss__dropdown--open, &.ss__dropdown__portal--open': {
@@ -27,9 +27,14 @@ const defaultStyles = ({ disableOverlay }) => {
             minWidth: '100%',
             visibility: 'hidden',
             opacity: 0,
-            top: 'auto',
+            top: dropUp ? undefined : 'auto',
+            bottom: dropUp ? '100%' : undefined,
             left: 0,
         },
+        '&.ss__dropdown__portal--flip-x .ss__dropdown__content': {
+            left: 'auto',
+            right: 0,
+        },
     });
 };
 export const Dropdown = observer((properties) => {
@@ -41,7 +46,7 @@ export const Dropdown = observer((properties) => {
         treePath: globalTreePath,
     };
     const props = mergeProps('dropdown', globalTheme, defaultProps, properties);
-    const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, } = props;
+    const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, dropUp, boundaryRef, } = props;
     const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('dropdown', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -59,6 +64,8 @@ export const Dropdown = observer((properties) => {
     const buttonRef = useRef(null);
     const contentRef = useRef(null);
     const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
+    const [flipX, setFlipX] = useState(false);
+    const [flipRight, setFlipRight] = useState(0);
     let innerRef;
     if (!disableClickOutside) {
         innerRef = useClickOutside((e) => {
@@ -71,16 +78,28 @@ export const Dropdown = observer((properties) => {
                     onToggle && onToggle(e, false);
                 }
             }
-        });
+            // capture phase so outside clicks close the dropdown even inside the quickview wrapper,
+            // which stops click propagation; the contentRef guard above covers the portaled options
+        }, true);
     }
-    useEffect(() => {
+    // Position the portal BEFORE the browser paints — with a regular effect the dropdown
+    // options would flash at (0,0) until the effect runs and computes the real button position.
+    // Resize / scroll listeners stay on a regular effect — they only need to run after
+    // the initial layout pass is committed.
+    useLayoutEffect(() => {
         if (usePortal && dropdownOpen) {
             const updateCoords = () => {
                 if (buttonRef.current) {
                     const rect = buttonRef.current.getBoundingClientRect();
+                    // Clamp the anchor to the boundary's horizontal range so the dropdown
+                    // stays visible inside the boundary even when the button scrolls out
+                    // of view (e.g. a horizontally-scrolling facets row). The right edge
+                    // is handled by the flip-x logic below.
+                    const boundaryRect = boundaryRef?.current?.getBoundingClientRect();
+                    const left = boundaryRect ? Math.max(boundaryRect.left, Math.min(rect.left, boundaryRect.right)) : rect.left;
                     setCoords({
-                        top: rect.bottom + window.scrollY,
-                        left: rect.left + window.scrollX,
+                        top: dropUp ? rect.top : rect.bottom,
+                        left,
                         width: rect.width,
                     });
                 }
@@ -93,7 +112,36 @@ export const Dropdown = observer((properties) => {
                 window.removeEventListener('scroll', updateCoords, true);
             };
         }
-    }, [usePortal, dropdownOpen]);
+    }, [usePortal, dropdownOpen, dropUp, boundaryRef]);
+    // Reset flip state when dropdown closes
+    useEffect(() => {
+        if (!dropdownOpen) {
+            setFlipX(false);
+        }
+    }, [dropdownOpen]);
+    // After the portal renders, check if content overflows the right edge of the
+    // boundary (when provided) or the viewport and flip the horizontal anchor if so.
+    // When flipped, anchor the portal to the boundary's right edge so the dropdown
+    // stops at the boundary rather than at the button's right edge.
+    // useLayoutEffect fires before paint to avoid flash.
+    useLayoutEffect(() => {
+        if (usePortal && dropdownOpen && contentRef.current && coords.width > 0) {
+            // Measure the width the content would occupy when unflipped so the check
+            // uses the same basis in both states. When unflipped the portal is given an
+            // explicit `width: coords.width` (and the content has minWidth 100%), so the
+            // rendered width is max(intrinsic, coords.width); when flipped the explicit
+            // width is dropped, so offsetWidth alone reports only the intrinsic width.
+            // Reading rect.right after a flip would report the anchored edge instead of
+            // the natural one, causing the dropdown to oscillate between flipped and
+            // unflipped on every scroll tick.
+            const contentWidth = Math.max(contentRef.current.offsetWidth, coords.width);
+            const limit = boundaryRef?.current?.getBoundingClientRect().right ?? window.innerWidth;
+            const shouldFlip = coords.left + contentWidth > limit;
+            setFlipX(shouldFlip);
+            if (shouldFlip)
+                setFlipRight(Math.max(0, window.innerWidth - limit));
+        }
+    }, [usePortal, dropdownOpen, coords.left, coords.width, boundaryRef]);
     const toggleOpenDropdown = (e, state) => {
         if (stateful) {
             setDropdownOpen &&
@@ -159,15 +207,20 @@ export const Dropdown = observer((properties) => {
                         setTimeout(() => {
                             setIsTouchInteraction(false);
                         }, 300);
-                    }, children: cloneWithProps(button, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath }) }), !usePortal
+                    }, children: cloneWithProps(button, { open: dropdownOpen, ...(disabled !== undefined ? { disabled } : {}), toggleOpen: toggleOpenDropdown, treePath }) }), !usePortal
                     ? (content || children) && contentElement
                     : (content || children) &&
-                        createPortal(_jsx("div", { className: classnames('ss__dropdown__portal', className, internalClassName, { 'ss__dropdown__portal--open': dropdownOpen }), css: styling.css, style: {
-                                position: 'absolute',
-                                top: coords.top,
-                                left: coords.left,
-                                width: coords.width,
-                                zIndex: 9999,
-                                pointerEvents: dropdownOpen ? 'auto' : 'none',
-                            }, children: contentElement }), document.body)] }) }));
+                        createPortal(_jsx("div", { className: globalTheme.name ? `ss__theme__${globalTheme.name}` : 'ss__theme__global', children: _jsx("div", { className: classnames('ss__dropdown__portal', className, internalClassName, {
+                                    'ss__dropdown__portal--open': dropdownOpen,
+                                    'ss__dropdown__portal--flip-x': flipX,
+                                }), css: styling.css, style: {
+                                    position: 'fixed',
+                                    top: coords.top,
+                                    ...(flipX ? { right: flipRight } : { left: coords.left, width: coords.width }),
+                                    // 10007: above the quickview modal content (10006) so variant dropdowns paint over it,
+                                    // below the Gallery lightbox (10010). Full ladder: see QuickviewModal defaultStyles.
+                                    zIndex: 10007,
+                                    ...(dropUp ? { transform: 'translateY(-100%)' } : {}),
+                                    pointerEvents: dropdownOpen ? 'auto' : 'none',
+                                }, children: contentElement }) }), document.body)] }) }));
 });

package/dist/esm/components/src/components/Atoms/Icon/paths.d.ts

@@ -15,6 +15,7 @@ export declare const iconPaths: {
     circle: string;
     close: string;
     'close-thin': string;
+    'close-rounded': string;
     cog: string;
     cogs: string;
     dollar: string;
@@ -23,6 +24,7 @@ export declare const iconPaths: {
     eye: string;
     'eye-thin': string;
     filter: string;
+    'filter-funnel': string;
     filters: ({
         type: string;
         attributes: {
@@ -102,6 +104,7 @@ export declare const iconPaths: {
     'minus-thin': string;
     plus: string;
     'plus-thin': string;
+    'plus-rounded': string;
     'rotate-left': string;
     'rotate-right': string;
     search: string;
@@ -115,5 +118,15 @@ export declare const iconPaths: {
     'video-camera': string;
     warn: string;
     wrench: string;
+    'thumbs-up': string;
+    'thumbs-down': string;
+    history: string;
+    send: string;
+    chat: string;
+    similar: string;
+    image: string;
+    cart: string;
+    compare: string;
+    clipboard: string;
 };
 //# sourceMappingURL=paths.d.ts.map

package/dist/esm/components/src/components/Atoms/Icon/paths.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/paths.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAS9C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA8FlB,EAAE;YACF,EAAE;YACF,CAAC;YACD,cAAc;YACd,IAAI;YACJ,MAAM;;;;;;;;;;;;;;;;YAiBN,EAAE;YACF,EAAE;YACF,CAAC;YACD,cAAc;YACd,IAAI;YACJ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CT,CAAC"}
+{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/paths.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAS9C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAiGlB,EAAE;YACF,EAAE;YACF,CAAC;YACD,cAAc;YACd,IAAI;YACJ,MAAM;;;;;;;;;;;;;;;;YAiBN,EAAE;YACF,EAAE;YACF,CAAC;YACD,cAAc;YACd,IAAI;YACJ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgET,CAAC"}