@astral/ui 0.15.0 → 0.18.0

package/DatePicker/DatePicker.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DatePickerProps } from './types';
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DatePicker;

package/DatePicker/DatePicker.js

@@ -0,0 +1,70 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var lab_1 = require("@mui/lab");
+var icons_1 = require("@astral/icons");
+var TextField_1 = require("../TextField");
+var componentsProps = {
+    switchViewButton: {
+        sx: {
+            padding: 1,
+            borderRadius: 1,
+        },
+    },
+    leftArrowButton: {
+        sx: {
+            padding: 1,
+            borderRadius: 1,
+        },
+    },
+    rightArrowButton: {
+        sx: {
+            padding: 1,
+            borderRadius: 1,
+        },
+    },
+};
+exports.DatePicker = (0, react_1.forwardRef)(function (props, ref) {
+    var _a = props.value, value = _a === void 0 ? new Date() : _a, _b = props.mask, mask = _b === void 0 ? '__.__.____' : _b, restProps = __rest(props, ["value", "mask"]);
+    var renderInput = (0, react_1.useCallback)(function (params) {
+        var textFieldParams = params;
+        return (0, jsx_runtime_1.jsx)(TextField_1.TextField, __assign({}, textFieldParams), void 0);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(lab_1.DatePicker, __assign({}, restProps, { ref: ref, value: value, mask: mask, showDaysOutsideCurrentMonth: true, renderInput: renderInput, components: { OpenPickerIcon: icons_1.CalendarOutlineMd }, componentsProps: componentsProps, OpenPickerButtonProps: {
+            sx: {
+                borderRadius: 1,
+            },
+        }, PaperProps: {
+            sx: {
+                marginTop: 2,
+                boxShadow: function (theme) { return theme.elevation[200]; },
+            },
+        }, PopperProps: {
+            placement: 'bottom-start',
+        } }), void 0));
+});
+exports.default = exports.DatePicker;

package/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DatePicker';

package/DatePicker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DatePicker"), exports);

package/DatePicker/types.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerProps as MuiDatePickerProps } from '@mui/lab';
+export declare type DatePickerProps = Omit<MuiDatePickerProps<Date>, 'components' | 'renderInput' | 'showDaysOutsideCurrentMonth' | 'components' | 'componentsProps' | 'OpenPickerButtonProps' | 'PaperProps' | 'PopperProps'>;
+export declare type DatePickerValue = Date;

package/DatePicker/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/List/List.d.ts

@@ -1,3 +1,3 @@
-import { ListProps } from '@mui/material';
-export { StyledList as List } from './styled';
-export type { ListProps };
+/// <reference types="react" />
+import { ListProps } from './types';
+export declare const List: ({ collapsed, children, ...props }: ListProps) => JSX.Element;

package/List/List.js

@@ -1,5 +1,39 @@
 "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.List = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Collapse_1 = __importDefault(require("@mui/material/Collapse"));
+var ListProvider_1 = require("../ListProvider");
 var styled_1 = require("./styled");
-Object.defineProperty(exports, "List", { enumerable: true, get: function () { return styled_1.StyledList; } });
+var COLLAPSED_SIZE = 60;
+var List = function (_a) {
+    var collapsed = _a.collapsed, children = _a.children, props = __rest(_a, ["collapsed", "children"]);
+    var open = collapsed === undefined || collapsed;
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledList, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(ListProvider_1.ListProvider, __assign({ value: { open: open } }, { children: (0, jsx_runtime_1.jsx)(Collapse_1.default, __assign({ orientation: "horizontal", in: open, collapsedSize: COLLAPSED_SIZE }, { children: children }), void 0) }), void 0) }), void 0));
+};
+exports.List = List;

package/List/index.d.ts

@@ -1 +1,2 @@
 export * from './List';
+export * from './types';

package/List/index.js

@@ -11,3 +11,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./List"), exports);
+__exportStar(require("./types"), exports);

package/List/styled.d.ts

@@ -10,4 +10,6 @@ export declare const StyledList: import("@emotion/styled").StyledComponent<{
     ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "dense" | "subheader" | "disablePadding"> & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    collapsed?: boolean | undefined;
 }, {}, {}>;

