@vkontakte/vkui 5.0.3 → 5.1.2

package/dist/cjs/components/Snackbar/Snackbar.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _Touch = require("../Touch/Touch");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../lib/platform");
 var _touch = require("../../lib/touch");
 var _adaptivity = require("../../lib/adaptivity");
@@ -30,7 +30,7 @@ var _excluded = ["children", "layout", "action", "before", "after", "duration",
 var Snackbar = function Snackbar(_ref) {
   var children = _ref.children,
     _ref$layout = _ref.layout,
-    layoutProps = _ref$layout === void 0 ? "horizontal" : _ref$layout,
+    layoutProps = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
     action = _ref.action,
     before = _ref.before,
     after = _ref.after,
@@ -39,7 +39,7 @@ var Snackbar = function Snackbar(_ref) {
     onActionClick = _ref.onActionClick,
     onClose = _ref.onClose,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "default" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
     className = _ref.className,
     subtitle = _ref.subtitle,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -71,7 +71,7 @@ var Snackbar = function Snackbar(_ref) {
   };
   var handleActionClick = function handleActionClick(e) {
     close();
-    if (action && typeof onActionClick === "function") {
+    if (action && typeof onActionClick === 'function') {
       onActionClick(e);
     }
   };
@@ -132,9 +132,9 @@ var Snackbar = function Snackbar(_ref) {
   React.useEffect(function () {
     return closeTimeout.set();
   }, [closeTimeout]);
-  var layout = after || isDesktop || subtitle ? "vertical" : layoutProps;
+  var layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;
   return /*#__PURE__*/React.createElement(_AppRootPortal.AppRootPortal, null, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiSnackbar", platform === _platform.Platform.IOS && "vkuiSnackbar--ios", styles["Snackbar--layout-".concat(layout)], styles["Snackbar--mode-".concat(mode)], closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className)
+    className: (0, _vkjs.classNames)("vkuiSnackbar", platform === _platform.Platform.IOS && "vkuiSnackbar--ios", styles["Snackbar--layout-".concat(layout)], styles["Snackbar--mode-".concat(mode)], closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className)
   }), /*#__PURE__*/React.createElement(_Touch.Touch, {
     className: "vkuiSnackbar__in",
     getRootRef: innerElRef,
@@ -155,7 +155,7 @@ var Snackbar = function Snackbar(_ref) {
   }, subtitle), action && !subtitle && /*#__PURE__*/React.createElement(_Button.Button, {
     align: "left",
     mode: "link",
-    appearance: mode === "dark" ? "overlay" : "accent",
+    appearance: mode === 'dark' ? 'overlay' : 'accent',
     size: "s",
     className: "vkuiSnackbar__action",
     onClick: handleActionClick

package/dist/cjs/components/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","names":["Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","viewWidth","isDesktop","ViewWidth","SMALL_TABLET","useWaitTransitionFinish","waitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","classNamesString","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { rubber } from \"../../lib/touch\";\nimport { ViewWidth } from \"../../lib/adaptivity\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { Button } from \"../Button/Button\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { useWaitTransitionFinish } from \"../../hooks/useWaitTransitionFinish\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivityWithJSMediaQueries } from \"../../hooks/useAdaptivityWithJSMediaQueries\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport styles from \"./Snackbar.module.css\";\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: \"vertical\" | \"horizontal\";\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: \"default\" | \"dark\";\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = \"horizontal\",\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = \"default\",\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<\n    typeof requestAnimationFrame\n  > | null>(null);\n\n  const transitionFinishDurationFallback =\n    platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === \"function\") {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current =\n      (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(\n      shiftXPercentRef.current,\n      72,\n      1.2,\n      platform !== Platform.IOS\n    );\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? \"vertical\" : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNamesString(\n          styles[\"Snackbar\"],\n          platform === Platform.IOS && styles[\"Snackbar--ios\"],\n          styles[`Snackbar--layout-${layout}`],\n          styles[`Snackbar--mode-${mode}`],\n          closing && styles[\"Snackbar--closing\"],\n          touched && styles[\"Snackbar--touched\"],\n          isDesktop && styles[\"Snackbar--desktop\"],\n          className\n        )}\n      >\n        <Touch\n          className={styles[\"Snackbar__in\"]}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles[\"Snackbar__body\"]} ref={bodyElRef}>\n            {before && (\n              <div className={styles[\"Snackbar__before\"]}>{before}</div>\n            )}\n\n            <div className={styles[\"Snackbar__content\"]}>\n              <Paragraph className={styles[\"Snackbar__content-text\"]}>\n                {children}\n              </Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles[\"Snackbar__content-subtitle\"]}>\n                  {subtitle}\n                </Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === \"dark\" ? \"overlay\" : \"accent\"}\n                  size=\"s\"\n                  className={styles[\"Snackbar__action\"]}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles[\"Snackbar__after\"]}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Snackbar.js","names":["Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","viewWidth","isDesktop","ViewWidth","SMALL_TABLET","useWaitTransitionFinish","waitTransitionFinish","React","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","Platform","IOS","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","classNames","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Button } from '../Button/Button';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Название кнопки действия в уведомлении\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Будет вызвано при клике на кнопку действия\n   */\n  onActionClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * Цветная иконка 24x24 пикселя\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть `<Avatar size={32} />`\n   */\n  after?: React.ReactNode;\n  /**\n   * Варианты расположения кнопки действия\n   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`\n   */\n  layout?: 'vertical' | 'horizontal';\n  /**\n   * Время в миллисекундах, через которое плашка скроется\n   */\n  duration?: number;\n  /**\n   * Обработчик закрытия уведомления\n   */\n  onClose: () => void;\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n  children,\n  layout: layoutProps = 'horizontal',\n  action,\n  before,\n  after,\n  duration = 4000,\n  onActionClick,\n  onClose,\n  mode = 'default',\n  className,\n  subtitle,\n  ...restProps\n}: SnackbarProps) => {\n  const platform = usePlatform();\n  const { viewWidth } = useAdaptivityWithJSMediaQueries();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n\n  const shiftXPercentRef = React.useRef<number>(0);\n  const shiftXCurrentRef = React.useRef<number>(0);\n\n  const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n  const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n  const transitionFinishDurationFallback = platform === Platform.IOS ? 320 : 400;\n\n  const close = () => {\n    setClosing(true);\n    waitTransitionFinish(\n      innerElRef.current,\n      () => {\n        onClose();\n      },\n      transitionFinishDurationFallback,\n    );\n  };\n\n  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {\n    close();\n\n    if (action && typeof onActionClick === 'function') {\n      onActionClick(e);\n    }\n  };\n\n  const closeTimeout = useTimeout(close, duration);\n\n  const setBodyTransform = (percent: number) => {\n    if (animationFrameRef.current !== null) {\n      cancelAnimationFrame(animationFrameRef.current);\n    }\n    animationFrameRef.current = requestAnimationFrame(() => {\n      if (bodyElRef.current) {\n        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n      }\n    });\n  };\n\n  const onTouchStart = closeTimeout.clear;\n\n  const onTouchMoveX = (event: TouchEvent) => {\n    const { shiftX, originalEvent } = event;\n    originalEvent.preventDefault();\n\n    if (!touched) {\n      setTouched(true);\n    }\n\n    shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== Platform.IOS);\n\n    setBodyTransform(shiftXCurrentRef.current);\n  };\n\n  const onTouchEnd = (e: TouchEvent) => {\n    let callback: VoidFunction | undefined;\n\n    if (touched) {\n      let shiftXCurrent = shiftXCurrentRef.current;\n      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n      shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n      if (isDesktop && shiftXCurrent <= -50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(-120);\n      } else if (!isDesktop && shiftXCurrent >= 50) {\n        closeTimeout.clear();\n        waitTransitionFinish(\n          bodyElRef.current,\n          () => {\n            onClose();\n          },\n          transitionFinishDurationFallback,\n        );\n        setBodyTransform(120);\n      } else {\n        callback = () => {\n          closeTimeout.set();\n          setBodyTransform(0);\n        };\n      }\n    } else {\n      closeTimeout.set();\n    }\n\n    setTouched(false);\n    callback && requestAnimationFrame(callback);\n  };\n\n  React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n  return (\n    <AppRootPortal>\n      <div\n        {...restProps}\n        className={classNames(\n          styles['Snackbar'],\n          platform === Platform.IOS && styles['Snackbar--ios'],\n          styles[`Snackbar--layout-${layout}`],\n          styles[`Snackbar--mode-${mode}`],\n          closing && styles['Snackbar--closing'],\n          touched && styles['Snackbar--touched'],\n          isDesktop && styles['Snackbar--desktop'],\n          className,\n        )}\n      >\n        <Touch\n          className={styles['Snackbar__in']}\n          getRootRef={innerElRef}\n          onStart={onTouchStart}\n          onMoveX={onTouchMoveX}\n          onEnd={onTouchEnd}\n        >\n          <div className={styles['Snackbar__body']} ref={bodyElRef}>\n            {before && <div className={styles['Snackbar__before']}>{before}</div>}\n\n            <div className={styles['Snackbar__content']}>\n              <Paragraph className={styles['Snackbar__content-text']}>{children}</Paragraph>\n              {subtitle && !action && (\n                <Subhead className={styles['Snackbar__content-subtitle']}>{subtitle}</Subhead>\n              )}\n\n              {action && !subtitle && (\n                <Button\n                  align=\"left\"\n                  mode=\"link\"\n                  appearance={mode === 'dark' ? 'overlay' : 'accent'}\n                  size=\"s\"\n                  className={styles['Snackbar__action']}\n                  onClick={handleActionClick}\n                >\n                  {action}\n                </Button>\n              )}\n            </div>\n\n            {after && <div className={styles['Snackbar__after']}>{after}</div>}\n          </div>\n        </Touch>\n      </div>\n    </AppRootPortal>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/Spacing/Spacing.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Высота спэйсинга

package/dist/cjs/components/Spacing/Spacing.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["size", "style", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
@@ -22,11 +22,12 @@ var Spacing = function Spacing(_ref) {
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var style = (0, _objectSpread2.default)({
-    height: size
+    height: size,
+    padding: "".concat(size / 2, "px 0")
   }, styleProp);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    "aria-hidden": "true",
-    className: (0, _classNames.classNamesString)(className, "vkuiSpacing"),
+    "aria-hidden": true,
+    className: (0, _vkjs.classNames)(className, "vkuiSpacing"),
     style: style
   }));
 };

package/dist/cjs/components/Spacing/Spacing.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacing.js","names":["Spacing","size","styleProp","style","className","restProps","height","classNamesString"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./Spacing.module.css\";\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({\n  size = 8,\n  style: styleProp,\n  className,\n  ...restProps\n}: SpacingProps) => {\n  const style = {\n    height: size,\n    ...styleProp,\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-hidden=\"true\"\n      className={classNamesString(className, styles[\"Spacing\"])}\n      style={style}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAAwD;AAWxD;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAKA;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IACDC,SAAS,QAAhBC,KAAK;IACLC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMF,KAAK;IACTG,MAAM,EAAEL;EAAI,GACTC,SAAS,CACb;EAED,oBACE,sDACMG,SAAS;IACb,eAAY,MAAM;IAClB,SAAS,EAAE,IAAAE,4BAAgB,EAACH,SAAS,gBAAqB;IAC1D,KAAK,EAAED;EAAM,GACb;AAEN,CAAC;AAAC"}
+{"version":3,"file":"Spacing.js","names":["Spacing","size","styleProp","style","className","restProps","height","padding","classNames"],"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-hidden\n      className={classNames(className, styles['Spacing'])}\n      style={style}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAA6C;AAW7C;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO,OAA8E;EAAA,qBAAxEC,IAAI;IAAJA,IAAI,0BAAG,CAAC;IAASC,SAAS,QAAhBC,KAAK;IAAaC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAC3E,IAAMF,KAA0B;IAC9BG,MAAM,EAAEL,IAAI;IACZM,OAAO,YAAKN,IAAI,GAAG,CAAC;EAAM,GACvBC,SAAS,CACb;EAED,oBACE,sDACMG,SAAS;IACb,mBAAW;IACX,SAAS,EAAE,IAAAG,gBAAU,EAACJ,SAAS,gBAAqB;IACpD,KAAK,EAAED;EAAM,GACb;AAEN,CAAC;AAAC"}

package/dist/cjs/components/Spinner/Spinner.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
-    size?: "small" | "regular" | "medium" | "large";
+    size?: 'small' | 'regular' | 'medium' | 'large';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner

package/dist/cjs/components/Spinner/Spinner.js

@@ -9,7 +9,7 @@ exports.Spinner = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _icons = require("@vkontakte/icons");
 var _excluded = ["size", "aria-label", "className"];
 /**
@@ -17,9 +17,9 @@ var _excluded = ["size", "aria-label", "className"];
  */
 var Spinner = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "regular" : _ref$size,
-    _ref$ariaLabel = _ref["aria-label"],
-    ariaLabel = _ref$ariaLabel === void 0 ? "Загружается..." : _ref$ariaLabel,
+    size = _ref$size === void 0 ? 'regular' : _ref$size,
+    _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Загружается...' : _ref$ariaLabel,
     className = _ref.className,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var SpinnerIcon = {
@@ -32,11 +32,11 @@ var Spinner = /*#__PURE__*/React.memo(function (_ref) {
     role: "status",
     "aria-label": ariaLabel
   }, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiSpinner", className)
+    className: (0, _vkjs.classNames)("vkuiSpinner", className)
   }), /*#__PURE__*/React.createElement(SpinnerIcon, {
     className: "vkuiSpinner__self"
   }));
 });
 exports.Spinner = Spinner;
-Spinner.displayName = "Spinner";
+Spinner.displayName = 'Spinner';
 //# sourceMappingURL=Spinner.js.map

package/dist/cjs/components/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","names":["Spinner","React","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","classNamesString","displayName"],"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport {\n  Icon24Spinner,\n  Icon32Spinner,\n  Icon44Spinner,\n  Icon16Spinner,\n} from \"@vkontakte/icons\";\nimport styles from \"./Spinner.module.css\";\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: \"small\" | \"regular\" | \"medium\" | \"large\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = \"regular\",\n    \"aria-label\": ariaLabel = \"Загружается...\",\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNamesString(styles[\"Spinner\"], className)}\n      >\n        <SpinnerIcon className={styles[\"Spinner__self\"]} />\n      </span>\n    );\n  }\n);\n\nSpinner.displayName = \"Spinner\";\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAK0B;AAO1B;AACA;AACA;AACO,IAAMA,OAAO,gBAAGC,KAAK,CAACC,IAAI,CAC/B,gBAKoB;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,sBAChB,YAAY;IAAEC,SAAS,+BAAG,gBAAgB;IAC1CC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG;IAClBC,KAAK,EAAEC,oBAAa;IACpBC,OAAO,EAAEC,oBAAa;IACtBC,MAAM,EAAEC,oBAAa;IACrBC,KAAK,EAAEC;EACT,CAAC,CAACZ,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAE,IAAAU,4BAAgB,iBAAoBX,SAAS;EAAE,iBAE1D,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAAC;AAEFL,OAAO,CAACiB,WAAW,GAAG,SAAS"}
+{"version":3,"file":"Spinner.js","names":["Spinner","React","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","classNames","displayName"],"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Icon24Spinner, Icon32Spinner, Icon44Spinner, Icon16Spinner } from '@vkontakte/icons';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'small' | 'regular' | 'medium' | 'large';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner = React.memo(\n  ({\n    size = 'regular',\n    'aria-label': ariaLabel = 'Загружается...',\n    className,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = {\n      small: Icon16Spinner,\n      regular: Icon24Spinner,\n      medium: Icon32Spinner,\n      large: Icon44Spinner,\n    }[size];\n\n    return (\n      <span\n        role=\"status\"\n        aria-label={ariaLabel}\n        {...restProps}\n        className={classNames(styles['Spinner'], className)}\n      >\n        <SpinnerIcon className={styles['Spinner__self']} />\n      </span>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA8F;AAO9F;AACA;AACA;AACO,IAAMA,OAAO,gBAAGC,KAAK,CAACC,IAAI,CAC/B,gBAKoB;EAAA,qBAJlBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,sBAChB,YAAY;IAAEC,SAAS,+BAAG,gBAAgB;IAC1CC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG;IAClBC,KAAK,EAAEC,oBAAa;IACpBC,OAAO,EAAEC,oBAAa;IACtBC,MAAM,EAAEC,oBAAa;IACrBC,KAAK,EAAEC;EACT,CAAC,CAACZ,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAE,IAAAU,gBAAU,iBAAoBX,SAAS;EAAE,iBAEpD,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAAC;AAEFL,OAAO,CAACiB,WAAW,GAAG,SAAS"}

package/dist/cjs/components/SplitCol/SplitCol.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface SplitColContextProps {
     colRef: React.RefObject<HTMLDivElement> | null;
     animate: boolean;

package/dist/cjs/components/SplitCol/SplitCol.js

@@ -11,13 +11,14 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _getSizeXClassName = require("../../helpers/getSizeXClassName");
 var _getViewWidthClassName = require("../../helpers/getViewWidthClassName");
 var _useAdaptivity3 = require("../../hooks/useAdaptivity");
 var _adaptivity = require("../../lib/adaptivity");
 var _useObjectMemo = require("../../hooks/useObjectMemo");
 var _useMediaQueries = require("../../hooks/useMediaQueries");
+var _matchMedia = require("../../lib/matchMedia");
 var _excluded = ["children", "width", "maxWidth", "minWidth", "spaced", "animate", "fixed", "style", "autoSpaced", "stretchedOnMobile", "className"];
 function useTransitionAnimate(animateProp) {
   var _useAdaptivity = (0, _useAdaptivity3.useAdaptivity)(),
@@ -42,9 +43,9 @@ function useTransitionAnimate(animateProp) {
       return setAnimate(!mediaQueries.smallTabletPlus.matches);
     };
     listener();
-    mediaQueries.smallTabletPlus.addEventListener("change", listener);
+    (0, _matchMedia.matchMediaListAddListener)(mediaQueries.smallTabletPlus, listener);
     return function () {
-      mediaQueries.smallTabletPlus.removeEventListener("change", listener);
+      (0, _matchMedia.matchMediaListRemoveListener)(mediaQueries.smallTabletPlus, listener);
     };
   }, [animateProp, viewWidth, mediaQueries]);
   return animate;
@@ -90,7 +91,7 @@ var SplitCol = function SplitCol(props) {
       minWidth: minWidth
     }),
     ref: baseRef,
-    className: (0, _classNames.classNamesString)("vkuiSplitCol", (0, _getSizeXClassName.getSizeXClassName)("vkuiSplitCol", sizeX), (0, _getViewWidthClassName.getViewWidthClassName)("vkuiSplitCol", viewWidth), spaced && "vkuiSplitCol--spaced", spaced === undefined && "vkuiSplitCol--spaced-none", autoSpaced && "vkuiSplitCol--spaced-auto", fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
+    className: (0, _vkjs.classNames)("vkuiSplitCol", (0, _getSizeXClassName.getSizeXClassName)("vkuiSplitCol", sizeX), (0, _getViewWidthClassName.getViewWidthClassName)("vkuiSplitCol", viewWidth), spaced && "vkuiSplitCol--spaced", spaced === undefined && "vkuiSplitCol--spaced-none", autoSpaced && "vkuiSplitCol--spaced-auto", fixed && "vkuiSplitCol--fixed", stretchedOnMobile && "vkuiSplitCol--stretched-on-mobile", className)
   }), /*#__PURE__*/React.createElement(SplitColContext.Provider, {
     value: contextValue
   }, fixed ? /*#__PURE__*/React.createElement("div", {

package/dist/cjs/components/SplitCol/SplitCol.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitCol.js","names":["useTransitionAnimate","animateProp","useAdaptivity","viewWidth","React","useState","Boolean","animate","setAnimate","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","smallTabletPlus","matches","addEventListener","removeEventListener","SplitColContext","createContext","colRef","useSplitCol","useContext","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","sizeX","contextValue","useObjectMemo","classNamesString","getSizeXClassName","getViewWidthClassName"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getSizeXClassName } from \"../../helpers/getSizeXClassName\";\nimport { getViewWidthClassName } from \"../../helpers/getViewWidthClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { ViewWidth } from \"../../lib/adaptivity\";\nimport { useObjectMemo } from \"../../hooks/useObjectMemo\";\nimport { useMediaQueries } from \"../../hooks/useMediaQueries\";\nimport styles from \"./SplitCol.module.css\";\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    mediaQueries.smallTabletPlus.addEventListener(\"change\", listener);\n    return () => {\n      mediaQueries.smallTabletPlus.removeEventListener(\"change\", listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth, sizeX } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNamesString(\n        styles[\"SplitCol\"],\n        getSizeXClassName(styles[\"SplitCol\"], sizeX),\n        getViewWidthClassName(styles[\"SplitCol\"], viewWidth),\n        spaced && styles[\"SplitCol--spaced\"],\n        spaced === undefined && styles[\"SplitCol--spaced-none\"],\n        autoSpaced && styles[\"SplitCol--spaced-auto\"],\n        fixed && styles[\"SplitCol--fixed\"],\n        stretchedOnMobile && styles[\"SplitCol--stretched-on-mobile\"],\n        className\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? (\n          <div className={styles[\"SplitCol__fixedInner\"]}>{children}</div>\n        ) : (\n          children\n        )}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SplitCol.js","names":["useTransitionAnimate","animateProp","useAdaptivity","viewWidth","React","useState","Boolean","animate","setAnimate","mediaQueries","useMediaQueries","useEffect","undefined","ViewWidth","TABLET","listener","smallTabletPlus","matches","matchMediaListAddListener","matchMediaListRemoveListener","SplitColContext","createContext","colRef","useSplitCol","useContext","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","sizeX","contextValue","useObjectMemo","classNames","getSizeXClassName","getViewWidthClassName"],"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { getViewWidthClassName } from '../../helpers/getViewWidthClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport styles from './SplitCol.module.css';\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext = React.createContext<SplitColContextProps>({\n  colRef: null,\n  animate: true,\n});\n\nexport const useSplitCol = () => React.useContext(SplitColContext);\n\nexport interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth, sizeX } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        getSizeXClassName(styles['SplitCol'], sizeX),\n        getViewWidthClassName(styles['SplitCol'], viewWidth),\n        spaced && styles['SplitCol--spaced'],\n        spaced === undefined && styles['SplitCol--spaced-none'],\n        autoSpaced && styles['SplitCol--spaced-auto'],\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/SplitLayout/SplitLayout.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRef, HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
 export interface SplitLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.

package/dist/cjs/components/SplitLayout/SplitLayout.js

@@ -9,7 +9,7 @@ exports.SplitLayout = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _platform = require("../../lib/platform");
 var _PopoutRoot = require("../PopoutRoot/PopoutRoot");
 var _usePlatform = require("../../hooks/usePlatform");
@@ -28,13 +28,13 @@ var SplitLayout = function SplitLayout(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   return /*#__PURE__*/React.createElement(_PopoutRoot.PopoutRoot, {
-    className: (0, _classNames.classNamesString)("vkuiSplitLayout", platform === _platform.Platform.IOS && "vkuiSplitLayout--ios"),
+    className: (0, _vkjs.classNames)("vkuiSplitLayout", platform === _platform.Platform.IOS && "vkuiSplitLayout--ios"),
     popout: popout,
     modal: modal,
     getRootRef: getRootRef
   }, header, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     ref: getRef,
-    className: (0, _classNames.classNamesString)("vkuiSplitLayout__inner", !!header && "vkuiSplitLayout__inner--header", className)
+    className: (0, _vkjs.classNames)("vkuiSplitLayout__inner", !!header && "vkuiSplitLayout__inner--header", className)
   }), children));
 };
 exports.SplitLayout = SplitLayout;

