@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/themes/pike/components/organisms/autocomplete.js

@@ -1,224 +1,225 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var _a, _b, _c, _d;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.autocomplete = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
-var autocomplete_1 = require("../../../themeComponents/autocomplete");
+const react_1 = require("@emotion/react");
+const custom_1 = require("../../custom");
+const autocomplete_1 = require("../../../themeComponents/autocomplete");
 // static variables
-var headerSelectors = '.ss__autocomplete__terms .ss__autocomplete__title h5, .ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__header, .ss__autocomplete__content__results .ss__autocomplete__title h5, .ss__autocomplete__content__info a, .ss__no-results__recommendations h3';
-var activeSelectors = '.ss__autocomplete__terms .ss__autocomplete__terms__options .ss__autocomplete__terms__option--active a, .ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__options .ss__facet-list-options .ss__facet-list-options__option--filtered, .ss__autocomplete__content__results .ss__results .ss__result:hover .ss__result__details .ss__result__details__title a, .ss__autocomplete__content__info a:hover';
+const headerSelectors = '.ss__autocomplete__terms .ss__autocomplete__title h5, .ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__header, .ss__autocomplete__content__results .ss__autocomplete__title h5, .ss__autocomplete__content__info a, .ss__no-results__recommendations h3';
+const activeSelectors = '.ss__autocomplete__terms .ss__autocomplete__terms__options .ss__autocomplete__terms__option--active a, .ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__options .ss__facet-list-options .ss__facet-list-options__option--filtered, .ss__autocomplete__content__results .ss__results .ss__result:hover .ss__result__details .ss__result__details__title a, .ss__autocomplete__content__info a:hover';
 // CSS in JS style script for the Autocomplete component
