@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Molecules/Carousel/Carousel.js

@@ -1,47 +1,23 @@
 "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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Carousel = exports.defaultVerticalCarouselBreakpoints = exports.defaultCarouselBreakpoints = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var react_2 = require("swiper/react");
-var utilities_1 = require("../../../utilities");
-var modules_1 = require("swiper/modules");
-var Icon_1 = require("../../Atoms/Icon/Icon");
-var providers_1 = require("../../../providers");
-var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
-var hooks_2 = require("../../../hooks");
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var vertical = _a.vertical, theme = _a.theme;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const react_2 = require("swiper/react");
+const utilities_1 = require("../../../utilities");
+const modules_1 = require("swiper/modules");
+const Icon_1 = require("../../Atoms/Icon/Icon");
+const providers_1 = require("../../../providers");
+const useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
+const hooks_2 = require("../../../hooks");
+const defaultStyles = ({ vertical, theme }) => {
     return (0, react_1.css)({
         display: 'flex',
         maxWidth: '100%',
@@ -76,7 +52,7 @@ var defaultStyles = function (_a) {
             },
         },
         '.swiper-pagination-bullet-active': {
-            background: ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) || 'inherit',
+            background: theme?.variables?.colors?.primary || 'inherit',
         },
         '.ss__carousel__next-wrapper, .ss__carousel__prev-wrapper': {
             display: 'flex',
@@ -146,7 +122,7 @@ var defaultStyles = function (_a) {
             margin: '0 4px',
             '&.swiper-pagination-bullet-active': {
                 opacity: '0.8',
-                background: ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.primary) || '#000',
+                background: theme?.variables?.colors?.primary || '#000',
             },
         },
         '.swiper-slide-invisible-blank': {
@@ -171,7 +147,7 @@ var defaultStyles = function (_a) {
             '.swiper-scrollbar-drag': {
                 position: 'relative',
                 height: '100%',
-                backgroundColor: ((_g = (_f = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _f === void 0 ? void 0 : _f.colors) === null || _g === void 0 ? void 0 : _g.primary) || '#000',
+                backgroundColor: theme?.variables?.colors?.primary || '#000',
             },
         },
     });
@@ -210,11 +186,10 @@ exports.defaultVerticalCarouselBreakpoints = {
         spaceBetween: 0,
     },
 };
-exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Carousel = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         breakpoints: properties.vertical
             ? JSON.parse(JSON.stringify(exports.defaultVerticalCarouselBreakpoints))
             : JSON.parse(JSON.stringify(exports.defaultCarouselBreakpoints)),
@@ -227,12 +202,12 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
         autoAdjustSlides: false,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('carousel', globalTheme, defaultProps, properties);
-    var displaySettings;
+    let props = (0, utilities_1.mergeProps)('carousel', globalTheme, defaultProps, properties);
+    let displaySettings;
     //no breakpoint props allowed in templates
