@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/components/Snackbar/Snackbar.js

@@ -1,164 +1,153 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "layout", "action", "before", "after", "duration", "onActionClick", "onClose", "mode", "className", "subtitle"];
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
-import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
-import { ViewWidth } from '../../lib/adaptivity';
-import { Platform } from '../../lib/platform';
-import { rubber } from '../../lib/touch';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { Button } from '../Button/Button';
-import { Touch } from '../Touch/Touch';
-import { Paragraph } from '../Typography/Paragraph/Paragraph';
-import { Subhead } from '../Typography/Subhead/Subhead';
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useTimeout } from "../../hooks/useTimeout";
+import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
+import { ViewWidth } from "../../lib/adaptivity";
+import { Platform } from "../../lib/platform";
+import { rubber } from "../../lib/touch";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { Button } from "../Button/Button";
+import { Touch } from "../Touch/Touch";
+import { Paragraph } from "../Typography/Paragraph/Paragraph";
+import { Subhead } from "../Typography/Subhead/Subhead";
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
- */
-export 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 = _objectWithoutProperties(_ref, _excluded);
-  var platform = usePlatform();
-  var _useAdaptivityWithJSM = useAdaptivityWithJSMediaQueries(),
-    viewWidth = _useAdaptivityWithJSM.viewWidth;
-  var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-  var _useWaitTransitionFin = useWaitTransitionFinish(),
-    waitTransitionFinish = _useWaitTransitionFin.waitTransitionFinish;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    closing = _React$useState2[0],
-    setClosing = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_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.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 = 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 = rubber(shiftXPercentRef.current, 72, 1.2, 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();
+ */ export 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 = _object_without_properties(_param, [
+        "children",
+        "layout",
+        "action",
+        "before",
+        "after",
+        "duration",
+        "onActionClick",
+        "onClose",
+        "mode",
+        "className",
+        "subtitle"
+    ]);
+    var platform = usePlatform();
+    var viewWidth = useAdaptivityWithJSMediaQueries().viewWidth;
+    var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
+    var waitTransitionFinish = useWaitTransitionFinish().waitTransitionFinish;
+    var _React_useState = _sliced_to_array(React.useState(false), 2), closing = _React_useState[0], setClosing = _React_useState[1];
+    var _React_useState1 = _sliced_to_array(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.IOS ? 320 : 400;
+    var close = function() {
+        setClosing(true);
+        waitTransitionFinish(innerElRef.current, function() {
+            onClose();
         }, transitionFinishDurationFallback);
-        setBodyTransform(-120);
-      } else if (!isDesktop && shiftXCurrent >= 50) {
-        closeTimeout.clear();
-        waitTransitionFinish(bodyElRef.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, null, /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNames("vkuiSnackbar", 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, {
-    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, {
-    className: "vkuiSnackbar__content-text"
-  }, children), subtitle && !action && /*#__PURE__*/React.createElement(Subhead, {
-    className: "vkuiSnackbar__content-subtitle"
-  }, subtitle), action && !subtitle && /*#__PURE__*/React.createElement(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)))));
-};
-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 = 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 = rubber(shiftXPercentRef.current, 72, 1.2, 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, null, /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+        className: classNames("vkuiSnackbar", 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(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, {
+        className: "vkuiSnackbar__content-text"
+    }, children), subtitle && !action && /*#__PURE__*/ React.createElement(Subhead, {
+        className: "vkuiSnackbar__content-subtitle"
+    }, subtitle), action && !subtitle && /*#__PURE__*/ React.createElement(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/components/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","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":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","useTimeout","useWaitTransitionFinish","ViewWidth","Platform","rubber","AppRootPortal","Button","Touch","Paragraph","Subhead","Snackbar","children","layoutProps","layout","action","before","after","duration","onActionClick","onClose","mode","className","subtitle","restProps","platform","viewWidth","isDesktop","SMALL_TABLET","waitTransitionFinish","useState","closing","setClosing","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","IOS","close","current","handleActionClick","e","closeTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","style","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","div","vertical","horizontal","getRootRef","onStart","onMoveX","onEnd","ref","align","appearance","size","onClick"],"mappings":"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"}

package/dist/components/Spacing/Spacing.js

@@ -1,26 +1,25 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "style", "className"];
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
- */
-export 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 = _objectWithoutProperties(_ref, _excluded);
-  var style = _objectSpread({
-    height: size,
-    padding: "".concat(size / 2, "px 0")
-  }, styleProp);
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    "aria-hidden": true,
-    className: classNames(className, "vkuiSpacing"),
-    style: style
-  }));
+ */ export var Spacing = function(_param) {
+    var _param_size = _param.size, size = _param_size === void 0 ? 8 : _param_size, styleProp = _param.style, className = _param.className, restProps = _object_without_properties(_param, [
+        "size",
+        "style",
+        "className"
+    ]);
+    var style = _object_spread({
+        height: size,
+        padding: "".concat(size / 2, "px 0")
+    }, styleProp);
+    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
+        "aria-hidden": true,
+        className: classNames(className, "vkuiSpacing"),
+        style: style
+    }));
 };