-var autocompleteStyleScript = function (props) {
-    var _a, _b, _c;
-    var _d, _e, _f, _g, _h, _j, _k;
+const autocompleteStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_d = props === null || props === void 0 ? void 0 : props.theme) === null || _d === void 0 ? void 0 : _d.variables;
-    var desktopBp = (_e = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _e === void 0 ? void 0 : _e.desktop;
-    var tabletBp = (_f = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _f === void 0 ? void 0 : _f.tablet;
-    var mobileBp = (_g = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _g === void 0 ? void 0 : _g.mobile;
+    const variables = props?.theme?.variables;
+    const desktopBp = variables?.breakpoints?.desktop;
+    const tabletBp = variables?.breakpoints?.tablet;
+    const mobileBp = variables?.breakpoints?.mobile;
     // shared styles
-    var sharedStyles = (0, react_1.css)((_a = {
-            '&.ss__autocomplete': (_b = {
-                    top: '48px',
-                    left: 0,
-                    right: 0,
-                    border: "1px solid ".concat(custom_1.custom.colors.gray02),
-                    backgroundColor: custom_1.custom.colors.white,
-                    overflow: 'hidden',
-                    gap: "".concat(custom_1.custom.spacing.x4, "px"),
-                    padding: "".concat(custom_1.custom.spacing.x4, "px"),
-                    '&.ss__autocomplete--only-terms': {
-                        width: '100%',
-                    },
-                    'a, div, p, .ss__button': {
-                        fontSize: '12px',
-                    },
-                    'a, div:not(.ss__button, .ss__rating__icons, .ss__rating__icons .ss__rating__stars .ss__rating__stars__star), p': {
-                        lineHeight: 1.5,
-                    },
-                    a: {
-                        display: 'block',
-                    },
-                    'ul, ul li': {
+    const sharedStyles = (0, react_1.css)({
+        '&.ss__autocomplete': {
+            top: '48px',
+            left: 0,
+            right: 0,
+            border: `1px solid ${custom_1.custom.colors.gray02}`,
+            backgroundColor: custom_1.custom.colors.white,
+            overflow: 'hidden',
+            gap: `${custom_1.custom.spacing.x4}px`,
+            padding: `${custom_1.custom.spacing.x4}px`,
+            '&.ss__autocomplete--only-terms': {
+                width: '100%',
+            },
+            'a, div, p, .ss__button': {
+                fontSize: '12px',
+            },
+            'a, div:not(.ss__button, .ss__rating__icons, .ss__rating__icons .ss__rating__stars .ss__rating__stars__star), p': {
+                lineHeight: 1.5,
+            },
+            a: {
+                display: 'block',
+            },
+            'ul, ul li': {
+                padding: 0,
+                margin: 0,
+                listStyle: 'none',
+            },
+            '.ss__banner': {
+                img: {
+                    maxWidth: '100%',
+                    maxHeight: '150px',
+                    height: 'auto',
+                },
+            },
+            [headerSelectors]: {
+                padding: 0,
+                ...custom_1.custom.styles.headerText(variables?.colors?.secondary, '14px'),
+                lineHeight: 1.2,
+            },
+            '.ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__header, .ss__autocomplete__content__results .ss__autocomplete__title h5, .ss__autocomplete__content__info a, .ss__no-results__recommendations h3': {
+                margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
+            },
+            [activeSelectors]: {
+                ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+            },
+            '& > div': {
+                minWidth: '1px',
+                maxWidth: 'none',
+                flex: props?.vertical ? `1 1 calc(100% + ${custom_1.custom.spacing.x8}px)` : '1 1 0%',
+                margin: `0 -${custom_1.custom.spacing.x4}px`,
+                padding: `0 ${custom_1.custom.spacing.x4}px`,
+                paddingBottom: `${custom_1.custom.spacing.x4}px`,
+                borderBottom: `1px solid ${custom_1.custom.colors.gray02}`,
+                '&:last-child': {
+                    paddingBottom: 0,
+                    borderBottomWidth: 0,
+                },
+            },
+            '.ss__autocomplete__terms, .ss__autocomplete__facets': {
+                flex: props?.vertical ? '' : '0 0 200px',
+            },
+            '.ss__autocomplete__terms': {
+                backgroundColor: 'transparent',
+                '& > div': {
+                    '.ss__autocomplete__title': {
                         padding: 0,
-                        margin: 0,
-                        listStyle: 'none',
                     },
-                    '.ss__banner': {
-                        img: {
-                            maxWidth: '100%',
-                            maxHeight: '150px',
-                            height: 'auto',
+                    '.ss__autocomplete__terms__options': {
+                        '.ss__autocomplete__terms__option a': {
+                            fontSize: '14px',
+                            em: {
+                                fontStyle: 'normal',
+                                fontSize: 'inherit',
+                                fontWeight: 'inherit',
+                            },
+                        },
+                        '.ss__autocomplete__terms__option--active a': {
+                            '&, & em': {
+                                ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+                            },
                         },
-                    }
-                },
-                _b[headerSelectors] = __assign(__assign({ padding: 0 }, custom_1.custom.styles.headerText((_h = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _h === void 0 ? void 0 : _h.secondary, '14px')), { lineHeight: 1.2 }),
-                _b['.ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__header, .ss__autocomplete__content__results .ss__autocomplete__title h5, .ss__autocomplete__content__info a, .ss__no-results__recommendations h3'] = {
-                    margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
-                },
-                _b[activeSelectors] = __assign({}, custom_1.custom.styles.activeText((_j = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _j === void 0 ? void 0 : _j.primary)),
-                _b['& > div'] = {
-                    minWidth: '1px',
-                    maxWidth: 'none',
-                    flex: (props === null || props === void 0 ? void 0 : props.vertical) ? "1 1 calc(100% + ".concat(custom_1.custom.spacing.x8, "px)") : '1 1 0%',
-                    margin: "0 -".concat(custom_1.custom.spacing.x4, "px"),
-                    padding: "0 ".concat(custom_1.custom.spacing.x4, "px"),
-                    paddingBottom: "".concat(custom_1.custom.spacing.x4, "px"),
-                    borderBottom: "1px solid ".concat(custom_1.custom.colors.gray02),
-                    '&:last-child': {
-                        paddingBottom: 0,
-                        borderBottomWidth: 0,
                     },
                 },
-                _b['.ss__autocomplete__terms, .ss__autocomplete__facets'] = {
-                    flex: (props === null || props === void 0 ? void 0 : props.vertical) ? '' : '0 0 200px',
-                },
-                _b['.ss__autocomplete__terms'] = {
-                    backgroundColor: 'transparent',
-                    '& > div': {
-                        '.ss__autocomplete__title': {
-                            padding: 0,
+            },
+            '.ss__autocomplete__facets': {
+                '.ss__facets': {
+                    width: '100%',
+                    flexFlow: 'row nowrap',
+                    gap: `${custom_1.custom.spacing.x4}px`,
+                    '.ss__facet': {
+                        flex: '1 1 0%',
+                        margin: 0,
+                        '.ss__facet__header': {
+                            borderBottom: 0,
                         },
-                        '.ss__autocomplete__terms__options': {
-                            '.ss__autocomplete__terms__option a': {
-                                fontSize: '14px',
-                                em: {
-                                    fontStyle: 'normal',
-                                    fontSize: 'inherit',
-                                    fontWeight: 'inherit',
+                        '.ss__facet__options': {
+                            '.ss__facet-hierarchy-options .ss__facet-hierarchy-options__option, .ss__facet-list-options .ss__facet-list-options__option': {
+                                padding: 0,
+                                margin: `0 0 ${custom_1.custom.spacing.x1}px 0`,
+                                '&:last-child': {
+                                    marginBottom: 0,
                                 },
                             },
-                            '.ss__autocomplete__terms__option--active a': {
-                                '&, & em': __assign({}, custom_1.custom.styles.activeText((_k = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _k === void 0 ? void 0 : _k.primary)),
+                            '.ss__facet__facet-grid-options .ss__facet-grid-options__option': {
+                                display: 'flex',
                             },
                         },
                     },
                 },
-                _b['.ss__autocomplete__facets'] = {
-                    '.ss__facets': {
-                        width: '100%',
-                        flexFlow: 'row nowrap',
-                        gap: "".concat(custom_1.custom.spacing.x4, "px"),
-                        '.ss__facet': {
-                            flex: '1 1 0%',
-                            margin: 0,
-                            '.ss__facet__header': {
-                                borderBottom: 0,
-                            },
-                            '.ss__facet__options': {
-                                '.ss__facet-hierarchy-options .ss__facet-hierarchy-options__option, .ss__facet-list-options .ss__facet-list-options__option': {
-                                    padding: 0,
-                                    margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"),
-                                    '&:last-child': {
-                                        marginBottom: 0,
-                                    },
-                                },
-                                '.ss__facet__facet-grid-options .ss__facet-grid-options__option': {
-                                    display: 'flex',
-                                },
-                            },
-                        },
-                    },
-                    '.ss__banner': {
-                        display: 'none',
-                        margin: "".concat(custom_1.custom.spacing.x4, "px 0 0 0"),
-                    },
+                '.ss__banner': {
+                    display: 'none',
+                    margin: `${custom_1.custom.spacing.x4}px 0 0 0`,
                 },
-                _b['.ss__autocomplete__content'] = {
+            },
+            '.ss__autocomplete__content': {
+                display: 'block',
+                overflow: 'visible',
+                '.ss__banner': {
+                    margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
+                },
+            },
+            '.ss__autocomplete__content__results': {
+                '&:after': {
+                    content: '""',
                     display: 'block',
-                    overflow: 'visible',
-                    '.ss__banner': {
-                        margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
-                    },
+                    height: `${custom_1.custom.spacing.x4}px`,
+                    margin: `0 -${custom_1.custom.spacing.x4}px`,
+                    position: 'relative',
+                    zIndex: 2,
                 },
-                _b['.ss__autocomplete__content__results'] = {
-                    '&:after': {
-                        content: '""',
-                        display: 'block',
-                        height: "".concat(custom_1.custom.spacing.x4, "px"),
-                        margin: "0 -".concat(custom_1.custom.spacing.x4, "px"),
-                        position: 'relative',
-                        zIndex: 2,
+                '.ss__results': {
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                    maxHeight: '54vh',
+                    ...custom_1.custom.styles.scrollbar(),
+                },
+                '.ss__results .ss__result.ss__result--grid': {
+                    ...custom_1.custom.styles.resultCompact('grid', '', 12),
+                },
+                '.ss__results .ss__result.ss__result--list': {
+                    ...custom_1.custom.styles.resultCompact('', '0 0 80px', 12),
+                },
+            },
+            '.ss__autocomplete__content__info': {
+                textAlign: 'left',
+                borderTop: `1px solid ${custom_1.custom.colors.gray02}`,
+                margin: `0 -${custom_1.custom.spacing.x4}px`,
+                padding: `${custom_1.custom.spacing.x4}px ${custom_1.custom.spacing.x4}px 0 ${custom_1.custom.spacing.x4}px`,
+                a: {
+                    position: 'relative',
+                    display: 'inline-block',
+                    padding: `0 ${custom_1.custom.spacing.x1 + custom_1.custom.sizes.icon12}px 0 0`,
+                    '&, .ss__icon': {
+                        margin: 0,
                     },
-                    '.ss__results': __assign({ overflowY: 'auto', overflowX: 'hidden', maxHeight: '54vh' }, custom_1.custom.styles.scrollbar()),
-                    '.ss__results .ss__result.ss__result--grid': __assign({}, custom_1.custom.styles.resultCompact('grid', '', 12)),
-                    '.ss__results .ss__result.ss__result--list': __assign({}, custom_1.custom.styles.resultCompact('', '0 0 80px', 12)),
-                },
-                _b['.ss__autocomplete__content__info'] = {
-                    textAlign: 'left',
-                    borderTop: "1px solid ".concat(custom_1.custom.colors.gray02),
-                    margin: "0 -".concat(custom_1.custom.spacing.x4, "px"),
-                    padding: "".concat(custom_1.custom.spacing.x4, "px ").concat(custom_1.custom.spacing.x4, "px 0 ").concat(custom_1.custom.spacing.x4, "px"),
-                    a: {
-                        position: 'relative',
-                        display: 'inline-block',
-                        padding: "0 ".concat(custom_1.custom.spacing.x1 + custom_1.custom.sizes.icon12, "px 0 0"),
-                        '&, .ss__icon': {
-                            margin: 0,
-                        },
-                        '.ss__icon': {
-                            position: 'absolute',
-                            top: 0,
-                            bottom: 0,
-                            right: 0,
-                            margin: 'auto 0',
-                        },
+                    '.ss__icon': {
+                        position: 'absolute',
+                        top: 0,
+                        bottom: 0,
+                        right: 0,
+                        margin: 'auto 0',
                     },
                 },
-                _b['.ss__autocomplete__content__no-results'] = {
-                    '.ss__autocomplete__content__no-results__text': {
-                        p: {
-                            display: 'inline',
-                            margin: 0,
-                            padding: 0,
-                            fontSize: '14px',
-                            '& ~ p': {
-                                paddingLeft: '4px',
-                            },
+            },
+            '.ss__autocomplete__content__no-results': {
+                '.ss__autocomplete__content__no-results__text': {
+                    p: {
+                        display: 'inline',
+                        margin: 0,
+                        padding: 0,
+                        fontSize: '14px',
+                        '& ~ p': {
+                            paddingLeft: '4px',
                         },
                     },
                 },
-                _b)
+            },
         },
-        _a["".concat(custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small))] = {
+        [`${custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small)}`]: {
             '&.ss__autocomplete': {
                 '.ss__autocomplete__content__results .ss__results.ss__results-list': {
-                    gap: "".concat(custom_1.custom.spacing.x2, "px"),
+                    gap: `${custom_1.custom.spacing.x2}px`,
                 },
             },
         },
-        _a["".concat(custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small, 'max'))] = {
+        [`${custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small, 'max')}`]: {
             '&.ss__autocomplete': {
                 '.ss__autocomplete__content__results .ss__results': {
-                    gridTemplateColumns: "repeat(2, 1fr)",
+                    gridTemplateColumns: `repeat(2, 1fr)`,
                     '& > *:nth-child(n + 3)': {
                         display: 'none',
                     },
                 },
             },
         },
-        _a["".concat(custom_1.custom.utils.getBp(mobileBp))] = {
+        [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
             '&.ss__autocomplete': {
                 '.ss__autocomplete__content .ss__autocomplete__content__info': {
                     textAlign: 'right',
                 },
             },
         },
-        _a["".concat(custom_1.custom.utils.getBp(tabletBp))] = {
+        [`${custom_1.custom.utils.getBp(tabletBp)}`]: {
             '&.ss__autocomplete': {
-                flexWrap: (props === null || props === void 0 ? void 0 : props.vertical) ? 'nowrap' : 'wrap',
+                flexWrap: props?.vertical ? 'nowrap' : 'wrap',
                 right: 0,
                 left: 'auto',
                 '& > div:not(.ss__autocomplete__terms), & > div:not(.ss__autocomplete__terms):last-child': {
@@ -226,7 +227,7 @@ var autocompleteStyleScript = function (props) {
                     borderBottomWidth: 0,
                 },
                 '.ss__autocomplete__terms': {
-                    flex: (props === null || props === void 0 ? void 0 : props.vertical) ? '' : "1 1 calc(100% + ".concat(custom_1.custom.spacing.x8, "px)"),
+                    flex: props?.vertical ? '' : `1 1 calc(100% + ${custom_1.custom.spacing.x8}px)`,
                 },
                 '.ss__autocomplete__facets': {
                     '.ss__facets': {
@@ -248,17 +249,16 @@ var autocompleteStyleScript = function (props) {
                 },
             },
         },
-        _a["".concat(custom_1.custom.utils.getBp(desktopBp))] = {
-            '&.ss__autocomplete': (_c = {
-                    flexWrap: (props === null || props === void 0 ? void 0 : props.vertical) ? 'wrap' : 'nowrap'
-                },
-                _c[headerSelectors] = {
+        [`${custom_1.custom.utils.getBp(desktopBp)}`]: {
+            '&.ss__autocomplete': {
+                flexWrap: props?.vertical ? 'wrap' : 'nowrap',
+                [headerSelectors]: {
                     fontSize: '16px',
                 },
-                _c['.ss__autocomplete__terms, .ss__autocomplete__facets'] = {
-                    flex: (props === null || props === void 0 ? void 0 : props.vertical) ? '' : '0 0 220px',
+                '.ss__autocomplete__terms, .ss__autocomplete__facets': {
+                    flex: props?.vertical ? '' : '0 0 220px',
                 },
-                _c['.ss__autocomplete__terms'] = {
+                '.ss__autocomplete__terms': {
                     flexWrap: 'wrap',
                     alignContent: 'flex-start',
                     paddingBottom: 0,
@@ -267,25 +267,25 @@ var autocompleteStyleScript = function (props) {
                         fontSize: '16px',
                     },
                 },
-                _c['.ss__autocomplete__content__results .ss__results'] = {
+                '.ss__autocomplete__content__results .ss__results': {
                     maxHeight: '60vh',
                 },
-                _c),
+            },
         },
-        _a));
+    });
     // autcomplete horizontal styles
-    var autocompleteHorizontalStyles = (0, react_1.css)([
+    const autocompleteHorizontalStyles = (0, react_1.css)([
         sharedStyles,
         {
             '.ss__autocomplete__terms': {
                 '& > div': {
                     '.ss__autocomplete__title h5': {
-                        margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
+                        margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
                     },
                     '.ss__autocomplete__terms__options': {
                         flexFlow: 'row wrap',
                         justifyContent: 'flex-start',
-                        gap: "".concat(custom_1.custom.spacing.x1, "px ").concat(custom_1.custom.spacing.x4, "px"),
+                        gap: `${custom_1.custom.spacing.x1}px ${custom_1.custom.spacing.x4}px`,
                         '.ss__autocomplete__terms__option': {
                             flex: '0 1 auto',
                             minWidth: '1px',
@@ -302,26 +302,26 @@ var autocompleteStyleScript = function (props) {
         },
     ]);
     // autcomplete vertical styles
-    var autocompleteVerticalStyles = (0, react_1.css)([
+    const autocompleteVerticalStyles = (0, react_1.css)([
         sharedStyles,
         {
             '.ss__autocomplete__terms': {
-                gap: "".concat(custom_1.custom.spacing.x4, "px"),
+                gap: `${custom_1.custom.spacing.x4}px`,
                 '& > div': {
                     '.ss__autocomplete__title h5': {
-                        margin: "0 0 ".concat(custom_1.custom.spacing.x2, "px 0"),
+                        margin: `0 0 ${custom_1.custom.spacing.x2}px 0`,
                     },
                     '.ss__autocomplete__terms__options': {
                         display: 'block',
                         '.ss__autocomplete__terms__option': {
                             a: {
-                                padding: "".concat(custom_1.custom.spacing.x2, "px 0"),
-                                transition: "padding-left 0.5s ease",
+                                padding: `${custom_1.custom.spacing.x2}px 0`,
+                                transition: `padding-left 0.5s ease`,
                             },
                         },
                         '.ss__autocomplete__terms__option--active': {
                             a: {
-                                paddingLeft: "".concat(custom_1.custom.spacing.x4, "px"),
+                                paddingLeft: `${custom_1.custom.spacing.x4}px`,
                                 backgroundColor: custom_1.custom.colors.gray01,
                             },
                         },
@@ -330,13 +330,26 @@ var autocompleteStyleScript = function (props) {
             },
         },
     ]);
-    return (props === null || props === void 0 ? void 0 : props.horizontalTerms) ? autocompleteHorizontalStyles : autocompleteVerticalStyles;
+    return props?.horizontalTerms ? autocompleteHorizontalStyles : autocompleteVerticalStyles;
 };
 // Autocomplete component props
 exports.autocomplete = {
-    default: __assign(__assign({}, autocomplete_1.autocompleteThemeComponentProps.default), { autocomplete: __assign(__assign({}, (((_a = autocomplete_1.autocompleteThemeComponentProps.default) === null || _a === void 0 ? void 0 : _a['autocomplete']) || {})), { themeStyleScript: autocompleteStyleScript, width: '940px', contentTitle: 'Product Suggestions', termsTitle: 'Search Suggestions', seeMoreButtonIcon: custom_1.custom.icons.arrowRight, vertical: false, horizontalTerms: false }), 'autocomplete facets': {
+    default: {
+        ...autocomplete_1.autocompleteThemeComponentProps.default,
+        autocomplete: {
+            ...(autocomplete_1.autocompleteThemeComponentProps.default?.['autocomplete'] || {}),
+            themeStyleScript: autocompleteStyleScript,
+            width: '940px',
+            contentTitle: 'Product Suggestions',
+            termsTitle: 'Search Suggestions',
+            seeMoreButtonIcon: custom_1.custom.icons.arrowRight,
+            vertical: false,
+            horizontalTerms: false,
+        },
+        'autocomplete facets': {
             limit: 3,
-        }, 'autocomplete facet': {
+        },
+        'autocomplete facet': {
             disableCollapse: true,
             disableOverflow: true,
             display: {
@@ -353,23 +366,46 @@ exports.autocomplete = {
                     limit: 6,
                 },
             },
-        }, 'autocomplete facetPaletteOptions': {
+        },
+        'autocomplete facetPaletteOptions': {
             gridSize: '48px',
             hideLabel: false,
-        }, 'autocomplete facetGridOptions': {
+        },
+        'autocomplete facetGridOptions': {
             gridSize: '48px',
-        }, 'autocomplete results': {
+        },
+        'autocomplete results': {
             rows: 2,
             columns: 3,
-            gapSize: "".concat(custom_1.custom.spacing.x4, "px"),
-        }, 'autocomplete icon': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
-        } }),
-    mobile: __assign(__assign({}, autocomplete_1.autocompleteThemeComponentProps.mobile), { autocomplete: __assign(__assign({}, (((_b = autocomplete_1.autocompleteThemeComponentProps.mobile) === null || _b === void 0 ? void 0 : _b['autocomplete']) || {})), { width: 'auto', vertical: true, horizontalTerms: true, hideFacets: true }), 'autocomplete results': {
+            gapSize: `${custom_1.custom.spacing.x4}px`,
+        },
+        'autocomplete icon': {
+            size: `${custom_1.custom.sizes.icon12}px`,
+        },
+    },
+    mobile: {
+        ...autocomplete_1.autocompleteThemeComponentProps.mobile,
+        autocomplete: {
+            ...(autocomplete_1.autocompleteThemeComponentProps.mobile?.['autocomplete'] || {}),
+            width: 'auto',
+            vertical: true,
+            horizontalTerms: true,
+            hideFacets: true,
+        },
+        'autocomplete results': {
             rows: 1,
             columns: 3,
-        } }),
-    tablet: __assign(__assign({}, autocomplete_1.autocompleteThemeComponentProps.tablet), { autocomplete: __assign(__assign({}, (((_c = autocomplete_1.autocompleteThemeComponentProps.tablet) === null || _c === void 0 ? void 0 : _c['autocomplete']) || {})), { width: '600px', vertical: true, horizontalTerms: true }), 'autocomplete facet': {
+        },
+    },
+    tablet: {
+        ...autocomplete_1.autocompleteThemeComponentProps.tablet,
+        autocomplete: {
+            ...(autocomplete_1.autocompleteThemeComponentProps.tablet?.['autocomplete'] || {}),
+            width: '600px',
+            vertical: true,
+            horizontalTerms: true,
+        },
+        'autocomplete facet': {
             disableCollapse: true,
             disableOverflow: true,
             display: {
@@ -386,11 +422,21 @@ exports.autocomplete = {
                     limit: 4,
                 },
             },
-        }, 'autocomplete results': {
+        },
+        'autocomplete results': {
             rows: 1,
             columns: 4,
-        } }),
-    desktop: __assign(__assign({}, autocomplete_1.autocompleteThemeComponentProps.desktop), { autocomplete: __assign(__assign({}, (((_d = autocomplete_1.autocompleteThemeComponentProps.desktop) === null || _d === void 0 ? void 0 : _d['autocomplete']) || {})), { width: '700px', vertical: false, horizontalTerms: true }), 'autocomplete facet': {
+        },
+    },
+    desktop: {
+        ...autocomplete_1.autocompleteThemeComponentProps.desktop,
+        autocomplete: {
+            ...(autocomplete_1.autocompleteThemeComponentProps.desktop?.['autocomplete'] || {}),
+            width: '700px',
+            vertical: false,
+            horizontalTerms: true,
+        },
+        'autocomplete facet': {
             disableCollapse: true,
             disableOverflow: true,
             display: {
@@ -407,8 +453,10 @@ exports.autocomplete = {
                     limit: 6,
                 },
             },
-        }, 'autocomplete results': {
+        },
+        'autocomplete results': {
             rows: 2,
             columns: 3,
-        } }),
+        },
+    },
 };