@vkontakte/vkui 5.2.4 → 5.3.0

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

@@ -1,15 +1,19 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "Snackbar", {
+    enumerable: true,
+    get: function() {
+        return Snackbar;
+    }
 });
-exports.Snackbar = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _usePlatform = require("../../hooks/usePlatform");
@@ -18,156 +22,141 @@ var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
 var _touch = require("../../lib/touch");
-var _AppRootPortal = require("../AppRoot/AppRootPortal");
-var _Button = require("../Button/Button");
-var _Touch = require("../Touch/Touch");
-var _Paragraph = require("../Typography/Paragraph/Paragraph");
-var _Subhead = require("../Typography/Subhead/Subhead");
-var _excluded = ["children", "layout", "action", "before", "after", "duration", "onActionClick", "onClose", "mode", "className", "subtitle"];
-/**
- * @see https://vkcom.github.io/VKUI/#/Snackbar
- */
-var Snackbar = function Snackbar(_ref) {
-  var children = _ref.children,
-    _ref$layout = _ref.layout,
-    layoutProps = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
-    action = _ref.action,
-    before = _ref.before,
-    after = _ref.after,
-    _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? 4000 : _ref$duration,
-    onActionClick = _ref.onActionClick,
-    onClose = _ref.onClose,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
-    className = _ref.className,
-    subtitle = _ref.subtitle,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var platform = (0, _usePlatform.usePlatform)();
-  var _useAdaptivityWithJSM = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)(),
-    viewWidth = _useAdaptivityWithJSM.viewWidth;
-  var isDesktop = viewWidth >= _adaptivity.ViewWidth.SMALL_TABLET;
-  var _useWaitTransitionFin = (0, _useWaitTransitionFinish.useWaitTransitionFinish)(),
-    waitTransitionFinish = _useWaitTransitionFin.waitTransitionFinish;
-  var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    closing = _React$useState2[0],
-    setClosing = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    touched = _React$useState4[0],
-    setTouched = _React$useState4[1];
-  var shiftXPercentRef = React.useRef(0);
-  var shiftXCurrentRef = React.useRef(0);
-  var bodyElRef = React.useRef(null);
-  var innerElRef = React.useRef(null);
-  var animationFrameRef = React.useRef(null);
-  var transitionFinishDurationFallback = platform === _platform.Platform.IOS ? 320 : 400;
-  var close = function close() {
-    setClosing(true);
-    waitTransitionFinish(innerElRef.current, function () {
-      onClose();
-    }, transitionFinishDurationFallback);
-  };
-  var handleActionClick = function handleActionClick(e) {
-    close();
-    if (action && typeof onActionClick === 'function') {
-      onActionClick(e);
-    }
-  };
-  var closeTimeout = (0, _useTimeout.useTimeout)(close, duration);
-  var setBodyTransform = function setBodyTransform(percent) {
-    if (animationFrameRef.current !== null) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-    animationFrameRef.current = requestAnimationFrame(function () {
-      if (bodyElRef.current) {
-        bodyElRef.current.style.transform = "translate3d(".concat(percent, "%, 0, 0)");
-      }
-    });
-  };
-  var onTouchStart = closeTimeout.clear;
-  var onTouchMoveX = function onTouchMoveX(event) {
-    var _bodyElRef$current$of, _bodyElRef$current;
-    var shiftX = event.shiftX,
-      originalEvent = event.originalEvent;
-    originalEvent.preventDefault();
-    if (!touched) {
-      setTouched(true);
-    }
-    shiftXPercentRef.current = shiftX / ((_bodyElRef$current$of = (_bodyElRef$current = bodyElRef.current) === null || _bodyElRef$current === void 0 ? void 0 : _bodyElRef$current.offsetWidth) !== null && _bodyElRef$current$of !== void 0 ? _bodyElRef$current$of : 0) * 100;
-    shiftXCurrentRef.current = (0, _touch.rubber)(shiftXPercentRef.current, 72, 1.2, platform !== _platform.Platform.IOS);
-    setBodyTransform(shiftXCurrentRef.current);
-  };
-  var onTouchEnd = function onTouchEnd(e) {
-    var callback;
-    if (touched) {
-      var shiftXCurrent = shiftXCurrentRef.current;
-      var expectTranslateY = shiftXCurrent / e.duration * 240 * 0.6;
-      shiftXCurrent = shiftXCurrent + expectTranslateY;
-      if (isDesktop && shiftXCurrent <= -50) {
-        closeTimeout.clear();
-        waitTransitionFinish(bodyElRef.current, function () {
-          onClose();
-        }, transitionFinishDurationFallback);
-        setBodyTransform(-120);
-      } else if (!isDesktop && shiftXCurrent >= 50) {
-        closeTimeout.clear();
-        waitTransitionFinish(bodyElRef.current, function () {
-          onClose();
+var _appRootPortal = require("../AppRoot/AppRootPortal");
+var _button = require("../Button/Button");
+var _touch1 = require("../Touch/Touch");
+var _paragraph = require("../Typography/Paragraph/Paragraph");
+var _subhead = require("../Typography/Subhead/Subhead");
+var Snackbar = function(_param) {
+    var children = _param.children, tmp = _param.layout, layoutProps = tmp === void 0 ? "horizontal" : tmp, action = _param.action, before = _param.before, after = _param.after, _param_duration = _param.duration, duration = _param_duration === void 0 ? 4000 : _param_duration, onActionClick = _param.onActionClick, onClose = _param.onClose, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, className = _param.className, subtitle = _param.subtitle, restProps = _objectWithoutProperties(_param, [
+        "children",
+        "layout",
+        "action",
+        "before",
+        "after",
+        "duration",
+        "onActionClick",
+        "onClose",
+        "mode",
+        "className",
+        "subtitle"
+    ]);
+    var platform = (0, _usePlatform.usePlatform)();
+    var viewWidth = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().viewWidth;
+    var isDesktop = viewWidth >= _adaptivity.ViewWidth.SMALL_TABLET;
+    var waitTransitionFinish = (0, _useWaitTransitionFinish.useWaitTransitionFinish)().waitTransitionFinish;
+    var _React_useState = _slicedToArray(_react.useState(false), 2), closing = _React_useState[0], setClosing = _React_useState[1];
+    var _React_useState1 = _slicedToArray(_react.useState(false), 2), touched = _React_useState1[0], setTouched = _React_useState1[1];
+    var shiftXPercentRef = _react.useRef(0);
+    var shiftXCurrentRef = _react.useRef(0);
+    var bodyElRef = _react.useRef(null);
+    var innerElRef = _react.useRef(null);
+    var animationFrameRef = _react.useRef(null);
+    var transitionFinishDurationFallback = platform === _platform.Platform.IOS ? 320 : 400;
+    var close = function() {
+        setClosing(true);
+        waitTransitionFinish(innerElRef.current, function() {
+            onClose();
         }, transitionFinishDurationFallback);
-        setBodyTransform(120);
-      } else {
-        callback = function callback() {
-          closeTimeout.set();
-          setBodyTransform(0);
-        };
-      }
-    } else {
-      closeTimeout.set();
-    }
-    setTouched(false);
-    callback && requestAnimationFrame(callback);
-  };
-  React.useEffect(function () {
-    return closeTimeout.set();
-  }, [closeTimeout]);
-  var layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;
-  return /*#__PURE__*/React.createElement(_AppRootPortal.AppRootPortal, null, /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    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,
-    onStart: onTouchStart,
-    onMoveX: onTouchMoveX,
-    onEnd: onTouchEnd
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSnackbar__body",
-    ref: bodyElRef
-  }, before && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSnackbar__before"
-  }, before), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSnackbar__content"
-  }, /*#__PURE__*/React.createElement(_Paragraph.Paragraph, {
-    className: "vkuiSnackbar__content-text"
-  }, children), subtitle && !action && /*#__PURE__*/React.createElement(_Subhead.Subhead, {
-    className: "vkuiSnackbar__content-subtitle"
-  }, subtitle), action && !subtitle && /*#__PURE__*/React.createElement(_Button.Button, {
-    align: "left",
-    mode: "link",
-    appearance: mode === 'dark' ? 'overlay' : 'accent',
-    size: "s",
-    className: "vkuiSnackbar__action",
-    onClick: handleActionClick
-  }, action)), after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSnackbar__after"
-  }, after)))));
-};
-exports.Snackbar = Snackbar;
-var styles = {
-  "Snackbar--layout-vertical": "vkuiSnackbar--layout-vertical",
-  "Snackbar--layout-horizontal": "vkuiSnackbar--layout-horizontal",
-  "Snackbar--mode-dark": "vkuiSnackbar--mode-dark",
-  "Snackbar--mode-default": "vkuiSnackbar--mode-default"
+    };
+    var handleActionClick = function(e) {
+        close();
+        if (action && typeof onActionClick === "function") {
+            onActionClick(e);
+        }
+    };
+    var closeTimeout = (0, _useTimeout.useTimeout)(close, duration);
+    var setBodyTransform = function(percent) {
+        if (animationFrameRef.current !== null) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = requestAnimationFrame(function() {
+            if (bodyElRef.current) {
+                bodyElRef.current.style.transform = "translate3d(".concat(percent, "%, 0, 0)");
+            }
+        });
+    };
+    var onTouchStart = closeTimeout.clear;
+    var onTouchMoveX = function(event) {
+        var _bodyElRef_current;
+        var shiftX = event.shiftX, originalEvent = event.originalEvent;
+        originalEvent.preventDefault();
+        if (!touched) {
+            setTouched(true);
+        }
+        var _bodyElRef_current_offsetWidth;
+        shiftXPercentRef.current = shiftX / ((_bodyElRef_current_offsetWidth = (_bodyElRef_current = bodyElRef.current) === null || _bodyElRef_current === void 0 ? void 0 : _bodyElRef_current.offsetWidth) !== null && _bodyElRef_current_offsetWidth !== void 0 ? _bodyElRef_current_offsetWidth : 0) * 100;
+        shiftXCurrentRef.current = (0, _touch.rubber)(shiftXPercentRef.current, 72, 1.2, platform !== _platform.Platform.IOS);
+        setBodyTransform(shiftXCurrentRef.current);
+    };
+    var onTouchEnd = function(e) {
+        var callback;
+        if (touched) {
+            var shiftXCurrent = shiftXCurrentRef.current;
+            var expectTranslateY = shiftXCurrent / e.duration * 240 * 0.6;
+            shiftXCurrent = shiftXCurrent + expectTranslateY;
+            if (isDesktop && shiftXCurrent <= -50) {
+                closeTimeout.clear();
+                waitTransitionFinish(bodyElRef.current, function() {
+                    onClose();
+                }, transitionFinishDurationFallback);
+                setBodyTransform(-120);
+            } else if (!isDesktop && shiftXCurrent >= 50) {
+                closeTimeout.clear();
+                waitTransitionFinish(bodyElRef.current, function() {
+                    onClose();
+                }, transitionFinishDurationFallback);
+                setBodyTransform(120);
+            } else {
+                callback = function() {
+                    closeTimeout.set();
+                    setBodyTransform(0);
+                };
+            }
+        } else {
+            closeTimeout.set();
+        }
+        setTouched(false);
+        callback && requestAnimationFrame(callback);
+    };
+    _react.useEffect(function() {
+        return closeTimeout.set();
+    }, [
+        closeTimeout
+    ]);
+    var layout = after || isDesktop || subtitle ? "vertical" : layoutProps;
+    return /*#__PURE__*/ _react.createElement(_appRootPortal.AppRootPortal, null, /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        className: (0, _vkjs.classNames)("vkuiSnackbar", platform === _platform.Platform.IOS && "vkuiSnackbar--ios", {
+            vertical: "vkuiSnackbar--layout-vertical",
+            horizontal: "vkuiSnackbar--layout-horizontal"
+        }[layout], mode === "dark" && "vkuiSnackbar--mode-dark", closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop", className)
+    }), /*#__PURE__*/ _react.createElement(_touch1.Touch, {
+        className: "vkuiSnackbar__in",
+        getRootRef: innerElRef,
+        onStart: onTouchStart,
+        onMoveX: onTouchMoveX,
+        onEnd: onTouchEnd
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSnackbar__body",
+        ref: bodyElRef
+    }, before && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSnackbar__before"
+    }, before), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSnackbar__content"
+    }, /*#__PURE__*/ _react.createElement(_paragraph.Paragraph, {
+        className: "vkuiSnackbar__content-text"
+    }, children), subtitle && !action && /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
+        className: "vkuiSnackbar__content-subtitle"
+    }, subtitle), action && !subtitle && /*#__PURE__*/ _react.createElement(_button.Button, {
+        align: "left",
+        mode: "link",
+        appearance: mode === "dark" ? "overlay" : "accent",
+        size: "s",
+        className: "vkuiSnackbar__action",
+        onClick: handleActionClick
+    }, action)), after && /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiSnackbar__after"
+    }, after)))));
 };