package/List/styled.js

@@ -7,5 +7,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledList = void 0;
 var material_1 = require("@mui/material");
 var styles_1 = require("../styles");
-exports.StyledList = (0, styles_1.styled)(material_1.List)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n"], ["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n"])));
+exports.StyledList = (0, styles_1.styled)(material_1.List)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n\n  .MuiCollapse-root {\n    transition: ", ";\n  }\n\n  .MuiCollapse-wrapperInner {\n    width: 100%;\n  }\n"], ["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n\n  .MuiCollapse-root {\n    transition: ", ";\n  }\n\n  .MuiCollapse-wrapperInner {\n    width: 100%;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.transitions.create('width', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.shortest,
+    }), " !important");
+});
 var templateObject_1;

package/List/types.d.ts

@@ -0,0 +1,4 @@
+import { ListProps as MuiListProps } from '@mui/material';
+export declare type ListProps = MuiListProps & {
+    collapsed?: boolean;
+};

package/List/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ListItemText/ListItemText.js

@@ -24,9 +24,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItemText = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var material_1 = require("@mui/material");
+var react_1 = require("react");
+var ListProvider_1 = require("../ListProvider");
+var styled_1 = require("./styled");
 var ListItemText = function (_a) {
     var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)(material_1.ListItemText, __assign({}, props), void 0);
+    var open = (0, react_1.useContext)(ListProvider_1.ListContext).open;
+    return (0, jsx_runtime_1.jsx)(styled_1.StyledListItemText, __assign({}, props, { open: open }), void 0);
 };
 exports.ListItemText = ListItemText;

package/ListItemText/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ListItemTextProps } from '@mui/material';
+export declare const StyledListItemText: import("@emotion/styled").StyledComponent<ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & ListItemTextProps<"span", "p"> & {
+    open: boolean;
+}, {}, {}>;

package/ListItemText/styled.js

@@ -0,0 +1,20 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledListItemText = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("../styles");
+exports.StyledListItemText = (0, styles_1.styled)(material_1.ListItemText)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-align: left;\n  text-overflow: ellipsis;\n\n  opacity: ", ";\n\n  transition: ", ";\n"], ["\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-align: left;\n  text-overflow: ellipsis;\n\n  opacity: ", ";\n\n  transition: ", ";\n"])), function (_a) {
+    var open = _a.open;
+    return (open ? 1 : 0);
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.transitions.create('opacity', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+    }));
+});
+var templateObject_1;

package/ListProvider/ListProvider.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const ListContext: import("react").Context<{
+    open: boolean;
+}>;
+export declare const ListProvider: import("react").Provider<{
+    open: boolean;
+}>;

package/ListProvider/ListProvider.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListProvider = exports.ListContext = void 0;
+var react_1 = require("react");
+exports.ListContext = (0, react_1.createContext)({ open: true });
+exports.ListProvider = exports.ListContext.Provider;

package/ListProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ListProvider';
+export * from './types';

package/ListProvider/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ListProvider"), exports);
+__exportStar(require("./types"), exports);

package/ListProvider/types.d.ts

@@ -0,0 +1,3 @@
+export declare type ListContextType = {
+    open: boolean;
+};

package/ListProvider/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/LocalizationProvider/LocalizationProvider.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { LocalizationProviderProps } from './types';
+export declare const LocalizationProvider: FC<LocalizationProviderProps>;
+export default LocalizationProvider;

package/LocalizationProvider/LocalizationProvider.js

@@ -0,0 +1,27 @@
+"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.LocalizationProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var AdapterDateFns_1 = __importDefault(require("@mui/lab/AdapterDateFns"));
+var lab_1 = require("@mui/lab");
+var locale_1 = require("date-fns/locale");
+var LocalizationProvider = function (_a) {
+    var children = _a.children, _b = _a.locale, locale = _b === void 0 ? locale_1.ru : _b;
+    return ((0, jsx_runtime_1.jsx)(lab_1.LocalizationProvider, __assign({ dateAdapter: AdapterDateFns_1.default, locale: locale }, { children: children }), void 0));
+};
+exports.LocalizationProvider = LocalizationProvider;
+exports.default = exports.LocalizationProvider;

package/LocalizationProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './LocalizationProvider';

package/LocalizationProvider/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./LocalizationProvider"), exports);

package/LocalizationProvider/types.d.ts

@@ -0,0 +1,2 @@
+import { LocalizationProviderProps as MuiLocalizationProviderProps } from '@mui/lab';
+export declare type LocalizationProviderProps = Omit<MuiLocalizationProviderProps, 'dateAdapter'>;

package/LocalizationProvider/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/esm/DatePicker/DatePicker.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DatePickerProps } from './types';
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DatePicker;

package/esm/DatePicker/DatePicker.js

@@ -0,0 +1,67 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { DatePicker as MuiDatePicker } from '@mui/lab';
+import { CalendarOutlineMd } from '@astral/icons';
+import { TextField } from '../TextField';
+var componentsProps = {
+    switchViewButton: {
+        sx: {
+            padding: 1,
+            borderRadius: 1,
+        },
+    },
+    leftArrowButton: {
+        sx: {
+            padding: 1,
+            borderRadius: 1,
+        },
+    },
+    rightArrowButton: {
+        sx: {
+            padding: 1,
+            borderRadius: 1,
+        },
+    },
+};
+export var DatePicker = forwardRef(function (props, ref) {
+    var _a = props.value, value = _a === void 0 ? new Date() : _a, _b = props.mask, mask = _b === void 0 ? '__.__.____' : _b, restProps = __rest(props, ["value", "mask"]);
+    var renderInput = useCallback(function (params) {
+        var textFieldParams = params;
+        return _jsx(TextField, __assign({}, textFieldParams), void 0);
+    }, []);
+    return (_jsx(MuiDatePicker, __assign({}, restProps, { ref: ref, value: value, mask: mask, showDaysOutsideCurrentMonth: true, renderInput: renderInput, components: { OpenPickerIcon: CalendarOutlineMd }, componentsProps: componentsProps, OpenPickerButtonProps: {
+            sx: {
+                borderRadius: 1,
+            },
+        }, PaperProps: {
+            sx: {
+                marginTop: 2,
+                boxShadow: function (theme) { return theme.elevation[200]; },
+            },
+        }, PopperProps: {
+            placement: 'bottom-start',
+        } }), void 0));
+});
+export default DatePicker;

package/esm/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DatePicker';

package/esm/DatePicker/index.js

@@ -0,0 +1 @@
+export * from './DatePicker';

package/esm/DatePicker/types.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerProps as MuiDatePickerProps } from '@mui/lab';
+export declare type DatePickerProps = Omit<MuiDatePickerProps<Date>, 'components' | 'renderInput' | 'showDaysOutsideCurrentMonth' | 'components' | 'componentsProps' | 'OpenPickerButtonProps' | 'PaperProps' | 'PopperProps'>;
+export declare type DatePickerValue = Date;

package/esm/DatePicker/types.js

@@ -0,0 +1 @@
+export {};

package/esm/List/List.d.ts

@@ -1,3 +1,3 @@
-import { ListProps } from '@mui/material';
-export { StyledList as List } from './styled';
-export type { ListProps };
+/// <reference types="react" />
+import { ListProps } from './types';
+export declare const List: ({ collapsed, children, ...props }: ListProps) => JSX.Element;

package/esm/List/List.js

@@ -1 +1,32 @@
-export { StyledList as List } from './styled';
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Collapse from '@mui/material/Collapse';
+import { ListProvider } from '../ListProvider';
+import { StyledList } from './styled';
+var COLLAPSED_SIZE = 60;
+export var List = function (_a) {
+    var collapsed = _a.collapsed, children = _a.children, props = __rest(_a, ["collapsed", "children"]);
+    var open = collapsed === undefined || collapsed;
+    return (_jsx(StyledList, __assign({}, props, { children: _jsx(ListProvider, __assign({ value: { open: open } }, { children: _jsx(Collapse, __assign({ orientation: "horizontal", in: open, collapsedSize: COLLAPSED_SIZE }, { children: children }), void 0) }), void 0) }), void 0));
+};

