@athoscommerce/snap-preact 1.9.0 → 1.10.0

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

@@ -1,32 +1,21 @@
 "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.SortBy = 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 classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var Select_1 = require("../Select");
-var RadioList_1 = require("../RadioList");
-var List_1 = require("../List");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-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 classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Select_1 = require("../Select");
+const RadioList_1 = require("../RadioList");
+const List_1 = require("../List");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = () => {
     return (0, react_1.css)({
         '.ss__button__content': {
             display: 'flex',
@@ -34,68 +23,79 @@ var defaultStyles = function () {
         },
     });
 };
-exports.SortBy = (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.SortBy = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         label: 'Sort By',
         type: 'dropdown',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('sortBy', globalTheme, defaultProps, properties);
-    var sorting = props.sorting, type = props.type, controller = props.controller, hideLabel = props.hideLabel, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var label = props.label;
-    var _c = (0, hooks_1.useCustomComponentOverride)('sortBy', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('sortBy', globalTheme, defaultProps, properties);
+    const { sorting, type, controller, hideLabel, disableStyles, className, internalClassName, treePath } = props;
+    let label = props.label;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('sortBy', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var store = sorting || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.sorting);
-    var subProps = {
-        Select: __assign(__assign({}, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const store = sorting || controller?.store?.sorting;
+    const subProps = {
+        Select: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        RadioList: __assign(__assign({}, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        RadioList: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        List: __assign(__assign({ multiSelect: false, hideOptionCheckboxes: true, horizontal: true }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        List: {
+            multiSelect: false,
+            hideOptionCheckboxes: true,
+            horizontal: true,
+            // 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,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         label: {
             value: label,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
     if (hideLabel) {
         delete lang.label.value;
         label = undefined;
     }
     // options can be an Array or ObservableArray - but should have length
-    return (store === null || store === void 0 ? void 0 : store.current) && typeof (store === null || store === void 0 ? void 0 : store.options) == 'object' && ((_b = store.options) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [(type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'dropdown' && ((0, jsx_runtime_1.jsx)(Select_1.Select, __assign({}, styling, { className: (0, classnames_1.default)('ss__sortby', 'ss__sortby__select', className, internalClassName) }, subProps.Select, { label: label, options: store.options, selected: store.current, onSelect: function (e, selection) {
-                    var _a;
-                    (_a = selection === null || selection === void 0 ? void 0 : selection.url) === null || _a === void 0 ? void 0 : _a.go();
+    return store?.current && typeof store?.options == 'object' && store.options?.length ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [type?.toLowerCase() == 'dropdown' && ((0, jsx_runtime_1.jsx)(Select_1.Select, { ...styling, className: (0, classnames_1.default)('ss__sortby', 'ss__sortby__select', className, internalClassName), ...subProps.Select, label: label, options: store.options, selected: store.current, onSelect: (e, selection) => {
+                    selection?.url?.go();
                 }, lang: {
                     buttonLabel: lang.label,
-                } }))), (type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'list' && ((0, jsx_runtime_1.jsx)(List_1.List, __assign({}, styling, { className: (0, classnames_1.default)('ss__sortby', 'ss__sortby__list', className, internalClassName) }, subProps.List, { options: store.options, selected: store.current, titleText: label, onSelect: function (e, selection) {
-                    var _a;
-                    (_a = selection === null || selection === void 0 ? void 0 : selection.url) === null || _a === void 0 ? void 0 : _a.go();
+                } })), type?.toLowerCase() == 'list' && ((0, jsx_runtime_1.jsx)(List_1.List, { ...styling, className: (0, classnames_1.default)('ss__sortby', 'ss__sortby__list', className, internalClassName), ...subProps.List, options: store.options, selected: store.current, titleText: label, onSelect: (e, selection) => {
+                    selection?.url?.go();
                 }, lang: {
                     title: lang.label,
-                } }))), (type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'radio' && ((0, jsx_runtime_1.jsx)(RadioList_1.RadioList, __assign({}, styling, { className: (0, classnames_1.default)('ss__sortby', 'ss__sortby__radioList', className, internalClassName) }, subProps.RadioList, { options: store.options, selected: store.current, titleText: label, onSelect: function (e, selection) {
-                    var _a;
-                    (_a = selection === null || selection === void 0 ? void 0 : selection.url) === null || _a === void 0 ? void 0 : _a.go();
+                } })), type?.toLowerCase() == 'radio' && ((0, jsx_runtime_1.jsx)(RadioList_1.RadioList, { ...styling, className: (0, classnames_1.default)('ss__sortby', 'ss__sortby__radioList', className, internalClassName), ...subProps.RadioList, options: store.options, selected: store.current, titleText: label, onSelect: (e, selection) => {
+                    selection?.url?.go();
                 }, lang: {
                     title: lang.label,
-                } })))] })) : null;
+                } }))] })) : null;
 });

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

@@ -1,39 +1,26 @@
 "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.Swatches = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var classnames_1 = __importDefault(require("classnames"));
-var react_1 = require("@emotion/react");
-var providers_1 = require("../../../providers");
-var hooks_1 = require("../../../hooks");
-var utilities_1 = require("../../../utilities");
-var Grid_1 = require("../Grid");
-var Image_1 = require("../../Atoms/Image");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var colord_1 = require("colord");
-var names_1 = __importDefault(require("colord/plugins/names"));
-var Slideshow_1 = require("../Slideshow");
-var hooks_2 = require("preact/hooks");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("@emotion/react");
+const providers_1 = require("../../../providers");
+const hooks_1 = require("../../../hooks");
+const utilities_1 = require("../../../utilities");
+const Grid_1 = require("../Grid");
+const Image_1 = require("../../Atoms/Image");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const colord_1 = require("colord");
+const names_1 = __importDefault(require("colord/plugins/names"));
+const Slideshow_1 = require("../Slideshow");
+const hooks_2 = require("preact/hooks");
 (0, colord_1.extend)([names_1.default]);
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e;
-    var theme = _a.theme;
+const defaultStyles = ({ theme }) => {
     return (0, react_1.css)({
         '.ss__swatches__slideshow__swatch': {
             boxSizing: 'content-box',
@@ -42,7 +29,7 @@ var defaultStyles = function (_a) {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
-            border: "1px solid ".concat(((_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 ${theme?.variables?.colors?.primary || '#333'}`,
             aspectRatio: '1/1',
             flexDirection: 'column',
             '.ss__swatches__slideshow__swatch__inner': {
@@ -53,7 +40,7 @@ var defaultStyles = function (_a) {
                 width: '100%',
             },
             '&.ss__swatches__slideshow__swatch--selected': {
-                border: "2px solid ".concat(((_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: `2px solid ${theme?.variables?.colors?.primary || '#333'}`,
             },
             '&.ss__swatches__slideshow__swatch--disabled:before, &.ss__swatches__slideshow__swatch--unavailable:before': {
                 content: '""',
@@ -82,10 +69,10 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.Swatches = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultCarouselBreakpoints = {
+exports.Swatches = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultCarouselBreakpoints = {
         0: {
             carousel: {
                 slidesPerView: 3,
@@ -108,70 +95,99 @@ exports.Swatches = (0, mobx_react_lite_1.observer)(function (properties) {
             },
         },
     };
-    var defaultProps = {
+    const defaultProps = {
         // default props
         type: 'slideshow',
         hideLabels: true,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('swatches', globalTheme, defaultProps, properties);
-    var breakpoints = props.breakpoints || (props.type == 'slideshow' ? defaultCarouselBreakpoints : {});
-    var displaySettings = (0, hooks_1.useDisplaySettings)(breakpoints);
+    let props = (0, utilities_1.mergeProps)('swatches', globalTheme, defaultProps, properties);
+    const breakpoints = props.breakpoints || (props.type == 'slideshow' ? defaultCarouselBreakpoints : {});
+    const displaySettings = (0, hooks_1.useDisplaySettings)(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; } });
-        props = __assign(__assign(__assign({}, props), displaySettings), { theme: theme });
+        const theme = (0, deepmerge_1.default)(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+        props = {
+            ...props,
+            ...displaySettings,
+            theme,
+        };
     }
-    var onSelect = props.onSelect, disabled = props.disabled, options = props.options, hideLabels = props.hideLabels, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, type = props.type, slideshow = props.slideshow, grid = props.grid, treePath = props.treePath;
-    var _a = (0, hooks_1.useCustomComponentOverride)('swatches', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const { onSelect, disabled, options, hideLabels, disableStyles, className, internalClassName, type, slideshow, grid, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('swatches', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        slideshow: __assign(__assign(__assign({ 
+    const subProps = {
+        slideshow: {
             // default props
-            internalClassName: 'ss__swatches__slideshow', loop: false, slidesToShow: 6, slidesToMove: 1, gap: 8, showNavigation: true, showPagination: false, autoPlay: false }, slideshow), (0, utilities_1.defined)({
-            breakpoints: breakpoints,
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__swatches__slideshow',
+            loop: false,
+            slidesToShow: 6, // Add explicit slidesToShow
+            slidesToMove: 1, // Add explicit slidesToMove
+            gap: 8, // Add smaller gap
+            showNavigation: true, // Enable navigation
+            showPagination: false, // Disable pagination for swatches
+            autoPlay: false, // Disable autoplay
+            ...slideshow,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                breakpoints,
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        grid: __assign(__assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        grid: {
             // default props
-            internalClassName: 'ss__swatches__grid', hideLabels: hideLabels, overflowButtonInGrid: true, disableOverflowAction: true, rows: 1, columns: 6 }, grid), (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__swatches__grid',
+            hideLabels: hideLabels,
+            overflowButtonInGrid: true,
+            disableOverflowAction: true,
+            rows: 1,
+            columns: 6,
+            ...grid,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        image: __assign(__assign({ 
+            theme: props?.theme,
+            treePath,
+        },
+        image: {
             // default props
-            internalClassName: 'ss__swatches__image' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__swatches__image',
+            // 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,
+        },
     };
-    var selected = props.selected;
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const selected = props.selected;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     // selection state
-    var _b = (0, hooks_2.useState)(selected || undefined), selection = _b[0], setSelection = _b[1];
-    var makeSelection = function (e, option) {
+    const [selection, setSelection] = (0, hooks_2.useState)(selected || undefined);
+    const makeSelection = (e, option) => {
         if (onSelect) {
             onSelect(e, option);
         }
         setSelection(option);
     };
-    var slidesArray = [];
+    const slidesArray = [];
     if (type == 'slideshow') {
         {
-            options.forEach(function (option) {
-                var _a, _b, _c, _d;
-                var label = option.label;
-                var selected = (selection === null || selection === void 0 ? void 0 : selection.value) == option.value;
-                var isDark = false;
-                var colorString = ((_a = option.background) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || (!option.backgroundImageUrl ? (_b = option.value) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase() : null);
+            options.forEach((option) => {
+                const label = option.label;
+                const selected = selection?.value == option.value;
+                let isDark = false;
+                const colorString = option.background?.toLowerCase() || (!option.backgroundImageUrl ? option.value?.toString().toLowerCase() : null);
                 if (colorString) {
                     try {
-                        var color = (0, colord_1.colord)(colorString);
+                        const color = (0, colord_1.colord)(colorString);
                         if (color.isValid()) {
                             isDark = color.isDark();
                         }
@@ -179,18 +195,18 @@ exports.Swatches = (0, mobx_react_lite_1.observer)(function (properties) {
                     catch (err) { }
                 }
                 slidesArray.push({
-                    onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); },
-                    content: ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("ss__swatches__slideshow__swatch", {
+                    onClick: (e) => !disabled && !option?.disabled && makeSelection(e, option),
+                    content: ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(`ss__swatches__slideshow__swatch`, {
                             'ss__swatches__slideshow__swatch--selected': selected,
-                            'ss__swatches__slideshow__swatch--disabled': option === null || option === void 0 ? void 0 : option.disabled,
-                            'ss__swatches__slideshow__swatch--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
+                            'ss__swatches__slideshow__swatch--disabled': option?.disabled,
+                            'ss__swatches__slideshow__swatch--unavailable': option?.available === false,
                             'ss__swatches__slideshow__swatch--dark': isDark,
-                        }), title: label, ref: function (e) { return (0, hooks_1.useA11y)(e); }, "aria-disabled": option.disabled || (option === null || option === void 0 ? void 0 : option.available) === false, role: "option", "aria-selected": selected, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("ss__swatches__slideshow__swatch__inner", "ss__swatches__slideshow__swatch__inner--".concat(snap_toolbox_1.filters.handleize((_c = option.value) === null || _c === void 0 ? void 0 : _c.toString()))), style: { background: option.background ? option.background : option.backgroundImageUrl ? "" : option.value }, children: [!option.background && option.backgroundImageUrl ? ((0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image, { src: option.backgroundImageUrl, alt: option.label || ((_d = option.value) === null || _d === void 0 ? void 0 : _d.toString()) }))) : null, !hideLabels && (0, jsx_runtime_1.jsx)("span", { className: "ss__swatches__slideshow__swatch__value", children: label || option.value })] }) })),
+                        }), title: label, ref: (e) => (0, hooks_1.useA11y)(e), "aria-disabled": option.disabled || option?.available === false, role: "option", "aria-selected": selected, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(`ss__swatches__slideshow__swatch__inner`, `ss__swatches__slideshow__swatch__inner--${snap_toolbox_1.filters.handleize(option.value?.toString())}`), style: { background: option.background ? option.background : option.backgroundImageUrl ? `` : option.value }, children: [!option.background && option.backgroundImageUrl ? ((0, jsx_runtime_1.jsx)(Image_1.Image, { ...subProps.image, src: option.backgroundImageUrl, alt: option.label || option.value?.toString() })) : null, !hideLabels && (0, jsx_runtime_1.jsx)("span", { className: "ss__swatches__slideshow__swatch__value", children: label || option.value })] }) })),
                 });
             });
         }
     }
-    return typeof options == 'object' && (options === null || options === void 0 ? void 0 : options.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__swatches', className, internalClassName), children: type == 'slideshow' ? ((0, jsx_runtime_1.jsx)(Slideshow_1.Slideshow, __assign({ slides: slidesArray }, subProps.slideshow))) : ((0, jsx_runtime_1.jsx)(Grid_1.Grid, __assign({}, subProps.grid, { options: options, onSelect: function (e, option) {
+    return typeof options == 'object' && options?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__swatches', className, internalClassName), children: type == 'slideshow' ? ((0, jsx_runtime_1.jsx)(Slideshow_1.Slideshow, { slides: slidesArray, ...subProps.slideshow })) : ((0, jsx_runtime_1.jsx)(Grid_1.Grid, { ...subProps.grid, options: options, onSelect: (e, option) => {
                     !disabled && makeSelection(e, option);
-                }, selected: selected }))) })) })) : null;
+                }, selected: selected })) }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/TemplatesEditor/Assets/AthosCommerceLogo.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AthosCommerceLogo = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var AthosCommerceLogo = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const AthosCommerceLogo = () => {
     return ((0, jsx_runtime_1.jsx)("svg", { id: "Layer_2", className: "athos-logo", "data-name": "Layer 2", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 271.84 40", children: (0, jsx_runtime_1.jsx)("g", { id: "Layer_1-2", "data-name": "Layer 1", children: (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { className: "cls-2", d: "M50.86,18.26c.58-1.16,1.37-2.05,2.37-2.67,1-.62,2.11-.94,3.34-.94,1.05,0,1.97.21,2.77.64.79.43,1.4.99,1.83,1.68v-2.11h4.57v14.92h-4.57v-2.11c-.45.69-1.07,1.26-1.86,1.68-.79.43-1.72.64-2.77.64-1.21,0-2.32-.32-3.31-.95-1-.63-1.79-1.53-2.37-2.7s-.87-2.52-.87-4.05.29-2.88.87-4.04ZM60.22,19.62c-.63-.66-1.4-.99-2.3-.99-.66,0-1.31.2-1.85.58-.95.66-1.42,1.69-1.42,3.09,0,1.14.32,2.05.95,2.71.78.82,1.77,1.14,2.96.95.2-.03.41-.1.6-.19,1.34-.64,2.01-1.79,2.01-3.45,0-1.14-.32-2.04-.95-2.7Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-2", d: "M77.07,25.91v3.88h-2.33c-1.66,0-2.95-.41-3.88-1.22s-1.39-2.13-1.39-3.97v-5.94h-1.82v-3.8h1.82v-3.64h4.57v3.64h2.99v3.8h-2.99v5.99c0,.45.11.77.32.96s.57.29,1.07.29h1.63Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-2", d: "M92.29,16.4c1.03,1.13,1.55,2.69,1.55,4.66v8.72h-4.55v-8.1c0-1-.26-1.77-.78-2.33s-1.21-.83-2.08-.83-1.57.28-2.08.83c-.52.55-.78,1.33-.78,2.33v8.1h-4.57V10h4.57v6.87c.46-.66,1.1-1.19,1.9-1.58.8-.39,1.7-.59,2.7-.59,1.71,0,3.08.57,4.12,1.7Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-2", d: "M99.47,29.06c-1.17-.62-2.08-1.52-2.75-2.67-.67-1.16-1-2.51-1-4.06s.34-2.88,1.02-4.05c.68-1.17,1.6-2.06,2.78-2.69s2.49-.94,3.96-.94,2.78.31,3.96.94,2.1,1.52,2.78,2.69c.68,1.17,1.02,2.52,1.02,4.05s-.34,2.88-1.03,4.05c-.69,1.17-1.62,2.06-2.81,2.69-1.19.62-2.51.94-3.97.94s-2.78-.31-3.94-.94ZM105.65,25.08c.61-.64.92-1.56.92-2.75s-.3-2.11-.9-2.75c-.6-.64-1.33-.96-2.21-.96s-1.63.32-2.22.95c-.59.63-.88,1.56-.88,2.77s.29,2.11.87,2.75c.58.64,1.31.96,2.18.96s1.62-.32,2.23-.96Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-2", d: "M116.45,29.33c-1.02-.45-1.82-1.06-2.41-1.83-.59-.78-.92-1.65-.99-2.61h4.52c.05.52.3.94.72,1.26.43.32.95.48,1.58.48.57,0,1.01-.11,1.32-.33.31-.22.47-.51.47-.87,0-.43-.22-.74-.67-.95-.45-.2-1.17-.43-2.17-.68-1.07-.25-1.96-.51-2.67-.79-.71-.28-1.33-.71-1.84-1.31-.52-.6-.78-1.4-.78-2.42,0-.86.24-1.63.71-2.34.47-.7,1.17-1.26,2.09-1.67s2.01-.61,3.28-.61c1.87,0,3.35.46,4.42,1.39s1.7,2.16,1.86,3.69h-4.22c-.07-.52-.3-.93-.68-1.23-.38-.3-.89-.45-1.51-.45-.53,0-.95.1-1.23.31s-.43.49-.43.84c0,.43.23.75.68.96s1.16.43,2.13.64c1.1.29,2.01.57,2.7.84.7.28,1.31.72,1.83,1.34s.8,1.44.82,2.47c0,.87-.25,1.65-.74,2.34-.49.69-1.19,1.23-2.11,1.62-.92.39-1.98.59-3.2.59-1.3,0-2.46-.22-3.48-.67Z" })] }), (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { className: "cls-1", d: "M133.64,18.4c.61-1.14,1.46-2.02,2.54-2.65,1.08-.62,2.31-.93,3.7-.93,1.82,0,3.32.45,4.49,1.35,1.18.9,1.94,2.12,2.28,3.67h-2.02c-.25-1.06-.8-1.9-1.63-2.5-.84-.6-1.88-.9-3.12-.9-.99,0-1.88.22-2.67.67s-1.42,1.12-1.88,2.01c-.46.89-.69,1.99-.69,3.28s.23,2.39.69,3.29,1.08,1.58,1.88,2.02c.79.45,1.68.68,2.67.68,1.24,0,2.28-.3,3.12-.91.84-.6,1.38-1.44,1.63-2.52h2.02c-.34,1.51-1.11,2.73-2.29,3.64-1.19.92-2.68,1.38-4.48,1.38-1.39,0-2.62-.31-3.7-.93s-1.93-1.5-2.54-2.65c-.61-1.14-.92-2.48-.92-4.01s.31-2.87.92-4.01Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-1", d: "M152.31,29.07c-1.11-.62-1.98-1.5-2.62-2.65-.64-1.14-.96-2.48-.96-4.01s.32-2.87.97-4.01,1.53-2.02,2.65-2.65c1.12-.62,2.37-.93,3.75-.93s2.64.31,3.77.93c1.12.62,2.01,1.5,2.65,2.65.64,1.14.96,2.48.96,4.01s-.32,2.84-.97,4c-.65,1.15-1.54,2.04-2.67,2.66-1.13.62-2.39.93-3.78.93s-2.63-.31-3.74-.93ZM158.75,27.69c.83-.44,1.5-1.11,2.01-2,.51-.89.77-1.98.77-3.28s-.25-2.39-.76-3.28-1.17-1.56-2-2c-.83-.44-1.73-.66-2.7-.66s-1.87.22-2.7.66-1.49,1.11-1.99,2c-.49.89-.74,1.99-.74,3.28s.25,2.39.74,3.28c.5.89,1.15,1.56,1.97,2,.82.44,1.72.66,2.69.66s1.87-.22,2.7-.66Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-1", d: "M187.32,16.41c1.09,1.09,1.63,2.67,1.63,4.74v8.64h-1.86v-8.42c0-1.6-.39-2.83-1.16-3.67-.77-.85-1.83-1.27-3.16-1.27s-2.49.46-3.32,1.38c-.83.92-1.24,2.25-1.24,4v7.99h-1.86v-8.42c0-1.6-.39-2.83-1.16-3.67-.77-.85-1.84-1.27-3.19-1.27s-2.49.46-3.32,1.38c-.83.92-1.24,2.25-1.24,4v7.99h-1.89v-14.74h1.89v2.54c.47-.92,1.13-1.61,2-2.09.86-.48,1.83-.72,2.89-.72,1.28,0,2.4.31,3.36.92.96.61,1.66,1.51,2.09,2.7.4-1.17,1.07-2.06,2.04-2.69s2.06-.93,3.28-.93c1.73,0,3.14.55,4.23,1.63Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-1", d: "M212.8,16.41c1.09,1.09,1.63,2.67,1.63,4.74v8.64h-1.86v-8.42c0-1.6-.39-2.83-1.16-3.67-.77-.85-1.83-1.27-3.16-1.27s-2.49.46-3.32,1.38c-.83.92-1.24,2.25-1.24,4v7.99h-1.86v-8.42c0-1.6-.39-2.83-1.16-3.67-.77-.85-1.84-1.27-3.19-1.27s-2.49.46-3.32,1.38c-.83.92-1.24,2.25-1.24,4v7.99h-1.89v-14.74h1.89v2.54c.47-.92,1.13-1.61,2-2.09.86-.48,1.83-.72,2.89-.72,1.28,0,2.4.31,3.36.92.96.61,1.66,1.51,2.09,2.7.4-1.17,1.07-2.06,2.04-2.69s2.06-.93,3.28-.93c1.73,0,3.14.55,4.23,1.63Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-1", d: "M230.57,23.14h-12.23c.05,1.12.32,2.07.81,2.86s1.12,1.39,1.92,1.8c.79.4,1.66.61,2.59.61,1.22,0,2.26-.3,3.09-.89s1.39-1.39,1.66-2.4h2c-.36,1.44-1.13,2.62-2.31,3.52s-2.66,1.36-4.44,1.36c-1.39,0-2.63-.31-3.73-.93-1.1-.62-1.96-1.5-2.58-2.65-.62-1.14-.93-2.48-.93-4.01s.31-2.87.92-4.02c.61-1.15,1.47-2.03,2.56-2.65s2.35-.92,3.75-.92,2.63.31,3.69.92c1.05.61,1.86,1.44,2.43,2.47.57,1.04.85,2.18.85,3.44,0,.65-.02,1.14-.05,1.48ZM228.05,18.79c-.46-.77-1.09-1.36-1.88-1.76-.79-.4-1.66-.59-2.59-.59-1.4,0-2.6.45-3.59,1.35-.99.9-1.54,2.17-1.65,3.81h10.37c.02-1.1-.2-2.03-.66-2.81Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-1", d: "M236.49,15.53c.85-.5,1.9-.76,3.15-.76v1.97h-.51c-1.37,0-2.47.37-3.29,1.11-.83.74-1.24,1.97-1.24,3.7v8.23h-1.89v-14.74h1.89v2.62c.41-.92,1.05-1.63,1.9-2.13Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-1", d: "M242.55,18.4c.61-1.14,1.46-2.02,2.54-2.65s2.31-.93,3.7-.93c1.82,0,3.32.45,4.49,1.35,1.18.9,1.94,2.12,2.28,3.67h-2.02c-.25-1.06-.8-1.9-1.63-2.5-.84-.6-1.88-.9-3.12-.9-.99,0-1.88.22-2.67.67s-1.42,1.12-1.88,2.01c-.46.89-.69,1.99-.69,3.28s.23,2.39.69,3.29,1.08,1.58,1.88,2.02c.79.45,1.68.68,2.67.68,1.24,0,2.28-.3,3.12-.91.84-.6,1.38-1.44,1.63-2.52h2.02c-.34,1.51-1.11,2.73-2.29,3.64-1.19.92-2.68,1.38-4.48,1.38-1.39,0-2.62-.31-3.7-.93s-1.93-1.5-2.54-2.65c-.61-1.14-.92-2.48-.92-4.01s.31-2.87.92-4.01Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-1", d: "M271.79,23.14h-12.23c.05,1.12.32,2.07.81,2.86.49.79,1.12,1.39,1.92,1.8.79.4,1.66.61,2.59.61,1.22,0,2.25-.3,3.09-.89.84-.59,1.39-1.39,1.66-2.4h2c-.36,1.44-1.13,2.62-2.31,3.52-1.18.91-2.66,1.36-4.44,1.36-1.39,0-2.63-.31-3.73-.93s-1.96-1.5-2.58-2.65c-.62-1.14-.93-2.48-.93-4.01s.31-2.87.92-4.02c.61-1.15,1.47-2.03,2.57-2.65s2.35-.92,3.75-.92,2.63.31,3.68.92c1.05.61,1.86,1.44,2.43,2.47.57,1.04.85,2.18.85,3.44,0,.65-.02,1.14-.05,1.48ZM269.26,18.79c-.46-.77-1.09-1.36-1.88-1.76-.79-.4-1.66-.59-2.59-.59-1.4,0-2.6.45-3.59,1.35s-1.54,2.17-1.65,3.81h10.37c.02-1.1-.2-2.03-.66-2.81Z" })] })] }), (0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { className: "cls-2", d: "M40,13.34c0,2.87-2.1,5.2-4.7,5.2h-10.42c-3.66,0-5.9-4.42-4.02-7.9l4.37-8.11c.86-1.57,2.37-2.53,4.02-2.53h6.03c2.59,0,4.7,2.34,4.7,5.2l.02,8.14Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-1", d: "M40,34.79c0,2.87-2.1,5.2-4.7,5.2h-10.42c-3.66,0-5.9-4.42-4.02-7.9l4.37-8.11c.86-1.57,2.37-2.53,4.02-2.53h6.03c2.59,0,4.7,2.34,4.7,5.2l.02,8.14Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-1", d: "M0,5.2C0,2.34,2.1,0,4.7,0h10.42c3.66,0,5.9,4.42,4.02,7.9l-4.37,8.11c-.86,1.57-2.37,2.53-4.02,2.53h-6.03C2.12,18.54.02,16.21.02,13.34l-.02-8.14Z" }), (0, jsx_runtime_1.jsx)("path", { className: "cls-2", d: "M0,26.66c0-2.87,2.1-5.2,4.7-5.2h10.42c3.66,0,5.9,4.42,4.02,7.9l-4.37,8.11c-.86,1.57-2.37,2.53-4.02,2.53h-6.03C2.12,40,.02,37.66.02,34.8l-.02-8.14Z" })] })] }) }) }));
 };
 exports.AthosCommerceLogo = AthosCommerceLogo;

package/dist/cjs/components/src/components/Molecules/TemplatesEditor/Assets/Reset.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Reset = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var Reset = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Reset = () => {
     return ((0, jsx_runtime_1.jsxs)("svg", { fill: "#000000", viewBox: "0 0 1920 1920", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), (0, jsx_runtime_1.jsx)("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("g", { id: "SVGRepo_iconCarrier", children: (0, jsx_runtime_1.jsx)("path", { d: "M960 0v213.333c411.627 0 746.667 334.934 746.667 746.667S1371.627 1706.667 960 1706.667 213.333 1371.733 213.333 960c0-197.013 78.4-382.507 213.334-520.747v254.08H640V106.667H53.333V320h191.04C88.64 494.08 0 720.96 0 960c0 529.28 430.613 960 960 960s960-430.72 960-960S1489.387 0 960 0", fillRule: "evenodd" }) })] }));
 };
 exports.Reset = Reset;

package/dist/cjs/components/src/components/Molecules/TemplatesEditor/Components/AbstractedControls.js

@@ -1,53 +1,42 @@
 "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.AbstractedControls = 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 Control_1 = require("./Control");
-var Assets_1 = require("../Assets");
-var CSS = {
-    AbstractedControls: function (_a) { return (0, react_1.css)({}); },
+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 Control_1 = require("./Control");
+const Assets_1 = require("../Assets");
+const CSS = {
+    AbstractedControls: ({}) => (0, react_1.css)({}),
 };
-exports.AbstractedControls = (0, mobx_react_lite_1.observer)(function (properties) {
-    var styling = {
-        css: [CSS.AbstractedControls(__assign({}, properties))],
+exports.AbstractedControls = (0, mobx_react_lite_1.observer)((properties) => {
+    const styling = {
+        css: [CSS.AbstractedControls({ ...properties })],
     };
-    var title = properties.title, enableGroupReset = properties.enableGroupReset, feature = properties.feature, editorStore = properties.editorStore, data = properties.data;
-    var _a = feature.split('/'), section = _a[0], feat = _a[1];
-    var controlSection = editorStore.uiAbstractions[section];
-    var controlGroups = controlSection === null || controlSection === void 0 ? void 0 : controlSection[feat];
+    const { title, enableGroupReset, feature, editorStore, data } = properties;
+    const [section, feat] = feature.split('/');
+    const controlSection = editorStore.uiAbstractions[section];
+    const controlGroups = controlSection?.[feat];
     if (!controlGroups) {
-        console.warn("No controls found for feature: ".concat(feature), controlSection, controlGroups);
+        console.warn(`No controls found for feature: ${feature}`, controlSection, controlGroups);
         return null;
     }
-    var showGroupReset = enableGroupReset && controlGroups.some(function (group) { return group.controls.some(function (control) { return control.shouldShowReset(data); }); });
-    var resetAll = function () {
-        controlGroups.forEach(function (group) {
-            group.controls.forEach(function (control) {
+    const showGroupReset = enableGroupReset && controlGroups.some((group) => group.controls.some((control) => control.shouldShowReset(data)));
+    const resetAll = () => {
+        controlGroups.forEach((group) => {
+            group.controls.forEach((control) => {
                 if (control.shouldShowReset(data)) {
                     control.onReset(data);
                 }
             });
         });
     };
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "ss__template-editor__abstracted-controls" }, styling, { children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: "control-title", children: [(0, jsx_runtime_1.jsx)("h3", { children: title }), showGroupReset && ((0, jsx_runtime_1.jsx)("span", { className: "reset", children: (0, jsx_runtime_1.jsx)("button", { title: "Reset", onClick: function () {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__template-editor__abstracted-controls", ...styling, children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: "control-title", children: [(0, jsx_runtime_1.jsx)("h3", { children: title }), showGroupReset && ((0, jsx_runtime_1.jsx)("span", { className: "reset", children: (0, jsx_runtime_1.jsx)("button", { title: "Reset", onClick: () => {
                                 resetAll();
-                            }, children: (0, jsx_runtime_1.jsx)(Assets_1.Reset, {}) }) }))] })), controlGroups.map(function (group) {
-                var showGroupReset = group.showReset && group.controls.some(function (control) { return control.shouldShowReset(data); });
-                var resetGroup = function () {
-                    group.controls.forEach(function (control) {
+                            }, children: (0, jsx_runtime_1.jsx)(Assets_1.Reset, {}) }) }))] })), controlGroups.map((group) => {
+                const showGroupReset = group.showReset && group.controls.some((control) => control.shouldShowReset(data));
+                const resetGroup = () => {
+                    group.controls.forEach((control) => {
                         if (control.shouldShowReset(data)) {
                             control.onReset(data);
                         }
@@ -55,10 +44,10 @@ exports.AbstractedControls = (0, mobx_react_lite_1.observer)(function (propertie
                         }
                     });
                 };
-                return ((0, jsx_runtime_1.jsxs)("div", { className: "group", children: [group.title && ((0, jsx_runtime_1.jsxs)("div", { className: "group-title", children: [(0, jsx_runtime_1.jsx)("h4", { title: group.description, children: group.title }), showGroupReset && ((0, jsx_runtime_1.jsx)("span", { className: "reset", children: showGroupReset ? ((0, jsx_runtime_1.jsx)("button", { title: "Reset", onClick: function () {
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "group", children: [group.title && ((0, jsx_runtime_1.jsxs)("div", { className: "group-title", children: [(0, jsx_runtime_1.jsx)("h4", { title: group.description, children: group.title }), showGroupReset && ((0, jsx_runtime_1.jsx)("span", { className: "reset", children: showGroupReset ? ((0, jsx_runtime_1.jsx)("button", { title: "Reset", onClick: () => {
                                             resetGroup();
-                                        }, children: (0, jsx_runtime_1.jsx)(Assets_1.Reset, {}) })) : null }))] })), group.controls.map(function (control, index) {
-                            return ((0, jsx_runtime_1.jsx)(Control_1.Control, { type: control.type, label: control.label, description: control.description, showReset: control.shouldShowReset(data), onChange: function (value) { return control.onValueChange(value, data); }, onReset: function () { return control.onReset(data); }, display: control.getDisplayState ? control.getDisplayState(data) : 'visible', value: control.getValue(data), options: control.getOptions ? control.getOptions(data) : [] }, index));
+                                        }, children: (0, jsx_runtime_1.jsx)(Assets_1.Reset, {}) })) : null }))] })), group.controls.map((control, index) => {
+                            return ((0, jsx_runtime_1.jsx)(Control_1.Control, { type: control.type, label: control.label, description: control.description, showReset: control.shouldShowReset(data), onChange: (value) => control.onValueChange(value, data), onReset: () => control.onReset(data), display: control.getDisplayState ? control.getDisplayState(data) : 'visible', value: control.getValue(data), options: control.getOptions ? control.getOptions(data) : [] }, index));
                         })] }, group.title));
-            })] })));
+            })] }));
 });