@athoscommerce/snap-preact 1.9.1 → 1.10.0

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

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

package/dist/cjs/components/src/components/Molecules/LayoutSelector/LayoutSelector.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.LayoutSelector = 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 List_1 = require("../List");
-var RadioList_1 = require("../RadioList");
-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 providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Select_1 = require("../Select");
+const List_1 = require("../List");
+const RadioList_1 = require("../RadioList");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({}) => {
     return (0, react_1.css)({
         '.ss__button__content': {
             display: 'flex',
@@ -34,71 +23,90 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.LayoutSelector = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.LayoutSelector = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         label: 'Layout',
         type: 'dropdown',
         showSingleOption: false,
         selected: properties.options && properties.options.length ? properties.options[0] : undefined,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('layoutSelector', globalTheme, defaultProps, properties);
-    var options = props.options, selected = props.selected, type = props.type, onSelect = props.onSelect, showSingleOption = props.showSingleOption, hideLabel = props.hideLabel, hideOptionLabels = props.hideOptionLabels, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var label = props.label;
-    var _a = (0, hooks_1.useCustomComponentOverride)('layoutSelector', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('layoutSelector', globalTheme, defaultProps, properties);
+    const { options, selected, type, onSelect, showSingleOption, hideLabel, hideOptionLabels, disableStyles, className, internalClassName, treePath } = props;
+    let label = props.label;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('layoutSelector', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        Select: __assign(__assign({ hideOptionLabels: hideOptionLabels }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const subProps = {
+        Select: {
+            hideOptionLabels,
+            // 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({ hideOptionLabels: hideOptionLabels }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        RadioList: {
+            hideOptionLabels,
+            // 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, horizontal: true, hideOptionCheckboxes: true, hideOptionLabels: hideOptionLabels, requireSelection: true }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        List: {
+            multiSelect: false,
+            horizontal: true,
+            hideOptionCheckboxes: true,
+            hideOptionLabels,
+            requireSelection: 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;
     }
     if (hideOptionLabels) {
-        var optionsWithNoIcons = options === null || options === void 0 ? void 0 : options.filter(function (option) { return !option.icon; });
-        if (optionsWithNoIcons === null || optionsWithNoIcons === void 0 ? void 0 : optionsWithNoIcons.length) {
+        const optionsWithNoIcons = options?.filter((option) => !option.icon);
+        if (optionsWithNoIcons?.length) {
             console.warn('Warning - found layout options with no visible label or icon', optionsWithNoIcons);
         }
     }
     // options can be an Array or ObservableArray - but should have length
-    return (options && options.length > 1) || ((options === null || options === void 0 ? void 0 : options.length) === 1 && showSingleOption) ? ((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__layout__select', className, internalClassName) }, subProps.Select, { label: label, options: options, selected: selected, onSelect: function (e, option) {
+    return (options && options.length > 1) || (options?.length === 1 && showSingleOption) ? ((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__layout__select', className, internalClassName), ...subProps.Select, label: label, options: options, selected: selected, onSelect: (e, option) => {
                     onSelect && onSelect(e, option);
                 }, 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__layout__list', className, internalClassName) }, subProps.List, { onSelect: function (e, option) {
+                } })), type?.toLowerCase() == 'list' && ((0, jsx_runtime_1.jsx)(List_1.List, { ...styling, className: (0, classnames_1.default)('ss__layout__list', className, internalClassName), ...subProps.List, onSelect: (e, option) => {
                     onSelect && onSelect(e, option);
                 }, options: options, selected: selected, titleText: label, 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__layout__radioList', className, internalClassName) }, subProps.RadioList, { onSelect: function (e, option) {
+                } })), type?.toLowerCase() == 'radio' && ((0, jsx_runtime_1.jsx)(RadioList_1.RadioList, { ...styling, className: (0, classnames_1.default)('ss__layout__radioList', className, internalClassName), ...subProps.RadioList, onSelect: (e, option) => {
                     onSelect && onSelect(e, option);
                 }, options: options, selected: selected, titleText: label, lang: {
                     title: lang.label,
-                } })))] })) : null;
+                } }))] })) : null;
 });