@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

package/dist/components/Popper/Popper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport type { HasRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `offsetDistance`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Стиль стрелки.\n   */\n  arrowClassName?: string;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Кастомный root-элемент портала.\n   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`\n   * из контекста `AppRoot`.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowClassName,\n  ArrowIcon = DefaultIcon,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  portalRoot,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    return middlewares;\n  }, [\n    offsetSkidding,\n    arrowRef,\n    arrow,\n    arrowHeight,\n    arrowPadding,\n    offsetDistance,\n    isNotAutoPlacement,\n    sameWidth,\n    customMiddlewares,\n    placementProp,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      className={classNames(styles['Popper'], className)}\n      ref={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {renderContent ? renderContent({ className: '' }) : children}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} portalRoot={portalRoot}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","PopperArrow","Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowHeight","arrowPadding","arrowClassName","ArrowIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","className","restProps","useState","arrowRef","setArrowRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","setFloating","useEffect","setReference","current","dropdown","div","ref","coords","getRootRef","Icon"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  hideMiddleware,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `offsetDistance`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Стиль стрелки.\n   */\n  arrowClassName?: string;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Кастомный root-элемент портала.\n   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`\n   * из контекста `AppRoot`.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n  /**\n   * Принудительно скрывает компонет если целевой элемент исчез\n   */\n  hideWhenReferenceHidden?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowClassName,\n  ArrowIcon = DefaultIcon,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  portalRoot,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  getRootRef,\n  hideWhenReferenceHidden,\n  ...restProps\n}: PopperProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    if (hideWhenReferenceHidden) {\n      middlewares.push(hideMiddleware());\n    }\n\n    return middlewares;\n  }, [\n    offsetSkidding,\n    arrowRef,\n    arrow,\n    arrowHeight,\n    arrowPadding,\n    offsetDistance,\n    isNotAutoPlacement,\n    sameWidth,\n    customMiddlewares,\n    placementProp,\n    hideWhenReferenceHidden,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords, hide },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  // TODO [>=6]: убрать getRef\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef, getRootRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      baseClassName={styles['Popper']}\n      getRootRef={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n        ...(hide?.referenceHidden && {\n          visibility: 'hidden',\n        }),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {renderContent ? renderContent({ className: '' }) : children}\n    </RootComponent>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} portalRoot={portalRoot}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"names":["React","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","hideMiddleware","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","PopperArrow","RootComponent","Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowHeight","arrowPadding","arrowClassName","ArrowIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","getRootRef","hideWhenReferenceHidden","restProps","hide","useState","arrowRef","setArrowRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","setFloating","useEffect","setReference","current","dropdown","baseClassName","referenceHidden","visibility","coords","Icon","className"],"mappings":"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"}

package/dist/components/Progress/Progress.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Стиль отображения прогрессбара
      */
@@ -14,4 +14,4 @@ export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, Has
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
  */
-export declare const Progress: ({ value, getRootRef, className, appearance, height, style: styleProps, ...restProps }: ProgressProps) => React.JSX.Element;
+export declare const Progress: ({ value, appearance, height, style: styleProps, ...restProps }: ProgressProps) => React.JSX.Element;

package/dist/components/Progress/Progress.js

