@code0-tech/pictor 0.14.0 → 0.16.0

package/dist/components/form/Input.js

@@ -1,19 +1,19 @@
-import { jsxs as j, jsx as p } from "react/jsx-runtime";
-import l, { useRef as k, useState as q, useMemo as D, useEffect as T, useLayoutEffect as _e } from "react";
+import { jsxs as q, jsx as g } from "react/jsx-runtime";
+import i, { useRef as b, useState as W, useMemo as D, useEffect as P, useLayoutEffect as ot } from "react";
 import "../../utils/contextStore.js";
 import { mergeComponentProps as ue } from "../../utils/component.js";
 import "js-md5";
 import '../../assets/components/form/Input.style.css';/* empty css                 */
-import { InputLabel as et } from "./InputLabel.js";
-import { InputDescription as tt } from "./InputDescription.js";
-import { InputMessage as nt } from "./InputMessage.js";
-import { Menu as rt, MenuTrigger as ot, MenuPortal as st } from "../menu/Menu.js";
-import { InputSuggestionMenuContent as at, InputSuggestionMenuContentItems as ut } from "./InputSuggestion.js";
-import { buildDefaultSyntax as it } from "./Input.syntax.hook.js";
-import { getSelectionMetrics as lt, setElementKey as ct, setSelectionRangeSafe as ft } from "./Input.utils.js";
-import { Card as dt } from "../card/Card.js";
-import { useContentEditableController as pt, setSelectionOffsetsInValue as gt } from "./InputContentEditable.hook.js";
-const W = (u) => {
+import { InputLabel as at } from "./InputLabel.js";
+import { InputDescription as st } from "./InputDescription.js";
+import { InputMessage as ut } from "./InputMessage.js";
+import { Menu as it, MenuTrigger as lt, MenuPortal as ct } from "../menu/Menu.js";
+import { InputSuggestionMenuContent as ft, InputSuggestionMenuContentItems as dt } from "./InputSuggestion.js";
+import { buildDefaultSyntax as pt } from "./Input.syntax.hook.js";
+import { getSelectionMetrics as gt, setElementKey as ht, setSelectionRangeSafe as mt } from "./Input.utils.js";
+import { Card as yt } from "../card/Card.js";
+import { useContentEditableController as St, setSelectionOffsetsInValue as Ct } from "./InputContentEditable.hook.js";
+const U = (u) => {
   const x = u ?? "";
   return typeof x == "string" ? x : String(x);
 }, ie = (u) => {
@@ -24,219 +24,227 @@ const W = (u) => {
   } catch {
     return String(u ?? "");
   }
-}, ht = (u) => {
+}, bt = (u) => {
   if (u && typeof u == "object") {
     const {
       children: x,
       __contentHtml: G,
-      ...U
+      ...T
     } = u;
-    return U;
+    return T;
   }
   return {
     value: u
   };
-}, Ne = (u) => {
+}, We = (u) => {
   if (!u) return null;
-  const x = u.value ?? "", G = u.selectionStart ?? x.length, P = x.slice(0, G).match(/\S+$/);
-  if (!P || P.index === void 0) return null;
-  const C = P[0], H = P.index, X = H + C.length;
+  const x = u.value ?? "", G = u.selectionStart ?? x.length, L = x.slice(0, G).match(/\S+$/);
+  if (!L || L.index === void 0) return null;
+  const C = L[0], H = L.index, X = H + C.length;
   return {
     token: C,
     start: H,
     end: X
   };
-}, mt = l.forwardRef((u, x) => {
+}, kt = i.forwardRef((u, x) => {
   const {
     wrapperComponent: G = {},
-    title: U,
-    description: P,
+    title: T,
+    description: L,
     disabled: C = !1,
     left: H,
     right: X,
-    leftType: ze = "icon",
-    rightType: je = "action",
-    formValidation: L = {
+    leftType: Ue = "icon",
+    rightType: He = "action",
+    formValidation: M = {
       valid: !0,
       notValidMessage: null,
       setValue: null
     },
-    suggestions: f,
-    suggestionsHeader: be,
-    suggestionsFooter: ve,
-    onSuggestionSelect: xe,
-    disableOnValue: we = () => !1,
+    suggestions: d,
+    suggestionsHeader: xe,
+    suggestionsFooter: we,
+    onSuggestionSelect: Ve,
+    disableOnValue: Ee = () => !1,
     transformSyntax: Y,
     validationUsesSyntax: le = !1,
-    filterSuggestionsByLastToken: b = !1,
-    enforceUniqueSuggestions: Ve = !1,
-    onLastTokenChange: Ee,
-    suggestionsEmptyState: De,
-    ...qe
+    filterSuggestionsByLastToken: k = !1,
+    enforceUniqueSuggestions: De = !1,
+    onLastTokenChange: Ie,
+    suggestionsEmptyState: Pe,
+    ...Je
   } = u, {
-    onFocus: Ie,
+    onFocus: Te,
     onBlur: Z,
     onKeyDown: _,
     onKeyDownCapture: ce,
-    onChange: M,
+    onChange: F,
     onInput: R,
-    ...h
-  } = qe, ee = k(null), m = k(null), $ = k(null), F = k(null), fe = k(null), w = k(!1), de = k(!1), We = k(0), Te = k(null), pe = h.value ?? u.initialValue ?? u.defaultValue, [Pe, Ue] = q(!1), K = k(!1), i = l.useCallback((e) => {
-    K.current = e, Ue(e);
-  }, []), [y, ge] = q(pe), [Le, Me] = q([]), [B, he] = q([]), [Re, He] = q(null), [A, Je] = q(null), s = !!Y, I = D(() => we(y), [we, y]), v = D(() => s ? $ : m, [s]);
-  l.useImperativeHandle(x, () => v.current ?? null);
-  const Oe = D(() => ({
-    ...h
-  }), [h]), Qe = D(() => {
+    ...c
+  } = Je, Qe = i.useId(), fe = c.id ?? Qe, Le = `${fe}-label`, Me = T ? void 0 : c["aria-label"] ?? c.placeholder, de = {
+    id: fe,
+    ...T ? {
+      "aria-labelledby": Le
+    } : {},
+    ...Me ? {
+      "aria-label": Me
+    } : {}
+  }, ee = b(null), m = b(null), O = b(null), K = b(null), pe = b(null), w = b(!1), ge = b(!1), Ge = b(0), Fe = b(null), he = c.value ?? u.initialValue ?? u.defaultValue, [Re, Xe] = W(!1), B = b(!1), l = i.useCallback((e) => {
+    B.current = e, Xe(e);
+  }, []), [y, me] = W(he), [$e, Oe] = W([]), [A, ye] = W([]), [Ke, Ye] = W(null), [N, Ze] = W(null), a = !!Y, I = D(() => Ee(y), [Ee, y]), v = D(() => a ? O : m, [a]);
+  i.useImperativeHandle(x, () => v.current ?? null);
+  const Be = D(() => ({
+    ...c
+  }), [c]), _e = D(() => {
     const {
       value: e,
       defaultValue: t,
       ...n
-    } = h;
+    } = c;
     return ue("input__control", n);
-  }, [h]), te = l.useCallback(() => {
+  }, [c]), te = i.useCallback(() => {
     const e = v.current;
     !e || C || I || e.focus({
       preventScroll: !0
     });
-  }, [v, C, I]), N = l.useCallback(() => {
-    f && i(!0);
-  }, [f, i]), me = l.useCallback((e) => {
-    b && (He(e), e && i(!0), Ee?.(e));
-  }, [b, Ee, i]), J = l.useCallback((e, t) => {
-    if (!L?.setValue) return;
-    const n = h.type !== "checkbox" ? W(e) : e, o = le ? t : n;
-    Object.is(Te.current, o) || (Te.current = o, L.setValue(o));
-  }, [L?.setValue, h.type, le]), ne = l.useCallback((e) => {
-    const t = e.currentTarget, n = h.type === "checkbox" && "checked" in t ? t.checked : t.value;
-    ge(n), J(n, null);
-  }, [h.type, J]), g = pt({
-    editorRef: $,
+  }, [v, C, I]), z = i.useCallback(() => {
+    d && l(!0);
+  }, [d, l]), Se = i.useCallback((e) => {
+    k && (Ye(e), e && l(!0), Ie?.(e));
+  }, [k, Ie, l]), J = i.useCallback((e, t) => {
+    if (!M?.setValue) return;
+    const n = c.type !== "checkbox" ? U(e) : e, o = le ? t : n;
+    Object.is(Fe.current, o) || (Fe.current = o, M.setValue(o));
+  }, [M?.setValue, c.type, le]), ne = i.useCallback((e) => {
+    const t = e.currentTarget, n = c.type === "checkbox" && "checked" in t ? t.checked : t.value;
+    me(n), J(n, null);
+  }, [c.type, J]), h = St({
+    editorRef: O,
     transformSyntax: Y,
-    filterSuggestionsByLastToken: b,
-    onLastTokenChange: me,
+    filterSuggestionsByLastToken: k,
+    onLastTokenChange: Se,
     onStateChange: ({
       value: e,
       tokens: t,
       segments: n
     }) => {
-      ge(e), he(t), Je(n ?? null), J(e, n ?? null);
+      me(e), ye(t), Ze(n ?? null), J(e, n ?? null);
     }
-  }), $e = k(!1);
-  T(() => {
-    if (!s || !Y || $e.current) return;
-    const e = W(pe);
-    g.initializeFromExternalValue(e), $e.current = !0;
-  }, [s, Y, pe, le, g]), T(() => {
-    s || h.value !== void 0 && ge(h.value);
-  }, [h.value, s]), T(() => {
-    J(y, A);
-  }, [J, A, y]), T(() => {
-    if (!f) return;
+  }), Ae = b(!1);
+  P(() => {
+    if (!a || !Y || Ae.current) return;
+    const e = U(he);
+    h.initializeFromExternalValue(e), Ae.current = !0;
+  }, [a, Y, he, le, h]), P(() => {
+    a || c.value !== void 0 && me(c.value);
+  }, [c.value, a]), P(() => {
+    J(y, N);
+  }, [J, N, y]), P(() => {
+    if (!d) return;
     const e = (t) => {
-      const n = t.target, o = !!$.current?.contains(n), a = !!m.current?.contains(n), r = !!fe.current?.contains(n), S = !!ee.current?.contains(n), c = o || a || r || S;
-      w.current = c, !c && K.current && i(!1);
+      const n = t.target, o = !!O.current?.contains(n), s = !!m.current?.contains(n), r = !!pe.current?.contains(n), S = !!ee.current?.contains(n), f = o || s || r || S;
+      w.current = f, !f && B.current && l(!1);
     };
     return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
-  }, [f, i]), T(() => {
+  }, [d, l]), P(() => {
     const e = ee.current;
     if (!e) return;
-    const t = () => N();
+    const t = () => z();
     return e.addEventListener("focusin", t), () => e.removeEventListener("focusin", t);
-  }, [N]);
-  const Fe = l.useCallback((e, t, n) => {
+  }, [z]);
+  const Ne = i.useCallback((e, t, n) => {
     if (e.length === 0) return t <= n.length ? t : null;
     let o = n.indexOf(e);
     if (o === -1) return null;
-    let a = o;
-    for (; a !== -1; )
-      Math.abs(a - t) < Math.abs(o - t) && (o = a), a = n.indexOf(e, a + 1);
+    let s = o;
+    for (; s !== -1; )
+      Math.abs(s - t) < Math.abs(o - t) && (o = s), s = n.indexOf(e, s + 1);
     return o;
-  }, []), re = l.useCallback((e, t) => {
+  }, []), re = i.useCallback((e, t) => {
     const n = [];
     return e.forEach((o) => {
-      const a = Fe(o.text, o.start, t);
-      if (a === null) return;
-      const r = a + o.text.length;
-      t.slice(a, r) === o.text && n.push({
+      const s = Ne(o.text, o.start, t);
+      if (s === null) return;
+      const r = s + o.text.length;
+      t.slice(s, r) === o.text && n.push({
         ...o,
-        start: a,
+        start: s,
         end: r
       });
     }), n;
-  }, [Fe]);
-  T(() => {
-    if (s) return;
-    const e = W(m.current?.value ?? y);
-    Me((t) => {
+  }, [Ne]);
+  P(() => {
+    if (a) return;
+    const e = U(m.current?.value ?? y);
+    Oe((t) => {
       const n = re(t, e);
-      return he(n.map((o) => o.suggestion)), n;
+      return ye(n.map((o) => o.suggestion)), n;
     });
-  }, [s, re, y]), T(() => {
-    if (!b || s) return;
+  }, [a, re, y]), P(() => {
+    if (!k || a) return;
     const e = m.current;
     if (!e) return;
-    const t = () => me(Ne(e)?.token ?? null);
+    const t = () => Se(We(e)?.token ?? null);
     return e.addEventListener("input", t), e.addEventListener("keyup", t), e.addEventListener("mouseup", t), t(), () => {
       e.removeEventListener("input", t), e.removeEventListener("keyup", t), e.removeEventListener("mouseup", t);
     };
-  }, [b, s, me]);
-  const z = D(() => {
-    if (!b || !f) return f;
-    const e = Re?.trim();
-    return e?.length ? f.filter((t) => String(t?.value ?? "").toLowerCase().startsWith(e.toLowerCase())) : f;
-  }, [b, Re, f]), oe = D(() => {
-    if (!Ve || !z) return z;
-    if (s) {
-      const t = new Set((B ?? []).map((n) => ie(n?.value ?? n)));
-      return z.filter((n) => !t.has(ie(n?.value ?? n)));
+  }, [k, a, Se]);
+  const j = D(() => {
+    if (!k || !d) return d;
+    const e = Ke?.trim();
+    return e?.length ? d.filter((t) => String(t?.value ?? "").toLowerCase().startsWith(e.toLowerCase())) : d;
+  }, [k, Ke, d]), oe = D(() => {
+    if (!De || !j) return j;
+    if (a) {
+      const t = new Set((A ?? []).map((n) => ie(n?.value ?? n)));
+      return j.filter((n) => !t.has(ie(n?.value ?? n)));
     }
-    const e = new Set(Le.map((t) => t.suggestion));
-    return z.filter((t) => !e.has(t));
-  }, [Le, B, Ve, z, s]), Ke = l.useCallback((e) => {
+    const e = new Set($e.map((t) => t.suggestion));
+    return j.filter((t) => !e.has(t));
+  }, [$e, A, De, j, a]), ze = i.useCallback((e) => {
     if (!m.current) return;
-    const t = typeof y == "object" ? JSON.stringify(e.value) : e.value, n = t == null ? "" : String(t), o = e.insertMode ?? "replace", a = m.current.value ?? "";
-    let r = a, S = null, c = 0;
-    const V = b ? Ne(m.current) : null;
-    if (b && V)
-      r = `${a.slice(0, V.start)}${n}${a.slice(V.end)}`, S = V.start + n.length, c = V.start;
+    const t = typeof y == "object" ? JSON.stringify(e.value) : e.value, n = t == null ? "" : String(t), o = e.insertMode ?? "replace", s = m.current.value ?? "";
+    let r = s, S = null, f = 0;
+    const V = k ? We(m.current) : null;
+    if (k && V)
+      r = `${s.slice(0, V.start)}${n}${s.slice(V.end)}`, S = V.start + n.length, f = V.start;
     else
       switch (o) {
         case "append":
-          r = `${a}${n}`, S = r.length, c = a.length;
+          r = `${s}${n}`, S = r.length, f = s.length;
           break;
         case "prepend":
-          r = `${n}${a}`, S = n.length, c = 0;
+          r = `${n}${s}`, S = n.length, f = 0;
           break;
         case "insert": {
           const {
-            rawStart: d,
-            rawEnd: O
-          } = lt(m.current);
-          r = `${a.slice(0, d)}${n}${a.slice(O)}`, S = d + n.length, c = d;
+            rawStart: p,
+            rawEnd: $
+          } = gt(m.current);
+          r = `${s.slice(0, p)}${n}${s.slice($)}`, S = p + n.length, f = p;
           break;
         }
         default:
-          r = n, S = n.length, c = 0;
+          r = n, S = n.length, f = 0;
           break;
       }
-    ct(m.current, "value", r, "change"), Me((d) => {
-      const O = W(r), se = re(d, O), E = n.length ? {
-        id: We.current++,
+    ht(m.current, "value", r, "change"), Oe((p) => {
+      const $ = U(r), ae = re(p, $), E = n.length ? {
+        id: Ge.current++,
         suggestion: e,
         text: n,
-        start: c,
-        end: c + n.length
-      } : null, ae = E ? [...se, E] : se;
-      return he(ae.map((Ze) => Ze.suggestion)), ae;
+        start: f,
+        end: f + n.length
+      } : null, se = E ? [...ae, E] : ae;
+      return ye(se.map((rt) => rt.suggestion)), se;
     }), S !== null && requestAnimationFrame(() => {
-      const d = m.current;
-      d && (d.focus({
+      const p = m.current;
+      p && (p.focus({
         preventScroll: !0
-      }), ft(d, S, S));
+      }), mt(p, S, S));
     });
-  }, [b, re, y]), Be = l.useCallback((e) => {
-    if (s ? g.applySuggestionValueSyntax(e) : Ke(e), xe?.(e), s) {
+  }, [k, re, y]), je = i.useCallback((e) => {
+    if (a ? h.applySuggestionValueSyntax(e) : ze(e), Ve?.(e), a) {
       const t = v.current;
       requestAnimationFrame(() => {
         if (!t) return;
@@ -247,50 +255,50 @@ const W = (u) => {
         };
         t.dispatchEvent(new Event("input", {
           bubbles: !0
-        })), R?.(n), M?.(n);
+        })), R?.(n), F?.(n);
       });
     }
-    i(!1), w.current = !1, requestAnimationFrame(() => {
+    l(!1), w.current = !1, requestAnimationFrame(() => {
       te();
     });
-  }, [v, Ke, g, te, s, xe, i, M, R]), ye = l.useCallback((e) => {
-    N(), Ie?.(e);
-  }, [N, Ie]), Q = l.useCallback((e) => {
-    if (de.current) {
-      de.current = !1, Z?.(e);
+  }, [v, ze, h, te, a, Ve, l, F, R]), Ce = i.useCallback((e) => {
+    z(), Te?.(e);
+  }, [z, Te]), Q = i.useCallback((e) => {
+    if (ge.current) {
+      ge.current = !1, Z?.(e);
       return;
     }
     if (w.current) {
       Z?.(e);
       return;
     }
-    i(!1), Z?.(e);
-  }, [Z, i]), Se = l.useCallback((e) => {
-    if (s) {
-      g.handleKeyDownCapture(e), ce?.(e);
+    l(!1), Z?.(e);
+  }, [Z, l]), be = i.useCallback((e) => {
+    if (a) {
+      h.handleKeyDownCapture(e), ce?.(e);
       return;
     }
     (e.key === " " || e.code === "Space") && (e.stopPropagation(), e.nativeEvent?.stopImmediatePropagation?.()), ce?.(e);
-  }, [g, s, ce]), Ce = l.useCallback((e) => {
-    if (f) {
+  }, [h, a, ce]), ke = i.useCallback((e) => {
+    if (d) {
       if (e.key === "ArrowDown") {
-        e.preventDefault(), e.stopPropagation(), K.current ? F.current?.highlightNextItem?.() : (i(!0), setTimeout(() => F.current?.focusFirstItem?.(), 0));
+        e.preventDefault(), e.stopPropagation(), B.current ? K.current?.highlightNextItem?.() : (l(!0), setTimeout(() => K.current?.focusFirstItem?.(), 0));
         return;
       }
       if (e.key === "ArrowUp") {
-        e.preventDefault(), e.stopPropagation(), K.current ? F.current?.highlightPreviousItem?.() : (i(!0), setTimeout(() => F.current?.focusLastItem?.(), 0));
+        e.preventDefault(), e.stopPropagation(), B.current ? K.current?.highlightPreviousItem?.() : (l(!0), setTimeout(() => K.current?.focusLastItem?.(), 0));
         return;
       }
-      if (e.key === "Enter" && K.current) {
-        e.preventDefault(), e.stopPropagation(), F.current?.selectActiveItem?.() && i(!1);
+      if (e.key === "Enter" && B.current) {
+        e.preventDefault(), e.stopPropagation(), K.current?.selectActiveItem?.() && l(!1);
         return;
       }
-      if (e.key === "Escape" && K.current) {
-        e.preventDefault(), e.stopPropagation(), i(!1);
+      if (e.key === "Escape" && B.current) {
+        e.preventDefault(), e.stopPropagation(), l(!1);
         return;
       }
     }
-    if (s && g.handleKeyDown(e)) {
+    if (a && h.handleKeyDown(e)) {
       if (e.key === "Backspace" || e.key === "Delete") {
         const n = v.current;
         if (n) {
@@ -299,63 +307,63 @@ const W = (u) => {
             target: n,
             currentTarget: n
           };
-          R?.(o), M?.(o);
+          R?.(o), F?.(o);
         }
       }
       _?.(e);
       return;
     }
-    if (s && e.key === "Enter") {
+    if (a && e.key === "Enter") {
       e.preventDefault(), _?.(e);
       return;
     }
     _?.(e);
-  }, [v, g, s, f, i, M, R, _]), Ae = D(() => {
-    if (!s) return null;
-    const e = W(y), t = (A ?? []).filter(Boolean).filter((r) => r && (r.type === "text" || r.type === "block") && Number.isFinite(r.start) && Number.isFinite(r.end) && r.start <= r.end), n = t.length ? t : it(e), o = (B ?? []).slice(), a = [];
+  }, [v, h, a, d, l, F, R, _]), qe = D(() => {
+    if (!a) return null;
+    const e = U(y), t = (N ?? []).filter(Boolean).filter((r) => r && (r.type === "text" || r.type === "block") && Number.isFinite(r.start) && Number.isFinite(r.end) && r.start <= r.end), n = t.length ? t : pt(e), o = (A ?? []).slice(), s = [];
     return n.forEach((r, S) => {
-      const c = r.value ?? e.slice(r.start, r.end);
+      const f = r.value ?? e.slice(r.start, r.end);
       if (r.type === "text") {
-        const E = typeof r.content == "string" ? r.content : typeof c == "string" ? c : e.slice(r.start, r.end);
-        E?.length && a.push(E);
+        const E = typeof r.content == "string" ? r.content : typeof f == "string" ? f : e.slice(r.start, r.end);
+        E?.length && s.push(E);
         return;
       }
-      const V = ie(c);
-      let d;
+      const V = ie(f);
+      let p;
       if (o.length) {
-        const E = o[0], ae = ie(E?.value ?? E);
-        (V === "" || ae === V) && (d = E, o.shift());
+        const E = o[0], se = ie(E?.value ?? E);
+        (V === "" || se === V) && (p = E, o.shift());
       }
-      d || (d = {
-        value: c
+      p || (p = {
+        value: f
       });
-      const O = ht(d), se = r.content && typeof r.content != "string" || typeof r.content == "string" ? r.content : O?.label ?? O?.value ?? "";
-      a.push(/* @__PURE__ */ j(l.Fragment, { children: [
+      const $ = bt(p), ae = r.content && typeof r.content != "string" || typeof r.content == "string" ? r.content : $?.label ?? $?.value ?? "";
+      s.push(/* @__PURE__ */ q(i.Fragment, { children: [
         "​",
-        /* @__PURE__ */ p("span", { className: "input__token", contentEditable: !1, "aria-data": JSON.stringify(O), style: {
+        /* @__PURE__ */ g("span", { className: "input__token", contentEditable: !1, "aria-data": JSON.stringify($), style: {
           display: "inline-flex",
           alignItems: "center",
           verticalAlign: "middle",
           userSelect: "text",
           WebkitUserSelect: "text"
-        }, children: se }),
+        }, children: ae }),
         "​"
       ] }, `${S}-${V}`));
-    }), a;
-  }, [B, s, A, y]);
-  _e(() => {
-    if (!s) return;
-    const e = $.current;
+    }), s;
+  }, [A, a, N, y]);
+  ot(() => {
+    if (!a) return;
+    const e = O.current;
     if (!e) return;
-    const t = g.takePendingSelection();
-    t && gt(e, t.start, t.end);
-  }, [g, s, Ae]);
-  const Ge = D(() => {
-    if (!s) return "plain";
-    const e = W(y), t = B?.length ?? 0, n = A?.length ?? 0;
+    const t = h.takePendingSelection();
+    t && Ct(e, t.start, t.end);
+  }, [h, a, qe]);
+  const et = D(() => {
+    if (!a) return "plain";
+    const e = U(y), t = A?.length ?? 0, n = N?.length ?? 0;
     return `${e}-${t}-${n}`;
-  }, [B, s, A, y]), ke = s ? /* @__PURE__ */ p("div", { ref: $, ...Qe, contentEditable: !C && !I, suppressContentEditableWarning: !0, "aria-disabled": C || I, onInput: (e) => {
-    g.updateEditorState($.current), f && (w.current = !0, de.current = !0, i(!0), requestAnimationFrame(() => {
+  }, [A, a, N, y]), ve = a ? /* @__PURE__ */ g("div", { ref: O, ..._e, ...de, contentEditable: !C && !I, suppressContentEditableWarning: !0, "aria-disabled": C || I, onInput: (e) => {
+    h.updateEditorState(O.current), d && (w.current = !0, ge.current = !0, l(!0), requestAnimationFrame(() => {
       w.current = !1;
     }));
     const t = e.currentTarget, n = {
@@ -363,23 +371,23 @@ const W = (u) => {
       target: t,
       currentTarget: t
     };
-    R?.(n), M?.(n);
+    R?.(n), F?.(n);
   }, onChange: (e) => {
-    g.handleChange(e);
-  }, onPaste: g.handlePaste, onFocus: ye, onBlur: Q, onKeyDownCapture: Se, onKeyDown: Ce, spellCheck: !1, children: Ae }, Ge) : u.type === "textarea" ? /* @__PURE__ */ p("textarea", { ref: m, ...ue("input__control", Oe), onFocus: ye, onBlur: Q, onKeyDownCapture: Se, onKeyDown: Ce, onInput: (e) => {
+    h.handleChange(e);
+  }, onPaste: h.handlePaste, onFocus: Ce, onBlur: Q, onKeyDownCapture: be, onKeyDown: ke, spellCheck: !1, children: qe }, et) : u.type === "textarea" ? /* @__PURE__ */ g("textarea", { ref: m, ...ue("input__control", Be), ...de, onFocus: Ce, onBlur: Q, onKeyDownCapture: be, onKeyDown: ke, onInput: (e) => {
     ne(e), R?.(e);
   }, onChange: (e) => {
-    ne(e), M?.(e);
-  }, spellCheck: !1, disabled: C || I }) : /* @__PURE__ */ p("input", { ref: m, ...ue("input__control", Oe), onFocus: ye, onBlur: Q, onKeyDownCapture: Se, onKeyDown: Ce, onInput: (e) => {
+    ne(e), F?.(e);
+  }, spellCheck: !1, disabled: C || I }) : /* @__PURE__ */ g("input", { ref: m, ...ue("input__control", Be), ...de, onFocus: Ce, onBlur: Q, onKeyDownCapture: be, onKeyDown: ke, onInput: (e) => {
     ne(e), R?.(e);
   }, onChange: (e) => {
-    ne(e), M?.(e);
-  }, spellCheck: !1, disabled: C || I }), Xe = l.useCallback((e) => {
+    ne(e), F?.(e);
+  }, spellCheck: !1, disabled: C || I }), tt = i.useCallback((e) => {
     if (C || I) return;
     const t = e.target;
-    fe.current?.contains(t) || (w.current = !0, te(), N());
-  }, [C, I, te, N]);
-  T(() => {
+    pe.current?.contains(t) || (w.current = !0, te(), z());
+  }, [C, I, te, z]);
+  P(() => {
     const e = ee.current;
     if (!e) return;
     const t = (n) => {
@@ -388,48 +396,48 @@ const W = (u) => {
     };
     return e.addEventListener("focusout", t), () => e.removeEventListener("focusout", t);
   }, [Q]);
-  const Ye = D(() => /* @__PURE__ */ j(rt, { open: Pe, modal: !1, onOpenChange: (e) => {
-    !e && w.current || i(e);
+  const nt = D(() => /* @__PURE__ */ q(it, { open: Re, modal: !1, onOpenChange: (e) => {
+    !e && w.current || l(e);
   }, children: [
-    /* @__PURE__ */ p(ot, { asChild: !0, children: /* @__PURE__ */ p("button", { type: "button", tabIndex: -1, "aria-hidden": !0, style: {
+    /* @__PURE__ */ g(lt, { asChild: !0, children: /* @__PURE__ */ g("button", { type: "button", tabIndex: -1, "aria-hidden": !0, style: {
       position: "absolute",
       inset: 0,
       opacity: 0,
       pointerEvents: "none"
     }, onMouseDown: (e) => e.preventDefault() }) }),
-    ke,
-    /* @__PURE__ */ p(st, { children: /* @__PURE__ */ p("div", { ref: fe, onPointerDownCapture: () => {
+    ve,
+    /* @__PURE__ */ g(ct, { children: /* @__PURE__ */ g("div", { ref: pe, onPointerDownCapture: () => {
       w.current = !0;
     }, onMouseDownCapture: (e) => {
       e.preventDefault(), w.current = !0;
-    }, children: /* @__PURE__ */ j(at, { color: "secondary", inputRef: v, children: [
-      be,
-      /* @__PURE__ */ j(dt, { paddingSize: "xxs", mt: -0.2, mx: -0.2, children: [
-        oe?.length === 0 && De,
-        !!oe?.length && /* @__PURE__ */ p(
-          ut,
+    }, children: /* @__PURE__ */ q(ft, { color: "secondary", inputRef: v, children: [
+      xe,
+      /* @__PURE__ */ q(yt, { paddingSize: "xxs", mt: -0.2, mx: -0.2, children: [
+        oe?.length === 0 && Pe,
+        !!oe?.length && /* @__PURE__ */ g(
+          dt,
           {
-            ref: F,
+            ref: K,
             inputRef: v,
             suggestions: oe,
-            onSuggestionSelect: Be
+            onSuggestionSelect: je
           }
         )
       ] }),
-      ve
+      we
     ] }) }) })
-  ] }), [Pe, ke, s, oe, be, ve, De, Be, v, i]);
-  return /* @__PURE__ */ j("div", { children: [
-    U && /* @__PURE__ */ p(et, { children: U }),
-    P && /* @__PURE__ */ p(tt, { children: P }),
-    /* @__PURE__ */ j("div", { ref: ee, ...ue(`input ${L?.valid ? "" : "input--not-valid"}`, G), onPointerDown: Xe, children: [
-      H && /* @__PURE__ */ p("div", { className: `input__left input__left--${ze}`, children: H }),
-      f ? Ye : ke,
-      X && /* @__PURE__ */ p("div", { className: `input__right input__right--${je}`, children: X })
+  ] }), [Re, ve, a, oe, xe, we, Pe, je, v, l]);
+  return /* @__PURE__ */ q("div", { children: [
+    T && /* @__PURE__ */ g(at, { htmlFor: fe, id: Le, children: T }),
+    L && /* @__PURE__ */ g(st, { children: L }),
+    /* @__PURE__ */ q("div", { ref: ee, ...ue(`input ${M?.valid ? "" : "input--not-valid"}`, G), onPointerDown: tt, children: [
+      H && /* @__PURE__ */ g("div", { className: `input__left input__left--${Ue}`, children: H }),
+      d ? nt : ve,
+      X && /* @__PURE__ */ g("div", { className: `input__right input__right--${He}`, children: X })
     ] }),
-    !L?.valid && L?.notValidMessage && /* @__PURE__ */ p(nt, { children: L.notValidMessage })
+    !M?.valid && M?.notValidMessage && /* @__PURE__ */ g(ut, { children: M.notValidMessage })
   ] });
-}), Mt = mt;
+}), Kt = kt;
 export {
-  Mt as Input
+  Kt as Input
 };