@vkontakte/vkui 4.34.2 → 4.35.2

package/dist/cssm/components/Tooltip/Tooltip.js

@@ -3,7 +3,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["children", "isShown", "offsetX", "offsetY", "alignX", "alignY", "onClose", "cornerOffset", "cornerAbsoluteOffset", "mode"];
+var _excluded = ["children", "isShown", "offsetX", "offsetY", "alignX", "alignY", "onClose", "cornerOffset", "cornerAbsoluteOffset", "mode", "appearance", "arrow", "placement"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import ReactDOM from "react-dom";
@@ -11,12 +11,14 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { useNavTransition } from "../NavTransitionContext/NavTransitionContext";
+import { PopperArrow } from "../PopperArrow/PopperArrow";
 import { usePopper } from "react-popper";
 import { tooltipContainerAttr } from "./TooltipContainer";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useDOM } from "../../lib/dom";
 import { warnOnce } from "../../lib/warnOnce";
 import { hasReactNode } from "../../lib/utils";
+import { prefixClass } from "../../lib/prefixClass";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import "./Tooltip.css";
 
@@ -28,29 +30,28 @@ var baseClassName = getClassName("Tooltip");
 var warn = warnOnce("Tooltip");
 var IS_DEV = process.env.NODE_ENV === "development";
 var SimpleTooltip = /*#__PURE__*/React.forwardRef(function SimpleTooltip(_ref, ref) {
-  var _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "accent" : _ref$mode,
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? "accent" : _ref$appearance,
       header = _ref.header,
       text = _ref.text,
-      arrowRef = _ref.arrowRef,
+      arrow = _ref.arrow,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
       attributes = _ref.attributes;
   return createScopedElement("div", {
-    vkuiClass: classNames(baseClassName, "Tooltip--".concat(mode))
+    vkuiClass: classNames(baseClassName, "Tooltip--".concat(appearance))
   }, createScopedElement("div", _extends({
     vkuiClass: "Tooltip__container",
     ref: ref,
     style: style.container
-  }, attributes === null || attributes === void 0 ? void 0 : attributes.container), createScopedElement("div", _extends({
-    vkuiClass: "Tooltip__corner",
-    style: style.arrow
-  }, attributes === null || attributes === void 0 ? void 0 : attributes.arrow, {
-    ref: arrowRef
-  })), createScopedElement("div", {
+  }, attributes === null || attributes === void 0 ? void 0 : attributes.container), arrow && createScopedElement(PopperArrow, {
+    style: style.arrow,
+    attributes: attributes === null || attributes === void 0 ? void 0 : attributes.arrow,
+    arrowClassName: prefixClass("Tooltip__arrow")
+  }), createScopedElement("div", {
     vkuiClass: "Tooltip__content"
   }, header && createScopedElement(Subhead, {
-    weight: "1",
+    weight: "2",
     vkuiClass: "Tooltip__title"
   }, header), text && createScopedElement(Subhead, {
     vkuiClass: "Tooltip__text"
@@ -79,6 +80,19 @@ function getPlacement(alignX, alignY) {
 function isVerticalPlacement(placement) {
   return placement.startsWith("top") || placement.startsWith("bottom");
 }
+/**
+ * Вычисляем стиль подсказки: параметр appearance имеет приоритет, иначе мапим mode на подходящее значение из appearance
+ * TODO: v5 избавиться от пропа mode и этого метода, для appearance по умолчанию сделать "accent"
+ */
+
+
+function calculateAppearance(mode, appearance) {
+  if (appearance) {
+    return appearance;
+  }
+
+  return mode === "light" ? "white" : "accent";
+}
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */
@@ -102,6 +116,10 @@ export var Tooltip = function Tooltip(_ref2) {
       cornerAbsoluteOffset = _ref2.cornerAbsoluteOffset,
       _ref2$mode = _ref2.mode,
       mode = _ref2$mode === void 0 ? "accent" : _ref2$mode,
+      appearance = _ref2.appearance,
+      _ref2$arrow = _ref2.arrow,
+      arrow = _ref2$arrow === void 0 ? true : _ref2$arrow,
+      placement = _ref2.placement,
       restProps = _objectWithoutProperties(_ref2, _excluded);
 
   var _useNavTransition = useNavTransition(),
@@ -114,15 +132,10 @@ export var Tooltip = function Tooltip(_ref2) {
       tooltipRef = _React$useState2[0],
       setTooltipRef = _React$useState2[1];
 
-  var _React$useState3 = React.useState(null),
+  var _React$useState3 = React.useState(),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      tooltipArrowRef = _React$useState4[0],
-      setTooltipArrowRef = _React$useState4[1];
-
-  var _React$useState5 = React.useState(),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      target = _React$useState6[0],
-      setTarget = _React$useState6[1];
+      target = _React$useState4[0],
+      setTarget = _React$useState4[1];
 
   if (IS_DEV) {
     var multiChildren = React.Children.count(children) > 1; // Empty children is a noop
@@ -149,63 +162,70 @@ export var Tooltip = function Tooltip(_ref2) {
     throw new Error("Use TooltipContainer for Tooltip outside Panel (see docs)");
   }
 
-  var arrowOffsetModifier = React.useMemo(function () {
-    return {
-      name: "arrowOffset",
-      enabled: true,
-      phase: "main",
-      fn: function fn(_ref3) {
-        var state = _ref3.state;
+  var modifiers = React.useMemo(function () {
+    var modifiers = [{
+      name: "offset",
+      options: {
+        offset: [offsetX, offsetY]
+      }
+    }, {
+      name: "preventOverflow"
+    }, {
+      name: "flip"
+    }];
 
-        if (!state.modifiersData.arrow) {
-          return;
+    if (arrow) {
+      modifiers.push({
+        name: "arrow",
+        options: {
+          padding: 14
         }
+      });
+      modifiers.push({
+        name: "arrowOffset",
+        enabled: true,
+        phase: "main",
+        fn: function fn(_ref3) {
+          var state = _ref3.state;
 
-        if (isVerticalPlacement(state.placement)) {
-          if (cornerAbsoluteOffset !== undefined) {
-            state.modifiersData.arrow.x = cornerAbsoluteOffset;
-          } else {
-            var _state$modifiersData$;
+          if (!state.modifiersData.arrow) {
+            return;
+          }
+
+          if (isVerticalPlacement(state.placement)) {
+            if (cornerAbsoluteOffset !== undefined) {
+              state.modifiersData.arrow.x = cornerAbsoluteOffset;
+            } else {
+              var _state$modifiersData$;
 
-            if (((_state$modifiersData$ = state.modifiersData.arrow) === null || _state$modifiersData$ === void 0 ? void 0 : _state$modifiersData$.x) !== undefined) {
-              state.modifiersData.arrow.x += cornerOffset;
+              if (((_state$modifiersData$ = state.modifiersData.arrow) === null || _state$modifiersData$ === void 0 ? void 0 : _state$modifiersData$.x) !== undefined) {
+                state.modifiersData.arrow.x += cornerOffset;
+              }
             }
-          }
-        } else {
-          if (cornerAbsoluteOffset !== undefined) {
-            state.modifiersData.arrow.y = cornerAbsoluteOffset;
           } else {
-            var _state$modifiersData$2;
+            if (cornerAbsoluteOffset !== undefined) {
+              state.modifiersData.arrow.y = cornerAbsoluteOffset;
+            } else {
+              var _state$modifiersData$2;
 
-            if (((_state$modifiersData$2 = state.modifiersData.arrow) === null || _state$modifiersData$2 === void 0 ? void 0 : _state$modifiersData$2.y) !== undefined) {
-              state.modifiersData.arrow.y += cornerOffset;
+              if (((_state$modifiersData$2 = state.modifiersData.arrow) === null || _state$modifiersData$2 === void 0 ? void 0 : _state$modifiersData$2.y) !== undefined) {
+                state.modifiersData.arrow.y += cornerOffset;
+              }
             }
           }
         }
-      }
-    };
-  }, [cornerOffset, cornerAbsoluteOffset]);
-  var placement = getPlacement(alignX, alignY);
+      });
+    }
+
+    return modifiers;
+  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY]);
+
+  var _placement = placement !== null && placement !== void 0 ? placement : getPlacement(alignX, alignY);
 
   var _usePopper = usePopper(target, tooltipRef, {
     strategy: strategy,
-    placement: placement,
-    modifiers: [{
-      name: "offset",
-      options: {
-        offset: [offsetX, offsetY]
-      }
-    }, {
-      name: "arrow",
-      options: {
-        element: tooltipArrowRef,
-        padding: 14
-      }
-    }, {
-      name: "preventOverflow"
-    }, {
-      name: "flip"
-    }, arrowOffsetModifier]
+    placement: _placement,
+    modifiers: modifiers
   }),
       styles = _usePopper.styles,
       attributes = _usePopper.attributes;
@@ -220,14 +240,15 @@ export var Tooltip = function Tooltip(_ref2) {
   var childRef = /*#__PURE__*/React.isValidElement(children) && (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);
   var patchedRef = useExternRef(setTarget, childRef);
   var child = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _defineProperty({}, isDOMTypeElement(children) ? "ref" : "getRootRef", patchedRef)) : children;
+
+  var _appearance = calculateAppearance(mode, appearance);
+
   return createScopedElement(React.Fragment, null, child, isShown && target != null && /*#__PURE__*/ReactDOM.createPortal(createScopedElement(SimpleTooltip, _extends({}, restProps, {
-    mode: mode,
+    appearance: _appearance,
+    arrow: arrow,
     ref: function ref(el) {
       return setTooltipRef(el);
     },
-    arrowRef: function arrowRef(el) {
-      return setTooltipArrowRef(el);
-    },
     style: {
       arrow: styles.arrow,
       container: styles.popper

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["React","ReactDOM","classNames","getClassName","Subhead","useNavTransition","usePopper","tooltipContainerAttr","useExternRef","useDOM","warnOnce","hasReactNode","useGlobalEventListener","isDOMTypeElement","element","isValidElement","type","baseClassName","warn","IS_DEV","process","env","NODE_ENV","SimpleTooltip","forwardRef","ref","mode","header","text","arrowRef","style","attributes","container","arrow","mapAlignX","x","getPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","Tooltip","children","isShown","_isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","restProps","entering","useState","tooltipRef","setTooltipRef","tooltipArrowRef","setTooltipArrowRef","target","setTarget","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","tooltipContainer","useMemo","closest","strategy","position","Error","arrowOffsetModifier","name","enabled","phase","fn","state","modifiersData","undefined","y","modifiers","options","offset","padding","styles","document","passive","childRef","props","getRootRef","patchedRef","child","cloneElement","createPortal","el","popper"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { useNavTransition } from \"../NavTransitionContext/NavTransitionContext\";\nimport { Modifier, usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { tooltipContainerAttr } from \"./TooltipContainer\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDOM } from \"../../lib/dom\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { HasRootRef } from \"../../types\";\nimport \"./Tooltip.css\";\n\ninterface SimpleTooltipProps extends Partial<TooltipProps> {\n  target?: HTMLDivElement;\n  arrowRef?: React.Ref<HTMLDivElement>;\n  style?: {\n    arrow: React.CSSProperties;\n    container: React.CSSProperties;\n  };\n  attributes?: {\n    arrow: React.HTMLAttributes<HTMLDivElement> | null;\n    container: React.HTMLAttributes<HTMLDivElement> | null;\n  };\n}\n\nconst isDOMTypeElement = (\n  element: React.ReactElement\n): element is React.DOMElement<any, any> => {\n  return React.isValidElement(element) && typeof element.type === \"string\";\n};\n\nconst baseClassName = getClassName(\"Tooltip\");\nconst warn = warnOnce(\"Tooltip\");\nconst IS_DEV = process.env.NODE_ENV === \"development\";\n\nconst SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(\n  function SimpleTooltip(\n    { mode = \"accent\", header, text, arrowRef, style = {}, attributes },\n    ref\n  ) {\n    return (\n      <div vkuiClass={classNames(baseClassName, `Tooltip--${mode}`)}>\n        <div\n          vkuiClass=\"Tooltip__container\"\n          ref={ref}\n          style={style.container}\n          {...attributes?.container}\n        >\n          <div\n            vkuiClass=\"Tooltip__corner\"\n            style={style.arrow}\n            {...attributes?.arrow}\n            ref={arrowRef}\n          />\n          <div vkuiClass=\"Tooltip__content\">\n            {header && (\n              <Subhead weight=\"1\" vkuiClass=\"Tooltip__title\">\n                {header}\n              </Subhead>\n            )}\n            {text && <Subhead vkuiClass=\"Tooltip__text\">{text}</Subhead>}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nexport interface TooltipProps {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children:\n    | React.ReactElement<HasRootRef<any>>\n    | React.ReactElement<React.PropsWithRef<any>>;\n  mode?: \"accent\" | \"light\";\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Положение по горизонтали (прижатие к левому или правому краю `children`).\n   * Если не задано, позиция по горизонтали определятся автоматически\n   */\n  alignX?: \"center\" | \"left\" | \"right\";\n  /**\n   * Положение по вертикали (расположение над или под `children`).\n   * Если не задано, позиция по вертикали определятся автоматически\n   */\n  alignY?: \"top\" | \"bottom\";\n  /**\n   * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n   */\n  offsetX?: number;\n  /**\n   * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n   */\n  offsetY?: number;\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n}\n\ndeclare type ArrowOffsetModifierOptions = {\n  offset: number;\n};\ndeclare type ArrowOffsetModifier = Modifier<\n  \"arrowOffset\",\n  ArrowOffsetModifierOptions\n>;\n\nfunction mapAlignX(x: TooltipProps[\"alignX\"]) {\n  switch (x) {\n    case \"left\":\n      return \"start\";\n    case \"right\":\n      return \"end\";\n    default:\n      return \"\";\n  }\n}\nfunction getPlacement(\n  alignX: TooltipProps[\"alignX\"],\n  alignY: TooltipProps[\"alignY\"]\n): Placement {\n  return [alignY || \"bottom\", mapAlignX(alignX || \"left\")]\n    .filter((p) => !!p)\n    .join(\"-\") as Placement;\n}\nfunction isVerticalPlacement(placement: Placement) {\n  return placement.startsWith(\"top\") || placement.startsWith(\"bottom\");\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  children,\n  isShown: _isShown = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  mode = \"accent\",\n  ...restProps\n}: TooltipProps) => {\n  const { entering } = useNavTransition();\n  const isShown = _isShown && !entering;\n  const [tooltipRef, setTooltipRef] = React.useState<HTMLElement | null>(null);\n  const [tooltipArrowRef, setTooltipArrowRef] =\n    React.useState<HTMLElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement>();\n\n  if (IS_DEV) {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild =\n      hasReactNode(children) && typeof children !== \"object\";\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          \"children должен быть одним React элементом, получено\",\n          multiChildren && \"несколько\",\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(\" \"),\n        \"error\"\n      );\n  }\n\n  /* eslint-disable no-restricted-properties */\n  /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion*/\n  const tooltipContainer = React.useMemo(\n    () => target?.closest(`[${tooltipContainerAttr}]`) as HTMLDivElement,\n    [target]\n  );\n  const strategy = React.useMemo(\n    () => (target?.style.position === \"fixed\" ? \"fixed\" : \"absolute\"),\n    [target]\n  );\n  /* eslint-enable @typescript-eslint/no-unnecessary-type-assertion*/\n  /* eslint-enable no-restricted-properties */\n\n  if (IS_DEV && target && !tooltipContainer) {\n    throw new Error(\n      \"Use TooltipContainer for Tooltip outside Panel (see docs)\"\n    );\n  }\n\n  const arrowOffsetModifier = React.useMemo<ArrowOffsetModifier>(() => {\n    return {\n      name: \"arrowOffset\",\n      enabled: true,\n      phase: \"main\",\n      fn({ state }) {\n        if (!state.modifiersData.arrow) {\n          return;\n        }\n        if (isVerticalPlacement(state.placement)) {\n          if (cornerAbsoluteOffset !== undefined) {\n            state.modifiersData.arrow.x = cornerAbsoluteOffset;\n          } else {\n            if (state.modifiersData.arrow?.x !== undefined) {\n              state.modifiersData.arrow.x += cornerOffset;\n            }\n          }\n        } else {\n          if (cornerAbsoluteOffset !== undefined) {\n            state.modifiersData.arrow.y = cornerAbsoluteOffset;\n          } else {\n            if (state.modifiersData.arrow?.y !== undefined) {\n              state.modifiersData.arrow.y += cornerOffset;\n            }\n          }\n        }\n      },\n    };\n  }, [cornerOffset, cornerAbsoluteOffset]);\n\n  const placement = getPlacement(alignX, alignY);\n  const { styles, attributes } = usePopper(target, tooltipRef, {\n    strategy,\n    placement,\n    modifiers: [\n      {\n        name: \"offset\",\n        options: {\n          offset: [offsetX, offsetY],\n        },\n      },\n      {\n        name: \"arrow\",\n        options: {\n          element: tooltipArrowRef,\n          padding: 14,\n        },\n      },\n      {\n        name: \"preventOverflow\",\n      },\n      {\n        name: \"flip\",\n      },\n      arrowOffsetModifier,\n    ],\n  });\n\n  const { document } = useDOM();\n  useGlobalEventListener(document, \"click\", isShown && onClose, {\n    passive: true,\n  });\n  // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()\n\n  const childRef =\n    React.isValidElement(children) &&\n    (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);\n  const patchedRef = useExternRef(setTarget, childRef);\n  const child = React.isValidElement(children)\n    ? React.cloneElement(children, {\n        [isDOMTypeElement(children) ? \"ref\" : \"getRootRef\"]: patchedRef,\n      })\n    : children;\n\n  return (\n    <React.Fragment>\n      {child}\n      {isShown &&\n        target != null &&\n        ReactDOM.createPortal(\n          <SimpleTooltip\n            {...restProps}\n            mode={mode}\n            ref={(el) => setTooltipRef(el)}\n            arrowRef={(el) => setTooltipArrowRef(el)}\n            style={{ arrow: styles.arrow, container: styles.popper }}\n            attributes={{\n              arrow: attributes.arrow ?? null,\n              container: attributes.popper ?? null,\n            }}\n          />,\n          tooltipContainer\n        )}\n    </React.Fragment>\n  );\n};\n"],"file":"Tooltip.js"}
+{"version":3,"sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":["React","ReactDOM","classNames","getClassName","Subhead","useNavTransition","PopperArrow","usePopper","tooltipContainerAttr","useExternRef","useDOM","warnOnce","hasReactNode","prefixClass","useGlobalEventListener","isDOMTypeElement","element","isValidElement","type","baseClassName","warn","IS_DEV","process","env","NODE_ENV","SimpleTooltip","forwardRef","ref","appearance","header","text","arrow","style","attributes","container","mapAlignX","x","getPlacement","alignX","alignY","filter","p","join","isVerticalPlacement","placement","startsWith","calculateAppearance","mode","Tooltip","children","isShown","_isShown","offsetX","offsetY","onClose","cornerOffset","cornerAbsoluteOffset","restProps","entering","useState","tooltipRef","setTooltipRef","target","setTarget","multiChildren","Children","count","primitiveChild","JSON","stringify","Boolean","tooltipContainer","useMemo","closest","strategy","position","Error","modifiers","name","options","offset","push","padding","enabled","phase","fn","state","modifiersData","undefined","y","_placement","styles","document","passive","childRef","props","getRootRef","patchedRef","child","cloneElement","_appearance","createPortal","el","popper"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { useNavTransition } from \"../NavTransitionContext/NavTransitionContext\";\nimport { PopperArrow } from \"../PopperArrow/PopperArrow\";\nimport { Modifier, usePopper } from \"react-popper\";\nimport { Placement } from \"@popperjs/core\";\nimport { tooltipContainerAttr } from \"./TooltipContainer\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDOM } from \"../../lib/dom\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { HasRootRef } from \"../../types\";\nimport \"./Tooltip.css\";\n\ninterface SimpleTooltipProps extends Partial<TooltipProps> {\n  target?: HTMLDivElement;\n  style?: {\n    arrow: React.CSSProperties;\n    container: React.CSSProperties;\n  };\n  attributes?: {\n    arrow: React.HTMLAttributes<HTMLDivElement> | null;\n    container: React.HTMLAttributes<HTMLDivElement> | null;\n  };\n}\n\nconst isDOMTypeElement = (\n  element: React.ReactElement\n): element is React.DOMElement<any, any> => {\n  return React.isValidElement(element) && typeof element.type === \"string\";\n};\n\nconst baseClassName = getClassName(\"Tooltip\");\nconst warn = warnOnce(\"Tooltip\");\nconst IS_DEV = process.env.NODE_ENV === \"development\";\n\nconst SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(\n  function SimpleTooltip(\n    { appearance = \"accent\", header, text, arrow, style = {}, attributes },\n    ref\n  ) {\n    return (\n      <div vkuiClass={classNames(baseClassName, `Tooltip--${appearance}`)}>\n        <div\n          vkuiClass=\"Tooltip__container\"\n          ref={ref}\n          style={style.container}\n          {...attributes?.container}\n        >\n          {arrow && (\n            <PopperArrow\n              style={style.arrow}\n              attributes={attributes?.arrow}\n              arrowClassName={prefixClass(\"Tooltip__arrow\")}\n            />\n          )}\n          <div vkuiClass=\"Tooltip__content\">\n            {header && (\n              <Subhead weight=\"2\" vkuiClass=\"Tooltip__title\">\n                {header}\n              </Subhead>\n            )}\n            {text && <Subhead vkuiClass=\"Tooltip__text\">{text}</Subhead>}\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\n\nexport interface TooltipProps {\n  /**\n   * **Важно**: если в `children` передан React-компонент, то необходимо убедиться в том, что он поддерживает\n   * свойство `getRootRef`, которое должно возвращаться ссылку на корневой DOM-элемент компонента,\n   * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.\n   */\n  children:\n    | React.ReactElement<HasRootRef<any>>\n    | React.ReactElement<React.PropsWithRef<any>>;\n  /**\n   * @deprecated будет удалено в 5.0.0, устанавливать стиль следует через appearance\n   * Стиль отображения подсказки\n   */\n  mode?: \"accent\" | \"light\";\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: \"accent\" | \"neutral\" | \"white\" | \"black\" | \"inversion\";\n  /**\n   * Если передан `false`, то рисуется просто `children`.\n   */\n  isShown?: boolean;\n  /**\n   * Текст тултипа.\n   */\n  text?: React.ReactNode;\n  /**\n   * Заголовок тултипа.\n   */\n  header?: React.ReactNode;\n  /**\n   * Положение по горизонтали (прижатие к левому или правому краю `children`).\n   * Если не задано, позиция по горизонтали определятся автоматически\n   */\n  alignX?: \"center\" | \"left\" | \"right\";\n  /**\n   * Положение по вертикали (расположение над или под `children`).\n   * Если не задано, позиция по вертикали определятся автоматически\n   */\n  alignY?: \"top\" | \"bottom\";\n  /**\n   * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).\n   */\n  offsetX?: number;\n  /**\n   * Сдвиг по вертикали (относительно портала, в котором рисуется тултип).\n   */\n  offsetY?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Сдвиг стрелочки относительно центра дочернего элемента.\n   */\n  cornerOffset?: number;\n  /**\n   * Сдвиг стрелочки относительно ширины тултипа\n   */\n  cornerAbsoluteOffset?: number;\n  /**\n   * Callback, который вызывается при клике по любому месту в пределах экрана.\n   */\n  onClose?: () => void;\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: Placement;\n}\n\nfunction mapAlignX(x: TooltipProps[\"alignX\"]) {\n  switch (x) {\n    case \"left\":\n      return \"start\";\n    case \"right\":\n      return \"end\";\n    default:\n      return \"\";\n  }\n}\nfunction getPlacement(\n  alignX: TooltipProps[\"alignX\"],\n  alignY: TooltipProps[\"alignY\"]\n): Placement {\n  return [alignY || \"bottom\", mapAlignX(alignX || \"left\")]\n    .filter((p) => !!p)\n    .join(\"-\") as Placement;\n}\nfunction isVerticalPlacement(placement: Placement) {\n  return placement.startsWith(\"top\") || placement.startsWith(\"bottom\");\n}\n\n/**\n * Вычисляем стиль подсказки: параметр appearance имеет приоритет, иначе мапим mode на подходящее значение из appearance\n * TODO: v5 избавиться от пропа mode и этого метода, для appearance по умолчанию сделать \"accent\"\n */\nfunction calculateAppearance(\n  mode: TooltipProps[\"mode\"],\n  appearance: TooltipProps[\"appearance\"]\n): TooltipProps[\"appearance\"] {\n  if (appearance) {\n    return appearance;\n  }\n\n  return mode === \"light\" ? \"white\" : \"accent\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const Tooltip = ({\n  children,\n  isShown: _isShown = true,\n  offsetX = 0,\n  offsetY = 15,\n  alignX,\n  alignY,\n  onClose,\n  cornerOffset = 0,\n  cornerAbsoluteOffset,\n  mode = \"accent\",\n  appearance,\n  arrow = true,\n  placement,\n  ...restProps\n}: TooltipProps) => {\n  const { entering } = useNavTransition();\n  const isShown = _isShown && !entering;\n  const [tooltipRef, setTooltipRef] = React.useState<HTMLElement | null>(null);\n  const [target, setTarget] = React.useState<HTMLElement>();\n\n  if (IS_DEV) {\n    const multiChildren = React.Children.count(children) > 1;\n    // Empty children is a noop\n    const primitiveChild =\n      hasReactNode(children) && typeof children !== \"object\";\n    (multiChildren || primitiveChild) &&\n      warn(\n        [\n          \"children должен быть одним React элементом, получено\",\n          multiChildren && \"несколько\",\n          primitiveChild && JSON.stringify(children),\n        ]\n          .filter(Boolean)\n          .join(\" \"),\n        \"error\"\n      );\n  }\n\n  /* eslint-disable no-restricted-properties */\n  /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion*/\n  const tooltipContainer = React.useMemo(\n    () => target?.closest(`[${tooltipContainerAttr}]`) as HTMLDivElement,\n    [target]\n  );\n  const strategy = React.useMemo(\n    () => (target?.style.position === \"fixed\" ? \"fixed\" : \"absolute\"),\n    [target]\n  );\n  /* eslint-enable @typescript-eslint/no-unnecessary-type-assertion*/\n  /* eslint-enable no-restricted-properties */\n\n  if (IS_DEV && target && !tooltipContainer) {\n    throw new Error(\n      \"Use TooltipContainer for Tooltip outside Panel (see docs)\"\n    );\n  }\n\n  const modifiers = React.useMemo(() => {\n    const modifiers: Array<Modifier<string>> = [\n      {\n        name: \"offset\",\n        options: {\n          offset: [offsetX, offsetY],\n        },\n      },\n      {\n        name: \"preventOverflow\",\n      },\n      {\n        name: \"flip\",\n      },\n    ];\n\n    if (arrow) {\n      modifiers.push({\n        name: \"arrow\",\n        options: {\n          padding: 14,\n        },\n      });\n      modifiers.push({\n        name: \"arrowOffset\",\n        enabled: true,\n        phase: \"main\",\n        fn({ state }) {\n          if (!state.modifiersData.arrow) {\n            return;\n          }\n          if (isVerticalPlacement(state.placement)) {\n            if (cornerAbsoluteOffset !== undefined) {\n              state.modifiersData.arrow.x = cornerAbsoluteOffset;\n            } else {\n              if (state.modifiersData.arrow?.x !== undefined) {\n                state.modifiersData.arrow.x += cornerOffset;\n              }\n            }\n          } else {\n            if (cornerAbsoluteOffset !== undefined) {\n              state.modifiersData.arrow.y = cornerAbsoluteOffset;\n            } else {\n              if (state.modifiersData.arrow?.y !== undefined) {\n                state.modifiersData.arrow.y += cornerOffset;\n              }\n            }\n          }\n        },\n      });\n    }\n\n    return modifiers;\n  }, [arrow, cornerAbsoluteOffset, cornerOffset, offsetX, offsetY]);\n\n  const _placement = placement ?? getPlacement(alignX, alignY);\n  const { styles, attributes } = usePopper(target, tooltipRef, {\n    strategy,\n    placement: _placement,\n    modifiers,\n  });\n\n  const { document } = useDOM();\n  useGlobalEventListener(document, \"click\", isShown && onClose, {\n    passive: true,\n  });\n  // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()\n\n  const childRef =\n    React.isValidElement(children) &&\n    (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);\n  const patchedRef = useExternRef(setTarget, childRef);\n  const child = React.isValidElement(children)\n    ? React.cloneElement(children, {\n        [isDOMTypeElement(children) ? \"ref\" : \"getRootRef\"]: patchedRef,\n      })\n    : children;\n\n  const _appearance = calculateAppearance(mode, appearance);\n\n  return (\n    <React.Fragment>\n      {child}\n      {isShown &&\n        target != null &&\n        ReactDOM.createPortal(\n          <SimpleTooltip\n            {...restProps}\n            appearance={_appearance}\n            arrow={arrow}\n            ref={(el) => setTooltipRef(el)}\n            style={{ arrow: styles.arrow, container: styles.popper }}\n            attributes={{\n              arrow: attributes.arrow ?? null,\n              container: attributes.popper ?? null,\n            }}\n          />,\n          tooltipContainer\n        )}\n    </React.Fragment>\n  );\n};\n"],"file":"Tooltip.js"}

package/dist/cssm/components/Typography/Caption/Caption.css

@@ -1 +1 @@
-.vkuiCaption{display:block;margin:0}.vkuiCaption--caps{text-transform:uppercase}.vkuiCaption--l-1{font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular,13px);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular,16px);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular,400)}.vkuiCaption--l-1.vkuiCaption--caps{font-size:13px;font-size:var(--vkui--font_footnote_caps--font_size--regular,13px);line-height:16px;line-height:var(--vkui--font_footnote_caps--line_height--regular,16px);font-weight:400;font-weight:var(--vkui--font_footnote_caps--font_weight--regular,400)}.vkuiCaption--l-2{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular,12px);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular,14px);font-weight:400;font-weight:var(--vkui--font_caption1--font_weight--regular,400)}.vkuiCaption--l-2.vkuiCaption--caps{font-size:12px;font-size:var(--vkui--font_caption1_caps--font_size--regular,12px);line-height:14px;line-height:var(--vkui--font_caption1_caps--line_height--regular,14px);font-weight:600;font-weight:var(--vkui--font_caption1_caps--font_weight--regular,600)}.vkuiCaption--l-3{font-size:11px;font-size:var(--vkui--font_caption2--font_size--regular,11px);line-height:14px;line-height:var(--vkui--font_caption2--line_height--regular,14px);font-weight:400;font-weight:var(--vkui--font_caption2--font_weight--regular,400)}.vkuiCaption--l-3.vkuiCaption--caps{font-size:11px;font-size:var(--vkui--font_caption2_caps--font_size--regular,11px);line-height:14px;line-height:var(--vkui--font_caption2_caps--line_height--regular,14px);font-weight:600;font-weight:var(--vkui--font_caption2_caps--font_weight--regular,600)}.vkuiCaption--l-4{font-size:9px;font-size:var(--vkui--font_caption3--font_size--regular,9px);line-height:12px;line-height:var(--vkui--font_caption3--line_height--regular,12px);font-weight:400;font-weight:var(--vkui--font_caption3--font_weight--regular,400)}.vkuiCaption--l-4.vkuiCaption--caps{font-size:9px;font-size:var(--vkui--font_caption3_caps--font_size--regular,9px);line-height:12px;line-height:var(--vkui--font_caption3_caps--line_height--regular,12px);font-weight:600;font-weight:var(--vkui--font_caption3_caps--font_weight--regular,600)}.vkuiCaption.vkuiCaption--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiCaption.vkuiCaption--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiCaption.vkuiCaption--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}.vkuiCaption--w-regular{font-weight:400}.vkuiCaption--w-medium{font-weight:500}.vkuiCaption--w-semibold{font-weight:600}.vkuiCaption--w-bold{font-weight:700}
+.vkuiCaption{display:block;margin:0}.vkuiCaption--caps{text-transform:uppercase}.vkuiCaption--l-1{font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular,13px);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular,400);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular,16px)}.vkuiCaption--l-1.vkuiCaption--caps{font-size:13px;font-size:var(--vkui--font_footnote_caps--font_size--regular,13px);font-weight:400;font-weight:var(--vkui--font_footnote_caps--font_weight--regular,400);line-height:16px;line-height:var(--vkui--font_footnote_caps--line_height--regular,16px)}.vkuiCaption--l-2{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular,12px);font-weight:400;font-weight:var(--vkui--font_caption1--font_weight--regular,400);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular,14px)}.vkuiCaption--l-2.vkuiCaption--caps{font-size:12px;font-size:var(--vkui--font_caption1_caps--font_size--regular,12px);font-weight:600;font-weight:var(--vkui--font_caption1_caps--font_weight--regular,600);line-height:14px;line-height:var(--vkui--font_caption1_caps--line_height--regular,14px)}.vkuiCaption--l-3{font-size:11px;font-size:var(--vkui--font_caption2--font_size--regular,11px);font-weight:400;font-weight:var(--vkui--font_caption2--font_weight--regular,400);line-height:14px;line-height:var(--vkui--font_caption2--line_height--regular,14px)}.vkuiCaption--l-3.vkuiCaption--caps{font-size:11px;font-size:var(--vkui--font_caption2_caps--font_size--regular,11px);font-weight:600;font-weight:var(--vkui--font_caption2_caps--font_weight--regular,600);line-height:14px;line-height:var(--vkui--font_caption2_caps--line_height--regular,14px)}.vkuiCaption--l-4{font-size:9px;font-size:var(--vkui--font_caption3--font_size--regular,9px);font-weight:400;font-weight:var(--vkui--font_caption3--font_weight--regular,400);line-height:12px;line-height:var(--vkui--font_caption3--line_height--regular,12px)}.vkuiCaption--l-4.vkuiCaption--caps{font-size:9px;font-size:var(--vkui--font_caption3_caps--font_size--regular,9px);font-weight:600;font-weight:var(--vkui--font_caption3_caps--font_weight--regular,600);line-height:12px;line-height:var(--vkui--font_caption3_caps--line_height--regular,12px)}.vkuiCaption.vkuiCaption--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiCaption.vkuiCaption--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiCaption.vkuiCaption--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}.vkuiCaption--w-regular{font-weight:400}.vkuiCaption--w-medium{font-weight:500}.vkuiCaption--w-semibold{font-weight:600}.vkuiCaption--w-bold{font-weight:700}

package/dist/cssm/components/Typography/Footnote/Footnote.css

@@ -1 +1 @@
-.vkuiFootnote{display:block;margin:0;font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular,13px);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular,16px);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular,400)}.vkuiFootnote--caps{font-size:13px;font-size:var(--vkui--font_footnote_caps--font_size--regular,13px);line-height:16px;line-height:var(--vkui--font_footnote_caps--line_height--regular,16px);font-weight:400;font-weight:var(--vkui--font_footnote_caps--font_weight--regular,400);text-transform:uppercase}.vkuiFootnote--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiFootnote--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiFootnote--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}
+.vkuiFootnote{display:block;font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular,13px);font-weight:400;font-weight:var(--vkui--font_footnote--font_weight--regular,400);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular,16px);margin:0}.vkuiFootnote--caps{font-size:13px;font-size:var(--vkui--font_footnote_caps--font_size--regular,13px);font-weight:400;font-weight:var(--vkui--font_footnote_caps--font_weight--regular,400);line-height:16px;line-height:var(--vkui--font_footnote_caps--line_height--regular,16px);text-transform:uppercase}.vkuiFootnote--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiFootnote--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiFootnote--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}

package/dist/cssm/components/Typography/Headline/Headline.css

@@ -1 +1 @@
-.vkuiHeadline{display:block;margin:0}.vkuiHeadline--l-1{font-size:16px;font-size:var(--vkui--font_headline1--font_size--regular,16px);line-height:20px;line-height:var(--vkui--font_headline1--line_height--regular,20px);font-weight:500;font-weight:var(--vkui--font_headline1--font_weight--regular,500)}.vkuiHeadline--l-2{font-size:15px;font-size:var(--vkui--font_headline2--font_size--regular,15px);line-height:20px;line-height:var(--vkui--font_headline2--line_height--regular,20px);font-weight:500;font-weight:var(--vkui--font_headline2--font_weight--regular,500)}.vkuiHeadline--sizeY-compact.vkuiHeadline--l-1{font-size:15px;font-size:var(--vkui--font_headline1--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_headline1--line_height--compact,20px)}.vkuiHeadline--sizeY-compact.vkuiHeadline--l-2{font-size:14px;font-size:var(--vkui--font_headline2--font_size--compact,14px);line-height:20px;line-height:var(--vkui--font_headline2--line_height--compact,20px)}.vkuiHeadline--w-regular{font-weight:400}.vkuiHeadline--w-medium{font-weight:500}.vkuiHeadline--w-semibold{font-weight:600}.vkuiHeadline--android.vkuiHeadline--w-semibold{font-weight:500}.vkuiHeadline--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiHeadline--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiHeadline--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}
+.vkuiHeadline{display:block;margin:0}.vkuiHeadline--l-1{font-size:16px;font-size:var(--vkui--font_headline1--font_size--regular,16px);font-weight:500;font-weight:var(--vkui--font_headline1--font_weight--regular,500);line-height:20px;line-height:var(--vkui--font_headline1--line_height--regular,20px)}.vkuiHeadline--l-2{font-size:15px;font-size:var(--vkui--font_headline2--font_size--regular,15px);font-weight:500;font-weight:var(--vkui--font_headline2--font_weight--regular,500);line-height:20px;line-height:var(--vkui--font_headline2--line_height--regular,20px)}.vkuiHeadline--sizeY-compact.vkuiHeadline--l-1{font-size:15px;font-size:var(--vkui--font_headline1--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_headline1--line_height--compact,20px)}.vkuiHeadline--sizeY-compact.vkuiHeadline--l-2{font-size:14px;font-size:var(--vkui--font_headline2--font_size--compact,14px);line-height:20px;line-height:var(--vkui--font_headline2--line_height--compact,20px)}.vkuiHeadline--w-regular{font-weight:400}.vkuiHeadline--w-medium{font-weight:500}.vkuiHeadline--w-semibold{font-weight:600}.vkuiHeadline--android.vkuiHeadline--w-semibold{font-weight:500}.vkuiHeadline--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiHeadline--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiHeadline--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}