+
 //# sourceMappingURL=Snackbar.js.map

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","classNames","styles"],"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\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   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\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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"}
+{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { rubber } from '../../lib/touch';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\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   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Контент в правой части, может быть иконкой 24x24\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          {\n            vertical: styles['Snackbar--layout-vertical'],\n            horizontal: styles['Snackbar--layout-horizontal'],\n          }[layout],\n          mode === 'dark' && styles['Snackbar--mode-dark'],\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"],"names":["Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","usePlatform","viewWidth","useAdaptivityWithJSMediaQueries","isDesktop","ViewWidth","SMALL_TABLET","waitTransitionFinish","useWaitTransitionFinish","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","AppRootPortal","div","classNames","vertical","horizontal","Touch","getRootRef","onStart","onMoveX","onEnd","ref","Paragraph","Subhead","Button","align","appearance","size","onClick"],"mappings":"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"}

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

@@ -1,35 +1,34 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "Spacing", {
+    enumerable: true,
+    get: function() {
+        return Spacing;
+    }
 });
-exports.Spacing = void 0;
-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 _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _excluded = ["size", "style", "className"];
-/**
- * @see https://vkcom.github.io/VKUI/#/Spacing
- */
-var Spacing = function Spacing(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 8 : _ref$size,
-    styleProp = _ref.style,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var style = (0, _objectSpread2.default)({
-    height: size,
-    padding: "".concat(size / 2, "px 0")
-  }, styleProp);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    "aria-hidden": true,
-    className: (0, _vkjs.classNames)(className, "vkuiSpacing"),
-    style: style
-  }));
+var Spacing = function(_param) {
+    var _param_size = _param.size, size = _param_size === void 0 ? 8 : _param_size, styleProp = _param.style, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "size",
+        "style",
+        "className"
+    ]);
+    var style = _objectSpread({
+        height: size,
+        padding: "".concat(size / 2, "px 0")
+    }, styleProp);
+    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+        "aria-hidden": true,
+        className: (0, _vkjs.classNames)(className, "vkuiSpacing"),
+        style: style
+    }));
 };
