@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/RangeSlider/UniversalSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalSlider.js","names":["React","classNames","rescale","useAdaptivity","useExternRef","SizeType","Touch","sizeYClassNames","none","COMPACT","UniversalSlider","min","max","step","value","defaultValue","onChange","getRootRef","disabled","className","restProps","start","end","isRange","gesture","useRef","dragging","startX","containerWidth","current","container","thumbStart","thumbEnd","sizeY","offsetToValue","absolute","updateRange","nextValue","snapDirection","pos","target","Math","abs","onStart","e","boundingRect","getBoundingClientRect","width","absolutePosition","left","originalEvent","stopPropagation","onMove","shiftX","preventDefault","onEnd","toPercent","v","draggerStyle","join","REGULAR"],"sources":["../../../../src/components/RangeSlider/UniversalSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { rescale } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Touch, TouchEvent, TouchEventHandler } from '../Touch/Touch';\nimport styles from '../Slider/Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport type UniversalValue = [number | null, number];\n\nexport interface UniversalSliderProps<Value>\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: Value;\n  defaultValue?: Value;\n  disabled?: boolean;\n  onChange?(value: Value, e: TouchEvent): void;\n}\n\nexport const UniversalSlider = ({\n  min = 0,\n  max = 100,\n  step,\n  value = [0, 0],\n  defaultValue,\n  onChange,\n  getRootRef,\n  disabled,\n  className,\n  ...restProps\n}: UniversalSliderProps<UniversalValue>) => {\n  const [start, end] = value;\n  const isRange = start != null;\n  const gesture = React.useRef({\n    dragging: false as false | 'start' | 'end',\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const container = useExternRef(getRootRef);\n  const thumbStart = React.useRef<HTMLDivElement>(null);\n  const thumbEnd = React.useRef<HTMLDivElement>(null);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const offsetToValue = (absolute: number) => {\n    return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });\n  };\n\n  const updateRange = (nextValue: number): UniversalValue => {\n    if (start == null) {\n      return [null, nextValue];\n    }\n\n    const { dragging } = gesture;\n    if (dragging === 'start') {\n      if (nextValue > end) {\n        // \"перехватиться\", если перетянули за конец\n        gesture.dragging = 'end';\n        return [end, nextValue];\n      }\n      return [nextValue, end];\n    }\n    if (dragging === 'end') {\n      if (nextValue < start) {\n        // \"перехватиться\", если перетянули за начало\n        gesture.dragging = 'start';\n        return [nextValue, start];\n      }\n      return [start, nextValue];\n    }\n\n    return value;\n  };\n\n  const snapDirection = (pos: number, target: EventTarget | null) => {\n    if (target === thumbStart.current) {\n      return 'start';\n    }\n    if (target === thumbEnd.current) {\n      return 'end';\n    }\n    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';\n  };\n\n  const onStart: TouchEventHandler = (e: TouchEvent) => {\n    const boundingRect = container.current?.getBoundingClientRect();\n    gesture.containerWidth = boundingRect?.width ?? 0;\n\n    const absolutePosition = e.startX - (boundingRect?.left ?? 0);\n    const pos = offsetToValue(absolutePosition);\n    gesture.dragging = snapDirection(pos, e.originalEvent.target);\n    gesture.startX = absolutePosition;\n\n    onChange?.(updateRange(pos), e);\n    e.originalEvent.stopPropagation();\n  };\n\n  const onMove: TouchEventHandler = (e: TouchEvent) => {\n    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);\n\n    e.originalEvent.stopPropagation();\n    e.originalEvent.preventDefault();\n  };\n\n  const onEnd: TouchEventHandler = (e) => {\n    gesture.dragging = false;\n    e.originalEvent.stopPropagation();\n  };\n\n  const toPercent = (v: number) => ((v - min) / (max - min)) * 100;\n  const draggerStyle = isRange\n    ? {\n        width: `${toPercent(end) - toPercent(start ?? 0)}%`,\n        left: `${toPercent(start ?? 0)}%`,\n      }\n    : {\n        width: `${toPercent(end)}%`,\n      };\n\n  return (\n    <Touch\n      data-value={isRange ? value.join(',') : value}\n      {...restProps}\n      {...(disabled ? {} : { onStart, onMove, onEnd })}\n      className={classNames(\n        styles['Slider'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['Slider--disabled'],\n        className,\n      )}\n    >\n      <div ref={container} className={styles['Slider__in']}>\n        <div className={styles['Slider__dragger']} style={draggerStyle}>\n          {isRange && (\n            <span\n              className={classNames(styles['Slider__thumb'], styles['Slider__thumb--start'])}\n              ref={thumbStart}\n            />\n          )}\n          <span\n            className={classNames(styles['Slider__thumb'], styles['Slider__thumb--end'])}\n            ref={thumbEnd}\n          />\n        </div>\n      </div>\n    </Touch>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/RangeSlider/UniversalSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { rescale } from '../../helpers/math';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Touch, TouchEvent, TouchEventHandler } from '../Touch/Touch';\nimport styles from '../Slider/Slider.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Slider--sizeY-none'],\n  [SizeType.COMPACT]: styles['Slider--sizeY-compact'],\n};\n\nexport type UniversalValue = [number | null, number];\n\nexport interface UniversalSliderProps<Value>\n  extends HasRootRef<HTMLDivElement>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: Value;\n  defaultValue?: Value;\n  disabled?: boolean;\n  onChange?(value: Value, e: TouchEvent): void;\n}\n\nexport const UniversalSlider = ({\n  min = 0,\n  max = 100,\n  step,\n  value = [0, 0],\n  defaultValue,\n  onChange,\n  getRootRef,\n  disabled,\n  className,\n  ...restProps\n}: UniversalSliderProps<UniversalValue>) => {\n  const [start, end] = value;\n  const isRange = start != null;\n  const gesture = React.useRef({\n    dragging: false as false | 'start' | 'end',\n    startX: 0,\n    containerWidth: 0,\n  }).current;\n  const container = useExternRef(getRootRef);\n  const thumbStart = React.useRef<HTMLDivElement>(null);\n  const thumbEnd = React.useRef<HTMLDivElement>(null);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const offsetToValue = (absolute: number) => {\n    return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });\n  };\n\n  const updateRange = (nextValue: number): UniversalValue => {\n    if (start == null) {\n      return [null, nextValue];\n    }\n\n    const { dragging } = gesture;\n    if (dragging === 'start') {\n      if (nextValue > end) {\n        // \"перехватиться\", если перетянули за конец\n        gesture.dragging = 'end';\n        return [end, nextValue];\n      }\n      return [nextValue, end];\n    }\n    if (dragging === 'end') {\n      if (nextValue < start) {\n        // \"перехватиться\", если перетянули за начало\n        gesture.dragging = 'start';\n        return [nextValue, start];\n      }\n      return [start, nextValue];\n    }\n\n    return value;\n  };\n\n  const snapDirection = (pos: number, target: EventTarget | null) => {\n    if (target === thumbStart.current) {\n      return 'start';\n    }\n    if (target === thumbEnd.current) {\n      return 'end';\n    }\n    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos) ? 'start' : 'end';\n  };\n\n  const onStart: TouchEventHandler = (e: TouchEvent) => {\n    const boundingRect = container.current?.getBoundingClientRect();\n    gesture.containerWidth = boundingRect?.width ?? 0;\n\n    const absolutePosition = e.startX - (boundingRect?.left ?? 0);\n    const pos = offsetToValue(absolutePosition);\n    gesture.dragging = snapDirection(pos, e.originalEvent.target);\n    gesture.startX = absolutePosition;\n\n    onChange?.(updateRange(pos), e);\n    e.originalEvent.stopPropagation();\n  };\n\n  const onMove: TouchEventHandler = (e: TouchEvent) => {\n    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);\n\n    e.originalEvent.stopPropagation();\n    e.originalEvent.preventDefault();\n  };\n\n  const onEnd: TouchEventHandler = (e) => {\n    gesture.dragging = false;\n    e.originalEvent.stopPropagation();\n  };\n\n  const toPercent = (v: number) => ((v - min) / (max - min)) * 100;\n  const draggerStyle = isRange\n    ? {\n        width: `${toPercent(end) - toPercent(start ?? 0)}%`,\n        left: `${toPercent(start ?? 0)}%`,\n      }\n    : {\n        width: `${toPercent(end)}%`,\n      };\n\n  return (\n    <Touch\n      data-value={isRange ? value.join(',') : value}\n      {...restProps}\n      {...(disabled ? {} : { onStart, onMove, onEnd })}\n      className={classNames(\n        styles['Slider'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['Slider--disabled'],\n        className,\n      )}\n    >\n      <div ref={container} className={styles['Slider__in']}>\n        <div className={styles['Slider__dragger']} style={draggerStyle}>\n          {isRange && (\n            <span\n              className={classNames(styles['Slider__thumb'], styles['Slider__thumb--start'])}\n              ref={thumbStart}\n            />\n          )}\n          <span\n            className={classNames(styles['Slider__thumb'], styles['Slider__thumb--end'])}\n            ref={thumbEnd}\n          />\n        </div>\n      </div>\n    </Touch>\n  );\n};\n"],"names":["React","classNames","rescale","useAdaptivity","useExternRef","SizeType","Touch","styles","sizeYClassNames","none","COMPACT","UniversalSlider","min","max","step","value","defaultValue","onChange","getRootRef","disabled","className","restProps","start","end","isRange","gesture","useRef","dragging","startX","containerWidth","current","container","thumbStart","thumbEnd","sizeY","offsetToValue","absolute","updateRange","nextValue","snapDirection","pos","target","Math","abs","onStart","e","boundingRect","getBoundingClientRect","width","absolutePosition","left","originalEvent","stopPropagation","onMove","shiftX","preventDefault","onEnd","toPercent","v","draggerStyle","data-value","join","REGULAR","div","ref","style","span"],"mappings":"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"}

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

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align", "className"];
 import * as React from 'react';
 import { Icon24Cancel } from '@vkontakte/icons';
 import { classNames, noop } from '@vkontakte/vkjs';
@@ -13,123 +9,100 @@ import { Platform } from '../../lib/platform';
 import { getTitleFromChildren } from '../../lib/utils';
 import { IconButton } from '../IconButton/IconButton';
 import { Tappable } from '../Tappable/Tappable';
-import "./Removable.module.css";
+import styles from './Removable.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
- */
-var RemovableIos = function RemovableIos(_ref) {
-  var onRemove = _ref.onRemove,
-    removePlaceholder = _ref.removePlaceholder,
-    removePlaceholderString = _ref.removePlaceholderString,
-    children = _ref.children;
-  var _useDOM = useDOM(),
-    window = _useDOM.window;
-  var removeButtonRef = React.useRef(null);
-  var disabledRef = React.useRef(true);
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    removeOffset = _React$useState2[0],
-    updateRemoveOffset = _React$useState2[1];
-  useGlobalEventListener(window, 'click', function () {
-    if (removeOffset > 0) {
-      updateRemoveOffset(0);
-    }
-  }, {
-    capture: true
-  });
-  var onRemoveTransitionEnd = function onRemoveTransitionEnd() {
-    if (removeOffset > 0) {
-      var _removeButtonRef$curr;
-      removeButtonRef === null || removeButtonRef === void 0 ? void 0 : (_removeButtonRef$curr = removeButtonRef.current) === null || _removeButtonRef$curr === void 0 ? void 0 : _removeButtonRef$curr.focus();
-    } else {
-      disabledRef.current = true;
-    }
-  };
-  var onRemoveActivateClick = function onRemoveActivateClick(e) {
-    e.stopPropagation();
-    if (!removeButtonRef.current) {
-      return;
-    }
-    var offsetWidth = removeButtonRef.current.offsetWidth;
-    disabledRef.current = false;
-    updateRemoveOffset(offsetWidth);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRemovable__content",
-    style: {
-      transform: "translateX(-".concat(removeOffset !== null && removeOffset !== void 0 ? removeOffset : 0, "px)")
-    },
-    onTransitionEnd: onRemoveTransitionEnd
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    hasActive: false,
-    hasHover: false,
-    "aria-label": removePlaceholderString,
-    className: classNames("vkuiRemovable__action", "vkuiRemovable__toggle"),
-    onClick: onRemoveActivateClick,
-    disabled: removeOffset > 0
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "vkuiRemovable__toggle-in",
-    role: "presentation"
-  })), children, /*#__PURE__*/React.createElement("span", {
-    className: "vkuiRemovable__offset",
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement(Tappable, {
-    Component: "button",
-    hasActive: false,
-    hasHover: false,
-    disabled: disabledRef.current,
-    getRootRef: removeButtonRef,
-    className: "vkuiRemovable__remove",
-    onClick: onRemove
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "vkuiRemovable__remove-in"
-  }, removePlaceholder)));
+ */ const RemovableIos = ({ onRemove , removePlaceholder , removePlaceholderString , children  })=>{
+    const { window  } = useDOM();
+    const removeButtonRef = React.useRef(null);
+    const disabledRef = React.useRef(true);
+    const [removeOffset, updateRemoveOffset] = React.useState(0);
+    useGlobalEventListener(window, 'click', ()=>{
+        if (removeOffset > 0) {
+            updateRemoveOffset(0);
+        }
+    }, {
+        capture: true
+    });
+    const onRemoveTransitionEnd = ()=>{
+        if (removeOffset > 0) {
+            removeButtonRef?.current?.focus();
+        } else {
+            disabledRef.current = true;
+        }
+    };
+    const onRemoveActivateClick = (e)=>{
+        e.stopPropagation();
+        if (!removeButtonRef.current) {
+            return;
+        }
+        const { offsetWidth  } = removeButtonRef.current;
+        disabledRef.current = false;
+        updateRemoveOffset(offsetWidth);
+    };
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['Removable__content'], 'vkuiInternalRemovable__content'),
+        style: {
+            transform: `translateX(-${removeOffset ?? 0}px)`
+        },
+        onTransitionEnd: onRemoveTransitionEnd
+    }, /*#__PURE__*/ React.createElement(IconButton, {
+        hasActive: false,
+        hasHover: false,
+        "aria-label": removePlaceholderString,
+        className: classNames(styles['Removable__action'], styles['Removable__toggle']),
+        onClick: onRemoveActivateClick,
+        disabled: removeOffset > 0
+    }, /*#__PURE__*/ React.createElement("i", {
+        className: styles['Removable__toggle-in'],
+        role: "presentation"
+    })), children, /*#__PURE__*/ React.createElement("span", {
+        className: styles['Removable__offset'],
+        "aria-hidden": true
+    }), /*#__PURE__*/ React.createElement(Tappable, {
+        Component: "button",
+        hasActive: false,
+        hasHover: false,
+        disabled: disabledRef.current,
+        getRootRef: removeButtonRef,
+        className: styles['Removable__remove'],
+        onClick: onRemove
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: styles['Removable__remove-in']
+    }, removePlaceholder)));
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
- */
-export var Removable = function Removable(_ref2) {
-  var getRootRef = _ref2.getRootRef,
-    children = _ref2.children,
-    _ref2$onRemove = _ref2.onRemove,
-    onRemove = _ref2$onRemove === void 0 ? noop : _ref2$onRemove,
-    _ref2$removePlacehold = _ref2.removePlaceholder,
-    removePlaceholder = _ref2$removePlacehold === void 0 ? 'Удалить' : _ref2$removePlacehold,
-    _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? 'center' : _ref2$align,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded);
-  var platform = usePlatform();
-  var ref = useExternRef(getRootRef);
-  var onRemoveClick = function onRemoveClick(e) {
-    e.preventDefault();
-    onRemove(e);
-  };
-  var removePlaceholderString = getTitleFromChildren(removePlaceholder);
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    ref: ref,
-    className: classNames("vkuiRemovable", platform === Platform.IOS && "vkuiRemovable--ios", styles["Removable--align-".concat(align)], className)
-  }), platform !== Platform.IOS && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRemovable__content"
-  }, children, /*#__PURE__*/React.createElement(IconButton, {
-    activeMode: "opacity",
-    hoverMode: "opacity",
-    className: "vkuiRemovable__action",
-    onClick: onRemoveClick,
-    "aria-label": removePlaceholderString
-  }, /*#__PURE__*/React.createElement(Icon24Cancel, {
-    role: "presentation"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "vkuiRemovable__offset",
-    "aria-hidden": true
-  })), platform === Platform.IOS && /*#__PURE__*/React.createElement(RemovableIos, {
-    onRemove: onRemoveClick,
-    removePlaceholder: removePlaceholder,
-    removePlaceholderString: removePlaceholderString
-  }, children));
-};
-var styles = {
-  "Removable--align-start": "vkuiRemovable--align-start",
-  "Removable--align-center": "vkuiRemovable--align-center"
+ */ export const Removable = ({ getRootRef , children , onRemove =noop , removePlaceholder ='Удалить' , align ='center' , className , ...restProps })=>{
+    const platform = usePlatform();
+    const ref = useExternRef(getRootRef);
+    const onRemoveClick = (e)=>{
+        e.preventDefault();
+        onRemove(e);
+    };
+    const removePlaceholderString = getTitleFromChildren(removePlaceholder);
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        ref: ref,
+        className: classNames(platform === Platform.IOS && styles['Removable--ios'], align === 'start' && styles['Removable--align-start'], className)
+    }, platform !== Platform.IOS && /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')
+    }, children, /*#__PURE__*/ React.createElement(IconButton, {
+        activeMode: "opacity",
+        hoverMode: "opacity",
+        className: styles['Removable__action'],
+        onClick: onRemoveClick,
+        "aria-label": removePlaceholderString
+    }, /*#__PURE__*/ React.createElement(Icon24Cancel, {
+        role: "presentation"
+    })), /*#__PURE__*/ React.createElement("span", {
+        className: styles['Removable__offset'],
+        "aria-hidden": true
+    })), platform === Platform.IOS && /*#__PURE__*/ React.createElement(RemovableIos, {
+        onRemove: onRemoveClick,
+        removePlaceholder: removePlaceholder,
+        removePlaceholderString: removePlaceholderString
+    }, children));
 };
+
 //# sourceMappingURL=Removable.js.map

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

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

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

@@ -1 +1 @@
-.vkuiRemovable__content{align-items:center;display:flex;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);position:relative}.vkuiRemovable__action{border:none;flex-grow:0;flex-shrink:0;position:relative}.vkuiRemovable__action.vkuiRemovable__action{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiRemovable--align-start .vkuiRemovable__action{align-self:flex-start}.vkuiRemovable--ios{overflow:hidden}.vkuiRemovable__remove{background-color:#e64646;background-color:var(--vkui--color_background_negative);border:none;border-radius:0;color:#fff;color:var(--vkui_internal--white);font-size:15px;height:100%;left:100%;line-height:45px;padding:0 10px;position:absolute;top:0}.vkuiRemovable__remove-in{align-items:center;display:flex;height:100%;justify-content:center;width:100%}@media (prefers-reduced-motion:no-preference){.vkuiRemovable--ios .vkuiRemovable__content{transition:transform .6s cubic-bezier(.4,0,.2,1);transition:transform .6s var(--vkui--animation_easing_platform)}}.vkuiRemovable__toggle{background:none;display:block;height:44px;margin:0 2px;width:44px}.vkuiRemovable__toggle-in{align-content:center;align-items:center;border:none;display:flex;height:100%;justify-content:center;position:relative;width:100%}.vkuiRemovable__toggle-in:after{background-color:#e64646;background-color:var(--vkui--color_background_negative);border-radius:50%;content:"";height:22px;width:22px}.vkuiRemovable__toggle-in:before{background-color:#fff;background-color:var(--vkui_internal--white);content:"";display:block;height:2px;position:absolute;width:12px}.vkuiRemovable--ios .vkuiRemovable__content{padding-left:0;padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem--removable .vkuiRemovable__content,.vkuiFormLayoutGroup--removable .vkuiRemovable__content{align-items:flex-start;flex-wrap:wrap}.vkuiRemovable__offset{display:none}.vkuiFormItem--withTop .vkuiFormItem__removable~.vkuiRemovable__offset,.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__offset{display:block;height:calc(2px + 18px + 8px);height:calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);order:-1;width:100%}.vkuiFormItem--sizeY-compact.vkuiFormItem--withTop .vkuiFormItem__removable~.vkuiRemovable__offset,.vkuiFormLayoutGroup--sizeY-compact.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__offset{height:calc(2px + 16px + 6px);height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none.vkuiFormItem--withTop .vkuiFormItem__removable~.vkuiRemovable__offset,.vkuiFormLayoutGroup--sizeY-none.vkuiFormLayoutGroup--removable .vkuiFormItem--withTop~.vkuiRemovable__offset{height:calc(2px + 16px + 6px);height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}}
+.vkuiRemovable__content{align-items:center;display:flex;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);position:relative}.vkuiRemovable__action{border:none;flex-grow:0;flex-shrink:0;position:relative}.vkuiRemovable__action.vkuiRemovable__action{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiRemovable--align-start .vkuiRemovable__action{align-self:flex-start}.vkuiRemovable--ios{overflow:hidden}.vkuiRemovable__remove{background-color:#e64646;background-color:var(--vkui--color_background_negative);border:none;border-radius:0;color:#fff;color:var(--vkui_internal--white);font-size:15px;height:100%;left:100%;line-height:45px;padding:0 10px;position:absolute;top:0}.vkuiRemovable__remove-in{align-items:center;display:flex;height:100%;justify-content:center;width:100%}@media (prefers-reduced-motion:no-preference){.vkuiRemovable--ios .vkuiRemovable__content{transition:transform .6s cubic-bezier(.4,0,.2,1);transition:transform .6s var(--vkui--animation_easing_platform)}}.vkuiRemovable__toggle{background:none;display:block;height:44px;margin:0 2px;width:44px}.vkuiRemovable__toggle-in{align-content:center;align-items:center;border:none;display:flex;height:100%;justify-content:center;position:relative;width:100%}.vkuiRemovable__toggle-in:after{background-color:#e64646;background-color:var(--vkui--color_background_negative);border-radius:50%;content:"";height:22px;width:22px}.vkuiRemovable__toggle-in:before{background-color:#fff;background-color:var(--vkui_internal--white);content:"";display:block;height:2px;position:absolute;width:12px}.vkuiRemovable--ios .vkuiRemovable__content{padding-left:0;padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiInternalFormItem--removable .vkuiRemovable__content,.vkuiInternalFormLayoutGroup--removable .vkuiRemovable__content{align-items:flex-start;flex-wrap:wrap}.vkuiRemovable__offset{display:none}.vkuiInternalFormItem--withTop .vkuiInternalFormItem__removable~.vkuiRemovable__offset,.vkuiInternalFormLayoutGroup--removable .vkuiInternalFormItem--withTop~.vkuiRemovable__offset{display:block;height:calc(2px + 18px + 8px);height:calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);order:-1;width:100%}.vkuiInternalFormItem--sizeY-compact.vkuiInternalFormItem--withTop .vkuiInternalFormItem__removable~.vkuiRemovable__offset,.vkuiInternalFormLayoutGroup--sizeY-compact.vkuiInternalFormLayoutGroup--removable .vkuiInternalFormItem--withTop~.vkuiRemovable__offset{height:calc(2px + 16px + 6px);height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInternalFormItem--sizeY-none.vkuiInternalFormItem--withTop .vkuiInternalFormItem__removable~.vkuiRemovable__offset,.vkuiInternalFormLayoutGroup--sizeY-none.vkuiInternalFormLayoutGroup--removable .vkuiInternalFormItem--withTop~.vkuiRemovable__offset{height:calc(2px + 16px + 6px);height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}}

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

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["subhead", "children", "text", "caption", "before", "after", "afterCaption", "bottom", "actions", "multiline", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -9,60 +5,48 @@ import { SizeType } from '../../lib/adaptivity';
 import { Tappable } from '../Tappable/Tappable';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { RichCellIcon } from './RichCellIcon/RichCellIcon';
-import "./RichCell.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiRichCell--sizeY-none"
-}, SizeType.COMPACT, "vkuiRichCell--sizeY-compact");
+import styles from './RichCell.module.css';
+const sizeYClassNames = {
+    none: styles['RichCell--sizeY-none'],
+    [SizeType.COMPACT]: styles['RichCell--sizeY-compact']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
- */
-export var RichCell = function RichCell(_ref) {
-  var subhead = _ref.subhead,
-    children = _ref.children,
-    text = _ref.text,
-    caption = _ref.caption,
-    before = _ref.before,
-    after = _ref.after,
-    afterCaption = _ref.afterCaption,
-    bottom = _ref.bottom,
-    actions = _ref.actions,
-    multiline = _ref.multiline,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  return /*#__PURE__*/React.createElement(Tappable, _extends({}, restProps, {
-    className: classNames("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)
-  }), before && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__before"
-  }, before), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__in"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__content-before"
-  }, subhead && /*#__PURE__*/React.createElement(Subhead, {
-    Component: "div",
-    className: "vkuiRichCell__subhead"
-  }, subhead), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__children"
-  }, children), text && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__text"
-  }, text), caption && /*#__PURE__*/React.createElement(Subhead, {
-    Component: "div",
-    className: "vkuiRichCell__caption"
-  }, caption)), (after || afterCaption) && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__content-after"
-  }, after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__after-children"
-  }, after), afterCaption && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__after-caption"
-  }, afterCaption))), bottom && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__bottom"
-  }, bottom), actions && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiRichCell__actions"
-  }, actions)));
+ */ export const RichCell = ({ subhead , children , text , caption , before , after , afterCaption , bottom , actions , multiline , className , ...restProps })=>{
+    const { sizeY ='none'  } = useAdaptivity();
+    return /*#__PURE__*/ React.createElement(Tappable, {
+        ...restProps,
+        className: classNames(styles['RichCell'], !multiline && styles['RichCell--text-ellipsis'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)
+    }, before && /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__before']
+    }, before), /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__in']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__content']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__content-before']
+    }, subhead && /*#__PURE__*/ React.createElement(Subhead, {
+        Component: "div",
+        className: styles['RichCell__subhead']
+    }, subhead), /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__children']
+    }, children), text && /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__text']
+    }, text), caption && /*#__PURE__*/ React.createElement(Subhead, {
+        Component: "div",
+        className: styles['RichCell__caption']
+    }, caption)), (after || afterCaption) && /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__content-after']
+    }, after && /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__after-children']
+    }, after), afterCaption && /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__after-caption']
+    }, afterCaption))), bottom && /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__bottom']
+    }, bottom), actions && /*#__PURE__*/ React.createElement("div", {
+        className: styles['RichCell__actions']
+    }, actions)));
 };
 RichCell.Icon = RichCellIcon;
