bmi-next-brokers 2.3.1 → 2.3.3

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/icons/Icon.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { I as p } from "../index-S4_4Z0mU.js";
+import { I as p } from "../index-DSh882Th.js";
 const m = ({
   name: o,
   width: c = 20,

package/dist/icons/components/SortArrowsAsc.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgSortArrowsAsc: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgSortArrowsAsc;

package/dist/icons/components/SortArrowsAsc.js

@@ -0,0 +1,42 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+const l = (t) => /* @__PURE__ */ a(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 51 51",
+    width: "1em",
+    height: "1em",
+    ...t,
+    children: [
+      /* @__PURE__ */ s(
+        "mask",
+        {
+          id: "sort_arrows_asc_svg__a",
+          width: 51,
+          height: 51,
+          x: 0,
+          y: 0,
+          maskUnits: "userSpaceOnUse",
+          style: {
+            maskType: "alpha"
+          },
+          children: /* @__PURE__ */ s("path", { fill: "currentColor", d: "M0 0h50.625v50.625H0z" })
+        }
+      ),
+      /* @__PURE__ */ a("g", { fill: "#525252", mask: "url(#sort_arrows_asc_svg__a)", children: [
+        /* @__PURE__ */ s("path", { d: "M16.875 36.176V23.15q0-.896.607-1.502.606-.607 1.503-.607t1.502.607q.607.606.607 1.502v13.026l1.793-1.793q.633-.633 1.476-.607.844.027 1.477.607.633.633.66 1.503.025.87-.607 1.503L20.46 42.82q-.633.633-1.476.633-.844 0-1.477-.633l-5.432-5.431q-.633-.633-.606-1.503a2.15 2.15 0 0 1 .659-1.503 2.22 2.22 0 0 1 1.476-.607q.844-.026 1.477.607z" }),
+        /* @__PURE__ */ s(
+          "path",
+          {
+            d: "m27.862 15.721 2.022-1.789v12.277q0 .846.645 1.417.646.572 1.6.572t1.601-.572.646-1.417V13.933l2.022 1.79q.617.546 1.572.546.954 0 1.572-.547.618-.546.618-1.391 0-.846-.618-1.392l-5.84-5.17a2.3 2.3 0 0 0-1.572-.596q-.899 0-1.573.596l-5.84 5.17a1.78 1.78 0 0 0-.617 1.392q0 .845.617 1.391.618.547 1.573.547.954 0 1.572-.547",
+            opacity: 0.3
+          }
+        )
+      ] })
+    ]
+  }
+);
+export {
+  l as default
+};

package/dist/icons/components/SortArrowsDefault.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgSortArrowsDefault: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgSortArrowsDefault;