@vkontakte/vkui 6.5.3 → 6.7.0

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { injectAriaExpandedPropByRole } from '../../lib/accessibility';\nimport { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';\nimport {\n  type FloatingComponentProps,\n  type FloatingContentRenderProp,\n  type OnShownChange,\n  useFloatingMiddlewaresBootstrap,\n  useFloatingWithInteractions,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport styles from './Popover.module.css';\n\n/**\n * @alias\n * @public\n */\nexport type PopoverArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverOnShownChange = OnShownChange;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverContentRenderProp = FloatingContentRenderProp;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'placement'\n  | 'onPlacementChange'\n  | 'trigger'\n  | 'content'\n  | 'hoverDelay'\n  | 'closeAfterClick'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'shown'\n  | 'onShownChange'\n  | 'onShownChanged'\n  | 'usePortal'\n  | 'sameWidth'\n  | 'hideWhenReferenceHidden'\n  | 'disabled'\n  | 'disableInteractive'\n  | 'disableCloseOnClickOutside'\n  | 'disableCloseOnEscKey'\n  | 'autoFocus'\n  | 'restoreFocus'\n  | 'children'\n  | 'zIndex'\n  | 'disableFlipMiddleware'\n  | 'customMiddlewares'\n>;\n\n/**\n * @public\n */\nexport interface PopoverProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof FloatingComponentProps> {\n  /**\n   * Отключает у всплывающего элемента стилизацию по умолчанию.\n   *\n   * У `content`:\n   * - _background_\n   * - _border-radius_\n   * - _box-shadow_\n   *\n   * У `arrow`:\n   * - _color_\n   *\n   * Используется в случае, если необходимо стилизовать по своему. Для `arrow` _color_ можно\n   * определить через в `arrowProps.iconClassName` или `arrowProps.iconStyle`.\n   */\n  noStyling?: boolean;\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: PopoverArrowProps;\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?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.\n   */\n  keepMounted?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  // UsePopoverProps\n  arrow: withArrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  placement: expectedPlacement = 'bottom-start',\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  trigger = 'click',\n  content,\n  hoverDelay = 150,\n  closeAfterClick,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  sameWidth,\n  hideWhenReferenceHidden,\n  disabled,\n  disableInteractive,\n  disableCloseOnClickOutside,\n  disableCloseOnEscKey,\n  keepMounted = false,\n  customMiddlewares,\n  // uncontrolled\n  defaultShown = false,\n  // controlled\n  shown: shownProp,\n  onShownChange,\n  onShownChanged,\n\n  // Для AppRootPortal\n  usePortal = true,\n\n  // Для FloatingArrow\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // FocusTrapProps\n  autoFocus = true,\n  restoreFocus = true,\n  className,\n  children,\n  noStyling = false,\n  zIndex = 'var(--vkui--z_index_popout)',\n  // a11y\n  role = 'dialog',\n  ...restPopoverProps\n}: PopoverProps): React.ReactNode => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    arrow: withArrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    placement: expectedPlacement,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    sameWidth,\n    hideWhenReferenceHidden,\n    disableFlipMiddleware,\n    customMiddlewares,\n  });\n  const {\n    placement: resolvedPlacement,\n    shown,\n    willBeHide,\n    refs,\n    referenceProps,\n    floatingProps,\n    middlewareData,\n    onClose,\n    onRestoreFocus,\n    onEscapeKeyDown,\n  } = useFloatingWithInteractions({\n    middlewares,\n    placement: strictPlacement,\n    trigger,\n    hoverDelay,\n    closeAfterClick,\n    disabled,\n    disableInteractive,\n    disableCloseOnClickOutside,\n    disableCloseOnEscKey,\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    onShownChanged,\n  });\n\n  usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);\n\n  const [, child] = usePatchChildren<HTMLDivElement>(\n    children,\n    injectAriaExpandedPropByRole(referenceProps, shown, role),\n    refs.setReference,\n  );\n\n  let popover: React.ReactNode = null;\n  if (shown || keepMounted) {\n    const hidden = keepMounted && !shown;\n    if (!hidden) {\n      floatingProps.style.zIndex = String(zIndex);\n    }\n\n    let arrow: React.ReactElement | null = null;\n    if (withArrow) {\n      const { arrow: arrowCoords } = middlewareData;\n      arrow = (\n        <FloatingArrow\n          iconClassName={noStyling ? undefined : styles['Popover__arrow']}\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      );\n    }\n\n    popover = (\n      <AppRootPortal usePortal={usePortal}>\n        <div\n          ref={refs.setFloating}\n          className={classNames(styles['Popover'], hidden && styles['Popover--hidden'])}\n          {...floatingProps}\n        >\n          <FocusTrap\n            {...restPopoverProps}\n            role={role}\n            className={classNames(\n              styles['Popover__in'],\n              noStyling ? undefined : styles['Popover__in--withStyling'],\n              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n              transformOriginClassNames[resolvedPlacement],\n              className,\n            )}\n            mount={!hidden}\n            disabled={hidden}\n            autoFocus={disableInteractive ? false : autoFocus}\n            restoreFocus={restoreFocus ? onRestoreFocus : false}\n            onClose={onEscapeKeyDown}\n          >\n            {arrow}\n            {typeof content === 'function' ? content({ onClose }) : content}\n          </FocusTrap>\n        </div>\n      </AppRootPortal>\n    );\n  }\n\n  return (\n    <React.Fragment>\n      {child}\n      {popover}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","usePatchChildren","injectAriaExpandedPropByRole","animationFadeClassNames","transformOriginClassNames","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","FocusTrap","Popover","arrow","withArrow","arrowHeight","arrowPadding","placement","expectedPlacement","onPlacementChange","disableFlipMiddleware","trigger","content","hoverDelay","closeAfterClick","offsetByMainAxis","offsetByCrossAxis","sameWidth","hideWhenReferenceHidden","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","keepMounted","customMiddlewares","defaultShown","shown","shownProp","onShownChange","onShownChanged","usePortal","arrowProps","ArrowIcon","autoFocus","restoreFocus","className","children","noStyling","zIndex","role","restPopoverProps","arrowRef","setArrowRef","useState","middlewares","strictPlacement","resolvedPlacement","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onRestoreFocus","onEscapeKeyDown","child","setReference","popover","hidden","style","String","arrowCoords","iconClassName","undefined","coords","getRootRef","Icon","div","ref","setFloating","out","in","mount","Fragment"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { injectAriaExpandedPropByRole } from '../../lib/accessibility';\nimport { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';\nimport {\n  type FloatingComponentProps,\n  type FloatingContentRenderProp,\n  type OnShownChange,\n  useFloatingMiddlewaresBootstrap,\n  useFloatingWithInteractions,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport type { FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport styles from './Popover.module.css';\n\n/**\n * @alias\n * @public\n */\nexport type PopoverArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverOnShownChange = OnShownChange;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverContentRenderProp = FloatingContentRenderProp;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'placement'\n  | 'onPlacementChange'\n  | 'trigger'\n  | 'content'\n  | 'hoverDelay'\n  | 'closeAfterClick'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'shown'\n  | 'onShownChange'\n  | 'onShownChanged'\n  | 'usePortal'\n  | 'sameWidth'\n  | 'hideWhenReferenceHidden'\n  | 'disabled'\n  | 'disableInteractive'\n  | 'disableCloseOnClickOutside'\n  | 'disableCloseOnEscKey'\n  | 'autoFocus'\n  | 'restoreFocus'\n  | 'children'\n  | 'zIndex'\n  | 'disableFlipMiddleware'\n  | 'customMiddlewares'\n>;\n\n/**\n * @public\n */\nexport interface PopoverProps\n  extends Omit<AllowedFloatingComponentProps, 'autoFocus'>,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof FloatingComponentProps> {\n  /**\n   * Отключает у всплывающего элемента стилизацию по умолчанию.\n   *\n   * У `content`:\n   * - _background_\n   * - _border-radius_\n   * - _box-shadow_\n   *\n   * У `arrow`:\n   * - _color_\n   *\n   * Используется в случае, если необходимо стилизовать по своему. Для `arrow` _color_ можно\n   * определить через в `arrowProps.iconClassName` или `arrowProps.iconStyle`.\n   */\n  noStyling?: boolean;\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: PopoverArrowProps;\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?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.\n   */\n  keepMounted?: boolean;\n  autoFocus?: FocusTrapProps['autoFocus'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  // UsePopoverProps\n  arrow: withArrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  placement: expectedPlacement = 'bottom-start',\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  trigger = 'click',\n  content,\n  hoverDelay = 150,\n  closeAfterClick,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  sameWidth,\n  hideWhenReferenceHidden,\n  disabled,\n  disableInteractive,\n  disableCloseOnClickOutside,\n  disableCloseOnEscKey,\n  keepMounted = false,\n  customMiddlewares,\n  // uncontrolled\n  defaultShown = false,\n  // controlled\n  shown: shownProp,\n  onShownChange,\n  onShownChanged,\n\n  // Для AppRootPortal\n  usePortal = true,\n\n  // Для FloatingArrow\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // FocusTrapProps\n  autoFocus = true,\n  restoreFocus = true,\n  className,\n  children,\n  noStyling = false,\n  zIndex = 'var(--vkui--z_index_popout)',\n  // a11y\n  role = 'dialog',\n  ...restPopoverProps\n}: PopoverProps): React.ReactNode => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    arrow: withArrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    placement: expectedPlacement,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    sameWidth,\n    hideWhenReferenceHidden,\n    disableFlipMiddleware,\n    customMiddlewares,\n  });\n  const {\n    placement: resolvedPlacement,\n    shown,\n    willBeHide,\n    refs,\n    referenceProps,\n    floatingProps,\n    middlewareData,\n    onClose,\n    onRestoreFocus,\n    onEscapeKeyDown,\n  } = useFloatingWithInteractions({\n    middlewares,\n    placement: strictPlacement,\n    trigger,\n    hoverDelay,\n    closeAfterClick,\n    disabled,\n    disableInteractive,\n    disableCloseOnClickOutside,\n    disableCloseOnEscKey,\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    onShownChanged,\n  });\n\n  usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);\n\n  const [, child] = usePatchChildren<HTMLDivElement>(\n    children,\n    injectAriaExpandedPropByRole(referenceProps, shown, role),\n    refs.setReference,\n  );\n\n  let popover: React.ReactNode = null;\n  if (shown || keepMounted) {\n    const hidden = keepMounted && !shown;\n\n    let arrow: React.ReactElement | null = null;\n    if (withArrow) {\n      const { arrow: arrowCoords } = middlewareData;\n      arrow = (\n        <FloatingArrow\n          iconClassName={noStyling ? undefined : styles['Popover__arrow']}\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      );\n    }\n\n    popover = (\n      <AppRootPortal usePortal={usePortal}>\n        <div\n          ref={refs.setFloating}\n          className={classNames(styles['Popover'], hidden && styles['Popover--hidden'])}\n          {...floatingProps}\n          style={{\n            zIndex: !hidden ? zIndex : undefined,\n            ...floatingProps.style,\n          }}\n        >\n          <FocusTrap\n            {...restPopoverProps}\n            role={role}\n            className={classNames(\n              styles['Popover__in'],\n              noStyling ? undefined : styles['Popover__in--withStyling'],\n              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n              transformOriginClassNames[resolvedPlacement],\n              className,\n            )}\n            mount={!hidden}\n            disabled={hidden}\n            autoFocus={disableInteractive ? false : autoFocus}\n            restoreFocus={restoreFocus ? onRestoreFocus : false}\n            onClose={onEscapeKeyDown}\n          >\n            {arrow}\n            {typeof content === 'function' ? content({ onClose }) : content}\n          </FocusTrap>\n        </div>\n      </AppRootPortal>\n    );\n  }\n\n  return (\n    <React.Fragment>\n      {child}\n      {popover}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","usePatchChildren","injectAriaExpandedPropByRole","animationFadeClassNames","transformOriginClassNames","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","FocusTrap","Popover","arrow","withArrow","arrowHeight","arrowPadding","placement","expectedPlacement","onPlacementChange","disableFlipMiddleware","trigger","content","hoverDelay","closeAfterClick","offsetByMainAxis","offsetByCrossAxis","sameWidth","hideWhenReferenceHidden","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","keepMounted","customMiddlewares","defaultShown","shown","shownProp","onShownChange","onShownChanged","usePortal","arrowProps","ArrowIcon","autoFocus","restoreFocus","className","children","noStyling","zIndex","role","restPopoverProps","arrowRef","setArrowRef","useState","middlewares","strictPlacement","resolvedPlacement","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onRestoreFocus","onEscapeKeyDown","child","setReference","popover","hidden","arrowCoords","iconClassName","undefined","coords","getRootRef","Icon","div","ref","setFloating","style","out","in","mount","Fragment"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Стиль отображения прогрессбара

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AA0BxD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD;;GAEG;AACH,eAAO,MAAM,QAAQ,mEAMlB,aAAa,KAAG,KAAK,CAAC,SAoBxB,CAAC"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AA0B7D,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD;;GAEG;AACH,eAAO,MAAM,QAAQ,mEAMlB,aAAa,KAAG,KAAK,CAAC,SAoBxB,CAAC"}

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 { 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): React.ReactNode => {\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,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,QAAQ;IACRC,QAAQ;AACV;AAEA,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAEA,SAASC,cAAcH,MAA0B,EAAEI,UAA2C;IAC5F,MAAMC,cAAcN,0BAA0BC;IAC9C,MAAMM,QAAQD,cAAc,mBAAKD,YAAeC,eAAgBD;IAEhE,OAAOE;AACT;AAcA,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW;QAAC,EACvBC,QAAQ,CAAC,EACTC,aAAa,QAAQ,EACrBX,MAAM,EACNM,OAAOF,UAAU,EAEH,WADXQ;QAJHF;QACAC;QACAX;QACAM;;IAGA,MAAMO,WAAWpB,MAAMiB,OAAOH,oBAAoBC;IAClD,MAAMM,QAAQ,CAAC,EAAED,SAAS,GAAG,EAAEL,mBAAmB,CAAC;IAEnD,MAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,KAACV;QACCqB,iBAAeL;QACfI,OAAOA;QACPR,OAAOA;OACHM;QACJI,MAAK;QACLC,iBAAeV;QACfW,iBAAeV;QACfW,eAAe3B,2BAA+BG,gBAAgB,CAACgB,WAAW;kBAE1E,cAAA,KAACS;YAAIC,SAAS;YAA0Bf,OAAO;gBAAEgB,OAAO,CAAC,EAAET,SAAS,CAAC,CAAC;YAAC;;;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 type { 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): React.ReactNode => {\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,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,QAAQ;IACRC,QAAQ;AACV;AAEA,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAEA,SAASC,cAAcH,MAA0B,EAAEI,UAA2C;IAC5F,MAAMC,cAAcN,0BAA0BC;IAC9C,MAAMM,QAAQD,cAAc,mBAAKD,YAAeC,eAAgBD;IAEhE,OAAOE;AACT;AAcA,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW;QAAC,EACvBC,QAAQ,CAAC,EACTC,aAAa,QAAQ,EACrBX,MAAM,EACNM,OAAOF,UAAU,EAEH,WADXQ;QAJHF;QACAC;QACAX;QACAM;;IAGA,MAAMO,WAAWpB,MAAMiB,OAAOH,oBAAoBC;IAClD,MAAMM,QAAQ,CAAC,EAAED,SAAS,GAAG,EAAEL,mBAAmB,CAAC;IAEnD,MAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,KAACV;QACCqB,iBAAeL;QACfI,OAAOA;QACPR,OAAOA;OACHM;QACJI,MAAK;QACLC,iBAAeV;QACfW,iBAAeV;QACfW,eAAe3B,2BAA+BG,gBAAgB,CAACgB,WAAW;kBAE1E,cAAA,KAACS;YAAIC,SAAS;YAA0Bf,OAAO;gBAAEgB,OAAO,CAAC,EAAET,SAAS,CAAC,CAAC;YAAC;;;AAG7E,EAAE"}

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { DOMProps } from '../../lib/dom';
-import { AnyFunction, HasChildren } from '../../types';
-import { ScrollContextInterface } from '../AppRoot/ScrollContext';
-import { TouchProps } from '../Touch/Touch';
+import { type DOMProps } from '../../lib/dom';
+import type { AnyFunction, HasChildren } from '../../types';
+import { type ScrollContextInterface } from '../AppRoot/ScrollContext';
+import { type TouchProps } from '../Touch/Touch';
 export interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {
     /**
      * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)

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

@@ -1 +1 @@
-{"version":3,"file":"PullToRefresh.d.ts","sourceRoot":"","sources":["../../../src/components/PullToRefresh/PullToRefresh.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,QAAQ,EAAoD,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAa,MAAM,0BAA0B,CAAC;AAE7E,OAAO,EAA2C,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAqBrF,MAAM,WAAW,kBAAmB,SAAQ,QAAQ,EAAE,UAAU,EAAE,WAAW;IAC3E;;OAEG;IACH,SAAS,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc;IACd,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,iEAMvB,kBAAkB,KAAG,KAAK,CAAC,SAiN7B,CAAC"}
+{"version":3,"file":"PullToRefresh.d.ts","sourceRoot":"","sources":["../../../src/components/PullToRefresh/PullToRefresh.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,QAAQ,EAAoD,MAAM,eAAe,CAAC;AAEhG,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,KAAK,sBAAsB,EAAa,MAAM,0BAA0B,CAAC;AAElF,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAqB/E,MAAM,WAAW,kBAAmB,SAAQ,QAAQ,EAAE,UAAU,EAAE,WAAW;IAC3E;;OAEG;IACH,SAAS,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc;IACd,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,iEAMvB,kBAAkB,KAAG,KAAK,CAAC,SAiN7B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { DOMProps, initializeBrowserGesturePreventionEffect, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent as TouchEventInternal, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nconst WAIT_FETCHING_TIMEOUT_MS = 1000;\n\nfunction cancelEvent(event: TouchEventInternal) {\n  /* istanbul ignore if: неясно в какой ситуации `event` из `Touch` может быть не определён */\n  if (!event) {\n    return false;\n  }\n  if ('preventDefault' in event.originalEvent && event.originalEvent.cancelable) {\n    event.originalEvent.preventDefault();\n  }\n  if ('stopPropagation' in event.originalEvent) {\n    event.originalEvent.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps): React.ReactNode => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { window } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === 'ios' ? -10 : -45,\n      max: platform === 'ios' ? 50 : 80,\n      maxY: platform === 'ios' ? 400 : 80,\n      refreshing: platform === 'ios' ? 36 : 50,\n      positionMultiplier: platform === 'ios' ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const waitFetchingTimeoutId = React.useRef<NodeJS.Timeout>();\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearTimeout(waitFetchingTimeoutId.current);\n    }\n  }, [isFetching, prevIsFetching]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      clearTimeout(waitFetchingTimeoutId.current);\n      waitFetchingTimeoutId.current = setTimeout(onRefreshingFinish, WAIT_FETCHING_TIMEOUT_MS);\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) => (platform === 'ios' ? prevSpinnerY : initParams.refreshing));\n\n      onRefresh();\n    }\n  }, [refreshing, onRefresh, onRefreshingFinish, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n        /* istanbul ignore if: TODO написать тест */\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  useIsomorphicLayoutEffect(\n    function toggleDocumentOverscrollBehavior() {\n      return window && (watching || refreshing)\n        ? initializeBrowserGesturePreventionEffect(window)\n        : undefined;\n    },\n    [window, watching, refreshing],\n  );\n\n  const startYRef = React.useRef(0);\n\n  const onTouchStart = (event: TouchEventInternal) => {\n    if (refreshing) {\n      cancelEvent(event);\n      return;\n    }\n    setTouchDown(true);\n    startYRef.current = event.startY;\n  };\n\n  const iosRefreshStartedRef = React.useRef(false);\n  const onTouchMove = (event: TouchEventInternal) => {\n    const { isY, shiftY } = event;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(event);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      const iosCanStartRefreshDuringGesture =\n        platform === 'ios' && progress > 85 && !refreshing && !iosRefreshStartedRef.current;\n      if (iosCanStartRefreshDuringGesture) {\n        iosRefreshStartedRef.current = true;\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(event);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n    iosRefreshStartedRef.current = false;\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === 'ios' && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === 'ios' && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        aria-live=\"polite\"\n        aria-busy={!!isFetching}\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles['PullToRefresh'],\n          platform === 'ios' && styles['PullToRefresh--ios'],\n          watching && styles['PullToRefresh--watching'],\n          refreshing && styles['PullToRefresh--refreshing'],\n          className,\n        )}\n      >\n        <FixedLayout className={styles['PullToRefresh__controls']} useParentWidth>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles['PullToRefresh__content']}\n          style={{\n            transform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","clamp","usePlatform","usePrevious","initializeBrowserGesturePreventionEffect","useDOM","useIsomorphicLayoutEffect","useScroll","FixedLayout","Touch","TouchRootContext","PullToRefreshSpinner","WAIT_FETCHING_TIMEOUT_MS","cancelEvent","event","originalEvent","cancelable","preventDefault","stopPropagation","PullToRefresh","children","isFetching","onRefresh","className","restProps","platform","scroll","window","prevIsFetching","initParams","useMemo","start","max","maxY","refreshing","positionMultiplier","spinnerY","setSpinnerY","useState","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","resetRefreshingState","useCallback","onRefreshingFinish","waitFetchingTimeoutId","undefined","clearTimeout","current","runRefreshing","setTimeout","prevSpinnerY","toggleDocumentOverscrollBehavior","startYRef","onTouchStart","startY","iosRefreshStartedRef","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","currentY","progress","abs","iosCanStartRefreshDuringGesture","onTouchEnd","spinnerTransform","contentTransform","Provider","value","aria-live","aria-busy","onStart","onMove","onEnd","useParentWidth","style","transform","opacity","on","div"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { type DOMProps, initializeBrowserGesturePreventionEffect, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { AnyFunction, HasChildren } from '../../types';\nimport { type ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { type CustomTouchEvent, Touch, type TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nconst WAIT_FETCHING_TIMEOUT_MS = 1000;\n\nfunction cancelEvent(event: CustomTouchEvent) {\n  /* istanbul ignore if: неясно в какой ситуации `event` из `Touch` может быть не определён */\n  if (!event) {\n    return false;\n  }\n  if ('preventDefault' in event.originalEvent && event.originalEvent.cancelable) {\n    event.originalEvent.preventDefault();\n  }\n  if ('stopPropagation' in event.originalEvent) {\n    event.originalEvent.stopPropagation();\n  }\n  return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n  /**\n   * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n   */\n  onRefresh: AnyFunction;\n  /**\n   * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n   */\n  isFetching?: boolean;\n  /** @ignore */\n  scroll?: ScrollContextInterface;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n  children,\n  isFetching,\n  onRefresh,\n  className,\n  ...restProps\n}: PullToRefreshProps): React.ReactNode => {\n  const platform = usePlatform();\n  const scroll = useScroll();\n  const { window } = useDOM();\n  const prevIsFetching = usePrevious(isFetching);\n\n  const initParams = React.useMemo(\n    () => ({\n      start: platform === 'ios' ? -10 : -45,\n      max: platform === 'ios' ? 50 : 80,\n      maxY: platform === 'ios' ? 400 : 80,\n      refreshing: platform === 'ios' ? 36 : 50,\n      positionMultiplier: platform === 'ios' ? 0.21 : 1,\n    }),\n    [platform],\n  );\n\n  const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n  const [watching, setWatching] = React.useState(false);\n  const [refreshing, setRefreshing] = React.useState(false);\n  const [canRefresh, setCanRefresh] = React.useState(false);\n  const [touchDown, setTouchDown] = React.useState(false);\n  const prevTouchDown = usePrevious(touchDown);\n\n  const touchY = React.useRef(0);\n  const [contentShift, setContentShift] = React.useState(0);\n  const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n  const resetRefreshingState = React.useCallback(() => {\n    setWatching(false);\n    setCanRefresh(false);\n    setRefreshing(false);\n    setSpinnerY(initParams.start);\n    setSpinnerProgress(0);\n    setContentShift(0);\n  }, [initParams]);\n\n  const onRefreshingFinish = React.useCallback(() => {\n    if (!touchDown) {\n      resetRefreshingState();\n    }\n  }, [touchDown, resetRefreshingState]);\n\n  const waitFetchingTimeoutId = React.useRef<NodeJS.Timeout>();\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n      onRefreshingFinish();\n    }\n  }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n      clearTimeout(waitFetchingTimeoutId.current);\n    }\n  }, [isFetching, prevIsFetching]);\n\n  const runRefreshing = React.useCallback(() => {\n    if (!refreshing && onRefresh) {\n      // cleanup if the consumer does not start fetching in 1s\n      clearTimeout(waitFetchingTimeoutId.current);\n      waitFetchingTimeoutId.current = setTimeout(onRefreshingFinish, WAIT_FETCHING_TIMEOUT_MS);\n\n      setRefreshing(true);\n      setSpinnerY((prevSpinnerY) => (platform === 'ios' ? prevSpinnerY : initParams.refreshing));\n\n      onRefresh();\n    }\n  }, [refreshing, onRefresh, onRefreshingFinish, platform, initParams.refreshing]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n      if (!refreshing && canRefresh) {\n        runRefreshing();\n      } else if (refreshing && !isFetching) {\n        // only iOS can start refresh before gesture end\n        resetRefreshingState();\n        /* istanbul ignore if: TODO написать тест */\n      } else {\n        // refreshing && isFetching: refresh in progress\n        // OR !refreshing && !canRefresh: pull was not strong enough\n        setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n        setSpinnerProgress(0);\n        setContentShift(0);\n      }\n    }\n  }, [\n    initParams,\n    prevIsFetching,\n    isFetching,\n    onRefreshingFinish,\n    prevTouchDown,\n    touchDown,\n    refreshing,\n    canRefresh,\n    runRefreshing,\n  ]);\n\n  useIsomorphicLayoutEffect(\n    function toggleDocumentOverscrollBehavior() {\n      return window && (watching || refreshing)\n        ? initializeBrowserGesturePreventionEffect(window)\n        : undefined;\n    },\n    [window, watching, refreshing],\n  );\n\n  const startYRef = React.useRef(0);\n\n  const onTouchStart = (event: CustomTouchEvent) => {\n    if (refreshing) {\n      cancelEvent(event);\n      return;\n    }\n    setTouchDown(true);\n    startYRef.current = event.startY;\n  };\n\n  const iosRefreshStartedRef = React.useRef(false);\n  const onTouchMove = (event: CustomTouchEvent) => {\n    const { isY, shiftY } = event;\n    const { start, max } = initParams;\n    const pageYOffset = scroll?.getScroll().y;\n\n    if (watching && touchDown) {\n      cancelEvent(event);\n\n      const { positionMultiplier, maxY } = initParams;\n\n      const shift = Math.max(0, shiftY - touchY.current);\n\n      const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n      const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n      setSpinnerY(currentY);\n      setSpinnerProgress(clamp(progress, 0, 80));\n      setCanRefresh(progress > 80);\n      setContentShift((currentY + 10) * 2.3);\n\n      const iosCanStartRefreshDuringGesture =\n        platform === 'ios' && progress > 85 && !refreshing && !iosRefreshStartedRef.current;\n      if (iosCanStartRefreshDuringGesture) {\n        iosRefreshStartedRef.current = true;\n        runRefreshing();\n      }\n    } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n      cancelEvent(event);\n\n      touchY.current = shiftY;\n      setWatching(true);\n      setSpinnerY(start);\n      setSpinnerProgress(0);\n    }\n  };\n\n  const onTouchEnd = () => {\n    setWatching(false);\n    setTouchDown(false);\n    iosRefreshStartedRef.current = false;\n  };\n\n  const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n  let contentTransform = '';\n\n  if (platform === 'ios' && refreshing && !touchDown) {\n    contentTransform = 'translate3d(0, 100px, 0)';\n  } else if (platform === 'ios' && (contentShift || refreshing)) {\n    contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n  }\n\n  return (\n    <TouchRootContext.Provider value={true}>\n      <Touch\n        aria-live=\"polite\"\n        aria-busy={!!isFetching}\n        {...restProps}\n        onStart={onTouchStart}\n        onMove={onTouchMove}\n        onEnd={onTouchEnd}\n        className={classNames(\n          styles['PullToRefresh'],\n          platform === 'ios' && styles['PullToRefresh--ios'],\n          watching && styles['PullToRefresh--watching'],\n          refreshing && styles['PullToRefresh--refreshing'],\n          className,\n        )}\n      >\n        <FixedLayout className={styles['PullToRefresh__controls']} useParentWidth>\n          <PullToRefreshSpinner\n            style={{\n              transform: spinnerTransform,\n              opacity: watching || refreshing || canRefresh ? 1 : 0,\n            }}\n            on={refreshing}\n            progress={refreshing ? undefined : spinnerProgress}\n          />\n        </FixedLayout>\n\n        <div\n          className={styles['PullToRefresh__content']}\n          style={{\n            transform: contentTransform,\n          }}\n        >\n          {children}\n        </div>\n      </Touch>\n    </TouchRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","clamp","usePlatform","usePrevious","initializeBrowserGesturePreventionEffect","useDOM","useIsomorphicLayoutEffect","useScroll","FixedLayout","Touch","TouchRootContext","PullToRefreshSpinner","WAIT_FETCHING_TIMEOUT_MS","cancelEvent","event","originalEvent","cancelable","preventDefault","stopPropagation","PullToRefresh","children","isFetching","onRefresh","className","restProps","platform","scroll","window","prevIsFetching","initParams","useMemo","start","max","maxY","refreshing","positionMultiplier","spinnerY","setSpinnerY","useState","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","resetRefreshingState","useCallback","onRefreshingFinish","waitFetchingTimeoutId","undefined","clearTimeout","current","runRefreshing","setTimeout","prevSpinnerY","toggleDocumentOverscrollBehavior","startYRef","onTouchStart","startY","iosRefreshStartedRef","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","currentY","progress","abs","iosCanStartRefreshDuringGesture","onTouchEnd","spinnerTransform","contentTransform","Provider","value","aria-live","aria-busy","onStart","onMove","onEnd","useParentWidth","style","transform","opacity","on","div"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface PullToRefreshSpinnerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     size?: number;
     strokeWidth?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"PullToRefreshSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAUxD,MAAM,WAAW,yBAA0B,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB,gEAO9B,yBAAyB,KAAG,KAAK,CAAC,SAgDpC,CAAC"}
+{"version":3,"file":"PullToRefreshSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,MAAM,WAAW,yBAA0B,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB,gEAO9B,yBAAyB,KAAG,KAAK,CAAC,SAgDpC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\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  children = 'Пожалуйста, подождите...',\n  ...restProps\n}: PullToRefreshSpinnerProps): React.ReactNode => {\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      {...restProps}\n    >\n      {on && <VisuallyHidden>{children}</VisuallyHidden>}\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":["classNames","RootComponent","VisuallyHidden","calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","children","restProps","dasharray","circleCenter","dashoffset","baseClassName","svg","role","className","style","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,MAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,EAAE,GAAGH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AASA,OAAO,MAAMG,uBAAuB;QAAC,EACnCC,KAAK,IAAI,EACTC,OAAO,EAAE,EACTC,cAAc,GAAG,EACjBN,WAAW,CAAC,EACZO,WAAW,0BAA0B,EAEX,WADvBC;QALHJ;QACAC;QACAC;QACAN;QACAO;;IAGA,MAAMR,SAAS,MAAMM,OAAO,MAAMC;IAClC,MAAMG,YAAY,IAAIR,KAAKC,EAAE,GAAGH;IAChC,MAAMW,eAAe,MAAML;IAE3B,MAAMM,aAAad,qBAAqBO,KAAK,KAAKJ,UAAUD;IAE5D,qBACE,MAACJ;QACCiB,eAAelB,yCAEbU;OAEEI;;YAEHJ,oBAAM,KAACR;0BAAgBW;;0BACxB,KAACM;gBACCC,MAAK;gBACLC,SAAS;gBACTC,OAAO;oBACLC,OAAOZ;oBACPa,QAAQb;gBACV;gBACAc,SAAS,CAAC,IAAI,EAAEd,KAAK,CAAC,EAAEA,KAAK,CAAC;gBAC9Be,OAAM;0BAEN,cAAA,KAACC;oBACCL,OAAO;wBACLC,OAAOZ;wBACPa,QAAQb;wBACRiB,iBAAiB,CAAC,EAAEZ,aAAa,GAAG,EAAEA,aAAa,EAAE,CAAC;oBACxD;8BAEA,cAAA,KAACa;wBACCR,SAAS;wBACTS,MAAK;wBACLC,iBAAiBhB;wBACjBiB,kBAAkBf;wBAClBL,aAAaA;wBACbqB,eAAc;wBACdC,IAAIlB;wBACJmB,IAAInB;wBACJoB,GAAG/B;;;;;;AAMf,EAAE"}
+{"version":3,"sources":["../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\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  children = 'Пожалуйста, подождите...',\n  ...restProps\n}: PullToRefreshSpinnerProps): React.ReactNode => {\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      {...restProps}\n    >\n      {on && <VisuallyHidden>{children}</VisuallyHidden>}\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":["classNames","RootComponent","VisuallyHidden","calcStrokeDashOffset","value","radius","progress","Math","PI","PullToRefreshSpinner","on","size","strokeWidth","children","restProps","dasharray","circleCenter","dashoffset","baseClassName","svg","role","className","style","width","height","viewBox","xmlns","g","transformOrigin","circle","fill","strokeDasharray","strokeDashoffset","strokeLinecap","cx","cy","r"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,SAASC,qBAAqBC,KAAa,EAAEC,MAAc;IACzD,MAAMC,WAAWF,QAAQ;IACzB,OAAO,IAAIG,KAAKC,EAAE,GAAGH,SAAU,CAAA,IAAIC,QAAO;AAC5C;AASA,OAAO,MAAMG,uBAAuB;QAAC,EACnCC,KAAK,IAAI,EACTC,OAAO,EAAE,EACTC,cAAc,GAAG,EACjBN,WAAW,CAAC,EACZO,WAAW,0BAA0B,EAEX,WADvBC;QALHJ;QACAC;QACAC;QACAN;QACAO;;IAGA,MAAMR,SAAS,MAAMM,OAAO,MAAMC;IAClC,MAAMG,YAAY,IAAIR,KAAKC,EAAE,GAAGH;IAChC,MAAMW,eAAe,MAAML;IAE3B,MAAMM,aAAad,qBAAqBO,KAAK,KAAKJ,UAAUD;IAE5D,qBACE,MAACJ;QACCiB,eAAelB,yCAEbU;OAEEI;;YAEHJ,oBAAM,KAACR;0BAAgBW;;0BACxB,KAACM;gBACCC,MAAK;gBACLC,SAAS;gBACTC,OAAO;oBACLC,OAAOZ;oBACPa,QAAQb;gBACV;gBACAc,SAAS,CAAC,IAAI,EAAEd,KAAK,CAAC,EAAEA,KAAK,CAAC;gBAC9Be,OAAM;0BAEN,cAAA,KAACC;oBACCL,OAAO;wBACLC,OAAOZ;wBACPa,QAAQb;wBACRiB,iBAAiB,CAAC,EAAEZ,aAAa,GAAG,EAAEA,aAAa,EAAE,CAAC;oBACxD;8BAEA,cAAA,KAACa;wBACCR,SAAS;wBACTS,MAAK;wBACLC,iBAAiBhB;wBACjBiB,kBAAkBf;wBAClBL,aAAaA;wBACbqB,eAAc;wBACdC,IAAIlB;wBACJmB,IAAInB;wBACJoB,GAAG/B;;;;;;AAMf,EAAE"}

package/dist/components/Radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasDataAttribute, HasRef, HasRootRef } from '../../types';
-import { type TappableProps } from '../Tappable/Tappable';
+import type { HasDataAttribute, HasRef, HasRootRef } from '../../types';
+import type { TappableProps } from '../Tappable/Tappable';
 import { RadioInput } from './RadioInput/RadioInput';
 export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLLabelElement>, Pick<TappableProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'> {
     description?: React.ReactNode;

package/dist/components/Radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGnE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,aAAa,EACb,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;QAEI;IACJ,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK;0KAef,UAAU,GAAG,KAAK,CAAC,SAAS;;CAoB9B,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGxE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,gBAAgB,CAAC,EAC5B,IAAI,CACF,aAAa,EACb,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAC3E;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;QAEI;IACJ,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK;0KAef,UAAU,GAAG,KAAK,CAAC,SAAS;;CAoB9B,CAAC"}

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasDataAttribute, HasRef, HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport { type TappableProps } from '../Tappable/Tappable';\nimport { RadioInput } from './RadioInput/RadioInput';\nimport styles from './Radio.module.css';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n  /**\n   * Позволяет передавать data-* аттрибуты элементу label\n   **/\n  labelProps?: HasDataAttribute;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  labelProps,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  ...restProps\n}: RadioProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      style={style}\n      className={classNames(styles['Radio'], className)}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      {...labelProps}\n    >\n      <RadioInput {...restProps} getRef={getRef} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\nRadio.Input = RadioInput;\n"],"names":["React","classNames","SelectionControl","SelectionControlLabel","RadioInput","Radio","children","description","style","className","getRootRef","titleAfter","getRef","labelProps","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","restProps","disabled","Input"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,SAASC,qBAAqB,QAAQ,kEAAkE;AAExG,SAASC,UAAU,QAAQ,0BAA0B;AAmBrD;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAEL,WADRC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAAChB;QACCM,OAAOA;QACPC,WAAWR,wBAA4BQ;QACvCW,UAAUD,UAAUC,QAAQ;QAC5BV,YAAYA;QACZI,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;OACdL;;0BAEJ,KAACT,oDAAee;gBAAWP,QAAQA;;0BACnC,KAACT;gBAAsBQ,YAAYA;gBAAYJ,aAAaA;0BACzDD;;;;AAIT,EAAE;AAEFD,MAAMgB,KAAK,GAAGjB"}
+{"version":3,"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasDataAttribute, HasRef, HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableProps } from '../Tappable/Tappable';\nimport { RadioInput } from './RadioInput/RadioInput';\nimport styles from './Radio.module.css';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  titleAfter?: React.ReactNode;\n  /**\n   * Позволяет передавать data-* аттрибуты элементу label\n   **/\n  labelProps?: HasDataAttribute;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  labelProps,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  ...restProps\n}: RadioProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      style={style}\n      className={classNames(styles['Radio'], className)}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      {...labelProps}\n    >\n      <RadioInput {...restProps} getRef={getRef} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\nRadio.Input = RadioInput;\n"],"names":["React","classNames","SelectionControl","SelectionControlLabel","RadioInput","Radio","children","description","style","className","getRootRef","titleAfter","getRef","labelProps","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","restProps","disabled","Input"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,SAASC,qBAAqB,QAAQ,kEAAkE;AAExG,SAASC,UAAU,QAAQ,0BAA0B;AAmBrD;;CAEC,GACD,OAAO,MAAMC,QAAQ;QAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAEL,WADRC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,MAAChB;QACCM,OAAOA;QACPC,WAAWR,wBAA4BQ;QACvCW,UAAUD,UAAUC,QAAQ;QAC5BV,YAAYA;QACZI,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;OACdL;;0BAEJ,KAACT,oDAAee;gBAAWP,QAAQA;;0BACnC,KAACT;gBAAsBQ,YAAYA;gBAAYJ,aAAaA;0BACzDD;;;;AAIT,EAAE;AAEFD,MAAMgB,KAAK,GAAGjB"}

package/dist/components/Radio/RadioInput/RadioInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../../types';
+import type { HasRef, HasRootRef } from '../../../types';
 export interface RadioInputProps extends Omit<React.ComponentProps<'input'>, 'type'>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
 }
 export declare function RadioInput({ className, style, getRootRef, getRef, ...restProps }: RadioInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Radio/RadioInput/RadioInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/RadioInput/RadioInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAgCpD,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;CAAG;AAE/B,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACb,EAAE,eAAe,2CAajB"}
+{"version":3,"file":"RadioInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/RadioInput/RadioInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAgCzD,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,EACjD,UAAU,CAAC,gBAAgB,CAAC,EAC5B,MAAM,CAAC,gBAAgB,CAAC;CAAG;AAE/B,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACb,EAAE,eAAe,2CAajB"}

package/dist/components/Radio/RadioInput/RadioInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/RadioInput/RadioInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './RadioInput.module.css';\n\nfunction RadioIcon24(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7\" className={styles['RadioInput__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction RadioIcon20(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" aria-hidden {...props}>\n      <circle cx=\"10\" cy=\"10\" r=\"7.75\" stroke=\"currentColor\" strokeWidth=\"1.5\" fill=\"none\" />\n      <circle cx=\"10\" cy=\"10\" r=\"5.5\" className={styles['RadioInput__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction RadioIcon() {\n  return (\n    <div className={styles['RadioInput__icon']}>\n      <AdaptiveIconRenderer IconCompact={RadioIcon20} IconRegular={RadioIcon24} />\n    </div>\n  );\n}\n\nexport interface RadioInputProps\n  extends Omit<React.ComponentProps<'input'>, 'type'>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\nexport function RadioInput({\n  className,\n  style,\n  getRootRef,\n  getRef,\n  ...restProps\n}: RadioInputProps) {\n  return (\n    <RootComponent className={className} style={style} getRootRef={getRootRef}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        baseClassName={styles['RadioInput__input']}\n        getRootRef={getRef}\n      />\n      <RadioIcon />\n    </RootComponent>\n  );\n}\n"],"names":["React","AdaptiveIconRenderer","RootComponent","VisuallyHidden","RadioIcon24","props","svg","xmlns","width","height","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","RadioIcon20","RadioIcon","div","IconCompact","IconRegular","RadioInput","style","getRootRef","getRef","restProps","Component","type","baseClassName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,kDAAkD;AACvF,SAASC,aAAa,QAAQ,oCAAoC;AAClE,SAASC,cAAc,QAAQ,sCAAsC;AAGrE,SAASC,YAAYC,KAAkC;IACrD,qBACE,MAACC;QAAIC,OAAM;QAA6BC,OAAM;QAAKC,QAAO;QAAKC,aAAW;OAAKL;;0BAC7E,KAACM;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAKC,QAAO;gBAAeC,aAAY;gBAAIC,MAAK;;0BAC1E,KAACN;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAII,SAAS;gBAA6BD,MAAK;;;;AAG/E;AAEA,SAASE,YAAYd,KAAkC;IACrD,qBACE,MAACC;QAAIC,OAAM;QAA6BC,OAAM;QAAKC,QAAO;QAAKC,aAAW;OAAKL;;0BAC7E,KAACM;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAOC,QAAO;gBAAeC,aAAY;gBAAMC,MAAK;;0BAC9E,KAACN;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAMI,SAAS;gBAA6BD,MAAK;;;;AAGjF;AAEA,SAASG;IACP,qBACE,KAACC;QAAIH,SAAS;kBACZ,cAAA,KAACjB;YAAqBqB,aAAaH;YAAaI,aAAanB;;;AAGnE;AAOA,OAAO,SAASoB,WAAW;QAAA,EACzBN,SAAS,EACTO,KAAK,EACLC,UAAU,EACVC,MAAM,EAEU,GANS,QAKtBC,uCALsB;QACzBV;QACAO;QACAC;QACAC;;IAGA,qBACE,MAACzB;QAAcgB,WAAWA;QAAWO,OAAOA;QAAOC,YAAYA;;0BAC7D,KAACvB,wDACKyB;gBACJC,WAAU;gBACVC,MAAK;gBACLC,aAAa;gBACbL,YAAYC;;0BAEd,KAACP;;;AAGP"}
+{"version":3,"sources":["../../../../src/components/Radio/RadioInput/RadioInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { HasRef, HasRootRef } from '../../../types';\nimport { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './RadioInput.module.css';\n\nfunction RadioIcon24(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" aria-hidden {...props}>\n      <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"2\" fill=\"none\" />\n      <circle cx=\"12\" cy=\"12\" r=\"7\" className={styles['RadioInput__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction RadioIcon20(props: React.ComponentProps<'svg'>) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" aria-hidden {...props}>\n      <circle cx=\"10\" cy=\"10\" r=\"7.75\" stroke=\"currentColor\" strokeWidth=\"1.5\" fill=\"none\" />\n      <circle cx=\"10\" cy=\"10\" r=\"5.5\" className={styles['RadioInput__pin']} fill=\"currentColor\" />\n    </svg>\n  );\n}\n\nfunction RadioIcon() {\n  return (\n    <div className={styles['RadioInput__icon']}>\n      <AdaptiveIconRenderer IconCompact={RadioIcon20} IconRegular={RadioIcon24} />\n    </div>\n  );\n}\n\nexport interface RadioInputProps\n  extends Omit<React.ComponentProps<'input'>, 'type'>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\nexport function RadioInput({\n  className,\n  style,\n  getRootRef,\n  getRef,\n  ...restProps\n}: RadioInputProps) {\n  return (\n    <RootComponent className={className} style={style} getRootRef={getRootRef}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"radio\"\n        baseClassName={styles['RadioInput__input']}\n        getRootRef={getRef}\n      />\n      <RadioIcon />\n    </RootComponent>\n  );\n}\n"],"names":["React","AdaptiveIconRenderer","RootComponent","VisuallyHidden","RadioIcon24","props","svg","xmlns","width","height","aria-hidden","circle","cx","cy","r","stroke","strokeWidth","fill","className","RadioIcon20","RadioIcon","div","IconCompact","IconRegular","RadioInput","style","getRootRef","getRef","restProps","Component","type","baseClassName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,kDAAkD;AACvF,SAASC,aAAa,QAAQ,oCAAoC;AAClE,SAASC,cAAc,QAAQ,sCAAsC;AAGrE,SAASC,YAAYC,KAAkC;IACrD,qBACE,MAACC;QAAIC,OAAM;QAA6BC,OAAM;QAAKC,QAAO;QAAKC,aAAW;OAAKL;;0BAC7E,KAACM;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAKC,QAAO;gBAAeC,aAAY;gBAAIC,MAAK;;0BAC1E,KAACN;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAII,SAAS;gBAA6BD,MAAK;;;;AAG/E;AAEA,SAASE,YAAYd,KAAkC;IACrD,qBACE,MAACC;QAAIC,OAAM;QAA6BC,OAAM;QAAKC,QAAO;QAAKC,aAAW;OAAKL;;0BAC7E,KAACM;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAOC,QAAO;gBAAeC,aAAY;gBAAMC,MAAK;;0BAC9E,KAACN;gBAAOC,IAAG;gBAAKC,IAAG;gBAAKC,GAAE;gBAAMI,SAAS;gBAA6BD,MAAK;;;;AAGjF;AAEA,SAASG;IACP,qBACE,KAACC;QAAIH,SAAS;kBACZ,cAAA,KAACjB;YAAqBqB,aAAaH;YAAaI,aAAanB;;;AAGnE;AAOA,OAAO,SAASoB,WAAW;QAAA,EACzBN,SAAS,EACTO,KAAK,EACLC,UAAU,EACVC,MAAM,EAEU,GANS,QAKtBC,uCALsB;QACzBV;QACAO;QACAC;QACAC;;IAGA,qBACE,MAACzB;QAAcgB,WAAWA;QAAWO,OAAOA;QAAOC,YAAYA;;0BAC7D,KAACvB,wDACKyB;gBACJC,WAAU;gBACVC,MAAK;gBACLC,aAAa;gBACbL,YAAYC;;0BAEd,KAACP;;;AAGP"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     mode?: 'vertical' | 'horizontal';
 }

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,2BAGpB,eAAe,KAAG,KAAK,CAAC,SAU1B,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,2BAGpB,eAAe,KAAG,KAAK,CAAC,SAU1B,CAAC"}

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 { 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 = ({\n  mode = 'vertical',\n  ...restProps\n}: RadioGroupProps): React.ReactNode => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n    )}\n    role=\"radiogroup\"\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","RootComponent","RadioGroup","mode","restProps","baseClassName","role"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAO/D;;CAEC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,OAAO,UAAU,EAED,WADbC;QADHD;;yBAGA,KAACF;QACCI,eAAeL,6BAEb,0BACAG,SAAS;QAEXG,MAAK;OACDF;EAEN"}
+{"version":3,"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { 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 = ({\n  mode = 'vertical',\n  ...restProps\n}: RadioGroupProps): React.ReactNode => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n    )}\n    role=\"radiogroup\"\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","RootComponent","RadioGroup","mode","restProps","baseClassName","role"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAO/D;;CAEC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,OAAO,UAAU,EAED,WADbC;QADHD;;yBAGA,KAACF;QACCI,eAAeL,6BAEb,0BACAG,SAAS;QAEXG,MAAK;OACDF;EAEN"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface RemovableProps {
     /**
      * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.

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

@@ -1 +1 @@
-{"version":3,"file":"Removable.d.ts","sourceRoot":"","sources":["../../../src/components/Removable/Removable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAOxD,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiGD,UAAU,uBAAuB;IAC/B;;;;;OAKG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,iBACR,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,cAAc;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC1F;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,6HAUnB,iBAAiB,KAAG,KAAK,CAAC,SAqD5B,CAAC"}
+{"version":3,"file":"Removable.d.ts","sourceRoot":"","sources":["../../../src/components/Removable/Removable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiGD,UAAU,uBAAuB;IAC/B;;;;;OAKG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,iBACR,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,cAAc;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC1F;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,6HAUnB,iBAAiB,KAAG,KAAK,CAAC,SAqD5B,CAAC"}

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 } 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   * Ячейка превращается в неактивную\n   */\n  disabled?: boolean;\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  disabled,\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 || disabled}\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,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\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            disabled={disabled}\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          disabled={disabled}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","onClick","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 } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport type { 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   * Ячейка превращается в неактивную\n   */\n  disabled?: boolean;\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  disabled,\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 || disabled}\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,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\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            disabled={disabled}\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          disabled={disabled}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","onClick","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/components/RichCell/RichCell.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TappableProps } from '../Tappable/Tappable';
+import { type TappableProps } from '../Tappable/Tappable';
 import { RichCellIcon } from './RichCellIcon/RichCellIcon';
 export interface RichCellProps extends TappableProps {
     /**
@@ -41,6 +41,10 @@ export interface RichCellProps extends TappableProps {
      * Текст под `after`.
      */
     afterCaption?: React.ReactNode;
+    /**
+     * Выравнивание after компонента по вертикали
+     */
+    afterAlign?: 'start' | 'center' | 'end';
     /**
      * Убирает анимацию нажатия.
      */

package/dist/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;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"}
+{"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,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEpE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAc3D,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,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC;;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;CAmE3B,CAAC"}

package/dist/components/RichCell/RichCell.js

@@ -10,12 +10,17 @@ import { Subhead } from '../Typography/Subhead/Subhead';
 import { RichCellIcon } from './RichCellIcon/RichCellIcon';
 const sizeYClassNames = {
     none: "vkuiRichCell--sizeY-none",
-    ['compact']: "vkuiRichCell--sizeY-compact"
+    compact: "vkuiRichCell--sizeY-compact"
+};
+const alignAfterClassNames = {
+    start: "vkuiRichCell__content-after--align-start",
+    center: "vkuiRichCell__content-after--align-center",
+    end: "vkuiRichCell__content-after--align-end"
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
  */ export const RichCell = (_param)=>{
-    var { subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className } = _param, restProps = _object_without_properties(_param, [
+    var { subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, afterAlign = 'start' } = _param, restProps = _object_without_properties(_param, [
         "subhead",
         "children",
         "text",
@@ -26,9 +31,28 @@ const sizeYClassNames = {
         "bottom",
         "actions",
         "multiline",
-        "className"
+        "className",
+        "afterAlign"
     ]);
     const { sizeY = 'none' } = useAdaptivity();
+    const afterRender = ()=>{
+        if (!after && !afterCaption) {
+            return;
+        }
+        return /*#__PURE__*/ _jsxs("div", {
+            className: classNames("vkuiRichCell__content-after", alignAfterClassNames[afterAlign]),
+            children: [
+                after && /*#__PURE__*/ _jsx("div", {
+                    className: "vkuiRichCell__after-children",
+                    children: after
+                }),
+                afterCaption && /*#__PURE__*/ _jsx("div", {
+                    className: "vkuiRichCell__after-caption",
+                    children: afterCaption
+                })
+            ]
+        });
+    };
     return /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({}, restProps), {
         className: classNames("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         children: [
@@ -65,19 +89,7 @@ const sizeYClassNames = {
                                     })
                                 ]
                             }),
-                            (after || afterCaption) && /*#__PURE__*/ _jsxs("div", {
-                                className: "vkuiRichCell__content-after",
-                                children: [
-                                    after && /*#__PURE__*/ _jsx("div", {
-                                        className: "vkuiRichCell__after-children",
-                                        children: after
-                                    }),
-                                    afterCaption && /*#__PURE__*/ _jsx("div", {
-                                        className: "vkuiRichCell__after-caption",
-                                        children: afterCaption
-                                    })
-                                ]
-                            })
+                            afterAlign === 'start' && afterRender()
                         ]
                     }),
                     bottom && /*#__PURE__*/ _jsx("div", {
@@ -89,7 +101,8 @@ const sizeYClassNames = {
                         children: actions
                     })
                 ]
-            })
+            }),
+            afterAlign !== 'start' && afterRender()
         ]
     }));
 };