package/esm/List/index.d.ts

@@ -1 +1,2 @@
 export * from './List';
+export * from './types';

package/esm/List/index.js

@@ -1 +1,2 @@
 export * from './List';
+export * from './types';

package/esm/List/styled.d.ts

@@ -10,4 +10,6 @@ export declare const StyledList: import("@emotion/styled").StyledComponent<{
     ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "dense" | "subheader" | "disablePadding"> & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    collapsed?: boolean | undefined;
 }, {}, {}>;

package/esm/List/styled.js

@@ -4,5 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { List as MuiList } from '@mui/material';
 import { styled } from '../styles';
-export var StyledList = styled(MuiList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n"], ["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n"])));
+export var StyledList = styled(MuiList)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n\n  .MuiCollapse-root {\n    transition: ", ";\n  }\n\n  .MuiCollapse-wrapperInner {\n    width: 100%;\n  }\n"], ["\n  a {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n\n    text-decoration: none;\n  }\n\n  .MuiCollapse-root {\n    transition: ", ";\n  }\n\n  .MuiCollapse-wrapperInner {\n    width: 100%;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.transitions.create('width', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.shortest,
+    }), " !important");
+});
 var templateObject_1;

package/esm/List/types.d.ts

@@ -0,0 +1,4 @@
+import { ListProps as MuiListProps } from '@mui/material';
+export declare type ListProps = MuiListProps & {
+    collapsed?: boolean;
+};

package/esm/List/types.js

@@ -0,0 +1 @@
+export {};

package/esm/ListItemText/ListItemText.js

@@ -21,8 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ListItemText as MuiListItemText, } from '@mui/material';
+import { useContext } from 'react';
+import { ListContext } from '../ListProvider';
+import { StyledListItemText } from './styled';
 export var ListItemText = function (_a) {
     var props = __rest(_a, []);
-    return _jsx(MuiListItemText, __assign({}, props), void 0);
+    var open = useContext(ListContext).open;
+    return _jsx(StyledListItemText, __assign({}, props, { open: open }), void 0);
 };

package/esm/ListItemText/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ListItemTextProps } from '@mui/material';
+export declare const StyledListItemText: import("@emotion/styled").StyledComponent<ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & ListItemTextProps<"span", "p"> & {
+    open: boolean;
+}, {}, {}>;

package/esm/ListItemText/styled.js

@@ -0,0 +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 { ListItemText } from '@mui/material';
+import { styled } from '../styles';
+export var StyledListItemText = styled(ListItemText)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-align: left;\n  text-overflow: ellipsis;\n\n  opacity: ", ";\n\n  transition: ", ";\n"], ["\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-align: left;\n  text-overflow: ellipsis;\n\n  opacity: ", ";\n\n  transition: ", ";\n"])), function (_a) {
+    var open = _a.open;
+    return (open ? 1 : 0);
+}, function (_a) {
+    var theme = _a.theme;
+    return "".concat(theme.transitions.create('opacity', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+    }));
+});
+var templateObject_1;

package/esm/ListProvider/ListProvider.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const ListContext: import("react").Context<{
+    open: boolean;
+}>;
+export declare const ListProvider: import("react").Provider<{
+    open: boolean;
+}>;

package/esm/ListProvider/ListProvider.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export var ListContext = createContext({ open: true });
+export var ListProvider = ListContext.Provider;

package/esm/ListProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ListProvider';
+export * from './types';

package/esm/ListProvider/index.js

@@ -0,0 +1,2 @@
+export * from './ListProvider';
+export * from './types';

package/esm/ListProvider/types.d.ts

@@ -0,0 +1,3 @@
+export declare type ListContextType = {
+    open: boolean;
+};

package/esm/ListProvider/types.js

@@ -0,0 +1 @@
+export {};

package/esm/LocalizationProvider/LocalizationProvider.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { LocalizationProviderProps } from './types';
+export declare const LocalizationProvider: FC<LocalizationProviderProps>;
+export default LocalizationProvider;

