@astral/ui 1.16.2 → 1.17.0

package/esm/Checkbox/Checkbox.js

@@ -1,14 +1,3 @@
-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)
@@ -23,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledCheckbox } from './styled';
 import { CheckedIcon, DefaultIcon, IndeterminateIcon } from './icons';
-export var Checkbox = function (_a) {
-    var _b = _a.icon, icon = _b === void 0 ? _jsx(DefaultIcon, {}) : _b, _c = _a.checkedIcon, checkedIcon = _c === void 0 ? _jsx(CheckedIcon, {}) : _c, _d = _a.indeterminateIcon, indeterminateIcon = _d === void 0 ? _jsx(IndeterminateIcon, {}) : _d, props = __rest(_a, ["icon", "checkedIcon", "indeterminateIcon"]);
-    return (_jsx(StyledCheckbox, __assign({ icon: icon, checkedIcon: checkedIcon, indeterminateIcon: indeterminateIcon }, props)));
+export const Checkbox = (_a) => {
+    var { icon = _jsx(DefaultIcon, {}), checkedIcon = _jsx(CheckedIcon, {}), indeterminateIcon = _jsx(IndeterminateIcon, {}) } = _a, props = __rest(_a, ["icon", "checkedIcon", "indeterminateIcon"]);
+    return (_jsx(StyledCheckbox, Object.assign({ icon: icon, checkedIcon: checkedIcon, indeterminateIcon: indeterminateIcon }, props)));
 };

package/esm/Checkbox/icons.js

@@ -1,14 +1,3 @@
-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)
@@ -22,15 +11,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SvgIcon } from '@mui/material';
-export var DefaultIcon = function (_a) {
+export const DefaultIcon = (_a) => {
     var props = __rest(_a, []);
-    return (_jsxs(SvgIcon, __assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("path", { d: "M0 3C0 1.34315 1.34315 0 3 0H11C12.6569 0 14 1.34315 14 3V11C14 12.6569 12.6569 14 11 14H3C1.34315 14 0 12.6569 0 11V3Z" }), _jsx("path", { className: "MuiSvgIcon-border", fillRule: "evenodd", clipRule: "evenodd", d: "M11 2H3C2.44772 2 2 2.44772 2 3V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V3C12 2.44772 11.5523 2 11 2ZM3 0C1.34315 0 0 1.34315 0 3V11C0 12.6569 1.34315 14 3 14H11C12.6569 14 14 12.6569 14 11V3C14 1.34315 12.6569 0 11 0H3Z" })] })));
+    return (_jsxs(SvgIcon, Object.assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("path", { d: "M0 3C0 1.34315 1.34315 0 3 0H11C12.6569 0 14 1.34315 14 3V11C14 12.6569 12.6569 14 11 14H3C1.34315 14 0 12.6569 0 11V3Z" }), _jsx("path", { className: "MuiSvgIcon-border", fillRule: "evenodd", clipRule: "evenodd", d: "M11 2H3C2.44772 2 2 2.44772 2 3V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V3C12 2.44772 11.5523 2 11 2ZM3 0C1.34315 0 0 1.34315 0 3V11C0 12.6569 1.34315 14 3 14H11C12.6569 14 14 12.6569 14 11V3C14 1.34315 12.6569 0 11 0H3Z" })] })));
 };
