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

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

@@ -1,21 +1,10 @@
 "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.facetSlider = void 0;
-var react_1 = require("@emotion/react");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const custom_1 = require("../../custom");
 // slider options
-var slider = {
+const slider = {
     handles: 20, // handle size
     handleInner: 7, // handle inner size,
     values: 14, // values size
@@ -25,31 +14,30 @@ var slider = {
     valuesAlign: 'sides', // alignment of slider values (sides or center)
 };
 // value settings
-var valuesTop = slider.valuesPosition == 'top' ? true : false;
-var valuesSides = slider.valuesAlign == 'sides' ? true : false;
+const valuesTop = slider.valuesPosition == 'top' ? true : false;
+const valuesSides = slider.valuesAlign == 'sides' ? true : false;
 // spacing and size calculations
-var handlesSizeHalf = (slider.handles - slider.bar) / 2;
-var handlesSpacing = slider.handles + custom_1.custom.spacing.x2;
-var ticksSpacing = slider.ticks + custom_1.custom.spacing.x1;
-var stickySpacing = slider.values + custom_1.custom.spacing.x2;
-var handlesPlusSticky = handlesSizeHalf + stickySpacing;
-var ticksPlusSticky = ticksSpacing + stickySpacing;
+const handlesSizeHalf = (slider.handles - slider.bar) / 2;
+const handlesSpacing = slider.handles + custom_1.custom.spacing.x2;
+const ticksSpacing = slider.ticks + custom_1.custom.spacing.x1;
+const stickySpacing = slider.values + custom_1.custom.spacing.x2;
+const handlesPlusSticky = handlesSizeHalf + stickySpacing;
+const ticksPlusSticky = ticksSpacing + stickySpacing;
 // CSS in JS style script for the FacetSlider component
-var facetSliderStyleScript = function (props) {
-    var _a, _b;
+const facetSliderStyleScript = (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 hasTicks = (props === null || props === void 0 ? void 0 : props.showTicks) ? true : false;
-    var hasStickyHandles = (props === null || props === void 0 ? void 0 : props.stickyHandleLabel) ? true : false;
-    var trackBorderColor = (props === null || props === void 0 ? void 0 : props.trackColor) != custom_1.custom.colors.gray01 ? custom_1.custom.utils.darkenColor(props.trackColor, 0.25) : custom_1.custom.colors.gray02;
-    var activeColors = custom_1.custom.utils.activeColors((props === null || props === void 0 ? void 0 : props.handleColor) || ((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.secondary) || custom_1.custom.colors.secondary);
+    const variables = props?.theme?.variables;
+    const hasTicks = props?.showTicks ? true : false;
+    const hasStickyHandles = props?.stickyHandleLabel ? true : false;
+    const trackBorderColor = props?.trackColor != custom_1.custom.colors.gray01 ? custom_1.custom.utils.darkenColor(props.trackColor, 0.25) : custom_1.custom.colors.gray02;
+    const activeColors = custom_1.custom.utils.activeColors(props?.handleColor || variables?.colors?.secondary || custom_1.custom.colors.secondary);
     // values font styles
-    var valuesStyles = (0, react_1.css)({
-        fontSize: "".concat(slider.values, "px"),
-        lineHeight: "".concat(slider.values, "px"),
+    const valuesStyles = (0, react_1.css)({
+        fontSize: `${slider.values}px`,
+        lineHeight: `${slider.values}px`,
     });
     // shared styles
-    var sharedStyles = (0, react_1.css)({
+    const sharedStyles = (0, react_1.css)({
         '&, .ss__facet-slider__slider': {
             margin: 'auto',
         },
@@ -64,7 +52,7 @@ var facetSliderStyleScript = function (props) {
             display: 'block',
             top: 0,
             width: '100%',
-            height: "".concat(slider.bar, "px"),
+            height: `${slider.bar}px`,
             '.ss__facet-slider__segment, .ss__facet-slider__rail, .ss__facet-slider__handles': {
                 height: '100%',
             },
@@ -73,33 +61,40 @@ var facetSliderStyleScript = function (props) {
                     transform: 'translate(-50%, 0)',
                 },
                 '&:before': {
-                    top: "".concat(slider.ticks / 2, "px"),
+                    top: `${slider.ticks / 2}px`,
                     backgroundColor: custom_1.custom.colors.gray02,
                 },
                 '.ss__facet-slider__tick__label': {
-                    top: "".concat(slider.ticks, "px"),
+                    top: `${slider.ticks}px`,
                     lineHeight: 1,
                 },
             },
-            '.ss__facet-slider__segment': __assign({ border: "1px solid ".concat(trackBorderColor) }, custom_1.custom.styles.borderRadius(slider.bar)),
-            '.ss__facet-slider__rail': __assign({}, custom_1.custom.styles.borderRadius(slider.bar)),
+            '.ss__facet-slider__segment': {
+                border: `1px solid ${trackBorderColor}`,
+                ...custom_1.custom.styles.borderRadius(slider.bar),
+            },
+            '.ss__facet-slider__rail': {
+                ...custom_1.custom.styles.borderRadius(slider.bar),
+            },
             '.ss__facet-slider__handles': {
                 position: 'relative',
-                margin: "0 ".concat(slider.handles / 2, "px"),
+                margin: `0 ${slider.handles / 2}px`,
                 button: {
                     '.ss__facet-slider__handle': {
                         transform: 'none',
-                        width: "".concat(slider.handles, "px"),
-                        height: "".concat(slider.handles, "px"),
-                        lineHeight: "".concat(slider.handles, "px"),
+                        width: `${slider.handles}px`,
+                        height: `${slider.handles}px`,
+                        lineHeight: `${slider.handles}px`,
                         '&:after': {
-                            width: "".concat(slider.handleInner, "px"),
-                            height: "".concat(slider.handleInner, "px"),
+                            width: `${slider.handleInner}px`,
+                            height: `${slider.handleInner}px`,
                             backgroundColor: activeColors[1],
                         },
                         '.ss__facet-slider__handle__label.ss__facet-slider__handle__label--sticky': {
                             backgroundColor: 'transparent',
-                            '&': __assign({}, valuesStyles),
+                            '&': {
+                                ...valuesStyles,
+                            },
                         },
                     },
                 },
@@ -111,10 +106,12 @@ var facetSliderStyleScript = function (props) {
             alignItems: 'center',
             justifyContent: valuesSides ? '' : 'center',
             '.ss__facet-slider__label': {
-                '&': __assign({}, valuesStyles),
+                '&': {
+                    ...valuesStyles,
+                },
                 '&:after': {
                     display: valuesSides ? 'none' : '',
-                    padding: "0 ".concat(custom_1.custom.spacing.x1, "px"),
+                    padding: `0 ${custom_1.custom.spacing.x1}px`,
                 },
                 '& ~ .ss__facet-slider__label': {
                     marginLeft: valuesSides ? 'auto' : '',
@@ -124,15 +121,15 @@ var facetSliderStyleScript = function (props) {
     });
     // spacing styles for different configurations
     // note: default for facet slider is no ticks, no stick handles, values bottom
-    var spacingStyles = (0, react_1.css)({});
+    let spacingStyles = (0, react_1.css)({});
     if (hasTicks && hasStickyHandles) {
         spacingStyles = (0, react_1.css)({
             '.ss__facet-slider__slider': {
-                margin: "".concat(valuesTop ? handlesPlusSticky : handlesSizeHalf, "px auto ").concat(valuesTop ? ticksSpacing : ticksPlusSticky, "px auto"),
+                margin: `${valuesTop ? handlesPlusSticky : handlesSizeHalf}px auto ${valuesTop ? ticksSpacing : ticksPlusSticky}px auto`,
                 '.ss__facet-slider__handles button .ss__facet-slider__handle': {
                     '.ss__facet-slider__handle__label.ss__facet-slider__handle__label--sticky': {
-                        top: valuesTop ? "auto" : "".concat(handlesSizeHalf + ticksPlusSticky - slider.bar, "px"),
-                        bottom: valuesTop ? "".concat(handlesSpacing, "px") : "",
+                        top: valuesTop ? `auto` : `${handlesSizeHalf + ticksPlusSticky - slider.bar}px`,
+                        bottom: valuesTop ? `${handlesSpacing}px` : ``,
                     },
                 },
             },
@@ -141,22 +138,22 @@ var facetSliderStyleScript = function (props) {
     else if (hasTicks && !hasStickyHandles) {
         spacingStyles = (0, react_1.css)({
             '.ss__facet-slider__slider': {
-                margin: "".concat(handlesSizeHalf, "px auto ").concat(ticksSpacing, "px auto"),
+                margin: `${handlesSizeHalf}px auto ${ticksSpacing}px auto`,
             },
             '.ss__facet-slider__labels': {
                 order: valuesTop ? -1 : '',
-                margin: "".concat(valuesTop ? 0 : custom_1.custom.spacing.x2, "px 0 ").concat(valuesTop ? custom_1.custom.spacing.x2 : 0, "px 0"),
+                margin: `${valuesTop ? 0 : custom_1.custom.spacing.x2}px 0 ${valuesTop ? custom_1.custom.spacing.x2 : 0}px 0`,
             },
         });
     }
     else if (!hasTicks && hasStickyHandles) {
         spacingStyles = (0, react_1.css)({
             '.ss__facet-slider__slider': {
-                margin: "".concat(valuesTop ? handlesPlusSticky : handlesSizeHalf, "px auto ").concat(valuesTop ? handlesSizeHalf : handlesPlusSticky, "px auto"),
+                margin: `${valuesTop ? handlesPlusSticky : handlesSizeHalf}px auto ${valuesTop ? handlesSizeHalf : handlesPlusSticky}px auto`,
                 '.ss__facet-slider__handles button .ss__facet-slider__handle': {
                     '.ss__facet-slider__handle__label.ss__facet-slider__handle__label--sticky': {
-                        top: valuesTop ? 'auto' : "".concat(handlesSpacing, "px"),
-                        bottom: valuesTop ? "".concat(handlesSpacing, "px") : "",
+                        top: valuesTop ? 'auto' : `${handlesSpacing}px`,
+                        bottom: valuesTop ? `${handlesSpacing}px` : ``,
                     },
                 },
             },
@@ -165,16 +162,16 @@ var facetSliderStyleScript = function (props) {
     else {
         spacingStyles = (0, react_1.css)({
             '.ss__facet-slider__slider': {
-                margin: "".concat(handlesSizeHalf, "px auto"),
+                margin: `${handlesSizeHalf}px auto`,
             },
             '.ss__facet-slider__labels': {
                 order: valuesTop ? -1 : '',
-                margin: "".concat(valuesTop ? 0 : custom_1.custom.spacing.x2, "px 0 ").concat(valuesTop ? custom_1.custom.spacing.x2 : 0, "px 0"),
+                margin: `${valuesTop ? 0 : custom_1.custom.spacing.x2}px 0 ${valuesTop ? custom_1.custom.spacing.x2 : 0}px 0`,
             },
         });
     }
     // facet slider styles
-    var facetSliderStyles = (0, react_1.css)([sharedStyles, spacingStyles]);
+    const facetSliderStyles = (0, react_1.css)([sharedStyles, spacingStyles]);
     return facetSliderStyles;
 };
 // FacetSlider component props

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

@@ -1,26 +1,14 @@
 "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.filter = 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 Filter component
-var filterStyleScript = function (props) {
-    var _a;
+const filterStyleScript = (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;
     // filter styles
-    var filterStyles = (0, react_1.css)({
+    const filterStyles = (0, react_1.css)({
         '&, .ss__filter__button': {
             padding: 0,
         },
@@ -35,11 +23,17 @@ var filterStyleScript = function (props) {
                 backgroundColor: 'transparent',
                 borderColor: 'transparent',
             },
-            '.ss__button__content': __assign(__assign({ position: 'relative' }, custom_1.custom.styles.baseText()), { fontWeight: 'normal', '.ss__filter__button__icon, .ss__filter__label, .ss__filter__value': {
+            '.ss__button__content': {
+                position: 'relative',
+                ...custom_1.custom.styles.baseText(),
+                fontWeight: 'normal',
+                '.ss__filter__button__icon, .ss__filter__label, .ss__filter__value': {
                     margin: 0,
-                }, '.ss__filter__label': {
+                },
+                '.ss__filter__label': {
                     fontWeight: custom_1.custom.fonts.weight01,
-                } }),
+                },
+            },
         },
     });
     return filterStyles;
@@ -52,7 +46,7 @@ exports.filter = {
             icon: custom_1.custom.icons.close,
         },
         'filter icon': {
-            size: "".concat(custom_1.custom.sizes.icon10, "px"),
+            size: `${custom_1.custom.sizes.icon10}px`,
         },
     },
 };

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

@@ -1,38 +1,28 @@
 "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.grid = 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 gridSelector = 'ss__grid__option';
-var darkSelector = "&.".concat(gridSelector, "--dark, &:has(.").concat(gridSelector, "__inner--grey), &:has(.").concat(gridSelector, "__inner--gray)");
-var imageSelector = '&:has(.ss__image)';
-var urlSelector = '&[style*="url"]';
-var styleSelector = '&[style], &:has(.ss__image)';
+const gridSelector = 'ss__grid__option';
+const darkSelector = `&.${gridSelector}--dark, &:has(.${gridSelector}__inner--grey), &:has(.${gridSelector}__inner--gray)`;
+const imageSelector = '&:has(.ss__image)';
+const urlSelector = '&[style*="url"]';
+const styleSelector = '&[style], &:has(.ss__image)';
 // CSS in JS style script for the Grid component
-var gridStyleScript = function (props) {
-    var _a, _b, _c, _d;
-    var _e, _f, _g, _h;
+const gridStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.variables;
-    var columns = (props === null || props === void 0 ? void 0 : props.columns) ? props.columns : 4;
-    var activeColors = custom_1.custom.utils.activeColors(((_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.secondary) || custom_1.custom.colors.secondary);
-    var activeColor = activeColors[0];
-    var fontColor = activeColors[1];
+    const variables = props?.theme?.variables;
+    const columns = props?.columns ? props.columns : 4;
+    const activeColors = custom_1.custom.utils.activeColors(variables?.colors?.secondary || custom_1.custom.colors.secondary);
+    const activeColor = activeColors[0];
+    const fontColor = activeColors[1];
     // grid styles
-    var gridStyles = (0, react_1.css)({
-        '.ss__grid__title': __assign({ margin: "0 0 ".concat(custom_1.custom.spacing.x2, "px 0") }, custom_1.custom.styles.headerText((_g = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _g === void 0 ? void 0 : _g.secondary, '14px')),
+    const gridStyles = (0, react_1.css)({
+        '.ss__grid__title': {
+            margin: `0 0 ${custom_1.custom.spacing.x2}px 0`,
+            ...custom_1.custom.styles.headerText(variables?.colors?.secondary, '14px'),
+        },
         '.ss__grid__options .ss__grid__option .ss__grid__option__inner .ss__grid__option__label, .ss__grid__show-more-wrapper': {
             fontSize: '12px',
             lineHeight: 1,
@@ -51,39 +41,59 @@ var gridStyleScript = function (props) {
                     border: 0,
                 },
             },
-            '.ss__grid__option:not(.ss__grid__show-more-wrapper)': (_a = {
+            '.ss__grid__option:not(.ss__grid__show-more-wrapper)': {
+                position: 'relative',
+                maxWidth: '40px',
+                width: `calc((100% - (${props?.gapSize ? props.gapSize : custom_1.custom.spacing.x1} * ${columns - 1})) / ${columns})`,
+                '.ss__grid__option__inner': {
                     position: 'relative',
-                    maxWidth: '40px',
-                    width: "calc((100% - (".concat((props === null || props === void 0 ? void 0 : props.gapSize) ? props.gapSize : custom_1.custom.spacing.x1, " * ").concat(columns - 1, ")) / ").concat(columns, ")"),
-                    '.ss__grid__option__inner': __assign(__assign({ position: 'relative', width: '100%' }, custom_1.custom.styles.box(undefined, "".concat(custom_1.custom.spacing.x1, "px"))), (_b = { '&, .ss__grid__option__label': {
-                                overflow: 'hidden',
-                            }, '.ss__grid__option__label': {
-                                maxWidth: '100%',
-                                maxHeight: '100%',
-                            } }, _b[styleSelector] = {
+                    width: '100%',
+                    ...custom_1.custom.styles.box(undefined, `${custom_1.custom.spacing.x1}px`),
+                    '&, .ss__grid__option__label': {
+                        overflow: 'hidden',
+                    },
+                    '.ss__grid__option__label': {
+                        maxWidth: '100%',
+                        maxHeight: '100%',
+                    },
+                    [styleSelector]: {
                         border: 0,
                         backgroundColor: 'transparent',
-                        '&:before, &:after': __assign({ content: '""', display: 'block', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }, custom_1.custom.styles.borderRadius()),
+                        '&:before, &:after': {
+                            content: '""',
+                            display: 'block',
+                            position: 'absolute',
+                            top: 0,
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            ...custom_1.custom.styles.borderRadius(),
+                        },
                         '&:before': {
-                            border: "3px solid ".concat(custom_1.custom.colors.white),
+                            border: `3px 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,
                         },
-                        '.ss__grid__option__label': __assign({}, custom_1.custom.styles.srOnly()),
-                    }, _b["".concat(urlSelector, ", ").concat(imageSelector)] = {
+                        '.ss__grid__option__label': {
+                            ...custom_1.custom.styles.srOnly(),
+                        },
+                    },
+                    [`${urlSelector}, ${imageSelector}`]: {
                         '&:before': {
                             margin: 0,
                             borderWidth: '4px',
                         },
-                    }, _b[urlSelector] = {
+                    },
+                    [urlSelector]: {
                         backgroundRepeat: 'no-repeat !important',
                         backgroundSize: 'cover !important',
                         backgroundPosition: 'center !important',
-                    }, _b[imageSelector] = {
+                    },
+                    [imageSelector]: {
                         '&:before, &:after': {
                             zIndex: 3,
                         },
@@ -106,61 +116,68 @@ var gridStyleScript = function (props) {
                         '.ss__grid__option__label': {
                             zIndex: 2,
                         },
-                    }, _b))
+                    },
                 },
-                _a[darkSelector] = {
+                [darkSelector]: {
                     '.ss__grid__option__inner': {
                         color: fontColor,
                     },
                 },
-                _a['&.ss__grid__option--disabled, &.ss__grid__option--unavailable'] = {
+                '&.ss__grid__option--disabled, &.ss__grid__option--unavailable': {
                     opacity: 1,
                     '&, &:before, &:after, *': {
                         pointerEvents: 'unset',
                         cursor: 'not-allowed !important',
                     },
-                    '&:before': __assign({ maxWidth: 'calc(100% - 4px)', top: 0, bottom: 0, zIndex: 3, margin: 'auto 0', borderTop: "2px solid ".concat(custom_1.custom.colors.white), outlineColor: custom_1.custom.colors.gray02 }, custom_1.custom.styles.borderRadius(3)),
+                    '&:before': {
+                        maxWidth: 'calc(100% - 4px)',
+                        top: 0,
+                        bottom: 0,
+                        zIndex: 3,
+                        margin: 'auto 0',
+                        borderTop: `2px solid ${custom_1.custom.colors.white}`,
+                        outlineColor: custom_1.custom.colors.gray02,
+                        ...custom_1.custom.styles.borderRadius(3),
+                    },
                     '.ss__grid__option__inner': {
                         opacity: 0.65,
                     },
                 },
-                _a['&.ss__grid__option--selected'] = (_c = {
-                        '.ss__grid__option__inner': (_d = {
-                                borderColor: activeColor,
-                                backgroundColor: activeColor,
-                                color: fontColor
-                            },
-                            _d[styleSelector] = {
-                                border: 0,
-                                backgroundColor: 'transparent',
-                                '&:before': {
-                                    opacity: 1,
-                                },
-                                '&:after': {
-                                    opacity: 0.3,
-                                },
+                '&.ss__grid__option--selected': {
+                    '.ss__grid__option__inner': {
+                        borderColor: activeColor,
+                        backgroundColor: activeColor,
+                        color: fontColor,
+                        [styleSelector]: {
+                            border: 0,
+                            backgroundColor: 'transparent',
+                            '&:before': {
+                                opacity: 1,
                             },
-                            _d['.ss__grid__option__label'] = {
-                                fontWeight: custom_1.custom.fonts.weight01,
+                            '&:after': {
+                                opacity: 0.3,
                             },
-                            _d)
+                        },
+                        '.ss__grid__option__label': {
+                            fontWeight: custom_1.custom.fonts.weight01,
+                        },
                     },
-                    _c[darkSelector] = {
+                    [darkSelector]: {
                         '.ss__grid__option__inner': {
                             color: fontColor,
                         },
                     },
-                    _c),
-                _a),
+                },
+            },
             '.ss__grid__show-more-wrapper': {
                 '.ss__grid__show-more, .ss__grid__show-less': {
-                    paddingLeft: "".concat(custom_1.custom.spacing.x1, "px"),
+                    paddingLeft: `${custom_1.custom.spacing.x1}px`,
                 },
             },
         },
         '.ss__grid__show-more-wrapper': {
             '&:not(.ss__grid__option)': {
-                margin: "".concat(custom_1.custom.spacing.x1, "px 0 0 0"),
+                margin: `${custom_1.custom.spacing.x1}px 0 0 0`,
                 '.ss__grid__show-more, .ss__grid__show-less': {
                     lineHeight: 1.5,
                 },
@@ -168,7 +185,9 @@ var gridStyleScript = function (props) {
             '&, .ss__grid__show-more': {
                 cursor: 'pointer',
             },
-            '.ss__grid__show-more, .ss__grid__show-less': __assign({}, custom_1.custom.styles.activeText((_h = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _h === void 0 ? void 0 : _h.primary)),
+            '.ss__grid__show-more, .ss__grid__show-less': {
+                ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+            },
         },
     });
     return gridStyles;
@@ -179,7 +198,7 @@ exports.grid = {
         grid: {
             themeStyleScript: gridStyleScript,
             columns: 4,
-            gapSize: "".concat(custom_1.custom.spacing.x1, "px"),
+            gapSize: `${custom_1.custom.spacing.x1}px`,
             hideLabels: false,
         },
     },