-    if (!(((_a = properties.theme) === null || _a === void 0 ? void 0 : _a.type) == 'templates' || (globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.type) == 'templates') && props.breakpoints) {
-        Object.keys(props.breakpoints).forEach(function (breakpoint) {
-            var breakPointProps = props.breakpoints[breakpoint];
+    if (!(properties.theme?.type == 'templates' || globalTheme?.type == 'templates') && props.breakpoints) {
+        Object.keys(props.breakpoints).forEach((breakpoint) => {
+            const breakPointProps = props.breakpoints[breakpoint];
             // make certain props numbers
             if (breakPointProps.slidesPerView)
                 breakPointProps.slidesPerView = Number(breakPointProps.slidesPerView) || 1;
@@ -241,55 +216,66 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
         });
         displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
         if (displaySettings && Object.keys(displaySettings).length) {
-            var theme = (0, deepmerge_1.default)((props === null || props === void 0 ? void 0 : props.theme) || {}, (displaySettings === null || displaySettings === void 0 ? void 0 : displaySettings.theme) || {}, { arrayMerge: function (destinationArray, sourceArray) { return sourceArray; } });
+            const theme = (0, deepmerge_1.default)(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
             if (props.autoAdjustSlides && props.children.length < displaySettings.slidesPerView) {
                 displaySettings.slidesPerView = props.children.length;
                 displaySettings.slidesPerGroup = props.children.length;
             }
-            props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
+            props = {
+                ...props,
+                ...displaySettings,
+                theme,
+            };
         }
     }
-    var children = props.children, loop = props.loop, nextButton = props.nextButton, prevButton = props.prevButton, hideButtons = props.hideButtons, vertical = props.vertical, onInit = props.onInit, onBeforeInit = props.onBeforeInit, onAfterInit = props.onAfterInit, onNextButtonClick = props.onNextButtonClick, onPrevButtonClick = props.onPrevButtonClick, onClick = props.onClick, disableStyles = props.disableStyles, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, modules = props.modules, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, additionalProps = __rest(props, ["children", "loop", "nextButton", "prevButton", "hideButtons", "vertical", "onInit", "onBeforeInit", "onAfterInit", "onNextButtonClick", "onPrevButtonClick", "onClick", "disableStyles", "style", "styleScript", "themeStyleScript", "modules", "className", "internalClassName", "treePath"]);
-    var _b = (0, hooks_2.useCustomComponentOverride)('carousel', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    const { children, loop, nextButton, prevButton, hideButtons, vertical, onInit, onBeforeInit, onAfterInit, onNextButtonClick, onPrevButtonClick, onClick, disableStyles, style: _, styleScript: __, themeStyleScript: ___, modules, className, internalClassName, treePath, ...additionalProps } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('carousel', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var pagination = props.pagination;
-    var navigation = props.navigation;
-    var scrollbar = props.scrollbar;
-    var subProps = {
-        icon: __assign(__assign({ 
+    let pagination = props.pagination;
+    let navigation = props.navigation;
+    let scrollbar = props.scrollbar;
+    const subProps = {
+        icon: {
             // default props
-            internalClassName: 'ss__carousel__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__carousel__icon',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var swiperModulesUnfiltered = Array.isArray(modules)
+    const swiperModulesUnfiltered = Array.isArray(modules)
         ? [modules_1.Navigation, modules_1.Pagination, modules_1.Scrollbar, modules_1.A11y].concat(modules)
         : [modules_1.Navigation, modules_1.Pagination, modules_1.Scrollbar, modules_1.A11y];
     //remove any duplicates, in case user passes in Navigation or Pagination
-    var swiperModules = swiperModulesUnfiltered.filter(function (module, pos) { return swiperModulesUnfiltered.indexOf(module) === pos; });
-    var navigationPrevRef = (0, hooks_1.useRef)(null);
-    var navigationNextRef = (0, hooks_1.useRef)(null);
-    var rootComponentRef = (0, hooks_1.useRef)(null);
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    (0, hooks_1.useEffect)(function () {
+    const swiperModules = swiperModulesUnfiltered.filter((module, pos) => swiperModulesUnfiltered.indexOf(module) === pos);
+    const navigationPrevRef = (0, hooks_1.useRef)(null);
+    const navigationNextRef = (0, hooks_1.useRef)(null);
+    const rootComponentRef = (0, hooks_1.useRef)(null);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    (0, hooks_1.useEffect)(() => {
         //backwards compatability for legacy styles
         if (rootComponentRef.current) {
-            var rootElem = rootComponentRef.current;
-            var swiperElem = rootElem.querySelector('.swiper');
-            swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.classList.add('swiper-container', 'swiper-container-pointer-events');
-            (swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.classList.contains('swiper-vertical')) && swiperElem.classList.add('swiper-container-vertical');
-            (swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.classList.contains('swiper-horizontal')) && swiperElem.classList.add('swiper-container-horizontal');
+            const rootElem = rootComponentRef.current;
+            const swiperElem = rootElem.querySelector('.swiper');
+            swiperElem?.classList.add('swiper-container', 'swiper-container-pointer-events');
+            swiperElem?.classList.contains('swiper-vertical') && swiperElem.classList.add('swiper-container-vertical');
+            swiperElem?.classList.contains('swiper-horizontal') && swiperElem.classList.add('swiper-container-horizontal');
         }
         //add usable class to last visible slide.
         attachClasstoLastVisibleSlide();
     }, [properties]);
     if (pagination) {
         if (typeof pagination == 'object') {
-            pagination = __assign({ clickable: true }, pagination);
+            pagination = {
+                clickable: true,
+                ...pagination,
+            };
         }
         else {
             pagination = {
@@ -299,7 +285,11 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
     }
     if (navigation) {
         if (typeof navigation == 'object') {
-            navigation = __assign({ nextEl: '.ss_carousel_DNE', prevEl: '.ss_carousel_DNE' }, navigation);
+            navigation = {
+                nextEl: '.ss_carousel_DNE',
+                prevEl: '.ss_carousel_DNE',
+                ...navigation,
+            };
         }
         else {
             navigation = {
@@ -310,7 +300,10 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
     }
     if (scrollbar) {
         if (typeof scrollbar == 'object') {
-            scrollbar = __assign({ enabled: true }, scrollbar);
+            scrollbar = {
+                enabled: true,
+                ...scrollbar,
+            };
         }
         else {
             scrollbar = {
@@ -318,20 +311,20 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
             };
         }
     }
-    var attachClasstoLastVisibleSlide = function () {
+    const attachClasstoLastVisibleSlide = () => {
         if (rootComponentRef.current) {
-            var swiperElem = rootComponentRef.current;
-            var slides_visible_1 = swiperElem === null || swiperElem === void 0 ? void 0 : swiperElem.querySelectorAll('.swiper-slide-visible');
-            slides_visible_1.forEach(function (element, idx) {
+            const swiperElem = rootComponentRef.current;
+            const slides_visible = swiperElem?.querySelectorAll('.swiper-slide-visible');
+            slides_visible.forEach((element, idx) => {
                 element.classList.remove('swiper-last-visible-slide');
-                if (idx == slides_visible_1.length - 1) {
+                if (idx == slides_visible.length - 1) {
                     element.classList.add('swiper-last-visible-slide');
                 }
             });
         }
     };
     delete additionalProps.breakpoints;
-    return (children === null || children === void 0 ? void 0 : children.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: rootComponentRef }, styling, { className: (0, classnames_1.default)('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className, internalClassName), children: [navigation !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && (function (e) { return onPrevButtonClick(e); }), children: prevButton || (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-up' : 'angle-left' }, subProps.icon, { name: 'prev' })) }) })), (0, jsx_runtime_1.jsx)(react_2.Swiper, __assign({ centerInsufficientSlides: true, onBeforeInit: function (swiper) {
+    return children?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ref: rootComponentRef, ...styling, className: (0, classnames_1.default)('ss__carousel', vertical ? 'ss__carousel-vertical' : '', className, internalClassName), children: [navigation !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__prev-wrapper', { 'ss__carousel__prev-wrapper--hidden': hideButtons }), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__carousel__prev", ref: navigationPrevRef, onClick: onPrevButtonClick && ((e) => onPrevButtonClick(e)), children: prevButton || (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: vertical ? 'angle-up' : 'angle-left', ...subProps.icon, name: 'prev' }) }) })), (0, jsx_runtime_1.jsx)(react_2.Swiper, { centerInsufficientSlides: true, onBeforeInit: (swiper) => {
                         if (navigation && swiper.params.navigation) {
                             //@ts-ignore : someone should refactor this
                             swiper.params.navigation.prevEl = navigationPrevRef.current ? navigationPrevRef.current : undefined;
@@ -341,14 +334,14 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
                         if (onBeforeInit) {
                             onBeforeInit(swiper);
                         }
-                    }, onInit: function (swiper) {
+                    }, onInit: (swiper) => {
                         if (onInit) {
                             onInit(swiper);
                         }
-                    }, onAfterInit: function (swiper) {
+                    }, onAfterInit: (swiper) => {
                         if (navigation && swiper.navigation) {
                             //@ts-ignore : someone should refactor this
-                            swiper.navigation.onPrevClick = function (e) {
+                            swiper.navigation.onPrevClick = (e) => {
                                 e.preventDefault();
                                 if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind)
                                     return;
@@ -356,7 +349,7 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
                                 swiper.emit('navigationPrev');
                             };
                             //@ts-ignore : someone should refactor this
-                            swiper.navigation.onNextClick = function (e) {
+                            swiper.navigation.onNextClick = (e) => {
                                 e.preventDefault();
                                 if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind)
                                     return;
@@ -367,25 +360,25 @@ exports.Carousel = (0, mobx_react_lite_1.observer)(function (properties) {
                         if (onAfterInit) {
                             onAfterInit(swiper);
                         }
-                    }, onClick: function (swiper, e) {
+                    }, onClick: (swiper, e) => {
                         onClick && onClick(swiper, e);
-                    }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, loopAddBlankSlides: false, modules: swiperModules }, additionalProps, displaySettings, { controller: undefined, navigation: navigation, pagination: pagination, scrollbar: scrollbar, onResize: function (swiper) {
+                    }, direction: vertical ? 'vertical' : 'horizontal', loop: loop, threshold: 7, loopAddBlankSlides: false, modules: swiperModules, ...additionalProps, ...displaySettings, controller: undefined, navigation: navigation, pagination: pagination, scrollbar: scrollbar, onResize: (swiper) => {
                         if (additionalProps.onResize) {
                             additionalProps.onResize();
                         }
                         swiper.updateSlidesClasses();
                         attachClasstoLastVisibleSlide();
-                    }, onTransitionEnd: function () {
+                    }, onTransitionEnd: () => {
                         if (additionalProps.onTransitionEnd) {
                             additionalProps.onTransitionEnd();
                         }
                         attachClasstoLastVisibleSlide();
-                    }, children: children.map(function (child) {
+                    }, children: children.map((child) => {
                         if (child != null) {
-                            return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, utilities_1.cloneWithProps)(child, { treePath: treePath }) });
+                            return (0, jsx_runtime_1.jsx)(react_2.SwiperSlide, { children: (0, utilities_1.cloneWithProps)(child, { treePath }) });
                         }
                         else {
                             return null;
                         }
-                    }) })), navigation !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && (function (e) { return onNextButtonClick(e); }), children: nextButton || (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({ icon: vertical ? 'angle-down' : 'angle-right' }, subProps.icon, { name: 'next' })) }) }))] })) })) : null;
+                    }) }), navigation !== false && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__carousel__next-wrapper', { 'ss__carousel__next-wrapper--hidden': hideButtons }), children: (0, jsx_runtime_1.jsx)("div", { className: "ss__carousel__next", ref: navigationNextRef, onClick: onNextButtonClick && ((e) => onNextButtonClick(e)), children: nextButton || (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: vertical ? 'angle-down' : 'angle-right', ...subProps.icon, name: 'next' }) }) }))] }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/Checkbox/Checkbox.js

@@ -1,46 +1,22 @@
 "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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var hooks_1 = require("preact/hooks");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var Icon_1 = require("../../Atoms/Icon");
-var useA11y_1 = require("../../../hooks/useA11y");
-var hooks_2 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
-    var _b, _c;
-    var size = _a.size, color = _a.color, theme = _a.theme, native = _a.native;
-    var pixelSize = isNaN(Number(size)) ? size : "".concat(size, "px");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const Icon_1 = require("../../Atoms/Icon");
+const useA11y_1 = require("../../../hooks/useA11y");
+const hooks_2 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({ size, color, theme, native }) => {
+    const pixelSize = isNaN(Number(size)) ? size : `${size}px`;
     if (!native) {
         return (0, react_1.css)({
             display: 'inline-flex',
@@ -48,14 +24,14 @@ var defaultStyles = function (_a) {
             justifyContent: 'center',
             height: pixelSize,
             width: pixelSize,
-            border: "1px solid ".concat(color || ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) || '#333'),
+            border: `1px solid ${color || theme?.variables?.colors?.primary || '#333'}`,
             '&.ss__checkbox--disabled': {
                 opacity: 0.7,
             },
             '& .ss__checkbox__empty': {
                 display: 'inline-block',
-                width: "calc(".concat(size, " - 30%)"),
-                height: "calc(".concat(size, " - 30%)"),
+                width: `calc(${size} - 30%)`,
+                height: `calc(${size} - 30%)`,
             },
         });
     }
@@ -63,65 +39,68 @@ var defaultStyles = function (_a) {
         return (0, react_1.css)({});
     }
 };
-exports.Checkbox = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
-    var _b, _c;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Checkbox = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         size: '12px',
         startChecked: false,
         disableA11y: false,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('checkbox', globalTheme, defaultProps, properties);
-    var checked = props.checked, color = props.color, disabled = props.disabled, icon = props.icon, iconColor = props.iconColor, onClick = props.onClick, size = props.size, startChecked = props.startChecked, native = props.native, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, theme = props.theme, treePath = props.treePath, lang = props.lang, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, ____ = props.name, additionalProps = __rest(props, ["checked", "color", "disabled", "icon", "iconColor", "onClick", "size", "startChecked", "native", "disableA11y", "disableStyles", "className", "internalClassName", "theme", "treePath", "lang", "style", "styleScript", "themeStyleScript", "name"]);
-    var _d = (0, hooks_2.useCustomComponentOverride)('checkbox', props), overrideElement = _d.overrideElement, shouldRenderDefault = _d.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('checkbox', globalTheme, defaultProps, properties);
+    const { checked, color, disabled, icon, iconColor, onClick, size, startChecked, native, disableA11y, disableStyles, className, internalClassName, theme, treePath, lang, style: _, styleScript: __, themeStyleScript: ___, name: ____, ...additionalProps } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('checkbox', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var pixelSize = isNaN(Number(size)) ? size : "".concat(size, "px");
-    var subProps = {
-        icon: __assign(__assign({ 
+    const pixelSize = isNaN(Number(size)) ? size : `${size}px`;
+    const subProps = {
+        icon: {
             // default props
-            internalClassName: 'ss__checkbox__icon', icon: 'check-thin' }, (0, utilities_1.defined)({
-            color: iconColor || color || ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary),
-            disableStyles: disableStyles,
-            icon: icon,
-            size: pixelSize && "calc(".concat(pixelSize, " - 30%)"),
-        })), { 
+            internalClassName: 'ss__checkbox__icon',
+            icon: 'check-thin',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                color: iconColor || color || theme?.variables?.colors?.primary,
+                disableStyles,
+                icon,
+                size: pixelSize && `calc(${pixelSize} - 30%)`,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var checkedState, setCheckedState;
-    var stateful = checked === undefined;
+    let checkedState, setCheckedState;
+    const stateful = checked === undefined;
     if (stateful) {
-        _a = (0, hooks_1.useState)(startChecked), checkedState = _a[0], setCheckedState = _a[1];
+        [checkedState, setCheckedState] = (0, hooks_1.useState)(startChecked);
     }
     else {
         checkedState = checked;
     }
-    var clickFunc = function (e) {
+    const clickFunc = (e) => {
         if (!disabled) {
             if (stateful) {
                 setCheckedState &&
-                    setCheckedState(function (prev) {
+                    setCheckedState((prev) => {
                         return !prev;
                     });
             }
             onClick && onClick(e);
         }
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         checkbox: {},
     };
     //deep merge with props.lang
-    var _lang = (0, deepmerge_1.default)(defaultLang, lang || {});
-    var mergedLang = (0, hooks_2.useLang)(_lang, {
-        checkedState: checkedState,
-        disabled: disabled,
-    });
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsx)("input", __assign({}, styling, { className: (0, classnames_1.default)('ss__checkbox', 'ss__checkbox--native', { 'ss__checkbox--disabled': disabled, 'ss__checkbox--active': checkedState }, className, internalClassName), type: "checkbox", "aria-checked": checkedState, onClick: function (e) { return clickFunc(e); }, disabled: disabled, checked: checkedState }))) : ((0, jsx_runtime_1.jsx)("span", __assign({}, styling, { className: (0, classnames_1.default)('ss__checkbox', { 'ss__checkbox--disabled': disabled, 'ss__checkbox--active': checkedState }, className, internalClassName), onClick: function (e) { return clickFunc(e); }, ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); }, "aria-disabled": disabled, role: "checkbox", "aria-checked": checkedState }, additionalProps, mergedLang.checkbox.all, { children: checkedState ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon)))) : ((0, jsx_runtime_1.jsx)("span", { className: "ss__checkbox__empty" })) }))) }));
+    const _lang = (0, deepmerge_1.default)(defaultLang, lang || {});
+    const mergedLang = (0, hooks_2.useLang)(_lang, {
+        checkedState,
+        disabled,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsx)("input", { ...styling, className: (0, classnames_1.default)('ss__checkbox', 'ss__checkbox--native', { 'ss__checkbox--disabled': disabled, 'ss__checkbox--active': checkedState }, className, internalClassName), type: "checkbox", "aria-checked": checkedState, onClick: (e) => clickFunc(e), disabled: disabled, checked: checkedState })) : ((0, jsx_runtime_1.jsx)("span", { ...styling, className: (0, classnames_1.default)('ss__checkbox', { 'ss__checkbox--disabled': disabled, 'ss__checkbox--active': checkedState }, className, internalClassName), onClick: (e) => clickFunc(e), ref: (e) => (!disableA11y ? (0, useA11y_1.useA11y)(e) : null), "aria-disabled": disabled, role: "checkbox", "aria-checked": checkedState, ...additionalProps, ...mergedLang.checkbox.all, children: checkedState ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) })) : ((0, jsx_runtime_1.jsx)("span", { className: "ss__checkbox__empty" })) })) }));
 });

