@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Atoms/Button/Button.js

@@ -1,44 +1,20 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __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.Button = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var useA11y_1 = require("../../../hooks/useA11y");
-var utilities_1 = require("../../../utilities");
-var Icon_1 = require("../Icon");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e;
-    var native = _a.native, color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, theme = _a.theme;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const useA11y_1 = require("../../../hooks/useA11y");
+const utilities_1 = require("../../../utilities");
+const Icon_1 = require("../Icon");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({ native, color, backgroundColor, borderColor, theme }) => {
     // no styling on native
     if (native) {
         return (0, react_1.css)({});
@@ -49,10 +25,10 @@ var defaultStyles = function (_a) {
         gap: '5px',
         padding: '5px 10px',
         position: 'relative',
-        color: 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),
+        color: color || theme?.variables?.colors?.primary,
         outline: 0,
         backgroundColor: backgroundColor || '#fff',
-        border: "1px solid ".concat(borderColor || color || ((_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) || '#333'),
+        border: `1px solid ${borderColor || color || theme?.variables?.colors?.primary || '#333'}`,
         '&:not(.ss__button--disabled):hover': {
             cursor: 'pointer',
         },
@@ -70,38 +46,49 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.Button = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Button = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         disableA11y: false,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('button', globalTheme, defaultProps, properties);
-    var content = props.content, children = props.children, disabled = props.disabled, native = props.native, onClick = props.onClick, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, icon = props.icon, lang = props.lang, treePath = props.treePath, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, additionalProps = __rest(props, ["content", "children", "disabled", "native", "onClick", "disableA11y", "disableStyles", "className", "internalClassName", "icon", "lang", "treePath", "style", "styleScript", "themeStyleScript"]);
-    var _f = (0, hooks_1.useCustomComponentOverride)('button', props), overrideElement = _f.overrideElement, shouldRenderDefault = _f.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('button', globalTheme, defaultProps, properties);
+    const { content, children, disabled, native, onClick, disableA11y, disableStyles, className, internalClassName, icon, lang, treePath, style: _, styleScript: __, themeStyleScript: ___, ...additionalProps } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('button', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        icon: __assign(__assign({ internalClassName: 'ss__button__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const subProps = {
+        icon: {
+            internalClassName: 'ss__button__icon',
+            // default props
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const elementProps = {
+        ...styling,
+        className: (0, classnames_1.default)('ss__button', { 'ss__button--native': native, 'ss__button--disabled': disabled }, className, internalClassName),
+        disabled,
+        onClick: (e) => !disabled && onClick && onClick(e),
+        ...additionalProps,
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var elementProps = __assign(__assign(__assign({}, styling), { className: (0, classnames_1.default)('ss__button', { 'ss__button--native': native, 'ss__button--disabled': disabled }, className, internalClassName), disabled: disabled, onClick: function (e) { return !disabled && onClick && onClick(e); } }), additionalProps);
-    var a11yProps = {
-        ref: function (e) { return (0, useA11y_1.useA11y)(e); },
+    const a11yProps = {
+        ref: (e) => (0, useA11y_1.useA11y)(e),
     };
     //initialize lang
-    var defaultLang = {};
+    const defaultLang = {};
     //deep merge with props.lang
-    var langs = (0, deepmerge_1.default)(defaultLang, lang || {});
-    var mergedLang = (0, hooks_1.useLang)(langs, {});
+    const langs = (0, deepmerge_1.default)(defaultLang, lang || {});
+    const mergedLang = (0, hooks_1.useLang)(langs, {}, { activeBreakpoint: globalTheme?.activeBreakpoint });
     // @ts-ignore - additionalProps may contain dangerouslySetInnerHTML which is fine to spread on the element, but doesn't fit the ButtonProps type definition so we need to ignore it here.
-    var hasDangerouslySetInnerHTML = Boolean(additionalProps.dangerouslySetInnerHTML);
-    return content || children || icon || ((_a = lang === null || lang === void 0 ? void 0 : lang.button) === null || _a === void 0 ? void 0 : _a.value) || hasDangerouslySetInnerHTML ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsxs)("button", __assign({}, elementProps, { children: [(0, jsx_runtime_1.jsxs)("span", __assign({ className: "ss__button__content" }, (_b = mergedLang.button) === null || _b === void 0 ? void 0 : _b.all, { children: [(0, utilities_1.cloneWithProps)(content, { treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { treePath: treePath })] })), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon)))] }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({}, (!disableA11y ? a11yProps : {}), { role: 'button', "aria-disabled": disabled }, elementProps, (_c = mergedLang.button) === null || _c === void 0 ? void 0 : _c.attributes, { children: [content || children || ((_d = mergedLang.button) === null || _d === void 0 ? void 0 : _d.value) ? ((0, jsx_runtime_1.jsxs)("span", __assign({ className: "ss__button__content" }, (_e = mergedLang.button) === null || _e === void 0 ? void 0 : _e.value, { children: [(0, utilities_1.cloneWithProps)(content, { treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { treePath: treePath })] }))) : undefined, icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon)))] }))) })) : null;
+    const hasDangerouslySetInnerHTML = Boolean(additionalProps.dangerouslySetInnerHTML);
+    return content || children || icon || lang?.button?.value || hasDangerouslySetInnerHTML ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsxs)("button", { ...elementProps, children: [(0, jsx_runtime_1.jsxs)("span", { className: "ss__button__content", ...mergedLang.button?.all, children: [(0, utilities_1.cloneWithProps)(content, { treePath }), (0, utilities_1.cloneWithProps)(children, { treePath })] }), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) })] })) : ((0, jsx_runtime_1.jsxs)("div", { ...(!disableA11y ? a11yProps : {}), role: 'button', "aria-disabled": disabled, ...elementProps, ...mergedLang.button?.attributes, children: [content || children || mergedLang.button?.value ? ((0, jsx_runtime_1.jsxs)("span", { className: "ss__button__content", ...mergedLang.button?.value, children: [(0, utilities_1.cloneWithProps)(content, { treePath }), (0, utilities_1.cloneWithProps)(children, { treePath })] })) : undefined, icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) })] })) })) : null;
 });