package/esm/LocalizationProvider/LocalizationProvider.js

@@ -0,0 +1,20 @@
+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 AdapterDateFns from '@mui/lab/AdapterDateFns';
+import { LocalizationProvider as MuiLocalizationProvider } from '@mui/lab';
+import { ru } from 'date-fns/locale';
+export var LocalizationProvider = function (_a) {
+    var children = _a.children, _b = _a.locale, locale = _b === void 0 ? ru : _b;
+    return (_jsx(MuiLocalizationProvider, __assign({ dateAdapter: AdapterDateFns, locale: locale }, { children: children }), void 0));
+};
+export default LocalizationProvider;

package/esm/LocalizationProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './LocalizationProvider';

package/esm/LocalizationProvider/index.js

@@ -0,0 +1 @@
+export * from './LocalizationProvider';

package/esm/LocalizationProvider/types.d.ts

@@ -0,0 +1,2 @@
+import { LocalizationProviderProps as MuiLocalizationProviderProps } from '@mui/lab';
+export declare type LocalizationProviderProps = Omit<MuiLocalizationProviderProps, 'dateAdapter'>;

package/esm/LocalizationProvider/types.js

@@ -0,0 +1 @@
+export {};

package/esm/index.d.ts

@@ -21,6 +21,7 @@ export * from './ListItemButton';
 export * from './ListItemIcon';
 export * from './ListItemSecondaryAction';
 export * from './ListItemText';
+export * from './ListProvider';
 export * from './ListSubheader';
 export * from './MaskField';
 export * from './Menu';
@@ -37,3 +38,5 @@ export * from './ThemeProvider';
 export * from './TextField';
 export * from './Typography';
 export * from './Tooltip';
+export * from './DatePicker';
+export * from './LocalizationProvider';

package/esm/index.js

@@ -21,6 +21,7 @@ export * from './ListItemButton';
 export * from './ListItemIcon';
 export * from './ListItemSecondaryAction';
 export * from './ListItemText';
+export * from './ListProvider';
 export * from './ListSubheader';
 export * from './MaskField';
 export * from './Menu';
@@ -37,3 +38,5 @@ export * from './ThemeProvider';
 export * from './TextField';
 export * from './Typography';
 export * from './Tooltip';
+export * from './DatePicker';
+export * from './LocalizationProvider';

package/esm/theme/__tests__/BaseTheme.test.js

@@ -49,6 +49,6 @@ describe('createTheme', function () {
     });
     it('Theme has elevation params', function () {
         var theme = createTheme({ brand: Brand.SIGN, fontsUrls: fontsUrls });
-        expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;');
+        expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740');
     });
 });

package/esm/theme/components/MuiCalendarPicker.d.ts

@@ -0,0 +1,2 @@
+import { LabComponents } from '@mui/lab/themeAugmentation';
+export declare const MuiCalendarPicker: LabComponents['MuiCalendarPicker'];

package/esm/theme/components/MuiCalendarPicker.js

@@ -0,0 +1,16 @@
+export var MuiCalendarPicker = {
+    styleOverrides: {
+        viewTransitionContainer: function (_a) {
+            var theme = _a.theme;
+            return {
+                maxHeight: 260,
+                overflow: 'hidden',
+                '& span': {
+                    color: theme.palette.grey[600],
+                    width: 41,
+                    margin: 0,
+                },
+            };
+        },
+    },
+};

package/esm/theme/components/MuiOutlinedInput.js