+
 //# sourceMappingURL=RichCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichCell.js","names":["React","classNames","useAdaptivity","SizeType","Tappable","Subhead","RichCellIcon","sizeYClassNames","none","COMPACT","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","REGULAR","Icon"],"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\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  [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== SizeType.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"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAuB,sBAAsB;AAC9D,SAASC,OAAO,QAAQ,+BAA+B;AACvD,SAASC,YAAY,QAAQ,6BAA6B;AAAC;AAG3D,IAAMC,eAAe;EACnBC,IAAI;AAAgC,GACnCL,QAAQ,CAACM,OAAO,gCAClB;AAoDD;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAaA;EAAA,IAZnBC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2BpB,aAAa,EAAE;IAAA,sCAAlCqB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,QAAQ,eACHD,SAAS;IACb,SAAS,EAAErB,UAAU,iBAEnB,CAACmB,SAAS,iCAAqC,EAC/CG,KAAK,KAAKpB,QAAQ,CAACqB,OAAO,IAAIjB,eAAe,CAACgB,KAAK,CAAC,EACpDF,SAAS;EACT,IAEDN,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,eACrE;IAAK,SAAS;EAAyB,gBACrC;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAAqC,GAChDJ,OAAO,iBACN,oBAAC,OAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,eACD;IAAK,SAAS;EAA+B,GAAEC,QAAQ,CAAO,EAC7DC,IAAI,iBAAI;IAAK,SAAS;EAA2B,GAAEA,IAAI,CAAO,EAC9DC,OAAO,iBACN,oBAAC,OAAO;IAAC,SAAS,EAAC,KAAK;IAAC,SAAS;EAA8B,GAC7DA,OAAO,CAEX,CACG,EACL,CAACE,KAAK,IAAIC,YAAY,kBACrB;IAAK,SAAS;EAAoC,GAC/CD,KAAK,iBAAI;IAAK,SAAS;EAAqC,GAAEA,KAAK,CAAO,EAC1EC,YAAY,iBACX;IAAK,SAAS;EAAoC,GAAEA,YAAY,CACjE,CAEJ,CACG,EACLC,MAAM,iBAAI;IAAK,SAAS;EAA6B,GAAEA,MAAM,CAAO,EACpEC,OAAO,iBAAI;IAAK,SAAS;EAA8B,GAAEA,OAAO,CAAO,CACpE,CACG;AAEf,CAAC;AAEDT,QAAQ,CAACe,IAAI,GAAGnB,YAAY"}