package/dist/cssm/components/Typography/Headline/Headline.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { HasComponent } from "../../../types";
+import { HasComponent, HasRootRef } from "../../../types";
 import "./Headline.css";
-export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement>, HasComponent {
+export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
     /**
      * Задаёт начертание шрифта отличное от стандартного.
      *
@@ -13,4 +13,4 @@ export interface HeadlineProps extends React.AllHTMLAttributes<HTMLElement>, Has
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
-export declare const Headline: ({ children, weight, level, Component, ...restProps }: HeadlineProps) => JSX.Element;
+export declare const Headline: ({ children, weight, level, Component, getRootRef, ...restProps }: HeadlineProps) => JSX.Element;

package/dist/cssm/components/Typography/Headline/Headline.js

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "weight", "level", "Component"];
+var _excluded = ["children", "weight", "level", "Component", "getRootRef"];
 import { createScopedElement } from "../../../lib/jsxRuntime";
 import { usePlatform } from "../../../hooks/usePlatform";
 import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { classNames } from "../../../lib/classNames";
+import { warnOnce } from "../../../lib/warnOnce";
 import { getClassName } from "../../../helpers/getClassName";
 import "./Headline.css";
-
+var warn = warnOnce("Headline");
 /**
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
+
 export var Headline = function Headline(_ref) {
   var children = _ref.children,
       _ref$weight = _ref.weight,
@@ -19,6 +21,7 @@ export var Headline = function Headline(_ref) {
       level = _ref$level === void 0 ? "1" : _ref$level,
       _ref$Component = _ref.Component,
       Component = _ref$Component === void 0 ? "h3" : _ref$Component,
+      getRootRef = _ref.getRootRef,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
@@ -26,7 +29,12 @@ export var Headline = function Headline(_ref) {
   var _useAdaptivity = useAdaptivity(),
       sizeY = _useAdaptivity.sizeY;
 
+  if (process.env.NODE_ENV === "development" && typeof Component !== "string" && getRootRef) {
+    warn("getRootRef может использоваться только с элементами DOM", "error");
+  }
+
   return createScopedElement(Component, _extends({}, restProps, {
+    ref: getRootRef,
     vkuiClass: classNames(getClassName("Headline", platform), // TODO: v5 remove
     "Headline--sizeY-".concat(sizeY), // TODO: новая адаптивность
     "Headline--l-".concat(level), "Headline--w-".concat(weight))

package/dist/cssm/components/Typography/Headline/Headline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Typography/Headline/Headline.tsx"],"names":["usePlatform","useAdaptivity","classNames","getClassName","Headline","children","weight","level","Component","restProps","platform","sizeY"],"mappings":";;;;AAEA,SAASA,WAAT;AACA,SAASC,aAAT;AACA,SAASC,UAAT;AACA,SAASC,YAAT;AACA;;AAcA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAMH;AAAA,MALnBC,QAKmB,QALnBA,QAKmB;AAAA,yBAJnBC,MAImB;AAAA,MAJnBA,MAImB,4BAJV,GAIU;AAAA,wBAHnBC,KAGmB;AAAA,MAHnBA,KAGmB,2BAHX,GAGW;AAAA,4BAFnBC,SAEmB;AAAA,MAFnBA,SAEmB,+BAFP,IAEO;AAAA,MADhBC,SACgB;;AACnB,MAAMC,QAAQ,GAAGV,WAAW,EAA5B;;AACA,uBAAkBC,aAAa,EAA/B;AAAA,MAAQU,KAAR,kBAAQA,KAAR;;AAEA,SACE,oBAAC,SAAD,eACMF,SADN;AAEE,IAAA,SAAS,EAAEP,UAAU,CACnBC,YAAY,CAAC,UAAD,EAAaO,QAAb,CADO,EACiB;AADjB,8BAEAC,KAFA,GAES;AAFT,0BAGJJ,KAHI,yBAIJD,MAJI;AAFvB,MASGD,QATH,CADF;AAaD,CAvBM","sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../../types\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { getClassName } from \"../../../helpers/getClassName\";\nimport \"./Headline.css\";\n\nexport interface HeadlineProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasComponent {\n  /**\n   * Задаёт начертание шрифта отличное от стандартного.\n   *\n   * > ⚠️ Начертания `\"semibold\"`, `medium` и `\"regular\"` устарели и будут удалены в 5.0.0. Используйте значения `\"1\"`, `\"2\"` и `\"3\"`.\n   */\n  weight?: \"regular\" | \"medium\" | \"semibold\" | \"1\" | \"2\" | \"3\";\n  level?: \"1\" | \"2\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  children,\n  weight = \"3\",\n  level = \"1\",\n  Component = \"h3\", // TODO: v5 h4\n  ...restProps\n}: HeadlineProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Component\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"Headline\", platform), // TODO: v5 remove\n        `Headline--sizeY-${sizeY}`, // TODO: новая адаптивность\n        `Headline--l-${level}`,\n        `Headline--w-${weight}`\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"file":"Headline.js"}
+{"version":3,"sources":["../../../../../src/components/Typography/Headline/Headline.tsx"],"names":["usePlatform","useAdaptivity","classNames","warnOnce","getClassName","warn","Headline","children","weight","level","Component","getRootRef","restProps","platform","sizeY","process","env","NODE_ENV"],"mappings":";;;;AAEA,SAASA,WAAT;AACA,SAASC,aAAT;AACA,SAASC,UAAT;AACA,SAASC,QAAT;AACA,SAASC,YAAT;AACA;AAeA,IAAMC,IAAI,GAAGF,QAAQ,CAAC,UAAD,CAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAMG,QAAQ,GAAG,SAAXA,QAAW,OAOH;AAAA,MANnBC,QAMmB,QANnBA,QAMmB;AAAA,yBALnBC,MAKmB;AAAA,MALnBA,MAKmB,4BALV,GAKU;AAAA,wBAJnBC,KAImB;AAAA,MAJnBA,KAImB,2BAJX,GAIW;AAAA,4BAHnBC,SAGmB;AAAA,MAHnBA,SAGmB,+BAHP,IAGO;AAAA,MAFnBC,UAEmB,QAFnBA,UAEmB;AAAA,MADhBC,SACgB;;AACnB,MAAMC,QAAQ,GAAGb,WAAW,EAA5B;;AACA,uBAAkBC,aAAa,EAA/B;AAAA,MAAQa,KAAR,kBAAQA,KAAR;;AAEA,MACEC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IACA,OAAOP,SAAP,KAAqB,QADrB,IAEAC,UAHF,EAIE;AACAN,IAAAA,IAAI,CAAC,yDAAD,EAA4D,OAA5D,CAAJ;AACD;;AAED,SACE,oBAAC,SAAD,eACMO,SADN;AAEE,IAAA,GAAG,EAAED,UAFP;AAGE,IAAA,SAAS,EAAET,UAAU,CACnBE,YAAY,CAAC,UAAD,EAAaS,QAAb,CADO,EACiB;AADjB,8BAEAC,KAFA,GAES;AAFT,0BAGJL,KAHI,yBAIJD,MAJI;AAHvB,MAUGD,QAVH,CADF;AAcD,CAjCM","sourcesContent":["import * as React from \"react\";\nimport { HasComponent, HasRootRef } from \"../../../types\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { warnOnce } from \"../../../lib/warnOnce\";\nimport { getClassName } from \"../../../helpers/getClassName\";\nimport \"./Headline.css\";\n\nexport interface HeadlineProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Задаёт начертание шрифта отличное от стандартного.\n   *\n   * > ⚠️ Начертания `\"semibold\"`, `medium` и `\"regular\"` устарели и будут удалены в 5.0.0. Используйте значения `\"1\"`, `\"2\"` и `\"3\"`.\n   */\n  weight?: \"regular\" | \"medium\" | \"semibold\" | \"1\" | \"2\" | \"3\";\n  level?: \"1\" | \"2\";\n}\n\nconst warn = warnOnce(\"Headline\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Headline\n */\nexport const Headline = ({\n  children,\n  weight = \"3\",\n  level = \"1\",\n  Component = \"h3\", // TODO: v5 h4\n  getRootRef,\n  ...restProps\n}: HeadlineProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  if (\n    process.env.NODE_ENV === \"development\" &&\n    typeof Component !== \"string\" &&\n    getRootRef\n  ) {\n    warn(\"getRootRef может использоваться только с элементами DOM\", \"error\");\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        getClassName(\"Headline\", platform), // TODO: v5 remove\n        `Headline--sizeY-${sizeY}`, // TODO: новая адаптивность\n        `Headline--l-${level}`,\n        `Headline--w-${weight}`\n      )}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"file":"Headline.js"}

package/dist/cssm/components/Typography/Paragraph/Paragraph.css

@@ -1 +1 @@
-.vkuiParagraph{font-size:15px;font-size:var(--vkui--font_paragraph--font_size--regular,15px);line-height:20px;line-height:var(--vkui--font_paragraph--line_height--regular,20px);font-weight:400;font-weight:var(--vkui--font_paragraph--font_weight--regular,400)}.vkuiParagraph--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiParagraph--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiParagraph--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}
+.vkuiParagraph{font-size:15px;font-size:var(--vkui--font_paragraph--font_size--regular,15px);font-weight:400;font-weight:var(--vkui--font_paragraph--font_weight--regular,400);line-height:20px;line-height:var(--vkui--font_paragraph--line_height--regular,20px)}.vkuiParagraph--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiParagraph--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiParagraph--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}

package/dist/cssm/components/Typography/Subhead/Subhead.css

@@ -1 +1 @@
-.vkuiSubhead{margin:0;font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular,14px);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular,18px);font-weight:400;font-weight:var(--vkui--font_subhead--font_weight--regular,400)}.vkuiSubhead--sizeY-compact{font-size:13px;font-size:var(--vkui--font_subhead--font_size--compact,13px);line-height:16px;line-height:var(--vkui--font_subhead--line_height--compact,16px)}.vkuiSubhead--w-regular{font-weight:400}.vkuiSubhead--w-medium{font-weight:500}.vkuiSubhead--w-semibold{font-weight:600}.vkuiSubhead--w-bold{font-weight:700}.vkuiSubhead--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiSubhead--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiSubhead--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}
+.vkuiSubhead{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular,14px);font-weight:400;font-weight:var(--vkui--font_subhead--font_weight--regular,400);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular,18px);margin:0}.vkuiSubhead--sizeY-compact{font-size:13px;font-size:var(--vkui--font_subhead--font_size--compact,13px);line-height:16px;line-height:var(--vkui--font_subhead--line_height--compact,16px)}.vkuiSubhead--w-regular{font-weight:400}.vkuiSubhead--w-medium{font-weight:500}.vkuiSubhead--w-semibold{font-weight:600}.vkuiSubhead--w-bold{font-weight:700}.vkuiSubhead--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiSubhead--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiSubhead--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}

