@astral/ui 1.16.2 → 1.17.0

package/esm/DataGrid/DataGridNoData/styles.js

@@ -1,17 +1,29 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { Typography } from '../../Typography';
 import { styled } from '../../styles';
-export var DataGridNoDataWrapper = styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: sticky;\n  top: 50%;\n  left: 50%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  transform: translate(-50%, -50%);\n"], ["\n  position: sticky;\n  top: 50%;\n  left: 50%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  transform: translate(-50%, -50%);\n"])));
-export var DataGridNoDataFigure = styled.figure(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"], ["\n  position: absolute;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
-export var DataGridNoDataIcon = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  svg {\n    width: ", ";\n    height: auto;\n  }\n"], ["\n  svg {\n    width: ", ";\n    height: auto;\n  }\n"])), function (_a) {
-    var noDataIconWidth = _a.noDataIconWidth;
-    return "".concat(noDataIconWidth, "px");
-});
-export var DataGridNoDataFigcaption = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[600];
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export const DataGridNoDataWrapper = styled.tr `
+  position: sticky;
+  top: 50%;
+  left: 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transform: translate(-50%, -50%);
+`;
+export const DataGridNoDataFigure = styled.figure `
+  position: absolute;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const DataGridNoDataIcon = styled.div `
+  svg {
+    width: ${({ noDataIconWidth }) => `${noDataIconWidth}px`};
+    height: auto;
+  }
+`;
+export const DataGridNoDataFigcaption = styled(Typography) `
+  color: ${({ theme }) => theme.palette.grey[600]};
+`;

package/esm/DataGrid/styles.js

@@ -1,14 +1,13 @@
-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';
 import { TableContainer } from '../Table';
-export var DataGridContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  overflow: hidden;\n"], ["\n  width: 100%;\n  overflow: hidden;\n"])));
-export var StyledTableContainer = styled(TableContainer, {
-    shouldForwardProp: function (prop) { return prop !== 'maxHeight'; },
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n\n  max-height: ", ";\n"], ["\n  position: relative;\n\n  max-height: ", ";\n"])), function (_a) {
-    var maxHeight = _a.maxHeight;
-    return "".concat(maxHeight, "px") || 'auto';
-});
-var templateObject_1, templateObject_2;
+export const DataGridContainer = styled.div `
+  width: 100%;
+  overflow: hidden;
+`;
+export const StyledTableContainer = styled(TableContainer, {
+    shouldForwardProp: (prop) => prop !== 'maxHeight',
+}) `
+  position: relative;
+
+  max-height: ${({ maxHeight }) => `${maxHeight}px` || 'auto'};
+`;

package/esm/DataGrid/types.d.ts

@@ -17,7 +17,7 @@ export declare type DataGridSort<SortField> = {
      */
     sort: SortState;
 };
-export declare type DataGridColumns<Data extends {}> = {
+export declare type DataGridColumns<Data extends object> = {
     /**
      * @example {field: 'test'}
      * Значение ключа поля данных для колонки

package/esm/DataGridPagination/DataGridPagination.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,11 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { Pagination } from '../Pagination';
 import { PaginationWrapper, Range } from './styles';
-export var DataGridPagination = function (_a) {
-    var page = _a.page, _b = _a.rowsPerPage, rowsPerPage = _b === void 0 ? 10 : _b, totalCount = _a.totalCount, className = _a.className, props = __rest(_a, ["page", "rowsPerPage", "totalCount", "className"]);
-    var count = Math.ceil(totalCount / rowsPerPage);
-    var rangeStart = useMemo(function () { return (page - 1) * rowsPerPage + 1; }, [page, rowsPerPage]);
-    var rangeEnd = useMemo(function () { return (page - 1) * rowsPerPage + rowsPerPage; }, [page, rowsPerPage]);
-    var formattedRange = "".concat(rangeStart, " \u2014 ").concat(rangeEnd, " \u0438\u0437 ").concat(totalCount, " \u0437\u0430\u043F\u0438\u0441\u0435\u0439");
-    return (_jsxs(PaginationWrapper, __assign({ className: className }, { children: [_jsx(Range, __assign({ variant: "h6" }, { children: formattedRange })), _jsx(Pagination, __assign({ count: count, page: page }, props))] })));
+export const DataGridPagination = (_a) => {
+    var { page, rowsPerPage = 10, totalCount, className } = _a, props = __rest(_a, ["page", "rowsPerPage", "totalCount", "className"]);
+    const count = Math.ceil(totalCount / rowsPerPage);
+    const rangeStart = useMemo(() => (page - 1) * rowsPerPage + 1, [page, rowsPerPage]);
+    const rangeEnd = useMemo(() => (page - 1) * rowsPerPage + rowsPerPage, [page, rowsPerPage]);
+    const formattedRange = `${rangeStart} — ${rangeEnd} из ${totalCount} записей`;
+    return (_jsxs(PaginationWrapper, Object.assign({ className: className }, { children: [_jsx(Range, Object.assign({ variant: "h6" }, { children: formattedRange })), _jsx(Pagination, Object.assign({ count: count, page: page }, props))] })));
 };

package/esm/DataGridPagination/styles.js

@@ -1,15 +1,11 @@
-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';
 import { Typography } from '../Typography';
-export var PaginationWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2, 0);
-});
-export var Range = styled(Typography)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey['700'];
-});
-var templateObject_1, templateObject_2;
+export const PaginationWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme }) => theme.spacing(2, 0)};
+`;
+export const Range = styled(Typography) `
+  color: ${({ theme }) => theme.palette.grey['700']};
+`;

