@athoscommerce/snap-preact 1.9.1 → 1.10.0

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

@@ -1,28 +1,16 @@
 "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.facet = 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 Facet component
-var facetStyleScript = function (props) {
-    var _a, _b, _c;
+const facetStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.variables;
+    const variables = props?.theme?.variables;
     // facet styles
-    var facetStyles = (0, react_1.css)({
+    const facetStyles = (0, react_1.css)({
         '&.ss__facet--collapsed': {
             '.ss__facet__header': {
                 '.ss__facet__dropdown__icon': {
@@ -32,18 +20,26 @@ var facetStyleScript = function (props) {
         },
         '&.ss__facet--showing-all:has(.ss__facet__show-more-less)': {
             '.ss__facet__options': {
-                maxHeight: "490px",
+                maxHeight: `490px`,
                 overflowY: 'auto',
                 overflowX: 'hidden',
-                paddingRight: "".concat(custom_1.custom.spacing.x2, "px"),
+                paddingRight: `${custom_1.custom.spacing.x2}px`,
             },
         },
-        '.ss__facet__header': __assign(__assign({ margin: " 0 0 ".concat(custom_1.custom.spacing.x4, "px 0"), padding: " 0 0 ".concat(custom_1.custom.spacing.x2, "px 0"), borderBottom: "2px solid ".concat((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.primary), gap: "".concat(custom_1.custom.spacing.x2, "px") }, custom_1.custom.styles.headerText('', '16px')), { '.ss__facet__header__inner': {
+        '.ss__facet__header': {
+            margin: ` 0 0 ${custom_1.custom.spacing.x4}px 0`,
+            padding: ` 0 0 ${custom_1.custom.spacing.x2}px 0`,
+            borderBottom: `2px solid ${variables?.colors?.primary}`,
+            gap: `${custom_1.custom.spacing.x2}px`,
+            ...custom_1.custom.styles.headerText('', '16px'),
+            '.ss__facet__header__inner': {
                 flex: '1 1 0%',
-                gap: "".concat(custom_1.custom.spacing.x1, "px"),
+                gap: `${custom_1.custom.spacing.x1}px`,
                 alignItems: 'center',
                 maxWidth: '100%',
-                'span:not(.ss__facet__header__selected-count)': __assign({}, custom_1.custom.styles.textOverflow()),
+                'span:not(.ss__facet__header__selected-count)': {
+                    ...custom_1.custom.styles.textOverflow(),
+                },
                 '.ss__facet__header__selected-count, .ss__facet__header__clear-all': {
                     fontSize: '12px',
                     margin: 0,
@@ -65,19 +61,26 @@ var facetStyleScript = function (props) {
                         margin: 0,
                     },
                 },
-            }, '.ss__facet__dropdown__icon': {
+            },
+            '.ss__facet__dropdown__icon': {
                 transition: 'transform ease 0.5s',
                 transform: 'rotate(180deg)',
-            } }),
-        '.ss__facet__options': __assign({ marginTop: 0, maxHeight: 'none', overflow: 'visible' }, custom_1.custom.styles.scrollbar()),
+            },
+        },
+        '.ss__facet__options': {
+            marginTop: 0,
+            maxHeight: 'none',
+            overflow: 'visible',
+            ...custom_1.custom.styles.scrollbar(),
+        },
         '.ss__search-input': {
-            margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px"),
+            margin: `0 0 ${custom_1.custom.spacing.x4}px`,
         },
         '.ss__facet__range-inputs': {
-            margin: "".concat(custom_1.custom.spacing.x4, "px 0 0 0"),
+            margin: `${custom_1.custom.spacing.x4}px 0 0 0`,
             fontSize: '14px',
             '&, .ss__facet__range-inputs__row': {
-                gap: "".concat(custom_1.custom.spacing.x2, "px"),
+                gap: `${custom_1.custom.spacing.x2}px`,
             },
             '.ss__facet__range-inputs__row': {
                 ' > *': {
@@ -92,27 +95,43 @@ var facetStyleScript = function (props) {
                 margin: 0,
             },
             '.ss__facet__range-input': {
-                gap: "".concat(custom_1.custom.spacing.x1 / 2, "px"),
+                gap: `${custom_1.custom.spacing.x1 / 2}px`,
                 border: 0,
                 backgroundColor: 'transparent',
             },
             '.ss__facet__range-input__prefix': {
                 padding: 0,
             },
-            '.ss__facet__range-input__input': __assign(__assign({ height: custom_1.custom.sizes.height, lineHeight: custom_1.custom.sizes.height }, custom_1.custom.styles.box(undefined, "0 ".concat(custom_1.custom.spacing.x2, "px"), false)), { '&::-webkit-input-placeholder': {
+            '.ss__facet__range-input__input': {
+                height: custom_1.custom.sizes.height,
+                lineHeight: custom_1.custom.sizes.height,
+                ...custom_1.custom.styles.box(undefined, `0 ${custom_1.custom.spacing.x2}px`, false),
+                '&::-webkit-input-placeholder': {
                     color: lightGray,
-                }, '&::-ms-input-placeholder': {
+                },
+                '&::-ms-input-placeholder': {
                     color: lightGray,
-                }, '&::placeholder': {
+                },
+                '&::placeholder': {
                     color: lightGray,
-                } }),
+                },
+            },
             '.ss__facet__range-inputs__row--button-wrapper .ss__button': {
                 width: '100%',
             },
         },
-        '.ss__facet__show-more-less': __assign(__assign({ margin: "".concat(custom_1.custom.spacing.x2, "px 0 0 0"), flexFlow: 'row nowrap', display: 'inline-flex', alignItems: 'center', gap: "".concat(custom_1.custom.spacing.x2, "px") }, custom_1.custom.styles.activeText((_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.primary)), { lineHeight: 1, '.ss__facet__show-more-less__icon': {
+        '.ss__facet__show-more-less': {
+            margin: `${custom_1.custom.spacing.x2}px 0 0 0`,
+            flexFlow: 'row nowrap',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: `${custom_1.custom.spacing.x2}px`,
+            ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+            lineHeight: 1,
+            '.ss__facet__show-more-less__icon': {
                 margin: 0,
-            } }),
+            },
+        },
     });
     return facetStyles;
 };
@@ -127,16 +146,16 @@ exports.facet = {
             iconOverflowLess: custom_1.custom.icons.minus,
         },
         'facet dropdown icon.collapse': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
+            size: `${custom_1.custom.sizes.icon12}px`,
         },
         'facet dropdown icon.expand': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
+            size: `${custom_1.custom.sizes.icon12}px`,
         },
         'facet button.reset-facet icon': {
-            size: "".concat(custom_1.custom.sizes.icon08, "px"),
+            size: `${custom_1.custom.sizes.icon08}px`,
         },
         'facet icon.overflow-more': {
-            size: "".concat(custom_1.custom.sizes.icon10, "px"),
+            size: `${custom_1.custom.sizes.icon10}px`,
         },
     },
 };

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

@@ -1,20 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.facets = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const custom_1 = require("../../custom");
 // CSS in JS style script for the Facets component
-var facetsStyleScript = function (props) {
-    var _a;
+const facetsStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.variables;
+    const variables = props?.theme?.variables;
     // facets styles
-    var facetsStyles = (0, react_1.css)({
+    const facetsStyles = (0, react_1.css)({
         '&.ss__facets': {
             display: 'block',
             width: 'auto',
             '.ss__facet': {
-                margin: "0 0 ".concat(custom_1.custom.spacing.x6, "px 0"),
+                margin: `0 0 ${custom_1.custom.spacing.x6}px 0`,
                 '&:last-child': {
                     marginBottom: 0,
                 },

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

@@ -1,156 +1,146 @@
 "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.facetsHorizontal = 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 dropdownButtonHeight = custom_1.custom.sizes.height;
+const dropdownButtonHeight = custom_1.custom.sizes.height;
 // CSS in JS style script for the Facets component
-var facetsHorizontalStyleScript = function (props) {
-    var _a;
-    var _b, _c, _d;
+const facetsHorizontalStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_b = props === null || props === void 0 ? void 0 : props.theme) === null || _b === void 0 ? void 0 : _b.variables;
-    var mobileBp = (_c = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _c === void 0 ? void 0 : _c.mobile;
-    var tabletBp = (_d = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _d === void 0 ? void 0 : _d.tablet;
+    const variables = props?.theme?.variables;
+    const mobileBp = variables?.breakpoints?.mobile;
+    const tabletBp = variables?.breakpoints?.tablet;
     // facets horizontal styles
-    var facetsHorizontalStyles = (0, react_1.css)((_a = {
-            margin: 0,
-            '.ss__facets-horizontal__header': {
-                gap: "".concat(custom_1.custom.spacing.x2, "px"),
-                position: 'relative',
-                '& > *': {
-                    minWidth: '1px',
-                    flex: '0 1 auto',
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 2, "px) / 3)"),
-                },
-                '.ss__facets-horizontal__header__dropdown': {
-                    position: 'static',
-                    '&.ss__dropdown--open': {
-                        '.ss__dropdown__button': {
-                            '.ss__dropdown__button__heading': {
-                                '.ss__dropdown__button__heading__icon': {
-                                    transform: 'rotate(180deg)',
-                                },
-                            },
-                        },
-                        '.ss__dropdown__content': {
-                            width: 'auto',
-                            minWidth: '1px',
-                            maxHeight: 'none',
-                            overflowY: 'visible',
-                            padding: "".concat(custom_1.custom.spacing.x4, "px"),
-                            marginTop: "".concat(custom_1.custom.spacing.x1, "px"),
-                            right: 0,
-                        },
-                    },
-                    '.ss__dropdown__button, .ss__dropdown__content': __assign({}, custom_1.custom.styles.box(undefined, "0 ".concat(custom_1.custom.spacing.x2, "px"))),
+    const facetsHorizontalStyles = (0, react_1.css)({
+        margin: 0,
+        '.ss__facets-horizontal__header': {
+            gap: `${custom_1.custom.spacing.x2}px`,
+            position: 'relative',
+            '& > *': {
+                minWidth: '1px',
+                flex: '0 1 auto',
+                width: `calc((100% - ${custom_1.custom.spacing.x2 * 2}px) / 3)`,
+            },
+            '.ss__facets-horizontal__header__dropdown': {
+                position: 'static',
+                '&.ss__dropdown--open': {
                     '.ss__dropdown__button': {
-                        height: "".concat(dropdownButtonHeight, "px"),
-                        lineHeight: "".concat(dropdownButtonHeight, "px"),
-                        '&, .ss__dropdown__button__heading': {
-                            width: '100%',
-                        },
                         '.ss__dropdown__button__heading': {
-                            flexFlow: 'row nowrap',
-                            justifyContent: 'flex-start',
-                            gap: "".concat(custom_1.custom.spacing.x1, "px"),
-                            padding: 0,
-                            '& > *': {
-                                minWidth: '1px',
-                            },
-                            '.ss__facet__header__inner': {
-                                flex: '1 1 0%',
-                                gap: "".concat(custom_1.custom.spacing.x1, "px"),
-                                alignItems: 'center',
-                                maxWidth: '100%',
-                                paddingRight: "".concat(custom_1.custom.spacing.x1, "px"),
-                                fontWeight: custom_1.custom.fonts.weight01,
-                                'span:not(.ss__facet__header__selected-count)': __assign({}, custom_1.custom.styles.textOverflow()),
-                                '.ss__facet__header__selected-count, .ss__facet__header__clear-all': {
-                                    fontSize: '12px',
-                                    margin: 0,
-                                },
-                                '.ss__facet__header__clear-all': {
-                                    padding: 0,
-                                    height: 'auto',
-                                    lineHeight: 'inherit',
-                                    marginLeft: 'auto',
-                                    '&, &:hover': {
-                                        border: 0,
-                                        backgroundColor: 'transparent',
-                                        color: 'inherit',
-                                    },
-                                    '&:hover': {
-                                        textDecoration: 'none',
-                                    },
-                                    '.ss__button__icon': {
-                                        margin: 0,
-                                    },
-                                },
-                            },
                             '.ss__dropdown__button__heading__icon': {
-                                transition: 'transform ease 0.5s',
+                                transform: 'rotate(180deg)',
                             },
                         },
                     },
                     '.ss__dropdown__content': {
-                        '.ss__checkbox, .ss__radio, .ss__search-input .ss__search-input__input, .ss__facet__range-inputs .ss__facet__range-input__input': {
-                            backgroundColor: custom_1.custom.colors.white,
-                        },
-                        '.ss__facet': {
-                            margin: 0,
-                        },
-                        '.ss__facet.ss__facet--showing-all:has(.ss__facet__show-more-less) .ss__facet__options': {
-                            maxHeight: '360px',
+                        width: 'auto',
+                        minWidth: '1px',
+                        maxHeight: 'none',
+                        overflowY: 'visible',
+                        padding: `${custom_1.custom.spacing.x4}px`,
+                        marginTop: `${custom_1.custom.spacing.x1}px`,
+                        right: 0,
+                    },
+                },
+                '.ss__dropdown__button, .ss__dropdown__content': {
+                    ...custom_1.custom.styles.box(undefined, `0 ${custom_1.custom.spacing.x2}px`),
+                },
+                '.ss__dropdown__button': {
+                    height: `${dropdownButtonHeight}px`,
+                    lineHeight: `${dropdownButtonHeight}px`,
+                    '&, .ss__dropdown__button__heading': {
+                        width: '100%',
+                    },
+                    '.ss__dropdown__button__heading': {
+                        flexFlow: 'row nowrap',
+                        justifyContent: 'flex-start',
+                        gap: `${custom_1.custom.spacing.x1}px`,
+                        padding: 0,
+                        '& > *': {
+                            minWidth: '1px',
                         },
-                        '.ss__facet-grid-options': {
-                            '.ss__facet-grid-options__option:not(.ss__facet-grid-options__option--filtered)': {
-                                backgroundColor: custom_1.custom.colors.white,
+                        '.ss__facet__header__inner': {
+                            flex: '1 1 0%',
+                            gap: `${custom_1.custom.spacing.x1}px`,
+                            alignItems: 'center',
+                            maxWidth: '100%',
+                            paddingRight: `${custom_1.custom.spacing.x1}px`,
+                            fontWeight: custom_1.custom.fonts.weight01,
+                            'span:not(.ss__facet__header__selected-count)': {
+                                ...custom_1.custom.styles.textOverflow(),
+                            },
+                            '.ss__facet__header__selected-count, .ss__facet__header__clear-all': {
+                                fontSize: '12px',
+                                margin: 0,
+                            },
+                            '.ss__facet__header__clear-all': {
+                                padding: 0,
+                                height: 'auto',
+                                lineHeight: 'inherit',
+                                marginLeft: 'auto',
+                                '&, &:hover': {
+                                    border: 0,
+                                    backgroundColor: 'transparent',
+                                    color: 'inherit',
+                                },
+                                '&:hover': {
+                                    textDecoration: 'none',
+                                },
+                                '.ss__button__icon': {
+                                    margin: 0,
+                                },
                             },
                         },
-                        '.ss__facet--slider .ss__facet__options, .ss__facet__range-inputs': {
-                            maxWidth: '50%',
-                            marginLeft: 'auto',
-                            marginRight: 'auto',
-                        },
-                        '.ss__facet__show-more-less': {
-                            margin: "".concat(custom_1.custom.spacing.x4, "px 0 0 0"),
-                            justifyContent: 'center',
+                        '.ss__dropdown__button__heading__icon': {
+                            transition: 'transform ease 0.5s',
                         },
                     },
                 },
-                '.ss__facets-horizontal__header__dropdown .ss__dropdown__content .ss__facet__show-more-less, .ss__layout__sidebar-toggle-button-wrapper .ss__button': {
-                    display: 'flex',
+                '.ss__dropdown__content': {
+                    '.ss__checkbox, .ss__radio, .ss__search-input .ss__search-input__input, .ss__facet__range-inputs .ss__facet__range-input__input': {
+                        backgroundColor: custom_1.custom.colors.white,
+                    },
+                    '.ss__facet': {
+                        margin: 0,
+                    },
+                    '.ss__facet.ss__facet--showing-all:has(.ss__facet__show-more-less) .ss__facet__options': {
+                        maxHeight: '360px',
+                    },
+                    '.ss__facet-grid-options': {
+                        '.ss__facet-grid-options__option:not(.ss__facet-grid-options__option--filtered)': {
+                            backgroundColor: custom_1.custom.colors.white,
+                        },
+                    },
+                    '.ss__facet--slider .ss__facet__options, .ss__facet__range-inputs': {
+                        maxWidth: '50%',
+                        marginLeft: 'auto',
+                        marginRight: 'auto',
+                    },
+                    '.ss__facet__show-more-less': {
+                        margin: `${custom_1.custom.spacing.x4}px 0 0 0`,
+                        justifyContent: 'center',
+                    },
                 },
-            }
+            },
+            '.ss__facets-horizontal__header__dropdown .ss__dropdown__content .ss__facet__show-more-less, .ss__layout__sidebar-toggle-button-wrapper .ss__button': {
+                display: 'flex',
+            },
         },
-        _a["".concat(custom_1.custom.utils.getBp(mobileBp))] = {
+        [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
             '.ss__facets-horizontal__header': {
                 '& > *': {
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 3, "px) / 4)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2 * 3}px) / 4)`,
                 },
             },
         },
-        _a["".concat(custom_1.custom.utils.getBp(tabletBp))] = {
+        [`${custom_1.custom.utils.getBp(tabletBp)}`]: {
             '.ss__facets-horizontal__header': {
                 '& > *': {
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 5, "px) / 6)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2 * 5}px) / 6)`,
                 },
             },
         },
-        _a));
+    });
     return facetsHorizontalStyles;
 };
 // FacetsHorizontal component props
@@ -163,10 +153,10 @@ exports.facetsHorizontal = {
             alwaysShowToggleSidebarButton: true,
         },
         'facetsHorizontal button.reset-facet icon': {
-            size: "".concat(custom_1.custom.sizes.icon08, "px"),
+            size: `${custom_1.custom.sizes.icon08}px`,
         },
         'facetsHorizontal icon.overflow-more': {
-            size: "".concat(custom_1.custom.sizes.icon10, "px"),
+            size: `${custom_1.custom.sizes.icon10}px`,
         },
         'facetsHorizontal dropdown facet': {
             statefulOverflow: true,

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

@@ -1,65 +1,72 @@
 "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.filterSummary = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const custom_1 = require("../../custom");
 // CSS in JS style script for the FilterSummary component
-var filterSummaryStyleScript = function (props) {
-    var _a, _b, _c, _d;
+const filterSummaryStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.variables;
-    var isSidebar = (props === null || props === void 0 ? void 0 : props.treePath) && (props.treePath.includes('sidebar') || props.treePath.includes('mobileSidebar') || props.treePath.includes('storybook'))
+    const variables = props?.theme?.variables;
+    const isSidebar = props?.treePath && (props.treePath.includes('sidebar') || props.treePath.includes('mobileSidebar') || props.treePath.includes('storybook'))
         ? true
         : false;
     // filter summary styles
-    var filterSummaryStyles = isSidebar
+    const filterSummaryStyles = isSidebar
         ? {
             display: 'block',
         }
         : {
             display: 'flex',
             alignItems: 'center',
-            gap: "".concat(custom_1.custom.spacing.x2, "px"),
+            gap: `${custom_1.custom.spacing.x2}px`,
         };
     // header styles
-    var headerStyles = isSidebar
-        ? __assign({ margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"), padding: "0 0 ".concat(custom_1.custom.spacing.x2, "px 0"), borderBottom: "2px solid ".concat((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.primary) }, custom_1.custom.styles.headerText((_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.secondary, '16px')) : __assign({ padding: 0 }, custom_1.custom.styles.headerText((_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.secondary, '14px'));
+    const headerStyles = isSidebar
+        ? {
+            margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
+            padding: `0 0 ${custom_1.custom.spacing.x2}px 0`,
+            borderBottom: `2px solid ${variables?.colors?.primary}`,
+            ...custom_1.custom.styles.headerText(variables?.colors?.secondary, '16px'),
+        }
+        : {
+            padding: 0,
+            ...custom_1.custom.styles.headerText(variables?.colors?.secondary, '14px'),
+        };
     // shared styles
-    var sharedStyles = (0, react_1.css)(__assign(__assign({ width: 'auto' }, filterSummaryStyles), { '.ss__filter-summary__title': __assign({}, headerStyles), '.ss__filter-summary__filters': {
+    const sharedStyles = (0, react_1.css)({
+        width: 'auto',
+        ...filterSummaryStyles,
+        '.ss__filter-summary__title': {
+            ...headerStyles,
+        },
+        '.ss__filter-summary__filters': {
             margin: 0,
-        } }));
+        },
+    });
     // inline filter summary styles
     // note: inline is a grid type summary style
-    var inlineFilterSummaryStyles = (0, react_1.css)([
+    const inlineFilterSummaryStyles = (0, react_1.css)([
         sharedStyles,
         {
             '&.ss__filter-summary--inline': {
                 '.ss__filter-summary__filters': {
-                    gap: "".concat(custom_1.custom.spacing.x2, "px"),
+                    gap: `${custom_1.custom.spacing.x2}px`,
                     '.ss__filter': {
-                        '.ss__filter__button': __assign(__assign({}, custom_1.custom.styles.box('', "".concat(custom_1.custom.spacing.x1, "px ").concat(custom_1.custom.spacing.x2, "px"))), { '.ss__button__content': {
+                        '.ss__filter__button': {
+                            ...custom_1.custom.styles.box('', `${custom_1.custom.spacing.x1}px ${custom_1.custom.spacing.x2}px`),
+                            '.ss__button__content': {
                                 '.ss__filter__button__icon': {
-                                    marginRight: "".concat(custom_1.custom.spacing.x1, "px"),
+                                    marginRight: `${custom_1.custom.spacing.x1}px`,
                                 },
-                            } }),
+                            },
+                        },
                     },
                 },
             },
         },
     ]);
     // list filter summary styles
-    var listFilterSummaryStyles = (0, react_1.css)([
+    const listFilterSummaryStyles = (0, react_1.css)([
         sharedStyles,
         {
             '&.ss__filter-summary--list': {
@@ -68,14 +75,21 @@ var filterSummaryStyleScript = function (props) {
                 },
                 '.ss__filter-summary__filters': {
                     '.ss__filter': {
-                        margin: isSidebar ? "0 0 ".concat(custom_1.custom.spacing.x1, "px 0") : 0,
+                        margin: isSidebar ? `0 0 ${custom_1.custom.spacing.x1}px 0` : 0,
                         '&:last-child': {
                             marginBottom: isSidebar ? 0 : '',
                         },
                         '.ss__filter__button': {
                             '.ss__button__content': {
-                                padding: "0 0 0 ".concat(custom_1.custom.sizes.icon16 + custom_1.custom.spacing.x2, "px"),
-                                '.ss__filter__button__icon': __assign(__assign({ position: 'absolute', top: '1.5px', left: 0 }, custom_1.custom.styles.box('', '3px')), { width: "".concat(custom_1.custom.sizes.icon16, "px"), height: "".concat(custom_1.custom.sizes.icon16, "px") }),
+                                padding: `0 0 0 ${custom_1.custom.sizes.icon16 + custom_1.custom.spacing.x2}px`,
+                                '.ss__filter__button__icon': {
+                                    position: 'absolute',
+                                    top: '1.5px',
+                                    left: 0,
+                                    ...custom_1.custom.styles.box('', '3px'),
+                                    width: `${custom_1.custom.sizes.icon16}px`,
+                                    height: `${custom_1.custom.sizes.icon16}px`,
+                                },
                             },
                         },
                     },
@@ -83,7 +97,7 @@ var filterSummaryStyleScript = function (props) {
             },
         },
     ]);
-    return (props === null || props === void 0 ? void 0 : props.type) == 'list' ? listFilterSummaryStyles : inlineFilterSummaryStyles;
+    return props?.type == 'list' ? listFilterSummaryStyles : inlineFilterSummaryStyles;
 };
 // FilterSummary component props
 exports.filterSummary = {