package/dist/cjs/components/SplitLayout/SplitLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.js","names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","usePlatform","classNamesString","Platform","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { PopoutRoot } from \"../PopoutRoot/PopoutRoot\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport styles from \"./SplitLayout.module.css\";\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNamesString(\n        styles[\"SplitLayout\"],\n        platform === Platform.IOS && styles[\"SplitLayout--ios\"]\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNamesString(\n          styles[\"SplitLayout__inner\"],\n          !!header && styles[\"SplitLayout__inner--header\"],\n          className\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAAsD;AAkBtD;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,sBAAU;IACT,SAAS,EAAE,IAAAC,4BAAgB,qBAEzBF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,0BAA8B,CACvD;IACF,MAAM,EAAEZ,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,UAAU,EAAEG;EAAW,GAEtBF,MAAM,eACP,sDACMK,SAAS;IACb,GAAG,EAAEF,MAAO;IACZ,SAAS,EAAE,IAAAK,4BAAgB,4BAEzB,CAAC,CAACR,MAAM,oCAAwC,EAChDI,SAAS;EACT,IAEDH,QAAQ,CACL,CACK;AAEjB,CAAC;AAAC"}
+{"version":3,"file":"SplitLayout.js","names":["SplitLayout","popout","modal","header","children","getRootRef","getRef","className","restProps","platform","usePlatform","classNames","Platform","IOS"],"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { PopoutRoot } from '../PopoutRoot/PopoutRoot';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  popout,\n  modal,\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  ...restProps\n}: SplitLayoutProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PopoutRoot\n      className={classNames(\n        styles['SplitLayout'],\n        platform === Platform.IOS && styles['SplitLayout--ios'],\n      )}\n      popout={popout}\n      modal={modal}\n      getRootRef={getRootRef}\n    >\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles['SplitLayout__inner'],\n          !!header && styles['SplitLayout__inner--header'],\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </PopoutRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAAsD;AAkBtD;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAW,OASA;EAAA,IARtBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,oBACE,oBAAC,sBAAU;IACT,SAAS,EAAE,IAAAC,gBAAU,qBAEnBF,QAAQ,KAAKG,kBAAQ,CAACC,GAAG,0BAA8B,CACvD;IACF,MAAM,EAAEZ,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,UAAU,EAAEG;EAAW,GAEtBF,MAAM,eACP,sDACMK,SAAS;IACb,GAAG,EAAEF,MAAO;IACZ,SAAS,EAAE,IAAAK,gBAAU,4BAEnB,CAAC,CAACR,MAAM,oCAAwC,EAChDI,SAAS;EACT,IAEDH,QAAQ,CACL,CACK;AAEjB,CAAC;AAAC"}