-export var CheckedIcon = function (_a) {
+export const CheckedIcon = (_a) => {
     var props = __rest(_a, []);
-    return (_jsxs(SvgIcon, __assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("rect", { width: "14", height: "14", rx: "3" }), _jsx("path", { className: "MuiSvgIcon-mark", fillRule: "evenodd", clipRule: "evenodd", d: "M4.71402 6.30066C4.62206 6.20534 4.51205 6.12931 4.39042 6.07701C4.26879 6.0247 4.13797 5.99717 4.0056 5.99602C3.87323 5.99487 3.74195 6.02012 3.61943 6.0703C3.49691 6.12048 3.3856 6.19458 3.292 6.28829C3.19839 6.38199 3.12437 6.49342 3.07424 6.61607C3.02411 6.73872 2.99889 6.87013 3.00004 7.00265C3.00119 7.13516 3.02869 7.26612 3.08094 7.38787C3.13319 7.50963 3.20914 7.61976 3.30435 7.71182L5.29823 9.7078C5.48518 9.8949 5.73871 10 6.00306 10C6.26741 10 6.52094 9.8949 6.7079 9.7078L10.6956 5.71584C10.7909 5.62377 10.8668 5.51365 10.9191 5.39189C10.9713 5.27013 10.9988 5.13918 11 5.00666C11.0011 4.87415 10.9759 4.74274 10.9258 4.62009C10.8756 4.49744 10.8016 4.38601 10.708 4.29231C10.6144 4.1986 10.5031 4.1245 10.3806 4.07432C10.258 4.02414 10.1268 3.99889 9.9944 4.00004C9.86203 4.00119 9.73121 4.02872 9.60958 4.08102C9.48795 4.13333 9.37794 4.20936 9.28598 4.30468L6.00306 7.59106L4.71402 6.30066V6.30066Z" })] })));
+    return (_jsxs(SvgIcon, Object.assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("rect", { width: "14", height: "14", rx: "3" }), _jsx("path", { className: "MuiSvgIcon-mark", fillRule: "evenodd", clipRule: "evenodd", d: "M4.71402 6.30066C4.62206 6.20534 4.51205 6.12931 4.39042 6.07701C4.26879 6.0247 4.13797 5.99717 4.0056 5.99602C3.87323 5.99487 3.74195 6.02012 3.61943 6.0703C3.49691 6.12048 3.3856 6.19458 3.292 6.28829C3.19839 6.38199 3.12437 6.49342 3.07424 6.61607C3.02411 6.73872 2.99889 6.87013 3.00004 7.00265C3.00119 7.13516 3.02869 7.26612 3.08094 7.38787C3.13319 7.50963 3.20914 7.61976 3.30435 7.71182L5.29823 9.7078C5.48518 9.8949 5.73871 10 6.00306 10C6.26741 10 6.52094 9.8949 6.7079 9.7078L10.6956 5.71584C10.7909 5.62377 10.8668 5.51365 10.9191 5.39189C10.9713 5.27013 10.9988 5.13918 11 5.00666C11.0011 4.87415 10.9759 4.74274 10.9258 4.62009C10.8756 4.49744 10.8016 4.38601 10.708 4.29231C10.6144 4.1986 10.5031 4.1245 10.3806 4.07432C10.258 4.02414 10.1268 3.99889 9.9944 4.00004C9.86203 4.00119 9.73121 4.02872 9.60958 4.08102C9.48795 4.13333 9.37794 4.20936 9.28598 4.30468L6.00306 7.59106L4.71402 6.30066V6.30066Z" })] })));
 };
-export var IndeterminateIcon = function (_a) {
+export const IndeterminateIcon = (_a) => {
     var props = __rest(_a, []);
-    return (_jsxs(SvgIcon, __assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("rect", { width: "14", height: "14", rx: "3" }), _jsx("path", { className: "MuiSvgIcon-mark", d: "M10 6H4C3.44772 6 3 6.44772 3 7C3 7.55228 3.44772 8 4 8H10C10.5523 8 11 7.55228 11 7C11 6.44772 10.5523 6 10 6Z" })] })));
+    return (_jsxs(SvgIcon, Object.assign({ viewBox: "0 0 14 14" }, props, { children: [_jsx("rect", { width: "14", height: "14", rx: "3" }), _jsx("path", { className: "MuiSvgIcon-mark", d: "M10 6H4C3.44772 6 3 6.44772 3 7C3 7.55228 3.44772 8 4 8H10C10.5523 8 11 7.55228 11 7C11 6.44772 10.5523 6 10 6Z" })] })));
 };

package/esm/Checkbox/styled.js

@@ -1,32 +1,47 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { Checkbox } from '@mui/material';
 import { styled } from '../styles';
