@vkontakte/vkui 7.2.1 → 7.3.0

package/src/components/Header/Header.tsx

@@ -13,37 +13,48 @@ import { Title } from '../Typography/Title/Title';
 import styles from './Header.module.css';
 
 export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {
+  /**
+   * Размер компонента.
+   */
   size?: 's' | 'm' | 'l' | 'xl';
+  /**
+   * Подпись под основным текстом.
+   */
   subtitle?: React.ReactNode;
-  /* Позволяет задать тип элемента в который будет обёрнут subtitle */
+  /**
+   * Позволяет задать тип элемента в который будет обёрнут subtitle.
+   */
   subtitleComponent?: React.ElementType;
   /**
-   * Допускаются иконки, текст, Link
+   * Допускаются иконки, текст, Link.
    */
   after?: React.ReactNode;
   /**
-   * Допускаются текст, Indicator
+   * Допускаются текст, Indicator.
    */
   indicator?: React.ReactNode;
+  /**
+   * Возможность отображения текста в несколько строк.
+   */
   multiline?: boolean;
   /**
-   * Иконка слева (рекомендуется использовать размер 28px)
+   * Иконка слева (рекомендуется использовать размер 28px).
    */
   before?: React.ReactNode;
   /**
-   * Иконка слева от title (рекомендуется использовать размер 16px)
+   * Иконка слева от title (рекомендуется использовать размер 16px).
    */
   beforeTitle?: React.ReactNode;
   /**
-   * Иконка справа от title (рекомендуется использовать размер 16px)
+   * Иконка справа от title (рекомендуется использовать размер 16px).
    */
   afterTitle?: React.ReactNode;
   /**
-   * Иконка слева от subtitle (рекомендуется использовать размер 12px)
+   * Иконка слева от subtitle (рекомендуется использовать размер 12px).
    */
   beforeSubtitle?: React.ReactNode;
   /**
-   * Иконка справа от subtitle (рекомендуется использовать размер 12px)
+   * Иконка справа от subtitle (рекомендуется использовать размер 12px).
    */
   afterSubtitle?: React.ReactNode;
 }

