@foxford/ui 2.72.0 → 2.73.0

package/dts/index.d.ts

@@ -884,8 +884,8 @@ declare type CSSColor = RGB | RGBA | HEX | CSSGlobalValue | 'currentcolor' | 'tr
 declare type CSSBorderStyle = CSSGlobalValue | 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
 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$2 = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
-declare type SizeValue = Size$2 | CSSGlobalValue | number;
+declare type Size$4 = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
+declare type SizeValue = Size$4 | 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}`;
@@ -985,7 +985,7 @@ declare const adultDarkTheme: DefaultTheme;
 /**
  * Value for breakpoint
  */
-declare type PossibleValues = number | Size$2 | 'auto' | 'initial' | 'inherit' | boolean;
+declare type PossibleValues = number | Size$4 | 'auto' | 'initial' | 'inherit' | boolean;
 declare type PropsProperties = 'size' | 'fontSize' | 'height' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'fluid';
 declare type CalcProperty = (_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null;
 declare type CssProperty = string | CalcProperty;
@@ -993,15 +993,15 @@ declare type ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
 declare type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {
     [key in `${T}${ResponsiveKeys}`]?: V;
 };
-declare type ResponsiveProperty<V = number | Size$2> = V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
-declare const property: (value: PossibleValues, cssProperty?: CssProperty, sizing?: null | string, sizes?: Record<Size$2, number>) => () => () => FlattenSimpleInterpolation | null;
+declare type ResponsiveProperty<V = number | Size$4> = V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
+declare const property: (value: PossibleValues, cssProperty?: CssProperty, sizing?: null | string, sizes?: Record<Size$4, number>) => () => () => FlattenSimpleInterpolation | null;
 interface ResponsiveNamedPropertyPayload<T extends PropsProperties> {
     sizes: ResponsiveNamedProperty<T>;
     cssProperty: CssProperty;
     sizing?: null | string;
     customSizeHandler?: (_value: PossibleValues) => PossibleValues;
     sort?: (_a: string, _b: string) => number;
-    predefinedSizes?: Record<Size$2, number>;
+    predefinedSizes?: Record<Size$4, number>;
 }
 /**
  * Миксин для генерации media запросов
@@ -1111,7 +1111,7 @@ interface ExpandButtonProps extends React.ComponentPropsWithoutRef<'button'> {
     /** Кастомные цвета */
     palette?: Partial<Record<keyof ExpandButtonPalette, Color>>;
 }
-interface TextProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, 
+interface TextProps extends ResponsiveSizeProps<Size$4, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated */
 DisplayProperty, ColorProperty, Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Omit<React.BlockquoteHTMLAttributes<HTMLElement>, 'color'>, Omit<React.LabelHTMLAttributes<HTMLElement>, 'color'> {
     /** Применение присета стилей и размеров */
@@ -1188,7 +1188,7 @@ declare const Text: React.ForwardRefExoticComponent<TextProps> & {
 declare type IconPackIconName = Uncapitalize<keyof typeof IconPack>;
 declare type IconNameDefault = 'book' | 'blackBoard' | 'burger' | 'eye' | 'email' | 'sort' | 'unsort' | 'person' | 'diamond' | 'diamondFilled' | '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<Size$2, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
+interface IconProps extends ResponsiveSizeProps<Size$4, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
     /** UI: brand (v3), or default (v2) */
     preset?: ThemePreset;
     /** Icon color */
@@ -1292,7 +1292,7 @@ declare type AnchorPalette = {
     colorHover: CSSColor;
     colorDisabled: CSSColor;
 };
-interface AnchorProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'a'>, 'color' | 'children'>, 
+interface AnchorProps extends ResponsiveSizeProps<Size$4, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'a'>, 'color' | 'children'>, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use children as function */
@@ -1366,7 +1366,7 @@ declare type ButtonPalette = {
     borderColorDisabled: CSSColor;
     shadowColor: CSSColor;
 };
-interface ButtonProps extends ResponsiveSizeProps<Size$2, 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'>, 
+interface ButtonProps extends ResponsiveSizeProps<Size$4, 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 */
@@ -1581,7 +1581,7 @@ declare type ArrowPalette = {
     borderColorDisabled: CSSColor;
     shadowColor: CSSColor;
 };
-interface ArrowProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+interface ArrowProps extends ResponsiveSizeProps<Size$4, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
     /**
      * UI: v3 (brand), or v2 (default)
      * @default "default" */
@@ -1871,7 +1871,7 @@ declare type ArrowBadgePalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
 };
-interface ArrowBadgeProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, 
+interface ArrowBadgeProps extends ResponsiveSizeProps<Size$4, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use palette */
@@ -1924,7 +1924,7 @@ declare type TabPalette = {
     backgroundColorDisabled: CSSColor;
     borderColorDisabled: CSSColor;
 };
-interface TabProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, 
+interface TabProps extends ResponsiveSizeProps<Size$4, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use palette */
@@ -1982,7 +1982,7 @@ declare type BadgePalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
 };
-interface BadgeProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, 
+interface BadgeProps extends ResponsiveSizeProps<Size$4, SizeValue>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty, 
 /** @deprecated Use children as function */
@@ -2318,14 +2318,14 @@ declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps> & {
     Component: typeof TooltipComponent;
 };
 
-declare type Size$1 = 'xl' | 'l' | 'm' | 's' | 'xs';
-declare type Layout$1 = 'vertical' | 'horizontal';
+declare type Size$3 = 'xl' | 'l' | 'm' | 's' | 'xs';
+declare type Layout$3 = 'vertical' | 'horizontal';
 declare type PopoverComponentPalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
     shadowColor: CSSColor;
 };
-interface PopoverComponentBaseProps extends ResponsiveSizeProps<Size$1>, ResponsiveLayoutProps<Layout$1> {
+interface PopoverComponentBaseProps extends ResponsiveSizeProps<Size$3>, ResponsiveLayoutProps<Layout$3> {
     /**
      * Кастомные цвета.
      *
@@ -2354,7 +2354,10 @@ interface PopoverComponentBaseProps extends ResponsiveSizeProps<Size$1>, Respons
      * Кастомный хедер.
      *
      * @default undefined */
-    header?: React.ReactNode;
+    header?: React.ReactNode | ((headerProps: {
+        badgeProps: BadgeProps;
+        captionProps: TextProps;
+    }) => React.ReactNode);
     /**
      * Заголовок.
      *
@@ -2372,7 +2375,10 @@ interface PopoverComponentBaseProps extends ResponsiveSizeProps<Size$1>, Respons
      * Кастомный блок с основным контентом.
      *
      * @default undefined */
-    body?: React.ReactNode;
+    body?: React.ReactNode | ((bodyProps: {
+        titleProps: TextProps;
+        contentProps: TextProps;
+    }) => React.ReactNode);
     /**
      * Кастомный футер.
      *
@@ -2430,9 +2436,9 @@ declare type PopoverComponentProps = PopoverComponentBaseProps & Omit<React.Comp
 
 declare const PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps>;
 
-declare type Size = 's' | 'xl' | 'l' | 'm' | 'xs';
-declare type Layout = 'vertical' | 'horizontal';
-interface PopoverBaseProps extends ResponsiveSizeProps<Size>, ResponsiveLayoutProps<Layout> {
+declare type Size$2 = 's' | 'xl' | 'l' | 'm' | 'xs';
+declare type Layout$2 = 'vertical' | 'horizontal';
+interface PopoverBaseProps extends ResponsiveSizeProps<Size$2>, ResponsiveLayoutProps<Layout$2> {
     /**
      * Кастомные цвета.
      *
@@ -2572,7 +2578,10 @@ interface PopoverBaseProps extends ResponsiveSizeProps<Size>, ResponsiveLayoutPr
      *
      * @slot
      * @default undefined */
-    header?: React.ReactNode;
+    header?: React.ReactNode | ((headerProps: {
+        badgeProps: BadgeProps;
+        captionProps: TextProps;
+    }) => React.ReactNode);
     /**
      * Заголовок.
      *
@@ -2594,7 +2603,10 @@ interface PopoverBaseProps extends ResponsiveSizeProps<Size>, ResponsiveLayoutPr
      *
      * @slot
      * @default undefined */
-    body?: React.ReactNode;
+    body?: React.ReactNode | ((bodyProps: {
+        titleProps: TextProps;
+        contentProps: TextProps;
+    }) => React.ReactNode);
     /**
      * Кастомный футер.
      *
@@ -2642,43 +2654,43 @@ interface PopoverBaseProps extends ResponsiveSizeProps<Size>, ResponsiveLayoutPr
      *
      * @general
      * @default 's' */
-    size?: Size | [DESKTOP: Size, TABLET: Size, MOBILE: Size] | [XL: Size, L: Size, M: Size, S: Size, XS: Size, XXS: Size];
+    size?: Size$2 | [DESKTOP: Size$2, TABLET: Size$2, MOBILE: Size$2] | [XL: Size$2, L: Size$2, M: Size$2, S: Size$2, XS: Size$2, XXS: Size$2];
     /**
      * Размер для XXS брейкпоинта.
      *
      * @default undefined */
-    sizeXXS?: Size;
+    sizeXXS?: Size$2;
     /**
      * Размер для XS брейкпоинта.
      *
      * @default undefined */
-    sizeXS?: Size;
+    sizeXS?: Size$2;
     /**
      * Размер для S брейкпоинта.
      *
      * @default undefined */
-    sizeS?: Size;
+    sizeS?: Size$2;
     /**
      * Размер для M брейкпоинта.
      *
      * @default undefined */
-    sizeM?: Size;
+    sizeM?: Size$2;
     /**
      * Размер для L брейкпоинта.
      *
      * @default undefined */
-    sizeL?: Size;
+    sizeL?: Size$2;
     /**
      * Размер для XL брейкпоинта.
      *
      * @default undefined */
-    sizeXL?: Size;
+    sizeXL?: Size$2;
     /**
      * Модификация размеров.
      *
      * @general
      * @default undefined */
-    sizes?: Partial<Record<Size, React.CSSProperties>>;
+    sizes?: Partial<Record<Size$2, React.CSSProperties>>;
     /**
      * Вариант шаблона лейаута.
      *
@@ -2686,37 +2698,37 @@ interface PopoverBaseProps extends ResponsiveSizeProps<Size>, ResponsiveLayoutPr
      *
      * @general
      * @default 'vertical' */
-    layout?: Layout | [DESKTOP: Layout, TABLET: Layout, MOBILE: Layout] | [XL: Layout, L: Layout, M: Layout, S: Layout, XS: Layout, XXS: Layout];
+    layout?: Layout$2 | [DESKTOP: Layout$2, TABLET: Layout$2, MOBILE: Layout$2] | [XL: Layout$2, L: Layout$2, M: Layout$2, S: Layout$2, XS: Layout$2, XXS: Layout$2];
     /**
      * Лейаут для XXS брейкпоинта.
      *
      * @default undefined */
-    layoutXXS?: Layout;
+    layoutXXS?: Layout$2;
     /**
      * Лейаут для XS брейкпоинта.
      *
      * @default undefined */
-    layoutXS?: Layout;
+    layoutXS?: Layout$2;
     /**
      * Лейаут для S брейкпоинта.
      *
      * @default undefined */
-    layoutS?: Layout;
+    layoutS?: Layout$2;
     /**
      * Лейаут для M брейкпоинта.
      *
      * @default undefined */
-    layoutM?: Layout;
+    layoutM?: Layout$2;
     /**
      * Лейаут для L брейкпоинта.
      *
      * @default undefined */
-    layoutL?: Layout;
+    layoutL?: Layout$2;
     /**
      * Лейаут для XL брейкпоинта.
      *
      * @default undefined */
-    layoutXL?: Layout;
+    layoutXL?: Layout$2;
     /**
      * Кастомный рутовый блок.
      *
@@ -2804,7 +2816,7 @@ declare type ListItemPalette = {
     backgroundColorHover: CSSColor;
     mediaPlaceholderColor: CSSColor;
 };
-interface ListItemProps extends ResponsiveSizeProps<Size$2, SizeValue>, 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$4, 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 */
@@ -2882,7 +2894,7 @@ declare type IndicatorPalette = {
     backgroundColor: CSSColor;
     shadowColor: CSSColor;
 };
-interface IndicatorProps extends ResponsiveSizeProps<Size$2, SizeValue>, ResponsiveMarginProps, React.ComponentPropsWithRef<'span'> {
+interface IndicatorProps extends ResponsiveSizeProps<Size$4, SizeValue>, ResponsiveMarginProps, React.ComponentPropsWithRef<'span'> {
     /** Custom colors */
     palette?: Partial<Record<keyof IndicatorPalette, Color>>;
     /** Text content */
@@ -2927,7 +2939,7 @@ declare type AvatarPalette = {
     shadowColor: CSSColor;
 };
 declare type AvatarSize = SizeValue | 'sm';
-interface AvatarProps extends ResponsiveSizeProps<Size$2, AvatarSize>, ResponsiveMarginProps, 
+interface AvatarProps extends ResponsiveSizeProps<Size$4, AvatarSize>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, Omit<React.ComponentPropsWithRef<'span'>, 'color'> {
     /** UI: brand (v3), or default (v2) */
@@ -3238,152 +3250,181 @@ declare const Menu: React.ForwardRefExoticComponent<MenuProps> & {
     Divider: typeof MenuDivider;
 };
 
-declare type SkeletonPalette = {
-    color: CSSColor;
-    gradientColor: CSSColor;
-    gradientHighlightColor: CSSColor;
-};
-interface SkeletonProps extends ResponsiveMarginProps, React.ComponentPropsWithRef<'div'> {
-    /** Element to infer sizing */
-    children?: React.ReactNode;
-    /** Custom colors */
-    palette?: Partial<Record<keyof SkeletonPalette, Color>>;
-    /** Display 'inline-block' */
-    inline?: boolean;
-    /** Root border-radius: 50% */
-    round?: boolean;
-    /** Root border-radius */
-    borderRadius?: string | number;
-    /** Root width */
-    width?: string | number;
-    /** Root height */
-    height?: string | number;
-    /** Value (ms) to control animation speed */
-    animationDuration?: number;
-    /** Delay to animation start (ms) to avoid flicker at fast connection */
-    animationDelay?: number;
-    /** Appearance variant */
-    primary?: boolean;
-    /** Appearance variant */
-    secondary?: boolean;
-    /** Appearance variant */
-    onColored?: boolean;
-    /** Root node type */
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
-}
-
-/**
- *
- * Component accepts all \<div\> attributes.
- *
- * Responsive "margin" props are supported.
- *
- * Exposed "ref" attached to root node.
- *
- * See full [SkeletonProps](https://github.com/foxford/ui/blob/master/src/components/Skeleton/types.ts)
- */
-declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps>;
-
-declare type DialogComponentCommonSize = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
-declare type DialogComponentSize = DialogComponentCommonSize | 'xxl-landscape' | 'xl-landscape' | 'l-landscape';
+declare type Size$1 = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
+declare type Layout$1 = 'vertical' | 'horizontal' | 'vertical-reverse' | 'horizontal-reverse';
 declare type DialogComponentPalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
     shadowColor: CSSColor;
 };
-interface DialogComponentProps extends ResponsiveSizeProps<DialogComponentSize>, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title' | 'draggable'> {
-    /** Текст над заголовком диалога */
-    caption?: React.ReactNode;
-    /** Пропсы для типографики текста над заголовком */
-    captionProps?: Partial<TextProps>;
-    /** Класс для элемента с бекграундом диалога */
+interface DialogComponentBaseProps extends ResponsiveSizeProps<Size$1>, ResponsiveLayoutProps<Layout$1> {
+    /**
+     * Кнопка закрытия.
+     *
+     * @default undefined */
+    closeButton?: React.ReactNode | ((closeButtonProps: IconButtonProps) => React.ReactNode);
+    /**
+     * Текст над заголовком.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @default undefined */
+    caption?: React.ReactNode | ((captionProps: TextProps) => React.ReactNode);
+    /**
+     * Текст заголовка.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @default undefined */
+    title?: React.ReactNode | ((titleProps: TextProps) => React.ReactNode);
+    /**
+     * Текст подзаголовка.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @default undefined */
+    subtitle?: React.ReactNode | ((subtitleProps: TextProps) => React.ReactNode);
+    /**
+     * Контент.
+     *
+     * @default undefined */
+    children?: React.ReactNode;
+    /**
+     * Дополнительные элементы с позицией относительно рута диалога.
+     *
+     * @default undefined */
+    floats?: React.ReactNode;
+    /**
+     * Кастомный блок с медиа.
+     *
+     * Для корректного отображения в горизонтальном лейауте у рута должна быть определена высота.
+     *
+     * @default undefined */
+    media?: React.ReactNode;
+    /**
+     * Кастомный блок с основным контентом.
+     *
+     * @default undefined */
+    body?: React.ReactNode | ((bodyProps: {
+        captionProps: TextProps;
+        titleProps: TextProps;
+        subtitleProps: TextProps;
+    }) => React.ReactNode);
+    /**
+     * Картинка для вертикального шаблона лейаута.
+     *
+     * Ожидаемое соотношение сторон 3:1.
+     *
+     * @default undefined */
+    imgSrcVertical?: string;
+    /**
+     * Картинка для горизонтального шаблона лейаута.
+     *
+     * Ожидаемое соотношение сторон 5:7.
+     *
+     * Для корректного отображения у рута должна быть определена высота.
+     *
+     * @default undefined */
+    imgSrcHorizontal?: string;
+    /**
+     * Индикатор прогресса.
+     *
+     * @default undefined */
+    progressLine?: React.ReactNode | ((progressLineProps: ProgressLineProps) => React.ReactNode);
+    /**
+     * Кастомный футер.
+     *
+     * @default undefined */
+    footer?: React.ReactNode;
+    /**
+     * Включить скролл контента.
+     *
+     * @default false */
+    scrollable?: boolean;
+    /**
+     * Включить эффект фейдинга при скролле контента.
+     *
+     * @default false */
+    scrollFading?: boolean;
+    /**
+     * Класс для элемента с бекграундом диалога.
+     *
+     * @default undefined */
     backgroundClassName?: string;
-    /** Основной контент или функция для рендера основного контента (аргументом получает текущие пропсы размеров) */
-    children?: React.ReactNode | ((sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
     /**
-     * Пропсы для кнопки действия в правом верхнем углу диалога (дефолт иконка close).
-     * Для рендера кнопки нужно передать iconButtonProps.onClick
-     */
-    iconButtonProps?: Partial<IconButtonProps>;
-    /** Функция для рендера контролов диалога (аргументом получает текущие пропсы размеров) */
-    controls?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
-    /** Рендер области для захвата окна для перетаскивания */
+     * Рендер области для захвата окна для перетаскивания.
+     *
+     * @default false */
     draggable?: boolean;
-    /** Диалог находится в состоянии перетаскивания (использование визуальной индикации) */
+    /**
+     * Индикация того, что диалог находится в состоянии перетаскивания.
+     *
+     * @default false */
     dragging?: boolean;
-    /** Пропсы для иконки в области захвата для перетаскивания */
-    draggingIconProps?: Partial<IconProps>;
-    /** Вариант внешнего вида со скошенным верхним сегментом */
+    /**
+     * Внешний вид со скошенным верхним сегментом.
+     *
+     * @default false */
     fancy?: boolean;
-    /** Функция для рендера дополнительных элементов с позицией относительно рута диалога (аргументом получает текущие пропсы размеров) */
-    floats?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
-    /** Рендер картинки справа в горизонтальной ориентации (дефолт слева) */
-    imgLandscapePositionRight?: boolean;
-    /** Рендер картинки снизу в вертикальной ориентации (дефолт сверху) */
-    imgPortraitPositionBottom?: boolean;
-    /**
-     * Пути картинок в зависимости от ориентации окна диалога.
-     */
-    imgSrc?: {
-        portrait?: string;
-        landscape?: string;
-    };
     /**
-     * Cоотношение сторон картинок.
-     * Дефолтное соотношение сторон: 3:1 portrait, 5:7 landscape
-     */
-    imgAspectRatio?: {
-        portrait?: '1:1' | '3:1' | '5:2';
-        landscape?: '1:1' | '4:5' | '5:7';
-    };
-    /** Использование скелетонов вместо реального контента */
+     * Использование скелетонов вместо реального контента.
+     *
+     * @default false */
     loading?: boolean;
-    /** Колбек будет передан в onPointerDown элемента области захвата */
-    onGrab?: React.PointerEventHandler<HTMLElement>;
-    /** Колбек будет передан в onKeyDown элемента с иконкой в области захвата */
-    onNudge?: React.KeyboardEventHandler<HTMLElement>;
-    /** Кастомные цвета  */
+    /**
+     * Кастомные цвета.
+     *
+     * @default undefined */
     palette?: Partial<Record<keyof DialogComponentPalette, Color>>;
-    /** Использование индикатора прогресса */
-    progressLine?: boolean;
-    /** Пропсы для индикатора прогресса */
-    progressLineProps?: Partial<ProgressLineProps>;
-    /** Пропсы для скелетонов */
-    skeletonProps?: Partial<SkeletonProps>;
-    /** Отключить эффект фейдинга при скролле контента */
-    scrollFadingDisabled?: boolean;
-    /** Подзаголовок диалога */
-    subtitle?: React.ReactNode;
-    /** Пропсы для типографики подзаголовка */
-    subtitleProps?: Partial<TextProps>;
-    /** Заголовок диалога */
-    title?: React.ReactNode;
-    /** Пропсы типографики для заголовка */
-    titleProps?: Partial<TextProps>;
-    /** z-index рутового элемента */
+    /**
+     * z-index рутового элемента.
+     *
+     * @default undefined */
     zIndex?: number;
+    /**
+     * Кастомный рутовый блок.
+     *
+     * Использование компонента только как контейнер.
+     *
+     * @default undefined */
+    root?: React.ReactNode | ((rootProps: {
+        captionProps: TextProps;
+        titleProps: TextProps;
+        subtitleProps: TextProps;
+        closeButtonProps: IconButtonProps;
+        progressLineProps: ProgressLineProps;
+        onGrab?: React.PointerEventHandler<HTMLElement>;
+        onNudge?: React.KeyboardEventHandler<HTMLElement>;
+    }) => React.ReactNode);
+    /**
+     * Колбек будет передан в onPointerDown элемента области захвата.
+     *
+     * @default undefined */
+    onGrab?: React.PointerEventHandler<HTMLElement>;
+    /**
+     * Колбек будет передан в onKeyDown элемента с иконкой в области захвата.
+     *
+     * @default undefined */
+    onNudge?: React.KeyboardEventHandler<HTMLElement>;
 }
+declare type DialogComponentProps = DialogComponentBaseProps & Omit<React.ComponentPropsWithRef<'div'>, keyof DialogComponentBaseProps>;
 
-/**
- *
- * Компонент поддерживает все атрибуты \<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'>, 'children' | 'className' | 'title' | 'draggable'> {
+declare type Size = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
+declare type Layout = 'vertical' | 'horizontal' | 'vertical-reverse' | 'horizontal-reverse';
+declare type Position = 'center' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+interface DialogBaseProps extends ResponsiveSizeProps<Size>, ResponsiveLayoutProps<Layout>, ResponsivePositionProps<Position> {
     /**
      * Открыто диалоговое окно.
+     *
+     * @floating
      * @default undefined */
     open: boolean;
     /**
      * Колбек, который будет вызван после открытия.
+     *
+     * @floating
      * @default undefined */
     onAfterOpen?: (refs?: {
         overlayEl?: Element;
@@ -3391,14 +3432,19 @@ interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, Responsi
     }) => void;
     /**
      * Колбек, который будет вызван после закрытия.
+     *
+     * @floating
      * @default undefined */
     onAfterClose?: () => void;
     /**
-     * Колбек, который будет вызван по клику на оверлей или нажатию "Esc".
+     * Колбек, который будет вызван по клику на оверлей или нажатию Esc.
+     *
+     * @floating
      * @default undefined */
     onRequestClose?: (evt: React.MouseEvent | React.KeyboardEvent) => void;
     /**
      * Класс (или классы) для диалогового окна.
+     *
      * @default undefined */
     className?: string | {
         base: string;
@@ -3407,38 +3453,52 @@ interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, Responsi
     };
     /**
      * Задержка перед фактическим закрытием (мс).
+     *
+     * @floating
      * @default 0 */
     closeTimeoutMS?: number;
     /**
      * Класс для элемента портала диалога.
+     *
      * @default "ReactModalPortal" */
     portalClassName?: string;
     /**
      * Класс для body при открытом диалоговом окне.
+     *
      * @default "ReactModal__Body--open" */
     bodyOpenClassName?: string;
     /**
      * Класс для html при открытом диалоговом окне.
+     *
      * @default null */
     htmlOpenClassName?: string;
     /**
-     * Вызов `onRequestClose` при клике на оверлей.
+     * Вызов onRequestClose при клике на оверлей.
+     *
+     * @floating
      * @default true */
     shouldCloseOnOverlayClick?: boolean;
     /**
-     * Вызов `onRequestClose` при нажатии "Esc".
+     * Вызов onRequestClose при нажатии Esc.
+     *
+     * @floating
      * @default true */
     shouldCloseOnEsc?: boolean;
     /**
      * Возврат фокуса на элемент, который был в фокусе до открытия диалога.
+     *
+     * @floating
      * @default true */
     shouldReturnFocusAfterClose?: boolean;
     /**
      * После закрытия не скроллить до элемента, который имел фокус до открытия.
+     *
+     * @floating
      * @default false */
     preventScrollAfterClose?: boolean;
     /**
      * Класс (или классы) для оверлея.
+     *
      * @default undefined */
     overlayClassName?: string | {
         base: string;
@@ -3448,105 +3508,159 @@ interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, Responsi
     /**
      * Колбек, который должен вернуть элемент для рендера диалога.
      *
-     * По дефолту будет использован `document.body`.
+     * По дефолту будет использован document.body.
+     *
+     * @floating
      * @default undefined */
     parentSelector?: () => HTMLElement;
     /**
      * Колбек, который получает аргументом элемент оверлея.
+     *
      * @default undefined */
     overlayRef?: (ref: HTMLElement | null) => void;
     /**
      * Колбек, который получает аргументом элемент рута диалогового окна.
+     *
      * @default undefined */
     contentRef?: (ref: HTMLElement | null) => void;
     /**
      * Класс для элемента с бекграундом диалога.
+     *
      * @default undefined */
     backgroundClassName?: string;
+    /**
+     * Кнопка закрытия.
+     *
+     * @slot
+     * @default undefined */
+    closeButton?: React.ReactNode | ((closeButtonProps: IconButtonProps) => React.ReactNode);
     /**
      * Текст над заголовком диалога.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @slot
      * @default undefined */
-    caption?: React.ReactNode;
+    caption?: React.ReactNode | ((captionProps: TextProps) => React.ReactNode);
     /**
-     * Пропсы для типографики текста над заголовком.
-     * @default {} */
-    captionProps?: Partial<TextProps>;
+     * Текст заголовка.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @slot
+     * @default undefined */
+    title?: React.ReactNode | ((titleProps: TextProps) => React.ReactNode);
     /**
-     * Основной контент диалогового окна.
+     * Текст подзаголовка.
      *
-     * Если используется функция, то в аргументе будут переданы пропсы размеров.
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @slot
      * @default undefined */
-    children?: React.ReactNode | ((sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
+    subtitle?: React.ReactNode | ((subtitleProps: TextProps) => React.ReactNode);
     /**
-     * Пропсы для кнопки действия в правом верхнем углу диалога.
+     * Контент.
      *
-     * Для рендера кнопки нужно передать `iconButtonProps.onClick`.
-     * @default {} */
-    iconButtonProps?: Partial<IconButtonProps>;
+     * @slot
+     * @default undefined */
+    children?: React.ReactNode;
     /**
-     * Функция для рендера контролов диалога.
+     * Дополнительные элементы с позицией относительно рута диалога.
      *
-     * В аргументе будут переданы пропсы размеров.
+     * @slot
      * @default undefined */
-    controls?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
+    floats?: React.ReactNode;
     /**
-     * Диалоговое окно можно перетаскивать.
+     * Кастомный блок с медиа.
      *
-     * В этом случае оверлей не используется и диалог рендерит область захвата.
+     * Для корректного отображения в горизонтальном лейауте у рута должна быть определена высота.
+     *
+     * @slot
      * @default undefined */
-    draggable?: boolean;
+    media?: React.ReactNode;
     /**
-     * Пропсы для иконки в области захвата для перетаскивания.
-     * @default {} */
-    draggingIconProps?: Partial<IconProps>;
+     * Кастомный блок с основным контентом.
+     *
+     * @slot
+     * @default undefined */
+    body?: React.ReactNode;
     /**
-     * Вариант внешнего вида со скошенным верхним сегментом.
+     * Картинка для вертикального шаблона лейаута.
+     *
+     * Ожидаемое соотношение сторон 3:1.
+     *
+     * @general
      * @default undefined */
-    fancy?: boolean;
+    imgSrcVertical?: string;
     /**
-     * Функция для рендера дополнительных элементов с позицией относительно рута диалога.
+     * Картинка для горизонтального шаблона лейаута.
+     *
+     * Ожидаемое соотношение сторон 5:7.
      *
-     * Aргументом получает текущие пропсы размеров.
+     * Для корректного отображения у рута должна быть определена высота.
+     *
+     * @general
      * @default undefined */
-    floats?: (sizeProps: Pick<ResponsiveSizeProps<DialogComponentCommonSize>, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode;
+    imgSrcHorizontal?: string;
     /**
-     * Рендер картинки справа в горизонтальной ориентации (дефолт слева).
+     * Индикатор прогресса.
+     *
+     * @slot
      * @default undefined */
-    imgLandscapePositionRight?: boolean;
+    progressLine?: React.ReactNode | ((progressLineProps: ProgressLineProps) => React.ReactNode);
     /**
-     * Рендер картинки снизу в вертикальной ориентации (дефолт сверху).
+     * Кастомный футер.
+     *
+     * @slot
      * @default undefined */
-    imgPortraitPositionBottom?: boolean;
+    footer?: React.ReactNode;
     /**
-     * Пути картинок в зависимости от ориентации окна диалога.
-     * @default {} */
-    imgSrc?: {
-        portrait?: string;
-        landscape?: string;
-    };
+     * Включить скролл контента.
+     *
+     * @general
+     * @default false */
+    scrollable?: boolean;
     /**
-     * Cоотношение сторон картинок.
+     * Включить эффект фейдинга при скролле контента.
      *
-     * Дефолтное соотношение сторон: 3:1 portrait, 5:7 landscape.
-     * @default {} */
-    imgAspectRatio?: {
-        portrait?: '1:1' | '3:1' | '5:2';
-        landscape?: '1:1' | '4:5' | '5:7';
-    };
+     * @default false */
+    scrollFading?: boolean;
+    /**
+     * Диалоговое окно можно перетаскивать.
+     *
+     * В этом случае оверлей не используется и диалог рендерит область захвата.
+     *
+     * @floating
+     * @default undefined */
+    draggable?: boolean;
+    /**
+     * Внешний вид со скошенным верхним сегментом.
+     *
+     * @general
+     * @default undefined */
+    fancy?: boolean;
     /**
      * Использование скелетонов вместо реального контента.
+     *
+     * @general
      * @default undefined */
     loading?: boolean;
     /**
      * Применение стилей размытия для оверлея.
+     *
+     * @floating
      * @default undefined */
     overlayBlur?: boolean;
     /**
      * Оверлей не используется.
+     *
+     * @floating
      * @default undefined */
     overlayDisabled?: boolean;
     /**
      * Кастомные цвета.
+     *
+     * @general
      * @default {} */
     palette?: {
         color?: Color;
@@ -3555,55 +3669,160 @@ interface DialogProps extends ResponsiveSizeProps<DialogComponentSize>, Responsi
         overlayBackgroundColor?: Color;
     };
     /**
-     * Использование индикатора прогресса.
+     * z-index оверлея или рутового элемента, если оверлей не используется.
+     *
      * @default undefined */
-    progressLine?: boolean;
+    zIndex?: number;
     /**
-     * Пропсы для индикатора прогресса.
-     * @default {} */
-    progressLineProps?: Partial<ProgressLineProps>;
+     * Кастомный рутовый блок.
+     *
+     * Использование компонента только как контейнера.
+     *
+     * @slot
+     * @default undefined */
+    root?: React.ReactNode | ((rootProps: {
+        captionProps: TextProps;
+        titleProps: TextProps;
+        subtitleProps: TextProps;
+        closeButtonProps: IconButtonProps;
+        progressLineProps: ProgressLineProps;
+        onGrab?: React.PointerEventHandler<HTMLElement>;
+        onNudge?: React.KeyboardEventHandler<HTMLElement>;
+    }) => React.ReactNode);
     /**
-     * Отключить эффект фейдинга при скролле контента.
+     * Размер.
+     *
+     * Использование кортежей включает применение размеров в зависимости от ширины вьюпорта.
+     *
+     * @general
+     * @default 's' */
+    size?: Size | [DESKTOP: Size, TABLET: Size, MOBILE: Size] | [XL: Size, L: Size, M: Size, S: Size, XS: Size, XXS: Size];
+    /**
+     * Размер для XXS брейкпоинта.
+     *
      * @default undefined */
-    scrollFadingDisabled?: boolean;
+    sizeXXS?: Size;
     /**
-     * Пропсы для скелетонов.
-     * @default {} */
-    skeletonProps?: Partial<SkeletonProps>;
+     * Размер для XS брейкпоинта.
+     *
+     * @default undefined */
+    sizeXS?: Size;
     /**
-     * Подзаголовок диалога.
+     * Размер для S брейкпоинта.
+     *
      * @default undefined */
-    subtitle?: React.ReactNode;
+    sizeS?: Size;
     /**
-     * Пропсы для типографики подзаголовка.
-     * @default {} */
-    subtitleProps?: Partial<TextProps>;
+     * Размер для M брейкпоинта.
+     *
+     * @default undefined */
+    sizeM?: Size;
     /**
-     * Заголовок диалога.
+     * Размер для L брейкпоинта.
+     *
      * @default undefined */
-    title?: React.ReactNode;
+    sizeL?: Size;
     /**
-     * Пропсы типографики для заголовка.
-     * @default {} */
-    titleProps?: Partial<TextProps>;
+     * Размер для XL брейкпоинта.
+     *
+     * @default undefined */
+    sizeXL?: Size;
     /**
-     * z-index оверлея или рутового элемента, если оверлей не используется.
+     * Модификация размеров.
+     *
+     * @general
      * @default undefined */
-    zIndex?: number;
+    sizes?: Partial<Record<Size, React.CSSProperties>>;
+    /**
+     * Вариант шаблона лейаута.
+     *
+     * Использование кортежей включает применение шаблонов в зависимости от ширины вьюпорта.
+     *
+     * @general
+     * @default 'vertical' */
+    layout?: Layout | [DESKTOP: Layout, TABLET: Layout, MOBILE: Layout] | [XL: Layout, L: Layout, M: Layout, S: Layout, XS: Layout, XXS: Layout];
+    /**
+     * Лейаут для XXS брейкпоинта.
+     *
+     * @default undefined */
+    layoutXXS?: Layout;
+    /**
+     * Лейаут для XS брейкпоинта.
+     *
+     * @default undefined */
+    layoutXS?: Layout;
+    /**
+     * Лейаут для S брейкпоинта.
+     *
+     * @default undefined */
+    layoutS?: Layout;
+    /**
+     * Лейаут для M брейкпоинта.
+     *
+     * @default undefined */
+    layoutM?: Layout;
+    /**
+     * Лейаут для L брейкпоинта.
+     *
+     * @default undefined */
+    layoutL?: Layout;
+    /**
+     * Лейаут для XL брейкпоинта.
+     *
+     * @default undefined */
+    layoutXL?: Layout;
+    /**
+     * Позиция диалога.
+     *
+     * Использование кортежей включает применение позиций в зависимости от ширины вьюпорта.
+     *
+     * @floating
+     * @default 'center' */
+    position?: Position | [DESKTOP: Position, TABLET: Position, MOBILE: Position] | [XL: Position, L: Position, M: Position, S: Position, XS: Position, XXS: Position];
+    /**
+     * Позиция для XXS брейкпоинта.
+     *
+     * @default undefined */
+    positionXXS?: Position;
+    /**
+     * Позиция для XS брейкпоинта.
+     *
+     * @default undefined */
+    positionXS?: Position;
+    /**
+     * Позиция для S брейкпоинта.
+     *
+     * @default undefined */
+    positionS?: Position;
+    /**
+     * Позиция для M брейкпоинта.
+     *
+     * @default undefined */
+    positionM?: Position;
+    /**
+     * Позиция для L брейкпоинта.
+     *
+     * @default undefined */
+    positionL?: Position;
+    /**
+     * Позиция для XL брейкпоинта.
+     *
+     * @default undefined */
+    positionXL?: Position;
+    /**
+     * Модификация позиций.
+     *
+     * @floating
+     * @default undefined */
+    positions?: Partial<Record<Position, React.CSSProperties>>;
 }
+declare type DialogProps = DialogBaseProps & Omit<React.ComponentPropsWithRef<'div'>, keyof DialogBaseProps>;
 
 /**
  *
- * Компонент поддерживает все атрибуты \<div\> элемента.
- *
- * Поддерживаются пропсы определения размеров и позиции в зависимости от ширины вьюпорта.
- *
- * Компонент основан на ["react-modal"](https://www.npmjs.com/package/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).
+ * Компонент для отображения контента поверх основного интерфейса.
  *
+ * Поддерживаются все нативные атрибуты \<div\> элемента.
  */
 declare const Dialog: React.ForwardRefExoticComponent<DialogProps> & {
     Component: typeof DialogComponent;
@@ -3664,6 +3883,52 @@ interface NotificationProps extends ResponsiveSizeProps<NotificationSize>, Respo
  */
 declare const Notification: React.ForwardRefExoticComponent<NotificationProps>;
 
+declare type SkeletonPalette = {
+    color: CSSColor;
+    gradientColor: CSSColor;
+    gradientHighlightColor: CSSColor;
+};
+interface SkeletonProps extends ResponsiveMarginProps, React.ComponentPropsWithRef<'div'> {
+    /** Element to infer sizing */
+    children?: React.ReactNode;
+    /** Custom colors */
+    palette?: Partial<Record<keyof SkeletonPalette, Color>>;
+    /** Display 'inline-block' */
+    inline?: boolean;
+    /** Root border-radius: 50% */
+    round?: boolean;
+    /** Root border-radius */
+    borderRadius?: string | number;
+    /** Root width */
+    width?: string | number;
+    /** Root height */
+    height?: string | number;
+    /** Value (ms) to control animation speed */
+    animationDuration?: number;
+    /** Delay to animation start (ms) to avoid flicker at fast connection */
+    animationDelay?: number;
+    /** Appearance variant */
+    primary?: boolean;
+    /** Appearance variant */
+    secondary?: boolean;
+    /** Appearance variant */
+    onColored?: boolean;
+    /** Root node type */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+}
+
+/**
+ *
+ * Component accepts all \<div\> attributes.
+ *
+ * Responsive "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [SkeletonProps](https://github.com/foxford/ui/blob/master/src/components/Skeleton/types.ts)
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps>;
+
 declare type AccordionSize = 'l' | 'm' | 's' | 'xs';
 declare type AccordionPalette = {
     color: CSSColor;
@@ -3921,7 +4186,7 @@ declare const useScrollMonitor: ({ target, scrollThrottleMS, scrollEndDebounceMS
 
 declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
 
-declare function buildMediaQuery(value: number | Size$2 | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string, sizes?: Record<Size$2, number>): ReturnType<typeof css>;
+declare function buildMediaQuery(value: number | Size$4 | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string, sizes?: Record<Size$4, number>): ReturnType<typeof css>;
 declare const desktopFirst: (a: string, b: string) => number;
 declare const mobileFirst: (a: string, b: string) => number;
 
@@ -6044,4 +6309,4 @@ declare type AspectRatioProps = AspectRatioBaseProps & Omit<React.ComponentProps
  */
 declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps>;
 
-export { Accordion, type AccordionProps, ActionBtn, type ActionBtnProps, Alert, type AlertProps, Amount, type AmountProps, Anchor, Arrow, ArrowBadge, type ArrowBadgeProps, type ArrowProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BaseProps, type Breakpoint, Button, type ButtonProps, COUNTRY_DATA, type CSSBorderStyle, type CSSColor, type CSSFontWeight, type CSSGlobalValue, type CSSUnit, type CSSVerticalAlign, CURRENCY_MAP, Checkbox, type CheckboxProps, Chip, type ChipProps, type Color, ColorNames, type ColorPaletteKey, Container, type ContainerProps, ContextMenu, type ContextMenuMultiLevelProps, type ContextMenuProps, CurrencyCodes, DEFAULT_MASK, Dialog, type DialogComponentProps, type DialogProps, Dropdown, type DropdownProps, FormLabel, type FormLabelProps, type HEX, INITIAL_MASK, Icon, IconButton, type IconButtonProps, type IconName, type IconProps, Indicator, type IndicatorProps, Input, type InputCheckboxProps, type InputMaskOptions, type InputMaskState, type InputPhoneProps, type InputProps, type InputRadioProps, type KeysOfUnion, ListItem, type ListItemProps, Menu, type MenuComponentProps, type MenuContainerProps, type MenuDividerProps, type MenuListProps, type MenuProps, Modal, type ModalProps, Notification, type NotificationProps, type Nullable, Paper, type PaperProps, type PlaygroundPropControl, type PlaygroundToolbar, Popover, type PopoverComponentProps, type PopoverProps, Progress, ProgressCircle, type ProgressCircleProps, ProgressLine, type ProgressLineProps, type ProgressProps, type ProgressSegmentedProps, type RGB, type RGBA, Radio, type RadioProps, type ResponsiveLayoutInterpolationProps, type ResponsiveLayoutProps, type ResponsivePositionProps, type ResponsivePropKey, type ResponsiveProps, type ResponsiveSizeInterpolationProps, type ResponsiveSizeProps, withThemeScrollable as Scrollable, type ScrollableProps, Section, type SectionProps, Select, type SelectProps, Separator, type SeparatorProps, type Size$2 as Size, type SizeValue, Skeleton, type SkeletonProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Switcher, type SwitcherProps, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextEllipseProps, type TextHeadingProps, type TextProps, Textarea, type TextareaProps, type Theme, type ThemeMode, type ThemeName, type ThemePreset, ThemeProvider, Tooltip, type TooltipComponentProps, type TooltipProps, 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, useClickOutside, useScrollMonitor, vAlign };
+export { Accordion, type AccordionProps, ActionBtn, type ActionBtnProps, Alert, type AlertProps, Amount, type AmountProps, Anchor, Arrow, ArrowBadge, type ArrowBadgeProps, type ArrowProps, AspectRatio, type AspectRatioProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BaseProps, type Breakpoint, Button, type ButtonProps, COUNTRY_DATA, type CSSBorderStyle, type CSSColor, type CSSFontWeight, type CSSGlobalValue, type CSSUnit, type CSSVerticalAlign, CURRENCY_MAP, Checkbox, type CheckboxProps, Chip, type ChipProps, type Color, ColorNames, type ColorPaletteKey, Container, type ContainerProps, ContextMenu, type ContextMenuMultiLevelProps, type ContextMenuProps, CurrencyCodes, DEFAULT_MASK, Dialog, type DialogComponentProps, type DialogProps, Dropdown, type DropdownProps, FormLabel, type FormLabelProps, type HEX, INITIAL_MASK, Icon, IconButton, type IconButtonProps, type IconName, type IconProps, Indicator, type IndicatorProps, Input, type InputCheckboxProps, type InputMaskOptions, type InputMaskState, type InputPhoneProps, type InputProps, type InputRadioProps, type KeysOfUnion, ListItem, type ListItemProps, Menu, type MenuComponentProps, type MenuContainerProps, type MenuDividerProps, type MenuListProps, type MenuProps, Modal, type ModalProps, Notification, type NotificationProps, type Nullable, Paper, type PaperProps, type PlaygroundPropControl, type PlaygroundToolbar, Popover, type PopoverComponentProps, type PopoverProps, Progress, ProgressCircle, type ProgressCircleProps, ProgressLine, type ProgressLineProps, type ProgressProps, type ProgressSegmentedProps, type RGB, type RGBA, Radio, type RadioProps, type ResponsiveLayoutInterpolationProps, type ResponsiveLayoutProps, type ResponsivePositionProps, type ResponsivePropKey, type ResponsiveProps, type ResponsiveSizeInterpolationProps, type ResponsiveSizeProps, withThemeScrollable as Scrollable, type ScrollableProps, Section, type SectionProps, Select, type SelectProps, Separator, type SeparatorProps, type Size$4 as Size, type SizeValue, Skeleton, type SkeletonProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Switcher, type SwitcherProps, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextEllipseProps, type TextHeadingProps, type TextProps, Textarea, type TextareaProps, type Theme, type ThemeMode, type ThemeName, type ThemePreset, ThemeProvider, Tooltip, type TooltipComponentProps, type TooltipProps, 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, useClickOutside, useScrollMonitor, vAlign };