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

package/dist/cjs/components/src/themes/pike/components/templates/autocompleteShared.js

@@ -1,77 +1,70 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.autocompleteSharedStyleScript = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const custom_1 = require("../../custom");
 // static variables
-var headerSelectors = '.ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__header, .ss__autocomplete__content .ss__autocomplete__content__results .ss__autocomplete__title h5, .ss__autocomplete__button--see-more .ss__button__content, .ss__autocomplete__content__no-results .ss__autocomplete__content__no-results__recommendations .ss__recommendation-grid__title';
-var activeSelectors = '.ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__options .ss__facet-list-options .ss__facet-list-options__option--filtered, .ss__autocomplete__content .ss__autocomplete__content__results .ss__results .ss__result:hover .ss__result__details .ss__result__details__title a, .ss__autocomplete__button--see-more:hover .ss__button__content';
+const headerSelectors = '.ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__header, .ss__autocomplete__content .ss__autocomplete__content__results .ss__autocomplete__title h5, .ss__autocomplete__button--see-more .ss__button__content, .ss__autocomplete__content__no-results .ss__autocomplete__content__no-results__recommendations .ss__recommendation-grid__title';
+const activeSelectors = '.ss__autocomplete__facets .ss__facets .ss__facet .ss__facet__options .ss__facet-list-options .ss__facet-list-options__option--filtered, .ss__autocomplete__content .ss__autocomplete__content__results .ss__results .ss__result:hover .ss__result__details .ss__result__details__title a, .ss__autocomplete__button--see-more:hover .ss__button__content';
 // CSS in JS style script for the Autocomplete Layout component