package/dist/cssm/components/Typography/Text/Text.css

@@ -1 +1 @@
-.vkuiText{display:block;margin:0;font-size:16px;font-size:var(--vkui--font_text--font_size--regular,16px);line-height:20px;line-height:var(--vkui--font_text--line_height--regular,20px);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular,400)}.vkuiText--sizeY-compact{font-size:15px;font-size:var(--vkui--font_text--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_text--line_height--compact,20px)}.vkuiText--w-regular{font-weight:400}.vkuiText--w-medium{font-weight:500}.vkuiText--w-semibold{font-weight:600}.vkuiText--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiText--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiText--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}
+.vkuiText{display:block;font-size:16px;font-size:var(--vkui--font_text--font_size--regular,16px);font-weight:400;font-weight:var(--vkui--font_text--font_weight--regular,400);line-height:20px;line-height:var(--vkui--font_text--line_height--regular,20px);margin:0}.vkuiText--sizeY-compact{font-size:15px;font-size:var(--vkui--font_text--font_size--compact,15px);line-height:20px;line-height:var(--vkui--font_text--line_height--compact,20px)}.vkuiText--w-regular{font-weight:400}.vkuiText--w-medium{font-weight:500}.vkuiText--w-1,.vkuiText--w-semibold{font-weight:600}.vkuiText--w-1{font-weight:var(--vkui--font_weight_accent1,600)}.vkuiText--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiText--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}

package/dist/cssm/components/Typography/Title/Title.css

@@ -1 +1 @@
-.vkuiTitle{display:block;margin:0}.vkuiTitle--l-1{font-size:24px;font-size:var(--vkui--font_title1--font_size--regular,24px);line-height:28px;line-height:var(--vkui--font_title1--line_height--regular,28px);font-weight:600;font-weight:var(--vkui--font_title1--font_weight--regular,600)}.vkuiTitle--l-2{font-size:20px;font-size:var(--vkui--font_title2--font_size--regular,20px);line-height:24px;line-height:var(--vkui--font_title2--line_height--regular,24px);font-weight:600;font-weight:var(--vkui--font_title2--font_weight--regular,600)}.vkuiTitle--l-3{font-size:17px;font-size:var(--vkui--font_title3--font_size--regular,17px);line-height:22px;line-height:var(--vkui--font_title3--line_height--regular,22px);font-weight:600;font-weight:var(--vkui--font_title3--font_weight--regular,600)}.vkuiTitle--w-regular{font-weight:400}.vkuiTitle--w-medium{font-weight:500}.vkuiTitle--w-semibold{font-weight:600}.vkuiTitle--w-bold{font-weight:700}.vkuiTitle--w-heavy{font-weight:800}.vkuiTitle--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiTitle--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiTitle--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}
+.vkuiTitle{display:block;margin:0}.vkuiTitle--l-1{font-size:24px;font-size:var(--vkui--font_title1--font_size--regular,24px);font-weight:600;font-weight:var(--vkui--font_title1--font_weight--regular,600);line-height:28px;line-height:var(--vkui--font_title1--line_height--regular,28px)}.vkuiTitle--l-2{font-size:20px;font-size:var(--vkui--font_title2--font_size--regular,20px);font-weight:600;font-weight:var(--vkui--font_title2--font_weight--regular,600);line-height:24px;line-height:var(--vkui--font_title2--line_height--regular,24px)}.vkuiTitle--l-3{font-size:17px;font-size:var(--vkui--font_title3--font_size--regular,17px);font-weight:600;font-weight:var(--vkui--font_title3--font_weight--regular,600);line-height:22px;line-height:var(--vkui--font_title3--line_height--regular,22px)}.vkuiTitle--w-regular{font-weight:400}.vkuiTitle--w-medium{font-weight:500}.vkuiTitle--w-semibold{font-weight:600}.vkuiTitle--w-bold{font-weight:700}.vkuiTitle--w-heavy{font-weight:800}.vkuiTitle--w-1{font-weight:600;font-weight:var(--vkui--font_weight_accent1,600)}.vkuiTitle--w-2{font-weight:500;font-weight:var(--vkui--font_weight_accent2,500)}.vkuiTitle--w-3{font-weight:400;font-weight:var(--vkui--font_weight_accent3,400)}

