@athoscommerce/snap-preact 1.9.0 → 1.10.0

package/dist/cjs/components/src/themes/pike/components/atoms/searchHeader.js

@@ -1,42 +1,34 @@
 "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.searchHeader = 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 SearchHeader component
-var searchHeaderStyleScript = function (props) {
-    var _a, _b, _c, _d;
+const searchHeaderStyleScript = (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;
     // search header styles
-    var searchHeaderStyles = (0, react_1.css)({
+    const searchHeaderStyles = (0, react_1.css)({
         em: {
             fontStyle: 'normal',
         },
-        '.ss__search-header__title': __assign(__assign({ margin: 0 }, custom_1.custom.styles.headerText((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.secondary, '22px')), { '& ~ .ss__search-header__subtitle': {
-                marginTop: "".concat(custom_1.custom.spacing.x2, "px"),
-            } }),
+        '.ss__search-header__title': {
+            margin: 0,
+            ...custom_1.custom.styles.headerText(variables?.colors?.secondary, '22px'),
+            '& ~ .ss__search-header__subtitle': {
+                marginTop: `${custom_1.custom.spacing.x2}px`,
+            },
+        },
         '.ss__search-header__subtitle': {
             margin: 0,
             fontSize: '16px',
             fontWeight: 400,
             a: {
-                color: (_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.primary,
+                color: variables?.colors?.primary,
             },
         },
         '.ss__search-header__results-query': {
-            color: (_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.primary,
+            color: variables?.colors?.primary,
         },
     });
     return searchHeaderStyles;

package/dist/cjs/components/src/themes/pike/components/atoms/skeleton.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.skeleton = 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 Skeleton component
-var skeletonStyleScript = function (props) {
-    var _a;
+const skeletonStyleScript = (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;
     // skeleton styles
-    var skeletonStyles = (0, react_1.css)({});
+    const skeletonStyles = (0, react_1.css)({});
     return skeletonStyles;
 };
 // Skeleton component props

package/dist/cjs/components/src/themes/pike/components/index.js

@@ -1,22 +1,31 @@
 "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.desktopComponents = exports.tabletComponents = exports.mobileComponents = exports.components = void 0;
-var atoms_1 = require("./atoms");
-var molecules_1 = require("./molecules");
-var organisms_1 = require("./organisms");
-var templates_1 = require("./templates");
-exports.components = __assign(__assign(__assign(__assign({}, atoms_1.atoms.default), molecules_1.molecules.default), organisms_1.organisms.default), templates_1.templates.default);
-exports.mobileComponents = __assign(__assign(__assign(__assign({}, atoms_1.atoms.mobile), molecules_1.molecules.mobile), organisms_1.organisms.mobile), templates_1.templates.mobile);
-exports.tabletComponents = __assign(__assign(__assign(__assign({}, atoms_1.atoms.tablet), molecules_1.molecules.tablet), organisms_1.organisms.tablet), templates_1.templates.tablet);
-exports.desktopComponents = __assign(__assign(__assign(__assign({}, atoms_1.atoms.desktop), molecules_1.molecules.desktop), organisms_1.organisms.desktop), templates_1.templates.desktop);
+const atoms_1 = require("./atoms");
+const molecules_1 = require("./molecules");
+const organisms_1 = require("./organisms");
+const templates_1 = require("./templates");
+exports.components = {
+    ...atoms_1.atoms.default,
+    ...molecules_1.molecules.default,
+    ...organisms_1.organisms.default,
+    ...templates_1.templates.default,
+};
+exports.mobileComponents = {
+    ...atoms_1.atoms.mobile,
+    ...molecules_1.molecules.mobile,
+    ...organisms_1.organisms.mobile,
+    ...templates_1.templates.mobile,
+};
+exports.tabletComponents = {
+    ...atoms_1.atoms.tablet,
+    ...molecules_1.molecules.tablet,
+    ...organisms_1.organisms.tablet,
+    ...templates_1.templates.tablet,
+};
+exports.desktopComponents = {
+    ...atoms_1.atoms.desktop,
+    ...molecules_1.molecules.desktop,
+    ...organisms_1.organisms.desktop,
+    ...templates_1.templates.desktop,
+};

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

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calloutBadge = 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 Search component
-var calloutBadgeStyleScript = function (props) {
-    var _a;
+const calloutBadgeStyleScript = (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;
     // callout badge styles
-    var calloutBadgeStyles = (0, react_1.css)({
-        gap: "".concat(custom_1.custom.spacing.x2, "px"),
+    const calloutBadgeStyles = (0, react_1.css)({
+        gap: `${custom_1.custom.spacing.x2}px`,
     });
     return calloutBadgeStyles;
 };

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

@@ -1,44 +1,34 @@
 "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.carousel = 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 carouselOptions = {
+const carouselOptions = {
     spacing: custom_1.custom.spacing.x2,
     button: 32, // size of previous next buttons
     pagination: 12, // size of pagination bullets
     scrollbar: 6, // size of scrollbar
 };
 // CSS in JS style script for the Carousel component
-var carouselStyleScript = function (props) {
-    var _a, _b, _c, _d, _e, _f;
+const carouselStyleScript = (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 isDraggable = typeof (props === null || props === void 0 ? void 0 : props.scrollbar) == 'object' && ((_b = props === null || props === void 0 ? void 0 : props.scrollbar) === null || _b === void 0 ? void 0 : _b.draggable) ? true : false;
-    var activeColors = custom_1.custom.utils.activeColors(((_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.secondary) || custom_1.custom.colors.secondary);
-    var buttonColor = activeColors[0];
-    var fontColor = activeColors[1];
+    const variables = props?.theme?.variables;
+    const isDraggable = typeof props?.scrollbar == 'object' && props?.scrollbar?.draggable ? true : false;
+    const activeColors = custom_1.custom.utils.activeColors(variables?.colors?.secondary || custom_1.custom.colors.secondary);
+    const buttonColor = activeColors[0];
+    const fontColor = activeColors[1];
     // carousel styles
-    var carouselStyles = (0, react_1.css)({
+    const carouselStyles = (0, react_1.css)({
         position: 'relative',
         width: '100%',
         minWidth: '1px',
-        '.ss__carousel__prev-wrapper--hidden > div, .ss__carousel__next-wrapper--hidden > div': __assign({}, custom_1.custom.styles.disabled()),
+        '.ss__carousel__prev-wrapper--hidden > div, .ss__carousel__next-wrapper--hidden > div': {
+            ...custom_1.custom.styles.disabled(),
+        },
         '.ss__carousel__prev-wrapper, .ss__carousel__next-wrapper': {
-            width: "".concat(carouselOptions.button, "px"),
-            height: "".concat(carouselOptions.button, "px"),
+            width: `${carouselOptions.button}px`,
+            height: `${carouselOptions.button}px`,
             display: 'block',
             position: 'absolute',
             top: 0,
@@ -57,7 +47,9 @@ var carouselStyleScript = function (props) {
                 backgroundColor: buttonColor,
                 color: fontColor,
             },
-            '.swiper-button-disabled': __assign({}, custom_1.custom.styles.disabled()),
+            '.swiper-button-disabled': {
+                ...custom_1.custom.styles.disabled(),
+            },
         },
         '.ss__carousel__prev-wrapper': {
             left: 0,
@@ -85,15 +77,32 @@ var carouselStyleScript = function (props) {
             },
             '& > .swiper-pagination': {
                 position: 'relative',
-                margin: "".concat(custom_1.custom.spacing.x2, "px 0 0 0"),
-                gap: "".concat(custom_1.custom.spacing.x1, "px"),
-                '.swiper-pagination-bullet': __assign({ opacity: 1, flex: '0 1 auto', width: "".concat(carouselOptions.pagination, "px"), height: "".concat(carouselOptions.pagination, "px"), lineHeight: "".concat(carouselOptions.pagination, "px"), minWidth: '1px', margin: 0 }, custom_1.custom.styles.box('', 0, false)),
+                margin: `${custom_1.custom.spacing.x2}px 0 0 0`,
+                gap: `${custom_1.custom.spacing.x1}px`,
+                '.swiper-pagination-bullet': {
+                    opacity: 1,
+                    flex: '0 1 auto',
+                    width: `${carouselOptions.pagination}px`,
+                    height: `${carouselOptions.pagination}px`,
+                    lineHeight: `${carouselOptions.pagination}px`,
+                    minWidth: '1px',
+                    margin: 0,
+                    ...custom_1.custom.styles.box('', 0, false),
+                },
                 '.swiper-pagination-bullet-active': {
-                    backgroundColor: (_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.primary,
-                    borderColor: (_e = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _e === void 0 ? void 0 : _e.primary,
+                    backgroundColor: variables?.colors?.primary,
+                    borderColor: variables?.colors?.primary,
                 },
             },
-            '& > .swiper-scrollbar': __assign(__assign({ position: 'relative', margin: "".concat(custom_1.custom.spacing.x2, "px 0 0 0"), height: "".concat(carouselOptions.scrollbar, "px"), overflow: 'hidden', backgroundColor: custom_1.custom.colors.gray01, cursor: isDraggable ? 'pointer' : '' }, custom_1.custom.styles.borderRadius(carouselOptions.scrollbar, 'px')), { '&:after': {
+            '& > .swiper-scrollbar': {
+                position: 'relative',
+                margin: `${custom_1.custom.spacing.x2}px 0 0 0`,
+                height: `${carouselOptions.scrollbar}px`,
+                overflow: 'hidden',
+                backgroundColor: custom_1.custom.colors.gray01,
+                cursor: isDraggable ? 'pointer' : '',
+                ...custom_1.custom.styles.borderRadius(carouselOptions.scrollbar, 'px'),
+                '&:after': {
                     content: '""',
                     position: 'absolute',
                     top: 0,
@@ -102,11 +111,13 @@ var carouselStyleScript = function (props) {
                     right: 0,
                     zIndex: 1,
                     margin: 'auto',
-                    border: "1px solid ".concat(custom_1.custom.colors.gray02),
-                }, '.swiper-scrollbar-drag': {
+                    border: `1px solid ${custom_1.custom.colors.gray02}`,
+                },
+                '.swiper-scrollbar-drag': {
                     zIndex: 2,
-                    backgroundColor: (_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.primary,
-                } }),
+                    backgroundColor: variables?.colors?.primary,
+                },
+            },
         },
         '.swiper-grid-column': {
             '& > .swiper-wrapper': {
@@ -114,7 +125,7 @@ var carouselStyleScript = function (props) {
                 '& > .swiper-slide': {
                     height: 'auto !important',
                     marginTop: '0 !important',
-                    marginBottom: "".concat(custom_1.custom.spacing.x4, "px"),
+                    marginBottom: `${custom_1.custom.spacing.x4}px`,
                 },
             },
         },
@@ -132,7 +143,7 @@ exports.carousel = {
             centerInsufficientSlides: false,
         },
         'carousel icon': {
-            size: "".concat(custom_1.custom.sizes.icon08, "px"),
+            size: `${custom_1.custom.sizes.icon08}px`,
         },
         'carousel icon.prev': {
             icon: custom_1.custom.icons.arrowLeft,

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

@@ -1,50 +1,47 @@
 "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.checkbox = 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 Checkbox component
-var checkboxStyleScript = function (props) {
-    var _a;
+const checkboxStyleScript = (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;
     // shared styles
-    var sharedStyles = (0, react_1.css)({
+    const sharedStyles = (0, react_1.css)({
         position: 'relative',
         top: '-1px',
     });
     // default checkbox styles
-    var defaultCheckboxStyles = (0, react_1.css)([
+    const defaultCheckboxStyles = (0, react_1.css)([
         sharedStyles,
-        __assign(__assign({}, custom_1.custom.styles.box('', 0)), { borderColor: props.color || custom_1.custom.colors.gray02, '&.ss__checkbox--active': {
+        {
+            ...custom_1.custom.styles.box('', 0),
+            borderColor: props.color || custom_1.custom.colors.gray02,
+            '&.ss__checkbox--active': {
                 backgroundColor: custom_1.custom.colors.white,
-            }, '&.ss__checkbox--disabled': __assign({}, custom_1.custom.styles.disabled()) }),
+            },
+            '&.ss__checkbox--disabled': {
+                ...custom_1.custom.styles.disabled(),
+            },
+        },
     ]);
     // native checkbox styles
-    var nativeCheckboxStyles = (0, react_1.css)([
+    const nativeCheckboxStyles = (0, react_1.css)([
         sharedStyles,
         {
             margin: 0,
             padding: 0,
-            width: (props === null || props === void 0 ? void 0 : props.size) ? props.size : "".concat(custom_1.custom.sizes.icon16, "px"),
-            height: (props === null || props === void 0 ? void 0 : props.size) ? props.size : "".concat(custom_1.custom.sizes.icon16, "px"),
+            width: props?.size ? props.size : `${custom_1.custom.sizes.icon16}px`,
+            height: props?.size ? props.size : `${custom_1.custom.sizes.icon16}px`,
             lineHeight: 1,
             cursor: 'pointer',
-            '&.ss__checkbox--disabled': __assign({}, custom_1.custom.styles.disabled()),
+            '&.ss__checkbox--disabled': {
+                ...custom_1.custom.styles.disabled(),
+            },
         },
     ]);
-    return (props === null || props === void 0 ? void 0 : props.native) ? nativeCheckboxStyles : defaultCheckboxStyles;
+    return props?.native ? nativeCheckboxStyles : defaultCheckboxStyles;
 };
 // Checkbox component props
 exports.checkbox = {
@@ -52,11 +49,11 @@ exports.checkbox = {
         checkbox: {
             themeStyleScript: checkboxStyleScript,
             icon: custom_1.custom.icons.check,
-            size: "".concat(custom_1.custom.sizes.icon16, "px"),
+            size: `${custom_1.custom.sizes.icon16}px`,
         },
         'checkbox icon': {
-            width: "calc(50% + 1px)",
-            height: "calc(50% + 1px)",
+            width: `calc(50% + 1px)`,
+            height: `calc(50% + 1px)`,
         },
     },
 };

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

@@ -1,24 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.errorHandler = 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 ErrorHandler component
-var errorHandlerStyleScript = function (props) {
-    var _a;
+const errorHandlerStyleScript = (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;
     // error handler styles
-    var errorHandlerStyles = (0, react_1.css)({
-        gap: "".concat(custom_1.custom.spacing.x2, "px"),
-        padding: "".concat(custom_1.custom.spacing.x2, "px"),
+    const errorHandlerStyles = (0, react_1.css)({
+        gap: `${custom_1.custom.spacing.x2}px`,
+        padding: `${custom_1.custom.spacing.x2}px`,
         '.ss__error-handler__message, .ss__error-handler__button': {
-            gap: "".concat(custom_1.custom.spacing.x1, "px"),
+            gap: `${custom_1.custom.spacing.x1}px`,
         },
         '.ss__error-handler__message': {
             padding: 0,
             flexFlow: 'row wrap',
-            flex: "1 1 0%",
+            flex: `1 1 0%`,
             fontSize: '14px',
             'span, .ss__icon, .ss__error-handler__message__type': {
                 margin: 0,
@@ -29,9 +28,9 @@ var errorHandlerStyleScript = function (props) {
             },
         },
         '.ss__error-handler__button': {
-            flex: "0 1 auto",
+            flex: `0 1 auto`,
             margin: 0,
-            padding: "0 ".concat(custom_1.custom.spacing.x2, "px"),
+            padding: `0 ${custom_1.custom.spacing.x2}px`,
             height: '28px',
             lineHeight: '28px',
             '.ss__button__content, .ss__icon': {
@@ -48,8 +47,8 @@ exports.errorHandler = {
             themeStyleScript: errorHandlerStyleScript,
         },
         'errorHandler icon': {
-            width: "".concat(custom_1.custom.sizes.icon14, "px"),
-            height: "".concat(custom_1.custom.sizes.icon14, "px"),
+            width: `${custom_1.custom.sizes.icon14}px`,
+            height: `${custom_1.custom.sizes.icon14}px`,
         },
     },
 };

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

@@ -1,34 +1,22 @@
 "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.facetGridOptions = 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 FacetGridOptions component
-var facetGridOptionsStyleScript = function (props) {
-    var _a, _b;
+const facetGridOptionsStyleScript = (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 activeColors = custom_1.custom.utils.activeColors(((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.secondary) || custom_1.custom.colors.secondary);
-    var activeColor = activeColors[0];
-    var fontColor = activeColors[1];
+    const variables = props?.theme?.variables;
+    const activeColors = custom_1.custom.utils.activeColors(variables?.colors?.secondary || custom_1.custom.colors.secondary);
+    const activeColor = activeColors[0];
+    const fontColor = activeColors[1];
     // facet grid styles
-    var facetGridStyles = (0, react_1.css)({
+    const facetGridStyles = (0, react_1.css)({
         alignItems: 'center',
         '.ss__facet-grid-options__option': {
             height: '100%',
             aspectRatio: 1,
-            padding: "".concat(custom_1.custom.spacing.x2, "px"),
+            padding: `${custom_1.custom.spacing.x2}px`,
             '&, .ss__facet-grid-options__option__value': {
                 overflow: 'hidden',
             },
@@ -42,8 +30,14 @@ var facetGridOptionsStyleScript = function (props) {
                     lineHeight: 1,
                 },
             },
-            '&, &:hover:not(.ss__facet-grid-options__option--filtered)': __assign({}, custom_1.custom.styles.box(undefined, 0)),
-            '&.ss__facet-grid-options__option--filtered': __assign({ backgroundColor: activeColor, borderColor: activeColor }, custom_1.custom.styles.activeText(fontColor)),
+            '&, &:hover:not(.ss__facet-grid-options__option--filtered)': {
+                ...custom_1.custom.styles.box(undefined, 0),
+            },
+            '&.ss__facet-grid-options__option--filtered': {
+                backgroundColor: activeColor,
+                borderColor: activeColor,
+                ...custom_1.custom.styles.activeText(fontColor),
+            },
         },
     });
     return facetGridStyles;
@@ -55,7 +49,7 @@ exports.facetGridOptions = {
             themeStyleScript: facetGridOptionsStyleScript,
             columns: 0,
             gridSize: '52px',
-            gapSize: "".concat(custom_1.custom.spacing.x1, "px"),
+            gapSize: `${custom_1.custom.spacing.x1}px`,
         },
     },
 };