@athoscommerce/snap-preact 1.9.1 → 1.10.1-beta.150

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 }) }) }));
 });

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

@@ -1,37 +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.ErrorHandler = 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 Icon_1 = require("../../Atoms/Icon/Icon");
-var Button_1 = require("../../Atoms/Button/Button");
-var utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var warnColour = new utilities_1.Colour('#ecaa15');
-var errorColour = new utilities_1.Colour('#cc1212');
-var infoColour = new utilities_1.Colour('#4c3ce2');
-var defaultStyles = function (_a) {
-    var _b, _c;
-    var 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 Icon_1 = require("../../Atoms/Icon/Icon");
+const Button_1 = require("../../Atoms/Button/Button");
+const utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const snap_store_mobx_1 = require("@athoscommerce/snap-store-mobx");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const warnColour = new utilities_1.Colour('#ecaa15');
+const errorColour = new utilities_1.Colour('#cc1212');
+const infoColour = new utilities_1.Colour('#4c3ce2');
+const defaultStyles = ({ theme }) => {
     return (0, react_1.css)({
         borderRadius: '2px',
         display: 'flex',
@@ -54,7 +41,7 @@ var defaultStyles = function (_a) {
         '& .ss__error-handler__button': {
             backgroundColor: 'unset',
             color: 'inherit',
-            borderColor: (_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,
+            borderColor: theme?.variables?.colors?.primary,
             width: ['150px', 'fit-content'],
             margin: '5px 10px',
             '&:hover': {
@@ -124,68 +111,76 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.ErrorHandler = (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.ErrorHandler = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('errorHandler', globalTheme, defaultProps, properties);
-    var controller = props.controller, error = props.error, disableStyles = props.disableStyles, onRetryClick = props.onRetryClick, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _b = (0, hooks_1.useCustomComponentOverride)('errorHandler', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('errorHandler', globalTheme, defaultProps, properties);
+    const { controller, error, disableStyles, onRetryClick, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('errorHandler', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        icon: __assign(__assign({ 
+    const subProps = {
+        icon: {
             // default props
-            size: '18px', internalClassName: 'ss__error-handler__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            size: '18px',
+            internalClassName: 'ss__error-handler__icon',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        buttonRetry: __assign(__assign({ 
+            theme: props.theme,
+            treePath,
+        },
+        buttonRetry: {
             // default props
-            internalClassName: 'ss__error-handler__button', icon: 'rotate-right' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__error-handler__button',
+            icon: 'rotate-right',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
+            theme: props.theme,
+            treePath,
+        },
     };
-    var errorObject = ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.error) || error;
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const errorObject = controller?.store?.error || error;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         warningText: {
-            value: "Warning:",
+            value: `Warning:`,
         },
         infoText: {
-            value: "Info:",
+            value: `Info:`,
         },
         errorText: {
-            value: "Error:",
+            value: `Error:`,
         },
         reloadText: {
-            value: "Retry",
+            value: `Retry`,
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_1.useLang)(lang, {
-        controller: controller,
-    });
-    return Object.values(snap_store_mobx_1.ErrorType).includes(errorObject === null || errorObject === void 0 ? void 0 : errorObject.type) && (errorObject === null || errorObject === void 0 ? void 0 : errorObject.message) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__error-handler', "ss__error-handler--".concat(errorObject.type), className, internalClassName) }, styling, { children: (function () {
-                var _a, _b, _c;
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
+        controller,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return Object.values(snap_store_mobx_1.ErrorType).includes(errorObject?.type) && errorObject?.message ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__error-handler', `ss__error-handler--${errorObject.type}`, className, internalClassName), ...styling, children: (() => {
                 switch (errorObject.type) {
                     case snap_store_mobx_1.ErrorType.WARNING:
-                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'warn' })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "ss__error-handler__message__type" }, (_a = mergedLang.warningText) === null || _a === void 0 ? void 0 : _a.all)), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }), (errorObject === null || errorObject === void 0 ? void 0 : errorObject.code) == 429 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({}, subProps.buttonRetry, { onClick: function (e) {
-                                        onRetryClick ? onRetryClick(e) : controller === null || controller === void 0 ? void 0 : controller.search();
-                                    } }, mergedLang.reloadText.attributes, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: "ss__error-handler__button__text" }, mergedLang.reloadText.value)) }))) : null] }));
+                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, icon: 'warn' }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__type", ...mergedLang.warningText?.all }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }), errorObject?.code == 429 ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { ...subProps.buttonRetry, onClick: (e) => {
+                                        onRetryClick ? onRetryClick(e) : controller?.search();
+                                    }, ...mergedLang.reloadText.attributes, children: (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__button__text", ...mergedLang.reloadText.value }) })) : null] }));
                     case snap_store_mobx_1.ErrorType.ERROR:
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'error' })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "ss__error-handler__message__type" }, (_b = mergedLang.errorText) === null || _b === void 0 ? void 0 : _b.all)), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }));
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, icon: 'error' }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__type", ...mergedLang.errorText?.all }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }));
                     case snap_store_mobx_1.ErrorType.INFO:
