@astral/ui 1.26.0 → 1.28.1

package/DataGrid/DataGridHeadColumn/styles.d.ts

@@ -9,7 +9,8 @@ export declare const StyledTableCell: import("@emotion/styled").StyledComponent<
 export declare const TableCellTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/DataGrid/DataGridNoData/styles.d.ts

@@ -16,7 +16,8 @@ export declare const DataGridNoDataIcon: import("@emotion/styled").StyledCompone
 export declare const DataGridNoDataFigcaption: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/DataGridPagination/styles.d.ts

@@ -6,7 +6,8 @@ export declare const PaginationWrapper: import("@emotion/styled").StyledComponen
 export declare const Range: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/DatePicker/DateCalendar/DateCalendarHead/styles.d.ts

@@ -5,7 +5,8 @@ export declare const DateCalendarHeadBtn: import("@emotion/styled").StyledCompon
 export declare const DateCalendarHeadText: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/DatePicker/DatePicker.d.ts

@@ -11,6 +11,7 @@ export declare type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
     onClose?: () => void;
     inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
     disabled?: boolean;
+    value?: Date;
 };
 export declare const DatePicker: import("react").ForwardRefExoticComponent<MondayFirst & Partial<MinMaxDate> & {
     mask?: string | undefined;
@@ -20,4 +21,5 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Monda
     onClose?: (() => void) | undefined;
     inputProps?: Omit<TextFieldProps, "ref" | "value" | "onChange"> | undefined;
     disabled?: boolean | undefined;
+    value?: Date | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/DatePicker/DatePicker.js

@@ -24,20 +24,21 @@ const MinMaxDateContext_1 = require("./MinMaxDateContext");
 const YearMonthDayPicker_1 = require("./YearMonthDayPicker");
 const useBaseDateInRange_1 = require("./hooks/useBaseDateInRange");
 const useSelectedBaseDate_1 = require("./hooks/useSelectedBaseDate");
-const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, }, forwardedRef) => {
+const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value: parentValue, }, forwardedRef) => {
     const { maxDate, minDate } = (0, react_1.useContext)(MinMaxDateContext_1.MinMaxDateContext);
     const ref = (0, useForwardedRef_1.useForwardedRef)(forwardedRef);
     const [isActive, openPopper, closePopper] = (0, useToggle_1.useToggle)({
         onActive: onOpen,
         onInactive: onClose,
     });
-    const [selectedDate, setSelectedDate] = (0, react_1.useState)();
+    const [selectedDate, setSelectedDate] = (0, react_1.useState)(parentValue);
     const [maskedDate, setMaskedDate] = (0, react_1.useState)('');
     const baseDate = (0, useBaseDateInRange_1.useBaseDateInRange)({ minDate, maxDate });
     const selectedBaseDate = (0, useSelectedBaseDate_1.useSelectedBaseDate)(selectedDate);
     const checkValue = (0, react_1.useCallback)((value) => {
-        setMaskedDate(value);
-        const date = (0, date_1.parseDate)(value);
+        const isString = typeof value === 'string';
+        setMaskedDate(isString ? value : (0, date_1.formatDate)(value, mask));
+        const date = isString ? (0, date_1.parseDate)(value, mask) : value;
         if (value === '' || !(0, date_1.isDate)(date)) {
             setSelectedDate(null);
         }
@@ -51,6 +52,7 @@ const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onC
         closePopper();
     };
     (0, react_1.useEffect)(() => onChange === null || onChange === void 0 ? void 0 : onChange(selectedDate || maskedDate), [selectedDate, maskedDate]);
+    (0, react_1.useEffect)(() => checkValue(parentValue || ''), [parentValue]);
     const blurHandler = (e) => {
         checkValue(e.target.value);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);

package/MenuGroup/stories/styled.d.ts

@@ -32,7 +32,8 @@ export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<{
 export declare const StyledLabel: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/MenuGroup/styled.d.ts

@@ -2,7 +2,8 @@
 export declare const StyledLabel: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/Notification/NotificationTemplate/styled.d.ts

@@ -62,7 +62,8 @@ export declare const NotificationCloseButton: import("@emotion/styled").StyledCo
 export declare const NotificationTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/OverflowTypography/styles.d.ts

@@ -3,7 +3,8 @@ import { OverflowedProps } from './OverflowTypography';
 export declare const OverflowTypographyWrapper: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & Required<OverflowedProps>, {}, {}>;

package/Placeholder/styles.d.ts

@@ -14,14 +14,16 @@ export declare const PlaceholderImage: import("@emotion/styled").StyledComponent
 export declare const PlaceholderTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const PlaceholderDescription: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/Select/Select.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
-import { SelectProps } from './types';
-export declare const Select: ({ multiple, loading, placeholder, getOptionLabel, helperText, success, children, label, error, ...props }: SelectProps) => JSX.Element;
+import { SelectProps as MuiSelectProps } from '@mui/material';
+export declare type SelectProps<Value> = MuiSelectProps<Value> & {
+    loading?: boolean;
+    placeholder?: string;
+    getOptionLabel?: (value: string | number) => string | number;
+    helperText?: string;
+    success?: boolean;
+    error?: boolean;
+    label: string;
+};
+export declare const Select: <Value>({ getOptionLabel, placeholder, helperText, loading, success, children, error, label, ...props }: SelectProps<Value>) => JSX.Element;

package/Select/Select.js

@@ -16,19 +16,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const icons_1 = require("@astral/icons");
-const TextField_1 = require("../TextField");
 const Tag_1 = require("../Tag");
+const FormHelperText_1 = require("../FormHelperText");
 const CircularProgress_1 = require("../CircularProgress");
 const MenuItem_1 = require("../MenuItem");
-const styled_1 = require("./styled");
+const styles_1 = require("./styles");
 const Select = (_a) => {
-    var { multiple, loading, placeholder, getOptionLabel = (value) => value, helperText, success, children, label, error } = _a, props = __rest(_a, ["multiple", "loading", "placeholder", "getOptionLabel", "helperText", "success", "children", "label", "error"]);
-    // unknown, т.к. ts ругается на несоответствие типов. По-умолчанию в selectedOptions string или string[].
+    var { getOptionLabel = (value) => value, placeholder, helperText, loading, success, children, error, label } = _a, props = __rest(_a, ["getOptionLabel", "placeholder", "helperText", "loading", "success", "children", "error", "label"]);
     const renderValue = (selectedOptions) => {
         if (Array.isArray(selectedOptions) && selectedOptions.length) {
-            return ((0, jsx_runtime_1.jsx)(styled_1.TagsWrapper, { children: selectedOptions.map((option) => {
+            return ((0, jsx_runtime_1.jsx)(styles_1.SelectTagsWrapper, { children: selectedOptions.map((option) => {
                     const optionLabel = getOptionLabel(option);
                     return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { color: "grey", label: optionLabel }, option);
                 }) }));
@@ -40,7 +40,6 @@ const Select = (_a) => {
         return getOptionLabel(selectedOptions);
     };
     const isNoData = !Boolean(react_1.default.Children.count(children));
-    return ((0, jsx_runtime_1.jsxs)(TextField_1.TextField, Object.assign({ select: true, label: label, helperText: helperText, error: error, success: success, SelectProps: Object.assign(Object.assign({}, props), { multiple,
-            renderValue, displayEmpty: true, IconComponent: icons_1.ChevronDOutlineMd }) }, { children: [(0, jsx_runtime_1.jsx)(styled_1.Placeholder, Object.assign({ value: "" }, { children: "placeholder" })), loading && ((0, jsx_runtime_1.jsx)(styled_1.ProgressWrapper, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { color: "primary" }) })), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, Object.assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ error: error }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, Object.assign({ htmlFor: "grouped-select" }, { children: label })), (0, jsx_runtime_1.jsxs)(material_1.Select, Object.assign({}, props, { label: label, renderValue: renderValue, IconComponent: icons_1.ChevronDOutlineMd, displayEmpty: true }, { children: [(0, jsx_runtime_1.jsx)(styles_1.SelectPlaceholder, Object.assign({ value: "" }, { children: placeholder })), loading && ((0, jsx_runtime_1.jsx)(styles_1.SelectProgressWrapper, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { color: "primary" }) })), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, Object.assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }))] })), (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, Object.assign({ error: error, success: success }, { children: helperText }))] })));
 };
 exports.Select = Select;