-export var StyledCheckbox = styled(Checkbox)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 5px;\n\n  color: ", ";\n\n  border-radius: unset;\n\n  &:hover {\n    color: ", ";\n  }\n\n  & .MuiSvgIcon-border {\n    color: ", ";\n  }\n\n  & > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &.Mui-disabled {\n    color: ", ";\n\n    & .MuiSvgIcon-border {\n      color: currentColor;\n    }\n  }\n\n  &.Mui-checked,\n  &.MuiCheckbox-indeterminate {\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.Mui-disabled {\n      color: ", ";\n    }\n\n    & .MuiSvgIcon-mark {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: 5px;\n\n  color: ", ";\n\n  border-radius: unset;\n\n  &:hover {\n    color: ", ";\n  }\n\n  & .MuiSvgIcon-border {\n    color: ", ";\n  }\n\n  & > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &.Mui-disabled {\n    color: ", ";\n\n    & .MuiSvgIcon-border {\n      color: currentColor;\n    }\n  }\n\n  &.Mui-checked,\n  &.MuiCheckbox-indeterminate {\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.Mui-disabled {\n      color: ", ";\n    }\n\n    & .MuiSvgIcon-mark {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.background.element;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[100];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[300];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[200];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.primary.main;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.primary[700];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[500];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.common.white;
-});
-var templateObject_1;
+export const StyledCheckbox = styled(Checkbox) `
+  padding: 5px;
+
+  color: ${({ theme }) => theme.palette.background.element};
+
+  border-radius: unset;
+
+  &:hover {
+    color: ${({ theme }) => theme.palette.grey[100]};
+  }
+
+  & .MuiSvgIcon-border {
+    color: ${({ theme }) => theme.palette.grey[300]};
+  }
+
+  & > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &.Mui-disabled {
+    color: ${({ theme }) => theme.palette.grey[200]};
+
+    & .MuiSvgIcon-border {
+      color: currentColor;
+    }
+  }
+
+  &.Mui-checked,
+  &.MuiCheckbox-indeterminate {
+    color: ${({ theme }) => theme.palette.primary.main};
+
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary[700]};
+    }
+
+    &.Mui-disabled {
+      color: ${({ theme }) => theme.palette.grey[500]};
+    }
+
+    & .MuiSvgIcon-mark {
+      color: ${({ theme }) => theme.palette.common.white};
+    }
+  }
+`;

package/esm/Chevron/Chevron.js

@@ -1,14 +1,3 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronWrapper } from './styles';
-export var Chevron = function (props) { return (_jsx(ChevronWrapper, __assign({}, props))); };
+export const Chevron = (props) => (_jsx(ChevronWrapper, Object.assign({}, props)));

package/esm/Chevron/styles.js

@@ -1,19 +1,12 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { ChevronDOutlineMd } from '@astral/icons';
 import { styled } from '../styles';
-export var ChevronWrapper = styled(ChevronDOutlineMd, {
-    shouldForwardProp: function (prop) { return prop !== 'isActive'; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform: rotateZ(", "deg);\n\n  transition: ", ";\n"], ["\n  transform: rotateZ(", "deg);\n\n  transition: ", ";\n"])), function (_a) {
-    var isActive = _a.isActive;
-    return (isActive ? 180 : 0);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.transitions.create('transform', {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.short,
-    });
-});
-var templateObject_1;
+export const ChevronWrapper = styled(ChevronDOutlineMd, {
+    shouldForwardProp: (prop) => prop !== 'isActive',
+}) `
+  transform: rotateZ(${({ isActive }) => (isActive ? 180 : 0)}deg);
+
+  transition: ${({ theme }) => theme.transitions.create('transform', {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.short,
+})};
+`;

package/esm/CircularProgress/CircularProgress.js

@@ -1,14 +1,3 @@
-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)
@@ -23,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
 import { CircularProgress as MuiCircularProgress, } from '@mui/material';
-export var CircularProgress = forwardRef(function (props, ref) {
-    var sizeProp = props.size, color = props.color, restProps = __rest(props, ["size", "color"]);
-    var size = useMemo(function () {
+export const CircularProgress = forwardRef((props, ref) => {
+    const { size: sizeProp, color } = props, restProps = __rest(props, ["size", "color"]);
+    const size = useMemo(() => {
         return sizeProp === 'small' ? 16 : 24;
     }, [sizeProp]);
-    return (_jsx(MuiCircularProgress, __assign({ ref: ref }, restProps, { size: size, color: "inherit", "data-color": color })));
+    return (_jsx(MuiCircularProgress, Object.assign({ ref: ref }, restProps, { size: size, color: "inherit", "data-color": color })));
 });
 export default CircularProgress;

package/esm/CircularProgress/CircularProgressStory.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CircularProgress } from '../CircularProgress';
-export var CircularProgressStory = function (props) {
-    var size = props.size, color = props.color;
+export const CircularProgressStory = (props) => {
+    const { size, color } = props;
     return _jsx(CircularProgress, { size: size, color: color });
 };
 export default CircularProgressStory;

package/esm/CircularProgress/CircularProgressStoryTemplate.js

@@ -1,17 +1,6 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CircularProgressStory } from './CircularProgressStory';
-export var CircularProgressStoryTemplate = function (args) {
-    return _jsx(CircularProgressStory, __assign({}, args));
+export const CircularProgressStoryTemplate = (args) => {
+    return _jsx(CircularProgressStory, Object.assign({}, args));
 };
 export default CircularProgressStoryTemplate;

package/esm/ConfigProvider/ConfigProvider.js

@@ -1,28 +1,16 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useEffect } from 'react';
 import ru from 'date-fns/locale/ru';
-export var ConfigContext = createContext({
+export const ConfigContext = createContext({
     locale: ru,
-    captureException: function (error) { return console.error(error); },
+    captureException: (error) => console.error(error),
 });
-export var ConfigProvider = function (_a) {
-    var children = _a.children, _b = _a.locale, locale = _b === void 0 ? ru : _b, captureException = _a.captureException;
-    useEffect(function () {
+export const ConfigProvider = ({ children, locale = ru, captureException, }) => {
+    useEffect(() => {
         if (!captureException) {
             console.warn('ConfigProvider: Необходимо наличие captureException, связанного с сервисом мониторинга ошибок.\n' +
                 'На данный момент все ошибки, отлавливаемые в ErrorBoundary будут выводиться только в консоль');
         }
     }, []);
-    return (_jsx(ConfigContext.Provider, __assign({ value: { locale: locale, captureException: captureException } }, { children: children })));
+    return (_jsx(ConfigContext.Provider, Object.assign({ value: { locale, captureException } }, { children: children })));
 };

package/esm/ContentState/ContentState.d.ts

@@ -31,5 +31,5 @@ declare type ContentStateProps = {
      */
     children: ReactNode;
 };
-export declare const ContentState: ({ isLoading, isError, isCustom, errorState, customState, children, loadingContent: LoadingContent, }: ContentStateProps) => JSX.Element;
+export declare const ContentState: ({ isLoading, isError, isCustom, errorState, customState, children, loadingContent, }: ContentStateProps) => JSX.Element;
 export {};

package/esm/ContentState/ContentState.js

@@ -1,33 +1,21 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { Button, CircularProgress, Placeholder, Typography } from '..';
 import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
 import { ConfigContext } from '../ConfigProvider';
 import { LoadingContainer } from './styles';
-export var ContentState = function (_a) {
-    var isLoading = _a.isLoading, isError = _a.isError, isCustom = _a.isCustom, errorState = _a.errorState, customState = _a.customState, children = _a.children, _b = _a.loadingContent, LoadingContent = _b === void 0 ? _jsx(CircularProgress, { color: "primary" }) : _b;
-    var captureException = useContext(ConfigContext).captureException;
+export const ContentState = ({ isLoading, isError, isCustom, errorState, customState, children, loadingContent: LoadingContent = _jsx(CircularProgress, { color: "primary" }), }) => {
+    const { captureException } = useContext(ConfigContext);
     if (isLoading) {
         return _jsx(LoadingContainer, { children: LoadingContent });
     }
     if (isCustom && customState) {
-        return _jsx(Placeholder, __assign({}, customState));
+        return _jsx(Placeholder, Object.assign({}, customState));
     }
     if (isError && errorState) {
-        var _c = errorState.title, title = _c === void 0 ? 'Произошла ошибка' : _c, imgAlt = errorState.imgAlt, imgSrc = errorState.imgSrc, errorList = errorState.errorList, onRetry = errorState.onRetry, _d = errorState.actions, actions = _d === void 0 ? _jsx(Button, __assign({ onClick: onRetry }, { children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })) : _d;
-        var description = errorList.map(function (errorMessage) { return (_jsx(Typography, __assign({ component: "p" }, { children: errorMessage }), errorMessage)); });
+        const { title = 'Произошла ошибка', imgAlt, imgSrc, errorList, onRetry, actions = _jsx(Button, Object.assign({ onClick: onRetry }, { children: "\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0441\u043D\u043E\u0432\u0430" })), } = errorState;
+        const description = errorList.map((errorMessage) => (_jsx(Typography, Object.assign({ component: "p" }, { children: errorMessage }), errorMessage)));
         return (_jsx(Placeholder, { title: title, description: description, imgAlt: imgAlt, imgSrc: imgSrc, Actions: actions }));
     }
-    return (_jsx(ErrorBoundary, __assign({ captureException: captureException }, { children: children })));
+    return (_jsx(ErrorBoundary, Object.assign({ captureException: captureException }, { children: children })));
 };

package/esm/ContentState/styles.js

@@ -1,7 +1,8 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../styles';
-export var LoadingContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n"])));
-var templateObject_1;
+export const LoadingContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;

package/esm/DashboardLayout/DashboardLayout.js

@@ -3,8 +3,8 @@ import { Header } from './Header';
 import { Sidebar } from './Sidebar';
 import { Main } from './Main';
 import { DashboardLayoutRoot } from './styles';
-export var DashboardLayout = function (props) {
-    var children = props.children;
+export const DashboardLayout = (props) => {
+    const { children } = props;
     return _jsx(DashboardLayoutRoot, { children: children });
 };
 DashboardLayout.Header = Header;

package/esm/DashboardLayout/DashboardLayoutStory.js

@@ -1,18 +1,7 @@
-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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DashboardLayout } from '../DashboardLayout';
-export var DashboardLayoutStory = function (props) {
-    var header = props.header, sidebar = props.sidebar;
-    return (_jsxs(DashboardLayout, { children: [_jsx(DashboardLayout.Header, __assign({}, header)), _jsx(DashboardLayout.Sidebar, __assign({}, sidebar)), _jsx(DashboardLayout.Main, { children: "main-content" })] }));
+export const DashboardLayoutStory = (props) => {
+    const { header, sidebar } = props;
+    return (_jsxs(DashboardLayout, { children: [_jsx(DashboardLayout.Header, Object.assign({}, header)), _jsx(DashboardLayout.Sidebar, Object.assign({}, sidebar)), _jsx(DashboardLayout.Main, { children: "main-content" })] }));
 };
 export default DashboardLayoutStory;

package/esm/DashboardLayout/DashboardLayoutStoryTemplate.js

@@ -1,17 +1,6 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DashboardLayoutStory } from './DashboardLayoutStory';
-export var DashboardLayoutStoryTemplate = function (args) {
-    return _jsx(DashboardLayoutStory, __assign({}, args));
+export const DashboardLayoutStoryTemplate = (args) => {
+    return _jsx(DashboardLayoutStory, Object.assign({}, args));
 };
 export default DashboardLayoutStoryTemplate;

package/esm/DashboardLayout/Header/Header.js

@@ -1,24 +1,13 @@
-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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 // import { MenuListProps } from '../../MenuList';
 import { Product } from '../../Product';
 import { Profile } from '../../Profile';
 import { HeaderNav, HeaderRoot } from './styles';
-export var Header = forwardRef(function (props, ref) {
-    var ProductSwitcher = props.productSwitcher, product = props.product, 
+export const Header = forwardRef((props, ref) => {
+    const { productSwitcher: ProductSwitcher, product, 
     // menu: Menu,
-    profile = props.profile;
-    return (_jsxs(HeaderRoot, __assign({ ref: ref }, { children: [_jsxs(HeaderNav, { children: [ProductSwitcher && _jsx(ProductSwitcher, {}), _jsx(Product, __assign({}, product))] }), profile && _jsx(Profile, __assign({}, profile))] })));
+    profile, } = props;
+    return (_jsxs(HeaderRoot, Object.assign({ ref: ref }, { children: [_jsxs(HeaderNav, { children: [ProductSwitcher && _jsx(ProductSwitcher, {}), _jsx(Product, Object.assign({}, product))] }), profile && _jsx(Profile, Object.assign({}, profile))] })));
 });
 export default Header;

package/esm/DashboardLayout/Header/styles.js

@@ -1,20 +1,17 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../../styles';
-export var HeaderRoot = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n\n  display: flex;\n  grid-area: header;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n\n  background-color: ", ";\n  box-shadow: ", ";\n"], ["\n  z-index: ", ";\n\n  display: flex;\n  grid-area: header;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n\n  background-color: ", ";\n  box-shadow: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.zIndex.appBar;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2, 3);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.background.default;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.elevation[200];
-});
-export var HeaderNav = styled.nav(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var templateObject_1, templateObject_2;
+export const HeaderRoot = styled.header `
+  z-index: ${({ theme }) => theme.zIndex.appBar};
+
+  display: flex;
+  grid-area: header;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme }) => theme.spacing(2, 3)};
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+  box-shadow: ${({ theme }) => theme.elevation[200]};
+`;
+export const HeaderNav = styled.nav `
+  display: flex;
+  align-items: center;
+`;

package/esm/DashboardLayout/Main/Main.js

@@ -1,19 +1,7 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { MainRoot } from './styled';
-export var Main = forwardRef(function (_a, ref) {
-    var children = _a.children;
-    return _jsx(MainRoot, __assign({ ref: ref }, { children: children }));
+export const Main = forwardRef(({ children }, ref) => {
+    return _jsx(MainRoot, Object.assign({ ref: ref }, { children: children }));
 });
 export default Main;

package/esm/DashboardLayout/Main/styled.js

@@ -1,7 +1,7 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../../styles';
-export var MainRoot = styled.main(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  grid-area: main;\n  grid-row: 2;\n  grid-column: 2;\n  overflow: hidden;\n"], ["\n  grid-area: main;\n  grid-row: 2;\n  grid-column: 2;\n  overflow: hidden;\n"])));
-var templateObject_1;
+export const MainRoot = styled.main `
+  grid-area: main;
+  grid-row: 2;
+  grid-column: 2;
+  overflow: hidden;
+`;

package/esm/DashboardLayout/Sidebar/Sidebar.js

@@ -1,14 +1,3 @@
-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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { NavMenu } from '../../NavMenu';
@@ -16,13 +5,13 @@ import { useLocalStorage } from '../../hooks';
 import { SidebarRoot } from './styles';
 import { SidebarNav } from './SidebarNav';
 import { SidebarToggler } from './SidebarToggler';
-export var Sidebar = forwardRef(function (props, ref) {
-    var menu = props.menu, _a = props.localStorageKey, localStorageKey = _a === void 0 ? '@astral/ui::Sidebar::collapsedIn' : _a;
-    var _b = useLocalStorage(localStorageKey, true), _c = _b[0], collapsedIn = _c === void 0 ? true : _c, setCollapsedIn = _b[1];
-    var handleTogglerChange = function () {
-        setCollapsedIn(function () {
+export const Sidebar = forwardRef((props, ref) => {
+    const { menu, localStorageKey = '@astral/ui::Sidebar::collapsedIn' } = props;
+    const [collapsedIn = true, setCollapsedIn] = useLocalStorage(localStorageKey, true);
+    const handleTogglerChange = () => {
+        setCollapsedIn(() => {
             return !collapsedIn;
         });
     };
-    return (_jsxs(SidebarRoot, __assign({ ref: ref, collapsedIn: collapsedIn }, { children: [_jsx(SidebarNav, { menu: _jsx(NavMenu, { collapsedIn: collapsedIn, items: menu.items }) }), _jsx(SidebarToggler, { collapsedIn: collapsedIn, onToggle: handleTogglerChange })] })));
+    return (_jsxs(SidebarRoot, Object.assign({ ref: ref, collapsedIn: collapsedIn }, { children: [_jsx(SidebarNav, { menu: _jsx(NavMenu, { collapsedIn: collapsedIn, items: menu.items }) }), _jsx(SidebarToggler, { collapsedIn: collapsedIn, onToggle: handleTogglerChange })] })));
 });

package/esm/DashboardLayout/Sidebar/SidebarNav/SidebarNav.js

@@ -1,17 +1,6 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-export var SidebarNav = forwardRef(function (props, ref) {
-    var menu = props.menu;
-    return _jsx("nav", __assign({ ref: ref }, { children: menu }));
+export const SidebarNav = forwardRef((props, ref) => {
+    const { menu } = props;
+    return _jsx("nav", Object.assign({ ref: ref }, { children: menu }));
 });

package/esm/DashboardLayout/Sidebar/SidebarToggler/SidebarToggleButton/SidebarToggleButton.js

@@ -1,14 +1,3 @@
-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)
@@ -24,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { MenuOffOutlineMd, MenuOnOutlineMd } from '@astral/icons';
 import { SidebarTogglerButtonRoot } from './styles';
-export var SidebarTogglerButton = forwardRef(function (props, ref) {
-    var collapsedIn = props.collapsedIn, restProps = __rest(props, ["collapsedIn"]);
-    return (_jsx(SidebarTogglerButtonRoot, __assign({ ref: ref, startIcon: collapsedIn ? _jsx(MenuOffOutlineMd, {}) : _jsx(MenuOnOutlineMd, {}), variant: "text" }, restProps)));
+export const SidebarTogglerButton = forwardRef((props, ref) => {
+    const { collapsedIn } = props, restProps = __rest(props, ["collapsedIn"]);
+    return (_jsx(SidebarTogglerButtonRoot, Object.assign({ ref: ref, startIcon: collapsedIn ? _jsx(MenuOffOutlineMd, {}) : _jsx(MenuOnOutlineMd, {}), variant: "text" }, restProps)));
 });