@vkontakte/vkui 6.2.2 → 6.3.0

package/dist/vkui.js.tmp

@@ -459,105 +459,6 @@ if (true) {
 } else {}
 
 
-/***/ }),
-
-/***/ 712:
-/***/ ((module) => {
-
-/**
- * Храним брейкпоинты в JS файле для синхронизации значений между TS и CSS.
- *
- * @type {{
- *  DESKTOP: 1280,
- *  TABLET: 1024,
- *  SMALL_TABLET: 768,
- *  MOBILE: 320,
- *  MOBILE_LANDSCAPE_HEIGHT: 415,
- *  MEDIUM_HEIGHT: 720
- * }}
- */ var BREAKPOINTS = {
-    DESKTOP: 1280,
-    TABLET: 1024,
-    SMALL_TABLET: 768,
-    MOBILE: 320,
-    MOBILE_LANDSCAPE_HEIGHT: 415,
-    MEDIUM_HEIGHT: 720
-};
-/**
- * Луч [a;+∞)
- *
- * @param {number} a
- * @returns {string}
- */ function widthPlus(a) {
-    return "(min-width: ".concat(a, "px)");
-}
-/**
- * Открытый луч (-∞;b)
- *
- * @param {number} b
- * @returns {string}
- */ function widthMinus(b) {
-    // NOTE: `not` плохо поддерживается, поэтому используем max-width и вычитаем
-    // от числа 0.1
-    return "(max-width: ".concat(b - 0.1, "px)");
-}
-/**
- * Полуинтервал [a;b)
- *
- * @param {number} a
- * @param {number} b
- * @returns {string}
- */ function widthHalfInterval(a, b) {
-    return "".concat(widthPlus(a), " and ").concat(widthMinus(b));
-}
-/**
- * Луч [a;+∞)
- *
- * @param {number} a
- * @returns {string}
- */ function heightPlus(a) {
-    return "(min-height: ".concat(a, "px)");
-}
-/**
- * Открытый луч (-∞;b)
- *
- * @param {number} b
- * @returns {string}
- */ function heightMinus(b) {
-    // NOTE: `not` плохо поддерживается, поэтому используем max-width и вычитаем
-    // от числа 0.1
-    return "(max-height: ".concat(b - 0.1, "px)");
-}
-/**
- * Полуинтервал [a;b)
- *
- * @param {number} a
- * @param {number} b
- * @returns {string}
- */ function heightHalfInterval(a, b) {
-    return "".concat(heightPlus(a), " and ").concat(heightMinus(b));
-}
-var MEDIA_QUERIES = {
-    DESKTOP_PLUS: widthPlus(BREAKPOINTS.DESKTOP),
-    TABLET: widthHalfInterval(BREAKPOINTS.TABLET, BREAKPOINTS.DESKTOP),
-    SMALL_TABLET_PLUS: widthPlus(BREAKPOINTS.SMALL_TABLET),
-    SMALL_TABLET: widthHalfInterval(BREAKPOINTS.SMALL_TABLET, BREAKPOINTS.TABLET),
-    MOBILE: widthHalfInterval(BREAKPOINTS.MOBILE, BREAKPOINTS.SMALL_TABLET),
-    MEDIUM_HEIGHT: heightPlus(BREAKPOINTS.MEDIUM_HEIGHT),
-    MOBILE_LANDSCAPE_HEIGHT: heightPlus(BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT)
-};
-module.exports = {
-    BREAKPOINTS: BREAKPOINTS,
-    MEDIA_QUERIES: MEDIA_QUERIES,
-    widthHalfInterval: widthHalfInterval,
-    widthPlus: widthPlus,
-    widthMinus: widthMinus,
-    heightHalfInterval: heightHalfInterval,
-    heightPlus: heightPlus,
-    heightMinus: heightMinus
-};
-
-
 /***/ })
 
 /******/ 	});
@@ -599,7 +500,7 @@ var __webpack_exports__ = {};
 (() => {
 "use strict";
 
-// UNUSED EXPORTS: Accordion, ActionSheet, ActionSheetDefaultIosCloseItem, ActionSheetItem, AdaptiveIconRenderer, AdaptivityProvider, Alert, AppRoot, Appearance, AppearanceProvider, AspectRatio, Avatar, Badge, Banner, Button, ButtonGroup, Calendar, CalendarRange, Caption, Card, CardGrid, CardScroll, Cell, CellButton, Checkbox, Chip, ChipsInput, ChipsSelect, ConfigProvider, ConfigProviderContext, ContentBadge, ContentCard, Counter, CustomScrollView, CustomSelect, CustomSelectOption, DateInput, DatePicker, DateRangeInput, DisplayTitle, Div, DropZone, EllipsisText, Epic, File, FixedLayout, Flex, Footer, Footnote, FormField, FormItem, FormLayoutGroup, FormStatus, Gallery, Gradient, GridAvatar, Group, Header, Headline, HorizontalCell, HorizontalCellShowMore, HorizontalScroll, IconButton, Image, ImageBase, ImageBaseContext, InfoRow, Input, Link, List, LocaleProvider, Mark, MiniInfoCell, ModalCard, ModalCardBase, ModalDismissButton, ModalPage, ModalPageHeader, ModalRoot, ModalRootContext, NativeSelect, OnboardingTooltip, OnboardingTooltipContainer, Pagination, Panel, PanelHeader, PanelHeaderBack, PanelHeaderButton, PanelHeaderClose, PanelHeaderContent, PanelHeaderContext, PanelHeaderEdit, PanelHeaderSubmit, PanelSpinner, Paragraph, Placeholder, Platform, PlatformProvider, PopoutWrapper, Popover, Popper, Progress, PullToRefresh, Radio, RadioGroup, RichCell, Root, SSRWrapper, ScreenSpinner, ScrollArrow, Search, SegmentedControl, Select, SelectMimicry, Separator, SimpleCell, SizeType, Skeleton, Slider, Snackbar, Spacing, Spinner, SplitCol, SplitLayout, Subhead, SubnavigationBar, SubnavigationButton, Switch, Tabbar, TabbarItem, Tabs, TabsItem, Tappable, Text, Textarea, Title, ToolButton, Tooltip, Touch, UnstyledTextField, UsersStack, View, ViewHeight, ViewWidth, VisuallyHidden, WriteBar, WriteBarIcon, animate, calcInitialsAvatarColor, classNames, filterFnForSelect, getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, getViewHeightByViewportHeight, getViewWidthByViewportWidth, platform, removeObjectKeys, unstable_ViewInfinite, useAdaptivity, useAdaptivityConditionalRender, useAdaptivityWithJSMediaQueries, useAppearance, useConfigProvider, useModalRootContext, useNavDirection, useNavId, useNavTransition, usePagination, usePlatform, useScrollLock, useTodayDate, withModalRootContext, withPlatform
+// UNUSED EXPORTS: Accordion, ActionSheet, ActionSheetDefaultIosCloseItem, ActionSheetItem, AdaptiveIconRenderer, AdaptivityProvider, Alert, AppRoot, Appearance, AppearanceProvider, AspectRatio, Avatar, Badge, Banner, Button, ButtonGroup, Calendar, CalendarRange, Caption, Card, CardGrid, CardScroll, Cell, CellButton, Checkbox, Chip, ChipsInput, ChipsSelect, ConfigProvider, ConfigProviderContext, ContentBadge, ContentCard, Counter, CustomScrollView, CustomSelect, CustomSelectOption, DateInput, DatePicker, DateRangeInput, DisplayTitle, Div, DropZone, EllipsisText, Epic, File, FixedLayout, Flex, Footer, Footnote, FormField, FormItem, FormLayoutGroup, FormStatus, Gallery, Gradient, GridAvatar, Group, Header, Headline, HorizontalCell, HorizontalCellShowMore, HorizontalScroll, IconButton, Image, ImageBase, ImageBaseContext, InfoRow, Input, Link, List, LocaleProvider, Mark, MiniInfoCell, ModalCard, ModalCardBase, ModalDismissButton, ModalPage, ModalPageHeader, ModalRoot, ModalRootContext, NativeSelect, OnboardingTooltip, OnboardingTooltipContainer, Pagination, Panel, PanelHeader, PanelHeaderBack, PanelHeaderButton, PanelHeaderClose, PanelHeaderContent, PanelHeaderContext, PanelHeaderEdit, PanelHeaderSubmit, PanelSpinner, Paragraph, Placeholder, Platform, PlatformProvider, PopoutWrapper, Popover, Popper, Progress, PullToRefresh, Radio, RadioGroup, RichCell, Root, SSRWrapper, ScreenSpinner, ScrollArrow, Search, SegmentedControl, Select, SelectMimicry, Separator, SimpleCell, SimpleGrid, SizeType, Skeleton, Slider, Snackbar, Spacing, Spinner, SplitCol, SplitLayout, Subhead, SubnavigationBar, SubnavigationButton, Switch, Tabbar, TabbarItem, Tabs, TabsItem, Tappable, Text, Textarea, Title, ToolButton, Tooltip, Touch, UnstyledTextField, UsersStack, View, ViewHeight, ViewWidth, VisuallyHidden, WriteBar, WriteBarIcon, animate, calcInitialsAvatarColor, classNames, filterFnForSelect, getBadgeIconSizeByImageBaseSize, getFallbackIconSizeByImageBaseSize, getOverlayIconSizeByImageBaseSize, getViewHeightByViewportHeight, getViewWidthByViewportWidth, platform, removeObjectKeys, unstable_ViewInfinite, useAdaptivity, useAdaptivityConditionalRender, useAdaptivityWithJSMediaQueries, useAppearance, useConfigProvider, useModalRootContext, useNavDirection, useNavId, useNavTransition, usePagination, usePlatform, useScrollLock, useTodayDate, withModalRootContext, withPlatform
 
 ;// CONCATENATED MODULE: ./src/styles/constants.css
 // extracted by mini-css-extract-plugin
@@ -4787,6 +4688,27 @@ var getFirstTouchEventData = function(event) {
         pageY: dataRaw.pageY || 0
     };
 };
+/**
+ * ⚠️ В частности, необходимо для iOS 15. Начиная с этой версии в Safari добавили
+ * pull-to-refresh. CSS св-во `overflow-behavior` появился только с iOS 16.
+ *
+ * Во вторую очередь, полезна блокированием скролла, чтобы пользователь дождался обновления
+ * данных.
+ */ var dom_initializeBrowserGesturePreventionEffect = function(window1) {
+    var options = {
+        passive: false
+    };
+    var handleWindowTouchMove = function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    window1.document.documentElement.classList.add('vkui--disable-overscroll-behavior'); // eslint-disable-line no-restricted-properties
+    window1.addEventListener('touchmove', handleWindowTouchMove, options);
+    return function dispose() {
+        window1.document.documentElement.classList.remove('vkui--disable-overscroll-behavior'); // eslint-disable-line no-restricted-properties
+        window1.removeEventListener('touchmove', handleWindowTouchMove, options);
+    };
+};
 
 ;// CONCATENATED MODULE: ./src/lib/useIsomorphicLayoutEffect.ts
 
@@ -5166,9 +5088,12 @@ var ScrollContext_GlobalScrollController = function(param) {
     var _React_useState = _sliced_to_array(React.useState(false), 2), isScrollLock = _React_useState[0], setScrollLock = _React_useState[1];
     var beforeScrollLockFnSetRef = React.useRef(new Set());
     var getScroll = React.useCallback(function() {
+        var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {
+            compensateKeyboardHeight: true
+        };
         return {
             x: window.pageXOffset,
-            y: getPageYOffsetWithoutKeyboardHeight(window)
+            y: options.compensateKeyboardHeight ? getPageYOffsetWithoutKeyboardHeight(window) : window.pageYOffset
         };
     }, [
         window
@@ -6653,16 +6578,28 @@ function EllipsisText_object_without_properties_loose(source, excluded) {
 }
 
 
+
+
 /** Компонент ограничивает текстовый контент убирая его в многоточие.
  *
  * @since 6.1.0
  * @see https://vkcom.github.io/VKUI/#/EllipsisText
  */ var EllipsisText = function(_param) {
-    var className = _param.className, getRootRef = _param.getRootRef, children = _param.children, maxWidth = _param.maxWidth, restProps = EllipsisText_object_without_properties(_param, [
+    var className = _param.className, getRootRef = _param.getRootRef, children = _param.children, maxWidth = _param.maxWidth, _param_maxLines = _param.maxLines, maxLines = _param_maxLines === void 0 ? 1 : _param_maxLines, restProps = EllipsisText_object_without_properties(_param, [
         "className",
         "getRootRef",
         "children",
-        "maxWidth"
+        "maxWidth",
+        "maxLines"
+    ]);
+    var contentRef = useRef(null);
+    useIsomorphicLayoutEffect(function() {
+        if (contentRef && contentRef.current) {
+            contentRef.current.style.setProperty('-webkit-line-clamp', maxLines > 1 ? "".concat(maxLines) : '');
+        }
+    }, [
+        contentRef,
+        maxLines
     ]);
     return /*#__PURE__*/ React.createElement("span", EllipsisText_object_spread({
         ref: getRootRef,
@@ -6671,7 +6608,8 @@ function EllipsisText_object_without_properties_loose(source, excluded) {
         style: {
             maxWidth: maxWidth
         },
-        className: "vkuiEllipsisText__content"
+        ref: contentRef,
+        className: classNames("vkuiEllipsisText__content", maxLines > 1 && "vkuiEllipsisText__content--multiline")
     }, children));
 };
 
@@ -6759,8 +6697,6 @@ function UnstyledTextField_object_without_properties_loose(source, excluded) {
     }, restProps));
 };
 
-// EXTERNAL MODULE: ./src/shared/breakpoints.js
-var breakpoints = __webpack_require__(712);
 ;// CONCATENATED MODULE: ./src/lib/adaptivity/constants.ts
 function constants_define_property(obj, key, value) {
     if (key in obj) {
@@ -6775,7 +6711,6 @@ function constants_define_property(obj, key, value) {
     }
     return obj;
 }
-
 /**
  * Public API.
  * Брейкпоинты на ширину.
@@ -6812,8 +6747,62 @@ function constants_define_property(obj, key, value) {
 var _obj;
 var constants_VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP = (_obj = {}, constants_define_property(_obj, constants_ViewWidth.SMALL_MOBILE, 'smallMobileMinus'), constants_define_property(_obj, constants_ViewWidth.MOBILE, 'mobile'), constants_define_property(_obj, constants_ViewWidth.SMALL_TABLET, 'smallTablet'), constants_define_property(_obj, constants_ViewWidth.TABLET, 'tablet'), constants_define_property(_obj, constants_ViewWidth.DESKTOP, 'desktopPlus'), _obj);
 
+;// CONCATENATED MODULE: ./src/lib/adaptivity/breakpoints.ts
+var breakpoints_BREAKPOINTS = {
+    DESKTOP: 1280,
+    TABLET: 1024,
+    SMALL_TABLET: 768,
+    MOBILE: 320,
+    MOBILE_LANDSCAPE_HEIGHT: 415,
+    MEDIUM_HEIGHT: 720
+};
+/**
+ * Луч [a;+∞)
+ */ function widthPlus(a) {
+    return "(min-width: ".concat(a, "px)");
+}
+/**
+ * Открытый луч (-∞;b)
+ */ function widthMinus(b) {
+    // NOTE: `not` плохо поддерживается, поэтому используем max-width и вычитаем
+    // от числа 0.1
+    return "(max-width: ".concat(b - 0.1, "px)");
+}
+/**
+ * Полуинтервал [a;b)
+ */ function widthHalfInterval(a, b) {
+    return "".concat(widthPlus(a), " and ").concat(widthMinus(b));
+}
+/**
+ * Луч [a;+∞)
+ */ function heightPlus(a) {
+    return "(min-height: ".concat(a, "px)");
+}
+/**
+ * Открытый луч (-∞;b)
+ */ function heightMinus(b) {
+    // NOTE: `not` плохо поддерживается, поэтому используем max-width и вычитаем
+    // от числа 0.1
+    return "(max-height: ".concat(b - 0.1, "px)");
+}
+/**
+ * Полуинтервал [a;b)
+ */ function heightHalfInterval(a, b) {
+    return "".concat(heightPlus(a), " and ").concat(heightMinus(b));
+}
+var MEDIA_QUERIES = {
+    DESKTOP_PLUS: widthPlus(breakpoints_BREAKPOINTS.DESKTOP),
+    TABLET: widthHalfInterval(breakpoints_BREAKPOINTS.TABLET, breakpoints_BREAKPOINTS.DESKTOP),
+    SMALL_TABLET_PLUS: widthPlus(breakpoints_BREAKPOINTS.SMALL_TABLET),
+    SMALL_TABLET: widthHalfInterval(breakpoints_BREAKPOINTS.SMALL_TABLET, breakpoints_BREAKPOINTS.TABLET),
+    MOBILE: widthHalfInterval(breakpoints_BREAKPOINTS.MOBILE, breakpoints_BREAKPOINTS.SMALL_TABLET),
+    MEDIUM_HEIGHT: heightPlus(breakpoints_BREAKPOINTS.MEDIUM_HEIGHT),
+    MOBILE_LANDSCAPE_HEIGHT: heightPlus(breakpoints_BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT)
+};
+
 ;// CONCATENATED MODULE: ./src/lib/adaptivity/functions.ts
 
+
 /**
  * @public
  */ function getViewWidthByViewportWidth(viewportWidth) {
@@ -6936,6 +6925,7 @@ function functions_tryToCheckIsDesktop(viewWidth, viewHeight, hasPointer, platfo
 
 
 
+
 ;// CONCATENATED MODULE: ./src/lib/callMultiple.ts
 function callMultiple_array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -8005,6 +7995,51 @@ var Tappable_Tappable = function(_param) {
 };
 
 ;// CONCATENATED MODULE: ./src/hooks/useEventListener.ts
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+function _class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) {
+        return descriptor.get.call(receiver);
+    }
+    return descriptor.value;
+}
+function _class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) {
+        descriptor.set.call(receiver, value);
+    } else {
+        if (!descriptor.writable) {
+            throw new TypeError("attempted to set read only private field");
+        }
+        descriptor.value = value;
+    }
+}
+function useEventListener_class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to " + action + " private field on non-instance");
+    }
+    return privateMap.get(receiver);
+}
+function _class_private_field_get(receiver, privateMap) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "get");
+    return _class_apply_descriptor_get(receiver, descriptor);
+}
+function _class_private_field_init(obj, privateMap, value) {
+    _check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function _class_private_field_set(receiver, privateMap, value) {
+    var descriptor = _class_extract_field_descriptor(receiver, privateMap, "set");
+    _class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
 function useEventListener_define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -8018,73 +8053,68 @@ function useEventListener_define_property(obj, key, value) {
     }
     return obj;
 }
-function useEventListener_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) {
-            useEventListener_define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-
 
 
 
-function useEventListener_useEventListener(event, _cb, _options) {
-    var cbRef = react.useRef(_cb);
-    useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function() {
-        cbRef.current = _cb;
-    }, [
-        _cb
-    ]);
-    var cb = react.useCallback(function(e) {
-        return cbRef.current && cbRef.current(e);
-    }, []);
-    var detach = react.useRef(functions_noop);
-    var remove = react.useCallback(function() {
-        detach.current();
-        detach.current = functions_noop;
-    }, []);
-    var add = react.useCallback(function(el) {
+var _target = /*#__PURE__*/ new WeakMap(), _listener = /*#__PURE__*/ new WeakMap();
+var EventListener = function EventListener(type, callback, options) {
+    "use strict";
+    var _this = this;
+    useEventListener_class_call_check(this, EventListener);
+    useEventListener_define_property(this, "callback", functions_noop);
+    useEventListener_define_property(this, "options", undefined);
+    useEventListener_define_property(this, "eventType", void 0);
+    _class_private_field_init(this, _target, {
+        writable: true,
+        value: null
+    });
+    _class_private_field_init(this, _listener, {
+        writable: true,
+        value: function(ev) {
+            _this.callback(ev);
+        }
+    });
+    useEventListener_define_property(this, "add", function(el) {
         if (!dom_canUseDOM) {
             return;
         }
-        remove();
+        _this.remove();
         if (!el) {
             return;
         }
-        var options = useEventListener_object_spread({}, _options);
-        el.addEventListener(event, cb, options);
-        detach.current = function() {
-            return el.removeEventListener(event, cb, options);
-        };
-    }, [
-        _options,
-        cb,
-        event,
-        remove
-    ]);
+        el.addEventListener(_this.eventType, _class_private_field_get(_this, _listener), _this.options);
+        _class_private_field_set(_this, _target, el);
+    });
+    useEventListener_define_property(this, "remove", function() {
+        if (!dom_canUseDOM || !_class_private_field_get(_this, _target)) {
+            return;
+        }
+        _class_private_field_get(_this, _target).removeEventListener(_this.eventType, _class_private_field_get(_this, _listener), _this.options);
+        _class_private_field_set(_this, _target, null);
+    });
+    this.options = options;
+    this.eventType = type;
+    if (callback) {
+        this.callback = callback;
+    }
+};
+function useEventListener_useEventListener(event, _cb, _options) {
+    var ref = react.useRef(null);
+    if (ref.current === null) {
+        ref.current = new EventListener(event, _cb, _options);
+    } else {
+        ref.current.eventType = event;
+        ref.current.options = _options;
+        if (_cb) {
+            ref.current.callback = _cb;
+        }
+    }
     react.useEffect(function() {
-        return remove;
-    }, [
-        remove
-    ]);
-    return react.useMemo(function() {
-        return {
-            add: add,
-            remove: remove
-        };
-    }, [
-        add,
-        remove
-    ]);
+        var _ref_current;
+        var detach = (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.remove.bind(ref.current);
+        return detach;
+    }, []);
+    return ref.current;
 }
 
 ;// CONCATENATED MODULE: ./src/hooks/useGlobalEventListener.ts
