@vkontakte/vkui 5.8.2 → 5.9.1

package/dist/cssm/components/Header/Header.module.css

@@ -1,7 +1,6 @@
 .Header {
   display: flex;
-  align-items: baseline;
-  justify-content: space-between;
+  align-items: flex-start;
   padding: 0;
   padding-left: var(--vkui--size_base_padding_horizontal--regular);
   padding-right: var(--vkui--size_base_padding_horizontal--regular);
@@ -13,6 +12,7 @@
 }
 
 .Header__main {
+  flex: 1 0 0;
   min-width: 0;
   color: var(--vkui--color_text_primary);
 }
@@ -63,8 +63,16 @@
 }
 
 .Header__aside {
+  display: flex;
   white-space: nowrap;
+}
+
+/* stylelint-disable @project-tools/stylelint-atomic, selector-max-universal */
+
+.Header__aside.Header__aside > * {
+  margin-top: 13px;
   margin-left: 12px;
+  margin-bottom: 7px;
 }
 
 .Header__aside > :global(.vkuiIcon) {
@@ -73,59 +81,51 @@
 }
 
 .Header__aside > :global(.vkuiIcon--24) {
-  top: 3px;
+  margin-top: 11px;
+  margin-bottom: 5px;
 }
 
 .Header__aside > :global(.vkuiIcon--16) {
-  top: 1px;
+  margin-top: 15px;
+  margin-bottom: 9px;
 }
 
-.Header__main {
-  margin: 15px 0 9px;
-}
-
-.Header--mode-primary .Header__main {
-  margin-bottom: 7px;
-}
+/* stylelint-enable @project-tools/stylelint-atomic */
 
