@athoscommerce/snap-preact 1.9.0 → 1.10.0

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

@@ -1,30 +1,19 @@
 "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.Pagination = 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 Icon_1 = require("../../Atoms/Icon");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Icon_1 = require("../../Atoms/Icon");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const hooks_1 = require("../../../hooks");
+const defaultStyles = () => {
     return (0, react_1.css)({
         '& .ss__pagination__page': {
             padding: '5px',
@@ -39,36 +28,40 @@ var defaultStyles = function () {
         },
     });
 };
-exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Pagination = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         pages: 5,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('pagination', globalTheme, defaultProps, properties);
-    var pagination = props.pagination, controller = props.controller, pages = props.pages, pagesLeft = props.pagesLeft, pagesRight = props.pagesRight, hideFirst = props.hideFirst, hideLast = props.hideLast, persistFirst = props.persistFirst, persistLast = props.persistLast, hideEllipsis = props.hideEllipsis, hideNext = props.hideNext, hidePrev = props.hidePrev, nextButton = props.nextButton, prevButton = props.prevButton, firstButton = props.firstButton, lastButton = props.lastButton, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _f = (0, hooks_1.useCustomComponentOverride)('pagination', props), overrideElement = _f.overrideElement, shouldRenderDefault = _f.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('pagination', globalTheme, defaultProps, properties);
+    const { pagination, controller, pages, pagesLeft, pagesRight, hideFirst, hideLast, persistFirst, persistLast, hideEllipsis, hidePages, hideNext, hidePrev, nextButton, prevButton, firstButton, lastButton, ellipsisContent, disableStyles, className, internalClassName, treePath, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('pagination', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        icon: __assign(__assign({ 
+    const subProps = {
+        icon: {
             // default props
-            internalClassName: 'ss__pagination__icon', size: '10px' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__pagination__icon',
+            size: '10px',
+            // 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 store = pagination || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.pagination);
-    var getPagesParams = Number.isInteger(pagesLeft) && Number.isInteger(pagesRight) ? [pagesLeft, pagesRight] : [pages];
-    var _pages = store === null || store === void 0 ? void 0 : store.getPages.apply(store, getPagesParams);
-    var pageNumbers = _pages === null || _pages === void 0 ? void 0 : _pages.map(function (page) { return page.number; });
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const store = pagination || controller?.store?.pagination;
+    const getPagesParams = Number.isInteger(pagesLeft) && Number.isInteger(pagesRight) ? [pagesLeft, pagesRight] : [pages];
+    const _pages = store?.getPages(...getPagesParams);
+    const pageNumbers = _pages?.map((page) => page.number);
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
     //initialize lang
-    var defaultLang = {
+    const defaultLang = {
         previous: {
             attributes: {
                 'aria-label': 'go to previous page',
@@ -86,32 +79,32 @@ exports.Pagination = (0, mobx_react_lite_1.observer)(function (properties) {
         },
         last: {
             attributes: {
-                'aria-label': "go to last page ".concat(store === null || store === void 0 ? void 0 : store.last.number),
+                'aria-label': `go to last page ${store?.last.number}`,
             },
         },
     };
     //deep merge with props.lang
-    var lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
-    var mergedLang = (0, hooks_1.useLang)(lang, {
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_1.useLang)(lang, {
         pagination: store,
-    });
-    return pageNumbers && pageNumbers.length > 1 && (store === null || store === void 0 ? void 0 : store.totalResults) ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__pagination', className, internalClassName), children: (0, jsx_runtime_1.jsxs)("nav", { role: "navigation", "aria-label": "Pagination", children: [store.previous && !hidePrev && ((0, jsx_runtime_1.jsx)("a", __assign({}, store.previous.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--previous') }, (_b = mergedLang.previous) === null || _b === void 0 ? void 0 : _b.all, { children: prevButton ? prevButton : (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-left', name: 'prev' })) }))), (!pageNumbers.includes(store.first.number) || (persistFirst && store.page !== store.first.number)) && !hideFirst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", __assign({}, store.first.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--first') }, (_c = mergedLang.first) === null || _c === void 0 ? void 0 : _c.all, { children: firstButton ? firstButton : store.first.number })), !pageNumbers.includes(2) && !hideEllipsis && (0, jsx_runtime_1.jsx)("span", { children: "\u2026" })] })), _pages &&
-                        _pages.map(function (page) {
-                            var _a, _b;
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return pageNumbers && pageNumbers.length > 1 && store?.totalResults ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__pagination', className, internalClassName), children: (0, jsx_runtime_1.jsxs)("nav", { role: "navigation", "aria-label": "Pagination", children: [store.previous && !hidePrev && ((0, jsx_runtime_1.jsx)("a", { ...store.previous.url.link, className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--previous'), ...mergedLang.previous?.all, children: prevButton ? prevButton : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, icon: 'angle-left', name: 'prev' }) })), (!pageNumbers.includes(store.first.number) || (persistFirst && store.page !== store.first.number)) && !hideFirst && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", { ...store.first.url.link, className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--first'), ...mergedLang.first?.all, children: firstButton ? firstButton : store.first.number }), !pageNumbers.includes(2) && !hideEllipsis && (0, jsx_runtime_1.jsx)("span", { children: ellipsisContent ?? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u2026" }) })] })), !hidePages &&
+                        _pages &&
+                        _pages.map((page) => {
                             //initialize lang
-                            var defaultPageLang = {
+                            const defaultPageLang = {
                                 page: {
                                     attributes: {
-                                        'aria-label': "go to page ".concat(page.number),
+                                        'aria-label': `go to page ${page.number}`,
                                     },
                                 },
                             };
                             //deep merge with props.lang
-                            var pagelang = (0, deepmerge_1.default)(defaultPageLang, props.lang || {});
-                            var mergedPageLang = (0, hooks_1.useLang)(pagelang, {
+                            const pagelang = (0, deepmerge_1.default)(defaultPageLang, props.lang || {});
+                            const mergedPageLang = (0, hooks_1.useLang)(pagelang, {
                                 pagination: store,
                                 page: page,
-                            });
-                            return page.active ? ((0, jsx_runtime_1.jsx)("span", __assign({ className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--active') }, (_a = mergedPageLang.page) === null || _a === void 0 ? void 0 : _a.all, { "aria-current": "true", "aria-live": "polite", children: page.number }))) : ((0, jsx_runtime_1.jsx)("a", __assign({}, page.url.link, { className: "ss__pagination__page" }, (_b = mergedPageLang.page) === null || _b === void 0 ? void 0 : _b.all, { children: page.number })));
-                        }), (!pageNumbers.includes(store.last.number) || (persistLast && store.page !== store.last.number)) && !hideLast && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && (0, jsx_runtime_1.jsx)("span", { children: "\u2026" }), (0, jsx_runtime_1.jsx)("a", __assign({}, store.last.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--last') }, (_d = mergedLang.last) === null || _d === void 0 ? void 0 : _d.all, { children: lastButton ? lastButton : store.last.number }))] })), store.next && !hideNext && ((0, jsx_runtime_1.jsx)("a", __assign({}, store.next.url.link, { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--next') }, (_e = mergedLang.next) === null || _e === void 0 ? void 0 : _e.all, { children: nextButton ? nextButton : (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, { icon: 'angle-right', name: 'next' })) })))] }) })) })) : null;
+                            }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+                            return page.active ? ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--active'), ...mergedPageLang.page?.all, "aria-current": "true", "aria-live": "polite", children: page.number })) : ((0, jsx_runtime_1.jsx)("a", { ...page.url.link, className: "ss__pagination__page", ...mergedPageLang.page?.all, children: page.number }));
+                        }), (!pageNumbers.includes(store.last.number) || (persistLast && store.page !== store.last.number)) && !hideLast && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!pageNumbers.includes(store.totalPages - 1) && !hideEllipsis && (0, jsx_runtime_1.jsx)("span", { children: ellipsisContent ?? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u2026" }) }), (0, jsx_runtime_1.jsx)("a", { ...store.last.url.link, className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--last'), ...mergedLang.last?.all, children: lastButton ? lastButton : store.last.number })] })), store.next && !hideNext && ((0, jsx_runtime_1.jsx)("a", { ...store.next.url.link, className: (0, classnames_1.default)('ss__pagination__page', 'ss__pagination__page--next'), ...mergedLang.next?.all, children: nextButton ? nextButton : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, icon: 'angle-right', name: 'next' }) }))] }) }) })) : null;
 });

