@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/themes/pike/components/molecules/facetHierarchyOptions.js

@@ -1,75 +1,69 @@
 "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.facetHierarchyOptions = 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 lightGray = custom_1.custom.utils.lightenColor();
+const lightGray = custom_1.custom.utils.lightenColor();
 // CSS in JS style script for the FacetHierarchyOptions component
-var facetHierarchyOptionsStyleScript = function (props) {
-    var _a, _b;
-    var _c, _d, _e, _f;
+const facetHierarchyOptionsStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.variables;
-    var mobileBp = (_d = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _d === void 0 ? void 0 : _d.mobile;
-    var tabletBp = (_e = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _e === void 0 ? void 0 : _e.tablet;
+    const variables = props?.theme?.variables;
+    const mobileBp = variables?.breakpoints?.mobile;
+    const tabletBp = variables?.breakpoints?.tablet;
     // shared styles
-    var sharedStyles = (0, react_1.css)({
-        '.ss__facet-hierarchy-options__option': __assign(__assign({}, custom_1.custom.styles.baseText()), { gap: "".concat(custom_1.custom.spacing.x1, "px"), padding: 0, '.ss__facet-hierarchy-options__option__value': {
+    const sharedStyles = (0, react_1.css)({
+        '.ss__facet-hierarchy-options__option': {
+            ...custom_1.custom.styles.baseText(),
+            gap: `${custom_1.custom.spacing.x1}px`,
+            padding: 0,
+            '.ss__facet-hierarchy-options__option__value': {
                 margin: 0,
                 '.ss__facet-hierarchy-options__option__value__count': {
                     position: 'relative',
                     top: '-1px',
                     margin: 0,
-                    padding: "0 ".concat(custom_1.custom.spacing.x1, "px"),
+                    padding: `0 ${custom_1.custom.spacing.x1}px`,
                     fontSize: '10px',
                     color: lightGray,
                 },
-            } }),
+            },
+        },
         '.ss__facet-hierarchy-options__option.ss__facet-hierarchy-options__option--return': {
             '.ss__icon': {
                 padding: 0,
             },
         },
-        '.ss__facet-hierarchy-options__option.ss__facet-hierarchy-options__option--filtered': __assign({}, custom_1.custom.styles.activeText((_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.primary)),
+        '.ss__facet-hierarchy-options__option.ss__facet-hierarchy-options__option--filtered': {
+            ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+        },
     });
     // facet hierarchy list styles
-    var facetHierarchyListStyles = (0, react_1.css)([
+    const facetHierarchyListStyles = (0, react_1.css)([
         sharedStyles,
         {
             '.ss__facet-hierarchy-options__option': {
-                margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"),
+                margin: `0 0 ${custom_1.custom.spacing.x1}px 0`,
                 '&:last-child': {
                     marginBottom: 0,
                 },
             },
             '.ss__facet-hierarchy-options__option.ss__facet-hierarchy-options__option--filtered': {
                 '& ~ .ss__facet-hierarchy-options__option:not(.ss__facet-hierarchy-options__option--filtered)': {
-                    paddingLeft: "".concat(custom_1.custom.spacing.x6, "px"),
+                    paddingLeft: `${custom_1.custom.spacing.x6}px`,
                 },
             },
         },
     ]);
     // facet hierarchy horizontal styles
-    var facetHierarchyHorizontalStyles = (0, react_1.css)([
+    const facetHierarchyHorizontalStyles = (0, react_1.css)([
         sharedStyles,
         {
             flexFlow: 'row wrap',
-            gap: "".concat(custom_1.custom.spacing.x1, "px ").concat(custom_1.custom.spacing.x2, "px"),
+            gap: `${custom_1.custom.spacing.x1}px ${custom_1.custom.spacing.x2}px`,
             '.ss__facet-hierarchy-options__option': {
                 flex: '0 1 auto',
-                width: "calc((100% - ".concat(custom_1.custom.spacing.x2, "px) / 2)"),
+                width: `calc((100% - ${custom_1.custom.spacing.x2}px) / 2)`,
                 minWidth: '1px',
                 margin: 0,
                 '&.ss__facet-hierarchy-options__option--return, &.ss__facet-hierarchy-options__option--filtered': {
@@ -79,25 +73,28 @@ var facetHierarchyOptionsStyleScript = function (props) {
                     display: 'flex',
                     alignItems: 'center',
                 },
-                '.ss__facet-hierarchy-options__option__value': __assign({ display: 'block' }, custom_1.custom.styles.textOverflow()),
+                '.ss__facet-hierarchy-options__option__value': {
+                    display: 'block',
+                    ...custom_1.custom.styles.textOverflow(),
+                },
             },
         },
-        (_a = {},
-            _a["".concat(custom_1.custom.utils.getBp(mobileBp))] = {
+        {
+            [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
                 '.ss__facet-hierarchy-options__option': {
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 2, "px) / 3)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2 * 2}px) / 3)`,
                 },
             },
-            _a),
-        (_b = {},
-            _b["".concat(custom_1.custom.utils.getBp(tabletBp))] = {
+        },
+        {
+            [`${custom_1.custom.utils.getBp(tabletBp)}`]: {
                 '.ss__facet-hierarchy-options__option': {
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 3, "px) / 4)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2 * 3}px) / 4)`,
                 },
             },
-            _b),
+        },
     ]);
-    return (props === null || props === void 0 ? void 0 : props.horizontal) ? facetHierarchyHorizontalStyles : facetHierarchyListStyles;
+    return props?.horizontal ? facetHierarchyHorizontalStyles : facetHierarchyListStyles;
 };
 // FacetHierarchyOptions component props
 exports.facetHierarchyOptions = {
@@ -107,7 +104,7 @@ exports.facetHierarchyOptions = {
             returnIcon: custom_1.custom.icons.arrowLeft,
         },
         'facetHierarchyOptions icon': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
+            size: `${custom_1.custom.sizes.icon12}px`,
         },
     },
 };

package/dist/cjs/components/src/themes/pike/components/molecules/facetListOptions.js

@@ -1,55 +1,51 @@
 "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.facetListOptions = 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 lightGray = custom_1.custom.utils.lightenColor();
-var checkboxSpacing = custom_1.custom.sizes.icon16 + custom_1.custom.spacing.x2;
+const lightGray = custom_1.custom.utils.lightenColor();
+const checkboxSpacing = custom_1.custom.sizes.icon16 + custom_1.custom.spacing.x2;
 // CSS in JS style script for the FacetListOptions component
-var facetListOptionsStyleScript = function (props) {
-    var _a, _b;
-    var _c, _d, _e, _f, _g;
+const facetListOptionsStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.variables;
-    var mobileBp = (_d = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _d === void 0 ? void 0 : _d.mobile;
-    var tabletBp = (_e = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _e === void 0 ? void 0 : _e.tablet;
+    const variables = props?.theme?.variables;
+    const mobileBp = variables?.breakpoints?.mobile;
+    const tabletBp = variables?.breakpoints?.tablet;
     // shared styles
-    var sharedStyles = (0, react_1.css)({
-        '.ss__facet-list-options__option': __assign(__assign({}, custom_1.custom.styles.baseText()), { position: 'relative', gap: "".concat(custom_1.custom.spacing.x1, "px"), padding: (props === null || props === void 0 ? void 0 : props.hideCheckbox) ? 0 : "0 0 0 ".concat(checkboxSpacing, "px"), '.ss__checkbox, .ss__radio': {
+    const sharedStyles = (0, react_1.css)({
+        '.ss__facet-list-options__option': {
+            ...custom_1.custom.styles.baseText(),
+            position: 'relative',
+            gap: `${custom_1.custom.spacing.x1}px`,
+            padding: props?.hideCheckbox ? 0 : `0 0 0 ${checkboxSpacing}px`,
+            '.ss__checkbox, .ss__radio': {
                 position: 'absolute',
                 top: '1.5px',
                 left: 0,
-            }, '.ss__facet-list-options__option__value': {
+            },
+            '.ss__facet-list-options__option__value': {
                 margin: 0,
                 '.ss__facet-list-options__option__value__count': {
                     position: 'relative',
-                    top: "".concat((props === null || props === void 0 ? void 0 : props.horizontal) && ((_f = props === null || props === void 0 ? void 0 : props.treePath) === null || _f === void 0 ? void 0 : _f.includes('storybook')) ? 0.5 : -1, "px"),
+                    top: `${props?.horizontal && props?.treePath?.includes('storybook') ? 0.5 : -1}px`,
                     margin: 0,
-                    padding: "0 ".concat(custom_1.custom.spacing.x1, "px"),
+                    padding: `0 ${custom_1.custom.spacing.x1}px`,
                     fontSize: '10px',
                     color: lightGray,
                 },
-            } }),
-        '.ss__facet-list-options__option.ss__facet-list-options__option--filtered': __assign({}, custom_1.custom.styles.activeText((_g = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _g === void 0 ? void 0 : _g.primary)),
+            },
+        },
+        '.ss__facet-list-options__option.ss__facet-list-options__option--filtered': {
+            ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+        },
     });
     // facet list styles
-    var facetListStyles = (0, react_1.css)([
+    const facetListStyles = (0, react_1.css)([
         sharedStyles,
         {
             '.ss__facet-list-options__option': {
-                margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"),
+                margin: `0 0 ${custom_1.custom.spacing.x1}px 0`,
                 '&:last-child': {
                     marginBottom: 0,
                 },
@@ -57,39 +53,41 @@ var facetListOptionsStyleScript = function (props) {
         },
     ]);
     // facet horizontal styles
-    var facetListHorizontalStyles = (0, react_1.css)([
+    const facetListHorizontalStyles = (0, react_1.css)([
         sharedStyles,
         {
             flexFlow: 'row wrap',
-            gap: "".concat(custom_1.custom.spacing.x1, "px ").concat(custom_1.custom.spacing.x2, "px"),
+            gap: `${custom_1.custom.spacing.x1}px ${custom_1.custom.spacing.x2}px`,
             '.ss__facet-list-options__option': {
                 flex: '0 1 auto',
-                width: "calc((100% - ".concat(custom_1.custom.spacing.x2, "px) / 2)"),
+                width: `calc((100% - ${custom_1.custom.spacing.x2}px) / 2)`,
                 minWidth: '1px',
                 margin: 0,
                 '.ss__facet-list-options__option__value': {
                     display: 'flex',
                     alignItems: 'center',
-                    '.ss__facet-list-options__option__value__label': __assign({}, custom_1.custom.styles.textOverflow()),
+                    '.ss__facet-list-options__option__value__label': {
+                        ...custom_1.custom.styles.textOverflow(),
+                    },
                 },
             },
         },
-        (_a = {},
-            _a["".concat(custom_1.custom.utils.getBp(mobileBp))] = {
+        {
+            [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
                 '.ss__facet-list-options__option': {
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 2, "px) / 3)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2 * 2}px) / 3)`,
                 },
             },
-            _a),
-        (_b = {},
-            _b["".concat(custom_1.custom.utils.getBp(tabletBp))] = {
+        },
+        {
+            [`${custom_1.custom.utils.getBp(tabletBp)}`]: {
                 '.ss__facet-list-options__option': {
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 3, "px) / 4)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2 * 3}px) / 4)`,
                 },
             },
-            _b),
+        },
     ]);
-    return (props === null || props === void 0 ? void 0 : props.horizontal) ? facetListHorizontalStyles : facetListStyles;
+    return props?.horizontal ? facetListHorizontalStyles : facetListStyles;
 };
 // FacetListOptions component props
 exports.facetListOptions = {

package/dist/cjs/components/src/themes/pike/components/molecules/facetPaletteOptions.js

@@ -1,39 +1,26 @@
 "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.facetPaletteOptions = 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 lightGray = custom_1.custom.utils.lightenColor();
-var paletteColors = {
+const lightGray = custom_1.custom.utils.lightenColor();
+const paletteColors = {
     brown: '#845329',
     purple: '#7c368e',
     rainbow: 'linear-gradient(rgb(40, 87, 218) 20%, rgb(40, 218, 70) 20%, rgb(40, 218, 70) 40%, rgb(245, 228, 24) 40%, rgb(245, 228, 24) 60%, rgb(242, 133, 0) 60%, rgb(242, 133, 0) 80%, rgb(218, 40, 72) 80%, rgb(218, 40, 72))',
 };
 // CSS in JS style script for the FacetPaletteOptions component
-var facetPaletteStyleScript = function (props) {
-    var _a, _b;
-    var _c, _d, _e, _f;
+const facetPaletteStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.variables;
-    var mobileBp = (_d = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _d === void 0 ? void 0 : _d.mobile;
-    var tabletBp = (_e = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _e === void 0 ? void 0 : _e.tablet;
-    var hasCheckbox = !(props === null || props === void 0 ? void 0 : props.hideCheckbox) ? true : false;
-    var isList = (props === null || props === void 0 ? void 0 : props.layout) == 'list' ? true : false;
-    var innerBorder = isList ? 3 : 5;
+    const variables = props?.theme?.variables;
+    const mobileBp = variables?.breakpoints?.mobile;
+    const tabletBp = variables?.breakpoints?.tablet;
+    const hasCheckbox = !props?.hideCheckbox ? true : false;
+    const isList = props?.layout == 'list' ? true : false;
+    const innerBorder = isList ? 3 : 5;
     // shared styles
-    var sharedStyles = (0, react_1.css)({
+    const sharedStyles = (0, react_1.css)({
         '.ss__facet-palette-options__option': {
             '&.ss__facet-palette-options__option--filtered': {
                 '.ss__facet-palette-options__option__wrapper .ss__facet-palette-options__option__palette': {
@@ -44,24 +31,36 @@ var facetPaletteStyleScript = function (props) {
                         opacity: 0.3,
                     },
                 },
-                '.ss__facet-palette-options__option__value': __assign({}, custom_1.custom.styles.activeText((_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.primary)),
+                '.ss__facet-palette-options__option__value': {
+                    ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+                },
             },
-            '.ss__facet-palette-options__option__wrapper': __assign(__assign({ border: 0 }, custom_1.custom.styles.borderRadius(0)), { '.ss__facet-palette-options__option__palette': {
+            '.ss__facet-palette-options__option__wrapper': {
+                border: 0,
+                ...custom_1.custom.styles.borderRadius(0),
+                '.ss__facet-palette-options__option__palette': {
                     overflow: 'hidden',
                     border: 0,
                     padding: 0,
-                    '&, &:before, &:after': __assign({ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }, custom_1.custom.styles.borderRadius(0)),
+                    '&, &:before, &:after': {
+                        position: 'absolute',
+                        top: 0,
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        ...custom_1.custom.styles.borderRadius(0),
+                    },
                     '&:before, &:after': {
                         content: '""',
                         display: 'block',
                     },
                     '&:before': {
-                        border: "".concat(innerBorder, "px solid ").concat(custom_1.custom.colors.white),
+                        border: `${innerBorder}px solid ${custom_1.custom.colors.white}`,
                         margin: '1px',
                         opacity: 0,
                     },
                     '&:after': {
-                        border: "1px solid ".concat(custom_1.custom.colors.black),
+                        border: `1px solid ${custom_1.custom.colors.black}`,
                         opacity: 0.15,
                     },
                     '&[style*="url"]': {
@@ -77,7 +76,8 @@ var facetPaletteStyleScript = function (props) {
                             objectPosition: 'center center',
                         },
                     },
-                } }),
+                },
+            },
             '.ss__facet-palette-options__option__value__count': {
                 fontSize: '10px',
                 color: lightGray,
@@ -85,7 +85,7 @@ var facetPaletteStyleScript = function (props) {
         },
     });
     // facet palette grid styles
-    var facetPaletteGridStyles = (0, react_1.css)([
+    const facetPaletteGridStyles = (0, react_1.css)([
         sharedStyles,
         {
             alignItems: 'center',
@@ -109,45 +109,58 @@ var facetPaletteStyleScript = function (props) {
                 '.ss__facet-palette-options__option__value': {
                     fontSize: '12px',
                     overflow: 'hidden',
-                    margin: "".concat(custom_1.custom.spacing.x1, "px 0 0 0"),
+                    margin: `${custom_1.custom.spacing.x1}px 0 0 0`,
                 },
                 '.ss__facet-palette-options__option__value__count': {
-                    margin: "".concat(custom_1.custom.spacing.x1 / 2, "px 0 0 0"),
+                    margin: `${custom_1.custom.spacing.x1 / 2}px 0 0 0`,
                 },
             },
         },
     ]);
     // list variables
-    var listSize = hasCheckbox ? 16 : 22;
-    var listCheckboxSize = 16;
-    var listPadding = hasCheckbox ? custom_1.custom.spacing.x4 + listSize + listCheckboxSize : custom_1.custom.spacing.x2 + listSize;
+    const listSize = hasCheckbox ? 16 : 22;
+    const listCheckboxSize = 16;
+    const listPadding = hasCheckbox ? custom_1.custom.spacing.x4 + listSize + listCheckboxSize : custom_1.custom.spacing.x2 + listSize;
     // facet palette shared list styles
-    var sharedListStyles = (0, react_1.css)({
-        '.ss__facet-palette-options__option': __assign(__assign({}, custom_1.custom.styles.baseText()), { minHeight: hasCheckbox ? '' : "".concat(listSize + 2, "px"), position: 'relative', gap: "".concat(custom_1.custom.spacing.x1, "px"), padding: "".concat(hasCheckbox ? 0 : '2px', " 0 0 ").concat(listPadding, "px"), margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"), '&:last-child': {
+    const sharedListStyles = (0, react_1.css)({
+        '.ss__facet-palette-options__option': {
+            ...custom_1.custom.styles.baseText(),
+            minHeight: hasCheckbox ? '' : `${listSize + 2}px`,
+            position: 'relative',
+            gap: `${custom_1.custom.spacing.x1}px`,
+            padding: `${hasCheckbox ? 0 : '2px'} 0 0 ${listPadding}px`,
+            margin: `0 0 ${custom_1.custom.spacing.x1}px 0`,
+            '&:last-child': {
                 marginBottom: 0,
-            }, '.ss__checkbox, .ss__radio, .ss__facet-palette-options__option__wrapper': {
+            },
+            '.ss__checkbox, .ss__radio, .ss__facet-palette-options__option__wrapper': {
                 position: 'absolute',
-                top: "".concat(hasCheckbox ? 2 : 0.5, "px"),
-            }, '.ss__checkbox, .ss__radio': {
+                top: `${hasCheckbox ? 2 : 0.5}px`,
+            },
+            '.ss__checkbox, .ss__radio': {
                 left: 0,
-            }, '.ss__facet-palette-options__option__wrapper': {
-                left: hasCheckbox ? "".concat(listCheckboxSize + custom_1.custom.spacing.x2, "px") : 0,
-                width: "".concat(listSize, "px"),
-                height: "".concat(listSize, "px"),
-                lineHeight: "".concat(listSize, "px"),
-            }, '.ss__facet-palette-options__option__value, .ss__facet-palette-options__option__value__count': {
+            },
+            '.ss__facet-palette-options__option__wrapper': {
+                left: hasCheckbox ? `${listCheckboxSize + custom_1.custom.spacing.x2}px` : 0,
+                width: `${listSize}px`,
+                height: `${listSize}px`,
+                lineHeight: `${listSize}px`,
+            },
+            '.ss__facet-palette-options__option__value, .ss__facet-palette-options__option__value__count': {
                 overflow: 'visible',
                 textOverflow: 'unset',
                 textAlign: 'left',
                 whiteSpace: 'unset',
-            }, '.ss__facet-palette-options__option__value__count': {
+            },
+            '.ss__facet-palette-options__option__value__count': {
                 position: 'relative',
-                top: (props === null || props === void 0 ? void 0 : props.treePath) == 'storybook facetPaletteOptions' ? '1px' : '',
+                top: props?.treePath == 'storybook facetPaletteOptions' ? '1px' : '',
                 margin: 0,
-            } }),
+            },
+        },
     });
     // facet palette list styles
-    var facetPaletteListStyles = (0, react_1.css)([
+    const facetPaletteListStyles = (0, react_1.css)([
         sharedStyles,
         sharedListStyles,
         {
@@ -155,7 +168,7 @@ var facetPaletteStyleScript = function (props) {
                 display: 'block',
             },
             '.ss__facet-palette-options__option': {
-                margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"),
+                margin: `0 0 ${custom_1.custom.spacing.x1}px 0`,
                 '&:last-child': {
                     marginBottom: 0,
                 },
@@ -163,37 +176,39 @@ var facetPaletteStyleScript = function (props) {
         },
     ]);
     // facet palette list styles
-    var facetPaletteListHorizontalStyles = (0, react_1.css)([
+    const facetPaletteListHorizontalStyles = (0, react_1.css)([
         sharedStyles,
         sharedListStyles,
         {
             flexFlow: 'row wrap',
-            gap: "".concat(custom_1.custom.spacing.x1, "px ").concat(custom_1.custom.spacing.x2, "px"),
+            gap: `${custom_1.custom.spacing.x1}px ${custom_1.custom.spacing.x2}px`,
             '.ss__facet-palette-options__option': {
                 flex: '0 1 auto',
-                width: "calc((100% - ".concat(custom_1.custom.spacing.x2, "px) / 2)"),
+                width: `calc((100% - ${custom_1.custom.spacing.x2}px) / 2)`,
                 minWidth: '1px',
                 margin: 0,
-                '.ss__facet-palette-options__option__value': __assign({}, custom_1.custom.styles.textOverflow()),
+                '.ss__facet-palette-options__option__value': {
+                    ...custom_1.custom.styles.textOverflow(),
+                },
             },
         },
-        (_a = {},
-            _a["".concat(custom_1.custom.utils.getBp(mobileBp))] = {
+        {
+            [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
                 '.ss__facet-palette-options__option': {
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 2, "px) / 3)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2 * 2}px) / 3)`,
                 },
             },
-            _a),
-        (_b = {},
-            _b["".concat(custom_1.custom.utils.getBp(tabletBp))] = {
+        },
+        {
+            [`${custom_1.custom.utils.getBp(tabletBp)}`]: {
                 '.ss__facet-palette-options__option': {
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 3, "px) / 4)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2 * 3}px) / 4)`,
                 },
             },
-            _b),
+        },
     ]);
     if (isList) {
-        return (props === null || props === void 0 ? void 0 : props.horizontal) ? facetPaletteListHorizontalStyles : facetPaletteListStyles;
+        return props?.horizontal ? facetPaletteListHorizontalStyles : facetPaletteListStyles;
     }
     else {
         return facetPaletteGridStyles;
@@ -207,7 +222,7 @@ exports.facetPaletteOptions = {
             hideIcon: true,
             columns: 0,
             gridSize: '52px',
-            gapSize: "".concat(custom_1.custom.spacing.x1, "px"),
+            gapSize: `${custom_1.custom.spacing.x1}px`,
             colorMapping: {
                 brown: {
                     background: paletteColors.brown,