@foxford/ui 2.74.0 → 2.75.0-beta-9c898b3-20250515

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$4 = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
-declare type SizeValue = Size$4 | CSSGlobalValue | number;
+declare type Size$6 = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
+declare type SizeValue = Size$6 | 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$4 | 'auto' | 'initial' | 'inherit' | boolean;
+declare type PossibleValues = number | Size$6 | '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$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;
+declare type ResponsiveProperty<V = number | Size$6> = 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$6, 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$4, number>;
+    predefinedSizes?: Record<Size$6, number>;
 }
 /**
  * Миксин для генерации media запросов
@@ -1111,7 +1111,7 @@ interface ExpandButtonProps extends React.ComponentPropsWithoutRef<'button'> {
     /** Кастомные цвета */
     palette?: Partial<Record<keyof ExpandButtonPalette, Color>>;
 }
-interface TextProps extends ResponsiveSizeProps<Size$4, SizeValue>, ResponsiveMarginProps, 
+interface TextProps extends ResponsiveSizeProps<Size$6, 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$4, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
+interface IconProps extends ResponsiveSizeProps<Size$6, 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$4, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'a'>, 'color' | 'children'>, 
+interface AnchorProps extends ResponsiveSizeProps<Size$6, 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$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'>, 
+interface ButtonProps extends ResponsiveSizeProps<Size$6, 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$4, SizeValue>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+interface ArrowProps extends ResponsiveSizeProps<Size$6, 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$4, SizeValue>, ResponsiveMarginProps, 
+interface ArrowBadgeProps extends ResponsiveSizeProps<Size$6, 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$4, SizeValue>, ResponsiveMarginProps, 
+interface TabProps extends ResponsiveSizeProps<Size$6, 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$4, SizeValue>, ResponsiveMarginProps, 
+interface BadgeProps extends ResponsiveSizeProps<Size$6, 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$3 = 'xl' | 'l' | 'm' | 's' | 'xs';
+declare type Size$5 = '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$3>, ResponsiveLayoutProps<Layout$3> {
+interface PopoverComponentBaseProps extends ResponsiveSizeProps<Size$5>, ResponsiveLayoutProps<Layout$3> {
     /**
      * Кастомные цвета.
      *
@@ -2436,9 +2436,9 @@ declare type PopoverComponentProps = PopoverComponentBaseProps & Omit<React.Comp
 
 declare const PopoverComponent: React.ForwardRefExoticComponent<PopoverComponentProps>;
 
-declare type Size$2 = 's' | 'xl' | 'l' | 'm' | 'xs';
+declare type Size$4 = 's' | 'xl' | 'l' | 'm' | 'xs';
 declare type Layout$2 = 'vertical' | 'horizontal';
-interface PopoverBaseProps extends ResponsiveSizeProps<Size$2>, ResponsiveLayoutProps<Layout$2> {
+interface PopoverBaseProps extends ResponsiveSizeProps<Size$4>, ResponsiveLayoutProps<Layout$2> {
     /**
      * Кастомные цвета.
      *
@@ -2654,43 +2654,43 @@ interface PopoverBaseProps extends ResponsiveSizeProps<Size$2>, ResponsiveLayout
      *
      * @general
      * @default 's' */
-    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];
+    size?: Size$4 | [DESKTOP: Size$4, TABLET: Size$4, MOBILE: Size$4] | [XL: Size$4, L: Size$4, M: Size$4, S: Size$4, XS: Size$4, XXS: Size$4];
     /**
      * Размер для XXS брейкпоинта.
      *
      * @default undefined */
-    sizeXXS?: Size$2;
+    sizeXXS?: Size$4;
     /**
      * Размер для XS брейкпоинта.
      *
      * @default undefined */
-    sizeXS?: Size$2;
+    sizeXS?: Size$4;
     /**
      * Размер для S брейкпоинта.
      *
      * @default undefined */
-    sizeS?: Size$2;
+    sizeS?: Size$4;
     /**
      * Размер для M брейкпоинта.
      *
      * @default undefined */
-    sizeM?: Size$2;
+    sizeM?: Size$4;
     /**
      * Размер для L брейкпоинта.
      *
      * @default undefined */