@@ -13,6 +13,9 @@ export var MuiOutlinedInput = {
                 '&:hover': {
                     // FIXME: to theme
                     background: '#EEF1F4',
+                    '&.Mui-disabled': {
+                        background: theme.palette.background.element,
+                    },
                 },
                 '&:hover .MuiOutlinedInput-notchedOutline': {
                     borderColor: theme.palette.grey[300],

package/esm/theme/components/MuiPickersDay.d.ts

@@ -0,0 +1,2 @@
+import { LabComponents } from '@mui/lab/themeAugmentation';
+export declare const MuiPickersDay: LabComponents['MuiPickersDay'];

package/esm/theme/components/MuiPickersDay.js

@@ -0,0 +1,46 @@
+export var MuiPickersDay = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                width: 41,
+                height: 32,
+                margin: 0,
+                color: theme.palette.grey[900],
+                fontSize: theme.typography.link.fontSize,
+                fontWeight: theme.typography.fontWeightRegular,
+                borderRadius: theme.shape.small,
+                '&.MuiPickersDay-today': {
+                    border: 0,
+                    fontWeight: theme.typography.fontWeightMedium,
+                    '&:before': {
+                        content: '""',
+                        position: 'absolute',
+                        height: 2,
+                        width: 33,
+                        background: theme.palette.primary[900],
+                        bottom: theme.spacing(1),
+                    },
+                    '&.Mui-selected': {
+                        '&:before': {
+                            background: theme.palette.primary[200],
+                        },
+                    },
+                },
+                '&.Mui-selected': {
+                    fontWeight: theme.typography.fontWeightRegular,
+                },
+                '&.Mui-focusVisible': {
+                    background: theme.palette.primary[200],
+                },
+                '&.MuiPickersDay-dayOutsideMonth': {
+                    color: theme.palette.grey[600],
+                },
+                '&.Mui-disabled': {
+                    color: theme.palette.grey[300],
+                    fontWeight: theme.typography.fontWeightRegular,
+                },
+            };
+        },
+    },
+};

package/esm/theme/components/MuiYearPicker.d.ts

@@ -0,0 +1,2 @@
+import { LabComponents } from '@mui/lab/themeAugmentation';
+export declare const MuiYearPicker: LabComponents['MuiYearPicker'];

package/esm/theme/components/MuiYearPicker.js

@@ -0,0 +1,13 @@
+export var MuiYearPicker = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                '& .PrivatePickersYear-yearButton': {
+                    fontSize: theme.typography.link.fontSize,
+                    borderRadius: theme.shape.small,
+                },
+            };
+        },
+    },
+};

package/esm/theme/components/components.js

@@ -10,6 +10,9 @@ import { MuiDialog } from './MuiDialog';
 import { MuiDialogTitle } from './MuiDialogTitle';
 import { MuiDialogContent } from './MuiDialogContent';
 import { MuiDialogActions } from './MuiDialogActions';