+{"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 { SizeType } from '../../lib/adaptivity';\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  [SizeType.COMPACT]: styles['RichCell--sizeY-compact'],\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  subhead?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  text?: React.ReactNode;\n  /**\n   * Контейнер для текста под `text`.\n   */\n  caption?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell = ({\n  subhead,\n  children,\n  text,\n  caption,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['RichCell'],\n        !multiline && styles['RichCell--text-ellipsis'],\n        sizeY !== SizeType.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","SizeType","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","COMPACT","RichCell","subhead","children","text","caption","before","after","afterCaption","bottom","actions","multiline","className","restProps","sizeY","REGULAR","div","Component","Icon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,uBAAuB;IACpC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,0BAA0B;AACvD;AAoDA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,QAAO,EACPC,SAAQ,EACRC,KAAI,EACJC,QAAO,EACPC,OAAM,EACNC,MAAK,EACLC,aAAY,EACZC,OAAM,EACNC,QAAO,EACPC,UAAS,EACTC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGtB;IAE3B,qBACE,oBAACE;QACE,GAAGmB,SAAS;QACbD,WAAWrB,WACTM,MAAM,CAAC,WAAW,EAClB,CAACc,aAAad,MAAM,CAAC,0BAA0B,EAC/CiB,UAAUrB,SAASsB,OAAO,IAAIjB,eAAe,CAACgB,MAAM,EACpDF;OAGDN,wBAAU,oBAACU;QAAIJ,WAAWf,MAAM,CAAC,mBAAmB;OAAGS,uBACxD,oBAACU;QAAIJ,WAAWf,MAAM,CAAC,eAAe;qBACpC,oBAACmB;QAAIJ,WAAWf,MAAM,CAAC,oBAAoB;qBACzC,oBAACmB;QAAIJ,WAAWf,MAAM,CAAC,2BAA2B;OAC/CK,yBACC,oBAACP;QAAQsB,WAAU;QAAML,WAAWf,MAAM,CAAC,oBAAoB;OAC5DK,wBAGL,oBAACc;QAAIJ,WAAWf,MAAM,CAAC,qBAAqB;OAAGM,WAC9CC,sBAAQ,oBAACY;QAAIJ,WAAWf,MAAM,CAAC,iBAAiB;OAAGO,OACnDC,yBACC,oBAACV;QAAQsB,WAAU;QAAML,WAAWf,MAAM,CAAC,oBAAoB;OAC5DQ,WAIN,AAACE,CAAAA,SAASC,YAAW,mBACpB,oBAACQ;QAAIJ,WAAWf,MAAM,CAAC,0BAA0B;OAC9CU,uBAAS,oBAACS;QAAIJ,WAAWf,MAAM,CAAC,2BAA2B;OAAGU,QAC9DC,8BACC,oBAACQ;QAAIJ,WAAWf,MAAM,CAAC,0BAA0B;OAAGW,iBAK3DC,wBAAU,oBAACO;QAAIJ,WAAWf,MAAM,CAAC,mBAAmB;OAAGY,SACvDC,yBAAW,oBAACM;QAAIJ,WAAWf,MAAM,CAAC,oBAAoB;OAAGa;AAIlE,EAAE;AAEFT,SAASiB,IAAI,GAAGtB"}

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

@@ -1 +1 @@
-.vkuiRichCell{box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);min-height:64px;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);text-decoration:none}.vkuiRichCell--sizeY-compact{min-height:60px}.vkuiRichCell__before{margin-right:12px}.vkuiRichCell__in{display:flex;flex-direction:column;flex-grow:1;justify-content:center;max-width:100%;min-width:0}.vkuiRichCell__content{display:flex}.vkuiRichCell__content-before{flex-grow:1;min-width:0}.vkuiRichCell__content-after{align-items:flex-end;box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;padding-left:12px}.vkuiRichCell__after-children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell__after-caption{color:#818c99;color:var(--vkui--color_text_secondary);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular);margin-top:2px}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}}.vkuiRichCell__caption,.vkuiRichCell__subhead{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiRichCell__caption{margin-top:1px}.vkuiRichCell__children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell--text-ellipsis .vkuiRichCell__caption,.vkuiRichCell--text-ellipsis .vkuiRichCell__children,.vkuiRichCell--text-ellipsis .vkuiRichCell__subhead,.vkuiRichCell--text-ellipsis .vkuiRichCell__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiRichCell__bottom{margin-top:5px}.vkuiRichCell__actions{margin-top:8px}.vkuiRichCell__after-children,.vkuiRichCell__children,.vkuiRichCell__text{font-size:15px;font-size:var(--vkui--font_paragraph--font_size--regular);line-height:20px;line-height:var(--vkui--font_paragraph--line_height--regular)}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-children,.vkuiRichCell--sizeY-compact .vkuiRichCell__children,.vkuiRichCell--sizeY-compact .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-children,.vkuiRichCell--sizeY-none .vkuiRichCell__children,.vkuiRichCell--sizeY-none .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiFormItem .vkuiRichCell{margin-left:calc(-1 * 16px);margin-left:calc(-1 * var(--vkui--size_base_padding_horizontal--regular));margin-right:calc(-1 * 16px);margin-right:calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none{min-height:60px}}
+.vkuiRichCell{box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);min-height:64px;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);text-decoration:none}.vkuiRichCell--sizeY-compact{min-height:60px}.vkuiRichCell__before{margin-right:12px}.vkuiRichCell__in{display:flex;flex-direction:column;flex-grow:1;justify-content:center;max-width:100%;min-width:0}.vkuiRichCell__content{display:flex}.vkuiRichCell__content-before{flex-grow:1;min-width:0}.vkuiRichCell__content-after{align-items:flex-end;box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;padding-left:12px}.vkuiRichCell__after-children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell__after-caption{color:#818c99;color:var(--vkui--color_text_secondary);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular);margin-top:2px}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}}.vkuiRichCell__caption,.vkuiRichCell__subhead{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiRichCell__caption{margin-top:1px}.vkuiRichCell__children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell--text-ellipsis .vkuiRichCell__caption,.vkuiRichCell--text-ellipsis .vkuiRichCell__children,.vkuiRichCell--text-ellipsis .vkuiRichCell__subhead,.vkuiRichCell--text-ellipsis .vkuiRichCell__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiRichCell__bottom{margin-top:5px}.vkuiRichCell__actions{margin-top:8px}.vkuiRichCell__after-children,.vkuiRichCell__children,.vkuiRichCell__text{font-size:15px;font-size:var(--vkui--font_paragraph--font_size--regular);line-height:20px;line-height:var(--vkui--font_paragraph--line_height--regular)}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-children,.vkuiRichCell--sizeY-compact .vkuiRichCell__children,.vkuiRichCell--sizeY-compact .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-children,.vkuiRichCell--sizeY-none .vkuiRichCell__children,.vkuiRichCell--sizeY-none .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiInternalFormItem .vkuiRichCell{margin-left:calc(-1 * 16px);margin-left:calc(-1 * var(--vkui--size_base_padding_horizontal--regular));margin-right:calc(-1 * 16px);margin-right:calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none{min-height:60px}}

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

@@ -1,15 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import "./RichCellIcon.module.css";
-export var RichCellIcon = function RichCellIcon(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiRichCellIcon", className)
-  }), children);
+import styles from './RichCellIcon.module.css';
+export const RichCellIcon = ({ children , className , ...restProps })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        className: classNames(styles['RichCellIcon'], className)
+    }, children);
 };
+
 //# sourceMappingURL=RichCellIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RichCellIcon.js","names":["React","classNames","RichCellIcon","children","className","restProps"],"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAG7C,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAImB;EAAA,IAH1CC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,wCAASA,SAAS;IAAE,SAAS,EAAEJ,UAAU,qBAAyBG,SAAS;EAAE,IAC1ED,QAAQ,CACL;AAEV,CAAC"}
+{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","RichCellIcon","children","className","restProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAE/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACkC,GAAK;IAC1C,qBACE,oBAACC;QAAK,GAAGD,SAAS;QAAED,WAAWJ,WAAWC,MAAM,CAAC,eAAe,EAAEG;OAC/DD;AAGP,EAAE"}