-var autocompleteSharedStyleScript = function (props, template) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-    var _q, _r, _s, _t, _u, _v;
+const autocompleteSharedStyleScript = (props, template) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_q = props === null || props === void 0 ? void 0 : props.theme) === null || _q === void 0 ? void 0 : _q.variables;
-    var desktopBp = (_r = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _r === void 0 ? void 0 : _r.desktop;
-    var tabletBp = (_s = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _s === void 0 ? void 0 : _s.tablet;
-    var mobileBp = (_t = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _t === void 0 ? void 0 : _t.mobile;
+    const variables = props?.theme?.variables;
+    const desktopBp = variables?.breakpoints?.desktop;
+    const tabletBp = variables?.breakpoints?.tablet;
+    const mobileBp = variables?.breakpoints?.mobile;
     // determine template being used
-    var isFixed = template == 'autocompleteFixed';
-    var isModal = template == 'autocompleteModal';
-    var isSlideout = template == 'autocompleteSlideout';
+    const isFixed = template == 'autocompleteFixed';
+    const isModal = template == 'autocompleteModal';
+    const isSlideout = template == 'autocompleteSlideout';
     // get autocomplete layout
-    var acLayout = (props === null || props === void 0 ? void 0 : props.layout) ? props.layout : 'standard';
+    const acLayout = props?.layout ? props.layout : 'standard';
     // shared styles
-    var sharedStyles = (0, react_1.css)((_a = {
-            padding: isSlideout ? 0 : "".concat(custom_1.custom.spacing.x4, "px"),
-            gap: "".concat(custom_1.custom.spacing.x4, "px"),
-            border: isSlideout ? 0 : "1px solid ".concat(custom_1.custom.colors.gray02),
-            backgroundColor: custom_1.custom.colors.white,
-            'div, p, .ss__button': {
-                fontSize: '12px',
-            },
-            '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',
+    const sharedStyles = (0, react_1.css)({
+        padding: isSlideout ? 0 : `${custom_1.custom.spacing.x4}px`,
+        gap: `${custom_1.custom.spacing.x4}px`,
+        border: isSlideout ? 0 : `1px solid ${custom_1.custom.colors.gray02}`,
+        backgroundColor: custom_1.custom.colors.white,
+        'div, p, .ss__button': {
+            fontSize: '12px',
+        },
+        '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',
             },
-            '.ss__banner': {
-                img: {
-                    maxWidth: '100%',
-                    maxHeight: '150px',
-                    height: 'auto',
-                },
-            }
         },
-        _a[headerSelectors] = __assign(__assign({ margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"), padding: 0 }, custom_1.custom.styles.headerText((_u = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _u === void 0 ? void 0 : _u.secondary, '14px')), { lineHeight: 1.2 }),
-        _a[activeSelectors] = __assign({}, custom_1.custom.styles.activeText((_v = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _v === void 0 ? void 0 : _v.primary)),
-        _a));
+        [headerSelectors]: {
+            margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
+            padding: 0,
+            ...custom_1.custom.styles.headerText(variables?.colors?.secondary, '14px'),
+            lineHeight: 1.2,
+        },
+        [activeSelectors]: {
+            ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+        },
+    });
     // shared layout styles
-    var sharedLayoutStyles = (0, react_1.css)({
+    const sharedLayoutStyles = (0, react_1.css)({
         alignContent: 'flex-start',
         '& > .ss__autocomplete__row': {
-            flex: isSlideout ? "1 1 100%" : "1 1 calc(100% + ".concat(custom_1.custom.spacing.x8, "px)"),
+            flex: isSlideout ? `1 1 100%` : `1 1 calc(100% + ${custom_1.custom.spacing.x8}px)`,
             minWidth: '1px',
-            padding: isSlideout ? "0 0 ".concat(custom_1.custom.spacing.x4, "px 0") : "0 ".concat(custom_1.custom.spacing.x4, "px ").concat(custom_1.custom.spacing.x4, "px ").concat(custom_1.custom.spacing.x4, "px"),
-            margin: isSlideout ? 0 : "0 -".concat(custom_1.custom.spacing.x4, "px"),
-            borderBottom: "1px solid ".concat(custom_1.custom.colors.gray02),
+            padding: isSlideout ? `0 0 ${custom_1.custom.spacing.x4}px 0` : `0 ${custom_1.custom.spacing.x4}px ${custom_1.custom.spacing.x4}px ${custom_1.custom.spacing.x4}px`,
+            margin: isSlideout ? 0 : `0 -${custom_1.custom.spacing.x4}px`,
+            borderBottom: `1px solid ${custom_1.custom.colors.gray02}`,
             '&:last-child': {
                 borderBottomWidth: 0,
                 paddingBottom: 0,
@@ -79,27 +72,27 @@ var autocompleteSharedStyleScript = function (props, template) {
         },
     });
     // shared tablet styles
-    var sharedDesktopStyles = (0, react_1.css)((_b = {},
-        _b[headerSelectors] = {
+    const sharedDesktopStyles = (0, react_1.css)({
+        [headerSelectors]: {
             fontSize: '16px',
         },
-        _b['.ss__terms-list .ss__terms .ss__terms__options .ss__terms__option a'] = {
+        '.ss__terms-list .ss__terms .ss__terms__options .ss__terms__option a': {
             fontSize: '16px',
         },
-        _b));
+    });
     // terms wrapper styles
-    var termsWrapperStyles = (0, react_1.css)({
+    const termsWrapperStyles = (0, react_1.css)({
         '.ss__autocomplete__terms-wrapper': {
             backgroundColor: 'transparent',
         },
     });
     // facets styles
-    var facetsStyles = (0, react_1.css)({
+    const facetsStyles = (0, react_1.css)({
         '.ss__autocomplete__facets': {
             padding: 0,
             '.ss__facets': {
                 flexFlow: 'row nowrap',
-                gap: "".concat(custom_1.custom.spacing.x4, "px"),
+                gap: `${custom_1.custom.spacing.x4}px`,
                 '.ss__facet': {
                     flex: '1 1 0%',
                     margin: 0,
@@ -109,7 +102,7 @@ var autocompleteSharedStyleScript = function (props, template) {
                     '.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"),
+                            margin: `0 0 ${custom_1.custom.spacing.x1}px 0`,
                             fontSize: '12px',
                             '&:last-child': {
                                 marginBottom: 0,
@@ -123,44 +116,54 @@ var autocompleteSharedStyleScript = function (props, template) {
             },
             '.ss__banner': {
                 display: 'none',
-                margin: "".concat(custom_1.custom.spacing.x4, "px 0 0 0"),
+                margin: `${custom_1.custom.spacing.x4}px 0 0 0`,
             },
         },
     });
     // content styles
-    var contentStyles = (0, react_1.css)({
+    const contentStyles = (0, react_1.css)({
         '.ss__autocomplete__content': {
             overflow: 'visible',
             '.ss__autocomplete__content-inner': {
                 padding: 0,
                 '& > *': {
-                    margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
+                    margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
                 },
             },
         },
     });
     // results layout styles
-    var resultsLayoutStyles = (0, react_1.css)(__assign({ overflowY: isFixed ? 'auto' : 'hidden', overflowX: 'hidden', maxHeight: isFixed ? '54vh' : '' }, custom_1.custom.styles.scrollbar()));
+    const resultsLayoutStyles = (0, react_1.css)({
+        overflowY: isFixed ? 'auto' : 'hidden',
+        overflowX: 'hidden',
+        maxHeight: isFixed ? '54vh' : '',
+        ...custom_1.custom.styles.scrollbar(),
+    });
     // results styles
-    var resultsStyles = (0, react_1.css)({
+    const resultsStyles = (0, react_1.css)({
         '.ss__autocomplete__content__results': {
-            '.ss__results': __assign({}, resultsLayoutStyles),
-            '.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)),
+            '.ss__results': {
+                ...resultsLayoutStyles,
+            },
+            '.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),
+            },
         },
     });
     // mobile results styles
-    var resultsSmallStyles = (0, react_1.css)({
-        '.ss__autocomplete__content__results .ss__results, .ss__autocomplete__content__no-results .ss__autocomplete__content__no-results__recommendations .ss__recommendation-grid__results': (_c = {
-                gridTemplateColumns: 'repeat(2, 1fr)'
-            },
-            _c["& > *:nth-child(n + ".concat(isSlideout ? 5 : 3, ")")] = {
+    const resultsSmallStyles = (0, react_1.css)({
+        '.ss__autocomplete__content__results .ss__results, .ss__autocomplete__content__no-results .ss__autocomplete__content__no-results__recommendations .ss__recommendation-grid__results': {
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            [`& > *:nth-child(n + ${isSlideout ? 5 : 3})`]: {
                 display: 'none',
             },
-            _c),
+        },
     });
     // no results styles
-    var noResultsStyles = (0, react_1.css)({
+    const noResultsStyles = (0, react_1.css)({
         '.ss__autocomplete__content__no-results': {
             '.ss__autocomplete__content__no-results__text': {
                 p: {
@@ -175,19 +178,25 @@ var autocompleteSharedStyleScript = function (props, template) {
             },
             '.ss__autocomplete__content__no-results__recommendations': {
                 '.ss__recommendation-grid': {
-                    margin: "".concat(custom_1.custom.spacing.x4, "px 0 0 0"),
+                    margin: `${custom_1.custom.spacing.x4}px 0 0 0`,
                 },
                 '.ss__recommendation-grid__title': {
                     textAlign: 'left',
                 },
-                '.ss__recommendation-grid__results': __assign({}, resultsLayoutStyles),
-                '.ss__recommendation-grid__results .ss__result.ss__result--grid': __assign({}, custom_1.custom.styles.resultCompact('grid', '', 12)),
-                '.ss__recommendation-grid__results .ss__result.ss__result--list': __assign({}, custom_1.custom.styles.resultCompact('', '0 0 80px', 12)),
+                '.ss__recommendation-grid__results': {
+                    ...resultsLayoutStyles,
+                },
+                '.ss__recommendation-grid__results .ss__result.ss__result--grid': {
+                    ...custom_1.custom.styles.resultCompact('grid', '', 12),
+                },
+                '.ss__recommendation-grid__results .ss__result.ss__result--list': {
+                    ...custom_1.custom.styles.resultCompact('', '0 0 80px', 12),
+                },
             },
         },
     });
     // see more styles
-    var seeMoreStyles = (0, react_1.css)({
+    const seeMoreStyles = (0, react_1.css)({
         '.ss__autocomplete__button--see-more': {
             order: -1,
             padding: 0,
@@ -203,28 +212,28 @@ var autocompleteSharedStyleScript = function (props, template) {
         },
     });
     // see more mobile styles
-    var seeMoreMobileStyles = (0, react_1.css)({
+    const seeMoreMobileStyles = (0, react_1.css)({
         '.ss__autocomplete__button--see-more': {
             order: 0,
         },
     });
     // standard styles
-    var standardStyles = (0, react_1.css)([
+    const standardStyles = (0, react_1.css)([
         sharedStyles,
         {
             alignContent: 'flex-start',
             '& > .ss__autocomplete__row': {
-                gap: "".concat(custom_1.custom.spacing.x4, "px"),
+                gap: `${custom_1.custom.spacing.x4}px`,
                 flexWrap: 'wrap',
                 '.ss__autocomplete__column': {
                     alignContent: 'flex-start',
                     minWidth: '1px',
                     maxWidth: 'none',
-                    flex: isSlideout ? "1 1 100%" : "1 1 calc(100% + ".concat(custom_1.custom.spacing.x8, "px)"),
-                    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),
+                    flex: isSlideout ? `1 1 100%` : `1 1 calc(100% + ${custom_1.custom.spacing.x8}px)`,
+                    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,
@@ -232,9 +241,9 @@ var autocompleteSharedStyleScript = function (props, template) {
                     '.ss__autocomplete__row:has(.ss__autocomplete__button--see-more)': {
                         minWidth: '1px',
                         flex: '1 1 100%',
-                        padding: "".concat(custom_1.custom.spacing.x4, "px ").concat(custom_1.custom.spacing.x4, "px 0 ").concat(custom_1.custom.spacing.x4, "px"),
-                        margin: "0 -".concat(custom_1.custom.spacing.x4, "px"),
-                        borderTop: "1px solid ".concat(custom_1.custom.colors.gray02),
+                        padding: `${custom_1.custom.spacing.x4}px ${custom_1.custom.spacing.x4}px 0 ${custom_1.custom.spacing.x4}px`,
+                        margin: `0 -${custom_1.custom.spacing.x4}px`,
+                        borderTop: `1px solid ${custom_1.custom.colors.gray02}`,
                     },
                 },
             },
@@ -245,33 +254,37 @@ var autocompleteSharedStyleScript = function (props, template) {
         resultsStyles,
         noResultsStyles,
         seeMoreStyles,
-        (_d = {},
-            _d["".concat(custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small))] = {
+        {
+            [`${custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small)}`]: {
                 '.ss__autocomplete__content__results .ss__results.ss__results-list': {
-                    gap: "".concat(custom_1.custom.spacing.x2, "px"),
+                    gap: `${custom_1.custom.spacing.x2}px`,
                 },
             },
-            _d),
-        (_e = {},
-            _e["".concat(custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small, 'max'))] = __assign({}, resultsSmallStyles),
-            _e),
-        (_f = {},
-            _f["".concat(custom_1.custom.utils.getBp(mobileBp))] = __assign({}, seeMoreMobileStyles),
-            _f),
-        (_g = {},
-            _g["".concat(custom_1.custom.utils.getBp(tabletBp))] = {
+        },
+        {
+            [`${custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small, 'max')}`]: {
+                ...resultsSmallStyles,
+            },
+        },
+        {
+            [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
+                ...seeMoreMobileStyles,
+            },
+        },
+        {
+            [`${custom_1.custom.utils.getBp(tabletBp)}`]: {
                 '& > .ss__autocomplete__row': {
                     '.ss__autocomplete__column': {
                         flex: '1 1 0%',
                         paddingBottom: 0,
                         borderBottomWidth: 0,
                         '&:has(.ss__autocomplete__terms-wrapper)': {
-                            flex: isSlideout ? "1 1 100%" : "1 1 calc(100% + ".concat(custom_1.custom.spacing.x8, "px)"),
-                            paddingBottom: "".concat(custom_1.custom.spacing.x4, "px"),
+                            flex: isSlideout ? `1 1 100%` : `1 1 calc(100% + ${custom_1.custom.spacing.x8}px)`,
+                            paddingBottom: `${custom_1.custom.spacing.x4}px`,
                             borderBottomWidth: '1px',
                         },
                         '&:has(.ss__autocomplete__facets-wrapper)': {
-                            flex: "0 0 ".concat(isModal ? 300 : 200, "px"),
+                            flex: `0 0 ${isModal ? 300 : 200}px`,
                         },
                         '.ss__autocomplete__row:has(.ss__autocomplete__button--see-more)': {
                             borderTop: 0,
@@ -292,9 +305,9 @@ var autocompleteSharedStyleScript = function (props, template) {
                     },
                 },
             },
-            _g),
-        (_h = {},
-            _h["".concat(custom_1.custom.utils.getBp(desktopBp))] = {
+        },
+        {
+            [`${custom_1.custom.utils.getBp(desktopBp)}`]: {
                 '&': sharedDesktopStyles,
                 '& > .ss__autocomplete__row': {
                     '.ss__autocomplete__column': {
@@ -303,7 +316,7 @@ var autocompleteSharedStyleScript = function (props, template) {
                             borderBottomWidth: 0,
                         },
                         '&:has(.ss__autocomplete__terms-wrapper), &:has(.ss__autocomplete__facets-wrapper)': {
-                            flex: "0 0 ".concat(isModal ? 250 : 220, "px"),
+                            flex: `0 0 ${isModal ? 250 : 220}px`,
                         },
                     },
                 },
@@ -311,10 +324,10 @@ var autocompleteSharedStyleScript = function (props, template) {
                     maxHeight: isFixed ? '60vh' : '',
                 },
             },
-            _h),
+        },
     ]);
     // mini styles
-    var mobileStyles = (0, react_1.css)([
+    const mobileStyles = (0, react_1.css)([
         sharedStyles,
         sharedLayoutStyles,
         termsWrapperStyles,
@@ -327,44 +340,50 @@ var autocompleteSharedStyleScript = function (props, template) {
         resultsStyles,
         noResultsStyles,
         seeMoreStyles,
-        (_j = {},
-            _j["".concat(custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small))] = {
+        {
+            [`${custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small)}`]: {
                 '.ss__autocomplete__content__results .ss__results.ss__results-list': {
-                    gap: "".concat(custom_1.custom.spacing.x2, "px"),
+                    gap: `${custom_1.custom.spacing.x2}px`,
                 },
             },
-            _j),
-        (_k = {},
-            _k["".concat(custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small, 'max'))] = __assign({}, resultsSmallStyles),
-            _k),
-        (_l = {},
-            _l["".concat(custom_1.custom.utils.getBp(mobileBp))] = __assign({}, seeMoreMobileStyles),
-            _l),
-        (_m = {},
-            _m["".concat(custom_1.custom.utils.getBp(desktopBp))] = {
+        },
+        {
+            [`${custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small, 'max')}`]: {
+                ...resultsSmallStyles,
+            },
+        },
+        {
+            [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
+                ...seeMoreMobileStyles,
+            },
+        },
+        {
+            [`${custom_1.custom.utils.getBp(desktopBp)}`]: {
                 '&': sharedDesktopStyles,
             },
-            _m),
+        },
     ]);
     // terms styles
-    var termsStyles = (0, react_1.css)([
+    const termsStyles = (0, react_1.css)([
         sharedStyles,
         sharedLayoutStyles,
         termsWrapperStyles,
         contentStyles,
         noResultsStyles,
         seeMoreStyles,
-        (_o = {},
-            _o["".concat(custom_1.custom.utils.getBp(mobileBp))] = __assign({}, seeMoreMobileStyles),
-            _o),
-        (_p = {},
-            _p["".concat(custom_1.custom.utils.getBp(desktopBp))] = {
+        {
+            [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
+                ...seeMoreMobileStyles,
+            },
+        },
+        {
+            [`${custom_1.custom.utils.getBp(desktopBp)}`]: {
                 '&': sharedDesktopStyles,
                 '.ss__autocomplete__content__no-results .ss__autocomplete__content__no-results__text p': {
                     fontSize: '16px',
                 },
             },
-            _p),
+        },
     ]);
     if (acLayout == 'terms') {
         return termsStyles;