package/src/components/HorizontalCell/HorizontalCell.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./HorizontalCell.module.css"],"names":["host","image","body","content","subtitle","sized","customSize","sizeS","noPadding","textAlignCenter","textAlignEnd","sizeM","sizeL","sizeXL","sizeAuto"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,O,WAJA;AAAA,E,aASAC,M,WATA;AAAA,E,aAgBAF,M,WAhBA;AAAA,E,aAgBME,M,WAhBN;AAAA,E,aAoBAC,S,WApBA;AAAA,E,aA2BAC,U,WA3BA;AAAA,E,aA+BAD,S,WA/BA;AAAA,E,aA+BSC,U,WA/BT;AAAA,E,aAmCAC,O,WAnCA;AAAA,E,aAuCAC,Y,WAvCA;AAAA,E,aAuCYJ,M,WAvCZ;AAAA,E,aA2CAK,O,WA3CA;AAAA,E,aAkDAC,W,WAlDA;AAAA,E,aAsDAP,O,WAtDA;AAAA,E,aA2DAE,S,WA3DA;AAAA,E,aAiEAM,iB,WAjEA;AAAA,E,aAqEAC,c,WArEA;AAAA,E,aAyEAH,O,WAzEA;AAAA,E,aAyEON,O,WAzEP;AAAA,E,aA8EAM,O,WA9EA;AAAA,E,aA8EOJ,S,WA9EP;AAAA,E,aAmFAQ,O,WAnFA;AAAA,E,aAuFAC,O,WAvFA;AAAA,E,aA2FAC,Q,WA3FA;AAAA,E,aA+FAC,U,WA/FA;AAAA,E,aAmGAd,M,WAnGA;AAAA,E,aAoGAA,M,WApGA;AAAA,E,aAyGAK,O,WAzGA;AAAA,E,aA0GAA,O,WA1GA;AAAA,E,aA8GAA,O,WA9GA;AAAA,E,aAoHAA,O,WApHA;AAAA,E,aAoHmBH,M,WApHnB;AAAA,E,aAqHAG,O,WArHA;AAAA,E,aAqHkBH,M,WArHlB;AAAA;AAAA","file":"HorizontalCell.module.css.d.ts","sourceRoot":""}

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -31,7 +31,7 @@ export interface HorizontalCellProps
     HasRootRef<HTMLDivElement>,
     HasRef<HTMLDivElement> {
   /**
-   * Ширина компонента
+   * Ширина компонента.
    *
    * Значения `'s' | 'm' | 'l' | 'xl'` определяются дизайн-системой.
    * Значение `auto` позволяет задать динамическую ширину, определяемую контентом.
@@ -39,7 +39,7 @@ export interface HorizontalCellProps
    */
   size?: LiteralUnion<HorizontalCellSizes, number>;
   /**
-   * Заголовок
+   * Заголовок.
    */
   title?: React.ReactNode;
   /**
@@ -51,13 +51,13 @@ export interface HorizontalCellProps
    */
   extraSubtitle?: React.ReactNode;
   /**
-   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`
+   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`.
    */
   textAlign?: 'start' | 'center' | 'end';
   /**
-   * Отключает формирование отступов у крайних элементов
+   * Отключает формирование отступов у крайних элементов.
    *
-   * Актуально для использования в многострочных списках
+   * Актуально для использования в многострочных списках.
    */
   noPadding?: boolean;
   /**

package/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./HorizontalCellShowMore.module.css"],"names":["host","centered","body","sizeS","sizeM","icon","text"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,U,WAJA;AAAA,E,aAQAD,M,WARA;AAAA,E,aAaAE,M,WAbA;AAAA,E,aAuBAC,O,WAvBA;AAAA,E,aAuBOD,M,WAvBP;AAAA,E,aA4BAE,O,WA5BA;AAAA,E,aA4BOF,M,WA5BP;AAAA,E,aAkCAF,M,WAlCA;AAAA,E,aAkCME,M,WAlCN;AAAA,E,aAsCAG,M,WAtCA;AAAA,E,aA0CAC,M,WA1CA;AAAA;AAAA","file":"HorizontalCellShowMore.module.css.d.ts","sourceRoot":""}

package/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx

@@ -19,7 +19,7 @@ export interface HorizontalCellShowMoreProps
    * Задаёт высоту компонента. Должeн соответствовать размеру картинок
    * внутри соседних `HorizontalCell` компонентов.
    *
-   * Используйте размеры, заданные дизайн-системой (см. типы).
+   * Используйте размеры, заданные дизайн-системой (смотри типы).
    *
    * > ⚠️ Использование кастомного размера – это пограничный кейс.
    *
@@ -38,7 +38,7 @@ export interface HorizontalCellShowMoreProps
    * */
   children?: SubheadProps['children'];
   /**
-   * Выравнивание по центру относительно родителя
+   * Выравнивание по центру относительно родителя.
    */
   centered?: boolean;
 }