@@ -4,6 +4,12 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { clamp } from "../../helpers/math";
+import { RootComponent } from "../RootComponent/RootComponent";
+var stylesAppearance = {
+    accent: "vkuiProgress--appearance-accent",
+    positive: "vkuiProgress--appearance-positive",
+    negative: "vkuiProgress--appearance-negative"
+};
 function progressCustomHeightStyle(height) {
     return height ? {
         height: height,
@@ -20,10 +26,8 @@ var PROGRESS_MAX_VALUE = 100;
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
  */ export var Progress = function(_param) {
-    var _param_value = _param.value, value = _param_value === void 0 ? 0 : _param_value, getRootRef = _param.getRootRef, className = _param.className, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, height = _param.height, styleProps = _param.style, restProps = _object_without_properties(_param, [
+    var _param_value = _param.value, value = _param_value === void 0 ? 0 : _param_value, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "accent" : _param_appearance, height = _param.height, styleProps = _param.style, restProps = _object_without_properties(_param, [
         "value",
-        "getRootRef",
-        "className",
         "appearance",
         "height",
         "style"
@@ -31,7 +35,7 @@ var PROGRESS_MAX_VALUE = 100;
     var progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
     var title = "".concat(progress, " / ").concat(PROGRESS_MAX_VALUE);
     var style = progressStyle(height, styleProps);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({
         "aria-valuenow": value,
         title: title,
         style: style
@@ -39,12 +43,7 @@ var PROGRESS_MAX_VALUE = 100;
         role: "progressbar",
         "aria-valuemin": PROGRESS_MIN_VALUE,
         "aria-valuemax": PROGRESS_MAX_VALUE,
-        ref: getRootRef,
-        className: classNames("vkuiProgress", {
-            accent: "vkuiProgress--appearance-accent",
-            positive: "vkuiProgress--appearance-positive",
-            negative: "vkuiProgress--appearance-negative"
-        }[appearance], className)
+        baseClassName: classNames("vkuiProgress", stylesAppearance[appearance])
     }), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiProgress__in",
         style: {

package/dist/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nfunction progressStyle(height: number | undefined, styleProps: React.CSSProperties | undefined) {\n  const styleHeight = progressCustomHeightStyle(height);\n  const style = styleHeight ? { ...styleProps, ...styleHeight } : styleProps;\n\n  return style;\n}\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  appearance = 'accent',\n  height,\n  style: styleProps,\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  const style = progressStyle(height, styleProps);\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      style={style}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(\n        styles['Progress'],\n        {\n          accent: styles['Progress--appearance-accent'],\n          positive: styles['Progress--appearance-positive'],\n          negative: styles['Progress--appearance-negative'],\n        }[appearance],\n        className,\n      )}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"names":["React","classNames","clamp","progressCustomHeightStyle","height","borderRadius","undefined","progressStyle","styleProps","styleHeight","style","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","appearance","restProps","progress","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","accent","positive","negative","width"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAI3C,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA,QAAAA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAEA,SAASC,cAAcH,MAA0B,EAAEI,UAA2C;IAC5F,IAAMC,cAAcN,0BAA0BC;IAC9C,IAAMM,QAAQD,cAAc,mBAAKD,YAAeC,eAAgBD;IAEhE,OAAOE;AACT;AAgBA,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,IAAMC,WAAW;8BACtBC,OAAAA,kCAAQ,kBACRC,oBAAAA,YACAC,mBAAAA,sCACAC,YAAAA,4CAAa,8BACbb,gBAAAA,QACAM,AAAOF,oBAAPE,OACGQ;QANHJ;QACAC;QACAC;QACAC;QACAb;QACAM;;IAGA,IAAMS,WAAWjB,MAAMY,OAAOH,oBAAoBC;IAClD,IAAMQ,QAAQ,AAAC,GAAgBR,OAAdO,UAAS,OAAwB,OAAnBP;IAE/B,IAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,oBAACa;QACCC,iBAAeR;QACfM,OAAOA;QACPV,OAAOA;OACHQ;QACJK,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKX;QACLC,WAAWf,2BAET;YACE0B,MAAM;YACNC,QAAQ;YACRC,QAAQ;QACV,CAAC,CAACZ,WAAW,EACbD;sBAGF,oBAACK;QAAIL,SAAS;QAA0BN,OAAO;YAAEoB,OAAO,AAAC,GAAW,OAATX,UAAS;QAAG;;AAG7E,EAAE"}
+{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Progress.module.css';\n\nconst stylesAppearance = {\n  accent: styles['Progress--appearance-accent'],\n  positive: styles['Progress--appearance-positive'],\n  negative: styles['Progress--appearance-negative'],\n};\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nfunction progressStyle(height: number | undefined, styleProps: React.CSSProperties | undefined) {\n  const styleHeight = progressCustomHeightStyle(height);\n  const style = styleHeight ? { ...styleProps, ...styleHeight } : styleProps;\n\n  return style;\n}\n\nexport interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  appearance = 'accent',\n  height,\n  style: styleProps,\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  const style = progressStyle(height, styleProps);\n\n  return (\n    <RootComponent\n      aria-valuenow={value}\n      title={title}\n      style={style}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      baseClassName={classNames(styles['Progress'], stylesAppearance[appearance])}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","clamp","RootComponent","stylesAppearance","accent","positive","negative","progressCustomHeightStyle","height","borderRadius","undefined","progressStyle","styleProps","styleHeight","style","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","appearance","restProps","progress","title","aria-valuenow","role","aria-valuemin","aria-valuemax","baseClassName","div","className","width"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAE3C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,QAAQ;IACRC,QAAQ;AACV;AAEA,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA,QAAAA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAEA,SAASC,cAAcH,MAA0B,EAAEI,UAA2C;IAC5F,IAAMC,cAAcN,0BAA0BC;IAC9C,IAAMM,QAAQD,cAAc,mBAAKD,YAAeC,eAAgBD;IAEhE,OAAOE;AACT;AAcA,IAAMC,qBAAqB;AAC3B,IAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,IAAMC,WAAW;8BACtBC,OAAAA,kCAAQ,6CACRC,YAAAA,4CAAa,8BACbX,gBAAAA,QACAM,AAAOF,oBAAPE,OACGM;QAJHF;QACAC;QACAX;QACAM;;IAGA,IAAMO,WAAWpB,MAAMiB,OAAOH,oBAAoBC;IAClD,IAAMM,QAAQ,AAAC,GAAgBN,OAAdK,UAAS,OAAwB,OAAnBL;IAE/B,IAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,oBAACV;QACCqB,iBAAeL;QACfI,OAAOA;QACPR,OAAOA;OACHM;QACJI,MAAK;QACLC,iBAAeV;QACfW,iBAAeV;QACfW,eAAe3B,2BAA+BG,gBAAgB,CAACgB,WAAW;sBAE1E,oBAACS;QAAIC,SAAS;QAA0Bf,OAAO;YAAEgB,OAAO,AAAC,GAAW,OAATT,UAAS;QAAG;;AAG7E,EAAE"}

package/dist/components/PromoBanner/PromoBanner.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 type StatsType = 'playbackStarted' | 'click';
 type BannerData = {
     title?: string;
@@ -25,7 +26,7 @@ type BannerData = {
     description?: string;
     ageRestrictions?: string;
 };
-export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PromoBannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /** Данные рекламного баннера, полученные из VKWebAppGetAds */
     bannerData: BannerData;
     /** Флаг скрытия кнопки закрытия рекламы */
@@ -39,5 +40,5 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)
  */
-export declare const PromoBanner: ({ bannerData, onClose, isCloseButtonHidden, className, ...restProps }: PromoBannerProps) => React.JSX.Element;
+export declare const PromoBanner: ({ bannerData, onClose, isCloseButtonHidden, ...restProps }: PromoBannerProps) => React.JSX.Element;
 export {};

package/dist/components/PromoBanner/PromoBanner.js

@@ -5,10 +5,10 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { Icon24Dismiss } from "@vkontakte/icons";
-import { classNames } from "@vkontakte/vkjs";
 import { warnOnce } from "../../lib/warnOnce";
 import { Button } from "../Button/Button";
 import { Image } from "../Image/Image";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { SimpleCell } from "../SimpleCell/SimpleCell";
 import { Footnote } from "../Typography/Footnote/Footnote";
 var warn = warnOnce("PromoBanner");
@@ -19,11 +19,10 @@ var warn = warnOnce("PromoBanner");
  *
  * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)
  */ export var PromoBanner = function(_param) {
-    var _param_bannerData = _param.bannerData, bannerData = _param_bannerData === void 0 ? {} : _param_bannerData, onClose = _param.onClose, isCloseButtonHidden = _param.isCloseButtonHidden, className = _param.className, restProps = _object_without_properties(_param, [
+    var _param_bannerData = _param.bannerData, bannerData = _param_bannerData === void 0 ? {} : _param_bannerData, onClose = _param.onClose, isCloseButtonHidden = _param.isCloseButtonHidden, restProps = _object_without_properties(_param, [
         "bannerData",
         "onClose",
-        "isCloseButtonHidden",
-        "className"
+        "isCloseButtonHidden"
     ]);
     if (process.env.NODE_ENV === "development") {
         warn("Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners");
@@ -48,8 +47,8 @@ var warn = warnOnce("PromoBanner");
     }, [
         statsPixels.playbackStarted
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
-        className: classNames("vkuiPromoBanner", className)
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: "vkuiPromoBanner"
     }, restProps), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiPromoBanner__head"
     }, /*#__PURE__*/ React.createElement(Footnote, null, bannerData.advertisingLabel || "Advertisement"), bannerData.ageRestrictions && /*#__PURE__*/ React.createElement(Footnote, {

package/dist/components/PromoBanner/PromoBanner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n// TODO [>=6]: Удалить компонент\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  className,\n  ...restProps\n}: PromoBannerProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <div className={classNames(styles['PromoBanner'], className)} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Dismiss","classNames","warnOnce","Button","Image","SimpleCell","Footnote","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","className","restProps","process","env","NODE_ENV","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","div","advertisingLabel","ageRestrictions","href","trackingLink","rel","target","before","iconLink","size","src","alt","title","data-testid","undefined","after","ctaText","mode","subtitle","domain","length","img"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC,OAAOL,SAAS;AAsCtB,gCAAgC;AAEhC;;;;;CAKC,GACD,OAAO,IAAMM,cAAc;mCACzBC,YAAAA,4CAAa,CAAC,uBACdC,iBAAAA,SACAC,6BAAAA,qBACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CT,KACE;IAEJ;IAEA,IAAwCR,mCAAAA,MAAMkB,QAAQ,CAAC,SAAhDC,eAAiCnB,oBAAnBoB,kBAAmBpB;IAExC,IAAMqB,cAAcrB,MAAMsB,OAAO,CAC/B;eACGZ,WAAWa,UAAU,GAClBb,WAAWa,UAAU,CAACC,MAAM,CAAC,SAACC,KAAKC;mBAAU,wCAAKD,MAAK,qBAACC,KAAKC,IAAI,EAAGD,KAAKE,GAAG;WAAK,CAAC,KAClF,CAAC;OACP;QAAClB,WAAWa,UAAU;KAAC;IAGzB,IAAMM,UAAU7B,MAAM8B,WAAW,CAC/B;eAAMV,gBAAgBC,YAAYU,KAAK,IAAI;OAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrB/B,MAAMgC,SAAS,CAAC;QACd,IAAIX,YAAYY,eAAe,EAAE;YAC/Bb,gBAAgBC,YAAYY,eAAe;QAC7C;IACF,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,oBAACC;QAAIrB,WAAWX,8BAAkCW;OAAgBC,0BAChE,oBAACoB;QAAIrB,SAAS;qBACZ,oBAACN,gBAAUG,WAAWyB,gBAAgB,IAAI,kBACzCzB,WAAW0B,eAAe,kBACzB,oBAAC7B;QAASM,SAAS;OAA+BH,WAAW0B,eAAe,GAG7E,CAACxB,qCACA,oBAACsB;QAAIrB,SAAS;QAAgCgB,SAASlB;qBACrD,oBAACV,sCAIP,oBAACK;QACC+B,MAAM3B,WAAW4B,YAAY;QAC7BT,SAASA;QACTU,KAAI;QACJC,QAAO;QACPC,QACE/B,WAAWgC,QAAQ,kBACjB,oBAACrC;YACCsC,MAAM;YACNC,KAAKlC,WAAWgC,QAAQ;YACxBG,KAAKnC,WAAWoC,KAAK;YACrBC,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAW+B;;QAIhEC,OACEvC,WAAWwC,OAAO,kBAChB,oBAAC9C;YACC+C,MAAK;YACLJ,eAAahC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmB+B;WAEjEtC,WAAWwC,OAAO;QAIzBE,UAAU1C,WAAW2C,MAAM;OAE1B3C,WAAWoC,KAAK,GAGlB3B,aAAamC,MAAM,GAAG,mBACrB,oBAACpB;QAAIrB,SAAS;qBACZ,oBAAC0C;QAAIX,KAAKzB;QAAc0B,KAAI;;AAKtC,EAAE"}
+{"version":3,"sources":["../../../src/components/PromoBanner/PromoBanner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { Image } from '../Image/Image';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SimpleCell } from '../SimpleCell/SimpleCell';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './PromoBanner.module.css';\n\nconst warn = warnOnce('PromoBanner');\n\ntype StatsType =\n  | 'playbackStarted' // Начало показа\n  | 'click'; // Клик по баннеру\n\ntype BannerData = {\n  title?: string;\n  url_types?: string;\n  bannerID?: string;\n  imageWidth?: number;\n  imageHeight?: number;\n  imageLink?: string;\n  trackingLink?: string;\n  type?: string;\n  iconWidth?: number;\n  domain?: string;\n  ctaText?: string;\n  advertisingLabel?: string;\n  iconLink?: string;\n  statistics?: Array<{ type: StatsType; url: string }>;\n  openInBrowser?: boolean;\n  iconHeight?: number;\n  directLink?: boolean;\n  navigationType?: string;\n  description?: string;\n  ageRestrictions?: string;\n};\n\nexport interface PromoBannerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /** Данные рекламного баннера, полученные из VKWebAppGetAds */\n  bannerData: BannerData;\n  /** Флаг скрытия кнопки закрытия рекламы */\n  isCloseButtonHidden?: boolean;\n  /** Хандлер закрытия рекламы */\n  onClose: () => void;\n}\n\n// TODO [>=6]: Удалить компонент\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PromoBanner\n * @deprecated v5.3.1\n *\n * Используйте событие [VKWebAppShowBannerAd](https://dev.vk.com/mini-apps/monetization/ad/banners)\n */\nexport const PromoBanner = ({\n  bannerData = {},\n  onClose,\n  isCloseButtonHidden,\n  ...restProps\n}: PromoBannerProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Компонент устарел и будет удален в v6. Используйте событие VKWebAppShowBannerAd https://dev.vk.com/mini-apps/monetization/ad/banners',\n    );\n  }\n\n  const [currentPixel, setCurrentPixel] = React.useState('');\n\n  const statsPixels = React.useMemo(\n    () =>\n      (bannerData.statistics\n        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})\n        : {}) as Record<StatsType, string | void>,\n    [bannerData.statistics],\n  );\n\n  const onClick = React.useCallback(\n    () => setCurrentPixel(statsPixels.click || ''),\n    [statsPixels.click],\n  );\n\n  React.useEffect(() => {\n    if (statsPixels.playbackStarted) {\n      setCurrentPixel(statsPixels.playbackStarted);\n    }\n  }, [statsPixels.playbackStarted]);\n\n  return (\n    <RootComponent baseClassName={styles['PromoBanner']} {...restProps}>\n      <div className={styles['PromoBanner__head']}>\n        <Footnote>{bannerData.advertisingLabel || 'Advertisement'}</Footnote>\n        {bannerData.ageRestrictions && (\n          <Footnote className={styles['PromoBanner__age']}>{bannerData.ageRestrictions}</Footnote>\n        )}\n\n        {!isCloseButtonHidden && (\n          <div className={styles['PromoBanner__close']} onClick={onClose}>\n            <Icon24Dismiss />\n          </div>\n        )}\n      </div>\n      <SimpleCell\n        href={bannerData.trackingLink}\n        onClick={onClick}\n        rel=\"nofollow noopener noreferrer\"\n        target=\"_blank\"\n        before={\n          bannerData.iconLink && (\n            <Image\n              size={48}\n              src={bannerData.iconLink}\n              alt={bannerData.title}\n              data-testid={process.env.NODE_ENV === 'test' ? 'avatar' : undefined}\n            />\n          )\n        }\n        after={\n          bannerData.ctaText && (\n            <Button\n              mode=\"outline\"\n              data-testid={process.env.NODE_ENV === 'test' ? 'button-ctaText' : undefined}\n            >\n              {bannerData.ctaText}\n            </Button>\n          )\n        }\n        subtitle={bannerData.domain}\n      >\n        {bannerData.title}\n      </SimpleCell>\n\n      {currentPixel.length > 0 && (\n        <div className={styles['PromoBanner__pixels']}>\n          <img src={currentPixel} alt=\"\" />\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Dismiss","warnOnce","Button","Image","RootComponent","SimpleCell","Footnote","warn","PromoBanner","bannerData","onClose","isCloseButtonHidden","restProps","process","env","NODE_ENV","useState","currentPixel","setCurrentPixel","statsPixels","useMemo","statistics","reduce","acc","item","type","url","onClick","useCallback","click","useEffect","playbackStarted","baseClassName","div","className","advertisingLabel","ageRestrictions","href","trackingLink","rel","target","before","iconLink","size","src","alt","title","data-testid","undefined","after","ctaText","mode","subtitle","domain","length","img"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,KAAK,QAAQ,iBAAiB;AACvC,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC,OAAON,SAAS;AAsCtB,gCAAgC;AAEhC;;;;;CAKC,GACD,OAAO,IAAMO,cAAc;mCACzBC,YAAAA,4CAAa,CAAC,uBACdC,iBAAAA,SACAC,6BAAAA,qBACGC;QAHHH;QACAC;QACAC;;IAGA,IAAIE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CR,KACE;IAEJ;IAEA,IAAwCR,mCAAAA,MAAMiB,QAAQ,CAAC,SAAhDC,eAAiClB,oBAAnBmB,kBAAmBnB;IAExC,IAAMoB,cAAcpB,MAAMqB,OAAO,CAC/B;eACGX,WAAWY,UAAU,GAClBZ,WAAWY,UAAU,CAACC,MAAM,CAAC,SAACC,KAAKC;mBAAU,wCAAKD,MAAK,qBAACC,KAAKC,IAAI,EAAGD,KAAKE,GAAG;WAAK,CAAC,KAClF,CAAC;OACP;QAACjB,WAAWY,UAAU;KAAC;IAGzB,IAAMM,UAAU5B,MAAM6B,WAAW,CAC/B;eAAMV,gBAAgBC,YAAYU,KAAK,IAAI;OAC3C;QAACV,YAAYU,KAAK;KAAC;IAGrB9B,MAAM+B,SAAS,CAAC;QACd,IAAIX,YAAYY,eAAe,EAAE;YAC/Bb,gBAAgBC,YAAYY,eAAe;QAC7C;IACF,GAAG;QAACZ,YAAYY,eAAe;KAAC;IAEhC,qBACE,oBAAC3B;QAAc4B,aAAa;OAA6BpB,0BACvD,oBAACqB;QAAIC,SAAS;qBACZ,oBAAC5B,gBAAUG,WAAW0B,gBAAgB,IAAI,kBACzC1B,WAAW2B,eAAe,kBACzB,oBAAC9B;QAAS4B,SAAS;OAA+BzB,WAAW2B,eAAe,GAG7E,CAACzB,qCACA,oBAACsB;QAAIC,SAAS;QAAgCP,SAASjB;qBACrD,oBAACV,sCAIP,oBAACK;QACCgC,MAAM5B,WAAW6B,YAAY;QAC7BX,SAASA;QACTY,KAAI;QACJC,QAAO;QACPC,QACEhC,WAAWiC,QAAQ,kBACjB,oBAACvC;YACCwC,MAAM;YACNC,KAAKnC,WAAWiC,QAAQ;YACxBG,KAAKpC,WAAWqC,KAAK;YACrBC,eAAalC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWiC;;QAIhEC,OACExC,WAAWyC,OAAO,kBAChB,oBAAChD;YACCiD,MAAK;YACLJ,eAAalC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,mBAAmBiC;WAEjEvC,WAAWyC,OAAO;QAIzBE,UAAU3C,WAAW4C,MAAM;OAE1B5C,WAAWqC,KAAK,GAGlB7B,aAAaqC,MAAM,GAAG,mBACrB,oBAACrB;QAAIC,SAAS;qBACZ,oBAACqB;QAAIX,KAAK3B;QAAc4B,KAAI;;AAKtC,EAAE"}

package/dist/components/PullToRefresh/PullToRefreshSpinner.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-export interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
-    'size'?: number;
-    'strokeWidth'?: number;
-    'on'?: boolean;
-    'progress'?: number;
-    'aria-label'?: string;
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PullToRefreshSpinnerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    size?: number;
+    strokeWidth?: number;
+    on?: boolean;
+    progress?: number;
 }
-export declare const PullToRefreshSpinner: ({ on, size, strokeWidth, style, progress, "aria-label": ariaLabel, }: PullToRefreshSpinnerProps) => React.JSX.Element;
+export declare const PullToRefreshSpinner: ({ on, size, strokeWidth, progress, "aria-label": ariaLabel, ...restProps }: PullToRefreshSpinnerProps) => React.JSX.Element;

package/dist/components/PullToRefresh/PullToRefreshSpinner.js

@@ -1,20 +1,28 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 function calcStrokeDashOffset(value, radius) {
     var progress = value / 100;
     return 2 * Math.PI * radius * (1 - progress);
 }
-export var PullToRefreshSpinner = function(param) {
-    var _param_on = param.on, on = _param_on === void 0 ? true : _param_on, _param_size = param.size, size = _param_size === void 0 ? 24 : _param_size, _param_strokeWidth = param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? 2.5 : _param_strokeWidth, style = param.style, _param_progress = param.progress, progress = _param_progress === void 0 ? 0 : _param_progress, tmp = param["aria-label"], ariaLabel = tmp === void 0 ? "Пожалуйста, подождите..." : tmp;
+export var PullToRefreshSpinner = function(_param) {
+    var _param_on = _param.on, on = _param_on === void 0 ? true : _param_on, _param_size = _param.size, size = _param_size === void 0 ? 24 : _param_size, _param_strokeWidth = _param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? 2.5 : _param_strokeWidth, _param_progress = _param.progress, progress = _param_progress === void 0 ? 0 : _param_progress, tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Пожалуйста, подождите..." : tmp, restProps = _object_without_properties(_param, [
+        "on",
+        "size",
+        "strokeWidth",
+        "progress",
+        "aria-label"
+    ]);
     var radius = 0.5 * size - 0.5 * strokeWidth;
     var dasharray = 2 * Math.PI * radius;
     var circleCenter = 0.5 * size;
     var dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames("vkuiPullToRefresh__spinner", on && "vkuiPullToRefresh__spinner--on"),
-        style: style,
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: classNames("vkuiPullToRefresh__spinner", on && "vkuiPullToRefresh__spinner--on"),
         "aria-label": on ? ariaLabel : undefined
-    }, /*#__PURE__*/ React.createElement("svg", {
+    }, restProps), /*#__PURE__*/ React.createElement("svg", {
         role: "presentation",
         className: "vkuiPullToRefresh__spinner-self",
         style: {

package/dist/components/PullToRefresh/PullToRefreshSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  'size'?: number;\n  'strokeWidth'?: number;\n  'on'?: boolean;\n  'progress'?: number;\n  'aria-label'?: string;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  style,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <div\n      className={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      style={style}\n      aria-label={on ? ariaLabel : undefined}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n"],"names":["React","classNames","calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","style","ariaLabel","dasharray","circleCenter","dashoffset","div","className","aria-label","undefined","svg","role","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,IAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,EAAE,GAAGH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AAUA,OAAO,IAAMG,uBAAuB;0BAClCC,IAAAA,4BAAK,sCACLC,MAAAA,gCAAO,6CACPC,aAAAA,8CAAc,0BACdC,cAAAA,+BACAP,UAAAA,wCAAW,qBACGQ,YAAd,eAAcA,YAAAA,iBAAY,6BAAZA;IAEd,IAAMT,SAAS,MAAMM,OAAO,MAAMC;IAClC,IAAMG,YAAY,IAAIR,KAAKC,EAAE,GAAGH;IAChC,IAAMW,eAAe,MAAML;IAE3B,IAAMM,aAAad,qBAAqBO,KAAK,KAAKJ,UAAUD;IAE5D,qBACE,oBAACa;QACCC,WAAWjB,yCAETQ;QAEFG,OAAOA;QACPO,cAAYV,KAAKI,YAAYO;qBAE7B,oBAACC;QACCC,MAAK;QACLJ,SAAS;QACTN,OAAO;YACLW,OAAOb;YACPc,QAAQd;QACV;QACAe,SAAS,AAAC,OAAcf,OAARA,MAAK,KAAQ,OAALA;QACxBgB,OAAM;qBAEN,oBAACC;QACCf,OAAO;YACLW,OAAOb;YACPc,QAAQd;YACRkB,iBAAiB,AAAC,GAAoBb,OAAlBA,cAAa,OAAkB,OAAbA,cAAa;QACrD;qBAEA,oBAACc;QACCX,SAAS;QACTY,MAAK;QACLC,iBAAiBjB;QACjBkB,kBAAkBhB;QAClBL,aAAaA;QACbsB,eAAc;QACdC,IAAInB;QACJoB,IAAIpB;QACJqB,GAAGhC;;AAMf,EAAE"}
+{"version":3,"sources":["../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PullToRefresh.module.css';\n\nfunction calcStrokeDashOffset(value: number, radius: number) {\n  const progress = value / 100;\n  return 2 * Math.PI * radius * (1 - progress);\n}\n\nexport interface PullToRefreshSpinnerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  size?: number;\n  strokeWidth?: number;\n  on?: boolean;\n  progress?: number;\n}\n\nexport const PullToRefreshSpinner = ({\n  on = true,\n  size = 24,\n  strokeWidth = 2.5,\n  progress = 0,\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  ...restProps\n}: PullToRefreshSpinnerProps) => {\n  const radius = 0.5 * size - 0.5 * strokeWidth;\n  const dasharray = 2 * Math.PI * radius;\n  const circleCenter = 0.5 * size;\n\n  const dashoffset = calcStrokeDashOffset(on ? 80 : progress, radius);\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        styles['PullToRefresh__spinner'],\n        on && styles['PullToRefresh__spinner--on'],\n      )}\n      aria-label={on ? ariaLabel : undefined}\n      {...restProps}\n    >\n      <svg\n        role=\"presentation\"\n        className={styles['PullToRefresh__spinner-self']}\n        style={{\n          width: size,\n          height: size,\n        }}\n        viewBox={`0 0 ${size} ${size}`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g\n          style={{\n            width: size,\n            height: size,\n            transformOrigin: `${circleCenter}px ${circleCenter}px`,\n          }}\n        >\n          <circle\n            className={styles['PullToRefresh__spinner-path']}\n            fill=\"none\"\n            strokeDasharray={dasharray}\n            strokeDashoffset={dashoffset}\n            strokeWidth={strokeWidth}\n            strokeLinecap=\"round\"\n            cx={circleCenter}\n            cy={circleCenter}\n            r={radius}\n          />\n        </g>\n      </svg>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","RootComponent","calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","ariaLabel","restProps","dasharray","circleCenter","dashoffset","baseClassName","aria-label","undefined","svg","role","className","style","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,IAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,EAAE,GAAGH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AASA,OAAO,IAAMG,uBAAuB;2BAClCC,IAAAA,4BAAK,uCACLC,MAAAA,gCAAO,8CACPC,aAAAA,8CAAc,mDACdN,UAAAA,wCAAW,qBACGO,aAAd,eAAcA,YAAAA,iBAAY,6BAAZA,KACXC;QALHJ;QACAC;QACAC;QACAN;QACA;;IAGA,IAAMD,SAAS,MAAMM,OAAO,MAAMC;IAClC,IAAMG,YAAY,IAAIR,KAAKC,EAAE,GAAGH;IAChC,IAAMW,eAAe,MAAML;IAE3B,IAAMM,aAAad,qBAAqBO,KAAK,KAAKJ,UAAUD;IAE5D,qBACE,oBAACH;QACCgB,eAAejB,yCAEbS;QAEFS,cAAYT,KAAKG,YAAYO;OACzBN,0BAEJ,oBAACO;QACCC,MAAK;QACLC,SAAS;QACTC,OAAO;YACLC,OAAOd;YACPe,QAAQf;QACV;QACAgB,SAAS,AAAC,OAAchB,OAARA,MAAK,KAAQ,OAALA;QACxBiB,OAAM;qBAEN,oBAACC;QACCL,OAAO;YACLC,OAAOd;YACPe,QAAQf;YACRmB,iBAAiB,AAAC,GAAoBd,OAAlBA,cAAa,OAAkB,OAAbA,cAAa;QACrD;qBAEA,oBAACe;QACCR,SAAS;QACTS,MAAK;QACLC,iBAAiBlB;QACjBmB,kBAAkBjB;QAClBL,aAAaA;QACbuB,eAAc;QACdC,IAAIpB;QACJqB,IAAIrB;QACJsB,GAAGjC;;AAMf,EAAE"}

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     mode?: 'vertical' | 'horizontal';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
  */
-export declare const RadioGroup: ({ mode, children, className, ...restProps }: RadioGroupProps) => React.JSX.Element;
+export declare const RadioGroup: ({ mode, ...restProps }: RadioGroupProps) => React.JSX.Element;

package/dist/components/RadioGroup/RadioGroup.js

@@ -2,17 +2,16 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
  */ export var RadioGroup = function(_param) /*#__PURE__*/ {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "vertical" : _param_mode, children = _param.children, className = _param.className, restProps = _object_without_properties(_param, [
-        "mode",
-        "children",
-        "className"
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? "vertical" : _param_mode, restProps = _object_without_properties(_param, [
+        "mode"
     ]);
-    return React.createElement("div", _object_spread({
-        className: classNames("vkuiRadioGroup", "vkuiInternalRadioGroup", mode === "horizontal" && "vkuiRadioGroup--mode-horizontal", className)
-    }, restProps), children);
+    return React.createElement(RootComponent, _object_spread({
+        baseClassName: classNames("vkuiRadioGroup", "vkuiInternalRadioGroup", mode === "horizontal" && "vkuiRadioGroup--mode-horizontal")
+    }, restProps));
 };
 
 //# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n      className,\n    )}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"names":["React","classNames","RadioGroup","mode","children","className","restProps","div"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAO7C;;CAEC,GACD,OAAO,IAAMC,aAAa;6BACxBC,MAAAA,gCAAO,0BACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;WAGA,oBAACE;QACCF,WAAWJ,6BAET,0BACAE,SAAS,mDACTE;OAEEC,YAEHF;AACE,EACL"}
+{"version":3,"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({ mode = 'vertical', ...restProps }: RadioGroupProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n    )}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","RootComponent","RadioGroup","mode","restProps","baseClassName"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAO/D;;CAEC,GACD,OAAO,IAAMC,aAAa;6BAAGC,MAAAA,gCAAO,0BAAeC;QAAtBD;;WAC3B,oBAACF;QACCI,eAAeL,6BAEb,0BACAG,SAAS;OAEPC;AACL,EACD"}

package/dist/components/Removable/Removable.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 export interface RemovableProps {
     /**
      * iOS only. Текст в выезжающей кнопке для удаления ячейки.
@@ -10,7 +10,7 @@ export interface RemovableProps {
      */
     onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;
 }
-interface RemovableOwnProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+interface RemovableOwnProps extends HTMLAttributesWithRootRef<HTMLDivElement>, RemovableProps {
     /**
      * Расположение кнопки удаления.
      */
@@ -24,5 +24,5 @@ interface RemovableOwnProps extends React.HTMLAttributes<HTMLDivElement>, Remova
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
  */
-export declare const Removable: ({ getRootRef, children, onRemove, removePlaceholder, align, className, indent, ...restProps }: RemovableOwnProps) => React.JSX.Element;
+export declare const Removable: ({ children, onRemove, removePlaceholder, align, indent, ...restProps }: RemovableOwnProps) => React.JSX.Element;
 export {};

package/dist/components/Removable/Removable.js

@@ -5,13 +5,13 @@ import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { Icon24Cancel } from "@vkontakte/icons";
 import { classNames, noop } from "@vkontakte/vkjs";
-import { useExternRef } from "../../hooks/useExternRef";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useDOM } from "../../lib/dom";
 import { Platform } from "../../lib/platform";
 import { getTitleFromChildren } from "../../lib/utils";
 import { IconButton } from "../IconButton/IconButton";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Tappable } from "../Tappable/Tappable";
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
@@ -79,25 +79,21 @@ import { Tappable } from "../Tappable/Tappable";
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
  */ export var Removable = function(_param) {
-    var getRootRef = _param.getRootRef, children = _param.children, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, className = _param.className, _param_indent = _param.indent, indent = _param_indent === void 0 ? false : _param_indent, restProps = _object_without_properties(_param, [
-        "getRootRef",
+    var children = _param.children, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, _param_align = _param.align, align = _param_align === void 0 ? "center" : _param_align, _param_indent = _param.indent, indent = _param_indent === void 0 ? false : _param_indent, restProps = _object_without_properties(_param, [
         "children",
         "onRemove",
         "removePlaceholder",
         "align",
-        "className",
         "indent"
     ]);
     var platform = usePlatform();
-    var ref = useExternRef(getRootRef);
     var onRemoveClick = function(e) {
         e.preventDefault();
         onRemove(e);
     };
     var removePlaceholderString = getTitleFromChildren(removePlaceholder);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        ref: ref,
-        className: classNames(platform === Platform.IOS && "vkuiRemovable--ios", align === "start" && "vkuiRemovable--align-start", indent && "vkuiRemovable--indent", className)
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames(platform === Platform.IOS && "vkuiRemovable--ios", align === "start" && "vkuiRemovable--align-start", indent && "vkuiRemovable--indent")
     }), platform !== Platform.IOS && /*#__PURE__*/ React.createElement("div", {
         className: classNames("vkuiRemovable__content", "vkuiInternalRemovable__content")
     }, children, /*#__PURE__*/ React.createElement(IconButton, {

package/dist/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 { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n  removePlaceholderString?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\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        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\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      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  indent = false,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","getTitleFromChildren","IconButton","Tappable","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","ref","onRemoveClick","preventDefault","IOS","activeMode","hoverMode"],"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 { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n  removePlaceholderString?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\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        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\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      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps extends HTMLAttributesWithRootRef<HTMLDivElement>, RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\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  ...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 = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useGlobalEventListener","usePlatform","useDOM","Platform","getTitleFromChildren","IconButton","RootComponent","Tappable","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","onRemoveClick","preventDefault","baseClassName","IOS","activeMode","hoverMode"],"mappings":"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"}

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

@@ -54,5 +54,5 @@ export interface RichCellProps extends TappableProps {
  */
 export declare const RichCell: {
     ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps): React.JSX.Element;
-    Icon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+    Icon: (props: import("./RichCellIcon/RichCellIcon").RichCellIconProps) => React.JSX.Element;
 };

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

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare const RichCellIcon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+import { HTMLAttributesWithRootRef } from '../../../types';
+export type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+export declare const RichCellIcon: (props: RichCellIconProps) => React.JSX.Element;

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

@@ -1,16 +1,10 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
-export var RichCellIcon = function(_param) {
-    var children = _param.children, className = _param.className, restProps = _object_without_properties(_param, [
-        "children",
-        "className"
-    ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiRichCellIcon", className)
-    }), children);
+import { RootComponent } from "../../RootComponent/RootComponent";
+export var RichCellIcon = function(props) {
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: "vkuiRichCellIcon"
+    }, props));
 };
 
 //# sourceMappingURL=RichCellIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","RichCellIcon","children","className","restProps","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,OAAO,IAAMC,eAAe;QAC1BC,kBAAAA,UACAC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,qBACE,oBAACE,+CAAQD;QAAWD,WAAWH,+BAAmCG;QAC/DD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { 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":["React","RootComponent","RichCellIcon","props","baseClassName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,oCAAoC;AAKlE,OAAO,IAAMC,eAAe,SAACC;IAC3B,qBAAO,oBAACF;QAAcG,aAAa;OAA8BD;AACnE,EAAE"}

package/dist/components/RichTooltip/RichTooltip.js

@@ -3,6 +3,12 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { HoverPopper } from "../HoverPopper/HoverPopper";
+var stylesAppearance = {
+    accent: "vkuiRichTooltip--appearance-accent",
+    white: "vkuiRichTooltip--appearance-white",
+    black: "vkuiRichTooltip--appearance-black",
+    inversion: "vkuiRichTooltip--appearance-inversion"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip
  */ export var RichTooltip = function(_param) {
@@ -13,12 +19,7 @@ import { HoverPopper } from "../HoverPopper/HoverPopper";
         "className"
     ]);
     return /*#__PURE__*/ React.createElement(HoverPopper, _object_spread({
-        className: classNames("vkuiRichTooltip", appearance !== "neutral" && ({
-            accent: "vkuiRichTooltip--appearance-accent",
-            white: "vkuiRichTooltip--appearance-white",
-            black: "vkuiRichTooltip--appearance-black",
-            inversion: "vkuiRichTooltip--appearance-inversion"
-        })[appearance], className),
+        className: classNames("vkuiRichTooltip", appearance !== "neutral" && stylesAppearance[appearance], className),
         arrow: arrow,
         arrowClassName: "vkuiRichTooltip__arrow"
     }, popperProps), children);