@athoscommerce/snap-preact 1.9.0 → 1.10.0

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

@@ -1,48 +1,149 @@
 "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.molecules = void 0;
 // MOLECULES Imports
-var carousel_1 = require("./carousel");
-var checkbox_1 = require("./checkbox");
-var errorHandler_1 = require("./errorHandler");
-var facetGridOptions_1 = require("./facetGridOptions");
-var facetHierarchyOptions_1 = require("./facetHierarchyOptions");
-var facetListOptions_1 = require("./facetListOptions");
-var facetPaletteOptions_1 = require("./facetPaletteOptions");
-var facetSlider_1 = require("./facetSlider");
-var filter_1 = require("./filter");
-var grid_1 = require("./grid");
-var layoutSelector_1 = require("./layoutSelector");
-var list_1 = require("./list");
-var loadMore_1 = require("./loadMore");
-var overlayBadge_1 = require("./overlayBadge");
-var pagination_1 = require("./pagination");
-var radio_1 = require("./radio");
-var radioList_1 = require("./radioList");
-var result_1 = require("./result");
-var searchInput_1 = require("./searchInput");
-var select_1 = require("./select");
-var slideout_1 = require("./slideout");
-var perPage_1 = require("./perPage");
-var rating_1 = require("./rating");
-var sortBy_1 = require("./sortBy");
-var swatches_1 = require("./swatches");
-var variantSelection_1 = require("./variantSelection");
-var terms_1 = require("./terms");
+const carousel_1 = require("./carousel");
+const checkbox_1 = require("./checkbox");
+const errorHandler_1 = require("./errorHandler");
+const facetGridOptions_1 = require("./facetGridOptions");
+const facetHierarchyOptions_1 = require("./facetHierarchyOptions");
+const facetListOptions_1 = require("./facetListOptions");
+const facetPaletteOptions_1 = require("./facetPaletteOptions");
+const facetSlider_1 = require("./facetSlider");
+const filter_1 = require("./filter");
+const grid_1 = require("./grid");
+const layoutSelector_1 = require("./layoutSelector");
+const list_1 = require("./list");
+const loadMore_1 = require("./loadMore");
+const overlayBadge_1 = require("./overlayBadge");
+const pagination_1 = require("./pagination");
+const radio_1 = require("./radio");
+const radioList_1 = require("./radioList");
+const result_1 = require("./result");
+const searchInput_1 = require("./searchInput");
+const select_1 = require("./select");
+const slideout_1 = require("./slideout");
+const perPage_1 = require("./perPage");
+const rating_1 = require("./rating");
+const sortBy_1 = require("./sortBy");
+const swatches_1 = require("./swatches");
+const variantSelection_1 = require("./variantSelection");
+const terms_1 = require("./terms");
 exports.molecules = {
-    default: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, carousel_1.carousel.default), checkbox_1.checkbox.default), errorHandler_1.errorHandler.default), facetGridOptions_1.facetGridOptions.default), facetHierarchyOptions_1.facetHierarchyOptions.default), facetListOptions_1.facetListOptions.default), facetPaletteOptions_1.facetPaletteOptions.default), facetSlider_1.facetSlider.default), filter_1.filter.default), grid_1.grid.default), layoutSelector_1.layoutSelector.default), list_1.list.default), loadMore_1.loadMore.default), overlayBadge_1.overlayBadge.default), pagination_1.pagination.default), radio_1.radio.default), radioList_1.radioList.default), result_1.result.default), searchInput_1.searchInput.default), select_1.select.default), slideout_1.slideout.default), perPage_1.perPage.default), rating_1.rating.default), sortBy_1.sortBy.default), swatches_1.swatches.default), variantSelection_1.variantSelection.default), terms_1.terms.default),
-    mobile: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, carousel_1.carousel.mobile), checkbox_1.checkbox.mobile), errorHandler_1.errorHandler.mobile), facetGridOptions_1.facetGridOptions.mobile), facetHierarchyOptions_1.facetHierarchyOptions.mobile), facetListOptions_1.facetListOptions.mobile), facetPaletteOptions_1.facetPaletteOptions.mobile), facetSlider_1.facetSlider.mobile), filter_1.filter.mobile), grid_1.grid.mobile), layoutSelector_1.layoutSelector.mobile), list_1.list.mobile), loadMore_1.loadMore.mobile), overlayBadge_1.overlayBadge.mobile), pagination_1.pagination.mobile), radio_1.radio.mobile), radioList_1.radioList.mobile), result_1.result.mobile), searchInput_1.searchInput.mobile), select_1.select.mobile), slideout_1.slideout.mobile), perPage_1.perPage.mobile), rating_1.rating.mobile), sortBy_1.sortBy.mobile), swatches_1.swatches.mobile), variantSelection_1.variantSelection.mobile), terms_1.terms.mobile),
-    tablet: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, carousel_1.carousel.tablet), checkbox_1.checkbox.tablet), errorHandler_1.errorHandler.tablet), facetGridOptions_1.facetGridOptions.tablet), facetHierarchyOptions_1.facetHierarchyOptions.tablet), facetListOptions_1.facetListOptions.tablet), facetPaletteOptions_1.facetPaletteOptions.tablet), facetSlider_1.facetSlider.tablet), filter_1.filter.tablet), grid_1.grid.tablet), layoutSelector_1.layoutSelector.tablet), list_1.list.tablet), loadMore_1.loadMore.tablet), overlayBadge_1.overlayBadge.tablet), pagination_1.pagination.tablet), radio_1.radio.tablet), radioList_1.radioList.tablet), result_1.result.tablet), searchInput_1.searchInput.tablet), select_1.select.tablet), slideout_1.slideout.tablet), perPage_1.perPage.tablet), rating_1.rating.tablet), sortBy_1.sortBy.tablet), swatches_1.swatches.tablet), variantSelection_1.variantSelection.tablet), terms_1.terms.tablet),
-    desktop: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, carousel_1.carousel.desktop), checkbox_1.checkbox.desktop), errorHandler_1.errorHandler.desktop), facetGridOptions_1.facetGridOptions.desktop), facetHierarchyOptions_1.facetHierarchyOptions.desktop), facetListOptions_1.facetListOptions.desktop), facetPaletteOptions_1.facetPaletteOptions.desktop), facetSlider_1.facetSlider.desktop), filter_1.filter.desktop), grid_1.grid.desktop), layoutSelector_1.layoutSelector.desktop), list_1.list.desktop), loadMore_1.loadMore.desktop), overlayBadge_1.overlayBadge.desktop), pagination_1.pagination.desktop), radio_1.radio.desktop), radioList_1.radioList.desktop), result_1.result.desktop), searchInput_1.searchInput.desktop), select_1.select.desktop), slideout_1.slideout.desktop), perPage_1.perPage.desktop), rating_1.rating.desktop), sortBy_1.sortBy.desktop), swatches_1.swatches.desktop), variantSelection_1.variantSelection.desktop), terms_1.terms.desktop),
+    default: {
+        ...carousel_1.carousel.default,
+        ...checkbox_1.checkbox.default,
+        ...errorHandler_1.errorHandler.default,
+        ...facetGridOptions_1.facetGridOptions.default,
+        ...facetHierarchyOptions_1.facetHierarchyOptions.default,
+        ...facetListOptions_1.facetListOptions.default,
+        ...facetPaletteOptions_1.facetPaletteOptions.default,
+        ...facetSlider_1.facetSlider.default,
+        ...filter_1.filter.default,
+        ...grid_1.grid.default,
+        ...layoutSelector_1.layoutSelector.default,
+        ...list_1.list.default,
+        ...loadMore_1.loadMore.default,
+        ...overlayBadge_1.overlayBadge.default,
+        ...pagination_1.pagination.default,
+        ...radio_1.radio.default,
+        ...radioList_1.radioList.default,
+        ...result_1.result.default,
+        ...searchInput_1.searchInput.default,
+        ...select_1.select.default,
+        ...slideout_1.slideout.default,
+        ...perPage_1.perPage.default,
+        ...rating_1.rating.default,
+        ...sortBy_1.sortBy.default,
+        ...swatches_1.swatches.default,
+        ...variantSelection_1.variantSelection.default,
+        ...terms_1.terms.default,
+    },
+    mobile: {
+        ...carousel_1.carousel.mobile,
+        ...checkbox_1.checkbox.mobile,
+        ...errorHandler_1.errorHandler.mobile,
+        ...facetGridOptions_1.facetGridOptions.mobile,
+        ...facetHierarchyOptions_1.facetHierarchyOptions.mobile,
+        ...facetListOptions_1.facetListOptions.mobile,
+        ...facetPaletteOptions_1.facetPaletteOptions.mobile,
+        ...facetSlider_1.facetSlider.mobile,
+        ...filter_1.filter.mobile,
+        ...grid_1.grid.mobile,
+        ...layoutSelector_1.layoutSelector.mobile,
+        ...list_1.list.mobile,
+        ...loadMore_1.loadMore.mobile,
+        ...overlayBadge_1.overlayBadge.mobile,
+        ...pagination_1.pagination.mobile,
+        ...radio_1.radio.mobile,
+        ...radioList_1.radioList.mobile,
+        ...result_1.result.mobile,
+        ...searchInput_1.searchInput.mobile,
+        ...select_1.select.mobile,
+        ...slideout_1.slideout.mobile,
+        ...perPage_1.perPage.mobile,
+        ...rating_1.rating.mobile,
+        ...sortBy_1.sortBy.mobile,
+        ...swatches_1.swatches.mobile,
+        ...variantSelection_1.variantSelection.mobile,
+        ...terms_1.terms.mobile,
+    },
+    tablet: {
+        ...carousel_1.carousel.tablet,
+        ...checkbox_1.checkbox.tablet,
+        ...errorHandler_1.errorHandler.tablet,
+        ...facetGridOptions_1.facetGridOptions.tablet,
+        ...facetHierarchyOptions_1.facetHierarchyOptions.tablet,
+        ...facetListOptions_1.facetListOptions.tablet,
+        ...facetPaletteOptions_1.facetPaletteOptions.tablet,
+        ...facetSlider_1.facetSlider.tablet,
+        ...filter_1.filter.tablet,
+        ...grid_1.grid.tablet,
+        ...layoutSelector_1.layoutSelector.tablet,
+        ...list_1.list.tablet,
+        ...loadMore_1.loadMore.tablet,
+        ...overlayBadge_1.overlayBadge.tablet,
+        ...pagination_1.pagination.tablet,
+        ...radio_1.radio.tablet,
+        ...radioList_1.radioList.tablet,
+        ...result_1.result.tablet,
+        ...searchInput_1.searchInput.tablet,
+        ...select_1.select.tablet,
+        ...slideout_1.slideout.tablet,
+        ...perPage_1.perPage.tablet,
+        ...rating_1.rating.tablet,
+        ...sortBy_1.sortBy.tablet,
+        ...swatches_1.swatches.tablet,
+        ...variantSelection_1.variantSelection.tablet,
+        ...terms_1.terms.tablet,
+    },
+    desktop: {
+        ...carousel_1.carousel.desktop,
+        ...checkbox_1.checkbox.desktop,
+        ...errorHandler_1.errorHandler.desktop,
+        ...facetGridOptions_1.facetGridOptions.desktop,
+        ...facetHierarchyOptions_1.facetHierarchyOptions.desktop,
+        ...facetListOptions_1.facetListOptions.desktop,
+        ...facetPaletteOptions_1.facetPaletteOptions.desktop,
+        ...facetSlider_1.facetSlider.desktop,
+        ...filter_1.filter.desktop,
+        ...grid_1.grid.desktop,
+        ...layoutSelector_1.layoutSelector.desktop,
+        ...list_1.list.desktop,
+        ...loadMore_1.loadMore.desktop,
+        ...overlayBadge_1.overlayBadge.desktop,
+        ...pagination_1.pagination.desktop,
+        ...radio_1.radio.desktop,
+        ...radioList_1.radioList.desktop,
+        ...result_1.result.desktop,
+        ...searchInput_1.searchInput.desktop,
+        ...select_1.select.desktop,
+        ...slideout_1.slideout.desktop,
+        ...perPage_1.perPage.desktop,
+        ...rating_1.rating.desktop,
+        ...sortBy_1.sortBy.desktop,
+        ...swatches_1.swatches.desktop,
+        ...variantSelection_1.variantSelection.desktop,
+        ...terms_1.terms.desktop,
+    },
 };

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.layoutSelector = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the LayoutSelector component
-var layoutSelectorStyleScript = function (_a) {
-    var theme = _a.theme;
+const layoutSelectorStyleScript = ({ 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__button__content': {
             gap: '7px',
@@ -17,8 +16,8 @@ var layoutSelectorStyleScript = function (_a) {
             padding: '10px',
             borderRadius: '50%',
             '.ss__icon': {
-                fill: "#e6e6e6",
-                stroke: "#e6e6e6",
+                fill: `#e6e6e6`,
+                stroke: `#e6e6e6`,
             },
             '&:hover': {
                 color: 'black',

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

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

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

@@ -1,25 +1,13 @@
 "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.loadMore = 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 LoadMore component
-var loadMoreStyleScript = function (_a) {
-    var color = _a.color, backgroundColor = _a.backgroundColor, theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
-    var barColour = (0, colord_1.colord)(color || (variables === null || variables === void 0 ? void 0 : variables.colors.accent) || '#000000');
-    var backgroundColour = backgroundColor ? (0, colord_1.colord)(backgroundColor) : setLightness(barColour.toHex(), 90);
+const loadMoreStyleScript = ({ color, backgroundColor, theme }) => {
+    const variables = theme?.variables;
+    const barColour = (0, colord_1.colord)(color || variables?.colors.accent || '#000000');
+    const backgroundColour = backgroundColor ? (0, colord_1.colord)(backgroundColor) : setLightness(barColour.toHex(), 90);
     return (0, react_1.css)({
         '.ss__button': {
             '.ss__button__content': {
@@ -38,9 +26,9 @@ var loadMoreStyleScript = function (_a) {
         },
     });
 };
-var setLightness = function (colorValue, lightness) {
-    var hsl = (0, colord_1.colord)(colorValue).toHsl();
-    return (0, colord_1.colord)(__assign(__assign({}, hsl), { l: lightness }));
+const setLightness = (colorValue, lightness) => {
+    const hsl = (0, colord_1.colord)(colorValue).toHsl();
+    return (0, colord_1.colord)({ ...hsl, l: lightness });
 };
 // LoadMore component props
 exports.loadMore = {

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.overlayBadge = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Search component
-var overlayBadgeStyleScript = function (_a) {
-    var theme = _a.theme;
+const overlayBadgeStyleScript = ({ 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__overlay-badge__grid-wrapper': {
             padding: '0.5rem',

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.perPage = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the PerPage component
-var perPageStyleScript = function (_a) {
-    var theme = _a.theme;
+const perPageStyleScript = ({ 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__dropdown .ss__select__dropdown__button': {
             fontWeight: 'normal',

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.radio = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Radio component
-var radioStyleScript = function (_a) {
-    var size = _a.size, native = _a.native, color = _a.color, theme = _a.theme;
+const radioStyleScript = ({ size, native, color, 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;
     if (native) {
         return (0, react_1.css)({
             width: size,
@@ -14,16 +13,16 @@ var radioStyleScript = function (_a) {
             display: 'flex',
             justifyContent: 'center',
             '.ss__radio__input': {
-                height: "calc(".concat(size, " - 30%)"),
-                width: "calc(".concat(size, " - 30%)"),
+                height: `calc(${size} - 30%)`,
+                width: `calc(${size} - 30%)`,
                 margin: 'auto',
             },
         });
     }
     return (0, react_1.css)({
         '.ss__icon': {
-            fill: color || (variables === null || variables === void 0 ? void 0 : variables.colors.primary),
-            stroke: color || (variables === null || variables === void 0 ? void 0 : variables.colors.primary),
+            fill: color || variables?.colors.primary,
+            stroke: color || variables?.colors.primary,
         },
     });
 };

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

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

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

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.searchInput = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the SearchInput component
-var searchInputStyleScript = function (_a) {
-    var _b;
-    var theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+const searchInputStyleScript = ({ theme }) => {
+    const variables = theme?.variables;
     return (0, react_1.css)({
-        border: "1px solid ".concat(((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.secondary) || '#ccc'),
+        border: `1px solid ${variables?.colors?.secondary || '#ccc'}`,
     });
 };
 // SearchInput component props

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

@@ -1,31 +1,18 @@
 "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.select = void 0;
-var react_1 = require("@emotion/react");
-var colord_1 = require("colord");
-var setLightness = function (colorValue, lightness) {
-    var hsl = (0, colord_1.colord)(colorValue).toHsl();
-    return (0, colord_1.colord)(__assign(__assign({}, hsl), { l: lightness }));
+const react_1 = require("@emotion/react");
+const colord_1 = require("colord");
+const setLightness = (colorValue, lightness) => {
+    const hsl = (0, colord_1.colord)(colorValue).toHsl();
+    return (0, colord_1.colord)({ ...hsl, l: lightness });
 };
 // CSS in JS style script for the Select component
-var selectStyleScript = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var backgroundColor = _a.backgroundColor, theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
-    var baseSecondary = (0, colord_1.colord)(((_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.secondary) || '#000');
-    var transparentSecondary = baseSecondary.alpha(Math.min(baseSecondary.alpha() + 0.2, 1));
-    var transparentSecondaryHover = setLightness(transparentSecondary.toHex(), 95).toRgbString();
+const selectStyleScript = ({ backgroundColor, theme }) => {
+    const variables = theme?.variables;
+    const baseSecondary = (0, colord_1.colord)(theme?.variables?.colors?.secondary || '#000');
+    const transparentSecondary = baseSecondary.alpha(Math.min(baseSecondary.alpha() + 0.2, 1));
+    const transparentSecondaryHover = setLightness(transparentSecondary.toHex(), 95).toRgbString();
     return (0, react_1.css)({
         '.ss__dropdown': {
             '.ss__select__dropdown__button': {
@@ -34,10 +21,10 @@ var selectStyleScript = function (_a) {
                 fontWeight: 'bold',
                 '&:hover': {
                     backgroundColor: 'initial',
-                    color: (_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.primary,
+                    color: variables?.colors?.primary,
                     '.ss__icon': {
-                        fill: (_e = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _e === void 0 ? void 0 : _e.accent,
-                        stroke: (_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.accent,
+                        fill: variables?.colors?.accent,
+                        stroke: variables?.colors?.accent,
                     },
                 },
                 '.ss__select__dropdown__button__icon': {
@@ -73,12 +60,12 @@ var selectStyleScript = function (_a) {
                 listStyle: 'none',
                 padding: '6px 30px',
                 gap: '6px',
-                color: (_g = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _g === void 0 ? void 0 : _g.secondary,
+                color: variables?.colors?.secondary,
                 '&.ss__select__select__option--selected': {
-                    backgroundColor: transparentSecondaryHover || "rgba(109,113,117,.06)",
+                    backgroundColor: transparentSecondaryHover || `rgba(109,113,117,.06)`,
                 },
                 '&:hover': {
-                    backgroundColor: transparentSecondaryHover || "rgba(109,113,117,.06)",
+                    backgroundColor: transparentSecondaryHover || `rgba(109,113,117,.06)`,
                 },
             },
         },

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

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.slideout = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Slideout component
-var slideoutStyleScript = function (_a) {
-    var width = _a.width, slideDirection = _a.slideDirection, theme = _a.theme;
+const slideoutStyleScript = ({ width, slideDirection, 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)({
-        left: slideDirection == 'left' ? "-".concat(width) : slideDirection != 'right' ? '0' : 'initial',
-        right: slideDirection == 'right' ? "-".concat(width) : 'initial',
-        bottom: slideDirection == 'bottom' ? "-100vh" : 'initial',
-        top: slideDirection == 'top' ? "-100vh" : slideDirection == 'bottom' ? 'initial' : '0',
+        left: slideDirection == 'left' ? `-${width}` : slideDirection != 'right' ? '0' : 'initial',
+        right: slideDirection == 'right' ? `-${width}` : 'initial',
+        bottom: slideDirection == 'bottom' ? `-100vh` : 'initial',
+        top: slideDirection == 'top' ? `-100vh` : slideDirection == 'bottom' ? 'initial' : '0',
         background: '#fff',
         '&.ss__slideout--active': {
             left: slideDirection == 'left' ? '0' : slideDirection != 'right' ? '0' : 'initial',

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sortBy = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the SortBy component
-var sortByStyleScript = function () {
+const sortByStyleScript = () => {
     return (0, react_1.css)({
         '& .ss__dropdown .ss__select__dropdown__button': {
             fontWeight: 'normal',

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

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

package/dist/cjs/components/src/themes/snapnco/components/organisms/autocomplete.js

@@ -1,26 +1,20 @@
 "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;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.autocomplete = void 0;
-var react_1 = require("@emotion/react");
-var autocomplete_1 = require("../../../themeComponents/autocomplete");
+const react_1 = require("@emotion/react");
+const autocomplete_1 = require("../../../themeComponents/autocomplete");
 // CSS in JS style script for the Search component
-var autocompleteStyleScript = function (_a) {
+const autocompleteStyleScript = ({}) => {
     return (0, react_1.css)({});
 };
 exports.autocomplete = {
-    default: __assign(__assign({}, autocomplete_1.autocompleteThemeComponentProps.default), { autocomplete: __assign(__assign({}, (((_a = autocomplete_1.autocompleteThemeComponentProps.default) === null || _a === void 0 ? void 0 : _a['autocomplete']) || {})), { themeStyleScript: autocompleteStyleScript }) }),
+    default: {
+        ...autocomplete_1.autocompleteThemeComponentProps.default,
+        autocomplete: {
+            ...(autocomplete_1.autocompleteThemeComponentProps.default?.['autocomplete'] || {}),
+            themeStyleScript: autocompleteStyleScript,
+        },
+    },
     mobile: autocomplete_1.autocompleteThemeComponentProps.mobile,
     desktop: autocomplete_1.autocompleteThemeComponentProps.desktop,
     tablet: autocomplete_1.autocompleteThemeComponentProps.tablet,

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

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.facet = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Facet component
-var facetStyleScript = function (_a) {
-    var _b, _c;
-    var color = _a.color, theme = _a.theme;
-    var variables = theme === null || theme === void 0 ? void 0 : theme.variables;
+const facetStyleScript = ({ color, theme }) => {
+    const variables = theme?.variables;
     return (0, react_1.css)({
         '& .ss__facet__dropdown': {
             '& .ss__facet__dropdown__icon': {
@@ -51,13 +49,13 @@ var facetStyleScript = function (_a) {
                     background: '#f2f2f2',
                 },
                 '&::-webkit-scrollbar-thumb': {
-                    background: ((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.secondary) || '#ccc',
+                    background: variables?.colors?.secondary || '#ccc',
                 },
             },
             '& .ss__facet__show-more-less': {
                 margin: '8px 5px',
                 textAlign: 'center',
-                color: color || ((_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.secondary),
+                color: color || variables?.colors?.secondary,
                 span: {
                     borderBottom: '1px solid #d6d6d6',
                 },

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

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.facetsHorizontal = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the Facets component
-var facetsHorizontalStyleScript = function (_a) {
-    var _b;
-    var theme = _a.theme;
+const facetsHorizontalStyleScript = ({ 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)({
         paddingBottom: '10px',
         '& .ss__facets-horizontal__header': {
@@ -18,7 +16,7 @@ var facetsHorizontalStyleScript = function (_a) {
                     transition: 'transform ease .5s',
                 },
                 '& .ss__dropdown__button__heading': {
-                    color: (_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.secondary,
+                    color: variables?.colors?.secondary,
                     fontWeight: 'bold',
                 },
                 '&.ss__dropdown--open': {