prometeo-design-system 2.6.6 → 2.6.8

package/dist/{Select-D3aU7dXF.js → Select-CMjYSSZB.js}

@@ -5,7 +5,7 @@ import je, { memo as q, useState as fe, useRef as V, useMemo as Z, useCallback a
 import Re from "./Spinner.es.js";
 import { createPortal as Be } from "react-dom";
 import { u as We } from "./useDragScroll-CHN9OMwn.js";
-import { u as Ke, I as qe } from "./Input-i6OzjjFo.js";
+import { u as Ke, I as qe } from "./Input-R52CsX56.js";
 import { H as Ue } from "./HelperComponent-U6mPwuDH.js";
 import Fe from "./CheckBox.es.js";
 import { Skeleton as Oe } from "./Skeleton.es.js";
@@ -25,7 +25,7 @@ const Ge = {
 }, Ee = {
   icon: " text-neutral-default-disabled",
   container: " border-neutral-strong-default text-neutral-default-disabled"
-}, He = ({ id: e, label: t, onRemove: o, className: i, disabled: u, variant: p = "default", tabIndex: S }) => /* @__PURE__ */ l.jsxs(
+}, He = ({ id: e, label: t, onRemove: a, className: i, disabled: u, variant: p = "default", tabIndex: S }) => /* @__PURE__ */ l.jsxs(
   "div",
   {
     tabIndex: S,
@@ -36,11 +36,11 @@ const Ge = {
     ),
     children: [
       /* @__PURE__ */ l.jsx("span", { className: "truncate w-max ", children: t }),
-      o && /* @__PURE__ */ l.jsx(
+      a && /* @__PURE__ */ l.jsx(
         "button",
         {
           onMouseDown: (s) => {
-            u || (s.stopPropagation(), s.preventDefault(), o?.(e));
+            u || (s.stopPropagation(), s.preventDefault(), a?.(e));
           },
           className: c(
             "shrink-0 p-0.5 transition-all duration-200 hover:text-neutral-default-hover cursor-pointer z-50 text-neutral-default-default hover:scale-105",
@@ -60,9 +60,9 @@ const Ve = q(He);
 function z(e, t) {
   if (typeof t == "function")
     return t(e);
-  const o = t?.split(".");
+  const a = t?.split(".");
   let i = e;
-  for (const u of o)
+  for (const u of a)
     if (i && typeof i == "object" && u in i)
       i = i[u];
     else
@@ -71,7 +71,7 @@ function z(e, t) {
 }
 const Le = (e, t) => {
   if (!t) return !0;
-  const o = 0.1, i = String(e).toLowerCase(), u = String(t).toLowerCase().trim();
+  const a = 0.1, i = String(e).toLowerCase(), u = String(t).toLowerCase().trim();
   if (i.includes(u)) return !0;
   const p = u.split(/\s+/).filter(Boolean), S = p.filter((d) => /^\d+$/.test(d));
   if (p.length > 1 || S.length > 0) {
@@ -83,15 +83,15 @@ const Le = (e, t) => {
     return !0;
   }
   if (u.length > i.length) return !1;
-  const s = Math.floor(u.length * o);
+  const s = Math.floor(u.length * a);
   if (s <= 0) return !1;
   const _ = (d, D) => {
-    const M = d.length, L = D.length;
-    if (M === 0) return L;
-    if (L === 0) return M;
+    const $ = d.length, L = D.length;
+    if ($ === 0) return L;
+    if (L === 0) return $;
     const h = new Array(L + 1);
     for (let v = 0; v <= L; v++) h[v] = v;
-    for (let v = 1; v <= M; v++) {
+    for (let v = 1; v <= $; v++) {
       let C = v - 1;
       h[0] = v;
       for (let k = 1; k <= L; k++) {
@@ -171,7 +171,7 @@ const Le = (e, t) => {
   )
 };
 function Je(e) {
-  const [t, o] = fe(!1), [i, u] = fe([]), [p, S] = fe(""), s = V(null), _ = V(null), d = V(null), D = V(null), M = V(() => {
+  const [t, a] = fe(!1), [i, u] = fe([]), [p, S] = fe(""), s = V(null), _ = V(null), d = V(null), D = V(null), $ = V(() => {
   }), L = V(null), h = V(/* @__PURE__ */ new Set()), {
     id: v,
     name: C,
@@ -183,11 +183,11 @@ function Je(e) {
     placeholder: E,
     optionValue: N,
     optionLabel: R,
-    renderOption: oe,
-    renderSelection: ae,
+    renderOption: ae,
+    renderSelection: oe,
     renderOptionContext: se,
     buttonClassName: Q,
-    dropdownClassName: P,
+    dropdownClassName: M,
     containerClassName: ie,
     dropdownOptions: y,
     helperComponent: te,
@@ -208,7 +208,7 @@ function Je(e) {
   } = e, { ref: ye } = Ke(), { bind: K, ref: ve } = We({
     axis: "x",
     cursor: { idle: "default", dragging: "grabbing" }
-  }), G = e.multiple ? Array.isArray(e.value) && e.value.length > 0 : e.value !== void 0 && e.value !== null && e.value !== "", r = {}, a = Z(() => W === "static" && E ? E : "", [W, E]), f = Z(
+  }), G = e.multiple ? Array.isArray(e.value) && e.value.length > 0 : e.value !== void 0 && e.value !== null && e.value !== "", r = {}, o = Z(() => W === "static" && E ? E : "", [W, E]), f = Z(
     () => y?.controledSearchValue || p,
     [y?.controledSearchValue, p]
   ), x = () => {
@@ -251,24 +251,24 @@ function Je(e) {
   ), b = Z(
     () => new Set(ne.map((n) => n.id)),
     [ne]
-  ), $ = J(() => {
-    o((n) => !n);
+  ), P = J(() => {
+    a((n) => !n);
   }, []);
-  M.current = (n) => {
+  $.current = (n) => {
     if (!e.multiple)
       e.onChange?.(n, C);
     else {
       const m = e.value || [], w = [], le = m.includes(n.value);
       m.forEach((we) => {
-        const ke = T.find(($e) => $e.value === we);
+        const ke = T.find((Pe) => Pe.value === we);
         ke && w.push(ke);
       });
-      const Pe = le ? w.filter((we) => we.value !== n.value) : [...w, n];
-      e.onChange?.(Pe, C);
+      const Me = le ? w.filter((we) => we.value !== n.value) : [...w, n];
+      e.onChange?.(Me, C);
     }
   };
   const re = J((n, m = !1) => {
-    Y?.(n, C), M.current?.(n), m && (o(!1), he?.());
+    Y?.(n, C), $.current?.(n), m && (a(!1), he?.());
   }, [Y, he, C]), ze = (n) => {
     n.preventDefault(), n.stopPropagation(), n.target.blur(), B?.(), e.multiple ? e.onChange?.([], C) : e.onChange?.(void 0, C);
   }, Ce = J((n) => {
@@ -276,7 +276,7 @@ function Je(e) {
     const m = g.find((le) => z(le, N) === n);
     if (!m) return;
     const w = O(m);
-    Y?.(w, C), M.current?.(w), X?.(m);
+    Y?.(w, C), $.current?.(w), X?.(m);
   }, [Y, X, g, C, e.multiple, e.onChange, O, N]), Ae = J((n) => {
     Ce(n);
   }, [Ce]);
@@ -286,13 +286,13 @@ function Je(e) {
       const w = m.target;
       if (m.type === "mousedown") {
         if (s.current?.contains(w) || _.current?.contains(w)) return;
-        o(!1);
+        a(!1);
       }
       if (m.type === "scroll") {
         if (_.current?.contains(w)) return;
-        o(!1);
+        a(!1);
       }
-      m.type === "resize" && o(!1);
+      m.type === "resize" && a(!1);
     };
     return document.addEventListener("mousedown", n), window.addEventListener("scroll", n, !0), window.addEventListener("resize", n, !0), () => {
       document.removeEventListener("mousedown", n), window.removeEventListener("scroll", n, !0), window.removeEventListener("resize", n, !0);
@@ -306,12 +306,12 @@ function Je(e) {
     });
   }, [t]), _e(j, () => ({
     open: () => {
-      !t && o(!0);
+      !t && a(!0);
     },
     close: () => {
-      t && o(!1);
+      t && a(!1);
     },
-    toggle: () => o((n) => !n),
+    toggle: () => a((n) => !n),
     handleOptionSelect: re,
     subscribeOpenChange: (n) => (h.current.add(n), () => {
       h.current.delete(n);
@@ -319,11 +319,11 @@ function Je(e) {
     searchInputRef: d
   }), [t, re]);
   const Te = (n) => {
-    n.preventDefault(), n.stopPropagation(), n.target.matches(":focus-visible") && !be && !t && (o(!0), setTimeout(() => {
+    n.preventDefault(), n.stopPropagation(), n.target.matches(":focus-visible") && !be && !t && (a(!0), setTimeout(() => {
       d.current?.focus();
     }, 10));
-  }, Me = (n) => {
-    n.key === "Tab" && t && o(!1), (n.keyCode === 32 || n.key === "ArrowDown") && (o(!0), setTimeout(() => {
+  }, $e = (n) => {
+    n.key === "Tab" && t && a(!1), (n.keyCode === 32 || n.key === "ArrowDown") && (a(!0), setTimeout(() => {
       d.current?.focus();
     }, 10));
   };
@@ -363,9 +363,9 @@ function Je(e) {
               role: "button",
               ref: D,
               onFocus: Te,
-              onKeyDown: Me,
+              onKeyDown: $e,
               onClick: (n) => {
-                n.preventDefault(), n.stopPropagation(), $();
+                n.preventDefault(), n.stopPropagation(), P();
               },
               className: c(
                 "w-full px-2 text-left border rounded-lg transition-all duration-200 ease-in-out",
@@ -389,9 +389,9 @@ function Je(e) {
                     onPointerLeave: K.onPointerLeave,
                     onPointerCancel: K.onPointerCancel,
                     onClickCapture: K.onClickCapture,
-                    children: ae ? je.createElement(
+                    children: oe ? je.createElement(
                       q(
-                        ae,
+                        oe,
                         (n, m) => n.disabled === m.disabled && n.multiple === m.multiple
                       ),
                       {
@@ -406,7 +406,7 @@ function Je(e) {
                       {
                         displayMode: ce,
                         selectedOptions: ne,
-                        placeholder: a,
+                        placeholder: o,
                         onRemoveOption: Ce,
                         multiple: e.multiple || !1,
                         className: c(pe === "scroll" ? "flex-nowrap" : "flex-wrap"),
@@ -453,21 +453,21 @@ function Je(e) {
             optionLabel: R,
             optionValue: N,
             labelVariant: W,
-            renderOption: oe,
+            renderOption: ae,
             renderOptionContext: se,
             emptyMessage: de,
             attachToParent: xe,
             filteredOptions: i,
-            dropdownClassName: P,
+            dropdownClassName: M,
             setFilteredOptions: u,
             selectedOptionsIds: b,
-            options: oe ? g : T,
+            options: ae ? g : T,
             selectRef: s,
             dropdownRef: _,
             selectButtonRef: D,
             helperComponentRef: L,
             onOptionClick: re,
-            onCloseDropdown: () => o(!1),
+            onCloseDropdown: () => a(!1),
             searchValue: f,
             setSearchValue: S,
             searchInputRef: d,
@@ -499,7 +499,7 @@ const Qe = q(Je, (e, t) => e.value === t.value && e.options === t.options && e.i
 function Xe({
   footer: e,
   isOpen: t,
-  options: o,
+  options: a,
   multiple: i,
   disabled: u,
   selectRef: p,
@@ -508,7 +508,7 @@ function Xe({
   optionLabel: _,
   optionValue: d,
   searchValue: D,
-  labelVariant: M,
+  labelVariant: $,
   emptyMessage: L,
   renderOption: h,
   renderOptionContext: v,
@@ -521,35 +521,35 @@ function Xe({
   filteredOptions: E,
   selectButtonRef: N,
   onCloseDropdown: R,
-  loadingComponent: oe,
-  dropdownClassName: ae,
+  loadingComponent: ae,
+  dropdownClassName: oe,
   helperComponentRef: se,
   selectedOptionsIds: Q,
-  setFilteredOptions: P,
+  setFilteredOptions: M,
   onSearchValueChange: ie,
   isLoading: y = !1,
   hideSearchBar: te = !1,
   inputSearchPlaceholder: ue = "Buscar opciones"
 }) {
-  const X = e ? 380 : 320, Y = M === "static" ? -20 : 7, B = J(() => j ? j.endsWith("px") ? Number(j.replace("px", "")) : j.endsWith("vh") ? window.innerHeight * Number(j.replace("vh", "")) / 100 : j.endsWith("%") ? window.innerHeight * Number(j.replace("%", "")) / 100 : X : X, [j, X])(), [H, pe] = fe({ direction: "down", height: B }), F = (r) => {
+  const X = e ? 380 : 320, Y = $ === "static" ? -20 : 7, B = J(() => j ? j.endsWith("px") ? Number(j.replace("px", "")) : j.endsWith("vh") ? window.innerHeight * Number(j.replace("vh", "")) / 100 : j.endsWith("%") ? window.innerHeight * Number(j.replace("%", "")) / 100 : X : X, [j, X])(), [H, pe] = fe({ direction: "down", height: B }), F = (r) => {
     if (!s.current || !p.current) return;
-    const a = p.current.getBoundingClientRect();
+    const o = p.current.getBoundingClientRect();
     switch (r || H.direction) {
       case "down":
-        s.current.style.top = `${a.top + a.height - (se?.current?.offsetHeight ? se?.current?.offsetHeight + 4 : 0)}px`;
+        s.current.style.top = `${o.top + o.height - (se?.current?.offsetHeight ? se?.current?.offsetHeight + 4 : 0)}px`;
         break;
       case "up":
-        s.current.style.top = "auto", s.current.style.bottom = `${window.innerHeight - a.top + Y}px`;
+        s.current.style.top = "auto", s.current.style.bottom = `${window.innerHeight - o.top + Y}px`;
         break;
     }
-    s.current.style.left = `${a.left}px`, s.current.style.width = `${a.width}px`;
+    s.current.style.left = `${o.left}px`, s.current.style.width = `${o.width}px`;
   }, ge = (r) => {
     s.current && (s.current.style.maxHeight = `${r}px`);
   }, xe = () => {
     if (!s.current || !p.current) return H;
-    const r = p.current.getBoundingClientRect(), a = window.innerHeight - (window.innerHeight - r.top), f = window.innerHeight - r.bottom, x = f >= B, O = a >= B;
+    const r = p.current.getBoundingClientRect(), o = window.innerHeight - (window.innerHeight - r.top), f = window.innerHeight - r.bottom, x = f >= B, O = o >= B;
     let T = "down", I;
-    return x ? (T = "down", I = B) : O ? (T = "up", I = B) : f > a ? (T = "down", I = f - 16) : (T = "up", I = a - 16), { direction: T, height: I };
+    return x ? (T = "down", I = B) : O ? (T = "up", I = B) : f > o ? (T = "down", I = f - 16) : (T = "up", I = o - 16), { direction: T, height: I };
   }, ce = (r) => {
     if (!(!s.current || !p.current)) {
       if (s.current.style.transition = "max-height 0.2s ease,opacity 0.2s ease", !r) {
@@ -557,8 +557,8 @@ function Xe({
         return;
       }
       if (!A) {
-        const a = xe();
-        pe(a), F(a.direction), ge(a.height);
+        const o = xe();
+        pe(o), F(o.direction), ge(o.height);
       }
       s.current.style.opacity = "1", s.current.style.pointerEvents = "auto";
     }
@@ -568,15 +568,15 @@ function Xe({
   }, [Q]), ee(() => {
     ce(t);
   }, [t]), ee(() => {
-    o && P(o);
-  }, [o]), ee(() => {
+    a && M(a);
+  }, [a]), ee(() => {
     if (y || !D) return;
-    const r = W(o, D);
-    P(r);
-  }, [o]);
-  const W = (r, a) => r.filter((f) => Le(h ? z(f, _) : f.label, a)), be = (r) => {
-    const a = W(o, r);
-    if (P(a), ie) {
+    const r = W(a, D);
+    M(r);
+  }, [a]);
+  const W = (r, o) => r.filter((f) => Le(h ? z(f, _) : f.label, o)), be = (r) => {
+    const o = W(a, r);
+    if (M(o), ie) {
       if (r === "") {
         de();
         return;
@@ -584,23 +584,23 @@ function Xe({
       ie(r);
       return;
     }
-    g && o && g(r);
+    g && a && g(r);
   }, de = J(() => {
     if (k) {
-      k(), P(
-        o.filter((r) => {
-          const a = h ? z(r, d) : r.id;
-          return Q.has(a);
+      k(), M(
+        a.filter((r) => {
+          const o = h ? z(r, d) : r.id;
+          return Q.has(o);
         })
       );
       return;
     }
-    g && (g(""), P(o));
-  }, [o, Q, d, k, P, g, h]), ye = (r) => {
+    g && (g(""), M(a));
+  }, [a, Q, d, k, M, g, h]), ye = (r) => {
     r.key === "ArrowDown" ? (r.preventDefault(), s.current?.querySelector("[role=listitem]")?.focus()) : (r.key === "Tab" || r.key === "Escape") && setTimeout(() => {
       N.current?.focus(), R();
     }, 10);
-  }, K = (r, a) => {
+  }, K = (r, o) => {
     const f = Array.from(s.current?.querySelectorAll("[role=listitem]") || []), x = f.indexOf(r.currentTarget);
     if (r.key === "ArrowDown") {
       r.preventDefault();
@@ -615,7 +615,7 @@ function Xe({
       }
     else if (r.key === "Enter" || r.key === " ") {
       if (r.preventDefault(), u) return;
-      C(a, !i), i || setTimeout(() => {
+      C(o, !i), i || setTimeout(() => {
         N.current?.focus(), R();
       }, 10);
     } else r.key === "Escape" ? (r.preventDefault(), setTimeout(() => {
@@ -623,14 +623,14 @@ function Xe({
     }, 10)) : r.key === "Tab" && setTimeout(() => {
       N.current?.focus(), R();
     }, 10);
-  }, ve = Array.from({ length: 5 }).map((r, a) => h ? je.createElement(
+  }, ve = Array.from({ length: 5 }).map((r, o) => h ? je.createElement(
     q(
       h,
       (f, x) => f.isSelected === x.isSelected && f.option === x.option && f.disabled === x.disabled && f.multiple === x.multiple && f.renderContext === x.renderContext
     ),
     {
-      key: `skeleton-option-${a}`,
-      option: { id: a, label: "", value: "" },
+      key: `skeleton-option-${o}`,
+      option: { id: o, label: "", value: "" },
       isSelected: !1,
       multiple: !1,
       onSelect: () => {
@@ -647,10 +647,10 @@ function Xe({
       onSelect: () => {
       },
       isSelected: !1,
-      option: { id: a, label: "", value: "" }
+      option: { id: o, label: "", value: "" }
     },
     `skeleton-option-${// biome-ignore lint/suspicious/noArrayIndexKey: <>
-    a}`
+    o}`
   )), G = /* @__PURE__ */ l.jsx(
     "div",
     {
@@ -662,7 +662,7 @@ function Xe({
         " overflow-hidden focus-visible:bg-neutral-default-hover    ",
         A ? "absolute z-50 " : "fixed z-100 top-0 left-0",
         H.direction === "up" ? "h-auto" : " h-max",
-        ae
+        oe
       ),
       children: /* @__PURE__ */ l.jsxs(
         "div",
@@ -697,9 +697,9 @@ function Xe({
                 ...S
               }
             ),
-            /* @__PURE__ */ l.jsx("div", { className: " overflow-y-auto flex-1 max-h-max ", children: E.length === 0 ? y ? /* @__PURE__ */ l.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: oe || ve }) : /* @__PURE__ */ l.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: D ? `No se encontraron resultados para "${D}"` : L }) : E.map((r) => {
-              const a = h ? z(r, d) : r.id, f = Q.has(a), x = (b) => h ? {
-                id: a,
+            /* @__PURE__ */ l.jsx("div", { className: " overflow-y-auto flex-1 max-h-max ", children: E.length === 0 ? y ? /* @__PURE__ */ l.jsx("div", { className: "flex flex-col gap-1 overflow-hidden w-full", children: ae || ve }) : /* @__PURE__ */ l.jsx("div", { className: "px-3 py-2 text-neutral-medium-default", children: D ? `No se encontraron resultados para "${D}"` : L }) : E.map((r) => {
+              const o = h ? z(r, d) : r.id, f = Q.has(o), x = (b) => h ? {
+                id: o,
                 label: String(z(b, _)),
                 value: z(b, d)
               } : b, O = (b) => {
@@ -707,18 +707,18 @@ function Xe({
               }, T = (b) => {
                 if (C(b, !i), !i) {
                   if (!g) return;
-                  g(""), P(o);
+                  g(""), M(a);
                 }
-              }, I = (b, $) => (
+              }, I = (b, P) => (
                 // biome-ignore lint/a11y/useSemanticElements: <>
                 /* @__PURE__ */ l.jsx(
                   "div",
                   {
                     tabIndex: 0,
                     role: "listitem",
-                    onKeyDown: (re) => K(re, $),
+                    onKeyDown: (re) => K(re, P),
                     className: c(
-                      "focus-visible:bg-neutral-medium-hover outline-none hover:bg-neutral-medium-hover ",
+                      `${!h && "focus-visible:bg-neutral-medium-hover outline-none hover:bg-neutral-medium-hover"}`,
                       f && "bg-neutral-medium-selected"
                     ),
                     children: b
@@ -727,10 +727,10 @@ function Xe({
               ), ne = h ? je.createElement(
                 q(
                   h,
-                  (b, $) => b.isSelected === $.isSelected && b.option === $.option && b.disabled === $.disabled && b.multiple === $.multiple && b.renderContext === $.renderContext
+                  (b, P) => b.isSelected === P.isSelected && b.option === P.option && b.disabled === P.disabled && b.multiple === P.multiple && b.renderContext === P.renderContext
                 ),
                 {
-                  key: a,
+                  key: o,
                   option: r,
                   isSelected: f,
                   multiple: i,
@@ -749,7 +749,7 @@ function Xe({
                   onSelect: T,
                   option: r
                 },
-                a
+                o
               );
               return I(ne, x(r));
             }) }),
@@ -761,7 +761,7 @@ function Xe({
   );
   return A ? G : Be(G, document.body);
 }
-const Ye = q(Xe, (e, t) => e.options === t.options && e.selectedOptionsIds === t.selectedOptionsIds && e.multiple === t.multiple && e.disabled === t.disabled && e.emptyMessage === t.emptyMessage && e.renderOption === t.renderOption && e.renderOptionContext === t.renderOptionContext && e.isOpen === t.isOpen && e.attachToParent === t.attachToParent && e.optionValue === t.optionValue && e.optionLabel === t.optionLabel && e.filteredOptions === t.filteredOptions && e.isLoading === t.isLoading), Ne = q(({ option: e, isSelected: t, onSelect: o, multiple: i, disabled: u, isLoading: p }) => p ? /* @__PURE__ */ l.jsxs("div", { className: "flex gap-2 w-full px-3 py-2 cursor-wait", children: [
+const Ye = q(Xe, (e, t) => e.options === t.options && e.selectedOptionsIds === t.selectedOptionsIds && e.multiple === t.multiple && e.disabled === t.disabled && e.emptyMessage === t.emptyMessage && e.renderOption === t.renderOption && e.renderOptionContext === t.renderOptionContext && e.isOpen === t.isOpen && e.attachToParent === t.attachToParent && e.optionValue === t.optionValue && e.optionLabel === t.optionLabel && e.filteredOptions === t.filteredOptions && e.isLoading === t.isLoading), Ne = q(({ option: e, isSelected: t, onSelect: a, multiple: i, disabled: u, isLoading: p }) => p ? /* @__PURE__ */ l.jsxs("div", { className: "flex gap-2 w-full px-3 py-2 cursor-wait", children: [
   /* @__PURE__ */ l.jsx(Oe, { className: "size-6 aspect-square" }),
   /* @__PURE__ */ l.jsx(Oe, { className: "flex-1 h-6" })
 ] }) : (
@@ -770,7 +770,7 @@ const Ye = q(Xe, (e, t) => e.options === t.options && e.selectedOptionsIds === t
     "div",
     {
       onMouseDown: (S) => {
-        S.preventDefault(), S.stopPropagation(), !u && o?.(e);
+        S.preventDefault(), S.stopPropagation(), !u && a?.(e);
       },
       className: c(
         "px-3 py-2 cursor-pointer flex items-center transition-colors text-neutral-default-default ",
@@ -791,13 +791,13 @@ const Ye = q(Xe, (e, t) => e.options === t.options && e.selectedOptionsIds === t
   )
 ), (e, t) => e.isSelected === t.isSelected);
 Ne.displayName = "DefaultOptionRenderer";
-const Ie = q(({ selectedOptions: e, placeholder: t, onRemoveOption: o, displayMode: i, multiple: u, className: p, disabled: S }) => e?.length === 0 ? t ? /* @__PURE__ */ l.jsx("span", { className: "text-neutral-medium-default opacity-50", children: t }) : null : i === "chips" && u ? /* @__PURE__ */ l.jsx("div", { className: c("flex items-center gap-1 ", p), children: e.map((s) => /* @__PURE__ */ l.jsx(
+const Ie = q(({ selectedOptions: e, placeholder: t, onRemoveOption: a, displayMode: i, multiple: u, className: p, disabled: S }) => e?.length === 0 ? t ? /* @__PURE__ */ l.jsx("span", { className: "text-neutral-medium-default opacity-50", children: t }) : null : i === "chips" && u ? /* @__PURE__ */ l.jsx("div", { className: c("flex items-center gap-1 ", p), children: e.map((s) => /* @__PURE__ */ l.jsx(
   Ve,
   {
     tabIndex: -1,
     id: s.id,
     label: s.label,
-    onRemove: o,
+    onRemove: a,
     disabled: S
   },
   s.id

package/dist/Select.es.js

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

package/dist/SelectFormik.es.js

@@ -1,6 +1,6 @@
 import { j as d } from "./jsx-runtime-DKDX3adD.js";
 import { useField as y } from "formik";
-import { S as m } from "./Select-D3aU7dXF.js";
+import { S as m } from "./Select-CMjYSSZB.js";
 import { useRef as p, useEffect as g } from "react";
 function f(e) {
   return Array.isArray(e) && e.every(

package/dist/SelectSearch.es.js

@@ -1,5 +1,5 @@
 import { j as G } from "./jsx-runtime-DKDX3adD.js";
-import { g as i, S as H } from "./Select-D3aU7dXF.js";
+import { g as i, S as H } from "./Select-CMjYSSZB.js";
 import { useState as w, useRef as T, useEffect as h, useMemo as Q, useCallback as X } from "react";
 function te(e) {
   const {

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

@@ -0,0 +1,23 @@
+import { ButtonVariant, ColorVariant, SizeVariant } from '../Shared/types';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    label?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    icon?: React.ReactNode;
+    contentClassName?: string;
+    loadingText?: string;
+    animate?: boolean;
+    animateIcon?: boolean;
+    isLoading?: boolean;
+    children?: React.ReactNode;
+    spinner?: React.ReactNode;
+    type?: 'button' | "submit" | "reset";
+    className?: string;
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    form?: string;
+    size?: SizeVariant;
+    color?: ColorVariant;
+    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 }: ButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/Drawer/DrawerDesktop.d.ts

@@ -5,8 +5,8 @@ export interface DrawerDesktopHandle<TContext = unknown> {
     getContext: () => TContext | null;
 }
 export interface DrawerDesktopProps<TContext = unknown> {
-    children?: React.ReactNode;
-    direction?: 'left' | 'right';
+    children?: React.ReactNode | ((context: TContext | null) => React.ReactNode);
+    direction?: "left" | "right";
     modal?: boolean;
     className?: string;
     onClose?: (context?: TContext) => void;

package/dist/components/Header/Header.d.ts

@@ -5,6 +5,7 @@ export interface IHeader {
     className?: string;
     subtitle?: string;
     subtitleClassName?: string;
+    titleClassName?: string;
 }
-declare const _default: import('react').MemoExoticComponent<({ title, subtitle, children, className, subtitleClassName }: IHeader) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ title, subtitle, children, className, subtitleClassName, titleClassName }: IHeader) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/exports/ButtonV2.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../components/Button/ButtonV2';
+export type { ButtonProps } from '../components/Button/ButtonV2';

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { default as FAButton } from './components/FAB/FAButton';
 export { default as InputFormikV2 } from './components/InputFormik/InputFormikV2';
 export { default as RadioButtonFormik } from './components/RadioButtonFormik/RadioButtonFormik';
 export { default as RadioButton } from './components/RadioButton/RadioButton';
+export { default as ButtonV2 } from './components/Button/ButtonV2';
 export * from './components/Sidebar';
 export { SecondaryBar } from './components/Sidebar/SecondaryBar/SecondaryBar';
 export { Badge } from './components/Sidebar/components/badge';
@@ -108,4 +109,5 @@ export type { FAButtonProps } from './components/FAB/FAButton';
 export type { IInputFormikV2 } from './components/InputFormik/InputFormikV2';
 export type { RadioButtonProps } from './components/RadioButton/RadioButton';
 export type { RadioButtonFormikProps } from './components/RadioButtonFormik/RadioButtonFormik';
+export type { ButtonProps as ButtonV2Props } from './components/Button/ButtonV2';
 export { Icons } from './Icons/Icons';

package/dist/preview/ButtonPreview.d.ts

@@ -0,0 +1,2 @@
+declare const ButtonPreview: () => import("react/jsx-runtime").JSX.Element;
+export default ButtonPreview;