urfu-ui-kit-react 2.1.7-next.3 → 2.1.7-next.5

package/dist/components/Menu/Menu.js

@@ -1,101 +1,102 @@
-import { jsx as i, Fragment as B, jsxs as f } from "react/jsx-runtime";
-import { useRef as D, useEffect as h, useState as F } from "react";
+import { jsx as r, Fragment as B, jsxs as h } from "react/jsx-runtime";
+import { useRef as C, useEffect as b, useState as D } from "react";
 /* empty css                 */
-import { useAutoId$u as O } from "../../hooks/useAutoId.js";
+import { useAutoId$u as F } from "../../hooks/useAutoId.js";
 /* empty css                                  */
-import { isPlainLeftClick$u as R } from "../../vanilla/core/linkClick.js";
-const H = ({
-  onClickSection: a,
-  onClickSwitchMenu: l,
-  showMenu: s,
-  menuData: b,
-  activeSection: o,
-  type: x = "collapsible",
-  paddingUl: g = "32px 16px 32px 14px",
-  className: w = "",
-  foldedWidth: y = "1px",
-  statisticsCard: $,
-  maxWidth: v,
-  minWidth: N,
-  overlayMaxWidth: r = 1100,
-  LinkComponent: u,
+import { kitCls$u as i, kitClasses$u as O, getUiKitPrefix$u as R } from "../../shared/uiKitDefaults.js";
+import { isPlainLeftClick$u as q } from "../../vanilla/core/linkClick.js";
+const S = ({
+  onClickSection: o,
+  onClickSwitchMenu: s,
+  showMenu: a,
+  menuData: x,
+  activeSection: m,
+  type: g = "collapsible",
+  paddingUl: w = "32px 16px 32px 14px",
+  className: y = "",
+  foldedWidth: $ = "1px",
+  statisticsCard: v,
+  maxWidth: N,
+  minWidth: k,
+  overlayMaxWidth: l = 1100,
+  LinkComponent: d,
   id: E
 }) => {
-  const m = D(null), d = O(E, "u-collapsible-menu"), L = u, k = (e) => typeof e == "number" ? `${e}px` : String(e), p = (e) => {
+  const u = C(null), p = F(E, i("collapsible-menu")), L = d, P = (e) => typeof e == "number" ? `${e}px` : String(e), f = (e) => {
     if (e == null) return;
     if (typeof e == "number")
       return `calc(${e} * var(--u-unit, 1px))`;
     const t = String(e).trim(), n = t.match(/^(-?\d+(?:\.\d+)?)px$/i);
     return n ? `calc(${n[1]} * var(--u-unit, 1px))` : t;
   }, I = (e) => e && e.replaceAll(/(-?\d+(?:\.\d+)?)px\b/gi, (t, n) => `calc(${n} * var(--u-unit, 1px))`);
-  h(() => {
-    if (s || typeof l != "function") return;
+  b(() => {
+    if (a || typeof s != "function") return;
     const e = (t) => {
       var c;
-      if (!window.matchMedia(`(max-width: ${r}px)`).matches) return;
+      if (!window.matchMedia(`(max-width: ${l}px)`).matches) return;
       const n = t.target;
-      n && ((c = m.current) != null && c.contains(n) || l(!0));
+      n && ((c = u.current) != null && c.contains(n) || s(!0));
     };
     return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
-  }, [l, s, r]);
-  const [P, j] = F(
-    () => typeof window < "u" && typeof window.matchMedia == "function" ? window.matchMedia(`(max-width: ${r}px)`).matches : !1
+  }, [s, a, l]);
+  const [U, j] = D(
+    () => typeof window < "u" && typeof window.matchMedia == "function" ? window.matchMedia(`(max-width: ${l}px)`).matches : !1
   );
-  h(() => {
+  b(() => {
     if (typeof window > "u" || typeof window.matchMedia != "function") return;
-    const e = window.matchMedia(`(max-width: ${r}px)`), t = () => j(e.matches);
+    const e = window.matchMedia(`(max-width: ${l}px)`), t = () => j(e.matches);
     return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
-  }, [r]);
-  const A = P ? "u-collapsible-menu--overlay" : "";
-  return /* @__PURE__ */ i(B, { children: x === "collapsible" && /* @__PURE__ */ f(
+  }, [l]);
+  const A = U ? i("collapsible-menu--overlay") : "";
+  return /* @__PURE__ */ r(B, { children: g === "collapsible" && /* @__PURE__ */ h(
     "div",
     {
-      ref: m,
+      ref: u,
       style: {
         height: "100%",
-        "--max-width": k(y),
+        "--max-width": P($),
         width: "100%"
       },
-      className: `u-collapsible-menu ${A} ${w}`.trim(),
+      className: `${R()}-collapsible-menu ${A} ${y}`.trim(),
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ r(
           "input",
           {
-            className: "u-collapsible-menu-input",
+            className: i("collapsible-menu-input"),
             type: "checkbox",
-            name: "u-collapsible-menu",
-            id: d,
-            checked: s,
-            onChange: (e) => l(e.target.checked)
+            name: i("collapsible-menu"),
+            id: p,
+            checked: a,
+            onChange: (e) => s(e.target.checked)
           }
         ),
-        /* @__PURE__ */ i("label", { className: "u-collapsible-menu-toggle", htmlFor: d }),
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ r("label", { className: i("collapsible-menu-toggle"), htmlFor: p }),
+        /* @__PURE__ */ h(
           "div",
           {
-            className: "u-collapsible-menu-body",
+            className: i("collapsible-menu-body"),
             style: {
               height: "100%",
-              "--max-width-body": p(v)
+              "--max-width-body": f(N)
             },
             children: [
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ r(
                 "ul",
                 {
-                  className: "u-collapsible-menu-list",
-                  style: { padding: I(g), minWidth: p(N) },
-                  children: b.map((e, t) => {
-                    const n = o == e.id ? "page" : void 0;
-                    return /* @__PURE__ */ i(
+                  className: i("collapsible-menu-list"),
+                  style: { padding: I(w), minWidth: f(k) },
+                  children: x.map((e, t) => {
+                    const n = m == e.id ? "page" : void 0;
+                    return /* @__PURE__ */ r(
                       "li",
                       {
-                        className: o == e.id ? "u-collapsible-menu-list-item u-menu-active" : "u-collapsible-menu-list-item",
+                        className: m == e.id ? O("collapsible-menu-list-item", "menu-active") : i("collapsible-menu-list-item"),
                         id: String(e.id),
-                        onClick: (c) => a && R(c) && a(e),
-                        children: u ? /* @__PURE__ */ i(L, { to: e.url, className: "u-collapsible-menu-list-item-link", "aria-current": n, children: e.title }) : /* @__PURE__ */ i(
+                        onClick: (c) => o && q(c) && o(e),
+                        children: d ? /* @__PURE__ */ r(L, { to: e.url, className: i("collapsible-menu-list-item-link"), "aria-current": n, children: e.title }) : /* @__PURE__ */ r(
                           "a",
                           {
-                            className: "u-collapsible-menu-list-item-link",
+                            className: i("collapsible-menu-list-item-link"),
                             href: e.url,
                             "aria-current": n,
                             children: e.title
@@ -107,7 +108,7 @@ const H = ({
                   })
                 }
               ),
-              $
+              v
             ]
           }
         )
@@ -115,4 +116,4 @@ const H = ({
     }
   ) });
 };
-export { H as Menu$u };
+export { S as Menu$u };

package/dist/components/Message/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD,eAAO,MAAM,OAAO,GAAI,wCAKrB,iBAAiB,4CA2BnB,CAAA"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../src/components/Message/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGnD,eAAO,MAAM,OAAO,GAAI,wCAKrB,iBAAiB,4CA2BnB,CAAA"}

package/dist/components/Message/Message.js

@@ -1,29 +1,30 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 /* empty css                 */
 /* empty css         */
-const g = ({
-  size: e = "medium",
-  variant: s = "info",
-  children: a,
-  className: m = ""
-}) => /* @__PURE__ */ i("div", { className: `${((r, u) => {
-  switch (`${r}-${u}`) {
+import { kitCls$u as s } from "../../shared/uiKitDefaults.js";
+const f = ({
+  size: a = "medium",
+  variant: e = "info",
+  children: m,
+  className: r = ""
+}) => /* @__PURE__ */ c("div", { className: `${((i, l) => {
+  switch (`${i}-${l}`) {
     case "medium-info":
-      return "u-message";
+      return s("message");
     case "medium-fail":
-      return "u-message-fail";
+      return s("message-fail");
     case "medium-success":
-      return "u-message-success";
+      return s("message-success");
     case "medium-warning":
-      return "u-message-warning";
+      return s("message-warning");
     case "small-info":
-      return "u-message-small";
+      return s("message-small");
     case "small-fail":
-      return "u-message-small-fail";
+      return s("message-small-fail");
     case "small-success":
-      return "u-message-small-success";
+      return s("message-small-success");
     case "small-warning":
-      return "u-message-small-warning";
+      return s("message-small-warning");
   }
-})(e, s)} ${m}`, role: s === "fail" || s === "warning" ? "alert" : void 0, children: a });
-export { g as Message$u };
+})(a, e)} ${r}`, role: e === "fail" || e === "warning" ? "alert" : void 0, children: m });
+export { f as Message$u };

package/dist/components/Modal/Modal.js

@@ -1,105 +1,105 @@
-import { jsx as a, jsxs as I } from "react/jsx-runtime";
-import { useRef as F, useState as H, useInsertionEffect as L, useLayoutEffect as R, useEffect as l } from "react";
-import { createPortal as z } from "react-dom";
-import { useMountTransition$u as O } from "../../hooks/useMountTransition.js";
+import { jsx as a, jsxs as H } from "react/jsx-runtime";
+import { useRef as L, useState as R, useInsertionEffect as U, useLayoutEffect as z, useEffect as c } from "react";
+import { createPortal as O } from "react-dom";
+import { useMountTransition$u as q } from "../../hooks/useMountTransition.js";
 /* empty css                 */
-import { useModalFocus$u as U, ModalFocusContext$u as q, isTopModal$u as B } from "./useModalFocus.js";
-import { isEditorPopupTarget$u as G } from "./editorFocus.js";
-import { useModalTitleClearance$u as J } from "./useModalTitleClearance.js";
+import { useModalFocus$u as B, ModalFocusContext$u as G, isTopModal$u as J } from "./useModalFocus.js";
+import { isEditorPopupTarget$u as Q } from "./editorFocus.js";
+import { useModalTitleClearance$u as V } from "./useModalTitleClearance.js";
 /* empty css                  */
 /* empty css                 */
 /* empty css                                   */
 /* empty css       */
-import { getPortalScopeProps$u as Q, getUiKitDefaults$u as V } from "../../shared/uiKitDefaults.js";
-import { MOTION_EASE$u as W, motionMs$u as X, MOTION_MS$u as x } from "../../vanilla/core/motion.js";
-import { lockKitScroll$u as Y, ownKitNode$u as Z, isKitEventHandled$u as oo, markKitEventHandled$u as eo } from "../../vanilla/core/kitRegistry.js";
-const Eo = ({
-  onCancel: n,
-  active: e,
+import { kitCls$u as l, getUiKitPrefix$u as d, kitClasses$u as W, getPortalScopeProps$u as X, getUiKitDefaults$u as Y } from "../../shared/uiKitDefaults.js";
+import { MOTION_EASE$u as Z, motionMs$u as ee, MOTION_MS$u as v } from "../../vanilla/core/motion.js";
+import { lockKitScroll$u as oe, ownKitNode$u as te, isKitEventHandled$u as re, markKitEventHandled$u as se } from "../../vanilla/core/kitRegistry.js";
+const Me = ({
+  onCancel: i,
+  active: o,
   ariaLabel: N,
-  ariaLabelledBy: m,
-  children: c,
+  ariaLabelledBy: f,
+  children: p,
   maxWidth: _ = "900px",
-  maxHeight: k,
+  maxHeight: P,
   className: w = "",
-  height: P = "",
-  notCloseClickOnBack: f,
+  height: K = "",
+  notCloseClickOnBack: y,
   closeOnEscape: S,
-  closeButtonInside: p = !1,
-  lockScroll: y = !1,
+  closeButtonInside: b = !1,
+  lockScroll: g = !1,
   unmountOnClose: T = !1,
   portalOn: s = !0,
-  trapFocus: $ = !0,
-  initialFocus: K = "first",
-  mobileSheet: A
+  trapFocus: C = !0,
+  initialFocus: A = "first",
+  mobileSheet: j
 }) => {
-  const b = A ?? V().mobileSheets, i = F(null), [o] = H(
+  const E = j ?? Y().mobileSheets, n = L(null), [e] = R(
     () => typeof document > "u" ? null : document.createElement("div")
   );
-  L(() => {
-    if (!(!s || !o))
-      return o.className = "u-react-modal-portal", document.body.appendChild(o), () => o.remove();
-  }, [s, o]), R(() => {
-    if (!s || !o) return;
-    const t = Q()["data-u-kit"];
-    if (t ? o.setAttribute("data-u-kit", t) : o.removeAttribute("data-u-kit"), e) {
+  U(() => {
+    if (!(!s || !e))
+      return e.className = "u-react-modal-portal", document.body.appendChild(e), () => e.remove();
+  }, [s, e]), z(() => {
+    if (!s || !e) return;
+    const t = X()["data-u-kit"];
+    if (t ? e.setAttribute("data-u-kit", t) : e.removeAttribute("data-u-kit"), o) {
       const r = document.activeElement;
-      document.body.appendChild(o), r instanceof HTMLElement && o.contains(r) && r.focus({ preventScroll: !0 });
+      document.body.appendChild(e), r instanceof HTMLElement && e.contains(r) && r.focus({ preventScroll: !0 });
     }
-  }, [e, s, o]);
-  const { shouldRender: g, status: j, isAnimated: C } = O({
-    isOpen: !!e,
-    duration: b ? x.base : x.fast
-  }), d = C && j === "exiting", E = !!e || d, h = d ? { opacity: 0, transition: `opacity ${X("fast")}ms ${W.exit}` } : null, { scope: u, onFocusCapture: D } = U(i, !!e, $, K);
-  J(i, E, m, c, p);
-  const M = S ?? !f;
-  if (l(() => {
-    if (!e || !M || typeof n != "function") return;
+  }, [o, s, e]);
+  const { shouldRender: h, status: D, isAnimated: I } = q({
+    isOpen: !!o,
+    duration: E ? v.base : v.fast
+  }), u = I && D === "exiting", M = !!o || u, $ = u ? { opacity: 0, transition: `opacity ${ee("fast")}ms ${Z.exit}` } : null, { scope: m, onFocusCapture: F } = B(n, !!o, C, A);
+  V(n, M, f, p, b);
+  const x = S ?? !y;
+  if (c(() => {
+    if (!o || !x || typeof i != "function") return;
     const t = (r) => {
-      r.key !== "Escape" || r.defaultPrevented || oo(r) || !B(u) || G(i.current, r.target) || (eo(r), n(r));
+      r.key !== "Escape" || r.defaultPrevented || re(r) || !J(m) || Q(n.current, r.target) || (se(r), i(r));
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [e, M, n, u]), l(() => {
-    if (!(!e || !y))
-      return Y();
-  }, [e, y]), l(() => {
-    const t = i.current;
-    return t ? Z(t) : void 0;
-  }, [g, s]), T && !g) return null;
-  const v = /* @__PURE__ */ a(q.Provider, { value: u, children: /* @__PURE__ */ a(
+  }, [o, x, i, m]), c(() => {
+    if (!(!o || !g))
+      return oe();
+  }, [o, g]), c(() => {
+    const t = n.current;
+    return t ? te(t) : void 0;
+  }, [h, s]), T && !h) return null;
+  const k = /* @__PURE__ */ a(G.Provider, { value: m, children: /* @__PURE__ */ a(
     "div",
     {
-      className: `${E ? "u-modal u-modal-active" : "u-modal"}${b ? " u-react-modal-sheet" : ""}${d ? " u-react-modal-closing" : ""} ${w}`,
+      className: `${M ? W("modal", "modal-active") : l("modal")}${E ? ` ${d()}-react-modal-sheet` : ""}${u ? ` ${d()}-react-modal-closing` : ""} ${w}`,
       style: { backgroundColor: "unset" },
-      onMouseDown: f ? () => {
-      } : n,
-      children: /* @__PURE__ */ a("div", { className: "u-modal__container", style: Object.assign({ backgroundColor: "var(--u-modal-overlay, #0006)" }, h), children: /* @__PURE__ */ I(
+      onMouseDown: y ? () => {
+      } : i,
+      children: /* @__PURE__ */ a("div", { className: l("modal__container"), style: Object.assign({ backgroundColor: `var(--${d()}-modal-overlay, #0006)` }, $), children: /* @__PURE__ */ H(
         "div",
         {
-          className: `u-modal__body${p ? " u-modal__body--close-inside" : ""}`,
-          ref: i,
+          className: `${d()}-modal__body${b ? ` ${d()}-modal__body--close-inside` : ""}`,
+          ref: n,
           tabIndex: -1,
-          onFocusCapture: D,
+          onFocusCapture: F,
           role: "dialog",
           "aria-label": N,
-          "aria-labelledby": m,
-          "aria-modal": e || void 0,
-          "aria-hidden": !e || void 0,
+          "aria-labelledby": f,
+          "aria-modal": o || void 0,
+          "aria-hidden": !o || void 0,
           onMouseDown: (t) => {
             t.stopPropagation();
           },
           style: Object.assign(
-            { width: "100%", maxWidth: _, height: P, maxHeight: k, zIndex: 1001 },
-            h
+            { width: "100%", maxWidth: _, height: K, maxHeight: P, zIndex: 1001 },
+            $
           ),
           children: [
-            c,
-            /* @__PURE__ */ a("div", { className: "u-modal__exit", children: /* @__PURE__ */ a("button", { className: "u-button-cross", onClick: n, "aria-label": "Закрыть" }) })
+            p,
+            /* @__PURE__ */ a("div", { className: l("modal__exit"), children: /* @__PURE__ */ a("button", { className: l("button-cross"), onClick: i, "aria-label": "Закрыть" }) })
           ]
         }
       ) })
     }
   ) });
-  return !s || !o ? v : z(v, o);
+  return !s || !e ? k : O(k, e);
 };
-export { Eo as Modal$u };
+export { Me as Modal$u };

package/dist/components/Modal/useModalTitleClearance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModalTitleClearance.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/useModalTitleClearance.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgClD,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,GAC/B,SAAS,SAAS,CAAC,cAAc,CAAC,EAClC,QAAQ,OAAO,EACf,YAAY,MAAM,GAAG,SAAS,EAC9B,UAAU,SAAS,EACnB,mBAAmB,OAAO,SAiE7B,CAAC"}
+{"version":3,"file":"useModalTitleClearance.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/useModalTitleClearance.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiClD,oEAAoE;AACpE,eAAO,MAAM,sBAAsB,GAC/B,SAAS,SAAS,CAAC,cAAc,CAAC,EAClC,QAAQ,OAAO,EACf,YAAY,MAAM,GAAG,SAAS,EAC9B,UAAU,SAAS,EACnB,mBAAmB,OAAO,SAiE7B,CAAC"}

package/dist/components/Modal/useModalTitleClearance.js

@@ -1,48 +1,49 @@
 import { useLayoutEffect as v } from "react";
-const F = (r, g, p, b, w) => {
-  var o, f, m;
-  const t = r.ownerDocument.defaultView, a = t == null ? void 0 : t.getComputedStyle(r), e = g.top + (Number.parseFloat((a == null ? void 0 : a.borderTopWidth) ?? "") || 0) + (Number.parseFloat((a == null ? void 0 : a.paddingTop) ?? "") || 0), i = Math.max(0, p - e + b), l = (f = (o = r.ownerDocument).createRange) == null ? void 0 : f.call(o);
-  l == null || l.selectNodeContents(r);
-  const s = [...((m = l == null ? void 0 : l.getClientRects) == null ? void 0 : m.call(l)) ?? []].filter((c) => c.width > 0 || c.height > 0).map((c) => (c.top + c.bottom) / 2 + w / 2);
-  if (s.length === 0) return i;
-  const h = Math.max(...s) - e;
-  if (i <= h) return i;
-  const d = r.nextElementSibling, n = Math.max(
+import { getUiKitPrefix$u as i } from "../../shared/uiKitDefaults.js";
+const F = (c, f, h, $, x) => {
+  var o, y, p;
+  const t = c.ownerDocument.defaultView, a = t == null ? void 0 : t.getComputedStyle(c), e = f.top + (Number.parseFloat((a == null ? void 0 : a.borderTopWidth) ?? "") || 0) + (Number.parseFloat((a == null ? void 0 : a.paddingTop) ?? "") || 0), r = Math.max(0, h - e + $), l = (y = (o = c.ownerDocument).createRange) == null ? void 0 : y.call(o);
+  l == null || l.selectNodeContents(c);
+  const m = [...((p = l == null ? void 0 : l.getClientRects) == null ? void 0 : p.call(l)) ?? []].filter((s) => s.width > 0 || s.height > 0).map((s) => (s.top + s.bottom) / 2 + x / 2);
+  if (m.length === 0) return r;
+  const g = Math.max(...m) - e;
+  if (r <= g) return r;
+  const d = c.nextElementSibling, n = Math.max(
     0,
     Number.parseFloat((a == null ? void 0 : a.marginBottom) ?? "") || 0,
     d && t && Number.parseFloat(t.getComputedStyle(d).marginTop) || 0
   );
-  return Math.min(i, Math.max(h, p - e - n));
-}, A = (r, g, p, b, w) => {
+  return Math.min(r, Math.max(g, h - e - n));
+}, A = (c, f, h, $, x) => {
   v(() => {
-    const t = r.current;
-    if (!g || !t) return;
-    const e = (p ?? "").split(/\s+/).map((o) => t.ownerDocument.getElementById(o)).find((o) => (o == null ? void 0 : o.closest(".u-modal__body")) === t) ?? [...t.querySelectorAll("h1, h2, h3, h4, h5, h6")].find((o) => o.closest(".u-modal__body") === t), i = t.querySelector(":scope > .u-modal__exit > button"), l = t.ownerDocument.defaultView;
-    if (!e || !i || !l || ["flex", "inline-flex", "grid", "inline-grid"].includes(l.getComputedStyle(e).display)) return;
-    t.setAttribute("data-u-modal-has-title", "");
-    let s = 0;
-    const h = () => {
-      const o = e.getBoundingClientRect(), f = i.getBoundingClientRect(), m = t.getBoundingClientRect(), c = l.getComputedStyle(e), x = Number.parseFloat(c.lineHeight) || (Number.parseFloat(c.fontSize) || 16) * 1.2, C = t.offsetWidth > 0 && m.width > 0 ? m.width / t.offsetWidth : 1;
+    const t = c.current;
+    if (!f || !t) return;
+    const e = (h ?? "").split(/\s+/).map((o) => t.ownerDocument.getElementById(o)).find((o) => (o == null ? void 0 : o.closest(`.${i()}-modal__body`)) === t) ?? [...t.querySelectorAll("h1, h2, h3, h4, h5, h6")].find((o) => o.closest(`.${i()}-modal__body`) === t), r = t.querySelector(`:scope > .${i()}-modal__exit > button`), l = t.ownerDocument.defaultView;
+    if (!e || !r || !l || ["flex", "inline-flex", "grid", "inline-grid"].includes(l.getComputedStyle(e).display)) return;
+    t.setAttribute(`data-${i()}-modal-has-title`, "");
+    let m = 0;
+    const g = () => {
+      const o = e.getBoundingClientRect(), y = r.getBoundingClientRect(), p = t.getBoundingClientRect(), s = l.getComputedStyle(e), w = Number.parseFloat(s.lineHeight) || (Number.parseFloat(s.fontSize) || 16) * 1.2, C = t.offsetWidth > 0 && p.width > 0 ? p.width / t.offsetWidth : 1;
       t.style.setProperty(
-        "--u-modal-title-close-top",
-        `${(o.top - m.top - f.height / 2) / C + x / 2}px`
+        `--${i()}-modal-title-close-top`,
+        `${(o.top - p.top - y.height / 2) / C + w / 2}px`
       );
-      const u = i.getBoundingClientRect(), y = Number.parseFloat(l.getComputedStyle(t).getPropertyValue("--u-modal-title-gap")) || 8;
-      u.left < o.right + y && u.right > o.left && u.bottom + y > o.top && u.top < o.bottom ? (e.setAttribute("data-u-modal-title-clearance", ""), e.style.setProperty(
-        "--u-modal-title-clearance-width",
-        `${Math.min(o.width, Math.max(0, o.right - u.left + y))}px`
+      const u = r.getBoundingClientRect(), b = Number.parseFloat(l.getComputedStyle(t).getPropertyValue(`--${i()}-modal-title-gap`)) || 8;
+      u.left < o.right + b && u.right > o.left && u.bottom + b > o.top && u.top < o.bottom ? (e.setAttribute(`data-${i()}-modal-title-clearance`, ""), e.style.setProperty(
+        `--${i()}-modal-title-clearance-width`,
+        `${Math.min(o.width, Math.max(0, o.right - u.left + b))}px`
       ), e.style.setProperty(
-        "--u-modal-title-clearance-height",
-        `${F(e, o, u.bottom, y, x)}px`
-      )) : (e.removeAttribute("data-u-modal-title-clearance"), e.style.removeProperty("--u-modal-title-clearance-width"), e.style.removeProperty("--u-modal-title-clearance-height"));
+        `--${i()}-modal-title-clearance-height`,
+        `${F(e, o, u.bottom, b, w)}px`
+      )) : (e.removeAttribute(`data-${i()}-modal-title-clearance`), e.style.removeProperty(`--${i()}-modal-title-clearance-width`), e.style.removeProperty(`--${i()}-modal-title-clearance-height`));
     }, d = () => {
-      l.cancelAnimationFrame(s), s = l.requestAnimationFrame(h);
+      l.cancelAnimationFrame(m), m = l.requestAnimationFrame(g);
     };
-    h();
+    g();
     const n = typeof ResizeObserver > "u" ? null : new ResizeObserver(d);
-    return n == null || n.observe(t), n == null || n.observe(e), n == null || n.observe(i), l.addEventListener("resize", d), () => {
-      n == null || n.disconnect(), l.removeEventListener("resize", d), l.cancelAnimationFrame(s), t.removeAttribute("data-u-modal-has-title"), t.style.removeProperty("--u-modal-title-close-top"), e.removeAttribute("data-u-modal-title-clearance"), e.style.removeProperty("--u-modal-title-clearance-width"), e.style.removeProperty("--u-modal-title-clearance-height");
+    return n == null || n.observe(t), n == null || n.observe(e), n == null || n.observe(r), l.addEventListener("resize", d), () => {
+      n == null || n.disconnect(), l.removeEventListener("resize", d), l.cancelAnimationFrame(m), t.removeAttribute(`data-${i()}-modal-has-title`), t.style.removeProperty(`--${i()}-modal-title-close-top`), e.removeAttribute(`data-${i()}-modal-title-clearance`), e.style.removeProperty(`--${i()}-modal-title-clearance-width`), e.style.removeProperty(`--${i()}-modal-title-clearance-height`);
     };
-  }, [r, g, p, b, w]);
+  }, [c, f, h, $, x]);
 };
 export { A as useModalTitleClearance$u };