package/Select/index.d.ts

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

package/Select/index.js

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

package/Select/{styled.d.ts → styles.d.ts}

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-export declare const TagsWrapper: import("@emotion/styled").StyledComponent<{
+export declare const SelectTagsWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ProgressWrapper: import("@emotion/styled").StyledComponent<{
+export declare const SelectProgressWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Placeholder: import("@emotion/styled").StyledComponent<{
+export declare const SelectPlaceholder: import("@emotion/styled").StyledComponent<{
     autoFocus?: boolean | undefined;
     classes?: Partial<import("@mui/material").MenuItemClasses> | undefined;
     dense?: boolean | undefined;

package/Select/{styled.js → styles.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Placeholder = exports.ProgressWrapper = exports.TagsWrapper = void 0;
+exports.SelectPlaceholder = exports.SelectProgressWrapper = exports.SelectTagsWrapper = void 0;
 const styles_1 = require("../styles");
 const MenuItem_1 = require("../MenuItem");
-exports.TagsWrapper = styles_1.styled.div `
+exports.SelectTagsWrapper = styles_1.styled.div `
   display: flex;
   flex-wrap: wrap;
   margin-bottom: -${({ theme }) => theme.spacing(1)};
@@ -22,7 +22,7 @@ exports.TagsWrapper = styles_1.styled.div `
     margin-right: ${({ theme }) => theme.spacing(1)};
   }
 `;
-exports.ProgressWrapper = styles_1.styled.div `
+exports.SelectProgressWrapper = styles_1.styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -34,6 +34,6 @@ exports.ProgressWrapper = styles_1.styled.div `
     color: ${({ theme }) => theme.palette.grey['900']};
   }
 `;
-exports.Placeholder = (0, styles_1.styled)(MenuItem_1.MenuItem) `
+exports.SelectPlaceholder = (0, styles_1.styled)(MenuItem_1.MenuItem) `
   display: none;
 `;

package/Typography/Typography.d.ts

@@ -4,11 +4,19 @@ import { Variant } from '@mui/material/styles/createTypography';
 import React from 'react';
 import { Theme } from '../theme';
 import { TypographyColors } from './enums';
+declare type Intensity = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100';
 export declare type TypographyColor = keyof typeof TypographyColors;
 export declare type TypographyProps = Omit<OverrideProps<TypographyTypeMap, React.ElementType>, 'variant' | 'color'> & {
     variant?: Variant | keyof TypographyPropsVariantOverrides;
     component?: React.ElementType;
     color?: TypographyColor | ((theme: Theme) => string);
+    /**
+     * @description интенсивность цвета, будет применена для цвета, у которого есть градации
+     * @variation 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100
+     * @default undefined
+     * @example <Typography color="grey" colorIntensity="500" />
+     */
+    colorIntensity?: Intensity;
 };
 declare module '@mui/material/Typography' {
     interface TypographyPropsVariantOverrides {

package/Typography/Typography.js

@@ -17,13 +17,17 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const enums_1 = require("./enums");
 exports.Typography = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, color } = _a, props = __rest(_a, ["children", "color"]);
+    var { children, color, colorIntensity } = _a, props = __rest(_a, ["children", "color", "colorIntensity"]);
     const typographyColor = (0, react_1.useMemo)(() => {
         if (typeof color === 'function') {
             return color;
         }
-        return (color && enums_1.TypographyColors[color]) || color;
-    }, [color]);
+        const colorName = (color && enums_1.TypographyColors[color]) || color;
+        if (colorName && Boolean(colorIntensity)) {
+            return (theme) => { var _a; return ((_a = theme.palette[colorName]) === null || _a === void 0 ? void 0 : _a[colorIntensity]) || colorName; };
+        }
+        return colorName;
+    }, [color, colorIntensity]);
     return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ref: ref }, props, { color: typographyColor }, { children: children })));
 });
 exports.default = exports.Typography;

