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

package/dist/components/Textarea/Textarea.js

@@ -1,107 +1,108 @@
-import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 /* empty css                 */
-import { forwardRef as F } from "react";
-import { useAutoId$u as G } from "../../hooks/useAutoId.js";
-import { getFieldAccessibility$u as k } from "../../shared/fieldAccessibility.js";
-import { sizeClassName$u as q } from "../../shared/size.js";
-import { resolveValidation$u as D } from "../../vanilla/core/validation.js";
-const H = F(({
-  "aria-label": u,
-  "aria-labelledby": p,
-  "aria-describedby": x,
-  title: r = "",
-  placeholder: m = "",
-  defaultValue: b,
-  value: f,
-  id: h,
-  name: v = "",
-  onChange: y,
-  onBlur: g,
-  required: o = !1,
-  disabled: $ = !1,
-  lineUp: i = !1,
-  rowGap: w = 4,
-  columnGap: N = 20,
-  styleInputContainer: T,
-  styleTitle: j,
-  styleInput: z,
-  className: E = "",
-  size: A,
-  validationText: B = "Заполните поле",
-  validationOn: O
-}, S) => {
-  const a = G(h, "u-textarea"), s = q(A), e = D({ validationOn: O, validationText: B }), c = e.showText && !!e.text, C = k(a, r, o, { ...e, showText: c }, {
-    "aria-label": u,
-    "aria-labelledby": p,
-    "aria-describedby": x
-  }), n = (t) => typeof t == "number" ? `calc(${t} * var(--u-preset-unit, 1px))` : String(t);
-  return /* @__PURE__ */ d(
+import { forwardRef as G } from "react";
+import { useAutoId$u as q } from "../../hooks/useAutoId.js";
+import { getFieldAccessibility$u as D } from "../../shared/fieldAccessibility.js";
+import { sizeClassName$u as H } from "../../shared/size.js";
+import { getUiKitPrefix$u as e, kitCls$u as p } from "../../shared/uiKitDefaults.js";
+import { resolveValidation$u as I } from "../../vanilla/core/validation.js";
+const K = G(({
+  "aria-label": x,
+  "aria-labelledby": u,
+  "aria-describedby": f,
+  title: i = "",
+  placeholder: b = "",
+  defaultValue: $,
+  value: h,
+  id: v,
+  name: y = "",
+  onChange: g,
+  onBlur: w,
+  required: s = !1,
+  disabled: N = !1,
+  lineUp: t = !1,
+  rowGap: T = 4,
+  columnGap: j = 20,
+  styleInputContainer: z,
+  styleTitle: E,
+  styleInput: A,
+  className: B = "",
+  size: C,
+  validationText: O = "Заполните поле",
+  validationOn: S
+}, k) => {
+  const r = q(v, p("textarea")), c = H(C), a = I({ validationOn: S, validationText: O }), n = a.showText && !!a.text, F = D(r, i, s, { ...a, showText: n }, {
+    "aria-label": x,
+    "aria-labelledby": u,
+    "aria-describedby": f
+  }), d = (l) => typeof l == "number" ? `calc(${l} * var(--${e()}-preset-unit, 1px))` : String(l);
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: `u-react-input-container${s ? ` ${s}` : ""} ${E}`,
+      className: `${e()}-react-input-container${c ? ` ${c}` : ""} ${B}`,
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ m(
           "div",
           {
             style: Object.assign(
               {
                 display: "flex",
-                flexDirection: i ? "row" : "column",
-                rowGap: i ? null : n(w),
-                columnGap: i ? n(N) : null
+                flexDirection: t ? "row" : "column",
+                rowGap: t ? null : d(T),
+                columnGap: t ? d(j) : null
               },
-              T
+              z
             ),
             children: [
-              r && /* @__PURE__ */ l(
+              i && /* @__PURE__ */ o(
                 "div",
                 {
-                  id: `${a}-label`,
-                  className: `${o ? "u-required" : ""} u-react-input-title`,
+                  id: `${r}-label`,
+                  className: `${s ? p("required") : ""} ${e()}-react-input-title`,
                   style: Object.assign(
                     {
-                      color: "var(--u-field-title-color, #545454)",
-                      fontSize: "var(--u-field-label-size-main, calc(14 * var(--u-unit, 1px)))"
+                      color: `var(--${e()}-field-title-color, #545454)`,
+                      fontSize: `var(--${e()}-field-label-size-main, calc(14 * var(--u-unit, 1px)))`
                     },
-                    j
+                    E
                   ),
-                  children: r
+                  children: i
                 }
               ),
-              /* @__PURE__ */ l(
+              /* @__PURE__ */ o(
                 "textarea",
                 {
-                  ...C,
-                  ref: S,
-                  className: `u-textarea${e.hasError ? " u-textarea-required" : ""}`,
-                  id: a,
-                  name: v,
-                  placeholder: m,
-                  value: f,
-                  defaultValue: b,
-                  disabled: $,
-                  onChange: y,
-                  onBlur: g,
+                  ...F,
+                  ref: k,
+                  className: `${e()}-textarea${a.hasError ? ` ${e()}-textarea-required` : ""}`,
+                  id: r,
+                  name: y,
+                  placeholder: b,
+                  value: h,
+                  defaultValue: $,
+                  disabled: N,
+                  onChange: g,
+                  onBlur: w,
                   style: Object.assign(
                     {
-                      minHeight: "max(var(--u-textarea-min-height, 48px), calc(20 * var(--u-unit, 1px) + 2px))",
+                      minHeight: `max(var(--${e()}-textarea-min-height, 48px), calc(20 * var(--u-unit, 1px) + 2px))`,
                       // Строка, рамка и отступы должны помещаться при минимальной высоте.
-                      paddingBlock: "clamp(0px, calc((var(--u-textarea-min-height, 48px) - 20 * var(--u-unit, 1px) - 2px) / 2), var(--u-input-padding-y, 14px))"
+                      paddingBlock: `clamp(0px, calc((var(--${e()}-textarea-min-height, 48px) - 20 * var(--u-unit, 1px) - 2px) / 2), var(--${e()}-input-padding-y, 14px))`
                     },
-                    e.hasError && { border: "1px solid var(--u-color-error, #EF302B)" },
+                    a.hasError && { border: `1px solid var(--${e()}-color-error, #EF302B)` },
                     // `styleInput` идёт последним: как и в остальных полях,
                     // потребитель может перекрыть стили компонента.
-                    z
+                    A
                   )
                 }
               )
             ]
           }
         ),
-        c && /* @__PURE__ */ l("h5", { id: `${a}-error`, className: "h5 clr-red-main", style: { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: e.text })
+        n && /* @__PURE__ */ o("h5", { id: `${r}-error`, className: "h5 clr-red-main", style: { position: "relative", marginTop: "calc(4 * var(--u-unit, 1px))" }, children: a.text })
       ]
     }
   );
 });
-H.displayName = "Textarea";
-export { H as Textarea$u };
+K.displayName = "Textarea";
+export { K as Textarea$u };

package/dist/components/Tooltip/Tooltip.js

@@ -1,175 +1,175 @@
-import { jsxs as X, jsx as N } from "react/jsx-runtime";
-import { useRef as z, useState as Y, useCallback as B, useEffect as v, useLayoutEffect as W } from "react";
+import { jsxs as V, jsx as P } from "react/jsx-runtime";
+import { useRef as z, useState as Y, useCallback as B, useEffect as $, useLayoutEffect as tt } from "react";
 /* empty css                 */
-import { createPortal as q } from "react-dom";
+import { createPortal as et } from "react-dom";
 /* empty css                                     */
 /* empty css         */
-import { getPortalScopeProps$u as tt } from "../../shared/uiKitDefaults.js";
-import { useMountTransition$u as et } from "../../hooks/useMountTransition.js";
-import { useAutoId$u as nt } from "../../hooks/useAutoId.js";
-import { MOTION_EASE$u as C, motionMs$u as L, MOTION_MS$u as rt } from "../../vanilla/core/motion.js";
-const ot = 100, it = {
-  top: "0 var(--u-motion-shift-sm, 4px)",
-  bottom: "0 calc(-1 * var(--u-motion-shift-sm, 4px))",
-  left: "var(--u-motion-shift-sm, 4px) 0",
-  right: "calc(-1 * var(--u-motion-shift-sm, 4px)) 0"
-}, st = (r, t, n, a) => {
-  const u = J(V), y = t.x + t.width / 2, m = t.y + t.height / 2 - a / 2 + t.scrollY;
-  return r === "bottom" ? { x: y, y: t.y + t.height + t.scrollY + u } : r === "right" ? { x: t.x + t.width + u + n / 2, y: m } : r === "left" ? { x: t.x - u - n / 2, y: m } : { x: y, y: t.y + t.scrollY - u - a };
-}, R = 8, V = 10, ct = 14, J = (r) => {
-  if (typeof window > "u" || typeof document > "u") return r;
+import { getUiKitPrefix$u as S, kitCls$u as H, getPortalScopeProps$u as nt, kitVarRef$u as rt } from "../../shared/uiKitDefaults.js";
+import { useMountTransition$u as ot } from "../../hooks/useMountTransition.js";
+import { useAutoId$u as it } from "../../hooks/useAutoId.js";
+import { MOTION_EASE$u as L, motionMs$u as k, MOTION_MS$u as st } from "../../vanilla/core/motion.js";
+const ct = 100;
+function lt(n) {
+  const t = rt("motion-shift-sm", "4px");
+  return n === "top" ? `0 ${t}` : n === "bottom" ? `0 calc(-1 * ${t})` : n === "left" ? `${t} 0` : `calc(-1 * ${t}) 0`;
+}
+const ut = (n, t, r, a) => {
+  const l = Z(Q), y = t.x + t.width / 2, m = t.y + t.height / 2 - a / 2 + t.scrollY;
+  return n === "bottom" ? { x: y, y: t.y + t.height + t.scrollY + l } : n === "right" ? { x: t.x + t.width + l + r / 2, y: m } : n === "left" ? { x: t.x - l - r / 2, y: m } : { x: y, y: t.y + t.scrollY - l - a };
+}, R = 8, Q = 10, ft = 14, Z = (n) => {
+  if (typeof window > "u" || typeof document > "u") return n;
   const t = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
-  return !Number.isFinite(t) || t <= 0 ? r : r * (t / 16);
-}, ut = {
+  return !Number.isFinite(t) || t <= 0 ? n : n * (t / 16);
+}, dt = {
   top: "bottom",
   bottom: "top",
   left: "right",
   right: "left"
-}, lt = (r, t, n, a) => {
-  const u = J(V), y = t.x + t.width / 2, m = t.y + t.height / 2 - a / 2 + t.scrollY;
-  return r === "top" ? { x: y, y: t.y + t.scrollY - u - a } : r === "bottom" ? { x: y, y: t.y + t.height + t.scrollY + u } : r === "right" ? { x: t.x + t.width + u + n / 2, y: m } : { x: t.x - u - n / 2, y: m };
-}, ft = (r, t, n, a) => {
+}, at = (n, t, r, a) => {
+  const l = Z(Q), y = t.x + t.width / 2, m = t.y + t.height / 2 - a / 2 + t.scrollY;
+  return n === "top" ? { x: y, y: t.y + t.scrollY - l - a } : n === "bottom" ? { x: y, y: t.y + t.height + t.scrollY + l } : n === "right" ? { x: t.x + t.width + l + r / 2, y: m } : { x: t.x - l - r / 2, y: m };
+}, mt = (n, t, r, a) => {
   var _, I;
-  const u = st(r, t, n, a);
+  const l = ut(n, t, r, a);
   if (typeof window > "u")
-    return { placement: r, ...u, arrowShift: 0 };
-  const y = ((_ = document.documentElement) == null ? void 0 : _.clientHeight) || window.innerHeight, m = ((I = document.documentElement) == null ? void 0 : I.clientWidth) || window.innerWidth, w = [r, ut[r]];
+    return { placement: n, ...l, arrowShift: 0 };
+  const y = ((_ = document.documentElement) == null ? void 0 : _.clientHeight) || window.innerHeight, m = ((I = document.documentElement) == null ? void 0 : I.clientWidth) || window.innerWidth, w = [n, dt[n]];
   for (const o of ["top", "bottom", "left", "right"])
     w.includes(o) || w.push(o);
   const g = (o) => {
-    const p = o.y - t.scrollY, b = o.x - n / 2;
-    return Math.max(0, R - p) + Math.max(0, p + a - (y - R)) + Math.max(0, R - b) + Math.max(0, b + n - (m - R));
+    const p = o.y - t.scrollY, b = o.x - r / 2;
+    return Math.max(0, R - p) + Math.max(0, p + a - (y - R)) + Math.max(0, R - b) + Math.max(0, b + r - (m - R));
   };
   let d = null;
   for (const o of w) {
-    const p = o === r ? u : lt(o, t, n, a), b = g(p);
+    const p = o === n ? l : at(o, t, r, a), b = g(p);
     if (b === 0)
       return { placement: o, x: p.x, y: p.y, arrowShift: 0 };
     (!d || b < d.overflow) && (d = { placement: o, x: p.x, y: p.y, overflow: b });
   }
   const M = d;
   let f = M.x;
-  const x = n / 2;
+  const x = r / 2;
   f - x < R ? f = x + R : f + x > m - R && (f = m - R - x);
-  const T = t.x + t.width / 2, s = Math.max(0, x - ct), $ = Math.max(-s, Math.min(s, T - f));
-  return { placement: M.placement, x: f, y: M.y, arrowShift: $ };
-}, K = (r) => {
+  const T = t.x + t.width / 2, s = Math.max(0, x - ft), N = Math.max(-s, Math.min(s, T - f));
+  return { placement: M.placement, x: f, y: M.y, arrowShift: N };
+}, X = (n) => {
   const t = document.activeElement;
-  if (!r || !t || !r.contains(t)) return !1;
-  const n = document.documentElement.getAttribute("data-input-mode");
-  if (n) return n === "keyboard";
+  if (!n || !t || !n.contains(t)) return !1;
+  const r = document.documentElement.getAttribute("data-input-mode");
+  if (r) return r === "keyboard";
   try {
     return t.matches(":focus-visible");
   } catch {
     return !0;
   }
-}, dt = 1e3;
-let Q = -1 / 0, U = !1;
-const at = () => {
-  U || typeof document > "u" || (U = !0, document.addEventListener("pointerdown", () => {
-    Q = Date.now();
+}, pt = 1e3;
+let W = -1 / 0, J = !1;
+const yt = () => {
+  J || typeof document > "u" || (J = !0, document.addEventListener("pointerdown", () => {
+    W = Date.now();
   }, { capture: !0, passive: !0 }));
-}, mt = () => document.documentElement.getAttribute("data-input-mode") !== "keyboard" && Date.now() - Q < dt, Rt = ({
-  children: r = /* @__PURE__ */ N("div", {}),
+}, wt = () => document.documentElement.getAttribute("data-input-mode") !== "keyboard" && Date.now() - W < pt, Tt = ({
+  children: n = /* @__PURE__ */ P("div", {}),
   className: t = "",
-  portalOn: n = !1,
+  portalOn: r = !1,
   id: a = "",
-  tooltipText: u = /* @__PURE__ */ N("div", {}),
+  tooltipText: l = /* @__PURE__ */ P("div", {}),
   style: y,
   tooltipStyle: m,
   position: w = "top",
   isActive: g = !0,
   showWhenActive: d = !1,
-  showDelay: M = ot
+  showDelay: M = ct
 }) => {
-  const f = z(null), x = z(null), T = z(null), [s, $] = Y(!1), [_, I] = Y(null), [o, p] = Y(null), [b, H] = Y(w), [k, G] = Y(!1), P = () => {
+  const f = z(null), x = z(null), T = z(null), [s, N] = Y(!1), [_, I] = Y(null), [o, p] = Y(null), [b, G] = Y(w), [j, K] = Y(!1), A = () => {
     T.current && (clearTimeout(T.current), T.current = null);
   }, h = B(() => {
-    P(), $(!1), I(null), G(!1);
-  }, []), { shouldRender: D, isAnimated: j } = et({ isOpen: s, duration: rt.instant });
-  v(() => {
-    D || (p(null), H(w));
+    A(), N(!1), I(null), K(!1);
+  }, []), { shouldRender: D, isAnimated: U } = ot({ isOpen: s, duration: st.instant });
+  $(() => {
+    D || (p(null), G(w));
   }, [D, w]);
-  const A = B((e) => {
-    P();
-    const { x: c, y: i, width: l, height: E } = e.getBoundingClientRect();
-    I({ x: c, y: i, width: l, height: E, scrollY: window.scrollY }), $(!0);
-  }, []), F = B((e) => {
-    const { x: c, y: i, width: l, height: E } = e.getBoundingClientRect();
-    I((S) => S && { x: c, y: i, width: l, height: E, scrollY: window.scrollY });
+  const C = B((e) => {
+    A();
+    const { x: c, y: i, width: u, height: E } = e.getBoundingClientRect();
+    I({ x: c, y: i, width: u, height: E, scrollY: window.scrollY }), N(!0);
+  }, []), O = B((e) => {
+    const { x: c, y: i, width: u, height: E } = e.getBoundingClientRect();
+    I((v) => v && { x: c, y: i, width: u, height: E, scrollY: window.scrollY });
   }, []);
-  W(() => {
-    if (!n || !s || !_) return;
+  tt(() => {
+    if (!r || !s || !_) return;
     const e = x.current;
     if (!e) return;
-    const { width: c, height: i } = e.getBoundingClientRect(), l = ft(w, _, c, i);
-    H(l.placement), p({ x: l.x, y: l.y, arrowShift: l.arrowShift });
-  }, [n, s, _, w, u]), v(() => {
+    const { width: c, height: i } = e.getBoundingClientRect(), u = mt(w, _, c, i);
+    G(u.placement), p({ x: u.x, y: u.y, arrowShift: u.arrowShift });
+  }, [r, s, _, w, l]), $(() => {
     if (o && s)
-      return T.current = setTimeout(() => G(!0), M), P;
-  }, [o, s, M]), v(() => {
+      return T.current = setTimeout(() => K(!0), M), A;
+  }, [o, s, M]), $(() => {
     g || h();
-  }, [g, h]), v(() => {
+  }, [g, h]), $(() => {
     if (!s) return;
     const e = () => {
       if (d && g) return;
       const c = f.current;
-      if (c && K(c)) {
-        F(c);
+      if (c && X(c)) {
+        O(c);
         return;
       }
       h();
     };
     return window.addEventListener("scroll", e, !0), () => window.removeEventListener("scroll", e, !0);
-  }, [s, d, g, h, F]), v(() => {
-    if (!n || !s) return;
+  }, [s, d, g, h, O]), $(() => {
+    if (!r || !s) return;
     let e;
     const c = () => {
       e !== void 0 && window.cancelAnimationFrame(e), e = window.requestAnimationFrame(() => {
-        const S = f.current;
-        S && F(S);
+        const v = f.current;
+        v && O(v);
       });
     };
     window.addEventListener("resize", c);
     const i = typeof ResizeObserver > "u" ? null : new ResizeObserver(c);
-    let l = f.current;
-    for (; l; )
-      i == null || i.observe(l), l = l.parentElement;
+    let u = f.current;
+    for (; u; )
+      i == null || i.observe(u), u = u.parentElement;
     const E = x.current;
     return E && (i == null || i.observe(E)), () => {
       window.removeEventListener("resize", c), i == null || i.disconnect(), e !== void 0 && window.cancelAnimationFrame(e);
     };
-  }, [n, s, F]), v(() => {
-    if (!d || !n) return;
+  }, [r, s, O]), $(() => {
+    if (!d || !r) return;
     if (!g) {
       h();
       return;
     }
     const e = f.current;
-    e && A(e);
-  }, [d, n, g, h, A]), v(() => P, []), v(at, []);
-  const Z = nt(void 0, "u-tooltip"), O = a ? `u-tooltip${a}` : Z;
-  return v(() => {
+    e && C(e);
+  }, [d, r, g, h, C]), $(() => A, []), $(yt, []);
+  const q = it(void 0, H("tooltip")), F = a ? `${S()}-tooltip${a}` : q;
+  return $(() => {
     const e = f.current;
-    if (!n || !s || !e) return;
-    const c = document.activeElement, i = c instanceof HTMLElement && e.contains(c) ? c : e, l = new Set((i.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
-    return l.add(O), i.setAttribute("aria-describedby", [...l].join(" ")), () => {
-      const E = (i.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((S) => S && S !== O);
+    if (!r || !s || !e) return;
+    const c = document.activeElement, i = c instanceof HTMLElement && e.contains(c) ? c : e, u = new Set((i.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
+    return u.add(F), i.setAttribute("aria-describedby", [...u].join(" ")), () => {
+      const E = (i.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((v) => v && v !== F);
       E.length ? i.setAttribute("aria-describedby", E.join(" ")) : i.removeAttribute("aria-describedby");
     };
-  }, [n, s, O]), n ? /* @__PURE__ */ X(
+  }, [r, s, F]), r ? /* @__PURE__ */ V(
     "div",
     {
       ref: f,
       style: y,
       onMouseEnter: d ? void 0 : (e) => {
-        g && A(e.currentTarget);
+        g && C(e.currentTarget);
       },
       onMouseLeave: d ? void 0 : () => {
-        K(f.current) || h();
+        X(f.current) || h();
       },
       onFocus: d ? void 0 : (e) => {
-        g && !mt() && A(e.currentTarget);
+        g && !wt() && C(e.currentTarget);
       },
       onBlur: d ? void 0 : (e) => {
         e.currentTarget.contains(e.relatedTarget) || h();
@@ -177,18 +177,18 @@ const at = () => {
       onKeyDown: (e) => {
         e.key !== "Escape" || !s || (e.preventDefault(), h());
       },
-      className: `u-help ${t}`,
+      className: `${S()}-help ${t}`,
       children: [
-        D && q(
-          /* @__PURE__ */ N(
+        D && et(
+          /* @__PURE__ */ P(
             "div",
             {
               ref: x,
-              ...tt(),
+              ...nt(),
               style: {
                 left: (o == null ? void 0 : o.x) ?? 0,
                 top: (o == null ? void 0 : o.y) ?? 0,
-                opacity: k ? 1 : 0,
+                opacity: j ? 1 : 0,
                 /**
                  * До первого замера подсказка скрыта, но занимает место —
                  * `visibility` сохраняет размеры, поэтому её есть чем измерить.
@@ -197,7 +197,7 @@ const at = () => {
                 /**
                  * Сдвиг — свойством `translate`: `transform` уже занят центровкой.
                  */
-                translate: j && !k ? it[b] : void 0,
+                translate: U && !j ? lt(b) : void 0,
                 /**
                  * Переход только по прозрачности и сдвигу. В vanilla у `.u-help-tooltip`
                  * стоит `transition: 0.3s` — на все свойства сразу, включая
@@ -206,33 +206,33 @@ const at = () => {
                  * вперёд — ещё и от начальной точки.
                  * Вход — `fast` + `ease-enter`, выход короче — `instant` + `ease-exit`.
                  */
-                transition: j ? s ? `opacity ${L("fast")}ms ${C.enter}, translate ${L("fast")}ms ${C.enter}` : `opacity ${L("instant")}ms ${C.exit}, translate ${L("instant")}ms ${C.exit}` : "none",
+                transition: U ? s ? `opacity ${k("fast")}ms ${L.enter}, translate ${k("fast")}ms ${L.enter}` : `opacity ${k("instant")}ms ${L.exit}, translate ${k("instant")}ms ${L.exit}` : "none",
                 height: "fit-content",
                 /**
                  * Как во Vue-ките: над окнами (1000), фильтрами таблицы (9999) и выпадающими
                  * списками (10010). Одно значение у обоих китов — на странице с оболочкой и
                  * сервисом слой подсказки не зависит от того, чей кит объявил токен на :root.
                  */
-                zIndex: "var(--u-tooltip-z, 10020)",
-                "--u-tooltip-arrow-shift": `${(o == null ? void 0 : o.arrowShift) ?? 0}px`,
+                zIndex: `var(--${S()}-tooltip-z, 10020)`,
+                [`--${S()}-tooltip-arrow-shift`]: `${(o == null ? void 0 : o.arrowShift) ?? 0}px`,
                 ...m,
                 // Гаснущая подсказка не ловит курсор, даже если сервис включил ей pointer-events.
                 ...s ? null : { pointerEvents: "none" }
               },
-              className: `u-help-tooltip u-help-tooltip-portal--${b}`,
-              id: O,
+              className: `${S()}-help-tooltip ${S()}-help-tooltip-portal--${b}`,
+              id: F,
               role: "tooltip",
-              children: u
+              children: l
             }
           ),
           document.body
         ),
-        /* @__PURE__ */ N("div", { className: "u-help__content", children: r })
+        /* @__PURE__ */ P("div", { className: H("help__content"), children: n })
       ]
     }
-  ) : /* @__PURE__ */ X("div", { style: y, className: `u-help ${t}`, children: [
-    /* @__PURE__ */ N("div", { className: `u-help-tooltip u-help-tooltip--${w}`, children: u }),
-    /* @__PURE__ */ N("div", { className: "u-help__content", children: r })
+  ) : /* @__PURE__ */ V("div", { style: y, className: `${S()}-help ${t}`, children: [
+    /* @__PURE__ */ P("div", { className: `${S()}-help-tooltip ${S()}-help-tooltip--${w}`, children: l }),
+    /* @__PURE__ */ P("div", { className: H("help__content"), children: n })
   ] });
 };
-export { Rt as Tooltip$u };
+export { Tt as Tooltip$u };