package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.js

@@ -1,32 +1,20 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var compat_1 = require("preact/compat");
-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 providers_1 = require("../../../providers");
-var hooks_2 = require("../../../hooks");
-var utilities_1 = require("../../../utilities");
-var useA11y_1 = require("../../../hooks/useA11y");
-var defaultStyles = function (_a) {
-    var disableOverlay = _a.disableOverlay;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const compat_1 = require("preact/compat");
+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 providers_1 = require("../../../providers");
+const hooks_2 = require("../../../hooks");
+const utilities_1 = require("../../../utilities");
+const useA11y_1 = require("../../../hooks/useA11y");
+const defaultStyles = ({ disableOverlay }) => {
     return (0, react_1.css)({
         position: 'relative',
         '&.ss__dropdown--open, &.ss__dropdown__portal--open': {
@@ -37,7 +25,7 @@ var defaultStyles = function (_a) {
             },
         },
         '.ss__dropdown__button': {
-            cursor: "".concat(disableOverlay ? 'default' : 'pointer'),
+            cursor: `${disableOverlay ? 'default' : 'pointer'}`,
         },
         '.ss__dropdown__content': {
             backgroundColor: '#fff',
@@ -50,37 +38,36 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.Dropdown = (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.Dropdown = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         startOpen: false,
         disableA11y: false,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('dropdown', globalTheme, defaultProps, properties);
-    var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, toggleOnHover = props.toggleOnHover, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, disableClick = props.disableClick, onClick = props.onClick, onToggle = props.onToggle, focusTrapContent = props.focusTrapContent, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, usePortal = props.usePortal;
-    var _b = (0, hooks_2.useCustomComponentOverride)('dropdown', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('dropdown', globalTheme, defaultProps, properties);
+    const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('dropdown', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var dropdownOpen, setDropdownOpen;
-    var stateful = open === undefined;
+    let dropdownOpen, setDropdownOpen;
+    const stateful = open === undefined;
     if (stateful) {
-        _a = (0, hooks_1.useState)(startOpen), dropdownOpen = _a[0], setDropdownOpen = _a[1];
+        [dropdownOpen, setDropdownOpen] = (0, hooks_1.useState)(startOpen);
     }
     else {
         dropdownOpen = open;
     }
     // state to track touch interactions
-    var _c = (0, hooks_1.useState)(false), isTouchInteraction = _c[0], setIsTouchInteraction = _c[1];
-    var buttonRef = (0, hooks_1.useRef)(null);
-    var contentRef = (0, hooks_1.useRef)(null);
-    var _d = (0, hooks_1.useState)({ top: 0, left: 0, width: 0 }), coords = _d[0], setCoords = _d[1];
-    var innerRef;
+    const [isTouchInteraction, setIsTouchInteraction] = (0, hooks_1.useState)(false);
+    const buttonRef = (0, hooks_1.useRef)(null);
+    const contentRef = (0, hooks_1.useRef)(null);
+    const [coords, setCoords] = (0, hooks_1.useState)({ top: 0, left: 0, width: 0 });
+    let innerRef;
     if (!disableClickOutside) {
-        innerRef = (0, hooks_2.useClickOutside)(function (e) {
+        innerRef = (0, hooks_2.useClickOutside)((e) => {
             if (usePortal && contentRef.current && contentRef.current.contains(e.target)) {
                 return;
             }
@@ -92,11 +79,11 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
             }
         });
     }
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         if (usePortal && dropdownOpen) {
-            var updateCoords_1 = function () {
+            const updateCoords = () => {
                 if (buttonRef.current) {
-                    var rect = buttonRef.current.getBoundingClientRect();
+                    const rect = buttonRef.current.getBoundingClientRect();
                     setCoords({
                         top: rect.bottom + window.scrollY,
                         left: rect.left + window.scrollX,
@@ -104,20 +91,20 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
                     });
                 }
             };
-            updateCoords_1();
-            window.addEventListener('resize', updateCoords_1);
-            window.addEventListener('scroll', updateCoords_1, true);
-            return function () {
-                window.removeEventListener('resize', updateCoords_1);
-                window.removeEventListener('scroll', updateCoords_1, true);
+            updateCoords();
+            window.addEventListener('resize', updateCoords);
+            window.addEventListener('scroll', updateCoords, true);
+            return () => {
+                window.removeEventListener('resize', updateCoords);
+                window.removeEventListener('scroll', updateCoords, true);
             };
         }
     }, [usePortal, dropdownOpen]);
-    var toggleOpenDropdown = function (e, state) {
+    const toggleOpenDropdown = (e, state) => {
         if (stateful) {
             setDropdownOpen &&
-                setDropdownOpen(function (prev) {
-                    var newState = state !== null && state !== void 0 ? state : !prev;
+                setDropdownOpen((prev) => {
+                    const newState = state ?? !prev;
                     if (newState != prev) {
                         onToggle && onToggle(e, newState);
                     }
@@ -125,10 +112,10 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
                 });
         }
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var hoverProps = {
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const hoverProps = {
         onMouseEnter: (toggleOnHover || onMouseEnter) &&
-            (function (e) {
+            ((e) => {
                 // skip if it's a touch interaction
                 if (isTouchInteraction)
                     return;
@@ -138,7 +125,7 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
                 onMouseEnter && onMouseEnter(e);
             }),
         onMouseLeave: (toggleOnHover || onMouseLeave) &&
-            (function (e) {
+            ((e) => {
                 // skip if it's a touch interaction
                 if (isTouchInteraction)
                     return;
@@ -148,10 +135,10 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
                 onMouseLeave && onMouseLeave(e);
             }),
     };
-    var contentElement = ((0, jsx_runtime_1.jsxs)("div", { className: "ss__dropdown__content", ref: function (e) {
+    const contentElement = ((0, jsx_runtime_1.jsxs)("div", { className: `ss__dropdown__content`, ref: (e) => {
             contentRef.current = e;
             if (!disableA11y) {
-                (0, useA11y_1.useA11y)(e, 0, Boolean(focusTrapContent), function (e) {
+                (0, useA11y_1.useA11y)(e, 0, Boolean(focusTrapContent), (e) => {
                     if (stateful) {
                         toggleOpenDropdown(e);
                     }
@@ -160,25 +147,25 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
                     }
                 });
             }
-        }, children: [(0, utilities_1.cloneWithProps)(content, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath: treePath })] }));
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__dropdown', { 'ss__dropdown--open': dropdownOpen }, className, internalClassName), ref: innerRef }, hoverProps, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__dropdown__button", ref: function (e) {
+        }, children: [(0, utilities_1.cloneWithProps)(content, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath }), (0, utilities_1.cloneWithProps)(children, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath })] }));
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__dropdown', { 'ss__dropdown--open': dropdownOpen }, className, internalClassName), ref: innerRef, ...hoverProps, children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__dropdown__button", ref: (e) => {
                         buttonRef.current = e;
                         if (!disableA11y)
                             (0, useA11y_1.useA11y)(e);
-                    }, "aria-expanded": dropdownOpen, role: "button", onTouchStart: function () {
+                    }, "aria-expanded": dropdownOpen, role: "button", onTouchStart: () => {
                         // mark this as a touch interaction to avoid hover state conflicts
                         setIsTouchInteraction(true);
-                    }, onClick: function (e) {
+                    }, onClick: (e) => {
                         if (!disabled && !disableClick) {
                             toggleOpenDropdown(e);
                             onClick && onClick(e);
                         }
                         // reset touch interaction after a short delay
                         // this gives time for the click handler to complete before allowing hover events again
-                        setTimeout(function () {
+                        setTimeout(() => {
                             setIsTouchInteraction(false);
                         }, 300);
-                    }, children: (0, utilities_1.cloneWithProps)(button, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath: treePath }) }), !usePortal
+                    }, children: (0, utilities_1.cloneWithProps)(button, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath }) }), !usePortal
                     ? (content || children) && contentElement
                     : (content || children) &&
                         (0, compat_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__dropdown__portal', className, internalClassName, { 'ss__dropdown__portal--open': dropdownOpen }), css: styling.css, style: {
@@ -188,5 +175,5 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
                                 width: coords.width,
                                 zIndex: 9999,
                                 pointerEvents: dropdownOpen ? 'auto' : 'none',
-                            }, children: contentElement }), document.body)] })) }));
+                            }, children: contentElement }), document.body)] }) }));
 });