package/Typography/enums.d.ts

@@ -2,9 +2,13 @@ export declare enum TypographyColors {
     text = "text",
     secondary = "secondary",
     primary = "primary",
-    error = "error",
+    error = "error.main",
     success = "success.main",
     warning = "warning.main",
     info = "info.main",
-    textSecondary = "text.secondary"
+    textSecondary = "text.secondary",
+    grey = "grey",
+    red = "red",
+    green = "green",
+    yellow = "yellow"
 }

package/Typography/enums.js

@@ -6,9 +6,13 @@ var TypographyColors;
     TypographyColors["text"] = "text";
     TypographyColors["secondary"] = "secondary";
     TypographyColors["primary"] = "primary";
-    TypographyColors["error"] = "error";
+    TypographyColors["error"] = "error.main";
     TypographyColors["success"] = "success.main";
     TypographyColors["warning"] = "warning.main";
     TypographyColors["info"] = "info.main";
     TypographyColors["textSecondary"] = "text.secondary";
+    TypographyColors["grey"] = "grey";
+    TypographyColors["red"] = "red";
+    TypographyColors["green"] = "green";
+    TypographyColors["yellow"] = "yellow";
 })(TypographyColors = exports.TypographyColors || (exports.TypographyColors = {}));

package/esm/DataGrid/DataGridHeadColumn/styles.d.ts