-                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'info' })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "ss__error-handler__message__type" }, (_c = mergedLang.infoText) === null || _c === void 0 ? void 0 : _c.all)), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }));
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ss__error-handler__message", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, icon: 'info' }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__type", ...mergedLang.infoText?.all }), (0, jsx_runtime_1.jsx)("span", { className: "ss__error-handler__message__content", children: errorObject.message })] }));
                 }
-            })() })) })) : null;
+            })() }) })) : null;
 });

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

@@ -1,71 +1,56 @@
 "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.FacetGridOptions = 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 utilities_1 = require("../../../utilities");
-var toolbox_1 = require("../../../toolbox");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
-    var _b;
-    var _c, _d;
-    var columns = _a.columns, gapSize = _a.gapSize, gridSize = _a.gridSize, 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 utilities_1 = require("../../../utilities");
+const toolbox_1 = require("../../../toolbox");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({ columns, gapSize, gridSize, theme }) => {
     return (0, react_1.css)({
         display: 'flex',
         flexFlow: 'row wrap',
-        gridTemplateColumns: columns ? "repeat(".concat(columns, ", 1fr)") : "repeat(auto-fill, minmax(".concat(gridSize, ", 1fr))"),
+        gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : `repeat(auto-fill, minmax(${gridSize}, 1fr))`,
         gap: gapSize,
-        gridAutoRows: "1fr",
-        '& .ss__facet-grid-options__option': (_b = {
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                flex: '0 1 auto',
-                border: '1px solid',
-                borderColor: ((_d = (_c = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _c === void 0 ? void 0 : _c.colors) === null || _d === void 0 ? void 0 : _d.primary) || 'initial',
-                textAlign: 'center',
-                wordBreak: 'break-all',
-                boxSizing: 'border-box',
-                padding: '1em 0',
-                width: "calc(100% / ".concat(columns, " - ").concat(2 * Math.round((columns + 2) / 2), "px)"),
-                margin: "0 ".concat(gapSize, " ").concat(gapSize, " 0")
-            },
-            _b[":nth-of-type(".concat(columns, "n)")] = {
+        gridAutoRows: `1fr`,
+        '& .ss__facet-grid-options__option': {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flex: '0 1 auto',
+            border: '1px solid',
+            borderColor: theme?.variables?.colors?.primary || 'initial',
+            textAlign: 'center',
+            wordBreak: 'break-all',
+            boxSizing: 'border-box',
+            padding: '1em 0',
+            width: `calc(100% / ${columns} - ${2 * Math.round((columns + 2) / 2)}px)`,
+            margin: `0 ${gapSize} ${gapSize} 0`,
+            [`:nth-of-type(${columns}n)`]: {
                 marginRight: '0',
             },
-            _b['&.ss__facet-grid-options__option--filtered'] = {
+            '&.ss__facet-grid-options__option--filtered': {
                 background: '#ccc',
                 color: '#333',
             },
-            _b['&:hover:not(.ss__facet-grid-options__option--filtered)'] = {
+            '&:hover:not(.ss__facet-grid-options__option--filtered)': {
                 cursor: 'pointer',
                 background: '#f8f8f8',
                 color: '#333',
             },
-            _b['& .ss__facet-grid-options__option__value'] = {
+            '& .ss__facet-grid-options__option__value': {
                 '&.ss__facet-grid-options__option__value--smaller': {
                     fontSize: '70%',
                 },
             },
-            _b),
+        },
         '@supports (display: grid)': {
             display: 'grid',
             '& .ss__facet-grid-options__option': {
@@ -87,52 +72,50 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.FacetGridOptions = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.FacetGridOptions = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         columns: 4,
         gapSize: '8px',
         gridSize: '45px',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('facetGridOptions', globalTheme, defaultProps, properties);
-    var values = props.values, onClick = props.onClick, previewOnFocus = props.previewOnFocus, valueProps = props.valueProps, facet = props.facet, horizontal = props.horizontal, className = props.className, internalClassName = props.internalClassName;
-    var _a = (0, hooks_1.useCustomComponentOverride)('facetGridOptions', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('facetGridOptions', globalTheme, defaultProps, properties);
+    const { values, onClick, previewOnFocus, valueProps, facet, horizontal, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('facetGridOptions', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
     if (horizontal) {
         props.columns = 0;
     }
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var facetValues = values || (facet === null || facet === void 0 ? void 0 : facet.refinedValues);
-    return (facetValues === null || facetValues === void 0 ? void 0 : facetValues.length) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__facet-grid-options', className, internalClassName), children: facetValues.map(function (value) {
-                var _a, _b, _c;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const facetValues = values || facet?.refinedValues;
+    return facetValues?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__facet-grid-options', className, internalClassName), children: facetValues.map((value) => {
                 //initialize lang
-                var defaultLang = {
+                const defaultLang = {
                     gridOption: {
                         attributes: {
-                            'aria-label': "".concat(value.filtered
-                                ? "remove selected filter ".concat((facet === null || facet === void 0 ? void 0 : facet.label) || '', " - ").concat(value.label)
-                                : (facet === null || facet === void 0 ? void 0 : facet.label)
-                                    ? "filter by ".concat(facet === null || facet === void 0 ? void 0 : facet.label, " - ").concat(value.label)
-                                    : "filter by ".concat(value.label)),
+                            'aria-label': `${value.filtered
+                                ? `remove selected filter ${facet?.label || ''} - ${value.label}`
+                                : facet?.label
+                                    ? `filter by ${facet?.label} - ${value.label}`
+                                    : `filter by ${value.label}`}`,
                         },
                     },
                 };
                 //deep merge with props.lang
-                var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-                var mergedLang = (0, hooks_1.useLang)(lang, {
-                    facet: facet,
-                    value: value,
-                });
-                return ((0, jsx_runtime_1.jsx)("a", __assign({ className: (0, classnames_1.default)('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), href: (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.href }, valueProps, { onClick: function (e) {
-                        var _a, _b;
-                        (_b = (_a = value.url) === null || _a === void 0 ? void 0 : _a.link) === null || _b === void 0 ? void 0 : _b.onClick(e);
+                const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+                const mergedLang = (0, hooks_1.useLang)(lang, {
+                    facet,
+                    value,
+                }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                return ((0, jsx_runtime_1.jsx)("a", { className: (0, classnames_1.default)('ss__facet-grid-options__option', { 'ss__facet-grid-options__option--filtered': value.filtered }), href: value.url?.link?.href, ...valueProps, onClick: (e) => {
+                        value.url?.link?.onClick(e);
                         onClick && onClick(e);
-                    } }, (previewOnFocus ? (0, toolbox_1.createHoverProps)(function () { return (value === null || value === void 0 ? void 0 : value.preview) && value.preview(); }) : {}), (_c = mergedLang.gridOption) === null || _c === void 0 ? void 0 : _c.all, { children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('ss__facet-grid-options__option__value', {
+                    }, ...(previewOnFocus ? (0, toolbox_1.createHoverProps)(() => value?.preview && value.preview()) : {}), ...mergedLang.gridOption?.all, children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('ss__facet-grid-options__option__value', {
                             'ss__facet-grid-options__option__value--smaller': value.label.length > 3,
-                        }), children: value.label }) })));
-            }) })) })) : null;
+                        }), children: value.label }) }));
+            }) }) })) : null;
 });