@vkontakte/vkui 5.8.2 → 5.9.0

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;AAM/B,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAoBhE,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;AAgFD;;GAEG;AACH,eAAO,MAAM,gBAAgB,0JAW1B,qBAAqB,sBA0IvB,CAAC"}

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,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  withBorder = true,\n  'fallbackIcon': fallbackIconProp,\n  children,\n  'aria-label': ariaLabel,\n  onClick,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <RootComponent\n        {...restProps}\n        style={{ ...style, width: size, height: size }}\n        baseClassName={classNames(styles['ImageBase'], loaded && styles['ImageBase--loaded'])}\n        role={hasSrc ? 'img' : 'presentation'}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </RootComponent>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","useExternRef","RootComponent","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseClassName","role","aria-label","img","ref","className","div","aria-hidden","Badge","Overlay"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Включает или отключает обводку.\n   */\n  withBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  getRef,\n  size = 24,\n  width,\n  height,\n  style,\n  withBorder = true,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  ...restProps\n}: ImageBaseProps) => {\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        style={{ ...style, width: size, height: size }}\n        baseClassName={classNames(styles['ImageBase'], loaded && styles['ImageBase--loaded'])}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={styles['ImageBase__img']}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={width}\n            height={height}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n          />\n        )}\n        {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n        {children}\n        {withBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"names":["React","classNames","useExternRef","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","withBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","value","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseClassName","img","ref","className","div","aria-hidden","Badge","Overlay"],"mappings":"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"}

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

@@ -5,7 +5,7 @@
   justify-content: center;
   flex-shrink: 0;
   box-sizing: border-box;
-  color: var(--vkui--color_icon_secondary);
+  color: var(--vkui_internal--icon_color, var(--vkui--color_icon_secondary));
   background-color: var(--vkui--color_background_secondary);
   background-size: cover;
   isolation: isolate;
@@ -21,7 +21,7 @@
   height: 100%;
   box-sizing: border-box;
   transform-origin: left top;
-  border: var(--vkui_internal--thin_border) solid var(--vkui--color_image_border_alpha);
+  border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
   border-radius: inherit;
 }
 
@@ -50,19 +50,6 @@
   left: auto;
 }
 
-/**
- * CMP:
- * CellButton
- */
-
-:global(.vkuiInternalCellButton) > .ImageBase :global(.vkuiIcon) {
-  color: var(--vkui--color_icon_accent);
-}
-
-:global(.vkuiInternalCellButton--mode-danger) > .ImageBase :global(.vkuiIcon) {
-  color: var(--vkui--color_icon_negative);
-}
-
 /**
  * CMP:
  * PanelHeader

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

@@ -29,3 +29,4 @@ export interface ImageBaseBadgeProps extends React.AriaAttributes, HasRootRef<HT
  * > Не используйте при `size < 24`
  */
 export declare const ImageBaseBadge: ({ background, ...restProps }: ImageBaseBadgeProps) => React.JSX.Element;
+//# sourceMappingURL=ImageBaseBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBaseBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAS3D,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,EAAE,UAAU,CAAC,cAAc,CAAC;IAC3F;;;;;OAKG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,iCAA6C,mBAAmB,sBAe1F,CAAC"}

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