package/dist/cjs/components/src/components/Molecules/CustomComponentWrapper/CustomComponentWrapper.js

@@ -1,36 +1,25 @@
 "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.CustomComponentWrapper = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var treePath_1 = require("../../../providers/treePath");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const treePath_1 = require("../../../providers/treePath");
+const defaultStyles = () => {
     return (0, react_1.css)({});
 };
-exports.CustomComponentWrapper = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, treePath_1.useTreePath)();
-    var componentType = properties.type.charAt(0).toUpperCase() + properties.type.slice(1).toLowerCase();
-    var defaultProps = {
+exports.CustomComponentWrapper = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, treePath_1.useTreePath)();
+    const componentType = properties.type.charAt(0).toUpperCase() + properties.type.slice(1).toLowerCase();
+    const defaultProps = {
         treePath: properties.children.props.treePath || globalTreePath || undefined,
     };
-    var props = (0, utilities_1.mergeProps)("customComponent-".concat(componentType), globalTheme, defaultProps, properties);
-    var children = props.children;
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var path = styling['ss-path'];
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { children: (0, utilities_1.cloneWithProps)(children, { treePath: path, theme: globalTheme }) })) }));
+    const props = (0, utilities_1.mergeProps)(`customComponent-${componentType}`, globalTheme, defaultProps, properties);
+    const { children } = props;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const path = styling['ss-path'];
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, children: (0, utilities_1.cloneWithProps)(children, { treePath: path, theme: globalTheme }) }) }));
 });