package/dist/cjs/components/src/components/Atoms/FormattedNumber/FormattedNumber.js

@@ -1,35 +1,24 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormattedNumber = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const defaultStyles = () => {
     return (0, react_1.css)({});
 };
-exports.FormattedNumber = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.FormattedNumber = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         symbol: '',
         decimalPlaces: 3,
         padDecimalPlaces: true,
@@ -38,20 +27,20 @@ exports.FormattedNumber = (0, mobx_react_lite_1.observer)(function (properties)
         symbolAfter: true,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('formattedNumber', globalTheme, defaultProps, properties);
-    var value = props.value, symbol = props.symbol, decimalPlaces = props.decimalPlaces, padDecimalPlaces = props.padDecimalPlaces, thousandsSeparator = props.thousandsSeparator, decimalSeparator = props.decimalSeparator, symbolAfter = props.symbolAfter, className = props.className, internalClassName = props.internalClassName, raw = props.raw;
-    var _a = (0, hooks_1.useCustomComponentOverride)('formattedNumber', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('formattedNumber', globalTheme, defaultProps, properties);
+    const { value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, className, internalClassName, raw } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('formattedNumber', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var formattedNumber = snap_toolbox_1.filters.formatNumber(value, {
-        symbol: symbol,
-        decimalPlaces: decimalPlaces,
-        padDecimalPlaces: padDecimalPlaces,
-        thousandsSeparator: thousandsSeparator,
-        decimalSeparator: decimalSeparator,
-        symbolAfter: symbolAfter,
+    const formattedNumber = snap_toolbox_1.filters.formatNumber(value, {
+        symbol,
+        decimalPlaces,
+        padDecimalPlaces,
+        thousandsSeparator,
+        decimalSeparator,
+        symbolAfter,
     });
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    return raw ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedNumber })) : ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: (0, classnames_1.default)('ss__formatted-number', className, internalClassName) }, styling, { children: formattedNumber })) }));
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return raw ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedNumber })) : ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('ss__formatted-number', className, internalClassName), ...styling, children: formattedNumber }) }));
 });