@@ -8780,29 +8810,138 @@ var stylesVertical = {
 };
 
 ;// CONCATENATED MODULE: ./src/hooks/useExternRef.ts
+function useExternRef_check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+function useExternRef_class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) {
+        return descriptor.get.call(receiver);
+    }
+    return descriptor.value;
+}
+function useExternRef_class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) {
+        descriptor.set.call(receiver, value);
+    } else {
+        if (!descriptor.writable) {
+            throw new TypeError("attempted to set read only private field");
+        }
+        descriptor.value = value;
+    }
+}
+function useExternRef_class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function useExternRef_class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to " + action + " private field on non-instance");
+    }
+    return privateMap.get(receiver);
+}
+function useExternRef_class_private_field_get(receiver, privateMap) {
+    var descriptor = useExternRef_class_extract_field_descriptor(receiver, privateMap, "get");
+    return useExternRef_class_apply_descriptor_get(receiver, descriptor);
+}
+function useExternRef_class_private_field_init(obj, privateMap, value) {
+    useExternRef_check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function useExternRef_class_private_field_set(receiver, privateMap, value) {
+    var descriptor = useExternRef_class_extract_field_descriptor(receiver, privateMap, "set");
+    useExternRef_class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
+function useExternRef_defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function useExternRef_create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) useExternRef_defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) useExternRef_defineProperties(Constructor, staticProps);
+    return Constructor;
+}
 
 
-function useExternRef_useExternRef() {
-    for(var _len = arguments.length, externRefs = new Array(_len), _key = 0; _key < _len; _key++){
-        externRefs[_key] = arguments[_key];
+var _element = /*#__PURE__*/ new WeakMap(), _externRefs = /*#__PURE__*/ new WeakMap();
+var ExternalRef = /*#__PURE__*/ function() {
+    "use strict";
+    function ExternalRef() {
+        var _this = this;
+        var externRefs = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+        useExternRef_class_call_check(this, ExternalRef);
+        useExternRef_class_private_field_init(this, _element, {
+            writable: true,
+            value: null
+        });
+        useExternRef_class_private_field_init(this, _externRefs, {
+            writable: true,
+            value: new Set()
+        });
+        externRefs.forEach(function(ref) {
+            if (ref) {
+                useExternRef_class_private_field_get(_this, _externRefs).add(ref);
+            }
+        });
     }
-    var stableRef = react.useRef(null);
-    return react.useMemo(function() {
-        return {
-            get current () {
-                return stableRef.current;
-            },
-            set current (el){
-                stableRef.current = el;
-                externRefs.forEach(function(ref) {
-                    if (ref) {
-                        utils_setRef(el, ref);
+    useExternRef_create_class(ExternalRef, [
+        {
+            key: "updateExternRefs",
+            value: function updateExternRefs(refs) {
+                var _this = this;
+                refs.forEach(function(ref) {
+                    if (!ref || useExternRef_class_private_field_get(_this, _externRefs).has(ref)) {
+                        return;
                     }
+                    utils_setRef(useExternRef_class_private_field_get(_this, _element), ref);
+                    useExternRef_class_private_field_get(_this, _externRefs).add(ref);
                 });
             }
-        };
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    externRefs);
+        },
+        {
+            key: "current",
+            get: function get() {
+                return useExternRef_class_private_field_get(this, _element);
+            },
+            set: function set(el) {
+                useExternRef_class_private_field_set(this, _element, el);
+                useExternRef_class_private_field_get(this, _externRefs).forEach(function(ref) {
+                    return utils_setRef(el, ref);
+                });
+            }
+        },
+        {
+            /**
+   * React проверяет наличие свойства current у объектов через hasOwnProperty
+   *
+   * https://github.com/facebook/react/blob/c3cdbec0a78d39b5ff7329384cb41c4573a38212/packages/react-reconciler/src/ReactFiberCommitWork.js#L1612
+   */ key: "hasOwnProperty",
+            value: function hasOwnProperty(v) {
+                return v === 'current';
+            }
+        }
+    ]);
+    return ExternalRef;
+}();
+function useExternRef_useExternRef() {
+    for(var _len = arguments.length, externRefs = new Array(_len), _key = 0; _key < _len; _key++){
+        externRefs[_key] = arguments[_key];
+    }
+    var ref = react.useRef(null);
+    if (ref.current === null) {
+        ref.current = new ExternalRef(externRefs);
+    } else {
+        ref.current.updateExternRefs(externRefs);
+    }
+    return ref.current;
 }
 
 ;// CONCATENATED MODULE: ./src/lib/comparing.ts
@@ -8874,7 +9013,7 @@ function isNotUndefined(value) {
 
 ;// CONCATENATED MODULE: ./src/components/ImageBase/context.ts
 
-var ImageBaseContext = react.createContext({
+var context_ImageBaseContext = react.createContext({
     size: 0
 });
 
@@ -9050,7 +9189,7 @@ function validateSize(imageSize) {
     warnImageBase("`size={".concat(imageSize, "}` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ").concat(arrayOfSizes.join(' | ')), 'log');
 }
 var warnImageBaseBadge = warnOnce('ImageBase.Badge');
-function validateBadgeIcon(imageSize, iconProp) {
+function validators_validateBadgeIcon(imageSize, iconProp) {
     if (imageSize < 24 && iconProp) {
         return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');
     }
@@ -9150,6 +9289,17 @@ function ImageBaseBadge_object_without_properties_loose(source, excluded) {
 
 
 
+function DevelopmentCheck(param) {
+    var children = param.children;
+    var size = React.useContext(ImageBaseContext).size;
+    if (children) {
+        validateBadgeIcon(size, {
+            name: 'children',
+            value: children
+        });
+    }
+    return null;
+}
 var backgroundStyles = {
     stroke: "vkuiImageBaseBadge--background-stroke",
     shadow: "vkuiImageBaseBadge--background-shadow"
@@ -9162,10 +9312,9 @@ var backgroundStyles = {
     var _param_background = _param.background, background = _param_background === void 0 ? 'shadow' : _param_background, restProps = ImageBaseBadge_object_without_properties(_param, [
         "background"
     ]);
-    if (false) { var size; }
-    return /*#__PURE__*/ react.createElement(RootComponent_RootComponent, ImageBaseBadge_object_spread_props(ImageBaseBadge_object_spread({}, restProps), {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(RootComponent_RootComponent, ImageBaseBadge_object_spread_props(ImageBaseBadge_object_spread({}, restProps), {
         baseClassName: classNames_classNames("vkuiImageBaseBadge", backgroundStyles[background])
-    }));
+    })),  false && /*#__PURE__*/ 0);
 };
 ImageBaseBadge.displayName = 'ImageBaseBadge';
 
@@ -9512,6 +9661,12 @@ function ImageBaseOverlay_object_without_properties_loose(source, excluded) {
 
 
 
+function ImageBaseOverlay_DevelopmentCheck(param) {
+    var children = param.children;
+    var size = React.useContext(ImageBaseContext).size;
+    if (false) {}
+    return null;
+}
 var ImageBaseOverlayInteractive = function(_param) {
     var children = _param.children, className = _param.className, getRootRef = _param.getRootRef, disableInteractive = _param.disableInteractive, overlayShown = _param.overlayShown, restProps = ImageBaseOverlay_object_without_properties(_param, [
         "children",
@@ -9528,13 +9683,12 @@ var ImageBaseOverlayInteractive = function(_param) {
         mode: 'inside'
     });
     var keyboardHandlers = useKeyboard_useKeyboard();
-    if (false) { var size; }
-    return /*#__PURE__*/ react.createElement("div", ImageBaseOverlay_object_spread(ImageBaseOverlay_object_spread_props(ImageBaseOverlay_object_spread({}, restProps), {
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", ImageBaseOverlay_object_spread(ImageBaseOverlay_object_spread_props(ImageBaseOverlay_object_spread({}, restProps), {
         tabIndex: 0,
         role: "button",
         className: classNames_classNames("vkuiImageBaseOverlay--clickable", (focusVisible || overlayShown) && "vkuiImageBaseOverlay--visible", focusVisibleClassNames, className),
         ref: getRootRef
-    }), focusEvents, keyboardHandlers), children);
+    }), focusEvents, keyboardHandlers), children),  false && /*#__PURE__*/ 0);
 };
 var ImageBaseOverlayNonInteractive = function(_param) {
     var className = _param.className, getRootRef = _param.getRootRef, disableInteractive = _param.disableInteractive, overlayShownProps = _param.overlayShown, restProps = ImageBaseOverlay_object_without_properties(_param, [
@@ -9697,10 +9851,35 @@ function ImageBase_unsupported_iterable_to_array(o, minLen) {
 /**
  * Размер по умолчанию.
  */ var defaultSize = 24;
+var getObjectFitClassName = function(objectFit) {
+    switch(objectFit){
+        case 'contain':
+            return "vkuiImageBase__img--objectFit-contain";
+        case 'cover':
+            return "vkuiImageBase__img--objectFit-cover";
+        case 'none':
+            return "vkuiImageBase__img--objectFit-none";
+        case 'scale-down':
+            return "vkuiImageBase__img--objectFit-scaleDown";
+    }
+    return undefined;
+};
+var parsePx = function(value) {
+    if (value.endsWith('px')) {
+        return parseInt(value);
+    }
+    return undefined;
+};
+var sizeToNumber = function(size) {
+    if (typeof size === 'string') {
+        return parsePx(size);
+    }
+    return size;
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/ImageBase
  */ var ImageBase = function(_param) {
-    var alt = _param.alt, crossOrigin = _param.crossOrigin, decoding = _param.decoding, loading = _param.loading, referrerPolicy = _param.referrerPolicy, sizes = _param.sizes, src = _param.src, srcSet = _param.srcSet, useMap = _param.useMap, fetchPriority = _param.fetchPriority, getRef = _param.getRef, sizeProp = _param.size, widthImg = _param.width, heightImg = _param.height, widthSize = _param.widthSize, heightSize = _param.heightSize, style = _param.style, _param_noBorder = _param.noBorder, noBorder = _param_noBorder === void 0 ? false : _param_noBorder, fallbackIconProp = _param.fallbackIcon, children = _param.children, onLoad = _param.onLoad, onError = _param.onError, withTransparentBackground = _param.withTransparentBackground, restProps = ImageBase_object_without_properties(_param, [
+    var alt = _param.alt, crossOrigin = _param.crossOrigin, decoding = _param.decoding, loading = _param.loading, referrerPolicy = _param.referrerPolicy, sizes = _param.sizes, src = _param.src, srcSet = _param.srcSet, useMap = _param.useMap, fetchPriority = _param.fetchPriority, getRef = _param.getRef, sizeProp = _param.size, widthImg = _param.width, heightImg = _param.height, widthSize = _param.widthSize, heightSize = _param.heightSize, style = _param.style, _param_noBorder = _param.noBorder, noBorder = _param_noBorder === void 0 ? false : _param_noBorder, fallbackIconProp = _param.fallbackIcon, children = _param.children, onLoad = _param.onLoad, onError = _param.onError, withTransparentBackground = _param.withTransparentBackground, _param_objectFit = _param.objectFit, objectFit = _param_objectFit === void 0 ? 'cover' : _param_objectFit, _param_keepAspectRatio = _param.keepAspectRatio, keepAspectRatio = _param_keepAspectRatio === void 0 ? false : _param_keepAspectRatio, restProps = ImageBase_object_without_properties(_param, [
         "alt",
         "crossOrigin",
         "decoding",
@@ -9723,14 +9902,16 @@ function ImageBase_unsupported_iterable_to_array(o, minLen) {
         "children",
         "onLoad",
         "onError",
-        "withTransparentBackground"
+        "withTransparentBackground",
+        "objectFit",
+        "keepAspectRatio"
     ]);
     var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : minOr([
-        widthSize,
-        heightSize
+        sizeToNumber(widthSize),
+        sizeToNumber(heightSize)
     ], defaultSize);
-    var width = widthSize !== null && widthSize !== void 0 ? widthSize : size;
-    var height = heightSize !== null && heightSize !== void 0 ? heightSize : size;
+    var width = widthSize !== null && widthSize !== void 0 ? widthSize : keepAspectRatio ? undefined : size;
+    var height = heightSize !== null && heightSize !== void 0 ? heightSize : keepAspectRatio ? undefined : size;
     var _React_useState = ImageBase_sliced_to_array(react.useState(false), 2), loaded = _React_useState[0], setLoaded = _React_useState[1];
     var _React_useState1 = ImageBase_sliced_to_array(react.useState(false), 2), failed = _React_useState1[0], setFailed = _React_useState1[1];
     var hasSrc = src || srcSet;
@@ -9765,7 +9946,7 @@ function ImageBase_unsupported_iterable_to_array(o, minLen) {
         imgRef,
         loaded
     ]);
-    return /*#__PURE__*/ react.createElement(ImageBaseContext.Provider, {
+    return /*#__PURE__*/ react.createElement(context_ImageBaseContext.Provider, {
         value: {
             size: size
         }
@@ -9778,11 +9959,15 @@ function ImageBase_unsupported_iterable_to_array(o, minLen) {
     }, restProps), hasSrc && /*#__PURE__*/ react.createElement("img", ImageBase_object_spread({
         ref: imgRef,
         alt: alt,
-        className: "vkuiImageBase__img",
+        className: classNames_classNames("vkuiImageBase__img", getObjectFitClassName(objectFit), keepAspectRatio && "vkuiImageBase__img--keepRatio"),
         crossOrigin: crossOrigin,
         decoding: decoding,
         loading: loading,
         referrerPolicy: referrerPolicy,
+        style: keepAspectRatio ? {
+            width: widthImg || width,
+            height: heightImg || height
+        } : undefined,
         sizes: sizes,
         src: src,
         srcSet: srcSet,
@@ -12291,6 +12476,144 @@ function initGesture(startX, startY) {
     };
 }
 
+;// CONCATENATED MODULE: ./src/components/View/useLayoutEffectCall.tsx
+function useLayoutEffectCall_check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+function useLayoutEffectCall_class_apply_descriptor_get(receiver, descriptor) {
+    if (descriptor.get) {
+        return descriptor.get.call(receiver);
+    }
+    return descriptor.value;
+}
+function useLayoutEffectCall_class_apply_descriptor_set(receiver, descriptor, value) {
+    if (descriptor.set) {
+        descriptor.set.call(receiver, value);
+    } else {
+        if (!descriptor.writable) {
+            throw new TypeError("attempted to set read only private field");
+        }
+        descriptor.value = value;
+    }
+}
+function useLayoutEffectCall_class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function useLayoutEffectCall_class_extract_field_descriptor(receiver, privateMap, action) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to " + action + " private field on non-instance");
+    }
+    return privateMap.get(receiver);
+}
+function useLayoutEffectCall_class_private_field_get(receiver, privateMap) {
+    var descriptor = useLayoutEffectCall_class_extract_field_descriptor(receiver, privateMap, "get");
+    return useLayoutEffectCall_class_apply_descriptor_get(receiver, descriptor);
+}
+function useLayoutEffectCall_class_private_field_init(obj, privateMap, value) {
+    useLayoutEffectCall_check_private_redeclaration(obj, privateMap);
+    privateMap.set(obj, value);
+}
+function useLayoutEffectCall_class_private_field_set(receiver, privateMap, value) {
+    var descriptor = useLayoutEffectCall_class_extract_field_descriptor(receiver, privateMap, "set");
+    useLayoutEffectCall_class_apply_descriptor_set(receiver, descriptor, value);
+    return value;
+}
+function useLayoutEffectCall_defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function useLayoutEffectCall_create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) useLayoutEffectCall_defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) useLayoutEffectCall_defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function useLayoutEffectCall_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;
+}
+
+
+var _fns = /*#__PURE__*/ new WeakMap();
+var LayoutEffectCall = /*#__PURE__*/ (/* unused pure expression or super */ null && (function() {
+    "use strict";
+    function LayoutEffectCall() {
+        var _this = this;
+        useLayoutEffectCall_class_call_check(this, LayoutEffectCall);
+        useLayoutEffectCall_class_private_field_init(this, _fns, {
+            writable: true,
+            value: []
+        });
+        /**
+   * Вызовет функцию после изменения DOM, но до того как пользователь увидит
+   * изменения
+   */ useLayoutEffectCall_define_property(this, "add", function(fn) {
+            useLayoutEffectCall_class_private_field_get(_this, _fns).push(fn);
+        });
+    }
+    useLayoutEffectCall_create_class(LayoutEffectCall, [
+        {
+            /**
+   * Выполняет переданные функции
+   */ key: "run",
+            value: function run() {
+                var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+                try {
+                    for(var _iterator = useLayoutEffectCall_class_private_field_get(this, _fns)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                        var fn = _step.value;
+                        fn();
+                    }
+                } catch (err) {
+                    _didIteratorError = true;
+                    _iteratorError = err;
+                } finally{
+                    try {
+                        if (!_iteratorNormalCompletion && _iterator.return != null) {
+                            _iterator.return();
+                        }
+                    } finally{
+                        if (_didIteratorError) {
+                            throw _iteratorError;
+                        }
+                    }
+                }
+                useLayoutEffectCall_class_private_field_set(this, _fns, []);
+            }
+        }
+    ]);
+    return LayoutEffectCall;
+}()));
+/**
+ * Возвращает функцию которая вызывает callback после изменения DOM, но до того
+ * как пользователь увидит изменения
+ */ function useLayoutEffectCall_useLayoutEffectCall() {
+    var ref = React.useRef(null);
+    if (!ref.current) {
+        ref.current = new LayoutEffectCall();
+    }
+    useIsomorphicLayoutEffect(function() {
+        ref.current.run();
+    });
+    return ref.current.add;
+}
+
 ;// CONCATENATED MODULE: ./src/lib/floating/functions.ts
 
 function functions_checkIsNotAutoPlacement(placement) {
@@ -13514,7 +13837,7 @@ var View_warn = warnOnce('View');
         id: restProps.id
     });
     var scrolls = React.useRef(scrollsCache[id] || {});
-    var afterTransition = React.useRef(noop);
+    var layoutEffectCall = useLayoutEffectCall();
     React.useEffect(function() {
         return function() {
             if (id) {
@@ -13569,25 +13892,20 @@ var View_warn = warnOnce('View');
         setActivePanel(activePanelProp);
         setAnimated(false);
         setIsBack(isBackTransition);
-        afterTransition.current = function() {
+        layoutEffectCall(function() {
             scroll === null || scroll === void 0 ? void 0 : scroll.scrollTo(0, isBackTransition ? scrolls.current[activePanelProp] : 0);
             onTransition && onTransition({
                 isBack: isBackTransition,
                 from: prevPanel,
                 to: activePanelProp
             });
-        };
+        });
     }, [
         activePanelProp,
+        layoutEffectCall,
         onTransition,
         scroll
     ]);
-    useIsomorphicLayoutEffect(function() {
-        afterTransition.current();
-        afterTransition.current = noop;
-    }, [
-        afterTransition.current
-    ]);
     var onAnimationEnd = React.useCallback(function() {
         if (prevPanel !== null) {
             flushTransition(prevPanel, Boolean(isBack));
@@ -13753,7 +14071,9 @@ var View_warn = warnOnce('View');
                 return id === prevActivePanel || id === activePanelProp;
             });
             var isBackTransition = firstLayerId === activePanelProp;
-            scrolls.current[prevActivePanel] = scroll === null || scroll === void 0 ? void 0 : scroll.getScroll().y;
+            scrolls.current[prevActivePanel] = scroll === null || scroll === void 0 ? void 0 : scroll.getScroll({
+                compensateKeyboardHeight: false
+            }).y;
             if (disableAnimation) {
                 flushTransition(prevActivePanel, isBackTransition);
             } else {
@@ -13787,7 +14107,7 @@ var View_warn = warnOnce('View');
                 nextPanel
             ]);
             setIsBack(true);
-            afterTransition.current = function() {
+            layoutEffectCall(function() {
                 if (nextPanel !== null) {
                     scroll === null || scroll === void 0 ? void 0 : scroll.scrollTo(0, scrolls.current[nextPanel]);
                 }
@@ -13796,7 +14116,7 @@ var View_warn = warnOnce('View');
                     from: prevPanel,
                     to: nextPanel
                 });
-            };
+            });
         }
         // Началась анимация завершения свайпа назад.
         // см. `onTransitionEnd()`
@@ -13827,7 +14147,8 @@ var View_warn = warnOnce('View');
         prevSwipingBack,
         scroll,
         swipeBackNextPanel,
-        swipeBackResult
+        swipeBackResult,
+        layoutEffectCall
     ]);
     React.useEffect(function restoreScrollPositionWhenSwipeBackIsCancelled() {
         // Если свайп назад отменился (когда пользователь недостаточно сильно свайпнул)
@@ -14000,18 +14321,19 @@ var Panel_stylesMode = {
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */ var Panel = function(_param) {
-    var _param_centered = _param.centered, centered = _param_centered === void 0 ? false : _param_centered, children = _param.children, nav = _param.nav, modeProp = _param.mode, restProps = Panel_object_without_properties(_param, [
+    var _param_centered = _param.centered, centered = _param_centered === void 0 ? false : _param_centered, children = _param.children, nav = _param.nav, modeProp = _param.mode, disableBackground = _param.disableBackground, restProps = Panel_object_without_properties(_param, [
         "centered",
         "children",
         "nav",
-        "mode"
+        "mode",
+        "disableBackground"
     ]);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? 'none' : _useAdaptivity_sizeX;
     var mode = usePanelMode(modeProp, sizeX);
     return /*#__PURE__*/ React.createElement(NavPanelIdContext.Provider, {
         value: restProps.id || nav
     }, /*#__PURE__*/ React.createElement(RootComponent, Panel_object_spread_props(Panel_object_spread({}, restProps), {
-        baseClassName: classNames("vkuiPanel", Panel_sizeXClassNames[sizeX], centered && 'vkuiInternalPanel--centered', Panel_stylesMode[mode])
+        baseClassName: classNames("vkuiPanel", Panel_sizeXClassNames[sizeX], centered && 'vkuiInternalPanel--centered', disableBackground && "vkuiPanel--disableBackground", Panel_stylesMode[mode])
     }), /*#__PURE__*/ React.createElement(Touch, {
         Component: OnboardingTooltipContainer,
         className: classNames("vkuiPanel__in", 'vkuiInternalPanel__in')
@@ -14388,14 +14710,20 @@ function Separator_object_without_properties_loose(source, excluded) {
 
 
 
+var modeClassNames = {
+    'primary': "vkuiSeparator--mode-primary",
+    'secondary': "vkuiSeparator--mode-secondary",
+    'primary-alpha': "vkuiSeparator--mode-primaryAlpha"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
  */ var Separator_Separator = function(_param) {
-    var wide = _param.wide, restProps = Separator_object_without_properties(_param, [
-        "wide"
+    var wide = _param.wide, _param_mode = _param.mode, mode = _param_mode === void 0 ? 'primary' : _param_mode, restProps = Separator_object_without_properties(_param, [
+        "wide",
+        "mode"
     ]);
     return /*#__PURE__*/ React.createElement(RootComponent, Separator_object_spread_props(Separator_object_spread({}, restProps), {
-        baseClassName: classNames("vkuiSeparator", !wide && "vkuiSeparator--padded")
+        baseClassName: classNames(!wide && "vkuiSeparator--padded", modeClassNames[mode])
     }), /*#__PURE__*/ React.createElement("hr", {
         className: "vkuiSeparator__in"
     }));
@@ -14487,6 +14815,7 @@ function Spacing_object_without_properties_loose(source, excluded) {
 
 
 
+
 var CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--Spacing_gap';
 var sizesClassNames = {
     '3xs': "vkuiSpacing--3xs",
@@ -15440,13 +15769,13 @@ function SplitLayout_object_without_properties_loose(source, excluded) {
 var mediaQueriesCache = new WeakMap();
 function getMediaQueries(matchMedia) {
     return {
-        desktopPlus: matchMedia(breakpoints.MEDIA_QUERIES.DESKTOP_PLUS),
-        smallTabletPlus: matchMedia(breakpoints.MEDIA_QUERIES.SMALL_TABLET_PLUS),
-        tablet: matchMedia(breakpoints.MEDIA_QUERIES.TABLET),
-        smallTablet: matchMedia(breakpoints.MEDIA_QUERIES.SMALL_TABLET),
-        mobile: matchMedia(breakpoints.MEDIA_QUERIES.MOBILE),
-        mediumHeight: matchMedia(breakpoints.MEDIA_QUERIES.MEDIUM_HEIGHT),
-        mobileLandscapeHeight: matchMedia(breakpoints.MEDIA_QUERIES.MOBILE_LANDSCAPE_HEIGHT)
+        desktopPlus: matchMedia(MEDIA_QUERIES.DESKTOP_PLUS),
+        smallTabletPlus: matchMedia(MEDIA_QUERIES.SMALL_TABLET_PLUS),
+        tablet: matchMedia(MEDIA_QUERIES.TABLET),
+        smallTablet: matchMedia(MEDIA_QUERIES.SMALL_TABLET),
+        mobile: matchMedia(MEDIA_QUERIES.MOBILE),
+        mediumHeight: matchMedia(MEDIA_QUERIES.MEDIUM_HEIGHT),
+        mobileLandscapeHeight: matchMedia(MEDIA_QUERIES.MOBILE_LANDSCAPE_HEIGHT)
     };
 }
 /**
@@ -16725,7 +17054,7 @@ function AspectRatio_object_without_properties_loose(source, excluded) {
 
 ;// CONCATENATED MODULE: ./src/lib/layouts/gaps.ts
 
-var columnGapClassNames = {
+var gaps_columnGapClassNames = {
     '2xs': "vkui-column-gap--2xs",
     'xs': "vkui-column-gap--xs",
     's': "vkui-column-gap--s",
@@ -16736,7 +17065,7 @@ var columnGapClassNames = {
     '3xl': "vkui-column-gap--3xl",
     '4xl': "vkui-column-gap--4xl"
 };
-var rowGapClassNames = {
+var gaps_rowGapClassNames = {
     '2xs': "vkui-row-gap--2xs",
     'xs': "vkui-row-gap--xs",
     's': "vkui-row-gap--s",
@@ -16749,7 +17078,7 @@ var rowGapClassNames = {
 };
 /**
  * Возвращает массив отступов [columnGap, rowGap]
- */ function calculateGap(gap) {
+ */ function gaps_calculateGap(gap) {
     if (!gap) {
         return [
             undefined,
@@ -16876,9 +17205,9 @@ var FlexItem = function(_param) {
         "style"
     ]);
     return /*#__PURE__*/ React.createElement(RootComponent_RootComponent, FlexItem_object_spread_props(FlexItem_object_spread({}, rest), {
-        style: FlexItem_object_spread_props(FlexItem_object_spread({}, style), {
+        style: FlexItem_object_spread({
             flexBasis: flexBasis
-        }),
+        }, style),
         baseClassName: classNames_classNames("vkuiFlexItem", alignSelf && alignSelfClassNames[alignSelf], flex && flexClassNames[flex])
     }), children);
 };
@@ -17043,7 +17372,7 @@ var Flex = function(_param) {
         "style",
         "reverse"
     ]);
-    var _calculateGap = Flex_sliced_to_array(calculateGap(gap), 2), columnGap = _calculateGap[0], rowGap = _calculateGap[1];
+    var _calculateGap = Flex_sliced_to_array(gaps_calculateGap(gap), 2), columnGap = _calculateGap[0], rowGap = _calculateGap[1];
     var style = {};
     if (typeof rowGap === 'number') {
         style['--vkui_internal--row_gap'] = "".concat(rowGap, "px");
@@ -17052,12 +17381,184 @@ var Flex = function(_param) {
         style['--vkui_internal--column_gap'] = "".concat(columnGap, "px");
     }
     return /*#__PURE__*/ React.createElement(RootComponent_RootComponent, Flex_object_spread_props(Flex_object_spread({}, props), {
-        baseClassName: classNames_classNames("vkuiFlex", !noWrap && "vkuiFlex--wrap", reverse && "vkuiFlex--reverse", direction !== 'row' && "vkuiFlex--direction-column", margin !== 'none' && "vkuiFlex--margin-auto", typeof columnGap === 'string' && columnGapClassNames[columnGap], typeof rowGap === 'string' && rowGapClassNames[rowGap], align && alignClassNames[align], justify && justifyClassNames[justify]),
+        baseClassName: classNames_classNames("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)
     }));
 };
 Flex.Item = FlexItem;
 
+;// CONCATENATED MODULE: ./src/components/SimpleGrid/SimpleGrid.module.css
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/SimpleGrid/SimpleGrid.tsx
+function SimpleGrid_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 SimpleGrid_array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function SimpleGrid_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 SimpleGrid_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 SimpleGrid_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 SimpleGrid_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) {
+            SimpleGrid_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function SimpleGrid_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 SimpleGrid_object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        SimpleGrid_ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function SimpleGrid_object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = SimpleGrid_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 SimpleGrid_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;
+}
+function SimpleGrid_sliced_to_array(arr, i) {
+    return SimpleGrid_array_with_holes(arr) || SimpleGrid_iterable_to_array_limit(arr, i) || SimpleGrid_unsupported_iterable_to_array(arr, i) || SimpleGrid_non_iterable_rest();
+}
+function SimpleGrid_unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return SimpleGrid_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 SimpleGrid_array_like_to_array(o, minLen);
+}
+
+
+
+
+var marginClassNames = {
+    'auto': "vkuiSimpleGrid--margin-auto",
+    'auto-inline': "vkuiSimpleGrid--margin-auto-inline",
+    'auto-block': "vkuiSimpleGrid--margin-auto-block"
+};
+var SimpleGrid_alignClassNames = {
+    start: "vkuiSimpleGrid--align-start",
+    end: "vkuiSimpleGrid--align-end",
+    center: "vkuiSimpleGrid--align-center",
+    stretch: "vkuiSimpleGrid--align-stretch",
+    baseline: "vkuiSimpleGrid--align-baseline"
+};
+var SimpleGrid = function(_param) {
+    var _param_columns = _param.columns, columns = _param_columns === void 0 ? 1 : _param_columns, gap = _param.gap, styleProp = _param.style, _param_margin = _param.margin, margin = _param_margin === void 0 ? 'none' : _param_margin, minColWidth = _param.minColWidth, _param_align = _param.align, align = _param_align === void 0 ? 'stretch' : _param_align, props = SimpleGrid_object_without_properties(_param, [
+        "columns",
+        "gap",
+        "style",
+        "margin",
+        "minColWidth",
+        "align"
+    ]);
+    var style = {};
+    var _calculateGap = SimpleGrid_sliced_to_array(calculateGap(gap), 2), columnGap = _calculateGap[0], rowGap = _calculateGap[1];
+    if (typeof rowGap === 'number') {
+        style['--vkui_internal--row_gap'] = "".concat(rowGap, "px");
+    }
+    if (typeof columnGap === 'number') {
+        style['--vkui_internal--column_gap'] = "".concat(columnGap, "px");
+    }
+    style['--vkui_internal--grid_columns'] = "".concat(columns);
+    if (minColWidth) {
+        style['--vkui_internal--min_col_width'] = "".concat(minColWidth, "px");
+    }
+    return /*#__PURE__*/ React.createElement(RootComponent, SimpleGrid_object_spread_props(SimpleGrid_object_spread({}, props), {
+        baseClassName: classNames("vkuiSimpleGrid", margin !== 'none' && marginClassNames[margin], SimpleGrid_alignClassNames[align], minColWidth && "vkuiSimpleGrid--with-min-width", typeof columnGap === 'string' && columnGapClassNames[columnGap], typeof rowGap === 'string' && rowGapClassNames[rowGap]),
+        style: SimpleGrid_object_spread({}, style, styleProp)
+    }));
+};
+
 ;// CONCATENATED MODULE: ./src/components/PopoutWrapper/PopoutWrapper.module.css
 // extracted by mini-css-extract-plugin
 
@@ -17144,6 +17645,7 @@ function PopoutWrapper_object_without_properties_loose(source, excluded) {
 
 
 
+
 var stylesAlignX = {
     center: "vkuiPopoutWrapper--alignX-center",
     left: "vkuiPopoutWrapper--alignX-left",
@@ -17763,6 +18265,7 @@ function ModalDismissButton_object_without_properties_loose(source, excluded) {
 
 
 
+
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
  */ var ModalDismissButton_ModalDismissButton = function(_param) {
@@ -18006,6 +18509,7 @@ function AlertTypography_object_spread(target) {
 
 
 
+
 var AlertTypography_AlertHeader = function(props) {
     var platform = usePlatform();
     switch(platform){
@@ -22453,6 +22957,7 @@ var ModalRootDesktop_ModalRootDesktop = function(param) {
 
 
 
+
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalRoot
  */ var ModalRoot = function(props) {
@@ -23026,6 +23531,7 @@ function hooks_useKeyboard_useKeyboard() {
 
 
 
+
 function ModalCardBaseCloseButton_ModalCardBaseCloseButton(param) {
     var _param_children = param.children, children = _param_children === void 0 ? 'Закрыть' : _param_children, testId = param.testId, mode = param.mode, onClose = param.onClose;
     var platform = usePlatform();
@@ -24771,6 +25277,10 @@ function Gradient_object_without_properties_loose(source, excluded) {
 
 
 
+var modeStyles = {
+    overlay: "vkuiGradient--mode-overlay",
+    tint: "vkuiGradient--mode-tint"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Gradient
  */ var Gradient = function(_param) {
@@ -24781,7 +25291,7 @@ function Gradient_object_without_properties_loose(source, excluded) {
     return /*#__PURE__*/ React.createElement(RootComponent, Gradient_object_spread_props(Gradient_object_spread({
         role: "presentation"
     }, restProps), {
-        baseClassName: classNames("vkuiGradient", mode !== 'default' && "vkuiGradient--mode-tint", to === 'bottom' && "vkuiGradient--to-bottom")
+        baseClassName: classNames("vkuiGradient", mode !== 'default' && modeStyles[mode], to === 'bottom' && "vkuiGradient--to-bottom")
     }));
 };
 
@@ -25033,14 +25543,14 @@ var setDraggingItemShiftStyles = function(draggingEl, nextShiftY) {
     });
 };
 var setSiblingItemsShiftStyles = function(param) {
-    var _param = utils_sliced_to_array(param, 2), _param_ = _param[0], el = _param_.el, height = _param_.draggingElRect.height, direction = _param[1];
+    var _param = utils_sliced_to_array(param, 2), _param_ = _param[0], el = _param_.el, height = _param_.draggingElRect.height, direction = _param[1], additionalGap = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
     requestAnimationFrame(function() {
         if (direction === 'up') {
             el.style.setProperty('transition', 'transform 0.3s ease-in 0s');
             el.style.removeProperty('transform');
         } else {
             el.style.setProperty('transition', 'transform 0.3s ease-out 0s');
-            el.style.setProperty('transform', "translateY(".concat(height, "px)"));
+            el.style.setProperty('transform', "translateY(".concat(height + additionalGap, "px)"));
         }
     });
 };
@@ -25086,21 +25596,24 @@ var setInitialPlaceholderItemStyles = function(param) {
     node.style.setProperty('height', "".concat(height, "px"));
     node.style.setProperty('pointer-events', 'none');
     el.appendChild(node);
+    el.style.setProperty('display', 'block');
 };
 var unsetInitialPlaceholderItemStyles = function(param) {
     var el = param.el;
+    el.style.display = '';
+    el.removeAttribute('style');
     if (el.firstElementChild) {
         el.firstElementChild.remove();
     }
 };
 var setInitialSiblingItemStyles = function(param) {
-    var el = param.el, shifted = param.shifted, draggingElRect = param.draggingElRect;
+    var el = param.el, shifted = param.shifted, draggingElRect = param.draggingElRect, additionalGap = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
     var height = draggingElRect.height;
     requestAnimationFrame(function() {
         el.style.setProperty('pointer-events', 'none');
         el.style.setProperty('transition', 'none 0s ease 0s');
         if (shifted) {
-            el.style.setProperty('transform', "translateY(".concat(height, "px)"));
+            el.style.setProperty('transform', "translateY(".concat(height + additionalGap, "px)"));
         }
     });
 };
@@ -25204,9 +25717,12 @@ var useDraggableWithDomApi = function(param) {
     var draggingItemRef = react.useRef(null);
     var placeholderItemRef = react.useRef(null);
     var siblingItemsRef = react.useRef([]);
+    var itemsGapRef = react.useRef(0);
     var initializeItems = function(draggingEl) {
         var draggingElRect = getBoundingClientRect(draggingEl, true);
-        var children = (draggingEl.parentElement || {
+        var parentElement = draggingEl.parentElement;
+        itemsGapRef.current = parentElement ? parseInt(parentElement.style.gridGap) : 0;
+        var children = (parentElement || {
             children: []
         }).children;
         Array.prototype.forEach.call(children, function(el, index) {
@@ -25238,7 +25754,9 @@ var useDraggableWithDomApi = function(param) {
         if (draggingItemRef.current) {
             setInitialDraggingItemStyles(draggingItemRef.current); // 2. repaint
         }
-        siblingItemsRef.current.forEach(setInitialSiblingItemStyles); // 2. repaint
+        siblingItemsRef.current.forEach(function(sibling) {
+            return setInitialSiblingItemStyles(sibling, itemsGapRef.current);
+        }); // 2. repaint
     };
     var cleanupItems = function() {
         if (placeholderItemRef.current) {
@@ -25311,8 +25829,12 @@ var useDraggableWithDomApi = function(param) {
         ];
     };
     var setShiftAndUnshiftItemStyles = function(shiftItemEls, unshiftItemEls) {
-        shiftItemEls.forEach(setSiblingItemsShiftStyles);
-        unshiftItemEls.forEach(setSiblingItemsShiftStyles);
+        shiftItemEls.forEach(function(item) {
+            return setSiblingItemsShiftStyles(item, itemsGapRef.current);
+        });
+        unshiftItemEls.forEach(function(item) {
+            return setSiblingItemsShiftStyles(item, itemsGapRef.current);
+        });
     };
     var schedulingAutoScrollTimeoutIdRef = react.useRef(null);
     var clearSchedulingAutoScrollTimeout = function() {
@@ -25437,6 +25959,9 @@ var useDraggableWithDomApi = function(param) {
 
 
 
+;// CONCATENATED MODULE: ./src/components/List/List.module.css
+// extracted by mini-css-extract-plugin
+
 ;// CONCATENATED MODULE: ./src/components/List/List.tsx
 function List_define_property(obj, key, value) {
     if (key in obj) {
@@ -25466,6 +25991,30 @@ function List_object_spread(target) {
     }
     return target;
 }
+function List_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 List_object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        List_ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function List_object_without_properties(source, excluded) {
     if (source == null) return {};
     var target = List_object_without_properties_loose(source, excluded);
@@ -25495,17 +26044,29 @@ function List_object_without_properties_loose(source, excluded) {
 }
 
 
+
+
+
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */ var List = function(_param) {
-    var children = _param.children, restProps = List_object_without_properties(_param, [
-        "children"
+    var children = _param.children, _param_gap = _param.gap, gap = _param_gap === void 0 ? 0 : _param_gap, className = _param.className, style = _param.style, restProps = List_object_without_properties(_param, [
+        "children",
+        "gap",
+        "className",
+        "style"
     ]);
     return /*#__PURE__*/ React.createElement(RootComponent, List_object_spread({
-        role: "list"
-    }, restProps), children, /*#__PURE__*/ React.createElement("div", List_object_spread({
+        role: "list",
+        className: classNames("vkuiList", className),
+        style: List_object_spread_props(List_object_spread({}, style), {
+            gridGap: gap
+        })
+    }, restProps), children, /*#__PURE__*/ React.createElement("div", List_object_spread_props(List_object_spread({
         "aria-hidden": true
-    }, DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP)));
+    }, DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP), {
+        className: "vkuiList__placeholder"
+    })));
 };
 
 ;// CONCATENATED MODULE: ../../node_modules/@vkontakte/icons/dist_es6/24/cancel_24.js
@@ -26882,7 +27443,7 @@ var AvatarBadge = function(_param) {
     var className = _param.className, restProps = AvatarBadge_object_without_properties(_param, [
         "className"
     ]);
-    var size = react.useContext(ImageBaseContext).size;
+    var size = react.useContext(context_ImageBaseContext).size;
     return /*#__PURE__*/ react.createElement(ImageBase.Badge, AvatarBadge_object_spread_props(AvatarBadge_object_spread({}, restProps), {
         className: classNames_classNames("vkuiAvatarBadge", size < 96 && "vkuiAvatarBadge--shifted", className)
     }));
@@ -27068,7 +27629,7 @@ var AvatarBadgeWithPreset = function(_param) {
         "preset",
         "className"
     ]);
-    var size = react.useContext(ImageBaseContext).size;
+    var size = react.useContext(context_ImageBaseContext).size;
     var badgeSize = helpers_getBadgeIconSizeByImageBaseSize(size);
     var isOnlinePreset = preset === 'online';
     var presetClassName = isOnlinePreset ? "vkuiAvatarBadge--preset-online" : "vkuiAvatarBadge--preset-onlineMobile";
@@ -27442,7 +28003,7 @@ var HorizontalCellShowMore_sizeClassNames = {
     l: "vkuiHorizontalCellShowMore--size-l"
 };
 var HorizontalCellShowMore = function(_param) {
-    var className = _param.className, style = _param.style, getRef = _param.getRef, getRootRef = _param.getRootRef, compensateLastCellIndent = _param.compensateLastCellIndent, height = _param.height, _param_size = _param.size, size = _param_size === void 0 ? 's' : _param_size, _param_children = _param.children, children = _param_children === void 0 ? size === 's' ? 'Все' : 'Показать все' : _param_children, restProps = HorizontalCellShowMore_object_without_properties(_param, [
+    var className = _param.className, style = _param.style, getRef = _param.getRef, getRootRef = _param.getRootRef, compensateLastCellIndent = _param.compensateLastCellIndent, height = _param.height, _param_size = _param.size, size = _param_size === void 0 ? 's' : _param_size, _param_children = _param.children, children = _param_children === void 0 ? size === 's' ? 'Все' : 'Показать все' : _param_children, _param_centered = _param.centered, centered = _param_centered === void 0 ? false : _param_centered, restProps = HorizontalCellShowMore_object_without_properties(_param, [
         "className",
         "style",
         "getRef",
@@ -27450,11 +28011,12 @@ var HorizontalCellShowMore = function(_param) {
         "compensateLastCellIndent",
         "height",
         "size",
-        "children"
+        "children",
+        "centered"
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         style: style,
-        className: classNames("vkuiHorizontalCellShowMore", compensateLastCellIndent && "vkuiHorizontalCellShowMore--compensate-last-cell-indent", HorizontalCellShowMore_sizeClassNames[size], className),
+        className: classNames("vkuiHorizontalCellShowMore", compensateLastCellIndent && "vkuiHorizontalCellShowMore--compensate-last-cell-indent", centered && "vkuiHorizontalCellShowMore--centered", HorizontalCellShowMore_sizeClassNames[size], className),
         ref: getRootRef
     }, /*#__PURE__*/ React.createElement(Tappable, HorizontalCellShowMore_object_spread({
         style: size === 's' ? undefined : {
@@ -29097,7 +29659,7 @@ var GridAvatarBadge = function(_param) {
     var className = _param.className, restProps = GridAvatarBadge_object_without_properties(_param, [
         "className"
     ]);
-    var size = react.useContext(ImageBaseContext).size;
+    var size = react.useContext(context_ImageBaseContext).size;
     return /*#__PURE__*/ react.createElement(ImageBase.Badge, GridAvatarBadge_object_spread_props(GridAvatarBadge_object_spread({}, restProps), {
         className: classNames_classNames("vkuiGridAvatarBadge", size < 96 && "vkuiGridAvatarBadge--shifted", className)
     }));
@@ -29313,13 +29875,16 @@ var ImageBadge = function(_param) {
     var className = _param.className, restProps = ImageBadge_object_without_properties(_param, [
         "className"
     ]);
-    var size = react.useContext(ImageBaseContext).size;
+    var size = react.useContext(context_ImageBaseContext).size;
     return /*#__PURE__*/ react.createElement(ImageBase.Badge, ImageBadge_object_spread_props(ImageBadge_object_spread({}, restProps), {
         className: classNames_classNames("vkuiImageBadge", size < 96 && "vkuiImageBadge--shifted", className)
     }));
 };
 ImageBadge.displayName = 'ImageBadge';
 
+;// CONCATENATED MODULE: ./src/components/Image/Image.module.css
+// extracted by mini-css-extract-plugin
+
 ;// CONCATENATED MODULE: ./src/components/Image/Image.tsx
 function Image_define_property(obj, key, value) {
     if (key in obj) {
@@ -29403,6 +29968,8 @@ function Image_object_without_properties_loose(source, excluded) {
 
 
 
+
+
 var IMAGE_DEFAULT_SIZE = 48;
 var getBorderRadiusBySize = function(size, borderRadius) {
     switch(borderRadius){
@@ -29459,27 +30026,47 @@ var getBorderRadiusBySize = function(size, borderRadius) {
             }
     }
 };
+var getBorderRadiusBySizeInPx = function(size, borderRadius) {
+    if (!borderRadius) {
+        return undefined;
+    }
+    return "".concat(getBorderRadiusBySize(size, borderRadius), "px");
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Image
  */ var Image = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? IMAGE_DEFAULT_SIZE : _param_size, tmp = _param.borderRadius, borderRadiusProp = tmp === void 0 ? 'm' : tmp, style = _param.style, className = _param.className, restProps = Image_object_without_properties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? IMAGE_DEFAULT_SIZE : _param_size, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'm' : _param_borderRadius, borderStartStartRadius = _param.borderStartStartRadius, borderStartEndRadius = _param.borderStartEndRadius, borderEndStartRadius = _param.borderEndStartRadius, borderEndEndRadius = _param.borderEndEndRadius, style = _param.style, className = _param.className, _param_objectFit = _param.objectFit, objectFit = _param_objectFit === void 0 ? 'cover' : _param_objectFit, restProps = Image_object_without_properties(_param, [
         "size",
         "borderRadius",
+        "borderStartStartRadius",
+        "borderStartEndRadius",
+        "borderEndStartRadius",
+        "borderEndEndRadius",
         "style",
-        "className"
+        "className",
+        "objectFit"
     ]);
-    var borderRadius = react.useMemo(function() {
-        return getBorderRadiusBySize(size, borderRadiusProp);
+    var borderStyles = react.useMemo(function() {
+        return {
+            '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),
+            '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(size, borderStartStartRadius),
+            '--vkui_internal--Image_border_start_end_radius': getBorderRadiusBySizeInPx(size, borderStartEndRadius),
+            '--vkui_internal--Image_border_end_start_radius': getBorderRadiusBySizeInPx(size, borderEndStartRadius),
+            '--vkui_internal--Image_border_end_end_radius': getBorderRadiusBySizeInPx(size, borderEndEndRadius)
+        };
     }, [
-        size,
-        borderRadiusProp
+        borderRadius,
+        borderStartStartRadius,
+        borderStartEndRadius,
+        borderEndStartRadius,
+        borderEndEndRadius,
+        size
     ]);
     return /*#__PURE__*/ react.createElement(ImageBase, Image_object_spread_props(Image_object_spread({}, restProps), {
+        objectFit: objectFit,
         size: size,
-        style: Image_object_spread_props(Image_object_spread({}, style), {
-            borderRadius: borderRadius
-        }),
-        className: className
+        style: Image_object_spread({}, borderStyles, style),
+        className: classNames_classNames(className, "vkuiImage", borderStartStartRadius && "vkuiImage--borderStartStartRadius", borderStartEndRadius && "vkuiImage--borderStartEndRadius", borderEndStartRadius && "vkuiImage--borderEndStartRadius", borderEndEndRadius && "vkuiImage--borderEndEndRadius")
     }));
 };
 Image.displayName = 'Image';
@@ -29865,7 +30452,7 @@ function Search_unsupported_iterable_to_array(o, minLen) {
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */ var Search = function(_param) {
-    var idProp = _param.id, _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ React.createElement(Icon16SearchOutline, null) : _param_before, className = _param.className, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? 'Поиск' : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? 'Отмена' : _param_after, getRef = _param.getRef, icon = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? 'off' : _param_autoComplete, onChange = _param.onChange, iconLabel = _param.iconLabel, _param_clearLabel = _param.clearLabel, clearLabel = _param_clearLabel === void 0 ? 'Очистить' : _param_clearLabel, noPadding = _param.noPadding, getRootRef = _param.getRootRef, _param_findButtonText = _param.findButtonText, findButtonText = _param_findButtonText === void 0 ? 'Найти' : _param_findButtonText, onFindButtonClick = _param.onFindButtonClick, inputProps = Search_object_without_properties(_param, [
+    var idProp = _param.id, _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ React.createElement(Icon16SearchOutline, null) : _param_before, className = _param.className, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? 'Поиск' : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? 'Отмена' : _param_after, getRef = _param.getRef, iconProp = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? 'off' : _param_autoComplete, onChange = _param.onChange, iconLabel = _param.iconLabel, _param_clearLabel = _param.clearLabel, clearLabel = _param_clearLabel === void 0 ? 'Очистить' : _param_clearLabel, noPadding = _param.noPadding, getRootRef = _param.getRootRef, _param_findButtonText = _param.findButtonText, findButtonText = _param_findButtonText === void 0 ? 'Найти' : _param_findButtonText, onFindButtonClick = _param.onFindButtonClick, inputProps = Search_object_without_properties(_param, [
         "id",
         "before",
         "className",
@@ -29943,8 +30530,19 @@ function Search_unsupported_iterable_to_array(o, minLen) {
     useNativeFormResetListener(inputRef, function() {
         setHasValue(Boolean(inputProps.defaultValue));
     });
+    var renderIconButton = function(icon) {
+        var props = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+        return /*#__PURE__*/ React.createElement(IconButton, Search_object_spread({
+            hoverMode: "opacity",
+            onPointerDown: onIconClickStart,
+            className: "vkuiSearch__icon",
+            onFocus: setFocusedTrue,
+            onBlur: setFocusedFalse,
+            onClick: noop
+        }, props), /*#__PURE__*/ React.createElement(VisuallyHidden, null, iconLabel), icon);
+    };
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames('vkuiInternalSearch', "vkuiSearch", sizeY === 'none' && "vkuiSearch--sizeY-none", sizeY === 'compact' && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", hasValue && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", inputProps.disabled && "vkuiSearch--disabled", !noPadding && "vkuiSearch--withPadding", className),
+        className: classNames('vkuiInternalSearch', "vkuiSearch", sizeY === 'none' && "vkuiSearch--sizeY-none", sizeY === 'compact' && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", hasValue && "vkuiSearch--has-value", after && "vkuiSearch--has-after", iconProp && "vkuiSearch--has-icon", inputProps.disabled && "vkuiSearch--disabled", !noPadding && "vkuiSearch--withPadding", className),
         ref: getRootRef,
         style: style
     }, /*#__PURE__*/ React.createElement("div", {
@@ -29970,14 +30568,7 @@ function Search_unsupported_iterable_to_array(o, minLen) {
         onChange: callMultiple(onChange, checkHasValue)
     }))), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiSearch__controls"
-    }, icon && /*#__PURE__*/ React.createElement(IconButton, {
-        hoverMode: "opacity",
-        onPointerDown: onIconClickStart,
-        className: "vkuiSearch__icon",
-        onFocus: setFocusedTrue,
-        onBlur: setFocusedFalse,
-        onClick: noop
-    }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, iconLabel), icon), /*#__PURE__*/ React.createElement(IconButton, {
+    }, iconProp && (typeof iconProp === 'function' ? iconProp(renderIconButton) : renderIconButton(iconProp)), /*#__PURE__*/ React.createElement(IconButton, {
         hoverMode: "opacity",
         onPointerDown: onIconCancelClickStart,
         onClick: onCancel,
@@ -30697,7 +31288,7 @@ function cancelEvent(event) {
     ]);
     var platform = usePlatform();
     var scroll = useScroll();
-    var _useDOM = useDOM(), window = _useDOM.window, document = _useDOM.document;
+    var window = useDOM().window;
     var prevIsFetching = usePrevious(isFetching);
     var initParams = React.useMemo(function() {
         return {
@@ -30799,35 +31390,10 @@ function cancelEvent(event) {
         canRefresh,
         runRefreshing
     ]);
-    useIsomorphicLayoutEffect(function toggleBodyOverscrollBehavior() {
-        /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */ if (!window || !document) {
-            return;
-        }
-        /**
-       * ⚠️ В частности, необходимо для iOS 15. Начиная с этой версии в Safari добавили
-       * pull-to-refresh. CSS св-во `overflow-behavior` появился только с iOS 16.
-       *
-       * Во вторую очередь, полезна блокированием скролла, чтобы пользователь дождался обновления
-       * данных.
-       */ /* istanbul ignore next: в jest не протестировать */ var handleWindowTouchMoveForPreventIOSViewportBounce = function(event) {
-            event.preventDefault();
-            event.stopPropagation();
-        };
-        if (watching || refreshing) {
-            // eslint-disable-next-line no-restricted-properties
-            document.documentElement.classList.add('vkui--disable-overscroll-behavior');
-            /* istanbul ignore next: в jest не протестировать */ window.addEventListener('touchmove', handleWindowTouchMoveForPreventIOSViewportBounce, {
-                passive: false
-            });
-        }
-        return function() {
-            // eslint-disable-next-line no-restricted-properties
-            document.documentElement.classList.remove('vkui--disable-overscroll-behavior');
-            /* istanbul ignore next: в jest не протестировать */ window.removeEventListener('touchmove', handleWindowTouchMoveForPreventIOSViewportBounce);
-        };
+    useIsomorphicLayoutEffect(function toggleDocumentOverscrollBehavior() {
+        return window && (watching || refreshing) ? initializeBrowserGesturePreventionEffect(window) : undefined;
     }, [
         window,
-        document,
         watching,
         refreshing
     ]);
@@ -31051,6 +31617,7 @@ function Mark_object_spread(target) {
 }
 
 
+
 /**
  * Компонент используется для выделения фрагментов текста,
  * например при поиске определенных слов или выделения текста в цитате.
@@ -31386,7 +31953,7 @@ function Counter_object_without_properties_loose(source, excluded) {
 
 
 
-var modeClassNames = {
+var Counter_modeClassNames = {
     secondary: "vkuiCounter--mode-secondary",
     primary: "vkuiCounter--mode-primary",
     prominent: "vkuiCounter--mode-prominent",
@@ -31413,7 +31980,7 @@ var Counter_sizeClassNames = {
     var counterLevel = size === 's' ? '1' : '2';
     return /*#__PURE__*/ React.createElement(CounterTypography, Counter_object_spread_props(Counter_object_spread({}, restProps), {
         Component: "span",
-        className: classNames('vkuiInternalCounter', "vkuiCounter", modeClassNames[mode], Counter_sizeClassNames[size], className),
+        className: classNames('vkuiInternalCounter', "vkuiCounter", Counter_modeClassNames[mode], Counter_sizeClassNames[size], className),
         level: counterLevel
     }), children);
 };
@@ -31501,6 +32068,10 @@ function UsersStack_object_without_properties_loose(source, excluded) {
     }
     return target;
 }
+function UsersStack_type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
 
 
 
@@ -31584,11 +32155,13 @@ var photoSizes = {
         var id = "UsersStackDefs".concat(cmpId).concat(i);
         var hrefID = "#".concat(id);
         var maskID = "UsersStackMask".concat(cmpId).concat(i);
-        return /*#__PURE__*/ React.createElement("svg", {
+        var isPhotoType = (typeof photo === "undefined" ? "undefined" : UsersStack_type_of(photo)) === 'object';
+        var photoSrc = isPhotoType ? photo.src : photo;
+        var photoElement = /*#__PURE__*/ React.createElement("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             className: "vkuiUsersStack__photo",
-            key: i,
-            "aria-hidden": true
+            "aria-hidden": true,
+            display: "block"
         }, /*#__PURE__*/ React.createElement("defs", null, /*#__PURE__*/ React.createElement(PathElement, {
             id: id,
             direction: direction,
@@ -31603,7 +32176,7 @@ var photoSizes = {
             href: hrefID,
             className: "vkuiUsersStack__fill"
         }), /*#__PURE__*/ React.createElement("image", {
-            href: photo,
+            href: photoSrc,
             width: photoSize,
             height: photoSize
         }), /*#__PURE__*/ React.createElement("use", {
@@ -31611,12 +32184,24 @@ var photoSizes = {
             fill: "none",
             stroke: "rgba(0, 0, 0, 0.08)"
         })));
+        if (isPhotoType && photo.renderWrapper) {
+            photoElement = photo.renderWrapper({
+                'children': photoElement,
+                'data-src': photoSrc
+            });
+        }
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "vkuiUsersStack__photoWrapper",
+            key: i
+        }, photoElement);
     });
-    var othersElement = canShowOthers ? /*#__PURE__*/ React.createElement(CounterTypography, {
+    var othersElement = canShowOthers ? /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiUsersStack__photoWrapper"
+    }, /*#__PURE__*/ React.createElement(CounterTypography, {
         caps: true,
         weight: "1",
         className: classNames("vkuiUsersStack__photo", "vkuiUsersStack__photo--others")
-    }, "+", count) : null;
+    }, "+", count)) : null;
     return /*#__PURE__*/ React.createElement(RootComponent, UsersStack_object_spread_props(UsersStack_object_spread({}, restProps), {
         baseClassName: classNames("vkuiUsersStack", UsersStack_stylesSize[size], UsersStack_stylesDirection[direction])
     }), (photosElements.length > 0 || othersElement) && /*#__PURE__*/ React.createElement("div", {
@@ -32624,7 +33209,7 @@ var appearanceStyles = {
     accent: "vkuiSubnavigationButton--appearance-accent",
     neutral: "vkuiSubnavigationButton--appearance-neutral"
 };
-var modeStyles = {
+var SubnavigationButton_modeStyles = {
     primary: "vkuiSubnavigationButton--mode-primary",
     outline: "vkuiSubnavigationButton--mode-outline",
     tertiary: "vkuiSubnavigationButton--mode-tertiary"
@@ -32667,7 +33252,7 @@ var SubnavigationButtonTypography = function(_param) {
     return /*#__PURE__*/ React.createElement(Tappable, SubnavigationButton_object_spread_props(SubnavigationButton_object_spread({}, restProps), {
         hasActive: false,
         focusVisibleMode: "outside",
-        className: classNames("vkuiSubnavigationButton", sizeStyles[size], modeStyles[mode], appearanceStyles[appearance], selected && "vkuiSubnavigationButton--selected", sizeY !== 'regular' && SubnavigationButton_sizeYClassNames[sizeY], className)
+        className: classNames("vkuiSubnavigationButton", sizeStyles[size], SubnavigationButton_modeStyles[mode], appearanceStyles[appearance], selected && "vkuiSubnavigationButton--selected", sizeY !== 'regular' && SubnavigationButton_sizeYClassNames[sizeY], className)
     }), /*#__PURE__*/ React.createElement("span", {
         className: "vkuiSubnavigationButton__in"
     }, before && /*#__PURE__*/ React.createElement("span", {
@@ -33976,9 +34561,10 @@ var stylesStatus = {
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */ var FormItem = function(_param) {
-    var children = _param.children, top = _param.top, topMultiline = _param.topMultiline, topComponentProp = _param.topComponent, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? 'default' : _param_status, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? functions_noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? 'Удалить' : _param_removePlaceholder, getRootRef = _param.getRootRef, htmlFor = _param.htmlFor, bottomId = _param.bottomId, noPadding = _param.noPadding, topNode = _param.topNode, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, restProps = FormItem_object_without_properties(_param, [
+    var children = _param.children, top = _param.top, topId = _param.topId, topMultiline = _param.topMultiline, topComponentProp = _param.topComponent, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? 'default' : _param_status, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? functions_noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? 'Удалить' : _param_removePlaceholder, getRootRef = _param.getRootRef, htmlFor = _param.htmlFor, bottomId = _param.bottomId, noPadding = _param.noPadding, topNode = _param.topNode, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, restProps = FormItem_object_without_properties(_param, [
         "children",
         "top",
+        "topId",
         "topMultiline",
         "topComponent",
         "bottom",
@@ -33998,7 +34584,8 @@ var stylesStatus = {
     var wrappedChildren = /*#__PURE__*/ react.createElement(react.Fragment, null, react_utils_hasReactNode(topNode) ? topNode : react_utils_hasReactNode(top) ? /*#__PURE__*/ react.createElement(FormItemTop, null, /*#__PURE__*/ react.createElement(FormItemTopLabel, {
         htmlFor: htmlFor,
         Component: topComponentProp,
-        multiline: topMultiline
+        multiline: topMultiline,
+        id: topId
     }, top)) : null, children, react_utils_hasReactNode(bottom) && /*#__PURE__*/ react.createElement(Footnote_Footnote, {
         className: "vkuiFormItem__bottom",
         id: bottomId,
@@ -34177,16 +34764,23 @@ var FormField_stylesStatus = {
     error: "vkuiFormField--status-error",
     valid: "vkuiFormField--status-valid"
 };
+var iconAlignClassNames = {
+    center: undefined,
+    start: "vkuiFormField__icon--align-start",
+    end: "vkuiFormField__icon--align-end"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */ var FormField_FormField = function(_param) {
-    var _param_Component = _param.Component, Component = _param_Component === void 0 ? 'span' : _param_Component, _param_status = _param.status, status = _param_status === void 0 ? 'default' : _param_status, children = _param.children, getRootRef = _param.getRootRef, before = _param.before, after = _param.after, disabled = _param.disabled, _param_mode = _param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode, className = _param.className, restProps = FormField_object_without_properties(_param, [
+    var _param_Component = _param.Component, Component = _param_Component === void 0 ? 'span' : _param_Component, _param_status = _param.status, status = _param_status === void 0 ? 'default' : _param_status, children = _param.children, getRootRef = _param.getRootRef, before = _param.before, after = _param.after, _param_beforeAlign = _param.beforeAlign, beforeAlign = _param_beforeAlign === void 0 ? 'center' : _param_beforeAlign, _param_afterAlign = _param.afterAlign, afterAlign = _param_afterAlign === void 0 ? 'center' : _param_afterAlign, disabled = _param.disabled, _param_mode = _param.mode, mode = _param_mode === void 0 ? 'default' : _param_mode, className = _param.className, restProps = FormField_object_without_properties(_param, [
         "Component",
         "status",
         "children",
         "getRootRef",
         "before",
         "after",
+        "beforeAlign",
+        "afterAlign",
         "disabled",
         "mode",
         "className"
@@ -34213,9 +34807,9 @@ var FormField_stylesStatus = {
         onMouseLeave: handleMouseLeave,
         className: classNames("vkuiFormField", mode === 'default' && "vkuiFormField--mode-default", status !== 'default' && FormField_stylesStatus[status], sizeY !== 'regular' && FormField_sizeYClassNames[sizeY], disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", focusVisibleClassNames, className)
     }), before && /*#__PURE__*/ React.createElement("span", {
-        className: "vkuiFormField__before"
+        className: classNames("vkuiFormField__before", iconAlignClassNames[beforeAlign])
     }, before), children, after && /*#__PURE__*/ React.createElement("span", {
-        className: classNames("vkuiFormField__after", 'vkuiInternalFormField__after')
+        className: classNames("vkuiFormField__after", iconAlignClassNames[afterAlign], 'vkuiInternalFormField__after')
     }, after), /*#__PURE__*/ React.createElement("span", {
         "aria-hidden": true,
         className: "vkuiFormField__border"
@@ -34308,7 +34902,8 @@ var FormLayoutGroup_sizeYClassNames = FormLayoutGroup_define_property({
     var rootEl = useExternRef(getRootRef);
     return /*#__PURE__*/ React.createElement(RootComponent, FormLayoutGroup_object_spread({
         getRootRef: rootEl,
-        baseClassName: classNames(sizeY !== 'regular' && FormLayoutGroup_sizeYClassNames[sizeY], mode === 'horizontal' && classNames("vkuiFormLayoutGroup--mode-horizontal", 'vkuiInternalFormLayoutGroup--mode-horizontal'), mode === 'vertical' && classNames("vkuiFormLayoutGroup--mode-vertical", 'vkuiInternalFormLayoutGroup--mode-vertical'), isRemovable && classNames("vkuiFormLayoutGroup--removable", 'vkuiInternalFormLayoutGroup--removable'), segmented && classNames("vkuiFormLayoutGroup--segmented", 'vkuiInternalFormLayoutGroup--segmented'))
+        Component: "fieldset",
+        baseClassName: classNames("vkuiFormLayoutGroup", sizeY !== 'regular' && FormLayoutGroup_sizeYClassNames[sizeY], mode === 'horizontal' && classNames("vkuiFormLayoutGroup--mode-horizontal", 'vkuiInternalFormLayoutGroup--mode-horizontal'), mode === 'vertical' && classNames("vkuiFormLayoutGroup--mode-vertical", 'vkuiInternalFormLayoutGroup--mode-vertical'), isRemovable && classNames("vkuiFormLayoutGroup--removable", 'vkuiInternalFormLayoutGroup--removable'), segmented && classNames("vkuiFormLayoutGroup--segmented", 'vkuiInternalFormLayoutGroup--segmented'))
     }, restProps), isRemovable ? /*#__PURE__*/ React.createElement(Removable, {
         className: "vkuiFormLayoutGroup__removable",
         align: "start",
@@ -35274,6 +35869,112 @@ var Chip_sizeYClassNames = {
     }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, "\xa0 ", removeLabel, " ", children), /*#__PURE__*/ React.createElement(Icon16Cancel, null))));
 };
 
+;// CONCATENATED MODULE: ./src/components/FormFieldClearButton/FormFieldClearButton.tsx
+function FormFieldClearButton_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 FormFieldClearButton_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) {
+            FormFieldClearButton_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function FormFieldClearButton_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 FormFieldClearButton_object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        FormFieldClearButton_ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function FormFieldClearButton_object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = FormFieldClearButton_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 FormFieldClearButton_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 FormFieldClearButton_FormFieldClearButton = function(_param) {
+    var className = _param.className, onClick = _param.onClick, restProps = FormFieldClearButton_object_without_properties(_param, [
+        "className",
+        "onClick"
+    ]);
+    return /*#__PURE__*/ React.createElement(IconButton, FormFieldClearButton_object_spread_props(FormFieldClearButton_object_spread({
+        Component: "button",
+        label: "Очистить поле",
+        onKeyDown: stopPropagation,
+        type: "button",
+        activeMode: "opacity",
+        hoverMode: "opacity"
+    }, restProps), {
+        className: className,
+        onClick: function(e) {
+            stopPropagation(e);
+            e.preventDefault();
+            onClick();
+        }
+    }), /*#__PURE__*/ React.createElement(Icon16Cancel, null));
+};
+
 ;// CONCATENATED MODULE: ./src/components/ChipsInputBase/constants.tsx
 function ChipsInputBase_constants_define_property(obj, key, value) {
     if (key in obj) {
@@ -35558,6 +36259,7 @@ function ChipsInputBase_unsupported_iterable_to_array(o, minLen) {
 
 
 
+
 var ChipsInputBase_sizeYClassNames = {
     none: "vkuiChipsInputBase--sizeY-none",
     compact: "vkuiChipsInputBase--sizeY-compact"
@@ -35566,7 +36268,8 @@ var ChipsInputBase_ChipsInputBase = function(_param) {
     var // FormFieldProps
     getRootRef = _param.getRootRef, style = _param.style, className = _param.className, before = _param.before, after = _param.after, status = _param.status, mode = _param.mode, _param_value = _param.// option
     value, value = _param_value === void 0 ? DEFAULT_VALUE : _param_value, onAddChipOption = _param.onAddChipOption, onRemoveChipOptionProp = _param.onRemoveChipOption, _param_renderChip = _param.renderChip, renderChip = _param_renderChip === void 0 ? renderChipDefault : _param_renderChip, // input
-    getRef = _param.getRef, idProp = _param.id, _param_inputValue = _param.inputValue, inputValue = _param_inputValue === void 0 ? DEFAULT_INPUT_VALUE : _param_inputValue, placeholder = _param.placeholder, disabled = _param.disabled, readOnly = _param.readOnly, addOnBlur = _param.addOnBlur, onBlur = _param.onBlur, onInputChange = _param.onInputChange, restProps = ChipsInputBase_object_without_properties(_param, [
+    getRef = _param.getRef, idProp = _param.id, _param_inputValue = _param.inputValue, inputValue = _param_inputValue === void 0 ? DEFAULT_INPUT_VALUE : _param_inputValue, placeholder = _param.placeholder, disabled = _param.disabled, readOnly = _param.readOnly, addOnBlur = _param.addOnBlur, onBlur = _param.onBlur, onInputChange = _param.onInputChange, _param_ClearButton = _param.// clear
+    ClearButton, ClearButton = _param_ClearButton === void 0 ? FormFieldClearButton : _param_ClearButton, clearButtonShown = _param.clearButtonShown, clearButtonTestId = _param.clearButtonTestId, onClear = _param.onClear, restProps = ChipsInputBase_object_without_properties(_param, [
         "getRootRef",
         "style",
         "className",
@@ -35586,7 +36289,11 @@ var ChipsInputBase_ChipsInputBase = function(_param) {
         "readOnly",
         "addOnBlur",
         "onBlur",
-        "onInputChange"
+        "onInputChange",
+        "ClearButton",
+        "clearButtonShown",
+        "clearButtonTestId",
+        "onClear"
     ]);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? 'none' : _useAdaptivity_sizeY;
     var idGenerated = React.useId();
@@ -35685,13 +36392,38 @@ var ChipsInputBase_ChipsInputBase = function(_param) {
             inputRef.current.focus();
         }
     };
+    var clearButton = React.useMemo(function() {
+        if (clearButtonShown) {
+            return /*#__PURE__*/ React.createElement(ClearButton, {
+                onClick: onClear,
+                disabled: disabled,
+                "data-testid": clearButtonTestId
+            });
+        }
+        return undefined;
+    }, [
+        ClearButton,
+        clearButtonShown,
+        clearButtonTestId,
+        disabled,
+        onClear
+    ]);
+    var afterItems = React.useMemo(function() {
+        if (clearButton || after) {
+            return /*#__PURE__*/ React.createElement(React.Fragment, null, clearButton, after);
+        }
+        return undefined;
+    }, [
+        after,
+        clearButton
+    ]);
     return /*#__PURE__*/ React.createElement(FormField, {
         Component: "div",
         getRootRef: getRootRef,
         style: style,
         disabled: disabled,
         before: before,
-        after: after,
+        after: afterItems,
         status: status,
         mode: mode,
         className: className,
@@ -35954,6 +36686,13 @@ var useChipsInput_useChipsInput = function(param) {
         defaultValue,
         setValue
     ]);
+    var clearOptions = React.useCallback(function() {
+        setValue(DEFAULT_VALUE);
+        clearInput();
+    }, [
+        clearInput,
+        setValue
+    ]);
     useNativeFormResetListener(inputRef, reset);
     return {
         value: value,
@@ -35963,7 +36702,8 @@ var useChipsInput_useChipsInput = function(param) {
         inputRef: inputRef,
         inputValue: inputValue,
         onInputChange: setInputChange,
-        clearInput: clearInput
+        clearInput: clearInput,
+        clearOptions: clearOptions
     };
 };
 
@@ -36057,7 +36797,7 @@ function ChipsInput_object_without_properties_loose(source, excluded) {
     var // option
     valueProp = _param.value, defaultValue = _param.defaultValue, onChange = _param.onChange, // input
     getRef = _param.getRef, inputValueProp = _param.inputValue, inputDefaultValueProp = _param.defaultInputValue, onInputChangeProp = _param.onInputChange, _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, // other
-    disabled = _param.disabled, restProps = ChipsInput_object_without_properties(_param, [
+    disabled = _param.disabled, allowClearButton = _param.allowClearButton, restProps = ChipsInput_object_without_properties(_param, [
         "value",
         "defaultValue",
         "onChange",
@@ -36068,7 +36808,8 @@ function ChipsInput_object_without_properties_loose(source, excluded) {
         "getOptionValue",
         "getOptionLabel",
         "getNewOptionData",
-        "disabled"
+        "disabled",
+        "allowClearButton"
     ]);
     var _useChipsInput = useChipsInput({
         // option
@@ -36084,14 +36825,16 @@ function ChipsInput_object_without_properties_loose(source, excluded) {
         onInputChange: onInputChangeProp,
         // other
         disabled: disabled
-    }), value = _useChipsInput.value, addOptionFromInput = _useChipsInput.addOptionFromInput, removeOption = _useChipsInput.removeOption, // input
+    }), value = _useChipsInput.value, addOptionFromInput = _useChipsInput.addOptionFromInput, removeOption = _useChipsInput.removeOption, clearOptions = _useChipsInput.clearOptions, // input
     inputRefHook = _useChipsInput.inputRef, inputValue = _useChipsInput.inputValue, onInputChange = _useChipsInput.onInputChange;
     var inputRef = useExternRef(getRef, inputRefHook);
     return /*#__PURE__*/ React.createElement(ChipsInputBase, ChipsInput_object_spread_props(ChipsInput_object_spread({}, restProps), {
         disabled: disabled,
         value: value,
+        clearButtonShown: allowClearButton && (!!value.length || !!inputValue.length),
         onAddChipOption: addOptionFromInput,
         onRemoveChipOption: removeOption,
+        onClear: clearOptions,
         getRef: inputRef,
         inputValue: inputValue,
         onInputChange: onInputChange
@@ -36399,6 +37142,11 @@ function CustomScrollView_hasPointerClassName(hasPointer) {
             return "vkuiCustomScrollView--hasPointer-none";
     }
 }
+var overscrollBehaviorClassNames = {
+    auto: undefined,
+    contain: "vkuiCustomScrollView__box--overscrollBehavior-contain",
+    none: "vkuiCustomScrollView__box--overscrollBehavior-none"
+};
 var CustomScrollView_CustomScrollView = function(_param) {
     var subscribe = function subscribe(el) {
         if (el) {
@@ -36412,7 +37160,7 @@ var CustomScrollView_CustomScrollView = function(_param) {
             return l.remove();
         });
     };
-    var className = _param.className, children = _param.children, externalBoxRef = _param.boxRef, windowResize = _param.windowResize, _param_autoHideScrollbar = _param.autoHideScrollbar, autoHideScrollbar = _param_autoHideScrollbar === void 0 ? false : _param_autoHideScrollbar, autoHideScrollbarDelay = _param.autoHideScrollbarDelay, onScroll = _param.onScroll, getRootRef = _param.getRootRef, restProps = CustomScrollView_object_without_properties(_param, [
+    var className = _param.className, children = _param.children, externalBoxRef = _param.boxRef, windowResize = _param.windowResize, _param_autoHideScrollbar = _param.autoHideScrollbar, autoHideScrollbar = _param_autoHideScrollbar === void 0 ? false : _param_autoHideScrollbar, autoHideScrollbarDelay = _param.autoHideScrollbarDelay, onScroll = _param.onScroll, getRootRef = _param.getRootRef, _param_overscrollBehavior = _param.overscrollBehavior, overscrollBehavior = _param_overscrollBehavior === void 0 ? 'auto' : _param_overscrollBehavior, restProps = CustomScrollView_object_without_properties(_param, [
         "className",
         "children",
         "boxRef",
@@ -36420,7 +37168,8 @@ var CustomScrollView_CustomScrollView = function(_param) {
         "autoHideScrollbar",
         "autoHideScrollbarDelay",
         "onScroll",
-        "getRootRef"
+        "getRootRef",
+        "overscrollBehavior"
     ]);
     var _useDOM = useDOM(), document = _useDOM.document, window = _useDOM.window;
     var hasPointer = useAdaptivity().hasPointer;
@@ -36537,7 +37286,7 @@ var CustomScrollView_CustomScrollView = function(_param) {
         className: classNames(className, "vkuiCustomScrollView", CustomScrollView_hasPointerClassName(hasPointer)),
         ref: getRootRef
     }, restProps), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiCustomScrollView__box",
+        className: classNames("vkuiCustomScrollView__box", overscrollBehaviorClassNames[overscrollBehavior]),
         tabIndex: -1,
         ref: boxRef,
         onScroll: scroll
@@ -36672,7 +37421,8 @@ var calcIsTop = function(placement) {
     return placement.startsWith('top');
 };
 var CustomSelectDropdown_CustomSelectDropdown = function(_param) {
-    var children = _param.children, targetRef = _param.targetRef, scrollBoxRef = _param.scrollBoxRef, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement, fetching = _param.fetching, parentOnPlacementChange = _param.onPlacementChange, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 0 : _param_offsetDistance, _param_autoWidth = _param.autoWidth, autoWidth = _param_autoWidth === void 0 ? false : _param_autoWidth, _param_forcePortal = _param.forcePortal, forcePortal = _param_forcePortal === void 0 ? true : _param_forcePortal, autoHideScrollbar = _param.autoHideScrollbar, autoHideScrollbarDelay = _param.autoHideScrollbarDelay, className = _param.className, _param_noMaxHeight = _param.noMaxHeight, noMaxHeight = _param_noMaxHeight === void 0 ? false : _param_noMaxHeight, restProps = CustomSelectDropdown_object_without_properties(_param, [
+    var children = _param.children, targetRef = _param.targetRef, scrollBoxRef = _param.scrollBoxRef, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'bottom' : _param_placement, fetching = _param.fetching, parentOnPlacementChange = _param.onPlacementChange, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 0 : _param_offsetDistance, _param_autoWidth = _param.autoWidth, autoWidth = _param_autoWidth === void 0 ? false : _param_autoWidth, _param_forcePortal = _param.forcePortal, forcePortal = _param_forcePortal === void 0 ? true : _param_forcePortal, autoHideScrollbar = _param.autoHideScrollbar, autoHideScrollbarDelay = _param.autoHideScrollbarDelay, className = _param.className, _param_noMaxHeight = _param.noMaxHeight, noMaxHeight = _param_noMaxHeight === void 0 ? false : _param_noMaxHeight, // CustomScrollView
+    overscrollBehavior = _param.overscrollBehavior, restProps = CustomSelectDropdown_object_without_properties(_param, [
         "children",
         "targetRef",
         "scrollBoxRef",
@@ -36685,7 +37435,8 @@ var CustomSelectDropdown_CustomSelectDropdown = function(_param) {
         "autoHideScrollbar",
         "autoHideScrollbarDelay",
         "className",
-        "noMaxHeight"
+        "noMaxHeight",
+        "overscrollBehavior"
     ]);
     var _React_useState = CustomSelectDropdown_sliced_to_array(React.useState(function() {
         return calcIsTop(placement);
@@ -36711,7 +37462,8 @@ var CustomSelectDropdown_CustomSelectDropdown = function(_param) {
         boxRef: scrollBoxRef,
         className: noMaxHeight ? undefined : "vkuiCustomSelectDropdown__in--withMaxHeight",
         autoHideScrollbar: autoHideScrollbar,
-        autoHideScrollbarDelay: autoHideScrollbarDelay
+        autoHideScrollbarDelay: autoHideScrollbarDelay,
+        overscrollBehavior: overscrollBehavior
     }, fetching ? /*#__PURE__*/ React.createElement("div", {
         className: "vkuiCustomSelectDropdown__fetching"
     }, /*#__PURE__*/ React.createElement(Spinner, {
@@ -37406,8 +38158,8 @@ var 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, // 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, restProps = ChipsSelect_object_without_properties(_param, [
+    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
+    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",
         "className",
@@ -37428,6 +38180,7 @@ var findIndexBefore = function() {
         "dropdownTestId",
         "onClose",
         "onOpen",
+        "overscrollBehavior",
         "getRef",
         "value",
         "defaultValue",
@@ -37445,7 +38198,9 @@ var findIndexBefore = function() {
         "onInputChange",
         "onBlur",
         "onKeyDown",
-        "dropdownOffsetDistance"
+        "dropdownOffsetDistance",
+        "allowClearButton",
+        "clearButtonTestId"
     ]);
     var _useChipsSelect = useChipsSelect({
         // option
@@ -37471,7 +38226,7 @@ var findIndexBefore = function() {
         disabled: disabled
     }), // Связано с ChipsInputProps
     // option
-    value = _useChipsSelect.value, addOptionFromInput = _useChipsSelect.addOptionFromInput, addOption = _useChipsSelect.addOption, removeOption = _useChipsSelect.removeOption, // input
+    value = _useChipsSelect.value, addOptionFromInput = _useChipsSelect.addOptionFromInput, addOption = _useChipsSelect.addOption, removeOption = _useChipsSelect.removeOption, clearOptions = _useChipsSelect.clearOptions, // input
     inputRefHook = _useChipsSelect.inputRef, inputValue = _useChipsSelect.inputValue, clearInput = _useChipsSelect.clearInput, onInputChange = _useChipsSelect.onInputChange, // Связано с CustomSelectDropdownProps
     options = _useChipsSelect.options, opened = _useChipsSelect.opened, setOpened = _useChipsSelect.setOpened, focusedOption = _useChipsSelect.focusedOption, focusedOptionIndex = _useChipsSelect.focusedOptionIndex, setFocusedOption = _useChipsSelect.setFocusedOption, setFocusedOptionIndex = _useChipsSelect.setFocusedOptionIndex;
     // Связано с ChipsInputProps
@@ -37638,22 +38393,27 @@ var findIndexBefore = function() {
         opened,
         dropdownVerticalPlacement
     ]);
+    var clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ChipsInputBase, ChipsSelect_object_spread_props(ChipsSelect_object_spread({}, restProps), {
         disabled: disabled,
         readOnly: readOnly,
+        clearButtonShown: clearButtonShown,
+        clearButtonTestId: clearButtonTestId,
         // FormFieldProps
         id: labelledbyId,
         getRootRef: rootRef,
         className: classNames("vkuiChipsSelect", openedClassNames, className),
         status: status,
         after: dropdownIconProp || /*#__PURE__*/ React.createElement(DropdownIcon, {
-            opened: opened
+            opened: opened,
+            className: clearButtonShown ? "vkuiChipsSelect__dropdown-icon" : undefined
         }),
         // option
         value: value,
         onAddChipOption: addOptionFromInput,
         onRemoveChipOption: removeOption,
         renderChip: renderChip,
+        onClear: clearOptions,
         // input
         getRef: inputRef,
         inputValue: inputValue,
@@ -37680,6 +38440,7 @@ var findIndexBefore = function() {
         forcePortal: forceDropdownPortal,
         noMaxHeight: noMaxHeight,
         offsetDistance: dropdownOffsetDistance,
+        overscrollBehavior: overscrollBehavior,
         // a11y
         id: dropdownId,
         role: "listbox",
@@ -38638,7 +39399,7 @@ var Textarea_sizeYClassNames = Textarea_define_property({
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */ var Textarea = function(_param) {
-    var _param_grow = _param.grow, grow = _param_grow === void 0 ? true : _param_grow, style = _param.style, onResize = _param.onResize, className = _param.className, getRootRef = _param.getRootRef, getRef = _param.getRef, _param_rows = _param.rows, rows = _param_rows === void 0 ? 2 : _param_rows, maxHeight = _param.maxHeight, status = _param.status, onChange = _param.onChange, align = _param.align, mode = _param.mode, restProps = Textarea_object_without_properties(_param, [
+    var _param_grow = _param.grow, grow = _param_grow === void 0 ? true : _param_grow, style = _param.style, onResize = _param.onResize, className = _param.className, getRootRef = _param.getRootRef, getRef = _param.getRef, _param_rows = _param.rows, rows = _param_rows === void 0 ? 2 : _param_rows, maxHeight = _param.maxHeight, status = _param.status, onChange = _param.onChange, align = _param.align, mode = _param.mode, after = _param.after, before = _param.before, afterAlign = _param.afterAlign, beforeAlign = _param.beforeAlign, restProps = Textarea_object_without_properties(_param, [
         "grow",
         "style",
         "onResize",
@@ -38650,7 +39411,11 @@ var Textarea_sizeYClassNames = Textarea_define_property({
         "status",
         "onChange",
         "align",
-        "mode"
+        "mode",
+        "after",
+        "before",
+        "afterAlign",
+        "beforeAlign"
     ]);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? 'none' : _useAdaptivity_sizeY;
     var _useResizeTextarea = Textarea_sliced_to_array(useResizeTextarea(onResize, grow), 2), refResizeTextarea = _useResizeTextarea[0], resize = _useResizeTextarea[1];
@@ -38665,7 +39430,11 @@ var Textarea_sizeYClassNames = Textarea_define_property({
         getRootRef: getRootRef,
         disabled: restProps.disabled,
         status: status,
-        mode: mode
+        mode: mode,
+        after: after,
+        before: before,
+        afterAlign: afterAlign,
+        beforeAlign: beforeAlign
     }, /*#__PURE__*/ React.createElement(UnstyledTextField, Textarea_object_spread_props(Textarea_object_spread({}, restProps), {
         as: "textarea",
         style: {
@@ -38908,6 +39677,7 @@ function RadioGroup_object_without_properties_loose(source, excluded) {
 
 
 
+
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
  */ var RadioGroup = function(_param) {
@@ -38915,7 +39685,8 @@ function RadioGroup_object_without_properties_loose(source, excluded) {
         "mode"
     ]);
     return /*#__PURE__*/ React.createElement(RootComponent, RadioGroup_object_spread({
-        baseClassName: classNames("vkuiRadioGroup", 'vkuiInternalRadioGroup', mode === 'horizontal' && "vkuiRadioGroup--mode-horizontal")
+        baseClassName: classNames("vkuiRadioGroup", 'vkuiInternalRadioGroup', mode === 'horizontal' && "vkuiRadioGroup--mode-horizontal"),
+        role: "radiogroup"
     }, restProps));
 };
 
@@ -39211,6 +39982,7 @@ function CustomSelectClearButton_object_without_properties_loose(source, exclude
 
 
 
+
 var CustomSelectClearButton_CustomSelectClearButton = function(_param) {
     var className = _param.className, onClick = _param.onClick, restProps = CustomSelectClearButton_object_without_properties(_param, [
         "className",
@@ -39678,7 +40450,7 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
  * @see https://vkcom.github.io/VKUI/#/CustomSelect
  */ function CustomSelect_CustomSelect(props) {
     var _React_useState = CustomSelect_sliced_to_array(React.useState(false), 2), opened = _React_useState[0], setOpened = _React_useState[1];
-    var before = props.before, name = props.name, className = props.className, getRef = props.getRef, getRootRef = props.getRootRef, _props_popupDirection = props.popupDirection, popupDirection = _props_popupDirection === void 0 ? 'bottom' : _props_popupDirection, style = props.style, onChange = props.onChange, children = props.children, onInputChangeProp = props.onInputChange, renderDropdown = props.renderDropdown, onOpen = props.onOpen, onClose = props.onClose, fetching = props.fetching, forceDropdownPortal = props.forceDropdownPortal, _props_selectType = props.selectType, selectType = _props_selectType === void 0 ? 'default' : _props_selectType, autoHideScrollbar = props.autoHideScrollbar, autoHideScrollbarDelay = props.autoHideScrollbarDelay, _props_searchable = props.searchable, searchable = _props_searchable === void 0 ? false : _props_searchable, tmp = props.renderOption, renderOptionProp = tmp === void 0 ? defaultRenderOptionFn : tmp, tmp1 = props.options, optionsProp = tmp1 === void 0 ? CustomSelect_defaultOptions : tmp1, _props_emptyText = props.emptyText, emptyText = _props_emptyText === void 0 ? 'Ничего не найдено' : _props_emptyText, _props_filterFn = props.filterFn, filterFn = _props_filterFn === void 0 ? defaultFilterFn : _props_filterFn, iconProp = props.icon, _props_ClearButton = props.ClearButton, ClearButton = _props_ClearButton === void 0 ? CustomSelectClearButton : _props_ClearButton, _props_allowClearButton = props.allowClearButton, allowClearButton = _props_allowClearButton === void 0 ? false : _props_allowClearButton, _props_dropdownOffsetDistance = props.dropdownOffsetDistance, dropdownOffsetDistance = _props_dropdownOffsetDistance === void 0 ? 0 : _props_dropdownOffsetDistance, _props_dropdownAutoWidth = props.dropdownAutoWidth, dropdownAutoWidth = _props_dropdownAutoWidth === void 0 ? false : _props_dropdownAutoWidth, _props_noMaxHeight = props.noMaxHeight, noMaxHeight = _props_noMaxHeight === void 0 ? false : _props_noMaxHeight, ariaLabelledBy = props['aria-labelledby'], clearButtonTestId = props.clearButtonTestId, nativeSelectTestId = props.nativeSelectTestId, defaultValue = props.defaultValue, required = props.required, restProps = CustomSelect_object_without_properties(props, [
+    var before = props.before, name = props.name, className = props.className, getRef = props.getRef, getRootRef = props.getRootRef, _props_popupDirection = props.popupDirection, popupDirection = _props_popupDirection === void 0 ? 'bottom' : _props_popupDirection, style = props.style, onChange = props.onChange, children = props.children, onInputChangeProp = props.onInputChange, renderDropdown = props.renderDropdown, onOpen = props.onOpen, onClose = props.onClose, fetching = props.fetching, forceDropdownPortal = props.forceDropdownPortal, _props_selectType = props.selectType, selectType = _props_selectType === void 0 ? 'default' : _props_selectType, autoHideScrollbar = props.autoHideScrollbar, autoHideScrollbarDelay = props.autoHideScrollbarDelay, _props_searchable = props.searchable, searchable = _props_searchable === void 0 ? false : _props_searchable, tmp = props.renderOption, renderOptionProp = tmp === void 0 ? defaultRenderOptionFn : tmp, tmp1 = props.options, optionsProp = tmp1 === void 0 ? CustomSelect_defaultOptions : tmp1, _props_emptyText = props.emptyText, emptyText = _props_emptyText === void 0 ? 'Ничего не найдено' : _props_emptyText, _props_filterFn = props.filterFn, filterFn = _props_filterFn === void 0 ? defaultFilterFn : _props_filterFn, iconProp = props.icon, _props_ClearButton = props.ClearButton, ClearButton = _props_ClearButton === void 0 ? CustomSelectClearButton : _props_ClearButton, _props_allowClearButton = props.allowClearButton, allowClearButton = _props_allowClearButton === void 0 ? false : _props_allowClearButton, _props_dropdownOffsetDistance = props.dropdownOffsetDistance, dropdownOffsetDistance = _props_dropdownOffsetDistance === void 0 ? 0 : _props_dropdownOffsetDistance, _props_dropdownAutoWidth = props.dropdownAutoWidth, dropdownAutoWidth = _props_dropdownAutoWidth === void 0 ? false : _props_dropdownAutoWidth, _props_noMaxHeight = props.noMaxHeight, noMaxHeight = _props_noMaxHeight === void 0 ? false : _props_noMaxHeight, ariaLabelledBy = props['aria-labelledby'], clearButtonTestId = props.clearButtonTestId, nativeSelectTestId = props.nativeSelectTestId, defaultValue = props.defaultValue, required = props.required, getSelectInputRef = props.getSelectInputRef, overscrollBehavior = props.overscrollBehavior, restProps = CustomSelect_object_without_properties(props, [
         "before",
         "name",
         "className",
@@ -39712,7 +40484,9 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
         "clearButtonTestId",
         "nativeSelectTestId",
         "defaultValue",
-        "required"
+        "required",
+        "getSelectInputRef",
+        "overscrollBehavior"
     ]);
     if (false) {}
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? 'none' : _useAdaptivity_sizeY;
@@ -40129,14 +40903,16 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
         renderDropdown,
         renderOption
     ]);
-    var selectInputRef = React.useRef(null);
+    var selectInputRef = useExternRef(getSelectInputRef);
     var focusOnInputTimerRef = React.useRef();
     var focusOnInput = React.useCallback(function() {
         clearTimeout(focusOnInputTimerRef.current);
         focusOnInputTimerRef.current = setTimeout(function() {
             selectInputRef.current && selectInputRef.current.focus();
         }, 0);
-    }, []);
+    }, [
+        selectInputRef
+    ]);
     useIsomorphicLayoutEffect(function clearFocusOnInputTimer() {
         return function() {
             clearTimeout(focusOnInputTimerRef.current);
@@ -40204,7 +40980,8 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
         }
     }, [
         document,
-        focusOnInput
+        focusOnInput,
+        selectInputRef
     ]);
     var preventInputBlurWhenClickInsideFocusedSelectArea = function(e) {
         // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,
@@ -40280,6 +41057,7 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
         onPlacementChange: setPopperPlacement,
         onMouseLeave: resetFocusedOption,
         fetching: fetching,
+        overscrollBehavior: overscrollBehavior,
         offsetDistance: dropdownOffsetDistance,
         autoWidth: dropdownAutoWidth,
         forcePortal: forceDropdownPortal,
@@ -40565,7 +41343,7 @@ function Select_object_without_properties_loose(source, excluded) {
         "children",
         "className"
     ]);
-    var _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, searchable = props.searchable, emptyText = props.emptyText, onInputChange = props.onInputChange, filterFn = props.filterFn, popupDirection = props.popupDirection, renderOption = props.renderOption, renderDropdown = props.renderDropdown, fetching = props.fetching, onClose = props.onClose, onOpen = props.onOpen, icon = props.icon, ClearButton = props.ClearButton, allowClearButton = props.allowClearButton, clearButtonTestId = props.clearButtonTestId, dropdownOffsetDistance = props.dropdownOffsetDistance, dropdownAutoWidth = props.dropdownAutoWidth, forceDropdownPortal = props.forceDropdownPortal, noMaxHeight = props.noMaxHeight, autoHideScrollbar = props.autoHideScrollbar, autoHideScrollbarDelay = props.autoHideScrollbarDelay, labelTextTestId = props.labelTextTestId, nativeSelectTestId = props.nativeSelectTestId, after = props.after, mode = props.mode, restProps = Select_object_without_properties(props, [
+    var _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, searchable = props.searchable, emptyText = props.emptyText, onInputChange = props.onInputChange, filterFn = props.filterFn, popupDirection = props.popupDirection, renderOption = props.renderOption, renderDropdown = props.renderDropdown, fetching = props.fetching, onClose = props.onClose, onOpen = props.onOpen, icon = props.icon, ClearButton = props.ClearButton, allowClearButton = props.allowClearButton, clearButtonTestId = props.clearButtonTestId, dropdownOffsetDistance = props.dropdownOffsetDistance, dropdownAutoWidth = props.dropdownAutoWidth, forceDropdownPortal = props.forceDropdownPortal, noMaxHeight = props.noMaxHeight, autoHideScrollbar = props.autoHideScrollbar, autoHideScrollbarDelay = props.autoHideScrollbarDelay, labelTextTestId = props.labelTextTestId, nativeSelectTestId = props.nativeSelectTestId, after = props.after, mode = props.mode, getSelectInputRef = props.getSelectInputRef, overscrollBehavior = props.overscrollBehavior, beforeAlign = props.beforeAlign, afterAlign = props.afterAlign, restProps = Select_object_without_properties(props, [
         "options",
         "searchable",
         "emptyText",
@@ -40590,7 +41368,11 @@ function Select_object_without_properties_loose(source, excluded) {
         "labelTextTestId",
         "nativeSelectTestId",
         "after",
-        "mode"
+        "mode",
+        "getSelectInputRef",
+        "overscrollBehavior",
+        "beforeAlign",
+        "afterAlign"
     ]);
     var deviceType = useAdaptivityConditionalRender().deviceType;
     var nativeProps = restProps;
@@ -44655,6 +45437,7 @@ function Div_object_spread(target) {
 }
 
 
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Div
  */ var Div = function(props) {
@@ -44896,6 +45679,7 @@ function PanelHeaderBack_object_without_properties_loose(source, excluded) {
 
 
 
+
 var getBackIcon = function(platform) {
     switch(platform){
         case 'ios':
@@ -45040,6 +45824,7 @@ function PanelHeaderEdit_object_without_properties_loose(source, excluded) {
 
 
 
+
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */ var PanelHeaderEdit = function(_param) {
@@ -45972,7 +46757,9 @@ var ViewInfiniteComponent = /*#__PURE__*/ function(_superClass) {
                     this.blurActiveElement();
                     var prevScrolls = this.scrolls[prevProps.activePanel] || [];
                     var scrolls = ViewInfinite_object_spread_props(ViewInfinite_object_spread({}, this.scrolls), ViewInfinite_define_property({}, prevProps.activePanel, ViewInfinite_to_consumable_array(prevScrolls).concat([
-                        (_this_props_scroll = this.props.scroll) === null || _this_props_scroll === void 0 ? void 0 : _this_props_scroll.getScroll().y
+                        (_this_props_scroll = this.props.scroll) === null || _this_props_scroll === void 0 ? void 0 : _this_props_scroll.getScroll({
+                            compensateKeyboardHeight: false
+                        }).y
                     ])));
                     this.scrolls = scrolls;
                     if (this.shouldDisableTransitionMotion()) {
@@ -46329,6 +47116,7 @@ var ViewInfinite = withContext(withContext(withContext(withPlatform(withDOM(View
 
 
 
+
 /**
  * Popouts
  */