+import { MuiPickersDay } from './MuiPickersDay';
+import { MuiCalendarPicker } from './MuiCalendarPicker';
+import { MuiYearPicker } from './MuiYearPicker';
 var getMuiCssBaseline = function (fontUrls) { return ({
     styleOverrides: "\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 300;\n      font-display: swap;\n      src: url(".concat(fontUrls.light.woff2, ") format('woff2'), url(").concat(fontUrls.light.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 400;\n      font-display: swap;\n      src: url(").concat(fontUrls.regular.woff2, ") format('woff2'), url(").concat(fontUrls.regular.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 500;\n      font-display: swap;\n      src: url(").concat(fontUrls.medium.woff2, ") format('woff2'), url(").concat(fontUrls.medium.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 700;\n      font-display: swap;\n      src: url(").concat(fontUrls.bold.woff2, ") format('woff2'), url(").concat(fontUrls.bold.woff, ") format('woff');\n    }\n  "),
 }); };
@@ -76,4 +79,7 @@ export var getComponents = function (fontUrls) { return ({
     MuiDialogTitle: MuiDialogTitle,
     MuiDialogContent: MuiDialogContent,
     MuiDialogActions: MuiDialogActions,
+    MuiPickersDay: MuiPickersDay,
+    MuiCalendarPicker: MuiCalendarPicker,
+    MuiYearPicker: MuiYearPicker,
 }); };

package/esm/theme/elevation.js

@@ -1,7 +1,7 @@
 export var elevation = {
-    100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;',
-    200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733;',
-    300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726;',
-    400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726;',
-    500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726;',
+    100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740',
+    200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733',
+    300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726',
+    400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726',
+    500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726',
 };

package/index.d.ts

@@ -21,6 +21,7 @@ export * from './ListItemButton';
 export * from './ListItemIcon';
 export * from './ListItemSecondaryAction';
 export * from './ListItemText';
+export * from './ListProvider';
 export * from './ListSubheader';
 export * from './MaskField';
 export * from './Menu';
@@ -37,3 +38,5 @@ export * from './ThemeProvider';
 export * from './TextField';
 export * from './Typography';
 export * from './Tooltip';
+export * from './DatePicker';
+export * from './LocalizationProvider';

package/index.js

@@ -33,6 +33,7 @@ __exportStar(require("./ListItemButton"), exports);
 __exportStar(require("./ListItemIcon"), exports);
 __exportStar(require("./ListItemSecondaryAction"), exports);
 __exportStar(require("./ListItemText"), exports);
+__exportStar(require("./ListProvider"), exports);
 __exportStar(require("./ListSubheader"), exports);
 __exportStar(require("./MaskField"), exports);
 __exportStar(require("./Menu"), exports);
@@ -49,3 +50,5 @@ __exportStar(require("./ThemeProvider"), exports);
 __exportStar(require("./TextField"), exports);
 __exportStar(require("./Typography"), exports);
 __exportStar(require("./Tooltip"), exports);
+__exportStar(require("./DatePicker"), exports);
+__exportStar(require("./LocalizationProvider"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "0.15.0",
+  "version": "0.18.0",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^0.15.0",
+    "@astral/icons": "^0.18.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.8.1",
     "@emotion/server": "11.4.0",
@@ -16,6 +16,7 @@
     "@mui/base": "5.0.0-alpha.69",
     "@mui/lab": "5.0.0-alpha.70",
     "@mui/material": "5.4.3",
+    "date-fns": "^2.28.0",
     "lodash-es": "4.17.21",
     "react-imask": "^6.4.2"
   },

package/theme/__tests__/BaseTheme.test.js

@@ -51,6 +51,6 @@ describe('createTheme', function () {
     });
     it('Theme has elevation params', function () {
         var theme = (0, baseTheme_1.createTheme)({ brand: constants_1.Brand.SIGN, fontsUrls: fontsUrls });
-        expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;');
+        expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740');
     });
 });

package/theme/components/MuiCalendarPicker.d.ts

@@ -0,0 +1,2 @@
+import { LabComponents } from '@mui/lab/themeAugmentation';
+export declare const MuiCalendarPicker: LabComponents['MuiCalendarPicker'];

package/theme/components/MuiCalendarPicker.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiCalendarPicker = void 0;
+exports.MuiCalendarPicker = {
+    styleOverrides: {
+        viewTransitionContainer: function (_a) {
+            var theme = _a.theme;
+            return {
+                maxHeight: 260,
+                overflow: 'hidden',
+                '& span': {
+                    color: theme.palette.grey[600],
+                    width: 41,
+                    margin: 0,
+                },
+            };
+        },
+    },
+};

package/theme/components/MuiOutlinedInput.js

@@ -16,6 +16,9 @@ exports.MuiOutlinedInput = {
                 '&:hover': {
                     // FIXME: to theme
                     background: '#EEF1F4',
+                    '&.Mui-disabled': {
+                        background: theme.palette.background.element,
+                    },
                 },
                 '&:hover .MuiOutlinedInput-notchedOutline': {
                     borderColor: theme.palette.grey[300],

package/theme/components/MuiPickersDay.d.ts

@@ -0,0 +1,2 @@
+import { LabComponents } from '@mui/lab/themeAugmentation';
+export declare const MuiPickersDay: LabComponents['MuiPickersDay'];

package/theme/components/MuiPickersDay.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiPickersDay = void 0;
+exports.MuiPickersDay = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                width: 41,
+                height: 32,
+                margin: 0,
+                color: theme.palette.grey[900],
+                fontSize: theme.typography.link.fontSize,
+                fontWeight: theme.typography.fontWeightRegular,
+                borderRadius: theme.shape.small,
+                '&.MuiPickersDay-today': {
+                    border: 0,
+                    fontWeight: theme.typography.fontWeightMedium,
+                    '&:before': {
+                        content: '""',
+                        position: 'absolute',
+                        height: 2,
+                        width: 33,
+                        background: theme.palette.primary[900],
+                        bottom: theme.spacing(1),
+                    },
+                    '&.Mui-selected': {
+                        '&:before': {
+                            background: theme.palette.primary[200],
+                        },
+                    },
+                },
+                '&.Mui-selected': {
+                    fontWeight: theme.typography.fontWeightRegular,
+                },
+                '&.Mui-focusVisible': {
+                    background: theme.palette.primary[200],
+                },
+                '&.MuiPickersDay-dayOutsideMonth': {
+                    color: theme.palette.grey[600],
+                },
+                '&.Mui-disabled': {
+                    color: theme.palette.grey[300],
+                    fontWeight: theme.typography.fontWeightRegular,
+                },
+            };
+        },
+    },
+};

