@vkontakte/vkui 5.1.2 → 5.2.0

package/dist/cssm/components/Popper/Popper.js

@@ -1,147 +1,120 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers", "renderContent", "className"];
+var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "autoUpdateOnTargetResize", "style", "customMiddlewares", "renderContent", "className"];
 import * as React from 'react';
-import { usePopper } from 'react-popper';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { PopperArrow } from '../PopperArrow/PopperArrow';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getPlatformClassName } from '../../helpers/getPlatformClassName';
+import { ARROW_PADDING, ARROW_HEIGHT, PopperArrow } from '../PopperArrow/PopperArrow';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { checkIsNotAutoPlacement, getAutoPlacementAlign, convertFloatingDataToReactCSSProperties, useFloating, autoUpdateFloatingElement, offsetMiddleware, flipMiddleware, shiftMiddleware, autoPlacementMiddleware, arrowMiddleware, sizeMiddleware } from '../../lib/floating';
 import { classNames } from '@vkontakte/vkjs';
 import "./Popper.module.css";
-var ARROW_PADDING = 8;
-var ARROW_WIDTH = 20;
-var ARROW_HEIGHT = 8;
-var preventOverflowModifier = {
-  name: 'preventOverflow',
-  options: {
-    mainAxis: false
-  }
-};
-var flipModifier = {
-  name: 'flip'
-};
-var arrowModifier = {
-  name: 'arrow',
-  options: {
-    padding: ARROW_PADDING
-  }
-};
-var sameWidthModifier = {
-  name: 'sameWidth',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  fn: function fn(_ref) {
-    var state = _ref.state;
-    state.styles.popper.width = "".concat(state.rects.reference.width, "px");
-  },
-  effect: function effect(_ref2) {
-    var state = _ref2.state;
-    state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
-  }
-};
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export var Popper = function Popper(_ref3) {
-  var _targetRef$current3;
-  var targetRef = _ref3.targetRef,
-    children = _ref3.children,
-    getRef = _ref3.getRef,
-    _ref3$placement = _ref3.placement,
-    placement = _ref3$placement === void 0 ? 'bottom-start' : _ref3$placement,
-    onPlacementChange = _ref3.onPlacementChange,
-    arrow = _ref3.arrow,
-    arrowClassName = _ref3.arrowClassName,
-    sameWidth = _ref3.sameWidth,
-    _ref3$offsetDistance = _ref3.offsetDistance,
-    offsetDistance = _ref3$offsetDistance === void 0 ? 8 : _ref3$offsetDistance,
-    _ref3$offsetSkidding = _ref3.offsetSkidding,
-    offsetSkidding = _ref3$offsetSkidding === void 0 ? 0 : _ref3$offsetSkidding,
-    _ref3$forcePortal = _ref3.forcePortal,
-    forcePortal = _ref3$forcePortal === void 0 ? true : _ref3$forcePortal,
-    compStyles = _ref3.style,
-    customModifiers = _ref3.customModifiers,
-    renderContent = _ref3.renderContent,
-    className = _ref3.className,
-    restProps = _objectWithoutProperties(_ref3, _excluded);
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    popperNode = _React$useState2[0],
-    setPopperNode = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    smallTargetOffsetSkidding = _React$useState4[0],
-    setSmallTargetOffsetSkidding = _React$useState4[1];
-  var platform = usePlatform();
-  var setExternalRef = useExternRef(getRef, setPopperNode);
-  var modifiers = React.useMemo(function () {
-    var modifiers = [preventOverflowModifier, {
-      name: 'offset',
-      options: {
-        offset: [arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding, arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance]
-      }
-    }, flipModifier];
-    if (arrow) {
-      modifiers.push(arrowModifier);
+export var Popper = function Popper(_ref) {
+  var targetRef = _ref.targetRef,
+    children = _ref.children,
+    getRef = _ref.getRef,
+    _ref$placement = _ref.placement,
+    placementProp = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    onPlacementChange = _ref.onPlacementChange,
+    arrow = _ref.arrow,
+    arrowClassName = _ref.arrowClassName,
+    sameWidth = _ref.sameWidth,
+    _ref$offsetDistance = _ref.offsetDistance,
+    offsetDistance = _ref$offsetDistance === void 0 ? 8 : _ref$offsetDistance,
+    _ref$offsetSkidding = _ref.offsetSkidding,
+    offsetSkidding = _ref$offsetSkidding === void 0 ? 0 : _ref$offsetSkidding,
+    _ref$forcePortal = _ref.forcePortal,
+    forcePortal = _ref$forcePortal === void 0 ? true : _ref$forcePortal,
+    _ref$autoUpdateOnTarg = _ref.autoUpdateOnTargetResize,
+    autoUpdateOnTargetResize = _ref$autoUpdateOnTarg === void 0 ? false : _ref$autoUpdateOnTarg,
+    styleProp = _ref.style,
+    customMiddlewares = _ref.customMiddlewares,
+    renderContent = _ref.renderContent,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var arrowRef = React.useRef(null);
+  var isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);
+  var memoizedMiddlewares = React.useMemo(function () {
+    var middlewares = [offsetMiddleware({
+      crossAxis: offsetSkidding,
+      mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance
+    })];
+
+    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
+    if (isNotAutoPlacement) {
+      middlewares.push(flipMiddleware());
+    } else {
+      middlewares.push(autoPlacementMiddleware({
+        alignment: getAutoPlacementAlign(placementProp)
+      }));
     }
+    middlewares.push(shiftMiddleware());
     if (sameWidth) {
-      modifiers.push(sameWidthModifier);
+      middlewares.push(sizeMiddleware({
+        apply: function apply(_ref2) {
+          var rects = _ref2.rects,
+            elements = _ref2.elements;
+          Object.assign(elements.floating.style, {
+            width: "".concat(rects.reference.width, "px")
+          });
+        }
+      }));
     }
-    if (customModifiers) {
-      modifiers.push.apply(modifiers, _toConsumableArray(customModifiers));
+    if (customMiddlewares) {
+      middlewares.push.apply(middlewares, _toConsumableArray(customMiddlewares));
     }
-    return modifiers;
-  }, [arrow, sameWidth, smallTargetOffsetSkidding, offsetSkidding, offsetDistance, customModifiers]);
-  var _usePopper = usePopper(targetRef.current, popperNode, {
-      placement: placement,
-      modifiers: modifiers
-    }),
-    popperStyles = _usePopper.styles,
-    state = _usePopper.state,
-    attributes = _usePopper.attributes;
-  var resolvedPlacement = state === null || state === void 0 ? void 0 : state.placement;
-  var isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю
 
-  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
-  // таргета из-за маленьких размеров последнего
-  useIsomorphicLayoutEffect(function () {
-    if (arrow && isEdgePlacement) {
-      var _ref4, _targetRef$current, _targetRef$current2;
-      var placementDirection = resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('bottom') || resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('top') ? 'vertical' : 'horizontal';
-      var arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;
-      var targetSize = (_ref4 = placementDirection === 'vertical' ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetHeight) !== null && _ref4 !== void 0 ? _ref4 : 0;
-      if (targetSize < arrowSize + 2 * ARROW_PADDING) {
-        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
-      }
-    } else {
-      setSmallTargetOffsetSkidding(0);
+    // см. https://floating-ui.com/docs/arrow#order
+    if (arrow) {
+      middlewares.push(arrowMiddleware({
+        element: arrowRef,
+        padding: ARROW_PADDING
+      }));
     }
-  }, [arrow, isEdgePlacement]);
+    return middlewares;
+  }, [arrow, sameWidth, offsetSkidding, offsetDistance, customMiddlewares, placementProp, isNotAutoPlacement]);
+  var _useFloating = useFloating({
+      placement: isNotAutoPlacement ? placementProp : undefined,
+      middleware: memoizedMiddlewares,
+      whileElementsMounted: function whileElementsMounted() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return autoUpdateFloatingElement.apply(void 0, args.concat([{
+          elementResize: autoUpdateOnTargetResize
+        }]));
+      }
+    }),
+    floatingDataX = _useFloating.x,
+    floatingDataY = _useFloating.y,
+    floatingPositionStrategy = _useFloating.strategy,
+    resolvedPlacement = _useFloating.placement,
+    refs = _useFloating.refs,
+    arrowCoords = _useFloating.middlewareData.arrow;
+  var handleRootRef = useExternRef(refs.setFloating, getRef);
+  React.useEffect(function () {
+    refs.setReference(targetRef.current);
+  }, [refs, targetRef]);
   React.useEffect(function () {
-    if (resolvedPlacement) {
-      onPlacementChange && onPlacementChange({
+    if (resolvedPlacement && onPlacementChange) {
+      onPlacementChange({
         placement: resolvedPlacement
       });
     }
   }, [onPlacementChange, resolvedPlacement]);
-  var dropdown = /*#__PURE__*/React.createElement("div", _extends({}, restProps, attributes.popper, {
-    className: classNames("vkuiPopper", getPlatformClassName("vkuiPopper", platform), className),
-    ref: setExternalRef,
-    style: _objectSpread(_objectSpread(_objectSpread({}, compStyles), popperStyles.popper), {}, {
-      minWidth: sameWidth ? (_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.scrollWidth : undefined
-    })
+  var dropdown = /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+    className: classNames("vkuiPopper", className),
+    ref: handleRootRef,
+    style: _objectSpread(_objectSpread({}, styleProp), convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
   }), arrow && /*#__PURE__*/React.createElement(PopperArrow, {
-    attributes: attributes.arrow,
-    style: popperStyles.arrow,
-    arrowClassName: arrowClassName
+    coords: arrowCoords,
+    placement: resolvedPlacement,
+    arrowClassName: arrowClassName,
+    getRootRef: arrowRef
   }), renderContent ? renderContent({
     className: "vkuiPopper__content"
   }) : /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.js","names":["React","usePopper","AppRootPortal","PopperArrow","usePlatform","getPlatformClassName","useExternRef","useIsomorphicLayoutEffect","classNames","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","preventOverflowModifier","name","options","mainAxis","flipModifier","arrowModifier","padding","sameWidthModifier","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","Popper","targetRef","children","getRef","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","compStyles","customModifiers","renderContent","className","restProps","useState","popperNode","setPopperNode","smallTargetOffsetSkidding","setSmallTargetOffsetSkidding","platform","setExternalRef","modifiers","useMemo","offset","push","current","popperStyles","attributes","resolvedPlacement","isEdgePlacement","includes","placementDirection","startsWith","arrowSize","targetSize","offsetHeight","useEffect","dropdown","minWidth","scrollWidth","undefined"],"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePopper, Modifier } from 'react-popper';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { PopperArrow } from '../PopperArrow/PopperArrow';\nimport { HasRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Popper.module.css';\n\nexport type Placement =\n  | 'auto'\n  | 'auto-start'\n  | 'auto-end'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'right-start'\n  | 'right-end'\n  | 'left-start'\n  | 'left-end'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (data: { placement?: Placement }) => void;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customModifiers?: Array<Modifier<string>>;\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\nconst ARROW_PADDING = 8;\nconst ARROW_WIDTH = 20;\nconst ARROW_HEIGHT = 8;\n\nconst preventOverflowModifier: Modifier<string> = {\n  name: 'preventOverflow',\n  options: {\n    mainAxis: false,\n  },\n};\n\nconst flipModifier: Modifier<string> = {\n  name: 'flip',\n};\n\nconst arrowModifier: Modifier<string> = {\n  name: 'arrow',\n  options: {\n    padding: ARROW_PADDING,\n  },\n};\n\nconst sameWidthModifier: Modifier<string> = {\n  name: 'sameWidth',\n  enabled: true,\n  phase: 'beforeWrite',\n  requires: ['computeStyles'],\n  fn: ({ state }) => {\n    state.styles.popper.width = `${state.rects.reference.width}px`;\n  },\n  effect: ({ state }) => {\n    state.elements.popper.style.width = `${\n      (state.elements.reference as HTMLElement).offsetWidth\n    }px`;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  style: compStyles,\n  customModifiers,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(null);\n  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] = React.useState(0);\n  const platform = usePlatform();\n\n  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      preventOverflowModifier,\n      {\n        name: 'offset',\n        options: {\n          offset: [\n            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,\n            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n          ],\n        },\n      },\n      flipModifier,\n    ];\n\n    if (arrow) {\n      modifiers.push(arrowModifier);\n    }\n\n    if (sameWidth) {\n      modifiers.push(sameWidthModifier);\n    }\n\n    if (customModifiers) {\n      modifiers.push(...customModifiers);\n    }\n    return modifiers;\n  }, [\n    arrow,\n    sameWidth,\n    smallTargetOffsetSkidding,\n    offsetSkidding,\n    offsetDistance,\n    customModifiers,\n  ]);\n\n  const {\n    styles: popperStyles,\n    state,\n    attributes,\n  } = usePopper(targetRef.current, popperNode, {\n    placement,\n    modifiers,\n  });\n\n  const resolvedPlacement = state?.placement;\n  const isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю\n\n  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до\n  // таргета из-за маленьких размеров последнего\n  useIsomorphicLayoutEffect(() => {\n    if (arrow && isEdgePlacement) {\n      const placementDirection =\n        resolvedPlacement?.startsWith('bottom') || resolvedPlacement?.startsWith('top')\n          ? 'vertical'\n          : 'horizontal';\n\n      const arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;\n      const targetSize =\n        (placementDirection === 'vertical'\n          ? targetRef.current?.offsetWidth\n          : targetRef.current?.offsetHeight) ?? 0;\n\n      if (targetSize < arrowSize + 2 * ARROW_PADDING) {\n        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);\n      }\n    } else {\n      setSmallTargetOffsetSkidding(0);\n    }\n  }, [arrow, isEdgePlacement]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement) {\n      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      {...attributes.popper}\n      className={classNames(\n        styles['Popper'],\n        getPlatformClassName(styles['Popper'], platform),\n        className,\n      )}\n      ref={setExternalRef}\n      style={{\n        ...compStyles,\n        ...popperStyles.popper,\n        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          attributes={attributes.arrow}\n          style={popperStyles.arrow}\n          arrowClassName={arrowClassName}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Popper.js","names":["React","AppRootPortal","ARROW_PADDING","ARROW_HEIGHT","PopperArrow","useExternRef","checkIsNotAutoPlacement","getAutoPlacementAlign","convertFloatingDataToReactCSSProperties","useFloating","autoUpdateFloatingElement","offsetMiddleware","flipMiddleware","shiftMiddleware","autoPlacementMiddleware","arrowMiddleware","sizeMiddleware","classNames","Popper","targetRef","children","getRef","placement","placementProp","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","autoUpdateOnTargetResize","styleProp","style","customMiddlewares","renderContent","className","restProps","arrowRef","useRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","floatingDataX","x","floatingDataY","y","floatingPositionStrategy","strategy","resolvedPlacement","refs","arrowCoords","middlewareData","handleRootRef","setFloating","useEffect","setReference","current","dropdown"],"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { ARROW_PADDING, ARROW_HEIGHT, PopperArrow } from '../PopperArrow/PopperArrow';\nimport type { HasRef } from '../../types';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  type Placement,\n  type PlacementWithAuto,\n  checkIsNotAutoPlacement,\n  getAutoPlacementAlign,\n  convertFloatingDataToReactCSSProperties,\n  useFloating,\n  autoUpdateFloatingElement,\n  type UseFloatingMiddleware,\n  offsetMiddleware,\n  flipMiddleware,\n  shiftMiddleware,\n  autoPlacementMiddleware,\n  arrowMiddleware,\n  sizeMiddleware,\n} from '../../lib/floating';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const arrowRef = React.useRef<HTMLDivElement>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: ARROW_PADDING,\n        }),\n      );\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    sameWidth,\n    offsetSkidding,\n    offsetDistance,\n    customMiddlewares,\n    placementProp,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      className={classNames(styles['Popper'], className)}\n      ref={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={arrowRef}\n        />\n      )}\n      {renderContent ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,7 +1,17 @@
-import * as React from 'react';
-export interface PopperArrowProps {
-    style?: React.CSSProperties;
-    attributes?: React.HTMLAttributes<HTMLDivElement> | null;
+/// <reference types="react" />
+import type { HasRootRef } from '../../types';
+import type { Placement } from '../../lib/floating';
+export declare const ARROW_PADDING = 10;
+export declare const ARROW_WIDTH = 20;
+export declare const ARROW_HEIGHT = 8;
+declare type Coords = {
+    x?: number;
+    y?: number;
+};
+export interface PopperArrowProps extends HasRootRef<HTMLDivElement> {
+    coords?: Coords;
+    placement: Placement;
     arrowClassName?: string;
 }
-export declare const PopperArrow: ({ style, attributes, arrowClassName }: PopperArrowProps) => JSX.Element;
+export declare const PopperArrow: ({ coords, arrowClassName, placement, getRootRef, }: PopperArrowProps) => JSX.Element;
+export {};

package/dist/cssm/components/PopperArrow/PopperArrow.js

@@ -1,22 +1,47 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import "./PopperArrow.module.css";
+export var ARROW_PADDING = 10;
+export var ARROW_WIDTH = 20;
+export var ARROW_HEIGHT = 8;
+function getPositionsStylesByCoords(placement) {
+  var coords = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    x: 0,
+    y: 0
+  };
+  if (placement.startsWith('top')) {
+    return {
+      top: '100%',
+      left: coords.x
+    };
+  } else if (placement.startsWith('right')) {
+    return {
+      top: coords.y,
+      right: 'calc(100% - 6px)'
+    };
+  } else if (placement.startsWith('bottom')) {
+    return {
+      bottom: '100%',
+      left: coords.x
+    };
+  } else {
+    return {
+      top: coords.y,
+      left: 'calc(100% - 6px)'
+    };
+  }
+}
 export var PopperArrow = function PopperArrow(_ref) {
-  var style = _ref.style,
-    attributes = _ref.attributes,
-    arrowClassName = _ref.arrowClassName;
-  var _ref2 = attributes !== null && attributes !== void 0 ? attributes : {},
-    arrowWrapperClassName = _ref2.className,
-    restAttributes = _objectWithoutProperties(_ref2, _excluded);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    style: style
-  }, restAttributes, {
-    className: classNames("vkuiPopperArrow", arrowWrapperClassName),
-    "data-popper-arrow": true
-  }), /*#__PURE__*/React.createElement("svg", {
+  var coords = _ref.coords,
+    arrowClassName = _ref.arrowClassName,
+    placement = _ref.placement,
+    getRootRef = _ref.getRootRef;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: getRootRef,
+    style: getPositionsStylesByCoords(placement, coords),
+    className: "vkuiPopperArrow",
+    "data-placement": placement
+  }, /*#__PURE__*/React.createElement("svg", {
     className: classNames("vkuiPopperArrow__in", arrowClassName),
     width: "20",
     height: "8",

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

@@ -1 +1 @@
-{"version":3,"file":"PopperArrow.js","names":["React","classNames","PopperArrow","style","attributes","arrowClassName","arrowWrapperClassName","className","restAttributes"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './PopperArrow.module.css';\n\nexport interface PopperArrowProps {\n  style?: React.CSSProperties;\n  attributes?: React.HTMLAttributes<HTMLDivElement> | null;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({ style, attributes, arrowClassName }: PopperArrowProps) => {\n  const { className: arrowWrapperClassName, ...restAttributes } = attributes ?? {};\n  return (\n    <div\n      style={style}\n      {...restAttributes}\n      className={classNames(styles['PopperArrow'], arrowWrapperClassName)}\n      data-popper-arrow={true}\n    >\n      <svg\n        className={classNames(styles['PopperArrow__in'], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAS7C,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAAgE;EAAA,IAA1DC,KAAK,QAALA,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAEC,cAAc,QAAdA,cAAc;EAC7D,YAAgED,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,CAAC,CAAC;IAA7DE,qBAAqB,SAAhCC,SAAS;IAA4BC,cAAc;EAC3D,oBACE;IACE,KAAK,EAAEL;EAAM,GACTK,cAAc;IAClB,SAAS,EAAEP,UAAU,oBAAwBK,qBAAqB,CAAE;IACpE,qBAAmB;EAAK,iBAExB;IACE,SAAS,EAAEL,UAAU,wBAA4BI,cAAc,CAAE;IACjE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC"}
+{"version":3,"file":"PopperArrow.js","names":["React","classNames","ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","getPositionsStylesByCoords","placement","coords","x","y","startsWith","top","left","right","bottom","PopperArrow","arrowClassName","getRootRef"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport type { Placement } from '../../lib/floating';\nimport styles from './PopperArrow.module.css';\n\nexport const ARROW_PADDING = 10;\nexport const ARROW_WIDTH = 20;\nexport const ARROW_HEIGHT = 8;\n\ntype Coords = {\n  x?: number;\n  y?: number;\n};\n\nfunction getPositionsStylesByCoords(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): React.CSSProperties {\n  if (placement.startsWith('top')) {\n    return {\n      top: '100%',\n      left: coords.x,\n    };\n  } else if (placement.startsWith('right')) {\n    return {\n      top: coords.y,\n      right: 'calc(100% - 6px)',\n    };\n  } else if (placement.startsWith('bottom')) {\n    return {\n      bottom: '100%',\n      left: coords.x,\n    };\n  } else {\n    return {\n      top: coords.y,\n      left: 'calc(100% - 6px)',\n    };\n  }\n}\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n}: PopperArrowProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={getPositionsStylesByCoords(placement, coords)}\n      className={styles['PopperArrow']}\n      data-placement={placement}\n    >\n      <svg\n        className={classNames(styles['PopperArrow__in'], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAK7C,OAAO,IAAMC,aAAa,GAAG,EAAE;AAC/B,OAAO,IAAMC,WAAW,GAAG,EAAE;AAC7B,OAAO,IAAMC,YAAY,GAAG,CAAC;AAO7B,SAASC,0BAA0B,CACjCC,SAAoB,EAEC;EAAA,IADrBC,MAAc,uEAAG;IAAEC,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC;EAE/B,IAAIH,SAAS,CAACI,UAAU,CAAC,KAAK,CAAC,EAAE;IAC/B,OAAO;MACLC,GAAG,EAAE,MAAM;MACXC,IAAI,EAAEL,MAAM,CAACC;IACf,CAAC;EACH,CAAC,MAAM,IAAIF,SAAS,CAACI,UAAU,CAAC,OAAO,CAAC,EAAE;IACxC,OAAO;MACLC,GAAG,EAAEJ,MAAM,CAACE,CAAC;MACbI,KAAK,EAAE;IACT,CAAC;EACH,CAAC,MAAM,IAAIP,SAAS,CAACI,UAAU,CAAC,QAAQ,CAAC,EAAE;IACzC,OAAO;MACLI,MAAM,EAAE,MAAM;MACdF,IAAI,EAAEL,MAAM,CAACC;IACf,CAAC;EACH,CAAC,MAAM;IACL,OAAO;MACLG,GAAG,EAAEJ,MAAM,CAACE,CAAC;MACbG,IAAI,EAAE;IACR,CAAC;EACH;AACF;AAQA,OAAO,IAAMG,WAAW,GAAG,SAAdA,WAAW,OAKA;EAAA,IAJtBR,MAAM,QAANA,MAAM;IACNS,cAAc,QAAdA,cAAc;IACdV,SAAS,QAATA,SAAS;IACTW,UAAU,QAAVA,UAAU;EAEV,oBACE;IACE,GAAG,EAAEA,UAAW;IAChB,KAAK,EAAEZ,0BAA0B,CAACC,SAAS,EAAEC,MAAM,CAAE;IACrD,SAAS,mBAAwB;IACjC,kBAAgBD;EAAU,gBAE1B;IACE,SAAS,EAAEL,UAAU,wBAA4Be,cAAc,CAAE;IACjE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC"}

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

@@ -1 +1 @@
-.vkuiPopperArrow__in{content:"";display:block;height:8px;width:20px}[data-popper-placement^=bottom] .vkuiPopperArrow{bottom:100%}[data-popper-placement^=top] .vkuiPopperArrow{top:100%}[data-popper-placement^=top] .vkuiPopperArrow__in{transform:rotate(180deg)}[data-popper-placement^=left] .vkuiPopperArrow{left:calc(100% - 6px)}[data-popper-placement^=left] .vkuiPopperArrow__in{transform:rotate(90deg)}[data-popper-placement^=right] .vkuiPopperArrow{right:calc(100% - 6px)}[data-popper-placement^=right] .vkuiPopperArrow__in{transform:rotate(270deg)}
+.vkuiPopperArrow{position:absolute}.vkuiPopperArrow__in{content:"";display:block;height:8px;width:20px}.vkuiPopperArrow[data-placement^=top] .vkuiPopperArrow__in{transform:rotate(180deg)}.vkuiPopperArrow[data-placement^=left] .vkuiPopperArrow__in{transform:rotate(90deg)}.vkuiPopperArrow[data-placement^=right] .vkuiPopperArrow__in{transform:rotate(270deg)}

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

@@ -1 +1 @@
-.vkuiRadio{display:block;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);padding:0 16px;padding:0 var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem .vkuiRadio{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));width:100%}.vkuiRadio__container{align-items:center;display:flex;justify-content:flex-start}.vkuiRadio__input:disabled~.vkuiRadio__container{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiRadio__icon{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);flex-shrink:0;height:22px;margin-right:14px;transition:color .15s cubic-bezier(.4,0,.2,1);transition:color .15s var(--vkui--animation_easing_platform);width:22px}.vkuiRadio__input:checked~.vkuiRadio__container .vkuiRadio__icon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiRadio__icon .vkuiRadio__pin{transform:scale(0);transform-origin:12px 12px;transition:transform .15s cubic-bezier(.4,0,.2,1);transition:transform .15s var(--vkui--animation_easing_platform)}.vkuiRadio__input:checked~.vkuiRadio__container .vkuiRadio__icon .vkuiRadio__pin{transform:none}.vkuiRadio__content{color:#000;color:var(--vkui--color_text_primary);display:block;flex-grow:1;max-width:100%}.vkuiRadio__description{color:#818c99;color:var(--vkui--color_text_secondary);display:block;margin-bottom:12px;margin-top:2px}.vkuiRadio__children{margin-top:12px}.vkuiRadio__children:last-child{margin-bottom:12px}.vkuiRadio--sizeY-compact .vkuiRadio__children{margin-top:8px}.vkuiRadio--sizeY-compact .vkuiRadio__children:last-child{margin-bottom:8px}.vkuiRadio--sizeY-compact .vkuiRadio__description{margin-bottom:7px}.vkuiRadio--sizeY-compact .vkuiRadio__icon{height:18px;width:18px}.vkuiRadio--sizeY-compact .vkuiRadio__icon:after{height:12px;width:12px}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiRadio--sizeY-none .vkuiRadio__children{margin-top:8px}.vkuiRadio--sizeY-none .vkuiRadio__children:last-child{margin-bottom:8px}.vkuiRadio--sizeY-none .vkuiRadio__description{margin-bottom:7px}.vkuiRadio--sizeY-none .vkuiRadio__icon{height:18px;width:18px}.vkuiRadio--sizeY-none .vkuiRadio__icon:after{height:12px;width:12px}}.vkuiRadioGroup .vkuiRadio{box-sizing:border-box;flex:1;margin:0}
+.vkuiRadio{display:block;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);padding:0 16px;padding:0 var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem .vkuiRadio{box-sizing:initial;margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular));width:100%}.vkuiRadio__container{align-items:center;display:flex;justify-content:flex-start}.vkuiRadio__input:disabled~.vkuiRadio__container{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiRadio__icon{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);flex-shrink:0;height:22px;margin-right:14px;transition:color .15s cubic-bezier(.4,0,.2,1);transition:color .15s var(--vkui--animation_easing_platform);width:22px}.vkuiRadio__input:checked~.vkuiRadio__container .vkuiRadio__icon{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiRadio__icon .vkuiRadio__pin{transform:scale(0);transform-origin:12px 12px;transition:transform .15s cubic-bezier(.4,0,.2,1);transition:transform .15s var(--vkui--animation_easing_platform)}.vkuiRadio__input:checked~.vkuiRadio__container .vkuiRadio__icon .vkuiRadio__pin{transform:none}.vkuiRadio__content{color:#000;color:var(--vkui--color_text_primary);display:block;flex-grow:1;max-width:100%}.vkuiRadio__description{color:#818c99;color:var(--vkui--color_text_secondary);display:block;margin-bottom:12px;margin-top:2px}.vkuiRadio__children{margin-top:12px}.vkuiRadio__children:last-child{margin-bottom:12px}.vkuiRadio--sizeY-compact .vkuiRadio__children{margin-top:8px}.vkuiRadio--sizeY-compact .vkuiRadio__children:last-child{margin-bottom:8px}.vkuiRadio--sizeY-compact .vkuiRadio__description{margin-bottom:7px}.vkuiRadio--sizeY-compact .vkuiRadio__icon{height:18px;width:18px}.vkuiRadio--sizeY-compact .vkuiRadio__icon:after{height:12px;width:12px}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiRadio--sizeY-none .vkuiRadio__children{margin-top:8px}.vkuiRadio--sizeY-none .vkuiRadio__children:last-child{margin-bottom:8px}.vkuiRadio--sizeY-none .vkuiRadio__description{margin-bottom:7px}.vkuiRadio--sizeY-none .vkuiRadio__icon{height:18px;width:18px}.vkuiRadio--sizeY-none .vkuiRadio__icon:after{height:12px;width:12px}}.vkuiRadioGroup .vkuiRadio{box-sizing:border-box;flex:1;margin:0}

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:VK Sans Text,-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:4px}.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 (pointer:fine) and (min-width:768px),not (min-height:415px){.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 (pointer:fine) and (min-width:768px),not (min-height:415px){.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 (pointer:fine) and (min-width:768px),not (min-height:415px){.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:4px}.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 (pointer:fine) and (min-width:768px),not (min-height:415px){.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 (pointer:fine) and (min-width:768px),not (min-height:415px){.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 (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiRichCell--sizeY-none{min-height:60px}}

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

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { Platform } from '../../lib/platform';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
-import { SplitColContext } from '../SplitCol/SplitCol';
+import { SplitColContext } from '../SplitCol/SplitColContext';
 import { ScrollContext } from '../AppRoot/ScrollContext';
 import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
 import { getNavId } from '../../lib/getNavId';

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

@@ -1 +1 @@
-{"version":3,"file":"Root.js","names":["React","classNames","Platform","useConfigProvider","SplitColContext","ScrollContext","NavTransitionProvider","getNavId","warnOnce","useDOM","useIsomorphicLayoutEffect","useTimeout","usePlatform","warn","Root","children","_activeView","activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { SplitColContext } from '../SplitCol/SplitCol';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        'vkui-root-android-animation-hide-back',\n        'vkui-root-android-animation-show-forward',\n        'vkui-root-ios-animation-hide-back',\n        'vkui-root-ios-animation-show-forward',\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Root.js","names":["React","classNames","Platform","useConfigProvider","SplitColContext","ScrollContext","NavTransitionProvider","getNavId","warnOnce","useDOM","useIsomorphicLayoutEffect","useTimeout","usePlatform","warn","Root","children","_activeView","activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        'vkui-root-android-animation-hide-back',\n        'vkui-root-android-animation-show-forward',\n        'vkui-root-ios-animation-hide-back',\n        'vkui-root-ios-animation-show-forward',\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:#818c99;color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 8px 8px 0;border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:32px;height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:32px;line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:#fff;background:var(--vkui--color_background_content)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:#e2e4e9;background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:#e2e4e9;color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:#d8dbe2;background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:#d8dbe2;color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:#fff;background:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--vkui--color_header_background);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_header_background)}
+.vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:#818c99;color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 8px 8px 0;border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:32px;height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:32px;line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:#fff;background:var(--vkui--color_background_content)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:#e2e4e9;background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:#e2e4e9;color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:#d8dbe2;background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:#d8dbe2;color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:#fff;background:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--vkui--color_header_background);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_header_background)}

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

@@ -1 +1 @@
-.vkuiSegmentedControl{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);height:30px;padding:2px}.vkuiSegmentedControl--size-l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:#fff;background-color:var(--vkui--color_segmented_control);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;transform-origin:0 0;transition:transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--size-l{height:44px}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSegmentedControl--sizeY-none{height:36px}.vkuiSegmentedControl--sizeY-none.vkuiSegmentedControl--size-l{height:44px}}
+.vkuiSegmentedControl{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);height:30px;padding:2px}.vkuiSegmentedControl--size-l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:#fff;background-color:var(--vkui--color_segmented_control);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;transform-origin:0 0;transition:transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--size-l{height:44px}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSegmentedControl--sizeY-none{height:36px}.vkuiSegmentedControl--sizeY-none.vkuiSegmentedControl--size-l{height:44px}}

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

@@ -1 +1 @@
-.vkuiSelect{box-sizing:border-box;cursor:pointer;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-family:inherit;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiSelect__container{box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSelect--sizeY-none.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSelect--empty .vkuiSelect__title{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiCalendarHeader__picker .vkuiSelect__container{padding-right:4px}
+.vkuiSelect{box-sizing:border-box;cursor:pointer;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);position:relative}.vkuiSelect__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;display:block;font-family:inherit;font-size:16px;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiSelect__container{box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);flex-grow:1;flex-shrink:1;overflow:hidden;padding-left:12px;padding-right:12px;position:relative;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiSelect--hasBefore .vkuiSelect__container{padding-left:0}.vkuiSelect--hasAfter .vkuiSelect__container{padding-right:0}.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:12px;padding-top:12px}.vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSelect--sizeY-none.vkuiSelect--multiline .vkuiSelect__container{padding-bottom:8px;padding-top:8px}}.vkuiSelect__title{display:block}.vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSelect--empty .vkuiSelect__title{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiSelect--align-right .vkuiSelect__title{text-align:right}.vkuiSelect--align-center .vkuiSelect__title{text-align:center}.vkuiCalendarHeader__picker .vkuiSelect__container{padding-right:4px}

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

@@ -1 +1 @@
-.vkuiSimpleCell{align-items:center;color:#000;color:var(--vkui--color_text_primary);display:flex;min-height:48px;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);text-decoration:none;white-space:nowrap}.vkuiSimpleCell--mult{white-space:normal}.vkuiSimpleCell--mult .vkuiSimpleCell__children{text-overflow:clip}.vkuiSimpleCell__main{flex-grow:1;max-width:100%;min-width:0;overflow:hidden}.vkuiSimpleCell>.vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent);flex-shrink:0;padding-bottom:10px;padding-right:12px;padding-top:10px}.vkuiSimpleCell>.vkuiIcon--28{padding-right:16px}.vkuiSimpleCell__subhead{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiSimpleCell__text{overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell__extraSubtitle,.vkuiSimpleCell__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiSimpleCell .vkuiSimpleCell__content{align-content:flex-start;align-items:center;display:flex;justify-content:space-between;max-width:100%}.vkuiSimpleCell:not(.vkuiSimpleCell--mult) .vkuiSimpleCell__content{justify-content:flex-start}.vkuiSimpleCell__children{color:inherit;display:block;overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell--mult .vkuiSimpleCell__children,.vkuiSimpleCell--mult .vkuiSimpleCell__subtitle{flex:1 1 auto}.vkuiSimpleCell__badge{color:#2688eb;color:var(--vkui--color_icon_accent);display:inline-block;flex-grow:0;flex-shrink:0}.vkuiSimpleCell__content>:not(:last-child){margin-right:4px}.vkuiSimpleCell__indicator{color:#818c99;color:var(--vkui--color_text_secondary);min-width:0;overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.vkuiSimpleCell__after{align-items:center;color:#2688eb;color:var(--vkui--color_icon_accent);display:flex;flex-shrink:0}.vkuiSimpleCell__after>.vkuiIcon{padding-left:8px}.vkuiSimpleCell__after>.vkuiIcon:last-child{padding-right:2px}.vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-12px}.vkuiSimpleCell__typography{font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_footnote--font_family--regular);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}.vkuiSimpleCell--ios .vkuiSimpleCell__indicator,.vkuiSimpleCell--ios .vkuiSimpleCell__main{padding-bottom:11px;padding-top:9px}.vkuiSimpleCell--ios>.vkuiIcon--28{padding-left:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIcon--chevron_24{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);padding-left:12px;padding-right:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-9px}.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}}.vkuiSimpleCell--android .vkuiSimpleCell__indicator,.vkuiSimpleCell--android .vkuiSimpleCell__main,.vkuiSimpleCell--vkcom .vkuiSimpleCell__indicator,.vkuiSimpleCell--vkcom .vkuiSimpleCell__main{padding-bottom:10px;padding-top:11px}.vkuiSimpleCell--sizeY-compact{min-height:44px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSimpleCell--sizeY-none{min-height:44px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}}.vkuiFormItem>.vkuiSimpleCell{margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}.vkuiSimpleCell__main>:not(:first-child){margin-top:2px}
+.vkuiSimpleCell{align-items:center;color:#000;color:var(--vkui--color_text_primary);display:flex;min-height:48px;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);text-decoration:none;white-space:nowrap}.vkuiSimpleCell--mult{white-space:normal}.vkuiSimpleCell--mult .vkuiSimpleCell__children{text-overflow:clip}.vkuiSimpleCell__main{flex-grow:1;max-width:100%;min-width:0;overflow:hidden}.vkuiSimpleCell>.vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent);flex-shrink:0;padding-bottom:10px;padding-right:12px;padding-top:10px}.vkuiSimpleCell>.vkuiIcon--28{padding-right:16px}.vkuiSimpleCell__subhead{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiSimpleCell__text{overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell__extraSubtitle,.vkuiSimpleCell__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiSimpleCell .vkuiSimpleCell__content{align-content:flex-start;align-items:center;display:flex;justify-content:space-between;max-width:100%}.vkuiSimpleCell:not(.vkuiSimpleCell--mult) .vkuiSimpleCell__content{justify-content:flex-start}.vkuiSimpleCell__children{color:inherit;display:block;overflow:hidden;text-overflow:ellipsis}.vkuiSimpleCell--mult .vkuiSimpleCell__children,.vkuiSimpleCell--mult .vkuiSimpleCell__subtitle{flex:1 1 auto}.vkuiSimpleCell__badge{color:#2688eb;color:var(--vkui--color_icon_accent);display:inline-block;flex-grow:0;flex-shrink:0}.vkuiSimpleCell__content>:not(:last-child){margin-right:4px}.vkuiSimpleCell__indicator{color:#818c99;color:var(--vkui--color_text_secondary);min-width:0;overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.vkuiSimpleCell__after{align-items:center;color:#2688eb;color:var(--vkui--color_icon_accent);display:flex;flex-shrink:0}.vkuiSimpleCell__after>.vkuiIcon{padding-left:8px}.vkuiSimpleCell__after>.vkuiIcon:last-child{padding-right:2px}.vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-12px}.vkuiSimpleCell__typography{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_footnote--font_family--regular);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}.vkuiSimpleCell--ios .vkuiSimpleCell__indicator,.vkuiSimpleCell--ios .vkuiSimpleCell__main{padding-bottom:11px;padding-top:9px}.vkuiSimpleCell--ios>.vkuiIcon--28{padding-left:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIcon--chevron_24{color:#b8c1cc;color:var(--vkui--color_icon_tertiary);padding-left:12px;padding-right:4px}.vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIconButton:last-child{margin-right:-9px}.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-regular.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none.vkuiSimpleCell--ios>.vkuiAvatar:not(.vkuiAvatar--size-32)~.vkuiSimpleCell__main .vkuiSimpleCell__children{font-size:16px;line-height:20px}}.vkuiSimpleCell--android .vkuiSimpleCell__indicator,.vkuiSimpleCell--android .vkuiSimpleCell__main,.vkuiSimpleCell--vkcom .vkuiSimpleCell__indicator,.vkuiSimpleCell--vkcom .vkuiSimpleCell__main{padding-bottom:10px;padding-top:11px}.vkuiSimpleCell--sizeY-compact{min-height:44px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-compact>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSimpleCell--sizeY-none{min-height:44px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__indicator,.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__main{padding-bottom:10px;padding-top:10px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-28~.vkuiSimpleCell__main .vkuiSimpleCell__description,.vkuiSimpleCell--sizeY-none>.vkuiAvatar--size-32~.vkuiSimpleCell__main .vkuiSimpleCell__description{margin-top:1px}.vkuiSimpleCell--sizeY-none .vkuiSimpleCell__badge .vkuiBadge{transform:translateY(.5px)}}.vkuiFormItem>.vkuiSimpleCell{margin:0 calc(-1 * 16px);margin:0 calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}.vkuiSimpleCell__main>:not(:first-child){margin-top:2px}