@athoscommerce/snap-preact 1.9.1 → 1.10.0

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

@@ -1,125 +1,127 @@
 "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.result = 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 lightGray = custom_1.custom.utils.lightenColor();
+const lightGray = custom_1.custom.utils.lightenColor();
 // CSS in JS style script for the Result component
-var resultStyleScript = function (props) {
-    var _a;
-    var _b, _c;
+const resultStyleScript = (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;
+    const variables = props?.theme?.variables;
     // result styles
-    var resultStyles = (0, react_1.css)((_a = {
-            '&.ss__result--sale': {
-                '.ss__result__details': {
-                    '.ss__result__details__pricing': {
-                        '.ss__result__price:not(.ss__price--strike)': {
-                            '&, span': {
-                                color: (_c = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _c === void 0 ? void 0 : _c.primary,
-                            },
+    const resultStyles = (0, react_1.css)({
+        '&.ss__result--sale': {
+            '.ss__result__details': {
+                '.ss__result__details__pricing': {
+                    '.ss__result__price:not(.ss__price--strike)': {
+                        '&, span': {
+                            color: variables?.colors?.primary,
                         },
                     },
                 },
             },
-            '&, &.ss__result--grid, &.ss__result--list': {
-                alignItems: 'stretch',
-                gap: "".concat(custom_1.custom.spacing.x2, "px ").concat(custom_1.custom.spacing.x4, "px"),
-                '&, .ss__result__details': {
-                    flexFlow: 'column nowrap',
+        },
+        '&, &.ss__result--grid, &.ss__result--list': {
+            alignItems: 'stretch',
+            gap: `${custom_1.custom.spacing.x2}px ${custom_1.custom.spacing.x4}px`,
+            '&, .ss__result__details': {
+                flexFlow: 'column nowrap',
+            },
+            '& > *': {
+                minWidth: '1px',
+            },
+            '.ss__result__image-wrapper': {
+                flex: '0 1 auto',
+                border: `1px solid ${custom_1.custom.colors.gray02}`,
+                a: {
+                    display: 'block',
+                },
+                '.ss__image': {
+                    position: 'relative',
+                    height: 0,
+                    padding: '0 0 100% 0',
+                    overflow: 'hidden',
+                    '&, img': {
+                        display: 'block',
+                    },
+                    img: {
+                        position: 'absolute',
+                        top: 0,
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        margin: 'auto',
+                        width: '100%',
+                        height: '100%',
+                        objectPosition: 'center center',
+                    },
+                },
+            },
+            '.ss__result__details': {
+                display: 'flex',
+                flex: '1 1 0%',
+                gap: `${custom_1.custom.spacing.x2}px`,
+                padding: 0,
+                margin: 0,
+                ...custom_1.custom.styles.baseText(),
+                a: {
+                    color: 'inherit',
+                },
+                '& > *, .ss__result__details__title, .ss__result__details__title, .ss__result__details__pricing': {
+                    margin: 0,
                 },
                 '& > *': {
+                    flex: '0 1 auto',
                     minWidth: '1px',
                 },
-                '.ss__result__image-wrapper': {
-                    flex: '0 1 auto',
-                    border: "1px solid ".concat(custom_1.custom.colors.gray02),
-                    a: {
-                        display: 'block',
-                    },
-                    '.ss__image': {
-                        position: 'relative',
-                        height: 0,
-                        padding: '0 0 100% 0',
-                        overflow: 'hidden',
-                        '&, img': {
-                            display: 'block',
+                '.ss__result__details__title': {
+                    order: -2,
+                },
+                '.ss__result__details__pricing': {
+                    order: -1,
+                    '.ss__result__price': {
+                        fontSize: '16px',
+                        '&:not(.ss__price--strike)': {
+                            fontWeight: custom_1.custom.fonts.weight01,
                         },
-                        img: {
-                            position: 'absolute',
-                            top: 0,
-                            bottom: 0,
-                            left: 0,
-                            right: 0,
-                            margin: 'auto',
-                            width: '100%',
-                            height: '100%',
-                            objectPosition: 'center center',
+                    },
+                    '.ss__price--strike': {
+                        fontSize: '14px',
+                        '&, span': {
+                            color: lightGray,
                         },
                     },
                 },
-                '.ss__result__details': __assign(__assign({ display: 'flex', flex: '1 1 0%', gap: "".concat(custom_1.custom.spacing.x2, "px"), padding: 0, margin: 0 }, custom_1.custom.styles.baseText()), { a: {
-                        color: 'inherit',
-                    }, '& > *, .ss__result__details__title, .ss__result__details__title, .ss__result__details__pricing': {
-                        margin: 0,
-                    }, '& > *': {
-                        flex: '0 1 auto',
-                        minWidth: '1px',
-                    }, '.ss__result__details__title': {
-                        order: -2,
-                    }, '.ss__result__details__pricing': {
-                        order: -1,
-                        '.ss__result__price': {
-                            fontSize: '16px',
-                            '&:not(.ss__price--strike)': {
-                                fontWeight: custom_1.custom.fonts.weight01,
-                            },
-                        },
-                        '.ss__price--strike': {
-                            fontSize: '14px',
-                            '&, span': {
-                                color: lightGray,
-                            },
-                        },
-                    }, '.ss__result__add-to-cart-wrapper .ss__button': {
-                        width: "100%",
-                    }, '.ss__result__details__variant-selection, .ss__result__add-to-cart-wrapper': {
-                        marginTop: 'auto',
-                        order: 20,
-                    }, '.ss__result__details__variant-selection ~ .ss__result__add-to-cart-wrapper, .ss__result__add-to-cart-wrapper ~ .ss__result__details__variant-selection': {
-                        marginTop: 0,
-                    }, '.ss__result__details__variant-selection': {
-                        '.ss__variant-selection': {
-                            '.ss__slideshow:not(:has(.ss__slideshow__navigation)) .ss__slideshow__container .ss__slideshow__track, .ss__grid .ss__grid__options': {
-                                justifyContent: 'center',
-                            },
+                '.ss__result__add-to-cart-wrapper .ss__button': {
+                    width: `100%`,
+                },
+                '.ss__result__details__variant-selection, .ss__result__add-to-cart-wrapper': {
+                    marginTop: 'auto',
+                    order: 20,
+                },
+                '.ss__result__details__variant-selection ~ .ss__result__add-to-cart-wrapper, .ss__result__add-to-cart-wrapper ~ .ss__result__details__variant-selection': {
+                    marginTop: 0,
+                },
+                '.ss__result__details__variant-selection': {
+                    '.ss__variant-selection': {
+                        '.ss__slideshow:not(:has(.ss__slideshow__navigation)) .ss__slideshow__container .ss__slideshow__track, .ss__grid .ss__grid__options': {
+                            justifyContent: 'center',
                         },
-                    } }),
-            },
-            '&.ss__result--list': {
-                '.ss__result__details': {
-                    textAlign: 'center',
-                    '.ss__result__details__title a': {
-                        fontSize: '18px',
-                        fontWeight: custom_1.custom.fonts.weight02,
                     },
                 },
-            }
+            },
+        },
+        '&.ss__result--list': {
+            '.ss__result__details': {
+                textAlign: 'center',
+                '.ss__result__details__title a': {
+                    fontSize: '18px',
+                    fontWeight: custom_1.custom.fonts.weight02,
+                },
+            },
         },
-        _a["".concat(custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small))] = {
+        [`${custom_1.custom.utils.getBp(custom_1.custom.breakpoints.small)}`]: {
             '&.ss__result--list': {
                 '&, .ss__result__details': {
                     flexFlow: 'row wrap',
@@ -156,9 +158,9 @@ var resultStyleScript = function (props) {
                         display: 'flex',
                         flexFlow: 'row wrap',
                         alignItems: 'center',
-                        gap: "".concat(custom_1.custom.spacing.x2, "px"),
+                        gap: `${custom_1.custom.spacing.x2}px`,
                         '.ss__variant-selection': {
-                            width: "calc((100% - ".concat(custom_1.custom.spacing.x2, "px) / 2)"),
+                            width: `calc((100% - ${custom_1.custom.spacing.x2}px) / 2)`,
                             margin: 0,
                             '.ss__slideshow:not(:has(.ss__slideshow__navigation)) .ss__slideshow__container .ss__slideshow__track, .ss__grid .ss__grid__options': {
                                 justifyContent: 'flex-start',
@@ -166,12 +168,12 @@ var resultStyleScript = function (props) {
                         },
                     },
                     '.ss__result__add-to-cart-wrapper .ss__button': {
-                        width: "auto",
+                        width: `auto`,
                     },
                 },
             },
         },
-        _a));
+    });
     return resultStyles;
 };
 // Result component props

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

@@ -1,37 +1,27 @@
 "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.searchInput = 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 searchInputHeight = custom_1.custom.sizes.height;
-var lightGray = custom_1.custom.utils.lightenColor();
+const searchInputHeight = custom_1.custom.sizes.height;
+const lightGray = custom_1.custom.utils.lightenColor();
 // CSS in JS style script for the SearchInput component
-var searchInputStyleScript = function (props) {
-    var _a, _b;
+const searchInputStyleScript = (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 darkPrimary = custom_1.custom.utils.darkenColor((_b = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _b === void 0 ? void 0 : _b.primary, 0.15);
+    const variables = props?.theme?.variables;
+    const darkPrimary = custom_1.custom.utils.darkenColor(variables?.colors?.primary, 0.15);
     // search input styles
-    var searchInputStyles = (0, react_1.css)({
+    const searchInputStyles = (0, react_1.css)({
         '&.ss__search-input': {
-            margin: "0 0 ".concat(custom_1.custom.spacing.x4, "px"),
-            height: "".concat(searchInputHeight, "px"),
+            margin: `0 0 ${custom_1.custom.spacing.x4}px`,
+            height: `${searchInputHeight}px`,
             border: 0,
             '& > *': {
                 minWidth: '1px',
-                '&:first-child, &:last-child': __assign({}, custom_1.custom.styles.borderRadius()),
+                '&:first-child, &:last-child': {
+                    ...custom_1.custom.styles.borderRadius(),
+                },
                 '&:first-child': {
                     borderTopRightRadius: custom_1.custom.sizes.radius ? 0 : '',
                     borderBottomRightRadius: custom_1.custom.sizes.radius ? 0 : '',
@@ -39,7 +29,7 @@ var searchInputStyleScript = function (props) {
                 '&:last-child': {
                     borderTopLeftRadius: custom_1.custom.sizes.radius ? 0 : '',
                     borderBottomLeftRadius: custom_1.custom.sizes.radius ? 0 : '',
-                    overflow: custom_1.custom.sizes.radius ? "hidden" : "",
+                    overflow: custom_1.custom.sizes.radius ? `hidden` : ``,
                 },
             },
             '.ss__search-input__input, .ss__search-input__icons, .ss__button': {
@@ -50,7 +40,7 @@ var searchInputStyleScript = function (props) {
                 flex: '0 1 auto',
             },
             '.ss__button, .ss__search-input__button--close-search-button': {
-                width: "".concat(searchInputHeight, "px"),
+                width: `${searchInputHeight}px`,
                 justifyContent: 'center',
                 '&, &:hover': {
                     border: 0,
@@ -59,13 +49,21 @@ var searchInputStyleScript = function (props) {
                     padding: 0,
                 },
             },
-            '.ss__search-input__input': __assign(__assign({ flex: '1 1 0%', minHeight: '1px' }, custom_1.custom.styles.box(undefined, "0 ".concat(custom_1.custom.spacing.x2, "px"), false)), { fontSize: '14px', '&::-webkit-input-placeholder': {
+            '.ss__search-input__input': {
+                flex: '1 1 0%',
+                minHeight: '1px',
+                ...custom_1.custom.styles.box(undefined, `0 ${custom_1.custom.spacing.x2}px`, false),
+                fontSize: '14px',
+                '&::-webkit-input-placeholder': {
                     color: lightGray,
-                }, '&::-ms-input-placeholder': {
+                },
+                '&::-ms-input-placeholder': {
                     color: lightGray,
-                }, '&::placeholder': {
+                },
+                '&::placeholder': {
                     color: lightGray,
-                } }),
+                },
+            },
             '.ss__search-input__icons': {
                 gap: '1px',
                 margin: '0 0 0 -1px',
@@ -88,7 +86,7 @@ exports.searchInput = {
             themeStyleScript: searchInputStyleScript,
         },
         'searchInput icon': {
-            size: "".concat(custom_1.custom.sizes.icon14, "px"),
+            size: `${custom_1.custom.sizes.icon14}px`,
         },
         'searchInput button.close-search icon': {
             icon: custom_1.custom.icons.arrowLeft,
@@ -99,7 +97,7 @@ exports.searchInput = {
         },
         'searchInput button.submit-search icon': {
             icon: custom_1.custom.icons.search,
-            size: "".concat(custom_1.custom.sizes.icon16, "px"),
+            size: `${custom_1.custom.sizes.icon16}px`,
         },
     },
 };

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

@@ -1,39 +1,28 @@
 "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 custom_1 = require("../../custom");
+const react_1 = require("@emotion/react");
+const custom_1 = require("../../custom");
 // static variables
-var dropdownIcon = ".ss__icon--".concat(custom_1.custom.icons.arrowDown);
+const dropdownIcon = `.ss__icon--${custom_1.custom.icons.arrowDown}`;
 // CSS in JS style script for the Select component
-var selectStyleScript = function (props) {
-    var _a, _b;
-    var _c, _d;
+const selectStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.variables;
+    const variables = props?.theme?.variables;
     // shared styles
-    var sharedStyles = (0, react_1.css)({
-        '&.ss__select--disabled': __assign({}, custom_1.custom.styles.disabled()),
+    const sharedStyles = (0, react_1.css)({
+        '&.ss__select--disabled': {
+            ...custom_1.custom.styles.disabled(),
+        },
     });
     // default styles
-    var defaultStyles = (0, react_1.css)([
+    const defaultStyles = (0, react_1.css)([
         sharedStyles,
         {
             display: 'block',
             '.ss__dropdown': {
                 '.ss__dropdown__button .ss__button, .ss__dropdown__content': {
-                    padding: "".concat(custom_1.custom.spacing.x2, "px"),
+                    padding: `${custom_1.custom.spacing.x2}px`,
                 },
                 '.ss__dropdown__button': {
                     '.ss__button': {
@@ -41,69 +30,78 @@ var selectStyleScript = function (props) {
                         paddingTop: 0,
                         paddingBottom: 0,
                         textAlign: 'left',
-                        '.ss__button__content': (_a = {
-                                '.ss__select__selection__icon': {
-                                    margin: 0,
-                                },
-                                '.ss__select__selection': {
-                                    flex: '1 1 0%',
-                                    paddingRight: "".concat(custom_1.custom.spacing.x1, "px"),
-                                    fontWeight: 'normal',
-                                }
+                        '.ss__button__content': {
+                            '.ss__select__selection__icon': {
+                                margin: 0,
+                            },
+                            '.ss__select__selection': {
+                                flex: '1 1 0%',
+                                paddingRight: `${custom_1.custom.spacing.x1}px`,
+                                fontWeight: 'normal',
                             },
-                            _a[dropdownIcon] = {
+                            [dropdownIcon]: {
                                 transition: 'transform ease 0.5s',
                                 marginLeft: 'auto',
                             },
-                            _a),
+                        },
                     },
                 },
                 '.ss__dropdown__content': {
-                    backgroundColor: (props === null || props === void 0 ? void 0 : props.backgroundColor) ? props === null || props === void 0 ? void 0 : props.backgroundColor : custom_1.custom.colors.gray01,
-                    border: "1px solid ".concat((props === null || props === void 0 ? void 0 : props.borderColor) ? props === null || props === void 0 ? void 0 : props.borderColor : custom_1.custom.colors.gray02),
-                    marginTop: "".concat(custom_1.custom.spacing.x1, "px"),
+                    backgroundColor: props?.backgroundColor ? props?.backgroundColor : custom_1.custom.colors.gray01,
+                    border: `1px solid ${props?.borderColor ? props?.borderColor : custom_1.custom.colors.gray02}`,
+                    marginTop: `${custom_1.custom.spacing.x1}px`,
                     '.ss__select__select': {
                         margin: 0,
                         padding: 0,
                         border: 0,
                         backgroundColor: 'transparent',
-                        '.ss__select__select__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__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__option--selected': __assign({}, custom_1.custom.styles.activeText((_d = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _d === void 0 ? void 0 : _d.primary)),
+                            },
+                        },
+                        '.ss__select__select__option--selected': {
+                            ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+                        },
                     },
                 },
             },
             '.ss__dropdown--open': {
                 '.ss__dropdown__button': {
-                    '.ss__button': (_b = {},
-                        _b[dropdownIcon] = {
+                    '.ss__button': {
+                        [dropdownIcon]: {
                             transform: 'rotate(180deg)',
                         },
-                        _b),
+                    },
                 },
             },
         },
     ]);
     // native styles
-    var nativeStyles = (0, react_1.css)([
+    const nativeStyles = (0, react_1.css)([
         sharedStyles,
         {
             display: 'flex',
             flexFlow: 'row nowrap',
             alignItems: 'center',
-            gap: "".concat(custom_1.custom.spacing.x1, "px"),
-            padding: "0 ".concat(custom_1.custom.spacing.x2, "px"),
-            backgroundColor: (props === null || props === void 0 ? void 0 : props.backgroundColor) ? props === null || props === void 0 ? void 0 : props.backgroundColor : custom_1.custom.colors.gray01,
-            border: "1px solid ".concat((props === null || props === void 0 ? void 0 : props.borderColor) ? props === null || props === void 0 ? void 0 : props.borderColor : custom_1.custom.colors.gray02),
-            height: "".concat(custom_1.custom.sizes.height, "px"),
-            lineHeight: "".concat(custom_1.custom.sizes.height, "px"),
-            color: props === null || props === void 0 ? void 0 : props.color,
+            gap: `${custom_1.custom.spacing.x1}px`,
+            padding: `0 ${custom_1.custom.spacing.x2}px`,
+            backgroundColor: props?.backgroundColor ? props?.backgroundColor : custom_1.custom.colors.gray01,
+            border: `1px solid ${props?.borderColor ? props?.borderColor : custom_1.custom.colors.gray02}`,
+            height: `${custom_1.custom.sizes.height}px`,
+            lineHeight: `${custom_1.custom.sizes.height}px`,
+            color: props?.color,
             '.ss__select__label, .ss__select__select': {
                 fontSize: '14px',
             },
@@ -112,7 +110,7 @@ var selectStyleScript = function (props) {
             },
             '.ss__select__select': {
                 flex: '1 1 0%',
-                padding: "0 ".concat(custom_1.custom.spacing.x1, "px 0 0"),
+                padding: `0 ${custom_1.custom.spacing.x1}px 0 0`,
                 backgroundColor: 'transparent',
                 height: '100%',
                 lineHeight: '100%',
@@ -126,7 +124,7 @@ var selectStyleScript = function (props) {
             },
         },
     ]);
-    return (props === null || props === void 0 ? void 0 : props.native) ? nativeStyles : defaultStyles;
+    return props?.native ? nativeStyles : defaultStyles;
 };
 // Select component props
 exports.select = {
@@ -140,10 +138,10 @@ exports.select = {
             borderColor: custom_1.custom.colors.gray02,
         },
         'select icon.open': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
+            size: `${custom_1.custom.sizes.icon12}px`,
         },
         'select dropdown 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/molecules/slideout.js

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