@alfalab/core-components 28.1.1 → 28.2.2

package/bank-card/modern/Component.js

@@ -8,7 +8,7 @@ import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
 import { MaskedInput } from '../../masked-input/modern';
 import { validateCardNumber } from './utils.js';
 
-var styles = {"component":"bank-card__component_13ls6","aspectRatioContainer":"bank-card__aspectRatioContainer_13ls6","content":"bank-card__content_13ls6","label":"bank-card__label_13ls6","focused":"bank-card__focused_13ls6","filled":"bank-card__filled_13ls6","input":"bank-card__input_13ls6","bankLogo":"bank-card__bankLogo_13ls6","brandLogo":"bank-card__brandLogo_13ls6","usePhoto":"bank-card__usePhoto_13ls6"};
+var styles = {"component":"bank-card__component_ks0pf","aspectRatioContainer":"bank-card__aspectRatioContainer_ks0pf","content":"bank-card__content_ks0pf","label":"bank-card__label_ks0pf","focused":"bank-card__focused_ks0pf","filled":"bank-card__filled_ks0pf","input":"bank-card__input_ks0pf","bankLogo":"bank-card__bankLogo_ks0pf","brandLogo":"bank-card__brandLogo_ks0pf","usePhoto":"bank-card__usePhoto_ks0pf"};
 require('./index.css');
 
 // prettier-ignore

package/bank-card/modern/index.css

@@ -726,7 +726,7 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.bank-card__component_13ls6 {
+.bank-card__component_ks0pf {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-black-60);
@@ -745,11 +745,11 @@
 
     font-family: var(--font-family-styrene);
 }
-.bank-card__aspectRatioContainer_13ls6 {
+.bank-card__aspectRatioContainer_ks0pf {
     /* Эталонный размер 343x215 */
     padding-bottom: 62.6%;
 }
-.bank-card__content_13ls6 {
+.bank-card__content_ks0pf {
     position: absolute;
     top: 0;
     right: 0;
@@ -762,7 +762,7 @@
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
 }
-.bank-card__label_13ls6 {
+.bank-card__label_ks0pf {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-black-60);
@@ -770,25 +770,25 @@
     line-height: 24px
 }
 @media (max-width: 360px) {
-.bank-card__label_13ls6 {
+.bank-card__label_ks0pf {
         font-size: 16px
 }
     }
-.bank-card__focused_13ls6 .bank-card__label_13ls6,
-.bank-card__filled_13ls6 .bank-card__label_13ls6 {
+.bank-card__focused_ks0pf .bank-card__label_ks0pf,
+.bank-card__filled_ks0pf .bank-card__label_ks0pf {
     color: var(--color-black);
     transform: translateY(-19px) scale(0.6)
 }
 @media (max-width: 360px) {
-.bank-card__focused_13ls6 .bank-card__label_13ls6,
-.bank-card__filled_13ls6 .bank-card__label_13ls6 {
+.bank-card__focused_ks0pf .bank-card__label_ks0pf,
+.bank-card__filled_ks0pf .bank-card__label_ks0pf {
         transform: translateY(-22px) scale(0.75)
 }
     }
-.bank-card__focused_13ls6:before {
+.bank-card__focused_ks0pf:before {
     transform: scale(1) !important;
 }
-.bank-card__input_13ls6 {
+.bank-card__input_ks0pf {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -802,33 +802,33 @@
     padding-left: 0 !important
 }
 @media (max-width: 360px) {
-.bank-card__input_13ls6 {
+.bank-card__input_ks0pf {
         font-size: 16px
 }
     }
-.bank-card__bankLogo_13ls6 {
+.bank-card__bankLogo_ks0pf {
     position: absolute;
     top: 20px;
     left: 20px
 }
-.bank-card__bankLogo_13ls6 svg {
+.bank-card__bankLogo_ks0pf svg {
         max-height: 30px;
         width: auto;
         display: block
     }
-.bank-card__bankLogo_13ls6 svg g {
+.bank-card__bankLogo_ks0pf svg g {
             fill: var(--color-black);
         }
-.bank-card__brandLogo_13ls6 {
+.bank-card__brandLogo_ks0pf {
     position: absolute;
     bottom: 20px;
     right: 20px
 }
-.bank-card__brandLogo_13ls6 svg {
+.bank-card__brandLogo_ks0pf svg {
         display: block;
         fill: var(--color-black);
     }
-.bank-card__usePhoto_13ls6 {
+.bank-card__usePhoto_ks0pf {
     display: block;
     margin: 0;
     padding: 0;
@@ -846,7 +846,7 @@
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
 }
-.bank-card__usePhoto_13ls6 svg {
+.bank-card__usePhoto_ks0pf svg {
         fill: var(--color-black);
         display: block;
     }

package/base-modal/Component.js

@@ -46,7 +46,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_18idq","wrapper":"base-modal__wrapper_18idq","content":"base-modal__content_18idq","hidden":"base-modal__hidden_18idq","backdrop":"base-modal__backdrop_18idq","appear":"base-modal__appear_18idq","enter":"base-modal__enter_18idq","appearActive":"base-modal__appearActive_18idq","enterActive":"base-modal__enterActive_18idq","exit":"base-modal__exit_18idq","exitActive":"base-modal__exitActive_18idq","exitDone":"base-modal__exitDone_18idq"};
+var styles = {"component":"base-modal__component_1gbgb","wrapper":"base-modal__wrapper_1gbgb","content":"base-modal__content_1gbgb","hidden":"base-modal__hidden_1gbgb","backdrop":"base-modal__backdrop_1gbgb","appear":"base-modal__appear_1gbgb","enter":"base-modal__enter_1gbgb","appearActive":"base-modal__appearActive_1gbgb","enterActive":"base-modal__enterActive_1gbgb","exit":"base-modal__exit_1gbgb","exitActive":"base-modal__exitActive_1gbgb","exitDone":"base-modal__exitDone_1gbgb"};
 require('./index.css');
 
 var BaseModalContext = React__default['default'].createContext({
@@ -77,6 +77,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var contentNodeRef = React.useRef(null);
     var restoreContainerStylesRef = React.useRef(null);
     var mouseDownTarget = React.useRef();
+    var resizeObserverRef = React.useRef();
     var checkToHasScrollBar = function () {
         if (scrollableNodeRef.current) {
             var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
@@ -88,26 +89,26 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var getContainer = React.useCallback(function () {
         return (container ? container() : document.body);
     }, [container]);
-    var resizeObserver$1 = React.useMemo(function () {
-        var ResizeObserver = (window === null || window === void 0 ? void 0 : window.ResizeObserver) || resizeObserver.ResizeObserver;
-        return new ResizeObserver(checkToHasScrollBar);
-    }, []);
     var addResizeHandle = React.useCallback(function () {
-        if (scrollableNodeRef.current)
-            resizeObserver$1.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver$1.observe(contentNodeRef.current);
-    }, [resizeObserver$1]);
-    var removeResizeHandle = React.useCallback(function () {
-        resizeObserver$1.disconnect();
-    }, [resizeObserver$1]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    var removeResizeHandle = React.useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     var contentRef = React.useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver$1.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver$1]);
+    }, []);
     var handleScroll = React.useCallback(function () {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
@@ -208,13 +209,16 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             setExited(false);
     }, [open]);
     React.useEffect(function () {
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
         return function () {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
-            resizeObserver$1.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var contextValue = React.useMemo(function () { return ({
         hasHeader: hasHeader,

package/base-modal/cssm/Component.js

@@ -76,6 +76,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var contentNodeRef = React.useRef(null);
     var restoreContainerStylesRef = React.useRef(null);
     var mouseDownTarget = React.useRef();
+    var resizeObserverRef = React.useRef();
     var checkToHasScrollBar = function () {
         if (scrollableNodeRef.current) {
             var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
@@ -87,26 +88,26 @@ var BaseModal = React.forwardRef(function (_a, ref) {
     var getContainer = React.useCallback(function () {
         return (container ? container() : document.body);
     }, [container]);
-    var resizeObserver$1 = React.useMemo(function () {
-        var ResizeObserver = (window === null || window === void 0 ? void 0 : window.ResizeObserver) || resizeObserver.ResizeObserver;
-        return new ResizeObserver(checkToHasScrollBar);
-    }, []);
     var addResizeHandle = React.useCallback(function () {
-        if (scrollableNodeRef.current)
-            resizeObserver$1.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver$1.observe(contentNodeRef.current);
-    }, [resizeObserver$1]);
-    var removeResizeHandle = React.useCallback(function () {
-        resizeObserver$1.disconnect();
-    }, [resizeObserver$1]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    var removeResizeHandle = React.useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     var contentRef = React.useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver$1.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver$1]);
+    }, []);
     var handleScroll = React.useCallback(function () {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
@@ -207,13 +208,16 @@ var BaseModal = React.forwardRef(function (_a, ref) {
             setExited(false);
     }, [open]);
     React.useEffect(function () {
+        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
         return function () {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
-            resizeObserver$1.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var contextValue = React.useMemo(function () { return ({
         hasHeader: hasHeader,

package/base-modal/esm/Component.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
 import { ResizeObserver } from '@juggle/resize-observer';
@@ -37,7 +37,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"base-modal__component_18idq","wrapper":"base-modal__wrapper_18idq","content":"base-modal__content_18idq","hidden":"base-modal__hidden_18idq","backdrop":"base-modal__backdrop_18idq","appear":"base-modal__appear_18idq","enter":"base-modal__enter_18idq","appearActive":"base-modal__appearActive_18idq","enterActive":"base-modal__enterActive_18idq","exit":"base-modal__exit_18idq","exitActive":"base-modal__exitActive_18idq","exitDone":"base-modal__exitDone_18idq"};
+var styles = {"component":"base-modal__component_1gbgb","wrapper":"base-modal__wrapper_1gbgb","content":"base-modal__content_1gbgb","hidden":"base-modal__hidden_1gbgb","backdrop":"base-modal__backdrop_1gbgb","appear":"base-modal__appear_1gbgb","enter":"base-modal__enter_1gbgb","appearActive":"base-modal__appearActive_1gbgb","enterActive":"base-modal__enterActive_1gbgb","exit":"base-modal__exit_1gbgb","exitActive":"base-modal__exitActive_1gbgb","exitDone":"base-modal__exitDone_1gbgb"};
 require('./index.css');
 
 var BaseModalContext = React.createContext({
@@ -68,6 +68,7 @@ var BaseModal = forwardRef(function (_a, ref) {
     var contentNodeRef = useRef(null);
     var restoreContainerStylesRef = useRef(null);
     var mouseDownTarget = useRef();
+    var resizeObserverRef = useRef();
     var checkToHasScrollBar = function () {
         if (scrollableNodeRef.current) {
             var scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -79,26 +80,26 @@ var BaseModal = forwardRef(function (_a, ref) {
     var getContainer = useCallback(function () {
         return (container ? container() : document.body);
     }, [container]);
-    var resizeObserver = useMemo(function () {
-        var ResizeObserver$1 = (window === null || window === void 0 ? void 0 : window.ResizeObserver) || ResizeObserver;
-        return new ResizeObserver$1(checkToHasScrollBar);
-    }, []);
     var addResizeHandle = useCallback(function () {
-        if (scrollableNodeRef.current)
-            resizeObserver.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver.observe(contentNodeRef.current);
-    }, [resizeObserver]);
-    var removeResizeHandle = useCallback(function () {
-        resizeObserver.disconnect();
-    }, [resizeObserver]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    var removeResizeHandle = useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     var contentRef = useCallback(function (node) {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver]);
+    }, []);
     var handleScroll = useCallback(function () {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
@@ -199,13 +200,16 @@ var BaseModal = forwardRef(function (_a, ref) {
             setExited(false);
     }, [open]);
     useEffect(function () {
+        var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
         return function () {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var contextValue = useMemo(function () { return ({
         hasHeader: hasHeader,

package/base-modal/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 12lf3 */
+/* hash: 175qx */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -726,14 +726,14 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.base-modal__component_18idq {
+.base-modal__component_1gbgb {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_18idq {
+.base-modal__wrapper_1gbgb {
     position: fixed;
     top: 0;
     left: 0;
@@ -746,33 +746,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_18idq {
+.base-modal__content_1gbgb {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_18idq {
+.base-modal__hidden_1gbgb {
     display: none;
 }
-.base-modal__backdrop_18idq {
+.base-modal__backdrop_1gbgb {
     z-index: 0;
 }
-.base-modal__appear_18idq,
-.base-modal__enter_18idq {
+.base-modal__appear_1gbgb,
+.base-modal__enter_1gbgb {
     opacity: 0;
 }
-.base-modal__appearActive_18idq,
-.base-modal__enterActive_18idq {
+.base-modal__appearActive_1gbgb,
+.base-modal__enterActive_1gbgb {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_18idq {
+.base-modal__exit_1gbgb {
     opacity: 1;
 }
-.base-modal__exitActive_18idq,
-.base-modal__exitDone_18idq {
+.base-modal__exitActive_1gbgb,
+.base-modal__exitDone_1gbgb {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/index.css

@@ -1,4 +1,4 @@
-/* hash: 12lf3 */
+/* hash: 175qx */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -726,14 +726,14 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.base-modal__component_18idq {
+.base-modal__component_1gbgb {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_18idq {
+.base-modal__wrapper_1gbgb {
     position: fixed;
     top: 0;
     left: 0;
@@ -746,33 +746,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_18idq {
+.base-modal__content_1gbgb {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_18idq {
+.base-modal__hidden_1gbgb {
     display: none;
 }
-.base-modal__backdrop_18idq {
+.base-modal__backdrop_1gbgb {
     z-index: 0;
 }
-.base-modal__appear_18idq,
-.base-modal__enter_18idq {
+.base-modal__appear_1gbgb,
+.base-modal__enter_1gbgb {
     opacity: 0;
 }
-.base-modal__appearActive_18idq,
-.base-modal__enterActive_18idq {
+.base-modal__appearActive_1gbgb,
+.base-modal__enterActive_1gbgb {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_18idq {
+.base-modal__exit_1gbgb {
     opacity: 1;
 }
-.base-modal__exitActive_18idq,
-.base-modal__exitDone_18idq {
+.base-modal__exitActive_1gbgb,
+.base-modal__exitDone_1gbgb {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/modern/Component.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
 import { ResizeObserver } from '@juggle/resize-observer';
@@ -10,7 +10,7 @@ import { stackingOrder, Stack } from '../../stack/modern';
 import '../../global-store/modern';
 import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
 
-var styles = {"component":"base-modal__component_18idq","wrapper":"base-modal__wrapper_18idq","content":"base-modal__content_18idq","hidden":"base-modal__hidden_18idq","backdrop":"base-modal__backdrop_18idq","appear":"base-modal__appear_18idq","enter":"base-modal__enter_18idq","appearActive":"base-modal__appearActive_18idq","enterActive":"base-modal__enterActive_18idq","exit":"base-modal__exit_18idq","exitActive":"base-modal__exitActive_18idq","exitDone":"base-modal__exitDone_18idq"};
+var styles = {"component":"base-modal__component_1gbgb","wrapper":"base-modal__wrapper_1gbgb","content":"base-modal__content_1gbgb","hidden":"base-modal__hidden_1gbgb","backdrop":"base-modal__backdrop_1gbgb","appear":"base-modal__appear_1gbgb","enter":"base-modal__enter_1gbgb","appearActive":"base-modal__appearActive_1gbgb","enterActive":"base-modal__enterActive_1gbgb","exit":"base-modal__exit_1gbgb","exitActive":"base-modal__exitActive_1gbgb","exitDone":"base-modal__exitDone_1gbgb"};
 require('./index.css');
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -41,6 +41,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
     const contentNodeRef = useRef(null);
     const restoreContainerStylesRef = useRef(null);
     const mouseDownTarget = useRef();
+    const resizeObserverRef = useRef();
     const checkToHasScrollBar = () => {
         if (scrollableNodeRef.current) {
             const scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -52,26 +53,26 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
     const getContainer = useCallback(() => {
         return (container ? container() : document.body);
     }, [container]);
-    const resizeObserver = useMemo(() => {
-        const ResizeObserver$1 = window?.ResizeObserver || ResizeObserver;
-        return new ResizeObserver$1(checkToHasScrollBar);
-    }, []);
     const addResizeHandle = useCallback(() => {
-        if (scrollableNodeRef.current)
-            resizeObserver.observe(scrollableNodeRef.current);
-        if (contentNodeRef.current)
-            resizeObserver.observe(contentNodeRef.current);
-    }, [resizeObserver]);
-    const removeResizeHandle = useCallback(() => {
-        resizeObserver.disconnect();
-    }, [resizeObserver]);
+        if (!resizeObserverRef.current)
+            return;
+        if (scrollableNodeRef.current) {
+            resizeObserverRef.current.observe(scrollableNodeRef.current);
+        }
+        if (contentNodeRef.current) {
+            resizeObserverRef.current.observe(contentNodeRef.current);
+        }
+    }, []);
+    const removeResizeHandle = useCallback(() => resizeObserverRef.current?.disconnect(), []);
     const contentRef = useCallback((node) => {
         if (node !== null) {
             contentNodeRef.current = node;
-            resizeObserver.observe(node);
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.observe(node);
+            }
             checkToHasScrollBar();
         }
-    }, [resizeObserver]);
+    }, []);
     const handleScroll = useCallback(() => {
         if (!scrollableNodeRef.current || !componentNodeRef.current)
             return;
@@ -172,13 +173,16 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
             setExited(false);
     }, [open]);
     useEffect(() => {
+        const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+        resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
         return () => {
             if (restoreContainerStylesRef.current) {
                 restoreContainerStylesRef.current();
             }
-            resizeObserver.disconnect();
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const contextValue = useMemo(() => ({
         hasHeader,

package/base-modal/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 12lf3 */
+/* hash: 175qx */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -726,14 +726,14 @@
     --size-l-height: 64px;
     --size-xl-height: 72px;
 }
-.base-modal__component_18idq {
+.base-modal__component_1gbgb {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_18idq {
+.base-modal__wrapper_1gbgb {
     position: fixed;
     top: 0;
     left: 0;
@@ -746,33 +746,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_18idq {
+.base-modal__content_1gbgb {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_18idq {
+.base-modal__hidden_1gbgb {
     display: none;
 }
-.base-modal__backdrop_18idq {
+.base-modal__backdrop_1gbgb {
     z-index: 0;
 }
-.base-modal__appear_18idq,
-.base-modal__enter_18idq {
+.base-modal__appear_1gbgb,
+.base-modal__enter_1gbgb {
     opacity: 0;
 }
-.base-modal__appearActive_18idq,
-.base-modal__enterActive_18idq {
+.base-modal__appearActive_1gbgb,
+.base-modal__enterActive_1gbgb {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_18idq {
+.base-modal__exit_1gbgb {
     opacity: 1;
 }
-.base-modal__exitActive_18idq,
-.base-modal__exitDone_18idq {
+.base-modal__exitActive_1gbgb,
+.base-modal__exitDone_1gbgb {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/bottom-sheet/{component-0e9d9841.d.ts → component-8f1a852a.d.ts}

@@ -117,6 +117,10 @@ type BottomSheetProps = {
      * Дополнительный класс для компонента стрелки назад
      */
     backerClassName?: string;
+    /**
+     * Дополнительный класс для компонента модального окна
+     */
+    modalClassName?: string;
     /**
      * TransitionProps, прокидываются в компонент CSSTransitionProps.
      */