@athoscommerce/snap-preact 1.9.1 → 1.10.0

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

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.icon = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Icon component
-var iconStyleScript = function (_a) {
-    var _b, _c;
-    var color = _a.color, height = _a.height, width = _a.width, size = _a.size, theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+const iconStyleScript = ({ color, height, width, size, theme }) => {
+    const variables = theme?.variables;
     return (0, react_1.css)({
-        fill: color || ((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.accent),
-        stroke: color || ((_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.accent),
+        fill: color || variables?.colors?.accent,
+        stroke: color || variables?.colors?.accent,
         width: width || size,
         height: height || size,
     });

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.image = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Image component
-var imageStyleScript = function (_a) {
-    var theme = _a.theme;
+const imageStyleScript = ({ 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)({
         borderRadius: '20px',
         overflow: 'hidden',

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

@@ -1,29 +1,53 @@
 "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.atoms = void 0;
 // ATOMS Imports
-var button_1 = require("./button");
-var dropdown_1 = require("./dropdown");
-var icon_1 = require("./icon");
-var image_1 = require("./image");
-var loadingBar_1 = require("./loadingBar");
-var price_1 = require("./price");
-var searchHeader_1 = require("./searchHeader");
-var skeleton_1 = require("./skeleton");
+const button_1 = require("./button");
+const dropdown_1 = require("./dropdown");
+const icon_1 = require("./icon");
+const image_1 = require("./image");
+const loadingBar_1 = require("./loadingBar");
+const price_1 = require("./price");
+const searchHeader_1 = require("./searchHeader");
+const skeleton_1 = require("./skeleton");
 exports.atoms = {
-    default: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, button_1.button.default), dropdown_1.dropdown.default), icon_1.icon.default), image_1.image.default), loadingBar_1.loadingBar.default), price_1.price.default), searchHeader_1.searchHeader.default), skeleton_1.skeleton.default),
-    mobile: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, button_1.button.mobile), dropdown_1.dropdown.mobile), icon_1.icon.mobile), image_1.image.mobile), loadingBar_1.loadingBar.mobile), price_1.price.mobile), searchHeader_1.searchHeader.mobile), skeleton_1.skeleton.mobile),
-    tablet: __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, dropdown_1.dropdown.tablet), icon_1.icon.tablet), image_1.image.tablet), loadingBar_1.loadingBar.tablet), price_1.price.tablet), searchHeader_1.searchHeader.tablet), skeleton_1.skeleton.tablet),
-    desktop: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, button_1.button.desktop), dropdown_1.dropdown.desktop), icon_1.icon.desktop), image_1.image.desktop), loadingBar_1.loadingBar.desktop), price_1.price.desktop), searchHeader_1.searchHeader.desktop), skeleton_1.skeleton.desktop),
+    default: {
+        ...button_1.button.default,
+        ...dropdown_1.dropdown.default,
+        ...icon_1.icon.default,
+        ...image_1.image.default,
+        ...loadingBar_1.loadingBar.default,
+        ...price_1.price.default,
+        ...searchHeader_1.searchHeader.default,
+        ...skeleton_1.skeleton.default,
+    },
+    mobile: {
+        ...button_1.button.mobile,
+        ...dropdown_1.dropdown.mobile,
+        ...icon_1.icon.mobile,
+        ...image_1.image.mobile,
+        ...loadingBar_1.loadingBar.mobile,
+        ...price_1.price.mobile,
+        ...searchHeader_1.searchHeader.mobile,
+        ...skeleton_1.skeleton.mobile,
+    },
+    tablet: {
+        ...dropdown_1.dropdown.tablet,
+        ...icon_1.icon.tablet,
+        ...image_1.image.tablet,
+        ...loadingBar_1.loadingBar.tablet,
+        ...price_1.price.tablet,
+        ...searchHeader_1.searchHeader.tablet,
+        ...skeleton_1.skeleton.tablet,
+    },
+    desktop: {
+        ...button_1.button.desktop,
+        ...dropdown_1.dropdown.desktop,
+        ...icon_1.icon.desktop,
+        ...image_1.image.desktop,
+        ...loadingBar_1.loadingBar.desktop,
+        ...price_1.price.desktop,
+        ...searchHeader_1.searchHeader.desktop,
+        ...skeleton_1.skeleton.desktop,
+    },
 };

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