package/dist/cjs/components/SubnavigationBar/SubnavigationBar.d.ts

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HorizontalScrollProps } from "../HorizontalScroll/HorizontalScroll";
-export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement>, Pick<HorizontalScrollProps, "showArrows" | "getScrollToLeft" | "getScrollToRight" | "scrollAnimationDuration"> {
-    mode?: "fixed" | "overflow";
+import * as React from 'react';
+import { HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
+export interface SubnavigationBarProps extends React.HTMLAttributes<HTMLDivElement>, Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
+    mode?: 'fixed' | 'overflow';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationBar

package/dist/cjs/components/SubnavigationBar/SubnavigationBar.js

@@ -9,7 +9,7 @@ exports.SubnavigationBar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _HorizontalScroll = require("../HorizontalScroll/HorizontalScroll");
 var _excluded = ["mode", "children", "showArrows", "getScrollToLeft", "getScrollToRight", "scrollAnimationDuration", "className"];
 var defaultScrollToLeft = function defaultScrollToLeft(x) {
@@ -24,7 +24,7 @@ var defaultScrollToRight = function defaultScrollToRight(x) {
  */
 var SubnavigationBar = function SubnavigationBar(_ref) {
   var _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? "overflow" : _ref$mode,
+    mode = _ref$mode === void 0 ? 'overflow' : _ref$mode,
     children = _ref.children,
     _ref$showArrows = _ref.showArrows,
     showArrows = _ref$showArrows === void 0 ? true : _ref$showArrows,
@@ -37,8 +37,8 @@ var SubnavigationBar = function SubnavigationBar(_ref) {
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var ScrollWrapper;
   var scrollWrapperProps = {};
-  if (mode === "fixed") {
-    ScrollWrapper = "div";
+  if (mode === 'fixed') {
+    ScrollWrapper = 'div';
   } else {
     ScrollWrapper = _HorizontalScroll.HorizontalScroll;
     scrollWrapperProps = {
@@ -49,7 +49,7 @@ var SubnavigationBar = function SubnavigationBar(_ref) {
     };
   }
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _classNames.classNamesString)("vkuiSubnavigationBar", styles["SubnavigationBar--mode-".concat(mode)], className)
+    className: (0, _vkjs.classNames)("vkuiSubnavigationBar", styles["SubnavigationBar--mode-".concat(mode)], className)
   }), /*#__PURE__*/React.createElement(ScrollWrapper, (0, _extends2.default)({
     className: "vkuiSubnavigationBar__in"
   }, scrollWrapperProps), /*#__PURE__*/React.createElement("div", {

package/dist/cjs/components/SubnavigationBar/SubnavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubnavigationBar.js","names":["defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","classNamesString","styles"],"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from \"../HorizontalScroll/HorizontalScroll\";\nimport styles from \"./SubnavigationBar.module.css\";\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      | \"showArrows\"\n      | \"getScrollToLeft\"\n      | \"getScrollToRight\"\n      | \"scrollAnimationDuration\"\n    > {\n  mode?: \"fixed\" | \"overflow\";\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = \"overflow\",\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === \"fixed\") {\n    ScrollWrapper = \"div\";\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\n        styles[\"SubnavigationBar\"],\n        styles[`SubnavigationBar--mode-${mode}`],\n        className\n      )}\n    >\n      <ScrollWrapper\n        className={styles[\"SubnavigationBar__in\"]}\n        {...scrollWrapperProps}\n      >\n        <div className={styles[\"SubnavigationBar__scrollIn\"]}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAI8C;AAe9C,IAAMA,mBAA0C,GAAG,SAA7CA,mBAA0C,CAAIC,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;AAEjE,IAAMC,oBAA2C,GAAG,SAA9CA,oBAA2C,CAAID,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;;AAElE;AACA;AACA;AACO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgB,OASA;EAAA,qBAR3BC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IAAA,uBACRC,UAAU;IAAVA,UAAU,gCAAG,IAAI;IAAA,4BACjBC,eAAe;IAAfA,eAAe,qCAAGP,mBAAmB;IAAA,6BACrCQ,gBAAgB;IAAhBA,gBAAgB,sCAAGN,oBAAoB;IACvCO,uBAAuB,QAAvBA,uBAAuB;IACvBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,aAAgC;EACpC,IAAIC,kBAAkB,GAAG,CAAC,CAAC;EAE3B,IAAIT,IAAI,KAAK,OAAO,EAAE;IACpBQ,aAAa,GAAG,KAAK;EACvB,CAAC,MAAM;IACLA,aAAa,GAAGE,kCAAgB;IAChCD,kBAAkB,GAAG;MACnBP,UAAU,EAAVA,UAAU;MACVC,eAAe,EAAfA,eAAe;MACfC,gBAAgB,EAAhBA,gBAAgB;MAChBC,uBAAuB,EAAvBA;IACF,CAAC;EACH;EAEA,oBACE,sDACME,SAAS;IACb,SAAS,EAAE,IAAAI,4BAAgB,0BAEzBC,MAAM,kCAA2BZ,IAAI,EAAG,EACxCM,SAAS;EACT,iBAEF,oBAAC,aAAa;IACZ,SAAS;EAAiC,GACtCG,kBAAkB,gBAEtB;IAAK,SAAS;EAAuC,GAAER,QAAQ,CAAO,CACxD,CACZ;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"SubnavigationBar.js","names":["defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","HorizontalScroll","classNames","styles"],"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SubnavigationBar'],\n        styles[`SubnavigationBar--mode-${mode}`],\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <div className={styles['SubnavigationBar__scrollIn']}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAI8C;AAY9C,IAAMA,mBAA0C,GAAG,SAA7CA,mBAA0C,CAAIC,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;AAEjE,IAAMC,oBAA2C,GAAG,SAA9CA,oBAA2C,CAAID,CAAC;EAAA,OAAKA,CAAC,GAAG,GAAG;AAAA;;AAElE;AACA;AACA;AACO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgB,OASA;EAAA,qBAR3BC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACjBC,QAAQ,QAARA,QAAQ;IAAA,uBACRC,UAAU;IAAVA,UAAU,gCAAG,IAAI;IAAA,4BACjBC,eAAe;IAAfA,eAAe,qCAAGP,mBAAmB;IAAA,6BACrCQ,gBAAgB;IAAhBA,gBAAgB,sCAAGN,oBAAoB;IACvCO,uBAAuB,QAAvBA,uBAAuB;IACvBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAIC,aAAgC;EACpC,IAAIC,kBAAkB,GAAG,CAAC,CAAC;EAE3B,IAAIT,IAAI,KAAK,OAAO,EAAE;IACpBQ,aAAa,GAAG,KAAK;EACvB,CAAC,MAAM;IACLA,aAAa,GAAGE,kCAAgB;IAChCD,kBAAkB,GAAG;MACnBP,UAAU,EAAVA,UAAU;MACVC,eAAe,EAAfA,eAAe;MACfC,gBAAgB,EAAhBA,gBAAgB;MAChBC,uBAAuB,EAAvBA;IACF,CAAC;EACH;EAEA,oBACE,sDACME,SAAS;IACb,SAAS,EAAE,IAAAI,gBAAU,0BAEnBC,MAAM,kCAA2BZ,IAAI,EAAG,EACxCM,SAAS;EACT,iBAEF,oBAAC,aAAa;IAAC,SAAS;EAAiC,GAAKG,kBAAkB,gBAC9E;IAAK,SAAS;EAAuC,GAAER,QAAQ,CAAO,CACxD,CACZ;AAEV,CAAC;AAAC;AAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/SubnavigationButton/SubnavigationButton.d.ts

@@ -1,13 +1,13 @@
-import * as React from "react";
-import { TappableProps } from "../Tappable/Tappable";
-export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
-    mode?: "primary" | "outline" | "tertiary";
-    size?: "s" | "m" | "l";
+import * as React from 'react';
+import { TappableProps } from '../Tappable/Tappable';
+export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
+    mode?: 'primary' | 'outline' | 'tertiary';
+    size?: 's' | 'm' | 'l';
     selected?: boolean;
     /**
      * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode="fixed" />`
      */
-    textLevel?: "1" | "2" | "3";
+    textLevel?: '1' | '2' | '3';
     /**
      * Рекомендуется использовать только иконки с размером 24
      */

package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-var _classNames = require("../../lib/classNames");
+var _vkjs = require("@vkontakte/vkjs");
 var _utils = require("../../lib/utils");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 var _Tappable = require("../Tappable/Tappable");
@@ -22,11 +22,11 @@ var _excluded = ["textLevel"],
 var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref) {
   var textLevel = _ref.textLevel,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  if (textLevel === "1") {
+  if (textLevel === '1') {
     return /*#__PURE__*/React.createElement(_Subhead.Subhead, restProps);
   }
   return /*#__PURE__*/React.createElement(_Caption.Caption, (0, _extends2.default)({
-    level: textLevel === "2" ? "1" : "2"
+    level: textLevel === '2' ? '1' : '2'
   }, restProps));
 };
 
@@ -35,12 +35,12 @@ var SubnavigationButtonTypography = function SubnavigationButtonTypography(_ref)
  */
 var SubnavigationButton = function SubnavigationButton(_ref2) {
   var _ref2$mode = _ref2.mode,
-    mode = _ref2$mode === void 0 ? "primary" : _ref2$mode,
+    mode = _ref2$mode === void 0 ? 'primary' : _ref2$mode,
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? "m" : _ref2$size,
+    size = _ref2$size === void 0 ? 'm' : _ref2$size,
     selected = _ref2.selected,
     _ref2$textLevel = _ref2.textLevel,
-    textLevel = _ref2$textLevel === void 0 ? "1" : _ref2$textLevel,
+    textLevel = _ref2$textLevel === void 0 ? '1' : _ref2$textLevel,
     before = _ref2.before,
     after = _ref2.after,
     expandable = _ref2.expandable,
@@ -52,7 +52,7 @@ var SubnavigationButton = function SubnavigationButton(_ref2) {
   return /*#__PURE__*/React.createElement(_Tappable.Tappable, (0, _extends2.default)({}, restProps, {
     hasActive: false,
     focusVisibleMode: "outside",
-    className: (0, _classNames.classNamesString)("vkuiSubnavigationButton", styles["SubnavigationButton--size-".concat(size)], styles["SubnavigationButton--mode-".concat(mode)], selected && "vkuiSubnavigationButton--selected", (0, _getSizeYClassName.getSizeYClassName)("vkuiSubnavigationButton", sizeY), className),
+    className: (0, _vkjs.classNames)("vkuiSubnavigationButton", styles["SubnavigationButton--size-".concat(size)], styles["SubnavigationButton--mode-".concat(mode)], selected && "vkuiSubnavigationButton--selected", (0, _getSizeYClassName.getSizeYClassName)("vkuiSubnavigationButton", sizeY), className),
     "aria-label": (0, _utils.getTitleFromChildren)(children)
   }), /*#__PURE__*/React.createElement("span", {
     className: "vkuiSubnavigationButton__in"

package/dist/cjs/components/SubnavigationButton/SubnavigationButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubnavigationButton.js","names":["SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","useAdaptivity","sizeY","classNamesString","styles","getSizeYClassName","getTitleFromChildren"],"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { HasComponent, HasChildren } from \"../../types\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { getTitleFromChildren } from \"../../lib/utils\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TappableProps, Tappable } from \"../Tappable/Tappable\";\nimport { Icon16Dropdown } from \"@vkontakte/icons\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport styles from \"./SubnavigationButton.module.css\";\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, \"size\"> {\n  mode?: \"primary\" | \"outline\" | \"tertiary\";\n  size?: \"s\" | \"m\" | \"l\";\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: \"1\" | \"2\" | \"3\";\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  \"textLevel\" | \"className\"\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === \"1\") {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === \"2\" ? \"1\" : \"2\"} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = \"primary\",\n  size = \"m\",\n  selected,\n  textLevel = \"1\",\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNamesString(\n        styles[\"SubnavigationButton\"],\n        styles[`SubnavigationButton--size-${size}`],\n        styles[`SubnavigationButton--mode-${mode}`],\n        selected && styles[\"SubnavigationButton--selected\"],\n        getSizeYClassName(styles[\"SubnavigationButton\"], sizeY),\n        className\n      )}\n      aria-label={getTitleFromChildren(children)}\n    >\n      <span className={styles[\"SubnavigationButton__in\"]}>\n        {before && (\n          <span className={styles[\"SubnavigationButton__before\"]}>\n            {before}\n          </span>\n        )}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles[\"SubnavigationButton__label\"]}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && (\n          <span className={styles[\"SubnavigationButton__after\"]}>{after}</span>\n        )}\n        {expandable && (\n          <Icon16Dropdown\n            className={styles[\"SubnavigationButton__expandableIcon\"]}\n          />\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAwD;EAAA;AA6BxD,IAAMA,6BAA6B,GAAG,SAAhCA,6BAA6B,OAGO;EAAA,IAFxCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAID,SAAS,KAAK,GAAG,EAAE;IACrB,oBAAO,oBAAC,gBAAO,EAAKC,SAAS,CAAI;EACnC;EAEA,oBAAO,oBAAC,gBAAO;IAAC,KAAK,EAAED,SAAS,KAAK,GAAG,GAAG,GAAG,GAAG;EAAI,GAAKC,SAAS,EAAI;AACzE,CAAC;;AAED;AACA;AACA;AACO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,QAWA;EAAA,uBAV9BC,IAAI;IAAJA,IAAI,2BAAG,SAAS;IAAA,mBAChBC,IAAI;IAAJA,IAAI,2BAAG,GAAG;IACVC,QAAQ,SAARA,QAAQ;IAAA,wBACRL,SAAS;IAATA,SAAS,gCAAG,GAAG;IACfM,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,UAAU,SAAVA,UAAU;IACVC,QAAQ,SAARA,QAAQ;IACRC,SAAS,SAATA,SAAS;IACNT,SAAS;EAEZ,qBAAkB,IAAAU,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,kBAAQ,6BACHX,SAAS;IACb,SAAS,EAAE,KAAM;IACjB,gBAAgB,EAAC,SAAS;IAC1B,SAAS,EAAE,IAAAY,4BAAgB,6BAEzBC,MAAM,qCAA8BV,IAAI,EAAG,EAC3CU,MAAM,qCAA8BX,IAAI,EAAG,EAC3CE,QAAQ,uCAA2C,EACnD,IAAAU,oCAAiB,6BAAgCH,KAAK,CAAC,EACvDF,SAAS,CACT;IACF,cAAY,IAAAM,2BAAoB,EAACP,QAAQ;EAAE,iBAE3C;IAAM,SAAS;EAAoC,GAChDH,MAAM,iBACL;IAAM,SAAS;EAAwC,GACpDA,MAAM,CAEV,eACD,oBAAC,6BAA6B;IAC5B,SAAS,EAAEN,SAAU;IACrB,SAAS,kCAAuC;IAChD,SAAS,EAAC;EAAM,GAEfS,QAAQ,CACqB,EAC/BF,KAAK,iBACJ;IAAM,SAAS;EAAuC,GAAEA,KAAK,CAC9D,EACAC,UAAU,iBACT,oBAAC,qBAAc;IACb,SAAS;EAAgD,EAE5D,CACI,CACE;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"SubnavigationButton.js","names":["SubnavigationButtonTypography","textLevel","restProps","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","useAdaptivity","sizeY","classNames","styles","getSizeYClassName","getTitleFromChildren"],"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { HasComponent, HasChildren } from '../../types';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { TappableProps, Tappable } from '../Tappable/Tappable';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"fixed\" />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  expandable?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        styles[`SubnavigationButton--size-${size}`],\n        styles[`SubnavigationButton--mode-${mode}`],\n        selected && styles['SubnavigationButton--selected'],\n        getSizeYClassName(styles['SubnavigationButton'], sizeY),\n        className,\n      )}\n      aria-label={getTitleFromChildren(children)}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAwD;EAAA;AA6BxD,IAAMA,6BAA6B,GAAG,SAAhCA,6BAA6B,OAGO;EAAA,IAFxCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAID,SAAS,KAAK,GAAG,EAAE;IACrB,oBAAO,oBAAC,gBAAO,EAAKC,SAAS,CAAI;EACnC;EAEA,oBAAO,oBAAC,gBAAO;IAAC,KAAK,EAAED,SAAS,KAAK,GAAG,GAAG,GAAG,GAAG;EAAI,GAAKC,SAAS,EAAI;AACzE,CAAC;;AAED;AACA;AACA;AACO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,QAWA;EAAA,uBAV9BC,IAAI;IAAJA,IAAI,2BAAG,SAAS;IAAA,mBAChBC,IAAI;IAAJA,IAAI,2BAAG,GAAG;IACVC,QAAQ,SAARA,QAAQ;IAAA,wBACRL,SAAS;IAATA,SAAS,gCAAG,GAAG;IACfM,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLC,UAAU,SAAVA,UAAU;IACVC,QAAQ,SAARA,QAAQ;IACRC,SAAS,SAATA,SAAS;IACNT,SAAS;EAEZ,qBAAkB,IAAAU,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EAEb,oBACE,oBAAC,kBAAQ,6BACHX,SAAS;IACb,SAAS,EAAE,KAAM;IACjB,gBAAgB,EAAC,SAAS;IAC1B,SAAS,EAAE,IAAAY,gBAAU,6BAEnBC,MAAM,qCAA8BV,IAAI,EAAG,EAC3CU,MAAM,qCAA8BX,IAAI,EAAG,EAC3CE,QAAQ,uCAA2C,EACnD,IAAAU,oCAAiB,6BAAgCH,KAAK,CAAC,EACvDF,SAAS,CACT;IACF,cAAY,IAAAM,2BAAoB,EAACP,QAAQ;EAAE,iBAE3C;IAAM,SAAS;EAAoC,GAChDH,MAAM,iBAAI;IAAM,SAAS;EAAwC,GAAEA,MAAM,CAAQ,eAClF,oBAAC,6BAA6B;IAC5B,SAAS,EAAEN,SAAU;IACrB,SAAS,kCAAuC;IAChD,SAAS,EAAC;EAAM,GAEfS,QAAQ,CACqB,EAC/BF,KAAK,iBAAI;IAAM,SAAS;EAAuC,GAAEA,KAAK,CAAQ,EAC9EC,UAAU,iBAAI,oBAAC,qBAAc;IAAC,SAAS;EAAgD,EAAG,CACtF,CACE;AAEf,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { HasRootRef } from "../../types";
-import { VisuallyHiddenInputProps } from "../VisuallyHiddenInput/VisuallyHiddenInput";
+import { HasRootRef } from '../../types';
+import { VisuallyHiddenInputProps } from '../VisuallyHiddenInput/VisuallyHiddenInput';
 export interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {
 }
 /**