@astral/ui 1.16.2 → 1.17.0

package/DataGrid/styles.js

@@ -1,17 +1,16 @@
 "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.StyledTableContainer = exports.DataGridContainer = void 0;
-var styles_1 = require("../styles");
-var Table_1 = require("../Table");
-exports.DataGridContainer = styles_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  overflow: hidden;\n"], ["\n  width: 100%;\n  overflow: hidden;\n"])));
+const styles_1 = require("../styles");
+const Table_1 = require("../Table");
+exports.DataGridContainer = styles_1.styled.div `
+  width: 100%;
+  overflow: hidden;
+`;
 exports.StyledTableContainer = (0, styles_1.styled)(Table_1.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;
+    shouldForwardProp: (prop) => prop !== 'maxHeight',
+}) `
+  position: relative;
+
+  max-height: ${({ maxHeight }) => `${maxHeight}px` || 'auto'};
+`;

package/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/DataGridPagination/DataGridPagination.js

@@ -1,15 +1,4 @@
 "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)
@@ -23,16 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridPagination = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Pagination_1 = require("../Pagination");
-var styles_1 = require("./styles");
-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 = (0, react_1.useMemo)(function () { return (page - 1) * rowsPerPage + 1; }, [page, rowsPerPage]);
-    var rangeEnd = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(styles_1.PaginationWrapper, __assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(styles_1.Range, __assign({ variant: "h6" }, { children: formattedRange })), (0, jsx_runtime_1.jsx)(Pagination_1.Pagination, __assign({ count: count, page: page }, props))] })));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Pagination_1 = require("../Pagination");
+const styles_1 = require("./styles");
+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 = (0, react_1.useMemo)(() => (page - 1) * rowsPerPage + 1, [page, rowsPerPage]);
+    const rangeEnd = (0, react_1.useMemo)(() => (page - 1) * rowsPerPage + rowsPerPage, [page, rowsPerPage]);
+    const formattedRange = `${rangeStart} — ${rangeEnd} из ${totalCount} записей`;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.PaginationWrapper, Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(styles_1.Range, Object.assign({ variant: "h6" }, { children: formattedRange })), (0, jsx_runtime_1.jsx)(Pagination_1.Pagination, Object.assign({ count: count, page: page }, props))] })));
 };
 exports.DataGridPagination = DataGridPagination;

package/DataGridPagination/styles.js

@@ -1,18 +1,14 @@
 "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.Range = exports.PaginationWrapper = void 0;
-var styles_1 = require("../styles");
-var Typography_1 = require("../Typography");
-exports.PaginationWrapper = styles_1.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);
-});
-exports.Range = (0, styles_1.styled)(Typography_1.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;
+const styles_1 = require("../styles");
+const Typography_1 = require("../Typography");
+exports.PaginationWrapper = styles_1.styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${({ theme }) => theme.spacing(2, 0)};
+`;
+exports.Range = (0, styles_1.styled)(Typography_1.Typography) `
+  color: ${({ theme }) => theme.palette.grey['700']};
+`;

package/DatePicker/DatePicker.js

@@ -1,15 +1,4 @@
 "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)
@@ -26,32 +15,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_datepicker_1 = __importDefault(require("react-datepicker"));
-var material_1 = require("@mui/material");
-var icons_1 = require("@astral/icons");
-var date_fns_1 = require("date-fns");
-var MaskField_1 = require("../MaskField");
-var ConfigProvider_1 = require("../ConfigProvider");
-var styled_1 = require("./styled");
-var DatePickerHeader_1 = require("./DatePickerHeader");
-var DatePickerDay_1 = require("./DatePickerDay");
-var MIN_YEAR = 1000;
-exports.DatePicker = (0, react_1.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 = (0, react_1.useContext)(ConfigProvider_1.ConfigContext).locale;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_datepicker_1 = __importDefault(require("react-datepicker"));
+const material_1 = require("@mui/material");
+const icons_1 = require("@astral/icons");
+const date_fns_1 = require("date-fns");
+const MaskField_1 = require("../MaskField");
+const ConfigProvider_1 = require("../ConfigProvider");
+const styled_1 = require("./styled");
+const DatePickerHeader_1 = require("./DatePickerHeader");
+const DatePickerDay_1 = require("./DatePickerDay");
+const MIN_YEAR = 1000;
+exports.DatePicker = (0, react_1.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 } = (0, react_1.useContext)(ConfigProvider_1.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 = (0, date_fns_1.parse)(e === null || e === void 0 ? void 0 : e.target.value, dateFormat, new Date());
+    const handleChangeRaw = (e) => {
+        const date = (0, date_fns_1.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);
@@ -60,9 +49,9 @@ exports.DatePicker = (0, react_1.forwardRef)(function (props, ref) {
             onChange(date, e);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(styled_1.DatePickerWrapper, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, __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 ((0, jsx_runtime_1.jsx)(DatePickerHeader_1.DatePickerHeader, __assign({}, renderProps))); }, renderDayContents: function (dayOfMonth) { return ((0, jsx_runtime_1.jsx)(DatePickerDay_1.DatePickerDay, { dayOfMonth: dayOfMonth })); }, customInput: (0, jsx_runtime_1.jsx)(MaskField_1.MaskField, __assign({}, restInputProps, { mask: Date, autofix: "pad", onAccept: handleMaskFieldAccept, InputProps: {
-                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, __assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(icons_1.CalendarOutlineMd, {}) }))),
-                }, inputRef: function (el) {
+    return ((0, jsx_runtime_1.jsx)(styled_1.DatePickerWrapper, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, 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) => ((0, jsx_runtime_1.jsx)(DatePickerHeader_1.DatePickerHeader, Object.assign({}, renderProps))), renderDayContents: (dayOfMonth) => ((0, jsx_runtime_1.jsx)(DatePickerDay_1.DatePickerDay, { dayOfMonth: dayOfMonth })), customInput: (0, jsx_runtime_1.jsx)(MaskField_1.MaskField, Object.assign({}, restInputProps, { mask: Date, autofix: "pad", onAccept: handleMaskFieldAccept, InputProps: {
+                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(icons_1.CalendarOutlineMd, {}) }))),
+                }, inputRef: (el) => {
                     // если передан ref - пишем в ref.current элемент из MaskField (inputRef принимает только функцию)
                     if (ref) {
                         ref.current =

package/DatePicker/DatePickerDay/DatePickerDay.js

@@ -1,20 +1,9 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerDay = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_1 = require("./styled");
-var DatePickerDay = function (props) {
-    return ((0, jsx_runtime_1.jsx)(styled_1.DatePickerDayButton, __assign({ variant: "text" }, { children: props.dayOfMonth })));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = require("./styled");
+const DatePickerDay = (props) => {
+    return ((0, jsx_runtime_1.jsx)(styled_1.DatePickerDayButton, Object.assign({ variant: "text" }, { children: props.dayOfMonth })));
 };
 exports.DatePickerDay = DatePickerDay;

package/DatePicker/DatePickerDay/styled.js

@@ -1,11 +1,9 @@
 "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.DatePickerDayButton = void 0;
-var Button_1 = require("../../Button");
-var styles_1 = require("../../styles");
-exports.DatePickerDayButton = (0, styles_1.styled)(Button_1.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;
+const Button_1 = require("../../Button");
+const styles_1 = require("../../styles");
+exports.DatePickerDayButton = (0, styles_1.styled)(Button_1.Button) `
+  min-width: 41px;
+  height: 32px;
+`;

package/DatePicker/DatePickerHeader/DatePickerHeader.js

@@ -1,31 +1,20 @@
 "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.DatePickerHeader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var icons_1 = require("@astral/icons");
-var format_1 = __importDefault(require("date-fns/format"));
-var IconButton_1 = require("../../IconButton");
-var ConfigProvider_1 = require("../../ConfigProvider");
-var styled_1 = require("./styled");
-var DatePickerHeader = function (props) {
-    var increaseMonth = props.increaseMonth, decreaseMonth = props.decreaseMonth, date = props.date;
-    var locale = (0, react_1.useContext)(ConfigProvider_1.ConfigContext).locale;
-    var localizedDate = (0, react_1.useMemo)(function () { return (0, format_1.default)(date, 'LLLL yyy', { locale: locale }); }, [date, locale]);
-    return ((0, jsx_runtime_1.jsxs)(styled_1.DatePickerHeaderWrapper, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, __assign({ variant: "text", onClick: decreaseMonth }, { children: (0, jsx_runtime_1.jsx)(icons_1.PreviousOutlineMd, {}) })), (0, jsx_runtime_1.jsx)(styled_1.DatePickerHeaderTitle, __assign({ variant: "h6" }, { children: localizedDate })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, __assign({ variant: "text", onClick: increaseMonth }, { children: (0, jsx_runtime_1.jsx)(icons_1.NextOutlineMd, {}) }))] }));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@astral/icons");
+const format_1 = __importDefault(require("date-fns/format"));
+const IconButton_1 = require("../../IconButton");
+const ConfigProvider_1 = require("../../ConfigProvider");
+const styled_1 = require("./styled");
+const DatePickerHeader = (props) => {
+    const { increaseMonth, decreaseMonth, date } = props;
+    const { locale } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
+    const localizedDate = (0, react_1.useMemo)(() => (0, format_1.default)(date, 'LLLL yyy', { locale }), [date, locale]);
+    return ((0, jsx_runtime_1.jsxs)(styled_1.DatePickerHeaderWrapper, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ variant: "text", onClick: decreaseMonth }, { children: (0, jsx_runtime_1.jsx)(icons_1.PreviousOutlineMd, {}) })), (0, jsx_runtime_1.jsx)(styled_1.DatePickerHeaderTitle, Object.assign({ variant: "h6" }, { children: localizedDate })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ variant: "text", onClick: increaseMonth }, { children: (0, jsx_runtime_1.jsx)(icons_1.NextOutlineMd, {}) }))] }));
 };
 exports.DatePickerHeader = DatePickerHeader;

package/DatePicker/DatePickerHeader/styled.js

@@ -1,12 +1,13 @@
 "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.DatePickerHeaderTitle = exports.DatePickerHeaderWrapper = void 0;
-var styles_1 = require("../../styles");
-var Typography_1 = require("../../Typography");
-exports.DatePickerHeaderWrapper = styles_1.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"])));
-exports.DatePickerHeaderTitle = (0, styles_1.styled)(Typography_1.Typography)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-transform: capitalize;\n"], ["\n  text-transform: capitalize;\n"])));
-var templateObject_1, templateObject_2;
+const styles_1 = require("../../styles");
+const Typography_1 = require("../../Typography");
+exports.DatePickerHeaderWrapper = styles_1.styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+exports.DatePickerHeaderTitle = (0, styles_1.styled)(Typography_1.Typography) `
+  text-transform: capitalize;
+`;

package/DatePicker/styled.js

@@ -1,73 +1,97 @@
 "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.DatePickerWrapper = void 0;
-var styles_1 = require("../styles");
-exports.DatePickerWrapper = styles_1.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;
+const styles_1 = require("../styles");
+exports.DatePickerWrapper = styles_1.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/DatePickerProvider/DatePickerProvider.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerProvider = exports.DatePickerContext = void 0;
-var ConfigProvider_1 = require("../ConfigProvider");
-var ConfigProvider_2 = require("../ConfigProvider");
+const ConfigProvider_1 = require("../ConfigProvider");
+const ConfigProvider_2 = require("../ConfigProvider");
 /*
  * @deprecated Компонент будет удален с выходом версии 2.0. Используйте ConfigProvider
  */
-var DatePickerContext = ConfigProvider_1.ConfigContext;
+const DatePickerContext = ConfigProvider_1.ConfigContext;
 exports.DatePickerContext = DatePickerContext;
 /*
  * @deprecated Компонент будет удален с выходом версии 2.0. Используйте ConfigProvider
  */
-var DatePickerProvider = ConfigProvider_2.ConfigProvider;
+const DatePickerProvider = ConfigProvider_2.ConfigProvider;
 exports.DatePickerProvider = DatePickerProvider;

package/Description/Description.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Description = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Name_1 = require("./Name");
-var Value_1 = require("./Value");
-var styles_1 = require("./styles");
-var Description = function (_a) {
-    var children = _a.children;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Name_1 = require("./Name");
+const Value_1 = require("./Value");
+const styles_1 = require("./styles");
+const Description = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(styles_1.DescriptionWrapper, { children: children });
 };
 exports.Description = Description;

package/Description/Name/Name.js

@@ -1,15 +1,4 @@
 "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)
@@ -23,10 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Name = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Typography_1 = require("../../Typography");
-var Name = function (_a) {
-    var children = _a.children, _b = _a.color, color = _b === void 0 ? 'textSecondary' : _b, props = __rest(_a, ["children", "color"]);
-    return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, __assign({}, props, { color: color }, { children: [children, ":\u00A0"] })));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Typography_1 = require("../../Typography");
+const Name = (_a) => {
+    var { children, color = 'textSecondary' } = _a, props = __rest(_a, ["children", "color"]);
+    return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, Object.assign({}, props, { color: color }, { children: [children, ":\u00A0"] })));
 };
 exports.Name = Name;

package/Description/Value/Value.js

@@ -1,15 +1,4 @@
 "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)
@@ -23,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Value = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Typography_1 = require("../../Typography");
-var STUB = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u2013" });
-var Value = function (_a) {
-    var children = _a.children, _b = _a.stub, stub = _b === void 0 ? STUB : _b, props = __rest(_a, ["children", "stub"]);
-    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, __assign({}, props, { children: children || stub })));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Typography_1 = require("../../Typography");
+const STUB = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u2013" });
+const Value = (_a) => {
+    var { children, stub = STUB } = _a, props = __rest(_a, ["children", "stub"]);
+    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({}, props, { children: children || stub })));
 };
 exports.Value = Value;