@foxford/ui 2.41.0 → 2.42.0

package/dts/index.d.ts

@@ -2,9 +2,9 @@
 import * as react from 'react';
 import { CSSProperties, Component, SVGAttributes, FunctionComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
 import * as styled_components from 'styled-components';
-import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, Interpolation, ThemeProps, SimpleInterpolation, css, StyledProps } from 'styled-components';
+import { CSSObject, DefaultTheme, FlattenSimpleInterpolation, Interpolation, ThemeProps, SimpleInterpolation, css, StyledProps } from 'styled-components';
 import { Props, PopperInstance, PlacementOptions, Styles } from 'react-floater/lib/types';
-import { Classes } from 'react-modal';
+import { Props as Props$1, Classes } from 'react-modal';
 import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
 import * as rc_scrollbars from 'rc-scrollbars';
 import { ScrollbarsProps } from 'rc-scrollbars';
@@ -305,7 +305,8 @@ declare enum BaseColorNames {
     'product-low-group' = "product-low-group",
     'product-low-outclass' = "product-low-outclass",
     'product-low-course' = "product-low-course",
-    'product-low-tutor' = "product-low-tutor"
+    'product-low-tutor' = "product-low-tutor",
+    'bg-other-overlay' = "bg-other-overlay"
 }
 declare enum BrandColorNames {
     'content-brand-primary' = "content-brand-primary",
@@ -550,6 +551,7 @@ declare const ColorNames: {
     'product-low-outclass': (typeof BaseColorNames)["product-low-outclass"];
     'product-low-course': (typeof BaseColorNames)["product-low-course"];
     'product-low-tutor': (typeof BaseColorNames)["product-low-tutor"];
+    'bg-other-overlay': (typeof BaseColorNames)["bg-other-overlay"];
     profession: UnitColorNames.profession;
     professionDark: UnitColorNames.professionDark;
     camps: UnitColorNames.camps;
@@ -871,19 +873,41 @@ declare type CSSBorderStyle = CSSGlobalValue | 'none' | 'hidden' | 'dotted' | 'd
 declare type CSSVerticalAlign = CSSGlobalValue | 'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom';
 declare type CSSFontWeight = CSSGlobalValue | 'normal' | 'bold' | 'lighter' | 'bolder' | number;
 declare type Size = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
+declare type SizeValue = Size | CSSGlobalValue | number;
 declare type Breakpoint = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
 declare type Color = keyof typeof ColorNames | CSSColor;
 declare type ColorPaletteKey = 'color' | `color${string}` | `${string}Color` | `${string}Color${string}`;
-declare type Sizes = Record<Size, CSSProperties>;
 declare type ThemePreset = 'default' | 'brand';
 declare type ThemeMode = 'light' | 'dark';
 declare type ThemeName = 'mother' | 'baby' | 'teen' | 'adult';
+declare type ResponsivePropKey = 'size' | keyof CSSProperties;
+declare type KeysOfUnion<T> = T extends T ? keyof T : never;
+declare type WithThemePreset<T> = T & {
+    preset: ThemePreset;
+};
 
 interface BaseProps {
     preset?: ThemePreset;
     className?: string;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 }
+declare type ResponsiveProps<K extends ResponsivePropKey, V> = {
+    [key in K]?: V | [DESKTOP: V, TABLET: V, MOBILE: V] | [XL: V, L: V, M: V, S: V, XS: V, XXS: V];
+} & {
+    [key in `${K}${Breakpoint}`]?: V;
+};
+declare type ResponsiveSizeProps<S extends string, V = S> = ResponsiveProps<'size', V> & {
+    sizeUnits?: CSSUnit;
+    sizes?: Partial<Record<S, CSSProperties>>;
+};
+declare type ResponsivePositionProps<T extends string> = ResponsiveProps<'position', T> & {
+    positions?: Partial<Record<T, CSSProperties>>;
+};
+declare type ResponsiveSizeInterpolationProps<S extends string, V, P extends ResponsiveSizeProps<S, V>> = Omit<P, 'size' | 'sizes'> & {
+    size: NonNullable<P['size']>;
+    sizes: Record<KeysOfUnion<P['sizes']>, CSSProperties>;
+    dynamicSizeDeclaration?: (size: CSSGlobalValue | number, sizeUnits: CSSUnit) => CSSObject;
+};
 
 /**
  * Converts HEX color code to RGB(A) string
@@ -1013,20 +1037,6 @@ declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState>
     render(): JSX.Element;
 }
 
-declare type ResponsivePropKey = 'size' | keyof CSSProperties;
-declare type ResponsiveProps<K extends ResponsivePropKey, V> = {
-    [key in K]?: V | [DESKTOP: V, TABLET: V, MOBILE: V] | [XL: V, L: V, M: V, S: V, XS: V, XXS: V];
-} & {
-    [key in `${K}${Breakpoint}`]?: V;
-};
-
-declare type SizeProperty = 'size';
-declare type SizeValue = Size | CSSGlobalValue | number;
-declare type ResponsiveSizeProps = ResponsiveProps<SizeProperty, SizeValue> & {
-    sizeUnits?: CSSUnit;
-    sizes?: Partial<Sizes>;
-};
-
 declare type MarginProperty = 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft';
 declare type MarginValue = CSSGlobalValue | (string & {}) | number;
 declare type ResponsiveMarginProps = ResponsiveProps<MarginProperty, MarginValue> & {
@@ -1049,7 +1059,7 @@ interface DisplayProperty {
 }
 
 declare type TypographyAppearance = 'display' | 'heading' | 'subheading' | 'subheading-compact' | 'body' | 'caption';
-interface TextProps extends ResponsiveSizeProps, ResponsiveMarginProps, DisplayProperty, ColorProperty, Omit<React.ComponentPropsWithRef<'div'>, 'color'> {
+interface TextProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, DisplayProperty, ColorProperty, Omit<React.ComponentPropsWithRef<'div'>, 'color'> {
     /** Root node polymorphic type */
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
     /** Predefined styles and sizes */
@@ -4530,7 +4540,7 @@ declare namespace IconPack {
 declare type IconPackIconName = Uncapitalize<keyof typeof IconPack>;
 declare type IconNameDefault = 'book' | 'blackBoard' | 'burger' | 'eye' | 'email' | 'sort' | 'unsort' | 'person' | 'diamond' | 'diamondFilled' | 'diamondSolid' | 'infoInverse' | 'list' | 'login' | 'logout' | 'fire' | 'camps' | 'cart' | 'clock' | 'clockFilled' | 'courses' | 'discount' | 'externat' | 'headphones' | 'page' | 'priceTag' | 'phone' | 'prof' | 'star' | 'settings' | 'student' | 'target' | 'textbook' | 'trophy' | 'message' | 'wallet' | 'edit' | 'copy' | 'print' | 'objective' | 'present' | 'coins' | 'calendar' | 'calendar_simple' | 'chevronDown' | 'chevronUp' | 'chevronRight' | 'chevronLeft' | 'cross' | 'dialog' | 'dropDownArrow' | 'externalLink' | 'file' | 'fileBordered' | 'lessons' | 'pencil' | 'phoneNoFill' | 'radioChecked' | 'radioNotChecked' | 'search' | 'tasks' | 'tinyCross' | 'sharpCross' | 'plus' | 'plusThin' | 'play' | 'reload' | 'checkCircle' | 'info' | 'check' | 'home' | 'questionFilled' | 'document' | 'cancel' | 'playPause' | 'video';
 declare type IconName = IconPackIconName | IconNameDefault;
-interface IconProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
+interface IconProps extends ResponsiveSizeProps<Size, SizeValue>, Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
     /** UI: brand (v3), or default (v2) */
     preset?: ThemePreset;
     /** Icon color */
@@ -4634,7 +4644,7 @@ declare type AnchorPalette = {
     colorHover: CSSColor;
     colorDisabled: CSSColor;
 };
-interface AnchorProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'a'>, 'color' | 'children'>, 
+interface AnchorProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'a'>, 'color' | 'children'>, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use children as function */
@@ -4709,7 +4719,7 @@ declare type ButtonPalette = {
     borderColorDisabled: CSSColor;
     shadowColor: CSSColor;
 };
-interface ButtonProps extends ResponsiveSizeProps, ColorProperty, ColorProperty<'fontColor'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'>, ResponsiveNamedProperty<'fluid', boolean>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, Omit<React.ComponentPropsWithRef<'button'>, 'color' | 'children'>, 
+interface ButtonProps extends ResponsiveSizeProps<Size, SizeValue>, ColorProperty, ColorProperty<'fontColor'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'>, ResponsiveNamedProperty<'fluid', boolean>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, Omit<React.ComponentPropsWithRef<'button'>, 'color' | 'children'>, 
 /** @deprecated Use children as function or inline prop */
 DisplayProperty, 
 /** @deprecated */
@@ -4879,7 +4889,7 @@ declare type ArrowPalette = {
     borderColorDisabled: CSSColor;
     shadowColor: CSSColor;
 };
-interface ArrowProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+interface ArrowProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
     /** UI: brand (v3), or default (v2) */
     preset?: ThemePreset;
     /** Custom colors */
@@ -4933,7 +4943,7 @@ declare type InputCheckboxPalette = {
     backgroundColorDisabledChecked: CSSColor;
     borderColorDisabledChecked: CSSColor;
 };
-interface InputCheckboxProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'children'> {
+interface InputCheckboxProps extends ResponsiveSizeProps<Size, SizeValue>, Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'children'> {
     /** Custom colors */
     palette?: Partial<Record<keyof InputCheckboxPalette, Color>>;
     /** Display inline */
@@ -5041,7 +5051,7 @@ declare type ArrowBadgePalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
 };
-interface ArrowBadgeProps extends ResponsiveSizeProps, ResponsiveMarginProps, 
+interface ArrowBadgeProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use palette */
@@ -5094,7 +5104,7 @@ declare type TabPalette = {
     backgroundColorDisabled: CSSColor;
     borderColorDisabled: CSSColor;
 };
-interface TabProps extends ResponsiveSizeProps, ResponsiveMarginProps, 
+interface TabProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use palette */
@@ -5152,7 +5162,7 @@ declare type BadgePalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
 };
-interface BadgeProps extends ResponsiveSizeProps, ResponsiveMarginProps, 
+interface BadgeProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty, 
 /** @deprecated Use children as function */
@@ -5258,7 +5268,7 @@ declare type TooltipComponentPalette = {
     closeColorActive: CSSColor;
     closeColorDisabled: CSSColor;
 };
-interface TooltipComponentProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
+interface TooltipComponentProps extends ResponsiveSizeProps<Size, SizeValue>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
     /** Custom colors */
     palette?: Partial<Record<keyof TooltipComponentPalette, Color>>;
     /** Appearance variant */
@@ -5297,7 +5307,7 @@ interface TooltipComponentProps extends ResponsiveSizeProps, Omit<React.Componen
  */
 declare const TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps>;
 
-interface TooltipProps extends ResponsiveSizeProps, React.RefAttributes<HTMLDivElement> {
+interface TooltipProps extends ResponsiveSizeProps<Size, SizeValue>, React.RefAttributes<HTMLDivElement> {
     /** UI: brand (v3), or default (v2) */
     preset?: ThemePreset;
     /** Custom colors */
@@ -5394,7 +5404,7 @@ declare type PopoverComponentPalette = {
     closeColorDisabled: CSSColor;
     closeBackgroundColorDisabled: CSSColor;
 };
-interface PopoverComponentProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
+interface PopoverComponentProps extends ResponsiveSizeProps<Size, SizeValue>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
     /** Custom colors */
     palette?: Partial<Record<keyof PopoverComponentPalette, Color>>;
     /** Relationship of width to height */
@@ -5463,7 +5473,7 @@ interface PopoverComponentProps extends ResponsiveSizeProps, Omit<React.Componen
  */
 declare const PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps>;
 
-interface PopoverProps extends ResponsiveSizeProps, React.RefAttributes<HTMLDivElement> {
+interface PopoverProps extends ResponsiveSizeProps<Size, SizeValue>, React.RefAttributes<HTMLDivElement> {
     /** Custom colors */
     palette?: Partial<Record<keyof PopoverComponentPalette, Color>>;
     /** Open automatically */
@@ -5576,7 +5586,7 @@ declare type ListItemPalette = {
     backgroundColorHover: CSSColor;
     mediaPlaceholderColor: CSSColor;
 };
-interface ListItemProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type'>, Omit<React.AnchorHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type' | 'media'> {
+interface ListItemProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type'>, Omit<React.AnchorHTMLAttributes<HTMLElement>, 'children' | 'title' | 'type' | 'media'> {
     /** Root node type */
     as?: React.ElementType;
     /** Main text content or render function */
@@ -5654,7 +5664,7 @@ declare type IndicatorPalette = {
     backgroundColor: CSSColor;
     shadowColor: CSSColor;
 };
-interface IndicatorProps extends ResponsiveSizeProps, React.ComponentPropsWithRef<'span'> {
+interface IndicatorProps extends ResponsiveSizeProps<Size, SizeValue>, React.ComponentPropsWithRef<'span'> {
     /** Custom colors */
     palette?: Partial<Record<keyof IndicatorPalette, Color>>;
     /** Text content */
@@ -5698,13 +5708,12 @@ declare type AvatarPalette = {
     backgroundColor: CSSColor;
     shadowColor: CSSColor;
 };
-interface AvatarProps extends Omit<ResponsiveSizeProps, 'size'>, ResponsiveMarginProps, 
+declare type AvatarSize = SizeValue | 'sm';
+interface AvatarProps extends ResponsiveSizeProps<Size, AvatarSize>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, Omit<React.ComponentPropsWithRef<'span'>, 'color'> {
     /** UI: brand (v3), or default (v2) */
     preset?: ThemePreset;
-    /** @ignore Component size */
-    size?: ResponsiveSizeProps['size'] | 'sm';
     /** Custom colors */
     palette?: Partial<Record<keyof AvatarPalette, Color>>;
     /** Text content (alternative to image) */
@@ -5743,7 +5752,7 @@ declare type IconButtonPalette = {
     colorDisabled: CSSColor;
     backgroundColorDisabled: CSSColor;
 };
-interface IconButtonProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+interface IconButtonProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
     /** Custom colors */
     palette?: Partial<Record<keyof IconButtonPalette, Color>>;
     /** Icon to display */
@@ -5783,7 +5792,7 @@ declare type ChipPalette = {
     backgroundColorDisabled: CSSColor;
     borderColorDisabled: CSSColor;
 };
-interface ChipProps extends ResponsiveSizeProps, ResponsiveMarginProps, React.RefAttributes<HTMLElement>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children'> {
+interface ChipProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, React.RefAttributes<HTMLElement>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children'> {
     /** Custom colors */
     palette?: Partial<Record<keyof ChipPalette, Color>>;
     /** Main text content or render function */
@@ -5843,7 +5852,7 @@ declare type MenuComponentPalette = {
     borderColor: CSSColor;
     shadowColor: CSSColor;
 };
-interface MenuComponentProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+interface MenuComponentProps extends ResponsiveSizeProps<Size, SizeValue>, Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
     /** Custom colors */
     palette?: Partial<Record<keyof MenuComponentPalette, Color>>;
     /** Appearance variant */
@@ -5884,7 +5893,7 @@ interface MenuComponentProps extends ResponsiveSizeProps, Omit<React.ComponentPr
  */
 declare const MenuComponent: React.ForwardRefExoticComponent<MenuComponentProps>;
 
-interface MenuListProps extends ResponsiveSizeProps, React.ComponentPropsWithRef<'ul'> {
+interface MenuListProps extends ResponsiveSizeProps<Size, SizeValue>, React.ComponentPropsWithRef<'ul'> {
     /** Menu items (React elements receive "size" props) */
     children: React.ReactNode;
     /** Space between list items */
@@ -5947,7 +5956,7 @@ interface MenuDividerProps extends React.ComponentPropsWithRef<'div'> {
  */
 declare const MenuDivider: React.ForwardRefExoticComponent<MenuDividerProps>;
 
-interface MenuProps extends ResponsiveSizeProps, React.RefAttributes<HTMLDivElement> {
+interface MenuProps extends ResponsiveSizeProps<Size, SizeValue>, React.RefAttributes<HTMLDivElement> {
     /** Open automatically */
     autoOpen?: boolean;
     /** It will be called on state change */
@@ -6009,6 +6018,178 @@ declare const Menu: React.ForwardRefExoticComponent<MenuProps> & {
     Divider: typeof MenuDivider;
 };
 
+declare type DialogComponentSize = 'xxl' | 'xxl-landscape' | 'xl' | 'xl-landscape' | 'l' | 'l-landscape' | 'm' | 's' | 'xs';
+declare type DialogComponentPalette = {
+    color: CSSColor;
+    backgroundColor: CSSColor;
+    shadowColor: CSSColor;
+};
+interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>, Omit<React.ComponentPropsWithRef<'div'>, 'title' | 'draggable'> {
+    /** Текст над заголовком диалога */
+    caption?: React.ReactNode;
+    /** Пропсы для типографики текста над заголовком */
+    captionProps?: TextProps;
+    /** Основной контент */
+    children?: React.ReactNode;
+    /**
+     * Пропсы для кнопки действия в правом верхнем углу диалога (дефолт иконка close).
+     * Для рендера кнопки нужно передать iconButtonProps.onClick
+     */
+    iconButtonProps?: IconButtonProps;
+    /** Функция для рендера контролов диалога (аргументом получает текущие пропсы размеров) */
+    controls?: (props: Partial<Record<keyof Pick<DialogComponentProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>, Size>>) => React.ReactNode;
+    /** Рендер области для захвата окна для перетаскивания */
+    draggable?: boolean;
+    /** Диалог находится в состоянии перетаскивания (использование визуальной индикации) */
+    dragging?: boolean;
+    /** Пропсы для иконки в области захвата для перетаскивания */
+    draggingIconProps?: IconProps;
+    /** Рендер картинки справа с горизонтальной ориентации (дефолт слева) */
+    imgLandscapePositionRight?: boolean;
+    /**
+     * Пути картинок в зависимости от ориентации окна диалога.
+     * Ожидаемое соотношение сторон картинок: 3:1 portrait, 5:7 landscape
+     */
+    imgSrc?: {
+        portrait?: string;
+        landscape?: string;
+    };
+    /** Использование скелетонов вместо реального контента */
+    loading?: boolean;
+    /** Колбек будет передан в onPointerDown элемента области захвата */
+    onGrab?: React.PointerEventHandler<HTMLElement>;
+    /** Колбек будет передан в onKeyDown элемента с иконкой в области захвата */
+    onNudge?: React.KeyboardEventHandler<HTMLElement>;
+    /** Кастомные цвета  */
+    palette?: Partial<Record<keyof DialogComponentPalette, Color>>;
+    /** Пропсы для скелетонов (используются при loading=true) */
+    skeletonProps?: SkeletonProps;
+    /** Подзаголовок диалога */
+    subtitle?: React.ReactNode;
+    /** Пропсы для типографики подзаголовка */
+    subtitleProps?: TextProps;
+    /** Заголовок диалога */
+    title?: React.ReactNode;
+    /** Пропсы типографики для заголовка */
+    titleProps?: TextProps;
+}
+
+/**
+ *
+ * Компонент поддерживает все атрибуты \<div\> элемента.
+ *
+ * Можно передать "ref", который будет ассоциирован с рутовым элементом.
+ *
+ * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.
+ *
+ * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).
+ */
+declare const DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps>;
+
+declare type DialogPosition = 'center' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, ResponsivePositionProps<DialogPosition>, Omit<React.ComponentPropsWithRef<'div'>, 'className' | 'title' | 'draggable'> {
+    /** Открыто диалоговое окно */
+    open: boolean;
+    /** Колбек, который будет вызван после открытия */
+    onAfterOpen?: Props$1['onAfterOpen'];
+    /** Колбек, который будет вызван после закрытия */
+    onAfterClose?: Props$1['onAfterClose'];
+    /** Колбек, который будет вызван по клику на оверлей или нажатию "Esc" (рекомендуется использовать) */
+    onRequestClose?: Props$1['onRequestClose'];
+    /** Класс (или классы) для диалогового окна */
+    className?: Props$1['className'];
+    /** Задержка перед фактическим закрытием (мс) */
+    closeTimeoutMS?: number;
+    /** Класс для элемента портала диалога (дефолт ReactModalPortal) */
+    portalClassName?: string;
+    /** Класс для body при открытом диалоговом окне (дефолт ReactModal__Body--open) */
+    bodyOpenClassName?: string;
+    /** Класс для html при открытом диалоговом окне */
+    htmlOpenClassName?: string;
+    /** Вызов onRequestClose при клике на оверлей (дефолт true) */
+    shouldCloseOnOverlayClick?: boolean;
+    /** Вызов onRequestClose при нажатии "Esc" (дефолт true, не рекомендуется отключать) */
+    shouldCloseOnEsc?: boolean;
+    /** Возврат фокуса на элемент, который был в фокусе до открытия диалога (дефолт true) */
+    shouldReturnFocusAfterClose?: boolean;
+    /** После закрытия не скроллить до элемента, который имел фокус до открытия */
+    preventScrollAfterClose?: boolean;
+    /** Класс (или классы) для оверлея */
+    overlayClassName?: Props$1['overlayClassName'];
+    /** Колбек, который должен вернуть элемент для рендера диалога (дефолт document.body) */
+    parentSelector?: Props$1['parentSelector'];
+    /** Колбек, который получает аргументом элемент оверлея */
+    overlayRef?: Props$1['overlayRef'];
+    /** Колбек, который получает аргументом элемент рута диалогового окна */
+    contentRef?: Props$1['contentRef'];
+    /** Текст над заголовком диалога */
+    caption?: React.ReactNode;
+    /** Пропсы для типографики текста над заголовком */
+    captionProps?: TextProps;
+    /** Основной контент */
+    children?: React.ReactNode;
+    /**
+     * Пропсы для кнопки действия в правом верхнем углу диалога (дефолт иконка close).
+     * Для рендера кнопки нужно передать iconButtonProps.onClick
+     */
+    iconButtonProps?: IconButtonProps;
+    /** Функция для рендера контролов диалога (аргументом получает текущие пропсы размеров) */
+    controls?: (props: Partial<Record<keyof Pick<DialogProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>, Size>>) => React.ReactNode;
+    /**
+     * Диалоговое окно можно перетаскивать.
+     * В этом случае оверлей не используется и диалог рендерит область захвата
+     */
+    draggable?: boolean;
+    /** Пропсы для иконки в области захвата для перетаскивания */
+    draggingIconProps?: IconProps;
+    /** Рендер картинки справа с горизонтальной ориентации (дефолт слева) */
+    imgLandscapePositionRight?: boolean;
+    /**
+     * Пути картинок в зависимости от ориентации окна диалога.
+     * Ожидаемое соотношение сторон картинок: 3:1 portrait, 5:7 landscape
+     */
+    imgSrc?: {
+        portrait?: string;
+        landscape?: string;
+    };
+    /** Использование скелетонов вместо реального контента */
+    loading?: boolean;
+    /** Применение стилей размытия для оверлея */
+    overlayBlur?: boolean;
+    /** Кастомные цвета  */
+    palette?: {
+        color?: Color;
+        backgroundColor?: Color;
+        shadowColor?: Color;
+        overlayBackgroundColor?: Color;
+    };
+    /** Пропсы для скелетонов (используются при loading=true) */
+    skeletonProps?: SkeletonProps;
+    /** Подзаголовок диалога */
+    subtitle?: React.ReactNode;
+    /** Пропсы для типографики подзаголовка */
+    subtitleProps?: TextProps;
+    /** Заголовок диалога */
+    title?: React.ReactNode;
+    /** Пропсы типографики для заголовка */
+    titleProps?: TextProps;
+}
+
+/**
+ *
+ * Компонент поддерживает все атрибуты \<div\> элемента и пропсы "react-modal" [v3.16.1](https://reactcommunity.org/react-modal).
+ *
+ * Поддерживаются пропсы определения размеров и позиции в зависимости от ширины вьюпорта.
+ *
+ * Получить доступ к компоненту, не подключенному к "react-modal", можно через Dialog.Component.
+ *
+ * Полный интерфейс Dialog можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Dialog/types.ts), интерфейс Dialog.Component [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).
+ *
+ */
+declare const Dialog: React.ForwardRefExoticComponent<DialogProps> & {
+    Component: typeof DialogComponent;
+};
+
 interface Theme {
     breakpoints: Readonly<Record<Lowercase<Breakpoint>, number>>;
     assetHost?: string;
@@ -6030,30 +6211,32 @@ interface Theme {
     preset: ThemePreset;
     name: ThemeName;
     components?: {
-        Alert?: AlertProps;
-        Anchor?: AnchorProps;
-        Arrow?: ArrowProps;
-        ArrowBadge?: ArrowBadgeProps;
-        Avatar?: AvatarProps;
-        Badge?: BadgeProps;
-        Button?: ButtonProps;
-        Checkbox?: CheckboxProps;
-        Chip?: ChipProps;
-        IconButton?: IconButtonProps;
-        Indicator?: IndicatorProps;
-        ListItem?: ListItemProps;
-        Popover?: PopoverProps;
-        PopoverComponent?: PopoverComponentProps;
-        Skeleton?: SkeletonProps;
-        Switcher?: SwitcherProps;
-        Tab?: TabProps;
-        Text?: TextProps;
-        'Text.Heading'?: TextHeadingProps;
-        Textarea?: TextareaProps;
-        Tooltip?: TooltipProps;
-        TooltipComponent?: TooltipComponentProps;
-        Menu?: MenuProps;
-        MenuComponentProps?: MenuComponentProps;
+        Alert?: Partial<AlertProps>;
+        Anchor?: Partial<AnchorProps>;
+        Arrow?: Partial<ArrowProps>;
+        ArrowBadge?: Partial<ArrowBadgeProps>;
+        Avatar?: Partial<AvatarProps>;
+        Badge?: Partial<BadgeProps>;
+        Button?: Partial<ButtonProps>;
+        Checkbox?: Partial<CheckboxProps>;
+        Chip?: Partial<ChipProps>;
+        IconButton?: Partial<IconButtonProps>;
+        Indicator?: Partial<IndicatorProps>;
+        ListItem?: Partial<ListItemProps>;
+        Popover?: Partial<PopoverProps>;
+        PopoverComponent?: Partial<PopoverComponentProps>;
+        Skeleton?: Partial<SkeletonProps>;
+        Switcher?: Partial<SwitcherProps>;
+        Tab?: Partial<TabProps>;
+        Text?: Partial<TextProps>;
+        'Text.Heading'?: Partial<TextHeadingProps>;
+        Textarea?: Partial<TextareaProps>;
+        Tooltip?: Partial<TooltipProps>;
+        TooltipComponent?: Partial<TooltipComponentProps>;
+        Menu?: Partial<MenuProps>;
+        MenuComponentProps?: Partial<MenuComponentProps>;
+        Dialog?: Partial<DialogProps>;
+        DialogComponentProps?: Partial<DialogComponentProps>;
     };
 }
 
@@ -6064,71 +6247,71 @@ declare type MediaQueryParams = {
 /**
  * @return `@media screen and (min-width: 320px) and (max-width: 374px) { ...args }`
  */
-declare const screenXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenXs: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 375px) and (max-width: 767px) { ...args }`
  */
-declare const screenS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenS: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 768) and (max-width: 1023px) { ...args }`
  */
-declare const screenM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenM: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 1024px) and (max-width: 1279px) { ...args }`
  */
-declare const screenL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenL: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 1280px) and (max-width: 1439px) { ...args }`
  */
-declare const screenXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenXl: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 319px) { ...args }`
  */
-declare const screenMaxXxs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxXxs: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 374px) { ...args }`
  */
-declare const screenMaxXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxXs: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 375px) { ...args }`
  */
-declare const screenMinXs: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMinXs: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 767px) { ...args }`
  */
-declare const screenMaxS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxS: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 768px) { ...args }`
  */
-declare const screenMinS: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMinS: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 1023px) { ...args }`
  */
-declare const screenMaxM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxM: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 1024px) { ...args }`
  */
-declare const screenMinM: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMinM: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 1279px) { ...args }`
  */
-declare const screenMaxL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxL: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 1280px) { ...args }`
  */
-declare const screenMinL: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMinL: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (max-width: 1439px) { ...args }`
  */
-declare const screenMaxXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMaxXl: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media screen and (min-width: 1440px) { ...args }`
  */
-declare const screenMinXl: (params?: MediaQueryParams) => <T extends object>(args_0: TemplateStringsArray | CSSObject, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
+declare const screenMinXl: (params?: MediaQueryParams) => <T extends object>(args_0: CSSObject | TemplateStringsArray, ...args_1: Interpolation<T & ThemeProps<DefaultTheme>>[]) => (props: ThemeProps<DefaultTheme>) => styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<T, DefaultTheme>>;
 /**
  * @return `@media -webkit-min-device-pixel-ratio: 2 and (min-resolution: 192dpi) { ...args }`
  */
-declare const screenRetina: (args_0: TemplateStringsArray | CSSObject, args_1: SimpleInterpolation) => styled_components.FlattenSimpleInterpolation;
+declare const screenRetina: (args_0: CSSObject | TemplateStringsArray, args_1: SimpleInterpolation) => styled_components.FlattenSimpleInterpolation;
 
 declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
 
@@ -7347,7 +7530,7 @@ declare type InputPalette = {
     controlsColorDisabled: CSSColor;
     controlsBackgroundColorDisabled: CSSColor;
 };
-interface InputProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'input'>, 'children' | 'size' | 'type' | 'value' | 'defaultValue' | 'color' | 'width'>, 
+interface InputProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'input'>, 'children' | 'size' | 'type' | 'value' | 'defaultValue' | 'color' | 'width'>, 
 /** @deprecated Use palette */
 ColorProperty, 
 /** @deprecated Use palette */
@@ -7461,7 +7644,7 @@ declare type InputRadioPalette = {
     backgroundColorDisabledChecked: CSSColor;
     borderColorDisabledChecked: CSSColor;
 };
-interface InputRadioProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'children'> {
+interface InputRadioProps extends ResponsiveSizeProps<Size, SizeValue>, Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'children'> {
     /** Custom colors */
     palette?: Partial<Record<keyof InputRadioPalette, Color>>;
     /** Display inline */
@@ -7597,7 +7780,7 @@ declare type FormLabelPalette = {
     hintColorDisabled: CSSColor;
     hintBackgroundColorDisabled: CSSColor;
 };
-interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, React.ComponentPropsWithRef<'label'> {
+interface FormLabelProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, React.ComponentPropsWithRef<'label'> {
     /** Custom colors */
     palette?: Partial<Record<keyof FormLabelPalette, Color>>;
     /** Render radio or checkbox input */
@@ -7658,7 +7841,7 @@ declare type DropdownOption = {
     /** Ассоциативные теги (учитывается в текстовом поиске) */
     [FuseSearchKeys.tags]?: string[];
 };
-interface DropdownProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+interface DropdownProps extends ResponsiveSizeProps<Size, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
     /** Закрывать выпадающее меню при скролле */
     closeMenuOnScroll?: boolean;
     /** Адаптировать цветовую схему для контрастного фона */
@@ -7761,4 +7944,4 @@ interface DropdownProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit
  */
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps>;
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, type BaseProps, type Breakpoint, Button, COUNTRY_DATA, type CSSBorderStyle, type CSSColor, type CSSFontWeight, type CSSGlobalValue, type CSSUnit, type CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, type Color, ColorNames, type ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, Dropdown, FormLabel, type HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, ListItem, Menu, Modal, type Nullable, Paper, Popover, Progress, type RGB, type RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, type Size, type Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text$1 as Text, Textarea, type Theme, type ThemeMode, type ThemeName, type ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, type BaseProps, type Breakpoint, Button, COUNTRY_DATA, type CSSBorderStyle, type CSSColor, type CSSFontWeight, type CSSGlobalValue, type CSSUnit, type CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, type Color, ColorNames, type ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, Dialog, Dropdown, FormLabel, type HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, type KeysOfUnion, ListItem, Menu, Modal, type Nullable, Paper, Popover, Progress, type RGB, type RGBA, Radio, type ResponsivePositionProps, type ResponsivePropKey, type ResponsiveProps, type ResponsiveSizeInterpolationProps, type ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, type Size, type SizeValue, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text$1 as Text, Textarea, type Theme, type ThemeMode, type ThemeName, type ThemePreset, ThemeProvider, Tooltip, type WithThemePreset, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };