@alfalab/core-components 47.3.0 → 47.4.0

package/base-modal/index.css

@@ -21,13 +21,13 @@
     margin-top: calc(var(--window-inner-scrollY) * -1);
     position: fixed;
     overflow: hidden;
-} .base-modal__component_1tpdy {
+} .base-modal__component_230cv {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-modal-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_1tpdy {
+} .base-modal__wrapper_230cv {
     position: fixed;
     top: 0;
     left: 0;
@@ -40,27 +40,27 @@
     align-items: center;
     outline: 0;
     overscroll-behavior: none;
-} .base-modal__content_1tpdy {
+} .base-modal__content_230cv {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_1tpdy {
+} .base-modal__hidden_230cv {
     display: none;
-} .base-modal__backdrop_1tpdy {
+} .base-modal__backdrop_230cv {
     z-index: 0;
-} .base-modal__appear_1tpdy,
-.base-modal__enter_1tpdy {
+} .base-modal__appear_230cv,
+.base-modal__enter_230cv {
     opacity: 0;
-} .base-modal__appearActive_1tpdy,
-.base-modal__enterActive_1tpdy {
+} .base-modal__appearActive_230cv,
+.base-modal__enterActive_230cv {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_1tpdy {
+} .base-modal__exit_230cv {
     opacity: 1;
-} .base-modal__exitActive_1tpdy,
-.base-modal__exitDone_1tpdy {
+} .base-modal__exitActive_230cv,
+.base-modal__exitDone_230cv {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/modern/Component.js

@@ -14,7 +14,7 @@ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerS
 import './matches-polyfill.js';
 import '../../global-store/modern';
 
-const styles = {"component":"base-modal__component_1tpdy","wrapper":"base-modal__wrapper_1tpdy","content":"base-modal__content_1tpdy","hidden":"base-modal__hidden_1tpdy","backdrop":"base-modal__backdrop_1tpdy","appear":"base-modal__appear_1tpdy","enter":"base-modal__enter_1tpdy","appearActive":"base-modal__appearActive_1tpdy","enterActive":"base-modal__enterActive_1tpdy","exit":"base-modal__exit_1tpdy","exitActive":"base-modal__exitActive_1tpdy","exitDone":"base-modal__exitDone_1tpdy"};
+const styles = {"component":"base-modal__component_230cv","wrapper":"base-modal__wrapper_230cv","content":"base-modal__content_230cv","hidden":"base-modal__hidden_230cv","backdrop":"base-modal__backdrop_230cv","appear":"base-modal__appear_230cv","enter":"base-modal__enter_230cv","appearActive":"base-modal__appearActive_230cv","enterActive":"base-modal__enterActive_230cv","exit":"base-modal__exit_230cv","exitActive":"base-modal__exitActive_230cv","exitDone":"base-modal__exitDone_230cv"};
 require('./index.css');
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

package/base-modal/modern/index.css

@@ -21,13 +21,13 @@
     margin-top: calc(var(--window-inner-scrollY) * -1);
     position: fixed;
     overflow: hidden;
-} .base-modal__component_1tpdy {
+} .base-modal__component_230cv {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-modal-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_1tpdy {
+} .base-modal__wrapper_230cv {
     position: fixed;
     top: 0;
     left: 0;
@@ -40,27 +40,27 @@
     align-items: center;
     outline: 0;
     overscroll-behavior: none;
-} .base-modal__content_1tpdy {
+} .base-modal__content_230cv {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_1tpdy {
+} .base-modal__hidden_230cv {
     display: none;
-} .base-modal__backdrop_1tpdy {
+} .base-modal__backdrop_230cv {
     z-index: 0;
-} .base-modal__appear_1tpdy,
-.base-modal__enter_1tpdy {
+} .base-modal__appear_230cv,
+.base-modal__enter_230cv {
     opacity: 0;
-} .base-modal__appearActive_1tpdy,
-.base-modal__enterActive_1tpdy {
+} .base-modal__appearActive_230cv,
+.base-modal__enterActive_230cv {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_1tpdy {
+} .base-modal__exit_230cv {
     opacity: 1;
-} .base-modal__exitActive_1tpdy,
-.base-modal__exitDone_1tpdy {
+} .base-modal__exitActive_230cv,
+.base-modal__exitDone_230cv {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/bottom-sheet/component.js

@@ -12,6 +12,7 @@ var components_footer_Component = require('./components/footer/Component.js');
 var components_header_Component = require('./components/header/Component.js');
 var components_swipeableBackdrop_Component = require('./components/swipeable-backdrop/Component.js');
 var consts_swipeConsts = require('./consts/swipeConsts.js');
+var hooks_useVisualviewportSize = require('./hooks/use-visualviewport-size.js');
 var utils = require('./utils.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -20,14 +21,17 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"modal":"bottom-sheet__modal_5m16p","wrapper":"bottom-sheet__wrapper_5m16p","fullscreen":"bottom-sheet__fullscreen_5m16p","component":"bottom-sheet__component_5m16p","withTransition":"bottom-sheet__withTransition_5m16p","scrollableContainer":"bottom-sheet__scrollableContainer_5m16p","marker":"bottom-sheet__marker_5m16p","defaultMarker":"bottom-sheet__defaultMarker_5m16p","content":"bottom-sheet__content_5m16p","noHeader":"bottom-sheet__noHeader_5m16p","noFooter":"bottom-sheet__noFooter_5m16p","scrollLocked":"bottom-sheet__scrollLocked_5m16p","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_5m16p","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_5m16p","appear":"bottom-sheet__appear_5m16p","enter":"bottom-sheet__enter_5m16p","appearActive":"bottom-sheet__appearActive_5m16p","enterActive":"bottom-sheet__enterActive_5m16p","enterDone":"bottom-sheet__enterDone_5m16p","appearDone":"bottom-sheet__appearDone_5m16p","exit":"bottom-sheet__exit_5m16p","exitActive":"bottom-sheet__exitActive_5m16p","safeAreaBottom":"bottom-sheet__safeAreaBottom_5m16p","background-accent":"bottom-sheet__background-accent_5m16p","background-info":"bottom-sheet__background-info_5m16p","background-attention-muted":"bottom-sheet__background-attention-muted_5m16p","background-positive-muted":"bottom-sheet__background-positive-muted_5m16p","background-negative-muted":"bottom-sheet__background-negative-muted_5m16p","background-primary":"bottom-sheet__background-primary_5m16p","background-primary-inverted":"bottom-sheet__background-primary-inverted_5m16p","background-secondary":"bottom-sheet__background-secondary_5m16p","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_5m16p","background-tertiary":"bottom-sheet__background-tertiary_5m16p","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_5m16p","background-quaternary":"bottom-sheet__background-quaternary_5m16p","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_5m16p","background-specialbg-component":"bottom-sheet__background-specialbg-component_5m16p","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_5m16p","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_5m16p","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_5m16p","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_5m16p","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_5m16p","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_5m16p","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_5m16p","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_5m16p"};
+var styles = {"modal":"bottom-sheet__modal_90r42","wrapper":"bottom-sheet__wrapper_90r42","fullscreen":"bottom-sheet__fullscreen_90r42","component":"bottom-sheet__component_90r42","withTransition":"bottom-sheet__withTransition_90r42","scrollableContainer":"bottom-sheet__scrollableContainer_90r42","marker":"bottom-sheet__marker_90r42","defaultMarker":"bottom-sheet__defaultMarker_90r42","content":"bottom-sheet__content_90r42","noHeader":"bottom-sheet__noHeader_90r42","noFooter":"bottom-sheet__noFooter_90r42","scrollLocked":"bottom-sheet__scrollLocked_90r42","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_90r42","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_90r42","appear":"bottom-sheet__appear_90r42","enter":"bottom-sheet__enter_90r42","appearActive":"bottom-sheet__appearActive_90r42","enterActive":"bottom-sheet__enterActive_90r42","enterDone":"bottom-sheet__enterDone_90r42","appearDone":"bottom-sheet__appearDone_90r42","exit":"bottom-sheet__exit_90r42","exitActive":"bottom-sheet__exitActive_90r42","safeAreaBottom":"bottom-sheet__safeAreaBottom_90r42","background-accent":"bottom-sheet__background-accent_90r42","background-info":"bottom-sheet__background-info_90r42","background-attention-muted":"bottom-sheet__background-attention-muted_90r42","background-positive-muted":"bottom-sheet__background-positive-muted_90r42","background-negative-muted":"bottom-sheet__background-negative-muted_90r42","background-primary":"bottom-sheet__background-primary_90r42","background-primary-inverted":"bottom-sheet__background-primary-inverted_90r42","background-secondary":"bottom-sheet__background-secondary_90r42","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_90r42","background-tertiary":"bottom-sheet__background-tertiary_90r42","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_90r42","background-quaternary":"bottom-sheet__background-quaternary_90r42","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_90r42","background-specialbg-component":"bottom-sheet__background-specialbg-component_90r42","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_90r42","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_90r42","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_90r42","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_90r42","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_90r42","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_90r42","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_90r42","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_90r42"};
 require('./index.css');
 
 var isNil = coreComponentsShared.fnUtils.isNil;
 var BottomSheet = React.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f;
-    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _t = _a.iOSLock, iOSLock = _t === void 0 ? false : _t;
-    var fullHeight = reactDiv100vh.use100vh() || 0;
+    var _g, _h;
+    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _j = _a.titleSize, titleSize = _j === void 0 ? 'default' : _j, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _k = _a.titleAlign, titleAlign = _k === void 0 ? 'left' : _k, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _l = _a.stickyFooter, stickyFooter = _l === void 0 ? true : _l, _m = _a.initialHeight, initialHeight = _m === void 0 ? 'default' : _m, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _o = _a.transitionProps, transitionProps = _o === void 0 ? {} : _o, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _p = _a.swipeable, swipeable = _p === void 0 ? true : _p, _q = _a.swipeableContent, swipeableContent = _q === void 0 ? true : _q, _r = _a.swipeThreshold, swipeThreshold = _r === void 0 ? 5 : _r, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _s = _a.scrollableContainerRef, scrollableContainerRef = _s === void 0 ? function () { return null; } : _s, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _t = _a.sheetContainerRef, sheetContainerRef = _t === void 0 ? function () { return null; } : _t, _u = _a.headerOffset, headerOffset = _u === void 0 ? 24 : _u, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _v = _a.iOSLock, iOSLock = _v === void 0 ? false : _v, _w = _a.virtualKeyboard, virtualKeyboard = _w === void 0 ? false : _w;
+    var windowHeight = (_g = reactDiv100vh.use100vh()) !== null && _g !== void 0 ? _g : 0;
+    var visibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize(virtualKeyboard);
+    var fullHeight = virtualKeyboard ? (_h = visibleViewportSize === null || visibleViewportSize === void 0 ? void 0 : visibleViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
     var initialIndexRef = React.useRef(initialActiveAreaIndex);
@@ -41,14 +45,14 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         var iOSViewHeight = coreComponentsShared.isClient()
             ? ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight)
             : 0;
-        var viewHeight = coreComponentsShared.os.isIOS() ? iOSViewHeight : fullHeight;
+        var viewHeight = coreComponentsShared.os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
     var lastMagneticArea = magneticAreas[magneticAreas.length - 1];
-    var _u = React.useState(0), sheetOffset = _u[0], setSheetOffset = _u[1];
-    var _v = React.useState(1), backdropOpacity = _v[0], setBackdropOpacity = _v[1];
-    var _w = React.useState(-1), activeAreaIdx = _w[0], setActiveAreaIdx = _w[1];
-    var _x = React.useState(null), swipingInProgress = _x[0], setSwipingInProgress = _x[1];
+    var _x = React.useState(0), sheetOffset = _x[0], setSheetOffset = _x[1];
+    var _y = React.useState(1), backdropOpacity = _y[0], setBackdropOpacity = _y[1];
+    var _z = React.useState(-1), activeAreaIdx = _z[0], setActiveAreaIdx = _z[1];
+    var _0 = React.useState(null), swipingInProgress = _0[0], setSwipingInProgress = _0[1];
     var scrollOccurred = React.useRef(false);
     var headerRef = React.useRef(null);
     var contentRef = React.useRef(null);
@@ -351,6 +355,9 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
             ? "".concat(lastMagneticArea, "px")
             : 'unset',
         maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
+            : undefined,
     }); };
     var renderMarker = function () {
         if (swipeable) {

package/bottom-sheet/components/footer/Component.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"footer":"bottom-sheet__footer_1ms3d","sticky":"bottom-sheet__sticky_1ms3d","highlighted":"bottom-sheet__highlighted_1ms3d","background-accent":"bottom-sheet__background-accent_1ms3d","background-info":"bottom-sheet__background-info_1ms3d","background-attention-muted":"bottom-sheet__background-attention-muted_1ms3d","background-positive-muted":"bottom-sheet__background-positive-muted_1ms3d","background-negative-muted":"bottom-sheet__background-negative-muted_1ms3d","background-primary":"bottom-sheet__background-primary_1ms3d","background-primary-inverted":"bottom-sheet__background-primary-inverted_1ms3d","background-secondary":"bottom-sheet__background-secondary_1ms3d","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1ms3d","background-tertiary":"bottom-sheet__background-tertiary_1ms3d","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1ms3d","background-quaternary":"bottom-sheet__background-quaternary_1ms3d","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1ms3d","background-specialbg-component":"bottom-sheet__background-specialbg-component_1ms3d","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1ms3d","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1ms3d","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1ms3d","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1ms3d","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1ms3d","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1ms3d","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1ms3d","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1ms3d"};
+var styles = {"footer":"bottom-sheet__footer_10j16","sticky":"bottom-sheet__sticky_10j16","highlighted":"bottom-sheet__highlighted_10j16","background-accent":"bottom-sheet__background-accent_10j16","background-info":"bottom-sheet__background-info_10j16","background-attention-muted":"bottom-sheet__background-attention-muted_10j16","background-positive-muted":"bottom-sheet__background-positive-muted_10j16","background-negative-muted":"bottom-sheet__background-negative-muted_10j16","background-primary":"bottom-sheet__background-primary_10j16","background-primary-inverted":"bottom-sheet__background-primary-inverted_10j16","background-secondary":"bottom-sheet__background-secondary_10j16","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_10j16","background-tertiary":"bottom-sheet__background-tertiary_10j16","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_10j16","background-quaternary":"bottom-sheet__background-quaternary_10j16","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_10j16","background-specialbg-component":"bottom-sheet__background-specialbg-component_10j16","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_10j16","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_10j16","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_10j16","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_10j16","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_10j16","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_10j16","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_10j16","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_10j16"};
 require('./index.css');
 
 var Footer = function (_a) {

package/bottom-sheet/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 1guei */
+/* hash: 1pai5 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-modal-bg-primary: #fff;
@@ -46,58 +46,58 @@
     /* footer */
     --bottom-sheet-footer-border-top: 1px solid var(--color-light-neutral-300);
     --bottom-sheet-footer-background-color: var(--color-light-modal-bg-primary);
-} .bottom-sheet__footer_1ms3d {
+} .bottom-sheet__footer_10j16 {
     padding: var(--gap-m) var(--gap-m);
     background-color: var(--color-light-modal-bg-primary);
-} .bottom-sheet__sticky_1ms3d {
+} .bottom-sheet__sticky_10j16 {
     position: sticky;
     bottom: 0;
     z-index: 1;
-} .bottom-sheet__highlighted_1ms3d {
+} .bottom-sheet__highlighted_10j16 {
     border-top: var(--bottom-sheet-footer-border-top);
     background-color: var(--bottom-sheet-footer-background-color);
-} .bottom-sheet__background-accent_1ms3d {
+} .bottom-sheet__background-accent_10j16 {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_1ms3d {
+        } .bottom-sheet__background-info_10j16 {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_1ms3d {
+        } .bottom-sheet__background-attention-muted_10j16 {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_1ms3d {
+        } .bottom-sheet__background-positive-muted_10j16 {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_1ms3d {
+        } .bottom-sheet__background-negative-muted_10j16 {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_1ms3d {
+        } .bottom-sheet__background-primary_10j16 {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_1ms3d {
+        } .bottom-sheet__background-primary-inverted_10j16 {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_1ms3d {
+        } .bottom-sheet__background-secondary_10j16 {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_1ms3d {
+        } .bottom-sheet__background-secondary-inverted_10j16 {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_1ms3d {
+        } .bottom-sheet__background-tertiary_10j16 {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_1ms3d {
+        } .bottom-sheet__background-tertiary-inverted_10j16 {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_1ms3d {
+        } .bottom-sheet__background-quaternary_10j16 {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_1ms3d {
+        } .bottom-sheet__background-quaternary-inverted_10j16 {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_1ms3d {
+        } .bottom-sheet__background-specialbg-component_10j16 {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_1ms3d {
+        } .bottom-sheet__background-specialbg-component-inverted_10j16 {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_1ms3d {
+        } .bottom-sheet__background-specialbg-primary-grouped_10j16 {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_1ms3d {
+        } .bottom-sheet__background-specialbg-secondary-grouped_10j16 {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_1ms3d {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_10j16 {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_1ms3d {
+        } .bottom-sheet__background-specialbg-secondary-transparent_10j16 {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1ms3d {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_10j16 {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_1ms3d {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_10j16 {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1ms3d {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_10j16 {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/bottom-sheet/components/header/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"headerWrapper":"bottom-sheet__headerWrapper_1srn4","hasContent":"bottom-sheet__hasContent_1srn4","header":"bottom-sheet__header_1srn4","sticky":"bottom-sheet__sticky_1srn4","highlighted":"bottom-sheet__highlighted_1srn4","justifyEnd":"bottom-sheet__justifyEnd_1srn4","addon":"bottom-sheet__addon_1srn4","addonFixed":"bottom-sheet__addonFixed_1srn4","title":"bottom-sheet__title_1srn4","titleCenter":"bottom-sheet__titleCenter_1srn4","titleLeft":"bottom-sheet__titleLeft_1srn4","trimTitle":"bottom-sheet__trimTitle_1srn4"};
+var styles = {"headerWrapper":"bottom-sheet__headerWrapper_16ikx","hasContent":"bottom-sheet__hasContent_16ikx","header":"bottom-sheet__header_16ikx","sticky":"bottom-sheet__sticky_16ikx","highlighted":"bottom-sheet__highlighted_16ikx","justifyEnd":"bottom-sheet__justifyEnd_16ikx","addon":"bottom-sheet__addon_16ikx","addonFixed":"bottom-sheet__addonFixed_16ikx","title":"bottom-sheet__title_16ikx","titleCenter":"bottom-sheet__titleCenter_16ikx","titleLeft":"bottom-sheet__titleLeft_16ikx","trimTitle":"bottom-sheet__trimTitle_16ikx"};
 require('./index.css');
 
 var Header = function (_a) {

package/bottom-sheet/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1w81t */
+/* hash: 1l0li */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-300: #e7e8eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -30,42 +30,42 @@
     --bottom-sheet-title-font-family: var(--font-family-system);
 
     /* footer */
-} .bottom-sheet__headerWrapper_1srn4 {
+} .bottom-sheet__headerWrapper_16ikx {
     padding: var(--gap-s) var(--gap-xs) var(--gap-2xs);
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
     z-index: 1;
-} .bottom-sheet__hasContent_1srn4 {
+} .bottom-sheet__hasContent_16ikx {
     background-color: inherit;
-} .bottom-sheet__header_1srn4 {
+} .bottom-sheet__header_16ikx {
     display: flex;
-} .bottom-sheet__sticky_1srn4 {
+} .bottom-sheet__sticky_16ikx {
     position: sticky;
     top: 0;
-} .bottom-sheet__highlighted_1srn4 {
+} .bottom-sheet__highlighted_16ikx {
     border-bottom: var(--bottom-sheet-header-border-bottom);
-} .bottom-sheet__justifyEnd_1srn4 {
+} .bottom-sheet__justifyEnd_16ikx {
     justify-content: flex-end;
-} .bottom-sheet__addon_1srn4 {
+} .bottom-sheet__addon_16ikx {
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 48px;
     height: 48px;
-} .bottom-sheet__addonFixed_1srn4 {
+} .bottom-sheet__addonFixed_16ikx {
     position: fixed;
-} .bottom-sheet__title_1srn4 {
+} .bottom-sheet__title_16ikx {
     padding: var(--gap-s) var(--gap-xs);
     width: 100%;
     font-size: var(--bottom-sheet-title-font-size);
     font-weight: var(--bottom-sheet-title-font-weight);
     line-height: var(--bottom-sheet-title-line-height);
     font-family: var(--bottom-sheet-title-font-family);
-} .bottom-sheet__titleCenter_1srn4 {
+} .bottom-sheet__titleCenter_16ikx {
     text-align: center;
-} .bottom-sheet__titleLeft_1srn4 {
+} .bottom-sheet__titleLeft_16ikx {
     text-align: left;
-} .bottom-sheet__trimTitle_1srn4 {
+} .bottom-sheet__trimTitle_16ikx {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/bottom-sheet/cssm/component.js

@@ -12,6 +12,7 @@ var components_footer_Component = require('./components/footer/Component.js');
 var components_header_Component = require('./components/header/Component.js');
 var components_swipeableBackdrop_Component = require('./components/swipeable-backdrop/Component.js');
 var consts_swipeConsts = require('./consts/swipeConsts.js');
+var hooks_useVisualviewportSize = require('./hooks/use-visualviewport-size.js');
 var utils = require('./utils.js');
 var styles = require('./index.module.css');
 
@@ -25,8 +26,11 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 var isNil = coreComponentsShared.fnUtils.isNil;
 var BottomSheet = React.forwardRef(function (_a, ref) {
     var _b, _c, _d, _e, _f;
-    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _t = _a.iOSLock, iOSLock = _t === void 0 ? false : _t;
-    var fullHeight = reactDiv100vh.use100vh() || 0;
+    var _g, _h;
+    var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _j = _a.titleSize, titleSize = _j === void 0 ? 'default' : _j, subtitle = _a.subtitle, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _k = _a.titleAlign, titleAlign = _k === void 0 ? 'left' : _k, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _l = _a.stickyFooter, stickyFooter = _l === void 0 ? true : _l, _m = _a.initialHeight, initialHeight = _m === void 0 ? 'default' : _m, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _o = _a.transitionProps, transitionProps = _o === void 0 ? {} : _o, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _p = _a.swipeable, swipeable = _p === void 0 ? true : _p, _q = _a.swipeableContent, swipeableContent = _q === void 0 ? true : _q, _r = _a.swipeThreshold, swipeThreshold = _r === void 0 ? 5 : _r, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _s = _a.scrollableContainerRef, scrollableContainerRef = _s === void 0 ? function () { return null; } : _s, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _t = _a.sheetContainerRef, sheetContainerRef = _t === void 0 ? function () { return null; } : _t, _u = _a.headerOffset, headerOffset = _u === void 0 ? 24 : _u, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName, backButtonProps = _a.backButtonProps, _v = _a.iOSLock, iOSLock = _v === void 0 ? false : _v, _w = _a.virtualKeyboard, virtualKeyboard = _w === void 0 ? false : _w;
+    var windowHeight = (_g = reactDiv100vh.use100vh()) !== null && _g !== void 0 ? _g : 0;
+    var visibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize(virtualKeyboard);
+    var fullHeight = virtualKeyboard ? (_h = visibleViewportSize === null || visibleViewportSize === void 0 ? void 0 : visibleViewportSize.height) !== null && _h !== void 0 ? _h : 0 : windowHeight;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
     var initialIndexRef = React.useRef(initialActiveAreaIndex);
@@ -40,14 +44,14 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         var iOSViewHeight = coreComponentsShared.isClient()
             ? ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight)
             : 0;
-        var viewHeight = coreComponentsShared.os.isIOS() ? iOSViewHeight : fullHeight;
+        var viewHeight = coreComponentsShared.os.isIOS() && !virtualKeyboard ? iOSViewHeight : fullHeight;
         return [0, viewHeight - headerOffset];
-    }, [fullHeight, headerOffset, magneticAreasProp]);
+    }, [fullHeight, headerOffset, magneticAreasProp, virtualKeyboard]);
     var lastMagneticArea = magneticAreas[magneticAreas.length - 1];
-    var _u = React.useState(0), sheetOffset = _u[0], setSheetOffset = _u[1];
-    var _v = React.useState(1), backdropOpacity = _v[0], setBackdropOpacity = _v[1];
-    var _w = React.useState(-1), activeAreaIdx = _w[0], setActiveAreaIdx = _w[1];
-    var _x = React.useState(null), swipingInProgress = _x[0], setSwipingInProgress = _x[1];
+    var _x = React.useState(0), sheetOffset = _x[0], setSheetOffset = _x[1];
+    var _y = React.useState(1), backdropOpacity = _y[0], setBackdropOpacity = _y[1];
+    var _z = React.useState(-1), activeAreaIdx = _z[0], setActiveAreaIdx = _z[1];
+    var _0 = React.useState(null), swipingInProgress = _0[0], setSwipingInProgress = _0[1];
     var scrollOccurred = React.useRef(false);
     var headerRef = React.useRef(null);
     var contentRef = React.useRef(null);
@@ -350,6 +354,9 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
             ? "".concat(lastMagneticArea, "px")
             : 'unset',
         maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
+        marginBottom: virtualKeyboard && visibleViewportSize && windowHeight > visibleViewportSize.height
+            ? windowHeight - visibleViewportSize.height - visibleViewportSize.offsetTop
+            : undefined,
     }); };
     var renderMarker = function () {
         if (swipeable) {

package/bottom-sheet/cssm/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useVisibleViewportSize } from "./use-visualviewport-size";

package/bottom-sheet/cssm/hooks/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var hooks_useVisualviewportSize = require('./use-visualviewport-size.js');
+
+
+
+exports.useVisibleViewportSize = hooks_useVisualviewportSize.useVisibleViewportSize;

package/bottom-sheet/cssm/hooks/use-visualviewport-size.d.ts

@@ -0,0 +1,3 @@
+type VisualViewportSize = Pick<VisualViewport, 'height' | 'offsetTop'>;
+declare function useVisibleViewportSize(enabled?: boolean): VisualViewportSize | null;
+export { useVisibleViewportSize };

package/bottom-sheet/cssm/hooks/use-visualviewport-size.js

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var coreComponentsShared = require('../../../shared/cssm');
+
+var measureVisualViewport = function (visualViewport) {
+    if (!visualViewport)
+        return null;
+    var height = visualViewport.height, offsetTop = visualViewport.offsetTop;
+    return { height: height, offsetTop: offsetTop };
+};
+function useVisibleViewportSize(enabled) {
+    if (enabled === void 0) { enabled = false; }
+    var _a = React.useState(function () {
+        return coreComponentsShared.isClient() ? measureVisualViewport(window.visualViewport) : null;
+    }), size = _a[0], setSize = _a[1];
+    React.useEffect(function () {
+        var visualViewport = window.visualViewport;
+        if (!coreComponentsShared.isClient() || !enabled || !visualViewport)
+            return coreComponentsShared.fnUtils.noop;
+        var listener = function (event) {
+            return setSize(measureVisualViewport(event.target));
+        };
+        visualViewport.addEventListener('resize', listener);
+        visualViewport.addEventListener('scroll', listener);
+        return function () {
+            visualViewport.removeEventListener('resize', listener);
+            visualViewport.removeEventListener('scroll', listener);
+        };
+    }, [enabled]);
+    return size;
+}
+
+exports.useVisibleViewportSize = useVisibleViewportSize;

package/bottom-sheet/cssm/types.d.ts

@@ -281,5 +281,9 @@ type BottomSheetProps = {
      * Блокирует скролл когда модальное окно открыто. Работает только на iOS
      */
     iOSLock?: boolean;
+    /**
+     * Учитывать высоту виртуальной клавиатуры
+     */
+    virtualKeyboard?: boolean;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };