@hh.ru/magritte-ui-modal 11.0.41 → 11.0.43

package/internal/usePageHeaderScrollAnimation.js

@@ -1,48 +1,48 @@
 import './../index.css';
 import { useEffect } from 'react';
 
-/**
- * Анимирует `top` оверлея при скролле страницы (только для `position=left|right` без оверлея): по мере
- * прокрутки на `pageHeaderPadding` оверлей «подъезжает» под page-header от `pageHeaderPadding` к `0`.
- * Использует `ScrollTimeline`, где доступен, иначе — ручную привязку к событию `scroll`.
- */
-const usePageHeaderScrollAnimation = ({ overlayRef, showOverlay, pageHeaderPadding, visible, }) => {
-    useEffect(() => {
-        if (showOverlay || !pageHeaderPadding || !visible) {
-            return void 0;
-        }
-        const hasScrollTimeline = 'ScrollTimeline' in window;
-        const overlay = overlayRef.current;
-        if (!overlay) {
-            return void 0;
-        }
-        let animation;
-        const abortController = new AbortController();
-        const keyframes = { top: [`${pageHeaderPadding}px`, '0px'] };
-        if (hasScrollTimeline) {
-            const timeline = new ScrollTimeline({ source: document.documentElement, axis: 'y' });
-            // TS 7 (type-aware правила oxlint) уже знает rangeStart/rangeEnd, а TS 5 без каста не пропускает
-            // oxlint-disable-next-line typescript/no-unnecessary-type-assertion
-            animation = overlay.animate(keyframes, {
-                timeline,
-                rangeStart: '0px',
-                // calc нужен для устранения бага https://issues.chromium.org/issues/40929569
-                rangeEnd: `calc(0% + ${pageHeaderPadding}px)`,
-            });
-        }
-        else {
-            animation = overlay.animate(keyframes, { duration: 1000, fill: 'forwards' });
-            animation.pause();
-            window.addEventListener('scroll', () => {
-                animation.currentTime =
-                    (Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) * 1000;
-            }, { signal: abortController.signal });
-        }
-        return () => {
-            abortController.abort();
-            animation.cancel();
-        };
-    }, [overlayRef, showOverlay, pageHeaderPadding, visible]);
+const usePageHeaderScrollAnimation = ({
+  overlayRef,
+  showOverlay,
+  pageHeaderPadding,
+  visible
+}) => {
+  useEffect(() => {
+    if (showOverlay || !pageHeaderPadding || !visible) {
+      return void 0;
+    }
+    const hasScrollTimeline = "ScrollTimeline" in window;
+    const overlay = overlayRef.current;
+    if (!overlay) {
+      return void 0;
+    }
+    let animation;
+    const abortController = new AbortController();
+    const keyframes = { top: [`${pageHeaderPadding}px`, "0px"] };
+    if (hasScrollTimeline) {
+      const timeline = new ScrollTimeline({ source: document.documentElement, axis: "y" });
+      animation = overlay.animate(keyframes, {
+        timeline,
+        rangeStart: "0px",
+        // calc нужен для устранения бага https://issues.chromium.org/issues/40929569
+        rangeEnd: `calc(0% + ${pageHeaderPadding}px)`
+      });
+    } else {
+      animation = overlay.animate(keyframes, { duration: 1e3, fill: "forwards" });
+      animation.pause();
+      window.addEventListener(
+        "scroll",
+        () => {
+          animation.currentTime = Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding * 1e3;
+        },
+        { signal: abortController.signal }
+      );
+    }
+    return () => {
+      abortController.abort();
+      animation.cancel();
+    };
+  }, [overlayRef, showOverlay, pageHeaderPadding, visible]);
 };
 
 export { usePageHeaderScrollAnimation };

package/internal/usePageHeaderScrollAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePageHeaderScrollAnimation.js","sources":["src/internal/usePageHeaderScrollAnimation.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ninterface UsePageHeaderScrollAnimationParams {\n    overlayRef: RefObject<HTMLDivElement>;\n    showOverlay: boolean;\n    pageHeaderPadding: number;\n    visible: boolean | undefined;\n}\n\n/**\n * Анимирует `top` оверлея при скролле страницы (только для `position=left|right` без оверлея): по мере\n * прокрутки на `pageHeaderPadding` оверлей «подъезжает» под page-header от `pageHeaderPadding` к `0`.\n * Использует `ScrollTimeline`, где доступен, иначе — ручную привязку к событию `scroll`.\n */\nexport const usePageHeaderScrollAnimation = ({\n    overlayRef,\n    showOverlay,\n    pageHeaderPadding,\n    visible,\n}: UsePageHeaderScrollAnimationParams): void => {\n    useEffect(() => {\n        if (showOverlay || !pageHeaderPadding || !visible) {\n            return void 0;\n        }\n\n        const hasScrollTimeline = 'ScrollTimeline' in window;\n        const overlay = overlayRef.current;\n\n        if (!overlay) {\n            return void 0;\n        }\n\n        let animation: Animation;\n        const abortController = new AbortController();\n        const keyframes = { top: [`${pageHeaderPadding}px`, '0px'] };\n        if (hasScrollTimeline) {\n            const timeline = new ScrollTimeline({ source: document.documentElement, axis: 'y' });\n            // TS 7 (type-aware правила oxlint) уже знает rangeStart/rangeEnd, а TS 5 без каста не пропускает\n            // oxlint-disable-next-line typescript/no-unnecessary-type-assertion\n            animation = overlay.animate(keyframes, {\n                timeline,\n                rangeStart: '0px',\n                // calc нужен для устранения бага https://issues.chromium.org/issues/40929569\n                rangeEnd: `calc(0% + ${pageHeaderPadding}px)`,\n            } as KeyframeAnimationOptions);\n        } else {\n            animation = overlay.animate(keyframes, { duration: 1000, fill: 'forwards' });\n            animation.pause();\n\n            window.addEventListener(\n                'scroll',\n                () => {\n                    animation.currentTime =\n                        (Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) * 1000;\n                },\n                { signal: abortController.signal }\n            );\n        }\n\n        return () => {\n            abortController.abort();\n            animation.cancel();\n        };\n    }, [overlayRef, showOverlay, pageHeaderPadding, visible]);\n};\n"],"names":[],"mappings":";;AASA;;;;AAIG;AACI,MAAM,4BAA4B,GAAG,CAAC,EACzC,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,OAAO,GAC0B,KAAU;IAC3C,SAAS,CAAC,MAAK;QACX,IAAI,WAAW,IAAI,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE;YAC/C,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,MAAM,iBAAiB,GAAG,gBAAgB,IAAI,MAAM,CAAC;AACrD,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QAEnC,IAAI,CAAC,OAAO,EAAE;YACV,OAAO,KAAK,CAAC,CAAC;SACjB;AAED,QAAA,IAAI,SAAoB,CAAC;AACzB,QAAA,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAC;AAC9C,QAAA,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,CAAC,CAAG,EAAA,iBAAiB,CAAI,EAAA,CAAA,EAAE,KAAK,CAAC,EAAE,CAAC;QAC7D,IAAI,iBAAiB,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,eAAe,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;;;AAGrF,YAAA,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE;gBACnC,QAAQ;AACR,gBAAA,UAAU,EAAE,KAAK;;gBAEjB,QAAQ,EAAE,CAAa,UAAA,EAAA,iBAAiB,CAAK,GAAA,CAAA;AACpB,aAAA,CAAC,CAAC;SAClC;aAAM;AACH,YAAA,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;YAC7E,SAAS,CAAC,KAAK,EAAE,CAAC;AAElB,YAAA,MAAM,CAAC,gBAAgB,CACnB,QAAQ,EACR,MAAK;AACD,gBAAA,SAAS,CAAC,WAAW;AACjB,oBAAA,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,EAAE,iBAAiB,CAAC,GAAG,iBAAiB,IAAI,IAAI,CAAC;aACpG,EACD,EAAE,MAAM,EAAE,eAAe,CAAC,MAAM,EAAE,CACrC,CAAC;SACL;AAED,QAAA,OAAO,MAAK;YACR,eAAe,CAAC,KAAK,EAAE,CAAC;YACxB,SAAS,CAAC,MAAM,EAAE,CAAC;AACvB,SAAC,CAAC;KACL,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC;AAC9D;;;;"}
+{"version":3,"file":"usePageHeaderScrollAnimation.js","sources":["src/internal/usePageHeaderScrollAnimation.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ninterface UsePageHeaderScrollAnimationParams {\n    overlayRef: RefObject<HTMLDivElement>;\n    showOverlay: boolean;\n    pageHeaderPadding: number;\n    visible: boolean | undefined;\n}\n\n/**\n * Анимирует `top` оверлея при скролле страницы (только для `position=left|right` без оверлея): по мере\n * прокрутки на `pageHeaderPadding` оверлей «подъезжает» под page-header от `pageHeaderPadding` к `0`.\n * Использует `ScrollTimeline`, где доступен, иначе — ручную привязку к событию `scroll`.\n */\nexport const usePageHeaderScrollAnimation = ({\n    overlayRef,\n    showOverlay,\n    pageHeaderPadding,\n    visible,\n}: UsePageHeaderScrollAnimationParams): void => {\n    useEffect(() => {\n        if (showOverlay || !pageHeaderPadding || !visible) {\n            return void 0;\n        }\n\n        const hasScrollTimeline = 'ScrollTimeline' in window;\n        const overlay = overlayRef.current;\n\n        if (!overlay) {\n            return void 0;\n        }\n\n        let animation: Animation;\n        const abortController = new AbortController();\n        const keyframes = { top: [`${pageHeaderPadding}px`, '0px'] };\n        if (hasScrollTimeline) {\n            const timeline = new ScrollTimeline({ source: document.documentElement, axis: 'y' });\n            // TS 7 (type-aware правила oxlint) уже знает rangeStart/rangeEnd, а TS 5 без каста не пропускает\n            // oxlint-disable-next-line typescript/no-unnecessary-type-assertion\n            animation = overlay.animate(keyframes, {\n                timeline,\n                rangeStart: '0px',\n                // calc нужен для устранения бага https://issues.chromium.org/issues/40929569\n                rangeEnd: `calc(0% + ${pageHeaderPadding}px)`,\n            } as KeyframeAnimationOptions);\n        } else {\n            animation = overlay.animate(keyframes, { duration: 1000, fill: 'forwards' });\n            animation.pause();\n\n            window.addEventListener(\n                'scroll',\n                () => {\n                    animation.currentTime =\n                        (Math.min(document.documentElement.scrollTop, pageHeaderPadding) / pageHeaderPadding) * 1000;\n                },\n                { signal: abortController.signal }\n            );\n        }\n\n        return () => {\n            abortController.abort();\n            animation.cancel();\n        };\n    }, [overlayRef, showOverlay, pageHeaderPadding, visible]);\n};\n"],"names":[],"mappings":";;AAcO,MAAM,+BAA+B,CAAC;AAAA,EACzC,UAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,OAAA;AACJ,CAAgD,KAAA;AAC5C,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,IAAI,WAAe,IAAA,CAAC,iBAAqB,IAAA,CAAC,OAAS,EAAA;AAC/C,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACX;AAEA,IAAA,MAAM,oBAAoB,gBAAoB,IAAA,MAAA,CAAA;AAC9C,IAAA,MAAM,UAAU,UAAW,CAAA,OAAA,CAAA;AAE3B,IAAA,IAAI,CAAC,OAAS,EAAA;AACV,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACX;AAEA,IAAI,IAAA,SAAA,CAAA;AACJ,IAAM,MAAA,eAAA,GAAkB,IAAI,eAAgB,EAAA,CAAA;AAC5C,IAAM,MAAA,SAAA,GAAY,EAAE,GAAK,EAAA,CAAC,GAAG,iBAAiB,CAAA,EAAA,CAAA,EAAM,KAAK,CAAE,EAAA,CAAA;AAC3D,IAAA,IAAI,iBAAmB,EAAA;AACnB,MAAM,MAAA,QAAA,GAAW,IAAI,cAAe,CAAA,EAAE,QAAQ,QAAS,CAAA,eAAA,EAAiB,IAAM,EAAA,GAAA,EAAK,CAAA,CAAA;AAGnF,MAAY,SAAA,GAAA,OAAA,CAAQ,QAAQ,SAAW,EAAA;AAAA,QACnC,QAAA;AAAA,QACA,UAAY,EAAA,KAAA;AAAA;AAAA,QAEZ,QAAA,EAAU,aAAa,iBAAiB,CAAA,GAAA,CAAA;AAAA,OACf,CAAA,CAAA;AAAA,KAC1B,MAAA;AACH,MAAY,SAAA,GAAA,OAAA,CAAQ,QAAQ,SAAW,EAAA,EAAE,UAAU,GAAM,EAAA,IAAA,EAAM,YAAY,CAAA,CAAA;AAC3E,MAAA,SAAA,CAAU,KAAM,EAAA,CAAA;AAEhB,MAAO,MAAA,CAAA,gBAAA;AAAA,QACH,QAAA;AAAA,QACA,MAAM;AACF,UAAU,SAAA,CAAA,WAAA,GACL,KAAK,GAAI,CAAA,QAAA,CAAS,gBAAgB,SAAW,EAAA,iBAAiB,IAAI,iBAAqB,GAAA,GAAA,CAAA;AAAA,SAChG;AAAA,QACA,EAAE,MAAQ,EAAA,eAAA,CAAgB,MAAO,EAAA;AAAA,OACrC,CAAA;AAAA,KACJ;AAEA,IAAA,OAAO,MAAM;AACT,MAAA,eAAA,CAAgB,KAAM,EAAA,CAAA;AACtB,MAAA,SAAA,CAAU,MAAO,EAAA,CAAA;AAAA,KACrB,CAAA;AAAA,KACD,CAAC,UAAA,EAAY,WAAa,EAAA,iBAAA,EAAmB,OAAO,CAAC,CAAA,CAAA;AAC5D;;;;"}

package/modal-DKfr_WcM.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"sticky-header":"magritte-sticky-header___TPafy_11-0-43","stickyHeader":"magritte-sticky-header___TPafy_11-0-43","sticky-header-inner":"magritte-sticky-header-inner___u5p8h_11-0-43","stickyHeaderInner":"magritte-sticky-header-inner___u5p8h_11-0-43","modal-media":"magritte-modal-media___UqHGM_11-0-43","modalMedia":"magritte-modal-media___UqHGM_11-0-43","fixed-height":"magritte-fixed-height___wyJ7-_11-0-43","fixedHeight":"magritte-fixed-height___wyJ7-_11-0-43","contain":"magritte-contain___3QD0Z_11-0-43","cover":"magritte-cover___nry9O_11-0-43","content-overlay-top":"magritte-content-overlay-top___6snWk_11-0-43","contentOverlayTop":"magritte-content-overlay-top___6snWk_11-0-43","grow-limiter":"magritte-grow-limiter___GmpBj_11-0-43","growLimiter":"magritte-grow-limiter___GmpBj_11-0-43","modal-overlay":"magritte-modal-overlay___WwfCg_11-0-43","modalOverlay":"magritte-modal-overlay___WwfCg_11-0-43","modal-overlay-with-background":"magritte-modal-overlay-with-background___DDxJn_11-0-43","modalOverlayWithBackground":"magritte-modal-overlay-with-background___DDxJn_11-0-43","modal":"magritte-modal___C4o5U_11-0-43","modal-overlay-left":"magritte-modal-overlay-left___agPyC_11-0-43","modalOverlayLeft":"magritte-modal-overlay-left___agPyC_11-0-43","modal-overlay-right":"magritte-modal-overlay-right___-XDAx_11-0-43","modalOverlayRight":"magritte-modal-overlay-right___-XDAx_11-0-43","size-small":"magritte-size-small___cI-Ql_11-0-43","sizeSmall":"magritte-size-small___cI-Ql_11-0-43","size-medium":"magritte-size-medium___jnqfu_11-0-43","sizeMedium":"magritte-size-medium___jnqfu_11-0-43","no-vertical-paddings":"magritte-no-vertical-paddings___dxyot_11-0-43","noVerticalPaddings":"magritte-no-vertical-paddings___dxyot_11-0-43","no-horizontal-paddings":"magritte-no-horizontal-paddings___Q-i-5_11-0-43","noHorizontalPaddings":"magritte-no-horizontal-paddings___Q-i-5_11-0-43","modal-full-height":"magritte-modal-full-height___Aew5F_11-0-43","modalFullHeight":"magritte-modal-full-height___Aew5F_11-0-43","modal-with-border":"magritte-modal-with-border___KSnhf_11-0-43","modalWithBorder":"magritte-modal-with-border___KSnhf_11-0-43","modal-content-wrapper":"magritte-modal-content-wrapper___VzoTN_11-0-43","modalContentWrapper":"magritte-modal-content-wrapper___VzoTN_11-0-43","modal-footer":"magritte-modal-footer___Ha-sZ_11-0-43","modalFooter":"magritte-modal-footer___Ha-sZ_11-0-43","modal-footer-empty":"magritte-modal-footer-empty___tmH-x_11-0-43","modalFooterEmpty":"magritte-modal-footer-empty___tmH-x_11-0-43","animation-timeout":"magritte-animation-timeout___G4Hl1_11-0-43","animationTimeout":"magritte-animation-timeout___G4Hl1_11-0-43","animation-enter-center":"magritte-animation-enter-center___sq8j7_11-0-43","animationEnterCenter":"magritte-animation-enter-center___sq8j7_11-0-43","animation-enter-center-active":"magritte-animation-enter-center-active___ORYEh_11-0-43","animationEnterCenterActive":"magritte-animation-enter-center-active___ORYEh_11-0-43","animation-exit-center":"magritte-animation-exit-center___lLCX1_11-0-43","animationExitCenter":"magritte-animation-exit-center___lLCX1_11-0-43","animation-exit-center-active":"magritte-animation-exit-center-active___Ik2Yl_11-0-43","animationExitCenterActive":"magritte-animation-exit-center-active___Ik2Yl_11-0-43","animation-enter-left":"magritte-animation-enter-left___jJDlv_11-0-43","animationEnterLeft":"magritte-animation-enter-left___jJDlv_11-0-43","animation-enter-left-active":"magritte-animation-enter-left-active___-kFij_11-0-43","animationEnterLeftActive":"magritte-animation-enter-left-active___-kFij_11-0-43","animation-exit-left":"magritte-animation-exit-left___G2Plq_11-0-43","animationExitLeft":"magritte-animation-exit-left___G2Plq_11-0-43","animation-exit-left-active":"magritte-animation-exit-left-active___XW2K4_11-0-43","animationExitLeftActive":"magritte-animation-exit-left-active___XW2K4_11-0-43","animation-enter-right":"magritte-animation-enter-right___rrMS0_11-0-43","animationEnterRight":"magritte-animation-enter-right___rrMS0_11-0-43","animation-enter-right-active":"magritte-animation-enter-right-active___p7rg-_11-0-43","animationEnterRightActive":"magritte-animation-enter-right-active___p7rg-_11-0-43","animation-exit-right":"magritte-animation-exit-right___f3qIC_11-0-43","animationExitRight":"magritte-animation-exit-right___f3qIC_11-0-43","animation-exit-right-active":"magritte-animation-exit-right-active___-sG1k_11-0-43","animationExitRightActive":"magritte-animation-exit-right-active___-sG1k_11-0-43","tree-selector-container":"magritte-tree-selector-container___4cdf5_11-0-43","treeSelectorContainer":"magritte-tree-selector-container___4cdf5_11-0-43","modal-scroll-container":"magritte-modal-scroll-container___hOCdh_11-0-43","modalScrollContainer":"magritte-modal-scroll-container___hOCdh_11-0-43","nav-bar":"magritte-nav-bar___CL7d-_11-0-43","navBar":"magritte-nav-bar___CL7d-_11-0-43","header":"magritte-header___pufwA_11-0-43","static":"magritte-static___3B6cn_11-0-43","content-overlay-bottom":"magritte-content-overlay-bottom___bDuPC_11-0-43","contentOverlayBottom":"magritte-content-overlay-bottom___bDuPC_11-0-43"};
+
+export { styles as s };
+//# sourceMappingURL=modal-DKfr_WcM.js.map

package/modal-DKfr_WcM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-DKfr_WcM.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-modal",
-  "version": "11.0.41",
+  "version": "11.0.43",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -16,6 +16,7 @@
     "ts-config": "yarn root:ts-config $(pwd)",
     "ts-check": "yarn root:ts-check $(pwd)",
     "test": "yarn root:test $(pwd)",
+    "test:types": "yarn root:test:types $(pwd)",
     "watch": "yarn root:watch $(pwd)",
     "figma-publish": "yarn root:figma-publish $(pwd)",
     "figma-unpublish": "yarn root:figma-unpublish $(pwd)",
@@ -23,33 +24,33 @@
     "figma-snapshot-update": "yarn root:figma-snapshot $(pwd) --update"
   },
   "dependencies": {
-    "@hh.ru/magritte-common-dom-storage": "1.0.10",
-    "@hh.ru/magritte-common-func-utils": "1.3.16",
-    "@hh.ru/magritte-common-is-server-env": "1.0.9",
-    "@hh.ru/magritte-common-keyboard": "4.3.6",
-    "@hh.ru/magritte-common-modal-helper": "1.3.5",
-    "@hh.ru/magritte-common-mouse": "1.2.1",
-    "@hh.ru/magritte-common-use-multiple-refs": "1.1.12",
-    "@hh.ru/magritte-common-use-no-bubbling": "1.0.9",
-    "@hh.ru/magritte-design-tokens": "26.0.0",
-    "@hh.ru/magritte-internal-accessible-region": "1.0.4",
-    "@hh.ru/magritte-internal-layer-name": "3.4.2",
-    "@hh.ru/magritte-internal-slot-registry": "1.1.1",
-    "@hh.ru/magritte-ui-action-bar": "5.4.24",
-    "@hh.ru/magritte-ui-breakpoint": "6.1.2",
-    "@hh.ru/magritte-ui-content-overlay": "1.2.2",
-    "@hh.ru/magritte-ui-divider": "3.2.11",
-    "@hh.ru/magritte-ui-icon": "15.1.4",
-    "@hh.ru/magritte-ui-layer": "3.2.8",
-    "@hh.ru/magritte-ui-layout": "2.1.1",
-    "@hh.ru/magritte-ui-mock-component": "1.1.8",
-    "@hh.ru/magritte-ui-nav-bar": "2.0.20",
-    "@hh.ru/magritte-ui-progress-bar": "5.0.36",
-    "@hh.ru/magritte-ui-scrollbar": "1.0.38",
-    "@hh.ru/magritte-ui-textarea": "3.3.54",
-    "@hh.ru/magritte-ui-theme-wrapper": "1.1.28",
-    "@hh.ru/magritte-ui-title": "8.3.13",
-    "@hh.ru/magritte-ui-tree-selector": "5.5.80"
+    "@hh.ru/magritte-common-dom-storage": "1.0.11",
+    "@hh.ru/magritte-common-func-utils": "1.3.17",
+    "@hh.ru/magritte-common-is-server-env": "1.0.10",
+    "@hh.ru/magritte-common-keyboard": "4.3.7",
+    "@hh.ru/magritte-common-modal-helper": "1.3.6",
+    "@hh.ru/magritte-common-mouse": "1.2.2",
+    "@hh.ru/magritte-common-use-multiple-refs": "1.1.13",
+    "@hh.ru/magritte-common-use-no-bubbling": "1.0.10",
+    "@hh.ru/magritte-design-tokens": "26.0.2",
+    "@hh.ru/magritte-internal-accessible-region": "1.0.5",
+    "@hh.ru/magritte-internal-layer-name": "3.4.3",
+    "@hh.ru/magritte-internal-slot-registry": "1.1.2",
+    "@hh.ru/magritte-ui-action-bar": "5.4.26",
+    "@hh.ru/magritte-ui-breakpoint": "6.1.3",
+    "@hh.ru/magritte-ui-content-overlay": "1.2.3",
+    "@hh.ru/magritte-ui-divider": "3.2.13",
+    "@hh.ru/magritte-ui-icon": "15.1.6",
+    "@hh.ru/magritte-ui-layer": "3.2.9",
+    "@hh.ru/magritte-ui-layout": "2.1.2",
+    "@hh.ru/magritte-ui-mock-component": "1.1.9",
+    "@hh.ru/magritte-ui-nav-bar": "2.0.22",
+    "@hh.ru/magritte-ui-progress-bar": "5.0.38",
+    "@hh.ru/magritte-ui-scrollbar": "1.0.40",
+    "@hh.ru/magritte-ui-textarea": "3.3.56",
+    "@hh.ru/magritte-ui-theme-wrapper": "1.1.30",
+    "@hh.ru/magritte-ui-title": "8.3.15",
+    "@hh.ru/magritte-ui-tree-selector": "5.5.82"
   },
   "peerDependencies": {
     "classnames": ">=2.3.2",
@@ -60,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b0ff5da48fb29d516c8289082560ee1882d16986"
+  "gitHead": "33dbaa1dc9b9705e925ffc9f6fcc7a0dc153bd36"
 }

package/public/Modal.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type ForwardRefExoticComponent, type PropsWithoutRef, type RefAttributes } from 'react';
 import { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';
-import { type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';
-import { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';
+import { type ModalMediaProps } from '../public/ModalMedia';
+import { type ModalProps } from '../public/types';
 type ModalRootProps = ModalProps & ExplicitRegionProps & Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabIndex' | 'className'>;
 interface ModalCompound {
     Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;

package/public/Modal.js

@@ -20,7 +20,7 @@ import { useModalTransition } from '../internal/useModalTransition.js';
 import { usePageHeaderScrollAnimation } from '../internal/usePageHeaderScrollAnimation.js';
 import { ModalMedia } from './ModalMedia.js';
 import { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';
-import { s as styles } from '../modal-Df_WVial.js';
+import { s as styles } from '../modal-DKfr_WcM.js';
 import '@hh.ru/magritte-ui-textarea';
 import '@hh.ru/magritte-ui-action-bar';
 import '../actionBarDefaults.js';
@@ -37,69 +37,137 @@ import '@hh.ru/magritte-ui-breakpoint';
 import '../internal/useModalOrder.js';
 import '@hh.ru/magritte-common-dom-storage';
 
-const Modal = forwardRef(({ visible, size = 'medium', header, footer, children, onClose = noop, host, disableVerticalPaddings = false, disableHorizontalPaddings = false, closeByClickOutside = true, onAppear, onBeforeExit, onAfterExit, position = 'center', height = position === 'center' ? 'content' : 'full-screen', minHeight, showOverlay: _showOverlay = true, pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING, returnFocusOnClose, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-description': ariaDescription, ...rest }, ref) => {
+const Modal = forwardRef(
+  ({
+    visible,
+    size = "medium",
+    header,
+    footer,
+    children,
+    onClose = noop,
+    host,
+    disableVerticalPaddings = false,
+    disableHorizontalPaddings = false,
+    closeByClickOutside = true,
+    onAppear,
+    onBeforeExit,
+    onAfterExit,
+    position = "center",
+    height = position === "center" ? "content" : "full-screen",
+    minHeight,
+    showOverlay: _showOverlay = true,
+    pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING,
+    returnFocusOnClose,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-description": ariaDescription,
+    ...rest
+  }, ref) => {
     const isServerEnv = useServerEnv();
     const [animationTimeout] = useState(getAnimationTimeout);
     const modalRef = useRef(null);
     const overlayRef = useRef(null);
-    const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });
+    const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: "loop" });
     const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);
-    const showOverlay = position === 'center' || _showOverlay;
-    // TreeSelector сам управляет своим скроллом и должен занимать всю высоту модала.
-    const resolvedHeight = isTreeSelectorChild(children) ? 'full-screen' : height;
+    const showOverlay = position === "center" || _showOverlay;
+    const resolvedHeight = isTreeSelectorChild(children) ? "full-screen" : height;
     const { onEntering, onEntered, onExit, onExited, isHiddenForBreakpoint } = useModalTransition({
-        visible,
-        isServerEnv,
-        showOverlay,
-        returnFocusOnClose,
-        onAppear,
-        onBeforeExit,
-        onAfterExit,
-        modalRef,
-        animationTimeoutExit: animationTimeout.exit,
+      visible,
+      isServerEnv,
+      showOverlay,
+      returnFocusOnClose,
+      onAppear,
+      onBeforeExit,
+      onAfterExit,
+      modalRef,
+      animationTimeoutExit: animationTimeout.exit
     });
     usePageHeaderScrollAnimation({
-        overlayRef,
-        showOverlay,
-        pageHeaderPadding,
-        visible: visible && !isHiddenForBreakpoint,
+      overlayRef,
+      showOverlay,
+      pageHeaderPadding,
+      visible: visible && !isHiddenForBreakpoint
     });
     const overlayEventHandlers = useNoBubbling({
-        onKeyDown: (event) => {
-            if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
-                onClose(event);
-            }
-        },
-        onMouseDown: (event) => {
-            if (closeByClickOutside && !modalRef.current?.contains(event.target)) {
-                onClose(event);
-            }
-        },
+      onKeyDown: (event) => {
+        if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
+          onClose(event);
+        }
+      },
+      onMouseDown: (event) => {
+        if (closeByClickOutside && !modalRef.current?.contains(event.target)) {
+          onClose(event);
+        }
+      }
     });
-    const overlayProps = showOverlay
-        ? overlayEventHandlers
-        : {
-            onKeyDown: (event) => {
-                if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
-                    onClose(event);
-                }
-            },
-        };
+    const overlayProps = showOverlay ? overlayEventHandlers : {
+      onKeyDown: (event) => {
+        if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {
+          onClose(event);
+        }
+      }
+    };
     if (isHiddenForBreakpoint || isServerEnv) {
-        return null;
+      return null;
     }
-    return createPortal(jsx(CSSTransition, { appear: true, in: visible && !isServerEnv, nodeRef: overlayRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExited: onExited, classNames: CSS_CLASSES[position], timeout: animationTimeout, unmountOnExit: true, children: jsx(ThemeWrapper, { children: (themeClass) => (jsx(Layer, { layer: "modal", children: jsx("div", { ...overlayProps, ref: overlayRef, className: classnames(styles.modalOverlay, themeClass, {
-                        [styles.modalOverlayWithBackground]: showOverlay,
-                        [styles.modalOverlayLeft]: position === 'left',
-                        [styles.modalOverlayRight]: position === 'right',
-                    }), "data-qa": "modal-overlay", children: jsx(CloseByClickOutsideContext.Provider, { value: overlayRef, children: jsx(AccessibleRegionProvider, { children: jsx(ModalSlotsProvider, { children: jsx(ModalInner, { ...rest, explicitAria: {
-                                        'aria-label': ariaLabel,
-                                        'aria-labelledby': ariaLabelledby,
-                                        'aria-describedby': ariaDescribedby,
-                                        'aria-description': ariaDescription,
-                                    }, ariaModal: visible && showOverlay && !isServerEnv, refCallback: modalRefCallback, size: size, height: resolvedHeight, minHeight: minHeight, disableVerticalPaddings: disableVerticalPaddings, disableHorizontalPaddings: disableHorizontalPaddings, showOverlay: showOverlay, header: header, footer: footer, children: jsx(ModalContent, { children: children }) }) }) }) }) }) })) }) }), host || document.body);
-});
-Modal.displayName = 'Modal';
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        CSSTransition,
+        {
+          appear: true,
+          in: visible && !isServerEnv,
+          nodeRef: overlayRef,
+          onEntering,
+          onEntered,
+          onExit,
+          onExited,
+          classNames: CSS_CLASSES[position],
+          timeout: animationTimeout,
+          unmountOnExit: true,
+          children: /* @__PURE__ */ jsx(ThemeWrapper, { children: (themeClass) => /* @__PURE__ */ jsx(Layer, { layer: "modal", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...overlayProps,
+              ref: overlayRef,
+              className: classnames(styles.modalOverlay, themeClass, {
+                [styles.modalOverlayWithBackground]: showOverlay,
+                [styles.modalOverlayLeft]: position === "left",
+                [styles.modalOverlayRight]: position === "right"
+              }),
+              "data-qa": "modal-overlay",
+              children: /* @__PURE__ */ jsx(CloseByClickOutsideContext.Provider, { value: overlayRef, children: /* @__PURE__ */ jsx(AccessibleRegionProvider, { children: /* @__PURE__ */ jsx(ModalSlotsProvider, { children: /* @__PURE__ */ jsx(
+                ModalInner,
+                {
+                  ...rest,
+                  explicitAria: {
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledby,
+                    "aria-describedby": ariaDescribedby,
+                    "aria-description": ariaDescription
+                  },
+                  ariaModal: visible && showOverlay && !isServerEnv,
+                  refCallback: modalRefCallback,
+                  size,
+                  height: resolvedHeight,
+                  minHeight,
+                  disableVerticalPaddings,
+                  disableHorizontalPaddings,
+                  showOverlay,
+                  header,
+                  footer,
+                  children: /* @__PURE__ */ jsx(ModalContent, { children })
+                }
+              ) }) }) })
+            }
+          ) }) })
+        }
+      ),
+      host || document.body
+    );
+  }
+);
+Modal.displayName = "Modal";
 Modal.Media = ModalMedia;
 
 export { Modal };

