bmi-next-brokers 2.3.0 → 2.3.2

package/dist/components/Select/Select.js

@@ -1,5 +1,5 @@
-import { jsxs as b, jsx as o, Fragment as te } from "react/jsx-runtime";
-import { useState as P, useRef as N, useEffect as ne, useMemo as he, useLayoutEffect as Qe } from "react";
+import { jsxs as b, jsx as o, Fragment as ee } from "react/jsx-runtime";
+import { useState as P, useRef as N, useEffect as te, useMemo as ue, useLayoutEffect as Qe } from "react";
 import { createPortal as Me } from "react-dom";
 import { Icon as F } from "../../icons/Icon.js";
 import { HelperText as je } from "../helperText/index.js";
@@ -9,7 +9,7 @@ import { Drawer as Xe } from "../drawer/index.js";
 import { useClose as Ge } from "../../hooks/useClose.js";
 import { Input as Je } from "../Input/Input.js";
 import { useBTC as Ke } from "../../hooks/btcContext/useBtcContext.js";
-import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_selectContainer_medium_1sakp_47", ze = "_selectContainer_large_1sakp_55", et = "_selectContainer_extraLarge_1sakp_57", tt = "_label_1sakp_75", nt = "_label_large_1sakp_89", rt = "_label_extraLarge_1sakp_91", ot = "_label_disabled_1sakp_99", st = "_label_inverted_1sakp_107", at = "_label_inverted_disabled_1sakp_115", lt = "_selectWrapper_1sakp_133", it = "_select_1sakp_23", ct = "_open_1sakp_213", dt = "_disabled_1sakp_221", _t = "_placeholder_1sakp_235", pt = "_small_1sakp_257", ut = "_medium_1sakp_279", ht = "_large_1sakp_301", mt = "_extraLarge_1sakp_323", ft = "_selectValue_1sakp_351", bt = "_selectInput_1sakp_371", gt = "_error_1sakp_467", wt = "_btc_1sakp_495", kt = "_errorShake_1sakp_1", vt = "_inverted_1sakp_625", St = "_chevron_1sakp_685", $t = "_icon_inverted_1sakp_693", Ct = "_icon_inverted_disabled_1sakp_825", Lt = "_chevronOpen_1sakp_893", Dt = "_icon_1sakp_693", yt = "_icon_disabled_1sakp_927", xt = "_iconLabel_1sakp_945", Nt = "_optionIcon_1sakp_967", Wt = "_required_1sakp_989", Ot = "_required_inverted_1sakp_999", It = "_required_disabled_1sakp_1007", Et = "_required_inverted_disabled_1sakp_1015", Tt = "_dropdown_1sakp_1033", qt = "_highlight_1sakp_1067", Vt = "_isDrawer_1sakp_1083", Ht = "_dropdownPortal_1sakp_1129", Rt = "_drawerSelect_1sakp_1155", Bt = "_drawerSelectHeader_1sakp_1163", Pt = "_drawerSearchInput_1sakp_1171", Ft = "_option_1sakp_967", Qt = "_optionSelected_1sakp_1203", Mt = "_optionWithCheckbox_1sakp_1295", jt = "_optionCheckbox_1sakp_1307", At = "_optionWithDescriptionWrapper_1sakp_1395", Yt = "_optionWithDescription_1sakp_1395", Xt = "_optionWithDescriptionLabel_1sakp_1427", Gt = "_optionWithDescriptionValue_1sakp_1439", Jt = "_dropdownTable_1sakp_1459", Kt = "_optionTable_1sakp_1469", Ut = "_tableColumn_1sakp_1485", Zt = "_columnHeader_1sakp_1501", zt = "_columnValue_1sakp_1517", en = "_noResults_1sakp_1551", tn = "_dropdown_inverted_1sakp_1579", nn = "_option_inverted_1sakp_1625", e = {
+import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_selectContainer_medium_1sakp_47", ze = "_selectContainer_large_1sakp_55", et = "_selectContainer_extraLarge_1sakp_57", tt = "_label_1sakp_75", nt = "_label_large_1sakp_89", rt = "_label_extraLarge_1sakp_91", ot = "_label_disabled_1sakp_99", st = "_label_inverted_1sakp_107", at = "_label_inverted_disabled_1sakp_115", lt = "_selectWrapper_1sakp_133", it = "_select_1sakp_23", ct = "_open_1sakp_213", dt = "_disabled_1sakp_221", _t = "_placeholder_1sakp_235", pt = "_small_1sakp_257", ut = "_medium_1sakp_279", ht = "_large_1sakp_301", mt = "_extraLarge_1sakp_323", ft = "_selectValue_1sakp_351", bt = "_selectInput_1sakp_371", gt = "_error_1sakp_467", wt = "_btc_1sakp_495", kt = "_errorShake_1sakp_1", vt = "_inverted_1sakp_625", St = "_chevron_1sakp_685", $t = "_icon_inverted_1sakp_693", Ct = "_icon_inverted_disabled_1sakp_825", Lt = "_chevronOpen_1sakp_893", Dt = "_icon_1sakp_693", yt = "_icon_disabled_1sakp_927", xt = "_iconLabel_1sakp_945", Nt = "_optionIcon_1sakp_967", Wt = "_required_1sakp_989", It = "_required_inverted_1sakp_999", Ot = "_required_disabled_1sakp_1007", Et = "_required_inverted_disabled_1sakp_1015", Tt = "_dropdown_1sakp_1033", qt = "_highlight_1sakp_1067", Vt = "_isDrawer_1sakp_1083", Ht = "_dropdownPortal_1sakp_1129", Rt = "_drawerSelect_1sakp_1155", Bt = "_drawerSelectHeader_1sakp_1163", Pt = "_drawerSearchInput_1sakp_1171", Ft = "_option_1sakp_967", Qt = "_optionSelected_1sakp_1203", Mt = "_optionWithCheckbox_1sakp_1295", jt = "_optionCheckbox_1sakp_1307", At = "_optionWithDescriptionWrapper_1sakp_1395", Yt = "_optionWithDescription_1sakp_1395", Xt = "_optionWithDescriptionLabel_1sakp_1427", Gt = "_optionWithDescriptionValue_1sakp_1439", Jt = "_dropdownTable_1sakp_1459", Kt = "_optionTable_1sakp_1469", Ut = "_tableColumn_1sakp_1485", Zt = "_columnHeader_1sakp_1501", zt = "_columnValue_1sakp_1517", en = "_noResults_1sakp_1551", tn = "_dropdown_inverted_1sakp_1579", nn = "_option_inverted_1sakp_1625", e = {
   selectContainer: Ue,
   selectContainer_medium: Ze,
   selectContainer_large: ze,