package/theme/components/MuiYearPicker.d.ts

@@ -0,0 +1,2 @@
+import { LabComponents } from '@mui/lab/themeAugmentation';
+export declare const MuiYearPicker: LabComponents['MuiYearPicker'];

package/theme/components/MuiYearPicker.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiYearPicker = void 0;
+exports.MuiYearPicker = {
+    styleOverrides: {
+        root: function (_a) {
+            var theme = _a.theme;
+            return {
+                '& .PrivatePickersYear-yearButton': {
+                    fontSize: theme.typography.link.fontSize,
+                    borderRadius: theme.shape.small,
+                },
+            };
+        },
+    },
+};

package/theme/components/components.js

@@ -13,6 +13,9 @@ var MuiDialog_1 = require("./MuiDialog");
 var MuiDialogTitle_1 = require("./MuiDialogTitle");
 var MuiDialogContent_1 = require("./MuiDialogContent");
 var MuiDialogActions_1 = require("./MuiDialogActions");
+var MuiPickersDay_1 = require("./MuiPickersDay");
+var MuiCalendarPicker_1 = require("./MuiCalendarPicker");
+var MuiYearPicker_1 = require("./MuiYearPicker");
 var getMuiCssBaseline = function (fontUrls) { return ({
     styleOverrides: "\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 300;\n      font-display: swap;\n      src: url(".concat(fontUrls.light.woff2, ") format('woff2'), url(").concat(fontUrls.light.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 400;\n      font-display: swap;\n      src: url(").concat(fontUrls.regular.woff2, ") format('woff2'), url(").concat(fontUrls.regular.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 500;\n      font-display: swap;\n      src: url(").concat(fontUrls.medium.woff2, ") format('woff2'), url(").concat(fontUrls.medium.woff, ") format('woff');\n    }\n    @font-face {\n      font-family: 'Ubuntu';\n      font-style: 'normal';\n      font-weight: 700;\n      font-display: swap;\n      src: url(").concat(fontUrls.bold.woff2, ") format('woff2'), url(").concat(fontUrls.bold.woff, ") format('woff');\n    }\n  "),
 }); };
@@ -79,5 +82,8 @@ var getComponents = function (fontUrls) { return ({
     MuiDialogTitle: MuiDialogTitle_1.MuiDialogTitle,
     MuiDialogContent: MuiDialogContent_1.MuiDialogContent,
     MuiDialogActions: MuiDialogActions_1.MuiDialogActions,
+    MuiPickersDay: MuiPickersDay_1.MuiPickersDay,
+    MuiCalendarPicker: MuiCalendarPicker_1.MuiCalendarPicker,
+    MuiYearPicker: MuiYearPicker_1.MuiYearPicker,
 }); };
 exports.getComponents = getComponents;

package/theme/elevation.js

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.elevation = void 0;
 exports.elevation = {
-    100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;',
-    200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733;',
-    300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726;',
-    400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726;',
-    500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726;',
+    100: '0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740',
+    200: '0px 0px 1px 0px #072D574F, 0px 3px 5px 0px #072D5733',
+    300: '0px 0px 1px 0px #072D574F, 0px 8px 12px 0px #072D5726',
+    400: '0px 0px 1px 0px #072D574F, 0px 10px 18px 0px #072D5726',
+    500: '0px 0px 1px 0px #072D574F, 0px 18px 28px 0px #072D5726',
 };