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

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/combineMerge.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.combineMerge = combineMerge;
-var deepmerge_1 = __importDefault(require("deepmerge"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
 function combineMerge(target, source, options) {
-    var destination = target.slice();
-    source.forEach(function (item, index) {
+    const destination = target.slice();
+    source.forEach((item, index) => {
         if (typeof destination[index] === 'undefined') {
             destination[index] = options.cloneUnlessOtherwiseSpecified(item, options);
         }

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

@@ -8,27 +8,26 @@ function configureSnapFeatures(config) {
     configureTracking(config);
 }
 function configureTracking(config) {
-    var _a;
     // Athos' Shopify Web Pixel App compatibility
-    var webPixel;
+    let webPixel;
     try {
-        webPixel = (_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(exports.SHOPIFY_WEBPIXEL_STORAGE_KEY);
+        webPixel = window.sessionStorage?.getItem(exports.SHOPIFY_WEBPIXEL_STORAGE_KEY);
     }
-    catch (_b) {
+    catch {
         // storage not enabled
     }
     if (webPixel) {
         try {
-            var webPixelData = JSON.parse(webPixel);
+            const webPixelData = JSON.parse(webPixel);
             // when enabled, add certain events to doNotTrack list
-            if (webPixelData === null || webPixelData === void 0 ? void 0 : webPixelData.enabled) {
-                var doNotTrack = ['product.view', 'cart.view', 'order.transaction'];
+            if (webPixelData?.enabled) {
+                const doNotTrack = ['product.view', 'cart.view', 'order.transaction'];
                 config.tracker = config.tracker || {};
                 config.tracker.config = config.tracker.config || {};
                 config.tracker.config.doNotTrack = (config.tracker.config.doNotTrack || []).concat(doNotTrack);
             }
         }
-        catch (_c) {
+        catch {
             // storage not enabled
         }
     }

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/Breadcrumbs/Breadcrumbs.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';

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';
 //# 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,CAAC"}

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

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -81,7 +81,7 @@ export const Button = observer((properties) => {
     const defaultLang = {};
     //deep merge with props.lang
     const langs = deepmerge(defaultLang, lang || {});
-    const mergedLang = useLang(langs, {});
+    const mergedLang = useLang(langs, {}, { activeBreakpoint: globalTheme?.activeBreakpoint });
     // @ts-ignore - additionalProps may contain dangerouslySetInnerHTML which is fine to spread on the element, but doesn't fit the ButtonProps type definition so we need to ignore it here.
     const hasDangerouslySetInnerHTML = Boolean(additionalProps.dangerouslySetInnerHTML);
     return content || children || icon || lang?.button?.value || hasDangerouslySetInnerHTML ? (_jsx(CacheProvider, { children: native ? (_jsxs("button", { ...elementProps, children: [_jsxs("span", { className: "ss__button__content", ...mergedLang.button?.all, children: [cloneWithProps(content, { treePath }), cloneWithProps(children, { treePath })] }), icon && _jsx(Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) })] })) : (_jsxs("div", { ...(!disableA11y ? a11yProps : {}), role: 'button', "aria-disabled": disabled, ...elementProps, ...mergedLang.button?.attributes, children: [content || children || mergedLang.button?.value ? (_jsxs("span", { className: "ss__button__content", ...mergedLang.button?.value, children: [cloneWithProps(content, { treePath }), cloneWithProps(children, { treePath })] })) : undefined, icon && _jsx(Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) })] })) })) : null;

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;;CAmQzD,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 { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+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) => {
@@ -78,9 +85,15 @@ export const Dropdown = observer((properties) => {
             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 +106,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 +201,18 @@ 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',
+                        createPortal(_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,
-                                left: coords.left,
-                                width: coords.width,
+                                ...(flipX ? { right: flipRight } : { left: coords.left, width: coords.width }),
                                 zIndex: 9999,
+                                ...(dropUp ? { transform: 'translateY(-100%)' } : {}),
                                 pointerEvents: dropdownOpen ? 'auto' : 'none',
                             }, children: contentElement }), document.body)] }) }));
 });

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

@@ -1,7 +1,7 @@
-import { h, ComponentChildren, JSX, VNode } from 'preact';
+import { ComponentChildren, JSX, VNode } from 'preact';
 import { ComponentProps } from '../../../types';
 import { IconType } from './paths';
-export declare const Icon: ((properties: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+export declare const Icon: ((properties: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element | JSX.Element | null) & {
     displayName: string;
 };
 export type SVGPathElement = {

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,iBAAiB,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAO1D,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAe9C,eAAO,MAAM,IAAI,gBAAyB,SAAS;;CA+FjD,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,iBAAiB,GACjB,uBAAuB,GACvB,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,GACV,aAAa,GACb,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,eAAe,GACf,eAAe,CAAC"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAO1D,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAa,QAAQ,EAAE,MAAM,SAAS,CAAC;AAe9C,eAAO,MAAM,IAAI,gBAAyB,SAAS;;CA+FjD,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE;QACX,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC5B,CAAC;CACF,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB,GAAG,uBAAuB,GAC1B,cAAc,CAAC,SAAS,CAAC,CAAC;AAE3B,MAAM,MAAM,uBAAuB,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,iBAAiB,GACjB,uBAAuB,GACvB,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,GACV,aAAa,GACb,YAAY,GACZ,WAAW,GACX,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,eAAe,GACf,eAAe,CAAC"}

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: {
@@ -42,18 +44,18 @@ export declare const iconPaths: {
     } | {
         type: string;
         attributes: {
-            cx: string;
-            cy: string;
-            r: string;
-            fill: string;
-            'stroke-width': string;
-            stroke: string;
             x1?: undefined;
             y1?: undefined;
             x2?: undefined;
             y2?: undefined;
             'stroke-linecap'?: undefined;
             'stroke-linejoin'?: undefined;
+            cx: string;
+            cy: string;
+            r: string;
+            fill: string;
+            'stroke-width': string;
+            stroke: string;
         };
     })[];
     bullet: ({
@@ -69,12 +71,12 @@ export declare const iconPaths: {
     } | {
         type: string;
         attributes: {
+            fill?: undefined;
+            stroke?: undefined;
             cx: string;
             cy: string;
             r: string;
             'stroke-width': string;
-            fill?: undefined;
-            stroke?: undefined;
         };
     })[];
     'bullet-o': {
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKrB,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"}