package/dist/cjs/components/src/components/Atoms/Icon/Icon.js

@@ -1,81 +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);
-};
-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.Icon = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var paths_1 = require("./paths");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e;
-    var color = _a.color, fill = _a.fill, stroke = _a.stroke, theme = _a.theme, width = _a.width, height = _a.height, size = _a.size;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const paths_1 = require("./paths");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const defaultStyles = ({ color, fill, stroke, theme, width, height, size }) => {
     return (0, react_1.css)({
-        color: color || fill || ((_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),
-        fill: fill || color || ((_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),
+        color: color || fill || theme?.variables?.colors?.primary,
+        fill: fill || color || theme?.variables?.colors?.primary,
         stroke: stroke,
-        width: isNaN(Number(width || size)) ? width || size : "".concat(width || size, "px"),
-        height: isNaN(Number(height || size)) ? height || size : "".concat(height || size, "px"),
+        width: isNaN(Number(width || size)) ? width || size : `${width || size}px`,
+        height: isNaN(Number(height || size)) ? height || size : `${height || size}px`,
         position: 'relative',
     });
 };
-exports.Icon = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Icon = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         size: '16px',
         viewBox: '0 0 56 56',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('icon', globalTheme, defaultProps, properties);
-    var color = props.color, icon = props.icon, fill = props.fill, path = props.path, children = props.children, size = props.size, width = props.width, title = props.title, height = props.height, viewBox = props.viewBox, svg = props.svg, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, ____ = props.name, _____ = props.treePath, otherProps = __rest(props, ["color", "icon", "fill", "path", "children", "size", "width", "title", "height", "viewBox", "svg", "disableStyles", "className", "internalClassName", "style", "styleScript", "themeStyleScript", "name", "treePath"]);
-    var _c = (0, hooks_1.useCustomComponentOverride)('icon', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('icon', globalTheme, defaultProps, properties);
+    const { color, icon, fill, path, children, size, width, title, height, viewBox, svg, disableStyles, className, internalClassName, style: _, styleScript: __, themeStyleScript: ___, name: ____, treePath: _____, ...otherProps } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('icon', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var iconClassNames = (0, classnames_1.default)('ss__icon', icon && !svg ? "ss__icon--".concat(icon) : null, className, internalClassName);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const iconClassNames = (0, classnames_1.default)('ss__icon', icon && !svg ? `ss__icon--${icon}` : null, className, internalClassName);
     if (svg) {
         // if the provided svg already has a className or class prop, we need to merge it with the one generated from props
-        var existingSvgClassName = ((_a = svg === null || svg === void 0 ? void 0 : svg.props) === null || _a === void 0 ? void 0 : _a.className) || ((_b = svg === null || svg === void 0 ? void 0 : svg.props) === null || _b === void 0 ? void 0 : _b.class);
-        var svgProps = __assign(__assign(__assign({}, styling), { className: (0, classnames_1.default)(iconClassNames, existingSvgClassName) }), otherProps);
+        const existingSvgClassName = svg?.props?.className || svg?.props?.class;
+        const svgProps = {
+            ...styling,
+            className: (0, classnames_1.default)(iconClassNames, existingSvgClassName),
+            ...otherProps,
+        };
         if (disableStyles) {
             svgProps.width = width || size;
             svgProps.height = height || size;
         }
-        return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, react_1.jsx)(svg.type, __assign(__assign(__assign({}, svg.props), svgProps), { children: svg.props.children })) }));
+        return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, react_1.jsx)(svg.type, { ...svg.props, ...svgProps, children: svg.props.children }) }));
     }
