@vkontakte/vkui 6.2.2 → 6.3.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n  /**\n   * (test) iOS only. testId кнопки, которая активирует кнопку удаления\n   */\n  toggleButtonTestId?: string;\n  /**\n   * (test) testId кнопки удаления\n   */\n  removeButtonTestId?: string;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children: childrenProp,\n  toggleButtonTestId,\n  removeButtonTestId,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        className={classNames(\n          styles['Removable__action'],\n          styles['Removable__toggle'],\n          'vkuiInternalRemovable__action',\n        )}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n        data-testid={toggleButtonTestId}\n      >\n        <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {typeof childrenProp === 'function'\n        ? childrenProp({ isRemoving: removeOffset > 0 })\n        : childrenProp}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n        data-testid={removeButtonTestId}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableIosRenderProps {\n  /**\n   * Показывает состояние Removable на платформе iOS при клике на иконку удаления.\n   * Для имитации поведения на iOS при клике на иконку удаления самого удаление не происходит,\n   * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n   * Когда контент сдвинут `isRemoving = true`.\n   */\n  isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n    RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  toggleButtonTestId,\n  removeButtonTestId,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        platform === 'ios' && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n      )}\n    >\n      {platform !== 'ios' && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={classNames(styles['Removable__action'], 'vkuiInternalRemovable__action')}\n            onClick={onRemoveClick}\n            label={removePlaceholderString}\n            data-testid={removeButtonTestId}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === 'ios' && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n          toggleButtonTestId={toggleButtonTestId}\n          removeButtonTestId={removeButtonTestId}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","onClick","disabled","data-testid","i","role","isRemoving","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","onRemoveClick","preventDefault","baseClassName","activeMode","hoverMode","label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n  /**\n   * (test) iOS only. testId кнопки, которая активирует кнопку удаления\n   */\n  toggleButtonTestId?: string;\n  /**\n   * (test) testId кнопки удаления\n   */\n  removeButtonTestId?: string;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children: childrenProp,\n  toggleButtonTestId,\n  removeButtonTestId,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        className={classNames(\n          styles['Removable__action'],\n          styles['Removable__toggle'],\n          'vkuiInternalRemovable__action',\n        )}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n        data-testid={toggleButtonTestId}\n      >\n        <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {typeof childrenProp === 'function'\n        ? childrenProp({ isRemoving: removeOffset > 0 })\n        : childrenProp}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n        data-testid={removeButtonTestId}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableIosRenderProps {\n  /**\n   * Показывает состояние Removable на платформе iOS при клике на иконку удаления.\n   * Для имитации поведения на iOS при клике на иконку удаления самого удаление не происходит,\n   * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n   * Когда контент сдвинут `isRemoving = true`.\n   */\n  isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n    RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  toggleButtonTestId,\n  removeButtonTestId,\n  ...restProps\n}: RemovableOwnProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        platform === 'ios' && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n      )}\n    >\n      {platform !== 'ios' && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={classNames(styles['Removable__action'], 'vkuiInternalRemovable__action')}\n            onClick={onRemoveClick}\n            label={removePlaceholderString}\n            data-testid={removeButtonTestId}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === 'ios' && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n          toggleButtonTestId={toggleButtonTestId}\n          removeButtonTestId={removeButtonTestId}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","onClick","disabled","data-testid","i","role","isRemoving","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","onRemoveClick","preventDefault","baseClassName","activeMode","hoverMode","label"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { TappableProps } from '../Tappable/Tappable';
+import { RichCellIcon } from './RichCellIcon/RichCellIcon';
 export interface RichCellProps extends TappableProps {
     /**
      * Контейнер для текста над `children`.
@@ -52,8 +53,7 @@ export interface RichCellProps extends TappableProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
  */
-export declare const RichCell: {
-    ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps): import("react/jsx-runtime").JSX.Element;
-    Icon: (props: import("./RichCellIcon/RichCellIcon").RichCellIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RichCell: React.FC<RichCellProps> & {
+    Icon: typeof RichCellIcon;
 };
 //# sourceMappingURL=RichCell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichCell.d.ts","sourceRoot":"","sources":["../../../../src/components/RichCell/RichCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAU/D,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;6HAalB,aAAa;;CA4Cf,CAAC"}
+{"version":3,"file":"RichCell.d.ts","sourceRoot":"","sources":["../../../../src/components/RichCell/RichCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE/D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAQ3D,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAC/C,IAAI,EAAE,OAAO,YAAY,CAAC;CA0D3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  ['compact']: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","div","Component","Icon"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAAC,UAAU,EAAEA,MAAM,CAAC,0BAA0B;AAChD;AAoDA;;CAEC,GACD,OAAO,MAAMG,WAAW,CAAC,EACvBC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EACT,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGpB;IAE3B,qBACE,MAACC;QACE,GAAGkB,SAAS;QACbD,WAAWnB,WACTK,MAAM,CAAC,WAAW,EAClB,CAACa,aAAab,MAAM,CAAC,0BAA0B,EAC/CgB,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CF;;YAGDN,wBAAU,KAACS;gBAAIH,WAAWd,MAAM,CAAC,mBAAmB;0BAAGQ;;0BACxD,MAACS;gBAAIH,WAAWd,MAAM,CAAC,eAAe;;kCACpC,MAACiB;wBAAIH,WAAWd,MAAM,CAAC,oBAAoB;;0CACzC,MAACiB;gCAAIH,WAAWd,MAAM,CAAC,2BAA2B;;oCAC/CI,yBACC,KAACN;wCAAQoB,WAAU;wCAAMJ,WAAWd,MAAM,CAAC,oBAAoB;kDAC5DI;;kDAGL,KAACa;wCAAIH,WAAWd,MAAM,CAAC,qBAAqB;kDAAGK;;oCAC9CC,sBAAQ,KAACW;wCAAIH,WAAWd,MAAM,CAAC,iBAAiB;kDAAGM;;oCACnDC,yBACC,KAACT;wCAAQoB,WAAU;wCAAMJ,WAAWd,MAAM,CAAC,oBAAoB;kDAC5DO;;;;4BAILE,CAAAA,SAASC,YAAW,mBACpB,MAACO;gCAAIH,WAAWd,MAAM,CAAC,0BAA0B;;oCAC9CS,uBAAS,KAACQ;wCAAIH,WAAWd,MAAM,CAAC,2BAA2B;kDAAGS;;oCAC9DC,8BACC,KAACO;wCAAIH,WAAWd,MAAM,CAAC,0BAA0B;kDAAGU;;;;;;oBAK3DC,wBAAU,KAACM;wBAAIH,WAAWd,MAAM,CAAC,mBAAmB;kCAAGW;;oBACvDC,yBAAW,KAACK;wBAAIH,WAAWd,MAAM,CAAC,oBAAoB;kCAAGY;;;;;;AAIlE,EAAE;AAEFT,SAASgB,IAAI,GAAGpB"}
+{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles['RichCell--sizeY-none'],\n  ['compact']: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell: React.FC<RichCellProps> & {\n  Icon: typeof RichCellIcon;\n} = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles['RichCell__before']}>{before}</div>}\n      <div className={styles['RichCell__in']}>\n        <div className={styles['RichCell__content']}>\n          <div className={styles['RichCell__content-before']}>\n            {subhead && (\n              <Subhead Component=\"div\" className={styles['RichCell__subhead']}>\n                {subhead}\n              </Subhead>\n            )}\n            <div className={styles['RichCell__children']}>{children}</div>\n            {text && <div className={styles['RichCell__text']}>{text}</div>}\n            {caption && (\n              <Subhead Component=\"div\" className={styles['RichCell__caption']}>\n                {caption}\n              </Subhead>\n            )}\n          </div>\n          {(after || afterCaption) && (\n            <div className={styles['RichCell__content-after']}>\n              {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n              {afterCaption && (\n                <div className={styles['RichCell__after-caption']}>{afterCaption}</div>\n              )}\n            </div>\n          )}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","div","Component","Icon"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAAC,UAAU,EAAEA,MAAM,CAAC,0BAA0B;AAChD;AAoDA;;CAEC,GACD,OAAO,MAAMG,WAET,CAAC,EACHC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EACT,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGpB;IAE3B,qBACE,MAACC;QACE,GAAGkB,SAAS;QACbD,WAAWnB,WACTK,MAAM,CAAC,WAAW,EAClB,CAACa,aAAab,MAAM,CAAC,0BAA0B,EAC/CgB,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CF;;YAGDN,wBAAU,KAACS;gBAAIH,WAAWd,MAAM,CAAC,mBAAmB;0BAAGQ;;0BACxD,MAACS;gBAAIH,WAAWd,MAAM,CAAC,eAAe;;kCACpC,MAACiB;wBAAIH,WAAWd,MAAM,CAAC,oBAAoB;;0CACzC,MAACiB;gCAAIH,WAAWd,MAAM,CAAC,2BAA2B;;oCAC/CI,yBACC,KAACN;wCAAQoB,WAAU;wCAAMJ,WAAWd,MAAM,CAAC,oBAAoB;kDAC5DI;;kDAGL,KAACa;wCAAIH,WAAWd,MAAM,CAAC,qBAAqB;kDAAGK;;oCAC9CC,sBAAQ,KAACW;wCAAIH,WAAWd,MAAM,CAAC,iBAAiB;kDAAGM;;oCACnDC,yBACC,KAACT;wCAAQoB,WAAU;wCAAMJ,WAAWd,MAAM,CAAC,oBAAoB;kDAC5DO;;;;4BAILE,CAAAA,SAASC,YAAW,mBACpB,MAACO;gCAAIH,WAAWd,MAAM,CAAC,0BAA0B;;oCAC9CS,uBAAS,KAACQ;wCAAIH,WAAWd,MAAM,CAAC,2BAA2B;kDAAGS;;oCAC9DC,8BACC,KAACO;wCAAIH,WAAWd,MAAM,CAAC,0BAA0B;kDAAGU;;;;;;oBAK3DC,wBAAU,KAACM;wBAAIH,WAAWd,MAAM,CAAC,mBAAmB;kCAAGW;;oBACvDC,yBAAW,KAACK;wBAAIH,WAAWd,MAAM,CAAC,oBAAoB;kCAAGY;;;;;;AAIlE,EAAE;AAEFT,SAASgB,IAAI,GAAGpB"}

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

@@ -1,6 +1,6 @@
 .RichCell {
   display: flex;
-  padding-block: 8px;
+  padding-block: var(--vkui--spacing_size_m);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   min-block-size: 64px;
   box-sizing: border-box;
@@ -20,8 +20,8 @@
 }
 
 .RichCell__before {
-  -webkit-margin-end: 12px;
-          margin-inline-end: 12px;
+  -webkit-margin-end: var(--vkui--spacing_size_xl);
+          margin-inline-end: var(--vkui--spacing_size_xl);
 }
 
 .RichCell__in {
@@ -48,8 +48,8 @@
   flex-direction: column;
   align-items: flex-end;
   flex-shrink: 0;
-  -webkit-padding-start: 12px;
-          padding-inline-start: 12px;
+  -webkit-padding-start: var(--vkui--spacing_size_xl);
+          padding-inline-start: var(--vkui--spacing_size_xl);
   box-sizing: border-box;
 }
 
@@ -58,8 +58,8 @@
 }
 
 .RichCell__after-caption {
-  -webkit-margin-before: 2px;
-          margin-block-start: 2px;
+  -webkit-margin-before: var(--vkui--spacing_size_2xs);
+          margin-block-start: var(--vkui--spacing_size_2xs);
   font-size: var(--vkui--font_footnote--font_size--regular);
   line-height: var(--vkui--font_footnote--line_height--regular);
   color: var(--vkui--color_text_secondary);
@@ -102,13 +102,13 @@
 }
 
 .RichCell__bottom {
-  -webkit-margin-before: 5px;
-          margin-block-start: 5px;
+  -webkit-margin-before: var(--vkui--spacing_size_s);
+          margin-block-start: var(--vkui--spacing_size_s);
 }
 
 .RichCell__actions {
-  -webkit-margin-before: 8px;
-          margin-block-start: 8px;
+  -webkit-margin-before: var(--vkui--spacing_size_m);
+          margin-block-start: var(--vkui--spacing_size_m);
 }
 
 .RichCell__children,

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.d.ts

@@ -1,4 +1,4 @@
 import { HTMLAttributesWithRootRef } from '../../../types';
 export type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
-export declare const RichCellIcon: (props: RichCellIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RichCellIcon: (props: RichCellIconProps) => React.ReactNode;
 //# sourceMappingURL=RichCellIcon.d.ts.map

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichCellIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAE1E,eAAO,MAAM,YAAY,UAAW,iBAAiB,4CAEpD,CAAC"}
+{"version":3,"file":"RichCellIcon.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAI3D,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAE1E,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,KAAK,CAAC,SAE7D,CAAC"}

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './RichCellIcon.module.css';\n\nexport type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nexport const RichCellIcon = (props: RichCellIconProps) => {\n  return <RootComponent baseClassName={styles['RichCellIcon']} {...props} />;\n};\n"],"names":["RootComponent","styles","RichCellIcon","props","baseClassName"],"mappings":";AACA,SAASA,aAAa,QAAQ,oCAAoC;AAClE,OAAOC,YAAY,4BAA4B;AAI/C,OAAO,MAAMC,eAAe,CAACC;IAC3B,qBAAO,KAACH;QAAcI,eAAeH,MAAM,CAAC,eAAe;QAAG,GAAGE,KAAK;;AACxE,EAAE"}
+{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './RichCellIcon.module.css';\n\nexport type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nexport const RichCellIcon = (props: RichCellIconProps): React.ReactNode => {\n  return <RootComponent baseClassName={styles['RichCellIcon']} {...props} />;\n};\n"],"names":["RootComponent","styles","RichCellIcon","props","baseClassName"],"mappings":";AACA,SAASA,aAAa,QAAQ,oCAAoC;AAClE,OAAOC,YAAY,4BAA4B;AAI/C,OAAO,MAAMC,eAAe,CAACC;IAC3B,qBAAO,KAACH;QAAcI,eAAeH,MAAM,CAAC,eAAe;QAAG,GAAGE,KAAK;;AACxE,EAAE"}

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.module.css

@@ -7,6 +7,6 @@
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
-  padding-block: 6px 6px;
+  padding-block: 6px;
   padding-inline: 12px 0;
 }

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

@@ -19,5 +19,5 @@ export interface RootState {
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
  */
-export declare const Root: ({ children, activeView: _activeView, onTransition, nav, ...restProps }: RootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Root: ({ children, activeView: _activeView, onTransition, nav, ...restProps }: RootProps) => React.ReactNode;
 //# sourceMappingURL=Root.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../src/components/Root/Root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAY,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AASxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACtF,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,2EAMd,SAAS,4CAkHX,CAAC"}
+{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../../src/components/Root/Root.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAY,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AASxD,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IACtF,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/E,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;CAC7D;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID;;GAEG;AACH,eAAO,MAAM,IAAI,2EAMd,SAAS,KAAG,KAAK,CAAC,SAkHpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  React.useEffect(\n    function onAnimationEndFallback() {\n      if (transition && disableAnimation) {\n        finishTransition();\n      }\n    },\n    [transition, disableAnimation, finishTransition],\n  );\n\n  const onAnimationEnd = () => {\n    finishTransition();\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Root'],\n        platform === 'ios' && styles['Root--ios'],\n        transition && styles['Root--transition'],\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionDirectionProvider isBack={isBack}>\n              <NavTransitionProvider entering={transition && viewId === activeView}>\n                <div\n                  className={styles['Root__scrollCompensation']}\n                  style={{\n                    marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                  }}\n                >\n                  {view}\n                </div>\n              </NavTransitionProvider>\n            </NavTransitionDirectionProvider>\n          </div>\n        );\n      })}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","usePlatform","useDOM","getNavId","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","baseClassName","viewId","isTransitionTarget","compensateScroll","div","ref","e","undefined","className","entering","style","marginTop"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?: (params: { isBack: boolean; from: string; to: string }) => void;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  ...restProps\n}: RootProps): React.ReactNode => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  React.useEffect(\n    function onAnimationEndFallback() {\n      if (transition && disableAnimation) {\n        finishTransition();\n      }\n    },\n    [transition, disableAnimation, finishTransition],\n  );\n\n  const onAnimationEnd = () => {\n    finishTransition();\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Root'],\n        platform === 'ios' && styles['Root--ios'],\n        transition && styles['Root--transition'],\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionDirectionProvider isBack={isBack}>\n              <NavTransitionProvider entering={transition && viewId === activeView}>\n                <div\n                  className={styles['Root__scrollCompensation']}\n                  style={{\n                    marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                  }}\n                >\n                  {view}\n                </div>\n              </NavTransitionProvider>\n            </NavTransitionDirectionProvider>\n          </div>\n        );\n      })}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","usePlatform","useDOM","getNavId","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","useEffect","onAnimationEndFallback","onAnimationEnd","baseClassName","viewId","isTransitionTarget","compensateScroll","div","ref","e","undefined","className","entering","style","marginTop"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,qBAAqB,QAAQ,+CAA+C;AACrF,SAASC,8BAA8B,QAAQ,iEAAiE;AAChH,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,OAAOC,YAAY,oBAAoB;AAevC,MAAMC,OAAOR,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMS,OAAO,CAAC,EACnBC,QAAQ,EACRC,YAAYC,WAAW,EACvBC,YAAY,EACZC,GAAG,EACH,GAAGC,WACO;IACV,MAAMC,SAAStB,MAAMuB,UAAU,CAAChB;IAChC,MAAMiB,WAAWtB;IACjB,MAAM,EAAEuB,QAAQ,EAAE,GAAGtB;IACrB,MAAMuB,UAAU1B,MAAM2B,MAAM,CAAyB,CAAC,GAAGC,OAAO;IAChE,MAAMC,YAAY7B,MAAM2B,MAAM,CAAqC,CAAC,GAAGC,OAAO;IAE9E,MAAM,EAAEE,0BAA0B,IAAI,EAAE,GAAGtB;IAC3C,MAAM,EAAEuB,OAAO,EAAE,GAAG/B,MAAMuB,UAAU,CAACX;IACrC,MAAMoB,mBAAmB,CAACF,2BAA2B,CAACC;IAEtD,MAAME,QAAQjC,MAAMkC,QAAQ,CAACC,OAAO,CAACnB;IAErC,MAAM,CAAC,EAAEoB,QAAQ,EAAEnB,UAAU,EAAEoB,UAAU,EAAEC,MAAM,EAAE,EAAEC,UAAU,GAAGvC,MAAMwC,QAAQ,CAAY;QAC1FvB,YAAYC;QACZmB,YAAY;IACd;IACA,MAAMI,eAAe,CAACC;QACpB,IAAIA,UAAUzB,YAAY;YACxB,MAAM0B,UAAUV,MAAMW,GAAG,CAAC,CAACC,OAASzC,SAASyC,KAAKC,KAAK,EAAEhC;YACzD,MAAMwB,SAASK,QAAQI,OAAO,CAACL,SAASC,QAAQI,OAAO,CAAC9B;YACxDS,OAAO,CAACT,WAAW,GAAGK,OAAO0B,SAAS,GAAGC,CAAC;YAC1CV,UAAU;gBACRtB,YAAYyB;gBACZN,UAAUnB;gBACVoB,YAAY,CAACL;gBACbM;YACF;QACF;IACF;IACA,MAAMY,mBAAmBlD,MAAMmD,WAAW,CACxC,IAAMZ,UAAU;YAAEtB;YAAYmB;YAAUE;YAAQD,YAAY;QAAM,IAClE;QAACpB;QAAYqB;QAAQF;KAAS;IAGhC/B,0BAA0B;QACvBoB,SAAU2B,aAAa,CAAiBC,IAAI;IAC/C,GAAG;QAACpC;KAAW;IAEf,gBAAgB;IAChBZ,0BAA0B,IAAMoC,aAAavB,cAAc;QAACA;KAAY;IACxEb,0BAA0B;QACxB,IAAI,CAACgC,cAAcD,UAAU;YAC3B,qBAAqB;YACrBd,OAAOgC,QAAQ,CAAC,GAAGhB,SAASZ,OAAO,CAACT,WAAW,GAAG;YAClDE,gBACEA,aAAa;gBACXmB,QAAQiB,QAAQjB;gBAChBkB,MAAMpB;gBACNqB,IAAIxC;YACN;QACJ;IACF,GAAG;QAACoB;QAAYD;KAAS;IAEzBpC,MAAM0D,SAAS,CACb,SAASC;QACP,IAAItB,cAAcL,kBAAkB;YAClCkB;QACF;IACF,GACA;QAACb;QAAYL;QAAkBkB;KAAiB;IAGlD,MAAMU,iBAAiB;QACrBV;IACF;IAEA,qBACE,KAACvC;QACE,GAAGU,SAAS;QACbwC,eAAe5D,WACbY,MAAM,CAAC,OAAO,EACdW,aAAa,SAASX,MAAM,CAAC,YAAY,EACzCwB,cAAcxB,MAAM,CAAC,mBAAmB;kBAGzCoB,MAAMW,GAAG,CAAC,CAACC;YACV,MAAMiB,SAAS1D,SAASyC,KAAKC,KAAK,EAAEhC;YACpC,IAAIgD,WAAW7C,cAAc,CAAEoB,CAAAA,cAAcyB,WAAW1B,QAAO,GAAI;gBACjE,OAAO;YACT;YACA,MAAM2B,qBAAqB1B,cAAcyB,WAAYxB,CAAAA,SAASF,WAAWnB,UAAS;YAClF,MAAM+C,mBACJ3B,cAAeyB,CAAAA,WAAW1B,YAAaE,UAAUwB,WAAW7C,UAAU;YACxE,qBACE,KAACgD;gBAECC,KAAK,CAACC,IAAML,UAAWjC,CAAAA,SAAS,CAACiC,OAAO,GAAGK,CAAAA;gBAC3CP,gBAAgBG,qBAAqBH,iBAAiBQ;gBACtDC,WAAWpE,WACTY,MAAM,CAAC,aAAa,EACpBwB,cAAcyB,WAAW1B,YAAYE,UAAUzB,MAAM,CAAC,wBAAwB,EAC9EwB,cAAcyB,WAAW1B,YAAY,CAACE,UAAUzB,MAAM,CAAC,2BAA2B,EAClFwB,cAAcyB,WAAW7C,cAAcqB,UAAUzB,MAAM,CAAC,wBAAwB,EAChFwB,cAAcyB,WAAW7C,cAAc,CAACqB,UAAUzB,MAAM,CAAC,2BAA2B;0BAGtF,cAAA,KAACH;oBAA+B4B,QAAQA;8BACtC,cAAA,KAAC7B;wBAAsB6D,UAAUjC,cAAcyB,WAAW7C;kCACxD,cAAA,KAACgD;4BACCI,WAAWxD,MAAM,CAAC,2BAA2B;4BAC7C0D,OAAO;gCACLC,WAAWR,mBAAmBF,UAAU,CAAEpC,CAAAA,OAAO,CAACoC,OAAO,IAAI,CAAA,IAAKM;4BACpE;sCAECvB;;;;eAnBFiB;QAyBX;;AAGN,EAAE"}

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

@@ -6,5 +6,5 @@ export interface RootComponentProps<T> extends React.AllHTMLAttributes<T>, HasRo
 /**
  * Базовый корневой компонент.
  */
-export declare const RootComponent: <T>({ Component, baseClassName, className, getRootRef, ...restProps }: RootComponentProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const RootComponent: <T>({ Component, baseClassName, className, getRootRef, ...restProps }: RootComponentProps<T>) => React.ReactNode;
 //# sourceMappingURL=RootComponent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RootComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,kBAAkB,CAAC,CAAC,CACnC,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,qEAM5B,kBAAkB,CAAC,CAAC,CAAC,4CAEvB,CAAC"}
+{"version":3,"file":"RootComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,kBAAkB,CAAC,CAAC,CACnC,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAChC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,qEAM5B,kBAAkB,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAEhC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\n\nexport interface RootComponentProps<T>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  baseClassName?: string | false;\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  getRootRef,\n  ...restProps\n}: RootComponentProps<T>) => (\n  <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />\n);\n"],"names":["React","classNames","RootComponent","Component","baseClassName","className","getRootRef","restProps","ref"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAU7C;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,UAAU,EACV,GAAGC,WACmB,iBACtB,KAACJ;QAAUK,KAAKF;QAAYD,WAAWJ,WAAWG,eAAeC;QAAa,GAAGE,SAAS;OAC1F"}
+{"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\n\nexport interface RootComponentProps<T>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  baseClassName?: string | false;\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  getRootRef,\n  ...restProps\n}: RootComponentProps<T>): React.ReactNode => (\n  <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />\n);\n"],"names":["React","classNames","RootComponent","Component","baseClassName","className","getRootRef","restProps","ref"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAU7C;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,UAAU,EACV,GAAGC,WACmB,iBACtB,KAACJ;QAAUK,KAAKF;QAAYD,WAAWJ,WAAWG,eAAeC;QAAa,GAAGE,SAAS;OAC1F"}

package/dist/cssm/components/ScreenSpinner/Icon48CancelCircle.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-export declare const Icon48CancelCircle: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon48CancelCircle: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
 //# sourceMappingURL=Icon48CancelCircle.d.ts.map

package/dist/cssm/components/ScreenSpinner/Icon48CancelCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon48CancelCircle.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,kBAAkB,UAAW,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,4CAiBtE,CAAC"}
+{"version":3,"file":"Icon48CancelCircle.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,kBAAkB,UAAW,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAG,KAAK,CAAC,SAiB/E,CAAC"}

package/dist/cssm/components/ScreenSpinner/Icon48CancelCircle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["React","Icon48CancelCircle","props","svg","className","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,qBAAqB,CAACC,sBACjC,KAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACL,GAAGP,KAAK;kBAET,cAAA,KAACQ;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK;;OAGT"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>): React.ReactNode => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"names":["React","Icon48CancelCircle","props","svg","className","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,qBAAqB,CAACC,sBACjC,KAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACL,GAAGP,KAAK;kBAET,cAAA,KAACQ;YACCC,UAAS;YACTC,UAAS;YACTC,GAAE;YACFL,MAAK;;OAGT"}

package/dist/cssm/components/ScreenSpinner/Icon48DoneOutline.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-export declare const Icon48DoneOutline: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon48DoneOutline: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
 //# sourceMappingURL=Icon48DoneOutline.d.ts.map

package/dist/cssm/components/ScreenSpinner/Icon48DoneOutline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon48DoneOutline.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,iBAAiB,UAAW,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,4CAkBrE,CAAC"}
+{"version":3,"file":"Icon48DoneOutline.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,iBAAiB,UAAW,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAG,KAAK,CAAC,SAkB9E,CAAC"}

package/dist/cssm/components/ScreenSpinner/Icon48DoneOutline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M9 24L19 34L39 14\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n"],"names":["React","Icon48DoneOutline","props","svg","className","width","height","viewBox","fill","xmlns","path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,oBAAoB,CAACC,sBAChC,KAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACL,GAAGP,KAAK;kBAET,cAAA,KAACQ;YACCC,GAAE;YACFC,QAAO;YACPC,aAAY;YACZC,eAAc;YACdC,gBAAe;;OAGnB"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>): React.ReactNode => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M9 24L19 34L39 14\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n"],"names":["React","Icon48DoneOutline","props","svg","className","width","height","viewBox","fill","xmlns","path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,oBAAoB,CAACC,sBAChC,KAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACL,GAAGP,KAAK;kBAET,cAAA,KAACQ;YACCC,GAAE;YACFC,QAAO;YACPC,aAAY;YACZC,eAAc;YACdC,gBAAe;;OAGnB"}

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

@@ -5,5 +5,5 @@ export interface ScreenSpinnerProps extends SpinnerProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */
-export declare const ScreenSpinner: ({ style, className, state, size, onClick, children, ...restProps }: ScreenSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScreenSpinner: ({ style, className, state, size, onClick, children, ...restProps }: ScreenSpinnerProps) => React.ReactNode;
 //# sourceMappingURL=ScreenSpinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScreenSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAK3D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,uEAQvB,kBAAkB,4CA4CpB,CAAC"}
+{"version":3,"file":"ScreenSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAK3D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,uEAQvB,kBAAkB,KAAG,KAAK,CAAC,SA4C7B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  onClick,\n  children = 'Пожалуйста, подождите...',\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      noBackground\n      className={classNames(\n        styles['ScreenSpinner'],\n        state === 'cancelable' && styles['ScreenSpinner--clickable'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={classNames(\n            styles['ScreenSpinner__spinner'],\n            hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n          )}\n          size={size}\n          {...restProps}\n        >\n          {children}\n        </Spinner>\n        <div\n          className={classNames(\n            styles['ScreenSpinner__icon'],\n            state === 'done' && styles['ScreenSpinner__icon--state-done'],\n          )}\n        >\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["Icon24Cancel","classNames","useScrollLock","PopoutWrapper","Spinner","Icon48CancelCircle","Icon48DoneOutline","styles","ScreenSpinner","style","className","state","size","onClick","children","restProps","hideSpinner","Icon","loading","cancelable","done","error","noBackground","div"],"mappings":";AAAA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,YAAY,6BAA6B;AAMhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,OAAO,EACdC,OAAO,EACPC,WAAW,0BAA0B,EACrC,GAAGC,WACgB;IACnB,MAAMC,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYnB;QACZoB,MAAMd;QACNe,OAAOhB;IACT,CAAC,CAACM,MAAM;IAERT;IAEA,qBACE,KAACC;QACCmB,YAAY;QACZZ,WAAWT,WACTM,MAAM,CAAC,gBAAgB,EACvBI,UAAU,gBAAgBJ,MAAM,CAAC,2BAA2B,EAC5DG;QAEFD,OAAOA;kBAEP,cAAA,MAACc;YAAIb,WAAWH,MAAM,CAAC,2BAA2B;YAAEM,SAASA;;8BAC3D,KAACT;oBACCM,WAAWT,WACTM,MAAM,CAAC,yBAAyB,EAChCS,eAAeT,MAAM,CAAC,iCAAiC;oBAEzDK,MAAMA;oBACL,GAAGG,SAAS;8BAEZD;;8BAEH,KAACS;oBACCb,WAAWT,WACTM,MAAM,CAAC,sBAAsB,EAC7BI,UAAU,UAAUJ,MAAM,CAAC,kCAAkC;8BAG/D,cAAA,KAACU;;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  onClick,\n  children = 'Пожалуйста, подождите...',\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      noBackground\n      className={classNames(\n        styles['ScreenSpinner'],\n        state === 'cancelable' && styles['ScreenSpinner--clickable'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={classNames(\n            styles['ScreenSpinner__spinner'],\n            hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n          )}\n          size={size}\n          {...restProps}\n        >\n          {children}\n        </Spinner>\n        <div\n          className={classNames(\n            styles['ScreenSpinner__icon'],\n            state === 'done' && styles['ScreenSpinner__icon--state-done'],\n          )}\n        >\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["Icon24Cancel","classNames","useScrollLock","PopoutWrapper","Spinner","Icon48CancelCircle","Icon48DoneOutline","styles","ScreenSpinner","style","className","state","size","onClick","children","restProps","hideSpinner","Icon","loading","cancelable","done","error","noBackground","div"],"mappings":";AAAA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,YAAY,6BAA6B;AAMhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,OAAO,EACdC,OAAO,EACPC,WAAW,0BAA0B,EACrC,GAAGC,WACgB;IACnB,MAAMC,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYnB;QACZoB,MAAMd;QACNe,OAAOhB;IACT,CAAC,CAACM,MAAM;IAERT;IAEA,qBACE,KAACC;QACCmB,YAAY;QACZZ,WAAWT,WACTM,MAAM,CAAC,gBAAgB,EACvBI,UAAU,gBAAgBJ,MAAM,CAAC,2BAA2B,EAC5DG;QAEFD,OAAOA;kBAEP,cAAA,MAACc;YAAIb,WAAWH,MAAM,CAAC,2BAA2B;YAAEM,SAASA;;8BAC3D,KAACT;oBACCM,WAAWT,WACTM,MAAM,CAAC,yBAAyB,EAChCS,eAAeT,MAAM,CAAC,iCAAiC;oBAEzDK,MAAMA;oBACL,GAAGG,SAAS;8BAEZD;;8BAEH,KAACS;oBACCb,WAAWT,WACTM,MAAM,CAAC,sBAAsB,EAC7BI,UAAU,UAAUJ,MAAM,CAAC,kCAAkC;8BAG/D,cAAA,KAACU;;;;;AAKX,EAAE"}

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

@@ -21,5 +21,5 @@ export interface ScrollArrowProps extends React.ButtonHTMLAttributes<HTMLButtonE
  * @since 5.4.0
  * @see https://vkcom.github.io/VKUI/#/ScrollArrow
  */
-export declare const ScrollArrow: ({ size, offsetY, direction, label: labelProp, children, ...restProps }: ScrollArrowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScrollArrow: ({ size, offsetY, direction, label: labelProp, children, ...restProps }: ScrollArrowProps) => React.ReactNode;
 //# sourceMappingURL=ScrollArrow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArrow.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAiCzC,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,UAAU,CAAC,iBAAiB,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,2EAOrB,gBAAgB,4CAoBlB,CAAC"}
+{"version":3,"file":"ScrollArrow.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAiCzC,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,UAAU,CAAC,iBAAiB,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,2EAOrB,gBAAgB,KAAG,KAAK,CAAC,SAoB3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  m: styles['ScrollArrow--size-m'],\n  l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n  up: styles['ScrollArrow--direction-up'],\n  right: styles['ScrollArrow--direction-right'],\n  down: styles['ScrollArrow--direction-down'],\n  left: styles['ScrollArrow--direction-left'],\n};\n\nconst labelDirection = {\n  up: 'Назад',\n  right: 'Вперед',\n  down: 'Вперед',\n  left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n  let Icon = Icon24Chevron;\n  if (size === 'm') {\n    Icon = Icon16Chevron;\n  }\n\n  return <Icon className={styles['ScrollArrow__defaultIcon']} />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'up' | 'right' | 'down' | 'left';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n  label?: string;\n}\n\n/**\n * Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  label: labelProp,\n  children = <ArrowIcon size={size} />,\n  ...restProps\n}: ScrollArrowProps) => {\n  const label = labelProp ?? labelDirection[direction];\n\n  return (\n    <RootComponent\n      Component=\"button\"\n      type=\"button\"\n      baseClassName={classNames(\n        styles['ScrollArrow'],\n        stylesSize[size],\n        stylesDirection[direction],\n      )}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon24Chevron","classNames","RootComponent","VisuallyHidden","styles","stylesSize","m","l","stylesDirection","up","right","down","left","labelDirection","ArrowIcon","size","Icon","className","ScrollArrow","offsetY","direction","label","labelProp","children","restProps","Component","type","baseClassName","span","style","top","undefined"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAChE,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,GAAGF,MAAM,CAAC,sBAAsB;IAChCG,GAAGH,MAAM,CAAC,sBAAsB;AAClC;AAEA,MAAMI,kBAAkB;IACtBC,IAAIL,MAAM,CAAC,4BAA4B;IACvCM,OAAON,MAAM,CAAC,+BAA+B;IAC7CO,MAAMP,MAAM,CAAC,8BAA8B;IAC3CQ,MAAMR,MAAM,CAAC,8BAA8B;AAC7C;AAEA,MAAMS,iBAAiB;IACrBJ,IAAI;IACJC,OAAO;IACPC,MAAM;IACNC,MAAM;AACR;AAEA,MAAME,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOhB;IACX,IAAIe,SAAS,KAAK;QAChBC,OAAOjB;IACT;IAEA,qBAAO,KAACiB;QAAKC,WAAWb,MAAM,CAAC,2BAA2B;;AAC5D;AAoBA;;;;;CAKC,GACD,OAAO,MAAMc,cAAc,CAAC,EAC1BH,OAAO,GAAG,EACVI,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,KAACT;IAAUC,MAAMA;EAAQ,EACpC,GAAGS,WACc;IACjB,MAAMH,QAAQC,aAAaT,cAAc,CAACO,UAAU;IAEpD,qBACE,MAAClB;QACCuB,WAAU;QACVC,MAAK;QACLC,eAAe1B,WACbG,MAAM,CAAC,cAAc,EACrBC,UAAU,CAACU,KAAK,EAChBP,eAAe,CAACY,UAAU;QAE3B,GAAGI,SAAS;;YAEZH,uBAAS,KAAClB;0BAAgBkB;;0BAC3B,KAACO;gBAAKX,WAAWb,MAAM,CAAC,oBAAoB;gBAAEyB,OAAOV,UAAU;oBAAEW,KAAKX;gBAAQ,IAAIY;0BAC/ER;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  m: styles['ScrollArrow--size-m'],\n  l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n  up: styles['ScrollArrow--direction-up'],\n  right: styles['ScrollArrow--direction-right'],\n  down: styles['ScrollArrow--direction-down'],\n  left: styles['ScrollArrow--direction-left'],\n};\n\nconst labelDirection = {\n  up: 'Назад',\n  right: 'Вперед',\n  down: 'Вперед',\n  left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n  let Icon = Icon24Chevron;\n  if (size === 'm') {\n    Icon = Icon16Chevron;\n  }\n\n  return <Icon className={styles['ScrollArrow__defaultIcon']} />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'up' | 'right' | 'down' | 'left';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n  label?: string;\n}\n\n/**\n * Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  label: labelProp,\n  children = <ArrowIcon size={size} />,\n  ...restProps\n}: ScrollArrowProps): React.ReactNode => {\n  const label = labelProp ?? labelDirection[direction];\n\n  return (\n    <RootComponent\n      Component=\"button\"\n      type=\"button\"\n      baseClassName={classNames(\n        styles['ScrollArrow'],\n        stylesSize[size],\n        stylesDirection[direction],\n      )}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon24Chevron","classNames","RootComponent","VisuallyHidden","styles","stylesSize","m","l","stylesDirection","up","right","down","left","labelDirection","ArrowIcon","size","Icon","className","ScrollArrow","offsetY","direction","label","labelProp","children","restProps","Component","type","baseClassName","span","style","top","undefined"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAChE,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,GAAGF,MAAM,CAAC,sBAAsB;IAChCG,GAAGH,MAAM,CAAC,sBAAsB;AAClC;AAEA,MAAMI,kBAAkB;IACtBC,IAAIL,MAAM,CAAC,4BAA4B;IACvCM,OAAON,MAAM,CAAC,+BAA+B;IAC7CO,MAAMP,MAAM,CAAC,8BAA8B;IAC3CQ,MAAMR,MAAM,CAAC,8BAA8B;AAC7C;AAEA,MAAMS,iBAAiB;IACrBJ,IAAI;IACJC,OAAO;IACPC,MAAM;IACNC,MAAM;AACR;AAEA,MAAME,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOhB;IACX,IAAIe,SAAS,KAAK;QAChBC,OAAOjB;IACT;IAEA,qBAAO,KAACiB;QAAKC,WAAWb,MAAM,CAAC,2BAA2B;;AAC5D;AAoBA;;;;;CAKC,GACD,OAAO,MAAMc,cAAc,CAAC,EAC1BH,OAAO,GAAG,EACVI,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,KAACT;IAAUC,MAAMA;EAAQ,EACpC,GAAGS,WACc;IACjB,MAAMH,QAAQC,aAAaT,cAAc,CAACO,UAAU;IAEpD,qBACE,MAAClB;QACCuB,WAAU;QACVC,MAAK;QACLC,eAAe1B,WACbG,MAAM,CAAC,cAAc,EACrBC,UAAU,CAACU,KAAK,EAChBP,eAAe,CAACY,UAAU;QAE3B,GAAGI,SAAS;;YAEZH,uBAAS,KAAClB;0BAAgBkB;;0BAC3B,KAACO;gBAAKX,WAAWb,MAAM,CAAC,oBAAoB;gBAAEyB,OAAOV,UAAU;oBAAEW,KAAKX;gBAAQ,IAAIY;0BAC/ER;;;;AAIT,EAAE"}

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

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { HasRef, HasRootRef } from '../../types';
+import { IconButtonProps } from '../IconButton/IconButton';
+export type RenderIconButtonFn = (icon: React.ReactNode, props?: Partial<IconButtonProps>) => React.ReactNode;
 export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLInputElement> {
     /**
      * iOS only. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
      */
     after?: React.ReactNode;
     before?: React.ReactNode;
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);
     onIconClick?: React.PointerEventHandler<HTMLElement>;
     defaultValue?: string;
     iconLabel?: string;
@@ -27,5 +29,5 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-export declare const Search: ({ id: idProp, before, className, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange, iconLabel, clearLabel, noPadding, getRootRef, findButtonText, onFindButtonClick, ...inputProps }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ id: idProp, before, className, placeholder, after, getRef, icon: iconProp, onIconClick, style, autoComplete, onChange, iconLabel, clearLabel, noPadding, getRootRef, findButtonText, onFindButtonClick, ...inputProps }: SearchProps) => React.ReactNode;
 //# sourceMappingURL=Search.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAOjD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,oNAmBhB,WAAW,4CAiKb,CAAC"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAc,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKvE,MAAM,MAAM,kBAAkB,GAAG,CAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,EACrB,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KAC7B,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,UAAU,CAAC,cAAc,CAAC,EAC1B,MAAM,CAAC,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAC1D;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,8NAmBhB,WAAW,KAAG,KAAK,CAAC,SAuKtB,CAAC"}

package/dist/cssm/components/Search/Search.js

@@ -18,7 +18,7 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Search.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
- */ export const Search = ({ id: idProp, before = /*#__PURE__*/ _jsx(Icon16SearchOutline, {}), className, placeholder = 'Поиск', after = 'Отмена', getRef, icon, onIconClick = noop, style, autoComplete = 'off', onChange, iconLabel, clearLabel = 'Очистить', noPadding, getRootRef, findButtonText = 'Найти', onFindButtonClick, ...inputProps })=>{
+ */ export const Search = ({ id: idProp, before = /*#__PURE__*/ _jsx(Icon16SearchOutline, {}), className, placeholder = 'Поиск', after = 'Отмена', getRef, icon: iconProp, onIconClick = noop, style, autoComplete = 'off', onChange, iconLabel, clearLabel = 'Очистить', noPadding, getRootRef, findButtonText = 'Найти', onFindButtonClick, ...inputProps })=>{
     const inputRef = useExternRef(getRef);
     const { value: isFocused, setTrue: setFocusedTrue, setFalse: setFocusedFalse } = useBooleanState(false);
     const generatedId = React.useId();
@@ -70,8 +70,23 @@ import styles from './Search.module.css';
     useNativeFormResetListener(inputRef, ()=>{
         setHasValue(Boolean(inputProps.defaultValue));
     });
+    const renderIconButton = (icon, props = {})=>/*#__PURE__*/ _jsxs(IconButton, {
+            hoverMode: "opacity",
+            onPointerDown: onIconClickStart,
+            className: styles['Search__icon'],
+            onFocus: setFocusedTrue,
+            onBlur: setFocusedFalse,
+            onClick: noop,
+            ...props,
+            children: [
+                /*#__PURE__*/ _jsx(VisuallyHidden, {
+                    children: iconLabel
+                }),
+                icon
+            ]
+        });
     return /*#__PURE__*/ _jsxs("div", {
-        className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === 'compact' && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], hasValue && styles['Search--has-value'], after && styles['Search--has-after'], icon && styles['Search--has-icon'], inputProps.disabled && styles['Search--disabled'], !noPadding && styles['Search--withPadding'], className),
+        className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === 'compact' && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], hasValue && styles['Search--has-value'], after && styles['Search--has-after'], iconProp && styles['Search--has-icon'], inputProps.disabled && styles['Search--disabled'], !noPadding && styles['Search--withPadding'], className),
         ref: getRootRef,
         style: style,
         children: [
@@ -107,20 +122,7 @@ import styles from './Search.module.css';
                     /*#__PURE__*/ _jsxs("div", {
                         className: styles['Search__controls'],
                         children: [
-                            icon && /*#__PURE__*/ _jsxs(IconButton, {
-                                hoverMode: "opacity",
-                                onPointerDown: onIconClickStart,
-                                className: styles['Search__icon'],
-                                onFocus: setFocusedTrue,
-                                onBlur: setFocusedFalse,
-                                onClick: noop,
-                                children: [
-                                    /*#__PURE__*/ _jsx(VisuallyHidden, {
-                                        children: iconLabel
-                                    }),
-                                    icon
-                                ]
-                            }),
+                            iconProp && (typeof iconProp === 'function' ? iconProp(renderIconButton) : renderIconButton(iconProp)),
                             /*#__PURE__*/ _jsxs(IconButton, {
                                 hoverMode: "opacity",
                                 onPointerDown: onIconCancelClickStart,