@astral/ui 0.14.0 → 0.17.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/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/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

@@ -34,3 +34,8 @@ export * from './Tag';
 export * from './TextArea';
 export * from './theme';
 export * from './ThemeProvider';
+export * from './TextField';
+export * from './Typography';
+export * from './Tooltip';
+export * from './DatePicker';
+export * from './LocalizationProvider';

package/esm/index.js

@@ -34,3 +34,8 @@ export * from './Tag';
 export * from './TextArea';
 export * from './theme';
 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

@@ -34,3 +34,8 @@ export * from './Tag';
 export * from './TextArea';
 export * from './theme';
 export * from './ThemeProvider';
+export * from './TextField';
+export * from './Typography';
+export * from './Tooltip';
+export * from './DatePicker';
+export * from './LocalizationProvider';

package/index.js

@@ -46,3 +46,8 @@ __exportStar(require("./Tag"), exports);
 __exportStar(require("./TextArea"), exports);
 __exportStar(require("./theme"), exports);
 __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.14.0",
+  "version": "0.17.0",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^0.14.0",
+    "@astral/icons": "^0.17.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',
 };