@athoscommerce/snap-preact 1.9.1 → 1.10.0

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

@@ -1,56 +1,44 @@
 "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.pagination = 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 paginationStyleScript = function (props) {
-    var _a;
-    var _b, _c, _d;
+const paginationStyleScript = (props) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var variables = (_b = props === null || props === void 0 ? void 0 : props.theme) === null || _b === void 0 ? void 0 : _b.variables;
-    var mobileBp = (_c = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _c === void 0 ? void 0 : _c.mobile;
-    var paginationStyles = (0, react_1.css)((_a = {
-            nav: {
-                display: 'flex',
-                flexFlow: 'row wrap',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: "".concat(custom_1.custom.spacing.x4, "px"),
-                '.ss__pagination__page, span': {
-                    padding: 0,
-                    fontSize: '16px',
-                },
-                '.ss__pagination__page': {
-                    minWidth: '1px',
-                    minHeight: '1px',
-                    '&.ss__pagination__page--active': __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__pagination__page--previous, .ss__pagination__page--next': {
-                    lineHeight: "10px",
+    const variables = props?.theme?.variables;
+    const mobileBp = variables?.breakpoints?.mobile;
+    const paginationStyles = (0, react_1.css)({
+        nav: {
+            display: 'flex',
+            flexFlow: 'row wrap',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: `${custom_1.custom.spacing.x4}px`,
+            '.ss__pagination__page, span': {
+                padding: 0,
+                fontSize: '16px',
+            },
+            '.ss__pagination__page': {
+                minWidth: '1px',
+                minHeight: '1px',
+                '&.ss__pagination__page--active': {
+                    ...custom_1.custom.styles.activeText(variables?.colors?.primary),
                 },
-            }
+            },
+            '.ss__pagination__page--previous, .ss__pagination__page--next': {
+                lineHeight: `10px`,
+            },
         },
-        _a["".concat(custom_1.custom.utils.getBp(mobileBp))] = {
+        [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
             nav: {
-                gap: "".concat(custom_1.custom.spacing.x2, "px"),
+                gap: `${custom_1.custom.spacing.x2}px`,
                 '.ss__pagination__page, span': {
                     fontSize: '14px',
                 },
             },
         },
-        _a));
+    });
     return paginationStyles;
 };
 // Pagination component props
@@ -60,7 +48,7 @@ exports.pagination = {
             themeStyleScript: paginationStyleScript,
         },
         'pagination icon': {
-            size: "".concat(custom_1.custom.sizes.icon12, "px"),
+            size: `${custom_1.custom.sizes.icon12}px`,
         },
         'pagination icon.prev': {
             icon: custom_1.custom.icons.arrowLeft,
@@ -71,7 +59,7 @@ exports.pagination = {
     },
     mobile: {
         'pagination icon': {
-            size: "".concat(custom_1.custom.sizes.icon14, "px"),
+            size: `${custom_1.custom.sizes.icon14}px`,
         },
     },
 };

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

@@ -1,14 +1,13 @@
 "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 (props) {
-    var _a;
+const perPageStyleScript = (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;
     // perPage styles
-    var perPageStyles = (0, react_1.css)({});
+    const perPageStyles = (0, react_1.css)({});
     return perPageStyles;
 };
 // PerPage component props

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

@@ -1,54 +1,54 @@
 "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.radio = 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 darkGray = custom_1.custom.utils.darkenColor();
+const darkGray = custom_1.custom.utils.darkenColor();
 // CSS in JS style script for the Radio component
-var radioStyleScript = function (props) {
-    var _a;
+const radioStyleScript = (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;
     // default radio styles
-    var defaultRadiosStyles = (0, react_1.css)([
-        __assign(__assign(__assign({ position: 'relative', top: '-1px' }, custom_1.custom.styles.box('', 0)), custom_1.custom.styles.borderRadius(50, '%')), { '&.ss__radio--disabled': __assign({}, custom_1.custom.styles.disabled()), '&.ss__radio--active': {
+    const defaultRadiosStyles = (0, react_1.css)([
+        {
+            position: 'relative',
+            top: '-1px',
+            ...custom_1.custom.styles.box('', 0),
+            ...custom_1.custom.styles.borderRadius(50, '%'),
+            '&.ss__radio--disabled': {
+                ...custom_1.custom.styles.disabled(),
+            },
+            '&.ss__radio--active': {
                 borderColor: darkGray,
                 backgroundColor: custom_1.custom.colors.white,
                 '.ss__icon': {
                     opacity: 1,
                 },
-            }, '.ss__icon': {
+            },
+            '.ss__icon': {
                 opacity: 0,
-            } }),
+            },
+        },
     ]);
     // native radio styles
-    var nativeRadiosStyles = (0, react_1.css)([
+    const nativeRadiosStyles = (0, react_1.css)([
         {
             lineHeight: 0,
-            '&.ss__radio--disabled .ss__radio__input': __assign({}, custom_1.custom.styles.disabled()),
+            '&.ss__radio--disabled .ss__radio__input': {
+                ...custom_1.custom.styles.disabled(),
+            },
             '.ss__radio__input': {
                 margin: 0,
                 padding: 0,
-                width: (props === null || props === void 0 ? void 0 : props.size) ? props.size : "".concat(custom_1.custom.sizes.icon16, "px"),
-                height: (props === null || props === void 0 ? void 0 : props.size) ? props.size : "".concat(custom_1.custom.sizes.icon16, "px"),
+                width: props?.size ? props.size : `${custom_1.custom.sizes.icon16}px`,
+                height: props?.size ? props.size : `${custom_1.custom.sizes.icon16}px`,
                 lineHeight: 1,
                 cursor: 'pointer',
             },
         },
     ]);
-    return (props === null || props === void 0 ? void 0 : props.native) ? nativeRadiosStyles : defaultRadiosStyles;
+    return props?.native ? nativeRadiosStyles : defaultRadiosStyles;
 };
 // Radio component props
 exports.radio = {
@@ -57,11 +57,11 @@ exports.radio = {
             themeStyleScript: radioStyleScript,
             checkedIcon: 'circle',
             unCheckedIcon: 'circle',
-            size: "".concat(custom_1.custom.sizes.icon16, "px"),
+            size: `${custom_1.custom.sizes.icon16}px`,
         },
         'radio icon': {
-            width: "calc(50% + 1px)",
-            height: "calc(50% + 1px)",
+            width: `calc(50% + 1px)`,
+            height: `calc(50% + 1px)`,
         },
     },
 };

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

@@ -1,56 +1,60 @@
 "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.radioList = 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 radioSpacing = custom_1.custom.sizes.icon16 + custom_1.custom.spacing.x2;
+const radioSpacing = custom_1.custom.sizes.icon16 + custom_1.custom.spacing.x2;
 // CSS in JS style script for the RadioList component
-var radioListStyleScript = function (props) {
-    var _a, _b;
-    var _c, _d, _e, _f, _g;
+const radioListStyleScript = (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;
-    var mobileBp = (_d = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _d === void 0 ? void 0 : _d.mobile;
-    var tabletBp = (_e = variables === null || variables === void 0 ? void 0 : variables.breakpoints) === null || _e === void 0 ? void 0 : _e.tablet;
+    const variables = props?.theme?.variables;
+    const mobileBp = variables?.breakpoints?.mobile;
+    const tabletBp = variables?.breakpoints?.tablet;
     // shared styles
-    var sharedStyles = (0, react_1.css)({
-        '&.ss__radio-list--disabled': __assign({}, custom_1.custom.styles.disabled()),
+    const sharedStyles = (0, react_1.css)({
+        '&.ss__radio-list--disabled': {
+            ...custom_1.custom.styles.disabled(),
+        },
         '.ss__radio-list__title, .ss__radio-list__options-wrapper': {
             width: '100%',
         },
         '.ss__radio-list__title, .ss__radio-list__options-wrapper .ss__radio-list__option': {
             padding: 0,
         },
-        '.ss__radio-list__title': __assign({ margin: "0 0 ".concat(custom_1.custom.spacing.x2, "px 0") }, custom_1.custom.styles.headerText((_f = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _f === void 0 ? void 0 : _f.secondary, '14px')),
+        '.ss__radio-list__title': {
+            margin: `0 0 ${custom_1.custom.spacing.x2}px 0`,
+            ...custom_1.custom.styles.headerText(variables?.colors?.secondary, '14px'),
+        },
         '.ss__radio-list__options-wrapper': {
-            '.ss__radio-list__option': __assign(__assign({ position: 'relative' }, custom_1.custom.styles.baseText()), { gap: "".concat(custom_1.custom.spacing.x2, "px"), padding: (props === null || props === void 0 ? void 0 : props.hideOptionRadios) ? "" : "0 0 0 ".concat(radioSpacing, "px"), '.ss__radio-list__option__label, .ss__radio-list__option__icon': {
+            '.ss__radio-list__option': {
+                position: 'relative',
+                ...custom_1.custom.styles.baseText(),
+                gap: `${custom_1.custom.spacing.x2}px`,
+                padding: props?.hideOptionRadios ? `` : `0 0 0 ${radioSpacing}px`,
+                '.ss__radio-list__option__label, .ss__radio-list__option__icon': {
                     padding: 0,
-                }, '.ss__radio': {
+                },
+                '.ss__radio': {
                     position: 'absolute',
                     top: '2.5px',
                     left: 0,
-                }, '.ss__radio-list__option__icon': {
+                },
+                '.ss__radio-list__option__icon': {
                     position: 'relative',
                     top: '-1px',
-                } }),
-            '.ss__radio-list__option--disabled': __assign({}, custom_1.custom.styles.disabled()),
-            '.ss__radio-list__option--selected': __assign({}, custom_1.custom.styles.activeText((_g = variables === null || variables === void 0 ? void 0 : variables.colors) === null || _g === void 0 ? void 0 : _g.primary)),
+                },
+            },
+            '.ss__radio-list__option--disabled': {
+                ...custom_1.custom.styles.disabled(),
+            },
+            '.ss__radio-list__option--selected': {
+                ...custom_1.custom.styles.activeText(variables?.colors?.primary),
+            },
         },
     });
     // list styles
-    var radioListStyles = (0, react_1.css)([
+    const radioListStyles = (0, react_1.css)([
         sharedStyles,
         {
             '&, .ss__radio-list__options-wrapper, .ss__radio-list__title': {
@@ -58,7 +62,7 @@ var radioListStyleScript = function (props) {
             },
             '.ss__radio-list__options-wrapper': {
                 '.ss__radio-list__option': {
-                    margin: "0 0 ".concat(custom_1.custom.spacing.x1, "px 0"),
+                    margin: `0 0 ${custom_1.custom.spacing.x1}px 0`,
                     '&:last-child': {
                         marginBottom: 0,
                     },
@@ -67,7 +71,7 @@ var radioListStyleScript = function (props) {
         },
     ]);
     // list horizontal styles
-    var radioListHorizontalStyles = (0, react_1.css)([
+    const radioListHorizontalStyles = (0, react_1.css)([
         sharedStyles,
         {
             '&, .ss__radio-list__title': {
@@ -75,32 +79,34 @@ var radioListStyleScript = function (props) {
             },
             '.ss__radio-list__options-wrapper': {
                 flexFlow: 'row wrap',
-                gap: "".concat(custom_1.custom.spacing.x1, "px ").concat(custom_1.custom.spacing.x2, "px"),
+                gap: `${custom_1.custom.spacing.x1}px ${custom_1.custom.spacing.x2}px`,
                 '.ss__radio-list__option': {
                     flex: '0 1 auto',
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2, "px) / 2)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2}px) / 2)`,
                     minWidth: '1px',
                     margin: 0,
-                    '.ss__radio-list__option__label': __assign({}, custom_1.custom.styles.textOverflow()),
+                    '.ss__radio-list__option__label': {
+                        ...custom_1.custom.styles.textOverflow(),
+                    },
                 },
             },
         },
-        (_a = {},
-            _a["".concat(custom_1.custom.utils.getBp(mobileBp))] = {
+        {
+            [`${custom_1.custom.utils.getBp(mobileBp)}`]: {
                 '.ss__radio-list__options-wrapper .ss__radio-list__option': {
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 2, "px) / 3)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2 * 2}px) / 3)`,
                 },
             },
-            _a),
-        (_b = {},
-            _b["".concat(custom_1.custom.utils.getBp(tabletBp))] = {
+        },
+        {
+            [`${custom_1.custom.utils.getBp(tabletBp)}`]: {
                 '.ss__radio-list__options-wrapper .ss__radio-list__option': {
-                    width: "calc((100% - ".concat(custom_1.custom.spacing.x2 * 3, "px) / 4)"),
+                    width: `calc((100% - ${custom_1.custom.spacing.x2 * 3}px) / 4)`,
                 },
             },
-            _b),
+        },
     ]);
-    return (props === null || props === void 0 ? void 0 : props.horizontal) ? radioListHorizontalStyles : radioListStyles;
+    return props?.horizontal ? radioListHorizontalStyles : radioListStyles;
 };
 // RadioList component props
 exports.radioList = {

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

@@ -1,19 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rating = 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 darkGray = custom_1.custom.utils.darkenColor();
+const darkGray = custom_1.custom.utils.darkenColor();
 // CSS in JS style script for the Rating component
-var ratingStyleScript = function (props) {
-    var _a;
+const ratingStyleScript = (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;
     // rating styles
-    var ratingStyles = (0, react_1.css)({
+    const ratingStyles = (0, react_1.css)({
         flexWrap: 'wrap',
-        gap: "".concat(custom_1.custom.spacing.x1, "px"),
+        gap: `${custom_1.custom.spacing.x1}px`,
         lineHeight: 1,
         '.ss__rating__icons': {
             '&, .ss__rating__stars .ss__rating__stars__star': {
@@ -39,7 +38,7 @@ exports.rating = {
             fullIcon: 'star',
         },
         'rating icon': {
-            size: "".concat(custom_1.custom.sizes.icon14, "px"),
+            size: `${custom_1.custom.sizes.icon14}px`,
         },
         'rating icon.star--empty': {
             color: darkGray,