@@ -73,7 +73,7 @@ export const HorizontalCellShowMore = ({
         hoverMode="opacity"
         {...restProps}
       >
-        <Icon28ChevronRightCircle className={styles.icon} fill="currentColor" />
+        <Icon28ChevronRightCircle className={styles.icon} />
 
         <Subhead className={styles.text} weight="2">
           {children}

package/src/components/HorizontalScroll/HorizontalScroll.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./HorizontalScroll.module.css"],"names":["host","rtl","in","inWrapper","arrow","withConstArrows","arrowLeft","arrowRight"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,K,WAbA;AAAA,E,aAiBAC,I,WAjBA;AAAA,E,aA4BAA,I,WA5BA;AAAA,E,aAgCAC,W,WAhCA;AAAA,E,aAsCAC,O,WAtCA;AAAA,E,aA6CAJ,M,WA7CA;AAAA,E,aA6CYI,O,WA7CZ;AAAA,E,aAiDAC,iB,WAjDA;AAAA,E,aAiDiBD,O,WAjDjB;AAAA,E,aAkDAC,iB,WAlDA;AAAA,E,aAkDuBD,O,WAlDvB;AAAA,E,aAmDAJ,M,WAnDA;AAAA,E,aAmDMI,O,WAnDN;AAAA,E,aAuDAE,W,WAvDA;AAAA,E,aAuDmBJ,I,WAvDnB;AAAA,E,aAuDuBC,W,WAvDvB;AAAA,E,aA2DAI,Y,WA3DA;AAAA,E,aA2DoBL,I,WA3DpB;AAAA,E,aA2DwBC,W,WA3DxB;AAAA,E,aAoE2BH,M,WApE3B;AAAA,E,aAyEqCG,W,WAzErC;AAAA,E,aA2EqCA,W,WA3ErC;AAAA;AAAA","file":"HorizontalScroll.module.css.d.ts","sourceRoot":""}

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -12,6 +12,7 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import { ScrollArrow, type ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
 import styles from './HorizontalScroll.module.css';
 
+/* eslint-disable jsdoc/require-jsdoc */
 interface ScrollContext {
   scrollElement: HTMLElement | null;
   scrollAnimationDuration: number;
@@ -22,11 +23,12 @@ interface ScrollContext {
   onScrollStart: VoidFunction;
   /**
    * Начальная ширина прокрутки.
-   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate
+   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate.
    */
   initialScrollWidth: number;
   textDirection: 'ltr' | 'rtl';
 }
+/* eslint-enable jsdoc/require-jsdoc */
 
 export type ScrollPositionHandler = (currentPosition: number) => number;
 
@@ -34,19 +36,28 @@ export interface HorizontalScrollProps
   extends HTMLAttributesWithRootRef<HTMLDivElement>,
     HasRef<HTMLDivElement> {
   /**
-   * Функция для расчета величины прокрутки при клике на левую стрелку.
+   * Функция для расчета величины прокрутки при нажатии на левую стрелку.
    */
   getScrollToLeft?: ScrollPositionHandler;
   /**
-   * Функция для расчета величины прокрутки при клике на правую стрелку.
+   * Функция для расчета величины прокрутки при нажатии на правую стрелку.
    */
   getScrollToRight?: ScrollPositionHandler;
+  /**
+   * Размер стрелок.
+   */
   arrowSize?: ScrollArrowProps['size'];
   /**
    * Смещает иконки кнопок навигации по вертикали.
    */
   arrowOffsetY?: number | string;
+  /**
+   * Показывать ли стрелки.
+   */
   showArrows?: boolean | 'always';
+  /**
+   * Длительность анимации скролла.
+   */
   scrollAnimationDuration?: number;
   /**
    * Добавляет возможность прокручивать контент на любое колесо мыши.
@@ -54,36 +65,36 @@ export interface HorizontalScrollProps
    */
   scrollOnAnyWheel?: boolean;
   /**
-   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента
+   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.
    */
   prevButtonTestId?: string;
   /**
-   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента
+   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента.
    */
   nextButtonTestId?: string;
   /**
-   * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`
+   * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`.
    */
   ContentWrapperComponent?: React.ElementType;
   /**
-   * `ref` для обертки над контентом, прокинутым в `children`
+   * `ref` для обертки над контентом, прокинутым в `children`.
    */
   contentWrapperRef?: React.Ref<HTMLElement>;
   /**
-   * Специфичный `className` для обертки над контентом, прокинутым в `children`
+   * Специфичный `className` для обертки над контентом, прокинутым в `children`.
    */
   contentWrapperClassName?: string;
 }
 
 /**
- * timing method
+ * Timing method.
  */
 function now() {
   return performance && performance.now ? performance.now() : Date.now();
 }
 
 /**
- * Округление к большему по модулю
+ * Округление к большему по модулю.
  *
  * ## Пример
  *
@@ -100,13 +111,13 @@ function roundingAwayFromZero(value: number): number {
 
 /**
  * Округляем el.scrollLeft
- * https://github.com/VKCOM/VKUI/pull/2445
+ * https://github.com/VKCOM/VKUI/pull/2445.
  */
 const roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);
 
 /**
  * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
- * Константа взята из полифила (468), на дизайн-ревью уточнили до 250
+ * Константа взята из полифила (468), на дизайн-ревью уточнили до 250.
  * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла
  */
 const SCROLL_ONE_FRAME_TIME = 250;
@@ -127,7 +138,7 @@ function doScroll({
   }
 
   /**
-   * крайнее значение сдвига
+   * Крайнее значение сдвига.
    */
   const extremeScrollLeft =
     (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);
@@ -145,7 +156,7 @@ function doScroll({
   onScrollStart();
 
   /**
-   * Если окончание прокрутки вышло за ноль
+   * Если окончание прокрутки вышло за ноль.
    */
   if (startScrollLeft * endScrollLeft < 0) {
     endScrollLeft = 0;
@@ -274,7 +285,7 @@ export const HorizontalScroll = ({
         return noop;
       }
       /**
-       * Прокрутка с помощью любого колеса мыши
+       * Прокрутка с помощью любого колеса мыши.
        */
       const onWheel = (e: WheelEvent) => {
         scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });

package/src/components/IconButton/IconButton.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./IconButton.module.css"],"names":["host","sizeYCompact","ios","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAqBAA,M,WArBA;AAAA,E,aAyBAC,c,WAzBA;AAAA,E,aA6BAD,M,WA7BA;AAAA,E,aAiCAE,K,WAjCA;AAAA,E,aAsCAF,M,WAtCA;AAAA,E,aA2CAA,M,WA3CA;AAAA,E,aAiDAC,c,WAjDA;AAAA,E,aAmDAA,c,WAnDA;AAAA,E,aAwDAD,M,WAxDA;AAAA,E,aA6DAC,c,WA7DA;AAAA,E,aAkEAD,M,WAlEA;AAAA,E,aAuEAC,c,WAvEA;AAAA,E,aA4EEE,W,WA5EF;AAAA,E,aAiFEA,W,WAjFF;AAAA,E,aAmFIA,W,WAnFJ;AAAA,E,aAwFEA,W,WAxFF;AAAA,E,aA6FEA,W,WA7FF;AAAA,E,aAyGqFH,M,WAzGrF;AAAA,E,aA2G4FA,M,WA3G5F;AAAA,E,aA6GuCA,M,WA7GvC;AAAA,E,aAyHEA,M,WAzHF;AAAA,E,aAgIuCC,c,WAhIvC;AAAA,E,aAsIqFA,c,WAtIrF;AAAA,E,aAyIIA,c,WAzIJ;AAAA,E,aAgJyCE,W,WAhJzC;AAAA,E,aAsJuFA,W,WAtJvF;AAAA,E,aAyJQA,W,WAzJR;AAAA,E,aAoKwCH,M,WApKxC;AAAA,E,aAyKwCE,K,WAzKxC;AAAA,E,aAkLoCF,M,WAlLpC;AAAA;AAAA","file":"IconButton.module.css.d.ts","sourceRoot":""}

package/src/components/IconButton/IconButton.tsx

@@ -16,7 +16,7 @@ const sizeYClassNames = {
 
 export interface IconButtonProps extends TappableProps {
   /**
-   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий
+   * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий.
    */
   label?: string;
 }

package/src/components/Image/Image.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Image.module.css"],"names":["host","borderStartStartRadius","borderStartEndRadius","borderEndStartRadius","borderEndEndRadius"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,wB,WAJA;AAAA,E,aAQAC,sB,WARA;AAAA,E,aAYAC,sB,WAZA;AAAA,E,aAgBAC,oB,WAhBA;AAAA;AAAA","file":"Image.module.css.d.ts","sourceRoot":""}

package/src/components/Image/Image.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
+import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import { type CSSCustomProperties } from '../../types';
 import { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';
@@ -18,19 +19,19 @@ export interface ImageProps extends Omit<ImageBaseProps, 'badge'> {
    */
   borderRadius?: 's' | 'l' | 'm';
   /**
-   * Размер закругления угла между сторонами начала блока и строки
+   * Размер закругления угла между сторонами начала блока и строки.
    */
   borderStartStartRadius?: 's' | 'l' | 'm';
   /**
-   * Размер закругления угла между стороной начала блока и стороной конца строки
+   * Размер закругления угла между стороной начала блока и стороной конца строки.
    */
   borderStartEndRadius?: 's' | 'l' | 'm';
   /**
-   * Размер закругления угла между стороной конца блока и стороной начала строки
+   * Размер закругления угла между стороной конца блока и стороной начала строки.
    */
   borderEndStartRadius?: 's' | 'l' | 'm';
   /**
-   * Размер закругления угла между сторонами конца блока и строки
+   * Размер закругления угла между сторонами конца блока и строки.
    */
   borderEndEndRadius?: 's' | 'l' | 'm';
 }
@@ -169,13 +170,12 @@ export const Image: React.FC<ImageProps> & {
   );
 };
 
-Image.displayName = 'Image';
-
 Image.Badge = ImageBadge;
-Image.Badge.displayName = 'Image.Badge';
-
 Image.Overlay = ImageBase.Overlay;
-Image.Overlay.displayName = 'Image.Overlay';
-
 Image.FloatElement = ImageBase.FloatElement;
-Image.FloatElement.displayName = 'Image.FloatElement';
+
+if (process.env.NODE_ENV !== 'production') {
+  defineComponentDisplayNames(Image.Badge, 'Image.Badge');
+  defineComponentDisplayNames(Image.Overlay, 'Image.Overlay');
+  defineComponentDisplayNames(Image.FloatElement, 'Image.FloatElement');
+}

package/src/components/Image/ImageBadge/ImageBadge.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ImageBadge.module.css"],"names":["host","shifted"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,S,WANA;AAAA;AAAA","file":"ImageBadge.module.css.d.ts","sourceRoot":""}

package/src/components/Image/ImageBadge/ImageBadge.tsx

@@ -7,10 +7,7 @@ import styles from './ImageBadge.module.css';
 
 export type ImageBadgeProps = ImageBaseBadgeProps;
 
-export const ImageBadge: React.FC<ImageBadgeProps> = ({
-  className,
-  ...restProps
-}: ImageBadgeProps) => {
+export const ImageBadge = ({ className, ...restProps }: ImageBadgeProps) => {
   const { size } = React.useContext(ImageBaseContext);
   return (
     <ImageBase.Badge
@@ -19,5 +16,3 @@ export const ImageBadge: React.FC<ImageBadgeProps> = ({
     />
   );
 };
-
-ImageBadge.displayName = 'ImageBadge';

package/src/components/ImageBase/ImageBase.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ImageBase.module.css"],"names":["host","loaded","transparentBackground","children","border","img","imgKeepRatio","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","withObjectPosition","withFilter","fallback"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,Q,WAbA;AAAA,E,aAcAC,uB,WAdA;AAAA,E,aAkBAC,U,WAlBA;AAAA,E,aAmBAC,Q,WAnBA;AAAA,E,aA2BAD,U,WA3BA;AAAA,E,aAkCAC,Q,WAlCA;AAAA,E,aA2CAC,K,WA3CA;AAAA,E,aAoDAC,c,WApDA;AAAA,E,aAyDAC,qB,WAzDA;AAAA,E,aA6DAC,mB,WA7DA;AAAA,E,aAiEAC,kB,WAjEA;AAAA,E,aAqEAC,uB,WArEA;AAAA,E,aAyEAC,oB,WAzEA;AAAA,E,aAkFAC,Y,WAlFA;AAAA,E,aA2FAX,Q,WA3FA;AAAA,E,aA2FQI,K,WA3FR;AAAA,E,aA+FAQ,U,WA/FA;AAAA,E,aA4G4Cb,M,WA5G5C;AAAA,E,aAiH2CA,M,WAjH3C;AAAA;AAAA","file":"ImageBase.module.css.d.ts","sourceRoot":""}

package/src/components/ImageBase/ImageBase.tsx

@@ -6,6 +6,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
 import { useExternRef } from '../../hooks/useExternRef';
 import { minOr } from '../../lib/comparing';
+import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import { getFetchPriorityProp } from '../../lib/utils';
 import type {
   AnchorHTMLAttributesOnly,
@@ -66,11 +67,11 @@ export interface ImageBaseProps
    */
   size?: LiteralUnion<ImageBaseSize, number>;
   /**
-   * Ширина изображения
+   * Ширина изображения.
    */
   widthSize?: number | string;
   /**
-   * Высота изображения
+   * Высота изображения.
    */
   heightSize?: number | string;
   /**
@@ -98,26 +99,26 @@ export interface ImageBaseProps
   withTransparentBackground?: boolean;
   /**
    * Пользовательское значения стиля object-fit
-   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).
    */
   objectFit?: React.CSSProperties['objectFit'];
   /**
    * Пользовательское значения стиля object-position
-   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position)
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position).
    */
   objectPosition?: React.CSSProperties['objectPosition'];
   /**
    * Флаг для сохранения пропорций картинки.
-   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки
+   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.
    */
   keepAspectRatio?: boolean;
   /**
-   * см. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming
+   * Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming.
    */
   elementTiming?: string;
   /**
    * Пользовательское значения стиля filter
-   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter)
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter).
    */
   filter?: React.CSSProperties['filter'];
 }
@@ -329,14 +330,12 @@ export const ImageBase: React.FC<ImageBaseProps> & {
     </ImageBaseContext.Provider>
   );
 };
-
-ImageBase.displayName = 'ImageBase';
-
 ImageBase.Badge = ImageBaseBadge;
-ImageBase.Badge.displayName = 'ImageBase.Badge';
-
 ImageBase.Overlay = ImageBaseOverlay;
-ImageBase.Overlay.displayName = 'ImageBase.Overlay';
-
 ImageBase.FloatElement = ImageBaseFloatElement;
-ImageBase.FloatElement.displayName = 'ImageBase.FloatElement';
+
+if (process.env.NODE_ENV !== 'production') {
+  defineComponentDisplayNames(ImageBase.Badge, 'ImageBase.Badge');
+  defineComponentDisplayNames(ImageBase.Overlay, 'ImageBase.Overlay');
+  defineComponentDisplayNames(ImageBase.FloatElement, 'ImageBase.FloatElement');
+}

package/src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ImageBaseBadge.module.css"],"names":["host","backgroundStroke","backgroundShadow"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAYAC,kB,WAZA;AAAA,E,aAiBAC,kB,WAjBA;AAAA;AAAA","file":"ImageBaseBadge.module.css.d.ts","sourceRoot":""}

package/src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx

@@ -49,12 +49,9 @@ export interface ImageBaseBadgeProps extends HTMLAttributesWithRootRef<HTMLDivEl
 /**
  * Бейдж в правом нижнем углу компонента.
  *
- * > Не используйте при `size < 24`
+ * > Не используйте при `size < 24`.
  */
-export const ImageBaseBadge: React.FC<ImageBaseBadgeProps> = ({
-  background = 'shadow',
-  ...restProps
-}: ImageBaseBadgeProps) => {
+export const ImageBaseBadge = ({ background = 'shadow', ...restProps }: ImageBaseBadgeProps) => {
   return (
     <>
       <RootComponent
@@ -67,5 +64,3 @@ export const ImageBaseBadge: React.FC<ImageBaseBadgeProps> = ({
     </>
   );
 };
-
-ImageBaseBadge.displayName = 'ImageBaseBadge';

package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ImageBaseFloatElement.module.css"],"names":["host","inlineIndent2xs","inlineIndentXs","inlineIndentS","inlineIndentM","inlineIndentL","inlineIndentXl","inlineIndent2xl","inlineIndent3xl","inlineIndent4xl","blockIndent2xs","blockIndentXs","blockIndentS","blockIndentM","blockIndentL","blockIndentXl","blockIndent2xl","blockIndent3xl","blockIndent4xl","hidden","placementTopStart","placementTop","placementTopEnd","placementBottomStart","placementBottom","placementBottomEnd","placementMiddleStart","placementMiddle","placementMiddleEnd"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,iB,WATA;AAAA,E,aAaAC,gB,WAbA;AAAA,E,aAiBAC,e,WAjBA;AAAA,E,aAqBAC,e,WArBA;AAAA,E,aAyBAC,e,WAzBA;AAAA,E,aA6BAC,gB,WA7BA;AAAA,E,aAiCAC,iB,WAjCA;AAAA,E,aAqCAC,iB,WArCA;AAAA,E,aAyCAC,iB,WAzCA;AAAA,E,aA6CAC,gB,WA7CA;AAAA,E,aAiDAC,e,WAjDA;AAAA,E,aAqDAC,c,WArDA;AAAA,E,aAyDAC,c,WAzDA;AAAA,E,aA6DAC,c,WA7DA;AAAA,E,aAiEAC,e,WAjEA;AAAA,E,aAqEAC,gB,WArEA;AAAA,E,aAyEAC,gB,WAzEA;AAAA,E,aA6EAC,gB,WA7EA;AAAA,E,aAiFAC,Q,WAjFA;AAAA,E,aAqFAC,mB,WArFA;AAAA,E,aA0FAC,c,WA1FA;AAAA,E,aAgGAC,iB,WAhGA;AAAA,E,aAqGAC,sB,WArGA;AAAA,E,aA0GAC,iB,WA1GA;AAAA,E,aAgHAC,oB,WAhHA;AAAA,E,aAqHAC,sB,WArHA;AAAA,E,aA2HAC,iB,WA3HA;AAAA,E,aAiIAC,oB,WAjIA;AAAA;AAAA","file":"ImageBaseFloatElement.module.css.d.ts","sourceRoot":""}

package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx

@@ -71,22 +71,22 @@ const blockIndentClassNames = {
 
 export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
-   * Позиция компонента относительно родителя
+   * Позиция компонента относительно родителя.
    */
   placement: FloatElementPlacement;
   /**
-   * Отступ компонента от края контейнера по горизонтали
+   * Отступ компонента от края контейнера по горизонтали.
    */
   inlineIndent?: FloatElementIndentation;
   /**
-   * Отступ компонента от края контейнера по вертикали
+   * Отступ компонента от края контейнера по вертикали.
    */
   blockIndent?: FloatElementIndentation;
   /**
    * Режим отображения компонента:
    *
    * - `"always"`: Всегда
-   * - `"on-hover"`: При наведении на картинку
+   * - `"on-hover"`: При наведении на картинку.
    */
   visibility?: 'always' | 'on-hover';
 }
@@ -164,5 +164,3 @@ export const ImageBaseFloatElement = ({
     />
   );
 };
-
-ImageBaseFloatElement.displayName = 'ImageBaseFloatElement';

package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ImageBaseOverlay.module.css"],"names":["host","visible","clickable","themeLight","themeDark"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAkBAC,S,WAlBA;AAAA,E,aAuBED,M,WAvBF;AAAA,E,aA4BAE,W,WA5BA;AAAA,E,aAgCAC,Y,WAhCA;AAAA,E,aAqCAC,W,WArCA;AAAA;AAAA","file":"ImageBaseOverlay.module.css.d.ts","sourceRoot":""}

package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx

@@ -87,7 +87,7 @@ const ImageBaseOverlayNonInteractive = ({
 /**
  * Оверлей над картинкой.
  */
-export const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({
+export const ImageBaseOverlay = ({
   className,
   theme: themeProp,
   visibility: visibilityProp,
@@ -119,5 +119,3 @@ export const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({
 
   return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;
 };
-
-ImageBaseOverlay.displayName = 'ImageBaseOverlay';

package/src/components/ImageBase/ImageBaseOverlay/types.ts

@@ -24,6 +24,9 @@ export interface ImageBaseOverlayCommonProps
    * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.
    */
   visibility?: 'on-hover' | 'always';
+  /**
+   * `className` для компонента.
+   */
   className?: string;
 }
 
@@ -53,5 +56,8 @@ export interface ImageBaseOverlayNonInteractiveProps extends ImageBaseOverlayCom
    * такое поведение, что дает возможность передавать отдельные интерактивные элементы в `children`.
    */
   onClick?: undefined;
+  /**
+   * Содержимое.
+   */
   children: React.ReactNode;
 }

package/src/components/ImageBase/helpers.ts

@@ -1,7 +1,7 @@
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
  *
- * @param imageSize наименьшая сторона изображения
+ * @param imageSize Наименьшая сторона изображения.
  */
 export function getFallbackIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 | 28 | 36 {
   if (imageSize <= 20) {
@@ -26,7 +26,7 @@ getFallbackIconSizeByImageBaseSize.MAX_SIZE = 36;
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
  *
- * @param imageSize наименьшая сторона изображения
+ * @param imageSize Наименьшая сторона изображения.
  */
 export function getBadgeIconSizeByImageBaseSize(imageSize: number): 12 | 16 | 20 | 24 {
   if (imageSize <= 36) {
@@ -47,7 +47,7 @@ getBadgeIconSizeByImageBaseSize.MAX_SIZE = 24 as const;
 /**
  * Возвращает размер иконки основанный на дизайн-системы.
  *
- * @param imageSize наименьшая сторона изображения
+ * @param imageSize Наименьшая сторона изображения.
  */
 export function getOverlayIconSizeByImageBaseSize(
   imageSize: number,

package/src/components/ImageBase/types.ts

@@ -3,13 +3,31 @@ export const imageBaseSizes = [16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 72, 8
 export type ImageBaseSize = (typeof imageBaseSizes)[number];
 
 export type ImageBaseExpectedIconProps = {
+  /**
+   * Ширина иконки.
+   */
   width?: number;
+  /**
+   * Высота иконки.
+   */
   height?: number;
+  /**
+   * ClassName для иконки.
+   */
   className?: string;
 };
 
 export interface ImageBaseContextProps {
+  /**
+   * Размер картинки.
+   */
   size: ImageBaseSize | number;
+  /**
+   * Обработчики события `mouseOver`.
+   */
   onMouseOverHandlers: VoidFunction[];
+  /**
+   * Обработчики события `mouseOut`.
+   */
   onMouseOutHandlers: VoidFunction[];
 }

package/src/components/ImageBase/validators.ts

@@ -1,3 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
 import type * as React from 'react';
 import { warnOnce } from '../../lib/warnOnce';
 import {
@@ -9,11 +11,10 @@ import { imageBaseSizes } from './types';
 
 /**
  * Пример,
- *
  * Icon28User -> 28
  * Icon12Circle1 -> 12
  * Icon12Circle2 -> 12
- * Icon20TextHeading1Outline -> 20
+ * Icon20TextHeading1Outline -> 20.
  */
 function parseIconSizeByDisplayName(displayName: unknown): number | null {
   if (typeof displayName !== 'string') {
@@ -34,7 +35,7 @@ function parseIconSizeByWidthProp(width: unknown): number | null {
 }
 
 function getElementDisplayName(element: React.JSX.Element): string | null {
-  return element.type.displayName ?? null;
+  return element.type.displayName ?? element.type.name ?? null;
 }
 
 function getElementWidthProp(element: React.JSX.Element): number | string | null {

package/src/components/InfoRow/InfoRow.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./InfoRow.module.css"],"names":["host","header"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,Q,WANA;AAAA;AAAA","file":"InfoRow.module.css.d.ts","sourceRoot":""}