@vkontakte/vkui 6.5.2 → 6.6.0

package/dist/vkui.js.tmp

@@ -4076,7 +4076,6 @@ function children_instanceof(left, right) {
     }
 }
 
-
 var childToString = function(child) {
     if (typeof child === 'undefined' || child === null || typeof child === 'boolean') {
         return '';
@@ -4107,7 +4106,6 @@ var children_getTextFromChildren = function(children) {
 
 ;// CONCATENATED MODULE: ./src/lib/accessibility.ts
 
-
 var FOCUSABLE_ELEMENTS_LIST = [
     'a[href]',
     'area[href]',
@@ -5301,42 +5299,6 @@ var ScrollContext_ElementScrollController = function(param) {
         value: scrollController
     }, children);
 };
-/**
- * Вызывает функцию effect, до блокировки прокрутки
- * @param effect функция, которая может возвращать функцию очистки
- * @param deps effect обновится только при изменении значений в списке.
- */ var useScrollLockEffect = function(effect, deps) {
-    var destructorRef = React.useRef(noop);
-    var _useScroll = ScrollContext_useScroll(), isScrollLock = _useScroll.isScrollLock, beforeScrollLockFnSetRef = _useScroll.beforeScrollLockFnSetRef;
-    // Изменяем effectCallback только при изменении deps
-    var effectCallback = React.useCallback(function() {
-        destructorRef.current = effect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-    // Добавляем effectCallback в список функций, которые необходимо вызвать
-    // до блокировки
-    React.useEffect(function() {
-        var beforeSet = beforeScrollLockFnSetRef === null || beforeScrollLockFnSetRef === void 0 ? void 0 : beforeScrollLockFnSetRef.current;
-        if (!beforeSet) {
-            return noop;
-        }
-        beforeSet.add(effectCallback);
-        return function() {
-            beforeSet.delete(effectCallback);
-        };
-    }, [
-        beforeScrollLockFnSetRef,
-        effectCallback
-    ]);
-    // Вызываем сбрасывающую функцию, после отключения блокировки
-    React.useEffect(function() {
-        if (!isScrollLock && destructorRef.current) {
-            destructorRef.current();
-        }
-    }, [
-        isScrollLock
-    ]);
-};
 var ScrollContext_useScrollLock = function() {
     var enabled = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
     var _useScroll = ScrollContext_useScroll(), enableScrollLock = _useScroll.enableScrollLock, disableScrollLock = _useScroll.disableScrollLock, isScrollLock = _useScroll.isScrollLock;
@@ -5358,7 +5320,6 @@ function isRefObject_type_of(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-
 var isRefObject_isRefObject = function(refObject) {
     return (typeof refObject === "undefined" ? "undefined" : isRefObject_type_of(refObject)) === 'object' && refObject !== null && refObject.hasOwnProperty('current');
 };
@@ -8506,7 +8467,6 @@ function useStableCallback_useStableCallback(fn) {
 
 
 
-
 /**
  * Хук вызывает переданный коллбэк при изменении размеров элемента.
  */ function useResizeObserver_useResizeObserver(ref, callback) {
@@ -8617,8 +8577,8 @@ var OnboardingTooltipContainer_OnboardingTooltipContainer = /*#__PURE__*/ react.
         "fixed",
         "Component"
     ]);
-    props[OnboardingTooltipContainer_onboardingTooltipContainerAttr] = fixed ? 'fixed' : 'true';
-    return /*#__PURE__*/ react.createElement(Component, _object_spread_props(OnboardingTooltipContainer_object_spread({}, props), {
+    var dataProps = OnboardingTooltipContainer_define_property({}, OnboardingTooltipContainer_onboardingTooltipContainerAttr, fixed ? 'fixed' : 'true');
+    return /*#__PURE__*/ react.createElement(Component, _object_spread_props(OnboardingTooltipContainer_object_spread({}, dataProps, props), {
         ref: ref
     }));
 });
@@ -10004,7 +9964,9 @@ var sizeToNumber = function(size) {
         onError: handleImageError
     }, utils_getFetchPriorityProp(fetchPriority))), fallbackIcon && /*#__PURE__*/ react.createElement("div", {
         className: "vkuiImageBase__fallback"
-    }, fallbackIcon), children, !noBorder && /*#__PURE__*/ react.createElement("div", {
+    }, fallbackIcon), children && /*#__PURE__*/ react.createElement("div", {
+        className: "vkuiImageBase__children"
+    }, children), !noBorder && /*#__PURE__*/ react.createElement("div", {
         "aria-hidden": true,
         className: "vkuiImageBase__border"
     })));
@@ -11011,10 +10973,11 @@ function Spinner_unsupported_iterable_to_array(o, minLen) {
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
  */ var Spinner_Spinner = /*#__PURE__*/ react.memo(function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? 'regular' : _param_size, _param_children = _param.children, children = _param_children === void 0 ? 'Загружается...' : _param_children, _param_disableAnimation = _param.disableAnimation, disableAnimation = _param_disableAnimation === void 0 ? false : _param_disableAnimation, restProps = Spinner_object_without_properties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? 'regular' : _param_size, _param_children = _param.children, children = _param_children === void 0 ? 'Загружается...' : _param_children, _param_disableAnimation = _param.disableAnimation, disableAnimation = _param_disableAnimation === void 0 ? false : _param_disableAnimation, _param_noColor = _param.noColor, noColor = _param_noColor === void 0 ? false : _param_noColor, restProps = Spinner_object_without_properties(_param, [
         "size",
         "children",
-        "disableAnimation"
+        "disableAnimation",
+        "noColor"
     ]);
     var isReducedMotion = useReducedMotion();
     var SpinnerIcon = {
@@ -11060,7 +11023,7 @@ function Spinner_unsupported_iterable_to_array(o, minLen) {
         Component: "span",
         role: "status"
     }, restProps), {
-        baseClassName: "vkuiSpinner"
+        baseClassName: clsx("vkuiSpinner", noColor && "vkuiSpinner--no-color")
     }), /*#__PURE__*/ react.createElement(SpinnerIcon, null, svgAnimateElement), react_utils_hasReactNode(children) && /*#__PURE__*/ react.createElement(VisuallyHidden_VisuallyHidden, null, children));
 });
 Spinner_Spinner.displayName = 'Spinner';
@@ -11995,19 +11958,19 @@ var NavIdContext_NavPanelIdContext = /*#__PURE__*/ (/* unused pure expression or
 
 /*
  * Получает координату по оси абсцисс из touch- или mouse-события
- */ var coordX = function(e) {
-    if (e.clientX != null) {
-        return e.clientX;
+ */ var coordX = function(event) {
+    if ('clientX' in event) {
+        return event.clientX;
     }
-    return e.changedTouches && e.changedTouches[0].clientX;
+    return event.changedTouches && event.changedTouches[0].clientX;
 };
 /*
  * Получает координату по оси ординат из touch- или mouse-события
- */ var coordY = function(e) {
-    if (e.clientY != null) {
-        return e.clientY;
+ */ var coordY = function(event) {
+    if ('clientY' in event) {
+        return event.clientY;
     }
-    return e.changedTouches && e.changedTouches[0].clientY;
+    return event.changedTouches && event.changedTouches[0].clientY;
 };
 // eslint-disable-next-line no-restricted-globals
 var functions_touchEnabled = function() {
@@ -12179,6 +12142,14 @@ var MILLISECONDS = 1000;
 
 
 ;// CONCATENATED MODULE: ./src/components/Touch/Touch.tsx
+function Touch_array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function Touch_array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function Touch_define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -12192,6 +12163,33 @@ function Touch_define_property(obj, key, value) {
     }
     return obj;
 }
+function Touch_iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function Touch_non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function Touch_object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -12258,8 +12256,17 @@ function Touch_object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-
-
+function Touch_sliced_to_array(arr, i) {
+    return Touch_array_with_holes(arr) || Touch_iterable_to_array_limit(arr, i) || Touch_unsupported_iterable_to_array(arr, i) || Touch_non_iterable_rest();
+}
+function Touch_unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return Touch_array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return Touch_array_like_to_array(o, minLen);
+}
 
 
 
@@ -12267,103 +12274,15 @@ function Touch_object_without_properties_loose(source, excluded) {
 /**
  * @see https://vkcom.github.io/VKUI/#/Touch
  */ var Touch_Touch = function(_param) {
-    var onMove = function onMove(e) {
-        var _gesture_current;
-        var _ref = (_gesture_current = gesture.current) !== null && _gesture_current !== void 0 ? _gesture_current : {}, isPressed = _ref.isPressed, isX = _ref.isX, isY = _ref.isY, _ref_startX = _ref.startX, startX = _ref_startX === void 0 ? 0 : _ref_startX, _ref_startY = _ref.startY, startY = _ref_startY === void 0 ? 0 : _ref_startY;
-        if (isPressed) {
-            var _gesture_current1;
-            var clientX = coordX(e);
-            var clientY = coordY(e);
-            // смещения
-            var shiftX = clientX - startX;
-            var shiftY = clientY - startY;
-            // абсолютные значения смещений
-            var shiftXAbs = Math.abs(shiftX);
-            var shiftYAbs = Math.abs(shiftY);
-            // Если определяем мультитач, то прерываем жест
-            if (!!e.touches && e.touches.length > 1) {
-                return onEnd(e);
-            }
-            // если мы ещё не определились
-            if (!isX && !isY) {
-                var willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;
-                var willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;
-                var willBeSlidedX = willBeX && (!!onMoveX || !!_onMove);
-                var willBeSlidedY = willBeY && (!!onMoveY || !!_onMove);
-                if (gesture.current) {
-                    Object.assign(gesture.current, {
-                        isY: willBeY,
-                        isX: willBeX,
-                        isSlideX: willBeSlidedX,
-                        isSlideY: willBeSlidedY,
-                        isSlide: willBeSlidedX || willBeSlidedY
-                    });
-                }
-            }
-            if ((_gesture_current1 = gesture.current) === null || _gesture_current1 === void 0 ? void 0 : _gesture_current1.isSlide) {
-                Object.assign(gesture.current, {
-                    clientX: clientX,
-                    clientY: clientY,
-                    shiftX: shiftX,
-                    shiftY: shiftY,
-                    shiftXAbs: shiftXAbs,
-                    shiftYAbs: shiftYAbs
-                });
-                handle(e, [
-                    _onMove,
-                    gesture.current.isSlideX && onMoveX,
-                    gesture.current.isSlideY && onMoveY
-                ]);
-            }
-        }
-    };
-    var onEnd = function onEnd(e) {
-        var _gesture_current;
-        var _ref = (_gesture_current = gesture.current) !== null && _gesture_current !== void 0 ? _gesture_current : {}, isPressed = _ref.isPressed, isSlide = _ref.isSlide, isSlideX = _ref.isSlideX, isSlideY = _ref.isSlideY;
-        if (isPressed) {
-            handle(e, [
-                _onEnd,
-                isSlideY && onEndY,
-                isSlideX && onEndX
-            ]);
-        }
-        var isTouchEnabled = functions_touchEnabled();
-        if (isTouchEnabled && isSlide) {
-            // https://github.com/VKCOM/VKUI/issues/4414
-            // если тач-устройство и был зафиксирован touchmove,
-            // то событие клика не вызывается
-            didSlide.current = false;
-        } else {
-            didSlide.current = Boolean(isSlide);
-        }
-        gesture.current = {};
-        // Если это был тач-евент, симулируем отмену hover
-        if (isTouchEnabled) {
-            onLeave && onLeave(e);
-        }
-        unsubscribe();
-    };
-    var subscribe = function subscribe(el) {
-        if (el) {
-            listeners.forEach(function(l) {
-                return l.add(el);
-            });
-        }
-    };
-    var unsubscribe = function unsubscribe() {
-        listeners.forEach(function(l) {
-            return l.remove();
-        });
-    };
-    var onStart = _param.onStart, onStartX = _param.onStartX, onStartY = _param.onStartY, _onMove = _param.onMove, onMoveX = _param.onMoveX, onMoveY = _param.onMoveY, onLeave = _param.onLeave, onEnter = _param.onEnter, _onEnd = _param.onEnd, onEndX = _param.onEndX, onEndY = _param.onEndY, onClickCapture = _param.onClickCapture, usePointerHover = _param.usePointerHover, _param_slideThreshold = _param.slideThreshold, slideThreshold = _param_slideThreshold === void 0 ? 5 : _param_slideThreshold, _param_useCapture = _param.useCapture, useCapture = _param_useCapture === void 0 ? false : _param_useCapture, _param_Component = _param.Component, Component = _param_Component === void 0 ? 'div' : _param_Component, getRootRef = _param.getRootRef, _param_noSlideClick = _param.noSlideClick, noSlideClick = _param_noSlideClick === void 0 ? false : _param_noSlideClick, _param_stopPropagation = _param.stopPropagation, stopPropagation = _param_stopPropagation === void 0 ? false : _param_stopPropagation, restProps = Touch_object_without_properties(_param, [
+    var onStart = _param.onStart, onStartX = _param.onStartX, onStartY = _param.onStartY, onMove = _param.onMove, onMoveX = _param.onMoveX, onMoveY = _param.onMoveY, onEnter = _param.onEnter, onLeave = _param.onLeave, onEnd = _param.onEnd, onEndX = _param.onEndX, onEndY = _param.onEndY, onClickCapture = _param.onClickCapture, usePointerHover = _param.usePointerHover, _param_slideThreshold = _param.slideThreshold, slideThreshold = _param_slideThreshold === void 0 ? 5 : _param_slideThreshold, _param_useCapture = _param.useCapture, useCapture = _param_useCapture === void 0 ? false : _param_useCapture, _param_Component = _param.Component, Component = _param_Component === void 0 ? 'div' : _param_Component, getRootRef = _param.getRootRef, _param_noSlideClick = _param.noSlideClick, noSlideClick = _param_noSlideClick === void 0 ? false : _param_noSlideClick, _param_stopPropagation = _param.stopPropagation, stopPropagation = _param_stopPropagation === void 0 ? false : _param_stopPropagation, restProps = Touch_object_without_properties(_param, [
         "onStart",
         "onStartX",
         "onStartY",
         "onMove",
         "onMoveX",
         "onMoveY",
-        "onLeave",
         "onEnter",
+        "onLeave",
         "onEnd",
         "onEndX",
         "onEndY",
@@ -12376,90 +12295,183 @@ function Touch_object_without_properties_loose(source, excluded) {
         "noSlideClick",
         "stopPropagation"
     ]);
-    var document = dom_useDOM().document;
-    var events = react.useMemo(getSupportedEvents, []);
+    var _React_useState = Touch_sliced_to_array(react.useState(functions_touchEnabled), 1), isTouchEnabled = _React_useState[0];
+    var gestureRef = react.useRef(null);
     var didSlide = react.useRef(false);
-    var gesture = react.useRef(null);
-    var handle = function(e, handlers) {
-        stopPropagation && e.stopPropagation();
-        handlers.forEach(function(cb) {
-            var _gesture_current_startT, _gesture_current;
-            var _gesture_current_startT_getTime;
-            var duration = Date.now() - ((_gesture_current_startT_getTime = (_gesture_current = gesture.current) === null || _gesture_current === void 0 ? void 0 : (_gesture_current_startT = _gesture_current.startT) === null || _gesture_current_startT === void 0 ? void 0 : _gesture_current_startT.getTime()) !== null && _gesture_current_startT_getTime !== void 0 ? _gesture_current_startT_getTime : 0);
-            cb && cb(Touch_object_spread_props(Touch_object_spread({}, gesture.current), {
-                duration: duration,
-                originalEvent: e
-            }));
-        });
+    var disposeTargetNativeGestureEvents = react.useRef(null);
+    var cleanupTargetNativeGestureEvents = function() {
+        gestureRef.current = null;
+        if (disposeTargetNativeGestureEvents.current) {
+            disposeTargetNativeGestureEvents.current();
+            disposeTargetNativeGestureEvents.current = null;
+        }
     };
-    var enterHandler = useEventListener_useEventListener(usePointerHover ? 'pointerenter' : 'mouseenter', onEnter);
-    var leaveHandler = useEventListener_useEventListener(usePointerHover ? 'pointerleave' : 'mouseleave', onLeave);
-    var startHandler = useEventListener_useEventListener(events[0], function(e) {
-        gesture.current = initGesture(coordX(e), coordY(e));
-        handle(e, [
+    react.useEffect(function() {
+        return cleanupTargetNativeGestureEvents;
+    }, []);
+    /**
+   * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onEnd`/`onEndX`/`onEndY`.
+   */ var handleNativePointerUp = useStableCallback_useStableCallback(function(event) {
+        var gesture = gestureRef.current;
+        /* istanbul ignore if: нужно для Typescript */ if (!gesture) {
+            return;
+        }
+        if (gesture.isPressed) {
+            dispatchUserHandlers(event, gesture, [
+                onEnd,
+                onEndX,
+                onEndY
+            ], stopPropagation);
+        }
+        if (isTouchEnabled) {
+            // https://github.com/VKCOM/VKUI/issues/4414
+            // если тач-устройство и был зафиксирован touchmove,
+            // то событие клика не вызывается
+            if (gesture.isSlide) {
+                didSlide.current = false;
+            }
+            // Если это был тач-евент, симулируем отмену hover
+            if (onLeave) {
+                onLeave(event);
+            }
+        } else {
+            didSlide.current = Boolean(gesture.isSlide);
+        }
+        cleanupTargetNativeGestureEvents();
+    });
+    /**
+   * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onMove`/`onMoveX`/`onMoveY`.
+   */ var handleNativePointerMove = useStableCallback_useStableCallback(function(event) {
+        var gesture = gestureRef.current;
+        /* istanbul ignore if: нужно для Typescript */ if (!gesture) {
+            return;
+        }
+        var clientX = coordX(event);
+        var clientY = coordY(event);
+        // смещения
+        var shiftX = clientX - gesture.startX;
+        var shiftY = clientY - gesture.startY;
+        // абсолютные значения смещений
+        var shiftXAbs = Math.abs(shiftX);
+        var shiftYAbs = Math.abs(shiftY);
+        // Если определяем мультитач, то прерываем жест
+        if ('touches' in event && event.touches.length > 1) {
+            return handleNativePointerUp(event);
+        }
+        // если мы ещё не определились
+        if (!gesture.isX && !gesture.isY) {
+            var willBeX = shiftXAbs >= slideThreshold && shiftXAbs > shiftYAbs;
+            var willBeY = shiftYAbs >= slideThreshold && shiftYAbs > shiftXAbs;
+            var willBeSlidedX = willBeX && (!!onMoveX || !!onMove);
+            var willBeSlidedY = willBeY && (!!onMoveY || !!onMove);
+            gesture.isY = willBeY;
+            gesture.isX = willBeX;
+            gesture.isSlideX = willBeSlidedX;
+            gesture.isSlideY = willBeSlidedY;
+            gesture.isSlide = willBeSlidedX || willBeSlidedY;
+        }
+        if (gesture.isSlide) {
+            gesture.clientX = clientX;
+            gesture.clientY = clientY;
+            gesture.shiftX = shiftX;
+            gesture.shiftY = shiftY;
+            gesture.shiftXAbs = shiftXAbs;
+            gesture.shiftYAbs = shiftYAbs;
+            dispatchUserHandlers(event, gesture, [
+                onMove,
+                onMoveX,
+                onMoveY
+            ], stopPropagation);
+        }
+    });
+    var handlePointerDown = function(event) {
+        var nativeEvent = event.nativeEvent;
+        gestureRef.current = initGesture(coordX(nativeEvent), coordY(nativeEvent));
+        var shouldCallDirectionHandlerOnlyIsSlide = false;
+        dispatchUserHandlers(event, gestureRef.current, [
             onStart,
             onStartX,
             onStartY
-        ]);
-        // 1 line, 2 bad specs, 2 workarounds:
-        subscribe(functions_touchEnabled() ? // see: #235, #1968, https://stackoverflow.com/a/45760014
-        e.target : // if pointer goes outside container.
-        // Can be fixed by PointerEvents' setPointerCapture later
-        document);
-    }, {
-        capture: useCapture,
-        passive: false
-    });
-    var containerRef = useExternRef_useExternRef(getRootRef);
-    useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function() {
-        var el = containerRef.current;
-        if (el) {
-            enterHandler.add(el);
-            leaveHandler.add(el);
-            startHandler.add(el);
+        ], stopPropagation, shouldCallDirectionHandlerOnlyIsSlide);
+        var eventOptions = {
+            capture: useCapture,
+            passive: false
+        };
+        // FIXME: заменить touch/mouse-события ниже на pointer-события после того, как бразуеры из
+        // .browserslistrc начнут поддерживать его (см. https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#browser_compatibility).
+        if (isTouchEnabled) {
+            if (floating_ui_utils_dom_esm_isHTMLElement(event.target)) {
+                // Тач-события не всплывают, поэтому навешиваем события на целевой элемент
+                // см. #235, #1968, https://stackoverflow.com/a/45760014
+                var target = event.target;
+                target.addEventListener('touchmove', handleNativePointerMove, eventOptions);
+                target.addEventListener('touchend', handleNativePointerUp, eventOptions);
+                target.addEventListener('touchcancel', handleNativePointerUp, eventOptions);
+                disposeTargetNativeGestureEvents.current = function() {
+                    target.removeEventListener('touchmove', handleNativePointerMove, eventOptions);
+                    target.removeEventListener('touchend', handleNativePointerUp, eventOptions);
+                    target.removeEventListener('touchcancel', handleNativePointerUp, eventOptions);
+                };
+            }
+        } else {
+            // Используем события на Document, т.к. mouse-события на целевом элементе могут теряться при
+            // выходе за границы этого элемента.
+            var doc = floating_ui_utils_dom_esm_getWindow(event.currentTarget).document;
+            doc.addEventListener('mousemove', handleNativePointerMove, eventOptions);
+            doc.addEventListener('mouseup', handleNativePointerUp, eventOptions);
+            doc.addEventListener('mouseleave', handleNativePointerUp, eventOptions);
+            disposeTargetNativeGestureEvents.current = function() {
+                doc.removeEventListener('mousemove', handleNativePointerMove, eventOptions);
+                doc.removeEventListener('mouseup', handleNativePointerUp, eventOptions);
+                doc.removeEventListener('mouseleave', handleNativePointerUp, eventOptions);
+            };
         }
-    }, [
-        Component
-    ]);
-    var listenerParams = {
-        capture: useCapture,
-        passive: false
     };
-    var listeners = [
-        useEventListener_useEventListener(events[1], onMove, listenerParams),
-        useEventListener_useEventListener(events[2], onEnd, listenerParams),
-        useEventListener_useEventListener(events[3], onEnd, listenerParams)
-    ];
+    var handlePointerEnter = onEnter ? function(event) {
+        return onEnter(event.nativeEvent);
+    } : undefined;
+    var handlePointerLeave = onLeave ? function(event) {
+        return onLeave(event.nativeEvent);
+    } : undefined;
     /**
-   * Обработчик событий dragstart
    * Отменяет нативное браузерное поведение для вложенных ссылок и изображений
-   */ var onDragStart = function(e) {
-        var target = e.target;
+   */ var handleDragStart = function(event) {
+        var target = event.target;
         if (target.tagName === 'A' || target.tagName === 'IMG') {
-            e.preventDefault();
+            event.preventDefault();
         }
     };
     /**
-   * Обработчик клика по компоненту
    * Отменяет переход по вложенной ссылке, если был зафиксирован свайп
-   */ var postGestureClick = function(e) {
+   */ var handleClickCapture = function(event) {
         if (!didSlide.current) {
-            return onClickCapture && onClickCapture(e);
+            return onClickCapture && onClickCapture(event);
         }
         if (noSlideClick) {
-            e.stopPropagation();
+            event.stopPropagation();
             // https://github.com/VKCOM/VKUI/issues/1977
             // https://github.com/VKCOM/VKUI/issues/3892
-            e.preventDefault();
+            event.preventDefault();
         } else {
-            onClickCapture && onClickCapture(e);
+            onClickCapture && onClickCapture(event);
         }
         didSlide.current = false;
     };
     return /*#__PURE__*/ react.createElement(Component, Touch_object_spread_props(Touch_object_spread({}, restProps), {
-        onDragStart: onDragStart,
-        onClickCapture: postGestureClick,
-        ref: containerRef
+        ref: getRootRef,
+        onDragStart: handleDragStart,
+        onClickCapture: handleClickCapture,
+        // onEnter
+        onPointerEnter: usePointerHover ? handlePointerEnter : undefined,
+        onMouseEnter: !usePointerHover ? handlePointerEnter : undefined,
+        // onLeave
+        onPointerLeave: usePointerHover ? handlePointerLeave : undefined,
+        onMouseLeave: !usePointerHover ? handlePointerLeave : undefined,
+        // handlePointerDown
+        onTouchStartCapture: isTouchEnabled && useCapture ? handlePointerDown : undefined,
+        onTouchStart: isTouchEnabled && !useCapture ? handlePointerDown : undefined,
+        onMouseDownCapture: !isTouchEnabled && useCapture ? handlePointerDown : undefined,
+        onMouseDown: !isTouchEnabled && !useCapture ? handlePointerDown : undefined
     }));
 };
 function initGesture(startX, startY) {
@@ -12482,6 +12494,37 @@ function initGesture(startX, startY) {
         shiftYAbs: 0
     };
 }
+function dispatchUserHandlers(event, gesture, param, stopPropagation) {
+    var _param = Touch_sliced_to_array(param, 3), handler = _param[0], handlerX = _param[1], handlerY = _param[2], shouldCallDirectionHandlerOnlyIsSlide = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : true;
+    if (stopPropagation) {
+        event.stopPropagation();
+    }
+    var data = Touch_object_spread_props(Touch_object_spread({}, gesture), {
+        originalEvent: event,
+        duration: Date.now() - gesture.startT.getTime()
+    });
+    if (handler) {
+        handler(data);
+    }
+    if (handlerX) {
+        if (shouldCallDirectionHandlerOnlyIsSlide) {
+            if (gesture.isSlideX) {
+                handlerX(data);
+            }
+        } else {
+            handlerX(data);
+        }
+    }
+    if (handlerY) {
+        if (shouldCallDirectionHandlerOnlyIsSlide) {
+            if (gesture.isSlideY) {
+                handlerY(data);
+            }
+        } else {
+            handlerY(data);
+        }
+    }
+}
 
 ;// CONCATENATED MODULE: ./src/components/View/useLayoutEffectCall.tsx
 function useLayoutEffectCall_check_private_redeclaration(obj, privateCollection) {
@@ -12622,7 +12665,6 @@ var LayoutEffectCall = /*#__PURE__*/ (/* unused pure expression or super */ null
 }
 
 ;// CONCATENATED MODULE: ./src/lib/floating/functions.ts
-
 function functions_checkIsNotAutoPlacement(placement) {
     return !placement.startsWith('auto');
 }
@@ -13203,7 +13245,6 @@ function useGlobalOnClickOutside_unsupported_iterable_to_array(o, minLen) {
 }
 
 
-
 /**
  * Завязывается на document.
  *
@@ -14845,26 +14886,13 @@ var sizesClassNames = {
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */ var Spacing_Spacing = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? 'm' : _param_size, style = _param.style, className = _param.className, restProps = Spacing_object_without_properties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? 'm' : _param_size, style = _param.style, restProps = Spacing_object_without_properties(_param, [
         "size",
-        "style",
-        "className"
+        "style"
     ]);
-    if (typeof size === 'string') {
-        className = className ? classNames(sizesClassNames[size], className) : sizesClassNames[size];
-    } else {
-        if (style) {
-            // @ts-expect-error: TS7053 В React.CSSProperties не учитывается Custom Properties
-            style[CUSTOM_CSS_TOKEN_FOR_USER_GAP] = size;
-        } else {
-            // @ts-expect-error: TS2353 В React.CSSProperties не учитывается Custom Properties
-            style = Spacing_define_property({}, CUSTOM_CSS_TOKEN_FOR_USER_GAP, size);
-        }
-    }
     return /*#__PURE__*/ React.createElement(RootComponent, Spacing_object_spread_props(Spacing_object_spread({}, restProps), {
-        style: style,
-        className: className,
-        baseClassName: "vkuiSpacing"
+        style: Spacing_object_spread({}, typeof size === 'number' && Spacing_define_property({}, CUSTOM_CSS_TOKEN_FOR_USER_GAP, size), style),
+        baseClassName: classNames("vkuiSpacing", typeof size === 'string' && sizesClassNames[size])
     }));
 };
 
@@ -17356,6 +17384,7 @@ function Flex_unsupported_iterable_to_array(o, minLen) {
 
 
 
+
 var justifyClassNames = {
     'start': "vkuiFlex--justify-start",
     'end': "vkuiFlex--justify-end",
@@ -17372,7 +17401,7 @@ var alignClassNames = {
     baseline: "vkuiFlex--align-baseline"
 };
 var Flex = function(_param) {
-    var gap = _param.gap, align = _param.align, justify = _param.justify, _param_margin = _param.margin, margin = _param_margin === void 0 ? 'none' : _param_margin, _param_noWrap = _param.noWrap, noWrap = _param_noWrap === void 0 ? false : _param_noWrap, _param_direction = _param.direction, direction = _param_direction === void 0 ? 'row' : _param_direction, styleProp = _param.style, _param_reverse = _param.reverse, reverse = _param_reverse === void 0 ? false : _param_reverse, props = Flex_object_without_properties(_param, [
+    var gap = _param.gap, align = _param.align, justify = _param.justify, _param_margin = _param.margin, margin = _param_margin === void 0 ? 'none' : _param_margin, _param_noWrap = _param.noWrap, noWrap = _param_noWrap === void 0 ? false : _param_noWrap, _param_direction = _param.direction, direction = _param_direction === void 0 ? 'row' : _param_direction, styleProp = _param.style, _param_reverse = _param.reverse, reverse = _param_reverse === void 0 ? false : _param_reverse, children = _param.children, props = Flex_object_without_properties(_param, [
         "gap",
         "align",
         "justify",
@@ -17380,9 +17409,20 @@ var Flex = function(_param) {
         "noWrap",
         "direction",
         "style",
-        "reverse"
+        "reverse",
+        "children"
     ]);
-    var _calculateGap = Flex_sliced_to_array(gaps_calculateGap(gap), 2), columnGap = _calculateGap[0], rowGap = _calculateGap[1];
+    var withGaps = react.Children.count(children) > 1 && gap;
+    var _calculateGap = Flex_sliced_to_array(gaps_calculateGap(withGaps ? gap : undefined), 2), columnGap = _calculateGap[0], rowGap = _calculateGap[1];
+    return /*#__PURE__*/ React.createElement(RootComponent_RootComponent, Flex_object_spread_props(Flex_object_spread({}, props), {
+        baseClassName: clsx("vkuiFlex", !noWrap && "vkuiFlex--wrap", reverse && "vkuiFlex--reverse", direction !== 'row' && "vkuiFlex--direction-column", margin !== 'none' && "vkuiFlex--margin-auto", align && alignClassNames[align], justify && justifyClassNames[justify], withGaps && "vkuiFlex--withGaps", withGaps && getGapsPresets(rowGap, columnGap)),
+        style: withGaps ? Flex_object_spread({}, getGapsByUser(rowGap, columnGap), styleProp) : styleProp
+    }), children);
+};
+function getGapsPresets(rowGap, columnGap) {
+    return clsx(typeof rowGap === 'string' && gaps_rowGapClassNames[rowGap], typeof columnGap === 'string' && gaps_columnGapClassNames[columnGap]);
+}
+function getGapsByUser(rowGap, columnGap) {
     var style = {};
     if (typeof rowGap === 'number') {
         style['--vkui_internal--row_gap'] = "".concat(rowGap, "px");
@@ -17390,11 +17430,8 @@ var Flex = function(_param) {
     if (typeof columnGap === 'number') {
         style['--vkui_internal--column_gap'] = "".concat(columnGap, "px");
     }
-    return /*#__PURE__*/ React.createElement(RootComponent_RootComponent, Flex_object_spread_props(Flex_object_spread({}, props), {
-        baseClassName: clsx("vkuiFlex", !noWrap && "vkuiFlex--wrap", reverse && "vkuiFlex--reverse", direction !== 'row' && "vkuiFlex--direction-column", margin !== 'none' && "vkuiFlex--margin-auto", typeof columnGap === 'string' && gaps_columnGapClassNames[columnGap], typeof rowGap === 'string' && gaps_rowGapClassNames[rowGap], align && alignClassNames[align], justify && justifyClassNames[justify]),
-        style: Flex_object_spread({}, styleProp, style)
-    }));
-};
+    return style;
+}
 Flex.Item = FlexItem;
 
 ;// CONCATENATED MODULE: ./src/components/SimpleGrid/SimpleGrid.module.css
@@ -17871,6 +17908,29 @@ function useAdaptivityWithJSMediaQueries_unsupported_iterable_to_array(o, minLen
     });
 }
 
+;// CONCATENATED MODULE: ./src/hooks/useMutationObserver.ts
+
+
+var useMutationObserver_useMutationObserver = function(ref, callback) {
+    var stableCallback = useStableCallback_useStableCallback(callback);
+    useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function() {
+        if (!ref || !ref.current) {
+            return;
+        }
+        var observer = new MutationObserver(stableCallback);
+        observer.observe(ref.current, {
+            subtree: true,
+            childList: true
+        });
+        return function() {
+            return observer.disconnect();
+        };
+    }, [
+        ref,
+        stableCallback
+    ]);
+};
+
 ;// CONCATENATED MODULE: ./src/components/FocusTrap/FocusTrap.tsx
 function FocusTrap_array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -17991,6 +18051,7 @@ function FocusTrap_unsupported_iterable_to_array(o, minLen) {
 
 
 
+
 var FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
@@ -18046,22 +18107,11 @@ var FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
             focusNodeByIndex(currentElementIndex);
         }
     };
-    useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function collectFocusableNodesRef() {
-        if (!ref.current) {
-            return;
-        }
-        var parentNode = ref.current;
-        var observer = new MutationObserver(function() {
-            return onMutateParentHandler(parentNode);
-        });
-        observer.observe(ref.current, {
-            subtree: true,
-            childList: true
-        });
-        recalculateFocusableNodesRef(parentNode);
-        return function() {
-            return observer.disconnect();
-        };
+    useMutationObserver_useMutationObserver(ref, function() {
+        return ref.current && onMutateParentHandler(ref.current);
+    });
+    useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function() {
+        ref.current && recalculateFocusableNodesRef(ref.current);
     }, [
         ref
     ]);
@@ -18069,16 +18119,21 @@ var FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
         if (!ref.current || !autoFocus || disabled) {
             return;
         }
-        var autoFocusToFirstNode = function() {
+        var autoFocusToNode = function() {
             if (!ref.current || !focusableNodesRef.current.length) {
                 return;
             }
             var activeElement = dom_getActiveElementByAnotherElement(ref.current);
             if (!dom_contains(ref.current, activeElement)) {
-                focusableNodesRef.current[0].focus();
+                if (autoFocus === 'root') {
+                    var _ref_current;
+                    (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+                } else {
+                    focusableNodesRef.current[0].focus();
+                }
             }
         };
-        var timeoutId = setTimeout(autoFocusToFirstNode, timeout);
+        var timeoutId = setTimeout(autoFocusToNode, timeout);
         return function() {
             clearTimeout(timeoutId);
         };
@@ -20137,109 +20192,17 @@ function ActionSheet_unsupported_iterable_to_array(o, minLen) {
     }, actionSheet);
 };
 
-;// CONCATENATED MODULE: ../../node_modules/@vkontakte/icons/dist_es6/24/cancel_24.js
-'use client';
+;// CONCATENATED MODULE: ./src/components/ScreenSpinner/context.ts
 
-var cancel_24_Icon24Cancel = makeIcon('Icon24Cancel', 'cancel_24', '0 0 24 24', '<symbol xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" id="cancel_24"><path d="M7.536 6.264a.9.9 0 0 0-1.272 1.272L10.727 12l-4.463 4.464a.9.9 0 0 0 1.272 1.272L12 13.273l4.464 4.463a.9.9 0 1 0 1.272-1.272L13.273 12l4.463-4.464a.9.9 0 1 0-1.272-1.272L12 10.727z" /></symbol>', 24, 24, false, undefined);
-
-;// CONCATENATED MODULE: ./src/components/ScreenSpinner/Icon48CancelCircle.tsx
-function Icon48CancelCircle_define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function Icon48CancelCircle_object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            Icon48CancelCircle_define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-
-var Icon48CancelCircle = function(props) {
-    return /*#__PURE__*/ react.createElement("svg", Icon48CancelCircle_object_spread({
-        className: "vkuiIcon",
-        width: "48",
-        height: "48",
-        viewBox: "0 0 48 48",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, props), /*#__PURE__*/ react.createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z",
-        fill: "currentColor"
-    }));
-};
-
-;// CONCATENATED MODULE: ./src/components/ScreenSpinner/Icon48DoneOutline.tsx
-function Icon48DoneOutline_define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function Icon48DoneOutline_object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            Icon48DoneOutline_define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-
-var Icon48DoneOutline = function(props) {
-    return /*#__PURE__*/ react.createElement("svg", Icon48DoneOutline_object_spread({
-        className: "vkuiIcon",
-        width: "48",
-        height: "48",
-        viewBox: "0 0 48 48",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-    }, props), /*#__PURE__*/ react.createElement("path", {
-        d: "M9 24L19 34L39 14",
-        stroke: "currentColor",
-        strokeWidth: "3.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-    }));
-};
+var ScreenSpinnerContext = react.createContext({
+    state: 'loading'
+});
 
 ;// CONCATENATED MODULE: ./src/components/ScreenSpinner/ScreenSpinner.module.css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/ScreenSpinner/ScreenSpinner.tsx
-function ScreenSpinner_define_property(obj, key, value) {
+;// CONCATENATED MODULE: ./src/components/ScreenSpinner/ScreenSpinnerContainer.tsx
+function ScreenSpinnerContainer_define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -20252,7 +20215,7 @@ function ScreenSpinner_define_property(obj, key, value) {
     }
     return obj;
 }
-function ScreenSpinner_object_spread(target) {
+function ScreenSpinnerContainer_object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -20262,12 +20225,267 @@ function ScreenSpinner_object_spread(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            ScreenSpinner_define_property(target, key, source[key]);
+            ScreenSpinnerContainer_define_property(target, key, source[key]);
         });
     }
     return target;
 }
-function ScreenSpinner_ownKeys(object, enumerableOnly) {
+function ScreenSpinnerContainer_object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = ScreenSpinnerContainer_object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function ScreenSpinnerContainer_object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+
+
+
+
+var stateClassNames = {
+    cancelable: "vkuiScreenSpinner--state-cancelable",
+    done: "vkuiScreenSpinner--state-done",
+    error: "vkuiScreenSpinner--state-error"
+};
+var ScreenSpinnerContainer_modeClassNames = {
+    shadow: "vkuiScreenSpinner--mode-shadow",
+    overlay: "vkuiScreenSpinner--mode-overlay"
+};
+var ScreenSpinnerContainer = function(_param) {
+    var _param_state = _param.state, state = _param_state === void 0 ? 'loading' : _param_state, _param_mode = _param.mode, mode = _param_mode === void 0 ? 'shadow' : _param_mode, restProps = ScreenSpinnerContainer_object_without_properties(_param, [
+        "state",
+        "mode"
+    ]);
+    return /*#__PURE__*/ react.createElement(ScreenSpinnerContext.Provider, {
+        value: {
+            state: state
+        }
+    }, /*#__PURE__*/ react.createElement(RootComponent_RootComponent, ScreenSpinnerContainer_object_spread({
+        baseClassName: clsx("vkuiScreenSpinner", ScreenSpinnerContainer_modeClassNames[mode], state !== 'loading' && stateClassNames[state])
+    }, restProps)));
+};
+ScreenSpinnerContainer.displayName = 'ScreenSpinnerContainer';
+
+;// CONCATENATED MODULE: ./src/components/ScreenSpinner/ScreenSpinnerLoader.tsx
+function ScreenSpinnerLoader_define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function ScreenSpinnerLoader_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            ScreenSpinnerLoader_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ScreenSpinnerLoader_object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = ScreenSpinnerLoader_object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function ScreenSpinnerLoader_object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+
+
+var ScreenSpinnerLoader = function(_param) {
+    var _param_size = _param.size, size = _param_size === void 0 ? 'large' : _param_size, _param_children = _param.children, children = _param_children === void 0 ? 'Пожалуйста, подождите...' : _param_children, restProps = ScreenSpinnerLoader_object_without_properties(_param, [
+        "size",
+        "children"
+    ]);
+    return /*#__PURE__*/ react.createElement(Spinner_Spinner, ScreenSpinnerLoader_object_spread({
+        className: "vkuiScreenSpinner__spinner",
+        size: size,
+        noColor: true
+    }, restProps), children);
+};
+ScreenSpinnerLoader.displayName = 'ScreenSpinnerLoader';
+
+;// CONCATENATED MODULE: ../../node_modules/@vkontakte/icons/dist_es6/24/cancel_24.js
+'use client';
+
+var cancel_24_Icon24Cancel = makeIcon('Icon24Cancel', 'cancel_24', '0 0 24 24', '<symbol xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" id="cancel_24"><path d="M7.536 6.264a.9.9 0 0 0-1.272 1.272L10.727 12l-4.463 4.464a.9.9 0 0 0 1.272 1.272L12 13.273l4.464 4.463a.9.9 0 1 0 1.272-1.272L13.273 12l4.463-4.464a.9.9 0 1 0-1.272-1.272L12 10.727z" /></symbol>', 24, 24, false, undefined);
+
+;// CONCATENATED MODULE: ./src/components/ScreenSpinner/Icon48CancelCircle.tsx
+function Icon48CancelCircle_define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function Icon48CancelCircle_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            Icon48CancelCircle_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+
+var Icon48CancelCircle = function(props) {
+    return /*#__PURE__*/ react.createElement("svg", Icon48CancelCircle_object_spread({
+        className: "vkuiIcon",
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+    }, props), /*#__PURE__*/ react.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z",
+        fill: "currentColor"
+    }));
+};
+
+;// CONCATENATED MODULE: ./src/components/ScreenSpinner/Icon48DoneOutline.tsx
+function Icon48DoneOutline_define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function Icon48DoneOutline_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            Icon48DoneOutline_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+
+var Icon48DoneOutline = function(props) {
+    return /*#__PURE__*/ react.createElement("svg", Icon48DoneOutline_object_spread({
+        className: "vkuiIcon",
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+    }, props), /*#__PURE__*/ react.createElement("path", {
+        d: "M9 24L19 34L39 14",
+        stroke: "currentColor",
+        strokeWidth: "3.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+    }));
+};
+
+;// CONCATENATED MODULE: ./src/components/ScreenSpinner/ScreenSpinnerSwapIcon.tsx
+function ScreenSpinnerSwapIcon_define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function ScreenSpinnerSwapIcon_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            ScreenSpinnerSwapIcon_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ScreenSpinnerSwapIcon_ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -20280,20 +20498,20 @@ function ScreenSpinner_ownKeys(object, enumerableOnly) {
     }
     return keys;
 }
-function ScreenSpinner_object_spread_props(target, source) {
+function ScreenSpinnerSwapIcon_object_spread_props(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ScreenSpinner_ownKeys(Object(source)).forEach(function(key) {
+        ScreenSpinnerSwapIcon_ownKeys(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
     return target;
 }
-function ScreenSpinner_object_without_properties(source, excluded) {
+function ScreenSpinnerSwapIcon_object_without_properties(source, excluded) {
     if (source == null) return {};
-    var target = ScreenSpinner_object_without_properties_loose(source, excluded);
+    var target = ScreenSpinnerSwapIcon_object_without_properties_loose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
         var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -20306,7 +20524,7 @@ function ScreenSpinner_object_without_properties(source, excluded) {
     }
     return target;
 }
-function ScreenSpinner_object_without_properties_loose(source, excluded) {
+function ScreenSpinnerSwapIcon_object_without_properties_loose(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -20327,30 +20545,8 @@ function ScreenSpinner_object_without_properties_loose(source, excluded) {
 
 
 
-
-
-
-var ScreenSpinnerContext = /*#__PURE__*/ react.createContext({
-    state: 'loading'
-});
-var stateClassNames = {
-    cancelable: "vkuiScreenSpinner--state-cancelable",
-    done: "vkuiScreenSpinner--state-done",
-    error: "vkuiScreenSpinner--state-error"
-};
-var ScreenSpinnerLoader = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? 'large' : _param_size, _param_children = _param.children, children = _param_children === void 0 ? 'Пожалуйста, подождите...' : _param_children, restProps = ScreenSpinner_object_without_properties(_param, [
-        "size",
-        "children"
-    ]);
-    return /*#__PURE__*/ react.createElement(Spinner_Spinner, ScreenSpinner_object_spread({
-        className: "vkuiScreenSpinner__spinner",
-        size: size
-    }, restProps), children);
-};
-ScreenSpinnerLoader.displayName = 'ScreenSpinner.Loader';
 var ScreenSpinnerCancelIcon = function(_param) {
-    var onKeyDown = _param.onKeyDown, tmp = _param['aria-label'], ariaLabel = tmp === void 0 ? 'Отменить' : tmp, restProps = ScreenSpinner_object_without_properties(_param, [
+    var onKeyDown = _param.onKeyDown, tmp = _param['aria-label'], ariaLabel = tmp === void 0 ? 'Отменить' : tmp, restProps = ScreenSpinnerSwapIcon_object_without_properties(_param, [
         "onKeyDown",
         'aria-label'
     ]);
@@ -20359,22 +20555,23 @@ var ScreenSpinnerCancelIcon = function(_param) {
     }, {
         onKeyDown: onKeyDown
     });
-    var clickableProps = ScreenSpinner_object_spread_props(ScreenSpinner_object_spread({}, handlers), {
+    var clickableProps = ScreenSpinnerSwapIcon_object_spread_props(ScreenSpinnerSwapIcon_object_spread({}, handlers), {
         'tabIndex': 0,
         'role': 'button',
         'aria-label': ariaLabel
     });
-    return /*#__PURE__*/ react.createElement(RootComponent_RootComponent, ScreenSpinner_object_spread({
+    return /*#__PURE__*/ react.createElement(RootComponent_RootComponent, ScreenSpinnerSwapIcon_object_spread({
         baseClassName: "vkuiScreenSpinner__icon"
     }, clickableProps, restProps), /*#__PURE__*/ react.createElement(cancel_24_Icon24Cancel, null));
 };
+ScreenSpinnerCancelIcon.displayName = 'ScreenSpinnerCancelIcon';
 var ScreenSpinnerSwapIcon = function(_param) {
-    var cancelLabel = _param.cancelLabel, restProps = ScreenSpinner_object_without_properties(_param, [
+    var cancelLabel = _param.cancelLabel, restProps = ScreenSpinnerSwapIcon_object_without_properties(_param, [
         "cancelLabel"
     ]);
     var state = react.useContext(ScreenSpinnerContext).state;
     if (state === 'cancelable') {
-        return /*#__PURE__*/ react.createElement(ScreenSpinnerCancelIcon, ScreenSpinner_object_spread({
+        return /*#__PURE__*/ react.createElement(ScreenSpinnerCancelIcon, ScreenSpinnerSwapIcon_object_spread({
             "aria-label": cancelLabel
         }, restProps));
     }
@@ -20385,33 +20582,56 @@ var ScreenSpinnerSwapIcon = function(_param) {
         done: Icon48DoneOutline,
         error: Icon48CancelCircle
     }[state];
-    return /*#__PURE__*/ react.createElement(RootComponent_RootComponent, ScreenSpinner_object_spread({
+    return /*#__PURE__*/ react.createElement(RootComponent_RootComponent, ScreenSpinnerSwapIcon_object_spread({
         baseClassName: "vkuiScreenSpinner__icon"
     }, restProps), /*#__PURE__*/ react.createElement(Icon, null));
 };
-ScreenSpinnerSwapIcon.displayName = 'ScreenSpinner.SwapIcon';
-var ScreenSpinnerContainer = function(_param) {
-    var _param_state = _param.state, state = _param_state === void 0 ? 'loading' : _param_state, restProps = ScreenSpinner_object_without_properties(_param, [
-        "state"
-    ]);
-    return /*#__PURE__*/ react.createElement(ScreenSpinnerContext.Provider, {
-        value: {
-            state: state
+ScreenSpinnerSwapIcon.displayName = 'ScreenSpinnerSwapIcon';
+
+;// CONCATENATED MODULE: ./src/components/ScreenSpinner/ScreenSpinner.tsx
+function ScreenSpinner_object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = ScreenSpinner_object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
         }
-    }, /*#__PURE__*/ react.createElement(RootComponent_RootComponent, ScreenSpinner_object_spread({
-        baseClassName: clsx("vkuiScreenSpinner", state !== 'loading' && stateClassNames[state])
-    }, restProps)));
-};
-ScreenSpinnerContainer.displayName = 'ScreenSpinner.Container';
+    }
+    return target;
+}
+function ScreenSpinner_object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+
+
+
+
+
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */ var ScreenSpinner = function(_param) {
-    var style = _param.style, className = _param.className, _param_state = _param.state, state = _param_state === void 0 ? 'loading' : _param_state, onClick = _param.onClick, cancelLabel = _param.cancelLabel, restProps = ScreenSpinner_object_without_properties(_param, [
+    var style = _param.style, className = _param.className, _param_state = _param.state, state = _param_state === void 0 ? 'loading' : _param_state, onClick = _param.onClick, cancelLabel = _param.cancelLabel, mode = _param.mode, restProps = ScreenSpinner_object_without_properties(_param, [
         "style",
         "className",
         "state",
         "onClick",
-        "cancelLabel"
+        "cancelLabel",
+        "mode"
     ]);
     ScrollContext_useScrollLock();
     return /*#__PURE__*/ react.createElement(PopoutWrapper_PopoutWrapper, {
@@ -20419,7 +20639,8 @@ ScreenSpinnerContainer.displayName = 'ScreenSpinner.Container';
         style: style,
         noBackground: true
     }, /*#__PURE__*/ react.createElement(ScreenSpinnerContainer, {
-        state: state
+        state: state,
+        mode: mode
     }, /*#__PURE__*/ react.createElement(ScreenSpinnerLoader, restProps), /*#__PURE__*/ react.createElement(ScreenSpinnerSwapIcon, {
         onClick: onClick,
         cancelLabel: cancelLabel
@@ -20649,7 +20870,6 @@ function utils_object_spread_props(target, source) {
     return target;
 }
 
-
 function resolveOffsetYCssStyle(placement, style, offsetY) {
     if (offsetY === undefined) {
         return style;
@@ -21056,7 +21276,6 @@ var animationStateClassNames = {
 Snackbar.Basic = Basic;
 
 ;// CONCATENATED MODULE: ./src/helpers/getMergedSameEventsByProps.ts
-
 var isFunctionExistInProps = function(props, key) {
     return typeof props[key] === 'function';
 };
@@ -21260,6 +21479,9 @@ function TooltipBase_object_without_properties_loose(source, excluded) {
 
 
 
+
+
+
 var TooltipBase_TOOLTIP_MAX_WIDTH = 220;
 var TooltipBase_stylesAppearance = {
     accent: "vkuiTooltipBase--appearance-accent",
@@ -21273,13 +21495,15 @@ var TooltipBase_stylesAppearance = {
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  * @private
  */ var TooltipBase_TooltipBase = function(_param) {
-    var _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? 'accent' : _param_appearance, arrowProps = _param.arrowProps, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? DefaultIcon : _param_ArrowIcon, text = _param.text, header = _param.header, _param_maxWidth = _param.maxWidth, maxWidth = _param_maxWidth === void 0 ? TooltipBase_TOOLTIP_MAX_WIDTH : _param_maxWidth, className = _param.className, restProps = TooltipBase_object_without_properties(_param, [
+    var _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? 'accent' : _param_appearance, arrowProps = _param.arrowProps, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? DefaultIcon : _param_ArrowIcon, text = _param.text, header = _param.header, _param_maxWidth = _param.maxWidth, maxWidth = _param_maxWidth === void 0 ? TooltipBase_TOOLTIP_MAX_WIDTH : _param_maxWidth, _param_closeIconLabel = _param.closeIconLabel, closeIconLabel = _param_closeIconLabel === void 0 ? 'Закрыть' : _param_closeIconLabel, onCloseIconClick = _param.onCloseIconClick, className = _param.className, restProps = TooltipBase_object_without_properties(_param, [
         "appearance",
         "arrowProps",
         "ArrowIcon",
         "text",
         "header",
         "maxWidth",
+        "closeIconLabel",
+        "onCloseIconClick",
         "className"
     ]);
     return /*#__PURE__*/ React.createElement(RootComponent, TooltipBase_object_spread_props(TooltipBase_object_spread({}, restProps), {
@@ -21293,9 +21517,17 @@ var TooltipBase_stylesAppearance = {
         style: maxWidth !== null ? {
             maxWidth: maxWidth
         } : undefined
-    }, header && /*#__PURE__*/ React.createElement(Subhead, {
+    }, /*#__PURE__*/ React.createElement("div", null, hasReactNode(header) && /*#__PURE__*/ React.createElement(Subhead, {
         weight: "2"
-    }, header), text && /*#__PURE__*/ React.createElement(Subhead, null, text)));
+    }, header), hasReactNode(text) && /*#__PURE__*/ React.createElement(Subhead, null, text)), typeof onCloseIconClick === 'function' && /*#__PURE__*/ React.createElement(Tappable, {
+        Component: "button",
+        className: "vkuiTooltipBase__closeButton",
+        hoverMode: "opacity",
+        activeMode: "opacity",
+        onClick: onCloseIconClick
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, closeIconLabel), /*#__PURE__*/ React.createElement(Icon16Cancel, {
+        display: "block"
+    }))));
 };
 
 ;// CONCATENATED MODULE: ./src/components/Tooltip/Tooltip.tsx
@@ -21433,7 +21665,6 @@ function Tooltip_unsupported_iterable_to_array(o, minLen) {
 
 
 
-
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  */ var Tooltip = function(_param) {
@@ -21443,7 +21674,7 @@ function Tooltip_unsupported_iterable_to_array(o, minLen) {
     enableInteractive, enableInteractive = _param_enableInteractive === void 0 ? false : _param_enableInteractive, _param_disableArrow = _param.disableArrow, disableArrow = _param_disableArrow === void 0 ? false : _param_disableArrow, _param_disableCloseAfterClick = _param.disableCloseAfterClick, disableCloseAfterClick = _param_disableCloseAfterClick === void 0 ? false : _param_disableCloseAfterClick, // Reference
     children = _param.children, // AppRootProps
     usePortal = _param.usePortal, // TooltipBaseProps
-    idProp = _param.id, getRootRef = _param.getRootRef, text = _param.text, header = _param.header, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? 'neutral' : _param_appearance, styleProp = _param.style, className = _param.className, _param_zIndex = _param.zIndex, zIndex = _param_zIndex === void 0 ? 'var(--vkui--z_index_popout)' : _param_zIndex, onPlacementChange = _param.onPlacementChange, popperProps = Tooltip_object_without_properties(_param, [
+    idProp = _param.id, getRootRef = _param.getRootRef, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? 'neutral' : _param_appearance, styleProp = _param.style, className = _param.className, _param_zIndex = _param.zIndex, zIndex = _param_zIndex === void 0 ? 'var(--vkui--z_index_popout)' : _param_zIndex, closable = _param.closable, onPlacementChange = _param.onPlacementChange, popperProps = Tooltip_object_without_properties(_param, [
         "placement",
         "arrowPadding",
         "arrowHeight",
@@ -21463,12 +21694,11 @@ function Tooltip_unsupported_iterable_to_array(o, minLen) {
         "usePortal",
         "id",
         "getRootRef",
-        "text",
-        "header",
         "appearance",
         "style",
         "className",
         "zIndex",
+        "closable",
         "onPlacementChange"
     ]);
     var generatedId = React.useId();
@@ -21498,19 +21728,17 @@ function Tooltip_unsupported_iterable_to_array(o, minLen) {
         closeAfterClick: !disableCloseAfterClick,
         disableInteractive: !enableInteractive,
         middlewares: middlewares
-    }), shown = _useFloatingWithInteractions.shown, willBeHide = _useFloatingWithInteractions.willBeHide, placement = _useFloatingWithInteractions.placement, refs = _useFloatingWithInteractions.refs, referenceProps = _useFloatingWithInteractions.referenceProps, floatingProps = _useFloatingWithInteractions.floatingProps, middlewareData = _useFloatingWithInteractions.middlewareData, onEscapeKeyDown = _useFloatingWithInteractions.onEscapeKeyDown;
+    }), shown = _useFloatingWithInteractions.shown, willBeHide = _useFloatingWithInteractions.willBeHide, placement = _useFloatingWithInteractions.placement, refs = _useFloatingWithInteractions.refs, referenceProps = _useFloatingWithInteractions.referenceProps, floatingProps = _useFloatingWithInteractions.floatingProps, middlewareData = _useFloatingWithInteractions.middlewareData, onClose = _useFloatingWithInteractions.onClose, onEscapeKeyDown = _useFloatingWithInteractions.onEscapeKeyDown;
     var tooltipRef = useExternRef(getRootRef, refs.setFloating);
     usePlacementChangeCallback(placementProp, placement, onPlacementChange);
     var tooltip = null;
     if (shown) {
-        referenceProps['aria-describedby'] = tooltipId;
-        floatingProps.style.zIndex = zIndex;
-        if (styleProp) {
-            Object.assign(floatingProps.style, styleProp);
-        }
         tooltip = /*#__PURE__*/ React.createElement(AppRootPortal, {
             usePortal: usePortal
         }, /*#__PURE__*/ React.createElement(TooltipBase, Tooltip_object_spread_props(Tooltip_object_spread({}, popperProps, floatingProps), {
+            style: Tooltip_object_spread(Tooltip_object_spread_props(Tooltip_object_spread({}, floatingProps.style), {
+                zIndex: zIndex
+            }), styleProp),
             id: tooltipId,
             getRootRef: tooltipRef,
             appearance: appearance,
@@ -21519,13 +21747,13 @@ function Tooltip_unsupported_iterable_to_array(o, minLen) {
                 coords: getArrowCoordsByMiddlewareData(middlewareData),
                 getRootRef: setArrowRef
             },
-            text: /*#__PURE__*/ React.createElement(React.Fragment, null, hasReactNode(header) && /*#__PURE__*/ React.createElement(Subhead, {
-                weight: "2"
-            }, header), hasReactNode(text) && /*#__PURE__*/ React.createElement(Subhead, null, text)),
-            className: classNames(willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in, className)
+            className: classNames(willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in, className),
+            onCloseIconClick: closable ? onClose : undefined
         })));
     }
-    var _usePatchChildren = Tooltip_sliced_to_array(usePatchChildren(children, referenceProps, refs.setReference), 2), child = _usePatchChildren[1];
+    var _usePatchChildren = Tooltip_sliced_to_array(usePatchChildren(children, Tooltip_object_spread({}, referenceProps, shown && {
+        'aria-describedby': tooltipId
+    }), refs.setReference), 2), child = _usePatchChildren[1];
     useGlobalEscKeyDown(shown, onEscapeKeyDown);
     return /*#__PURE__*/ React.createElement(React.Fragment, null, child, tooltip);
 };
@@ -21668,8 +21896,6 @@ function withPlatform(Component) {
 
 ;// CONCATENATED MODULE: ./src/components/ModalRoot/constants.ts
 var MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = 75;
-var PERCENT_OPENED = 0;
-var PERCENT_CLOSED = 100;
 
 ;// CONCATENATED MODULE: ./src/components/ModalRoot/useModalManager.tsx
 function useModalManager_array_like_to_array(arr, len) {
@@ -23088,6 +23314,13 @@ var ModalRootDesktop_ModalRootDesktop = function(param) {
     return /*#__PURE__*/ React.createElement(RootComponent, props);
 };
 
+;// CONCATENATED MODULE: ./src/components/ModalRoot/useModalRootContext.tsx
+
+
+var useModalRootContext_useModalRootContext = function() {
+    return React.useContext(ModalRootContext);
+};
+
 ;// CONCATENATED MODULE: ./src/components/ModalRoot/withModalRootContext.tsx
 function withModalRootContext_define_property(obj, key, value) {
     if (key in obj) {
@@ -23145,7 +23378,7 @@ function withModalRootContext_object_spread_props(target, source) {
 
 function withModalRootContext(Component) {
     function WithModalRootContext(props) {
-        var updateModalHeight = React.useContext(ModalRootContext).updateModalHeight;
+        var updateModalHeight = useModalRootContext().updateModalHeight;
         return /*#__PURE__*/ React.createElement(Component, withModalRootContext_object_spread_props(withModalRootContext_object_spread({}, props), {
             updateModalHeight: updateModalHeight
         }));
@@ -24500,11 +24733,14 @@ function Card_object_without_properties_loose(source, excluded) {
 /**
  * @see https://vkcom.github.io/VKUI/#/Card
  */ var Card_Card = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? 'tint' : _param_mode, restProps = Card_object_without_properties(_param, [
-        "mode"
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? 'tint' : _param_mode, _param_Component = _param.// TODO [>=7]: поменять тег на li https://github.com/VKCOM/VKUI/issues/7336
+    Component, Component = _param_Component === void 0 ? 'div' : _param_Component, restProps = Card_object_without_properties(_param, [
+        "mode",
+        "Component"
     ]);
     var withBorder = mode === 'outline' || mode === 'outline-tint';
     return /*#__PURE__*/ React.createElement(RootComponent, Card_object_spread_props(Card_object_spread({}, restProps), {
+        Component: Component,
         baseClassName: classNames("vkuiCard", mode === 'outline' && "vkuiCard--mode-outline", mode === 'shadow' && "vkuiCard--mode-shadow", withBorder && "vkuiCard--withBorder")
     }));
 };
@@ -24607,12 +24843,15 @@ var CardGrid_stylesSize = {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardGrid
  */ var CardGrid = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? 's' : _param_size, _param_spaced = _param.spaced, spaced = _param_spaced === void 0 ? false : _param_spaced, restProps = CardGrid_object_without_properties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? 's' : _param_size, _param_spaced = _param.spaced, spaced = _param_spaced === void 0 ? false : _param_spaced, _param_Component = _param.// TODO [>=7]: поменять тег на ul https://github.com/VKCOM/VKUI/issues/7336
+    Component, Component = _param_Component === void 0 ? 'div' : _param_Component, restProps = CardGrid_object_without_properties(_param, [
         "size",
-        "spaced"
+        "spaced",
+        "Component"
     ]);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? 'none' : _useAdaptivity_sizeX;
     return /*#__PURE__*/ React.createElement(RootComponent, CardGrid_object_spread_props(CardGrid_object_spread({}, restProps), {
+        Component: Component,
         baseClassName: classNames("vkuiCardGrid", 'vkuiInternalCardGrid', spaced && "vkuiCardGrid--spaced", CardGrid_stylesSize[size], sizeX !== 'regular' && CardGrid_sizeXClassNames[sizeX])
     }));
 };
@@ -24773,16 +25012,19 @@ var CardScroll_stylesSize = {
         }
         return slide.offsetLeft - gapRef.current.offsetWidth;
     };
-    var children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? 's' : _param_size, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_noSpaces = _param.noSpaces, noSpaces = _param_noSpaces === void 0 ? false : _param_noSpaces, restProps = CardScroll_object_without_properties(_param, [
+    var children = _param.children, _param_size = _param.size, size = _param_size === void 0 ? 's' : _param_size, _param_showArrows = _param.showArrows, showArrows = _param_showArrows === void 0 ? true : _param_showArrows, _param_noSpaces = _param.noSpaces, noSpaces = _param_noSpaces === void 0 ? false : _param_noSpaces, _param_Component = _param.// TODO [>=7]: поменять тег на ul https://github.com/VKCOM/VKUI/issues/7336
+    Component, Component = _param_Component === void 0 ? 'div' : _param_Component, restProps = CardScroll_object_without_properties(_param, [
         "children",
         "size",
         "showArrows",
-        "noSpaces"
+        "noSpaces",
+        "Component"
     ]);
     var refContainer = React.useRef(null);
     var gapRef = React.useRef(null);
     var window = useDOM().window;
     return /*#__PURE__*/ React.createElement(RootComponent, CardScroll_object_spread_props(CardScroll_object_spread({}, restProps), {
+        Component: Component,
         baseClassName: classNames("vkuiCardScroll", 'vkuiInternalCardScroll', size !== false && CardScroll_stylesSize[size], !noSpaces && "vkuiCardScroll--withSpaces")
     }), /*#__PURE__*/ React.createElement(HorizontalScroll, {
         getScrollToLeft: getScrollToLeft,
@@ -24897,7 +25139,8 @@ function ContentCard_object_without_properties_loose(source, excluded) {
  */ var ContentCard = function(_param) {
     var subtitle = _param.subtitle, header = _param.header, _param_headerComponent = _param.headerComponent, headerComponent = _param_headerComponent === void 0 ? 'span' : _param_headerComponent, text = _param.text, caption = _param.caption, // card props
     className = _param.className, _param_mode = _param.mode, mode = _param_mode === void 0 ? 'shadow' : _param_mode, style = _param.style, getRootRef = _param.getRootRef, // img props
-    getRef = _param.getRef, maxHeight = _param.maxHeight, src = _param.src, srcSet = _param.srcSet, _param_alt = _param.alt, alt = _param_alt === void 0 ? '' : _param_alt, width = _param.width, height = _param.height, crossOrigin = _param.crossOrigin, decoding = _param.decoding, loading = _param.loading, referrerPolicy = _param.referrerPolicy, sizes = _param.sizes, useMap = _param.useMap, fetchPriority = _param.fetchPriority, _param_hasHover = _param.hasHover, hasHover = _param_hasHover === void 0 ? false : _param_hasHover, _param_hasActive = _param.hasActive, hasActive = _param_hasActive === void 0 ? false : _param_hasActive, restProps = ContentCard_object_without_properties(_param, [
+    getRef = _param.getRef, maxHeight = _param.maxHeight, src = _param.src, srcSet = _param.srcSet, _param_alt = _param.alt, alt = _param_alt === void 0 ? '' : _param_alt, width = _param.width, height = _param.height, crossOrigin = _param.crossOrigin, decoding = _param.decoding, loading = _param.loading, referrerPolicy = _param.referrerPolicy, sizes = _param.sizes, useMap = _param.useMap, fetchPriority = _param.fetchPriority, _param_hasHover = _param.hasHover, hasHover = _param_hasHover === void 0 ? false : _param_hasHover, _param_hasActive = _param.hasActive, hasActive = _param_hasActive === void 0 ? false : _param_hasActive, _param_Component = _param.// TODO [>=7]: поменять тег на li https://github.com/VKCOM/VKUI/issues/7336
+    Component, Component = _param_Component === void 0 ? 'div' : _param_Component, restProps = ContentCard_object_without_properties(_param, [
         "subtitle",
         "header",
         "headerComponent",
@@ -24922,11 +25165,13 @@ function ContentCard_object_without_properties_loose(source, excluded) {
         "useMap",
         "fetchPriority",
         "hasHover",
-        "hasActive"
+        "hasActive",
+        "Component"
     ]);
     return /*#__PURE__*/ React.createElement(Card, {
         mode: mode,
         getRootRef: getRootRef,
+        Component: Component,
         style: style,
         className: classNames(restProps.disabled && "vkuiContentCard--disabled", className)
     }, /*#__PURE__*/ React.createElement(Tappable, ContentCard_object_spread_props(ContentCard_object_spread({}, restProps), {
@@ -25120,7 +25365,7 @@ var Header_stylesMode = {
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */ var Header = function(_param) {
-    var _param_mode = _param.mode, mode = _param_mode === void 0 ? 'primary' : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? 'regular' : _param_size, _param_Component = _param.Component, Component = _param_Component === void 0 ? 'h2' : _param_Component, children = _param.children, subtitle = _param.subtitle, _param_subtitleComponent = _param.subtitleComponent, subtitleComponent = _param_subtitleComponent === void 0 ? 'span' : _param_subtitleComponent, indicator = _param.indicator, aside = _param.aside, multiline = _param.multiline, restProps = Header_object_without_properties(_param, [
+    var _param_mode = _param.mode, mode = _param_mode === void 0 ? 'primary' : _param_mode, _param_size = _param.size, size = _param_size === void 0 ? 'regular' : _param_size, _param_Component = _param.Component, Component = _param_Component === void 0 ? 'h2' : _param_Component, children = _param.children, subtitle = _param.subtitle, _param_subtitleComponent = _param.subtitleComponent, subtitleComponent = _param_subtitleComponent === void 0 ? 'span' : _param_subtitleComponent, indicator = _param.indicator, aside = _param.aside, multiline = _param.multiline, before = _param.before, beforeTitle = _param.beforeTitle, afterTitle = _param.afterTitle, beforeSubtitle = _param.beforeSubtitle, afterSubtitle = _param.afterSubtitle, restProps = Header_object_without_properties(_param, [
         "mode",
         "size",
         "Component",
@@ -25129,26 +25374,43 @@ var Header_stylesMode = {
         "subtitleComponent",
         "indicator",
         "aside",
-        "multiline"
+        "multiline",
+        "before",
+        "beforeTitle",
+        "afterTitle",
+        "beforeSubtitle",
+        "afterSubtitle"
     ]);
     return /*#__PURE__*/ React.createElement(RootComponent, Header_object_spread_props(Header_object_spread({}, restProps), {
         baseClassName: classNames("vkuiHeader", Header_stylesMode[mode], size === 'large' && "vkuiHeader--large", isPrimitiveReactNode(indicator) && "vkuiHeader--pi", hasReactNode(subtitle) && "vkuiHeader--with-subtitle")
-    }), /*#__PURE__*/ React.createElement("div", {
+    }), before && /*#__PURE__*/ React.createElement("div", {
+        className: classNames("vkuiHeader__before", subtitle && "vkuiHeader__before--withSubtitle")
+    }, before), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiHeader__main"
     }, /*#__PURE__*/ React.createElement(HeaderContent, {
         className: "vkuiHeader__content",
         Component: Component,
         mode: mode,
         size: size
-    }, /*#__PURE__*/ React.createElement("span", {
+    }, beforeTitle && /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiHeader__content__before"
+    }, beforeTitle), /*#__PURE__*/ React.createElement("span", {
         className: classNames("vkuiHeader__content-in", multiline && "vkuiHeader__content--multiline")
-    }, children), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Footnote, {
+    }, children), afterTitle && /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiHeader__content__after"
+    }, afterTitle), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Footnote, {
         className: "vkuiHeader__indicator",
         weight: "2"
-    }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Subhead, {
+    }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiHeader__subtitleWrapper"
+    }, beforeSubtitle && /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiHeader__subtitleBefore"
+    }, beforeSubtitle), /*#__PURE__*/ React.createElement(Subhead, {
         className: classNames("vkuiHeader__subtitle", multiline && "vkuiHeader__content--multiline"),
         Component: subtitleComponent
-    }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(Paragraph, {
+    }, subtitle), afterSubtitle && /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiHeader__subtitleAfter"
+    }, afterSubtitle))), hasReactNode(aside) && /*#__PURE__*/ React.createElement(Paragraph, {
         className: "vkuiHeader__aside",
         Component: "span"
     }, aside));
@@ -25157,8 +25419,8 @@ var Header_stylesMode = {
 ;// CONCATENATED MODULE: ./src/components/Group/Group.module.css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/Group/Group.tsx
-function Group_define_property(obj, key, value) {
+;// CONCATENATED MODULE: ./src/components/Group/GroupContainer.tsx
+function GroupContainer_define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -25171,7 +25433,7 @@ function Group_define_property(obj, key, value) {
     }
     return obj;
 }
-function Group_object_spread(target) {
+function GroupContainer_object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -25181,12 +25443,12 @@ function Group_object_spread(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            Group_define_property(target, key, source[key]);
+            GroupContainer_define_property(target, key, source[key]);
         });
     }
     return target;
 }
-function Group_ownKeys(object, enumerableOnly) {
+function GroupContainer_ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -25199,20 +25461,20 @@ function Group_ownKeys(object, enumerableOnly) {
     }
     return keys;
 }
-function Group_object_spread_props(target, source) {
+function GroupContainer_object_spread_props(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        Group_ownKeys(Object(source)).forEach(function(key) {
+        GroupContainer_ownKeys(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
     return target;
 }
-function Group_object_without_properties(source, excluded) {
+function GroupContainer_object_without_properties(source, excluded) {
     if (source == null) return {};
-    var target = Group_object_without_properties_loose(source, excluded);
+    var target = GroupContainer_object_without_properties_loose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
         var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -25225,7 +25487,7 @@ function Group_object_without_properties(source, excluded) {
     }
     return target;
 }
-function Group_object_without_properties_loose(source, excluded) {
+function GroupContainer_object_without_properties_loose(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -25245,13 +25507,12 @@ function Group_object_without_properties_loose(source, excluded) {
 
 
 
-
-var Group_sizeXClassNames = {
+var GroupContainer_sizeXClassNames = {
     none: clsx("vkuiGroup--sizeX-none", 'vkuiInternalGroup--sizeX-none'),
     regular: "vkuiGroup--sizeX-regular",
     compact: "vkuiGroup--sizeX-compact"
 };
-var Group_stylesMode = {
+var GroupContainer_stylesMode = {
     none: clsx("vkuiGroup--mode-none", 'vkuiInternalGroup--mode-none'),
     plain: clsx("vkuiGroup--mode-plain", 'vkuiInternalGroup--mode-plain'),
     card: clsx("vkuiGroup--mode-card", 'vkuiInternalGroup--mode-card')
@@ -25263,7 +25524,7 @@ var stylesPadding = {
 /**
  * Вычисляем mode для Group.
  */ function useGroupMode(forcedMode, sizeX, isInsideModal) {
-    var layout = React.useContext(AppRootContext).layout;
+    var layout = react.useContext(AppRootContext_AppRootContext).layout;
     if (forcedMode) {
         return forcedMode;
     }
@@ -25278,21 +25539,17 @@ var stylesPadding = {
     }
     return 'none';
 }
-var Group_warn = warnOnce('Group');
-/**
- * @see https://vkcom.github.io/VKUI/#/Group
- */ var Group = function(_param) {
-    var header = _param.header, description = _param.description, children = _param.children, _param_separator = _param.separator, separator = _param_separator === void 0 ? 'auto' : _param_separator, modeProps = _param.mode, _param_padding = _param.padding, padding = _param_padding === void 0 ? 'm' : _param_padding, tabIndexProp = _param.tabIndex, restProps = Group_object_without_properties(_param, [
-        "header",
-        "description",
+var GroupContainer_warn = warnOnce('Group');
+var GroupContainer = function(_param) {
+    var children = _param.children, _param_separator = _param.separator, separator = _param_separator === void 0 ? 'auto' : _param_separator, modeProps = _param.mode, _param_padding = _param.padding, padding = _param_padding === void 0 ? 'm' : _param_padding, tabIndexProp = _param.tabIndex, restProps = GroupContainer_object_without_properties(_param, [
         "children",
         "separator",
         "mode",
         "padding",
         "tabIndex"
     ]);
-    var isInsideModal = React.useContext(ModalRootContext).isInsideModal;
-    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? 'none' : _useAdaptivity_sizeX;
+    var isInsideModal = react.useContext(ModalRootContext_ModalRootContext).isInsideModal;
+    var _useAdaptivity = useAdaptivity_useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? 'none' : _useAdaptivity_sizeX;
     var mode = useGroupMode(modeProps, sizeX, isInsideModal);
     var isTabPanel = restProps.role === 'tabpanel';
     if (false) {}
@@ -25300,30 +25557,319 @@ var Group_warn = warnOnce('Group');
     var siblingSeparatorElement = null;
     switch(separator){
         case 'auto':
-            siblingSeparatorElement = /*#__PURE__*/ React.createElement("div", {
+            siblingSeparatorElement = /*#__PURE__*/ react.createElement("div", {
                 className: "vkuiGroup__separator-sibling"
             });
             break;
         case 'show':
-            siblingSeparatorElement = /*#__PURE__*/ React.createElement("div", {
-                className: classNames("vkuiGroup__separator-sibling", mode === 'plain' || mode === 'none' ? "vkuiGroup__separator-sibling--forced" : undefined)
+            siblingSeparatorElement = /*#__PURE__*/ react.createElement("div", {
+                className: clsx("vkuiGroup__separator-sibling", mode === 'plain' || mode === 'none' ? "vkuiGroup__separator-sibling--forced" : undefined)
             });
             break;
         case 'hide':
             break;
     }
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(RootComponent, Group_object_spread_props(Group_object_spread({
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(RootComponent_RootComponent, GroupContainer_object_spread_props(GroupContainer_object_spread({
         Component: "section"
     }, restProps), {
         tabIndex: tabIndex,
-        baseClassName: classNames('vkuiInternalGroup', "vkuiGroup", Group_sizeXClassNames[sizeX], mode === 'plain' && isInsideModal && "vkuiGroup--mode-plain-inside-modal", Group_stylesMode[mode], stylesPadding[padding])
-    }), hasReactNode(header) && /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiGroup__header"
-    }, header), children, hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
-        className: "vkuiGroup__description"
-    }, description)), siblingSeparatorElement);
+        baseClassName: clsx('vkuiInternalGroup', "vkuiGroup", GroupContainer_sizeXClassNames[sizeX], mode === 'plain' && isInsideModal && "vkuiGroup--mode-plain-inside-modal", GroupContainer_stylesMode[mode], stylesPadding[padding])
+    }), children), siblingSeparatorElement);
+};
+GroupContainer.displayName = 'GroupContainer';
+
+;// CONCATENATED MODULE: ./src/components/Group/GroupDescription.tsx
+function GroupDescription_define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function GroupDescription_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            GroupDescription_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function GroupDescription_object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = GroupDescription_object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function GroupDescription_object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+
+
+
+var GroupDescription = function(_param) {
+    var className = _param.className, restProps = GroupDescription_object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ react.createElement(Footnote_Footnote, GroupDescription_object_spread({
+        className: clsx(className, "vkuiGroup__description")
+    }, restProps));
+};
+GroupDescription.displayName = 'GroupDescription';
+
+;// CONCATENATED MODULE: ./src/components/Group/GroupExpandedContent.tsx
+function GroupExpandedContent_define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function GroupExpandedContent_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            GroupExpandedContent_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function GroupExpandedContent_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function GroupExpandedContent_object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        GroupExpandedContent_ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function GroupExpandedContent_object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = GroupExpandedContent_object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function GroupExpandedContent_object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+
+
+
+var GroupExpandedContent_stylesDirection = {
+    inline: "vkuiGroup__expanded-content--inline",
+    block: "vkuiGroup__expanded-content--block"
+};
+var GroupExpandedContent = function(_param) {
+    var _param_direction = _param.direction, direction = _param_direction === void 0 ? 'inline' : _param_direction, restProps = GroupExpandedContent_object_without_properties(_param, [
+        "direction"
+    ]);
+    return /*#__PURE__*/ react.createElement(RootComponent_RootComponent, GroupExpandedContent_object_spread_props(GroupExpandedContent_object_spread({
+        Component: "div"
+    }, restProps), {
+        baseClassName: clsx("vkuiGroup__expanded-content", GroupExpandedContent_stylesDirection[direction])
+    }));
 };
 
+;// CONCATENATED MODULE: ./src/components/Group/GroupHeader.tsx
+function GroupHeader_define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function GroupHeader_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            GroupHeader_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function GroupHeader_object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = GroupHeader_object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function GroupHeader_object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+
+
+var GroupHeader = function(_param) {
+    var className = _param.className, restProps = GroupHeader_object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ react.createElement("div", GroupHeader_object_spread({
+        className: clsx(className, "vkuiGroup__header")
+    }, restProps));
+};
+GroupHeader.displayName = 'GroupHeader';
+
+;// CONCATENATED MODULE: ./src/components/Group/Group.tsx
+function Group_object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = Group_object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function Group_object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+
+
+
+
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Group
+ */ var Group = function(_param) {
+    var header = _param.header, description = _param.description, children = _param.children, restProps = Group_object_without_properties(_param, [
+        "header",
+        "description",
+        "children"
+    ]);
+    return /*#__PURE__*/ react.createElement(GroupContainer, restProps, react_utils_hasReactNode(header) && /*#__PURE__*/ react.createElement(GroupHeader, null, header), children, react_utils_hasReactNode(description) && /*#__PURE__*/ react.createElement(GroupDescription, null, description));
+};
+Group.displayName = 'Group';
+Group.Container = GroupContainer;
+Group.Container.displayName = 'Group.Container';
+Group.Header = GroupHeader;
+Group.Header.displayName = 'Group.Header';
+Group.Description = GroupDescription;
+Group.Description.displayName = 'Group.Description';
+Group.ExpandedContent = GroupExpandedContent;
+Group.ExpandedContent.displayName = 'Group.ExpandedContent';
+
 ;// CONCATENATED MODULE: ./src/components/Gradient/Gradient.module.css
 // extracted by mini-css-extract-plugin
 
@@ -27331,10 +27877,15 @@ function RichCell_object_without_properties_loose(source, excluded) {
 var RichCell_sizeYClassNames = RichCell_define_property({
     none: "vkuiRichCell--sizeY-none"
 }, 'compact', "vkuiRichCell--sizeY-compact");
+var alignAfterClassNames = {
+    start: "vkuiRichCell__content-after--align-start",
+    center: "vkuiRichCell__content-after--align-center",
+    end: "vkuiRichCell__content-after--align-end"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
  */ var RichCell = function(_param) {
-    var subhead = _param.subhead, children = _param.children, text = _param.text, caption = _param.caption, before = _param.before, after = _param.after, afterCaption = _param.afterCaption, bottom = _param.bottom, actions = _param.actions, multiline = _param.multiline, className = _param.className, restProps = RichCell_object_without_properties(_param, [
+    var subhead = _param.subhead, children = _param.children, text = _param.text, caption = _param.caption, before = _param.before, after = _param.after, afterCaption = _param.afterCaption, bottom = _param.bottom, actions = _param.actions, multiline = _param.multiline, className = _param.className, _param_afterAlign = _param.afterAlign, afterAlign = _param_afterAlign === void 0 ? 'start' : _param_afterAlign, restProps = RichCell_object_without_properties(_param, [
         "subhead",
         "children",
         "text",
@@ -27345,9 +27896,22 @@ var RichCell_sizeYClassNames = RichCell_define_property({
         "bottom",
         "actions",
         "multiline",
-        "className"
+        "className",
+        "afterAlign"
     ]);
     var _useAdaptivity = useAdaptivity_useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? 'none' : _useAdaptivity_sizeY;
+    var afterRender = function() {
+        if (!after && !afterCaption) {
+            return;
+        }
+        return /*#__PURE__*/ react.createElement("div", {
+            className: clsx("vkuiRichCell__content-after", alignAfterClassNames[afterAlign])
+        }, after && /*#__PURE__*/ react.createElement("div", {
+            className: "vkuiRichCell__after-children"
+        }, after), afterCaption && /*#__PURE__*/ react.createElement("div", {
+            className: "vkuiRichCell__after-caption"
+        }, afterCaption));
+    };
     return /*#__PURE__*/ react.createElement(Tappable_Tappable, RichCell_object_spread_props(RichCell_object_spread({}, restProps), {
         className: clsx("vkuiRichCell", !multiline && "vkuiRichCell--text-ellipsis", sizeY !== 'regular' && RichCell_sizeYClassNames[sizeY], className)
     }), before && /*#__PURE__*/ react.createElement("div", {
@@ -27368,17 +27932,11 @@ var RichCell_sizeYClassNames = RichCell_define_property({
     }, text), caption && /*#__PURE__*/ react.createElement(Subhead_Subhead, {
         Component: "div",
         className: "vkuiRichCell__caption"
-    }, caption)), (after || afterCaption) && /*#__PURE__*/ react.createElement("div", {
-        className: "vkuiRichCell__content-after"
-    }, after && /*#__PURE__*/ react.createElement("div", {
-        className: "vkuiRichCell__after-children"
-    }, after), afterCaption && /*#__PURE__*/ react.createElement("div", {
-        className: "vkuiRichCell__after-caption"
-    }, afterCaption))), bottom && /*#__PURE__*/ react.createElement("div", {
+    }, caption)), afterAlign === 'start' && afterRender()), bottom && /*#__PURE__*/ react.createElement("div", {
         className: "vkuiRichCell__bottom"
     }, bottom), actions && /*#__PURE__*/ react.createElement("div", {
         className: "vkuiRichCell__actions"
-    }, actions)));
+    }, actions)), afterAlign !== 'start' && afterRender());
 };
 RichCell.Icon = RichCellIcon;
 
@@ -28392,7 +28950,6 @@ var helpers_calcMin = function(param) {
                 return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;
             }
     }
-    return undefined;
 };
 var helpers_calcMax = function(param) {
     var _param_slides = param.slides, slides = _param_slides === void 0 ? [] : _param_slides, _param_viewportOffsetWidth = param.viewportOffsetWidth, viewportOffsetWidth = _param_viewportOffsetWidth === void 0 ? 0 : _param_viewportOffsetWidth, isCenterWithCustomWidth = param.isCenterWithCustomWidth;
@@ -29178,6 +29735,7 @@ function CarouselBase_unsupported_iterable_to_array(o, minLen) {
 
 
 
+
 var CarouselBase_stylesBullets = {
     dark: "vkuiBaseGallery__bullets--dark",
     light: "vkuiBaseGallery__bullets--light"
@@ -29361,10 +29919,8 @@ var CarouselBase_CarouselBase = function(_param) {
     }, [
         slideIndex
     ]);
-    useIsomorphicLayoutEffect(function() {
-        initializeSlides();
-    }, [
-        children,
+    useMutationObserver(layerRef, initializeSlides);
+    useIsomorphicLayoutEffect(initializeSlides, [
         align,
         slideWidth
     ]);
@@ -30413,7 +30969,6 @@ var useBooleanState_useBooleanState = function() {
 
 ;// CONCATENATED MODULE: ./src/hooks/useNativeFormResetListener.ts
 
-
 var useNativeFormResetListener_useNativeFormResetListener = function(ref, handler) {
     useIsomorphicLayoutEffect(function() {
         if (!ref.current) {
@@ -36522,7 +37077,7 @@ var ChipsInputBase_ChipsInputBase = function(_param) {
         removeChipOption(v, getChipOptionIndexByValueProp(v, value));
     };
     var handleRootClick = function(event) {
-        if (contains(event.currentTarget, getActiveElementByAnotherElement(event.currentTarget))) {
+        if (event.defaultPrevented || contains(event.currentTarget, getActiveElementByAnotherElement(event.currentTarget))) {
             return;
         }
         if (inputRef.current) {
@@ -37026,7 +37581,6 @@ function select_unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return select_array_like_to_array(o, minLen);
 }
 
-
 function select_getOptionLabelDefault(option) {
     return option.label;
 }
@@ -37347,7 +37901,9 @@ var useHorizontalScrollController_useHorizontalScrollController = function(boxRe
     var setScrollPositionFromTracker = function(trackerLeft) {
         var progress = trackerLeft / (clientWidth.current - trackerWidth.current);
         if (boxRef.current !== null) {
-            boxRef.current.scrollLeft = (scrollWidth.current - clientWidth.current) * progress;
+            boxRef.current.scroll({
+                left: (scrollWidth.current - clientWidth.current) * progress
+            });
         }
     };
     var dragging = function(e) {
@@ -37474,7 +38030,9 @@ var useVerticalScrollController_useVerticalScrollController = function(boxRef, a
     var setScrollPositionFromTracker = function(trackerTop) {
         var progress = trackerTop / (clientHeight.current - trackerHeight.current);
         if (boxRef.current !== null) {
-            boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;
+            boxRef.current.scroll({
+                top: (scrollHeight.current - clientHeight.current) * progress
+            });
         }
     };
     var dragging = function(e) {
@@ -38532,7 +39090,7 @@ var ChipsSelect_findIndexBefore = function() {
  */ var ChipsSelect = function(_param) {
     var // FormFieldProps
     labelledbyId = _param.id, getRootRef = _param.getRootRef, className = _param.className, _param_status = _param.status, status = _param_status === void 0 ? 'default' : _param_status, dropdownIconProp = _param.icon, onChangeStart = _param.onChangeStart, // CustomSelectDropdownProps
-    optionsProp = _param.options, tmp = _param.placement, placementProp = tmp === void 0 ? 'bottom' : tmp, _param_closeAfterSelect = _param.closeAfterSelect, closeAfterSelect = _param_closeAfterSelect === void 0 ? true : _param_closeAfterSelect, _param_selectedBehavior = _param.selectedBehavior, selectedBehavior = _param_selectedBehavior === void 0 ? DEFAULT_SELECTED_BEHAVIOR : _param_selectedBehavior, _param_emptyText = _param.emptyText, emptyText = _param_emptyText === void 0 ? DEFAULT_EMPTY_TEXT : _param_emptyText, _param_creatable = _param.creatable, creatable = _param_creatable === void 0 ? false : _param_creatable, _param_fetching = _param.fetching, fetching = _param_fetching === void 0 ? false : _param_fetching, dropdownAutoWidth = _param.dropdownAutoWidth, forceDropdownPortal = _param.forceDropdownPortal, _param_noMaxHeight = _param.noMaxHeight, noMaxHeight = _param_noMaxHeight === void 0 ? false : _param_noMaxHeight, _param_filterFn = _param.filterFn, filterFn = _param_filterFn === void 0 ? defaultFilterFn : _param_filterFn, dropdownTestId = _param.dropdownTestId, onClose = _param.onClose, onOpen = _param.onOpen, overscrollBehavior = _param.overscrollBehavior, // ChipsInputProps
+    optionsProp = _param.options, tmp = _param.placement, placementProp = tmp === void 0 ? 'bottom' : tmp, _param_closeAfterSelect = _param.closeAfterSelect, closeAfterSelect = _param_closeAfterSelect === void 0 ? true : _param_closeAfterSelect, _param_selectedBehavior = _param.selectedBehavior, selectedBehavior = _param_selectedBehavior === void 0 ? DEFAULT_SELECTED_BEHAVIOR : _param_selectedBehavior, _param_emptyText = _param.emptyText, emptyText = _param_emptyText === void 0 ? DEFAULT_EMPTY_TEXT : _param_emptyText, _param_creatable = _param.creatable, creatable = _param_creatable === void 0 ? false : _param_creatable, _param_fetching = _param.fetching, fetching = _param_fetching === void 0 ? false : _param_fetching, dropdownAutoWidth = _param.dropdownAutoWidth, forceDropdownPortal = _param.forceDropdownPortal, _param_noMaxHeight = _param.noMaxHeight, noMaxHeight = _param_noMaxHeight === void 0 ? false : _param_noMaxHeight, _param_filterFn = _param.filterFn, filterFn = _param_filterFn === void 0 ? defaultFilterFn : _param_filterFn, dropdownTestId = _param.dropdownTestId, onClose = _param.onClose, onOpen = _param.onOpen, overscrollBehavior = _param.overscrollBehavior, renderDropdown = _param.renderDropdown, // ChipsInputProps
     getRef = _param.getRef, valueProp = _param.value, defaultValue = _param.defaultValue, inputValueProp = _param.inputValue, defaultInputValue = _param.defaultInputValue, disabled = _param.disabled, readOnly = _param.readOnly, _param_getOptionValue = _param.getOptionValue, getOptionValue = _param_getOptionValue === void 0 ? getOptionValueDefault : _param_getOptionValue, _param_getOptionLabel = _param.getOptionLabel, getOptionLabel = _param_getOptionLabel === void 0 ? getOptionLabelDefault : _param_getOptionLabel, _param_getNewOptionData = _param.getNewOptionData, getNewOptionData = _param_getNewOptionData === void 0 ? getNewOptionDataDefault : _param_getNewOptionData, _param_renderChip = _param.renderChip, renderChip = _param_renderChip === void 0 ? renderChipDefault : _param_renderChip, _param_renderOption = _param.renderOption, renderOption = _param_renderOption === void 0 ? renderOptionDefault : _param_renderOption, onChange = _param.onChange, onFocusProp = _param.onFocus, onInputChangeProp = _param.onInputChange, onBlurProp = _param.onBlur, onKeyDownProp = _param.onKeyDown, _param_dropdownOffsetDistance = _param.dropdownOffsetDistance, dropdownOffsetDistance = _param_dropdownOffsetDistance === void 0 ? 0 : _param_dropdownOffsetDistance, allowClearButton = _param.allowClearButton, clearButtonTestId = _param.clearButtonTestId, restProps = ChipsSelect_object_without_properties(_param, [
         "id",
         "getRootRef",
@@ -38555,6 +39113,7 @@ var ChipsSelect_findIndexBefore = function() {
         "onClose",
         "onOpen",
         "overscrollBehavior",
+        "renderDropdown",
         "getRef",
         "value",
         "defaultValue",
@@ -38754,6 +39313,95 @@ var ChipsSelect_findIndexBefore = function() {
         setOpened
     ]);
     useGlobalOnClickOutside(handleClickOutside, opened ? rootRef : null, opened ? dropdownScrollBoxRef : null);
+    var onDropdownIconClick = React.useCallback(function(e) {
+        if (opened) {
+            e.preventDefault();
+            setOpened(false);
+        }
+    }, [
+        opened,
+        setOpened
+    ]);
+    var dropdownContent = React.useMemo(function() {
+        var defaultDropdownContent = options.map(function(option, index) {
+            var dropdownItemId = "".concat(dropdownId, "-").concat(index);
+            if (isEmptyOptionPreset(option)) {
+                return /*#__PURE__*/ React.createElement(Footnote, {
+                    key: "empty-text",
+                    className: "vkuiChipsSelect__empty"
+                }, option.placeholder);
+            }
+            if (isCreateNewOptionPreset(option)) {
+                return /*#__PURE__*/ React.createElement(CustomSelectOption, {
+                    key: "create-new-option",
+                    id: dropdownItemId,
+                    hovered: focusedOptionIndex === index,
+                    onMouseDown: function() {
+                        return addOptionFromInput(inputValue);
+                    },
+                    onMouseEnter: function() {
+                        return setFocusedOptionIndex(index);
+                    }
+                }, option.actionText);
+            }
+            return /*#__PURE__*/ React.createElement(React.Fragment, {
+                key: "".concat(ChipsSelect_type_of(option.value), "-").concat(option.value)
+            }, renderOption({
+                id: dropdownItemId,
+                disabled: option.disabled,
+                hovered: focusedOption ? getOptionValue(option) === getOptionValue(focusedOption) : false,
+                children: option.label,
+                selected: !!value.find(function(selectedOption) {
+                    return getOptionValue(selectedOption) === getOptionValue(option);
+                }),
+                getRootRef: function getRootRef(node) {
+                    if (node) {
+                        chipsSelectOptions[index] = node;
+                    }
+                },
+                onMouseDown: function onMouseDown(event) {
+                    if (option.disabled) {
+                        return;
+                    }
+                    if (onChangeStart) {
+                        onChangeStart(event, option);
+                    }
+                    if (!event.defaultPrevented) {
+                        closeAfterSelect && setOpened(false);
+                        addOption(option);
+                        clearInput();
+                    }
+                },
+                onMouseEnter: function onMouseEnter() {
+                    setFocusedOptionIndex(index);
+                }
+            }, option));
+        });
+        if (renderDropdown) {
+            return renderDropdown({
+                defaultDropdownContent: defaultDropdownContent
+            });
+        }
+        return defaultDropdownContent;
+    }, [
+        addOption,
+        addOptionFromInput,
+        chipsSelectOptions,
+        clearInput,
+        closeAfterSelect,
+        dropdownId,
+        focusedOption,
+        focusedOptionIndex,
+        getOptionValue,
+        inputValue,
+        onChangeStart,
+        options,
+        renderDropdown,
+        renderOption,
+        setFocusedOptionIndex,
+        setOpened,
+        value
+    ]);
     var openedClassNames = React.useMemo(function() {
         return opened && dropdownOffsetDistance === 0 && (dropdownVerticalPlacement.includes('top') ? "vkuiChipsSelect--pop-up" : "vkuiChipsSelect--pop-down") || undefined;
     }, [
@@ -38774,7 +39422,8 @@ var ChipsSelect_findIndexBefore = function() {
         status: status,
         after: dropdownIconProp || /*#__PURE__*/ React.createElement(DropdownIcon, {
             opened: opened,
-            className: clearButtonShown ? "vkuiChipsSelect__dropdown-icon" : undefined
+            onClick: onDropdownIconClick,
+            className: classNames("vkuiChipsSelect__dropdown-icon", clearButtonShown && "vkuiChipsSelect__dropdown-icon--withOffset")
         }),
         // option
         value: value,
@@ -38813,60 +39462,7 @@ var ChipsSelect_findIndexBefore = function() {
         id: dropdownId,
         role: "listbox",
         "aria-labelledby": labelledbyId
-    }, options.map(function(option, index) {
-        var dropdownItemId = "".concat(dropdownId, "-").concat(index);
-        if (isEmptyOptionPreset(option)) {
-            return /*#__PURE__*/ React.createElement(Footnote, {
-                key: "empty-text",
-                className: "vkuiChipsSelect__empty"
-            }, option.placeholder);
-        }
-        if (isCreateNewOptionPreset(option)) {
-            return /*#__PURE__*/ React.createElement(CustomSelectOption, {
-                key: "create-new-option",
-                id: dropdownItemId,
-                hovered: focusedOptionIndex === index,
-                onMouseDown: function() {
-                    return addOptionFromInput(inputValue);
-                },
-                onMouseEnter: function() {
-                    return setFocusedOptionIndex(index);
-                }
-            }, option.actionText);
-        }
-        return /*#__PURE__*/ React.createElement(React.Fragment, {
-            key: "".concat(ChipsSelect_type_of(option.value), "-").concat(option.value)
-        }, renderOption({
-            id: dropdownItemId,
-            disabled: option.disabled,
-            hovered: focusedOption ? getOptionValue(option) === getOptionValue(focusedOption) : false,
-            children: option.label,
-            selected: !!value.find(function(selectedOption) {
-                return getOptionValue(selectedOption) === getOptionValue(option);
-            }),
-            getRootRef: function getRootRef(node) {
-                if (node) {
-                    chipsSelectOptions[index] = node;
-                }
-            },
-            onMouseDown: function onMouseDown(event) {
-                if (option.disabled) {
-                    return;
-                }
-                if (onChangeStart) {
-                    onChangeStart(event, option);
-                }
-                if (!event.defaultPrevented) {
-                    closeAfterSelect && setOpened(false);
-                    addOption(option);
-                    clearInput();
-                }
-            },
-            onMouseEnter: function onMouseEnter() {
-                setFocusedOptionIndex(index);
-            }
-        }, option));
-    })));
+    }, dropdownContent));
 };
 
 ;// CONCATENATED MODULE: ./src/components/Slider/SliderThumb/SliderThumb.module.css
@@ -39179,7 +39775,6 @@ function Slider_helpers_unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return Slider_helpers_array_like_to_array(o, minLen);
 }
 
-
 var helpers_toPercent = function(v, min, max) {
     return (v - min) / (max - min) * 100;
 };
@@ -40425,6 +41020,9 @@ function CheckboxInput_object_without_properties_loose(source, excluded) {
 
 
 
+function setIndeterminate(el, indeterminate) {
+    el.indeterminate = indeterminate;
+}
 var CheckboxInput_warn = warnOnce('Checkbox');
 function CheckboxInput(_param) {
     var className = _param.className, style = _param.style, getRootRef = _param.getRootRef, getRef = _param.getRef, indeterminate = _param.indeterminate, defaultIndeterminate = _param.defaultIndeterminate, onChange = _param.onChange, restProps = CheckboxInput_object_without_properties(_param, [
@@ -40442,7 +41040,7 @@ function CheckboxInput(_param) {
     react.useEffect(function() {
         var indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
         if (inputRef.current) {
-            inputRef.current.indeterminate = Boolean(indeterminateValue);
+            setIndeterminate(inputRef.current, Boolean(indeterminateValue));
         }
     }, [
         defaultIndeterminate,
@@ -40451,10 +41049,10 @@ function CheckboxInput(_param) {
     ]);
     var handleChange = react.useCallback(function(event) {
         if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined && inputRef.current) {
-            inputRef.current.indeterminate = false;
+            setIndeterminate(inputRef.current, false);
         }
         if (indeterminate !== undefined && inputRef.current) {
-            inputRef.current.indeterminate = indeterminate;
+            setIndeterminate(inputRef.current, Boolean(indeterminate));
         }
         onChange && onChange(event);
     }, [
@@ -41272,6 +41870,7 @@ var filter = function(options, inputValue, filterFn) {
     var scrollBoxRef = React.useRef(null);
     var selectElRef = useExternRef(getRef);
     var optionsWrapperRef = React.useRef(null);
+    var selectInputRef = useExternRef(getSelectInputRef);
     var _React_useState1 = CustomSelect_sliced_to_array(React.useState(-1), 2), focusedOptionIndex = _React_useState1[0], setFocusedOptionIndex = _React_useState1[1];
     var _React_useState2 = CustomSelect_sliced_to_array(React.useState(props.value !== undefined), 2), isControlledOutside = _React_useState2[0], setIsControlledOutside = _React_useState2[1];
     var _React_useState3 = CustomSelect_sliced_to_array(React.useState(function() {
@@ -41470,13 +42069,15 @@ var filter = function(options, inputValue, filterFn) {
         nativeSelectValue
     ]);
     var onFocus = React.useCallback(function() {
-        var _selectElRef_current;
+        var _selectElRef_current, _selectInputRef_current;
         var event = new Event('focusin', {
             bubbles: true
         });
         (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
+        (_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.select();
     }, [
-        selectElRef
+        selectElRef,
+        selectInputRef
     ]);
     var onClick = React.useCallback(function() {
         if (opened) {
@@ -41705,7 +42306,6 @@ var filter = function(options, inputValue, filterFn) {
         renderDropdown,
         renderOption
     ]);
-    var selectInputRef = useExternRef(getSelectInputRef);
     var focusOnInputTimerRef = React.useRef();
     var focusOnInput = React.useCallback(function() {
         clearTimeout(focusOnInputTimerRef.current);
@@ -41786,11 +42386,14 @@ var filter = function(options, inputValue, filterFn) {
         selectInputRef
     ]);
     var preventInputBlurWhenClickInsideFocusedSelectArea = function(e) {
+        var _selectInputRef_current;
         // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,
         // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
         // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
         var isInputFocused = document && document.activeElement === selectInputRef.current;
-        if (isInputFocused) {
+        var clickTarget = e.target;
+        var inputClicked = (_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.contains(clickTarget);
+        if (isInputFocused && !inputClicked) {
             e.preventDefault();
         }
     };
@@ -42190,7 +42793,6 @@ function Select_object_without_properties_loose(source, excluded) {
 
 ;// CONCATENATED MODULE: ./src/hooks/useAutoFocus.ts
 
-
 function useAutoFocus_useAutoFocus(ref, autoFocus) {
     useIsomorphicLayoutEffect(function() {
         if (!autoFocus || !ref.current) {
@@ -42648,14 +43250,12 @@ var DatePickerNative = function(_param) {
         onDateChange
     ]);
     var inputProps = restProps;
-    if (value) {
-        // контролируемый компонент
-        inputProps.value = convertToInputFormat(value);
-    } else {
-        // неконтролируемый компонент
-        inputProps.defaultValue = convertToInputFormat(defaultValue);
-    }
-    return /*#__PURE__*/ React.createElement(Input, DatePicker_object_spread_props(DatePicker_object_spread({}, inputProps), {
+    var valueProps = value ? {
+        value: convertToInputFormat(value)
+    } : {
+        defaultValue: convertToInputFormat(defaultValue)
+    };
+    return /*#__PURE__*/ React.createElement(Input, DatePicker_object_spread_props(DatePicker_object_spread({}, inputProps, valueProps), {
         type: "date",
         onChange: onStringChange,
         min: convertToInputFormat(min),
@@ -46947,9 +47547,6 @@ function Popover_unsupported_iterable_to_array(o, minLen) {
     var popover = null;
     if (shown || keepMounted) {
         var hidden = keepMounted && !shown;
-        if (!hidden) {
-            floatingProps.style.zIndex = String(zIndex);
-        }
         var arrow = null;
         if (withArrow) {
             var arrowCoords = middlewareData.arrow;
@@ -46964,10 +47561,14 @@ function Popover_unsupported_iterable_to_array(o, minLen) {
         }
         popover = /*#__PURE__*/ React.createElement(AppRootPortal, {
             usePortal: usePortal
-        }, /*#__PURE__*/ React.createElement("div", Popover_object_spread({
+        }, /*#__PURE__*/ React.createElement("div", Popover_object_spread_props(Popover_object_spread({
             ref: refs.setFloating,
             className: classNames("vkuiPopover", hidden && "vkuiPopover--hidden")
-        }, floatingProps), /*#__PURE__*/ React.createElement(FocusTrap, Popover_object_spread_props(Popover_object_spread({}, restPopoverProps), {
+        }, floatingProps), {
+            style: Popover_object_spread({
+                zIndex: !hidden ? zIndex : undefined
+            }, floatingProps.style)
+        }), /*#__PURE__*/ React.createElement(FocusTrap, Popover_object_spread_props(Popover_object_spread({}, restPopoverProps), {
             role: role,
             className: classNames("vkuiPopover__in", noStyling ? undefined : "vkuiPopover__in--withStyling", willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in, transformOriginClassNames[resolvedPlacement], className),
             mount: !hidden,
@@ -46992,13 +47593,6 @@ var useNavId = function() {
     };
 };
 
-;// CONCATENATED MODULE: ./src/components/ModalRoot/useModalRootContext.tsx
-
-
-var useModalRootContext = function() {
-    return React.useContext(ModalRootContext);
-};
-
 ;// CONCATENATED MODULE: ./src/lib/removeObjectKeys.ts
 function removeObjectKeys_define_property(obj, key, value) {
     if (key in obj) {
@@ -47838,6 +48432,7 @@ var ViewInfinite = withContext(withContext(withContext(withPlatform(withDOM(View
 
 
 
+
 /**
  * Modals
  */