@mateosuarezdev/react-ui 1.0.9 → 1.0.13

package/dist/index.js

@@ -1,12 +1,12 @@
 import { jsx as f, jsxs as w, Fragment as Te } from "react/jsx-runtime";
-import { useRef as N, useEffect as j, useState as L, useSyncExternalStore as Ke, useCallback as K, useId as xe, forwardRef as H, memo as Be, useContext as ve, createContext as we } from "react";
+import { useRef as N, useEffect as I, useState as D, useSyncExternalStore as Ke, useCallback as K, useId as ve, forwardRef as H, memo as Be, useContext as xe, createContext as we } from "react";
 import { createPortal as ye } from "react-dom";
 import { clsx as Ve } from "clsx";
 import { twMerge as Xe } from "tailwind-merge";
 import { atom as Ue } from "@mateosuarezdev/atoms";
-import { appendErrors as ke, FormProvider as Ze, useForm as Pe, useFormContext as W, Controller as R } from "react-hook-form";
+import { appendErrors as ke, FormProvider as Ze, useForm as Pe, useFormContext as R, Controller as W } from "react-hook-form";
 import { validateFieldsNatively as me, toNestErrors as be } from "@hookform/resolvers";
-import { Check as Ne, Minus as Ye, DollarSign as qe, CheckIcon as J, EyeOffIcon as Ge, Eye as Je, XIcon as Qe, ChevronDownIcon as He, X as We, Plus as Re } from "lucide-react";
+import { Check as Ne, Minus as Ye, DollarSign as qe, CheckIcon as J, EyeOffIcon as Ge, Eye as Je, XIcon as Qe, ChevronDownIcon as He, X as Re, Plus as We } from "lucide-react";
 import { AnimatePresence as et, motion as tt } from "framer-motion";
 const p = (...e) => Xe(Ve(e));
 function ae(e, n = 100) {
@@ -115,7 +115,7 @@ const Q = (e) => {
   deps: i = []
 } = {}) => {
   const l = N(null);
-  return j(() => {
+  return I(() => {
     if (!l.current || !t) return;
     let s = !1;
     const a = ae(() => {
@@ -138,8 +138,8 @@ const Q = (e) => {
   enabled: r = !0,
   deps: t = []
 } = {}) => {
-  const i = N(null), [l, s] = L(null);
-  return j(() => {
+  const i = N(null), [l, s] = D(null);
+  return I(() => {
     if (!i.current || !r) return;
     let o = !1;
     const c = ae(() => {
@@ -195,7 +195,7 @@ const Q = (e) => {
       t
     ),
     children: /* @__PURE__ */ w(
-      vt,
+      xt,
       {
         size: r === "xs" ? 16 : r === "sm" ? 20 : 24,
         fill: "none",
@@ -239,7 +239,7 @@ const pe = ae(() => {
   le.set(window.innerWidth > 1024);
 });
 typeof window < "u" && (se && (window.removeEventListener("resize", pe), se = !1), window.addEventListener("resize", pe), se = !0);
-const lt = () => (j(() => {
+const lt = () => (I(() => {
   le.set(window.innerWidth > 1024);
 }, []), ot(le));
 function it(...e) {
@@ -290,10 +290,10 @@ const at = (e = !0, n) => {
   onOpen: o,
   onClose: a
 } = {}) => {
-  const [c, u] = L(!1), [d, b] = L({
+  const [c, u] = D(!1), [d, b] = D({
     width: 192,
     height: 300
-  }), m = N(null), g = N(null), x = N({
+  }), m = N(null), g = N(null), v = N({
     left: 0,
     right: 0,
     top: 0,
@@ -302,9 +302,9 @@ const at = (e = !0, n) => {
     y: 0,
     width: 0,
     height: 0
-  }), v = N(null), A = xe(), F = K(
+  }), x = N(null), A = ve(), F = K(
     (E) => {
-      const z = E ?? x.current;
+      const z = E ?? v.current;
       if (!z) return { x: 0, top: 0, bottom: void 0 };
       const _ = d.width, B = d.height;
       return ut({
@@ -318,18 +318,18 @@ const at = (e = !0, n) => {
         avoidCollisions: l
       });
     },
-    [x.current, d, n, r]
+    [v.current, d, n, r]
   );
-  j(() => {
-    if (!c || !e || (v.current = document.getElementById(e), !v.current)) return;
+  I(() => {
+    if (!c || !e || (x.current = document.getElementById(e), !x.current)) return;
     c && O();
     const E = () => {
-      v.current && (u(!1), o?.(), v.current.removeEventListener("scroll", E));
+      x.current && (u(!1), o?.(), x.current.removeEventListener("scroll", E));
     };
-    return s && v.current.addEventListener("scroll", E, {
+    return s && x.current.addEventListener("scroll", E, {
       passive: !0
     }), () => {
-      v.current && v.current.removeEventListener("scroll", E);
+      x.current && x.current.removeEventListener("scroll", E);
     };
   }, [c, e]);
   const O = () => {
@@ -340,7 +340,7 @@ const at = (e = !0, n) => {
   }, S = K(() => {
     if (!m.current) return;
     const E = m.current.getBoundingClientRect();
-    x.current = {
+    v.current = {
       left: E.left,
       right: E.right,
       top: E.top,
@@ -387,25 +387,25 @@ const at = (e = !0, n) => {
   let c = 0, u = 0;
   if (o) {
     if (i === "right") {
-      const m = e.right + l, g = e.left - n - l, x = Math.max(
+      const m = e.right + l, g = e.left - n - l, v = Math.max(
         0,
         m + n - (a.width - s)
-      ), v = Math.max(0, s - g);
-      x <= v ? (c = m, x > 0 && (c = a.width - n - s)) : (c = g, v > 0 && (c = s)), u = e.top, u + r > a.height - s && (u = a.height - r - s), u < s && (u = s);
+      ), x = Math.max(0, s - g);
+      v <= x ? (c = m, v > 0 && (c = a.width - n - s)) : (c = g, x > 0 && (c = s)), u = e.top, u + r > a.height - s && (u = a.height - r - s), u < s && (u = s);
     } else if (i === "left") {
-      const m = e.left - n - l, g = e.right + l, x = Math.max(0, s - m), v = Math.max(
+      const m = e.left - n - l, g = e.right + l, v = Math.max(0, s - m), x = Math.max(
         0,
         g + n - (a.width - s)
       );
-      x <= v ? (c = m, x > 0 && (c = s)) : (c = g, v > 0 && (c = a.width - n - s)), u = e.top, u + r > a.height - s && (u = a.height - r - s), u < s && (u = s);
+      v <= x ? (c = m, v > 0 && (c = s)) : (c = g, x > 0 && (c = a.width - n - s)), u = e.top, u + r > a.height - s && (u = a.height - r - s), u < s && (u = s);
     } else if (i === "bottom") {
       const m = a.height - e.bottom, g = e.top;
       m >= r + l ? u = e.bottom + l : g >= r + l ? u = e.top - r - l : (u = e.bottom + l, u = Math.min(u, a.height - r - s));
-      const x = a.width - e.left, v = e.right;
+      const v = a.width - e.left, x = e.right;
       if (t === "start")
-        c = e.left, c + n > a.width - s && (v >= n ? c = e.right - n : c = a.width - n - s);
+        c = e.left, c + n > a.width - s && (x >= n ? c = e.right - n : c = a.width - n - s);
       else if (t === "end")
-        c = e.right - n, c < s && (x >= n ? c = e.left : c = s);
+        c = e.right - n, c < s && (v >= n ? c = e.left : c = s);
       else {
         const A = e.left + e.width / 2 - n / 2;
         A >= s && A + n <= a.width - s ? c = A : A < s ? c = s : c = a.width - n - s;
@@ -413,11 +413,11 @@ const at = (e = !0, n) => {
     } else {
       const m = e.top, g = a.height - e.bottom;
       m >= r + l ? u = e.top - r - l : g >= r + l ? u = e.bottom + l : (u = e.top - r - l, u = Math.max(s, u));
-      const x = a.width - e.left, v = e.right;
+      const v = a.width - e.left, x = e.right;
       if (t === "start")
-        c = e.left, c + n > a.width - s && (v >= n ? c = e.right - n : c = a.width - n - s);
+        c = e.left, c + n > a.width - s && (x >= n ? c = e.right - n : c = a.width - n - s);
       else if (t === "end")
-        c = e.right - n, c < s && (x >= n ? c = e.left : c = s);
+        c = e.right - n, c < s && (v >= n ? c = e.left : c = s);
       else {
         const A = e.left + e.width / 2 - n / 2;
         A >= s && A + n <= a.width - s ? c = A : A < s ? c = s : c = a.width - n - s;
@@ -437,7 +437,7 @@ const at = (e = !0, n) => {
 };
 function ar(e) {
   const n = N(null);
-  return j(() => {
+  return I(() => {
     const r = (t) => {
       n.current && !n.current.contains(t.target) && e();
     };
@@ -452,7 +452,7 @@ function cr(e, n = {}) {
     events: t = ["mousedown", "touchstart"],
     excludeRefs: i = []
   } = n, l = N(null);
-  return j(() => {
+  return I(() => {
     if (!r) return;
     const s = (o) => {
       const a = o.target;
@@ -470,7 +470,7 @@ function cr(e, n = {}) {
   }, [e, r, t, i]), l;
 }
 function ft(e, n, r = !0) {
-  j(() => {
+  I(() => {
     if (!r) return;
     const t = (i) => {
       e.current && !e.current.contains(i.target) && n(i);
@@ -480,6 +480,21 @@ function ft(e, n, r = !0) {
     };
   }, [e, n, r]);
 }
+function ur(e, { target: n = window, event: r = "keydown", enabled: t } = {}) {
+  const i = N(e);
+  I(() => {
+    i.current = e;
+  }, [e]), I(() => {
+    if (!t) return;
+    const l = (s) => {
+      const o = s.key, a = i.current[o];
+      a && a(s);
+    };
+    return n.addEventListener(r, l), () => {
+      n.removeEventListener(r, l);
+    };
+  }, [n, r, t]);
+}
 const dt = "relative shrink-0 select-none transition outline-none duration-200 ease-out focus:ring-border-brand-light flex items-center justify-center cursor-pointer", ht = {
   xs: "text-xs px-1 gap-x-0.5 py-1",
   sm: "text-sm px-2.5 gap-x-1 py-1.5",
@@ -532,7 +547,7 @@ const dt = "relative shrink-0 select-none transition outline-none duration-200 e
   danger: "bg-red-4 text-red-9 lg:hover:bg-red-5 focus:ring-red-9 border border-transparent",
   dangersolid: "bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus:ring-base-6 border border-transparent",
   disabled: "bg-base-3 text-base-11 border border-transparent"
-}, xt = {
+}, vt = {
   enabled: "",
   disabled: "opacity-75",
   loading: ""
@@ -553,8 +568,8 @@ const dt = "relative shrink-0 select-none transition outline-none duration-200 e
     type: b = "button",
     ...m
   }, g) => {
-    const [x, v] = L(!1), A = ($) => {
-      i === "enabled" && (d ? (v(!0), l && l($), setTimeout(() => v(!1), 1e3)) : l && l($));
+    const [v, x] = D(!1), A = ($) => {
+      i === "enabled" && (d ? (x(!0), l && l($), setTimeout(() => x(!1), 1e3)) : l && l($));
     }, { ref: F, ripple: O } = at(
       a,
       e === "contrast" || c
@@ -566,7 +581,7 @@ const dt = "relative shrink-0 select-none transition outline-none duration-200 e
         type: b,
         disabled: m.disabled ? m.disabled : i === "disabled" || i === "loading",
         onMouseDown: O,
-        onClick: ($) => x ? null : A($),
+        onClick: ($) => v ? null : A($),
         className: p(
           dt,
           ht[n],
@@ -574,7 +589,7 @@ const dt = "relative shrink-0 select-none transition outline-none duration-200 e
           pt[t],
           mt[u],
           gt[e],
-          xt[i],
+          vt[i],
           m.disabled && "opacity-50",
           s
         ),
@@ -585,7 +600,7 @@ const dt = "relative shrink-0 select-none transition outline-none duration-200 e
   }
 );
 ie.displayName = "Button";
-const ur = ({ className: e }) => /* @__PURE__ */ f("div", { className: p("w-full h-px bg-base-4", e) }), vt = ({
+const fr = ({ className: e }) => /* @__PURE__ */ f("div", { className: p("w-full h-px bg-base-4", e) }), xt = ({
   children: e,
   size: n = 24,
   strokeWidth: r = 2,
@@ -757,7 +772,7 @@ function zt(e, n) {
   }
   return r;
 }
-function Dt(e, n, r) {
+function Lt(e, n, r) {
   if (r === void 0 && (r = {}), (function(t) {
     return "_def" in t && typeof t._def == "object" && "typeName" in t._def;
   })(e)) return function(t, i, l) {
@@ -796,7 +811,7 @@ function Dt(e, n, r) {
   };
   throw new Error("Invalid input: not a Zod schema");
 }
-function fr({
+function dr({
   methods: e,
   onSubmit: n,
   onError: r,
@@ -812,7 +827,7 @@ function fr({
         l
       ),
       onSubmit: e.handleSubmit(
-        (s) => n(s),
+        (s) => n(s, e),
         (s) => {
           i && console.log(s), r?.(s);
         }
@@ -821,9 +836,9 @@ function fr({
     }
   ) });
 }
-function dr(e, n) {
+function hr(e, n) {
   return Pe({
-    resolver: Dt(e),
+    resolver: Lt(e),
     defaultValues: n
   });
 }
@@ -832,7 +847,7 @@ const G = {
   checked: "bg-brand lg:hover:bg-brand-hover text-brand-text",
   uncheckedDisabled: "bg-base-3 border-base-4",
   checkedDisabled: "bg-base-3 border-base-4 text-base-10"
-}, Lt = H(
+}, Dt = H(
   ({
     checked: e = !1,
     onCheckedChange: n,
@@ -847,8 +862,8 @@ const G = {
   }, u) => {
     const d = () => {
       r || n?.(e === "indeterminate" ? !0 : !e);
-    }, b = (x) => {
-      (x.key === " " || x.key === "Enter") && (x.preventDefault(), d());
+    }, b = (v) => {
+      (v.key === " " || v.key === "Enter") && (v.preventDefault(), d());
     }, m = {
       xs: "h-3.5 w-3.5",
       sm: "h-4 w-4",
@@ -924,11 +939,11 @@ const G = {
     ] });
   }
 );
-Lt.displayName = "Checkbox";
-const Mt = {
+Dt.displayName = "Checkbox";
+const It = {
   solid: "bg-base-3 border border-base-4 drop-shadow-sm dark-theme:drop-shadow-none",
   outline: "border border-base-6"
-}, It = {
+}, Mt = {
   brand: "ring-1 ring-brand",
   solid: "ring-1 ring-base-6"
 }, ze = H(
@@ -948,11 +963,11 @@ const Mt = {
     containerClassName: b,
     className: m,
     type: g = "text",
-    value: x,
-    ...v
+    value: v,
+    ...x
   }, A) => {
-    const F = N(null), O = N(!1), [S, $] = L(!1), [E, z] = L(!1), _ = g === "password", B = _ && S ? "text" : c ? "number" : g, U = x !== "" && x !== null && x !== void 0;
-    return j(() => {
+    const F = N(null), O = N(!1), [S, $] = D(!1), [E, z] = D(!1), _ = g === "password", B = _ && S ? "text" : c ? "number" : g, U = v !== "" && v !== null && v !== void 0;
+    return I(() => {
       if (!O.current) {
         O.current = !0;
         return;
@@ -971,10 +986,10 @@ const Mt = {
         {
           className: p(
             "rounded-6 transition cursor-text relative",
-            Mt[t],
+            It[t],
             {
               "pt-[22px] pb-1.5": r === "floating",
-              [It[i]]: !o && E,
+              [Mt[i]]: !o && E,
               "bg-red-4 text-red-9": !!o,
               "ring-1 ring-red-9": !!o && E
             },
@@ -1025,11 +1040,11 @@ const Mt = {
                   },
                   m
                 ),
-                value: x,
+                value: v,
                 placeholder: l,
                 onFocus: () => z(!0),
                 onBlur: () => z(!1),
-                ...v
+                ...x
               }
             )
           ]
@@ -1072,14 +1087,14 @@ const Mt = {
   }
 );
 ze.displayName = "Input";
-const hr = ({
+const mr = ({
   name: e,
   customRead: n,
   customSet: r,
   withNullSet: t = !0,
   ...i
 }) => {
-  const { control: l } = W(), s = K(
+  const { control: l } = R(), s = K(
     (a) => n ? n(a) : a === null ? Ce(a) : a,
     [n]
   ), o = K(
@@ -1087,7 +1102,7 @@ const hr = ({
     [r]
   );
   return l ? /* @__PURE__ */ f(
-    R,
+    W,
     {
       name: e,
       control: l,
@@ -1110,7 +1125,7 @@ const hr = ({
 }, jt = {
   brand: "ring-1 ring-brand",
   solid: "ring-1 ring-base-6"
-}, De = H(
+}, Le = H(
   ({
     label: e,
     labelPosition: n = "default",
@@ -1122,7 +1137,7 @@ const hr = ({
     rows: o = 3,
     ...a
   }, c) => {
-    const [u, d] = L(!1), b = s !== "" && s !== null && s !== void 0;
+    const [u, d] = D(!1), b = s !== "" && s !== null && s !== void 0;
     return /* @__PURE__ */ w("div", { className: "relative", children: [
       n === "default" ? /* @__PURE__ */ f(
         "label",
@@ -1186,14 +1201,14 @@ const hr = ({
     ] });
   }
 );
-De.displayName = "TextArea";
-const mr = ({
+Le.displayName = "TextArea";
+const br = ({
   name: e,
   customRead: n,
   customSet: r,
   ...t
 }) => {
-  const { control: i } = W(), l = K(
+  const { control: i } = R(), l = K(
     (o) => n ? n(o) : o === null ? Ce(o) : o,
     [n]
   ), s = K(
@@ -1201,13 +1216,13 @@ const mr = ({
     [r]
   );
   return i ? /* @__PURE__ */ f(
-    R,
+    W,
     {
       name: e,
       control: i,
       render: ({ field: o, fieldState: a }) => /* @__PURE__ */ w("div", { children: [
         /* @__PURE__ */ f(
-          De,
+          Le,
           {
             value: l(o.value),
             onChange: (c) => o.onChange(s(c.target.value)),
@@ -1235,14 +1250,14 @@ const mr = ({
   maxTags: a,
   validateTag: c
 }) => {
-  const [u, d] = L(""), [b, m] = L(!1), [g, x] = L(null), v = N(null), A = N(null), F = N([]), O = t.length > 0, S = N(
+  const [u, d] = D(""), [b, m] = D(!1), [g, v] = D(null), x = N(null), A = N(null), F = N([]), O = t.length > 0, S = N(
     `taginput-${Math.random().toString(36).substr(2, 9)}`
   ).current, $ = N(
     `label-${Math.random().toString(36).substr(2, 9)}`
   ).current, E = N(
     `error-${Math.random().toString(36).substr(2, 9)}`
   ).current;
-  j(() => {
+  I(() => {
     F.current = F.current.slice(0, t.length);
   }, [t.length]);
   const z = (k) => {
@@ -1250,24 +1265,24 @@ const mr = ({
       k.preventDefault();
       const C = u.trim();
       if (a && t.length >= a) {
-        x(`Maximum of ${a} tags allowed`);
+        v(`Maximum of ${a} tags allowed`);
         return;
       }
       if (t.includes(C)) {
-        x("Tag already exists");
+        v("Tag already exists");
         return;
       }
       if (c) {
-        const I = c(C);
-        if (typeof I == "string") {
-          x(I);
+        const j = c(C);
+        if (typeof j == "string") {
+          v(j);
           return;
-        } else if (I === !1) {
-          x("Invalid tag");
+        } else if (j === !1) {
+          v("Invalid tag");
           return;
         }
       }
-      i([...t, C]), d(""), x(null), M(`Added tag ${C}`);
+      i([...t, C]), d(""), v(null), M(`Added tag ${C}`);
     } else if (k.key === "Backspace" && !u && t.length > 0) {
       const C = t[t.length - 1];
       i(t.slice(0, -1)), M(`Removed tag ${C}`);
@@ -1275,19 +1290,19 @@ const mr = ({
   }, _ = (k, C) => {
     if (k.key === "Backspace" || k.key === "Delete") {
       k.preventDefault();
-      const I = t[C], Z = [...t];
+      const j = t[C], Z = [...t];
       Z.splice(C, 1), i(Z), setTimeout(() => {
-        v.current && v.current.focus();
-      }, 0), M(`Removed tag ${I}`);
-    } else k.key === "ArrowRight" ? (k.preventDefault(), C < t.length - 1 ? F.current[C + 1]?.focus() : v.current?.focus()) : k.key === "ArrowLeft" && (k.preventDefault(), C > 0 && F.current[C - 1]?.focus());
+        x.current && x.current.focus();
+      }, 0), M(`Removed tag ${j}`);
+    } else k.key === "ArrowRight" ? (k.preventDefault(), C < t.length - 1 ? F.current[C + 1]?.focus() : x.current?.focus()) : k.key === "ArrowLeft" && (k.preventDefault(), C > 0 && F.current[C - 1]?.focus());
   }, B = (k, C) => {
-    i(t.filter((I) => I !== k)), setTimeout(() => {
-      C < t.length - 1 ? F.current[C]?.focus() : C > 0 ? F.current[C - 1]?.focus() : v.current?.focus();
+    i(t.filter((j) => j !== k)), setTimeout(() => {
+      C < t.length - 1 ? F.current[C]?.focus() : C > 0 ? F.current[C - 1]?.focus() : x.current?.focus();
     }, 0), M(`Removed tag ${k}`);
   }, U = (k) => {
-    d(k.target.value), x(null);
+    d(k.target.value), v(null);
   }, V = () => {
-    v.current && v.current.focus();
+    x.current && x.current.focus();
   }, M = (k) => {
     console.log(`Accessibility announcement: ${k}`);
   };
@@ -1356,8 +1371,8 @@ const mr = ({
                   t.map((k, C) => /* @__PURE__ */ w(
                     "div",
                     {
-                      ref: (I) => {
-                        F.current[C] = I;
+                      ref: (j) => {
+                        F.current[C] = j;
                       },
                       className: p(
                         "line-clamp-1 text-brand rounded-full px-2 text-sm flex items-center",
@@ -1369,7 +1384,7 @@ const mr = ({
                       tabIndex: 0,
                       role: "button",
                       "aria-label": `${k}, press delete or backspace to remove`,
-                      onKeyDown: (I) => _(I, C),
+                      onKeyDown: (j) => _(j, C),
                       children: [
                         k,
                         /* @__PURE__ */ f(
@@ -1390,7 +1405,7 @@ const mr = ({
                     "input",
                     {
                       id: S,
-                      ref: v,
+                      ref: x,
                       type: "text",
                       className: "flex-grow min-w-[60px] bg-transparent outline-none placeholder:text-sm placeholder:text-secondarytext",
                       value: u,
@@ -1425,10 +1440,10 @@ const mr = ({
     ),
     /* @__PURE__ */ f("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: t.length > 0 ? `Current tags: ${t.join(", ")}` : "No tags added yet" })
   ] });
-}, br = ({ name: e, ...n }) => {
-  const { control: r } = W();
+}, pr = ({ name: e, ...n }) => {
+  const { control: r } = R();
   return r ? /* @__PURE__ */ f(
-    R,
+    W,
     {
       name: e,
       control: r,
@@ -1463,7 +1478,7 @@ const mr = ({
   disabled: m = !1,
   className: g
 }) => {
-  const [x, v] = L(""), [A, F] = L(!1), [O, S] = L(-1), $ = N(null), E = N(null), z = N([]), {
+  const [v, x] = D(""), [A, F] = D(!1), [O, S] = D(-1), $ = N(null), E = N(null), z = N([]), {
     triggerRef: _,
     triggerProps: B,
     popoverRef: U,
@@ -1479,9 +1494,9 @@ const mr = ({
       F(!0), b && $.current && setTimeout(() => $.current?.focus(), 10);
     },
     onClose: () => {
-      F(!1), v(""), S(-1);
+      F(!1), x(""), S(-1);
     }
-  }), I = N(
+  }), j = N(
     `multiselect-${Math.random().toString(36).substr(2, 9)}`
   ).current, Z = N(
     `label-${Math.random().toString(36).substr(2, 9)}`
@@ -1490,11 +1505,11 @@ const mr = ({
   ).current, ee = N(
     `listbox-${Math.random().toString(36).substr(2, 9)}`
   ).current, T = o ? t.map((h) => r.find(
-    (D) => l(D) === h || l(D) === l(h)
+    (L) => l(L) === h || l(L) === l(h)
   )).filter(Boolean) : t, te = T.length > 0, X = b ? r.filter(
-    (h) => s(h).toLowerCase().includes(x.toLowerCase())
+    (h) => s(h).toLowerCase().includes(v.toLowerCase())
   ) : r;
-  j(() => {
+  I(() => {
     z.current = z.current.slice(0, X.length);
   }, [X.length]);
   const ue = (h) => o ? t.some(
@@ -1506,13 +1521,13 @@ const mr = ({
       if (ue(h)) {
         let y;
         if (o) {
-          const D = l(h);
+          const L = l(h);
           y = t.filter(
-            (P) => P !== D && l(P) !== D
+            (P) => P !== L && l(P) !== L
           );
         } else
           y = t.filter(
-            (D) => l(D) !== l(h)
+            (L) => l(L) !== l(h)
           );
         i(y), Y(`Removed ${s(h)}`);
       } else {
@@ -1527,13 +1542,13 @@ const mr = ({
     if (m) return;
     let y;
     if (o) {
-      const D = l(h);
+      const L = l(h);
       y = t.filter(
-        (P) => P !== D && l(P) !== D
+        (P) => P !== L && l(P) !== L
       );
     } else
       y = t.filter(
-        (D) => l(D) !== l(h)
+        (L) => l(L) !== l(h)
       );
     i(y), Y(`Removed ${s(h)}`);
   }, he = (h) => {
@@ -1560,14 +1575,14 @@ const mr = ({
           }
           break;
         case "Backspace":
-          if (b && x === "" && T.length > 0) {
+          if (b && v === "" && T.length > 0) {
             const y = T[T.length - 1];
             de(y);
           }
           break;
       }
-  }, Ie = (h) => {
-    v(h.target.value), S(-1);
+  }, Me = (h) => {
+    x(h.target.value), S(-1);
   }, je = () => {
     m || (b && $.current && $.current.focus(), k());
   }, Y = (h) => {
@@ -1620,7 +1635,7 @@ const mr = ({
               "label",
               {
                 id: Z,
-                htmlFor: I,
+                htmlFor: j,
                 className: p(
                   "absolute transition-all duration-200 pointer-events-none",
                   "text-base top-4 font-semibold left-3",
@@ -1674,11 +1689,11 @@ const mr = ({
                     "input",
                     {
                       ref: $,
-                      id: I,
+                      id: j,
                       type: "text",
                       className: "flex-grow min-w-[60px] bg-transparent outline-none placeholder:text-sm",
-                      value: x,
-                      onChange: Ie,
+                      value: v,
+                      onChange: Me,
                       onKeyDown: he,
                       placeholder: te ? "" : u,
                       disabled: m,
@@ -1730,8 +1745,8 @@ const mr = ({
         role: "listbox",
         id: ee,
         "aria-labelledby": Z,
-        children: X.length === 0 ? /* @__PURE__ */ f("div", { className: "px-3 py-2 text-sm text-secondarytext", children: x ? "No results found" : "No options available" }) : X.map((h, y) => {
-          const D = ue(h);
+        children: X.length === 0 ? /* @__PURE__ */ f("div", { className: "px-3 py-2 text-sm text-secondarytext", children: v ? "No results found" : "No options available" }) : X.map((h, y) => {
+          const L = ue(h);
           return /* @__PURE__ */ w(
             "div",
             {
@@ -1745,16 +1760,16 @@ const mr = ({
                 // !selected && "pl-9",
                 {
                   "bg-base-3 dark-theme:bg-base-4": y === O,
-                  "bg-brandfadedbg text-brand": D
+                  "bg-brandfadedbg text-brand": L
                 }
               ),
               onClick: () => fe(h),
               role: "option",
-              "aria-selected": D,
+              "aria-selected": L,
               onMouseEnter: () => S(y),
               children: [
                 /* @__PURE__ */ f("span", { children: s(h) }),
-                D && /* @__PURE__ */ f(J, { size: 16 })
+                L && /* @__PURE__ */ f(J, { size: 16 })
               ]
             },
             l(h)
@@ -1773,13 +1788,13 @@ const mr = ({
     ),
     /* @__PURE__ */ f("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: T.length > 0 ? `Selected: ${T.map(s).join(", ")}` : "No selections" })
   ] });
-}, pr = ({
+}, gr = ({
   name: e,
   ...n
 }) => {
-  const { control: r } = W();
+  const { control: r } = R();
   return r ? /* @__PURE__ */ f(
-    R,
+    W,
     {
       name: e,
       control: r,
@@ -1797,7 +1812,7 @@ const mr = ({
     "Form control missing for field: ",
     e
   ] }));
-}, gr = ({
+}, vr = ({
   isEditable: e,
   isDeletable: n = !0,
   createUpdateLoading: r,
@@ -1809,7 +1824,7 @@ const mr = ({
   deleteText: a = "Eliminar",
   className: c
 }) => {
-  const [u, d] = L(!1);
+  const [u, d] = D(!1);
   return /* @__PURE__ */ w("div", { className: `w-full grid grid-cols-2 gap-4 col-span-full ${c}`, children: [
     e && n ? /* @__PURE__ */ w(
       ie,
@@ -1820,7 +1835,7 @@ const mr = ({
           l ? u ? i?.() : d(!0) : i?.();
         },
         children: [
-          /* @__PURE__ */ f(We, { size: 18 }),
+          /* @__PURE__ */ f(Re, { size: 18 }),
           l && u ? "Confirmar" : a
         ]
       }
@@ -1833,7 +1848,7 @@ const mr = ({
         state: r ? "loading" : t ? "disabled" : "enabled",
         type: "submit",
         children: [
-          r ? /* @__PURE__ */ f(wt, {}) : e ? /* @__PURE__ */ f(Ne, { size: 18 }) : /* @__PURE__ */ f(Re, { size: 18 }),
+          r ? /* @__PURE__ */ f(wt, {}) : e ? /* @__PURE__ */ f(Ne, { size: 18 }) : /* @__PURE__ */ f(We, { size: 18 }),
           e ? o : s
         ]
       }
@@ -1848,7 +1863,7 @@ function xr({
   required: i,
   className: l = ""
 }) {
-  const s = xe();
+  const s = ve();
   return /* @__PURE__ */ w(
     "button",
     {
@@ -1902,16 +1917,16 @@ function xr({
     }
   );
 }
-const Le = we(null), Kt = ({
+const De = we(null), Kt = ({
   children: e,
   value: n
-}) => /* @__PURE__ */ f(Le.Provider, { value: n, children: e }), Bt = () => {
-  const e = ve(Le);
+}) => /* @__PURE__ */ f(De.Provider, { value: n, children: e }), Bt = () => {
+  const e = xe(De);
   if (!e)
     throw new Error("useAliveScope must be wrapped within AliveScopeProvider");
   return e;
-}, vr = ({ children: e }) => {
-  const [n, r] = L({}), t = N(
+}, wr = ({ children: e }) => {
+  const [n, r] = D({}), t = N(
     {}
   ), i = N(
     {}
@@ -1953,16 +1968,16 @@ const Le = we(null), Kt = ({
       ]
     }
   );
-}, Me = we(
+}, Ie = we(
   null
 ), Vt = ({
   children: e,
   value: n
-}) => /* @__PURE__ */ f(Me.Provider, { value: n, children: e }), Xt = Be(({ id: e, onMountCallbacks: n, onDropCallbacks: r, children: t, element: i }) => /* @__PURE__ */ f(
+}) => /* @__PURE__ */ f(Ie.Provider, { value: n, children: e }), Xt = Be(({ id: e, onMountCallbacks: n, onDropCallbacks: r, children: t, element: i }) => /* @__PURE__ */ f(
   Vt,
   {
     value: { keepAliveId: e, onKeepAliveMount: (o, a = { runOnFirstMount: !1 }) => {
-      j(() => {
+      I(() => {
         const c = () => {
           if (document.getElementById(e))
             o(e);
@@ -1983,7 +1998,7 @@ const Le = we(null), Kt = ({
         };
       }, []);
     }, onKeepAliveDrop: (o) => {
-      j(() => (r.current[e].push(o), () => {
+      I(() => (r.current[e].push(o), () => {
         r.current[e] = r.current[e].filter(
           (a) => a !== o
         );
@@ -1991,47 +2006,47 @@ const Le = we(null), Kt = ({
     } },
     children: ye(t, i, e)
   }
-)), wr = () => {
-  const e = ve(Me);
+)), yr = () => {
+  const e = xe(Ie);
   if (!e)
     throw new Error("useKeepAlive must be used within KeepAliveProvider");
   return e;
-}, yr = ({
+}, kr = ({
   aliveKey: e,
   children: n,
   enabled: r = !0,
   ...t
 }) => {
   const i = N(null), { getPortalElement: l } = Bt();
-  return j(() => {
+  return I(() => {
     const s = l(e, n, t.className);
     return r && i.current && i.current.replaceWith(s), () => {
     };
   }, [e, n, r, t]), /* @__PURE__ */ f("div", { ...t, ref: i, children: n });
 };
 export {
-  vr as AliveScope,
+  wr as AliveScope,
   lr as Avatar,
   ir as AvatarsGroup,
   ie as Button,
-  Lt as Checkbox,
+  Dt as Checkbox,
   nr as FocusTrap,
-  fr as Form,
-  hr as FormInput,
-  pr as FormMultiSelect,
-  gr as FormSubmit,
-  br as FormTags,
-  mr as FormTextArea,
-  vt as Icon,
+  dr as Form,
+  mr as FormInput,
+  gr as FormMultiSelect,
+  vr as FormSubmit,
+  pr as FormTags,
+  br as FormTextArea,
+  xt as Icon,
   ze as Input,
-  yr as KeepAlive,
+  kr as KeepAlive,
   Tt as MultiSelect,
   yt as Portal,
-  ur as Separator,
+  fr as Separator,
   wt as Spinner,
   xr as Switch,
   _t as Tags,
-  De as TextArea,
+  Le as TextArea,
   ut as calculatePopoverPosition,
   Q as checkOverflow,
   p as cn,
@@ -2047,10 +2062,11 @@ export {
   ar as useClickAway,
   cr as useClickAwayAdvanced,
   ft as useClickAwayWithRef,
-  wr as useKeepAlive,
+  yr as useKeepAlive,
+  ur as useKeyListener,
   lt as useLargeScreen,
   it as useMergedRef,
-  dr as useMethods,
+  hr as useMethods,
   sr as useOverflow,
   or as useOverflowState,
   ct as usePopover,