+
 //# sourceMappingURL=Spacing.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spacing.js","names":["React","classNames","Spacing","size","styleProp","style","className","restProps","height","padding"],"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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAW5C;AACA;AACA;AACA,OAAO,IAAMC,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,wCACMG,SAAS;IACb,mBAAW;IACX,SAAS,EAAEN,UAAU,CAACK,SAAS,gBAAqB;IACpD,KAAK,EAAED;EAAM,GACb;AAEN,CAAC"}
+{"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":["React","classNames","Spacing","size","style","styleProp","className","restProps","height","padding","div","aria-hidden"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAW7C;;CAEC,GACD,OAAO,IAAMC,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,oBAACK,+CACKH;QACJI,eAAAA,IAAW;QACXL,WAAWL,WAAWK;QACtBF,OAAOA;;AAGb,EAAE"}

package/dist/components/Spinner/Spinner.js

@@ -1,33 +1,32 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "aria-label", "className"];
-import * as React from 'react';
-import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';
-import { classNames } from '@vkontakte/vkjs';
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from "@vkontakte/icons";
+import { classNames } from "@vkontakte/vkjs";
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
- */
-export 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 = _objectWithoutProperties(_ref, _excluded);
-  var SpinnerIcon = {
-    small: Icon16Spinner,
-    regular: Icon24Spinner,
-    medium: Icon32Spinner,
-    large: Icon44Spinner
-  }[size];
-  return /*#__PURE__*/React.createElement("span", _extends({
-    role: "status",
-    "aria-label": ariaLabel
-  }, restProps, {
-    className: classNames("vkuiSpinner", className)
-  }), /*#__PURE__*/React.createElement(SpinnerIcon, {
-    className: "vkuiSpinner__self"
-  }));
+ */ export 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 = _object_without_properties(_param, [
+        "size",
+        "aria-label",
+        "className"
+    ]);
+    var SpinnerIcon = {
+        small: Icon16Spinner,
+        regular: Icon24Spinner,
+        medium: Icon32Spinner,
+        large: Icon44Spinner
+    }[size];
+    return /*#__PURE__*/ React.createElement("span", _object_spread_props(_object_spread({
+        role: "status",
+        "aria-label": ariaLabel
+    }, restProps), {
+        className: classNames("vkuiSpinner", className)
+    }), /*#__PURE__*/ React.createElement(SpinnerIcon, {
+        className: "vkuiSpinner__self"
+    }));
 });
-Spinner.displayName = 'Spinner';
+Spinner.displayName = "Spinner";
+
 //# sourceMappingURL=Spinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","Spinner","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,kBAAkB;AAC7F,SAASC,UAAU,QAAQ,iBAAiB;AAO5C;AACA;AACA;AACA,OAAO,IAAMC,OAAO,gBAAGN,KAAK,CAACO,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,EAAEZ,aAAa;IACpBa,OAAO,EAAEZ,aAAa;IACtBa,MAAM,EAAEZ,aAAa;IACrBa,KAAK,EAAEZ;EACT,CAAC,CAACI,IAAI,CAAC;EAEP,oBACE;IACE,IAAI,EAAC,QAAQ;IACb,cAAYC;EAAU,GAClBE,SAAS;IACb,SAAS,EAAEN,UAAU,gBAAoBK,SAAS;EAAE,iBAEpD,oBAAC,WAAW;IAAC,SAAS;EAA0B,EAAG,CAC9C;AAEX,CAAC,CACF;AAEDJ,OAAO,CAACW,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":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","Spinner","memo","size","ariaLabel","className","restProps","SpinnerIcon","small","regular","medium","large","span","role","aria-label","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,QAAQ,kBAAkB;AAO7C;;CAEC,GACD,OAAO,IAAMC,wBAAUN,MAAMO,IAAI,CAC/B,iBAKoB;6BAJlBC,MAAAA,gCAAO,yBACOC,aAAd,eAAcA,YAAAA,iBAAY,mBAAZA,KACdC,mBAAAA,WACGC;QAHHH;QACA;QACAE;;IAGA,IAAME,cAAc;QAClBC,OAAOZ;QACPa,SAASZ;QACTa,QAAQZ;QACRa,OAAOZ;IACT,CAAC,CAACI,KAAK;IAEP,qBACE,oBAACS;QACCC,MAAK;QACLC,cAAYV;OACRE;QACJD,WAAWL,0BAA8BK;sBAEzC,oBAACE;QAAYF,SAAS;;AAG5B,GACA;AAEFJ,QAAQc,WAAW,GAAG"}