@mateosuarezdev/react-ui 1.0.31 → 1.0.33

package/dist/index.js

@@ -20,7 +20,7 @@ import { appendErrors as Wr, FormProvider as Yn, useForm as Rn, useFormContext a
 import { validateFieldsNatively as nr, toNestErrors as or } from "@hookform/resolvers";
 import { createGesture as Ar } from "@mateosuarezdev/gestures";
 import { useInitialChangeEvent as In, navigate as tt } from "@mateosuarezdev/react-router";
-const N = (...e) => Cn(Mn(e));
+const k = (...e) => Cn(Mn(e));
 function Ge(e, t = 100) {
   let r = null, n = null;
   return function(...o) {
@@ -184,12 +184,12 @@ const ct = (e) => {
   {
     alt: "avatar",
     src: e,
-    className: N("rounded-full bg-base-3", St[r])
+    className: k("rounded-full bg-base-3", St[r])
   }
 ) : t ? /* @__PURE__ */ d(
   "p",
   {
-    className: N(
+    className: k(
       "rounded-full font-medium dark-theme:bg-base-3 border border-base-6 dark-theme:border-base-4 flex items-center justify-center",
       St[r],
       n
@@ -199,7 +199,7 @@ const ct = (e) => {
 ) : /* @__PURE__ */ d(
   "div",
   {
-    className: N(
+    className: k(
       "rounded-full text-2xl font-medium flex items-center justify-center",
       "bg-base-2 dark-theme:bg-base-3 border border-base-4",
       "lg:hover:bg-base-3 max-lg:active:bg-base-4 transition-colors",
@@ -232,7 +232,7 @@ function Ti({
   return /* @__PURE__ */ d(
     "div",
     {
-      className: N("flex -space-x-3 rtl:space-x-reverse", e),
+      className: k("flex -space-x-3 rtl:space-x-reverse", e),
       ...n,
       children: t
     }
@@ -307,7 +307,7 @@ const qn = (e = !0, t) => {
   const [l, u] = H(!1), [f, m] = H({
     width: 192,
     height: 300
-  }), b = $(null), h = $(null), v = $({
+  }), b = $(null), h = $(null), g = $({
     left: 0,
     right: 0,
     top: 0,
@@ -316,13 +316,13 @@ const qn = (e = !0, t) => {
     y: 0,
     width: 0,
     height: 0
-  }), k = $(null), T = Sr(), S = F(
+  }), x = $(null), T = Sr(), S = F(
     (w) => {
-      const x = w ?? v.current;
-      if (!x) return { x: 0, top: 0, bottom: void 0 };
+      const N = w ?? g.current;
+      if (!N) return { x: 0, top: 0, bottom: void 0 };
       const W = f.width, R = f.height;
       return Kn({
-        triggerRect: x,
+        triggerRect: N,
         popoverWidth: W,
         popoverHeight: R,
         align: t,
@@ -332,18 +332,18 @@ const qn = (e = !0, t) => {
         avoidCollisions: a
       });
     },
-    [v.current, f, t, r]
+    [g.current, f, t, r]
   );
   B(() => {
-    if (!l || !e || (k.current = document.getElementById(e), !k.current)) return;
+    if (!l || !e || (x.current = document.getElementById(e), !x.current)) return;
     l && _();
     const w = () => {
-      k.current && (u(!1), i?.(), k.current.removeEventListener("scroll", w));
+      x.current && (u(!1), i?.(), x.current.removeEventListener("scroll", w));
     };
-    return s && k.current.addEventListener("scroll", w, {
+    return s && x.current.addEventListener("scroll", w, {
       passive: !0
     }), () => {
-      k.current && k.current.removeEventListener("scroll", w);
+      x.current && x.current.removeEventListener("scroll", w);
     };
   }, [l, e]);
   const _ = () => {
@@ -354,7 +354,7 @@ const qn = (e = !0, t) => {
   }, P = F(() => {
     if (!b.current) return;
     const w = b.current.getBoundingClientRect();
-    v.current = {
+    g.current = {
       left: w.left,
       right: w.right,
       top: w.top,
@@ -363,7 +363,7 @@ const qn = (e = !0, t) => {
       y: w.y,
       width: w.width,
       height: w.height
-    }, u((x) => (x ? c?.() : i?.(), !x));
+    }, u((N) => (N ? c?.() : i?.(), !N));
   }, []), O = F(() => {
     u(!1), c?.();
   }, []);
@@ -401,25 +401,25 @@ const qn = (e = !0, t) => {
   let l = 0, u = 0;
   if (i) {
     if (o === "right") {
-      const b = e.right + a, h = e.left - t - a, v = Math.max(
+      const b = e.right + a, h = e.left - t - a, g = Math.max(
         0,
         b + t - (c.width - s)
-      ), k = Math.max(0, s - h);
-      v <= k ? (l = b, v > 0 && (l = c.width - t - s)) : (l = h, k > 0 && (l = s)), u = e.top, u + r > c.height - s && (u = c.height - r - s), u < s && (u = s);
+      ), x = Math.max(0, s - h);
+      g <= x ? (l = b, g > 0 && (l = c.width - t - s)) : (l = h, x > 0 && (l = s)), u = e.top, u + r > c.height - s && (u = c.height - r - s), u < s && (u = s);
     } else if (o === "left") {
-      const b = e.left - t - a, h = e.right + a, v = Math.max(0, s - b), k = Math.max(
+      const b = e.left - t - a, h = e.right + a, g = Math.max(0, s - b), x = Math.max(
         0,
         h + t - (c.width - s)
       );
-      v <= k ? (l = b, v > 0 && (l = s)) : (l = h, k > 0 && (l = c.width - t - s)), u = e.top, u + r > c.height - s && (u = c.height - r - s), u < s && (u = s);
+      g <= x ? (l = b, g > 0 && (l = s)) : (l = h, x > 0 && (l = c.width - t - s)), u = e.top, u + r > c.height - s && (u = c.height - r - s), u < s && (u = s);
     } else if (o === "bottom") {
       const b = c.height - e.bottom, h = e.top;
       b >= r + a ? u = e.bottom + a : h >= r + a ? u = e.top - r - a : (u = e.bottom + a, u = Math.min(u, c.height - r - s));
-      const v = c.width - e.left, k = e.right;
+      const g = c.width - e.left, x = e.right;
       if (n === "start")
-        l = e.left, l + t > c.width - s && (k >= t ? l = e.right - t : l = c.width - t - s);
+        l = e.left, l + t > c.width - s && (x >= t ? l = e.right - t : l = c.width - t - s);
       else if (n === "end")
-        l = e.right - t, l < s && (v >= t ? l = e.left : l = s);
+        l = e.right - t, l < s && (g >= t ? l = e.left : l = s);
       else {
         const T = e.left + e.width / 2 - t / 2;
         T >= s && T + t <= c.width - s ? l = T : T < s ? l = s : l = c.width - t - s;
@@ -427,11 +427,11 @@ const qn = (e = !0, t) => {
     } else {
       const b = e.top, h = c.height - e.bottom;
       b >= r + a ? u = e.top - r - a : h >= r + a ? u = e.bottom + a : (u = e.top - r - a, u = Math.max(s, u));
-      const v = c.width - e.left, k = e.right;
+      const g = c.width - e.left, x = e.right;
       if (n === "start")
-        l = e.left, l + t > c.width - s && (k >= t ? l = e.right - t : l = c.width - t - s);
+        l = e.left, l + t > c.width - s && (x >= t ? l = e.right - t : l = c.width - t - s);
       else if (n === "end")
-        l = e.right - t, l < s && (v >= t ? l = e.left : l = s);
+        l = e.right - t, l < s && (g >= t ? l = e.left : l = s);
       else {
         const T = e.left + e.width / 2 - t / 2;
         T >= s && T + t <= c.width - s ? l = T : T < s ? l = s : l = c.width - t - s;
@@ -582,8 +582,8 @@ const Un = "relative shrink-0 select-none transition outline-none duration-200 e
     type: m = "button",
     ...b
   }, h) => {
-    const [v, k] = H(!1), T = (O) => {
-      o === "enabled" && (f ? (k(!0), a && a(O), setTimeout(() => k(!1), 1e3)) : a && a(O));
+    const [g, x] = H(!1), T = (O) => {
+      o === "enabled" && (f ? (x(!0), a && a(O), setTimeout(() => x(!1), 1e3)) : a && a(O));
     }, { ref: S, ripple: _ } = qn(
       c,
       e === "contrast" || l
@@ -595,8 +595,8 @@ const Un = "relative shrink-0 select-none transition outline-none duration-200 e
         type: m,
         disabled: b.disabled ? b.disabled : o === "disabled" || o === "loading",
         onMouseDown: _,
-        onClick: (O) => v ? null : T(O),
-        className: N(
+        onClick: (O) => g ? null : T(O),
+        className: k(
           Un,
           Gn[t],
           Jn[r],
@@ -2716,11 +2716,11 @@ function fs(e) {
     r
   ]), me(() => {
     var m;
-    let b = (m = a.current) === null || m === void 0 ? void 0 : m.nextSibling, h = [], v = (k) => k.stopPropagation();
+    let b = (m = a.current) === null || m === void 0 ? void 0 : m.nextSibling, h = [], g = (x) => x.stopPropagation();
     for (; b && b !== s.current; )
-      h.push(b), b.addEventListener(Yt, v), b = b.nextSibling;
+      h.push(b), b.addEventListener(Yt, g), b = b.nextSibling;
     return i.current = h, () => {
-      for (let k of h) k.removeEventListener(Yt, v);
+      for (let x of h) x.removeEventListener(Yt, g);
     };
   }, [
     t
@@ -2735,8 +2735,8 @@ function fs(e) {
     i
   ]), me(() => () => {
     var m, b, h;
-    let v = (h = (b = q.getTreeNode(i)) === null || b === void 0 || (m = b.parent) === null || m === void 0 ? void 0 : m.scopeRef) !== null && h !== void 0 ? h : null;
-    (i === z || ht(i, z)) && (!v || q.getTreeNode(v)) && (z = v), q.removeTreeNode(i);
+    let g = (h = (b = q.getTreeNode(i)) === null || b === void 0 || (m = b.parent) === null || m === void 0 ? void 0 : m.scopeRef) !== null && h !== void 0 ? h : null;
+    (i === z || ht(i, z)) && (!g || q.getTreeNode(g)) && (z = g), q.removeTreeNode(i);
   }, [
     i
   ]);
@@ -3130,10 +3130,10 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
   onClose: m,
   maxHeight: b = "400px",
   minWidth: h = "200px",
-  maxWidth: v = "500px"
+  maxWidth: g = "500px"
 }) => {
   const {
-    triggerRef: k,
+    triggerRef: x,
     triggerProps: T,
     popoverRef: S,
     getPopoverPosition: _,
@@ -3155,17 +3155,17 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
   Xn(
     {
       Escape: (W) => {
-        c && (W.preventDefault(), w(), k.current?.focus());
+        c && (W.preventDefault(), w(), x.current?.focus());
       }
     },
     { enabled: P }
   ), Ir(S, (W) => {
-    !l || !k.current || !P || !W.target || k.current.contains(W.target) || w();
+    !l || !x.current || !P || !W.target || x.current.contains(W.target) || w();
   });
-  const x = _();
+  const N = _();
   return /* @__PURE__ */ y($r, { children: [
     t ? t({
-      triggerRef: k,
+      triggerRef: x,
       triggerProps: T,
       toggle: O,
       open: P,
@@ -3173,10 +3173,10 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
     }) : /* @__PURE__ */ d(
       "button",
       {
-        ref: k,
+        ref: x,
         ...T,
         onClick: O,
-        className: N(
+        className: k(
           "outline-none p-2 rounded-md transition-colors",
           "hover:bg-base-3 focus-visible:bg-base-3 focus-visible:ring-2 focus-visible:ring-brand",
           i
@@ -3206,15 +3206,15 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
         ref: S,
         style: {
           position: "fixed",
-          left: x.x,
-          top: x.top,
-          bottom: x.bottom,
+          left: N.x,
+          top: N.top,
+          bottom: N.bottom,
           maxHeight: typeof b == "number" ? `${b}px` : b,
           minWidth: typeof h == "number" ? `${h}px` : h,
-          maxWidth: typeof v == "number" ? `${v}px` : v,
+          maxWidth: typeof g == "number" ? `${g}px` : g,
           zIndex: 1e3
         },
-        className: N(
+        className: k(
           "bg-base-1 dark-theme:bg-base-2",
           "border border-base-4 rounded-6",
           "customscrollbar overflow-auto",
@@ -3229,7 +3229,7 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
   subtitle: t,
   onClose: r,
   className: n
-}) => /* @__PURE__ */ d("div", { className: N("p-4 border-b border-base-4", n), children: /* @__PURE__ */ y("div", { className: "flex items-start justify-between", children: [
+}) => /* @__PURE__ */ d("div", { className: k("p-4 border-b border-base-4", n), children: /* @__PURE__ */ y("div", { className: "flex items-start justify-between", children: [
   /* @__PURE__ */ y("div", { children: [
     /* @__PURE__ */ d("h3", { className: "font-semibold text-base-12", children: e }),
     t && /* @__PURE__ */ d("p", { className: "text-sm text-base-11 mt-1", children: t })
@@ -3245,10 +3245,10 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
 ] }) }), Di = ({
   children: e,
   className: t
-}) => /* @__PURE__ */ d("div", { className: N("p-4", t), children: e }), Pi = ({
+}) => /* @__PURE__ */ d("div", { className: k("p-4", t), children: e }), Pi = ({
   children: e,
   className: t
-}) => /* @__PURE__ */ d("div", { className: N("p-4 border-t border-base-4", t), children: e }), ys = (e, t) => {
+}) => /* @__PURE__ */ d("div", { className: k("p-4 border-t border-base-4", t), children: e }), ys = (e, t) => {
   const r = new Date(2023, 0, 1), n = [];
   for (let o = 0; o < 7; o++) {
     const a = new Date(r);
@@ -3274,51 +3274,51 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
     e || /* @__PURE__ */ new Date()
   ), b = $(null), h = fe(() => r ? new Set(
     r.map((w) => new Date(w).toDateString())
-  ) : /* @__PURE__ */ new Set(), [r]), v = fe(() => new Set(n || []), [n]), k = fe(() => {
-    const w = fo(l), x = lo(l), W = new Date(w), R = new Date(x);
+  ) : /* @__PURE__ */ new Set(), [r]), g = fe(() => new Set(n || []), [n]), x = fe(() => {
+    const w = fo(l), N = lo(l), W = new Date(w), R = new Date(N);
     if (i) {
       const E = w.getDay(), p = E === 0 ? 6 : E - 1;
       W.setDate(w.getDate() - p);
-      const D = x.getDay(), M = D === 0 ? 0 : 7 - D;
-      R.setDate(x.getDate() + M);
+      const D = N.getDay(), M = D === 0 ? 0 : 7 - D;
+      R.setDate(N.getDate() + M);
     } else
-      W.setDate(w.getDate() - w.getDay()), R.setDate(x.getDate() + (6 - x.getDay()));
+      W.setDate(w.getDate() - w.getDay()), R.setDate(N.getDate() + (6 - N.getDay()));
     return uo({ start: W, end: R });
   }, [l, i]), T = fe(
     () => ys(s ?? Ve, i),
     [s, i]
   ), S = (w) => {
-    const x = w.toDateString(), W = w.getDay();
-    return !(h.has(x) || v.has(W) || o && w < o || a && w > a);
+    const N = w.toDateString(), W = w.getDay();
+    return !(h.has(N) || g.has(W) || o && w < o || a && w > a);
   }, _ = (w) => {
     S(w) && t && t(w), m(w);
   }, P = (w) => {
     if (!f) return;
-    let x = new Date(f), W = !0, R, E;
+    let N = new Date(f), W = !0, R, E;
     switch (w.key) {
       case "ArrowUp":
-        x.setDate(x.getDate() - 7);
+        N.setDate(N.getDate() - 7);
         break;
       case "ArrowDown":
-        x.setDate(x.getDate() + 7);
+        N.setDate(N.getDate() + 7);
         break;
       case "ArrowLeft":
-        x.setDate(x.getDate() - 1);
+        N.setDate(N.getDate() - 1);
         break;
       case "ArrowRight":
-        x.setDate(x.getDate() + 1);
+        N.setDate(N.getDate() + 1);
         break;
       case "Home":
-        R = x.getDay(), x.setDate(x.getDate() - R);
+        R = N.getDay(), N.setDate(N.getDate() - R);
         break;
       case "End":
-        E = x.getDay(), x.setDate(x.getDate() + (6 - E));
+        E = N.getDay(), N.setDate(N.getDate() + (6 - E));
         break;
       case "PageUp":
-        x = w.shiftKey ? Dt(x, 12) : Dt(x, 1);
+        N = w.shiftKey ? Dt(N, 12) : Dt(N, 1);
         break;
       case "PageDown":
-        x = w.shiftKey ? at(x, 12) : at(x, 1);
+        N = w.shiftKey ? at(N, 12) : at(N, 1);
         break;
       case "Enter":
       case " ":
@@ -3327,17 +3327,17 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
       default:
         W = !1;
     }
-    W && (w.preventDefault(), x.getTime() !== f.getTime() && (m(x), fr(x, l) || u(x)));
+    W && (w.preventDefault(), N.getTime() !== f.getTime() && (m(N), fr(N, l) || u(N)));
   }, O = (w) => {
     u(
-      (x) => w === "prev" ? Dt(x, 1) : at(x, 1)
+      (N) => w === "prev" ? Dt(N, 1) : at(N, 1)
     );
   };
   return /* @__PURE__ */ y(
     "div",
     {
       ref: b,
-      className: N(
+      className: k(
         "dark-theme:bg-base-3 border border-base-5 dark-theme:border-base-4 rounded-6 px-4 pt-3 pb-4 w-full lg:w-80",
         c
       ),
@@ -3376,7 +3376,7 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
           },
           w
         )) }),
-        /* @__PURE__ */ d("div", { className: "grid grid-cols-7 gap-1 mt-4", role: "grid", children: k.map((w, x) => {
+        /* @__PURE__ */ d("div", { className: "grid grid-cols-7 gap-1 mt-4", role: "grid", children: x.map((w, N) => {
           const W = fr(w, l), R = e ? Ct(w, e) : !1, E = f && Ct(w, f), p = S(w), D = Ct(w, /* @__PURE__ */ new Date());
           return /* @__PURE__ */ d(
             "button",
@@ -3393,7 +3393,7 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
               })}${R ? ", selected" : ""}${p ? "" : ", disabled"}`,
               "aria-selected": R,
               "aria-disabled": !p,
-              className: N(
+              className: k(
                 "h-8 w-8 flex items-center outline-none justify-center rounded-6 hover:bg-base-4 text-sm relative",
                 W ? R ? "bg-brand text-brand-text hover:bg-brand" : D ? "text-base-12 ring-1 ring-base-8" : "text-base-12" : "text-base-9",
                 E && "ring-1 ring-base-6",
@@ -3401,7 +3401,7 @@ const Gt = ({ children: e, node: t }) => Mr(e, t ?? document.body), ws = ({
               ),
               children: Me(w, "d")
             },
-            x
+            N
           );
         }) })
       ]
@@ -3562,8 +3562,8 @@ const Fi = () => /* @__PURE__ */ y("div", { children: [
   }, u) => {
     const f = () => {
       r || t?.(e === "indeterminate" ? !0 : !e);
-    }, m = (v) => {
-      (v.key === " " || v.key === "Enter") && (v.preventDefault(), f());
+    }, m = (g) => {
+      (g.key === " " || g.key === "Enter") && (g.preventDefault(), f());
     }, b = {
       xs: "h-3.5 w-3.5",
       sm: "h-4 w-4",
@@ -3587,7 +3587,7 @@ const Fi = () => /* @__PURE__ */ y("div", { children: [
           disabled: r,
           onClick: f,
           onKeyDown: m,
-          className: N(
+          className: k(
             // Base styles
             "inline-flex items-center justify-center rounded-2 border border-base-4 transition-all duration-200 ease-in-out",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base-5",
@@ -3832,7 +3832,7 @@ function _i({
   return /* @__PURE__ */ d(Yn, { ...e, children: /* @__PURE__ */ d(
     "form",
     {
-      className: N(
+      className: k(
         "mt-4 lg:mt-8 grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8 relative",
         a
       ),
@@ -3893,28 +3893,28 @@ const Ls = ({
     containerClassName: m,
     className: b,
     type: h = "text",
-    value: v,
-    ...k
+    value: g,
+    ...x
   }, T) => {
-    const S = $(null), _ = $(!1), [P, O] = H(!1), [w, x] = H(!1), W = h === "password", R = W && P ? "text" : l ? "number" : h, E = v !== "" && v !== null && v !== void 0;
+    const S = $(null), _ = $(!1), [P, O] = H(!1), [w, N] = H(!1), W = h === "password", R = W && P ? "text" : l ? "number" : h, E = g !== "" && g !== null && g !== void 0;
     return B(() => {
       if (!_.current) {
         _.current = !0;
         return;
       }
       S.current && zn(S.current);
-    }, [P, S]), /* @__PURE__ */ y("div", { className: N("relative", f), children: [
+    }, [P, S]), /* @__PURE__ */ y("div", { className: k("relative", f), children: [
       e && r === "default" && /* @__PURE__ */ d(
         "label",
         {
-          className: N("font-medium ml-0.5 text-xs", i && "text-red-9"),
+          className: k("font-medium ml-0.5 text-xs", i && "text-red-9"),
           children: e
         }
       ),
       /* @__PURE__ */ y(
         "div",
         {
-          className: N(
+          className: k(
             "rounded-6 transition cursor-text relative",
             Fs[n],
             {
@@ -3929,7 +3929,7 @@ const Ls = ({
             e && r === "floating" && /* @__PURE__ */ d(
               "label",
               {
-                className: N(
+                className: k(
                   "absolute transition-all duration-200 pointer-events-none",
                   "text-sm top-[18px] font-semibold left-3",
                   {
@@ -3944,7 +3944,7 @@ const Ls = ({
               On,
               {
                 size: 16,
-                className: N(
+                className: k(
                   "absolute top-1/2 -translate-y-1/2 left-3",
                   i ? "text-red-9" : "text-base-11"
                 )
@@ -3958,7 +3958,7 @@ const Ls = ({
                   T && (typeof T == "function" ? T(p) : T.current = p), S.current = p;
                 },
                 type: R,
-                className: N(
+                className: k(
                   "w-full bg-transparent focus-visible:outline-none",
                   "placeholder:text-sm text-sm placeholder:text-base-11",
                   l || u ? "pl-9" : "pl-3",
@@ -3970,11 +3970,11 @@ const Ls = ({
                   },
                   b
                 ),
-                value: v,
+                value: g,
                 placeholder: a,
-                onFocus: () => x(!0),
-                onBlur: () => x(!1),
-                ...k
+                onFocus: () => N(!0),
+                onBlur: () => N(!1),
+                ...x
               }
             )
           ]
@@ -3991,7 +3991,7 @@ const Ls = ({
         "button",
         {
           type: "button",
-          className: N(
+          className: k(
             r === "floating" ? "absolute right-3 top-1/2 -translate-y-1/2" : "absolute right-3 top-10"
           ),
           onClick: () => {
@@ -4001,13 +4001,13 @@ const Ls = ({
             Ln,
             {
               size: 20,
-              className: N(i ? "text-red-9" : "text-base-11")
+              className: k(i ? "text-red-9" : "text-base-11")
             }
           ) : /* @__PURE__ */ d(
             Fn,
             {
               size: 20,
-              className: N(i ? "text-red-9" : "text-base-11")
+              className: k(i ? "text-red-9" : "text-base-11")
             }
           )
         }
@@ -4166,7 +4166,7 @@ const Ri = ({
 }) => /* @__PURE__ */ d(
   "div",
   {
-    className: N(
+    className: k(
       "rounded-7 dark-theme:bg-base-3",
       e ? "border-none bg-base-3" : "border border-base-6 dark-theme:border-base-4",
       t
@@ -4183,7 +4183,7 @@ const Ri = ({
   "button",
   {
     onClick: e,
-    className: N(
+    className: k(
       "w-full text-start first:rounded-t-7 last:rounded-b-7 border-b dark-theme:border-base-4",
       "last:border-none px-3 pr-2.5 py-3 dark-theme:bg-base-3 lg:hover:bg-base-4 max-lg:active:bg-base-4",
       "transition-colors hover:cursor-pointer flex items-center justify-between outline-none lg:focus-visible:ring-2 focus-visible:ring-base-6",
@@ -4209,7 +4209,7 @@ const Ri = ({
   disabled: b = !1,
   className: h
 }) => {
-  const [v, k] = H(""), [T, S] = H(!1), [_, P] = H(-1), O = $(null), w = $(null), x = $([]), {
+  const [g, x] = H(""), [T, S] = H(!1), [_, P] = H(-1), O = $(null), w = $(null), N = $([]), {
     triggerRef: W,
     triggerProps: R,
     popoverRef: E,
@@ -4225,7 +4225,7 @@ const Ri = ({
       S(!0), m && O.current && setTimeout(() => O.current?.focus(), 10);
     },
     onClose: () => {
-      S(!1), k(""), P(-1);
+      S(!1), x(""), P(-1);
     }
   }), j = $(
     `multiselect-${Math.random().toString(36).substr(2, 9)}`
@@ -4233,15 +4233,15 @@ const Ri = ({
     `label-${Math.random().toString(36).substr(2, 9)}`
   ).current, L = $(
     `error-${Math.random().toString(36).substr(2, 9)}`
-  ).current, g = $(
+  ).current, v = $(
     `listbox-${Math.random().toString(36).substr(2, 9)}`
   ).current, X = i ? n.map((C) => r.find(
     (Q) => a(Q) === C || a(Q) === a(C)
   )).filter(Boolean) : n, le = X.length > 0, G = m ? r.filter(
-    (C) => s(C).toLowerCase().includes(v.toLowerCase())
+    (C) => s(C).toLowerCase().includes(g.toLowerCase())
   ) : r;
   B(() => {
-    x.current = x.current.slice(0, G.length);
+    N.current = N.current.slice(0, G.length);
   }, [G.length]);
   const ae = (C) => i ? n.some(
     (Y) => Y === a(C) || a(Y) === a(C)
@@ -4296,24 +4296,24 @@ const Ri = ({
             M();
           else {
             const Y = _ >= G.length - 1 ? 0 : _ + 1;
-            P(Y), x.current[Y]?.scrollIntoView({ block: "nearest" });
+            P(Y), N.current[Y]?.scrollIntoView({ block: "nearest" });
           }
           break;
         case "ArrowUp":
           if (C.preventDefault(), D) {
             const Y = _ <= 0 ? G.length - 1 : _ - 1;
-            P(Y), x.current[Y]?.scrollIntoView({ block: "nearest" });
+            P(Y), N.current[Y]?.scrollIntoView({ block: "nearest" });
           }
           break;
         case "Backspace":
-          if (m && v === "" && X.length > 0) {
+          if (m && g === "" && X.length > 0) {
             const Y = X[X.length - 1];
             Je(Y);
           }
           break;
       }
   }, kn = (C) => {
-    k(C.target.value), P(-1);
+    x(C.target.value), P(-1);
   }, En = () => {
     b || (m && O.current && O.current.focus(), M());
   }, et = (C) => {
@@ -4323,12 +4323,12 @@ const Ri = ({
     !W.current || !D || !C.target || W.current.contains(C.target) || A();
   });
   const Tt = p();
-  return /* @__PURE__ */ y("div", { className: N("relative", h), children: [
+  return /* @__PURE__ */ y("div", { className: k("relative", h), children: [
     /* @__PURE__ */ y("div", { className: "relative", ref: w, children: [
       t === "default" && /* @__PURE__ */ d(
         "label",
         {
-          className: N(
+          className: k(
             "top-[18px] font-medium ml-0.5 text-xs",
             l && "text-red-9"
           ),
@@ -4340,7 +4340,7 @@ const Ri = ({
         {
           ref: W,
           ...R,
-          className: N(
+          className: k(
             "relative rounded-6 px-2 transition cursor-pointer pr-10 min-h-[48px]",
             "border border-base-4 light-theme:drop-shadow-sm dark-theme:bg-base-3",
             {
@@ -4356,7 +4356,7 @@ const Ri = ({
           role: "combobox",
           "aria-expanded": D,
           "aria-haspopup": "listbox",
-          "aria-owns": g,
+          "aria-owns": v,
           "aria-labelledby": K,
           "aria-describedby": l ? L : void 0,
           onKeyDown: Ze,
@@ -4367,7 +4367,7 @@ const Ri = ({
               {
                 id: K,
                 htmlFor: j,
-                className: N(
+                className: k(
                   "absolute transition-all duration-200 pointer-events-none",
                   "text-base top-4 font-semibold left-3",
                   {
@@ -4385,14 +4385,14 @@ const Ri = ({
             /* @__PURE__ */ y(
               "div",
               {
-                className: N("flex flex-wrap gap-2 items-center", {
+                className: k("flex flex-wrap gap-2 items-center", {
                   "mt-2.5": t === "floating"
                 }),
                 children: [
                   X.map((C) => /* @__PURE__ */ y(
                     "div",
                     {
-                      className: N(
+                      className: k(
                         "border border-base-4 dark-theme:border-base-5 dark-theme:bg-base-4 rounded-full px-2 py-1 text-sm flex items-center gap-1",
                         {
                           "bg-red-4 text-red-9": l
@@ -4423,13 +4423,13 @@ const Ri = ({
                       id: j,
                       type: "text",
                       className: "flex-grow min-w-[60px] bg-transparent outline-none placeholder:text-sm",
-                      value: v,
+                      value: g,
                       onChange: kn,
                       onKeyDown: Ze,
                       placeholder: le ? "" : u,
                       disabled: b,
                       "aria-autocomplete": "list",
-                      "aria-controls": g,
+                      "aria-controls": v,
                       autoComplete: "off"
                     }
                   ),
@@ -4443,7 +4443,7 @@ const Ri = ({
                 An,
                 {
                   size: 16,
-                  className: N("transition-transform text-base-11", {
+                  className: k("transition-transform text-base-11", {
                     "rotate-180": D
                   })
                 }
@@ -4468,23 +4468,23 @@ const Ri = ({
           bottom: Tt.bottom,
           width: w.current?.offsetWidth ?? 200
         },
-        className: N(
+        className: k(
           "bg-base-1 dark-theme:bg-base-3 border border-base-4",
           "rounded-6 shadow-lg max-h-[300px] overflow-y-auto z-50",
           "customscrollbarnohide"
         ),
         role: "listbox",
-        id: g,
+        id: v,
         "aria-labelledby": K,
-        children: G.length === 0 ? /* @__PURE__ */ d("div", { className: "px-3 py-2 text-sm text-secondarytext", children: v ? "No results found" : "No options available" }) : G.map((C, Y) => {
+        children: G.length === 0 ? /* @__PURE__ */ d("div", { className: "px-3 py-2 text-sm text-secondarytext", children: g ? "No results found" : "No options available" }) : G.map((C, Y) => {
           const Q = ae(C);
           return /* @__PURE__ */ y(
             "div",
             {
               ref: ($n) => {
-                x.current[Y] = $n;
+                N.current[Y] = $n;
               },
-              className: N(
+              className: k(
                 "px-3 py-2 text-sm cursor-pointer flex items-center justify-between",
                 // gap-x-2
                 "first:rounded-t-6 last:rounded-b-6",
@@ -4554,9 +4554,9 @@ const Ri = ({
   size: r = "6",
   descriptionClassName: n,
   className: o
-}) => /* @__PURE__ */ y("div", { className: N("text-center", o), children: [
+}) => /* @__PURE__ */ y("div", { className: k("text-center", o), children: [
   /* @__PURE__ */ d("p", { className: `${js[r]} font-medium`, children: e }),
-  t ? /* @__PURE__ */ d("p", { className: N("mt-6 text-base-11", n), children: t }) : null
+  t ? /* @__PURE__ */ d("p", { className: k("mt-6 text-base-11", n), children: t }) : null
 ] }), Ki = ({
   id: e,
   tabPage: t,
@@ -4571,7 +4571,7 @@ const Ri = ({
   showScrollbar: u = !0,
   onScroll: f
 }) => {
-  const m = $(null), b = $(null), h = $(null), v = $(null), k = $(null), [T, S] = H(!1), _ = $(null), P = $({
+  const m = $(null), b = $(null), h = $(null), g = $(null), x = $(null), [T, S] = H(!1), _ = $(null), P = $({
     startY: 0,
     // Track where the scroll position was when gesture started
     currentY: 0,
@@ -4590,66 +4590,66 @@ const Ri = ({
       ));
     }),
     []
-  ), x = F((L) => {
-    const { maxScroll: g } = P.current;
-    return L > 0 ? Math.pow(L, 0.8) : L < -g ? -g - Math.pow(-(L + g), 0.8) : L;
+  ), N = F((L) => {
+    const { maxScroll: v } = P.current;
+    return L > 0 ? Math.pow(L, 0.8) : L < -v ? -v - Math.pow(-(L + v), 0.8) : L;
   }, []), W = F(() => {
-    if (!u || !m.current || !v.current)
+    if (!u || !m.current || !g.current)
       return;
-    const { currentY: L, maxScroll: g } = P.current, V = m.current.offsetHeight, X = Math.max(
+    const { currentY: L, maxScroll: v } = P.current, V = m.current.offsetHeight, X = Math.max(
       30,
-      V / (V + g) * V
+      V / (V + v) * V
     ), le = V - X;
-    let G = -L / g * le, ae = 1;
-    L > 0 ? (G = 0, ae = 1 - L / V, v.current.style.transformOrigin = "top") : L < -g ? (G = le, ae = 1 - Math.abs(L + g) / V, v.current.style.transformOrigin = "bottom") : v.current.style.transformOrigin = "top", v.current.style.transform = `translate3d(0, ${G}px, 0) scaleY(${ae})`, v.current.style.height = `${X}px`;
+    let G = -L / v * le, ae = 1;
+    L > 0 ? (G = 0, ae = 1 - L / V, g.current.style.transformOrigin = "top") : L < -v ? (G = le, ae = 1 - Math.abs(L + v) / V, g.current.style.transformOrigin = "bottom") : g.current.style.transformOrigin = "top", g.current.style.transform = `translate3d(0, ${G}px, 0) scaleY(${ae})`, g.current.style.height = `${X}px`;
   }, [u]), R = F(
     (L) => {
       if (P.current.currentY = L, b.current && (b.current.style.transform = `translate3d(0, ${L}px, 0)`), h.current) {
-        const g = Math.max(
+        const v = Math.max(
           L - P.current.refreshThreshold,
           -P.current.refreshThreshold
         );
-        h.current.style.transform = `translate3d(0, ${g}px, 0)`;
+        h.current.style.transform = `translate3d(0, ${v}px, 0)`;
       }
       f && f(L), W();
     },
     [W]
   ), E = F(
     (L) => {
-      const g = P.current;
-      g.frameCallback && (re(g.frameCallback), g.frameCallback = null);
-      const V = performance.now(), X = g.currentY, le = L - X, G = () => {
+      const v = P.current;
+      v.frameCallback && (re(v.frameCallback), v.frameCallback = null);
+      const V = performance.now(), X = v.currentY, le = L - X, G = () => {
         const ae = performance.now() - V, Re = Math.min(ae / l, 1), Je = 1 - Math.pow(1 - Re, 3), Ze = X + le * Je;
-        R(Ze), Re >= 1 && (g.frameCallback && (re(g.frameCallback), g.frameCallback = null), R(L), L === 0 && h.current && (h.current.textContent = "Pull to refresh"));
+        R(Ze), Re >= 1 && (v.frameCallback && (re(v.frameCallback), v.frameCallback = null), R(L), L === 0 && h.current && (h.current.textContent = "Pull to refresh"));
       };
-      g.frameCallback = lt.render(G, !0);
+      v.frameCallback = lt.render(G, !0);
     },
     [R, l]
   ), p = F(
     (L) => {
-      const g = P.current;
-      g.frameCallback && (re(g.frameCallback), g.frameCallback = null);
+      const v = P.current;
+      v.frameCallback && (re(v.frameCallback), v.frameCallback = null);
       let V = L, X = Date.now();
       const le = () => {
         const G = Date.now(), ae = G - X;
-        if (X = G, V *= Math.pow(0.95, ae / 16), g.currentY += V * ae, g.currentY > 0 || g.currentY < -g.maxScroll) {
-          g.frameCallback && (re(g.frameCallback), g.frameCallback = null), E(g.currentY > 0 ? 0 : -g.maxScroll);
+        if (X = G, V *= Math.pow(0.95, ae / 16), v.currentY += V * ae, v.currentY > 0 || v.currentY < -v.maxScroll) {
+          v.frameCallback && (re(v.frameCallback), v.frameCallback = null), E(v.currentY > 0 ? 0 : -v.maxScroll);
           return;
         }
-        R(g.currentY), Math.abs(V) < 0.01 && g.frameCallback && (re(g.frameCallback), g.frameCallback = null);
+        R(v.currentY), Math.abs(V) < 0.01 && v.frameCallback && (re(v.frameCallback), v.frameCallback = null);
       };
-      g.frameCallback = lt.render(le, !0);
+      v.frameCallback = lt.render(le, !0);
     },
     [R, E]
   ), D = F(() => {
-    if (!u || !v.current) return;
-    k.current !== null && clearTimeout(k.current), requestAnimationFrame(() => {
-      v.current && (v.current.style.opacity = "1");
+    if (!u || !g.current) return;
+    x.current !== null && clearTimeout(x.current), requestAnimationFrame(() => {
+      g.current && (g.current.style.opacity = "1");
     });
-    const L = window.requestIdleCallback || ((g) => setTimeout(g, 1e3));
-    k.current = window.setTimeout(() => {
+    const L = window.requestIdleCallback || ((v) => setTimeout(v, 1e3));
+    x.current = window.setTimeout(() => {
       L(() => {
-        v.current && (v.current.style.opacity = "0"), k.current = null;
+        g.current && (g.current.style.opacity = "0"), x.current = null;
       });
     }, 1e3);
   }, [u]), M = F(
@@ -4657,28 +4657,28 @@ const Ri = ({
       if (_.current !== null && Date.now() - _.current < 50)
         return;
       _.current = Date.now();
-      const g = P.current;
-      g.isScrolling = !0, g.startY = g.currentY, g.lastTimestamp = Date.now(), g.isPullingToRefresh = g.currentY === 0, g.pullDistance = 0, g.frameCallback && (re(g.frameCallback), g.frameCallback = null), D();
+      const v = P.current;
+      v.isScrolling = !0, v.startY = v.currentY, v.lastTimestamp = Date.now(), v.isPullingToRefresh = v.currentY === 0, v.pullDistance = 0, v.frameCallback && (re(v.frameCallback), v.frameCallback = null), D();
     },
     [D]
   ), A = F(
     (L) => {
-      const g = P.current;
-      if (!g.isScrolling) return;
-      const V = x(g.startY + L.deltaY);
-      g.isPullingToRefresh && V < g.startY && (g.isPullingToRefresh = !1), R(V), a && g.isPullingToRefresh && !T && V > 0 && (g.pullDistance = V, h.current && (h.current.textContent = g.pullDistance > g.refreshThreshold ? "Release to refresh" : "Pull to refresh")), D();
+      const v = P.current;
+      if (!v.isScrolling) return;
+      const V = N(v.startY + L.deltaY);
+      v.isPullingToRefresh && V < v.startY && (v.isPullingToRefresh = !1), R(V), a && v.isPullingToRefresh && !T && V > 0 && (v.pullDistance = V, h.current && (h.current.textContent = v.pullDistance > v.refreshThreshold ? "Release to refresh" : "Pull to refresh")), D();
     },
     [
       a,
       R,
       T,
       D,
-      x
+      N
     ]
   ), j = F(
     (L) => {
-      const g = P.current;
-      g.isScrolling && (g.isScrolling = !1, a && g.isPullingToRefresh && !T && g.pullDistance > g.refreshThreshold ? K() : g.currentY > 0 || g.currentY < -g.maxScroll ? E(g.currentY > 0 ? 0 : -g.maxScroll) : p(L.velocityY), g.isPullingToRefresh = !1);
+      const v = P.current;
+      v.isScrolling && (v.isScrolling = !1, a && v.isPullingToRefresh && !T && v.pullDistance > v.refreshThreshold ? K() : v.currentY > 0 || v.currentY < -v.maxScroll ? E(v.currentY > 0 ? 0 : -v.maxScroll) : p(L.velocityY), v.isPullingToRefresh = !1);
     },
     [a, p, E, T]
   ), K = F(() => {
@@ -4705,7 +4705,7 @@ const Ri = ({
   }, [M, A, j]), B(() => {
     if (m.current)
       return w(), W(), window.addEventListener("resize", w), () => {
-        window.removeEventListener("resize", w), k.current !== null && clearTimeout(k.current);
+        window.removeEventListener("resize", w), x.current !== null && clearTimeout(x.current);
       };
   }, [w, W]), /* @__PURE__ */ y(
     ke.div,
@@ -4741,7 +4741,7 @@ const Ri = ({
         position: r ? "absolute" : "relative",
         ...s
       },
-      className: N(
+      className: k(
         "top-0 right-0 h-full w-full bg-base-1 isolate will-change-transform",
         i
       ),
@@ -4782,7 +4782,7 @@ const Ri = ({
         u && /* @__PURE__ */ d(
           "div",
           {
-            ref: v,
+            ref: g,
             style: {
               position: "absolute",
               top: 2,
@@ -4820,7 +4820,7 @@ function Xi({
     pullDistance: 0,
     refreshThreshold: 50,
     isPullingToRefresh: !1
-  }), v = F(
+  }), g = F(
     Ge(() => {
       s.current && i.current && (h.current.maxScroll = Math.max(
         0,
@@ -4828,7 +4828,7 @@ function Xi({
       ));
     }),
     []
-  ), k = F((E) => {
+  ), x = F((E) => {
     const { maxScroll: p } = h.current;
     return E > 0 ? Math.pow(E, 0.8) : E < -p ? -p - Math.pow(-(E + p), 0.8) : E;
   }, []), T = F(() => {
@@ -4857,7 +4857,7 @@ function Xi({
       const p = h.current;
       p.frameCallback && (re(p.frameCallback), p.frameCallback = null);
       const D = performance.now(), M = p.currentY, A = E - M, j = () => {
-        const K = performance.now() - D, L = Math.min(K / n, 1), g = 1 - Math.pow(1 - L, 3), V = M + A * g;
+        const K = performance.now() - D, L = Math.min(K / n, 1), v = 1 - Math.pow(1 - L, 3), V = M + A * v;
         S(V), L >= 1 && (p.frameCallback && (re(p.frameCallback), p.frameCallback = null), S(E));
       };
       p.frameCallback = lt.render(j, !0);
@@ -4899,11 +4899,11 @@ function Xi({
       p.isScrolling = !0, p.startY = p.currentY, p.lastTimestamp = Date.now(), p.isPullingToRefresh = p.currentY === 0, p.pullDistance = 0, p.frameCallback && (re(p.frameCallback), p.frameCallback = null), O();
     },
     [O]
-  ), x = F(
+  ), N = F(
     (E) => {
       const p = h.current;
       if (!p.isScrolling) return;
-      const D = k(p.startY + E.deltaY);
+      const D = x(p.startY + E.deltaY);
       p.isPullingToRefresh && D < p.startY && (p.isPullingToRefresh = !1), S(D), r && p.isPullingToRefresh && !f && D > 0 && (p.pullDistance = D), O();
     },
     [
@@ -4911,7 +4911,7 @@ function Xi({
       S,
       f,
       O,
-      k
+      x
     ]
   ), W = F(() => {
     m(!0), _(h.current.refreshThreshold), r && r().then(() => {
@@ -4932,16 +4932,16 @@ function Xi({
       passive: !0,
       direction: "y",
       onStart: w,
-      onMove: x,
+      onMove: N,
       onEnd: R
     });
     return E.init(), () => E.destroy();
-  }, [w, x, R]), B(() => {
+  }, [w, N, R]), B(() => {
     if (s.current)
-      return v(), T(), window.addEventListener("resize", v), () => {
-        window.removeEventListener("resize", v), u.current !== null && clearTimeout(u.current);
+      return g(), T(), window.addEventListener("resize", g), () => {
+        window.removeEventListener("resize", g), u.current !== null && clearTimeout(u.current);
       };
-  }, [v, T]), {
+  }, [g, T]), {
     container: {
       props: {
         id: e,
@@ -4983,8 +4983,8 @@ function Xi({
       }
     },
     refreshing: f,
-    updateMaxScroll: v,
-    rubberBandEffect: k,
+    updateMaxScroll: g,
+    rubberBandEffect: x,
     updateScrollbarPosition: T,
     setPosition: S
   };
@@ -5010,7 +5010,7 @@ const Ui = Ue(
     }, []), /* @__PURE__ */ y(
       "div",
       {
-        className: N(
+        className: k(
           "rounded-6 relative flex items-center bg-base-3 border-base-5",
           {
             "dark-theme:bg-red-4 light-theme:border-red-9": c,
@@ -5030,7 +5030,7 @@ const Ui = Ue(
               autoCorrect: "off",
               type: "search",
               autoFocus: n ? n(f) : void 0,
-              className: N(
+              className: k(
                 "w-full py-1.5 pl-10 pr-3 bg-transparent outline-none text-base-12 placeholder:text-base-11 [&::-webkit-search-cancel-button]:appearance-none",
                 c && "text-red-9 placeholder:text-red-9"
               )
@@ -5040,7 +5040,7 @@ const Ui = Ue(
             _n,
             {
               size: 20,
-              className: N("absolute left-3 text-base-11 pointer-events-none", {
+              className: k("absolute left-3 text-base-11 pointer-events-none", {
                 "text-red-9": c
               })
             }
@@ -5051,7 +5051,7 @@ const Ui = Ue(
               onClick: () => {
                 o(), u.current?.focus();
               },
-              className: N(
+              className: k(
                 "absolute right-2.5 rounded-full",
                 c ? "text-red-9" : "text-base-11"
               ),
@@ -5071,12 +5071,12 @@ const Ui = Ue(
 }) => {
   const [a, s] = H(!1), i = fe(() => e.length > t, [e]), c = fe(() => i ? a ? e : e.slice(0, t).trim() + "..." : e, [e, a, i]);
   return /* @__PURE__ */ y("div", { children: [
-    /* @__PURE__ */ d("p", { className: N("text-base-12", r === "sm" && "text-sm", n), children: c }),
+    /* @__PURE__ */ d("p", { className: k("text-base-12", r === "sm" && "text-sm", n), children: c }),
     i ? /* @__PURE__ */ d(
       "button",
       {
         onClick: () => s((l) => !l),
-        className: N("text-xs text-base-11", o),
+        className: k("text-xs text-base-11", o),
         children: a ? "Ver menos" : "Ver más"
       }
     ) : null
@@ -5172,9 +5172,9 @@ const Ui = Ue(
   // from,
   className: b
 }) => {
-  const [h, v] = H({ left: !1, right: !1 }), { ref: k } = Bn({
+  const [h, g] = H({ left: !1, right: !1 }), { ref: x } = Bn({
     onOverflow: (T) => {
-      v({ left: T.canScrollLeft, right: T.canScrollRight });
+      g({ left: T.canScrollLeft, right: T.canScrollRight });
     },
     // enabled: inView,
     trackScroll: m
@@ -5182,7 +5182,7 @@ const Ui = Ue(
   return /* @__PURE__ */ y(
     "div",
     {
-      className: N(
+      className: k(
         "relative overflow-hidden",
         we.widths[l].container,
         we.rounded[f],
@@ -5192,8 +5192,8 @@ const Ui = Ue(
         /* @__PURE__ */ d(
           "div",
           {
-            ref: k,
-            className: N(
+            ref: x,
+            className: k(
               "flex items-center border overflow-x-scroll scrollbar-hide",
               we.rounded[f],
               we.border[u]
@@ -5204,7 +5204,7 @@ const Ui = Ue(
                 "button",
                 {
                   onClick: () => r?.(T),
-                  className: N(
+                  className: k(
                     "border-r px-3 py-1 last:border-none text-nowrap shrink-0",
                     we.widths[l].item,
                     !S && "lg:hover:bg-overlay-3",
@@ -5228,7 +5228,7 @@ const Ui = Ue(
               animate: "animate",
               exit: "exit",
               onClick: () => {
-                k.current && xr({ el: k.current, direction: "left" });
+                x.current && xr({ el: x.current, direction: "left" });
               },
               className: "absolute shrink-0 left-0 px-1 h-full bg-gradient-to-r from-base-2 top-0",
               children: /* @__PURE__ */ d(Cr, { className: "text-base-13" })
@@ -5243,7 +5243,7 @@ const Ui = Ue(
               animate: "animate",
               exit: "exit",
               onClick: () => {
-                k.current && xr({ el: k.current, direction: "right" });
+                x.current && xr({ el: x.current, direction: "right" });
               },
               className: "absolute shrink-0 right-0 px-1 h-full bg-gradient-to-l from-base-2 top-0",
               children: /* @__PURE__ */ d(Dr, { className: "text-base-13" })
@@ -5254,18 +5254,18 @@ const Ui = Ue(
       ]
     }
   );
-}, Ji = ({ className: e }) => /* @__PURE__ */ d("div", { className: N("w-full h-px bg-base-4", e) }), Hs = ({
+}, Ji = ({ className: e }) => /* @__PURE__ */ d("div", { className: k("w-full h-px bg-base-4", e) }), Hs = ({
   loading: e = !0,
   wrapperClassName: t,
   spinnerClassName: r
-}) => /* @__PURE__ */ d("div", { className: N("flex justify-center", t), children: /* @__PURE__ */ d(
+}) => /* @__PURE__ */ d("div", { className: k("flex justify-center", t), children: /* @__PURE__ */ d(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "20",
     viewBox: "0 0 20 20",
-    className: N({ "animate-spin": e }, r),
+    className: k({ "animate-spin": e }, r),
     children: /* @__PURE__ */ d(
       "path",
       {
@@ -5306,7 +5306,7 @@ const Ui = Ue(
       Z,
       {
         color: "brand",
-        className: N(e && t ? "" : "col-span-2"),
+        className: k(e && t ? "" : "col-span-2"),
         state: r ? "loading" : n ? "disabled" : "enabled",
         type: "submit",
         children: [
@@ -5334,7 +5334,7 @@ const Ui = Ue(
     const u = r.current[r.current.length - 2];
     return t && console.log("prev modal id", u), u;
   }, [t]), s = F(
-    (u, f = "modal") => {
+    (u, f = "modal", m) => {
       Lt(
         u,
         {
@@ -5343,7 +5343,8 @@ const Ui = Ue(
         },
         {
           ease: [0.32, 0.72, 0, 1],
-          duration: 0.3
+          duration: 0.3,
+          delay: m ? 0.2 : void 0
         }
       );
     },
@@ -5377,24 +5378,25 @@ const Ui = Ue(
 }, tl = ({
   id: e,
   prevPath: t,
-  title: r,
-  description: n,
-  showHeader: o = !0,
-  mode: a,
-  onReplace: s,
-  className: i,
-  contentClassName: c,
-  children: l
+  withDelay: r,
+  title: n,
+  description: o,
+  showHeader: a = !0,
+  mode: s,
+  onReplace: i,
+  className: c,
+  contentClassName: l,
+  children: u
   // ...others
 }) => {
-  const u = In(), f = yt(), m = $(null), b = Bs(), h = fe(() => a === "modal" || f, [a, f]);
+  const f = In(), m = yt(), b = $(null), h = Bs(), g = fe(() => s === "modal" || m, [s, m]);
   return B(() => {
-    b.add(e);
-    const v = b.getPrevId();
-    if (!v || (m.current = document.getElementById(v), !m.current)) return;
-    v && b.animateParentModal(
-      m.current,
-      h ? "modal" : "sheet"
+    h.add(e);
+    const x = h.getPrevId();
+    if (!x || (b.current = document.getElementById(x), !b.current)) return;
+    x && h.animateParentModal(
+      b.current,
+      g ? "modal" : "sheet"
     );
     //! cleanups not running on new router system
     //! IDK WHY
@@ -5402,21 +5404,29 @@ const Ui = Ue(
       console.log("IS THIS CLEANUP RUNNING?");
     };
     //! NOT RUNNING...
-  }, [f]), Tr(() => () => b.remove(e), []), /* @__PURE__ */ y(Gt, { children: [
+  }, [m]), Tr(() => () => h.remove(e), []), /* @__PURE__ */ y(Gt, { children: [
     /* @__PURE__ */ d(
       ke.div,
       {
         initial: { opacity: 0 },
         animate: {
-          opacity: 1
+          opacity: 1,
+          transition: {
+            ease: [0.32, 0.72, 0, 1],
+            duration: 0.3,
+            delay: r ? 0.2 : void 0
+          }
         },
-        exit: { opacity: 0 },
-        transition: {
-          ease: [0.32, 0.72, 0, 1],
-          duration: 0.3
+        exit: {
+          opacity: 0,
+          transition: {
+            ease: [0.32, 0.72, 0, 1],
+            duration: 0.3,
+            delay: r ? 0.2 : void 0
+          }
         },
         onClick: () => {
-          u ? tt.back() : tt.replace(s ?? t);
+          f ? tt.back() : tt.replace(i ?? t);
         },
         className: "bg-black/40 absolute w-full h-full left-0 top-0 z-[500]"
       }
@@ -5426,49 +5436,55 @@ const Ui = Ue(
       {
         id: e,
         initial: {
-          scale: h ? 0.8 : void 0,
-          y: h ? void 0 : window.innerHeight
+          scale: g ? 0.8 : void 0,
+          y: g ? void 0 : window.innerHeight
         },
         animate: {
           scale: 1,
-          y: h ? void 0 : 0
+          y: g ? void 0 : 0,
+          transition: {
+            ease: [0.32, 0.72, 0, 1],
+            duration: 0.3,
+            delay: r ? 0.2 : void 0
+          }
         },
         exit: {
-          scale: h ? 0.8 : void 0,
-          opacity: h ? 0 : void 0,
-          y: h ? void 0 : window.innerHeight
-        },
-        transition: {
-          ease: [0.32, 0.72, 0, 1],
-          duration: 0.3
+          scale: g ? 0.8 : void 0,
+          opacity: g ? 0 : void 0,
+          y: g ? void 0 : window.innerHeight,
+          transition: {
+            ease: [0.32, 0.72, 0, 1],
+            duration: 0.3,
+            delay: r ? 0.2 : void 0
+          }
         },
         style: {
           left: "50%",
           translateX: "-50%",
-          bottom: h ? "50%" : 0,
-          translateY: h ? "50%" : 0,
-          height: h ? "65%" : "95%"
+          bottom: g ? "50%" : 0,
+          translateY: g ? "50%" : 0,
+          height: g ? "65%" : "95%"
         },
-        onAnimationStart: (v) => {
-          (v?.scale === 0.8 || v?.y > 50) && m.current && b.restoreParentModal(m.current);
+        onAnimationStart: (x) => {
+          (x?.scale === 0.8 || x?.y > 50) && b.current && h.restoreParentModal(b.current);
         },
-        className: N(
+        className: k(
           "bg-base-1 absolute w-full lg:max-w-[600px] h-full rounded-6 overflow-hidden z-[500] flex flex-col",
-          !h && "rounded-b-none",
-          i
+          !g && "rounded-b-none",
+          c
         ),
         children: [
-          o && /* @__PURE__ */ y("div", { className: "flex items-start justify-between p-4 border-b border-base-3", children: [
+          a && /* @__PURE__ */ y("div", { className: "flex items-start justify-between p-4 border-b border-base-3", children: [
             /* @__PURE__ */ y("div", { children: [
-              r && /* @__PURE__ */ d("p", { className: "font-medium text-lg", children: r }),
-              n && /* @__PURE__ */ d("p", { className: "text-base-11 text-xs", children: n })
+              n && /* @__PURE__ */ d("p", { className: "font-medium text-lg", children: n }),
+              o && /* @__PURE__ */ d("p", { className: "text-base-11 text-xs", children: o })
             ] }),
             /* @__PURE__ */ d(
               Z,
               {
                 size: "xs",
                 onClick: () => {
-                  u ? tt.back() : tt.replace(s ?? t);
+                  f ? tt.back() : tt.replace(i ?? t);
                 },
                 children: /* @__PURE__ */ d(gt, { size: 20 })
               }
@@ -5478,8 +5494,8 @@ const Ui = Ue(
             "div",
             {
               id: `${e}-content`,
-              className: N("grow customscrollbar p-4 pb-6", c),
-              children: l
+              className: k("grow customscrollbar p-4 pb-6", l),
+              children: u
             }
           )
         ]
@@ -5509,7 +5525,7 @@ function Vs({
       onClick: () => {
         r || t(!e);
       },
-      className: N(
+      className: k(
         `relative inline-flex h-[28px] w-[48px] items-center rounded-full
         transition-colors duration-200 ease-in-out
         focus-visible:outline-none focus-visible:ring-1
@@ -5522,7 +5538,7 @@ function Vs({
         /* @__PURE__ */ d(
           "span",
           {
-            className: N(
+            className: k(
               `inline-block h-6 w-6 transform rounded-full
           transition-transform duration-200 ease-in-out
           shadow`,
@@ -5561,7 +5577,7 @@ const qs = ({
   maxTags: c,
   validateTag: l
 }) => {
-  const [u, f] = H(""), [m, b] = H(!1), [h, v] = H(null), k = $(null), T = $(null), S = $([]), _ = n.length > 0, P = $(
+  const [u, f] = H(""), [m, b] = H(!1), [h, g] = H(null), x = $(null), T = $(null), S = $([]), _ = n.length > 0, P = $(
     `taginput-${Math.random().toString(36).substr(2, 9)}`
   ).current, O = $(
     `label-${Math.random().toString(36).substr(2, 9)}`
@@ -5571,29 +5587,29 @@ const qs = ({
   B(() => {
     S.current = S.current.slice(0, n.length);
   }, [n.length]);
-  const x = (M) => {
+  const N = (M) => {
     if (M.key === "Enter" && u.trim()) {
       M.preventDefault();
       const A = u.trim();
       if (c && n.length >= c) {
-        v(`Maximum of ${c} tags allowed`);
+        g(`Maximum of ${c} tags allowed`);
         return;
       }
       if (n.includes(A)) {
-        v("Tag already exists");
+        g("Tag already exists");
         return;
       }
       if (l) {
         const j = l(A);
         if (typeof j == "string") {
-          v(j);
+          g(j);
           return;
         } else if (j === !1) {
-          v("Invalid tag");
+          g("Invalid tag");
           return;
         }
       }
-      o([...n, A]), f(""), v(null), D(`Added tag ${A}`);
+      o([...n, A]), f(""), g(null), D(`Added tag ${A}`);
     } else if (M.key === "Backspace" && !u && n.length > 0) {
       const A = n[n.length - 1];
       o(n.slice(0, -1)), D(`Removed tag ${A}`);
@@ -5603,17 +5619,17 @@ const qs = ({
       M.preventDefault();
       const j = n[A], K = [...n];
       K.splice(A, 1), o(K), setTimeout(() => {
-        k.current && k.current.focus();
+        x.current && x.current.focus();
       }, 0), D(`Removed tag ${j}`);
-    } else M.key === "ArrowRight" ? (M.preventDefault(), A < n.length - 1 ? S.current[A + 1]?.focus() : k.current?.focus()) : M.key === "ArrowLeft" && (M.preventDefault(), A > 0 && S.current[A - 1]?.focus());
+    } else M.key === "ArrowRight" ? (M.preventDefault(), A < n.length - 1 ? S.current[A + 1]?.focus() : x.current?.focus()) : M.key === "ArrowLeft" && (M.preventDefault(), A > 0 && S.current[A - 1]?.focus());
   }, R = (M, A) => {
     o(n.filter((j) => j !== M)), setTimeout(() => {
-      A < n.length - 1 ? S.current[A]?.focus() : A > 0 ? S.current[A - 1]?.focus() : k.current?.focus();
+      A < n.length - 1 ? S.current[A]?.focus() : A > 0 ? S.current[A - 1]?.focus() : x.current?.focus();
     }, 0), D(`Removed tag ${M}`);
   }, E = (M) => {
-    f(M.target.value), v(null);
+    f(M.target.value), g(null);
   }, p = () => {
-    k.current && k.current.focus();
+    x.current && x.current.focus();
   }, D = (M) => {
     console.log(`Accessibility announcement: ${M}`);
   };
@@ -5624,7 +5640,7 @@ const qs = ({
         {
           id: O,
           htmlFor: P,
-          className: N("text-base top-4 font-semibold left-3", {
+          className: k("text-base top-4 font-semibold left-3", {
             "text-sm top-2 left-2": m || _ || i,
             "text-red-9": !!s
           }),
@@ -5638,7 +5654,7 @@ const qs = ({
       /* @__PURE__ */ y(
         "div",
         {
-          className: N("rounded-6 px-2 transition cursor-text pr-10", {
+          className: k("rounded-6 px-2 transition cursor-text pr-10", {
             "bg-base-3": r === "solid",
             "border border-uielborder focus-visible:border-transparent": r === "outline",
             "py-3": t === "default",
@@ -5657,7 +5673,7 @@ const qs = ({
               {
                 id: O,
                 htmlFor: P,
-                className: N(
+                className: k(
                   "absolute transition-all duration-200 pointer-events-none",
                   "text-base top-4 font-semibold left-3",
                   {
@@ -5675,7 +5691,7 @@ const qs = ({
             /* @__PURE__ */ y(
               "div",
               {
-                className: N("flex flex-wrap gap-1 items-center", {
+                className: k("flex flex-wrap gap-1 items-center", {
                   "mt-2.5": t === "floating"
                 }),
                 children: [
@@ -5685,7 +5701,7 @@ const qs = ({
                       ref: (j) => {
                         S.current[A] = j;
                       },
-                      className: N(
+                      className: k(
                         "line-clamp-1 text-brand rounded-full px-2 text-sm flex items-center",
                         {
                           "bg-brandfadedbg text-brand": !s && !h,
@@ -5716,12 +5732,12 @@ const qs = ({
                     "input",
                     {
                       id: P,
-                      ref: k,
+                      ref: x,
                       type: "text",
                       className: "flex-grow min-w-[60px] bg-transparent outline-none placeholder:text-sm placeholder:text-secondarytext",
                       value: u,
                       onChange: E,
-                      onKeyDown: x,
+                      onKeyDown: N,
                       onFocus: () => b(!0),
                       onBlur: () => b(!1),
                       enterKeyHint: "enter",
@@ -5792,7 +5808,7 @@ const qs = ({
       t === "default" ? /* @__PURE__ */ d(
         "label",
         {
-          className: N(
+          className: k(
             "top-[18px] font-medium ml-0.5 text-xs",
             n && "text-red-9"
           ),
@@ -5802,14 +5818,14 @@ const qs = ({
       /* @__PURE__ */ y(
         "div",
         {
-          className: N(t === "default" ? "p-0" : "pt-5 pb-2", {
+          className: k(t === "default" ? "p-0" : "pt-5 pb-2", {
             "bg-red-4 text-red-9": !!n
           }),
           children: [
             t === "floating" && /* @__PURE__ */ d(
               "label",
               {
-                className: N(
+                className: k(
                   "absolute transition-all duration-200 pointer-events-none",
                   "text-sm top-2.5 font-semibold left-2.5",
                   {
@@ -5824,7 +5840,7 @@ const qs = ({
               "textarea",
               {
                 ref: l,
-                className: N(
+                className: k(
                   !n && u && Ks[o],
                   "bg-base-3 border border-base-4 light-theme:drop-shadow-sm rounded-6 w-full focus-visible:outline-none customscrollbarnohide",
                   "placeholder:text-base-11 text-sm",
@@ -6271,7 +6287,7 @@ const oi = [
     "div",
     {
       ref: n,
-      className: N("p-2 rounded-xl mt-2", {
+      className: k("p-2 rounded-xl mt-2", {
         "border border-uielborder": t,
         "bg-uielbg border border-transparent": !t
       }),
@@ -6373,7 +6389,7 @@ export {
   Fi as TimePicker,
   Kn as calculatePopoverPosition,
   ct as checkOverflow,
-  N as cn,
+  k as cn,
   yi as debounce,
   Ni as extractDirtyData,
   jn as generateInitials,