@astral/ui 1.26.0 → 1.27.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.js

@@ -37,7 +37,7 @@ const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onC
     const selectedBaseDate = (0, useSelectedBaseDate_1.useSelectedBaseDate)(selectedDate);
     const checkValue = (0, react_1.useCallback)((value) => {
         setMaskedDate(value);
-        const date = (0, date_1.parseDate)(value);
+        const date = (0, date_1.parseDate)(value, mask);
         if (value === '' || !(0, date_1.isDate)(date)) {
             setSelectedDate(null);
         }

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

@@ -34,7 +34,7 @@ const DatePickerInner = forwardRef(({ onChange, onOpen, onBlur, onClose, mask =
     const selectedBaseDate = useSelectedBaseDate(selectedDate);
     const checkValue = useCallback((value) => {
         setMaskedDate(value);
-        const date = parseDate(value);
+        const date = parseDate(value, mask);
         if (value === '' || !isDate(date)) {
             setSelectedDate(null);
         }

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/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.27.1",
   "browser": "./esm/index.js",
   "main": "./index.js",
   "dependencies": {
-    "@astral/icons": "^1.26.0",
+    "@astral/icons": "^1.27.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;