-    var iconPath = paths_1.iconPaths[icon] || path;
-    var pathType = typeof iconPath;
-    return children || (iconPath && (pathType === 'string' || (pathType === 'object' && Array.isArray(iconPath)))) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({}, styling, { className: iconClassNames, viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles ? width || size : undefined, height: disableStyles ? height || size : undefined }, otherProps, { children: [title ? (0, jsx_runtime_1.jsx)("title", { children: title }) : null, (function () {
+    const iconPath = paths_1.iconPaths[icon] || path;
+    const pathType = typeof iconPath;
+    return children || (iconPath && (pathType === 'string' || (pathType === 'object' && Array.isArray(iconPath)))) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("svg", { ...styling, className: iconClassNames, viewBox: viewBox, xmlns: "http://www.w3.org/2000/svg", width: disableStyles ? width || size : undefined, height: disableStyles ? height || size : undefined, ...otherProps, children: [title ? (0, jsx_runtime_1.jsx)("title", { children: title }) : null, (() => {
                     if (children) {
                         return children;
                     }
@@ -83,7 +62,7 @@ exports.Icon = (0, mobx_react_lite_1.observer)(function (properties) {
                         return (0, jsx_runtime_1.jsx)("path", { fill: disableStyles ? fill || color || undefined : undefined, d: iconPath });
                     }
                     else if (iconPath && pathType === 'object' && Array.isArray(iconPath)) {
-                        return iconPath.map(function (p, i) { return (0, jsx_runtime_1.jsx)(p.type, __assign({}, p.attributes), i); });
+                        return iconPath.map((p, i) => (0, jsx_runtime_1.jsx)(p.type, { ...p.attributes }, i));
                     }
-                })()] })) })) : null;
+                })()] }) })) : null;
 });

