npm - @athoscommerce/snap-preact - Versions diffs - 1.9.1 → 1.10.1-beta.150 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2070) hide show

package/dist/cjs/components/src/components/Molecules/Filter/Filter.js CHANGED Viewed

@@ -1,31 +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.Filter = 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 utilities_1 = require("../../../utilities");
-var providers_1 = require("../../../providers");
-var Button_1 = require("../../Atoms/Button");
-var Icon_1 = require("../../Atoms/Icon");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
+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 utilities_1 = require("../../../utilities");
+const providers_1 = require("../../../providers");
+const Button_1 = require("../../Atoms/Button");
+const Icon_1 = require("../../Atoms/Icon");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({}) => {
     return (0, react_1.css)({
         textDecoration: 'none',
         display: 'inline-flex',
@@ -43,56 +32,66 @@ var defaultStyles = function (_a) {
     });
 };
 // TODO: look into urlManager and how it connects in this case, left the href out for the time being
-exports.Filter = (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.Filter = (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)('filter', globalTheme, defaultProps, properties);
-    var filter = props.filter, facetLabel = props.facetLabel, valueLabel = props.valueLabel, url = props.url, hideFacetLabel = props.hideFacetLabel, onClick = props.onClick, icon = props.icon, separator = props.separator, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _c = (0, hooks_1.useCustomComponentOverride)('filter', props), overrideElement = _c.overrideElement, shouldRenderDefault = _c.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('filter', globalTheme, defaultProps, properties);
+    const { filter, facetLabel, valueLabel, url, hideFacetLabel, onClick, icon, separator, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('filter', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var link = ((_a = filter === null || filter === void 0 ? void 0 : filter.url) === null || _a === void 0 ? void 0 : _a.link) || (url === null || url === void 0 ? void 0 : url.link);
-    var value = (filter === null || filter === void 0 ? void 0 : filter.value.label) || valueLabel;
-    var label = (filter === null || filter === void 0 ? void 0 : filter.facet.label) || facetLabel;
-    var subProps = {
-        button: __assign(__assign({
+    const link = filter?.url?.link || url?.link;
+    const value = filter?.value.label || valueLabel;
+    const label = filter?.facet.label || facetLabel;
+    const subProps = {
+        button: {
             // default props
-            internalClassName: 'ss__filter__button', disableA11y: true }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), {
+            internalClassName: 'ss__filter__button',
+            disableA11y: true,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        icon: __assign(__assign({
+            theme: props.theme,
+            treePath,
+        },
+        icon: {
             // default props
-            icon: 'close-thin', internalClassName: 'ss__filter__button__icon', size: '10px' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-            icon: icon,
-        })), {
+            icon: 'close-thin',
+            internalClassName: 'ss__filter__button__icon',
+            size: '10px',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+                icon,
+            }),
             // component theme overrides
-            theme: 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 = {
         filter: {
             attributes: {
-                'aria-label': !label ? value : "remove selected ".concat(label, " filter ").concat(value),
+                'aria-label': !label ? value : `remove selected ${label} filter ${value}`,
             },
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_1.useLang)(lang, {
-        label: label,
-        value: value,
-    });
-    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("a", __assign({}, styling, { className: (0, classnames_1.default)('ss__filter', className, internalClassName), onClick: function (e) {
-                (link === null || link === void 0 ? void 0 : link.onClick) && link.onClick(e);
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
+        label,
+        value,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return value ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("a", { ...styling, className: (0, classnames_1.default)('ss__filter', className, internalClassName), onClick: (e) => {
+                link?.onClick && link.onClick(e);
                 onClick && onClick(e);
-            }, href: link === null || link === void 0 ? void 0 : link.href, tabIndex: 0 }, (_b = mergedLang.filter) === null || _b === void 0 ? void 0 : _b.all, { children: (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({}, subProps.button, { children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon))), !hideFacetLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__filter__label", children: [label, separator && (0, jsx_runtime_1.jsx)("span", { className: "ss__filter__label__separator", children: separator })] })), (0, jsx_runtime_1.jsx)("span", { className: "ss__filter__value", children: value })] })) })) })) : null;
+            }, href: link?.href, tabIndex: 0, ...mergedLang.filter?.all, children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { ...subProps.button, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) }), !hideFacetLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__filter__label", children: [label, separator && (0, jsx_runtime_1.jsx)("span", { className: "ss__filter__label__separator", children: separator })] })), (0, jsx_runtime_1.jsx)("span", { className: "ss__filter__value", children: value })] }) }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/Grid/Grid.js CHANGED Viewed

@@ -1,102 +1,78 @@
 "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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var hooks_1 = require("preact/hooks");
-var classnames_1 = __importDefault(require("classnames"));
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var hooks_2 = require("../../../hooks");
-var Image_1 = require("../../Atoms/Image");
-var utilities_1 = require("../../../utilities");
-var colord_1 = require("colord");
-var names_1 = __importDefault(require("colord/plugins/names"));
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const hooks_1 = require("preact/hooks");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const hooks_2 = require("../../../hooks");
+const Image_1 = require("../../Atoms/Image");
+const utilities_1 = require("../../../utilities");
+const colord_1 = require("colord");
+const names_1 = __importDefault(require("colord/plugins/names"));
 (0, colord_1.extend)([names_1.default]);
-var defaultStyles = function (_a) {
-    var _b;
-    var _c, _d, _e, _f;
-    var gapSize = _a.gapSize, columns = _a.columns, theme = _a.theme, disableOverflowAction = _a.disableOverflowAction;
+const defaultStyles = ({ gapSize, columns, theme, disableOverflowAction }) => {
     return (0, react_1.css)({
         '.ss__grid__options': {
             display: 'flex',
             flexFlow: 'row wrap',
-            gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
             gap: gapSize,
-            gridAutoRows: "1fr",
-            '.ss__grid__option': (_b = {
+            gridAutoRows: `1fr`,
+            '.ss__grid__option': {
+                display: 'flex',
+                flexDirection: 'column',
+                boxSizing: 'content-box',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: `calc(100% / ${columns} - ${2 * Math.round((columns + 2) / 2)}px)`,
+                backgroundPosition: 'center !important',
+                justifyContent: 'center',
+                alignItems: 'center',
+                flex: '0 1 auto',
+                border: `1px solid ${theme?.variables?.colors?.primary || '#333'}`,
+                textAlign: 'center',
+                wordBreak: 'break-all',
+                padding: '1em 0',
+                width: `calc(100% / ${columns} - ${2 * Math.round((columns + 2) / 2)}px)`,
+                margin: `0 ${gapSize} ${gapSize} 0`,
+                '.ss__grid__option__inner': {
+                    aspectRatio: '1/1',
                     display: 'flex',
-                    flexDirection: 'column',
-                    boxSizing: 'content-box',
-                    backgroundRepeat: 'no-repeat',
-                    backgroundSize: "calc(100% / ".concat(columns, " - ").concat(2 * Math.round((columns + 2) / 2), "px)"),
-                    backgroundPosition: 'center !important',
                     justifyContent: 'center',
                     alignItems: 'center',
-                    flex: '0 1 auto',
-                    border: "1px solid ".concat(((_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) || '#333'),
-                    textAlign: 'center',
-                    wordBreak: 'break-all',
-                    padding: '1em 0',
-                    width: "calc(100% / ".concat(columns, " - ").concat(2 * Math.round((columns + 2) / 2), "px)"),
-                    margin: "0 ".concat(gapSize, " ").concat(gapSize, " 0"),
-                    '.ss__grid__option__inner': {
+                    margin: 'auto',
+                    height: '100%',
+                    '.ss__image': {
                         aspectRatio: '1/1',
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        margin: 'auto',
-                        height: '100%',
-                        '.ss__image': {
-                            aspectRatio: '1/1',
-                        },
                     },
-                    '.ss__grid__option__label': {
-                        cursor: 'pointer',
-                    }
                 },
-                _b[":nth-of-type(".concat(columns, "n)")] = {
+                '.ss__grid__option__label': {
+                    cursor: 'pointer',
+                },
+                [`:nth-of-type(${columns}n)`]: {
                     marginRight: '0',
                 },
-                _b['&.ss__grid__option--selected'] = {
-                    border: "2px solid ".concat(((_f = (_e = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _e === void 0 ? void 0 : _e.colors) === null || _f === void 0 ? void 0 : _f.primary) || '#333'),
+                '&.ss__grid__option--selected': {
+                    border: `2px solid ${theme?.variables?.colors?.primary || '#333'}`,
                 },
-                _b['&.ss__grid__option--disabled'] = {
+                '&.ss__grid__option--disabled': {
                     position: 'relative',
                     opacity: '.5',
                     cursor: 'none',
                     pointerEvents: 'none',
                 },
-                _b['&.ss__grid__option--unavailable'] = {
+                '&.ss__grid__option--unavailable': {
                     position: 'relative',
                     opacity: '.5',
                 },
-                _b['&.ss__grid__option--disabled:before, &.ss__grid__option--unavailable:before'] = {
+                '&.ss__grid__option--disabled:before, &.ss__grid__option--unavailable:before': {
                     content: '""',
                     display: 'block',
                     position: 'absolute',
@@ -107,13 +83,13 @@ var defaultStyles = function (_a) {
                     outline: '1px solid #ffff',
                     transform: 'rotate(-45deg)',
                 },
-                _b['&.ss__grid__option--dark'] = {
+                '&.ss__grid__option--dark': {
                     color: '#fff',
                 },
-                _b['&:hover:not(.ss__grid__option--selected)'] = {
+                '&:hover:not(.ss__grid__option--selected)': {
                     cursor: 'pointer',
                 },
-                _b),
+            },
             '@supports (display: grid)': {
                 display: 'grid',
                 '.ss__grid__option': {
@@ -144,46 +120,50 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.Grid = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Grid = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         // default props
         multiSelect: false,
         columns: 4,
         gapSize: '8px',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('grid', globalTheme, defaultProps, properties);
-    var titleText = props.titleText, onSelect = props.onSelect, hideLabels = props.hideLabels, disableOverflowAction = props.disableOverflowAction, multiSelect = props.multiSelect, overflowButton = props.overflowButton, columns = props.columns, rows = props.rows, hideShowLess = props.hideShowLess, overflowButtonInGrid = props.overflowButtonInGrid, disabled = props.disabled, options = props.options, disableStyles = props.disableStyles, onOverflowButtonClick = props.onOverflowButtonClick, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, disableA11y = props.disableA11y;
-    var _a = (0, hooks_2.useCustomComponentOverride)('grid', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('grid', globalTheme, defaultProps, properties);
+    const { titleText, onSelect, hideLabels, disableOverflowAction, multiSelect, overflowButton, columns, rows, hideShowLess, overflowButtonInGrid, disabled, options, disableStyles, onOverflowButtonClick, className, internalClassName, treePath, disableA11y, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('grid', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        image: __assign(__assign({
+    const subProps = {
+        image: {
             // default props
-            internalClassName: 'ss__grid__image' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), {
+            internalClassName: 'ss__grid__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);
+    let selected = props.selected;
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     if (selected && !Array.isArray(selected)) {
         selected = [selected];
     }
     // selection state
-    var _b = (0, hooks_1.useState)(selected || []), selection = _b[0], setSelection = _b[1];
+    const [selection, setSelection] = (0, hooks_1.useState)(selected || []);
     // original selection state
-    var originalSelected = (0, hooks_1.useState)(selected || [])[0];
+    const [originalSelected] = (0, hooks_1.useState)(selected || []);
     // reset selection if 'selected' prop changes
     try {
         if (selected) {
-            var originalSelectedstr = JSON.stringify(originalSelected);
-            var selectedstr = JSON.stringify(selected);
-            var selectionstr = JSON.stringify(selection);
+            const originalSelectedstr = JSON.stringify(originalSelected);
+            const selectedstr = JSON.stringify(selected);
+            const selectionstr = JSON.stringify(selection);
             if (originalSelectedstr !== selectedstr && selectedstr !== selectionstr) {
                 setSelection(selected);
             }
@@ -192,15 +172,15 @@ exports.Grid = (0, mobx_react_lite_1.observer)(function (properties) {
     catch (e) {
         // noop
     }
-    var makeSelection = function (e, option) {
+    const makeSelection = (e, option) => {
         if (multiSelect) {
-            var newArray = void 0;
-            if (selection.find(function (select) { return select.value === option.value; })) {
-                newArray = __spreadArray([], selection, true);
-                newArray.splice(newArray.findIndex(function (select) { return select.value === option.value; }), 1);
+            let newArray;
+            if (selection.find((select) => select.value === option.value)) {
+                newArray = [...selection];
+                newArray.splice(newArray.findIndex((select) => select.value === option.value), 1);
             }
             else {
-                newArray = __spreadArray(__spreadArray([], selection, true), [option], false);
+                newArray = [...selection, option];
             }
             if (onSelect) {
                 onSelect(e, option, newArray);
@@ -214,39 +194,38 @@ exports.Grid = (0, mobx_react_lite_1.observer)(function (properties) {
             setSelection([option]);
         }
     };
-    var limit = rows && columns ? columns * rows : options.length;
-    var remainder = Math.max(0, options.length - (limit - (overflowButtonInGrid ? 1 : 0)));
-    var _c = (0, hooks_1.useState)(!!remainder), limited = _c[0], setLimited = _c[1];
-    var OverflowButtonElem = function () {
-        var showButton = hideShowLess ? limited : true;
+    const limit = rows && columns ? columns * rows : options.length;
+    const remainder = Math.max(0, options.length - (limit - (overflowButtonInGrid ? 1 : 0)));
+    const [limited, setLimited] = (0, hooks_1.useState)(!!remainder);
+    const OverflowButtonElem = () => {
+        const showButton = hideShowLess ? limited : true;
         //initialize lang
-        var defaultLang = {
+        const defaultLang = {
             showMoreText: {
-                value: overflowButtonInGrid ? "+ ".concat(remainder) : 'Show More',
+                value: overflowButtonInGrid ? `+ ${remainder}` : 'Show More',
             },
             showLessText: {
-                value: overflowButtonInGrid ? "- ".concat(remainder) : 'Show Less',
+                value: overflowButtonInGrid ? `- ${remainder}` : 'Show Less',
             },
         };
         //deep merge with props.lang
-        var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-        var mergedLang = (0, hooks_2.useLang)(lang, {
-            limited: limited,
-            remainder: remainder,
-        });
-        return showButton && remainder > 0 && options.length !== limit ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "ss__grid__show-more-wrapper ".concat(overflowButtonInGrid ? 'ss__grid__option' : ''), onClick: function (e) {
+        const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+        const mergedLang = (0, hooks_2.useLang)(lang, {
+            limited,
+            remainder,
+        }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+        return showButton && remainder > 0 && options.length !== limit ? ((0, jsx_runtime_1.jsx)("div", { className: `ss__grid__show-more-wrapper ${overflowButtonInGrid ? 'ss__grid__option' : ''}`, onClick: (e) => {
                 !disableOverflowAction && setLimited(!limited);
                 onOverflowButtonClick && onOverflowButtonClick(e, Boolean(limited), remainder);
-            }, role: 'button', ref: function (e) { return (!disableA11y && !disableOverflowAction ? (0, hooks_2.useA11y)(e) : null); } }, (limited ? mergedLang.showMoreText.attributes : mergedLang.showLessText.attributes), { children: overflowButton ? ((0, utilities_1.cloneWithProps)(overflowButton, { limited: limited, remainder: remainder, treePath: treePath })) : limited ? ((0, jsx_runtime_1.jsx)("span", __assign({ className: 'ss__grid__show-more' }, mergedLang.showMoreText.value))) : remainder ? ((0, jsx_runtime_1.jsx)("span", __assign({ className: 'ss__grid__show-less' }, mergedLang.showLessText.value))) : null }))) : null;
+            }, role: 'button', ref: (e) => (!disableA11y && !disableOverflowAction ? (0, hooks_2.useA11y)(e) : null), ...(limited ? mergedLang.showMoreText.attributes : mergedLang.showLessText.attributes), children: overflowButton ? ((0, utilities_1.cloneWithProps)(overflowButton, { limited, remainder, treePath })) : limited ? ((0, jsx_runtime_1.jsx)("span", { className: 'ss__grid__show-more', ...mergedLang.showMoreText.value })) : remainder ? ((0, jsx_runtime_1.jsx)("span", { className: 'ss__grid__show-less', ...mergedLang.showLessText.value })) : null })) : null;
     };
-    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.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__grid', disabled ? 'ss__grid--disabled' : '', className, internalClassName), children: [titleText && (0, jsx_runtime_1.jsx)("h5", { className: "ss__grid__title", children: titleText }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__grid__options", children: [options.map(function (option, idx) {
-                            var _a;
-                            var selected = selection.some(function (select) { return select.value == option.value; });
-                            var isDark = false;
-                            var colorString = ((_a = option.background) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || (!option.backgroundImageUrl ? option.value.toString().toLowerCase() : null);
+    return typeof options == 'object' && options?.length ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__grid', disabled ? 'ss__grid--disabled' : '', className, internalClassName), children: [titleText && (0, jsx_runtime_1.jsx)("h5", { className: "ss__grid__title", children: titleText }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__grid__options", children: [options.map((option, idx) => {
+                            const selected = selection.some((select) => select.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();
                                     }
@@ -254,12 +233,12 @@ exports.Grid = (0, mobx_react_lite_1.observer)(function (properties) {
                                 catch (err) { }
                             }
                             if (!limited || options.length == limit || idx < limit - (overflowButtonInGrid ? 1 : 0)) {
-                                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)("ss__grid__option", {
+                                return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(`ss__grid__option`, {
                                         'ss__grid__option--selected': selected,
-                                        'ss__grid__option--disabled': option === null || option === void 0 ? void 0 : option.disabled,
-                                        'ss__grid__option--unavailable': (option === null || option === void 0 ? void 0 : option.available) === false,
+                                        'ss__grid__option--disabled': option?.disabled,
+                                        'ss__grid__option--unavailable': option?.available === false,
                                         'ss__grid__option--dark': isDark,
-                                    }), onClick: function (e) { return !disabled && !(option === null || option === void 0 ? void 0 : option.disabled) && makeSelection(e, option); }, ref: function (e) { return (0, hooks_2.useA11y)(e); }, title: option.label || option.value.toString(), role: "option", "aria-selected": selected, "aria-disabled": option.disabled, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("ss__grid__option__inner", "ss__grid__option__inner--".concat(snap_toolbox_1.filters.handleize(option.value.toString()))), style: { background: option.background ? option.background : option.backgroundImageUrl ? undefined : option.value }, children: [!option.background && option.backgroundImageUrl ? ((0, jsx_runtime_1.jsx)(Image_1.Image, __assign({}, subProps.image, { src: option.backgroundImageUrl, alt: option.label || option.value.toString() }))) : null, !hideLabels ? (0, jsx_runtime_1.jsx)("label", { className: "ss__grid__option__label", children: option.label || option.value }) : null] }) }));
+                                    }), onClick: (e) => !disabled && !option?.disabled && makeSelection(e, option), ref: (e) => (0, hooks_2.useA11y)(e), title: option.label || option.value.toString(), role: "option", "aria-selected": selected, "aria-disabled": option.disabled, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(`ss__grid__option__inner`, `ss__grid__option__inner--${snap_toolbox_1.filters.handleize(option.value.toString())}`), style: { background: option.background ? option.background : option.backgroundImageUrl ? undefined : 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)("label", { className: "ss__grid__option__label", children: option.label || option.value }) : null] }) }));
                             }
-                        }), overflowButtonInGrid ? (0, jsx_runtime_1.jsx)(OverflowButtonElem, {}) : null] }), !overflowButtonInGrid ? (0, jsx_runtime_1.jsx)(OverflowButtonElem, {}) : null] })) })) : null;
+                        }), overflowButtonInGrid ? (0, jsx_runtime_1.jsx)(OverflowButtonElem, {}) : null] }), !overflowButtonInGrid ? (0, jsx_runtime_1.jsx)(OverflowButtonElem, {}) : null] }) })) : null;
 });