-exports.Spacing = Spacing;
+
 //# sourceMappingURL=Spacing.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"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"],"names":["Spacing","size","style","styleProp","className","restProps","height","padding","div","aria-hidden","classNames"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;2DAfU;oBACI;AAcpB,IAAMA,UAAU,iBAA2E;6BAAxEC,MAAAA,gCAAO,iBAAGC,AAAOC,mBAAPD,OAAkBE,mBAAAA,WAAcC;QAA1CJ;QAAUC;QAAkBE;;IACpD,IAAMF,QAA6B;QACjCI,QAAQL;QACRM,SAAS,AAAC,GAAW,OAATN,OAAO,GAAE;OAClBE;IAGL,qBACE,qBAACK,4CACKH;QACJI,eAAAA,IAAW;QACXL,WAAWM,IAAAA,gBAAU,EAACN;QACtBF,OAAOA;;AAGb"}

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

@@ -1,42 +1,41 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "Spinner", {
+    enumerable: true,
+    get: function() {
+        return Spinner;
+    }
 });
-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 _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
-var _excluded = ["size", "aria-label", "className"];
-/**
- * @see https://vkcom.github.io/VKUI/#/Spinner
- */
-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,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var SpinnerIcon = {
-    small: _icons.Icon16Spinner,
-    regular: _icons.Icon24Spinner,
-    medium: _icons.Icon32Spinner,
-    large: _icons.Icon44Spinner
-  }[size];
-  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
-    role: "status",
-    "aria-label": ariaLabel
-  }, restProps, {
-    className: (0, _vkjs.classNames)("vkuiSpinner", className)
-  }), /*#__PURE__*/React.createElement(SpinnerIcon, {
-    className: "vkuiSpinner__self"
-  }));
+var Spinner = /*#__PURE__*/ _react.memo(function(_param) {
+    var _param_size = _param.size, size = _param_size === void 0 ? "regular" : _param_size, tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Загружается..." : tmp, className = _param.className, restProps = _objectWithoutProperties(_param, [
+        "size",
+        "aria-label",
+        "className"
+    ]);
+    var SpinnerIcon = {
+        small: _icons.Icon16Spinner,
+        regular: _icons.Icon24Spinner,
+        medium: _icons.Icon32Spinner,
+        large: _icons.Icon44Spinner
+    }[size];
+    return /*#__PURE__*/ _react.createElement("span", _objectSpreadProps(_objectSpread({
+        role: "status",
+        "aria-label": ariaLabel
+    }, restProps), {
+        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","classNames","displayName"],"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\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;AAA6C;AAO7C;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"}
+{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\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"],"names":["Spinner","React","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","Icon16Spinner","regular","Icon24Spinner","medium","Icon32Spinner","large","Icon44Spinner","span","role","aria-label","classNames","displayName"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;2DAZU;qBACoD;oBAChD;AAUpB,IAAMA,wBAAUC,OAAMC,IAAI,CAC/B,iBAKoB;6BAJlBC,MAAAA,gCAAO,yBACOC,aAAd,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,mBAAAA,WACGC;QAHHH;QACA;QACAE;;IAGA,IAAME,cAAc;QAClBC,OAAOC,oBAAa;QACpBC,SAASC,oBAAa;QACtBC,QAAQC,oBAAa;QACrBC,OAAOC,oBAAa;IACtB,CAAC,CAACZ,KAAK;IAEP,qBACE,qBAACa;QACCC,MAAK;QACLC,cAAYd;OACRE;QACJD,WAAWc,IAAAA,gBAAU,iBAAoBd;sBAEzC,qBAACE;QAAYF,SAAS;;AAG5B;AAGFL,QAAQoB,WAAW,GAAG"}