@astral/ui 4.18.3 → 4.18.5

package/components/DatePicker/styles.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-export declare const ConfirmButton: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "variant" | "component" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
-    variant?: "light" | "link" | "outlined" | "text" | "contained" | undefined;
+export declare const ConfirmButton: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
-    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {

package/components/DatePicker/types/props.d.ts

@@ -0,0 +1,60 @@
+import { type ReactNode, type RefObject, type SyntheticEvent } from 'react';
+import { type TextFieldProps } from '../../TextField';
+import { type CloseEventReason } from '../../types/CloseEventReason';
+import { type DateMask } from '../../utils/date';
+import { type MondayFirst } from '../DayPicker';
+import { type WithDoubleNavigationButtons } from './configTypes';
+import { type MinMaxDate } from './minMaxDate';
+export type DatePickerProps = MondayFirst & WithDoubleNavigationButtons & Partial<MinMaxDate> & {
+    /**
+     * Маска для инпута даты
+     * @default 'DD.MM.YYYY'
+     */
+    mask?: DateMask;
+    /**
+     * Обработчик изменения состояния. Передает только Date object, если дата невалидна, то будет Invalid date
+     */
+    onChange?: (date?: Date | null) => void;
+    onBlur?: () => void;
+    onOpen?: () => void;
+    onClose?: (event?: SyntheticEvent<Element, Event> | Event, reason?: CloseEventReason) => void;
+    inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
+    inputRef?: RefObject<HTMLInputElement>;
+    /**
+     * Блокирует взаимодействие с элементом
+     */
+    disabled?: boolean;
+    /**
+     * Принимает только Date object, включая невалидную дату Invalid date
+     */
+    value?: Date | null;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Определяет размер компонента
+     * @default 	'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Название текстового поля
+     */
+    label?: ReactNode;
+    /**
+     * Лейбл будет помечен как обязательный
+     */
+    required?: boolean;
+    /**
+     * Вспомогательный текст под полем ввода
+     */
+    helperText?: ReactNode;
+    /**
+     * Включает/отключает резервирование места под helperText
+     */
+    hideHelperText?: boolean;
+    /**
+     * Элемент в начале инпута
+     */
+    startAdornment?: ReactNode;
+} & Pick<TextFieldProps, 'label' | 'required' | 'helperText'>;

package/components/DatePicker/types/props.js

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

package/components/DatePicker/useLogic/useLogic.d.ts

@@ -1,5 +1,5 @@
 import { type Ref, type SyntheticEvent } from 'react';
-import { type DatePickerProps } from '../DatePicker';
+import { type DatePickerProps } from '../types/props';
 type UseLogicParams = DatePickerProps & {
     forwardedRef: Ref<HTMLDivElement>;
 };

package/components/DatePicker/useLogic/useLogic.js

@@ -1,7 +1,10 @@
 import { useState } from 'react';
-import { useForwardedRef, usePopover, useViewportType } from '../../hooks';
+import { useForwardedRef } from '../../hooks/useForwardedRef';
+import { usePopover } from '../../hooks/usePopover';
+import { useViewportType } from '../../hooks/useViewportType';
 import { DEFAULT_DATE_MASK } from '../constants';
-import { useDatePickerOptions, useMaskedValue } from '../hooks';
+import { useDatePickerOptions } from '../hooks/useDatePickerOptions';
+import { useMaskedValue } from '../hooks/useMaskedValue';
 import { DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../MinMaxDateContext';
 export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = DEFAULT_MIN_DATE, mask = DEFAULT_DATE_MASK, onOpen, onClose, onBlur, onChange, forwardedRef, }) => {
     const ref = useForwardedRef(forwardedRef);

package/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,76 +1,10 @@
 /// <reference types="react" />
-import { type DatePickerProps } from '../DatePicker';
-import { type WithDoubleNavigationButtons } from '../DatePicker/types';
-import { type GridProps } from '../Grid';
-import { type TextFieldProps } from '../TextField';
-export type DateRangePickerValue = {
-    start?: Date | null;
-    end?: Date | null;
-};
-type LimitedInputProps = {
-    inputProps: Omit<TextFieldProps, 'ref' | 'value' | 'inputProps' | 'onChange'>;
-}['inputProps'];
-export type DateItemProps = Pick<DatePickerProps, 'startAdornment' | 'inputProps' | 'label'> & LimitedInputProps;
-export type DateRangePickerProps = Omit<DatePickerProps, 'onChange' | 'value' | 'required' | 'disabled' | 'inputProps'> & WithDoubleNavigationButtons & {
-    /**
-     * Специфичные пропсы для управления датой слева
-     */
-    startDateProps?: DateItemProps;
-    /**
-     * Специфичные пропсы для управления датой справа
-     */
-    endDateProps?: DateItemProps;
-    /**
-     * Отступ между инпутами дат
-     * @default 1
-     */
-    spacing?: GridProps['spacing'];
-    /**
-     * Если true, поля будут недоступны для взаимодействия
-     */
-    isDisabled?: boolean;
-    /**
-     * Если true, поля будут подсвечены, как содержащие ошибку
-     */
-    isError?: boolean;
-    /**
-     * Текущее значение
-     */
-    value?: DateRangePickerValue;
-    /**
-     * Функция, которая запускается при изменении состояния
-     */
-    onChange?: (value?: DateRangePickerValue) => void;
-};
-export declare const DateRangePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "onChange" | "disabled" | "value" | "required" | "inputProps"> & WithDoubleNavigationButtons & {
-    /**
-     * Специфичные пропсы для управления датой слева
-     */
-    startDateProps?: DateItemProps | undefined;
-    /**
-     * Специфичные пропсы для управления датой справа
-     */
-    endDateProps?: DateItemProps | undefined;
-    /**
-     * Отступ между инпутами дат
-     * @default 1
-     */
-    spacing?: GridProps['spacing'];
-    /**
-     * Если true, поля будут недоступны для взаимодействия
-     */
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<Omit<import("../DatePicker").DatePickerProps, "onChange" | "disabled" | "value" | "required" | "inputProps"> & import("../DatePicker/types").WithDoubleNavigationButtons & {
+    startDateProps?: import("./types").DateItemProps | undefined;
+    endDateProps?: import("./types").DateItemProps | undefined;
+    spacing?: number | [number, number] | undefined;
     isDisabled?: boolean | undefined;
-    /**
-     * Если true, поля будут подсвечены, как содержащие ошибку
-     */
     isError?: boolean | undefined;
-    /**
-     * Текущее значение
-     */
-    value?: DateRangePickerValue | undefined;
-    /**
-     * Функция, которая запускается при изменении состояния
-     */
-    onChange?: ((value?: DateRangePickerValue) => void) | undefined;
+    value?: import("./types").DateRangePickerValue | undefined;
+    onChange?: ((value?: import("./types").DateRangePickerValue | undefined) => void) | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/components/DateRangePicker/index.d.ts

@@ -1 +1,2 @@
-export { type DateItemProps, type DateRangePickerProps, type DateRangePickerValue, DateRangePicker, } from './DateRangePicker';
+export { DateRangePicker } from './DateRangePicker';
+export type { DateItemProps, DateRangePickerProps, DateRangePickerValue, } from './types';

package/components/DateRangePicker/index.js

@@ -1 +1 @@
-export { DateRangePicker, } from './DateRangePicker';
+export { DateRangePicker } from './DateRangePicker';

package/components/DateRangePicker/public.d.ts

@@ -1 +1,2 @@
-export { type DateItemProps, DateRangePicker, type DateRangePickerProps, type DateRangePickerValue, } from './DateRangePicker';
+export { DateRangePicker } from './DateRangePicker';
+export type { DateItemProps, DateRangePickerProps, DateRangePickerValue, } from './types';

package/components/DateRangePicker/public.js

@@ -1 +1 @@
-export { DateRangePicker, } from './DateRangePicker';
+export { DateRangePicker } from './DateRangePicker';

package/components/DateRangePicker/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const StyledDatePickerInput: import("../styled").StyledComponent<Omit<Omit<import("..").MaskFieldProps, "mask" | "autofix"> & {
     mask: string;
-    inputProps?: Omit<import("@mui/material").InputBaseComponentProps | undefined, "ref" | "onClick"> | undefined;
+    inputProps?: Omit<import("@mui/material").InputBaseComponentProps | undefined, "onClick" | "ref"> | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLInputElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DateRangePicker/styles.js

@@ -1,4 +1,4 @@
-import { formHelperTextClasses } from '@mui/material';
+import { formHelperTextClasses } from '@mui/material/FormHelperText';
 import { DatePickerInput } from '../DatePicker/DatePickerInput';
 import { Paper } from '../Paper';
 import { styled } from '../styled';

package/components/DateRangePicker/types.d.ts

@@ -1 +1,45 @@
+import { type DatePickerProps } from '../DatePicker';
+import { type WithDoubleNavigationButtons } from '../DatePicker/types';
+import { type GridProps } from '../Grid';
+import { type TextFieldProps } from '../TextField';
 export type DateRangeInput = 'startDate' | 'endDate';
+export type DateRangePickerValue = {
+    start?: Date | null;
+    end?: Date | null;
+};
+type LimitedInputProps = {
+    inputProps: Omit<TextFieldProps, 'ref' | 'value' | 'inputProps' | 'onChange'>;
+}['inputProps'];
+export type DateItemProps = Pick<DatePickerProps, 'startAdornment' | 'inputProps' | 'label'> & LimitedInputProps;
+export type DateRangePickerProps = Omit<DatePickerProps, 'onChange' | 'value' | 'required' | 'disabled' | 'inputProps'> & WithDoubleNavigationButtons & {
+    /**
+     * Специфичные пропсы для управления датой слева
+     */
+    startDateProps?: DateItemProps;
+    /**
+     * Специфичные пропсы для управления датой справа
+     */
+    endDateProps?: DateItemProps;
+    /**
+     * Отступ между инпутами дат
+     * @default 1
+     */
+    spacing?: GridProps['spacing'];
+    /**
+     * Если true, поля будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Если true, поля будут подсвечены, как содержащие ошибку
+     */
+    isError?: boolean;
+    /**
+     * Текущее значение
+     */
+    value?: DateRangePickerValue;
+    /**
+     * Функция, которая запускается при изменении состояния
+     */
+    onChange?: (value?: DateRangePickerValue) => void;
+};
+export {};

package/components/DateRangePicker/useLogic/useLogic.d.ts

@@ -1,5 +1,5 @@
 import { type ForwardedRef, type SyntheticEvent } from 'react';
-import { type DateRangePickerProps } from '../DateRangePicker';
+import { type DateRangePickerProps } from '../types';
 type UseLogicParams = DateRangePickerProps;
 export declare const useLogic: ({ value, minDate, maxDate, mask, onChange, onOpen, onClose, onBlur, }: UseLogicParams, forwardedRef: ForwardedRef<HTMLDivElement>) => {
     ref: import("react").RefObject<HTMLDivElement | null>;

package/components/DateRangePicker/useLogic/useLogic.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, } from 'react';
 import { DEFAULT_DATE_MASK, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, useMaskedValue, useSelectedBaseDate, } from '../../DatePicker';
-import { useForwardedRef, usePopover } from '../../hooks';
+import { useForwardedRef } from '../../hooks/useForwardedRef';
+import { usePopover } from '../../hooks/usePopover';
 import { useBaseRangeDates } from './hooks';
 import { getBoundaryDate } from './utils';
 export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, mask = DEFAULT_DATE_MASK, onChange, onOpen, onClose, onBlur, }, forwardedRef) => {

package/components/Description/Value/styles.d.ts

@@ -8,32 +8,20 @@ type StyledCopyTypographyProps = {
     $leader?: boolean;
     $direction: string;
 };
-export declare const StyledTypography: import("../../styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const StyledTypography: import("../../styled").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
     color?: import("../../Typography").TypographyColor | undefined;
     variant?: import("../../Typography").TypographyVariant | undefined;
     colorIntensity?: import("../../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "big" | "center" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & StyledTypographyProps, {}, {}>;
-export declare const StyledCopyTypography: import("../../styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const StyledCopyTypography: import("../../styled").StyledComponent<import("../../Typography/types").TypographyPropsBase & {
     color?: import("../../Typography").TypographyColor | undefined;
     variant?: import("../../Typography").TypographyVariant | undefined;
     colorIntensity?: import("../../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "big" | "center" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     copyText?: string | undefined;

package/components/Description/constants.js

@@ -1,4 +1,4 @@
-import { createUIKitClassname } from '../utils';
+import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const DEFAULT_SEPARATOR = ':';
 export const DEFAULT_SYMBOL = '—';
 export const descriptionClassnames = {

package/components/Description/styles.d.ts

@@ -4,5 +4,5 @@ export declare const Wrapper: import("../styled").StyledComponent<{
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     $justifyContent?: "start" | "space-between" | undefined;
-    $direction?: "default" | "row" | "column" | undefined;
+    $direction?: "row" | "default" | "column" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Description/useLogic/useLogic.d.ts

@@ -4,6 +4,6 @@ export declare const useLogic: ({ direction, separator, }: UseLogicParams) => {
     descriptionContextProviderProps: {
         separator: string;
     };
-    direction: "default" | "row" | "column";
+    direction: "row" | "default" | "column";
 };
 export {};

package/components/DescriptionCell/constants.js

@@ -1,4 +1,4 @@
-import { createUIKitClassname } from '../utils';
+import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const descriptionCellClassnames = {
     root: createUIKitClassname('description-cell'),
     hasIcon: createUIKitClassname('description-cell_has-icon'),

package/components/DescriptionCell/styles.js

@@ -1,4 +1,4 @@
-import { typographyClasses } from '@mui/material';
+import { typographyClasses } from '@mui/material/Typography';
 import { styled } from '../styled';
 import { descriptionCellClassnames } from './constants';
 export const Wrapper = styled.div `

package/components/DescriptionCell/useLogic/useLogic.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { classNames } from '../../utils';
+import { classNames } from '../../utils/classNames';
 import { descriptionCellClassnames } from '../constants';
 export const useLogic = ({ icon, iconPosition = 'left' }) => {
     const classnames = useMemo(() => classNames(descriptionCellClassnames.root, {

package/components/DescriptionList/styles.d.ts

@@ -37,17 +37,11 @@ export declare const DescriptionWrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Title: import("../styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-} & {
+export declare const Title: import("../styled").StyledComponent<import("../Typography/types").TypographyPropsBase & {
     color?: import("../Typography").TypographyColor | undefined;
     variant?: import("../Typography").TypographyVariant | undefined;
     colorIntensity?: import("../Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "big" | "center" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;

package/components/Dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
-import { type DialogProps as MuiDialogProps } from '@mui/material';
+import type { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
 import { type ReactElement } from 'react';
-import type { WithoutEmotionSpecific } from '../types';
+import type { WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type DialogProps = WithoutEmotionSpecific<Omit<MuiDialogProps, 'title' | 'maxWidth'>> & {
     /**

package/components/Dialog/Dialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BottomDrawer } from '../BottomDrawer';
 import { DialogTitle } from '../DialogTitle';
-import { useViewportType } from '../hooks';
+import { useViewportType } from '../hooks/useViewportType';
 import { StyledDialog } from './styles';
 export const Dialog = ({ children, title, disableBackdropClick, onClose, size = 'md', ...props }) => {
     const handleClose = onClose &&

package/components/Dialog/styles.d.ts

@@ -1,5 +1,5 @@
 type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export declare const StyledDialog: import("../styled").StyledComponent<import("@mui/material").DialogProps & {
+export declare const StyledDialog: import("../styled").StyledComponent<import("@mui/material/Dialog").DialogProps & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     $size: DialogSize;

package/components/Dialog/styles.js

@@ -1,4 +1,5 @@
-import { backdropClasses, dialogClasses, Dialog as MuiDialog, } from '@mui/material';
+import { backdropClasses } from '@mui/material/Backdrop';
+import MuiDialog, { dialogClasses } from '@mui/material/Dialog';
 import { styled } from '../styled';
 import { DIALOG_SIZES } from './constants';
 const getSize = (size) => {

package/components/DialogActions/DialogActions.d.ts

@@ -1,4 +1,4 @@
-import { type DialogActionsProps as MuiDialogActionsProps } from '@mui/material';
-import { type WithoutEmotionSpecific } from '../types';
+import type { DialogActionsProps as MuiDialogActionsProps } from '@mui/material/DialogActions';
+import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type DialogActionsProps = WithoutEmotionSpecific<MuiDialogActionsProps>;
 export declare const DialogActions: ({ children, disableSpacing, ...props }: DialogActionsProps) => import("react/jsx-runtime").JSX.Element;

package/components/DialogActions/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledDialogActions: import("../styled").StyledComponent<import("@mui/material").DialogActionsProps & {
+export declare const StyledDialogActions: import("../styled").StyledComponent<import("@mui/material/DialogActions").DialogActionsProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const StyledGrid: import("../styled").StyledComponent<Omit<import("../Grid/GridComponent").GridComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {

package/components/DialogActions/styles.js

@@ -1,4 +1,4 @@
-import { DialogActions } from '@mui/material';
+import DialogActions from '@mui/material/DialogActions';
 import { Grid } from '../Grid';
 import { styled } from '../styled';
 export const StyledDialogActions = styled(DialogActions) `

package/components/DialogContent/DialogContent.d.ts

@@ -1,4 +1,4 @@
-import { type DialogContentProps as MuiDialogContentProps } from '@mui/material';
-import { type WithoutEmotionSpecific } from '../types';
+import type { DialogContentProps as MuiDialogContentProps } from '@mui/material/DialogContent';
+import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type DialogContentProps = WithoutEmotionSpecific<MuiDialogContentProps>;
 export declare const DialogContent: (props: DialogContentProps) => import("react/jsx-runtime").JSX.Element;

package/components/DialogContent/styles.d.ts

@@ -1,4 +1,4 @@
-import { type DialogContentProps } from '@mui/material';
+import type { DialogContentProps } from '@mui/material/DialogContent';
 export declare const StyledDialogContent: import("../styled").StyledComponent<DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DialogContent/styles.js

@@ -1,4 +1,4 @@
-import { DialogContent as MuiDialogContent, } from '@mui/material';
+import MuiDialogContent from '@mui/material/DialogContent';
 import { styled } from '../styled';
 export const StyledDialogContent = styled(MuiDialogContent) `
   padding-bottom: ${({ theme }) => theme.spacing(6)};

package/components/DialogContentText/DialogContentText.d.ts

@@ -1,4 +1,4 @@
-import { type DialogContentTextProps as MuiDialogContentTextProps } from '@mui/material';
-import { type WithoutEmotionSpecific } from '../types';
+import type { DialogContentTextProps as MuiDialogContentTextProps } from '@mui/material/DialogContentText';
+import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type DialogContentTextProps = WithoutEmotionSpecific<MuiDialogContentTextProps>;
 export declare const DialogContentText: (props: DialogContentTextProps) => import("react/jsx-runtime").JSX.Element;

package/components/DialogContentText/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const StyledDialogContentText: import("../styled").StyledComponent<import("@mui/material").DialogContentTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "typography" | "zIndex" | "p" | "style" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "classes" | "className" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+export declare const StyledDialogContentText: import("../styled").StyledComponent<import("@mui/material/DialogContentText").DialogContentTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "typography" | "zIndex" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "sx" | "classes" | "className" | "style" | "color" | "children" | "p" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "displayPrint" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "marginX" | "marginY" | "paddingX" | "paddingY" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DialogContentText/styles.js

@@ -1,4 +1,4 @@
-import { DialogContentText as MuiDialogContentText } from '@mui/material';
+import MuiDialogContentText from '@mui/material/DialogContentText';
 import { styled } from '../styled';
 export const StyledDialogContentText = styled(MuiDialogContentText) `
   color: ${({ theme }) => theme.palette.grey[900]};

package/components/DialogHeader/DialogHeader.d.ts

@@ -1,4 +1,4 @@
-import { type ModalProps } from '@mui/material';
+import type { ModalProps } from '@mui/material/Modal';
 import type React from 'react';
 import type { CSSProperties } from 'react';
 export type DialogHeaderProps = {

package/components/DialogHeader/DialogHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CrossOutlineMd } from '../../icons';
+import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { IconButton } from '../IconButton';
 import { Typography } from '../Typography';
 import { HeaderContent, Wrapper } from './styles';

package/components/DialogTitle/DialogTitle.d.ts

@@ -1,5 +1,6 @@
-import { type ModalProps, type DialogTitleProps as MuiDialogTitleProps } from '@mui/material';
-import { type WithoutEmotionSpecific } from '../types';
+import type { DialogTitleProps as MuiDialogTitleProps } from '@mui/material/DialogTitle';
+import type { ModalProps } from '@mui/material/Modal';
+import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type DialogTitleProps = WithoutEmotionSpecific<MuiDialogTitleProps> & {
     onClose?: ModalProps['onClose'];
 };

package/components/DialogTitle/DialogTitle.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DialogTitle as MuiDialogTitle, } from '@mui/material';
-import { CrossOutlineMd } from '../../icons';
+import MuiDialogTitle from '@mui/material/DialogTitle';
+import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { IconButton } from '../IconButton';
 export const DialogTitle = ({ children, onClose, ...props }) => {
     // 'escapeKeyDown'  в документашке написано что это опциональный тип, и можно стрингу любую туда закидывать, а по факту либо escapeKeyDown либо backdropClick

package/components/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import { type DividerProps as MuiDividerProps } from '@mui/material';
-import { type WithoutEmotionSpecific } from '../types';
+import type { DividerProps as MuiDividerProps } from '@mui/material/Divider';
+import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type DividerProps = WithoutEmotionSpecific<MuiDividerProps>;
 export declare const Divider: (props: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/components/Divider/Divider.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Divider as MuiDivider, } from '@mui/material';
+import MuiDivider from '@mui/material/Divider';
 export const Divider = (props) => _jsx(MuiDivider, { ...props });

package/components/DropdownButton/DropdownButton.d.ts

@@ -1,4 +1,4 @@
-import { type PopoverProps } from '@mui/material';
+import type { PopoverProps } from '@mui/material/Popover';
 import { type ButtonProps } from '../Button';
 export type DropdownButtonProps = Omit<ButtonProps, 'endIcon' | 'selected' | 'onClick'> & {
     /**

package/components/DropdownButton/DropdownButton.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ClickAwayListener } from '@mui/material';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { Button } from '../Button';
 import { Chevron } from '../Chevron';
-import { useMenu } from '../hooks';
+import { useMenu } from '../hooks/useMenu';
 import { Menu } from '../Menu';
 export const DropdownButton = ({ children, name, popoverProps, ...props }) => {
     const { open, anchorRef, handleOpenMenu, handleCloseMenu } = useMenu();