package/dist/cjs/components/src/components/Atoms/Icon/paths.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iconPaths = void 0;
-var sharedPaths = {
+const sharedPaths = {
     layoutGrid2: 'M25.846 34.461v12.923c0 2.356-1.952 4.308-4.308 4.308h-17.231c-2.356 0-4.308-1.952-4.308-4.308v-12.923c0-2.356 1.952-4.308 4.308-4.308h17.231c2.356 0 4.308 1.952 4.308 4.308zM25.846 8.615v12.923c0 2.356-1.952 4.308-4.308 4.308h-17.231c-2.356 0-4.308-1.952-4.308-4.308v-12.923c0-2.356 1.952-4.308 4.308-4.308h17.231c2.356 0 4.308 1.952 4.308 4.308zM56 34.461v12.923c0 2.356-1.952 4.308-4.308 4.308h-17.231c-2.356 0-4.308-1.952-4.308-4.308v-12.923c0-2.356 1.952-4.308 4.308-4.308h17.231c2.356 0 4.308 1.952 4.308 4.308zM56 8.615v12.923c0 2.356-1.952 4.308-4.308 4.308h-17.231c-2.356 0-4.308-1.952-4.308-4.308v-12.923c0-2.356 1.952-4.308 4.308-4.308h17.231c2.356 0 4.308 1.952 4.308 4.308z',
     layoutGrid3: 'M16 41v6c0 1.656-1.344 3-3 3h-10c-1.656 0-3-1.344-3-3v-6c0-1.656 1.344-3 3-3h10c1.656 0 3 1.344 3 3zM16 25v6c0 1.656-1.344 3-3 3h-10c-1.656 0-3-1.344-3-3v-6c0-1.656 1.344-3 3-3h10c1.656 0 3 1.344 3 3zM36 41v6c0 1.656-1.344 3-3 3h-10c-1.656 0-3-1.344-3-3v-6c0-1.656 1.344-3 3-3h10c1.656 0 3 1.344 3 3zM16 9v6c0 1.656-1.344 3-3 3h-10c-1.656 0-3-1.344-3-3v-6c0-1.656 1.344-3 3-3h10c1.656 0 3 1.344 3 3zM36 25v6c0 1.656-1.344 3-3 3h-10c-1.656 0-3-1.344-3-3v-6c0-1.656 1.344-3 3-3h10c1.656 0 3 1.344 3 3zM56 41v6c0 1.656-1.344 3-3 3h-10c-1.656 0-3-1.344-3-3v-6c0-1.656 1.344-3 3-3h10c1.656 0 3 1.344 3 3zM36 9v6c0 1.656-1.344 3-3 3h-10c-1.656 0-3-1.344-3-3v-6c0-1.656 1.344-3 3-3h10c1.656 0 3 1.344 3 3zM56 25v6c0 1.656-1.344 3-3 3h-10c-1.656 0-3-1.344-3-3v-6c0-1.656 1.344-3 3-3h10c1.656 0 3 1.344 3 3zM56 9v6c0 1.656-1.344 3-3 3h-10c-1.656 0-3-1.344-3-3v-6c0-1.656 1.344-3 3-3h10c1.656 0 3 1.344 3 3z',
 };