@athoscommerce/snap-preact 1.9.1 → 1.10.0

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

@@ -1,64 +1,49 @@
 "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);
-};
-var _a, _b, _c, _d;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.searchCollapsible = void 0;
-var react_1 = require("@emotion/react");
-var searchCollapsible_1 = require("../../../themeComponents/searchCollapsible");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const searchCollapsible_1 = require("../../../themeComponents/searchCollapsible");
+const custom_1 = require("../../custom");
 // CSS in JS style script for the Search component
-var searchCollapsibleStyleScript = function (props) {
-    var _a;
-    var _b, _c;
+const searchCollapsibleStyleScript = (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 tabletBp = (_c = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _c === void 0 ? void 0 : _c.tablet;
+    const variables = props?.theme?.variables;
+    const tabletBp = variables?.breakpoints?.tablet;
     // search collapsible styles
-    var searchCollapsibleStyles = (0, react_1.css)((_a = {
-            '&:not(:has(.ss__no-results))': {
-                '.ss__search-collapsible__header-section': {
-                    margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
-                    '.ss__toolbar': {
-                        '.ss__layout__row:has(.ss__search-header)': {
-                            margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
-                            '.ss__search-header': {
-                                textAlign: 'center',
-                            },
+    const searchCollapsibleStyles = (0, react_1.css)({
+        '&:not(:has(.ss__no-results))': {
+            '.ss__search-collapsible__header-section': {
+                margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
+                '.ss__toolbar': {
+                    '.ss__layout__row:has(.ss__search-header)': {
+                        margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
+                        '.ss__search-header': {
+                            textAlign: 'center',
                         },
                     },
                 },
             },
-            '.ss__search-collapsible__header-section, .ss__search-collapsible__main-section': {
-                margin: "0 0 ".concat(custom_1.custom.spacing.x6, "px 0"),
+        },
+        '.ss__search-collapsible__header-section, .ss__search-collapsible__main-section': {
+            margin: `0 0 ${custom_1.custom.spacing.x6}px 0`,
+        },
+        '.ss__search-collapsible__main-section': {
+            gap: `${custom_1.custom.spacing.x6}px`,
+            '.ss__search-collapsible__sidebar, .ss__search-collapsible__content': {
+                minWidth: '1px',
             },
-            '.ss__search-collapsible__main-section': {
-                gap: "".concat(custom_1.custom.spacing.x6, "px"),
-                '.ss__search-collapsible__sidebar, .ss__search-collapsible__content': {
-                    minWidth: '1px',
-                },
-                '.ss__search-collapsible__sidebar': {
-                    flex: '0 1 auto',
-                    '.ss__sidebar': {
-                        width: '250px',
-                    },
+            '.ss__search-collapsible__sidebar': {
+                flex: '0 1 auto',
+                '.ss__sidebar': {
+                    width: '250px',
                 },
-                '.ss__search-collapsible__content': {
-                    flex: '1 1 0%',
-                    gap: "".concat(custom_1.custom.spacing.x4, "px"),
-                },
-            }
+            },
+            '.ss__search-collapsible__content': {
+                flex: '1 1 0%',
+                gap: `${custom_1.custom.spacing.x4}px`,
+            },
         },
-        _a["".concat(custom_1.custom.utils.getBp(tabletBp))] = {
+        [`${custom_1.custom.utils.getBp(tabletBp)}`]: {
             '&:not(:has(.ss__no-results))': {
                 '.ss__search-collapsible__header-section': {
                     margin: 0,
@@ -69,7 +54,7 @@ var searchCollapsibleStyleScript = function (props) {
                                 textAlign: 'left',
                                 '&:has(.ss__search-header__subtitle)': {
                                     '.ss__search-header__title': {
-                                        padding: "0 ".concat(custom_1.custom.spacing.x1, "px 0 0"),
+                                        padding: `0 ${custom_1.custom.spacing.x1}px 0 0`,
                                         '&:after': {
                                             content: '"."',
                                         },
@@ -107,20 +92,43 @@ var searchCollapsibleStyleScript = function (props) {
                 },
             },
         },
-        _a));
+    });
     return searchCollapsibleStyles;
 };
 exports.searchCollapsible = {
-    default: __assign(__assign({}, searchCollapsible_1.searchCollapsibleThemeComponentProps.default), { searchCollapsible: __assign(__assign({}, (((_a = searchCollapsible_1.searchCollapsibleThemeComponentProps.default) === null || _a === void 0 ? void 0 : _a['searchCollapsible']) || {})), { themeStyleScript: searchCollapsibleStyleScript }), 'searchCollapsible sidebar': {
+    default: {
+        ...searchCollapsible_1.searchCollapsibleThemeComponentProps.default,
+        searchCollapsible: {
+            ...(searchCollapsible_1.searchCollapsibleThemeComponentProps.default?.['searchCollapsible'] || {}),
+            themeStyleScript: searchCollapsibleStyleScript,
+        },
+        'searchCollapsible sidebar': {
             hideTitleText: true,
-        }, 'searchCollapsible button.sidebar-toggle': {
+        },
+        'searchCollapsible button.sidebar-toggle': {
             icon: custom_1.custom.icons.filter,
-        }, 'searchCollapsible filterSummary': {
+        },
+        'searchCollapsible filterSummary': {
             type: 'list',
-        } }),
-    mobile: __assign(__assign({}, searchCollapsible_1.searchCollapsibleThemeComponentProps.mobile), { searchCollapsible: __assign({}, (((_b = searchCollapsible_1.searchCollapsibleThemeComponentProps.mobile) === null || _b === void 0 ? void 0 : _b['searchCollapsible']) || {})) }),
-    tablet: __assign(__assign({}, searchCollapsible_1.searchCollapsibleThemeComponentProps.tablet), { searchCollapsible: __assign({}, (((_c = searchCollapsible_1.searchCollapsibleThemeComponentProps.tablet) === null || _c === void 0 ? void 0 : _c['searchCollapsible']) || {})) }),
-    desktop: __assign(__assign({}, searchCollapsible_1.searchCollapsibleThemeComponentProps.desktop), { searchCollapsible: __assign(__assign({}, (((_d = searchCollapsible_1.searchCollapsibleThemeComponentProps.desktop) === null || _d === void 0 ? void 0 : _d['searchCollapsible']) || {})), { layoutOptions: [
+        },
+    },
+    mobile: {
+        ...searchCollapsible_1.searchCollapsibleThemeComponentProps.mobile,
+        searchCollapsible: {
+            ...(searchCollapsible_1.searchCollapsibleThemeComponentProps.mobile?.['searchCollapsible'] || {}),
+        },
+    },
+    tablet: {
+        ...searchCollapsible_1.searchCollapsibleThemeComponentProps.tablet,
+        searchCollapsible: {
+            ...(searchCollapsible_1.searchCollapsibleThemeComponentProps.tablet?.['searchCollapsible'] || {}),
+        },
+    },
+    desktop: {
+        ...searchCollapsible_1.searchCollapsibleThemeComponentProps.desktop,
+        searchCollapsible: {
+            ...(searchCollapsible_1.searchCollapsibleThemeComponentProps.desktop?.['searchCollapsible'] || {}),
+            layoutOptions: [
                 {
                     value: 1,
                     label: '3 wide',
@@ -146,5 +154,7 @@ exports.searchCollapsible = {
                         },
                     },
                 },
-            ] }) }),
+            ],
+        },
+    },
 };

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

@@ -1,58 +1,43 @@
 "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);
-};
-var _a, _b, _c, _d;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.searchHorizontal = void 0;
-var react_1 = require("@emotion/react");
-var searchHorizontal_1 = require("../../../themeComponents/searchHorizontal");
-var custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const searchHorizontal_1 = require("../../../themeComponents/searchHorizontal");
+const custom_1 = require("../../custom");
 // CSS in JS style script for the Search component
-var searchHorizontalStyleScript = function (props) {
-    var _a;
-    var _b, _c, _d;
+const searchHorizontalStyleScript = (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 = (_d = (_c = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _c === void 0 ? void 0 : _c.mobile) !== null && _d !== void 0 ? _d : custom_1.custom.breakpoints.mobile;
+    const variables = props?.theme?.variables;
+    const mobileBp = variables?.breakpoints?.mobile ?? custom_1.custom.breakpoints.mobile;
     // search horizontal styles
-    var searchHorizontalStyles = (0, react_1.css)((_a = {
-            '.ss__search-horizontal__header-section, .ss__search-horizontal__main-section': {
-                margin: "0 0 ".concat(custom_1.custom.spacing.x6, "px 0"),
+    const searchHorizontalStyles = (0, react_1.css)({
+        '.ss__search-horizontal__header-section, .ss__search-horizontal__main-section': {
+            margin: `0 0 ${custom_1.custom.spacing.x6}px 0`,
+        },
+        '.ss__search-horizontal__main-section': {
+            gap: `${custom_1.custom.spacing.x6}px`,
+            '.ss__search-horizontal__content': {
+                minWidth: '1px',
+                flex: '1 1 0%',
+                gap: `${custom_1.custom.spacing.x4}px`,
             },
-            '.ss__search-horizontal__main-section': {
-                gap: "".concat(custom_1.custom.spacing.x6, "px"),
-                '.ss__search-horizontal__content': {
-                    minWidth: '1px',
-                    flex: '1 1 0%',
-                    gap: "".concat(custom_1.custom.spacing.x4, "px"),
-                },
-                '.ss__facets-horizontal': {
-                    margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px 0"),
-                },
-                '.ss__toolbar': {
-                    '.ss__layout__row': {
-                        '.ss__layout__sidebar-toggle-button-wrapper': {
-                            '.ss__button': {
-                                width: '100%',
-                            },
-                        },
-                        '.ss__select': {
-                            flex: '1 1 0%',
+            '.ss__facets-horizontal': {
+                margin: `0 0 ${custom_1.custom.spacing.x4}px 0`,
+            },
+            '.ss__toolbar': {
+                '.ss__layout__row': {
+                    '.ss__layout__sidebar-toggle-button-wrapper': {
+                        '.ss__button': {
+                            width: '100%',
                         },
                     },
+                    '.ss__select': {
+                        flex: '1 1 0%',
+                    },
                 },
-            }
+            },
         },
-        _a["".concat(custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small))] = {
+        [`${custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small)}`]: {
             '.ss__search-horizontal__main-section': {
                 '.ss__toolbar': {
                     '.ss__layout__sidebar-toggle-button-wrapper': {
@@ -61,7 +46,7 @@ var searchHorizontalStyleScript = function (props) {
                 },
             },
         },
-        _a["".concat(custom_1.custom.utils.getBp(mobileBp))] = {
+        [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
             '.ss__search-horizontal__main-section': {
                 '.ss__toolbar': {
                     '.ss__layout__row': {
@@ -72,16 +57,39 @@ var searchHorizontalStyleScript = function (props) {
                 },
             },
         },
-        _a));
+    });
     return searchHorizontalStyles;
 };
 exports.searchHorizontal = {
-    default: __assign(__assign({}, searchHorizontal_1.searchHorizontalThemeComponentProps.default), { searchHorizontal: __assign(__assign({}, (((_a = searchHorizontal_1.searchHorizontalThemeComponentProps.default) === null || _a === void 0 ? void 0 : _a['searchHorizontal']) || {})), { themeStyleScript: searchHorizontalStyleScript }), 'searchHorizontal results': {
+    default: {
+        ...searchHorizontal_1.searchHorizontalThemeComponentProps.default,
+        searchHorizontal: {
+            ...(searchHorizontal_1.searchHorizontalThemeComponentProps.default?.['searchHorizontal'] || {}),
+            themeStyleScript: searchHorizontalStyleScript,
+        },
+        'searchHorizontal results': {
             columns: 5,
-        } }),
-    mobile: __assign(__assign({}, searchHorizontal_1.searchHorizontalThemeComponentProps.mobile), { searchHorizontal: __assign({}, (((_b = searchHorizontal_1.searchHorizontalThemeComponentProps.mobile) === null || _b === void 0 ? void 0 : _b['searchHorizontal']) || {})) }),
-    tablet: __assign(__assign({}, searchHorizontal_1.searchHorizontalThemeComponentProps.tablet), { searchHorizontal: __assign({}, (((_c = searchHorizontal_1.searchHorizontalThemeComponentProps.tablet) === null || _c === void 0 ? void 0 : _c['searchHorizontal']) || {})) }),
-    desktop: __assign(__assign({}, searchHorizontal_1.searchHorizontalThemeComponentProps.desktop), { searchHorizontal: __assign({}, (((_d = searchHorizontal_1.searchHorizontalThemeComponentProps.desktop) === null || _d === void 0 ? void 0 : _d['searchHorizontal']) || {})), 'searchHorizontal results': {
+        },
+    },
+    mobile: {
+        ...searchHorizontal_1.searchHorizontalThemeComponentProps.mobile,
+        searchHorizontal: {
+            ...(searchHorizontal_1.searchHorizontalThemeComponentProps.mobile?.['searchHorizontal'] || {}),
+        },
+    },
+    tablet: {
+        ...searchHorizontal_1.searchHorizontalThemeComponentProps.tablet,
+        searchHorizontal: {
+            ...(searchHorizontal_1.searchHorizontalThemeComponentProps.tablet?.['searchHorizontal'] || {}),
+        },
+    },
+    desktop: {
+        ...searchHorizontal_1.searchHorizontalThemeComponentProps.desktop,
+        searchHorizontal: {
+            ...(searchHorizontal_1.searchHorizontalThemeComponentProps.desktop?.['searchHorizontal'] || {}),
+        },
+        'searchHorizontal results': {
             columns: 4,
-        } }),
+        },
+    },
 };

package/dist/cjs/components/src/themes/pike/custom.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.custom = void 0;
-var colord_1 = require("colord");
+const colord_1 = require("colord");
 // calculate spacing
-var spacing = 5;
-var spacingCalc = function (value) {
+const spacing = 5;
+const spacingCalc = (value) => {
     return spacing * value;
 };
 // custom theme object
@@ -78,17 +67,16 @@ exports.custom = {
         x8: spacingCalc(8),
     },
     styles: {
-        activeText: function (color) {
-            var _a;
+        activeText: (color) => {
             // active text styles
             return {
                 '&, &:hover': {
-                    fontWeight: (_a = exports.custom === null || exports.custom === void 0 ? void 0 : exports.custom.fonts) === null || _a === void 0 ? void 0 : _a.weight01,
+                    fontWeight: exports.custom?.fonts?.weight01,
                     color: color || undefined,
                 },
             };
         },
-        badgeText: function (fontSize) {
+        badgeText: (fontSize) => {
             // badge text styles
             return {
                 display: 'block',
@@ -96,7 +84,7 @@ exports.custom = {
                 lineHeight: 1.2,
             };
         },
-        baseText: function (color) {
+        baseText: (color) => {
             // header text styles
             return {
                 fontSize: '14px',
@@ -104,16 +92,16 @@ exports.custom = {
                 color: color || undefined,
             };
         },
-        borderRadius: function (value, unit) {
-            var hasValue = value || value === 0 ? true : false;
+        borderRadius: (value, unit) => {
+            const hasValue = value || value === 0 ? true : false;
             value = hasValue ? value : exports.custom.sizes.radius;
             unit = unit ? unit : value === 0 ? '' : 'px';
             // sets border radius
             return {
-                borderRadius: hasValue || exports.custom.sizes.radius ? "".concat(value).concat(unit) : "",
+                borderRadius: hasValue || exports.custom.sizes.radius ? `${value}${unit}` : ``,
             };
         },
-        box: function (color, padding, radius) {
+        box: (color, padding, radius) => {
             // styles for box designs
             // define padding value
             if (padding) {
@@ -123,15 +111,21 @@ exports.custom = {
                 padding = '';
             }
             else {
-                padding = "".concat(exports.custom.spacing.x2, "px");
+                padding = `${exports.custom.spacing.x2}px`;
             }
             // check if radius setting is available
-            var hasRadius = typeof radius == 'boolean' ? radius : true;
+            const hasRadius = typeof radius == 'boolean' ? radius : true;
             // radius style if available
-            var radiusStyle = hasRadius && exports.custom.sizes.radius ? exports.custom.styles.borderRadius() : null;
-            return __assign(__assign({ border: "1px solid ".concat(exports.custom.colors.gray02) }, radiusStyle), { backgroundColor: exports.custom.colors.gray01, color: color || undefined, padding: padding });
+            const radiusStyle = hasRadius && exports.custom.sizes.radius ? exports.custom.styles.borderRadius() : null;
+            return {
+                border: `1px solid ${exports.custom.colors.gray02}`,
+                ...radiusStyle,
+                backgroundColor: exports.custom.colors.gray01,
+                color: color || undefined,
+                padding: padding,
+            };
         },
-        disabled: function () {
+        disabled: () => {
             // disabled styles
             return {
                 '&': {
@@ -144,29 +138,28 @@ exports.custom = {
                 },
             };
         },
-        headerText: function (color, fontSize) {
-            var _a, _b;
+        headerText: (color, fontSize) => {
             // header text styles
             return {
                 fontSize: fontSize ? fontSize : '',
-                fontWeight: (_a = exports.custom === null || exports.custom === void 0 ? void 0 : exports.custom.fonts) === null || _a === void 0 ? void 0 : _a.weight02,
-                textTransform: (_b = exports.custom === null || exports.custom === void 0 ? void 0 : exports.custom.fonts) === null || _b === void 0 ? void 0 : _b.transform,
+                fontWeight: exports.custom?.fonts?.weight02,
+                textTransform: exports.custom?.fonts?.transform,
                 color: color || undefined,
             };
         },
-        resultCompact: function (layout, imageWidth, fontSize) {
+        resultCompact: (layout, imageWidth, fontSize) => {
             layout = (layout && layout == 'grid') || layout == 'list' ? layout : 'list';
             fontSize = fontSize ? fontSize : 14;
             // shared styles
-            var sharedStyles = {
+            const sharedStyles = {
                 '&': {
-                    gap: "".concat(exports.custom.spacing.x1, "px"),
+                    gap: `${exports.custom.spacing.x1}px`,
                 },
                 '.ss__result__details__title a, .ss__result__details__pricing .ss__price, .ss__result__details__pricing .ss__price span': {
-                    fontSize: "".concat(fontSize, "px"),
+                    fontSize: `${fontSize}px`,
                 },
                 '.ss__result__details__pricing .ss__result__price': {
-                    fontSize: "".concat(fontSize + 2, "px"),
+                    fontSize: `${fontSize + 2}px`,
                 },
                 '.ss__result__details__title a': {
                     display: '-webkit-box',
@@ -179,26 +172,32 @@ exports.custom = {
                 },
             };
             // compact grid styles
-            var gridStyles = {
-                '.ss__result__details': __assign({}, sharedStyles),
+            const gridStyles = {
+                '.ss__result__details': {
+                    ...sharedStyles,
+                },
             };
             // compact list styles
-            var listStyles = {
+            const listStyles = {
                 '&': {
-                    gap: "".concat(exports.custom.spacing.x2, "px"),
+                    gap: `${exports.custom.spacing.x2}px`,
                 },
                 '.ss__result__image-wrapper': {
                     flex: imageWidth ? imageWidth : '',
                 },
-                '.ss__result__details': __assign(__assign({ '.ss__result__details__title, .ss__result__details__pricing': {
+                '.ss__result__details': {
+                    '.ss__result__details__title, .ss__result__details__pricing': {
                         flex: '1 1 100%',
-                    } }, sharedStyles), { '.ss__result__details__variant-selection .ss__variant-selection': {
+                    },
+                    ...sharedStyles,
+                    '.ss__result__details__variant-selection .ss__variant-selection': {
                         width: '100%',
-                    } }),
+                    },
+                },
             };
             return layout == 'grid' ? gridStyles : listStyles;
         },
-        scrollbar: function () {
+        scrollbar: () => {
             // scrollbar styles
             return {
                 '&::-webkit-scrollbar': {
@@ -213,7 +212,7 @@ exports.custom = {
                 },
             };
         },
-        srOnly: function () {
+        srOnly: () => {
             // screen reader only styles
             return {
                 position: 'absolute',
@@ -225,7 +224,7 @@ exports.custom = {
                 clip: 'rect(0, 0, 0, 0)',
             };
         },
-        textOverflow: function () {
+        textOverflow: () => {
             // text overflow styles
             return {
                 overflow: 'hidden',
@@ -235,31 +234,31 @@ exports.custom = {
         },
     },
     utils: {
-        activeColors: function (color) {
+        activeColors: (color) => {
             // get active color and related font color
-            var whiteColor = (0, colord_1.colord)(exports.custom.colors.white);
-            var blackColor = (0, colord_1.colord)(exports.custom.colors.black);
-            var activeColor = (0, colord_1.colord)(color);
-            var accentColor = activeColor.isDark() || activeColor.toHex().toLowerCase() == exports.custom.colors.primary ? whiteColor : blackColor;
+            const whiteColor = (0, colord_1.colord)(exports.custom.colors.white);
+            const blackColor = (0, colord_1.colord)(exports.custom.colors.black);
+            const activeColor = (0, colord_1.colord)(color);
+            const accentColor = activeColor.isDark() || activeColor.toHex().toLowerCase() == exports.custom.colors.primary ? whiteColor : blackColor;
             return [activeColor.toHex().toLowerCase(), accentColor.toHex().toLowerCase()];
         },
-        darkenColor: function (color, amount) {
+        darkenColor: (color, amount) => {
             // darken a color
             amount = amount ? amount : 0.075;
             color = color ? color : exports.custom.colors.gray02;
-            var darkColor = (0, colord_1.colord)(color).darken(amount).toHex().toLowerCase();
+            const darkColor = (0, colord_1.colord)(color).darken(amount).toHex().toLowerCase();
             return darkColor;
         },
-        getBp: function (bp, rule) {
+        getBp: (bp, rule) => {
             // get breakpoint selector
             rule = rule && (rule == 'min' || rule == 'max') ? rule : 'min';
-            return "@media (".concat(rule, "-width: ").concat(rule == 'min' ? bp + 1 : bp, "px)");
+            return `@media (${rule}-width: ${rule == 'min' ? bp + 1 : bp}px)`;
         },
-        lightenColor: function (color, amount) {
+        lightenColor: (color, amount) => {
             // lighten a color
             amount = amount ? amount : 0.42;
             color = color ? color : exports.custom.colors.text;
-            var lightColor = (0, colord_1.colord)(color).lighten(amount).toHex().toLowerCase();
+            const lightColor = (0, colord_1.colord)(color).lighten(amount).toHex().toLowerCase();
             return lightColor;
         },
     },

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.globalStyle = void 0;
 // Global styles injected at the `.ss__theme__pike` scope.
 // Use this for styling that should apply broadly rather than configuring each component individually.
-var globalStyle = function (_a) { return ({
+const globalStyle = ({}) => ({
     '&, *, *:before, *:after': {
         boxSizing: 'border-box',
     },
-}); };
+});
 exports.globalStyle = globalStyle;

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

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pike = void 0;
-var components_1 = require("./components");
-var responsive_1 = require("./responsive");
-var custom_1 = require("./custom");
-var globalStyle_1 = require("./globalStyle");
-var pikeVariables = {
+const components_1 = require("./components");
+const responsive_1 = require("./responsive");
+const custom_1 = require("./custom");
+const globalStyle_1 = require("./globalStyle");
+const pikeVariables = {
     breakpoints: {
         mobile: custom_1.custom.breakpoints.mobile,
         tablet: custom_1.custom.breakpoints.tablet,

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.responsive = void 0;
-var components_1 = require("./components");
+const components_1 = require("./components");
 exports.responsive = {
     mobile: components_1.mobileComponents,
     tablet: components_1.tabletComponents,

package/dist/cjs/components/src/themes/snapnco/components/atoms/button.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.button = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Button component
-var buttonStyleScript = function (_a) {
+const buttonStyleScript = ({}) => {
     return (0, react_1.css)({
         backgroundColor: '#fff',
         borderRadius: '.5em',
         padding: '13px 15px',
         color: '#5c5c5c',
-        border: "1px solid #e6e6e6",
+        border: `1px solid #e6e6e6`,
         '.ss__icon': {
             fill: '#5C5C5C',
             stroke: '#5C5C5C',

package/dist/cjs/components/src/themes/snapnco/components/atoms/dropdown.js

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dropdown = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Dropdown component
-var dropdownStyleScript = function (_a) {
-    var theme = _a.theme;
+const dropdownStyleScript = ({ theme }) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+    const variables = theme?.variables;
     return (0, react_1.css)({
         position: 'relative',
         '&.ss__dropdown--open': {
             '& .ss__dropdown__content': {
-                transition: "opacity .5s ease",
+                transition: `opacity .5s ease`,
             },
         },
     });