@code0-tech/pictor 0.0.0-mvp.32 → 0.0.0-mvp.33

package/dist/components/form/Input.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.0.0-mvp.32",
+  "version": "0.0.0-mvp.33",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {