prometeo-design-system 3.1.1 → 3.1.2

package/dist/RecurrentDatePicker.es.js

@@ -1,7 +1,7 @@
 import { j as r } from "./jsx-runtime-DKDX3adD.js";
 import O, { useMemo as D, memo as b, useRef as M, useCallback as g, useState as L, useEffect as W } from "react";
 import { D as I } from "./DatePicker-D1EwMGIN.js";
-import { S as f } from "./Select-mdLPyy7g.js";
+import { S as f } from "./Select-DW30oGym.js";
 import { I as R } from "./Input-EkMrxcNX.js";
 import _ from "./CheckBox.es.js";
 import { c as p } from "./cn-B6yFEsav.js";

package/dist/{Select-mdLPyy7g.js → Select-DW30oGym.js}

@@ -1,4 +1,4 @@
-import { j as s } from "./jsx-runtime-DKDX3adD.js";
+import { j as a } from "./jsx-runtime-DKDX3adD.js";
 import { c as f } from "./cn-B6yFEsav.js";
 import Ne, { memo as Z, useState as je, useRef as ce, useMemo as oe, useCallback as U, useEffect as ve, useImperativeHandle as Qe } from "react";
 import Xe from "./Spinner.es.js";
@@ -28,7 +28,7 @@ const at = {
 }, Fe = {
   icon: " text-neutral-default-disabled",
   container: " border-neutral-strong-default text-neutral-default-disabled"
-}, Ve = ({ id: e, label: n, onRemove: m, className: i, disabled: u, variant: y = "default", tabIndex: p }) => /* @__PURE__ */ s.jsxs(
+}, Ve = ({ id: e, label: n, onRemove: m, className: i, disabled: u, variant: y = "default", tabIndex: p }) => /* @__PURE__ */ a.jsxs(
   "div",
   {
     tabIndex: p,
@@ -38,8 +38,8 @@ const at = {
       u && Fe.container
     ),
     children: [
-      /* @__PURE__ */ s.jsx("span", { className: "truncate w-max ", children: n }),
-      m && /* @__PURE__ */ s.jsx(
+      /* @__PURE__ */ a.jsx("span", { className: "truncate w-max ", children: n }),
+      m && /* @__PURE__ */ a.jsx(
         "button",
         {
           onMouseDown: (D) => {
@@ -52,7 +52,7 @@ const at = {
           ),
           type: "button",
           tabIndex: p,
-          children: /* @__PURE__ */ s.jsx(rt, { size: 18, className: f(u && Fe.icon) })
+          children: /* @__PURE__ */ a.jsx(rt, { size: 18, className: f(u && Fe.icon) })
         }
       )
     ]
@@ -88,8 +88,8 @@ const qe = (e, n) => {
   if (u.length > i.length) return !1;
   const D = Math.floor(u.length * m);
   if (D <= 0) return !1;
-  const g = (b, k) => {
-    const I = b.length, W = k.length;
+  const g = (b, E) => {
+    const I = b.length, W = E.length;
     if (I === 0) return W;
     if (W === 0) return I;
     const A = new Array(W + 1);
@@ -98,15 +98,15 @@ const qe = (e, n) => {
       let S = v - 1;
       A[0] = v;
       for (let z = 1; z <= W; z++) {
-        const se = A[z], K = b.charCodeAt(v - 1) === k.charCodeAt(z - 1) ? 0 : 1, V = A[z] + 1, M = A[z - 1] + 1, N = S + K;
+        const se = A[z], K = b.charCodeAt(v - 1) === E.charCodeAt(z - 1) ? 0 : 1, V = A[z] + 1, M = A[z - 1] + 1, N = S + K;
         A[z] = V < M ? V < N ? V : N : M < N ? M : N, S = se;
       }
     }
     return A[W];
   };
   for (let b = 0; b <= i.length - u.length; b++) {
-    const k = i.slice(b, b + u.length);
-    if (g(k, u) <= D) return !0;
+    const E = i.slice(b, b + u.length);
+    if (g(E, u) <= D) return !0;
   }
   return !1;
 }, ut = (e) => {
@@ -170,7 +170,7 @@ const qe = (e, n) => {
   )
 };
 function ct(e) {
-  const [n, m] = je(!1), [i, u] = je([]), [y, p] = je(""), D = ce(null), g = ce(null), b = ce(null), k = ce(null), I = ce(
+  const [n, m] = je(!1), [i, u] = je([]), [y, p] = je(""), D = ce(null), g = ce(null), b = ce(null), E = ce(null), I = ce(
     () => {
     }
   ), W = ce(null), A = ce(/* @__PURE__ */ new Set()), {
@@ -182,7 +182,7 @@ function ct(e) {
     controls: V,
     className: M,
     placeholder: N,
-    optionValue: E,
+    optionValue: k,
     optionLabel: de,
     renderOption: J,
     renderOptionGroupHeader: fe,
@@ -194,7 +194,7 @@ function ct(e) {
     dropdownOptions: O,
     helperComponent: ee,
     errorComponent: Ce,
-    onRemoveOption: Ee,
+    onRemoveOption: ke,
     onOptionClick: X,
     onClose: Se,
     onClear: me,
@@ -206,7 +206,7 @@ function ct(e) {
     displayMode: we = "compact",
     labelVariant: ie = "default",
     disableOpenOnFocus: ze = !1,
-    emptyMessage: ke = "No hay opciones disponibles"
+    emptyMessage: Ee = "No hay opciones disponibles"
   } = e, { ref: Oe } = et(), { bind: ne, ref: Me } = Ze({
     axis: "x",
     cursor: { idle: "default", dragging: "grabbing" }
@@ -223,35 +223,35 @@ function ct(e) {
         active: "absolute top-0 -translate-y-1/2 left-3  px-1 prometeo-fonts-body-small",
         default: "absolute top-1/2 -translate-y-1/2 "
       }
-    }, a = n || pe ? "active" : "default";
-    return t[ie][a];
+    }, s = n || pe ? "active" : "default";
+    return t[ie][s];
   }, T = U(
     (t) => ({
-      id: G(t, E),
-      value: G(t, E),
+      id: G(t, k),
+      value: G(t, k),
       label: G(t, de)
     }),
-    [E, de]
+    [k, de]
   ), Y = oe(() => ut(K), [K]), ge = oe(
     () => Y.map(T),
     [Y, T]
   ), r = oe(() => {
     const t = [];
     if (e.multiple)
-      e.value?.forEach((a) => {
+      e.value?.forEach((s) => {
         const l = Y?.find(
-          (h) => G(h, E) === a
+          (h) => G(h, k) === s
         );
         l && t.push(l);
       });
     else {
-      const a = Y?.find(
-        (l) => G(l, E) === e.value
+      const s = Y?.find(
+        (l) => G(l, k) === e.value
       );
-      a && t.push(a);
+      s && t.push(s);
     }
     return t;
-  }, [e.value, E, Y, e.multiple]), o = oe(
+  }, [e.value, k, Y, e.multiple]), o = oe(
     () => r.map(T),
     [r, T]
   ), c = oe(
@@ -259,16 +259,16 @@ function ct(e) {
     [o]
   ), d = oe(() => {
     const t = [];
-    return K.forEach((a, l) => {
-      const h = a, H = typeof h == "object" ? h?.options : [];
+    return K.forEach((s, l) => {
+      const h = s, H = typeof h == "object" ? h?.options : [];
       if (Array.isArray(H) && H.length > 0) {
-        const $ = h.label, P = G(a, E), le = `__group-${String(P ?? l)}`, xe = {
+        const $ = h.label, P = G(s, k), le = `__group-${String(P ?? l)}`, xe = {
           id: le,
           value: le,
           label: typeof $ == "string" ? $ : String(P ?? `Grupo ${l + 1}`),
           isGroupHeader: !0,
           groupLabelNode: $,
-          originalOption: a,
+          originalOption: s,
           groupData: {
             groupOptions: H
           }
@@ -277,10 +277,10 @@ function ct(e) {
           J ? t.push(ye) : t.push(T(ye));
         });
       } else
-        J ? t.push(a) : t.push(T(a));
+        J ? t.push(s) : t.push(T(s));
     }), t;
-  }, [K, E, J, T]), w = U(
-    (t, a) => {
+  }, [K, k, J, T]), w = U(
+    (t, s) => {
       if (!t || t.length === 0) return;
       const l = t.map(
         (C) => T(C)
@@ -288,7 +288,7 @@ function ct(e) {
       if (!e.multiple) {
         const C = l[0];
         if (!C) return;
-        const j = c.has(C.id), B = a ?? "toggle";
+        const j = c.has(C.id), B = s ?? "toggle";
         let Pe;
         B === "select" || B === "toggle" && !j ? Pe = C : Pe = void 0, e.onChange?.(Pe, S);
         return;
@@ -300,7 +300,7 @@ function ct(e) {
       });
       const $ = new Set(H.map((C) => C.id)), P = new Set(l.map((C) => C.id)), le = l.every(
         (C) => $.has(C.id)
-      ), xe = a ?? "toggle", ye = xe === "select" || xe === "toggle" && !le;
+      ), xe = s ?? "toggle", ye = xe === "select" || xe === "toggle" && !le;
       let _;
       if (!ye)
         _ = H.filter((C) => !P.has(C.id));
@@ -330,8 +330,8 @@ function ct(e) {
     if (!e.multiple)
       e.onChange?.(t, S);
     else {
-      const a = e.value || [], l = [], h = a.includes(t.value);
-      a.forEach(($) => {
+      const s = e.value || [], l = [], h = s.includes(t.value);
+      s.forEach(($) => {
         const P = ge.find(
           (le) => le.value === $
         );
@@ -342,31 +342,37 @@ function ct(e) {
     }
   };
   const x = U(
-    (t, a = !1) => {
-      X?.(t, S), I.current?.(t), a && (m(!1), Se?.());
+    (t, s = !1) => {
+      X?.(t, S), I.current?.(t), s && (m(!1), Se?.());
     },
     [X, Se, S]
   ), R = (t) => {
-    t.preventDefault(), t.stopPropagation(), t.target.blur(), me?.(), e.multiple ? e.onChange?.([], S) : e.onChange?.(void 0, S);
+    if (t.preventDefault(), t.stopPropagation(), t.target.blur(), me?.(), e.multiple) {
+      const s = e.onChange;
+      s?.([], S);
+    } else {
+      const s = e.onChange;
+      s?.(void 0, S);
+    }
   }, q = U(
     (t) => {
       e.multiple || e.onChange?.(void 0, S);
-      const a = Y.find(
-        (h) => G(h, E) === t
+      const s = Y.find(
+        (h) => G(h, k) === t
       );
-      if (!a) return;
-      const l = T(a);
-      X?.(l, S), I.current?.(l), Ee?.(a);
+      if (!s) return;
+      const l = T(s);
+      X?.(l, S), I.current?.(l), ke?.(s);
     },
     [
       X,
-      Ee,
+      ke,
       Y,
       S,
       e.multiple,
       e.onChange,
       T,
-      E
+      k
     ]
   ), re = U(
     (t) => {
@@ -376,17 +382,17 @@ function ct(e) {
   );
   ve(() => {
     if (!n) return;
-    const t = (a) => {
-      const l = a.target;
-      if (a.type === "mousedown") {
+    const t = (s) => {
+      const l = s.target;
+      if (s.type === "mousedown") {
         if (D.current?.contains(l) || g.current?.contains(l)) return;
         m(!1);
       }
-      if (a.type === "scroll") {
+      if (s.type === "scroll") {
         if (g.current?.contains(l)) return;
         m(!1);
       }
-      a.type === "resize" && m(!1);
+      s.type === "resize" && m(!1);
     };
     return document.addEventListener("mousedown", t), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t, !0), () => {
       document.removeEventListener("mousedown", t), window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t, !0);
@@ -425,7 +431,7 @@ function ct(e) {
       b.current?.focus();
     }, 10));
   };
-  return /* @__PURE__ */ s.jsxs(
+  return /* @__PURE__ */ a.jsxs(
     "div",
     {
       className: f("relative bg-inherit select-none w-full", M),
@@ -433,8 +439,8 @@ function ct(e) {
       draggable: !1,
       style: Le,
       children: [
-        /* @__PURE__ */ s.jsxs("div", { className: f("relative bg-inherit ", Q), children: [
-          /* @__PURE__ */ s.jsx(
+        /* @__PURE__ */ a.jsxs("div", { className: f("relative bg-inherit ", Q), children: [
+          /* @__PURE__ */ a.jsx(
             "label",
             {
               htmlFor: v,
@@ -449,13 +455,13 @@ function ct(e) {
               children: z
             }
           ),
-          /* @__PURE__ */ s.jsxs(
+          /* @__PURE__ */ a.jsxs(
             "div",
             {
               id: v,
               tabIndex: 0,
               role: "button",
-              ref: k,
+              ref: E,
               onFocus: be,
               onKeyDown: ue,
               onClick: (t) => {
@@ -471,7 +477,7 @@ function ct(e) {
                 He
               ),
               children: [
-                /* @__PURE__ */ s.jsx(
+                /* @__PURE__ */ a.jsx(
                   "div",
                   {
                     className: f(
@@ -487,7 +493,7 @@ function ct(e) {
                     children: De ? Ne.createElement(
                       Z(
                         De,
-                        (t, a) => t.disabled === a.disabled && t.multiple === a.multiple
+                        (t, s) => t.disabled === s.disabled && t.multiple === s.multiple
                       ),
                       {
                         disabled: te,
@@ -496,7 +502,7 @@ function ct(e) {
                         selectedOptions: r,
                         onRemoveOption: re
                       }
-                    ) : /* @__PURE__ */ s.jsx(
+                    ) : /* @__PURE__ */ a.jsx(
                       Je,
                       {
                         displayMode: we,
@@ -512,8 +518,8 @@ function ct(e) {
                     )
                   }
                 ),
-                /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
-                  he && /* @__PURE__ */ s.jsx(
+                /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-2", children: [
+                  he && /* @__PURE__ */ a.jsx(
                     Xe,
                     {
                       size: "small",
@@ -521,15 +527,16 @@ function ct(e) {
                       className: " opacity-90"
                     }
                   ),
-                  pe && me && /* @__PURE__ */ s.jsx(
+                  pe && me && /* @__PURE__ */ a.jsx(
                     "button",
                     {
-                      onMouseDown: (t) => {
+                      className: "z-100",
+                      onClick: (t) => {
                         t.preventDefault(), t.stopPropagation(), R(t);
                       },
                       type: "button",
                       tabIndex: -1,
-                      children: /* @__PURE__ */ s.jsx(
+                      children: /* @__PURE__ */ a.jsx(
                         ot,
                         {
                           size: 20,
@@ -541,7 +548,7 @@ function ct(e) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ s.jsx(
+                  /* @__PURE__ */ a.jsx(
                     Ue,
                     {
                       size: 20,
@@ -557,15 +564,15 @@ function ct(e) {
             }
           )
         ] }),
-        n && /* @__PURE__ */ s.jsx(
+        n && /* @__PURE__ */ a.jsx(
           mt,
           {
             label: z,
             isOpen: n,
             disabled: te,
-            optionValue: E,
+            optionValue: k,
             optionLabel: de,
-            emptyMessage: ke,
+            emptyMessage: Ee,
             labelVariant: ie,
             renderOption: J,
             renderOptionGroupHeader: fe,
@@ -579,7 +586,7 @@ function ct(e) {
             options: d,
             selectRef: D,
             dropdownRef: g,
-            selectButtonRef: k,
+            selectButtonRef: E,
             helperComponentRef: W,
             onOptionClick: x,
             onCloseDropdown: () => m(!1),
@@ -599,7 +606,7 @@ function ct(e) {
             onGroupSelectChange: w
           }
         ),
-        (Ce || ee) && /* @__PURE__ */ s.jsx("div", { className: "min-h-6", children: /* @__PURE__ */ s.jsx(
+        (Ce || ee) && /* @__PURE__ */ a.jsx("div", { className: "min-h-6", children: /* @__PURE__ */ a.jsx(
           nt,
           {
             ref: W,
@@ -612,7 +619,7 @@ function ct(e) {
     }
   );
 }
-const dt = Z(ct, (e, n) => e.value === n.value && e.options === n.options && e.isLoading === n.isLoading && e.disabled === n.disabled && e.errorComponent === n.errorComponent && e.helperComponent === n.helperComponent && e.variant === n.variant && e.label === n.label && e.id === n.id && e.name === n.name && e.placeholder === n.placeholder && e.renderOptionContext === n.renderOptionContext && e.dropdownOptions?.controledSearchValue === n.dropdownOptions?.controledSearchValue && e.dropdownOptions?.isLoading === n.dropdownOptions?.isLoading), Et = dt;
+const dt = Z(ct, (e, n) => e.value === n.value && e.options === n.options && e.isLoading === n.isLoading && e.disabled === n.disabled && e.errorComponent === n.errorComponent && e.helperComponent === n.helperComponent && e.variant === n.variant && e.label === n.label && e.id === n.id && e.name === n.name && e.placeholder === n.placeholder && e.renderOptionContext === n.renderOptionContext && e.dropdownOptions?.controledSearchValue === n.dropdownOptions?.controledSearchValue && e.dropdownOptions?.isLoading === n.dropdownOptions?.isLoading), kt = dt;
 function ft({
   footer: e,
   isOpen: n,
@@ -624,7 +631,7 @@ function ft({
   inputProps: D,
   dropdownRef: g,
   optionLabel: b,
-  optionValue: k,
+  optionValue: E,
   searchValue: I,
   labelVariant: W,
   emptyMessage: A,
@@ -636,7 +643,7 @@ function ft({
   searchInputRef: V,
   setSearchValue: M,
   dropdownHeight: N,
-  attachToParent: E,
+  attachToParent: k,
   filteredOptions: de,
   selectButtonRef: J,
   onCloseDropdown: fe,
@@ -648,7 +655,7 @@ function ft({
   onSearchValueChange: O,
   isLoading: ee = !1,
   hideSearchBar: Ce = !1,
-  inputSearchPlaceholder: Ee = "Buscar opciones",
+  inputSearchPlaceholder: ke = "Buscar opciones",
   enableGroupToggle: X = !0,
   onGroupSelectChange: Se
 }) {
@@ -660,7 +667,7 @@ function ft({
   ), ze = U(
     (r) => !we.has(r),
     [we]
-  ), ke = U(
+  ), Ee = U(
     (r, o) => {
       ie((c) => {
         const d = new Set(c), w = d.has(r);
@@ -693,7 +700,7 @@ function ft({
         g.current.style.maxHeight = "0", g.current.style.opacity = "0", g.current.style.pointerEvents = "none";
         return;
       }
-      if (!E) {
+      if (!k) {
         const o = Me();
         Ae(o), Oe(o.direction), ne(o.height);
       }
@@ -701,7 +708,7 @@ function ft({
     }
   };
   ve(() => {
-    E || !p.current || !n || Oe();
+    k || !p.current || !n || Oe();
   }, [ae]), ve(() => {
     pe(n);
   }, [n]), ve(() => {
@@ -725,11 +732,11 @@ function ft({
           re(), R = ue;
           return;
         }
-        const a = be, l = G(
-          a,
+        const s = be, l = G(
+          s,
           b
         ), h = qe(String(l ?? ""), o);
-        R ? h && q.push(a) : h && x.push(a);
+        R ? h && q.push(s) : h && x.push(s);
       }), re(), x;
     }
     const c = [];
@@ -761,7 +768,7 @@ function ft({
     if (K) {
       K(), Q(
         i.filter((r) => {
-          const o = v ? G(r, k) : r.id;
+          const o = v ? G(r, E) : r.id;
           return ae.has(o);
         })
       );
@@ -771,7 +778,7 @@ function ft({
   }, [
     i,
     ae,
-    k,
+    E,
     K,
     Q,
     M,
@@ -821,7 +828,7 @@ function ft({
         isLoading: !0,
         renderContext: S
       }
-    ) : /* @__PURE__ */ s.jsx(
+    ) : /* @__PURE__ */ a.jsx(
       Be,
       {
         multiple: !1,
@@ -834,7 +841,7 @@ function ft({
       `skeleton-option-${// biome-ignore lint/suspicious/noArrayIndexKey: <>
       o}`
     )
-  ), ge = /* @__PURE__ */ s.jsx(
+  ), ge = /* @__PURE__ */ a.jsx(
     "div",
     {
       tabIndex: 0,
@@ -843,11 +850,11 @@ function ft({
       className: f(
         " z-100! w-full mt-1 bg-neutral-default-default border border-neutral-default-default rounded-lg shadow-lg",
         " overflow-hidden focus-visible:bg-neutral-default-hover    ",
-        E ? "absolute z-50 " : "fixed z-100 top-0 left-0",
+        k ? "absolute z-50 " : "fixed z-100 top-0 left-0",
         he.direction === "up" ? "h-auto" : " h-max",
         Ie
       ),
-      children: /* @__PURE__ */ s.jsxs(
+      children: /* @__PURE__ */ a.jsxs(
         "div",
         {
           className: f(
@@ -859,7 +866,7 @@ function ft({
             maxHeight: he.height
           },
           children: [
-            !Ce && /* @__PURE__ */ s.jsx(
+            !Ce && /* @__PURE__ */ a.jsx(
               tt,
               {
                 name: "",
@@ -870,23 +877,23 @@ function ft({
                 disabled: y,
                 ref: V,
                 labelVariant: "static",
-                icon: /* @__PURE__ */ s.jsx(st, { size: 22 }),
+                icon: /* @__PURE__ */ a.jsx(st, { size: 22 }),
                 isFetching: ee,
                 onKeyDown: $e,
                 onClear: Ge,
                 onChange: (r) => Te(r.target.value),
-                placeholder: Ee,
+                placeholder: ke,
                 className: " bg-neutral-medium-pressed",
                 ...D
               }
             ),
-            /* @__PURE__ */ s.jsx("div", { className: " overflow-y-auto flex-1 max-h-max ", children: de.length === 0 ? ee ? /* @__PURE__ */ s.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: De || Y }) : /* @__PURE__ */ s.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: I ? `No se encontraron resultados para "${I}"` : A }) : (() => {
+            /* @__PURE__ */ a.jsx("div", { className: " overflow-y-auto flex-1 max-h-max ", children: de.length === 0 ? ee ? /* @__PURE__ */ a.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: De || Y }) : /* @__PURE__ */ a.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: I ? `No se encontraron resultados para "${I}"` : A }) : (() => {
               let r = !0;
               return de.map((o) => {
-                const c = o, d = !!(c || {}).isGroupHeader, w = v && !d ? G(o, k) : c.id, L = ae.has(w), x = (l) => !v || d ? l : {
+                const c = o, d = !!(c || {}).isGroupHeader, w = v && !d ? G(o, E) : c.id, L = ae.has(w), x = (l) => !v || d ? l : {
                   id: w,
                   label: String(G(l, b)),
-                  value: G(l, k)
+                  value: G(l, E)
                 }, R = (l) => {
                   d || se(
                     x(o),
@@ -901,7 +908,7 @@ function ft({
                   const H = !!(h || {}).isGroupHeader;
                   return (
                     // biome-ignore lint/a11y/useSemanticElements: <>
-                    /* @__PURE__ */ s.jsx(
+                    /* @__PURE__ */ a.jsx(
                       "div",
                       {
                         tabIndex: 0,
@@ -922,12 +929,12 @@ function ft({
                   const l = c.groupLabelNode ?? c.label, h = String(c.id), H = X === !1 ? !0 : ze(h);
                   r = H;
                   const $ = c.originalOption, P = c.groupData?.groupOptions ?? [], le = (_) => {
-                    X && ke(h, _);
+                    X && Ee(h, _);
                   }, xe = (_) => {
                     !P || P.length === 0 || Se && Se(P, _);
                   }, ye = P.filter(
-                    (_) => ae.has(G(_, k))
-                  ).map((_) => String(G(_, k)));
+                    (_) => ae.has(G(_, E))
+                  ).map((_) => String(G(_, E)));
                   if (z) {
                     const _ = Z(
                       z,
@@ -947,14 +954,14 @@ function ft({
                     return re(C, c);
                   }
                   return re(
-                    /* @__PURE__ */ s.jsxs("div", { className: "px-3 py-2 text-neutral-medium-default font-medium text-sm w-full flex justify-between", children: [
-                      /* @__PURE__ */ s.jsx("div", { children: l }),
-                      X && /* @__PURE__ */ s.jsx(
+                    /* @__PURE__ */ a.jsxs("div", { className: "px-3 py-2 text-neutral-medium-default font-medium text-sm w-full flex justify-between", children: [
+                      /* @__PURE__ */ a.jsx("div", { children: l }),
+                      X && /* @__PURE__ */ a.jsx(
                         "div",
                         {
                           className: "cursor-pointer",
-                          onClick: () => ke(h),
-                          children: /* @__PURE__ */ s.jsx(
+                          onClick: () => Ee(h),
+                          children: /* @__PURE__ */ a.jsx(
                             Ue,
                             {
                               className: f(
@@ -984,7 +991,7 @@ function ft({
                     isLoading: ee,
                     renderContext: S
                   }
-                ) : /* @__PURE__ */ s.jsx(
+                ) : /* @__PURE__ */ a.jsx(
                   Be,
                   {
                     disabled: y,
@@ -1001,10 +1008,10 @@ function ft({
                 );
                 if (!X)
                   return ue;
-                const t = !r, a = ue;
-                return Ne.cloneElement(a, {
+                const t = !r, s = ue;
+                return Ne.cloneElement(s, {
                   className: f(
-                    a.props.className,
+                    s.props.className,
                     "overflow-hidden transition-[max-height] duration-300 ease-out",
                     t ? "max-h-0" : "max-h-[999px]"
                   )
@@ -1017,7 +1024,7 @@ function ft({
       )
     }
   );
-  return E ? ge : Ye(ge, document.body);
+  return k ? ge : Ye(ge, document.body);
 }
 const mt = Z(
   ft,
@@ -1033,13 +1040,13 @@ const mt = Z(
   }) => {
     const p = (e || {})?.isGroupHeader;
     if (y)
-      return /* @__PURE__ */ s.jsxs(
+      return /* @__PURE__ */ a.jsxs(
         "div",
         {
           className: "flex gap-2 w-full px-3 py-2 cursor-wait",
           children: [
-            /* @__PURE__ */ s.jsx(Ke, { className: "size-6 aspect-square" }),
-            /* @__PURE__ */ s.jsx(Ke, { className: "flex-1 h-6" })
+            /* @__PURE__ */ a.jsx(Ke, { className: "size-6 aspect-square" }),
+            /* @__PURE__ */ a.jsx(Ke, { className: "flex-1 h-6" })
           ]
         },
         e.id
@@ -1049,7 +1056,7 @@ const mt = Z(
     }, g = p && e.groupLabelNode ? e.groupLabelNode : e.label;
     return (
       // biome-ignore lint/a11y/noStaticElementInteractions: no keyboard interaction needed
-      /* @__PURE__ */ s.jsxs(
+      /* @__PURE__ */ a.jsxs(
         "div",
         {
           onMouseDown: D,
@@ -1060,8 +1067,8 @@ const mt = Z(
             u && !p && "text-neutral-default-disabled hover:bg-neutral-default-default"
           ),
           children: [
-            i && !p && /* @__PURE__ */ s.jsx(lt, { checked: n, disabled: u }),
-            /* @__PURE__ */ s.jsx("span", { children: g })
+            i && !p && /* @__PURE__ */ a.jsx(lt, { checked: n, disabled: u }),
+            /* @__PURE__ */ a.jsx("span", { children: g })
           ]
         },
         e.id
@@ -1080,7 +1087,7 @@ const Je = Z(
     multiple: u,
     className: y,
     disabled: p
-  }) => e?.length === 0 ? n ? /* @__PURE__ */ s.jsx("span", { className: "text-neutral-medium-default opacity-50", children: n }) : null : i === "chips" && u ? /* @__PURE__ */ s.jsx("div", { className: f("flex items-center gap-1 ", y), children: e.map((D) => /* @__PURE__ */ s.jsx(
+  }) => e?.length === 0 ? n ? /* @__PURE__ */ a.jsx("span", { className: "text-neutral-medium-default opacity-50", children: n }) : null : i === "chips" && u ? /* @__PURE__ */ a.jsx("div", { className: f("flex items-center gap-1 ", y), children: e.map((D) => /* @__PURE__ */ a.jsx(
     it,
     {
       tabIndex: -1,
@@ -1090,7 +1097,7 @@ const Je = Z(
       disabled: p
     },
     D.id
-  )) }) : e?.length === 1 ? /* @__PURE__ */ s.jsx("span", { children: e[0].label }) : /* @__PURE__ */ s.jsxs("span", { children: [
+  )) }) : e?.length === 1 ? /* @__PURE__ */ a.jsx("span", { children: e[0].label }) : /* @__PURE__ */ a.jsxs("span", { children: [
     e?.length,
     " seleccionados"
   ] }),
@@ -1098,6 +1105,6 @@ const Je = Z(
 );
 Je.displayName = "DefaultSelectionDisplay";
 export {
-  Et as S,
+  kt as S,
   G as g
 };

package/dist/Select.es.js

@@ -1,4 +1,4 @@
-import { S as f } from "./Select-mdLPyy7g.js";
+import { S as f } from "./Select-DW30oGym.js";
 export {
   f as default
 };

package/dist/SelectSearch.es.js

@@ -1,96 +1,95 @@
 import { j as X } from "./jsx-runtime-DKDX3adD.js";
-import { g as i, S as Y } from "./Select-mdLPyy7g.js";
-import { useState as k, useRef as j, useEffect as m, useMemo as Z, useCallback as ee } from "react";
+import { g as i, S as Y } from "./Select-DW30oGym.js";
+import { useState as x, useRef as A, useEffect as b, useMemo as Z, useCallback as ee } from "react";
 function le(e) {
   const {
-    options: p,
+    options: O,
     fetcher: u,
-    asyncMode: C = "fetch_in_open",
-    disabled: V = !1,
-    debounceDelay: R = 500,
-    minCharacters: L = 3,
+    asyncMode: S = "fetch_in_open",
+    disabled: _ = !1,
+    debounceDelay: E = 500,
+    minCharacters: w = 3,
     optionLabel: h,
     optionValue: s,
-    controlledValue: c,
-    isOpen: P,
-    inputRef: x,
-    name: S
-  } = e || {}, A = p ? p.filter((t) => t != null) : [], [v, _] = k(A || []), [D, y] = k(A || []), [d, E] = k(""), [J, l] = k(!1), [O, b] = k(!1), g = j(null), N = j(null), z = j(!1), U = j(u), F = e?.multiple === !0 || !1, w = j(F ? [] : void 0), [f, M] = k(F ? [] : void 0);
-  m(() => {
-    U.current = u;
-  }, [u]), m(() => {
-    if (c !== void 0)
-      if (F) {
-        const t = $(c, "value");
-        M(t);
-      } else
-        c != null && M(c);
-  }, [c]), m(() => {
-    w.current = c !== void 0 ? c : f;
-  }, [c, f]), m(() => {
+    controlledValue: d,
+    isOpen: F,
+    inputRef: P,
+    name: T
+  } = e || {}, M = O ? O.filter((t) => t != null) : [], [p, y] = x(M || []), [D, I] = x(M || []), [c, N] = x(""), [W, C] = x(!1), [J, U] = x(!1), l = A(null), g = A(null), m = A(!1), V = A(u), L = e?.multiple === !0 || !1, k = A(L ? [] : void 0), [f, v] = x(L ? [] : void 0);
+  b(() => {
+    V.current = u;
+  }, [u]), b(() => {
+    if (L) {
+      const t = z(d, "value");
+      v(t);
+    } else
+      d != null ? v(d) : v(void 0);
+  }, [d]), b(() => {
+    k.current = d !== void 0 ? d : f;
+  }, [d, f]), b(() => {
     if (e?.options) {
       const t = e.options.filter((n) => n != null);
-      _(t), y(t);
+      y(t), I(t);
     }
   }, [e?.options]);
   const B = Z(() => (t, n) => new Promise((o, r) => {
-    g.current && clearTimeout(g.current), g.current = setTimeout(() => t(d).then(o).catch(r), n);
-  }), [d]), te = (t) => {
-    const n = c !== void 0, o = (r) => s ? i(r, s) : i(r, "id");
+    l.current && clearTimeout(l.current), l.current = setTimeout(() => t(c).then(o).catch(r), n);
+  }), [c]), te = (t) => {
+    const n = d !== void 0, o = (r) => s ? i(r, s) : i(r, "id");
     if (e?.multiple === !0) {
-      const r = w.current || [];
+      const r = k.current || [];
       let a;
-      r.some((I) => o(I) === o(t)) ? a = r.filter((I) => o(I) !== o(t)) : a = [...r, t], n ? (w.current = a, e?.onChange?.(a, S)) : (w.current = a, M(a), e?.onChange?.(a, S));
+      r.some((R) => o(R) === o(t)) ? a = r.filter((R) => o(R) !== o(t)) : a = [...r, t], n ? (k.current = a, e?.onChange?.(a, T)) : (k.current = a, v(a), e?.onChange?.(a, T));
     } else
-      n ? (w.current = t, e?.onChange?.(t, S)) : (w.current = t, M(t), e?.onChange?.(t, S));
-  }, q = (t) => (e?.onFetchingStart?.(), U.current?.(t) || Promise.resolve([])), $ = (t, n) => Array.isArray(t) ? (t.some((o) => typeof o != "object" || o === null) && console.debug(`El valor del ${n || "resultado del fetcher"} contiene elementos no válidos (null,undefined, no-object)`, t), t?.filter((o) => o != null) || []) : (console.debug(`El valor del ${n || "resultado del fetcher"} no es un Array (tipo de dato obtenido: ${typeof t})`), []), K = ee((t, n) => t.length === 0 ? n : s ? n.filter((o) => !t.some((r) => i(r, s) === i(o, s))) : n.filter((o) => !t.some((r) => i(r, "id") === i(o, "id"))), [s]);
-  m(() => {
+      n ? (k.current = t, e?.onChange?.(t, T)) : (k.current = t, v(t), e?.onChange?.(t, T));
+  }, q = (t) => (e?.onFetchingStart?.(), V.current?.(t) || Promise.resolve([])), z = (t, n) => Array.isArray(t) ? (t.some((o) => typeof o != "object" || o === null) && console.debug(`El valor del ${n || "resultado del fetcher"} contiene elementos no válidos (null,undefined, no-object)`, t), t?.filter((o) => o != null) || []) : (console.debug(`El valor del ${n || "resultado del fetcher"} no es un Array (tipo de dato obtenido: ${typeof t})`), []), $ = ee((t, n) => t.length === 0 ? n : s ? n.filter((o) => !t.some((r) => i(r, s) === i(o, s))) : n.filter((o) => !t.some((r) => i(r, "id") === i(o, "id"))), [s]);
+  b(() => {
     const t = e?.subscribeOpenChange;
     if (!t) return;
     const n = t((o) => {
-      b(o);
+      U(o);
     });
     return () => {
       n && n();
     };
   }, [e?.subscribeOpenChange]);
-  const G = P !== void 0 ? P : O;
-  m(() => {
-    if (!V && U.current && C === "fetch_on_type") {
-      if (!d || d === "" || d.length < L) {
-        g.current && clearTimeout(g.current), l(!1);
+  const G = F !== void 0 ? F : J;
+  b(() => {
+    if (!_ && V.current && S === "fetch_on_type") {
+      if (!c || c === "" || c.length < w) {
+        l.current && clearTimeout(l.current), C(!1);
         return;
       }
-      const t = B(q, R);
-      l(!0), t.then((n) => {
-        const o = $(n);
-        _(o);
+      const t = B(q, E);
+      C(!0), t.then((n) => {
+        const o = z(n);
+        y(o);
       }).finally(() => {
-        l(!1), e?.onFetchingEnd?.();
+        C(!1), e?.onFetchingEnd?.();
       });
     }
-  }, [C, d, V, R, B, L]), m(() => {
-    if (!V)
+  }, [S, c, _, E, B, w]), b(() => {
+    if (!_)
       if (G) {
-        if (e?.onOpen?.(), C === "fetch_in_open") {
-          if (!U.current)
+        if (e?.onOpen?.(), S === "fetch_in_open") {
+          if (!V.current)
             return;
-          l(!0), q().then((t) => {
-            const n = $(t);
-            _(() => {
+          C(!0), q().then((t) => {
+            const n = z(t);
+            y(() => {
               const o = n.filter((r) => {
                 if (s)
                   return i(r, s) !== void 0;
               });
-              return F && f.length > 0 ? [...K(f, o), ...f] : o;
+              return L && f.length > 0 ? [...$(f, o), ...f] : o;
             });
           }).finally(() => {
-            l(!1), e?.onFetchingEnd?.();
+            C(!1), e?.onFetchingEnd?.();
           });
         }
       } else
         e?.onClose?.();
-  }, [G, C, V]);
+  }, [G, S, _]);
   const H = (t, n) => t?.filter((o) => {
     if (h)
       return i(o, h)?.toLowerCase().includes(n.toLowerCase());
@@ -102,7 +101,7 @@ function le(e) {
         case "number":
           return r.toString().includes(n);
         case "object":
-          return Object.values(r).some((T) => T.toString()?.toLowerCase().includes(n.toLowerCase()));
+          return Object.values(r).some((j) => j.toString()?.toLowerCase().includes(n.toLowerCase()));
         default:
           return !1;
       }
@@ -111,16 +110,16 @@ function le(e) {
     if (h)
       return i(n, h) < i(o, h) ? -1 : 1;
     {
-      const a = ["label", "name", "value"].find((W) => typeof n == "object" && Object.keys(n).includes(W)), T = n, I = o;
-      switch (typeof T) {
+      const a = ["label", "name", "value"].find((K) => typeof n == "object" && Object.keys(n).includes(K)), j = n, R = o;
+      switch (typeof j) {
         case "string":
-          return T < I ? -1 : 1;
+          return j < R ? -1 : 1;
         case "number":
-          return T < I ? -1 : 1;
+          return j < R ? -1 : 1;
         case "object":
           if (a) {
-            const W = i(n, a), oe = i(o, a);
-            return W < oe ? -1 : 1;
+            const K = i(n, a), oe = i(o, a);
+            return K < oe ? -1 : 1;
           } else
             return 1;
         default:
@@ -128,87 +127,92 @@ function le(e) {
       }
     }
   }) || [], Q = (t) => {
-    const n = typeof x == "function" ? x() : x;
-    t.target === n?.current && (N.current && clearTimeout(N.current), z.current || (z.current = !0, e?.onTypeStart?.()), N.current = setTimeout(() => {
-      z.current = !1;
-    }, R));
+    const n = typeof P == "function" ? P() : P;
+    t.target === n?.current && (g.current && clearTimeout(g.current), m.current || (m.current = !0, e?.onTypeStart?.()), g.current = setTimeout(() => {
+      m.current = !1;
+    }, E));
   };
-  return m(() => {
-    if (d === "")
-      y(ne(v));
-    else if (F) {
-      const t = K(f, v);
-      y([...H(t, d), ...f]);
+  return b(() => {
+    if (c === "")
+      I(ne(p));
+    else if (L) {
+      const t = $(f, p);
+      I([...H(t, c), ...f]);
     } else {
-      const t = K([f], v);
-      y([...H(t, d), f]);
+      const t = $([f], p);
+      I([...H(t, c), f]);
     }
-  }, [v]), m(() => (document.addEventListener("keydown", Q), () => {
+  }, [p]), b(() => (document.addEventListener("keydown", Q), () => {
     document.removeEventListener("keydown", Q);
   }), []), {
-    inputValue: d,
-    setInputValue: E,
+    inputValue: c,
+    setInputValue: N,
     cleanInputValue: () => {
-      E("");
+      N("");
     },
     cleanOptions: () => {
-      _(f);
+      L && y(f);
+    },
+    clearValue: () => {
+      v(L ? [] : void 0);
     },
     filteredOptions: D,
-    isLoading: J,
+    isLoading: W,
     value: f,
-    setValue: M,
+    setValue: v,
     onOptionClick: te
   };
 }
-const de = (e) => {
-  const p = j(null);
-  m(() => {
-    e.controls && (e.controls.current = p.current);
+const fe = (e) => {
+  const O = A(null);
+  b(() => {
+    e.controls && (e.controls.current = O.current);
   }, [e.controls]);
-  const { asyncMode: u = "fetch_in_open" } = e, C = (l, O, b) => {
-    const g = {
+  const { asyncMode: u = "fetch_in_open" } = e, S = (l, g, m) => {
+    const V = {
       options: l.options,
       fetcher: l.fetcher,
-      asyncMode: O,
+      asyncMode: g,
       debounceDelay: l.debounceDelay,
       minCharacters: l.minCharacters,
       disabled: l.disabled,
       optionValue: l.optionValue,
       optionLabel: l.optionLabel,
       onFetchingStart: () => {
-        O === "fetch_on_type" && b.current?.open();
+        g === "fetch_on_type" && m.current?.open();
       },
       onTypeStart: () => {
-        !l?.fetcher && b.current?.open();
+        !l?.fetcher && m.current?.open();
       },
-      inputRef: () => b.current?.searchInputRef,
-      subscribeOpenChange: b.current?.subscribeOpenChange,
+      inputRef: () => m.current?.searchInputRef,
+      subscribeOpenChange: m.current?.subscribeOpenChange,
       name: l.name
     };
     return l.multiple ? {
-      ...g,
+      ...V,
       multiple: !0,
       controlledValue: l.value,
       onChange: l.onChange
     } : {
-      ...g,
+      ...V,
       multiple: !1,
       controlledValue: l.value,
       onChange: l.onChange
     };
-  }, { inputValue: V, setInputValue: R, filteredOptions: L, isLoading: h, value: s, onOptionClick: c, cleanInputValue: P, cleanOptions: x } = le(C(e, u, p)), S = ee(() => u === "fetch_on_type" ? h : !1, [u, h]), A = Z(() => e.multiple ? s.map((l) => i(l, e.optionValue)) : s ? i(s, e.optionValue) : void 0, [s, e.optionValue, e.multiple]), v = (l) => {
-    const O = L.find((b) => i(b, e.optionValue) === l.id);
-    O && c(O);
-  }, { displayMode: _ = e.multiple ? "chips" : "compact", dropdownOptions: D, overflow: y = "scroll", onChange: d, ...E } = e.selectComponentProps || {}, J = {
-    controledSearchValue: V,
-    onSearchValueChange: u === "fetch_on_type" ? R : void 0,
+  }, { inputValue: _, setInputValue: E, filteredOptions: w, isLoading: h, value: s, onOptionClick: d, cleanInputValue: F, cleanOptions: P, clearValue: T } = le(S(e, u, O)), M = ee(() => u === "fetch_on_type" ? h : !1, [u, h]), p = Z(() => e.multiple ? s.map((l) => i(l, e.optionValue)) : s ? i(s, e.optionValue) : void 0, [s, e.optionValue, e.multiple]), y = (l) => {
+    const g = w.find((m) => i(m, e.optionValue) === l.id);
+    g && d(g);
+  }, { displayMode: D = e.multiple ? "chips" : "compact", dropdownOptions: I, overflow: c = "scroll", onChange: N, onClear: W, ...C } = e.selectComponentProps || {}, J = {
+    controledSearchValue: _,
+    onSearchValueChange: u === "fetch_on_type" ? E : void 0,
     onSearchClear: u === "fetch_on_type" ? () => {
-      P(), x();
+      F(), P();
     } : void 0,
     inputSearchPlaceholder: e.inputSearchPlaceholder,
-    isLoading: S(),
-    ...D || {}
+    isLoading: M(),
+    ...I || {}
+  }, U = () => {
+    T(), e?.selectComponentProps?.onClear?.();
   };
   return e.multiple ? /* @__PURE__ */ X.jsx(
     Y,
@@ -216,18 +220,19 @@ const de = (e) => {
       disabled: e.disabled,
       className: e.className,
       name: e.name,
-      overflow: y,
-      ...E,
+      overflow: c,
+      ...C,
+      onClear: e?.selectComponentProps?.onClear && U,
       multiple: !0,
-      value: A,
+      value: p,
       label: e.label || "",
-      options: L,
+      options: w,
       optionValue: e.optionValue,
       optionLabel: e.optionLabel,
       renderOption: e.renderOption,
-      onOptionClick: v,
-      displayMode: _,
-      controls: p,
+      onOptionClick: y,
+      displayMode: D,
+      controls: O,
       emptyMessage: "Use el buscador para obtener las opciones disponibles",
       dropdownOptions: J,
       isLoading: u === "fetch_in_open" ? h : !1
@@ -236,20 +241,21 @@ const de = (e) => {
     Y,
     {
       disabled: e.disabled,
-      ...E,
+      ...C,
+      onClear: U,
       className: e.className,
-      overflow: y,
+      overflow: c,
       name: e.name,
       multiple: !1,
-      value: A,
+      value: p,
       label: e.label || "",
-      options: L,
+      options: w,
       optionValue: e.optionValue,
       optionLabel: e.optionLabel,
       renderOption: e.renderOption,
-      onOptionClick: v,
+      onOptionClick: y,
       displayMode: "compact",
-      controls: p,
+      controls: O,
       emptyMessage: "Use el buscador para obtener las opciones disponibles",
       dropdownOptions: J,
       isLoading: u === "fetch_in_open" ? h : !1
@@ -257,5 +263,5 @@ const de = (e) => {
   );
 };
 export {
-  de as default
+  fe as default
 };

package/dist/components/Autocomplete/useAutocomplete.d.ts

@@ -34,6 +34,7 @@ export declare function useAutocomplete<T extends object>(options?: UseAutocompl
     setInputValue: import('react').Dispatch<import('react').SetStateAction<string>>;
     cleanInputValue: () => void;
     cleanOptions: () => void;
+    clearValue: () => void;
     filteredOptions: T[];
     isLoading: boolean;
     value: T | T[] | undefined;

package/dist/prometeo-design-system.es.js

@@ -13,7 +13,7 @@ import { default as Ke } from "./Menu.es.js";
 import { default as Ye } from "./Pagination.es.js";
 import { default as tt } from "./ProfilePictureUpload.es.js";
 import { default as rt } from "./ProgressBar.es.js";
-import { S as nt } from "./Select-mdLPyy7g.js";
+import { S as nt } from "./Select-DW30oGym.js";
 import { default as it } from "./Spinner.es.js";
 import { default as ct } from "./Steps.es.js";
 import { default as dt } from "./SwipeContainer.es.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "3.1.1",
+  "version": "3.1.2",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",