-    sizeL?: Size$2;
+    sizeL?: Size$4;
     /**
      * Размер для XL брейкпоинта.
      *
      * @default undefined */
-    sizeXL?: Size$2;
+    sizeXL?: Size$4;
     /**
      * Модификация размеров.
      *
      * @general
      * @default undefined */
-    sizes?: Partial<Record<Size$2, React.CSSProperties>>;
+    sizes?: Partial<Record<Size$4, React.CSSProperties>>;
     /**
      * Вариант шаблона лейаута.
      *
@@ -2816,7 +2816,7 @@ declare type ListItemPalette = {
     backgroundColorHover: CSSColor;
     mediaPlaceholderColor: CSSColor;
 };
-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'> {
+interface ListItemProps extends ResponsiveSizeProps<Size$6, 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 */
@@ -2894,7 +2894,7 @@ declare type IndicatorPalette = {
     backgroundColor: CSSColor;
     shadowColor: CSSColor;
 };
-interface IndicatorProps extends ResponsiveSizeProps<Size$4, SizeValue>, ResponsiveMarginProps, React.ComponentPropsWithRef<'span'> {
+interface IndicatorProps extends ResponsiveSizeProps<Size$6, SizeValue>, ResponsiveMarginProps, React.ComponentPropsWithRef<'span'> {
     /** Custom colors */
     palette?: Partial<Record<keyof IndicatorPalette, Color>>;
     /** Text content */
@@ -2939,7 +2939,7 @@ declare type AvatarPalette = {
     shadowColor: CSSColor;
 };
 declare type AvatarSize = SizeValue | 'sm';
-interface AvatarProps extends ResponsiveSizeProps<Size$4, AvatarSize>, ResponsiveMarginProps, 
+interface AvatarProps extends ResponsiveSizeProps<Size$6, AvatarSize>, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, Omit<React.ComponentPropsWithRef<'span'>, 'color'> {
     /** UI: brand (v3), or default (v2) */
@@ -3250,14 +3250,14 @@ declare const Menu: React.ForwardRefExoticComponent<MenuProps> & {
     Divider: typeof MenuDivider;
 };
 
-declare type Size$1 = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
+declare type Size$3 = '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 DialogComponentBaseProps extends ResponsiveSizeProps<Size$1>, ResponsiveLayoutProps<Layout$1> {
+interface DialogComponentBaseProps extends ResponsiveSizeProps<Size$3>, ResponsiveLayoutProps<Layout$1> {
     /**
      * Кнопка закрытия.
      *
@@ -3411,10 +3411,10 @@ declare type DialogComponentProps = DialogComponentBaseProps & Omit<React.Compon
 
 declare const DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps>;
 
-declare type Size = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
+declare type Size$2 = '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> {
+interface DialogBaseProps extends ResponsiveSizeProps<Size$2>, ResponsiveLayoutProps<Layout>, ResponsivePositionProps<Position> {
     /**
      * Открыто диалоговое окно.
      *
@@ -3696,43 +3696,43 @@ interface DialogBaseProps extends ResponsiveSizeProps<Size>, ResponsiveLayoutPro
      *
      * @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>>;
     /**
      * Вариант шаблона лейаута.
      *
@@ -3883,112 +3883,451 @@ 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 */
+declare type Size$1 = 'l' | 'm' | 's' | 'xs';
+declare type Margin$1 = number | string;
+interface AccordionItemBaseProps extends ResponsiveSizeProps<Size$1>, ResponsiveMarginProps {
+    /**
+     * Кастомный блок хедера.
+     *
+     * @slot
+     * @default undefined */
+    header?: React.ReactNode | ((headerProps: {
+        titleProps: TextProps;
+        subtitleProps: TextProps;
+        iconProps: IconProps;
+    }) => React.ReactNode);
+    /**
+     * Дополнительные элементы в левой части хедера.
+     *
+     * @slot
+     * @default undefined */
+    addon?: React.ReactNode;
+    /**
+     * Основной контент хедера.
+     *
+     * @slot
+     * @default undefined */
+    content?: React.ReactNode | ((contentProps: {
+        titleProps: TextProps;
+        subtitleProps: TextProps;
+    }) => React.ReactNode);
+    /**
+     * Заголовок в хедере.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @slot
+     * @default undefined */
+    title?: React.ReactNode | ((titleProps: TextProps) => React.ReactNode);
+    /**
+     * Подзаголовок в хедере.
+     *
+     * Если передана строка или число используется встроенная типографика.
+     *
+     * @slot
+     * @default undefined */
+    subtitle?: React.ReactNode | ((subtitleProps: TextProps) => React.ReactNode);
+    /**
+     * Иконка-индикатор состояния динамической панели.
+     *
+     * По дефолту используется иконка chevronDown.
+     *
+     * @slot
+     * @default undefined */
+    icon?: React.ReactNode | ((iconProps: IconProps) => React.ReactNode);
+    /**
+     * Кастомный блок динамической панели.
+     *
+     * @slot
+     * @default undefined */
+    panel?: React.ReactNode;
+    /**
+     * Контент для динамической панели.
+     *
+     * @slot
+     * @default undefined */
     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 */
+    /**
+     * Кастомные цвета.
+     *
+     * @general
+     * @default {} */
+    palette?: {
+        headerColor?: Color;
+        headerColorExpanded?: Color;
+        headerColorDisabled?: Color;
+        headerBackgroundColor?: Color;
+        headerBackgroundColorExpanded?: Color;
+        headerBackgroundColorDisabled?: Color;
+        backgroundColor?: Color;
+        backgroundColorExpanded?: Color;
+        backgroundColorDisabled?: Color;
+    };
+    /**
+     * Использование в хедере скелетонов вместо контента.
+     *
+     * @general
+     * @default false */
+    loading?: boolean;
+    /**
+     * Интерактивность отключена.
+     *
+     * @general
+     * @default false */
+    disabled?: boolean;
+    /**
+     * Уровень заголовка в хедере.
+     *
+     * @general
+     * @default 'h3' */
+    headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Вариант внешнего вида без горизонтальных паддингов.
+     *
+     * @general
+     * @default false */
+    embedded?: boolean;
+    /**
+     * Раскрыть динамическую панель в начальном состоянии.
+     *
+     * @general
+     * @default false */
+    defaultExpanded?: boolean;
+    /**
+     * Текущее состояние динамической панели.
+     *
+     * Использование пропа включает контролируемый режим.
+     *
+     * @general
+     * @default undefined */
+    expanded?: boolean;
+    /**
+     * Идентификатор.
+     *
+     * Требуется для корректной работы, если компонент используется вместе с Accordion.
+     *
+     * @general
+     * @default undefined */
+    id?: string;
+    /**
+     * Скругление краев (px).
+     *
+     * @general
+     * @default 0 */
+    borderRadius?: number;
+    /**
+     * Вариант цветовой схемы.
+     *
+     * @general
+     * @default false */
     primary?: boolean;
-    /** Appearance variant */
+    /**
+     * Вариант цветовой схемы.
+     *
+     * @general
+     * @default false */
     secondary?: boolean;
-    /** Appearance variant */
-    onColored?: boolean;
-    /** Root node type */
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+    /**
+     * Колбек будет вызван при изменении состояния динамической панели.
+     *
+     * @general
+     * @default undefined */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Размер.
+     *
+     * Использование кортежей включает применение размеров в зависимости от ширины вьюпорта.
+     *
+     * @general
+     * @default 'm' */
+    size?: Size$1 | [DESKTOP: Size$1, TABLET: Size$1, MOBILE: Size$1] | [XL: Size$1, L: Size$1, M: Size$1, S: Size$1, XS: Size$1, XXS: Size$1];
+    /**
+     * Размер для XXS брейкпоинта.
+     *
+     * @default undefined */
+    sizeXXS?: Size$1;
+    /**
+     * Размер для XS брейкпоинта.
+     *
+     * @default undefined */
+    sizeXS?: Size$1;
+    /**
+     * Размер для S брейкпоинта.
+     *
+     * @default undefined */
+    sizeS?: Size$1;
+    /**
+     * Размер для M брейкпоинта.
+     *
+     * @default undefined */
+    sizeM?: Size$1;
+    /**
+     * Размер для L брейкпоинта.
+     *
+     * @default undefined */
+    sizeL?: Size$1;
+    /**
+     * Размер для XL брейкпоинта.
+     *
+     * @default undefined */
+    sizeXL?: Size$1;
+    /**
+     * Модификация размеров.
+     *
+     * @general
+     * @default undefined */
+    sizes?: Partial<Record<Size$1, React.CSSProperties>>;
+    /**
+     * Внешние отступы.
+     *
+     * Использование кортежей включает применение отступов в зависимости от ширины вьюпорта.
+     *
+     * @general
+     * @default undefined */
+    margin?: Margin$1 | [DESKTOP: Margin$1, TABLET: Margin$1, MOBILE: Margin$1] | [XL: Margin$1, L: Margin$1, M: Margin$1, S: Margin$1, XS: Margin$1, XXS: Margin$1];
+    /**
+     * Отступ для XXS брейкпоинта.
+     *
+     * @default undefined */
+    marginXXS?: Margin$1;
+    /**
+     * Отступ для XS брейкпоинта.
+     *
+     * @default undefined */
+    marginXS?: Margin$1;
+    /**
+     * Отступ для S брейкпоинта.
+     *
+     * @default undefined */
+    marginS?: Margin$1;
+    /**
+     * Отступ для M брейкпоинта.
+     *
+     * @default undefined */
+    marginM?: Margin$1;
+    /**
+     * Отступ для L брейкпоинта.
+     *
+     * @default undefined */
+    marginL?: Margin$1;
+    /**
+     * Отступ для XL брейкпоинта.
+     *
+     * @default undefined */
+    marginXL?: Margin$1;
 }
+declare type AccordionItemProps = AccordionItemBaseProps & Omit<React.ComponentPropsWithRef<'section'>, keyof AccordionItemBaseProps>;
 
 /**
  *
- * Component accepts all \<div\> attributes.
+ * Компонент для создания сворачиваемой секции контента.
  *
- * Responsive "margin" props are supported.
+ * Поддерживается "ref" и все нативные атрибуты \<section\> элемента.
  *
- * Exposed "ref" attached to root node.
+ * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
  *
- * See full [SkeletonProps](https://github.com/foxford/ui/blob/master/src/components/Skeleton/types.ts)
+ * @visibleName Accordion.Item
  */
-declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps>;
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps>;
 
-declare type AccordionSize = 'l' | 'm' | 's' | 'xs';
-declare type AccordionPalette = {
-    color: CSSColor;
-    colorHover: CSSColor;
-    backgroundColor: CSSColor;
-    borderBottomColor: CSSColor;
-};
-interface AccordionProps extends ResponsiveSizeProps<AccordionSize>, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'section'>, 'title'> {
-    /** Рендер кастомных компонентов в хедере.
-     *  Если передается React элемент, то в его пропсы будут добавлены текущие пропсы размеров аккордеона.
-     *  Если передается функция, то пропсы размеров будут переданы аргументом */
-    addon?: JSX.Element | ((props: Pick<AccordionProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL'>) => React.ReactNode);
-    /** Контент для динамической панели */
-    children: React.ReactNode;
-    /** Раскрыть динамическую панель в начальном состоянии */
-    defaultExpanded?: boolean;
-    /** Отключение интерактивности */
-    disabled?: boolean;
-    /** Текущее состояние динамической панели.
-     *  Использование пропа включает контролируемый режим */
-    expanded?: boolean;
-    /** Иконка слева */
-    icon?: JSX.Element | IconName;
-    /** Пропсы для иконки слева */
-    iconProps?: IconProps;
-    /** Путь для картинки слева.
-     *  Ожидаемое соотношение сторон: 1:1 */
-    imgSrc?: string;
-    /** Уровень заголовка в хедере (дефолт h3) */
-    headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    /** Использование в хедере скелетонов вместо реального контента */
+declare type Size = 'l' | 'm' | 's' | 'xs';
+declare type Margin = number | string;
+interface AccordionBaseProps extends ResponsiveSizeProps<Size>, ResponsiveMarginProps {
+    /**
+     * Одновременно раскрыты могут быть несколько динамических панелей.
+     *
+     * @general
+     * @default false */
+    multiple?: boolean;
+    /**
+     * Динамическая панель может быть свернута после раскрытия.
+     *
+     * @general
+     * @default false */
+    collapsible?: boolean;
+    /**
+     * Идентификаторы раскрытых динамических панелей в начальном состоянии.
+     *
+     * Должны соответствовать идентификаторам айтемов аккордеона.
+     *
+     * @general
+     * @default undefined */
+    defaultExpanded?: string[];
+    /**
+     * Идентификаторы раскрытых динамических панелей.
+     *
+     * Должны соответствовать идентификаторам айтемов аккордеона.
+     *
+     * Использование пропа включает контролируемый режим.
+     *
+     * @general
+     * @default undefined */
+    expanded?: string[];
+    /**
+     * Кастомные цвета.
+     *
+     * @general
+     * @default {} */
+    palette?: {
+        headerColor?: Color;
+        headerColorExpanded?: Color;
+        headerColorDisabled?: Color;
+        headerBackgroundColor?: Color;
+        headerBackgroundColorExpanded?: Color;
+        headerBackgroundColorDisabled?: Color;
+        backgroundColor?: Color;
+        backgroundColorExpanded?: Color;
+        backgroundColorDisabled?: Color;
+    };
+    /**
+     * Использование скелетонов вместо контента.
+     *
+     * @general
+     * @default false */
     loading?: boolean;
-    /** Колбек, который будет вызван при изменении состояния динамической панели.
-     *  Получает аргументом текущее состояние панели */
-    onExpandedChange?: (expanded: boolean) => void;
-    /** Кастомные цвета */
-    palette?: Partial<Record<keyof AccordionPalette, Color>>;
-    /** Пропсы для скелетонов (используются при loading=true) */
-    skeletonProps?: SkeletonProps;
-    /** Контент подзаголовка аккордеона */
-    subtitle?: React.ReactNode;
-    /** Пропсы типографики для подзаголовка  */
-    subtitleProps?: TextProps;
-    /** Контент заголовка аккордеона */
-    title: React.ReactNode;
-    /** Пропсы типографики для заголовка */
-    titleProps?: TextProps;
+    /**
+     * Интерактивность отключена.
+     *
+     * @general
+     * @default false */
+    disabled?: boolean;
+    /**
+     * Вариант внешнего вида без горизонтальных паддингов.
+     *
+     * @general
+     * @default false */
+    embedded?: boolean;
+    /**
+     * Скругление краев айтемов (px).
+     *
+     * @general
+     * @default 0 */
+    borderRadius?: number;
+    /**
+     * Отступ между айтемами (px).
+     *
+     * @general
+     * @default undefined */
+    gap?: number;
+    /**
+     * Вариант цветовой схемы.
+     *
+     * @general
+     * @default false */
+    primary?: boolean;
+    /**
+     * Вариант цветовой схемы.
+     *
+     * @general
+     * @default false */
+    secondary?: boolean;
+    /**
+     * Колбек будет вызван при изменении состояний динамических панелей.
+     *
+     * @general
+     * @default undefined */
+    onExpandedChange?: (expanded: string[]) => void;
+    /**
+     * Размер.
+     *
+     * Использование кортежей включает применение размеров в зависимости от ширины вьюпорта.
+     *
+     * @general
+     * @default 'm' */
+    size?: Size | [DESKTOP: Size, TABLET: Size, MOBILE: Size] | [XL: Size, L: Size, M: Size, S: Size, XS: Size, XXS: Size];
+    /**
+     * Размер для XXS брейкпоинта.
+     *
+     * @default undefined */
+    sizeXXS?: Size;
+    /**
+     * Размер для XS брейкпоинта.
+     *
+     * @default undefined */
+    sizeXS?: Size;
+    /**
+     * Размер для S брейкпоинта.
+     *
+     * @default undefined */
+    sizeS?: Size;
+    /**
+     * Размер для M брейкпоинта.
+     *
+     * @default undefined */
+    sizeM?: Size;
+    /**
+     * Размер для L брейкпоинта.
+     *
+     * @default undefined */
+    sizeL?: Size;
+    /**
+     * Размер для XL брейкпоинта.
+     *
+     * @default undefined */
+    sizeXL?: Size;
+    /**
+     * Модификация размеров.
+     *
+     * @general
+     * @default undefined */
+    sizes?: Partial<Record<Size, React.CSSProperties>>;
+    /**
+     * Внешние отступы.
+     *
+     * Использование кортежей включает применение отступов в зависимости от ширины вьюпорта.
+     *
+     * @general
+     * @default undefined */
+    margin?: Margin | [DESKTOP: Margin, TABLET: Margin, MOBILE: Margin] | [XL: Margin, L: Margin, M: Margin, S: Margin, XS: Margin, XXS: Margin];
+    /**
+     * Отступ для XXS брейкпоинта.
+     *
+     * @default undefined */
+    marginXXS?: Margin;
+    /**
+     * Отступ для XS брейкпоинта.
+     *
+     * @default undefined */
+    marginXS?: Margin;
+    /**
+     * Отступ для S брейкпоинта.
+     *
+     * @default undefined */
+    marginS?: Margin;
+    /**
+     * Отступ для M брейкпоинта.
+     *
+     * @default undefined */
+    marginM?: Margin;
+    /**
+     * Отступ для L брейкпоинта.
+     *
+     * @default undefined */
+    marginL?: Margin;
+    /**
+     * Отступ для XL брейкпоинта.
+     *
+     * @default undefined */
+    marginXL?: Margin;
 }
+declare type AccordionProps = AccordionBaseProps & Omit<React.ComponentPropsWithRef<'div'>, keyof AccordionBaseProps>;
+declare type AccordionDividerBaseProps = ResponsiveMarginProps & ColorProperty;
+declare type AccordionDividerProps = AccordionDividerBaseProps & Omit<React.ComponentPropsWithRef<'div'>, keyof AccordionDividerBaseProps>;
+
+declare const AccordionDivider: React.ForwardRefExoticComponent<AccordionDividerProps>;
 
 /**
  *
- * Компонент поддерживает все атрибуты \<section\> элемента.
- *
- * Можно передать "ref", который будет ассоциирован с рутовым элементом.
+ * Компонент для создания вертикального стека сворачиваемых секций контента.
  *
- * Поддерживаются пропсы определения размеров и внешних отступов в зависимости от ширины вьюпорта.
+ * Поддерживается "ref" и все нативные атрибуты \<div\> элемента.
  *
- * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/Accordion/types.ts).
+ * Дизайн соответствует [рекомендациям WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
  */
-declare const Accordion: React.ForwardRefExoticComponent<AccordionProps>;
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps> & {
+    Item: typeof AccordionItem;
+    Divider: typeof AccordionDivider;
+};
 
 declare type SwitchSize = 'xl' | 'l' | 'm' | 's' | 'xs';
 declare type SwitchPalette = {
@@ -4095,6 +4434,7 @@ interface Theme {
         DialogComponent?: Partial<DialogComponentProps>;
         Notification?: Partial<NotificationProps>;
         Accordion?: Partial<AccordionProps>;
+        AccordionItem?: Partial<AccordionItemProps>;
         Switch?: Partial<SwitchProps>;
     };
 }
@@ -4186,7 +4526,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$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 function buildMediaQuery(value: number | Size$6 | '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$6, number>): ReturnType<typeof css>;
 declare const desktopFirst: (a: string, b: string) => number;
 declare const mobileFirst: (a: string, b: string) => number;
 
@@ -5969,6 +6309,52 @@ interface FormLabelProps extends ResponsiveSizeProps<FormLabelSize>, ResponsiveM
  */
 declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps>;
 
+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 const FuseSearchKeys: {
     readonly text: "text";
     readonly label: "label";
@@ -6309,4 +6695,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$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 };
+export { Accordion, type AccordionItemProps, 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$6 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 };