@@ -9,7 +9,8 @@ export declare const StyledTableCell: import("@emotion/styled").StyledComponent<
 export declare const TableCellTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/esm/DataGrid/DataGridNoData/styles.d.ts

@@ -16,7 +16,8 @@ export declare const DataGridNoDataIcon: import("@emotion/styled").StyledCompone
 export declare const DataGridNoDataFigcaption: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/esm/DataGridPagination/styles.d.ts

@@ -6,7 +6,8 @@ export declare const PaginationWrapper: import("@emotion/styled").StyledComponen
 export declare const Range: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/esm/DatePicker/DateCalendar/DateCalendarHead/styles.d.ts

@@ -5,7 +5,8 @@ export declare const DateCalendarHeadBtn: import("@emotion/styled").StyledCompon
 export declare const DateCalendarHeadText: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/esm/DatePicker/DatePicker.d.ts

@@ -11,6 +11,7 @@ export declare type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
     onClose?: () => void;
     inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
     disabled?: boolean;
+    value?: Date;
 };
 export declare const DatePicker: import("react").ForwardRefExoticComponent<MondayFirst & Partial<MinMaxDate> & {
     mask?: string | undefined;
@@ -20,4 +21,5 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Monda
     onClose?: (() => void) | undefined;
     inputProps?: Omit<TextFieldProps, "ref" | "value" | "onChange"> | undefined;
     disabled?: boolean | undefined;
+    value?: Date | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/esm/DatePicker/DatePicker.js

@@ -21,20 +21,21 @@ import { MinMaxDateContext, MinMaxDateContextProvider, } from './MinMaxDateConte
 import { YearMonthDayPicker } from './YearMonthDayPicker';
 import { useBaseDateInRange } from './hooks/useBaseDateInRange';
 import { useSelectedBaseDate } from './hooks/useSelectedBaseDate';
-const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, }, forwardedRef) => {
+const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value: parentValue, }, forwardedRef) => {
     const { maxDate, minDate } = useContext(MinMaxDateContext);
     const ref = useForwardedRef(forwardedRef);
     const [isActive, openPopper, closePopper] = useToggle({
         onActive: onOpen,
         onInactive: onClose,
     });
-    const [selectedDate, setSelectedDate] = useState();
+    const [selectedDate, setSelectedDate] = useState(parentValue);
     const [maskedDate, setMaskedDate] = useState('');
     const baseDate = useBaseDateInRange({ minDate, maxDate });
     const selectedBaseDate = useSelectedBaseDate(selectedDate);
     const checkValue = useCallback((value) => {
-        setMaskedDate(value);
-        const date = parseDate(value);
+        const isString = typeof value === 'string';
+        setMaskedDate(isString ? value : formatDate(value, mask));
+        const date = isString ? parseDate(value, mask) : value;
         if (value === '' || !isDate(date)) {
             setSelectedDate(null);
         }
@@ -48,6 +49,7 @@ const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask =
         closePopper();
     };
     useEffect(() => onChange === null || onChange === void 0 ? void 0 : onChange(selectedDate || maskedDate), [selectedDate, maskedDate]);
+    useEffect(() => checkValue(parentValue || ''), [parentValue]);
     const blurHandler = (e) => {
         checkValue(e.target.value);
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);

package/esm/MenuGroup/stories/styled.d.ts

@@ -32,7 +32,8 @@ export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<{
 export declare const StyledLabel: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/esm/MenuGroup/styled.d.ts

@@ -2,7 +2,8 @@
 export declare const StyledLabel: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/esm/Notification/NotificationTemplate/styled.d.ts

@@ -62,7 +62,8 @@ export declare const NotificationCloseButton: import("@emotion/styled").StyledCo
 export declare const NotificationTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/esm/OverflowTypography/styles.d.ts

@@ -3,7 +3,8 @@ import { OverflowedProps } from './OverflowTypography';
 export declare const OverflowTypographyWrapper: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & Required<OverflowedProps>, {}, {}>;

package/esm/Placeholder/styles.d.ts

@@ -14,14 +14,16 @@ export declare const PlaceholderImage: import("@emotion/styled").StyledComponent
 export declare const PlaceholderTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const PlaceholderDescription: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/OverridableComponent").OverrideProps<import("@mui/material").TypographyTypeMap<{}, "span">, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
-    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/esm/Select/Select.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="react" />
-import { SelectProps } from './types';
-export declare const Select: ({ multiple, loading, placeholder, getOptionLabel, helperText, success, children, label, error, ...props }: SelectProps) => JSX.Element;
+import { SelectProps as MuiSelectProps } from '@mui/material';
+export declare type SelectProps<Value> = MuiSelectProps<Value> & {
+    loading?: boolean;
+    placeholder?: string;
+    getOptionLabel?: (value: string | number) => string | number;
+    helperText?: string;
+    success?: boolean;
+    error?: boolean;
+    label: string;
+};
+export declare const Select: <Value>({ getOptionLabel, placeholder, helperText, loading, success, children, error, label, ...props }: SelectProps<Value>) => JSX.Element;

package/esm/Select/Select.js

@@ -10,19 +10,19 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, InputLabel, Select as MuiSelect, } from '@mui/material';
 import React from 'react';
 import { ChevronDOutlineMd } from '@astral/icons';
-import { TextField } from '../TextField';
 import { Tag } from '../Tag';
+import { FormHelperText } from '../FormHelperText';
 import { CircularProgress } from '../CircularProgress';
 import { MenuItem } from '../MenuItem';
-import { Placeholder, ProgressWrapper, TagsWrapper } from './styled';
+import { SelectPlaceholder, SelectProgressWrapper, SelectTagsWrapper, } from './styles';
 export const Select = (_a) => {
-    var { multiple, loading, placeholder, getOptionLabel = (value) => value, helperText, success, children, label, error } = _a, props = __rest(_a, ["multiple", "loading", "placeholder", "getOptionLabel", "helperText", "success", "children", "label", "error"]);
-    // unknown, т.к. ts ругается на несоответствие типов. По-умолчанию в selectedOptions string или string[].
+    var { getOptionLabel = (value) => value, placeholder, helperText, loading, success, children, error, label } = _a, props = __rest(_a, ["getOptionLabel", "placeholder", "helperText", "loading", "success", "children", "error", "label"]);
     const renderValue = (selectedOptions) => {
         if (Array.isArray(selectedOptions) && selectedOptions.length) {
-            return (_jsx(TagsWrapper, { children: selectedOptions.map((option) => {
+            return (_jsx(SelectTagsWrapper, { children: selectedOptions.map((option) => {
                     const optionLabel = getOptionLabel(option);
                     return _jsx(Tag, { color: "grey", label: optionLabel }, option);
                 }) }));
@@ -34,6 +34,5 @@ export const Select = (_a) => {
         return getOptionLabel(selectedOptions);
     };
     const isNoData = !Boolean(React.Children.count(children));
-    return (_jsxs(TextField, Object.assign({ select: true, label: label, helperText: helperText, error: error, success: success, SelectProps: Object.assign(Object.assign({}, props), { multiple,
-            renderValue, displayEmpty: true, IconComponent: ChevronDOutlineMd }) }, { children: [_jsx(Placeholder, Object.assign({ value: "" }, { children: "placeholder" })), loading && (_jsx(ProgressWrapper, { children: _jsx(CircularProgress, { color: "primary" }) })), !loading && children, !loading && isNoData && _jsx(MenuItem, Object.assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }))] })));
+    return (_jsxs(FormControl, Object.assign({ error: error }, { children: [_jsx(InputLabel, Object.assign({ htmlFor: "grouped-select" }, { children: label })), _jsxs(MuiSelect, Object.assign({}, props, { label: label, renderValue: renderValue, IconComponent: ChevronDOutlineMd, displayEmpty: true }, { children: [_jsx(SelectPlaceholder, Object.assign({ value: "" }, { children: placeholder })), loading && (_jsx(SelectProgressWrapper, { children: _jsx(CircularProgress, { color: "primary" }) })), !loading && children, !loading && isNoData && _jsx(MenuItem, Object.assign({ disabled: true }, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }))] })), _jsx(FormHelperText, Object.assign({ error: error, success: success }, { children: helperText }))] })));
 };

package/esm/Select/index.d.ts

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

package/esm/Select/index.js

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

package/esm/Select/{styled.d.ts → styles.d.ts}

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-export declare const TagsWrapper: import("@emotion/styled").StyledComponent<{
+export declare const SelectTagsWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ProgressWrapper: import("@emotion/styled").StyledComponent<{
+export declare const SelectProgressWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Placeholder: import("@emotion/styled").StyledComponent<{
+export declare const SelectPlaceholder: import("@emotion/styled").StyledComponent<{
     autoFocus?: boolean | undefined;
     classes?: Partial<import("@mui/material").MenuItemClasses> | undefined;
     dense?: boolean | undefined;

package/esm/Select/{styled.js → styles.js}

@@ -1,6 +1,6 @@
 import { styled } from '../styles';
 import { MenuItem } from '../MenuItem';
-export const TagsWrapper = styled.div `
+export const SelectTagsWrapper = styled.div `
   display: flex;
   flex-wrap: wrap;
   margin-bottom: -${({ theme }) => theme.spacing(1)};
@@ -19,7 +19,7 @@ export const TagsWrapper = styled.div `
     margin-right: ${({ theme }) => theme.spacing(1)};
   }
 `;
-export const ProgressWrapper = styled.div `
+export const SelectProgressWrapper = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -31,6 +31,6 @@ export const ProgressWrapper = styled.div `
     color: ${({ theme }) => theme.palette.grey['900']};
   }
 `;
-export const Placeholder = styled(MenuItem) `
+export const SelectPlaceholder = styled(MenuItem) `
   display: none;
 `;

package/esm/Typography/Typography.d.ts

@@ -4,11 +4,19 @@ import { Variant } from '@mui/material/styles/createTypography';
 import React from 'react';
 import { Theme } from '../theme';
 import { TypographyColors } from './enums';
+declare type Intensity = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100';
 export declare type TypographyColor = keyof typeof TypographyColors;
 export declare type TypographyProps = Omit<OverrideProps<TypographyTypeMap, React.ElementType>, 'variant' | 'color'> & {
     variant?: Variant | keyof TypographyPropsVariantOverrides;
     component?: React.ElementType;
     color?: TypographyColor | ((theme: Theme) => string);
+    /**
+     * @description интенсивность цвета, будет применена для цвета, у которого есть градации
+     * @variation 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100
+     * @default undefined
+     * @example <Typography color="grey" colorIntensity="500" />
+     */
+    colorIntensity?: Intensity;
 };
 declare module '@mui/material/Typography' {
     interface TypographyPropsVariantOverrides {

package/esm/Typography/Typography.js

@@ -14,13 +14,17 @@ import { Typography as MuiTypography, } from '@mui/material';
 import { forwardRef, useMemo } from 'react';
 import { TypographyColors } from './enums';
 export const Typography = forwardRef((_a, ref) => {
-    var { children, color } = _a, props = __rest(_a, ["children", "color"]);
+    var { children, color, colorIntensity } = _a, props = __rest(_a, ["children", "color", "colorIntensity"]);
     const typographyColor = useMemo(() => {
         if (typeof color === 'function') {
             return color;
         }
-        return (color && TypographyColors[color]) || color;
-    }, [color]);
+        const colorName = (color && TypographyColors[color]) || color;
+        if (colorName && Boolean(colorIntensity)) {
+            return (theme) => { var _a; return ((_a = theme.palette[colorName]) === null || _a === void 0 ? void 0 : _a[colorIntensity]) || colorName; };
+        }
+        return colorName;
+    }, [color, colorIntensity]);
     return (_jsx(MuiTypography, Object.assign({ ref: ref }, props, { color: typographyColor }, { children: children })));
 });
 export default Typography;

package/esm/Typography/enums.d.ts

@@ -2,9 +2,13 @@ export declare enum TypographyColors {
     text = "text",
     secondary = "secondary",
     primary = "primary",
-    error = "error",
+    error = "error.main",
     success = "success.main",
     warning = "warning.main",
     info = "info.main",
-    textSecondary = "text.secondary"
+    textSecondary = "text.secondary",
+    grey = "grey",
+    red = "red",
+    green = "green",
+    yellow = "yellow"
 }

package/esm/Typography/enums.js

@@ -3,9 +3,13 @@ export var TypographyColors;
     TypographyColors["text"] = "text";
     TypographyColors["secondary"] = "secondary";
     TypographyColors["primary"] = "primary";
-    TypographyColors["error"] = "error";
+    TypographyColors["error"] = "error.main";
     TypographyColors["success"] = "success.main";
     TypographyColors["warning"] = "warning.main";
     TypographyColors["info"] = "info.main";
     TypographyColors["textSecondary"] = "text.secondary";
+    TypographyColors["grey"] = "grey";
+    TypographyColors["red"] = "red";
+    TypographyColors["green"] = "green";
+    TypographyColors["yellow"] = "yellow";
 })(TypographyColors || (TypographyColors = {}));

package/esm/utils/date/format/formatDate/formatDate.d.ts

@@ -2,4 +2,4 @@ import { DateMask } from '../maskDate';
 /**
  * @description утилита для генерации строковой даты по заданной маске
  */
-export declare const formatDate: (date: Date, mask: DateMask) => string;
+export declare const formatDate: (date: Date, mask: DateMask, separator?: string) => string;

package/esm/utils/date/format/formatDate/formatDate.js

@@ -1,5 +1,19 @@
-import dayjs from 'dayjs';
+import { zeroPad } from '../../../zeroPad';
+import { DateMaskElements } from '../maskDate';
+const elementsMap = {
+    [DateMaskElements.day]: (date) => date.getUTCDate(),
+    [DateMaskElements.month]: (date) => date.getUTCMonth() + 1,
+    [DateMaskElements.year]: (date) => date.getUTCFullYear(),
+    [DateMaskElements.hour]: (date) => date.getUTCHours(),
+    [DateMaskElements.minute]: (date) => date.getUTCMinutes(),
+    [DateMaskElements.second]: (date) => date.getUTCSeconds(),
+};
 /**
  * @description утилита для генерации строковой даты по заданной маске
  */
-export const formatDate = (date, mask) => dayjs(date).format(mask);
+export const formatDate = (date, mask, separator = '.') => mask
+    .split(separator)
+    .map((element) => { var _a; return (_a = elementsMap[element]) === null || _a === void 0 ? void 0 : _a.call(elementsMap, date); })
+    .filter(Boolean)
+    .map((value) => zeroPad(value, 2))
+    .join(separator);

package/esm/utils/date/format/maskDate.d.ts

@@ -3,3 +3,11 @@
  * @example DD.MM.YYYY.hh.mm.ss
  */
 export declare type DateMask = string;
+export declare enum DateMaskElements {
+    day = "DD",
+    month = "MM",
+    year = "YYYY",
+    hour = "hh",
+    minute = "mm",
+    second = "ss"
+}

package/esm/utils/date/format/maskDate.js

@@ -1 +1,9 @@
-export {};
+export var DateMaskElements;
+(function (DateMaskElements) {
+    DateMaskElements["day"] = "DD";
+    DateMaskElements["month"] = "MM";
+    DateMaskElements["year"] = "YYYY";
+    DateMaskElements["hour"] = "hh";
+    DateMaskElements["minute"] = "mm";
+    DateMaskElements["second"] = "ss";
+})(DateMaskElements || (DateMaskElements = {}));

package/esm/utils/date/format/parseDate/parseDate.d.ts

@@ -1,4 +1,5 @@
+import { DateMask } from '../maskDate';
 /**
  * @description утилита конвертации строковой даты созданной по маске обратно в Date
  */
-export declare const parseDate: (date: string) => Date;
+export declare const parseDate: (date: string, mask: DateMask, separator?: string) => Date;

package/esm/utils/date/format/parseDate/parseDate.js

@@ -1,5 +1,21 @@
-import dayjs from 'dayjs';
+import { DateMaskElements } from '../maskDate';
+import { buildIsoDate } from '../../buildIsoDate';
+const orderMap = {
+    [DateMaskElements.year]: 'year',
+    [DateMaskElements.month]: 'month',
+    [DateMaskElements.day]: 'day',
+    [DateMaskElements.hour]: 'hour',
+    [DateMaskElements.minute]: 'minute',
+    [DateMaskElements.second]: 'second',
+};
 /**
  * @description утилита конвертации строковой даты созданной по маске обратно в Date
  */
-export const parseDate = (date) => dayjs(date).toDate();
+export const parseDate = (date, mask, separator = '.') => {
+    const dateArr = date.split(separator);
+    const options = { year: 1900 };
+    mask.split('.').forEach((element, index) => {
+        options[orderMap[element]] = parseInt(dateArr[index]);
+    });
+    return buildIsoDate(options);
+};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@astral/ui",
-  "version": "1.26.0",
+  "version": "1.28.1",
   "browser": "./esm/index.js",
   "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^1.26.0",
+    "@astral/icons": "^1.28.1",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",

package/utils/date/format/formatDate/formatDate.d.ts

@@ -2,4 +2,4 @@ import { DateMask } from '../maskDate';
 /**
  * @description утилита для генерации строковой даты по заданной маске
  */
-export declare const formatDate: (date: Date, mask: DateMask) => string;
+export declare const formatDate: (date: Date, mask: DateMask, separator?: string) => string;

package/utils/date/format/formatDate/formatDate.js

@@ -1,12 +1,23 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatDate = void 0;
-const dayjs_1 = __importDefault(require("dayjs"));
+const zeroPad_1 = require("../../../zeroPad");
+const maskDate_1 = require("../maskDate");
+const elementsMap = {
+    [maskDate_1.DateMaskElements.day]: (date) => date.getUTCDate(),
+    [maskDate_1.DateMaskElements.month]: (date) => date.getUTCMonth() + 1,
+    [maskDate_1.DateMaskElements.year]: (date) => date.getUTCFullYear(),
+    [maskDate_1.DateMaskElements.hour]: (date) => date.getUTCHours(),
+    [maskDate_1.DateMaskElements.minute]: (date) => date.getUTCMinutes(),
+    [maskDate_1.DateMaskElements.second]: (date) => date.getUTCSeconds(),
+};
 /**
  * @description утилита для генерации строковой даты по заданной маске
  */
-const formatDate = (date, mask) => (0, dayjs_1.default)(date).format(mask);
+const formatDate = (date, mask, separator = '.') => mask
+    .split(separator)
+    .map((element) => { var _a; return (_a = elementsMap[element]) === null || _a === void 0 ? void 0 : _a.call(elementsMap, date); })
+    .filter(Boolean)
+    .map((value) => (0, zeroPad_1.zeroPad)(value, 2))
+    .join(separator);
 exports.formatDate = formatDate;

package/utils/date/format/maskDate.d.ts

@@ -3,3 +3,11 @@
  * @example DD.MM.YYYY.hh.mm.ss
  */
 export declare type DateMask = string;
+export declare enum DateMaskElements {
+    day = "DD",
+    month = "MM",
+    year = "YYYY",
+    hour = "hh",
+    minute = "mm",
+    second = "ss"
+}

package/utils/date/format/maskDate.js

@@ -1,2 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateMaskElements = void 0;
+var DateMaskElements;
+(function (DateMaskElements) {
+    DateMaskElements["day"] = "DD";
+    DateMaskElements["month"] = "MM";
+    DateMaskElements["year"] = "YYYY";
+    DateMaskElements["hour"] = "hh";
+    DateMaskElements["minute"] = "mm";
+    DateMaskElements["second"] = "ss";
+})(DateMaskElements = exports.DateMaskElements || (exports.DateMaskElements = {}));

package/utils/date/format/parseDate/parseDate.d.ts

@@ -1,4 +1,5 @@
+import { DateMask } from '../maskDate';
 /**
  * @description утилита конвертации строковой даты созданной по маске обратно в Date
  */
-export declare const parseDate: (date: string) => Date;
+export declare const parseDate: (date: string, mask: DateMask, separator?: string) => Date;

package/utils/date/format/parseDate/parseDate.js

@@ -1,12 +1,25 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseDate = void 0;
-const dayjs_1 = __importDefault(require("dayjs"));
+const maskDate_1 = require("../maskDate");
+const buildIsoDate_1 = require("../../buildIsoDate");
+const orderMap = {
+    [maskDate_1.DateMaskElements.year]: 'year',
+    [maskDate_1.DateMaskElements.month]: 'month',
+    [maskDate_1.DateMaskElements.day]: 'day',
+    [maskDate_1.DateMaskElements.hour]: 'hour',
+    [maskDate_1.DateMaskElements.minute]: 'minute',
+    [maskDate_1.DateMaskElements.second]: 'second',
+};
 /**
  * @description утилита конвертации строковой даты созданной по маске обратно в Date
  */
-const parseDate = (date) => (0, dayjs_1.default)(date).toDate();
+const parseDate = (date, mask, separator = '.') => {
+    const dateArr = date.split(separator);
+    const options = { year: 1900 };
+    mask.split('.').forEach((element, index) => {
+        options[orderMap[element]] = parseInt(dateArr[index]);
+    });
+    return (0, buildIsoDate_1.buildIsoDate)(options);
+};
 exports.parseDate = parseDate;

package/Select/types.d.ts

@@ -1,7 +0,0 @@
-import { SelectProps as MuiSelectProps } from '@mui/material';
-import { TextFieldProps } from '../TextField';
-export declare type SelectProps = MuiSelectProps & Pick<TextFieldProps, 'error' | 'success' | 'SelectProps' | 'helperText' | 'label'> & {
-    loading?: boolean;
-    placeholder?: string;
-    getOptionLabel?: (value: string | number) => string | number;
-};

package/Select/types.js

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

package/esm/Select/types.d.ts

@@ -1,7 +0,0 @@
-import { SelectProps as MuiSelectProps } from '@mui/material';
-import { TextFieldProps } from '../TextField';
-export declare type SelectProps = MuiSelectProps & Pick<TextFieldProps, 'error' | 'success' | 'SelectProps' | 'helperText' | 'label'> & {
-    loading?: boolean;
-    placeholder?: string;
-    getOptionLabel?: (value: string | number) => string | number;
-};

package/esm/Select/types.js

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