package/dist/cjs/components/src/components/Molecules/PerPage/PerPage.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.PerPage = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var Select_1 = require("../Select");
-var RadioList_1 = require("../RadioList");
-var List_1 = require("../List");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const Select_1 = require("../Select");
+const RadioList_1 = require("../RadioList");
+const List_1 = require("../List");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const hooks_1 = require("../../../hooks");
+const defaultStyles = () => {
     return (0, react_1.css)({
         '.ss__button__content': {
             display: 'flex',
@@ -34,61 +23,75 @@ var defaultStyles = function () {
         },
     });
 };
-exports.PerPage = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.PerPage = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         label: 'Per Page',
         type: 'dropdown',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('perPage', globalTheme, defaultProps, properties);
-    var pagination = props.pagination, type = props.type, controller = props.controller, label = props.label, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath;
-    var _d = (0, hooks_1.useCustomComponentOverride)('perPage', props), overrideElement = _d.overrideElement, shouldRenderDefault = _d.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('perPage', globalTheme, defaultProps, properties);
+    const { pagination, type, controller, label, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('perPage', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var store = pagination || ((_a = controller === null || controller === void 0 ? void 0 : controller.store) === null || _a === void 0 ? void 0 : _a.pagination);
-    var subProps = {
-        select: __assign(__assign({}, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const store = pagination || controller?.store?.pagination;
+    const subProps = {
+        select: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        RadioList: __assign(__assign({}, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        RadioList: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
-        List: __assign(__assign({ multiSelect: false, hideOptionCheckboxes: true, horizontal: true }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+            theme: props?.theme,
+            treePath,
+        },
+        List: {
+            multiSelect: false,
+            hideOptionCheckboxes: true,
+            horizontal: true,
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var selectedOption = store && ((_b = store === null || store === void 0 ? void 0 : store.pageSizeOptions) === null || _b === void 0 ? void 0 : _b.find(function (option) { return option.value == (store === null || store === void 0 ? void 0 : store.pageSize); }));
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const selectedOption = store && store?.pageSizeOptions?.find((option) => option.value == store?.pageSize);
     //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 || {});
     // options can be an Array or ObservableArray - but should have length
-    return (store === null || store === void 0 ? void 0 : store.pageSize) && typeof (store === null || store === void 0 ? void 0 : store.pageSizeOptions) == 'object' && ((_c = store.pageSizeOptions) === null || _c === void 0 ? void 0 : _c.length) ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [(type === null || type === void 0 ? void 0 : type.toLowerCase()) == 'dropdown' && ((0, jsx_runtime_1.jsx)(Select_1.Select, __assign({}, styling, { className: (0, classnames_1.default)('ss__per-page', 'ss__per-page__select', className, internalClassName) }, subProps.select, { label: label, options: store.pageSizeOptions, selected: selectedOption, onSelect: function (e, option) {
+    return store?.pageSize && typeof store?.pageSizeOptions == 'object' && store.pageSizeOptions?.length ? ((0, jsx_runtime_1.jsxs)(providers_1.CacheProvider, { children: [type?.toLowerCase() == 'dropdown' && ((0, jsx_runtime_1.jsx)(Select_1.Select, { ...styling, className: (0, classnames_1.default)('ss__per-page', 'ss__per-page__select', className, internalClassName), ...subProps.select, label: label, options: store.pageSizeOptions, selected: selectedOption, onSelect: (e, option) => {
                     store.setPageSize(+option.value);
                 }, 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__per-page', 'ss__per-page__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__per-page', 'ss__per-page__list', className, internalClassName), ...subProps.List, onSelect: (e, option) => {
                     store.setPageSize(+option.value);
                 }, requireSelection: true, options: store.pageSizeOptions, selected: store.pageSizeOption, 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__per-page', 'ss__per-page__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__per-page', 'ss__per-page__radioList', className, internalClassName), ...subProps.RadioList, onSelect: (e, option) => {
                     store.setPageSize(+option.value);
                 }, options: store.pageSizeOptions, selected: store.pageSizeOption, titleText: label, lang: {
                     title: lang.label,
-                } })))] })) : null;
+                } }))] })) : null;
 });

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

@@ -1,44 +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 __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.Radio = 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 size = _a.size, native = _a.native;
+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, native }) => {
     if (!native) {
         return (0, react_1.css)({
             display: 'inline-flex',
@@ -57,75 +34,83 @@ var defaultStyles = function (_a) {
         return (0, react_1.css)({});
     }
 };
-exports.Radio = (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.Radio = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         size: '20px',
         startChecked: false,
         disableA11y: false,
         checkedIcon: 'bullet',
         unCheckedIcon: 'bullet-o',
-        color: ((_b = globalTheme.variables) === null || _b === void 0 ? void 0 : _b.colors.primary) || '#000000',
+        color: globalTheme.variables?.colors.primary || '#000000',
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('radio', globalTheme, defaultProps, properties);
-    var checked = props.checked, color = props.color, disabled = props.disabled, checkedIcon = props.checkedIcon, unCheckedIcon = props.unCheckedIcon, onClick = props.onClick, startChecked = props.startChecked, native = props.native, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, size = props.size, treePath = props.treePath, lang = props.lang, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, ____ = props.name, additionalProps = __rest(props, ["checked", "color", "disabled", "checkedIcon", "unCheckedIcon", "onClick", "startChecked", "native", "disableA11y", "disableStyles", "className", "internalClassName", "size", "treePath", "lang", "style", "styleScript", "themeStyleScript", "name"]);
-    var _d = (0, hooks_2.useCustomComponentOverride)('radio', props), overrideElement = _d.overrideElement, shouldRenderDefault = _d.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('radio', globalTheme, defaultProps, properties);
+    const { checked, color, disabled, checkedIcon, unCheckedIcon, onClick, startChecked, native, disableA11y, disableStyles, className, internalClassName, size, treePath, lang, style: _, styleScript: __, themeStyleScript: ___, name: ____, ...additionalProps } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('radio', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        activeIcon: __assign(__assign({ name: 'active', 
+    const subProps = {
+        activeIcon: {
+            name: 'active',
             // default props
-            internalClassName: 'ss__radio__icon' }, (0, utilities_1.defined)({
-            size: size,
-            color: color,
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__radio__icon',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                size,
+                color,
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props.theme, treePath: treePath }),
-        inactiveIcon: __assign(__assign({ name: 'inactive', 
+            theme: props.theme,
+            treePath,
+        },
+        inactiveIcon: {
+            name: 'inactive',
             // default props
-            internalClassName: 'ss__radio__icon' }, (0, utilities_1.defined)({
-            size: size,
-            color: color,
-            disableStyles: disableStyles,
-        })), { 
+            internalClassName: 'ss__radio__icon',
+            // inherited props
+            ...(0, utilities_1.defined)({
+                size,
+                color,
+                disableStyles,
+            }),
             // 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 = {
         radio: {},
     };
     //deep merge with props.lang
-    var _lang = (0, deepmerge_1.default)(defaultLang, lang || {});
-    var mergedLang = (0, hooks_2.useLang)(_lang, {
-        disabled: disabled,
-        checkedState: checkedState,
-    });
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__radio', 'ss__radio--native', { 'ss__radio--disabled': disabled }, className, internalClassName) }, styling, { children: (0, jsx_runtime_1.jsx)("input", { className: (0, classnames_1.default)('ss__radio__input'), "aria-checked": checkedState, type: "radio", onClick: function (e) { return clickFunc(e); }, disabled: disabled, checked: checkedState, tabIndex: !disableA11y ? 0 : -1 }) }))) : ((0, jsx_runtime_1.jsx)("span", __assign({}, styling, { className: (0, classnames_1.default)('ss__radio', { 'ss__radio--disabled': disabled, 'ss__radio--active': checkedState }, className, internalClassName), onClick: function (e) { return clickFunc(e); }, ref: function (e) { return (!disableA11y ? (0, useA11y_1.useA11y)(e) : null); } }, (_c = mergedLang.radio) === null || _c === void 0 ? void 0 : _c.all, { role: "radio", "aria-checked": checkedState, "aria-disabled": disabled }, additionalProps, { children: checkedState ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.activeIcon, (typeof checkedIcon == 'string' ? { icon: checkedIcon } : checkedIcon)))) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.inactiveIcon, (typeof unCheckedIcon == 'string' ? { icon: unCheckedIcon } : unCheckedIcon)))) }))) }));
+    const _lang = (0, deepmerge_1.default)(defaultLang, lang || {});
+    const mergedLang = (0, hooks_2.useLang)(_lang, {
+        disabled,
+        checkedState,
+    }, { activeBreakpoint: globalTheme?.activeBreakpoint });
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__radio', 'ss__radio--native', { 'ss__radio--disabled': disabled }, className, internalClassName), ...styling, children: (0, jsx_runtime_1.jsx)("input", { className: (0, classnames_1.default)('ss__radio__input'), "aria-checked": checkedState, type: "radio", onClick: (e) => clickFunc(e), disabled: disabled, checked: checkedState, tabIndex: !disableA11y ? 0 : -1 }) })) : ((0, jsx_runtime_1.jsx)("span", { ...styling, className: (0, classnames_1.default)('ss__radio', { 'ss__radio--disabled': disabled, 'ss__radio--active': checkedState }, className, internalClassName), onClick: (e) => clickFunc(e), ref: (e) => (!disableA11y ? (0, useA11y_1.useA11y)(e) : null), ...mergedLang.radio?.all, role: "radio", "aria-checked": checkedState, "aria-disabled": disabled, ...additionalProps, children: checkedState ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.activeIcon, ...(typeof checkedIcon == 'string' ? { icon: checkedIcon } : checkedIcon) })) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.inactiveIcon, ...(typeof unCheckedIcon == 'string' ? { icon: unCheckedIcon } : unCheckedIcon) })) })) }));
 });