prometeo-design-system 7.3.0 → 7.3.1

package/dist/Button.es.js

@@ -1,12 +1,12 @@
 import { j as a } from "./jsx-runtime-GkKLlHH4.js";
-import { memo as G, useMemo as H, createElement as J, isValidElement as K } from "react";
+import { memo as J, forwardRef as K, useMemo as O, createElement as P, isValidElement as Q } from "react";
 import { c as V } from "./cn-B6yFEsav.js";
 import { c as g } from "./index-BOQuZ0gG.js";
-import O from "./Spinner.es.js";
-const P = (r) => K(r), B = {
+import U from "./Spinner.es.js";
+const W = (r) => Q(r), B = {
   primary: "brand",
   secondary: "neutral"
-}, Q = (r) => r in B, U = (r) => Q(r) ? B[r] : r, o = {
+}, X = (r) => r in B, Y = (r) => X(r) ? B[r] : r, o = {
   small: {
     container: "h-8 px-3 py-1.5 spacing-x-2 radius-small",
     icon: ""
@@ -156,7 +156,7 @@ const P = (r) => K(r), B = {
   false: {
     icon: ""
   }
-}, W = g(f.icon, {
+}, Z = g(f.icon, {
   variants: {
     size: {
       small: `${n.small.icon} ${o.small.icon}`,
@@ -207,7 +207,7 @@ const P = (r) => K(r), B = {
     color: "brand",
     animateIcon: !0
   }
-}), X = g(f.container, {
+}), _ = g(f.container, {
   variants: {
     size: {
       small: `${n.small.container} ${o.small.container}`,
@@ -304,36 +304,36 @@ const P = (r) => K(r), B = {
     variant: "fill",
     color: "brand"
   }
-}), Y = ({
+}), I = K(({
   label: r,
-  onClick: I,
+  onClick: z,
   icon: h,
-  contentClassName: Z,
+  contentClassName: T,
   loadingText: x = "Cargando...",
-  animate: z = !1,
-  animateIcon: N = !1,
+  animate: N = !1,
+  animateIcon: S = !1,
   isLoading: d = !1,
   children: s,
   hideSpinner: y = !1,
   spinner: b,
-  type: S = "button",
-  className: E,
-  disabled: M,
+  type: E = "button",
+  className: M,
+  disabled: F,
   variant: l = "fill",
-  form: F,
+  form: R,
   size: t = "medium",
   color: A = "brand",
   ...D
-}) => {
-  const c = !!(M || d), w = N && !c, L = z && !c, i = c ? "disabled" : U(A), v = typeof s == "string" ? s : r, p = typeof s != "string" ? s : void 0, R = H(() => {
+}, L) => {
+  const c = !!(F || d), w = S && !c, k = N && !c, i = c ? "disabled" : Y(A), v = typeof s == "string" ? s : r, p = typeof s != "string" ? s : void 0, q = O(() => {
     if (d) {
-      const q = {
+      const H = {
         small: "small",
         medium: "medium",
         large: "medium"
       };
       return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-        !y && b ? b : /* @__PURE__ */ a.jsx(O, { size: q[t], variant: "clip", color: "brand" }),
+        !y && b ? b : /* @__PURE__ */ a.jsx(U, { size: H[t], variant: "clip", color: "brand" }),
         /* @__PURE__ */ a.jsx(
           "span",
           {
@@ -354,18 +354,18 @@ const P = (r) => K(r), B = {
       return p;
     const u = h;
     let m = null;
-    const k = {
+    const G = {
       small: 20,
       medium: 24,
       large: 24
     };
-    return u && (m = P(u) ? u : J(u, {
-      size: k[t]
+    return u && (m = W(u) ? u : P(u, {
+      size: G[t]
     })), /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
       m && /* @__PURE__ */ a.jsx(
         "span",
         {
-          className: W({
+          className: Z({
             size: t,
             variant: l,
             color: i,
@@ -402,25 +402,28 @@ const P = (r) => K(r), B = {
   return /* @__PURE__ */ a.jsx(
     "button",
     {
-      type: S,
+      ref: L,
+      type: E,
       className: V(
         "group",
-        X({
+        _({
           size: t,
           variant: l,
           color: i,
-          animation: L
+          animation: k
         }),
-        E
+        M
       ),
       disabled: c,
-      form: F,
-      onClick: I,
+      form: R,
+      onClick: z,
       ...D,
-      children: R
+      children: q
     }
   );
-}, ne = G(Y);
+});
+I.displayName = "Button";
+const oe = J(I);
 export {
-  ne as default
+  oe as default
 };

package/dist/IconButton.es.js

@@ -1,7 +1,7 @@
 import { j as n } from "./jsx-runtime-GkKLlHH4.js";
-import { memo as T, useMemo as k, isValidElement as V } from "react";
+import { memo as F, forwardRef as G, useMemo as H, isValidElement as I } from "react";
 import { i as m } from "./iconUtils-rTOfKDxE.js";
-import q from "./Spinner.es.js";
+import J from "./Spinner.es.js";
 import { c as x } from "./index-BOQuZ0gG.js";
 import { c as h } from "./cn-B6yFEsav.js";
 const u = {
@@ -117,21 +117,21 @@ const u = {
 }, w = {
   container: "flex justify-center items-center gap-1 w-max bg-transparent cursor-pointer transition-all ease-in-out duration-300 relative",
   icon: "w-max transition-all ease-in-out duration-300 flex justify-center items-center overflow-hidden"
-}, I = {
+}, V = {
   true: {
     container: "hover:scale-105 active:scale-95 disabled:scale-100"
   },
   false: {
     container: ""
   }
-}, $ = {
+}, N = {
   true: {
     icon: "group-hover:rotate-90 group-active:rotate-0 group-disabled:rotate-0"
   },
   false: {
     icon: ""
   }
-}, F = x(w.container, {
+}, K = x(w.container, {
   variants: {
     size: {
       small: `${y.small.container} ${u.small.container}`,
@@ -147,7 +147,7 @@ const u = {
     size: "medium",
     disabled: !1
   }
-}), G = x(w.container, {
+}), O = x(w.container, {
   variants: {
     size: {
       small: "radius-small",
@@ -167,8 +167,8 @@ const u = {
       warning: ""
     },
     animation: {
-      true: I.true.container,
-      false: I.false.container
+      true: V.true.container,
+      false: V.false.container
     },
     disabled: {
       true: "cursor-default!",
@@ -221,8 +221,8 @@ const u = {
       warning: ""
     },
     animateIcon: {
-      true: $.true.icon,
-      false: $.false.icon
+      true: N.true.icon,
+      false: N.false.icon
     },
     disabled: {
       true: "",
@@ -256,34 +256,35 @@ const u = {
     animateIcon: !0,
     disabled: !1
   }
-}), H = ({
+}), $ = G(({
   onClick: z,
   icon: b,
   contentClassName: p,
-  animate: N = !1,
-  animateIcon: S = !1,
+  animate: S = !1,
+  animateIcon: B = !1,
   isLoading: f = !1,
   children: r,
   hideSpinner: j = !1,
   spinner: g,
-  type: B = "button",
+  type: R = "button",
   className: E,
   disabled: i,
   variant: s = "fill",
   form: M,
   size: o = "medium",
-  color: R = "brand"
-}) => {
-  const l = !!(i || f), d = !!(S && !l), A = !!(N && !l), c = R, C = {
+  color: A = "brand",
+  ...C
+}, D) => {
+  const l = !!(i || f), d = !!(B && !l), T = !!(S && !l), c = A, k = {
     small: "small",
     medium: "medium",
     large: "medium"
-  }, D = k(() => {
+  }, q = H(() => {
     if (f)
-      return /* @__PURE__ */ n.jsx("div", { className: "flex items-center justify-center", children: !j && (g || /* @__PURE__ */ n.jsx(q, { size: C[o], color: "brand" })) });
+      return /* @__PURE__ */ n.jsx("div", { className: "flex items-center justify-center", children: !j && (g || /* @__PURE__ */ n.jsx(J, { size: k[o], color: "brand" })) });
     let a = null;
     if (r)
-      if (V(r))
+      if (I(r))
         m(r.type) ? a = /* @__PURE__ */ n.jsx(
           "span",
           {
@@ -300,7 +301,7 @@ const u = {
       else if (typeof r == "function")
         try {
           const t = r();
-          V(t) && (m(t.type) ? a = /* @__PURE__ */ n.jsx(
+          I(t) && (m(t.type) ? a = /* @__PURE__ */ n.jsx(
             "span",
             {
               className: v({
@@ -362,10 +363,11 @@ const u = {
   return /* @__PURE__ */ n.jsx(
     "button",
     {
-      type: B,
+      ref: D,
+      type: R,
       className: h(
         "group",
-        F({
+        K({
           size: o,
           disabled: l
         }),
@@ -374,16 +376,19 @@ const u = {
       disabled: l,
       form: M,
       onClick: z,
+      ...C,
       children: /* @__PURE__ */ n.jsx("div", { className: h(
         "flex items-center gap-1",
         l && "pointer-events-none",
-        G({ size: o, variant: s, color: c, animation: A, disabled: l }),
+        O({ size: o, variant: s, color: c, animation: T, disabled: l }),
         "w-full h-full grid place-items-center",
         p
-      ), children: D })
+      ), children: q })
     }
   );
-}, W = T(H);
+});
+$.displayName = "IconButton";
+const Z = F($);
 export {
-  W as default
+  Z as default
 };

package/dist/Select.es.js

@@ -1,8 +1,8 @@
 import { j as o } from "./jsx-runtime-GkKLlHH4.js";
 import { u as Fe } from "./useDevice-S7cYqLVh.js";
-import { c as Z } from "./cn-B6yFEsav.js";
+import { c as L } from "./cn-B6yFEsav.js";
 import { g as S, h as we } from "./utils-X4-h3cum.js";
-import { memo as ge, forwardRef as Oe, useCallback as j, useMemo as X, useRef as Y, useState as Ie, useEffect as se, useLayoutEffect as Ue } from "react";
+import { memo as ge, forwardRef as Ie, useCallback as j, useMemo as Z, useRef as J, useState as Oe, useEffect as se, useLayoutEffect as Ue } from "react";
 import de, { useMenuControl as $e, useMenuState as We } from "./Menu.es.js";
 import Te from "./Input.es.js";
 import Ne from "./MenuList.es.js";
@@ -90,7 +90,7 @@ function tt(t) {
 function ae(t, e) {
   return e ? S(t, e) !== !1 : !0;
 }
-function te(t, e, n) {
+function re(t, e, n) {
   const r = S(t, n);
   return {
     id: r,
@@ -99,7 +99,7 @@ function te(t, e, n) {
     originalOption: t
   };
 }
-const rt = Oe(
+const rt = Ie(
   function({ value: e, onChange: n, onClear: r, onKeyDown: a, placeholder: c, ...s }, l) {
     return /* @__PURE__ */ o.jsx(
       Te,
@@ -140,15 +140,15 @@ function Ee({
   closeDropdown: D,
   createOptionKeyHandler: i
 }) {
-  const d = S(t, n), G = S(t, e), p = a.has(d), I = ae(t, r), T = () => {
-    I && u(d);
-  }, K = X(
+  const d = S(t, n), G = S(t, e), p = a.has(d), O = ae(t, r), T = () => {
+    O && u(d);
+  }, K = Z(
     () => i(d),
     [i, d]
   ), A = {
     role: "option",
     "aria-selected": p,
-    "aria-disabled": !I,
+    "aria-disabled": !O,
     "data-option-value": d,
     tabIndex: -1,
     onKeyDown: K,
@@ -162,12 +162,12 @@ function Ee({
       {
         option: t,
         isSelected: p,
-        onSelect: (O) => {
-          u(d), O && D();
+        onSelect: (I) => {
+          u(d), I && D();
         },
         multiple: c,
         disabled: s,
-        isOptionActive: I,
+        isOptionActive: O,
         isLoading: !1,
         renderContext: w
       }
@@ -180,7 +180,7 @@ function Ee({
       isSelected: p,
       multiple: c,
       disabled: s,
-      isOptionActive: I,
+      isOptionActive: O,
       size: l
     }
   ) });
@@ -237,12 +237,12 @@ function at({
   onSelect: d,
   onSelectGroup: G,
   closeDropdown: p,
-  createOptionKeyHandler: I,
+  createOptionKeyHandler: O,
   navigateNext: T,
   navigatePrev: K,
   hasActiveSearch: A
 }) {
-  const k = S(t, r), O = S(t, n), z = w?.enableGroupToggle !== !1, $ = e.filter(
+  const k = S(t, r), I = S(t, n), z = w?.enableGroupToggle !== !1, $ = e.filter(
     (R) => ae(R, a)
   ), H = $.filter(
     (R) => c.has(S(R, r))
@@ -264,7 +264,7 @@ function at({
         y,
         {
           group: t,
-          label: O,
+          label: I,
           groupOptions: e,
           groupSelectedIds: H.map(
             (f) => S(f, r)
@@ -289,7 +289,7 @@ function at({
       m = /* @__PURE__ */ o.jsx(
         Le,
         {
-          label: O,
+          label: I,
           expanded: h,
           onToggle: g,
           onSelectGroup: P,
@@ -333,7 +333,7 @@ function at({
           renderOptionContext: i,
           onSelect: d,
           closeDropdown: p,
-          createOptionKeyHandler: I
+          createOptionKeyHandler: O
         },
         S(R, r)
       ))
@@ -389,12 +389,12 @@ function it({
   renderOptionContext: d,
   onSelect: G,
   onSelectGroup: p,
-  closeDropdown: I,
+  closeDropdown: O,
   searchValue: T,
   onSearchChange: K,
   onSearchClear: A,
   searchInputRef: k,
-  dropdownOptions: O,
+  dropdownOptions: I,
   onSearchKeyDown: z,
   createOptionKeyHandler: $,
   navigateNext: H,
@@ -425,34 +425,34 @@ function it({
       snapPoints: r === "drawer" ? ["60%", "90%"] : void 0,
       className: C,
       children: [
-        !O?.hideSearchBar && /* @__PURE__ */ o.jsx(de.Header, { className: Z(r === "drawer" && "px-3"), children: /* @__PURE__ */ o.jsx(
+        !I?.hideSearchBar && /* @__PURE__ */ o.jsx(de.Header, { className: L(r === "drawer" && "px-3"), children: /* @__PURE__ */ o.jsx(
           rt,
           {
             ref: k,
             value: T,
             onClear: A,
             onKeyDown: z,
-            placeholder: O?.searchPlaceholder ?? "Buscar opciones",
-            ...O?.inputProps,
+            placeholder: I?.searchPlaceholder ?? "Buscar opciones",
+            ...I?.inputProps,
             onChange: K
           }
         ) }),
-        /* @__PURE__ */ o.jsx(de.Content, { className: Z(r === "drawer" && "flex flex-col px-3"), children: /* @__PURE__ */ o.jsx(
+        /* @__PURE__ */ o.jsx(de.Content, { className: L(r === "drawer" && "flex flex-col px-3"), children: /* @__PURE__ */ o.jsx(
           "div",
           {
             ref: W,
             role: "listbox",
             "aria-label": m,
             "aria-multiselectable": u,
-            className: Z(
+            className: L(
               "overflow-y-auto w-full",
               r === "drawer" && "min-h-0 flex-1",
-              O?.optionContainerClassName
+              I?.optionContainerClassName
             ),
             style: r === "drawer" ? void 0 : {
-              maxHeight: O?.dropdownHeight ?? "min(320px, 60vh)"
+              maxHeight: I?.dropdownHeight ?? "min(320px, 60vh)"
             },
-            children: F ? /* @__PURE__ */ o.jsx(ct, { loadingComponent: O?.loadingComponent }) : /* @__PURE__ */ o.jsx(
+            children: F ? /* @__PURE__ */ o.jsx(ct, { loadingComponent: I?.loadingComponent }) : /* @__PURE__ */ o.jsx(
               ot,
               {
                 filteredOptions: c,
@@ -464,13 +464,13 @@ function it({
                 multiple: u,
                 disabled: h,
                 size: g,
-                dropdownOptions: O,
+                dropdownOptions: I,
                 renderOption: D,
                 renderOptionGroupHeader: i,
                 renderOptionContext: d,
                 onSelect: G,
                 onSelectGroup: p,
-                closeDropdown: I,
+                closeDropdown: O,
                 createOptionKeyHandler: $,
                 navigateNext: H,
                 navigatePrev: P,
@@ -479,7 +479,7 @@ function it({
             )
           }
         ) }),
-        O?.footer && /* @__PURE__ */ o.jsx(de.Footer, { children: O.footer })
+        I?.footer && /* @__PURE__ */ o.jsx(de.Footer, { children: I.footer })
       ]
     }
   );
@@ -501,7 +501,7 @@ const lt = ge(function({
   ] }) : /* @__PURE__ */ o.jsx(
     "div",
     {
-      className: Z(
+      className: L(
         "flex gap-1",
         a === "wrap" ? "flex-wrap" : "flex-nowrap"
       ),
@@ -545,7 +545,7 @@ function ft({
   return /* @__PURE__ */ o.jsx(
     Ze,
     {
-      className: Z(
+      className: L(
         "transition-transform duration-200 shrink-0",
         t && "rotate-180",
         e ? "text-neutral-disabled" : "text-neutral-secondary-default"
@@ -553,7 +553,7 @@ function ft({
     }
   );
 }
-const dt = Oe(function({
+const dt = Ie(function({
   label: e,
   size: n,
   variant: r,
@@ -569,12 +569,12 @@ const dt = Oe(function({
   optionValue: d,
   renderSelection: G,
   onRemoveOption: p,
-  onRemoveGroup: I,
+  onRemoveGroup: O,
   onClear: T,
   onClick: K,
   onFocus: A,
   isOpen: k,
-  onKeyDown: O,
+  onKeyDown: I,
   className: z,
   containerClassName: $,
   buttonClassName: H,
@@ -615,7 +615,7 @@ const dt = Oe(function({
           }
         );
       }
-      const J = /* @__PURE__ */ o.jsx(
+      const Q = /* @__PURE__ */ o.jsx(
         lt,
         {
           chipItems: b,
@@ -625,7 +625,7 @@ const dt = Oe(function({
           disabled: E.disabled,
           placeholder: s,
           onRemoveOption: p,
-          onRemoveGroup: I,
+          onRemoveGroup: O,
           resolveOptionId: (_) => S(_, d)
         }
       );
@@ -635,9 +635,9 @@ const dt = Oe(function({
           ref: f,
           ...y,
           className: "flex overflow-x-auto pyrion-scrollbar-none w-full",
-          children: J
+          children: Q
         }
-      ) : J;
+      ) : Q;
     },
     [
       G,
@@ -653,7 +653,7 @@ const dt = Oe(function({
       y,
       f
     ]
-  ), L = j(
+  ), V = j(
     (E) => /* @__PURE__ */ o.jsxs("div", { className: "flex items-center gap-1", children: [
       c && /* @__PURE__ */ o.jsx(Xe, { size: "small", variant: "sync", className: "opacity-90" }),
       T && l.length > 0 && /* @__PURE__ */ o.jsx(
@@ -664,8 +664,8 @@ const dt = Oe(function({
           variant: "text",
           color: "neutral",
           tabIndex: -1,
-          onClick: (J) => {
-            J.stopPropagation(), T();
+          onClick: (Q) => {
+            Q.stopPropagation(), T();
           },
           disabled: a,
           "aria-label": "Clear selection"
@@ -687,8 +687,8 @@ const dt = Oe(function({
         E.preventDefault(), a || K();
       },
       onFocus: A,
-      onKeyDown: O,
-      className: Z("w-full outline-none", $, H),
+      onKeyDown: I,
+      className: L("w-full outline-none", $, H),
       style: P ? { width: P } : W ? { height: W } : void 0,
       children: /* @__PURE__ */ o.jsx(
         Te,
@@ -701,9 +701,9 @@ const dt = Oe(function({
           readOnly: !0,
           hideClearButton: !0,
           flexibleHeight: m,
-          className: Z(g?.className, z),
+          className: L(g?.className, z),
           renderValue: B,
-          slotActions: L,
+          slotActions: V,
           helperComponent: R,
           errorComponent: h,
           value: ""
@@ -744,7 +744,7 @@ function mt({
   optionsContainerRef: n,
   onSelect: r
 }) {
-  const a = Y(-1), c = j(
+  const a = J(-1), c = j(
     (i) => {
       const d = n.current;
       if (!d) return !1;
@@ -830,7 +830,7 @@ function St({
   optionLabel: e,
   dropdownOptions: n
 }) {
-  const [r, a] = Ie(""), c = n?.controlledSearchValue != null, s = c ? n.controlledSearchValue : r, l = X(
+  const [r, a] = Oe(""), c = n?.controlledSearchValue != null, s = c ? n.controlledSearchValue : r, l = Z(
     () => xt(t, s, e),
     [t, s, e]
   ), b = j(
@@ -875,31 +875,31 @@ function vt({
   onRemoveOption: D,
   name: i
 }) {
-  const d = Y(
+  const d = J(
     w
   );
   d.current = w;
-  const [G, p] = Ie(() => {
+  const [G, p] = Oe(() => {
     if (!r)
       return n ?? (a ? [] : void 0);
-  }), I = r ? e : G, T = X(() => Ae(t), [t]), K = X(
-    () => T.map((h) => te(h, c, s)),
+  }), O = r ? e : G, T = Z(() => Ae(t), [t]), K = Z(
+    () => T.map((h) => re(h, c, s)),
     [T, c, s]
-  ), A = X(() => {
-    if (I == null || I === "") return [];
-    const h = Array.isArray(I) ? I : [I], g = new Map(
+  ), A = Z(() => {
+    if (O == null || O === "") return [];
+    const h = Array.isArray(O) ? O : [O], g = new Map(
       T.map((C) => [
         S(C, s),
         C
       ])
     );
     return h.map((C) => g.get(C)).filter((C) => C != null);
-  }, [T, I, s]), k = X(
+  }, [T, O, s]), k = Z(
     () => new Set(A.map((h) => S(h, s))),
     [A, s]
-  ), O = Y(A);
-  O.current = A;
-  const z = X(() => {
+  ), I = J(A);
+  I.current = A;
+  const z = Z(() => {
     if (!a) return [];
     if (!b)
       return A.map((m) => ({
@@ -966,8 +966,8 @@ function vt({
         r || p(g.id), d.current?.(g, i);
         return;
       }
-      const C = O.current.map(
-        (f) => te(f, c, s)
+      const C = I.current.map(
+        (f) => re(f, c, s)
       ), y = C.some((f) => f.id === h) ? C.filter((f) => f.id !== h) : [...C, g];
       r || p(y.map((f) => f.id)), d.current?.(y, i);
     },
@@ -993,23 +993,23 @@ function vt({
       );
       if (y.length === 0) return;
       const f = y.map(
-        (x) => te(x, c, s)
-      ), B = O.current.map(
-        (x) => te(x, c, s)
+        (x) => re(x, c, s)
+      ), B = I.current.map(
+        (x) => re(x, c, s)
       );
       if (!a) {
         const x = f[0];
         if (!x) return;
-        const V = B.some((q) => q.id === x.id), ue = g ?? "toggle", U = ue === "select" || ue === "toggle" && !V;
+        const ee = B.some((Y) => Y.id === x.id), ue = g ?? "toggle", U = ue === "select" || ue === "toggle" && !ee;
         r || p(U ? x.id : void 0), d.current?.(U ? x : void 0, i);
         return;
       }
-      const L = new Set(B.map((x) => x.id)), E = new Set(f.map((x) => x.id)), J = f.every(
-        (x) => L.has(x.id)
+      const V = new Set(B.map((x) => x.id)), E = new Set(f.map((x) => x.id)), Q = f.every(
+        (x) => V.has(x.id)
       ), _ = g ?? "toggle";
-      if (!(_ === "select" || _ === "toggle" && !J)) {
-        const x = B.filter((V) => !E.has(V.id));
-        r || p(x.map((V) => V.id)), d.current?.(x, i);
+      if (!(_ === "select" || _ === "toggle" && !Q)) {
+        const x = B.filter((ee) => !E.has(ee.id));
+        r || p(x.map((ee) => ee.id)), d.current?.(x, i);
         return;
       }
       const ie = new Map(
@@ -1036,13 +1036,13 @@ function vt({
         (f) => S(f, s) === h
       );
       if (!g) return;
-      const C = te(g, c, s);
+      const C = re(g, c, s);
       if (u?.(C, i), D?.(g), !a) {
         r || p(void 0), d.current?.(void 0, i);
         return;
       }
-      const y = O.current.map(
-        (f) => te(f, c, s)
+      const y = I.current.map(
+        (f) => re(f, c, s)
       ).filter((f) => f.id !== h);
       r || p(y.map((f) => f.id)), d.current?.(y, i);
     },
@@ -1059,8 +1059,8 @@ function vt({
   ), W = j(
     (h) => {
       if (!a) return;
-      const g = new Set(h), m = O.current.map(
-        (y) => te(y, c, s)
+      const g = new Set(h), m = I.current.map(
+        (y) => re(y, c, s)
       ).filter((y) => !g.has(y.id));
       r || p(m.map((y) => y.id)), d.current?.(m, i);
     },
@@ -1099,7 +1099,7 @@ function yt(t) {
   return document.documentElement;
 }
 function Ct(t) {
-  const e = Y({
+  const e = J({
     renderOptionContext: !1,
     attachToParent: !1,
     onOptionClick: !1
@@ -1143,12 +1143,12 @@ function Ut(t) {
     overflow: d = "wrap",
     groupSelection: G,
     optionLabel: p,
-    optionValue: I,
+    optionValue: O,
     optionActive: T,
     renderOption: K,
     renderOptionGroupHeader: A,
     renderSelection: k,
-    renderOptionContext: O,
+    renderOptionContext: I,
     dropdownOptions: z,
     onChange: $,
     onClose: H,
@@ -1163,47 +1163,47 @@ function Ut(t) {
     helperComponent: y,
     errorComponent: f,
     inputProps: B,
-    className: L,
+    className: V,
     containerClassName: E,
-    buttonClassName: J,
+    buttonClassName: Q,
     dropdownClassName: _,
     width: oe,
     height: ie,
     tabIndex: le,
     name: x,
-    id: V
+    id: ee
   } = t;
   Ct(t);
-  const ue = Fe(), U = t.mobileDropdown === "drawer" && ue ? "drawer" : "list", q = X(
+  const ue = Fe(), U = t.mobileDropdown === "drawer" && ue ? "drawer" : "list", Y = Z(
     () => gt(z),
     [z]
-  ), he = Y(null), pe = Y(null), me = Y(!1), xe = Y(!1), N = $e(), ee = We(N.ref, U), M = vt({
+  ), he = J(null), pe = J(null), me = J(!1), xe = J(!1), N = $e(), te = We(N.ref, U), M = vt({
     options: a,
     value: n,
     defaultValue: r,
     isControlled: e,
     multiple: !!c,
     optionLabel: p,
-    optionValue: I,
+    optionValue: O,
     optionActive: T,
     groupSelection: c ? G : void 0,
     onChange: $,
     onOptionClick: R,
     onRemoveOption: W,
     name: x
-  }), re = St({
+  }), ne = St({
     options: a,
     optionLabel: p,
-    dropdownOptions: q
+    dropdownOptions: Y
   }), Se = j(
-    (v) => {
-      M.toggleOption(v), c || N.close();
+    (v, q) => {
+      M.toggleOption(v), (!c && q !== void 0 && q !== !1 || q) && N.close();
     },
     [M.toggleOption, c, N]
   ), ye = j(
-    (v, ne) => {
+    (v, q) => {
       const ce = M.flatOptions.find(
-        (fe) => S(fe, I) === v
+        (fe) => S(fe, O) === v
       );
       if (!(!ce || !ae(ce, T))) {
         if (!F) {
@@ -1215,7 +1215,7 @@ function Ut(t) {
           value: v,
           isSelected: M.selectedIds.has(v),
           multiple: !!c,
-          source: ne,
+          source: q,
           commit: () => Se(v),
           close: () => N.close()
         });
@@ -1223,7 +1223,7 @@ function Ut(t) {
     },
     [
       F,
-      I,
+      O,
       T,
       c,
       Se,
@@ -1231,30 +1231,30 @@ function Ut(t) {
       M.flatOptions,
       M.selectedIds
     ]
-  ), Q = mt({
+  ), X = mt({
     menuRef: N.ref,
     searchInputRef: he,
     optionsContainerRef: pe,
     onSelect: (v) => ye(v, "keyboard")
   });
-  se(() => N.subscribeOpenChange((ne) => {
-    ne || (me.current = !0, re.resetSearch(), Q.resetFocus(), H?.());
-  }), [N, re.resetSearch, Q.resetFocus, H]), se(() => {
-    !ee || q?.focusSearchInputOnOpen === !1 || q?.hideSearchBar && pe.current?.querySelector(
+  se(() => N.subscribeOpenChange((q) => {
+    q || (me.current = !0, ne.resetSearch(), X.resetFocus(), H?.());
+  }), [N, ne.resetSearch, X.resetFocus, H]), se(() => {
+    !te || Y?.focusSearchInputOnOpen === !1 || Y?.hideSearchBar && pe.current?.querySelector(
       '[role="option"]'
     )?.focus();
   }, [
-    ee,
-    q?.focusSearchInputOnOpen,
-    q?.hideSearchBar
+    te,
+    Y?.focusSearchInputOnOpen,
+    Y?.hideSearchBar
   ]);
   const Ge = j(() => {
     xe.current = !0, !u && (U === "drawer" ? N.toggle(void 0, "60%") : N.toggle());
   }, [u, N, U]), Ke = j(
     (v) => {
-      xe.current = !0, !(v.target !== v.currentTarget && (v.key === "Enter" || v.key === " ")) && Q.handleTriggerKeyDown(v);
+      xe.current = !0, !(v.target !== v.currentTarget && (v.key === "Enter" || v.key === " ")) && X.handleTriggerKeyDown(v);
     },
-    [Q.handleTriggerKeyDown]
+    [X.handleTriggerKeyDown]
   ), Me = j(() => {
     M.clearSelection(), P?.();
   }, [M.clearSelection, P]), ze = j(
@@ -1265,37 +1265,37 @@ function Ut(t) {
         return;
       }
       if (!xe.current) return;
-      v.target.matches(":focus-visible") && !g && !ee && !u && (U === "drawer" ? N.open(void 0, "60%") : N.open());
+      v.target.matches(":focus-visible") && !g && !te && !u && (U === "drawer" ? N.open(void 0, "60%") : N.open());
     },
-    [g, ee, u, N, U]
+    [g, te, u, N, U]
   );
   se(() => {
-    if (!ee || U !== "drawer") return;
+    if (!te || U !== "drawer") return;
     const v = N.triggerRef.current;
     if (!v) return;
-    const ne = setTimeout(() => {
+    const q = setTimeout(() => {
       const ce = window.innerHeight * 0.33, fe = v.getBoundingClientRect(), be = fe.top + fe.height / 2;
       if (be > ce) {
         const Pe = yt(v), He = be - ce;
         Pe.scrollBy({ top: He, behavior: "smooth" });
       }
     }, 250);
-    return () => clearTimeout(ne);
-  }, [ee, U, N.triggerRef]), bt(h, {
+    return () => clearTimeout(q);
+  }, [te, U, N.triggerRef]), bt(h, {
     menu: N,
     selectState: M,
     searchInputRef: he
   });
-  const Be = c ? i ?? "compact" : "compact", Ce = Y(null);
+  const Be = c ? i ?? "compact" : "compact", Ce = J(null);
   return Ue(() => {
     const v = N.triggerRef.current;
     Ce.current = v ? v.querySelector("[data-input-content]") : null;
   }), /* @__PURE__ */ o.jsxs(
     "div",
     {
-      className: Z("relative inline-flex w-full flex-col", L),
+      className: L("relative inline-flex w-full flex-col", V),
       style: oe ? { width: oe } : void 0,
-      id: V,
+      id: ee,
       children: [
         /* @__PURE__ */ o.jsx(
           dt,
@@ -1314,18 +1314,18 @@ function Ut(t) {
             displayMode: Be,
             overflow: d,
             optionLabel: p,
-            optionValue: I,
+            optionValue: O,
             renderSelection: k,
             onRemoveOption: M.removeOption,
             onRemoveGroup: M.removeOptions,
             onClear: P ? Me : void 0,
             onClick: Ge,
             onFocus: ze,
-            isOpen: ee,
+            isOpen: te,
             onKeyDown: Ke,
-            className: L,
+            className: V,
             containerClassName: E,
-            buttonClassName: J,
+            buttonClassName: Q,
             width: oe,
             height: ie,
             tabIndex: le,
@@ -1342,29 +1342,29 @@ function Ut(t) {
             anchorRef: Ce,
             dropdownVariant: U,
             attachToParent: t.attachToParent,
-            filteredOptions: re.filteredOptions,
+            filteredOptions: ne.filteredOptions,
             selectedIds: M.selectedIds,
             optionLabel: p,
-            optionValue: I,
+            optionValue: O,
             optionActive: T,
             multiple: !!c,
             renderOption: K,
             renderOptionGroupHeader: A,
-            renderOptionContext: O,
+            renderOptionContext: I,
             onSelect: (v) => ye(v, "mouse"),
             closeDropdown: N.close,
             onSelectGroup: M.selectGroup,
-            searchValue: re.searchValue,
-            onSearchChange: re.handleSearchChange,
-            onSearchClear: re.handleSearchClear,
+            searchValue: ne.searchValue,
+            onSearchChange: ne.handleSearchChange,
+            onSearchClear: ne.handleSearchClear,
             searchInputRef: he,
-            dropdownOptions: q,
-            onSearchKeyDown: Q.handleSearchKeyDown,
-            createOptionKeyHandler: Q.createOptionKeyHandler,
-            navigateNext: Q.navigateNext,
-            navigatePrev: Q.navigatePrev,
+            dropdownOptions: Y,
+            onSearchKeyDown: X.handleSearchKeyDown,
+            createOptionKeyHandler: X.createOptionKeyHandler,
+            navigateNext: X.navigateNext,
+            navigatePrev: X.navigatePrev,
             optionsContainerRef: pe,
-            isLoading: D || !!q?.isLoading,
+            isLoading: D || !!Y?.isLoading,
             emptyMessage: C,
             disabled: u,
             size: b,

package/dist/components/Button/Button.d.ts

@@ -3,7 +3,7 @@ import { IconProps } from '../../Icons/iconUtils';
 import { ButtonColor, ButtonVariant, SizeVariant } from '../Shared/types';
 type ButtonIconElement = React.ReactElement<IconProps, IconComponent>;
 type ButtonIcon = IconComponent | ButtonIconElement;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
     label?: string;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     icon?: ButtonIcon;
@@ -27,5 +27,5 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     color?: ButtonColor;
     hideSpinner?: boolean;
 }
-declare const _default: import('react').MemoExoticComponent<({ label, onClick, icon, contentClassName, loadingText, animate, animateIcon, isLoading, children, hideSpinner, spinner, type, className, disabled, variant, form, size, color, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').NamedExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default _default;

package/dist/components/IconButton/IconButton.d.ts

@@ -1,6 +1,6 @@
 import { PyrionColor, ButtonVariant, SizeVariant } from '../Shared/types';
 import { IconComponent } from '../../Icons/types';
-export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> {
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     icon?: IconComponent;
     contentClassName?: string;
@@ -18,5 +18,5 @@ export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     color?: PyrionColor;
     hideSpinner?: boolean;
 }
-declare const _default: import('react').MemoExoticComponent<({ onClick, icon, contentClassName, animate, animateIcon, isLoading, children, hideSpinner, spinner, type, className, disabled, variant, form, size, color, }: IconButtonProps) => React.ReactElement>;
+declare const _default: import('react').NamedExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default _default;

package/package.json

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