@@ -44,8 +44,8 @@ import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_
   iconLabel: xt,
   optionIcon: Nt,
   required: Wt,
-  required_inverted: Ot,
-  required_disabled: It,
+  required_inverted: It,
+  required_disabled: Ot,
   required_inverted_disabled: Et,
   dropdown: Tt,
   highlight: qt,
@@ -71,160 +71,159 @@ import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_
   dropdown_inverted: tn,
   option_inverted: nn
 }, gn = ({
-  size: a = "medium",
+  size: l = "medium",
   label: T,
-  error: re,
+  error: ne,
   helperText: q,
   icon: W,
-  className: me,
-  required: fe,
+  className: he,
+  required: me,
   placeholder: Q = "Seleccionar...",
   options: $ = [],
   value: f,
-  onChange: u,
+  onChange: d,
   onSearchInput: M,
-  disabled: d = !1,
-  inverted: _ = !1,
-  dynamicIcon: be = !1,
-  showPlaceholderIcon: ge = !1,
-  btc: oe,
+  disabled: _ = !1,
+  inverted: p = !1,
+  dynamicIcon: fe = !1,
+  showPlaceholderIcon: be = !1,
+  btc: re,
   columnHeaders: V,
-  searchable: we = !1,
-  noSearchResult: se = "No se encontraron resultados",
+  searchable: ge = !1,
+  noSearchResult: oe = "No se encontraron resultados",
   searchAndCheckbox: H = !1,
-  customBorderColor: ae,
-  responsive: ke = !1,
-  title: ve,
-  responsiveQuery: Se = 1024,
-  highlightMatch: $e = !1,
-  ...Ce
+  customBorderColor: se,
+  responsive: we = !1,
+  title: ke,
+  responsiveQuery: ve = 1024,
+  highlightMatch: Se = !1,
+  ...$e
 }) => {
-  const j = !!M, { btc: Le } = Ke(), De = oe ?? Le, [l, C] = P(!1), [h, A] = P(""), s = we || H, g = H, Y = N(null), ye = N(null), O = N(null), X = N(null), G = N(null), [L, v] = P([]), xe = l && !d, Ne = Ye(`(max-width: ${Se}px)`), J = ke && Ne && !d;
-  ne(() => {
+  const j = !!M, { btc: Ce } = Ke(), Le = re ?? Ce, [i, S] = P(!1), [m, De] = P(""), s = ge || H, g = H, A = N(null), ye = N(null), I = N(null), Y = N(null), X = N(null), [C, w] = P([]), xe = i && !_, Ne = Ye(`(max-width: ${ve}px)`), G = we && Ne && !_;
+  te(() => {
     if (g)
       if (Array.isArray(f) && f.length > 0) {
         const t = $.filter((n) => f.includes(n.value)), r = t.map((n) => n.value);
-        v(t), (r.length !== f.length || !r.every((n) => f.includes(n))) && u && u(r);
+        w(t), (r.length !== f.length || !r.every((n) => f.includes(n))) && d && d(r);
       } else
-        v([]);
+        w([]);
     else if (f) {
       const t = $.find((r) => r.value === f);
-      t ? (v([t]), A(t.label)) : (v([]), u && u(""));
+      t ? w([t]) : (w([]), d && d(""));
     } else
-      v([]);
+      w([]);
   }, [f, $, g]);
-  const I = L.map((t) => t.value), p = L[0] ?? null, w = (t) => typeof t == "string" ? t.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "").toLowerCase() : "", le = N("");
-  ne(() => {
+  const O = C.map((t) => t.value), u = C[0] ?? null, k = (t) => typeof t == "string" ? t.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "").toLowerCase() : "", ae = N("");
+  te(() => {
     if (!s) return;
-    const t = h.trim(), r = le.current.trim();
+    const t = m.trim(), r = ae.current.trim();
     if (g) {
       if (t.length > 0) {
-        const c = L.filter(
-          (i) => w(i.label).includes(w(t))
-        ), n = c.map((i) => i.value);
-        c.length !== L.length && (v(c), u && u(n));
+        const c = C.filter(
+          (a) => k(a.label).includes(k(t))
+        ), n = c.map((a) => a.value);
+        c.length !== C.length && (w(c), d && d(n));
       }
-      t === "" && r.length > 0 && (v([]), u && u([]));
+      t === "" && r.length > 0 && (w([]), d && d([]));
     } else
-      p && t.length > 0 && w(t) !== w(p.label) && (v([]), u && u(""));
-    le.current = h;
+      u && t.length > 0 && !k(u.label).includes(k(t)) && (w([]), d && d("")), t === "" && r.length > 0 && (w([]), d && d(""));
+    ae.current = m;
   }, [
-    h,
-    p,
-    L,
+    m,
+    u,
+    C,
     g,
     s,
-    u
+    d
   ]);
-  const ie = he(() => s ? l ? h : !g && p ? p.label : g && I.length > 0 ? `${I.length} ${I.length === 1 ? "seleccionado" : "seleccionados"}` : h : "", [
+  const le = ue(() => s ? i ? m : !g && u ? u.label : g && O.length > 0 ? `${O.length} ${O.length === 1 ? "seleccionado" : "seleccionados"}` : "" : "", [
     s,
-    l,
-    h,
-    p,
-    I,
+    i,
+    m,
+    u,
+    O,
     g
-  ]), ce = (t) => L.some((r) => r.value === t), R = he(() => !s || !h || j ? $ : $.filter(
-    (t) => w(t.label).includes(w(h))
-  ), [$, h, s, j]), D = (() => {
-    if (re) return re;
-    if (s && h && h.trim().length > 0 && R.length === 0 && !l && !f)
-      return se;
+  ]), ie = (t) => C.some((r) => r.value === t), R = ue(() => !s || !m || j ? $ : $.filter(
+    (t) => k(t.label).includes(k(m))
+  ), [$, m, s, j]), L = (() => {
+    if (ne) return ne;
+    if (s && m && m.trim().length > 0 && R.length === 0 && !i && !f)
+      return oe;
   })();
-  ne(() => {
+  te(() => {
     const t = (r) => {
-      Y.current && !Y.current.contains(r.target) && O.current && !O.current.contains(r.target) && C(!1);
+      A.current && !A.current.contains(r.target) && I.current && !I.current.contains(r.target) && S(!1);
     };
     return document.addEventListener("mousedown", t), () => {
       document.removeEventListener("mousedown", t);
     };
-  }, [s, j, p]);
+  }, [s, j, u]);
   const We = [
     e.select,
-    De && e.btc,
-    e[a],
-    D ? e.error : "",
-    d ? e.disabled : "",
-    l ? e.open : "",
-    _ ? e.inverted : "",
-    me
-  ].filter(Boolean).join(" "), y = a === "small" ? 16 : a === "large" ? 20 : a === "extraLarge" ? 24 : 18, de = be && (p != null && p.icon) && !(s && l) ? p.icon : W, Oe = () => {
+    Le && e.btc,
+    e[l],
+    L ? e.error : "",
+    _ ? e.disabled : "",
+    i ? e.open : "",
+    p ? e.inverted : "",
+    he
+  ].filter(Boolean).join(" "), D = l === "small" ? 16 : l === "large" ? 20 : l === "extraLarge" ? 24 : 18, ce = fe && (u != null && u.icon) && !(s && i) ? u.icon : W, Ie = () => {
     var t;
-    d || (C(!l), s && !l && (pe(), (t = G.current) == null || t.focus()));
-  }, K = (t, r = !0) => {
-    if (!u) return;
-    const c = $.find((n) => n.value === t);
-    if (g) {
-      const n = Array.isArray(f) ? f : [], m = n.includes(t) ? n.filter((S) => S !== t) : [...n, t];
-      u(m);
-    } else
-      u(t), r && C(!1), c && A(c.label);
-  }, _e = (t) => {
+    _ || (S(!i), s && !i && (_e(), (t = X.current) == null || t.focus()));
+  }, J = (t, r = !0) => {
+    if (d)
+      if (g) {
+        const c = Array.isArray(f) ? f : [], a = c.includes(t) ? c.filter((h) => h !== t) : [...c, t];
+        d(a);
+      } else
+        d(t), r && S(!1);
+  }, de = (t) => {
     const r = t.target.value;
-    A(r), l || C(!0), M && M(r);
-  }, pe = () => {
-    l || C(!0);
-  }, Ie = (t) => {
-    J && (t.preventDefault(), t.stopPropagation()), s && (t.stopPropagation(), l || (C(!0), setTimeout(() => {
+    De(r), i || S(!0), M && M(r);
+  }, _e = () => {
+    i || S(!0);
+  }, Oe = (t) => {
+    G && (t.preventDefault(), t.stopPropagation()), s && (t.stopPropagation(), i || (S(!0), setTimeout(() => {
       var r;
-      (r = G.current) == null || r.focus();
+      (r = X.current) == null || r.focus();
     }, 0)));
-  }, U = (t, r) => {
-    if (!$e || !r.trim()) return t;
-    const c = w(t), n = w(r.trim());
+  }, K = (t, r) => {
+    if (!Se || !r.trim()) return t;
+    const c = k(t), n = k(r.trim());
     if (!c.includes(n)) return t;
-    const i = [], m = [];
-    for (let k = 0; k < t.length; k++) {
-      const z = w(t[k]);
-      for (let x = 0; x < z.length; x++)
-        m.push(k);
+    const a = [], h = [];
+    for (let v = 0; v < t.length; v++) {
+      const Z = k(t[v]);
+      for (let x = 0; x < Z.length; x++)
+        h.push(v);
     }
-    const S = c.indexOf(n), B = S + n.length - 1, E = m[S], Z = m[B] + 1;
-    return i.push(t.slice(0, E)), i.push(
-      /* @__PURE__ */ o("mark", { className: e.highlight, children: t.slice(E, Z) }, "highlight")
-    ), i.push(t.slice(Z)), /* @__PURE__ */ o(te, { children: i });
+    const y = c.indexOf(n), B = y + n.length - 1, E = h[y], U = h[B] + 1;
+    return a.push(t.slice(0, E)), a.push(
+      /* @__PURE__ */ o("mark", { className: e.highlight, children: t.slice(E, U) }, "highlight")
+    ), a.push(t.slice(U)), /* @__PURE__ */ o(ee, { children: a });
   }, [Ee, Te] = P();
   Qe(() => {
     const t = document.body.style.overflow === "hidden", r = () => {
-      if (l && X.current && O.current) {
-        const n = X.current.getBoundingClientRect(), i = O.current.offsetHeight, m = window.innerHeight, S = (Re) => {
+      if (i && Y.current && I.current) {
+        const n = Y.current.getBoundingClientRect(), a = I.current.offsetHeight, h = window.innerHeight, y = (Re) => {
           const { label: Be, helperText: Pe, displayError: Fe } = Re;
           return { top: s && !Be ? 3 : 0, bottom: s && !Pe && !Fe ? 3 : 0 };
-        }, { top: B, bottom: E } = S({
+        }, { top: B, bottom: E } = y({
           label: T,
           helperText: q,
-          displayError: D
-        }), k = {
+          displayError: L
+        }), v = {
           small: 1,
           //Meter gap en small
           medium: 2,
           large: 4,
           extraLarge: 4
-        }[a], z = n.bottom + k + E, x = m - z, ee = n.top - k - B, Ve = (
+        }[l], Z = n.bottom + v + E, x = h - Z, z = n.top - v - B, Ve = (
           //si no hay espacio abajo pero sí arriba, se muestra arriba con separación dependiendo del size y tamaño del label
-          x < i && ee >= i ? n.top + window.scrollY - i - k - B : n.bottom + window.scrollY + k + E
-        ), He = x < i && ee >= i ? (
+          x < a && z >= a ? n.top + window.scrollY - a - v - B : n.bottom + window.scrollY + v + E
+        ), He = x < a && z >= a ? (
           //si no cabe abajo, pero si arriba, se coloca con el tamaño mas pequeño entre 300 px y el espacio que hay arriba -15 px de margen (para que cuadre con el margen de los overlays de los modales etc)
-          Math.min(ee - 15, 300)
+          Math.min(z - 15, 300)
         ) : (
           //si tiene espacio abajo, se calcula la altura igual que arriba pero teniendo en cuenta el espacio que tiene abajo
           Math.min(x - 15, 300)
@@ -248,86 +247,86 @@ import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_
       cancelAnimationFrame(c), window.removeEventListener("resize", r), window.removeEventListener("scroll", r, !0);
     };
   }, [
+    i,
     l,
-    a,
     R.length,
     s,
     T,
-    D,
+    L,
     q
   ]);
-  const ue = ({
+  const pe = ({
     insideDrawer: t = !1,
     handleOptionClickProp: r
   }) => {
     const c = (n) => {
-      r ? r(n) : K(n);
+      r ? r(n) : J(n);
     };
-    return R.length > 0 ? R.map((n, i) => /* @__PURE__ */ b(
+    return R.length > 0 ? R.map((n, a) => /* @__PURE__ */ b(
       "div",
       {
-        className: `${e.option} ${t ? e.isDrawer : ""} ${ce(n.value) ? e.optionSelected : ""} ${_ ? e.option_inverted : ""} ${n.columns ? e.optionTable : ""} ${H ? e.optionWithCheckbox : ""}`,
-        onClick: (m) => {
-          m.stopPropagation(), c(n.value);
+        className: `${e.option} ${t ? e.isDrawer : ""} ${ie(n.value) ? e.optionSelected : ""} ${p ? e.option_inverted : ""} ${n.columns ? e.optionTable : ""} ${H ? e.optionWithCheckbox : ""}`,
+        onClick: (h) => {
+          h.stopPropagation(), c(n.value);
         },
         children: [
           H && /* @__PURE__ */ o(
             "input",
             {
               type: "checkbox",
-              checked: ce(n.value),
-              onChange: () => K(n.value),
-              onClick: (m) => m.stopPropagation(),
+              checked: ie(n.value),
+              onChange: () => J(n.value),
+              onClick: (h) => h.stopPropagation(),
               className: e.optionCheckbox
             }
           ),
-          n.columns ? /* @__PURE__ */ o(te, { children: V && Object.entries(V).map(([m, S]) => /* @__PURE__ */ b("div", { className: e.tableColumn, children: [
-            /* @__PURE__ */ o("div", { className: `${e.columnHeader} ${e[a]}`, children: S }),
-            /* @__PURE__ */ o("div", { className: `${e.columnValue} ${e[a]}`, children: U(
-              String(n.columns[m] ?? ""),
-              h
+          n.columns ? /* @__PURE__ */ o(ee, { children: V && Object.entries(V).map(([h, y]) => /* @__PURE__ */ b("div", { className: e.tableColumn, children: [
+            /* @__PURE__ */ o("div", { className: `${e.columnHeader} ${e[l]}`, children: y }),
+            /* @__PURE__ */ o("div", { className: `${e.columnValue} ${e[l]}`, children: K(
+              String(n.columns[h] ?? ""),
+              m
             ) })
-          ] }, m)) }) : (
+          ] }, h)) }) : (
             //opción tiene descripción
             n.description ? /* @__PURE__ */ b("div", { className: e.optionWithDescriptionWrapper, children: [
               (n.icon || W) && /* @__PURE__ */ o(
                 F,
                 {
                   name: n.icon || W,
-                  width: y,
-                  height: y
+                  width: D,
+                  height: D
                 }
               ),
               /* @__PURE__ */ b("div", { className: e.optionWithDescription, children: [
-                /* @__PURE__ */ o("span", { className: e.optionWithDescriptionLabel, children: U(n.label, h) }),
+                /* @__PURE__ */ o("span", { className: e.optionWithDescriptionLabel, children: K(n.label, m) }),
                 /* @__PURE__ */ o("span", { className: e.optionWithDescriptionValue, children: n.description })
               ] })
-            ] }) : /* @__PURE__ */ b(te, { children: [
+            ] }) : /* @__PURE__ */ b(ee, { children: [
               (n.icon || W) && /* @__PURE__ */ o("div", { className: e.optionIcon, children: /* @__PURE__ */ o(
                 F,
                 {
                   name: n.icon || W,
-                  width: y,
-                  height: y
+                  width: D,
+                  height: D
                 }
               ) }),
-              /* @__PURE__ */ o("div", { style: { whiteSpace: "pre-line", lineHeight: 1.25 }, children: U(n.label, h) })
+              /* @__PURE__ */ o("div", { style: { whiteSpace: "pre-line", lineHeight: 1.25 }, children: K(n.label, m) })
             ] })
           )
         ]
       },
-      i
-    )) : /* @__PURE__ */ o("span", { className: e.noResults, children: se });
+      a
+    )) : /* @__PURE__ */ o("span", { className: e.noResults, children: oe });
   }, qe = () => {
     const t = Ge(), r = (c) => {
-      K(c, !1), g || t();
+      J(c, !1), g || t();
     };
     return /* @__PURE__ */ o(
       "div",
       {
-        className: `${e.dropdown} ${e.isDrawer} ${e[a]}  ${_ ? e.dropdown_inverted : ""} ${V ? e.dropdownTable : ""} ${s ? e.dropdownSearchable : ""}`,
+        className: `${e.dropdown} ${e.isDrawer} ${e[l]}  ${p ? e.dropdown_inverted : ""} ${V ? e.dropdownTable : ""} ${s ? e.dropdownSearchable : ""}`,
         children: /* @__PURE__ */ o(
-          ue,
+          pe,
           {
             insideDrawer: !0,
             handleOptionClickProp: r
@@ -339,21 +338,21 @@ import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_
   return /* @__PURE__ */ b(
     "div",
     {
-      ref: X,
-      className: `${e.selectContainer} ${a === "medium" ? e.selectContainer_medium : a === "large" ? e.selectContainer_large : a === "extraLarge" ? e.selectContainer_extraLarge : ""}`,
-      ...Ce,
+      ref: Y,
+      className: `${e.selectContainer} ${l === "medium" ? e.selectContainer_medium : l === "large" ? e.selectContainer_large : l === "extraLarge" ? e.selectContainer_extraLarge : ""}`,
+      ...$e,
       children: [
         T && /* @__PURE__ */ b(
           "label",
           {
-            className: `${e.label} ${a === "large" ? e.label_large : ""} ${a === "extraLarge" ? e.label_extraLarge : ""} ${d && !_ ? e.label_disabled : ""} ${_ && !d ? e.label_inverted : ""} ${_ && d ? e.label_inverted_disabled : ""}`,
+            className: `${e.label} ${l === "large" ? e.label_large : ""} ${l === "extraLarge" ? e.label_extraLarge : ""} ${_ && !p ? e.label_disabled : ""} ${p && !_ ? e.label_inverted : ""} ${p && _ ? e.label_inverted_disabled : ""}`,
             children: [
               T,
               /* @__PURE__ */ o(
                 "span",
                 {
-                  className: `${e.required} ${d && !_ ? e.required_disabled : ""} ${_ && !d ? e.required_inverted : ""} ${_ && d ? e.required_inverted_disabled : ""}`,
-                  children: fe && "*"
+                  className: `${e.required} ${_ && !p ? e.required_disabled : ""} ${p && !_ ? e.required_inverted : ""} ${p && _ ? e.required_inverted_disabled : ""}`,
+                  children: me && "*"
                 }
               )
             ]
@@ -364,21 +363,21 @@ import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_
             "div",
             {
               className: We,
-              onClick: Oe,
-              ref: Y,
-              style: ae ? { borderColor: ae } : void 0,
+              onClick: Ie,
+              ref: A,
+              style: se ? { borderColor: se } : void 0,
               children: [
                 /* @__PURE__ */ b("div", { className: e.iconLabel, children: [
-                  (s || de && ge) && /* @__PURE__ */ o(
+                  (s || ce && be) && /* @__PURE__ */ o(
                     "div",
                     {
-                      className: `${e.icon} ${d && !_ ? e.icon_disabled : ""} ${_ && !d ? e.icon_inverted : ""} ${_ && d ? e.icon_inverted_disabled : ""}`,
+                      className: `${e.icon} ${_ && !p ? e.icon_disabled : ""} ${p && !_ ? e.icon_inverted : ""} ${p && _ ? e.icon_inverted_disabled : ""}`,
                       children: /* @__PURE__ */ o(
                         F,
                         {
-                          name: s ? "SearchIcon" : de,
-                          width: y,
-                          height: y
+                          name: s ? "SearchIcon" : ce,
+                          width: D,
+                          height: D
                         }
                       )
                     }
@@ -386,21 +385,21 @@ import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_
                   s ? /* @__PURE__ */ o(
                     "input",
                     {
-                      ref: G,
-                      value: ie,
-                      className: `${e.selectInput} ${!p && !l && I.length === 0 ? e.placeholder : ""}`,
+                      ref: X,
+                      value: le,
+                      className: `${e.selectInput} ${!u && !i && O.length === 0 ? e.placeholder : ""}`,
                       placeholder: Q,
-                      onChange: _e,
-                      onFocus: pe,
-                      onClick: Ie,
-                      disabled: d,
-                      readOnly: J || !l
+                      onChange: de,
+                      onFocus: _e,
+                      onClick: Oe,
+                      disabled: _,
+                      readOnly: G || !i
                     }
                   ) : /* @__PURE__ */ o(
                     "span",
                     {
-                      className: `${e.selectValue} ${p ? "" : e.placeholder}`,
-                      children: p ? p.label : Q
+                      className: `${e.selectValue} ${u ? "" : e.placeholder}`,
+                      children: u ? u.label : Q
                     }
                   )
                 ] }),
@@ -410,20 +409,20 @@ import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_
                     name: "ArrowDown",
                     width: 16,
                     height: 16,
-                    className: `${e.chevron} ${l ? e.chevronOpen : ""}`
+                    className: `${e.chevron} ${i ? e.chevronOpen : ""}`
                   }
                 )
               ]
             }
           ),
-          J ? /* @__PURE__ */ b(
+          G ? /* @__PURE__ */ b(
             Xe,
             {
               className: e.drawerSelect,
               headerClassName: e.drawerSelectHeader,
-              isOpen: l,
-              setIsOpen: C,
-              title: ve,
+              isOpen: i,
+              setIsOpen: S,
+              title: ke,
               zIndex: 1,
               children: [
                 s && /* @__PURE__ */ o("div", { className: e.drawerSearchInput, children: /* @__PURE__ */ o(
@@ -431,9 +430,9 @@ import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_
                   {
                     placeholder: Q,
                     icon: "SearchIcon",
-                    value: ie,
-                    onChange: _e,
-                    btc: oe
+                    value: le,
+                    onChange: de,
+                    btc: re
                   }
                 ) }),
                 /* @__PURE__ */ o(qe, {})
@@ -443,23 +442,23 @@ import '../../assets/Select.css';const Ue = "_selectContainer_1sakp_23", Ze = "_
             /* @__PURE__ */ o(
               "div",
               {
-                ref: O,
-                className: `${e.dropdown} ${e[a]} ${e.dropdownPortal} ${_ ? e.dropdown_inverted : ""} ${V ? e.dropdownTable : ""} ${s ? e.dropdownSearchable : ""}`,
+                ref: I,
+                className: `${e.dropdown} ${e[l]} ${e.dropdownPortal} ${p ? e.dropdown_inverted : ""} ${V ? e.dropdownTable : ""} ${s ? e.dropdownSearchable : ""}`,
                 style: Ee,
-                children: /* @__PURE__ */ o(ue, {})
+                children: /* @__PURE__ */ o(pe, {})
               }
             ),
             document.getElementById("root") || document.body
           )
         ] }),
-        D && /* @__PURE__ */ o(Ae, { message: D, size: a, inverted: _ }),
-        q && !D && /* @__PURE__ */ o(
+        L && /* @__PURE__ */ o(Ae, { message: L, size: l, inverted: p }),
+        q && !L && /* @__PURE__ */ o(
           je,
           {
             message: q,
-            size: a,
-            disabled: d,
-            inverted: _
+            size: l,
+            disabled: _,
+            inverted: p
           }
         )
       ]

package/dist/components/navbar/index.d.ts

@@ -19,7 +19,6 @@ interface NavbarProps extends React.HTMLAttributes<HTMLDivElement> {
     activeItem: string;
     withConfig?: boolean;
     configAction?: () => void;
-    ref?: React.Ref<HTMLDivElement>;
 }
 /**
  * Sidebar navegacional adaptable a plataformas web y app.
@@ -47,5 +46,5 @@ interface NavbarProps extends React.HTMLAttributes<HTMLDivElement> {
  * />
  * ```
  */
-export declare const Navbar: ({ options, className, activeItem, withConfig, configAction, ref, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Navbar: React.ForwardRefExoticComponent<NavbarProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/navbar/index.js

@@ -1,84 +1,77 @@
 import { jsx as n, jsxs as o } from "react/jsx-runtime";
-import { useState as b } from "react";
+import { forwardRef as b, useState as v } from "react";
 import { Icon as i } from "../../icons/Icon.js";
-import { MenuItem as m } from "./menuItem/index.js";
-import '../../assets/index2.css';const v = "_sidebar_1c3mn_1", B = "_open_1c3mn_17", N = "_content_1c3mn_21", $ = "_header_1c3mn_28", f = "_toggleButton_1c3mn_43", C = "_menuList_1c3mn_59", L = "_bottomDiv_1c3mn_75", e = {
-  sidebar: v,
-  open: B,
-  content: N,
+import { MenuItem as r } from "./menuItem/index.js";
+import '../../assets/index2.css';const B = "_sidebar_1c3mn_1", N = "_open_1c3mn_17", f = "_content_1c3mn_21", $ = "_header_1c3mn_28", w = "_toggleButton_1c3mn_43", C = "_menuList_1c3mn_59", L = "_bottomDiv_1c3mn_75", e = {
+  sidebar: B,
+  open: N,
+  content: f,
   header: $,
-  toggleButton: f,
+  toggleButton: w,
   menuList: C,
   bottomDiv: L
-}, j = ({
-  options: r,
-  className: d,
-  activeItem: l,
-  withConfig: h = !1,
-  configAction: s,
-  ref: _,
-  ...p
-}) => {
-  const [t, g] = b(!0), c = () => {
-    g((a) => !a);
-  };
-  return /* @__PURE__ */ n(
-    "aside",
-    {
-      ref: _,
-      className: `${e.sidebar} ${t ? e.open : ""} ${d || ""}`,
-      ...p,
-      children: /* @__PURE__ */ o("div", { className: e.content, children: [
-        /* @__PURE__ */ o("header", { className: `${e.header} ${t && e.open}`, children: [
-          /* @__PURE__ */ n(
-            i,
-            {
-              name: t ? "BmiLogo" : "BmiCollapsed",
-              width: t ? 80.86 : 26.62,
-              height: 32
-            }
-          ),
-          t && /* @__PURE__ */ n("div", { className: e.toggleButton, onClick: c, children: /* @__PURE__ */ n(
-            i,
-            {
-              name: "ClosePanel",
-              width: 20,
-              height: 20,
-              fill: "var(--black-60)"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ o("ul", { className: e.menuList, children: [
-          r.map((a, u) => /* @__PURE__ */ n(
-            m,
-            {
-              option: a,
-              activeItem: l,
-              open: t
-            },
-            u
-          )),
-          /* @__PURE__ */ o("div", { className: `${e.bottomDiv} ${t && e.open}`, children: [
-            !t && /* @__PURE__ */ n("div", { className: e.toggleButton, onClick: c, children: /* @__PURE__ */ n(i, { name: "OpenPanel", width: 20, height: 20, fill: "black" }) }),
-            h && /* @__PURE__ */ n(
-              m,
+}, O = b(
+  ({
+    options: c,
+    className: d,
+    activeItem: l,
+    withConfig: h = !1,
+    configAction: s,
+    ..._
+  }, p) => {
+    const [t, g] = v(!0), m = () => {
+      g((a) => !a);
+    };
+    return /* @__PURE__ */ n(
+      "aside",
+      {
+        ref: p,
+        className: `${e.sidebar} ${t ? e.open : ""} ${d || ""}`,
+        ..._,
+        children: /* @__PURE__ */ o("div", { className: e.content, children: [
+          /* @__PURE__ */ o("header", { className: `${e.header} ${t && e.open}`, children: [
+            /* @__PURE__ */ n(
+              i,
               {
-                option: {
-                  label: "Configuración",
-                  action: () => s == null ? void 0 : s(),
-                  iconAfter: "Settings",
-                  iconBefore: "ArrowRight"
-                },
-                open: t,
-                activeItem: l
+                name: t ? "BmiLogo" : "BmiCollapsed",
+                width: t ? 80.86 : 26.62,
+                height: 32
               }
-            )
+            ),
+            t && /* @__PURE__ */ n("div", { className: e.toggleButton, onClick: m, children: /* @__PURE__ */ n(i, { name: "ClosePanel", width: 20, height: 20 }) })
+          ] }),
+          /* @__PURE__ */ o("ul", { className: e.menuList, children: [
+            c.map((a, u) => /* @__PURE__ */ n(
+              r,
+              {
+                option: a,
+                activeItem: l,
+                open: t
+              },
+              u
+            )),
+            /* @__PURE__ */ o("div", { className: `${e.bottomDiv} ${t && e.open}`, children: [
+              !t && /* @__PURE__ */ n("div", { className: e.toggleButton, onClick: m, children: /* @__PURE__ */ n(i, { name: "OpenPanel", width: 20, height: 20, fill: "black" }) }),
+              h && /* @__PURE__ */ n(
+                r,
+                {
+                  option: {
+                    label: "Configuración",
+                    action: () => s == null ? void 0 : s(),
+                    iconAfter: "Settings",
+                    iconBefore: "ArrowRight"
+                  },
+                  open: t,
+                  activeItem: l
+                }
+              )
+            ] })
           ] })
         ] })
-      ] })
-    }
-  );
-};
+      }
+    );
+  }
+);
 export {
-  j as Navbar
+  O as Navbar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bmi-next-brokers",
   "description": "Componentes de UI para proyecto BMI Next Brokers",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "author": "BMI Ahorro España",
   "contributors": [
     "José Ramón Jiménez <jrjimenez@bmicos.com>",