package/dist/cssm/components/UsersStack/UsersStack.css

@@ -1,5 +1,5 @@
-.vkuiUsersStack{display:flex;align-items:center;color:#818c99;color:var(--text_secondary, var(--vkui--color_text_secondary))}.vkuiUsersStack__photos{display:flex}.vkuiUsersStack__fill{fill:rgba(0,28,61,.08);fill:var(--placeholder_icon_background,
-    var(--vkui--color_image_placeholder_alpha)
-  )}.vkuiUsersStack__photo--others{display:flex;align-items:center;justify-content:center;color:#f2f3f5;color:var(--vkui--color_icon_contrast_secondary,#F2F3F5);background:#99a2ad;background:var(--content_placeholder_icon,
-    var(--vkui--color_icon_secondary)
-  );border-radius:50%}.vkuiUsersStack--size-xs .vkuiUsersStack__photo{width:16px;height:16px}.vkuiUsersStack--size-s .vkuiUsersStack__photo{width:24px;height:24px}.vkuiUsersStack--size-m .vkuiUsersStack__photo{width:32px;height:32px}.vkuiUsersStack__photo+.vkuiUsersStack__photo{margin-left:-2px}.vkuiUsersStack__text{min-width:0;flex:1;margin:0 0 0 8px}.vkuiUsersStack--l-vertical{flex-direction:column;justify-content:center}.vkuiUsersStack--l-vertical .vkuiUsersStack__text{margin:8px 0 0;text-align:center}.vkuiModalCardBase .vkuiUsersStack{margin-top:20px}
+.vkuiUsersStack{align-items:center;color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary));display:flex}.vkuiUsersStack__photos{display:flex}.vkuiUsersStack__fill{fill:rgba(0,28,61,.08);fill:var(
+    --placeholder_icon_background,var(--vkui--color_image_placeholder_alpha)
+  )}.vkuiUsersStack__photo--others{align-items:center;background:#99a2ad;background:var(
+    --content_placeholder_icon,var(--vkui--color_icon_secondary)
+  );border-radius:50%;color:#f2f3f5;color:var(--vkui--color_icon_contrast_secondary,#f2f3f5);display:flex;justify-content:center}.vkuiUsersStack--size-xs .vkuiUsersStack__photo{height:16px;width:16px}.vkuiUsersStack--size-s .vkuiUsersStack__photo{height:24px;width:24px}.vkuiUsersStack--size-m .vkuiUsersStack__photo{height:32px;width:32px}.vkuiUsersStack__photo+.vkuiUsersStack__photo{margin-left:-2px}.vkuiUsersStack__text{flex:1;margin:0 0 0 8px;min-width:0}.vkuiUsersStack--l-vertical{flex-direction:column;justify-content:center}.vkuiUsersStack--l-vertical .vkuiUsersStack__text{margin:8px 0 0;text-align:center}.vkuiModalCardBase .vkuiUsersStack{margin-top:20px}