package/public/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["src/public/Modal.tsx"],"sourcesContent":["import {\n    forwardRef,\n    type HTMLAttributes,\n    useRef,\n    useState,\n    type ForwardRefExoticComponent,\n    type PropsWithoutRef,\n    type RefAttributes,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { keyboardMatch, keyboardKeys, useKeyboardNavigation } from '@hh.ru/magritte-common-keyboard';\nimport { CloseByClickOutsideContext } from '@hh.ru/magritte-common-mouse/useCloseByClickOutside';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { AccessibleRegionProvider, type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ModalContent } from '@hh.ru/magritte-ui-modal/internal/ModalContent';\nimport { ModalInner } from '@hh.ru/magritte-ui-modal/internal/ModalInner';\nimport { ModalSlotsProvider } from '@hh.ru/magritte-ui-modal/internal/ModalSlotsContext';\nimport {\n    CSS_CLASSES,\n    DEFAULT_PAGE_HEADER_PADDING,\n    getAnimationTimeout,\n    noop,\n} from '@hh.ru/magritte-ui-modal/internal/constants';\nimport { isTreeSelectorChild } from '@hh.ru/magritte-ui-modal/internal/isTreeSelectorChild';\nimport { useModalTransition } from '@hh.ru/magritte-ui-modal/internal/useModalTransition';\nimport { usePageHeaderScrollAnimation } from '@hh.ru/magritte-ui-modal/internal/usePageHeaderScrollAnimation';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\n\nimport styles from '../internal/modal.less';\n\ntype ModalRootProps = ModalProps &\n    ExplicitRegionProps &\n    Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalCompound {\n    Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalRootProps>(\n    (\n        {\n            visible,\n            size = 'medium',\n            header,\n            footer,\n            children,\n            onClose = noop,\n            host,\n            disableVerticalPaddings = false,\n            disableHorizontalPaddings = false,\n            closeByClickOutside = true,\n            onAppear,\n            onBeforeExit,\n            onAfterExit,\n            position = 'center',\n            height = position === 'center' ? 'content' : 'full-screen',\n            minHeight,\n            showOverlay: _showOverlay = true,\n            pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING,\n            returnFocusOnClose,\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledby,\n            'aria-describedby': ariaDescribedby,\n            'aria-description': ariaDescription,\n            ...rest\n        },\n        ref\n    ) => {\n        const isServerEnv = useServerEnv();\n        const [animationTimeout] = useState(getAnimationTimeout);\n\n        const modalRef = useRef<HTMLDivElement>(null);\n        const overlayRef = useRef<HTMLDivElement>(null);\n        const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });\n        const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);\n\n        const showOverlay = position === 'center' || _showOverlay;\n\n        // TreeSelector сам управляет своим скроллом и должен занимать всю высоту модала.\n        const resolvedHeight = isTreeSelectorChild(children) ? 'full-screen' : height;\n\n        const { onEntering, onEntered, onExit, onExited, isHiddenForBreakpoint } = useModalTransition({\n            visible,\n            isServerEnv,\n            showOverlay,\n            returnFocusOnClose,\n            onAppear,\n            onBeforeExit,\n            onAfterExit,\n            modalRef,\n            animationTimeoutExit: animationTimeout.exit,\n        });\n\n        usePageHeaderScrollAnimation({\n            overlayRef,\n            showOverlay,\n            pageHeaderPadding,\n            visible: visible && !isHiddenForBreakpoint,\n        });\n\n        const overlayEventHandlers = useNoBubbling({\n            onKeyDown: (event) => {\n                if (keyboardMatch(event.nativeEvent as KeyboardEvent, keyboardKeys.Escape)) {\n                    onClose(event);\n                }\n            },\n            onMouseDown: (event) => {\n                if (closeByClickOutside && !modalRef.current?.contains(event.target as HTMLElement)) {\n                    onClose(event);\n                }\n            },\n        });\n        const overlayProps = showOverlay\n            ? overlayEventHandlers\n            : {\n                  onKeyDown: (event: React.KeyboardEvent) => {\n                      if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n                          onClose(event);\n                      }\n                  },\n              };\n\n        if (isHiddenForBreakpoint || isServerEnv) {\n            return null;\n        }\n\n        return createPortal(\n            <CSSTransition\n                appear\n                in={visible && !isServerEnv}\n                nodeRef={overlayRef}\n                onEntering={onEntering}\n                onEntered={onEntered}\n                onExit={onExit}\n                onExited={onExited}\n                classNames={CSS_CLASSES[position]}\n                timeout={animationTimeout}\n                unmountOnExit\n            >\n                <ThemeWrapper>\n                    {(themeClass) => (\n                        <Layer layer=\"modal\">\n                            <div\n                                {...overlayProps}\n                                ref={overlayRef}\n                                className={classnames(styles.modalOverlay, themeClass, {\n                                    [styles.modalOverlayWithBackground]: showOverlay,\n                                    [styles.modalOverlayLeft]: position === 'left',\n                                    [styles.modalOverlayRight]: position === 'right',\n                                })}\n                                data-qa=\"modal-overlay\"\n                            >\n                                <CloseByClickOutsideContext.Provider value={overlayRef}>\n                                    <AccessibleRegionProvider>\n                                        <ModalSlotsProvider>\n                                            <ModalInner\n                                                {...rest}\n                                                explicitAria={{\n                                                    'aria-label': ariaLabel,\n                                                    'aria-labelledby': ariaLabelledby,\n                                                    'aria-describedby': ariaDescribedby,\n                                                    'aria-description': ariaDescription,\n                                                }}\n                                                ariaModal={visible && showOverlay && !isServerEnv}\n                                                refCallback={modalRefCallback}\n                                                size={size}\n                                                height={resolvedHeight}\n                                                minHeight={minHeight}\n                                                disableVerticalPaddings={disableVerticalPaddings}\n                                                disableHorizontalPaddings={disableHorizontalPaddings}\n                                                showOverlay={showOverlay}\n                                                header={header}\n                                                footer={footer}\n                                            >\n                                                <ModalContent>{children}</ModalContent>\n                                            </ModalInner>\n                                        </ModalSlotsProvider>\n                                    </AccessibleRegionProvider>\n                                </CloseByClickOutsideContext.Provider>\n                            </div>\n                        </Layer>\n                    )}\n                </ThemeWrapper>\n            </CSSTransition>,\n            host || document.body\n        );\n    }\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalRootProps> & RefAttributes<HTMLDivElement>> & ModalCompound;\n\nModal.displayName = 'Modal';\nModal.Media = ModalMedia;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["src/public/Modal.tsx"],"sourcesContent":["import {\n    forwardRef,\n    type HTMLAttributes,\n    useRef,\n    useState,\n    type ForwardRefExoticComponent,\n    type PropsWithoutRef,\n    type RefAttributes,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport { keyboardMatch, keyboardKeys, useKeyboardNavigation } from '@hh.ru/magritte-common-keyboard';\nimport { CloseByClickOutsideContext } from '@hh.ru/magritte-common-mouse/useCloseByClickOutside';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { AccessibleRegionProvider, type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { ModalContent } from '@hh.ru/magritte-ui-modal/internal/ModalContent';\nimport { ModalInner } from '@hh.ru/magritte-ui-modal/internal/ModalInner';\nimport { ModalSlotsProvider } from '@hh.ru/magritte-ui-modal/internal/ModalSlotsContext';\nimport {\n    CSS_CLASSES,\n    DEFAULT_PAGE_HEADER_PADDING,\n    getAnimationTimeout,\n    noop,\n} from '@hh.ru/magritte-ui-modal/internal/constants';\nimport { isTreeSelectorChild } from '@hh.ru/magritte-ui-modal/internal/isTreeSelectorChild';\nimport { useModalTransition } from '@hh.ru/magritte-ui-modal/internal/useModalTransition';\nimport { usePageHeaderScrollAnimation } from '@hh.ru/magritte-ui-modal/internal/usePageHeaderScrollAnimation';\nimport { ModalMedia, type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';\nimport { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';\nimport { ThemeWrapper } from '@hh.ru/magritte-ui-theme-wrapper';\n\nimport styles from '../internal/modal.less';\n\ntype ModalRootProps = ModalProps &\n    ExplicitRegionProps &\n    Omit<HTMLAttributes<HTMLDivElement>, keyof ModalProps | 'role' | 'tabIndex' | 'className'>;\n\ninterface ModalCompound {\n    Media: ForwardRefExoticComponent<ModalMediaProps & RefAttributes<HTMLDivElement>>;\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalRootProps>(\n    (\n        {\n            visible,\n            size = 'medium',\n            header,\n            footer,\n            children,\n            onClose = noop,\n            host,\n            disableVerticalPaddings = false,\n            disableHorizontalPaddings = false,\n            closeByClickOutside = true,\n            onAppear,\n            onBeforeExit,\n            onAfterExit,\n            position = 'center',\n            height = position === 'center' ? 'content' : 'full-screen',\n            minHeight,\n            showOverlay: _showOverlay = true,\n            pageHeaderPadding = DEFAULT_PAGE_HEADER_PADDING,\n            returnFocusOnClose,\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledby,\n            'aria-describedby': ariaDescribedby,\n            'aria-description': ariaDescription,\n            ...rest\n        },\n        ref\n    ) => {\n        const isServerEnv = useServerEnv();\n        const [animationTimeout] = useState(getAnimationTimeout);\n\n        const modalRef = useRef<HTMLDivElement>(null);\n        const overlayRef = useRef<HTMLDivElement>(null);\n        const keyboardNavigationRef = useKeyboardNavigation({ enabled: visible && !isServerEnv, mode: 'loop' });\n        const modalRefCallback = useMultipleRefs(ref, modalRef, keyboardNavigationRef);\n\n        const showOverlay = position === 'center' || _showOverlay;\n\n        // TreeSelector сам управляет своим скроллом и должен занимать всю высоту модала.\n        const resolvedHeight = isTreeSelectorChild(children) ? 'full-screen' : height;\n\n        const { onEntering, onEntered, onExit, onExited, isHiddenForBreakpoint } = useModalTransition({\n            visible,\n            isServerEnv,\n            showOverlay,\n            returnFocusOnClose,\n            onAppear,\n            onBeforeExit,\n            onAfterExit,\n            modalRef,\n            animationTimeoutExit: animationTimeout.exit,\n        });\n\n        usePageHeaderScrollAnimation({\n            overlayRef,\n            showOverlay,\n            pageHeaderPadding,\n            visible: visible && !isHiddenForBreakpoint,\n        });\n\n        const overlayEventHandlers = useNoBubbling({\n            onKeyDown: (event) => {\n                if (keyboardMatch(event.nativeEvent as KeyboardEvent, keyboardKeys.Escape)) {\n                    onClose(event);\n                }\n            },\n            onMouseDown: (event) => {\n                if (closeByClickOutside && !modalRef.current?.contains(event.target as HTMLElement)) {\n                    onClose(event);\n                }\n            },\n        });\n        const overlayProps = showOverlay\n            ? overlayEventHandlers\n            : {\n                  onKeyDown: (event: React.KeyboardEvent) => {\n                      if (keyboardMatch(event.nativeEvent, keyboardKeys.Escape)) {\n                          onClose(event);\n                      }\n                  },\n              };\n\n        if (isHiddenForBreakpoint || isServerEnv) {\n            return null;\n        }\n\n        return createPortal(\n            <CSSTransition\n                appear\n                in={visible && !isServerEnv}\n                nodeRef={overlayRef}\n                onEntering={onEntering}\n                onEntered={onEntered}\n                onExit={onExit}\n                onExited={onExited}\n                classNames={CSS_CLASSES[position]}\n                timeout={animationTimeout}\n                unmountOnExit\n            >\n                <ThemeWrapper>\n                    {(themeClass) => (\n                        <Layer layer=\"modal\">\n                            <div\n                                {...overlayProps}\n                                ref={overlayRef}\n                                className={classnames(styles.modalOverlay, themeClass, {\n                                    [styles.modalOverlayWithBackground]: showOverlay,\n                                    [styles.modalOverlayLeft]: position === 'left',\n                                    [styles.modalOverlayRight]: position === 'right',\n                                })}\n                                data-qa=\"modal-overlay\"\n                            >\n                                <CloseByClickOutsideContext.Provider value={overlayRef}>\n                                    <AccessibleRegionProvider>\n                                        <ModalSlotsProvider>\n                                            <ModalInner\n                                                {...rest}\n                                                explicitAria={{\n                                                    'aria-label': ariaLabel,\n                                                    'aria-labelledby': ariaLabelledby,\n                                                    'aria-describedby': ariaDescribedby,\n                                                    'aria-description': ariaDescription,\n                                                }}\n                                                ariaModal={visible && showOverlay && !isServerEnv}\n                                                refCallback={modalRefCallback}\n                                                size={size}\n                                                height={resolvedHeight}\n                                                minHeight={minHeight}\n                                                disableVerticalPaddings={disableVerticalPaddings}\n                                                disableHorizontalPaddings={disableHorizontalPaddings}\n                                                showOverlay={showOverlay}\n                                                header={header}\n                                                footer={footer}\n                                            >\n                                                <ModalContent>{children}</ModalContent>\n                                            </ModalInner>\n                                        </ModalSlotsProvider>\n                                    </AccessibleRegionProvider>\n                                </CloseByClickOutsideContext.Provider>\n                            </div>\n                        </Layer>\n                    )}\n                </ThemeWrapper>\n            </CSSTransition>,\n            host || document.body\n        );\n    }\n) as ForwardRefExoticComponent<PropsWithoutRef<ModalRootProps> & RefAttributes<HTMLDivElement>> & ModalCompound;\n\nModal.displayName = 'Modal';\nModal.Media = ModalMedia;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACjB,CACI;AAAA,IACI,OAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,MAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAU,GAAA,IAAA;AAAA,IACV,IAAA;AAAA,IACA,uBAA0B,GAAA,KAAA;AAAA,IAC1B,yBAA4B,GAAA,KAAA;AAAA,IAC5B,mBAAsB,GAAA,IAAA;AAAA,IACtB,QAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAW,GAAA,QAAA;AAAA,IACX,MAAA,GAAS,QAAa,KAAA,QAAA,GAAW,SAAY,GAAA,aAAA;AAAA,IAC7C,SAAA;AAAA,IACA,aAAa,YAAe,GAAA,IAAA;AAAA,IAC5B,iBAAoB,GAAA,2BAAA;AAAA,IACpB,kBAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,iBAAmB,EAAA,cAAA;AAAA,IACnB,kBAAoB,EAAA,eAAA;AAAA,IACpB,kBAAoB,EAAA,eAAA;AAAA,IACpB,GAAG,IAAA;AAAA,KAEP,GACC,KAAA;AACD,IAAA,MAAM,cAAc,YAAa,EAAA,CAAA;AACjC,IAAA,MAAM,CAAC,gBAAgB,CAAI,GAAA,QAAA,CAAS,mBAAmB,CAAA,CAAA;AAEvD,IAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA,CAAA;AAC5C,IAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA,CAAA;AAC9C,IAAM,MAAA,qBAAA,GAAwB,sBAAsB,EAAE,OAAA,EAAS,WAAW,CAAC,WAAA,EAAa,IAAM,EAAA,MAAA,EAAQ,CAAA,CAAA;AACtG,IAAA,MAAM,gBAAmB,GAAA,eAAA,CAAgB,GAAK,EAAA,QAAA,EAAU,qBAAqB,CAAA,CAAA;AAE7E,IAAM,MAAA,WAAA,GAAc,aAAa,QAAY,IAAA,YAAA,CAAA;AAG7C,IAAA,MAAM,cAAiB,GAAA,mBAAA,CAAoB,QAAQ,CAAA,GAAI,aAAgB,GAAA,MAAA,CAAA;AAEvE,IAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAW,QAAQ,QAAU,EAAA,qBAAA,KAA0B,kBAAmB,CAAA;AAAA,MAC1F,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,sBAAsB,gBAAiB,CAAA,IAAA;AAAA,KAC1C,CAAA,CAAA;AAED,IAA6B,4BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA,EAAS,WAAW,CAAC,qBAAA;AAAA,KACxB,CAAA,CAAA;AAED,IAAA,MAAM,uBAAuB,aAAc,CAAA;AAAA,MACvC,SAAA,EAAW,CAAC,KAAU,KAAA;AAClB,QAAA,IAAI,aAAc,CAAA,KAAA,CAAM,WAA8B,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA;AACxE,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,SACjB;AAAA,OACJ;AAAA,MACA,WAAA,EAAa,CAAC,KAAU,KAAA;AACpB,QAAA,IAAI,uBAAuB,CAAC,QAAA,CAAS,SAAS,QAAS,CAAA,KAAA,CAAM,MAAqB,CAAG,EAAA;AACjF,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,SACjB;AAAA,OACJ;AAAA,KACH,CAAA,CAAA;AACD,IAAM,MAAA,YAAA,GAAe,cACf,oBACA,GAAA;AAAA,MACI,SAAA,EAAW,CAAC,KAA+B,KAAA;AACvC,QAAA,IAAI,aAAc,CAAA,KAAA,CAAM,WAAa,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA;AACvD,UAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,SACjB;AAAA,OACJ;AAAA,KACJ,CAAA;AAEN,IAAA,IAAI,yBAAyB,WAAa,EAAA;AACtC,MAAO,OAAA,IAAA,CAAA;AAAA,KACX;AAEA,IAAO,OAAA,YAAA;AAAA,sBACH,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACG,MAAM,EAAA,IAAA;AAAA,UACN,EAAA,EAAI,WAAW,CAAC,WAAA;AAAA,UAChB,OAAS,EAAA,UAAA;AAAA,UACT,UAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,UAAA,EAAY,YAAY,QAAQ,CAAA;AAAA,UAChC,OAAS,EAAA,gBAAA;AAAA,UACT,aAAa,EAAA,IAAA;AAAA,UAEb,8BAAC,YACI,EAAA,EAAA,QAAA,EAAA,CAAC,+BACG,GAAA,CAAA,KAAA,EAAA,EAAM,OAAM,OACT,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACI,GAAG,YAAA;AAAA,cACJ,GAAK,EAAA,UAAA;AAAA,cACL,SAAW,EAAA,UAAA,CAAW,MAAO,CAAA,YAAA,EAAc,UAAY,EAAA;AAAA,gBACnD,CAAC,MAAO,CAAA,0BAA0B,GAAG,WAAA;AAAA,gBACrC,CAAC,MAAA,CAAO,gBAAgB,GAAG,QAAa,KAAA,MAAA;AAAA,gBACxC,CAAC,MAAA,CAAO,iBAAiB,GAAG,QAAa,KAAA,OAAA;AAAA,eAC5C,CAAA;AAAA,cACD,SAAQ,EAAA,eAAA;AAAA,cAER,QAAA,kBAAA,GAAA,CAAC,2BAA2B,QAA3B,EAAA,EAAoC,OAAO,UACxC,EAAA,QAAA,kBAAA,GAAA,CAAC,wBACG,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,kBACG,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACI,GAAG,IAAA;AAAA,kBACJ,YAAc,EAAA;AAAA,oBACV,YAAc,EAAA,SAAA;AAAA,oBACd,iBAAmB,EAAA,cAAA;AAAA,oBACnB,kBAAoB,EAAA,eAAA;AAAA,oBACpB,kBAAoB,EAAA,eAAA;AAAA,mBACxB;AAAA,kBACA,SAAA,EAAW,OAAW,IAAA,WAAA,IAAe,CAAC,WAAA;AAAA,kBACtC,WAAa,EAAA,gBAAA;AAAA,kBACb,IAAA;AAAA,kBACA,MAAQ,EAAA,cAAA;AAAA,kBACR,SAAA;AAAA,kBACA,uBAAA;AAAA,kBACA,yBAAA;AAAA,kBACA,WAAA;AAAA,kBACA,MAAA;AAAA,kBACA,MAAA;AAAA,kBAEA,QAAA,kBAAA,GAAA,CAAC,gBAAc,QAAS,EAAA,CAAA;AAAA,iBAAA;AAAA,eAC5B,EACJ,GACJ,CACJ,EAAA,CAAA;AAAA,aAAA;AAAA,aAER,CAER,EAAA,CAAA;AAAA,SAAA;AAAA,OACJ;AAAA,MACA,QAAQ,QAAS,CAAA,IAAA;AAAA,KACrB,CAAA;AAAA,GACJ;AACJ,EAAA;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA,CAAA;AACpB,KAAA,CAAM,KAAQ,GAAA,UAAA;;;;"}

package/public/ModalMedia.js

@@ -2,22 +2,33 @@ import './../index.css';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import classnames from 'classnames';
-import { s as styles } from '../modal-Df_WVial.js';
+import { s as styles } from '../modal-DKfr_WcM.js';
 
-const ModalMedia = forwardRef(({ ratio, height, backgroundUrl, className, style, children, imageSize = 'cover', ...rest }, ref) => {
-    const defaultRatio = children ? 'auto' : 1.9;
-    return (jsx("div", { ...rest, ref: ref, className: classnames(className, styles.modalMedia, {
-            [styles.fixedHeight]: !!height,
-            [styles.cover]: imageSize === 'cover',
-            [styles.contain]: imageSize === 'contain',
-        }), style: {
-            ...style,
-            '--ratio': ratio ?? defaultRatio,
-            '--img-url': backgroundUrl ? `url(${backgroundUrl})` : 'none',
-            '--height': height ? `${height}px` : 'auto',
-        }, children: children }));
-});
-ModalMedia.displayName = 'ModalMedia';
+const ModalMedia = forwardRef(
+  ({ ratio, height, backgroundUrl, className, style, children, imageSize = "cover", ...rest }, ref) => {
+    const defaultRatio = children ? "auto" : 1.9;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classnames(className, styles.modalMedia, {
+          [styles.fixedHeight]: !!height,
+          [styles.cover]: imageSize === "cover",
+          [styles.contain]: imageSize === "contain"
+        }),
+        style: {
+          ...style,
+          "--ratio": ratio ?? defaultRatio,
+          "--img-url": backgroundUrl ? `url(${backgroundUrl})` : "none",
+          "--height": height ? `${height}px` : "auto"
+        },
+        children
+      }
+    );
+  }
+);
+ModalMedia.displayName = "ModalMedia";
 
 export { ModalMedia };
 //# sourceMappingURL=ModalMedia.js.map

package/public/ModalMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalMedia.js","sources":["src/public/ModalMedia.tsx"],"sourcesContent":["import { type CSSProperties, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport styles from '../internal/modal.less';\n\nexport interface ModalMediaProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {\n    /** Соотношение сторон блока (ширина / высота). Игнорируется, если задан `height`. По умолчанию `1.9`, либо `auto` при наличии `children` */\n    ratio?: number;\n    /** Фиксированная высота в пикселях. Имеет приоритет перед `ratio` */\n    height?: number;\n    /** URL фонового изображения */\n    backgroundUrl?: string;\n    /**\n     * Способ вписывания фонового изображения в блок\n     * @default cover\n     */\n    imageSize?: 'cover' | 'contain';\n}\n\nexport const ModalMedia = forwardRef<HTMLDivElement, ModalMediaProps>(\n    ({ ratio, height, backgroundUrl, className, style, children, imageSize = 'cover', ...rest }, ref) => {\n        const defaultRatio = children ? 'auto' : 1.9;\n\n        return (\n            <div\n                {...rest}\n                ref={ref}\n                className={classNames(className, styles.modalMedia, {\n                    [styles.fixedHeight]: !!height,\n                    [styles.cover]: imageSize === 'cover',\n                    [styles.contain]: imageSize === 'contain',\n                })}\n                style={\n                    {\n                        ...style,\n                        '--ratio': ratio ?? defaultRatio,\n                        '--img-url': backgroundUrl ? `url(${backgroundUrl})` : 'none',\n                        '--height': height ? `${height}px` : 'auto',\n                    } as CSSProperties\n                }\n            >\n                {children}\n            </div>\n        );\n    }\n);\n\nModalMedia.displayName = 'ModalMedia';\n"],"names":["_jsx","classNames"],"mappings":";;;;;AAmBO,MAAM,UAAU,GAAG,UAAU,CAChC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,GAAG,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;IAChG,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,GAAG,CAAC;AAE7C,IAAA,QACIA,GACQ,CAAA,KAAA,EAAA,EAAA,GAAA,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE;AAChD,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM;AAC9B,YAAA,CAAC,MAAM,CAAC,KAAK,GAAG,SAAS,KAAK,OAAO;AACrC,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS,KAAK,SAAS;SAC5C,CAAC,EACF,KAAK,EACD;AACI,YAAA,GAAG,KAAK;YACR,SAAS,EAAE,KAAK,IAAI,YAAY;YAChC,WAAW,EAAE,aAAa,GAAG,CAAO,IAAA,EAAA,aAAa,CAAG,CAAA,CAAA,GAAG,MAAM;YAC7D,UAAU,EAAE,MAAM,GAAG,CAAG,EAAA,MAAM,CAAI,EAAA,CAAA,GAAG,MAAM;SAC7B,EAGrB,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC,EACH;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"ModalMedia.js","sources":["src/public/ModalMedia.tsx"],"sourcesContent":["import { type CSSProperties, forwardRef, HTMLAttributes, PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport styles from '../internal/modal.less';\n\nexport interface ModalMediaProps extends HTMLAttributes<HTMLDivElement>, PropsWithChildren {\n    /** Соотношение сторон блока (ширина / высота). Игнорируется, если задан `height`. По умолчанию `1.9`, либо `auto` при наличии `children` */\n    ratio?: number;\n    /** Фиксированная высота в пикселях. Имеет приоритет перед `ratio` */\n    height?: number;\n    /** URL фонового изображения */\n    backgroundUrl?: string;\n    /**\n     * Способ вписывания фонового изображения в блок\n     * @default cover\n     */\n    imageSize?: 'cover' | 'contain';\n}\n\nexport const ModalMedia = forwardRef<HTMLDivElement, ModalMediaProps>(\n    ({ ratio, height, backgroundUrl, className, style, children, imageSize = 'cover', ...rest }, ref) => {\n        const defaultRatio = children ? 'auto' : 1.9;\n\n        return (\n            <div\n                {...rest}\n                ref={ref}\n                className={classNames(className, styles.modalMedia, {\n                    [styles.fixedHeight]: !!height,\n                    [styles.cover]: imageSize === 'cover',\n                    [styles.contain]: imageSize === 'contain',\n                })}\n                style={\n                    {\n                        ...style,\n                        '--ratio': ratio ?? defaultRatio,\n                        '--img-url': backgroundUrl ? `url(${backgroundUrl})` : 'none',\n                        '--height': height ? `${height}px` : 'auto',\n                    } as CSSProperties\n                }\n            >\n                {children}\n            </div>\n        );\n    }\n);\n\nModalMedia.displayName = 'ModalMedia';\n"],"names":["classNames"],"mappings":";;;;;AAmBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACtB,CAAC,EAAE,KAAO,EAAA,MAAA,EAAQ,aAAe,EAAA,SAAA,EAAW,KAAO,EAAA,QAAA,EAAU,SAAY,GAAA,OAAA,EAAS,GAAG,IAAA,IAAQ,GAAQ,KAAA;AACjG,IAAM,MAAA,YAAA,GAAe,WAAW,MAAS,GAAA,GAAA,CAAA;AAEzC,IACI,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACI,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,SAAW,EAAAA,UAAA,CAAW,SAAW,EAAA,MAAA,CAAO,UAAY,EAAA;AAAA,UAChD,CAAC,MAAA,CAAO,WAAW,GAAG,CAAC,CAAC,MAAA;AAAA,UACxB,CAAC,MAAA,CAAO,KAAK,GAAG,SAAc,KAAA,OAAA;AAAA,UAC9B,CAAC,MAAA,CAAO,OAAO,GAAG,SAAc,KAAA,SAAA;AAAA,SACnC,CAAA;AAAA,QACD,KACI,EAAA;AAAA,UACI,GAAG,KAAA;AAAA,UACH,WAAW,KAAS,IAAA,YAAA;AAAA,UACpB,WAAa,EAAA,aAAA,GAAgB,CAAO,IAAA,EAAA,aAAa,CAAM,CAAA,CAAA,GAAA,MAAA;AAAA,UACvD,UAAY,EAAA,MAAA,GAAS,CAAG,EAAA,MAAM,CAAO,EAAA,CAAA,GAAA,MAAA;AAAA,SACzC;AAAA,QAGH,QAAA;AAAA,OAAA;AAAA,KACL,CAAA;AAAA,GAER;AACJ,EAAA;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/public/ModalWithImage.d.ts

@@ -1,7 +1,7 @@
 import { type ForwardRefExoticComponent, type HTMLAttributes, type PropsWithoutRef, type ReactNode, type RefAttributes } from 'react';
 import { type ExplicitRegionProps } from '@hh.ru/magritte-internal-accessible-region';
-import { type ModalMediaProps } from '@hh.ru/magritte-ui-modal/public/ModalMedia';
-import { type ModalProps } from '@hh.ru/magritte-ui-modal/public/types';
+import { type ModalMediaProps } from '../public/ModalMedia';
+import { type ModalProps } from '../public/types';
 export interface ModalWithImageProps extends ModalProps {
     /** Изображение (медиа), располагается над контентом */
     image?: ReactNode;

package/public/ModalWithImage.js

@@ -21,7 +21,7 @@ import '../internal/ModalContent.js';
 import '../internal/isTreeSelectorChild.js';
 import '@hh.ru/magritte-ui-tree-selector';
 import '@hh.ru/magritte-ui-textarea';
-import '../modal-Df_WVial.js';
+import '../modal-DKfr_WcM.js';
 import '../internal/ModalInner.js';
 import '@hh.ru/magritte-ui-action-bar';
 import '../actionBarDefaults.js';
@@ -43,8 +43,16 @@ import '@hh.ru/magritte-ui-theme-wrapper';
 
 const NAV_BAR_DEFAULT_PROPS = MODAL_WITH_IMAGE_NAV_BAR_DEFAULTS;
 const TITLE_DEFAULT_PROPS = MODAL_WITH_IMAGE_TITLE_DEFAULTS;
-const ModalWithImage = forwardRef(({ image, title, children, ...rest }, ref) => (jsx(NavBarDefaultPropsContext, { rootProps: NAV_BAR_DEFAULT_PROPS, children: jsxs(Modal, { ...rest, ref: ref, children: [image, (!!title || !!children) && (jsxs(Flex, { gap: 24, direction: "column", my: 24, children: [!!title && (jsx("div", { children: jsx(TitleDefaultPropsContext, { props: TITLE_DEFAULT_PROPS, children: title }) })), !!children && jsx("div", { children: children })] }))] }) })));
-ModalWithImage.displayName = 'ModalWithImage';
+const ModalWithImage = forwardRef(
+  ({ image, title, children, ...rest }, ref) => /* @__PURE__ */ jsx(NavBarDefaultPropsContext, { rootProps: NAV_BAR_DEFAULT_PROPS, children: /* @__PURE__ */ jsxs(Modal, { ...rest, ref, children: [
+    image,
+    (!!title || !!children) && /* @__PURE__ */ jsxs(Flex, { gap: 24, direction: "column", my: 24, children: [
+      !!title && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(TitleDefaultPropsContext, { props: TITLE_DEFAULT_PROPS, children: title }) }),
+      !!children && /* @__PURE__ */ jsx("div", { children })
+    ] })
+  ] }) })
+);
+ModalWithImage.displayName = "ModalWithImage";
 ModalWithImage.Media = ModalMedia;
 
 export { ModalWithImage };