@athoscommerce/snap-preact 1.9.0 → 1.10.0

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

@@ -1,80 +1,90 @@
 "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.button = 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 buttonDisabledSelectors = '&.ss__button--disabled';
+const buttonDisabledSelectors = '&.ss__button--disabled';
 // CSS in JS style script for the Button component
-var buttonStyleScript = function (props) {
-    var _a;
-    var _b, _c;
+const buttonStyleScript = (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 activeColors = custom_1.custom.utils.activeColors((props === null || props === void 0 ? void 0 : props.backgroundColor) || ((_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 borderColor = (props === null || props === void 0 ? void 0 : props.borderColor) ? props.borderColor : activeColors[0];
-    var fontColor = (props === null || props === void 0 ? void 0 : props.color) ? props.color : activeColors[1];
+    const variables = props?.theme?.variables;
+    const activeColors = custom_1.custom.utils.activeColors(props?.backgroundColor || variables?.colors?.secondary || custom_1.custom.colors.secondary);
+    const buttonColor = activeColors[0];
+    const borderColor = props?.borderColor ? props.borderColor : activeColors[0];
+    const fontColor = props?.color ? props.color : activeColors[1];
     // shared styles
-    var sharedStyles = (0, react_1.css)([
-        __assign(__assign({ cursor: 'pointer', padding: "0 ".concat(custom_1.custom.spacing.x4, "px"), justifyContent: 'center', fontSize: '14px', fontWeight: custom_1.custom.fonts.weight01, textAlign: 'center', textTransform: custom_1.custom.fonts.transform, color: fontColor, height: "".concat(custom_1.custom.sizes.height, "px"), lineHeight: "".concat(custom_1.custom.sizes.height, "px") }, custom_1.custom.styles.borderRadius()), (_a = { '&[active="true"], &:has([active="true"])': {
-                    '.ss__icon': {
-                        '&.ss__icon--filter': {
-                            transform: 'rotate(-180deg)',
-                        },
-                        '&.ss__icon--filters': {
-                            circle: {
-                                '&:last-child': {
-                                    transform: 'translateX(-35%)',
-                                },
-                                transform: 'translateX(35%)',
+    const sharedStyles = (0, react_1.css)([
+        {
+            cursor: 'pointer',
+            padding: `0 ${custom_1.custom.spacing.x4}px`,
+            justifyContent: 'center',
+            fontSize: '14px',
+            fontWeight: custom_1.custom.fonts.weight01,
+            textAlign: 'center',
+            textTransform: custom_1.custom.fonts.transform,
+            color: fontColor,
+            height: `${custom_1.custom.sizes.height}px`,
+            lineHeight: `${custom_1.custom.sizes.height}px`,
+            ...custom_1.custom.styles.borderRadius(),
+            '&[active="true"], &:has([active="true"])': {
+                '.ss__icon': {
+                    '&.ss__icon--filter': {
+                        transform: 'rotate(-180deg)',
+                    },
+                    '&.ss__icon--filters': {
+                        circle: {
+                            '&:last-child': {
+                                transform: 'translateX(-35%)',
                             },
+                            transform: 'translateX(35%)',
                         },
                     },
-                } }, _a[buttonDisabledSelectors] = __assign({}, custom_1.custom.styles.disabled()), _a['.ss__button__content'] = {
-            '&:has(span)': {
-                display: 'inline-flex',
-                flexFlow: 'row nowrap',
-                alignItems: 'center',
-                gap: "".concat(custom_1.custom.spacing.x1, "px"),
-                span: __assign({}, custom_1.custom.styles.textOverflow()),
+                },
             },
-            '&:not(:has(span))': __assign({}, custom_1.custom.styles.textOverflow()),
-            '&, *': {
-                minWidth: '1px',
+            [buttonDisabledSelectors]: {
+                ...custom_1.custom.styles.disabled(),
             },
-        }, _a["&, &:hover, &:not(.ss__button--disabled):hover, ".concat(buttonDisabledSelectors)] = {
-            border: "1px solid ".concat(borderColor),
-            backgroundColor: buttonColor,
-        }, _a['.ss__icon.ss__icon--filters'] = {
-            fill: buttonColor,
-        }, _a)),
+            '.ss__button__content': {
+                '&:has(span)': {
+                    display: 'inline-flex',
+                    flexFlow: 'row nowrap',
+                    alignItems: 'center',
+                    gap: `${custom_1.custom.spacing.x1}px`,
+                    span: {
+                        ...custom_1.custom.styles.textOverflow(),
+                    },
+                },
+                '&:not(:has(span))': {
+                    ...custom_1.custom.styles.textOverflow(),
+                },
+                '&, *': {
+                    minWidth: '1px',
+                },
+            },
+            [`&, &:hover, &:not(.ss__button--disabled):hover, ${buttonDisabledSelectors}`]: {
+                border: `1px solid ${borderColor}`,
+                backgroundColor: buttonColor,
+            },
+            '.ss__icon.ss__icon--filters': {
+                fill: buttonColor,
+            },
+        },
     ]);
     // default button styles
-    var defaultButtonStyles = sharedStyles;
+    const defaultButtonStyles = sharedStyles;
     // native button styles
-    var nativeButtonStyles = (0, react_1.css)([
+    const nativeButtonStyles = (0, react_1.css)([
         {
             display: 'inline-flex',
             alignItems: 'center',
-            gap: "".concat(custom_1.custom.spacing.x1, "px"),
+            gap: `${custom_1.custom.spacing.x1}px`,
             position: 'relative',
             outline: 0,
         },
         sharedStyles,
     ]);
-    return (props === null || props === void 0 ? void 0 : props.native) ? nativeButtonStyles : defaultButtonStyles;
+    return props?.native ? nativeButtonStyles : defaultButtonStyles;
 };
 // Button component props
 exports.button = {
@@ -83,7 +93,7 @@ exports.button = {
             themeStyleScript: buttonStyleScript,
         },
         'button icon': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
+            size: `${custom_1.custom.sizes.icon12}px`,
         },
     },
 };

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

@@ -1,54 +1,72 @@
 "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.dropdown = 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 Dropdown component
-var dropdownStyleScript = function (props) {
-    var _a, _b;
+const dropdownStyleScript = (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;
     // disabled styles
-    var disabled = (props === null || props === void 0 ? void 0 : props.disabled)
-        ? __assign({}, custom_1.custom.styles.disabled()) : {};
+    const disabled = props?.disabled
+        ? {
+            ...custom_1.custom.styles.disabled(),
+        }
+        : {};
     // dropdown styles
-    var dropdownStyles = (0, react_1.css)(__assign(__assign({ width: 'auto' }, disabled), { '&.ss__dropdown--open, &.ss__dropdown__portal--open': {
+    const dropdownStyles = (0, react_1.css)({
+        width: 'auto',
+        ...disabled,
+        '&.ss__dropdown--open, &.ss__dropdown__portal--open': {
             '.ss__dropdown__content': {
                 gridTemplateRows: '1fr',
                 transition: 'grid-template-rows 200ms ease, visibility 200ms',
             },
-        }, '&.ss__dropdown__portal': {
-            '.ss__dropdown__content': __assign(__assign({ marginTop: "".concat(custom_1.custom.spacing.x1, "px") }, custom_1.custom.styles.box()), { 'ul, ul li': {
+        },
+        '&.ss__dropdown__portal': {
+            '.ss__dropdown__content': {
+                marginTop: `${custom_1.custom.spacing.x1}px`,
+                ...custom_1.custom.styles.box(),
+                'ul, ul li': {
                     listStyle: 'none',
-                }, '.ss__select__select, .ss__variant-selection__options': {
+                },
+                '.ss__select__select, .ss__variant-selection__options': {
                     margin: 0,
                     padding: 0,
                     border: 0,
                     backgroundColor: 'transparent',
-                }, '.ss__select__select .ss__select__select__option, .ss__variant-selection__options .ss__variant-selection__option': __assign(__assign({}, custom_1.custom.styles.baseText('inherit')), { gap: "".concat(custom_1.custom.spacing.x2, "px"), padding: 0, margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"), '&:last-child': {
+                },
+                '.ss__select__select .ss__select__select__option, .ss__variant-selection__options .ss__variant-selection__option': {
+                    ...custom_1.custom.styles.baseText('inherit'),
+                    gap: `${custom_1.custom.spacing.x2}px`,
+                    padding: 0,
+                    margin: `0 0 ${custom_1.custom.spacing.x1}px 0`,
+                    '&:last-child': {
                         marginBottom: '0',
-                    }, '&:hover': {
+                    },
+                    '&:hover': {
                         backgroundColor: 'transparent',
                         fontWeight: 'normal',
-                    }, 'a, span': {
+                    },
+                    'a, span': {
                         cursor: 'pointer',
-                    } }), '.ss__select__select .ss__select__select__option--selected, .ss__variant-selection__options .ss__variant-selection__option--selected': __assign({}, custom_1.custom.styles.activeText((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.primary)), '.ss__select__select .ss__select__select__option----unavailable, .ss__select__select .ss__select__select__option--disabled, .ss__variant-selection__options .ss__variant-selection__option--unavailable, .ss__variant-selection__options .ss__variant-selection__option--disabled': __assign({ color: 'inherit' }, custom_1.custom.styles.disabled()) }),
-        }, '&.ss__dropdown--open': {
+                    },
+                },
+                '.ss__select__select .ss__select__select__option--selected, .ss__variant-selection__options .ss__variant-selection__option--selected': {
+                    ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+                },
+                '.ss__select__select .ss__select__select__option----unavailable, .ss__select__select .ss__select__select__option--disabled, .ss__variant-selection__options .ss__variant-selection__option--unavailable, .ss__variant-selection__options .ss__variant-selection__option--disabled': {
+                    color: 'inherit',
+                    ...custom_1.custom.styles.disabled(),
+                },
+            },
+        },
+        '&.ss__dropdown--open': {
             '.ss__dropdown__content': {
                 zIndex: 5,
             },
-        }, '.ss__dropdown__content': {
+        },
+        '.ss__dropdown__content': {
             minWidth: '1px',
             left: 0,
             right: 0,
@@ -59,7 +77,8 @@ var dropdownStyleScript = function (props) {
             '& > *': {
                 overflow: 'hidden',
             },
-        } }));
+        },
+    });
     return dropdownStyles;
 };
 // Dropdown component props

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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formattedNumber = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the FormattedNumber component
-var formattedNumberStyleScript = function (props) {
-    var _a;
+const formattedNumberStyleScript = (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;
     // formatted number styles
-    var formattedNumberStyles = (0, react_1.css)({});
+    const formattedNumberStyles = (0, react_1.css)({});
     return formattedNumberStyles;
 };
 // FormattedNumber component props

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

@@ -1,23 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.icon = 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 Icon component
-var iconStyleScript = function (props) {
-    var _a;
+const iconStyleScript = (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;
     // set flex size for icons that are flex children
-    var flexSize = '';
-    if (props === null || props === void 0 ? void 0 : props.width) {
-        flexSize = "0 0 ".concat(props.width);
+    let flexSize = '';
+    if (props?.width) {
+        flexSize = `0 0 ${props.width}`;
     }
-    else if (props === null || props === void 0 ? void 0 : props.size) {
-        flexSize = "0 0 ".concat(props.size);
+    else if (props?.size) {
+        flexSize = `0 0 ${props.size}`;
     }
     // icon styles
-    var iconStyles = (0, react_1.css)({
+    const iconStyles = (0, react_1.css)({
         minWidth: '1px',
         flex: flexSize,
         lineHeight: 1,
@@ -36,7 +35,7 @@ exports.icon = {
     default: {
         icon: {
             themeStyleScript: iconStyleScript,
-            size: "".concat(custom_1.custom.sizes.icon16, "px"),
+            size: `${custom_1.custom.sizes.icon16}px`,
             color: 'currentColor',
         },
     },

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

@@ -1,14 +1,13 @@
 "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 (props) {
-    var _a;
+const imageStyleScript = (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;
     // image styles
-    var imageStyles = (0, react_1.css)({
+    const imageStyles = (0, react_1.css)({
         '&, img': {
             lineHeight: 0,
         },

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

@@ -1,39 +1,104 @@
 "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 badgeImage_1 = require("./badgeImage");
-var badgePill_1 = require("./badgePill");
-var badgeRectangle_1 = require("./badgeRectangle");
-var badgeText_1 = require("./badgeText");
-var banner_1 = require("./banner");
-var breadcrumbs_1 = require("./breadcrumbs");
-var button_1 = require("./button");
-var dropdown_1 = require("./dropdown");
-var formattedNumber_1 = require("./formattedNumber");
-var icon_1 = require("./icon");
-var image_1 = require("./image");
-var inlineBanner_1 = require("./inlineBanner");
-var loadingBar_1 = require("./loadingBar");
-var overlay_1 = require("./overlay");
-var paginationInfo_1 = require("./paginationInfo");
-var price_1 = require("./price");
-var searchHeader_1 = require("./searchHeader");
-var skeleton_1 = require("./skeleton");
+const badgeImage_1 = require("./badgeImage");
+const badgePill_1 = require("./badgePill");
+const badgeRectangle_1 = require("./badgeRectangle");
+const badgeText_1 = require("./badgeText");
+const banner_1 = require("./banner");
+const breadcrumbs_1 = require("./breadcrumbs");
+const button_1 = require("./button");
+const dropdown_1 = require("./dropdown");
+const formattedNumber_1 = require("./formattedNumber");
+const icon_1 = require("./icon");
+const image_1 = require("./image");
+const inlineBanner_1 = require("./inlineBanner");
+const loadingBar_1 = require("./loadingBar");
+const overlay_1 = require("./overlay");
+const paginationInfo_1 = require("./paginationInfo");
+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(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, badgeImage_1.badgeImage.default), badgePill_1.badgePill.default), badgeRectangle_1.badgeRectangle.default), badgeText_1.badgeText.default), banner_1.banner.default), breadcrumbs_1.breadcrumbs.default), button_1.button.default), dropdown_1.dropdown.default), formattedNumber_1.formattedNumber.default), icon_1.icon.default), image_1.image.default), inlineBanner_1.inlineBanner.default), loadingBar_1.loadingBar.default), overlay_1.overlay.default), paginationInfo_1.paginationInfo.default), price_1.price.default), searchHeader_1.searchHeader.default), skeleton_1.skeleton.default),
-    mobile: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, badgeImage_1.badgeImage.mobile), badgePill_1.badgePill.mobile), badgeRectangle_1.badgeRectangle.mobile), badgeText_1.badgeText.mobile), banner_1.banner.mobile), breadcrumbs_1.breadcrumbs.mobile), button_1.button.mobile), dropdown_1.dropdown.mobile), formattedNumber_1.formattedNumber.mobile), icon_1.icon.mobile), image_1.image.mobile), inlineBanner_1.inlineBanner.mobile), loadingBar_1.loadingBar.mobile), overlay_1.overlay.mobile), paginationInfo_1.paginationInfo.mobile), price_1.price.mobile), searchHeader_1.searchHeader.mobile), skeleton_1.skeleton.mobile),
-    tablet: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, badgeImage_1.badgeImage.tablet), badgePill_1.badgePill.tablet), badgeRectangle_1.badgeRectangle.tablet), badgeText_1.badgeText.tablet), banner_1.banner.tablet), breadcrumbs_1.breadcrumbs.tablet), button_1.button.tablet), dropdown_1.dropdown.tablet), formattedNumber_1.formattedNumber.tablet), icon_1.icon.tablet), image_1.image.tablet), inlineBanner_1.inlineBanner.tablet), loadingBar_1.loadingBar.tablet), overlay_1.overlay.tablet), paginationInfo_1.paginationInfo.tablet), price_1.price.tablet), searchHeader_1.searchHeader.tablet), skeleton_1.skeleton.tablet),
-    desktop: __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, badgeImage_1.badgeImage.desktop), badgePill_1.badgePill.desktop), badgeRectangle_1.badgeRectangle.desktop), badgeText_1.badgeText.desktop), banner_1.banner.desktop), breadcrumbs_1.breadcrumbs.desktop), button_1.button.desktop), dropdown_1.dropdown.desktop), formattedNumber_1.formattedNumber.desktop), icon_1.icon.desktop), image_1.image.desktop), inlineBanner_1.inlineBanner.desktop), loadingBar_1.loadingBar.desktop), overlay_1.overlay.desktop), paginationInfo_1.paginationInfo.desktop), price_1.price.desktop), searchHeader_1.searchHeader.desktop), skeleton_1.skeleton.desktop),
+    default: {
+        ...badgeImage_1.badgeImage.default,
+        ...badgePill_1.badgePill.default,
+        ...badgeRectangle_1.badgeRectangle.default,
+        ...badgeText_1.badgeText.default,
+        ...banner_1.banner.default,
+        ...breadcrumbs_1.breadcrumbs.default,
+        ...button_1.button.default,
+        ...dropdown_1.dropdown.default,
+        ...formattedNumber_1.formattedNumber.default,
+        ...icon_1.icon.default,
+        ...image_1.image.default,
+        ...inlineBanner_1.inlineBanner.default,
+        ...loadingBar_1.loadingBar.default,
+        ...overlay_1.overlay.default,
+        ...paginationInfo_1.paginationInfo.default,
+        ...price_1.price.default,
+        ...searchHeader_1.searchHeader.default,
+        ...skeleton_1.skeleton.default,
+    },
+    mobile: {
+        ...badgeImage_1.badgeImage.mobile,
+        ...badgePill_1.badgePill.mobile,
+        ...badgeRectangle_1.badgeRectangle.mobile,
+        ...badgeText_1.badgeText.mobile,
+        ...banner_1.banner.mobile,
+        ...breadcrumbs_1.breadcrumbs.mobile,
+        ...button_1.button.mobile,
+        ...dropdown_1.dropdown.mobile,
+        ...formattedNumber_1.formattedNumber.mobile,
+        ...icon_1.icon.mobile,
+        ...image_1.image.mobile,
+        ...inlineBanner_1.inlineBanner.mobile,
+        ...loadingBar_1.loadingBar.mobile,
+        ...overlay_1.overlay.mobile,
+        ...paginationInfo_1.paginationInfo.mobile,
+        ...price_1.price.mobile,
+        ...searchHeader_1.searchHeader.mobile,
+        ...skeleton_1.skeleton.mobile,
+    },
+    tablet: {
+        ...badgeImage_1.badgeImage.tablet,
+        ...badgePill_1.badgePill.tablet,
+        ...badgeRectangle_1.badgeRectangle.tablet,
+        ...badgeText_1.badgeText.tablet,
+        ...banner_1.banner.tablet,
+        ...breadcrumbs_1.breadcrumbs.tablet,
+        ...button_1.button.tablet,
+        ...dropdown_1.dropdown.tablet,
+        ...formattedNumber_1.formattedNumber.tablet,
+        ...icon_1.icon.tablet,
+        ...image_1.image.tablet,
+        ...inlineBanner_1.inlineBanner.tablet,
+        ...loadingBar_1.loadingBar.tablet,
+        ...overlay_1.overlay.tablet,
+        ...paginationInfo_1.paginationInfo.tablet,
+        ...price_1.price.tablet,
+        ...searchHeader_1.searchHeader.tablet,
+        ...skeleton_1.skeleton.tablet,
+    },
+    desktop: {
+        ...badgeImage_1.badgeImage.desktop,
+        ...badgePill_1.badgePill.desktop,
+        ...badgeRectangle_1.badgeRectangle.desktop,
+        ...badgeText_1.badgeText.desktop,
+        ...banner_1.banner.desktop,
+        ...breadcrumbs_1.breadcrumbs.desktop,
+        ...button_1.button.desktop,
+        ...dropdown_1.dropdown.desktop,
+        ...formattedNumber_1.formattedNumber.desktop,
+        ...icon_1.icon.desktop,
+        ...image_1.image.desktop,
+        ...inlineBanner_1.inlineBanner.desktop,
+        ...loadingBar_1.loadingBar.desktop,
+        ...overlay_1.overlay.desktop,
+        ...paginationInfo_1.paginationInfo.desktop,
+        ...price_1.price.desktop,
+        ...searchHeader_1.searchHeader.desktop,
+        ...skeleton_1.skeleton.desktop,
+    },
 };

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

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.inlineBanner = void 0;
-var react_1 = require("@emotion/react");
+const react_1 = require("@emotion/react");
 // CSS in JS style script for the InlineBanner component
-var inlineBannerStyleScript = function (props) {
-    var _a, _b;
+const inlineBannerStyleScript = (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 isAutocomplete = ((_b = props === null || props === void 0 ? void 0 : props.treePath) === null || _b === void 0 ? void 0 : _b.includes('autocomplete')) ? true : false;
+    const variables = props?.theme?.variables;
+    const isAutocomplete = props?.treePath?.includes('autocomplete') ? true : false;
     // inline banner styles
-    var inlineBannerStyles = (0, react_1.css)({
+    const inlineBannerStyles = (0, react_1.css)({
         overflow: isAutocomplete ? 'hidden' : '',
         '&.ss__inline-banner--grid': {
             maxHeight: isAutocomplete ? '212px' : '',

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

@@ -1,14 +1,13 @@
 "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 (props) {
-    var _a;
+const loadingBarStyleScript = (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;
     // loading bar styles
-    var loadingBarStyles = (0, react_1.css)({});
+    const loadingBarStyles = (0, react_1.css)({});
     return loadingBarStyles;
 };
 // LoadingBar component props

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

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.overlay = 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 Overlay component
-var overlayStyleScript = function (props) {
-    var _a;
+const overlayStyleScript = (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;
     // overlay styles
-    var overlayStyles = (0, react_1.css)({
+    const overlayStyles = (0, react_1.css)({
         cursor: 'pointer',
     });
     return overlayStyles;

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

@@ -1,26 +1,16 @@
 "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.paginationInfo = 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 Pagination component
-var paginationInfoStyleScript = function (props) {
-    var _a;
+const paginationInfoStyleScript = (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;
     // pagination info styles
-    var paginationInfoStyles = (0, react_1.css)(__assign({}, custom_1.custom.styles.headerText(undefined, '16px')));
+    const paginationInfoStyles = (0, react_1.css)({
+        ...custom_1.custom.styles.headerText(undefined, '16px'),
+    });
     return paginationInfoStyles;
 };
 // PaginationInfo component props

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

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.price = 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 Price component
-var priceStyleScript = function (props) {
-    var _a;
+const priceStyleScript = (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;
     // price styles
-    var priceStyles = (0, react_1.css)({
+    const priceStyles = (0, react_1.css)({
         '& ~ .ss__result__price': {
-            paddingLeft: "".concat(custom_1.custom.spacing.x1 / 2, "px"),
+            paddingLeft: `${custom_1.custom.spacing.x1 / 2}px`,
         },
     });
     return priceStyles;