@vkontakte/vkui 5.4.3 → 5.5.1

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

@@ -7,4 +7,4 @@ export interface FormStatusProps extends React.HTMLAttributes<HTMLDivElement>, H
 /**
  * @see https://vkcom.github.io/VKUI/#/FormStatus
  */
-export declare const FormStatus: ({ mode, children, className, ...restProps }: FormStatusProps) => JSX.Element;
+export declare const FormStatus: ({ mode, children, className, ...restProps }: FormStatusProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({ mode, children, className, ...restProps }: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      subheader={children}\n      className={classNames(\n        'vkuiInternalFormStatus',\n        mode === 'error' &&\n          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","Banner","styles","FormStatus","mode","children","className","restProps","subheader"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,YAAY,0BAA0B;AAS7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EAAEC,KAAI,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAA4B,GAAK;IAC1F,qBACE,oBAACN;QACE,GAAGM,SAAS;QACbC,WAAWH;QACXC,WAAWN,WACT,0BACAI,SAAS,WACPJ,WAAWE,MAAM,CAAC,yBAAyB,EAAE,uCAC/CI;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLElement> {\n  mode?: 'default' | 'error';\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({ mode, children, className, ...restProps }: FormStatusProps) => {\n  return (\n    <Banner\n      {...restProps}\n      subheader={children}\n      className={classNames(\n        'vkuiInternalFormStatus',\n        mode === 'error' &&\n          classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","Banner","styles","FormStatus","mode","children","className","restProps","subheader"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,OAAOC,YAAY,0BAA0B;AAS7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EAAEC,KAAI,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAA4B;IACrF,qBACE,oBAACN;QACE,GAAGM,SAAS;QACbC,WAAWH;QACXC,WAAWN,WACT,0BACAI,SAAS,WACPJ,WAAWE,MAAM,CAAC,yBAAyB,EAAE,uCAC/CI;;AAIR,EAAE"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BaseGalleryProps } from '../BaseGallery/types';
 export interface GalleryProps extends BaseGalleryProps {
     initialSlideIndex?: number;
@@ -7,4 +7,4 @@ export interface GalleryProps extends BaseGalleryProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Gallery
  */
-export declare const Gallery: ({ initialSlideIndex, children, timeout, onChange, bullets, ...props }: GalleryProps) => JSX.Element;
+export declare const Gallery: ({ initialSlideIndex, children, timeout, onChange, bullets, ...props }: GalleryProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { BaseGalleryProps } from '../BaseGallery/types';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const isDraggable = !isControlled || Boolean(onChange);\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);\n  React.useEffect(\n    () => (timeout ? autoplay.set() : autoplay.clear()),\n    [timeout, slideIndex, autoplay],\n  );\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  return (\n    <BaseGallery\n      isDraggable={isDraggable}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </BaseGallery>\n  );\n};\n"],"names":["React","clamp","useTimeout","BaseGallery","Gallery","initialSlideIndex","children","timeout","onChange","bullets","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","isDraggable","Boolean","slides","useMemo","Children","toArray","filter","item","childCount","length","handleChange","useCallback","current","autoplay","useEffect","set","clear","safeSlideIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,WAAW,QAAQ,6BAA6B;AAQzD;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,mBAAoB,EAAC,EACrBC,SAAQ,EACRC,SAAU,EAAC,EACXC,SAAQ,EACRC,QAAO,EACP,GAAGC,OACU,GAAK;IAClB,MAAM,CAACC,iBAAiBC,cAAc,GAAGZ,MAAMa,QAAQ,CAACR;IACxD,MAAMS,eAAe,OAAOJ,MAAMK,UAAU,KAAK;IACjD,MAAMA,aAAaD,eAAeJ,MAAMK,UAAU,IAAI,IAAIJ,eAAe;IACzE,MAAMK,cAAc,CAACF,gBAAgBG,QAAQT;IAC7C,MAAMU,SAASlB,MAAMmB,OAAO,CAC1B,IAAMnB,MAAMoB,QAAQ,CAACC,OAAO,CAACf,UAAUgB,MAAM,CAAC,CAACC,OAASN,QAAQM,QAChE;QAACjB;KAAS;IAEZ,MAAMkB,aAAaN,OAAOO,MAAM;IAEhC,MAAMC,eAAyC1B,MAAM2B,WAAW,CAC9D,CAACC,UAAoB;QACnB,IAAIA,YAAYb,YAAY;YAC1B;QACF,CAAC;QACD,CAACD,gBAAgBF,cAAcgB;QAC/BpB,YAAYA,SAASoB;IACvB,GACA;QAACd;QAAcN;QAAUO;KAAW;IAGtC,MAAMc,WAAW3B,WAAW,IAAMwB,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKS,aAAajB;IAC/EP,MAAM8B,SAAS,CACb,IAAOvB,UAAUsB,SAASE,GAAG,KAAKF,SAASG,KAAK,EAAE,EAClD;QAACzB;QAASQ;QAAYc;KAAS;IAGjC,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMI,iBAAiBT,aAAa,IAAIvB,MAAMc,YAAY,GAAGS,aAAa,KAAKT,UAAU;IACzF,mCAAmC;IACnCf,MAAM8B,SAAS,CAAC,IAAM;QACpB,IAAItB,YAAYyB,mBAAmBlB,YAAY;YAC7CP,SAASyB;QACX,CAAC;QACDrB,cAAcqB;IAChB,GAAG;QAACzB;QAAUyB;QAAgBlB;KAAW;IAEzC,qBACE,oBAACZ;QACCa,aAAaA;QACZ,GAAGN,KAAK;QACTD,SAASe,aAAa,KAAKf;QAC3BM,YAAYkB;QACZzB,UAAUkB;OAETR;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { BaseGalleryProps } from '../BaseGallery/types';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  ...props\n}: GalleryProps) => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const isDraggable = !isControlled || Boolean(onChange);\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);\n  React.useEffect(\n    () => (timeout ? autoplay.set() : autoplay.clear()),\n    [timeout, slideIndex, autoplay],\n  );\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  return (\n    <BaseGallery\n      isDraggable={isDraggable}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </BaseGallery>\n  );\n};\n"],"names":["React","clamp","useTimeout","BaseGallery","Gallery","initialSlideIndex","children","timeout","onChange","bullets","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","isDraggable","Boolean","slides","useMemo","Children","toArray","filter","item","childCount","length","handleChange","useCallback","current","autoplay","useEffect","set","clear","safeSlideIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,WAAW,QAAQ,6BAA6B;AAQzD;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,mBAAoB,EAAC,EACrBC,SAAQ,EACRC,SAAU,EAAC,EACXC,SAAQ,EACRC,QAAO,EACP,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGZ,MAAMa,SAASR;IACxD,MAAMS,eAAe,OAAOJ,MAAMK,eAAe;IACjD,MAAMA,aAAaD,eAAeJ,MAAMK,cAAc,IAAIJ;IAC1D,MAAMK,cAAc,CAACF,gBAAgBG,QAAQT;IAC7C,MAAMU,SAASlB,MAAMmB,QACnB,IAAMnB,MAAMoB,SAASC,QAAQf,UAAUgB,OAAO,CAACC,OAASN,QAAQM,QAChE;QAACjB;KAAS;IAEZ,MAAMkB,aAAaN,OAAOO;IAE1B,MAAMC,eAAyC1B,MAAM2B,YACnD,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BpB,YAAYA,SAASoB;IACvB,GACA;QAACd;QAAcN;QAAUO;KAAW;IAGtC,MAAMc,WAAW3B,WAAW,IAAMwB,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKS,aAAajB;IAC/EP,MAAM8B,UACJ,IAAOvB,UAAUsB,SAASE,QAAQF,SAASG,SAC3C;QAACzB;QAASQ;QAAYc;KAAS;IAGjC,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMI,iBAAiBT,aAAa,IAAIvB,MAAMc,YAAY,GAAGS,aAAa,KAAKT;IAC/E,mCAAmC;IACnCf,MAAM8B,UAAU;QACd,IAAItB,YAAYyB,mBAAmBlB,YAAY;YAC7CP,SAASyB;QACX;QACArB,cAAcqB;IAChB,GAAG;QAACzB;QAAUyB;QAAgBlB;KAAW;IAEzC,qBACE,oBAACZ;QACCa,aAAaA;QACZ,GAAGN,KAAK;QACTD,SAASe,aAAa,KAAKf;QAC3BM,YAAYkB;QACZzB,UAAUkB;OAETR;AAGP,EAAE"}

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

@@ -12,4 +12,4 @@ export interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Gradient
  */
-export declare const Gradient: ({ mode, children, to, className, ...restProps }: GradientProps) => JSX.Element;
+export declare const Gradient: ({ mode, children, to, className, ...restProps }: GradientProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'white' | 'black';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'tint',\n  children,\n  to = 'top',\n  className,\n  ...restProps\n}: GradientProps) => {\n  return (\n    <div\n      role=\"presentation\"\n      {...restProps}\n      className={classNames(\n        {\n          tint: styles['Gradient--mode-tint'],\n          black: styles['Gradient--mode-black'],\n          white: styles['Gradient--mode-white'],\n        }[mode],\n        {\n          top: styles['Gradient--to-top'],\n          bottom: styles['Gradient--to-bottom'],\n        }[to],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Gradient","mode","children","to","className","restProps","div","role","tint","black","white","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,wBAAwB;AAa3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,MAAO,OAAM,EACbC,SAAQ,EACRC,IAAK,MAAK,EACVC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,qBACE,oBAACC;QACCC,MAAK;QACJ,GAAGF,SAAS;QACbD,WAAWN,WACT;YACEU,MAAMT,MAAM,CAAC,sBAAsB;YACnCU,OAAOV,MAAM,CAAC,uBAAuB;YACrCW,OAAOX,MAAM,CAAC,uBAAuB;QACvC,CAAC,CAACE,KAAK,EACP;YACEU,KAAKZ,MAAM,CAAC,mBAAmB;YAC/Ba,QAAQb,MAAM,CAAC,sBAAsB;QACvC,CAAC,CAACI,GAAG,EACLC;OAGDF;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Gradient.module.css';\n\nexport interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'white' | 'black';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'tint',\n  children,\n  to = 'top',\n  className,\n  ...restProps\n}: GradientProps) => {\n  return (\n    <div\n      role=\"presentation\"\n      {...restProps}\n      className={classNames(\n        {\n          tint: styles['Gradient--mode-tint'],\n          black: styles['Gradient--mode-black'],\n          white: styles['Gradient--mode-white'],\n        }[mode],\n        {\n          top: styles['Gradient--to-top'],\n          bottom: styles['Gradient--to-bottom'],\n        }[to],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Gradient","mode","children","to","className","restProps","div","role","tint","black","white","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,wBAAwB;AAa3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,MAAO,OAAM,EACbC,SAAQ,EACRC,IAAK,MAAK,EACVC,UAAS,EACT,GAAGC,WACW;IACd,qBACE,oBAACC;QACCC,MAAK;QACJ,GAAGF,SAAS;QACbD,WAAWN,WACT;YACEU,MAAMT,MAAM,CAAC,sBAAsB;YACnCU,OAAOV,MAAM,CAAC,uBAAuB;YACrCW,OAAOX,MAAM,CAAC,uBAAuB;QACvC,CAAC,CAACE,KAAK,EACP;YACEU,KAAKZ,MAAM,CAAC,mBAAmB;YAC/Ba,QAAQb,MAAM,CAAC,sBAAsB;QACvC,CAAC,CAACI,GAAG,EACLC;OAGDF;AAGP,EAAE"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { type ImageBaseProps } from '../ImageBase/ImageBase';
 import { type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';
 export { GridAvatarBadgeProps };
@@ -14,6 +14,6 @@ export interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackI
  * @see https://vkcom.github.io/VKUI/#/GridAvatar
  */
 export declare const GridAvatar: {
-    ({ src, size, className, children, ...restProps }: GridAvatarProps): JSX.Element;
-    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => JSX.Element;
+    ({ src, size, className, children, ...restProps }: GridAvatarProps): React.JSX.Element;
+    Badge: ({ className, ...restProps }: import("../ImageBase/ImageBase").ImageBaseBadgeProps) => React.JSX.Element;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["React","classNames","warnOnce","ImageBase","GridAvatarBadge","styles","GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","div","aria-hidden","map","url","index","key","style","backgroundImage","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,eAAe,QAAmC,oCAAoC;AAC/F,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,2BAA2B,GAAG;AAE3C,OAAO,MAAMC,kBAAkB,EAAE;AASjC,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EACzBC,KAAM,EAAE,CAAA,EACRC,MAAOL,yBAAwB,EAC/BM,UAAS,EACTC,SAAQ,EACR,GAAGC,WACa,GAAK;IACrB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIP,IAAIQ,MAAM,GAAGX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,MAAM,CAAC,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF,CAAC;IACH,CAAC;IAED,qBACE,oBAACJ;QAAW,GAAGW,SAAS;QAAEH,MAAMA;QAAMC,WAAWX,WAAWI,MAAM,CAAC,aAAa,EAAEO;qBAChF,oBAACO;QAAIP,WAAWP,MAAM,CAAC,iBAAiB;QAAEe,eAAAA,IAAW;OAClDV,IAAIW,GAAG,CAAC,CAACC,KAAKC,QACbA,QAAQhB,gCACN,oBAACY;YACCK,KAAKF;YACLV,WAAWP,MAAM,CAAC,mBAAmB;YACrCoB,OAAO;gBAAEC,iBAAiB,CAAC,IAAI,EAAEJ,IAAI,CAAC,CAAC;YAAC;aAExC,IAAI,IAGXT;AAGP,EAAE;AAEFJ,WAAWkB,KAAK,GAAGvB"}
+{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';\nimport { GridAvatarBadge, type GridAvatarBadgeProps } from './GridAvatarBadge/GridAvatarBadge';\nimport styles from './GridAvatar.module.css';\n\nexport { GridAvatarBadgeProps };\n\nexport const GRID_AVATAR_DEFAULT_SIZE = 48;\n\nexport const MAX_GRID_LENGTH = 4;\n\nexport interface GridAvatarProps extends Omit<ImageBaseProps, 'src' | 'fallbackIcon'> {\n  /**\n   * Массив со ссылками. От 1 до 4 элементов.\n   */\n  src?: string[];\n}\n\nconst warn = warnOnce('GridAvatar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/GridAvatar\n */\nexport const GridAvatar = ({\n  src = [],\n  size = GRID_AVATAR_DEFAULT_SIZE,\n  className,\n  children,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (src.length > MAX_GRID_LENGTH) {\n      warn(`Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`, 'error');\n    }\n  }\n\n  return (\n    <ImageBase {...restProps} size={size} className={classNames(styles['GridAvatar'], className)}>\n      <div className={styles['GridAvatar__in']} aria-hidden>\n        {src.map((url, index) =>\n          index < MAX_GRID_LENGTH ? (\n            <div\n              key={url}\n              className={styles['GridAvatar__item']}\n              style={{ backgroundImage: `url(${url})` }}\n            />\n          ) : null,\n        )}\n      </div>\n      {children}\n    </ImageBase>\n  );\n};\n\nGridAvatar.Badge = GridAvatarBadge;\n"],"names":["React","classNames","warnOnce","ImageBase","GridAvatarBadge","styles","GRID_AVATAR_DEFAULT_SIZE","MAX_GRID_LENGTH","warn","GridAvatar","src","size","className","children","restProps","process","env","NODE_ENV","length","div","aria-hidden","map","url","index","key","style","backgroundImage","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAA6B,yBAAyB;AACxE,SAASC,eAAe,QAAmC,oCAAoC;AAC/F,OAAOC,YAAY,0BAA0B;AAI7C,OAAO,MAAMC,2BAA2B,GAAG;AAE3C,OAAO,MAAMC,kBAAkB,EAAE;AASjC,MAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMO,aAAa,CAAC,EACzBC,KAAM,EAAE,CAAA,EACRC,MAAOL,yBAAwB,EAC/BM,UAAS,EACTC,SAAQ,EACR,GAAGC,WACa;IAChB,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAIP,IAAIQ,SAASX,iBAAiB;YAChCC,KAAK,CAAC,mBAAmB,EAAEE,IAAIQ,OAAO,uBAAuB,EAAEX,gBAAgB,CAAC,CAAC,EAAE;QACrF;IACF;IAEA,qBACE,oBAACJ;QAAW,GAAGW,SAAS;QAAEH,MAAMA;QAAMC,WAAWX,WAAWI,MAAM,CAAC,aAAa,EAAEO;qBAChF,oBAACO;QAAIP,WAAWP,MAAM,CAAC,iBAAiB;QAAEe,eAAAA;OACvCV,IAAIW,IAAI,CAACC,KAAKC,QACbA,QAAQhB,gCACN,oBAACY;YACCK,KAAKF;YACLV,WAAWP,MAAM,CAAC,mBAAmB;YACrCoB,OAAO;gBAAEC,iBAAiB,CAAC,IAAI,EAAEJ,IAAI,CAAC,CAAC;YAAC;aAExC,QAGPT;AAGP,EAAE;AAEFJ,WAAWkB,QAAQvB"}

package/dist/cssm/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { type ImageBaseBadgeProps } from '../../ImageBase/ImageBase';
 export type GridAvatarBadgeProps = ImageBaseBadgeProps;
-export declare const GridAvatarBadge: ({ className, ...restProps }: GridAvatarBadgeProps) => JSX.Element;
+export declare const GridAvatarBadge: ({ className, ...restProps }: GridAvatarBadgeProps) => React.JSX.Element;

package/dist/cssm/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","GridAvatarBadge","className","restProps","size","useContext","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,+BAA+B;AAIlD,OAAO,MAAMC,kBAAkB,CAAC,EAAEC,UAAS,EAAE,GAAGC,WAAiC,GAAK;IACpF,MAAM,EAAEC,KAAI,EAAE,GAAGR,MAAMS,UAAU,CAACN;IAClC,qBACE,oBAACD,UAAUQ,KAAK;QACb,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,kBAAkB,EACzBI,OAAO,MAAMJ,MAAM,CAAC,2BAA2B,EAC/CE;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../../src/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ImageBase, type ImageBaseBadgeProps, ImageBaseContext } from '../../ImageBase/ImageBase';\nimport styles from './GridAvatarBadge.module.css';\n\nexport type GridAvatarBadgeProps = ImageBaseBadgeProps;\n\nexport const GridAvatarBadge = ({ className, ...restProps }: GridAvatarBadgeProps) => {\n  const { size } = React.useContext(ImageBaseContext);\n  return (\n    <ImageBase.Badge\n      {...restProps}\n      className={classNames(\n        styles['GridAvatarBadge'],\n        size < 96 && styles['GridAvatarBadge--shifted'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","ImageBase","ImageBaseContext","styles","GridAvatarBadge","className","restProps","size","useContext","Badge"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,SAAS,EAA4BC,gBAAgB,QAAQ,4BAA4B;AAClG,OAAOC,YAAY,+BAA+B;AAIlD,OAAO,MAAMC,kBAAkB,CAAC,EAAEC,UAAS,EAAE,GAAGC,WAAiC;IAC/E,MAAM,EAAEC,KAAI,EAAE,GAAGR,MAAMS,WAAWN;IAClC,qBACE,oBAACD,UAAUQ;QACR,GAAGH,SAAS;QACbD,WAAWL,WACTG,MAAM,CAAC,kBAAkB,EACzBI,OAAO,MAAMJ,MAAM,CAAC,2BAA2B,EAC/CE;;AAIR,EAAE"}

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

@@ -24,4 +24,4 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
  */
-export declare const Group: ({ header, description, children, separator, getRootRef, mode: modeProps, padding, className, tabIndex: tabIndexProp, ...restProps }: GroupProps) => JSX.Element;
+export declare const Group: ({ header, description, children, separator, getRootRef, mode: modeProps, padding, className, tabIndex: tabIndexProp, ...restProps }: GroupProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\n};\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement>,\n    HasChildren {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACP,SAASU,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACP,SAASW,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AA2BA,MAAMK,OAAOV,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMW,QAAQ,CAAC,EACpBC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,WAAY,OAAM,EAClBC,WAAU,EACVC,MAAMC,UAAS,EACfC,SAAU,IAAG,EACbC,UAAS,EACTC,UAAUC,aAAY,EACtB,GAAGC,WACQ,GAAK;IAChB,MAAM,EAAEC,cAAa,EAAE,GAAG/B,MAAMgC,UAAU,CAACxB;IAC3C,MAAMyB,WAAW7B;IACjB,MAAM,EAAE8B,OAAQ,OAAM,EAAE,GAAG/B;IAE3B,IAAIqB,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU,MAAM;IACzC,CAAC;IAED,MAAMI,aAAaL,UAAUM,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACL,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ,CAAC;IAED,MAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX,YAAY;IAE5E,MAAMY,qBAAqBxC,WACzBW,MAAM,CAAC,mBAAmB,EAC1BU,cAAc,UAAUV,MAAM,CAAC,0BAA0B;IAG3D,qBACE,wDACE,oBAAC8B;QACE,GAAGZ,SAAS;QACbF,UAAUA;QACVe,KAAKpB;QACLI,WAAW1B,WACT,qBACAW,MAAM,CAAC,QAAQ,EACfqB,aAAa3B,SAASsC,GAAG,IAAIhC,MAAM,CAAC,aAAa,EACjDC,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMb,WAAWW,MAAM,CAAC,mBAAmB,EAAE;YAC7CiC,OAAO5C,WAAWW,MAAM,CAAC,oBAAoB,EAAE;YAC/CkC,MAAM7C,WAAWW,MAAM,CAAC,mBAAmB,EAAE;QAC/C,CAAA,CAAC,CAACY,KAAK,EACT;YACEuB,GAAGnC,MAAM,CAAC,mBAAmB;YAC7BoC,GAAGpC,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACc,QAAQ,EACVC;OAGDR,QACAE,UACAnB,aAAakB,8BACZ,oBAACT;QAASgB,WAAWf,MAAM,CAAC,qBAAqB;OAAGQ,eAIvDE,cAAc,wBACb,oBAACtB,MAAMiD,QAAQ,sBACb,oBAACvC;QACCiB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,4BAA4B;QAC7EsC,MAAM;sBAER,oBAACzC;QACCkB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,8BAA8B;;AAM3F,EAAE"}
+{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\n};\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement>,\n    HasChildren {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACP,SAASU,QAAQ,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACP,SAASW,QAAQ,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AA2BA,MAAMK,OAAOV,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMW,QAAQ,CAAC,EACpBC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,WAAY,OAAM,EAClBC,WAAU,EACVC,MAAMC,UAAS,EACfC,SAAU,IAAG,EACbC,UAAS,EACTC,UAAUC,aAAY,EACtB,GAAGC,WACQ;IACX,MAAM,EAAEC,cAAa,EAAE,GAAG/B,MAAMgC,WAAWxB;IAC3C,MAAMyB,WAAW7B;IACjB,MAAM,EAAE8B,OAAQ,OAAM,EAAE,GAAG/B;IAE3B,IAAIqB,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU;IACnC;IAEA,MAAMI,aAAaL,UAAUM,SAAS;IAEtC,IACEC,QAAQC,IAAIC,aAAa,iBACzBJ,cACC,CAAA,CAACL,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ;IAEA,MAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX;IAEhE,MAAMY,qBAAqBxC,WACzBW,MAAM,CAAC,mBAAmB,EAC1BU,cAAc,UAAUV,MAAM,CAAC,0BAA0B;IAG3D,qBACE,wDACE,oBAAC8B;QACE,GAAGZ,SAAS;QACbF,UAAUA;QACVe,KAAKpB;QACLI,WAAW1B,WACT,qBACAW,MAAM,CAAC,QAAQ,EACfqB,aAAa3B,SAASsC,OAAOhC,MAAM,CAAC,aAAa,EACjDC,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMb,WAAWW,MAAM,CAAC,mBAAmB,EAAE;YAC7CiC,OAAO5C,WAAWW,MAAM,CAAC,oBAAoB,EAAE;YAC/CkC,MAAM7C,WAAWW,MAAM,CAAC,mBAAmB,EAAE;QAC/C,CAAA,CAAC,CAACY,KAAK,EACT;YACEuB,GAAGnC,MAAM,CAAC,mBAAmB;YAC7BoC,GAAGpC,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACc,QAAQ,EACVC;OAGDR,QACAE,UACAnB,aAAakB,8BACZ,oBAACT;QAASgB,WAAWf,MAAM,CAAC,qBAAqB;OAAGQ,eAIvDE,cAAc,wBACb,oBAACtB,MAAMiD,8BACL,oBAACvC;QACCiB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,4BAA4B;QAC7EsC,MAAM;sBAER,oBAACzC;QACCkB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,8BAA8B;;AAM3F,EAAE"}

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

@@ -17,4 +17,4 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootR
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */
-export declare const Header: ({ mode, size, children, subtitle, indicator, aside, getRootRef, multiline, className, ...restProps }: HeaderProps) => JSX.Element;
+export declare const Header: ({ mode, size, children, subtitle, indicator, aside, getRootRef, multiline, className, ...restProps }: HeaderProps) => React.JSX.Element;

package/dist/cssm/components/Header/Header.js

@@ -37,28 +37,6 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
                 });
         }
     }
-    if (platform === Platform.VKCOM) {
-        switch(mode){
-            case 'primary':
-                return isLarge ? /*#__PURE__*/ React.createElement(Title, {
-                    level: "2",
-                    weight: "1",
-                    ...restProps
-                }) : /*#__PURE__*/ React.createElement(Headline, {
-                    level: "1",
-                    weight: "2",
-                    ...restProps
-                });
-            case 'secondary':
-                return /*#__PURE__*/ React.createElement(Footnote, {
-                    caps: true,
-                    weight: "1",
-                    ...restProps
-                });
-            case 'tertiary':
-                return /*#__PURE__*/ React.createElement(Footnote, restProps);
-        }
-    }
     switch(mode){
         case 'primary':
             return isLarge ? /*#__PURE__*/ React.createElement(Title, {
@@ -87,11 +65,10 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
  * @see https://vkcom.github.io/VKUI/#/Header
  */ export const Header = ({ mode ='primary' , size ='regular' , children , subtitle , indicator , aside , getRootRef , multiline , className , ...restProps })=>{
     const platform = usePlatform();
-    const AsideTypography = platform === Platform.VKCOM ? Subhead : Paragraph;
     return /*#__PURE__*/ React.createElement("header", {
         ...restProps,
         ref: getRootRef,
-        className: classNames(styles['Header'], platform === Platform.VKCOM && styles['Header--vkcom'], platform === Platform.ANDROID && styles['Header--android'], platform === Platform.IOS && styles['Header--ios'], {
+        className: classNames(styles['Header'], platform === Platform.IOS && styles['Header--ios'], {
             primary: styles['Header--mode-primary'],
             secondary: styles['Header--mode-secondary'],
             tertiary: styles['Header--mode-tertiary']
@@ -111,7 +88,7 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
     }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Subhead, {
         className: styles['Header__subtitle'],
         Component: "span"
-    }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(AsideTypography, {
+    }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(Paragraph, {
         className: styles['Header__aside'],
         Component: "span"
     }, aside));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"1\" {...restProps} />\n        ) : (\n          <Headline level=\"1\" weight=\"2\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote caps weight=\"1\" {...restProps} />;\n      case 'tertiary':\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  const AsideTypography = platform === Platform.VKCOM ? Subhead : Paragraph;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.VKCOM && styles['Header--vkcom'],\n        platform === Platform.ANDROID && styles['Header--android'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content-in--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","header","ref","ANDROID","primary","secondary","tertiary","div","Component","span"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content-in--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <Paragraph className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </Paragraph>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","header","ref","primary","secondary","tertiary","div","Component","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,sBAAsB;AAoBzC,MAAMC,gBAAgB,CAAC,EAAEC,KAAI,EAAEC,KAAI,EAAE,GAAGC,WAA+B;IACrE,MAAMC,UAAUF,SAAS;IAEzB,MAAMG,WAAWb;IACjB,IAAIa,aAAaZ,SAASa,KAAK;QAC7B,OAAQL;YACN,KAAK;gBACH,OAAOG,wBACL,oBAACN;oBAAMS,OAAM;oBAAIC,QAAO;oBAAK,GAAGL,SAAS;mCAEzC,oBAACL;oBAAMU,QAAO;oBAAID,OAAM;oBAAK,GAAGJ,SAAS;;YAE7C,KAAK;gBACH,qBAAO,oBAACT;oBAASc,QAAO;oBAAIC,MAAAA;oBAAM,GAAGN,SAAS;;YAChD,KAAK;gBACH,qBAAO,oBAACL;oBAAMU,QAAO;oBAAID,OAAM;oBAAK,GAAGJ,SAAS;;QACpD;IACF;IAEA,OAAQF;QACN,KAAK;YACH,OAAOG,wBACL,oBAACN;gBAAMS,OAAM;gBAAIC,QAAO;gBAAK,GAAGL,SAAS;+BAEzC,oBAACR;gBAASa,QAAO;gBAAK,GAAGL,SAAS;;QAEtC,KAAK;YACH,qBAAO,oBAACT;gBAASc,QAAO;gBAAIC,MAAAA;gBAAM,GAAGN,SAAS;;QAChD,KAAK;YACH,qBAAO,oBAACR;gBAASa,QAAO;gBAAK,GAAGL,SAAS;;IAC7C;IAEA,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMO,SAAS,CAAC,EACrBT,MAAO,UAAS,EAChBC,MAAO,UAAS,EAChBS,SAAQ,EACRC,SAAQ,EACRC,UAAS,EACTC,MAAK,EACLC,WAAU,EACVC,UAAS,EACTC,UAAS,EACT,GAAGd,WACS;IACZ,MAAME,WAAWb;IAEjB,qBACE,oBAAC0B;QACE,GAAGf,SAAS;QACbgB,KAAKJ;QACLE,WAAW5B,WACTU,MAAM,CAAC,SAAS,EAChBM,aAAaZ,SAASa,OAAOP,MAAM,CAAC,cAAc,EAClD;YACEqB,SAASrB,MAAM,CAAC,uBAAuB;YACvCsB,WAAWtB,MAAM,CAAC,yBAAyB;YAC3CuB,UAAUvB,MAAM,CAAC,wBAAwB;QAC3C,CAAC,CAACE,KAAK,EACPV,qBAAqBsB,cAAcd,MAAM,CAAC,aAAa,EACvDT,aAAasB,aAAab,MAAM,CAAC,wBAAwB,EACzDkB;qBAGF,oBAACM;QAAIN,WAAWlB,MAAM,CAAC,eAAe;qBACpC,oBAACC;QACCiB,WAAWlB,MAAM,CAAC,kBAAkB;QACpCyB,WAAU;QACVvB,MAAMA;QACNC,MAAMA;qBAEN,oBAACuB;QACCR,WAAW5B,WACTU,MAAM,CAAC,qBAAqB,EAC5BiB,aAAajB,MAAM,CAAC,gCAAgC;OAGrDY,WAEFrB,aAAauB,4BACZ,oBAACnB;QAASuB,WAAWlB,MAAM,CAAC,oBAAoB;QAAES,QAAO;OACtDK,aAKNvB,aAAasB,2BACZ,oBAACf;QAAQoB,WAAWlB,MAAM,CAAC,mBAAmB;QAAEyB,WAAU;OACvDZ,YAKNtB,aAAawB,wBACZ,oBAAClB;QAAUqB,WAAWlB,MAAM,CAAC,gBAAgB;QAAEyB,WAAU;OACtDV;AAKX,EAAE"}

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

@@ -43,10 +43,6 @@
   color: var(--vkui--color_text_secondary);
 }
 
-.Header--mode-primary .Header__content:not(:last-child) {
-  margin-top: -1px;
-}
-
 .Header--mode-secondary:not(.Header--pi):not(.Header--with-subtitle) .Header__main,
 .Header--mode-tertiary .Header__main {
   color: var(--vkui--color_text_secondary);
@@ -88,27 +84,23 @@
   top: 1px;
 }
 
-/**
- * ANDROID
- */
-
-.Header--android .Header__main {
+.Header__main {
   margin: 15px 0 9px;
 }
 
-.Header--android.Header--mode-primary .Header__main {
+.Header--mode-primary .Header__main {
   margin-bottom: 7px;
 }
 
-.Header--android.Header--mode-primary .Header__content:not(:last-child) {
+.Header--mode-primary .Header__content:not(:last-child) {
   margin-top: 0;
 }
 
-.Header--android.Header--mode-primary .Header__content:last-child {
+.Header--mode-primary .Header__content:last-child {
   margin-bottom: 2px;
 }
 
-.Header--android.Header--mode-tertiary .Header__main {
+.Header--mode-tertiary .Header__main {
   margin-top: 11px;
 }
 
@@ -129,33 +121,15 @@
 }
 
 .Header--ios.Header--mode-tertiary .Header__main {
-  margin-top: 12px;
-  margin-bottom: 8px;
+  margin: 12px 0 8px;
 }
 
-/**
- * VKCOM
- */
-
-.Header--vkcom {
-  height: 64px;
-  align-items: center;
-}
-
-.Header--vkcom .Header__main {
-  color: var(--vkui--color_text_primary);
-}
-
-.Header--vkcom.Header--mode-primary .Header__content:not(:last-child) {
-  margin-top: 0;
-}
-
-.Header--vkcom.Header--mode-secondary {
-  height: 56px;
+.Header--ios.Header--mode-primary .Header__content:not(:last-child) {
+  margin-top: -1px;
 }
 
-.Header--vkcom.Header--mode-tertiary {
-  height: 40px;
+.Header--ios.Header--mode-primary .Header__content:last-child {
+  margin-bottom: initial;
 }
 
 /**

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

@@ -19,4 +19,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) => JSX.Element;
+export declare const HorizontalCell: ({ className, header, style, subtitle, size, children, getRootRef, getRef, extraSubtitle, ...restProps }: HorizontalCellProps) => React.JSX.Element;

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 } 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\ninterface CellTypographyProps extends React.HTMLAttributes<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(\n        styles['HorizontalCell'],\n        {\n          s: styles['HorizontalCell--size-s'],\n          m: styles['HorizontalCell--size-m'],\n          l: styles['HorizontalCell--size-l'],\n        }[size],\n        className,\n      )}\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","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref","s","m","l"],"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;AAMjD,MAAMC,iBAAiB,CAAC,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGC,WAAgC,GAAK;IAChF,OAAOF,SAAS,oBACd,oBAACL,SAAYO,WAAYD,0BAEzB,oBAACJ,SAAYK,WAAYD,SAC1B;AACH;AAuBA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,UAAS,EACTC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRP,MAAO,IAAG,EACVC,wBAAW,oBAACR;IAAOO,MAAM;GAAM,EAC/BQ,WAAU,EACVC,OAAM,EACNC,cAAa,EACb,GAAGR,WACiB,GAAK;IACzB,qBACE,oBAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWb,WACTO,MAAM,CAAC,iBAAiB,EACxB;YACEe,GAAGf,MAAM,CAAC,yBAAyB;YACnCgB,GAAGhB,MAAM,CAAC,yBAAyB;YACnCiB,GAAGjB,MAAM,CAAC,yBAAyB;QACrC,CAAC,CAACE,KAAK,EACPI;qBAGF,oBAACV;QAASU,WAAWN,MAAM,CAAC,uBAAuB;QAAEU,YAAYC;QAAS,GAAGP,SAAS;OACnFV,aAAaS,2BACZ,oBAACU;QAAIP,WAAWN,MAAM,CAAC,wBAAwB;OAAGG,yBAEpD,oBAACU;QAAIP,WAAWN,MAAM,CAAC,0BAA0B;OAC9CN,aAAaa,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDb,aAAae,2BACZ,oBAACX;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGS,WAE3Df,aAAakB,gCACZ,oBAACd;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGY;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 } 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\ninterface CellTypographyProps extends React.HTMLAttributes<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(\n        styles['HorizontalCell'],\n        {\n          s: styles['HorizontalCell--size-s'],\n          m: styles['HorizontalCell--size-m'],\n          l: styles['HorizontalCell--size-l'],\n        }[size],\n        className,\n      )}\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","CellTypography","size","children","restProps","HorizontalCell","className","header","style","subtitle","getRootRef","getRef","extraSubtitle","div","ref","s","m","l"],"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;AAMjD,MAAMC,iBAAiB,CAAC,EAAEC,KAAI,EAAEC,SAAQ,EAAE,GAAGC,WAAgC;IAC3E,OAAOF,SAAS,oBACd,oBAACL,SAAYO,WAAYD,0BAEzB,oBAACJ,SAAYK,WAAYD;AAE7B;AAuBA;;CAEC,GACD,OAAO,MAAME,iBAAiB,CAAC,EAC7BC,UAAS,EACTC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRP,MAAO,IAAG,EACVC,wBAAW,oBAACR;IAAOO,MAAM;GAAM,EAC/BQ,WAAU,EACVC,OAAM,EACNC,cAAa,EACb,GAAGR,WACiB;IACpB,qBACE,oBAACS;QACCC,KAAKJ;QACLF,OAAOA;QACPF,WAAWb,WACTO,MAAM,CAAC,iBAAiB,EACxB;YACEe,GAAGf,MAAM,CAAC,yBAAyB;YACnCgB,GAAGhB,MAAM,CAAC,yBAAyB;YACnCiB,GAAGjB,MAAM,CAAC,yBAAyB;QACrC,CAAC,CAACE,KAAK,EACPI;qBAGF,oBAACV;QAASU,WAAWN,MAAM,CAAC,uBAAuB;QAAEU,YAAYC;QAAS,GAAGP,SAAS;OACnFV,aAAaS,2BACZ,oBAACU;QAAIP,WAAWN,MAAM,CAAC,wBAAwB;OAAGG,yBAEpD,oBAACU;QAAIP,WAAWN,MAAM,CAAC,0BAA0B;OAC9CN,aAAaa,yBAAW,oBAACN;QAAeC,MAAMA;OAAOK,SACrDb,aAAae,2BACZ,oBAACX;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGS,WAE3Df,aAAakB,gCACZ,oBAACd;QAASQ,WAAWN,MAAM,CAAC,2BAA2B;OAAGY;AAMtE,EAAE"}

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

@@ -26,4 +26,4 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => React.JSX.Element;

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

@@ -4,7 +4,7 @@ import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
 import { easeInOutSine } from '../../lib/fx';
-import { HorizontalScrollArrow } from './HorizontalScrollArrow';
+import { ScrollArrow } from '../ScrollArrow/ScrollArrow';
 import styles from './HorizontalScroll.module.css';
 /**
  * timing method
@@ -150,23 +150,23 @@ function doScroll({ scrollElement , getScrollPosition , animationQueue , onScrol
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
-        className: classNames(styles['HorizontalScroll'], 'vkuiInternalHorizontalScroll', showArrows === 'always' && 'vkuiInternalHorizontalScroll--withConstArrows', className)
+        className: classNames(styles['HorizontalScroll'], 'vkuiInternalHorizontalScroll', showArrows === 'always' && styles['HorizontalScroll--withConstArrows'], className)
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['HorizontalScroll__in'],
         ref: scrollerRef
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['HorizontalScroll__in-wrapper']
-    }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
+    }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(ScrollArrow, {
         size: arrowSize,
         offsetY: arrowOffsetY,
         direction: "left",
-        className: styles['HorizontalScroll__arrowLeft'],
+        className: classNames(styles['HorizontalScroll__arrow'], styles['HorizontalScroll__arrowLeft']),
         onClick: scrollToLeft
-    }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
+    }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ React.createElement(ScrollArrow, {
         size: arrowSize,
         offsetY: arrowOffsetY,
         direction: "right",
-        className: styles['HorizontalScroll__arrowRight'],
+        className: classNames(styles['HorizontalScroll__arrow'], styles['HorizontalScroll__arrowRight']),
         onClick: scrollToRight
     }));
 };

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 } from '../../types';\nimport { HorizontalScrollArrow } from './HorizontalScrollArrow';\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 React.HTMLAttributes<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  className,\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 onscroll = 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', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\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    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && 'vkuiInternalHorizontalScroll--withConstArrows',\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={styles['HorizontalScroll__arrowLeft']}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","HorizontalScrollArrow","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","className","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","ref","undefined","size","offsetY","direction","onClick"],"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 { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\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 React.HTMLAttributes<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  className,\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 onscroll = 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', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\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    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\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>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","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","className","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","ref","undefined","size","offsetY","direction","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,aAAa,QAAQ,eAAe;AAE7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,OAAOC,YAAY,gCAAgC;AA4CnD;;CAEC,GACD,SAASC;IACP,OAAOC,eAAeA,YAAYD,MAAMC,YAAYD,QAAQE,KAAKF;AACnE;AAEA;;;CAGC,GACD,MAAMG,2BAA2B,CAACC,KAAoBC,KAAKC,KAAKF,GAAGG;AAEnE;;;;CAIC,GACD,MAAMC,wBAAwB;AAE9B,SAASC,SAAS,EAChBC,cAAa,EACbC,kBAAiB,EACjBC,eAAc,EACdC,sBAAqB,EACrBC,YAAW,EACXC,cAAa,EACbC,mBAAkB,EAClBC,yBAA0BT,sBAAqB,EACjC;IACd,IAAI,CAACE,iBAAiB,CAACC,mBAAmB;QACxC;IACF;IAEA;;GAEC,GACD,MAAMO,UAAUF,qBAAqBN,cAAcS;IAEnD,IAAIC,YAAYjB,yBAAyBO;IACzC,IAAIW,UAAUV,kBAAkBS;IAEhCL;IAEA,IAAIM,WAAWH,SAAS;QACtBL;QACAQ,UAAUH;IACZ;IAEA,MAAMI,YAAYtB;IAEjB,CAAA,SAASuB;QACR,IAAI,CAACb,eAAe;YAClBI;YACA;QACF;QAEA,MAAMU,OAAOxB;QACb,MAAMyB,UAAUpB,KAAKqB,IAAI,AAACF,CAAAA,OAAOF,SAAQ,IAAKL,yBAAyB;QAEvE,MAAMU,QAAQ9B,cAAc4B;QAE5B,MAAMG,cAAcR,YAAY,AAACC,CAAAA,UAAUD,SAAQ,IAAKO;QACxDjB,cAAcH,aAAaF,KAAKC,KAAKsB;QAErC,IAAIzB,yBAAyBO,mBAAmBL,KAAKwB,IAAI,GAAGR,YAAYI,YAAY,GAAG;YACrFK,sBAAsBP;YACtB;QACF;QAEAT;QACAF,eAAemB;QACf,IAAInB,eAAeoB,SAAS,GAAG;YAC7BpB,cAAc,CAAC,EAAE;QACnB;IACF,CAAA;AACF;AAEA;;CAEC,GACD,OAAO,MAAMqB,mBAAmB,CAAC,EAC/BC,SAAQ,EACRC,gBAAe,EACfC,iBAAgB,EAChBC,YAAa,KAAI,EACjBC,WAAY,IAAG,EACfC,aAAY,EACZtB,yBAA0BT,sBAAqB,EAC/CgC,OAAM,EACNC,UAAS,EACTC,kBAAmB,MAAK,EACxB,GAAGC,WACmB;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGtD,MAAMuD,SAAS;IACzD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGzD,MAAMuD,SAAS;IAE3D,MAAMG,uBAAuB1D,MAAM2D,OAAO;IAE1C,MAAMC,cAAcvD,aAAa4C;IAEjC,MAAM5B,iBAAiBrB,MAAM2D,OAAuB,EAAE;IAEtD,MAAME,aAAa1D;IAEnB,MAAM2D,WAAW9D,MAAM+D,YACrB,CAAC3C;QACC,MAAMD,gBAAgByC,YAAYI;QAElC3C,eAAe2C,QAAQC,KAAK,IAC1B/C,SAAS;gBACPC;gBACAC;gBACAC,gBAAgBA,eAAe2C;gBAC/B1C,uBAAuB,IAAMmC,kBAAkB;gBAC/ClC,aAAa,IAAOmC,qBAAqBM,UAAU;gBACnDxC,eAAe,IAAOkC,qBAAqBM,UAAU;gBACrDvC,oBAAoBN,eAAe+C,mBAAmBC,eAAe;gBACrEzC;YACF;QAEF,IAAIL,eAAe2C,QAAQvB,WAAW,GAAG;YACvCpB,eAAe2C,OAAO,CAAC,EAAE;QAC3B;IACF,GACA;QAACtC;QAAyBkC;KAAY;IAGxC,MAAMQ,eAAepE,MAAM+D,YAAY;QACrC,MAAM3C,oBACJwB,mBAAoB,CAAA,CAACyB,IAAcA,IAAIT,YAAYI,QAASpC,WAAU;QACxEkC,SAAS1C;IACX,GAAG;QAACwB;QAAiBkB;QAAUF;KAAY;IAE3C,MAAMU,gBAAgBtE,MAAM+D,YAAY;QACtC,MAAM3C,oBACJyB,oBAAqB,CAAA,CAACwB,IAAcA,IAAIT,YAAYI,QAASpC,WAAU;QACzEkC,SAAS1C;IACX,GAAG;QAACyB;QAAkBiB;QAAUF;KAAY;IAE5C,MAAMW,WAAWvE,MAAM+D,YAAY;QACjC,IAAIjB,cAAce,cAAcD,YAAYI,WAAW,CAACN,qBAAqBM,SAAS;YACpF,MAAM7C,gBAAgByC,YAAYI;YAElCV,iBAAiBnC,cAAcH,aAAa;YAC5CyC,kBACE7C,yBAAyBO,iBAAiBA,cAAcS,cACtDT,cAAcgD;QAEpB;IACF,GAAG;QAACN;QAAYD;QAAad;KAAW;IAExC,MAAM0B,cAAcpE,iBAAiB,UAAUmE;IAC/CvE,MAAMyE,UAAU;QACd,IAAIb,YAAYI,SAAS;YACvBQ,YAAYE,IAAId,YAAYI;QAC9B;IACF,GAAG;QAACQ;QAAaZ;KAAY;IAC7B5D,MAAMyE,UAAUF,UAAU;QAACX;QAAajB;QAAU4B;KAAS;IAE3D;;GAEC,GACD,MAAMI,UAAU3E,MAAM+D,YACpB,CAACa;QACChB,YAAYI,QAASa,SAAS;YAAEC,MAAMF,EAAEG,SAASH,EAAEI;YAAQC,UAAU;QAAO;QAC5EL,EAAEM;IACJ,GACA;QAACtB;KAAY;IAGf,MAAMuB,aAAa/E,iBAAiB,SAASuE;IAC7C3E,MAAMyE,UAAU;QACd,IAAI,CAACb,YAAYI,WAAW,CAACb,kBAAkB;YAC7C,OAAOjD;QACT;QAEAiF,WAAWT,IAAId,YAAYI;QAE3B,OAAOmB,WAAWC;IACpB,GAAG;QAACD;QAAYvB;QAAaT;KAAiB;IAE9C,qBACE,oBAACkC;QACE,GAAGjC,SAAS;QACbF,WAAWjD,WACTO,MAAM,CAAC,mBAAmB,EAC1B,gCACAsC,eAAe,YAAYtC,MAAM,CAAC,oCAAoC,EACtE0C;qBAGF,oBAACmC;QAAInC,WAAW1C,MAAM,CAAC,uBAAuB;QAAE8E,KAAK1B;qBACnD,oBAACyB;QAAInC,WAAW1C,MAAM,CAAC,+BAA+B;OAAGmC,YAE1DG,cAAee,CAAAA,cAAcA,eAAe0B,SAAQ,KAAMlC,+BACzD,oBAAC9C;QACCiF,MAAMzC;QACN0C,SAASzC;QACT0C,WAAU;QACVxC,WAAWjD,WACTO,MAAM,CAAC,0BAA0B,EACjCA,MAAM,CAAC,8BAA8B;QAEvCmF,SAASvB;QAGZtB,cAAee,CAAAA,cAAcA,eAAe0B,SAAQ,KAAM/B,gCACzD,oBAACjD;QACCiF,MAAMzC;QACN0C,SAASzC;QACT0C,WAAU;QACVxC,WAAWjD,WACTO,MAAM,CAAC,0BAA0B,EACjCA,MAAM,CAAC,+BAA+B;QAExCmF,SAASrB;;AAKnB,EAAE"}

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

@@ -27,6 +27,22 @@
   transition: transform 0.2s;
 }
 
+.HorizontalScroll__arrow {
+  position: absolute;
+  top: 0;
+  opacity: 0;
+}
+
+.HorizontalScroll:hover .HorizontalScroll__arrow {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.HorizontalScroll--withConstArrows .HorizontalScroll__arrow,
+.HorizontalScroll--withConstArrows:hover .HorizontalScroll__arrow,
+.HorizontalScroll .HorizontalScroll__arrow:hover {
+  opacity: 1;
+}
+
 .HorizontalScroll__arrowLeft:hover ~ .HorizontalScroll__in .HorizontalScroll__in-wrapper {
   transform: translateX(8px);
 }

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

@@ -26,4 +26,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) => JSX.Element;
+export declare const HoverPopper: ({ getRef, content, children, onShownChange, shown: _shown, showDelay, hideDelay, ...restProps }: HoverPopperProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useEventListener","usePatchChildrenRef","useTimeout","useIsomorphicLayoutEffect","Popper","HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","computedShown","setComputedShown","useState","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add","Fragment","onMouseOver","onMouseOut","targetRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,MAAM,QAA2B,mBAAmB;AA6B7D,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAM,EACNC,QAAO,EACPC,SAAQ,EACRC,cAAa,EACbC,OAAOC,OAAM,EACbC,WAAY,IAAG,EACfC,WAAY,IAAG,EACf,GAAGC,WACc,GAAK;IACtB,MAAM,CAACC,eAAeC,iBAAiB,GAAGjB,MAAMkB,QAAQ,CAACN,UAAU,KAAK;IAExE,MAAMD,QAAQ,OAAOC,WAAW,YAAYA,SAASI,aAAa;IAElE,MAAMG,WAAW,CAACC,QAAmB;QACnC,IAAI,OAAOR,WAAW,WAAW;YAC/BK,iBAAiBG;QACnB,CAAC;QACD,OAAOV,kBAAkB,cAAcA,cAAcU;IACvD;IAEA,MAAMC,cAAclB,WAAW,IAAM;QACnCgB,SAAS,IAAI;IACf,GAAGN;IAEH,MAAMS,cAAcnB,WAAW,IAAM;QACnCgB,SAAS,KAAK;IAChB,GAAGL;IAEH,MAAM,CAACS,UAAUC,MAAM,GAAGtB,oBAAoBO;IAE9C,MAAMgB,gBAAgB,IAAM;QAC1BH,YAAYI,KAAK;QACjBL,YAAYM,GAAG;IACjB;IAEA,MAAMC,gBAAgB,IAAM;QAC1BP,YAAYK,KAAK;QACjBJ,YAAYK,GAAG;IACjB;IAEA,MAAME,sBAAsB5B,iBAAiB,gBAAgBwB;IAC7D,MAAMK,sBAAsB7B,iBAAiB,gBAAgB2B;IAE7DxB,0BAA0B,IAAM;QAC9B,IAAImB,SAASQ,OAAO,EAAE;YACpBF,oBAAoBG,GAAG,CAACT,SAASQ,OAAO;YACxCD,oBAAoBE,GAAG,CAACT,SAASQ,OAAO;QAC1C,CAAC;IACH,GAAG,EAAE;IAEL,qBACE,oBAAC/B,MAAMiC,QAAQ,QACZT,OACAb,uBACC,oBAACN;QACE,GAAGU,SAAS;QACbmB,aAAaZ,YAAYI,KAAK;QAC9BS,YAAYP;QACZrB,QAAQA;QACR6B,WAAWb;OAEVf;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/HoverPopper/HoverPopper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\n\nexport interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {\n  /**\n   * Содержимое тултипа\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Количество миллисекунд, после которых произойдет показ дропдауна\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдет скрытие дропдауна\n   */\n  hideDelay?: number;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const HoverPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  showDelay = 150,\n  hideDelay = 150,\n  ...restProps\n}: HoverPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n\n  const shown = typeof _shown === 'boolean' ? _shown : computedShown;\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => {\n    setShown(true);\n  }, showDelay);\n\n  const hideTimeout = useTimeout(() => {\n    setShown(false);\n  }, hideDelay);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const onTargetEnter = () => {\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const onTargetLeave = () => {\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);\n  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);\n\n  useIsomorphicLayoutEffect(() => {\n    if (childRef.current) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n  }, []);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          onMouseOver={hideTimeout.clear}\n          onMouseOut={onTargetLeave}\n          getRef={getRef}\n          targetRef={childRef}\n        >\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useEventListener","usePatchChildrenRef","useTimeout","useIsomorphicLayoutEffect","Popper","HoverPopper","getRef","content","children","onShownChange","shown","_shown","showDelay","hideDelay","restProps","computedShown","setComputedShown","useState","setShown","value","showTimeout","hideTimeout","childRef","child","onTargetEnter","clear","set","onTargetLeave","targetEnterListener","targetLeaveListener","current","add","Fragment","onMouseOver","onMouseOut","targetRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,MAAM,QAA2B,mBAAmB;AA6B7D,OAAO,MAAMC,cAAc,CAAC,EAC1BC,OAAM,EACNC,QAAO,EACPC,SAAQ,EACRC,cAAa,EACbC,OAAOC,OAAM,EACbC,WAAY,IAAG,EACfC,WAAY,IAAG,EACf,GAAGC,WACc;IACjB,MAAM,CAACC,eAAeC,iBAAiB,GAAGjB,MAAMkB,SAASN,UAAU;IAEnE,MAAMD,QAAQ,OAAOC,WAAW,YAAYA,SAASI;IAErD,MAAMG,WAAW,CAACC;QAChB,IAAI,OAAOR,WAAW,WAAW;YAC/BK,iBAAiBG;QACnB;QACA,OAAOV,kBAAkB,cAAcA,cAAcU;IACvD;IAEA,MAAMC,cAAclB,WAAW;QAC7BgB,SAAS;IACX,GAAGN;IAEH,MAAMS,cAAcnB,WAAW;QAC7BgB,SAAS;IACX,GAAGL;IAEH,MAAM,CAACS,UAAUC,MAAM,GAAGtB,oBAAoBO;IAE9C,MAAMgB,gBAAgB;QACpBH,YAAYI;QACZL,YAAYM;IACd;IAEA,MAAMC,gBAAgB;QACpBP,YAAYK;QACZJ,YAAYK;IACd;IAEA,MAAME,sBAAsB5B,iBAAiB,gBAAgBwB;IAC7D,MAAMK,sBAAsB7B,iBAAiB,gBAAgB2B;IAE7DxB,0BAA0B;QACxB,IAAImB,SAASQ,SAAS;YACpBF,oBAAoBG,IAAIT,SAASQ;YACjCD,oBAAoBE,IAAIT,SAASQ;QACnC;IACF,GAAG,EAAE;IAEL,qBACE,oBAAC/B,MAAMiC,gBACJT,OACAb,uBACC,oBAACN;QACE,GAAGU,SAAS;QACbmB,aAAaZ,YAAYI;QACzBS,YAAYP;QACZrB,QAAQA;QACR6B,WAAWb;OAEVf;AAKX,EAAE"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HasChildren } from '../../types';
 import { TappableProps } from '../Tappable/Tappable';
 export interface IconButtonProps extends TappableProps, HasChildren {
@@ -6,4 +6,4 @@ export interface IconButtonProps extends TappableProps, HasChildren {
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
-export declare const IconButton: ({ children, className, ...restProps }: IconButtonProps) => JSX.Element;
+export declare const IconButton: ({ children, className, ...restProps }: IconButtonProps) => React.JSX.Element;