package/dist/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: 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","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;AAG3D,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AAoDA;;CAEC,GACD,OAAO,MAAMC,WAET;QAAC,EACHC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EAEK,WADXC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,qBACE,MAACC,kDACKiB;QACJD,WAAWlB,2BAET,CAACiB,4CACDG,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CF;;YAGDN,wBAAU,KAACS;gBAAIH,SAAS;0BAA+BN;;0BACxD,MAACS;gBAAIH,SAAS;;kCACZ,MAACG;wBAAIH,SAAS;;0CACZ,MAACG;gCAAIH,SAAS;;oCACXV,yBACC,KAACL;wCAAQmB,WAAU;wCAAMJ,SAAS;kDAC/BV;;kDAGL,KAACa;wCAAIH,SAAS;kDAAiCT;;oCAC9CC,sBAAQ,KAACW;wCAAIH,SAAS;kDAA6BR;;oCACnDC,yBACC,KAACR;wCAAQmB,WAAU;wCAAMJ,SAAS;kDAC/BP;;;;4BAILE,CAAAA,SAASC,YAAW,mBACpB,MAACO;gCAAIH,SAAS;;oCACXL,uBAAS,KAACQ;wCAAIH,SAAS;kDAAuCL;;oCAC9DC,8BACC,KAACO;wCAAIH,SAAS;kDAAsCJ;;;;;;oBAK3DC,wBAAU,KAACM;wBAAIH,SAAS;kCAA+BH;;oBACvDC,yBAAW,KAACK;wBAAIH,SAAS;kCAAgCF;;;;;;AAIlE,EAAE;AAEFT,SAASgB,IAAI,GAAGnB"}
+{"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, type 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\nconst alignAfterClassNames = {\n  start: styles['RichCell__content-after--align-start'],\n  center: styles['RichCell__content-after--align-center'],\n  end: styles['RichCell__content-after--align-end'],\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   * Выравнивание after компонента по вертикали\n   */\n  afterAlign?: 'start' | 'center' | 'end';\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  afterAlign = 'start',\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const afterRender = () => {\n    if (!after && !afterCaption) {\n      return;\n    }\n    return (\n      <div\n        className={classNames(styles['RichCell__content-after'], alignAfterClassNames[afterAlign])}\n      >\n        {after && <div className={styles['RichCell__after-children']}>{after}</div>}\n        {afterCaption && <div className={styles['RichCell__after-caption']}>{afterCaption}</div>}\n      </div>\n    );\n  };\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          {afterAlign === 'start' && afterRender()}\n        </div>\n        {bottom && <div className={styles['RichCell__bottom']}>{bottom}</div>}\n        {actions && <div className={styles['RichCell__actions']}>{actions}</div>}\n      </div>\n      {afterAlign !== 'start' && afterRender()}\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","sizeYClassNames","none","compact","alignAfterClassNames","start","center","end","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","afterAlign","restProps","sizeY","afterRender","div","Component","Icon"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAA4B,uBAAuB;AACpE,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,YAAY,QAAQ,8BAA8B;AAG3D,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,MAAMC,uBAAuB;IAC3BC,KAAK;IACLC,MAAM;IACNC,GAAG;AACL;AAwDA;;CAEC,GACD,OAAO,MAAMC,WAET;QAAC,EACHC,OAAO,EACPC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,aAAa,OAAO,EAEN,WADXC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAM0B,cAAc;QAClB,IAAI,CAACT,SAAS,CAACC,cAAc;YAC3B;QACF;QACA,qBACE,MAACS;YACCL,WAAWvB,0CAA8CQ,oBAAoB,CAACgB,WAAW;;gBAExFN,uBAAS,KAACU;oBAAIL,SAAS;8BAAuCL;;gBAC9DC,8BAAgB,KAACS;oBAAIL,SAAS;8BAAsCJ;;;;IAG3E;IAEA,qBACE,MAACjB,kDACKuB;QACJF,WAAWvB,2BAET,CAACsB,4CACDI,UAAU,aAAarB,eAAe,CAACqB,MAAM,EAC7CH;;YAGDN,wBAAU,KAACW;gBAAIL,SAAS;0BAA+BN;;0BACxD,MAACW;gBAAIL,SAAS;;kCACZ,MAACK;wBAAIL,SAAS;;0CACZ,MAACK;gCAAIL,SAAS;;oCACXV,yBACC,KAACV;wCAAQ0B,WAAU;wCAAMN,SAAS;kDAC/BV;;kDAGL,KAACe;wCAAIL,SAAS;kDAAiCT;;oCAC9CC,sBAAQ,KAACa;wCAAIL,SAAS;kDAA6BR;;oCACnDC,yBACC,KAACb;wCAAQ0B,WAAU;wCAAMN,SAAS;kDAC/BP;;;;4BAINQ,eAAe,WAAWG;;;oBAE5BP,wBAAU,KAACQ;wBAAIL,SAAS;kCAA+BH;;oBACvDC,yBAAW,KAACO;wBAAIL,SAAS;kCAAgCF;;;;YAE3DG,eAAe,WAAWG;;;AAGjC,EAAE;AAEFf,SAASkB,IAAI,GAAG1B"}

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

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

package/dist/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,KAAG,KAAK,CAAC,SAE7D,CAAC"}
+{"version":3,"file":"RichCellIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAIhE,MAAM,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAE1E,eAAO,MAAM,YAAY,UAAW,iBAAiB,KAAG,KAAK,CAAC,SAE7D,CAAC"}