-.Header--mode-primary .Header__content:not(:last-child) {
-  margin-top: 0;
+.Header--mode-primary {
+  padding-top: 3px;
+  padding-bottom: 1px;
 }
 
-.Header--mode-primary .Header__content:last-child {
-  margin-bottom: 2px;
+.Header__content {
+  margin-top: 12px;
 }
 
-.Header--mode-tertiary .Header__main {
-  margin-top: 11px;
+.Header__content:last-child {
+  margin-bottom: 8px;
 }
 
-/**
- * iOS
- */
-
-.Header--ios .Header__main {
-  margin: 13px 0 9px;
+.Header--mode-tertiary .Header__content {
+  margin-top: 15px;
 }
 
-.Header--ios.Header--mode-primary .Header__main {
-  margin: 16px 0 7px;
+.Header--mode-tertiary .Header__content:last-child {
+  margin-bottom: 9px;
 }
 
-.Header--ios.Header--mode-secondary .Header__main {
-  margin: 14px 0 10px;
+.Header__subtitle {
+  margin-bottom: 7px;
 }
 
-.Header--ios.Header--mode-tertiary .Header__main {
-  margin: 12px 0 8px;
-}
+/* Компенсируем 1 пиксель из-за паддинга в .Header--mode-primary */
 
-.Header--ios.Header--mode-primary .Header__content:not(:last-child) {
-  margin-top: -1px;
+.Header--mode-primary .Header__subtitle {
+  margin-bottom: 6px;
 }
 
-.Header--ios.Header--mode-primary .Header__content:last-child {
-  margin-bottom: initial;
+.Header--large .Header__content {
+  margin-top: 10px;
+  margin-bottom: 6px;
 }
 
 /**

package/dist/cssm/components/HorizontalCell/HorizontalCell.d.ts

@@ -20,3 +20,4 @@ export interface HorizontalCellProps extends React.AnchorHTMLAttributes<HTMLElem
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */
 export declare const HorizontalCell: ({ className, header, style, subtitle, size, children, getRootRef, getRef, extraSubtitle, ...restProps }: HorizontalCellProps) => React.JSX.Element;
+//# sourceMappingURL=HorizontalCell.d.ts.map

package/dist/cssm/components/HorizontalCell/HorizontalCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalCell.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAA6B,MAAM,aAAa,CAAC;AA0B1F,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,cAAc,CAAC,EACtB,YAAY;IACd,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,4GAWxB,mBAAmB,sBAyBrB,CAAC"}

package/dist/cssm/components/HorizontalCell/HorizontalCell.js

@@ -29,7 +29,7 @@ const CellTypography = ({ size, children, ...restProps })=>{
         ...restProps
     }, hasReactNode(children) && /*#__PURE__*/ React.createElement("div", {
         className: styles['HorizontalCell__image']
-    }, children), /*#__PURE__*/ React.createElement("div", {
+    }, children), (header || subtitle || extraSubtitle) && /*#__PURE__*/ React.createElement("div", {
         className: styles['HorizontalCell__content']
     }, hasReactNode(header) && /*#__PURE__*/ React.createElement(CellTypography, {
         size: size

package/dist/cssm/components/HorizontalCell/HorizontalCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nconst stylesSize = {\n  s: styles['HorizontalCell--size-s'],\n  m: styles['HorizontalCell--size-m'],\n  l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        <div className={styles['HorizontalCell__content']}>\n          {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n          {hasReactNode(subtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n          )}\n          {hasReactNode(extraSubtitle) && (\n            <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n          )}\n        </div>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","styles","stylesSize","s","m","l","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,aAAa;IACjBC,GAAGF,MAAM,CAAC,yBAAyB;IACnCG,GAAGH,MAAM,CAAC,yBAAyB;IACnCI,GAAGJ,MAAM,CAAC,yBAAyB;AACrC;AAMA,MAAMK,iBAAiB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,oBAACT,SAAYW,WAAYD,0BAEzB,oBAACR,SAAYS,WAAYD;AAE7B;AAuBA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,oBAACZ;IAAOW,MAAM;EAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACb,GAAGR,WACiB;IACpB,qBACE,oBAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWjB,WAAWO,MAAM,CAAC,iBAAiB,EAAEC,UAAU,CAACK,KAAK,EAAEI;qBAElE,oBAACd;QAASc,WAAWV,MAAM,CAAC,uBAAuB;QAAEc,YAAYC;QAAS,GAAGP,SAAS;OACnFd,aAAaa,2BACZ,oBAACU;QAAIP,WAAWV,MAAM,CAAC,wBAAwB;OAAGO,yBAEpD,oBAACU;QAAIP,WAAWV,MAAM,CAAC,0BAA0B;OAC9CN,aAAaiB,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDjB,aAAamB,2BACZ,oBAACf;QAASY,WAAWV,MAAM,CAAC,2BAA2B;OAAGa,WAE3DnB,aAAasB,gCACZ,oBAAClB;QAASY,WAAWV,MAAM,CAAC,2BAA2B;OAAGgB;AAMtE,EAAE"}
+{"version":3,"sources":["../../../../src/components/HorizontalCell/HorizontalCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';\nimport { Avatar } from '../Avatar/Avatar';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCell.module.css';\n\nconst stylesSize = {\n  s: styles['HorizontalCell--size-s'],\n  m: styles['HorizontalCell--size-m'],\n  l: styles['HorizontalCell--size-l'],\n};\n\ninterface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size: HorizontalCellProps['size'];\n}\n\nconst CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {\n  return size === 's' ? (\n    <Caption {...restProps}>{children}</Caption>\n  ) : (\n    <Subhead {...restProps}>{children}</Subhead>\n  );\n};\n\nexport interface HorizontalCellProps\n  extends React.AnchorHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasComponent {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalCell\n */\nexport const HorizontalCell = ({\n  className,\n  header,\n  style,\n  subtitle,\n  size = 's',\n  children = <Avatar size={56} />,\n  getRootRef,\n  getRef,\n  extraSubtitle,\n  ...restProps\n}: HorizontalCellProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={style}\n      className={classNames(styles['HorizontalCell'], stylesSize[size], className)}\n    >\n      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>\n        {hasReactNode(children) && (\n          <div className={styles['HorizontalCell__image']}>{children}</div>\n        )}\n        {(header || subtitle || extraSubtitle) && (\n          <div className={styles['HorizontalCell__content']}>\n            {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}\n            {hasReactNode(subtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>\n            )}\n            {hasReactNode(extraSubtitle) && (\n              <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Avatar","Tappable","Caption","Footnote","Subhead","styles","stylesSize","s","m","l","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,aAAa;IACjBC,GAAGF,MAAM,CAAC,yBAAyB;IACnCG,GAAGH,MAAM,CAAC,yBAAyB;IACnCI,GAAGJ,MAAM,CAAC,yBAAyB;AACrC;AAMA,MAAMK,iBAAiB,CAAC,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,oBAACT,SAAYW,WAAYD,0BAEzB,oBAACR,SAAYS,WAAYD;AAE7B;AAuBA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRP,OAAO,GAAG,EACVC,yBAAW,oBAACZ;IAAOW,MAAM;EAAM,EAC/BQ,UAAU,EACVC,MAAM,EACNC,aAAa,EACb,GAAGR,WACiB;IACpB,qBACE,oBAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWjB,WAAWO,MAAM,CAAC,iBAAiB,EAAEC,UAAU,CAACK,KAAK,EAAEI;qBAElE,oBAACd;QAASc,WAAWV,MAAM,CAAC,uBAAuB;QAAEc,YAAYC;QAAS,GAAGP,SAAS;OACnFd,aAAaa,2BACZ,oBAACU;QAAIP,WAAWV,MAAM,CAAC,wBAAwB;OAAGO,WAEnD,AAACI,CAAAA,UAAUE,YAAYG,aAAY,mBAClC,oBAACC;QAAIP,WAAWV,MAAM,CAAC,0BAA0B;OAC9CN,aAAaiB,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDjB,aAAamB,2BACZ,oBAACf;QAASY,WAAWV,MAAM,CAAC,2BAA2B;OAAGa,WAE3DnB,aAAasB,gCACZ,oBAAClB;QAASY,WAAWV,MAAM,CAAC,2BAA2B;OAAGgB;AAOxE,EAAE"}

package/dist/cssm/components/HorizontalCellShowMore/HorizontalCellShowMore.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { HasRef, HasRootRef, LiteralUnion } from '../../types';
 import type { ImageBaseSize } from '../ImageBase/ImageBase';
 import { TappableProps } from '../Tappable/Tappable';
@@ -33,3 +33,4 @@ export interface HorizontalCellShowMoreProps extends Omit<TappableProps, 'getRoo
     compensateLastCellIndent?: boolean;
 }
 export declare const HorizontalCellShowMore: ({ className, style, getRef, getRootRef, compensateLastCellIndent, height, size, children, ...restProps }: HorizontalCellShowMoreProps) => React.JSX.Element;
+//# sourceMappingURL=HorizontalCellShowMore.d.ts.map

package/dist/cssm/components/HorizontalCellShowMore/HorizontalCellShowMore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalCellShowMore.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAW,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAStE,MAAM,WAAW,2BACf,SAAQ,IAAI,CAAC,aAAa,EAAE,YAAY,GAAG,MAAM,CAAC,EAChD,MAAM,CAAC,WAAW,CAAC,EACnB,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;;SAGK;IACL,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACpC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,sBAAsB,6GAUhC,2BAA2B,sBA+B7B,CAAC"}

package/dist/cssm/components/HorizontalCellShowMore/HorizontalCellShowMore.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Icon28ChevronRightCircle } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { Tappable } from '../Tappable/Tappable';

package/dist/cssm/components/HorizontalCellShowMore/HorizontalCellShowMore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport type { ImageBaseSize } from '../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles['HorizontalCellShowMore--size-s'],\n  m: styles['HorizontalCellShowMore--size-m'],\n  l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры заданные дизайн-системой (см. типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n   * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n   * в том случае, если тот элемент последний в родителе.\n   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n   */\n  compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  compensateLastCellIndent,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  ...restProps\n}: HorizontalCellShowMoreProps) => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles['HorizontalCellShowMore'],\n        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles['HorizontalCellShowMore__body']}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle\n          className={styles['HorizontalCellShowMore__icon']}\n          fill=\"currentColor\"\n        />\n\n        <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","Icon28ChevronRightCircle","classNames","Tappable","Subhead","styles","sizeClassNames","s","m","l","HorizontalCellShowMore","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","ref","undefined","activeMode","hoverMode","fill","weight"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAsB,gCAAgC;AACtE,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IACrBC,GAAGF,MAAM,CAAC,iCAAiC;IAC3CG,GAAGH,MAAM,CAAC,iCAAiC;IAC3CI,GAAGJ,MAAM,CAAC,iCAAiC;AAC7C;AAmCA,OAAO,MAAMK,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,wBAAwB,EACxBC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChD,GAAGE,WACyB;IAC5B,qBACE,oBAACC;QACCR,OAAOA;QACPD,WAAWT,WACTG,MAAM,CAAC,yBAAyB,EAChCU,4BAA4BV,MAAM,CAAC,sDAAsD,EACzFC,cAAc,CAACW,KAAK,EACpBN;QAEFU,KAAKP;qBAEL,oBAACX;QACCS,OAAOK,SAAS,MAAMK,YAAY;YAAEN;QAAO;QAC3CL,WAAWN,MAAM,CAAC,+BAA+B;QACjDS,YAAYD;QACZU,YAAW;QACXC,WAAU;QACT,GAAGL,SAAS;qBAEb,oBAAClB;QACCU,WAAWN,MAAM,CAAC,+BAA+B;QACjDoB,MAAK;sBAGP,oBAACrB;QAAQO,WAAWN,MAAM,CAAC,+BAA+B;QAAEqB,QAAO;OAChER;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/HorizontalCellShowMore/HorizontalCellShowMore.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28ChevronRightCircle } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport type { ImageBaseSize } from '../ImageBase/ImageBase';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead, SubheadProps } from '../Typography/Subhead/Subhead';\nimport styles from './HorizontalCellShowMore.module.css';\n\nconst sizeClassNames = {\n  s: styles['HorizontalCellShowMore--size-s'],\n  m: styles['HorizontalCellShowMore--size-m'],\n  l: styles['HorizontalCellShowMore--size-l'],\n};\n\nexport interface HorizontalCellShowMoreProps\n  extends Omit<TappableProps, 'getRootRef' | 'size'>,\n    HasRef<HTMLElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Задаёт высоту компонента. Должeн соответствовать размеру картинок\n   * внутри соседних `HorizontalCell` компонентов.\n   *\n   * Используйте размеры заданные дизайн-системой (см. типы).\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   *\n   * Игнорируется если `size='s'`.\n   */\n  height?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).\n   * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Предназначен для отрисовки текста.\n   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.\n   * */\n  children?: SubheadProps['children'];\n  /**\n   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,\n   * в том случае, если тот элемент последний в родителе.\n   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.\n   */\n  compensateLastCellIndent?: boolean;\n}\n\nexport const HorizontalCellShowMore = ({\n  className,\n  style,\n  getRef,\n  getRootRef,\n  compensateLastCellIndent,\n  height,\n  size = 's',\n  children = size === 's' ? 'Все' : 'Показать все',\n  ...restProps\n}: HorizontalCellShowMoreProps) => {\n  return (\n    <div\n      style={style}\n      className={classNames(\n        styles['HorizontalCellShowMore'],\n        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],\n        sizeClassNames[size],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <Tappable\n        style={size === 's' ? undefined : { height }}\n        className={styles['HorizontalCellShowMore__body']}\n        getRootRef={getRef}\n        activeMode=\"opacity\"\n        hoverMode=\"opacity\"\n        {...restProps}\n      >\n        <Icon28ChevronRightCircle\n          className={styles['HorizontalCellShowMore__icon']}\n          fill=\"currentColor\"\n        />\n\n        <Subhead className={styles['HorizontalCellShowMore__text']} weight=\"2\">\n          {children}\n        </Subhead>\n      </Tappable>\n    </div>\n  );\n};\n"],"names":["React","Icon28ChevronRightCircle","classNames","Tappable","Subhead","styles","sizeClassNames","s","m","l","HorizontalCellShowMore","className","style","getRef","getRootRef","compensateLastCellIndent","height","size","children","restProps","div","ref","undefined","activeMode","hoverMode","fill","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,mBAAmB;AAC5D,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAsB,gCAAgC;AACtE,OAAOC,YAAY,sCAAsC;AAEzD,MAAMC,iBAAiB;IACrBC,GAAGF,MAAM,CAAC,iCAAiC;IAC3CG,GAAGH,MAAM,CAAC,iCAAiC;IAC3CI,GAAGJ,MAAM,CAAC,iCAAiC;AAC7C;AAmCA,OAAO,MAAMK,yBAAyB,CAAC,EACrCC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,wBAAwB,EACxBC,MAAM,EACNC,OAAO,GAAG,EACVC,WAAWD,SAAS,MAAM,QAAQ,cAAc,EAChD,GAAGE,WACyB;IAC5B,qBACE,oBAACC;QACCR,OAAOA;QACPD,WAAWT,WACTG,MAAM,CAAC,yBAAyB,EAChCU,4BAA4BV,MAAM,CAAC,sDAAsD,EACzFC,cAAc,CAACW,KAAK,EACpBN;QAEFU,KAAKP;qBAEL,oBAACX;QACCS,OAAOK,SAAS,MAAMK,YAAY;YAAEN;QAAO;QAC3CL,WAAWN,MAAM,CAAC,+BAA+B;QACjDS,YAAYD;QACZU,YAAW;QACXC,WAAU;QACT,GAAGL,SAAS;qBAEb,oBAAClB;QACCU,WAAWN,MAAM,CAAC,+BAA+B;QACjDoB,MAAK;sBAGP,oBAACrB;QAAQO,WAAWN,MAAM,CAAC,+BAA+B;QAAEqB,QAAO;OAChER;AAKX,EAAE"}

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -27,3 +27,4 @@ export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDiv
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
 export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => React.JSX.Element;
+//# sourceMappingURL=HorizontalScroll.d.ts.map

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqBhE,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA2GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,0JAW1B,qBAAqB,sBA+IvB,CAAC"}

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { useDirection } from '../../hooks/useDirection';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
 import { easeInOutSine } from '../../lib/fx';
@@ -12,28 +13,47 @@ import styles from './HorizontalScroll.module.css';
  */ function now() {
     return performance && performance.now ? performance.now() : Date.now();
 }
+/**
+ * Округление к большему по модулю
+ *
+ * ## Пример
+ *
+ * ```ts
+ * import { strict as assert } from 'node:assert';
+ *
+ * assert.equal(roundingAwayFromZero(5.1), 6)
+ * assert.equal(roundingAwayFromZero(-5.1), -6)
+ * ```
+ */ function roundingAwayFromZero(value) {
+    return value > 0 ? Math.ceil(value) : Math.floor(value);
+}
 /**
  * Округляем el.scrollLeft
  * https://github.com/VKCOM/VKUI/pull/2445
- */ const roundUpElementScrollLeft = (el)=>Math.ceil(el.scrollLeft);
+ */ const roundUpElementScrollLeft = (el)=>roundingAwayFromZero(el.scrollLeft);
 /**
  * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
  * Константа взята из полифила (468), на дизайн-ревью уточнили до 250
  * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла
  */ const SCROLL_ONE_FRAME_TIME = 250;
-function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollToRightBorder, onScrollEnd, onScrollStart, initialScrollWidth, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME }) {
+function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollToEndBorder, onScrollEnd, onScrollStart, initialScrollWidth, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, textDirection }) {
     if (!scrollElement || !getScrollPosition) {
         return;
     }
     /**
-   * максимальное значение сдвига влево
-   */ const maxLeft = initialScrollWidth - scrollElement.offsetWidth;
-    let startLeft = roundUpElementScrollLeft(scrollElement);
-    let endLeft = getScrollPosition(startLeft);
+   * крайнее значение сдвига
+   */ const extremeScrollLeft = (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);
+    let startScrollLeft = roundUpElementScrollLeft(scrollElement);
+    let endScrollLeft = getScrollPosition(startScrollLeft);
     onScrollStart();
-    if (endLeft >= maxLeft) {
-        onScrollToRightBorder();
-        endLeft = maxLeft;
+    /**
+   * Если окончание прокрутки вышло за ноль
+   */ if (startScrollLeft * endScrollLeft < 0) {
+        endScrollLeft = 0;
+    }
+    if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {
+        onScrollToEndBorder();
+        endScrollLeft = extremeScrollLeft;
     }
     const startTime = now();
     (function scroll() {
@@ -44,9 +64,10 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
         const time = now();
         const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);
         const value = easeInOutSine(elapsed);
-        const currentLeft = startLeft + (endLeft - startLeft) * value;
-        scrollElement.scrollLeft = Math.ceil(currentLeft);
-        if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {
+        const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;
+        scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);
+        const scrollEnd = textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);
+        if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {
             requestAnimationFrame(scroll);
             return;
         }
@@ -62,8 +83,11 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
  */ export const HorizontalScroll = ({ children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'l', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, ...restProps })=>{
     const [canScrollLeft, setCanScrollLeft] = React.useState(false);
     const [canScrollRight, setCanScrollRight] = React.useState(false);
+    const [directionRef, textDirection = 'ltr'] = useDirection();
+    const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;
+    const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;
     const isCustomScrollingRef = React.useRef(false);
-    const scrollerRef = useExternRef(getRef);
+    const scrollerRef = useExternRef(getRef, directionRef);
     const animationQueue = React.useRef([]);
     const hasPointer = useAdaptivityHasPointer();
     const scrollTo = React.useCallback((getScrollPosition)=>{
@@ -72,18 +96,21 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
                 scrollElement,
                 getScrollPosition,
                 animationQueue: animationQueue.current,
-                onScrollToRightBorder: ()=>setCanScrollRight(false),
+                onScrollToEndBorder: ()=>setCanScrollEnd(false),
                 onScrollEnd: ()=>isCustomScrollingRef.current = false,
                 onScrollStart: ()=>isCustomScrollingRef.current = true,
                 initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,
-                scrollAnimationDuration
+                scrollAnimationDuration,
+                textDirection
             }));
         if (animationQueue.current.length === 1) {
             animationQueue.current[0]();
         }
     }, [
+        scrollerRef,
         scrollAnimationDuration,
-        scrollerRef
+        textDirection,
+        setCanScrollEnd
     ]);
     const scrollToLeft = React.useCallback(()=>{
         const getScrollPosition = getScrollToLeft ?? ((i)=>i - scrollerRef.current.offsetWidth);
@@ -104,13 +131,15 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
     const calculateArrowsVisibility = React.useCallback(()=>{
         if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
             const scrollElement = scrollerRef.current;
-            setCanScrollLeft(scrollElement.scrollLeft > 0);
-            setCanScrollRight(roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth < scrollElement.scrollWidth);
+            setCanScrollStart(scrollElement.scrollLeft !== 0);
+            setCanScrollEnd(Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth < scrollElement.scrollWidth);
         }
     }, [
+        showArrows,
         hasPointer,
         scrollerRef,
-        showArrows
+        setCanScrollStart,
+        setCanScrollEnd
     ]);
     const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);
     React.useEffect(function addScrollerRefToScrollEvent() {

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n  React.useEffect(\n    function addScrollerRefToScrollEvent() {\n      if (!scrollerRef.current) {\n        return noop;\n      }\n\n      scrollEvent.add(scrollerRef.current);\n      return scrollEvent.remove;\n    },\n    [scrollEvent, scrollerRef],\n  );\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(\n    function addScrollerRefToWheelEvent() {\n      if (!scrollerRef.current || !scrollOnAnyWheel) {\n        return noop;\n      }\n\n      wheelEvent.add(scrollerRef.current);\n\n      return wheelEvent.remove;\n    },\n    [wheelEvent, scrollerRef, scrollOnAnyWheel],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","RootComponent","ScrollArrow","styles","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEffect","addScrollerRefToScrollEvent","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","baseClassName","onMouseEnter","undefined","size","offsetY","direction","className","onClick","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToEndBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n  textDirection: 'ltr' | 'rtl';\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n  return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToEndBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  textDirection,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * крайнее значение сдвига\n   */\n  const extremeScrollLeft =\n    (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n  let startScrollLeft = roundUpElementScrollLeft(scrollElement);\n  let endScrollLeft = getScrollPosition(startScrollLeft);\n\n  onScrollStart();\n\n  /**\n   * Если окончание прокрутки вышло за ноль\n   */\n  if (startScrollLeft * endScrollLeft < 0) {\n    endScrollLeft = 0;\n  }\n\n  if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n    onScrollToEndBorder();\n    endScrollLeft = extremeScrollLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n    scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n    const scrollEnd =\n      textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n    if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n  const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();\n\n  const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n  const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef, directionRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToEndBorder: () => setCanScrollEnd(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n          textDirection,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollerRef, scrollAnimationDuration, textDirection, setCanScrollEnd],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const calculateArrowsVisibility = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollStart(scrollElement.scrollLeft !== 0);\n      setCanScrollEnd(\n        Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);\n\n  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n  React.useEffect(\n    function addScrollerRefToScrollEvent() {\n      if (!scrollerRef.current) {\n        return noop;\n      }\n\n      scrollEvent.add(scrollerRef.current);\n      return scrollEvent.remove;\n    },\n    [scrollEvent, scrollerRef],\n  );\n\n  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(\n    function addScrollerRefToWheelEvent() {\n      if (!scrollerRef.current || !scrollOnAnyWheel) {\n        return noop;\n      }\n\n      wheelEvent.add(scrollerRef.current);\n\n      return wheelEvent.remove;\n    },\n    [wheelEvent, scrollerRef, scrollOnAnyWheel],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n      )}\n      onMouseEnter={calculateArrowsVisibility}\n    >\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowLeft'],\n          )}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <ScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={classNames(\n            styles['HorizontalScroll__arrow'],\n            styles['HorizontalScroll__arrowRight'],\n          )}\n          onClick={scrollToRight}\n        />\n      )}\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useDirection","useEventListener","useExternRef","easeInOutSine","RootComponent","ScrollArrow","styles","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","endScrollLeft","abs","startTime","scroll","time","elapsed","min","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","directionRef","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEffect","addScrollerRefToScrollEvent","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","baseClassName","onMouseEnter","undefined","size","offsetY","direction","className","onClick","div","ref"],"mappings":"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"}

package/dist/cssm/components/HoverPopper/HoverPopper.d.ts

@@ -27,3 +27,4 @@ export interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {
     children?: React.ReactElement;
 }
 export declare const HoverPopper: ({ getRef, content, children, onShownChange, shown: _shown, showDelay, hideDelay, ...restProps }: HoverPopperProps) => React.JSX.Element;
+//# sourceMappingURL=HoverPopper.d.ts.map

package/dist/cssm/components/HoverPopper/HoverPopper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverPopper.d.ts","sourceRoot":"","sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAU,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC;IAC1E;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,oGASrB,gBAAgB,sBA0DlB,CAAC"}

package/dist/cssm/components/IconButton/IconButton.d.ts

@@ -7,3 +7,4 @@ export interface IconButtonProps extends TappableProps, HasChildren {
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
 export declare const IconButton: ({ children, className, ...restProps }: IconButtonProps) => React.JSX.Element;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/cssm/components/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAQ/D,MAAM,WAAW,eAAgB,SAAQ,aAAa,EAAE,WAAW;CAAG;AAItE;;GAEG;AACH,eAAO,MAAM,UAAU,0CAA2C,eAAe,sBA4BhF,CAAC"}

package/dist/cssm/components/IconButton/IconButton.module.css

@@ -148,3 +148,13 @@
 :global(.vkuiInternalSimpleCell__after) .IconButton--ios:last-child {
   margin-right: -9px;
 }
+
+/**
+ * CMP:
+ * Alert
+ */
+
+:global(.vkuiInternalAlert__dismiss).IconButton {
+  height: 36px;
+  padding: 8px;
+}

package/dist/cssm/components/Image/Image.d.ts

@@ -17,3 +17,4 @@ export declare const Image: {
     Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => React.JSX.Element;
     Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => React.JSX.Element;
 };
+//# sourceMappingURL=Image.d.ts.map

package/dist/cssm/components/Image/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAa,KAAK,qBAAqB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACpG,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE3E,YAAY,EAAE,eAAe,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,CAAC;AAE5E,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CAChC;AA0DD;;GAEG;AACH,eAAO,MAAM,KAAK;+EAMf,UAAU;;;CAcZ,CAAC"}

package/dist/cssm/components/Image/ImageBadge/ImageBadge.d.ts

@@ -2,3 +2,4 @@ import * as React from 'react';
 import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export type ImageBadgeProps = ImageBaseBadgeProps;
 export declare const ImageBadge: ({ className, ...restProps }: ImageBadgeProps) => React.JSX.Element;
+//# sourceMappingURL=ImageBadge.d.ts.map

package/dist/cssm/components/Image/ImageBadge/ImageBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Image/ImageBadge/ImageBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,KAAK,mBAAmB,EAAoB,MAAM,2BAA2B,CAAC;AAGlG,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAElD,eAAO,MAAM,UAAU,gCAAiC,eAAe,sBAYtE,CAAC"}

package/dist/cssm/components/ImageBase/ImageBase.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { HasRef, HasRootRef, LiteralUnion } from '../../types';
+import type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';
 import { type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
 import { type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
@@ -7,7 +7,7 @@ import type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize }
 export type { ImageBaseSize, ImageBaseExpectedIconProps, ImageBaseBadgeProps, ImageBaseOverlayProps, ImageBaseContextProps, };
 export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, } from './helpers';
 export { ImageBaseContext };
-export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {
+export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, AnchorHTMLAttributesOnly, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {
     /**
      * Задаёт размер картинки.
      *
@@ -39,7 +39,8 @@ export interface ImageBaseProps extends React.ImgHTMLAttributes<HTMLElement>, Ha
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */
 export declare const ImageBase: {
-    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, withBorder, "fallbackIcon": fallbackIconProp, children, "aria-label": ariaLabel, onClick, onLoad, onError, ...restProps }: ImageBaseProps): React.JSX.Element;
+    ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size, width, height, style, withBorder, fallbackIcon: fallbackIconProp, children, onLoad, onError, ...restProps }: ImageBaseProps): React.JSX.Element;
     Badge: ({ background, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;
     Overlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => React.JSX.Element;
 };
+//# sourceMappingURL=ImageBase.d.ts.map

package/dist/cssm/components/ImageBase/ImageBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBase.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE9F,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3F,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACnG,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAIhG,YAAY,EACV,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,GACtB,CAAC;AAEF,OAAO,EACL,+BAA+B,EAC/B,kCAAkC,EAClC,iCAAiC,GAClC,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,wBAAwB,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;OAYG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;CAC/D;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;mNAqBnB,cAAc;;;CAiFhB,CAAC"}

package/dist/cssm/components/ImageBase/ImageBase.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
-import { RootComponent } from '../RootComponent/RootComponent';
+import { Clickable } from '../Clickable/Clickable';
 import { ImageBaseBadge } from './ImageBaseBadge/ImageBaseBadge';
 import { ImageBaseOverlay } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
@@ -11,7 +11,7 @@ export { getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, ge
 export { ImageBaseContext };
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
- */ export const ImageBase = ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size = 24, width, height, style, withBorder = true, 'fallbackIcon': fallbackIconProp, children, 'aria-label': ariaLabel, onClick, onLoad, onError, ...restProps })=>{
+ */ export const ImageBase = ({ alt, crossOrigin, decoding, loading, referrerPolicy, sizes, src, srcSet, useMap, getRef, size = 24, width, height, style, withBorder = true, fallbackIcon: fallbackIconProp, children, onLoad, onError, ...restProps })=>{
     const [loaded, setLoaded] = React.useState(false);
     const [failed, setFailed] = React.useState(false);
     const hasSrc = src || srcSet;
@@ -58,17 +58,14 @@ export { ImageBaseContext };
         value: {
             size
         }
-    }, /*#__PURE__*/ React.createElement(RootComponent, {
-        ...restProps,
+    }, /*#__PURE__*/ React.createElement(Clickable, {
         style: {
             ...style,
             width: size,
             height: size
         },
         baseClassName: classNames(styles['ImageBase'], loaded && styles['ImageBase--loaded']),
-        role: hasSrc ? 'img' : 'presentation',
-        "aria-label": ariaLabel,
-        onClick: onClick
+        ...restProps
     }, hasSrc && /*#__PURE__*/ React.createElement("img", {
         ref: imgRef,
         alt: alt,