package/dist/cssm/components/View/View.css

@@ -1 +1 @@
-.vkuiView--ios .vkuiPanel__in{padding-bottom:0;padding-bottom:var(--safe-area-inset-bottom)}.vkuiView--ios .vkuiPanel__in{padding:0 0 0 0;padding:0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left)}.vkuiView--ios .vkuiView__panel--swipe-back-prev{box-shadow:-2px 0 12px rgba(0,0,0,.3)}.vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-success{transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing);-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-success{transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-failed{transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-failed{transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing);-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.vkuiView--ios .vkuiView__panel--prev{-webkit-animation:vkui-animation-ios-prev-forward .6s cubic-bezier(.36,.66,.04,1);animation:vkui-animation-ios-prev-forward .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-animation-ios-prev-forward .6s var(--ios-easing);animation:vkui-animation-ios-prev-forward .6s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--next{-webkit-animation:vkui-animation-ios-next-back .6s cubic-bezier(.36,.66,.04,1);animation:vkui-animation-ios-next-back .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-animation-ios-next-back .6s var(--ios-easing);animation:vkui-animation-ios-next-back .6s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--prev~.vkuiView__panel--next{-webkit-animation:vkui-animation-ios-next-forward .6s cubic-bezier(.36,.66,.04,1);animation:vkui-animation-ios-next-forward .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-animation-ios-next-forward .6s var(--ios-easing);animation:vkui-animation-ios-next-forward .6s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--next~.vkuiView__panel--prev{-webkit-animation:vkui-animation-ios-prev-back .6s cubic-bezier(.36,.66,.04,1) forwards;animation:vkui-animation-ios-prev-back .6s cubic-bezier(.36,.66,.04,1) forwards;-webkit-animation:vkui-animation-ios-prev-back .6s var(--ios-easing) forwards;animation:vkui-animation-ios-prev-back .6s var(--ios-easing) forwards}.vkuiView--ios .vkuiView__panel--prev .vkuiPanel__fade,.vkuiView--ios .vkuiView__panel--next .vkuiPanel__fade{position:absolute;width:100%;height:100%;left:0;top:0;z-index:10;background:#000;pointer-events:none}.vkuiView--ios .vkuiView__panel--prev .vkuiPanel__fade{-webkit-animation:vkui-animation-ios-fade-in .6s cubic-bezier(.36,.66,.04,1);animation:vkui-animation-ios-fade-in .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-animation-ios-fade-in .6s var(--ios-easing);animation:vkui-animation-ios-fade-in .6s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--next .vkuiPanel__fade{-webkit-animation:vkui-animation-ios-fade-out .6s cubic-bezier(.36,.66,.04,1) forwards;animation:vkui-animation-ios-fade-out .6s cubic-bezier(.36,.66,.04,1) forwards;-webkit-animation:vkui-animation-ios-fade-out .6s var(--ios-easing) forwards;animation:vkui-animation-ios-fade-out .6s var(--ios-easing) forwards}.vkuiView--ios .vkuiView__panel--prev~.vkuiView__panel--next .vkuiPanel__fade,.vkuiView--ios .vkuiView__panel--next~.vkuiView__panel--prev .vkuiPanel__fade{display:none}.vkuiView--ios.vkuiView--no-motion .vkuiView__panel,.vkuiView--ios.vkuiView--no-motion .vkuiView__panel .vkuiPanel__in{-webkit-animation:none;animation:none}.vkuiView--ios .vkuiView__panel--active .vkuiPanel__fade{display:none}@-webkit-keyframes vkui-animation-ios-next-forward{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes vkui-animation-ios-next-forward{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes vkui-animation-ios-next-back{0%{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes vkui-animation-ios-next-back{0%{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes vkui-animation-ios-prev-forward{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes vkui-animation-ios-prev-forward{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes vkui-animation-ios-prev-back{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes vkui-animation-ios-prev-back{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes vkui-animation-ios-fade-in{0%{opacity:0}to{opacity:.3}}@keyframes vkui-animation-ios-fade-in{0%{opacity:0}to{opacity:.3}}@-webkit-keyframes vkui-animation-ios-fade-out{0%{opacity:.3}to{opacity:0}}@keyframes vkui-animation-ios-fade-out{0%{opacity:.3}to{opacity:0}}.vkuiView{position:relative;height:100%;width:100%;word-wrap:break-word;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common)}.vkuiView--animated,.vkuiView--swiping-back{overflow:hidden}.vkuiView__header{z-index:2;position:fixed;width:100%}.vkuiView--animated .vkuiView__panel,.vkuiView--animated .vkuiView__header,.vkuiView--swiping-back .vkuiView__panel,.vkuiView--swiping-back .vkuiView__header{pointer-events:none}.vkuiView__panels{height:100%;width:100%}.vkuiView__panel{position:relative;width:100%;height:100%;box-sizing:border-box;z-index:1}.vkuiView__panel-in{height:100%}.vkuiView--animated .vkuiView__panel,.vkuiView--swiping-back .vkuiView__panel{position:fixed;top:0;left:0;overflow:hidden}.vkuiView__popout{position:fixed;left:0;top:0;z-index:100;width:100%;height:100%}.vkuiView__modal{position:fixed;left:0;top:0;z-index:99;width:100%;height:100%}.vkuiView__modal:empty{display:none}.vkuiView__panel--next~.vkuiView__panel--prev{-webkit-animation:vkui-animation-view-prev-back .3s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-animation-view-prev-back .3s cubic-bezier(.4,0,.2,1) forwards;-webkit-animation:vkui-animation-view-prev-back .3s var(--android-easing) forwards;animation:vkui-animation-view-prev-back .3s var(--android-easing) forwards}.vkuiView__panel--prev~.vkuiView__panel--next{-webkit-animation:vkui-animation-view-next-forward .3s cubic-bezier(.4,0,.2,1);animation:vkui-animation-view-next-forward .3s cubic-bezier(.4,0,.2,1);-webkit-animation:vkui-animation-view-next-forward .3s var(--android-easing);animation:vkui-animation-view-next-forward .3s var(--android-easing)}.vkuiView--no-motion .vkuiView__panel{-webkit-animation:none;animation:none}@-webkit-keyframes vkui-animation-view-prev-back{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(80px);transform:translateY(80px)}}@keyframes vkui-animation-view-prev-back{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(80px);transform:translateY(80px)}}@-webkit-keyframes vkui-animation-view-next-forward{0%{opacity:0;-webkit-transform:translateY(80px);transform:translateY(80px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes vkui-animation-view-next-forward{0%{opacity:0;-webkit-transform:translateY(80px);transform:translateY(80px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
+.vkuiView--ios .vkuiPanel__in{padding-bottom:0;padding-bottom:var(--safe-area-inset-bottom);padding:0;padding:0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left)}.vkuiView--ios .vkuiView__panel--swipe-back-prev{box-shadow:-2px 0 12px rgba(0,0,0,.3)}.vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-success{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-success,.vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-failed{-webkit-transform:translateZ(0);transform:translateZ(0)}.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-failed,.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-success,.vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-failed{transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-failed{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.vkuiView--ios .vkuiView__panel--prev{-webkit-animation:vkui-animation-ios-prev-forward .6s cubic-bezier(.36,.66,.04,1);animation:vkui-animation-ios-prev-forward .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-animation-ios-prev-forward .6s var(--ios-easing);animation:vkui-animation-ios-prev-forward .6s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--next{-webkit-animation:vkui-animation-ios-next-back .6s cubic-bezier(.36,.66,.04,1);animation:vkui-animation-ios-next-back .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-animation-ios-next-back .6s var(--ios-easing);animation:vkui-animation-ios-next-back .6s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--prev~.vkuiView__panel--next{-webkit-animation:vkui-animation-ios-next-forward .6s cubic-bezier(.36,.66,.04,1);animation:vkui-animation-ios-next-forward .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-animation-ios-next-forward .6s var(--ios-easing);animation:vkui-animation-ios-next-forward .6s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--next~.vkuiView__panel--prev{-webkit-animation:vkui-animation-ios-prev-back .6s cubic-bezier(.36,.66,.04,1) forwards;animation:vkui-animation-ios-prev-back .6s cubic-bezier(.36,.66,.04,1) forwards;-webkit-animation:vkui-animation-ios-prev-back .6s var(--ios-easing) forwards;animation:vkui-animation-ios-prev-back .6s var(--ios-easing) forwards}.vkuiView--ios .vkuiView__panel--next .vkuiPanel__fade,.vkuiView--ios .vkuiView__panel--prev .vkuiPanel__fade{background:#000;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.vkuiView--ios .vkuiView__panel--prev .vkuiPanel__fade{-webkit-animation:vkui-animation-ios-fade-in .6s cubic-bezier(.36,.66,.04,1);animation:vkui-animation-ios-fade-in .6s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-animation-ios-fade-in .6s var(--ios-easing);animation:vkui-animation-ios-fade-in .6s var(--ios-easing)}.vkuiView--ios .vkuiView__panel--next .vkuiPanel__fade{-webkit-animation:vkui-animation-ios-fade-out .6s cubic-bezier(.36,.66,.04,1) forwards;animation:vkui-animation-ios-fade-out .6s cubic-bezier(.36,.66,.04,1) forwards;-webkit-animation:vkui-animation-ios-fade-out .6s var(--ios-easing) forwards;animation:vkui-animation-ios-fade-out .6s var(--ios-easing) forwards}.vkuiView--ios .vkuiView__panel--next~.vkuiView__panel--prev .vkuiPanel__fade,.vkuiView--ios .vkuiView__panel--prev~.vkuiView__panel--next .vkuiPanel__fade{display:none}.vkuiView--ios.vkuiView--no-motion .vkuiView__panel,.vkuiView--ios.vkuiView--no-motion .vkuiView__panel .vkuiPanel__in{-webkit-animation:none;animation:none}.vkuiView--ios .vkuiView__panel--active .vkuiPanel__fade{display:none}@-webkit-keyframes vkui-animation-ios-next-forward{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes vkui-animation-ios-next-forward{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes vkui-animation-ios-next-back{0%{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes vkui-animation-ios-next-back{0%{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@-webkit-keyframes vkui-animation-ios-prev-forward{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@keyframes vkui-animation-ios-prev-forward{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}@-webkit-keyframes vkui-animation-ios-prev-back{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes vkui-animation-ios-prev-back{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes vkui-animation-ios-fade-in{0%{opacity:0}to{opacity:.3}}@keyframes vkui-animation-ios-fade-in{0%{opacity:0}to{opacity:.3}}@-webkit-keyframes vkui-animation-ios-fade-out{0%{opacity:.3}to{opacity:0}}@keyframes vkui-animation-ios-fade-out{0%{opacity:.3}to{opacity:0}}.vkuiView{word-wrap:break-word;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--font-common);height:100%;position:relative;width:100%}.vkuiView--animated,.vkuiView--swiping-back{overflow:hidden}.vkuiView__header{position:fixed;width:100%;z-index:2}.vkuiView--animated .vkuiView__header,.vkuiView--animated .vkuiView__panel,.vkuiView--swiping-back .vkuiView__header,.vkuiView--swiping-back .vkuiView__panel{pointer-events:none}.vkuiView__panel,.vkuiView__panels{height:100%;width:100%}.vkuiView__panel{box-sizing:border-box;position:relative;z-index:1}.vkuiView__panel-in{height:100%}.vkuiView--animated .vkuiView__panel,.vkuiView--swiping-back .vkuiView__panel{left:0;overflow:hidden;position:fixed;top:0}.vkuiView__popout{z-index:100}.vkuiView__modal,.vkuiView__popout{height:100%;left:0;position:fixed;top:0;width:100%}.vkuiView__modal{z-index:99}.vkuiView__modal:empty{display:none}.vkuiView__panel--next~.vkuiView__panel--prev{-webkit-animation:vkui-animation-view-prev-back .3s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-animation-view-prev-back .3s cubic-bezier(.4,0,.2,1) forwards;-webkit-animation:vkui-animation-view-prev-back .3s var(--android-easing) forwards;animation:vkui-animation-view-prev-back .3s var(--android-easing) forwards}.vkuiView__panel--prev~.vkuiView__panel--next{-webkit-animation:vkui-animation-view-next-forward .3s cubic-bezier(.4,0,.2,1);animation:vkui-animation-view-next-forward .3s cubic-bezier(.4,0,.2,1);-webkit-animation:vkui-animation-view-next-forward .3s var(--android-easing);animation:vkui-animation-view-next-forward .3s var(--android-easing)}.vkuiView--no-motion .vkuiView__panel{-webkit-animation:none;animation:none}@-webkit-keyframes vkui-animation-view-prev-back{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(80px);transform:translateY(80px)}}@keyframes vkui-animation-view-prev-back{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(80px);transform:translateY(80px)}}@-webkit-keyframes vkui-animation-view-next-forward{0%{opacity:0;-webkit-transform:translateY(80px);transform:translateY(80px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes vkui-animation-view-next-forward{0%{opacity:0;-webkit-transform:translateY(80px);transform:translateY(80px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}