@@ -1,16 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadingBar = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the LoadingBar component
-var loadingBarStyleScript = function (_a) {
-    var _b;
-    var color = _a.color, backgroundColor = _a.backgroundColor, theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+const loadingBarStyleScript = ({ color, backgroundColor, theme }) => {
+    const variables = theme?.variables;
     return (0, react_1.css)({
         background: backgroundColor || '#f8f8f8',
         '& .ss__loading-bar__bar': {
-            background: "".concat(color || ((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.accent) || '#ccc'),
+            background: `${color || variables?.colors?.accent || '#ccc'}`,
         },
     });
 };

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.paginationInfo = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Pagination component
-var paginationInfoStyleScript = function (_a) {
-    var theme = _a.theme;
+const paginationInfoStyleScript = ({ 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)({
         color: '#666666',
     });
@@ -16,7 +15,7 @@ exports.paginationInfo = {
     default: {
         paginationInfo: {
             themeStyleScript: paginationInfoStyleScript,
-            infoText: function (data) { var _a, _b, _c; return "Showing ".concat((_a = data.pagination) === null || _a === void 0 ? void 0 : _a.begin, "-").concat((_b = data.pagination) === null || _b === void 0 ? void 0 : _b.end, " of ").concat((_c = data.pagination) === null || _c === void 0 ? void 0 : _c.totalResults, " Products"); },
+            infoText: (data) => `Showing ${data.pagination?.begin}-${data.pagination?.end} of ${data.pagination?.totalResults} Products`,
         },
     },
 };

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

@@ -1,16 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.price = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Price component
-var priceStyleScript = function (_a) {
-    var _b;
-    var theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+const priceStyleScript = ({ theme }) => {
+    const variables = theme?.variables;
     return (0, react_1.css)({
         margin: '0',
         '&.ss__price--strike': {
-            color: ((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.secondary) || 'inherit',
+            color: variables?.colors?.secondary || 'inherit',
             opacity: 0.5,
         },
     });

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

@@ -1,23 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.searchHeader = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the SearchHeader component
-var searchHeaderStyleScript = function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+const searchHeaderStyleScript = ({ theme }) => {
+    const variables = theme?.variables;
     return (0, react_1.css)({
         paddingBottom: '10px',
         '.ss__search-header__title': {
-            color: (_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.primary,
+            color: variables?.colors?.primary,
             marginBottom: '0px',
             marginTop: '0px',
             fontWeight: 'initial',
             fontSize: '25px',
         },
         '.ss__search-header__title--corrected': {
-            color: (_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.secondary,
+            color: variables?.colors?.secondary,
         },
     });
 };
@@ -26,7 +24,7 @@ exports.searchHeader = {
     default: {
         searchHeader: {
             themeStyleScript: searchHeaderStyleScript,
-            titleText: function (data) { var _a, _b, _c, _d; return "Search Results" + (((_b = (_a = data.search) === null || _a === void 0 ? void 0 : _a.query) === null || _b === void 0 ? void 0 : _b.string) ? " for ".concat((_d = (_c = data.search) === null || _c === void 0 ? void 0 : _c.query) === null || _d === void 0 ? void 0 : _d.string) : ""); },
+            titleText: (data) => `Search Results` + (data.search?.query?.string ? ` for ${data.search?.query?.string}` : ``),
         },
     },
 };

package/dist/cjs/components/src/themes/snapnco/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/snapnco/components/molecules/carousel.js

@@ -1,19 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.carousel = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Carousel component
-var carouselStyleScript = function (_a) {
-    var _b;
-    var theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+const carouselStyleScript = ({ theme }) => {
+    const variables = theme?.variables;
     return (0, react_1.css)({
         '.swiper-pagination-bullet': {
             background: '#ccc',
             opacity: '.5',
             '&.swiper-pagination-bullet-active': {
                 opacity: '1',
-                background: ((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.accent) || '#3A23AD',
+                background: variables?.colors?.accent || '#3A23AD',
             },
         },
     });

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

@@ -1,17 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkbox = void 0;
-var react_1 = require("@emotion/react");
-var colord_1 = require("colord");
+const react_1 = require("@emotion/react");
+const colord_1 = require("colord");
 // CSS in JS style script for the Checkbox component
-var checkboxStyleScript = function (_a) {
-    var _b;
-    var color = _a.color, theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
-    var backgroundColorObj = (0, colord_1.colord)(color || ((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#000');
-    var backgroundTextColorObj = backgroundColorObj.isDark() ? (0, colord_1.colord)('#fff') : (0, colord_1.colord)('#000');
+const checkboxStyleScript = ({ color, theme }) => {
+    const variables = theme?.variables;
+    const backgroundColorObj = (0, colord_1.colord)(color || variables?.colors?.primary || '#000');
+    const backgroundTextColorObj = backgroundColorObj.isDark() ? (0, colord_1.colord)('#fff') : (0, colord_1.colord)('#000');
     return (0, react_1.css)({
-        border: "2px solid ".concat(backgroundColorObj.toHex()),
+        border: `2px solid ${backgroundColorObj.toHex()}`,
         borderRadius: '3px',
         '&.ss__checkbox--active': {
             backgroundColor: backgroundColorObj.toHex(),

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

@@ -1,18 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.facetGridOptions = void 0;
-var react_1 = require("@emotion/react");
-var colord_1 = require("colord");
+const react_1 = require("@emotion/react");
+const colord_1 = require("colord");
 // CSS in JS style script for the FacetGridOptions component
-var facetGridOptionsStyleScript = function (_a) {
-    var _b;
-    var theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
-    var backgroundColorObj = (0, colord_1.colord)(((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.primary) || '#000');
-    var colorObj = backgroundColorObj.isDark() ? (0, colord_1.colord)('#fff') : (0, colord_1.colord)('#000');
+const facetGridOptionsStyleScript = ({ theme }) => {
+    const variables = theme?.variables;
+    const backgroundColorObj = (0, colord_1.colord)(variables?.colors?.primary || '#000');
+    const colorObj = backgroundColorObj.isDark() ? (0, colord_1.colord)('#fff') : (0, colord_1.colord)('#000');
     return (0, react_1.css)({
         '& .ss__facet-grid-options__option': {
-            border: "1px solid ".concat(backgroundColorObj.toHex()),
+            border: `1px solid ${backgroundColorObj.toHex()}`,
             borderRadius: '3px',
             '&.ss__facet-grid-options__option--filtered': {
                 background: backgroundColorObj.toHex(),

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

@@ -1,26 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.facetHierarchyOptions = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the FacetHierarchyOptions component
-var facetHierarchyOptionsStyleScript = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
-    var horizontal = _a.horizontal, theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+const facetHierarchyOptionsStyleScript = ({ horizontal, theme }) => {
+    const variables = theme?.variables;
     if (horizontal) {
         return (0, react_1.css)({
             '.ss__facet-hierarchy-options__option': {
-                color: (_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.secondary,
-                border: "1px solid ".concat(((_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.secondary) || '#333'),
+                color: variables?.colors?.secondary,
+                border: `1px solid ${variables?.colors?.secondary || '#333'}`,
                 padding: '0.5em 0.5em',
                 '&.ss__facet-hierarchy-options__option--filtered': {
                     fontWeight: 'bold',
-                    color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.primary,
+                    color: theme?.variables?.colors?.primary,
                     marginRight: '2em',
                 },
                 '&.ss__facet-hierarchy-options__option--return': {
                     '&:before': {
-                        color: (_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.accent,
+                        color: variables?.colors?.accent,
                     },
                 },
             },
@@ -28,10 +26,10 @@ var facetHierarchyOptionsStyleScript = function (_a) {
     }
     return (0, react_1.css)({
         '.ss__facet-hierarchy-options__option': {
-            color: (_g = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _g === void 0 ? void 0 : _g.secondary,
+            color: variables?.colors?.secondary,
             '&.ss__facet-hierarchy-options__option--return': {
                 '&:before': {
-                    color: (_h = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _h === void 0 ? void 0 : _h.accent,
+                    color: variables?.colors?.accent,
                 },
             },
         },

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

@@ -1,17 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.facetListOptions = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the FacetListOptions component
-var facetListOptionsStyleScript = function (_a) {
-    var _b, _c, _d;
-    var horizontal = _a.horizontal, theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+const facetListOptionsStyleScript = ({ horizontal, theme }) => {
+    const variables = theme?.variables;
     return (0, react_1.css)({
         '& .ss__facet-list-options__option': {
             margin: horizontal ? '0 5px 5px 0' : '0 0 5px 0',
-            color: (_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.secondary,
-            border: horizontal ? "1px solid ".concat(((_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.secondary) || '#333') : undefined,
+            color: variables?.colors?.secondary,
+            border: horizontal ? `1px solid ${variables?.colors?.secondary || '#333'}` : undefined,
             padding: horizontal ? '0.5em 0.5em' : undefined,
             textDecoration: 'none',
             '&:hover': {
@@ -19,7 +17,7 @@ var facetListOptionsStyleScript = function (_a) {
             },
             '&.ss__facet-list-options__option--filtered': {
                 fontWeight: 'initial',
-                color: (_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.secondary,
+                color: variables?.colors?.secondary,
             },
             '& .ss__facet-list-options__option__value': {
                 '& .ss__facet-list-options__option__value__count': {

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.facetPaletteOptions = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the FacetPaletteOptions component
-var facetPaletteStyleScript = function (_a) {
+const facetPaletteStyleScript = ({}) => {
     return (0, react_1.css)({
         '.ss__facet-palette-options__option': {
             '&:hover': {

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

@@ -1,15 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.facetSlider = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the FacetSlider component
-var facetSliderStyleScript = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var railColor = _a.railColor, trackColor = _a.trackColor, handleColor = _a.handleColor, valueTextColor = _a.valueTextColor, handleDraggingColor = _a.handleDraggingColor, showTicks = _a.showTicks, stickyHandleLabel = _a.stickyHandleLabel, theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+const facetSliderStyleScript = ({ railColor, trackColor, handleColor, valueTextColor, handleDraggingColor, showTicks, stickyHandleLabel, theme, }) => {
+    const variables = theme?.variables;
     return (0, react_1.css)({
         marginBottom: showTicks && stickyHandleLabel ? '22px' : showTicks || stickyHandleLabel ? '10px' : '5px',
-        color: (_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.secondary,
+        color: variables?.colors?.secondary,
         '& .ss__facet-slider__slider': {
             height: '5px',
             top: '0px',
@@ -17,7 +15,7 @@ var facetSliderStyleScript = function (_a) {
             marginBottom: '30px',
         },
         '& .ss__facet-slider__rail': {
-            background: railColor || ((_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.secondary) || '#333',
+            background: railColor || variables?.colors?.secondary || '#333',
         },
         '& .ss__facet-slider__segment': {
             background: trackColor || '#f2f2f2',
@@ -26,10 +24,10 @@ var facetSliderStyleScript = function (_a) {
         '& .ss__facet-slider__handles': {
             '& button': {
                 '& .ss__facet-slider__handle': {
-                    background: handleColor || ((_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.secondary) || '#333',
-                    color: valueTextColor || ((_e = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _e === void 0 ? void 0 : _e.secondary) || 'initial',
+                    background: handleColor || variables?.colors?.secondary || '#333',
+                    color: valueTextColor || variables?.colors?.secondary || 'initial',
                     '&.ss__facet-slider__handle--active': {
-                        background: handleDraggingColor || handleColor || ((_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.secondary) || '#000',
+                        background: handleDraggingColor || handleColor || variables?.colors?.secondary || '#000',
                     },
                 },
                 '& .ss__facet-slider__handle:after': {
@@ -42,7 +40,7 @@ var facetSliderStyleScript = function (_a) {
             },
         },
         '& .ss__facet-slider__labels': {
-            color: ((_g = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _g === void 0 ? void 0 : _g.secondary) || valueTextColor,
+            color: variables?.colors?.secondary || valueTextColor,
         },
     });
 };

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.filter = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Filter component
-var filterStyleScript = function (_a) {
-    var theme = _a.theme;
+const filterStyleScript = ({ 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)({
         '& .ss__filter__button': {
             backgroundColor: 'white',

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

@@ -1,16 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.grid = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Grid component
-var gridStyleScript = function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
+const gridStyleScript = ({ theme }) => {
     return (0, react_1.css)({
         '.ss__grid__options': {
             '.ss__grid__option': {
                 '&.ss__grid__option--selected': {
-                    border: "3px solid ".concat(((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#333'),
+                    border: `3px solid ${theme?.variables?.colors?.primary || '#333'}`,
                     fontWeight: 'bold',
                 },
             },