@@ -36,3 +36,4 @@ export interface ImageBaseOverlayProps extends React.AriaAttributes {
  * Интерактивный оверлей над картинкой.
  */
 export declare const ImageBaseOverlay: ({ className, theme: themeProp, visibility: visibilityProp, children, onClick, ...restProps }: ImageBaseOverlayProps) => React.JSX.Element;
+//# sourceMappingURL=ImageBaseOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;AAI3D,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc;IACjE;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;;;;;;;;;;OAWG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,iGAO1B,qBAAqB,sBAmCvB,CAAC"}

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

@@ -1,3 +1,4 @@
 import * as React from 'react';
 import { ImageBaseContextProps } from './types';
 export declare const ImageBaseContext: React.Context<ImageBaseContextProps>;
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,gBAAgB,sCAE3B,CAAC"}

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

@@ -19,3 +19,4 @@ export declare function getOverlayIconSizeByImageBaseSize(imageSize: number): 12
 export declare namespace getOverlayIconSizeByImageBaseSize {
     var MAX_SIZE: 32;
 }
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,SAAS,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAajG;yBAbe,kCAAkC;;;AAiBlD;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,SAAS,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CASpF;yBATe,+BAA+B;;;AAa/C;;GAEG;AACH,wBAAgB,iCAAiC,CAC/C,SAAS,EAAE,MAAM,GAChB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAelC;yBAjBe,iCAAiC"}

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

@@ -8,3 +8,4 @@ export type ImageBaseExpectedIconProps = {
 export interface ImageBaseContextProps {
     size: ImageBaseSize | number;
 }
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,uEAAwE,CAAC;AAEpG,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,aAAa,GAAG,MAAM,CAAC;CAC9B"}

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

@@ -8,3 +8,4 @@ export declare function validateSize(imageSize: number): void;
 export declare function validateBadgeIcon(imageSize: number, iconProp: IconProp): void;
 export declare function validateOverlayIcon(imageSize: number, iconProp: IconProp): void;
 export {};
+//# sourceMappingURL=validators.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validators.d.ts","sourceRoot":"","sources":["../../../../src/components/ImageBase/validators.ts"],"names":[],"mappings":";AAgDA,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB;AAoCD,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,QAOzE;AAOD,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAUpD;AAID,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAU7E;AAID,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAO/E"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoRow.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAMxD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC7E,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,kDAAmD,YAAY,sBAelF,CAAC"}

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

@@ -7,3 +7,4 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>,
  * @see https://vkcom.github.io/VKUI/#/Input
  */
 export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, mode, ...restProps }: InputProps) => React.JSX.Element;
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,cAAc;CAAG;AAErB;;GAEG;AACH,eAAO,MAAM,KAAK,qGAYf,UAAU,sBAgCZ,CAAC"}

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

@@ -10,3 +10,4 @@ export declare const InputLike: {
     ({ value, length, index, onElementSelect, onClick, onFocus, ...props }: InputLikeProps): React.JSX.Element;
     displayName: string;
 };
+//# sourceMappingURL=InputLike.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputLike.d.ts","sourceRoot":"","sources":["../../../../src/components/InputLike/InputLike.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAChF,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACvC;AAgBD,eAAO,MAAM,SAAS;4EAQnB,cAAc;;CA2BhB,CAAC"}

package/dist/cssm/components/InputLike/InputLikeDivider.d.ts

@@ -1,2 +1,3 @@
 import * as React from 'react';
 export declare const InputLikeDivider: ({ children, className, ...props }: React.InputHTMLAttributes<HTMLSpanElement>) => React.JSX.Element;
+//# sourceMappingURL=InputLikeDivider.d.ts.map

package/dist/cssm/components/InputLike/InputLikeDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLikeDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,gBAAgB,sCAI1B,MAAM,mBAAmB,CAAC,eAAe,CAAC,sBAM5C,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,sDAAuD,SAAS,sBAahF,CAAC"}

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

@@ -7,6 +7,7 @@
   padding: 0;
   cursor: pointer;
   font-size: inherit;
+  font-weight: inherit;
   font-family: inherit;
   line-height: inherit;
   display: inline;

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

@@ -5,3 +5,4 @@ export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement>;
  * @see https://vkcom.github.io/VKUI/#/List
  */
 export declare const List: ({ children, ...restProps }: ListProps) => React.JSX.Element;
+//# sourceMappingURL=List.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,MAAM,SAAS,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAElE;;GAEG;AACH,eAAO,MAAM,IAAI,+BAAgC,SAAS,sBAczD,CAAC"}

package/dist/cssm/components/List/ListContext.d.ts

@@ -2,3 +2,4 @@ import * as React from 'react';
 export declare const ListContext: React.Context<{
     toggleDrag: (value: boolean) => void;
 }>;
+//# sourceMappingURL=ListContext.d.ts.map

package/dist/cssm/components/List/ListContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../../../src/components/List/ListContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,WAAW;wBACM,OAAO,KAAK,IAAI;EAC5C,CAAC"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
 export interface LocaleProviderProps {
     /**
@@ -15,3 +15,4 @@ export interface LocaleProviderProps {
  * @see https://vkcom.github.io/VKUI/#/LocaleProvider
  */
 export declare function LocaleProvider({ value, children }: LocaleProviderProps): React.JSX.Element;
+//# sourceMappingURL=LocaleProvider.d.ts.map