package/esm/DatePicker/DatePicker.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)
@@ -31,21 +20,21 @@ import { ConfigContext } from '../ConfigProvider';
 import { DatePickerWrapper } from './styled';
 import { DatePickerHeader } from './DatePickerHeader';
 import { DatePickerDay } from './DatePickerDay';
-var MIN_YEAR = 1000;
-export var DatePicker = forwardRef(function (props, ref) {
-    var value = props.value, onChange = props.onChange, _a = props.inputProps, inputProps = _a === void 0 ? {} : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? 'dd.MM.yyyy' : _b, restProps = __rest(props, ["value", "onChange", "inputProps", "dateFormat"]);
-    var placeholder = inputProps.placeholder, restInputProps = __rest(inputProps, ["placeholder"]);
-    var locale = useContext(ConfigContext).locale;
+const MIN_YEAR = 1000;
+export const DatePicker = forwardRef((props, ref) => {
+    const { value, onChange, inputProps = {}, dateFormat = 'dd.MM.yyyy' } = props, restProps = __rest(props, ["value", "onChange", "inputProps", "dateFormat"]);
+    const { placeholder } = inputProps, restInputProps = __rest(inputProps, ["placeholder"]);
+    const { locale } = useContext(ConfigContext);
     // уберкостыль, react-date-picker забирает значение из event.target.value
-    var handleMaskFieldAccept = function (val, _maskRef, _e, onMaskFieldChange) {
+    const handleMaskFieldAccept = (val, _maskRef, _e, onMaskFieldChange) => {
         onMaskFieldChange === null || onMaskFieldChange === void 0 ? void 0 : onMaskFieldChange({
             target: {
                 value: val,
             },
         });
     };
-    var handleChangeRaw = function (e) {
-        var date = parse(e === null || e === void 0 ? void 0 : e.target.value, dateFormat, new Date());
+    const handleChangeRaw = (e) => {
+        const date = parse(e === null || e === void 0 ? void 0 : e.target.value, dateFormat, new Date());
         // если инпут пустой - кладем в value null
         if (!(e === null || e === void 0 ? void 0 : e.target.value)) {
             onChange(null, e);
@@ -54,9 +43,9 @@ export var DatePicker = forwardRef(function (props, ref) {
             onChange(date, e);
         }
     };
-    return (_jsx(DatePickerWrapper, { children: _jsx(ReactDatePicker, __assign({}, restProps, { locale: locale, selected: value, openToDate: value !== null && value !== void 0 ? value : undefined, dateFormat: dateFormat, placeholderText: placeholder, onChange: onChange, onChangeRaw: handleChangeRaw, renderCustomHeader: function (renderProps) { return (_jsx(DatePickerHeader, __assign({}, renderProps))); }, renderDayContents: function (dayOfMonth) { return (_jsx(DatePickerDay, { dayOfMonth: dayOfMonth })); }, customInput: _jsx(MaskField, __assign({}, restInputProps, { mask: Date, autofix: "pad", onAccept: handleMaskFieldAccept, InputProps: {
-                    endAdornment: (_jsx(InputAdornment, __assign({ position: "end" }, { children: _jsx(CalendarOutlineMd, {}) }))),
-                }, inputRef: function (el) {
+    return (_jsx(DatePickerWrapper, { children: _jsx(ReactDatePicker, Object.assign({}, restProps, { locale: locale, selected: value, openToDate: value !== null && value !== void 0 ? value : undefined, dateFormat: dateFormat, placeholderText: placeholder, onChange: onChange, onChangeRaw: handleChangeRaw, renderCustomHeader: (renderProps) => (_jsx(DatePickerHeader, Object.assign({}, renderProps))), renderDayContents: (dayOfMonth) => (_jsx(DatePickerDay, { dayOfMonth: dayOfMonth })), customInput: _jsx(MaskField, Object.assign({}, restInputProps, { mask: Date, autofix: "pad", onAccept: handleMaskFieldAccept, InputProps: {
+                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(CalendarOutlineMd, {}) }))),
+                }, inputRef: (el) => {
                     // если передан ref - пишем в ref.current элемент из MaskField (inputRef принимает только функцию)
                     if (ref) {
                         ref.current =

package/esm/DatePicker/DatePickerDay/DatePickerDay.js

@@ -1,16 +1,5 @@
-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 { DatePickerDayButton } from './styled';
-export var DatePickerDay = function (props) {
-    return (_jsx(DatePickerDayButton, __assign({ variant: "text" }, { children: props.dayOfMonth })));
+export const DatePickerDay = (props) => {
+    return (_jsx(DatePickerDayButton, Object.assign({ variant: "text" }, { children: props.dayOfMonth })));
 };

package/esm/DatePicker/DatePickerDay/styled.js

@@ -1,8 +1,6 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { Button } from '../../Button';
 import { styled } from '../../styles';
-export var DatePickerDayButton = styled(Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 41px;\n  height: 32px;\n"], ["\n  min-width: 41px;\n  height: 32px;\n"])));
-var templateObject_1;
+export const DatePickerDayButton = styled(Button) `
+  min-width: 41px;
+  height: 32px;
+`;

package/esm/DatePicker/DatePickerHeader/DatePickerHeader.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 { useContext, useMemo } from 'react';
 import { NextOutlineMd, PreviousOutlineMd } from '@astral/icons';
@@ -16,9 +5,9 @@ import format from 'date-fns/format';
 import { IconButton } from '../../IconButton';
 import { ConfigContext } from '../../ConfigProvider';
 import { DatePickerHeaderTitle, DatePickerHeaderWrapper } from './styled';
-export var DatePickerHeader = function (props) {
-    var increaseMonth = props.increaseMonth, decreaseMonth = props.decreaseMonth, date = props.date;
-    var locale = useContext(ConfigContext).locale;
-    var localizedDate = useMemo(function () { return format(date, 'LLLL yyy', { locale: locale }); }, [date, locale]);
-    return (_jsxs(DatePickerHeaderWrapper, { children: [_jsx(IconButton, __assign({ variant: "text", onClick: decreaseMonth }, { children: _jsx(PreviousOutlineMd, {}) })), _jsx(DatePickerHeaderTitle, __assign({ variant: "h6" }, { children: localizedDate })), _jsx(IconButton, __assign({ variant: "text", onClick: increaseMonth }, { children: _jsx(NextOutlineMd, {}) }))] }));
+export const DatePickerHeader = (props) => {
+    const { increaseMonth, decreaseMonth, date } = props;
+    const { locale } = useContext(ConfigContext);
+    const localizedDate = useMemo(() => format(date, 'LLLL yyy', { locale }), [date, locale]);
+    return (_jsxs(DatePickerHeaderWrapper, { children: [_jsx(IconButton, Object.assign({ variant: "text", onClick: decreaseMonth }, { children: _jsx(PreviousOutlineMd, {}) })), _jsx(DatePickerHeaderTitle, Object.assign({ variant: "h6" }, { children: localizedDate })), _jsx(IconButton, Object.assign({ variant: "text", onClick: increaseMonth }, { children: _jsx(NextOutlineMd, {}) }))] }));
 };

package/esm/DatePicker/DatePickerHeader/styled.js

@@ -1,9 +1,10 @@
-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';
 import { Typography } from '../../Typography';
-export var DatePickerHeaderWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
-export var DatePickerHeaderTitle = styled(Typography)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-transform: capitalize;\n"], ["\n  text-transform: capitalize;\n"])));
-var templateObject_1, templateObject_2;
+export const DatePickerHeaderWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+export const DatePickerHeaderTitle = styled(Typography) `
+  text-transform: capitalize;
+`;

package/esm/DatePicker/styled.js

@@ -1,70 +1,94 @@
-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 DatePickerWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .react-datepicker {\n    min-width: 320px;\n    min-height: 300px;\n    margin-top: ", ";\n    padding: ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n    box-shadow: ", ";\n\n    &-popper {\n      z-index: ", ";\n    }\n\n    & .react-datepicker__day-names,\n    .react-datepicker__week {\n      display: flex;\n      justify-content: space-between;\n      width: 287px;\n    }\n\n    & .react-datepicker__day {\n      & > button {\n        font-weight: ", ";\n      }\n\n      &--outside-month > button {\n        color: ", ";\n      }\n\n      &--disabled > button {\n        color: ", ";\n        font-weight: ", ";\n\n        cursor: default;\n      }\n\n      &--selected > button {\n        color: ", ";\n\n        background-color: ", ";\n      }\n\n      &--today > button {\n        position: relative;\n\n        font-weight: ", ";\n      }\n\n      &--disabled > button:focus {\n        outline: none;\n      }\n\n      &--disabled:not(.react-datepicker__day--selected) > button:hover,\n      &--disabled:not(.react-datepicker__day--selected) > button:active {\n        background-color: transparent;\n      }\n\n      &--disabled:focus-visible {\n        outline: none;\n      }\n\n      &--today > button::before {\n        position: absolute;\n        bottom: ", ";\n\n        width: 33px;\n        height: 2px;\n\n        background-color: ", ";\n\n        content: '';\n      }\n\n      &--today > .react-datepicker__day--selected > button::before {\n        background-color: ", ";\n      }\n\n      &-name {\n        width: 41px;\n        margin-top: ", ";\n        margin-bottom: ", ";\n\n        color: ", ";\n        font-weight: ", ";\n        font-size: ", ";\n        text-align: center;\n        text-transform: uppercase;\n      }\n    }\n  }\n"], ["\n  .react-datepicker {\n    min-width: 320px;\n    min-height: 300px;\n    margin-top: ", ";\n    padding: ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n    box-shadow: ", ";\n\n    &-popper {\n      z-index: ", ";\n    }\n\n    & .react-datepicker__day-names,\n    .react-datepicker__week {\n      display: flex;\n      justify-content: space-between;\n      width: 287px;\n    }\n\n    & .react-datepicker__day {\n      & > button {\n        font-weight: ", ";\n      }\n\n      &--outside-month > button {\n        color: ", ";\n      }\n\n      &--disabled > button {\n        color: ", ";\n        font-weight: ", ";\n\n        cursor: default;\n      }\n\n      &--selected > button {\n        color: ", ";\n\n        background-color: ", ";\n      }\n\n      &--today > button {\n        position: relative;\n\n        font-weight: ", ";\n      }\n\n      &--disabled > button:focus {\n        outline: none;\n      }\n\n      &--disabled:not(.react-datepicker__day--selected) > button:hover,\n      &--disabled:not(.react-datepicker__day--selected) > button:active {\n        background-color: transparent;\n      }\n\n      &--disabled:focus-visible {\n        outline: none;\n      }\n\n      &--today > button::before {\n        position: absolute;\n        bottom: ", ";\n\n        width: 33px;\n        height: 2px;\n\n        background-color: ", ";\n\n        content: '';\n      }\n\n      &--today > .react-datepicker__day--selected > button::before {\n        background-color: ", ";\n      }\n\n      &-name {\n        width: 41px;\n        margin-top: ", ";\n        margin-bottom: ", ";\n\n        color: ", ";\n        font-weight: ", ";\n        font-size: ", ";\n        text-align: center;\n        text-transform: uppercase;\n      }\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(4);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.background.paper;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(1);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.elevation[200];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.zIndex.drawer;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.fontWeightRegular;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[600];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[300];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.fontWeightRegular;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.common.white;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.primary.main;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.fontWeightMedium;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(1);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.primary[900];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.primary[200];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(3);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[600];
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.fontWeightMedium;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.h7.fontSize;
-});
-var templateObject_1;
+export const DatePickerWrapper = styled.div `
+  .react-datepicker {
+    min-width: 320px;
+    min-height: 300px;
+    margin-top: ${({ theme }) => theme.spacing(2)};
+    padding: ${({ theme }) => theme.spacing(4)};
+
+    background-color: ${({ theme }) => theme.palette.background.paper};
+    border-radius: ${({ theme }) => theme.spacing(1)};
+    box-shadow: ${({ theme }) => theme.elevation[200]};
+
+    &-popper {
+      z-index: ${({ theme }) => theme.zIndex.drawer};
+    }
+
+    & .react-datepicker__day-names,
+    .react-datepicker__week {
+      display: flex;
+      justify-content: space-between;
+      width: 287px;
+    }
+
+    & .react-datepicker__day {
+      & > button {
+        font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
+      }
+
+      &--outside-month > button {
+        color: ${({ theme }) => theme.palette.grey[600]};
+      }
+
+      &--disabled > button {
+        color: ${({ theme }) => theme.palette.grey[300]};
+        font-weight: ${({ theme }) => theme.typography.fontWeightRegular};
+
+        cursor: default;
+      }
+
+      &--selected > button {
+        color: ${({ theme }) => theme.palette.common.white};
+
+        background-color: ${({ theme }) => theme.palette.primary.main};
+      }
+
+      &--today > button {
+        position: relative;
+
+        font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
+      }
+
+      &--disabled > button:focus {
+        outline: none;
+      }
+
+      &--disabled:not(.react-datepicker__day--selected) > button:hover,
+      &--disabled:not(.react-datepicker__day--selected) > button:active {
+        background-color: transparent;
+      }
+
+      &--disabled:focus-visible {
+        outline: none;
+      }
+
+      &--today > button::before {
+        position: absolute;
+        bottom: ${({ theme }) => theme.spacing(1)};
+
+        width: 33px;
+        height: 2px;
+
+        background-color: ${({ theme }) => theme.palette.primary[900]};
+
+        content: '';
+      }
+
+      &--today > .react-datepicker__day--selected > button::before {
+        background-color: ${({ theme }) => theme.palette.primary[200]};
+      }
+
+      &-name {
+        width: 41px;
+        margin-top: ${({ theme }) => theme.spacing(3)};
+        margin-bottom: ${({ theme }) => theme.spacing(2)};
+
+        color: ${({ theme }) => theme.palette.grey[600]};
+        font-weight: ${({ theme }) => theme.typography.fontWeightMedium};
+        font-size: ${({ theme }) => theme.typography.h7.fontSize};
+        text-align: center;
+        text-transform: uppercase;
+      }
+    }
+  }
+`;

package/esm/DatePickerProvider/DatePickerProvider.js

@@ -3,9 +3,9 @@ import { ConfigProvider } from '../ConfigProvider';
 /*
  * @deprecated Компонент будет удален с выходом версии 2.0. Используйте ConfigProvider
  */
-var DatePickerContext = ConfigContext;
+const DatePickerContext = ConfigContext;
 /*
  * @deprecated Компонент будет удален с выходом версии 2.0. Используйте ConfigProvider
  */
-var DatePickerProvider = ConfigProvider;
+const DatePickerProvider = ConfigProvider;
 export { DatePickerContext, DatePickerProvider };

package/esm/Description/Description.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Name } from './Name';
 import { Value } from './Value';
 import { DescriptionWrapper } from './styles';
-export var Description = function (_a) {
-    var children = _a.children;
+export const Description = ({ children }) => {
     return _jsx(DescriptionWrapper, { children: children });
 };
 Description.Name = Name;

package/esm/Description/Name/Name.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,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '../../Typography';
-export var Name = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'textSecondary' : _b, props = __rest(_a, ["children", "color"]);
-    return (_jsxs(Typography, __assign({}, props, { color: color }, { children: [children, ":\u00A0"] })));
+export const Name = (_a) => {
+    var { children, color = 'textSecondary' } = _a, props = __rest(_a, ["children", "color"]);
+    return (_jsxs(Typography, Object.assign({}, props, { color: color }, { children: [children, ":\u00A0"] })));
 };

package/esm/Description/Value/Value.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,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '../../Typography';
-var STUB = _jsx(_Fragment, { children: "\u2013" });
-export var Value = function (_a) {
-    var children = _a.children, _b = _a.stub, stub = _b === void 0 ? STUB : _b, props = __rest(_a, ["children", "stub"]);
-    return (_jsx(Typography, __assign({}, props, { children: children || stub })));
+const STUB = _jsx(_Fragment, { children: "\u2013" });
+export const Value = (_a) => {
+    var { children, stub = STUB } = _a, props = __rest(_a, ["children", "stub"]);
+    return (_jsx(Typography, Object.assign({}, props, { children: children || stub })));
 };

package/esm/Description/styles.js

@@ -1,13 +1,14 @@
-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 DescriptionWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n\n  ", " {\n    flex-direction: column;\n\n    .MuiTypography-root {\n      font-size: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n\n  ", " {\n    flex-direction: column;\n\n    .MuiTypography-root {\n      font-size: ", ";\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.breakpoints.down('sm');
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.typography.fontSize;
-});
-var templateObject_1;
+export const DescriptionWrapper = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-direction: column;
+
+    .MuiTypography-root {
+      font-size: ${({ theme }) => theme.typography.fontSize};
+    }
+  }
+`;

package/esm/Dialog/Dialog.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,14 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog as MuiDialog } from '@mui/material';
 import { DialogTitle } from '../index';
-export var Dialog = function (_a) {
-    var children = _a.children, title = _a.title, disableBackdropClick = _a.disableBackdropClick, onClose = _a.onClose, props = __rest(_a, ["children", "title", "disableBackdropClick", "onClose"]);
-    var handleClose = onClose &&
-        (function (event, reason) {
+export const Dialog = (_a) => {
+    var { children, title, disableBackdropClick, onClose } = _a, props = __rest(_a, ["children", "title", "disableBackdropClick", "onClose"]);
+    const handleClose = onClose &&
+        ((event, reason) => {
             if (disableBackdropClick && reason == 'backdropClick') {
                 return;
             }
             onClose(event, reason);
         });
-    return (_jsxs(MuiDialog, __assign({ onClose: handleClose }, props, { children: [title && _jsx(DialogTitle, __assign({ onClose: onClose }, { children: title })), children] })));
+    return (_jsxs(MuiDialog, Object.assign({ onClose: handleClose }, props, { children: [title && _jsx(DialogTitle, Object.assign({ onClose: onClose }, { children: title })), children] })));
 };

package/esm/DialogActions/DialogActions.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 { DialogActions as MuiDialogActions, } from '@mui/material';
 import { Grid } from '../Grid';
-export var DialogActions = function (_a) {
-    var children = _a.children, disableSpacing = _a.disableSpacing, props = __rest(_a, ["children", "disableSpacing"]);
-    return (_jsx(MuiDialogActions, __assign({}, props, { children: _jsx(Grid, __assign({ container: true, autoFlow: "column", justifyContent: "end", spacing: disableSpacing ? 0 : 2 }, { children: children })) })));
+export const DialogActions = (_a) => {
+    var { children, disableSpacing } = _a, props = __rest(_a, ["children", "disableSpacing"]);
+    return (_jsx(MuiDialogActions, Object.assign({}, props, { children: _jsx(Grid, Object.assign({ container: true, autoFlow: "column", justifyContent: "end", spacing: disableSpacing ? 0 : 2 }, { children: children })) })));
 };