prometeo-design-system 4.8.2 → 4.8.3

package/dist/PyrionLayout.es.js

@@ -2,7 +2,7 @@ import { j as e } from "./jsx-runtime-GkKLlHH4.js";
 import { u as Je, g as Nt } from "./useDevice-vwn4GLwK.js";
 import { c as D } from "./cn-B6yFEsav.js";
 import { g as Se } from "./utils-X4-h3cum.js";
-import qe, { forwardRef as be, useState as J, useRef as O, useEffect as se, memo as M, useContext as Ge, createContext as Me, useCallback as h, Children as yt, isValidElement as ke, useMemo as pe, useImperativeHandle as Re, useLayoutEffect as Ct, use as jt } from "react";
+import qe, { forwardRef as be, useState as J, useRef as I, useEffect as se, memo as P, useContext as Ge, createContext as Me, useCallback as x, Children as yt, isValidElement as ke, useMemo as pe, useImperativeHandle as Re, useLayoutEffect as Ct, use as jt } from "react";
 import { createPortal as $e } from "react-dom";
 import { useLocation as St, useNavigate as kt } from "react-router";
 import ce from "./Skeleton.es.js";
@@ -23,11 +23,11 @@ import { Close as Fe } from "./Icons/Close.es.js";
 import { Help as tt } from "./Icons/Help.es.js";
 import { Settings as _t } from "./Icons/Settings.es.js";
 const Pt = be((t, r) => {
-  const [s, a] = J(t?.currentTabName || t.tabs[0]?.name), c = O(null), { tabs: l = [], className: d, activeColor: i = "var(--neutral-900)", currentSystemId: f, isLoading: p = !1 } = t;
-  console.log("tabs en el tabswitch del layout", l, f), se(() => {
+  const [s, a] = J(t?.currentTabName || t.tabs[0]?.name), c = I(null), { tabs: l = [], className: d, activeColor: i = "var(--neutral-900)", currentSystemId: m, isLoading: h = !1 } = t;
+  console.log("tabs en el tabswitch del layout", l, m), se(() => {
     c.current?.style.setProperty("--tab-bg", i);
   }, [i]);
-  const x = l.find((m) => m?.id === f || m?.name === t?.currentTabName) || l.find((m) => m?.name === s);
+  const b = l.find((p) => p?.id === m || p?.name === t?.currentTabName) || l.find((p) => p?.name === s);
   return /* @__PURE__ */ e.jsx(
     "div",
     {
@@ -40,9 +40,9 @@ const Pt = be((t, r) => {
         "border-r border-neutral-default-default",
         d
       ),
-      children: (p ? Array(3).fill(null) : l).map(
-        (m, b) => {
-          if (p) return /* @__PURE__ */ e.jsx(
+      children: (h ? Array(3).fill(null) : l).map(
+        (p, g) => {
+          if (h) return /* @__PURE__ */ e.jsx(
             "div",
             {
               className: D(
@@ -51,19 +51,19 @@ const Pt = be((t, r) => {
                 "flex items-center pl-[6px] ",
                 "rounded-l-[8px]",
                 "tabswitch-element relative",
-                b === 0 && "active"
+                g === 0 && "active"
               ),
               children: /* @__PURE__ */ e.jsx("div", { className: D(
                 "size-8 rounded-[4px]",
                 "grid place-items-center",
                 "tab-thumbnail-icon",
                 "bg-transparent text-neutral-default-default",
-                m?.className
+                p?.className
               ), children: /* @__PURE__ */ e.jsx(ce, { shape: "rounded", className: "w-full h-full" }) })
             }
           );
-          const j = m?.name === x?.name, k = typeof m?.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: m?.thumbnail, alt: m?.description, className: "aspect-square object-contain rounded", draggable: !1 }) : m?.thumbnail, y = () => {
-            m.disabled || (a(m?.name), m.onClick && m.onClick(m?.name));
+          const j = p?.name === b?.name, A = typeof p?.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: p?.thumbnail, alt: p?.description, className: "aspect-square object-contain rounded", draggable: !1 }) : p?.thumbnail, y = () => {
+            p.disabled || (a(p?.name), p.onClick && p.onClick(p?.name));
           };
           return /* @__PURE__ */ e.jsx(
             "div",
@@ -83,42 +83,42 @@ const Pt = be((t, r) => {
                 "grid place-items-center",
                 "tab-thumbnail-icon",
                 "bg-transparent text-neutral-default-default",
-                m?.className
-              ), children: k })
+                p?.className
+              ), children: A })
             },
-            m?.name
+            p?.name
           );
         }
       )
     }
   );
-}), rt = M(be(({ children: t, className: r, context: s, modal: a = !1, closeOnOverlayClick: c = !1, unmountChildrenOnClose: l = !0 }, d) => {
-  const i = ge(t, s), f = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: p } = Mt(), { closeSidebar: x } = de(), [m, b] = J(() => l ? p : !0), [j, k] = J(!1);
+}), rt = P(be(({ children: t, className: r, context: s, modal: a = !1, closeOnOverlayClick: c = !1, unmountChildrenOnClose: l = !0 }, d) => {
+  const i = ge(t, s), m = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: h } = Mt(), { closeSidebar: b } = de(), [p, g] = J(() => l ? h : !0), [j, A] = J(!1);
   return se(() => {
     l && s?.subscribeToSidebarOpen((y) => {
-      y ? (k(!1), b(!0)) : k(!0);
+      y ? (A(!1), g(!0)) : A(!0);
     });
   }, [l, s]), se(() => {
     const y = d && typeof d == "object" && "current" in d ? d.current : null;
     if (!y) return;
     const C = () => {
-      j && (b(!1), k(!1));
+      j && (g(!1), A(!1));
     };
     return y.addEventListener("transitionend", C), () => y.removeEventListener("transitionend", C);
-  }, [j]), /* @__PURE__ */ e.jsxs("div", { ref: d, className: D("sidebar", f ? "collapsed" : "expanded", "h-full overflow-auto", r), "aria-modal": a || void 0, children: [
-    a && f && /* @__PURE__ */ e.jsx(
+  }, [j]), /* @__PURE__ */ e.jsxs("div", { ref: d, className: D("sidebar", m ? "collapsed" : "expanded", "h-full overflow-auto", r), "aria-modal": a || void 0, children: [
+    a && m && /* @__PURE__ */ e.jsx(
       "div",
       {
         className: D("navigation-drawer-sidebar-overlay"),
         onClick: (y) => {
-          y.preventDefault(), y.stopPropagation(), c && x?.();
+          y.preventDefault(), y.stopPropagation(), c && b?.();
         },
         "aria-hidden": "true"
       }
     ),
     /* @__PURE__ */ e.jsxs("div", { className: D("navigation-drawer-sidebar-inner"), children: [
       /* @__PURE__ */ e.jsx("div", { className: "secure-click-margin" }),
-      m && i
+      p && i
     ] })
   ] });
 })), st = Me(null), nt = Me(null), Mt = () => {
@@ -144,86 +144,86 @@ const Pt = be((t, r) => {
     } catch {
     }
 }, Bt = (t) => {
-  const { children: r, classNameDrawer: s, classNameSidebar: a, disableDragOpen: c, modal: l = !0, closeOnOutsideClick: d = !0 } = t, i = O(null), f = O(null), p = t.outletRef ?? O(null), x = O(null), m = O(Ke()), b = O(!1), j = O("drawer"), k = O(/* @__PURE__ */ new Set()), y = O(/* @__PURE__ */ new Set()), C = O(!1), A = O(null), H = h((n) => {
-    const u = f.current;
-    u && (u.classList.toggle("collapsed", n), u.classList.toggle("expanded", !n));
-  }, []), K = h((n) => {
-    const u = x.current;
-    if (!u) return;
-    u.classList.toggle("collapsed", n), u.classList.toggle("expanded", !n);
-    const v = i.current;
-    v && (v.classList.toggle("sidebar-collapsed", n), v.classList.toggle("sidebar-expanded", !n));
-  }, []), S = h(
-    (n, { notify: u = !0 } = {}) => {
-      const v = m.current !== n;
-      m.current = n, Rt(n), H(n), u && v && k.current.forEach((E) => E(n));
+  const { children: r, classNameDrawer: s, classNameSidebar: a, disableDragOpen: c, modal: l = !0, closeOnOutsideClick: d = !0 } = t, i = I(null), m = I(null), h = t.outletRef ?? I(null), b = I(null), p = I(Ke()), g = I(!1), j = I("drawer"), A = I(/* @__PURE__ */ new Set()), y = I(/* @__PURE__ */ new Set()), C = I(!1), S = I(null), K = x((n) => {
+    const f = m.current;
+    f && (f.classList.toggle("collapsed", n), f.classList.toggle("expanded", !n));
+  }, []), z = x((n) => {
+    const f = b.current;
+    if (!f) return;
+    f.classList.toggle("collapsed", n), f.classList.toggle("expanded", !n);
+    const w = i.current;
+    w && (w.classList.toggle("sidebar-collapsed", n), w.classList.toggle("sidebar-expanded", !n));
+  }, []), k = x(
+    (n, { notify: f = !0 } = {}) => {
+      const w = p.current !== n;
+      p.current = n, Rt(n), K(n), f && w && A.current.forEach((E) => E(n));
     },
-    [H]
-  ), U = h(
-    (n, { notify: u = !0 } = {}) => {
-      const v = b.current !== n;
-      if (b.current = n, K(n), u && v) {
+    [K]
+  ), U = x(
+    (n, { notify: f = !0 } = {}) => {
+      const w = g.current !== n;
+      if (g.current = n, z(n), f && w) {
         const E = !n;
-        y.current.forEach((V) => V(E));
+        y.current.forEach((H) => H(E));
       }
     },
-    [K]
-  ), N = h(
-    (n, { notify: u = !0 } = {}) => {
-      const v = j.current, E = v !== n;
-      j.current = n, window.matchMedia("(min-width: 768px)").matches || S(n !== "drawer", { notify: u });
-      const V = v === "sidebar", B = n === "sidebar";
-      u && E && V !== B && y.current.forEach((te) => te(B)), U(n !== "sidebar", { notify: u }), S(n !== "drawer", { notify: u });
+    [z]
+  ), v = x(
+    (n, { notify: f = !0 } = {}) => {
+      const w = j.current, E = w !== n;
+      j.current = n, window.matchMedia("(min-width: 768px)").matches || k(n !== "drawer", { notify: f });
+      const H = w === "sidebar", R = n === "sidebar";
+      f && E && H !== R && y.current.forEach((te) => te(R)), U(n !== "sidebar", { notify: f }), k(n !== "drawer", { notify: f });
     },
-    [S, U]
-  ), $ = h((n) => {
-    const u = i.current;
-    if (!u || window.matchMedia("(min-width: 768px)").matches) return;
+    [k, U]
+  ), q = x((n) => {
+    const f = i.current;
+    if (!f || window.matchMedia("(min-width: 768px)").matches) return;
     C.current = !0;
-    const v = p.current?.offsetLeft ?? 0, E = x.current?.offsetLeft ?? v, V = n === "drawer" ? 0 : n === "sidebar" ? E : v;
-    A.current = V, u.scrollTo({ left: V, behavior: "smooth" });
-    const B = () => {
-      C.current = !1, A.current = null, u.removeEventListener("scrollend", B);
+    const w = h.current?.offsetLeft ?? 0, E = b.current?.offsetLeft ?? w, H = n === "drawer" ? 0 : n === "sidebar" ? E : w;
+    S.current = H, f.scrollTo({ left: H, behavior: "smooth" });
+    const R = () => {
+      C.current = !1, S.current = null, f.removeEventListener("scrollend", R);
     };
-    u.addEventListener("scrollend", B, { once: !0 }), setTimeout(() => {
-      C.current && B();
+    f.addEventListener("scrollend", R, { once: !0 }), setTimeout(() => {
+      C.current && R();
     }, 1e3);
-  }, []), G = h(() => {
-    const n = i.current, u = p.current;
-    if (!n || !u || window.matchMedia("(min-width: 768px)").matches) return;
-    const v = [
+  }, []), G = x(() => {
+    const n = i.current, f = h.current;
+    if (!n || !f || window.matchMedia("(min-width: 768px)").matches) return;
+    const w = [
       { panel: "drawer", offset: 0 },
-      { panel: "outlet", offset: u.offsetLeft }
-    ], E = x.current;
-    E && v.push({ panel: "sidebar", offset: E.offsetLeft });
-    const V = n.scrollLeft;
-    let B = v[0], te = Math.abs(V - B.offset);
-    for (let oe = 1; oe < v.length; oe++) {
-      const me = Math.abs(V - v[oe].offset);
-      me < te && (B = v[oe], te = me);
+      { panel: "outlet", offset: f.offsetLeft }
+    ], E = b.current;
+    E && w.push({ panel: "sidebar", offset: E.offsetLeft });
+    const H = n.scrollLeft;
+    let R = w[0], te = Math.abs(H - R.offset);
+    for (let oe = 1; oe < w.length; oe++) {
+      const me = Math.abs(H - w[oe].offset);
+      me < te && (R = w[oe], te = me);
     }
-    N(B.panel);
-  }, [N]);
+    v(R.panel);
+  }, [v]);
   se(() => {
     const n = i.current;
     n && (c?.drawer && n.classList.add("disabled-dragopen"), c?.sidebar && n.classList.add("disabled-dragopen-sidebar"));
   }, [c, i]), se(() => {
-    const n = i.current, u = p.current;
-    if (!n || !u) return;
+    const n = i.current, f = h.current;
+    if (!n || !f) return;
     if (window.matchMedia("(min-width: 768px)").matches) {
       const E = Ke();
-      S(E, { notify: !1 }), U(!0, { notify: !1 });
+      k(E, { notify: !1 }), U(!0, { notify: !1 });
       return;
     }
     requestAnimationFrame(() => {
-      n.scrollLeft = u.offsetLeft, N("outlet");
+      n.scrollLeft = f.offsetLeft, v("outlet");
     });
-  }, [N, S, U]), se(() => {
+  }, [v, k, U]), se(() => {
     const n = i.current;
-    if (!n || !p.current) return;
-    let v = !1, E = 0, V = 0;
-    const B = (L) => {
-      E = L.touches[0].clientX, V = L.touches[0].clientY;
+    if (!n || !h.current) return;
+    let w = !1, E = 0, H = 0;
+    const R = (L) => {
+      E = L.touches[0].clientX, H = L.touches[0].clientY;
     }, te = (L, Y) => {
       const W = window.getComputedStyle(L), le = Y === "x" ? W.overflowX : W.overflowY;
       return /(auto|scroll|overlay)/.test(le) ? Y === "x" ? L.scrollWidth > L.clientWidth : L.scrollHeight > L.clientHeight : !1;
@@ -237,72 +237,72 @@ const Pt = be((t, r) => {
       return null;
     }, me = (L, Y, W) => W === 0 ? !1 : Y === "x" ? W < 0 ? L.scrollLeft + L.clientWidth < L.scrollWidth : L.scrollLeft > 0 : W < 0 ? L.scrollTop + L.clientHeight < L.scrollHeight : L.scrollTop > 0, Ne = (L) => {
       if (!(L.target instanceof HTMLElement)) return;
-      const Y = L.touches[0].clientX - E, W = L.touches[0].clientY - V, le = Math.abs(Y) > Math.abs(W) ? "x" : "y", Ie = le === "x" ? Y : W, Ce = oe(L.target, le);
+      const Y = L.touches[0].clientX - E, W = L.touches[0].clientY - H, le = Math.abs(Y) > Math.abs(W) ? "x" : "y", Ie = le === "x" ? Y : W, Ce = oe(L.target, le);
       if (Ce && me(Ce, le, Ie))
         return;
-      const je = n.classList.contains("disabled-dragopen"), o = n.classList.contains("disabled-dragopen-sidebar"), w = () => L.cancelable ? (L.preventDefault(), !0) : !1;
+      const je = n.classList.contains("disabled-dragopen"), o = n.classList.contains("disabled-dragopen-sidebar"), N = () => L.cancelable ? (L.preventDefault(), !0) : !1;
       if (le === "x") {
         if (Y > 0) {
           if (j.current === "sidebar" && !o) {
-            v = !0;
+            w = !0;
             return;
           }
           if (je) {
-            w();
+            N();
             return;
           }
         } else if (Y < 0) {
           if (j.current === "drawer" && !je) {
-            v = !0;
+            w = !0;
             return;
           }
           if (o) {
-            w();
+            N();
             return;
           }
         }
-        v = !0;
+        w = !0;
       }
     }, ye = () => {
       setTimeout(() => {
-        v && (G(), v = !1);
+        w && (G(), w = !1);
       }, 100);
     };
-    return n.addEventListener("touchstart", B, { passive: !1 }), n.addEventListener("touchmove", Ne, { passive: !1 }), n.addEventListener("touchend", ye), () => {
-      n.removeEventListener("touchstart", B), n.removeEventListener("touchmove", Ne), n.removeEventListener("touchend", ye);
+    return n.addEventListener("touchstart", R, { passive: !1 }), n.addEventListener("touchmove", Ne, { passive: !1 }), n.addEventListener("touchend", ye), () => {
+      n.removeEventListener("touchstart", R), n.removeEventListener("touchmove", Ne), n.removeEventListener("touchend", ye);
     };
   }, [G]);
-  const q = h(() => {
-    const n = window.matchMedia("(min-width: 768px)").matches, u = !m.current;
+  const V = x(() => {
+    const n = window.matchMedia("(min-width: 768px)").matches, f = !p.current;
     if (n) {
-      S(u);
+      k(f);
       return;
     }
-    const v = u ? "outlet" : "drawer";
-    N(v), $(v);
-  }, [$, N, S]), X = O(null);
+    const w = f ? "outlet" : "drawer";
+    v(w), q(w);
+  }, [q, v, k]), X = I(null);
   X.current || (X.current = {
-    toggleCollapse: () => q(),
+    toggleCollapse: () => V(),
     getIsCollapsed: () => {
       if (!window.matchMedia("(min-width: 768px)").matches) {
-        const u = i.current, v = p.current;
-        if (u && v) {
-          const E = u.scrollLeft, V = v.offsetLeft, B = Math.abs(E - V) < Math.abs(E - 0);
-          return B !== m.current && (m.current = B, H(B)), B;
+        const f = i.current, w = h.current;
+        if (f && w) {
+          const E = f.scrollLeft, H = w.offsetLeft, R = Math.abs(E - H) < Math.abs(E - 0);
+          return R !== p.current && (p.current = R, K(R)), R;
         }
       }
-      return m.current;
+      return p.current;
     },
-    subscribeToCollapse: (n) => (k.current.add(n), () => {
-      k.current.delete(n);
+    subscribeToCollapse: (n) => (A.current.add(n), () => {
+      A.current.delete(n);
     }),
     openSidebar: () => {
-      if (x.current) {
+      if (b.current) {
         if (window.matchMedia("(min-width: 768px)").matches) {
           U(!1);
           return;
         }
-        N("sidebar"), $("sidebar");
+        v("sidebar"), q("sidebar");
       }
     },
     closeSidebar: () => {
@@ -310,68 +310,68 @@ const Pt = be((t, r) => {
         U(!0);
         return;
       }
-      N("outlet"), $("outlet");
+      v("outlet"), q("outlet");
     },
     toggleSidebar: () => {
-      if (!x.current) return;
+      if (!b.current) return;
       if (window.matchMedia("(min-width: 768px)").matches) {
-        U(!b.current);
+        U(!g.current);
         return;
       }
       const n = j.current === "sidebar" ? "outlet" : "sidebar";
-      N(n), $(n);
+      v(n), q(n);
     },
-    getIsSidebarOpen: () => x.current ? window.matchMedia("(min-width: 768px)").matches ? !b.current : j.current === "sidebar" : !1,
+    getIsSidebarOpen: () => b.current ? window.matchMedia("(min-width: 768px)").matches ? !g.current : j.current === "sidebar" : !1,
     subscribeToSidebarOpen: (n) => (y.current.add(n), () => {
       y.current.delete(n);
     }),
     setDrawerDragEnabled: (n) => {
-      const u = i.current;
-      if (!u) return;
-      const v = u.scrollLeft;
+      const f = i.current;
+      if (!f) return;
+      const w = f.scrollLeft;
       if (n) {
-        const E = u.style.scrollBehavior;
-        u.style.scrollBehavior = "auto", u.classList.remove("disabled-dragopen"), requestAnimationFrame(() => {
-          u.scrollLeft = v, requestAnimationFrame(() => {
-            u.style.scrollBehavior = E;
+        const E = f.style.scrollBehavior;
+        f.style.scrollBehavior = "auto", f.classList.remove("disabled-dragopen"), requestAnimationFrame(() => {
+          f.scrollLeft = w, requestAnimationFrame(() => {
+            f.style.scrollBehavior = E;
           });
         });
       } else
-        u.classList.add("disabled-dragopen");
+        f.classList.add("disabled-dragopen");
     },
     setSidebarDragEnabled: (n) => {
-      const u = i.current;
-      if (u)
+      const f = i.current;
+      if (f)
         if (n) {
-          const v = u.scrollLeft, E = u.style.scrollBehavior;
-          u.style.scrollBehavior = "auto", u.classList.remove("disabled-dragopen-sidebar"), requestAnimationFrame(() => {
-            u.scrollLeft = v, requestAnimationFrame(() => {
-              u.style.scrollBehavior = E;
+          const w = f.scrollLeft, E = f.style.scrollBehavior;
+          f.style.scrollBehavior = "auto", f.classList.remove("disabled-dragopen-sidebar"), requestAnimationFrame(() => {
+            f.scrollLeft = w, requestAnimationFrame(() => {
+              f.style.scrollBehavior = E;
             });
           });
         } else
-          u.classList.add("disabled-dragopen-sidebar");
+          f.classList.add("disabled-dragopen-sidebar");
     }
   });
-  const I = X.current, _ = typeof r == "function" ? r(I) : r, g = yt.toArray(_);
-  let P = null, R = null, z = null;
+  const $ = X.current, _ = typeof r == "function" ? r($) : r, u = yt.toArray(_);
+  let O = null, M = null, F = null;
   const Q = [];
   let ae = null, Z = null;
-  g.forEach((n) => {
+  u.forEach((n) => {
     if (!ke(n)) {
       Q.push(n);
       return;
     }
-    if (n.type === ze && !P) {
-      P = n;
+    if (n.type === ze && !O) {
+      O = n;
       return;
     }
-    if (n.type === Le && !R) {
-      R = n;
+    if (n.type === Le && !M) {
+      M = n;
       return;
     }
-    if (n.type === De && !z) {
-      z = n;
+    if (n.type === De && !F) {
+      F = n;
       return;
     }
     if (n.type === _e && !ae) {
@@ -384,11 +384,11 @@ const Pt = be((t, r) => {
     }
     Q.push(n);
   });
-  const ve = !!R, we = R ?? (Q.length ? /* @__PURE__ */ e.jsx(Le, { children: Q }) : null), Ae = ve ? Q : [], ue = ae ?? (!!ae ? /* @__PURE__ */ e.jsx(_e, { children: _, context: I, modal: l, closeOnOutsideClick: d }) : null), Te = z ?? (!!z ? /* @__PURE__ */ e.jsx(De, { children: z }) : null), Oe = !!Z, ee = Z, fe = pe(() => ({
-    isCollapsed: m.current,
-    isSidebarOpen: !b.current
-  }), [m.current, b.current]);
-  return /* @__PURE__ */ e.jsx(st.Provider, { value: fe, children: /* @__PURE__ */ e.jsx(nt.Provider, { value: I, children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-container", ref: i, className: D(
+  const ve = !!M, we = M ?? (Q.length ? /* @__PURE__ */ e.jsx(Le, { children: Q }) : null), Ae = ve ? Q : [], ue = ae ?? (!!ae ? /* @__PURE__ */ e.jsx(_e, { children: _, context: $, modal: l, closeOnOutsideClick: d }) : null), Te = F ?? (!!F ? /* @__PURE__ */ e.jsx(De, { children: F }) : null), Oe = !!Z, ee = Z, fe = pe(() => ({
+    isCollapsed: p.current,
+    isSidebarOpen: !g.current
+  }), [p.current, g.current]);
+  return /* @__PURE__ */ e.jsx(st.Provider, { value: fe, children: /* @__PURE__ */ e.jsx(nt.Provider, { value: $, children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-container", ref: i, className: D(
     "w-full h-full max-h-dvh overflow-y-hidden",
     Oe ? "navigation-drawer-with-sidebar" : "navigation-drawer",
     c?.drawer ? "disabled-dragopen" : "",
@@ -397,17 +397,17 @@ const Pt = be((t, r) => {
     /* @__PURE__ */ e.jsxs(
       "div",
       {
-        ref: f,
+        ref: m,
         className: D(
           "bg-neutral-default-default border-r border-neutral-strong-default h-dvh md:h-screen p-4 overflow-hidden drawer flex flex-col gap-4",
-          m.current ? "collapsed" : "expanded",
+          p.current ? "collapsed" : "expanded",
           s
         ),
         children: [
           /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-1 gap-4 overflow-hidden", children: [
             /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ e.jsx(ot, { onToggleCollapse: q }),
-              P
+              /* @__PURE__ */ e.jsx(ot, { onToggleCollapse: V }),
+              O
             ] }),
             /* @__PURE__ */ e.jsxs("div", { className: "flex flex-1 overflow-hidden relative flex-col", children: [
               Ae,
@@ -418,13 +418,13 @@ const Pt = be((t, r) => {
         ]
       }
     ),
-    ue && ke(ue) ? qe.cloneElement(ue, { ref: p, modal: l, closeOnOutsideClick: d }) : ue,
+    ue && ke(ue) ? qe.cloneElement(ue, { ref: h, modal: l, closeOnOutsideClick: d }) : ue,
     ee && ke(ee) ? qe.cloneElement(ee, {
-      ref: x,
+      ref: b,
       className: D("sidebar", ee.props?.className, a)
     }) : ee
   ] }) }) });
-}, Ye = M(Bt), ot = M(({ onToggleCollapse: t }) => /* @__PURE__ */ e.jsx(
+}, Ye = P(Bt), ot = P(({ onToggleCollapse: t }) => /* @__PURE__ */ e.jsx(
   "button",
   {
     type: "button",
@@ -434,29 +434,29 @@ const Pt = be((t, r) => {
   }
 ), (t, r) => t.onToggleCollapse === r.onToggleCollapse);
 ot.displayName = "NavigationDrawerCollapseButton";
-const ze = M(({ children: t, className: r, context: s }) => {
+const ze = P(({ children: t, className: r, context: s }) => {
   const a = ge(t, s);
   return /* @__PURE__ */ e.jsx("div", { className: D("flex items-center justify-between", r), children: a });
 });
 ze.displayName = "NavigationDrawerHeader";
-const Le = M(({ children: t, className: r, context: s, ...a }) => {
+const Le = P(({ children: t, className: r, context: s, ...a }) => {
   const c = ge(t, s);
   return /* @__PURE__ */ e.jsx("div", { ...a, className: D("w-full flex-1 drawer-content select-none", r), children: c });
 });
 Le.displayName = "NavigationDrawerContent";
-const De = M(({ children: t, className: r, context: s }) => {
+const De = P(({ children: t, className: r, context: s }) => {
   const a = ge(t, s);
   return /* @__PURE__ */ e.jsx("div", { className: D("flex items-center justify-between", r), children: a });
 });
 De.displayName = "NavigationDrawerFooter";
-const lt = M(({ className: t }) => /* @__PURE__ */ e.jsx("div", { className: D("w-full border-t border-neutral-strong-default ", t) }));
+const lt = P(({ className: t }) => /* @__PURE__ */ e.jsx("div", { className: D("w-full border-t border-neutral-strong-default ", t) }));
 lt.displayName = "NavigationDrawerSpacer";
-const _e = M(be(({ children: t, className: r, context: s, modal: a, closeOnOutsideClick: c }, l) => {
-  const d = ge(t, s), i = de(), f = () => {
+const _e = P(be(({ children: t, className: r, context: s, modal: a, closeOnOutsideClick: c }, l) => {
+  const d = ge(t, s), i = de(), m = () => {
     c && (i.toggleCollapse(), i.closeSidebar());
   };
   return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-outlet", ref: l, className: D("flex-1 overflow-auto relative h-full max-h-dvh", r), children: [
-    a && /* @__PURE__ */ e.jsx("div", { className: "navigation-drawer-backdrop select-none", onClick: f }),
+    a && /* @__PURE__ */ e.jsx("div", { className: "navigation-drawer-backdrop select-none", onClick: m }),
     d
   ] }) });
 }), (t, r) => t.children === r.children && t.className === r.className), re = Object.assign(Ye, {
@@ -534,21 +534,22 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
     isSelected: l = !1,
     hasSublinks: d,
     subLinksCollapsed: i,
-    onToggleSublinks: f,
-    as: p = "div",
-    onClick: x,
-    onAuxClick: m,
-    disabled: b = !1,
-    tooltipText: j
-  } = t, k = (H) => {
-    b || x?.(H);
-  }, y = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    onToggleSublinks: m,
+    as: h = "div",
+    onClick: b,
+    onAuxClick: p,
+    disabled: g = !1,
+    tooltipText: j,
+    selectorCss: A
+  } = t, y = (z) => {
+    g || b?.(z);
+  }, C = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center flex-nowrap", children: [
-      s && (j ? /* @__PURE__ */ e.jsx(Dt, { title: j, disabled: b, children: /* @__PURE__ */ e.jsx(s, { size: 24, className: Ee({ disabled: b, isSelected: l }) }) }) : /* @__PURE__ */ e.jsx(s, { size: 24, className: Ee({ disabled: b, isSelected: l }) })),
-      /* @__PURE__ */ e.jsx("label", { className: Ut({ disabled: b, isSelected: l }), children: r })
+      s && (j ? /* @__PURE__ */ e.jsx(Dt, { title: j, disabled: g, children: /* @__PURE__ */ e.jsx(s, { size: 24, className: Ee({ disabled: g, isSelected: l }) }) }) : /* @__PURE__ */ e.jsx(s, { size: 24, className: Ee({ disabled: g, isSelected: l }) })),
+      /* @__PURE__ */ e.jsx("label", { className: Ut({ disabled: g, isSelected: l }), children: r })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 items-center", children: [
-      a && a ? /* @__PURE__ */ e.jsx(Qe, { count: a, maxCount: 9, className: "badge", disabled: b }) : "",
+      a && a ? /* @__PURE__ */ e.jsx(Qe, { count: a, maxCount: 9, className: "badge", disabled: g }) : "",
       d && /* @__PURE__ */ e.jsx(
         "div",
         {
@@ -562,49 +563,50 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
           children: /* @__PURE__ */ e.jsx(
             "button",
             {
-              disabled: b,
+              disabled: g,
               type: "button",
-              onClick: f,
-              className: D("absolute cursor-pointer hover:text-primary-default-hover top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-2 z-100 select-none", Ee({ disabled: b, isSelected: l }), b && "pointer-events-none"),
+              onClick: m,
+              className: D("absolute cursor-pointer hover:text-primary-default-hover top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-2 z-100 select-none", Ee({ disabled: g, isSelected: l }), g && "pointer-events-none"),
               children: /* @__PURE__ */ e.jsx(At, {})
             }
           )
         }
       )
     ] })
-  ] }), C = D(
+  ] }), S = D(
     "group navitem",
     "h-12 flex-1 flex items-center p-3 rounded-lg justify-between w-full",
     "transition-all duration-300",
     Ft,
-    zt({ isSelected: l, disabled: b }),
+    zt({ isSelected: l, disabled: g }),
     c
   );
-  if (p === "a") {
-    const H = {
-      onClick: k,
-      onAuxClick: m,
-      className: C
+  if (h === "a") {
+    const z = {
+      onClick: y,
+      onAuxClick: p,
+      className: S
     };
-    return /* @__PURE__ */ e.jsx("a", { ...H, children: y });
+    return /* @__PURE__ */ e.jsx("a", { ...z, children: C });
   }
-  if (p === "button") {
-    const H = {
-      onClick: k,
+  if (h === "button") {
+    const z = {
+      onClick: y,
       type: "button",
-      className: C
+      className: S,
+      id: A
     };
-    return /* @__PURE__ */ e.jsx("button", { ...H, children: y });
+    return /* @__PURE__ */ e.jsx("button", { ...z, children: C });
   }
-  const A = {
-    onClick: k,
-    className: C
+  const K = {
+    onClick: y,
+    className: S
   };
-  return /* @__PURE__ */ e.jsx("div", { ...A, children: y });
-}, Ue = M(Wt);
+  return /* @__PURE__ */ e.jsx("div", { ...K, children: C });
+}, Ue = P(Wt);
 Ue.displayName = "NavigationDrawerItemBase";
 const Ht = (t) => {
-  const { title: r, icon: s, count: a, className: c, isActive: l, onClick: d, isView: i = !0, disabled: f, tooltipText: p } = t;
+  const { title: r, icon: s, count: a, className: c, isActive: l, onClick: d, isView: i = !0, disabled: m, tooltipText: h, selectorCss: b } = t;
   return i ? /* @__PURE__ */ e.jsx(
     Ue,
     {
@@ -615,39 +617,40 @@ const Ht = (t) => {
       className: c,
       isSelected: l,
       onClick: d,
-      disabled: f,
-      tooltipText: p
+      disabled: m,
+      tooltipText: h,
+      selectorCss: b
     }
   ) : null;
-}, it = M(Ht);
+}, it = P(Ht);
 it.displayName = "NavigationDrawerActionItem";
 const Vt = ({ actions: t, activeActionId: r, onActionClick: s, className: a }) => /* @__PURE__ */ e.jsx(xe, { className: D("flex flex-col gap-2 w-full ", a), scrollbarProps: { hide: !0 }, persistScroll: "navigation-actions", indicators: {
   top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
   bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
 }, children: t?.map((c) => {
-  const { id: l, onClick: d, isView: i = !0, payload: f, ...p } = c, x = l === r, m = () => {
-    s?.(l, f), d?.();
+  const { id: l, onClick: d, isView: i = !0, payload: m, ...h } = c, b = l === r, p = () => {
+    s?.(l, m), d?.();
   };
   return i ? /* @__PURE__ */ e.jsx(
     it,
     {
-      ...p,
+      ...h,
       id: l,
-      isActive: x,
-      onClick: m
+      isActive: b,
+      onClick: p
     },
     l
   ) : null;
-}) }), ct = M(Vt);
+}) }), ct = P(Vt);
 ct.displayName = "NavigationDrawerActions";
 const qt = (t) => {
-  const { className: r, title: s, path: a, onClick: c, isSelected: l, parentPath: d } = t, i = h(() => {
+  const { className: r, title: s, path: a, onClick: c, isSelected: l, parentPath: d } = t, i = x(() => {
     c?.(a);
-  }, [a]), f = h(() => {
+  }, [a]), m = x(() => {
     if (a.startsWith("./")) {
       if (!d) return;
-      const p = d + a.slice(2);
-      window.open(p, "_blank");
+      const h = d + a.slice(2);
+      window.open(h, "_blank");
     } else
       window.open(a, "_blank");
   }, [a]);
@@ -655,7 +658,7 @@ const qt = (t) => {
     "a",
     {
       onClick: i,
-      onAuxClick: f,
+      onAuxClick: m,
       className: D(
         "group",
         "transition-all duration-300 ease-in-out cursor-pointer",
@@ -671,107 +674,108 @@ const qt = (t) => {
       ), children: s })
     }
   );
-}, dt = M(qt);
+}, dt = P(qt);
 dt.displayName = "NavItemSecondary";
 const $t = be((t, r) => {
-  const [s, a] = J(!0), c = O(null), { path: l, title: d, icon: i, count: f, className: p, isSelected: x = !1, onClick: m, sublinks: b, toggleCollapse: j, getIsCollapsed: k, subscribeToCollapse: y, isView: C = !0, disabled: A, tooltipText: H } = t;
-  se(() => y ? y((_) => {
-    _ && a(!0);
+  const [s, a] = J(!0), c = I(null), { path: l, title: d, icon: i, count: m, className: h, isSelected: b = !1, onClick: p, sublinks: g, toggleCollapse: j, getIsCollapsed: A, subscribeToCollapse: y, isView: C = !0, disabled: S, tooltipText: K, selectorCss: z } = t;
+  se(() => y ? y((u) => {
+    u && a(!0);
   }) : void 0, [y]);
-  const K = h(() => {
-    a((I) => !I);
-  }, []), S = h((I) => {
-    a(I);
-  }, []), U = {
-    toggle: K,
-    setIsCollapsed: S,
+  const k = x(() => {
+    a((_) => !_);
+  }, []), U = x((_) => {
+    a(_);
+  }, []), v = {
+    toggle: k,
+    setIsCollapsed: U,
     get isCollapsed() {
       return s;
     },
     get isDrawerCollapsed() {
-      return k?.() ?? !1;
+      return A?.() ?? !1;
     },
     toggleDrawerCollapse: j,
     subscribeToCollapse: y
   };
-  Re(r, () => U, [U, s, k, j]);
-  const N = i, $ = h(() => {
-    const I = k?.() ?? !1;
-    if (b && b.length > 0 && I) {
-      S(!1), j?.();
+  Re(r, () => v, [v, s, A, j]);
+  const q = i, G = x(() => {
+    const _ = A?.() ?? !1;
+    if (g && g.length > 0 && _) {
+      U(!1), j?.();
       return;
     }
-    m?.(l);
-  }, [l, m, b, j, S, k]), G = h(() => {
+    p?.(l);
+  }, [l, p, g, j, U, A]), V = x(() => {
     window.open(l, "_blank");
-  }, [l]), q = () => {
-    if (!b || A) return null;
-    if (t.subLinksRender && b)
-      return t.subLinksRender(b, U);
-    const I = h((_) => {
-      if (_.startsWith("./")) {
-        const g = l + _.slice(2);
-        m?.(g);
+  }, [l]), X = () => {
+    if (!g || S) return null;
+    if (t.subLinksRender && g)
+      return t.subLinksRender(g, v);
+    const _ = x((u) => {
+      if (u.startsWith("./")) {
+        const O = l + u.slice(2);
+        p?.(O);
       } else
-        m?.(_);
+        p?.(u);
     }, [l]);
     return se(() => {
-      const _ = c.current;
-      if (!_) return;
-      const g = _.scrollHeight;
-      _.style.setProperty("--sublinks-max-height", `${g}px`);
-    }, []), /* @__PURE__ */ e.jsx("div", { ref: c, className: `sublinks flex flex-col gap-1 ml-8 ${s ? "collapsed" : "expanded"}`, children: b.map((_) => /* @__PURE__ */ e.jsx(dt, { ..._, onClick: I, parentPath: l }, `${_.title}-${_.path}`)) });
-  }, X = (I) => {
-    I.stopPropagation(), I.preventDefault(), K();
+      const u = c.current;
+      if (!u) return;
+      const O = u.scrollHeight;
+      u.style.setProperty("--sublinks-max-height", `${O}px`);
+    }, []), /* @__PURE__ */ e.jsx("div", { ref: c, className: `sublinks flex flex-col gap-1 ml-8 ${s ? "collapsed" : "expanded"}`, children: g.map((u) => /* @__PURE__ */ e.jsx(dt, { ...u, onClick: _, parentPath: l }, `${u.title}-${u.path}`)) });
+  }, $ = (_) => {
+    _.stopPropagation(), _.preventDefault(), k();
   };
-  return C ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 ", children: [
+  return C ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 ", id: z, children: [
     /* @__PURE__ */ e.jsx(
       Ue,
       {
         as: "a",
         title: d,
-        icon: N,
-        count: f,
-        className: p,
-        isSelected: x,
-        hasSublinks: !!b,
+        icon: q,
+        count: m,
+        className: h,
+        isSelected: b,
+        hasSublinks: !!g,
         subLinksCollapsed: s,
-        onToggleSublinks: X,
-        onClick: $,
-        onAuxClick: G,
-        disabled: A,
-        tooltipText: H
+        onToggleSublinks: $,
+        onClick: G,
+        onAuxClick: V,
+        disabled: S,
+        tooltipText: K
       }
     ),
-    q()
+    X()
   ] }) : null;
-}), ut = M($t);
+}), ut = P($t);
 ut.displayName = "NavigationDrawerLinkItem";
 const Kt = ({ navlinks: t, handleNavigation: r, className: s, getIsCollapsed: a, toggleCollapse: c, subscribeToCollapse: l }) => {
   const { pathname: d } = St();
   return /* @__PURE__ */ e.jsx(xe, { className: D("flex flex-col gap-2 w-full ", s), scrollbarProps: { hide: !0 }, persistScroll: "navigation-links", indicators: {
     top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
     bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
-  }, children: t?.map((i, f) => {
-    const p = i.isSelected || i.path === d || (i.relatedPaths?.some((x) => d.startsWith(x)) ?? !1);
+  }, children: t?.map((i, m) => {
+    const h = i.isSelected || i.path === d || (i.relatedPaths?.some((b) => d.startsWith(b)) ?? !1) || (i.sublinks?.some((b) => b.path === d) ?? !1);
     return /* @__PURE__ */ e.jsx(
       ut,
       {
         ...i,
-        isSelected: p,
+        isSelected: h,
         onClick: r,
         toggleCollapse: c,
         getIsCollapsed: a,
         subscribeToCollapse: l,
         disabled: i.disabled,
-        isView: i.isView
+        isView: i.isView,
+        selectorCss: i.selectorCss
       },
-      f
+      m
     );
   }) });
-}, ft = M(Kt);
+}, ft = P(Kt);
 ft.displayName = "NavigationDrawerNavlinks";
-const mt = M(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId: a, onActionClick: c }) => {
+const mt = P(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId: a, onActionClick: c }) => {
   const { getIsCollapsed: l, toggleCollapse: d, subscribeToCollapse: i } = de();
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(re.Spacer, { className: "pb-3" }),
@@ -804,32 +808,32 @@ const Yt = (t) => {
   const { sessions: r, onSessionClick: s, secondarySlot: a, subImageUrlAccessor: c } = t;
   if (!r || r.length === 0)
     return null;
-  const l = (f, p) => {
-    s && p && s(f, p);
-  }, d = (f) => {
+  const l = (m, h) => {
+    s && h && s(m, h);
+  }, d = (m) => {
     if (!c)
       return;
-    const p = f.metadata;
-    if (!p)
+    const h = m.metadata;
+    if (!h)
       return;
-    const x = Se({ metadata: p }, c);
-    if (x != null)
-      return typeof x == "string" ? x : String(x);
-  }, i = h((f) => typeof a == "function" ? a(f) : a, [a]);
-  return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-2", children: r?.map((f) => {
-    const { auth_id: p } = f;
-    return /* @__PURE__ */ e.jsx(ie, { className: " shrink-0 h-max", children: /* @__PURE__ */ e.jsx(ie.Content, { onClick: () => l(f, t.userOptionsControls), className: "p-0 group-data-[expanded=true]/ticketcard:border-none", children: /* @__PURE__ */ e.jsx(
+    const b = Se({ metadata: h }, c);
+    if (b != null)
+      return typeof b == "string" ? b : String(b);
+  }, i = x((m) => typeof a == "function" ? a(m) : a, [a]);
+  return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-2", children: r?.map((m) => {
+    const { auth_id: h } = m;
+    return /* @__PURE__ */ e.jsx(ie, { className: " shrink-0 h-max", children: /* @__PURE__ */ e.jsx(ie.Content, { onClick: () => l(m, t.userOptionsControls), className: "p-0 group-data-[expanded=true]/ticketcard:border-none", children: /* @__PURE__ */ e.jsx(
       Ze,
       {
-        name: p.name,
+        name: h.name,
         avatarSize: "xxs",
-        secondarySlot: i(f),
-        subImageUrl: d(f),
-        imageUrl: p.profile_picture,
+        secondarySlot: i(m),
+        subImageUrl: d(m),
+        imageUrl: h.profile_picture,
         className: "pyrion-navigation-drawer-user-card"
       },
-      f.token
-    ) }) }, f.token);
+      m.token
+    ) }) }, m.token);
   }) });
 }, Xt = ({
   state: t,
@@ -840,20 +844,20 @@ const Yt = (t) => {
   onLogoutClick: l,
   onProfileClick: d,
   options: i,
-  currentSystemId: f,
-  userOptionsControls: p,
-  mobileAppSwitcherControls: x
+  currentSystemId: m,
+  userOptionsControls: h,
+  mobileAppSwitcherControls: b
 }) => {
-  const { getIsCollapsed: m, toggleCollapse: b, subscribeToCollapse: j } = de(), k = h(() => {
-    const y = m();
-    y ? (b(), p.current?.open()) : d?.(y);
-  }, [m, b, p, d]);
+  const { getIsCollapsed: p, toggleCollapse: g, subscribeToCollapse: j } = de(), A = x(() => {
+    const y = p();
+    y ? (g(), h.current?.open()) : d?.(y);
+  }, [p, g, h, d]);
   return se(() => j((y) => {
-    y && (p.current?.close(), x.current?.close());
-  }), [j, p, x]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    y && (h.current?.close(), b.current?.close());
+  }), [j, h, b]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(re.Spacer, { className: "mb-3" }),
-    /* @__PURE__ */ e.jsxs(ie, { className: "", controls: p, children: [
-      /* @__PURE__ */ e.jsx(ie.Content, { onClick: k, children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsxs(ie, { className: "", controls: h, children: [
+      /* @__PURE__ */ e.jsx(ie.Content, { onClick: A, children: /* @__PURE__ */ e.jsx(
         Ze,
         {
           className: "pyrion-navigation-drawer-user-card p-0",
@@ -875,8 +879,8 @@ const Yt = (t) => {
               onSessionClick: c,
               secondarySlot: a,
               subImageUrlAccessor: i?.sessionCardOptions?.subImageUrlAccessor,
-              currentSystemId: f,
-              userOptionsControls: p
+              currentSystemId: m,
+              userOptionsControls: h
             }
           ) })
         ] }),
@@ -900,7 +904,7 @@ const Yt = (t) => {
       ] })
     ] })
   ] });
-}, pt = M(Xt, (t, r) => {
+}, pt = P(Xt, (t, r) => {
   const s = Object.keys(t), a = Object.keys(r);
   if (s.length !== a.length)
     return !1;
@@ -942,11 +946,11 @@ const Jt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(ie,
     ] }),
     /* @__PURE__ */ e.jsx("div", {})
   ] })
-] }), Pe = M(({ enabled_systems: t, onClick: r, currentSystemId: s }) => {
-  const a = h(() => {
+] }), Pe = P(({ enabled_systems: t, onClick: r, currentSystemId: s }) => {
+  const a = x(() => {
     if (t) {
       if (s) {
-        const i = t.find((f) => f._id === s);
+        const i = t.find((m) => m._id === s);
         if (i) return { coverImage: i.coverImage, thumbnail: i.thumbnail };
       }
       const l = window.location.origin, d = t.find((i) => i.url === l);
@@ -978,11 +982,11 @@ const Jt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(ie,
   ] });
 }, (t, r) => t.enabled_systems === r.enabled_systems && t.onClick === r.onClick && t.currentSystemId === r.currentSystemId);
 Pe.displayName = "PyrionNavigationDrawer.SystemLogo";
-const ht = M(({ onSystemLogoClick: t, state: r, currentSystemId: s, tabs: a, mobileAppSwitcherControls: c }) => {
-  const { getIsCollapsed: l } = de(), d = Je(), i = h(() => {
+const ht = P(({ onSystemLogoClick: t, state: r, currentSystemId: s, tabs: a, mobileAppSwitcherControls: c }) => {
+  const { getIsCollapsed: l } = de(), d = Je(), i = x(() => {
     if (t) {
-      const f = l();
-      t(f);
+      const m = l();
+      t(m);
     }
   }, [t, l]);
   return d ? /* @__PURE__ */ e.jsx(
@@ -1019,54 +1023,54 @@ const Xe = ({ type: t }) => {
   ] }),
   /* @__PURE__ */ e.jsx(ce, { shape: "rounded", className: "w-20 h-3" })
 ] }), Qt = ({ onCloseClick: t, onMarkAllAsRead: r, notificationsListControls: s, scrollableControls: a }) => {
-  const [c, l] = J([]), [d, i] = J("NO_LEIDAS"), [f, p] = J({ isLoading: !1, type: "load_more" }), [x, m] = J({ hasError: !1 }), b = O(/* @__PURE__ */ new Set()), j = O(null), k = O(null), y = h((g, P = "top") => {
-    l((R) => {
-      const z = Array.isArray(g) ? P === "bottom" ? [...R, ...g] : [...g, ...R] : P === "bottom" ? [...R, g] : [g, ...R];
+  const [c, l] = J([]), [d, i] = J("NO_LEIDAS"), [m, h] = J({ isLoading: !1, type: "load_more" }), [b, p] = J({ hasError: !1 }), g = I(/* @__PURE__ */ new Set()), j = I(null), A = I(null), y = x((u, O = "top") => {
+    l((M) => {
+      const F = Array.isArray(u) ? O === "bottom" ? [...M, ...u] : [...u, ...M] : O === "bottom" ? [...M, u] : [u, ...M];
       return queueMicrotask(() => {
-        b.current.forEach((Q) => Q(z, z.length));
-      }), z;
+        g.current.forEach((Q) => Q(F, F.length));
+      }), F;
     });
-  }, []), C = h((g) => (b.current.add(g), () => {
-    b.current.delete(g);
-  }), []), A = h((g) => {
-    l((P) => {
-      const R = Array.isArray(g) ? P.filter((z) => !g.includes(z._id)) : P.filter((z) => z._id !== g);
+  }, []), C = x((u) => (g.current.add(u), () => {
+    g.current.delete(u);
+  }), []), S = x((u) => {
+    l((O) => {
+      const M = Array.isArray(u) ? O.filter((F) => !u.includes(F._id)) : O.filter((F) => F._id !== u);
       return queueMicrotask(() => {
-        b.current.forEach((z) => z(R, R.length));
-      }), R;
+        g.current.forEach((F) => F(M, M.length));
+      }), M;
     });
-  }, []), H = h(() => {
+  }, []), K = x(() => {
     l([]), queueMicrotask(() => {
-      b.current.forEach((g) => g([], 0));
+      g.current.forEach((u) => u([], 0));
     });
-  }, []), K = h((g) => {
-    l(g), queueMicrotask(() => {
-      b.current.forEach((P) => P(g, g.length));
+  }, []), z = x((u) => {
+    l(u), queueMicrotask(() => {
+      g.current.forEach((O) => O(u, u.length));
     });
-  }, []), S = h((g, P = "load_more") => {
-    p({ isLoading: g, type: P });
-  }, []), U = h((g, P) => {
-    m({ hasError: g, children: P });
+  }, []), k = x((u, O = "load_more") => {
+    h({ isLoading: u, type: O });
+  }, []), U = x((u, O) => {
+    p({ hasError: u, children: O });
   }, []);
   Re(s, () => ({
     addNewNotification: y,
     subscribeToUpdates: C,
-    setNotifications: K,
-    removeNotification: A,
-    removeAllNotifications: H,
-    setLoading: S,
+    setNotifications: z,
+    removeNotification: S,
+    removeAllNotifications: K,
+    setLoading: k,
     setError: U
-  }), [y, C, K, A, H, S, U]);
-  const N = (g) => {
-    i(g);
-  }, $ = c.length > 0;
+  }), [y, C, z, S, K, k, U]);
+  const v = (u) => {
+    i(u);
+  }, q = c.length > 0;
   Ct(() => {
-    if (j.current && k.current) {
-      const g = j.current.clientHeight;
-      k.current.style.setProperty("height", `calc(100vh - ${g}px - 20px)`);
+    if (j.current && A.current) {
+      const u = j.current.clientHeight;
+      A.current.style.setProperty("height", `calc(100vh - ${u}px - 20px)`);
     }
   }, [j?.current]);
-  const G = c.filter((g) => !g.read).length, { isLoading: q, type: X } = f, { hasError: I, children: _ } = x;
+  const G = c.filter((u) => !u.read).length, { isLoading: V, type: X } = m, { hasError: $, children: _ } = b;
   return /* @__PURE__ */ e.jsx(
     "section",
     {
@@ -1084,34 +1088,34 @@ const Xe = ({ type: t }) => {
             It,
             {
               className: "px-4 md:px-2 md:pl-2 pl-2 gap-0 md:gap-0",
-              onTabChange: N,
+              onTabChange: v,
               activeTab: d,
               items: [
                 { id: "ALL", title: "Todas" },
                 { id: "NO_LEIDAS", title: "Sin leer" }
               ],
-              renderTab: (g, P, R, z, Q, ae, Z, ve) => /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+              renderTab: (u, O, M, F, Q, ae, Z, ve) => /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ e.jsx(
                   Et,
                   {
-                    id: g.id,
-                    title: g.title,
-                    onClick: R,
-                    isActive: P,
-                    onIconClick: z,
+                    id: u.id,
+                    title: u.title,
+                    onClick: M,
+                    isActive: O,
+                    onIconClick: F,
                     onIconHover: Q,
                     iconTooltipProps: Z,
                     iconTooltipTitle: ae,
                     iconSize: ve
                   }
                 ),
-                G > 0 && g.id === "NO_LEIDAS" && (q ? /* @__PURE__ */ e.jsx("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ e.jsx(ce, { className: "size-5.5", shape: "circle" }) }) : /* @__PURE__ */ e.jsx(Qe, { count: G, className: "absolute top-0 right-0" }))
+                G > 0 && u.id === "NO_LEIDAS" && (V ? /* @__PURE__ */ e.jsx("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ e.jsx(ce, { className: "size-5.5", shape: "circle" }) }) : /* @__PURE__ */ e.jsx(Qe, { count: G, className: "absolute top-0 right-0" }))
               ] })
             }
           ),
-          r && $ && d === "NO_LEIDAS" && !I && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end px-4", children: /* @__PURE__ */ e.jsx(he, { disabled: q, onClick: r, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) })
+          r && q && d === "NO_LEIDAS" && !$ && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end px-4", children: /* @__PURE__ */ e.jsx(he, { disabled: V, onClick: r, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) })
         ] }),
-        /* @__PURE__ */ e.jsx("div", { ref: k, className: "", children: /* @__PURE__ */ e.jsxs(
+        /* @__PURE__ */ e.jsx("div", { ref: A, className: "", children: /* @__PURE__ */ e.jsxs(
           xe,
           {
             className: "px-4 md:px-2 py-0 md:py-0 flex flex-col gap-3 h-full",
@@ -1125,13 +1129,13 @@ const Xe = ({ type: t }) => {
             },
             scrollMetadata: {
               activeTab: d,
-              isLoading: q
+              isLoading: V
             },
             children: [
-              I && /* @__PURE__ */ e.jsx("div", { className: "w-full h-full grid place-items-center", children: typeof _ == "function" ? _() : _ }),
-              !I && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                q && X === "skeletons" ? /* @__PURE__ */ e.jsx(Xe, { type: X }) : $ ? c?.filter((g) => d === "NO_LEIDAS" ? !g.read : g)?.map((g, P) => /* @__PURE__ */ e.jsx(Ot, { ...g, className: " border-b border-neutral-strong-default rounded-b-none last:border-b-0" }, P)) : /* @__PURE__ */ e.jsx("p", { className: "flex-1 grid place-items-center prometeo-fonts-headline-xsmall text-neutral-default-default text-center py-8 text-balance", children: "No tienes notificaciones nuevas por el momento" }),
-                q && X === "load_more" && /* @__PURE__ */ e.jsx(Xe, { type: X })
+              $ && /* @__PURE__ */ e.jsx("div", { className: "w-full h-full grid place-items-center", children: typeof _ == "function" ? _() : _ }),
+              !$ && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                V && X === "skeletons" ? /* @__PURE__ */ e.jsx(Xe, { type: X }) : q ? c?.filter((u) => d === "NO_LEIDAS" ? !u.read : u)?.map((u, O) => /* @__PURE__ */ e.jsx(Ot, { ...u, className: " border-b border-neutral-strong-default rounded-b-none last:border-b-0" }, O)) : /* @__PURE__ */ e.jsx("p", { className: "flex-1 grid place-items-center prometeo-fonts-headline-xsmall text-neutral-default-default text-center py-8 text-balance", children: "No tienes notificaciones nuevas por el momento" }),
+                V && X === "load_more" && /* @__PURE__ */ e.jsx(Xe, { type: X })
               ] })
             ]
           }
@@ -1155,24 +1159,24 @@ const Xe = ({ type: t }) => {
     ]
   }
 ), er = ({ closeSidebar: t, options: r, helpSection: s, initialSection: a, notificationsListControls: c, scrollableControls: l }, d) => {
-  const [i, f] = J(a ?? "notifications");
+  const [i, m] = J(a ?? "notifications");
   Re(d, () => ({
-    setActiveSection: f
+    setActiveSection: m
   }));
-  const p = () => {
+  const h = () => {
     t();
   };
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     i === "notifications" && !r?.notificationsDrawerOptions?.hide && /* @__PURE__ */ e.jsx(
       Qt,
       {
-        onCloseClick: p,
+        onCloseClick: h,
         onMarkAllAsRead: r?.notificationsDrawerOptions?.onMarkAllAsRead,
         notificationsListControls: c,
         scrollableControls: l
       }
     ),
-    i === "help" && s && !r?.helpSectionDrawerOptions?.hide && /* @__PURE__ */ e.jsx(Zt, { onCloseClick: p, children: typeof s == "function" ? s() : s })
+    i === "help" && s && !r?.helpSectionDrawerOptions?.hide && /* @__PURE__ */ e.jsx(Zt, { onCloseClick: h, children: typeof s == "function" ? s() : s })
   ] });
 }, bt = be(er);
 bt.displayName = "SidebarContent";
@@ -1197,15 +1201,15 @@ const tr = ({
       scrollableControls: l
     }
   );
-}, xt = M(tr);
+}, xt = P(tr);
 xt.displayName = "PyrionNavigationDrawer.Sidebar";
 const rr = ({ navigationControlsRef: t }) => {
   const r = de();
   return t.current.toggleCollapse = r.toggleCollapse, t.current.getIsCollapsed = r.getIsCollapsed, t.current.subscribeToCollapse = r.subscribeToCollapse, t.current.openSidebar = r.openSidebar, t.current.closeSidebar = r.closeSidebar, t.current.toggleSidebar = r.toggleSidebar, t.current.getIsSidebarOpen = r.getIsSidebarOpen, t.current.subscribeToSidebarOpen = r.subscribeToSidebarOpen, t.current.setDrawerDragEnabled = r.setDrawerDragEnabled, t.current.setSidebarDragEnabled = r.setSidebarDragEnabled, null;
 }, sr = (t) => {
-  const { children: r, currentAppSessions: s, resolveUserSecondarySlot: a, resolveSessionSecondarySlot: c, handleNavigation: l, allActions: d, tabs: i, navigationControlsRef: f, sidebarContentRef: p, initialSectionRef: x, userOptionsControls: m, mobileAppSwitcherControls: b, notificationsListControls: j, scrollableControls: k, outletRef: y, ...C } = t;
+  const { children: r, currentAppSessions: s, resolveUserSecondarySlot: a, resolveSessionSecondarySlot: c, handleNavigation: l, allActions: d, tabs: i, navigationControlsRef: m, sidebarContentRef: h, initialSectionRef: b, userOptionsControls: p, mobileAppSwitcherControls: g, notificationsListControls: j, scrollableControls: A, outletRef: y, ...C } = t;
   return /* @__PURE__ */ e.jsxs(re, { disableDragOpen: C.options?.disableDragOpen, outletRef: y, children: [
-    /* @__PURE__ */ e.jsx(rr, { navigationControlsRef: f }),
+    /* @__PURE__ */ e.jsx(rr, { navigationControlsRef: m }),
     /* @__PURE__ */ e.jsx(re.Header, { className: "flex flex-col relative w-full select-none", children: /* @__PURE__ */ e.jsx(
       ht,
       {
@@ -1213,7 +1217,7 @@ const rr = ({ navigationControlsRef: t }) => {
         state: C.state,
         currentSystemId: C.currentSystemId,
         tabs: i,
-        mobileAppSwitcherControls: b
+        mobileAppSwitcherControls: g
       }
     ) }, "PL-Header"),
     /* @__PURE__ */ e.jsx(re.Content, { className: "overflow-hidden flex flex-col relative flex-1  md:w-auto", children: /* @__PURE__ */ e.jsx(
@@ -1237,8 +1241,8 @@ const rr = ({ navigationControlsRef: t }) => {
         onLogoutClick: C.onLogoutClick,
         options: C.options,
         currentSystemId: C.currentSystemId,
-        userOptionsControls: m,
-        mobileAppSwitcherControls: b,
+        userOptionsControls: p,
+        mobileAppSwitcherControls: g,
         onProfileClick: C.onProfileClick
       }
     ) }, "PL-Footer"),
@@ -1254,51 +1258,51 @@ const rr = ({ navigationControlsRef: t }) => {
           {
             options: C.options,
             helpSection: C.helpSection,
-            sidebarContentRef: p,
-            initialSectionRef: x,
+            sidebarContentRef: h,
+            initialSectionRef: b,
             notificationsListControls: j,
-            scrollableControls: k
+            scrollableControls: A
           }
         )
       }
     )
   ] });
-}, gt = M(sr, (t, r) => {
+}, gt = P(sr, (t, r) => {
   const { children: s, ...a } = t, { children: c, ...l } = r, d = Object.keys(a), i = Object.keys(l);
   if (d.length !== i.length)
     return !1;
-  for (const f of d) {
-    if (!Object.prototype.hasOwnProperty.call(l, f))
+  for (const m of d) {
+    if (!Object.prototype.hasOwnProperty.call(l, m))
       return !1;
-    const p = a[f], x = l[f];
-    if (p !== x)
+    const h = a[m], b = l[m];
+    if (h !== b)
       return !1;
   }
   return !0;
 });
 gt.displayName = "PyrionNavigationDrawer.LayoutBase";
-const vt = M(({ children: t }) => /* @__PURE__ */ e.jsx(re.Outlet, { children: t }));
+const vt = P(({ children: t }) => /* @__PURE__ */ e.jsx(re.Outlet, { children: t }));
 vt.displayName = "PyrionNavigationDrawer.IsolatedOutlet";
 const wt = Me(null), Dr = () => {
   const t = jt(wt);
   if (!t)
     throw new Error("usePyrionLayout debe usarse dentro de PyrionLayout");
   return t;
-}, Ar = ({ children: t, helpSection: r, state: s, links: a, onLinkClick: c, onNavigate: l, onLogoutClick: d, actions: i, activeActionId: f, onActionClick: p, tabsProps: x, currentSystemId: m, onSessionClick: b, onSystemLogoClick: j, onProfileClick: k, ...y }) => {
-  const A = Object.assign({
+}, Ar = ({ children: t, helpSection: r, state: s, links: a, onLinkClick: c, onNavigate: l, onLogoutClick: d, actions: i, activeActionId: m, onActionClick: h, tabsProps: b, currentSystemId: p, onSessionClick: g, onSystemLogoClick: j, onProfileClick: A, ...y }) => {
+  const S = Object.assign({
     closeDrawerOnNavigate: !0,
     disableDragOpen: {
       sidebar: !0,
       drawer: !1
     }
-  }, y.options), H = kt(), K = Je(), S = O(null), U = O(null), N = O({}), $ = O(null), G = O("notifications"), q = O(null), X = O(null), I = O(null), [_, g] = J(0), [P, R] = J(!1), [z, Q] = J(null), ae = h((o) => {
-    if (R(!1), c) {
+  }, y.options), K = kt(), z = Je(), k = I(null), U = I(null), v = I({}), q = I(null), G = I("notifications"), V = I(null), X = I(null), $ = I(null), [_, u] = J(0), [O, M] = J(!1), [F, Q] = J(null), ae = x((o) => {
+    if (M(!1), c) {
       c(o);
       return;
     }
-    const w = window.location.pathname;
-    H(o), A.closeDrawerOnNavigate && Nt() && !N.current?.getIsCollapsed?.() && N.current?.toggleCollapse?.(), l && l(w, o);
-  }, [c, l, H]), Z = (o) => {
+    const N = window.location.pathname;
+    K(o), S.closeDrawerOnNavigate && Nt() && !v.current?.getIsCollapsed?.() && v.current?.toggleCollapse?.(), l && l(N, o);
+  }, [c, l, K]), Z = (o) => {
     o && window.open(o, "_blank");
   }, we = {
     system: {
@@ -1311,35 +1315,35 @@ const wt = Me(null), Dr = () => {
       mobile: Z,
       desktop: Z
     }
-  }, Ae = h((o) => {
-    const w = K ? "mobile" : "desktop", F = s.enabled_systems.find((T) => T.name === o)?.url;
-    we.system[w](F), x?.onTabClick?.(o);
-  }, [K, s.enabled_systems, x?.onTabClick]), We = h((o) => {
-    const w = K ? "mobile" : "desktop", F = s.company.products?.find((T) => T.name === o)?.domain;
-    we.product[w](F), x?.onTabClick?.(o);
-  }, [K, s.company.products, x?.onTabClick]), ue = h((o, w) => {
-    if (w) {
-      w(o), x?.onTabClick?.(o);
+  }, Ae = x((o) => {
+    const N = z ? "mobile" : "desktop", B = s.enabled_systems.find((T) => T.name === o)?.url;
+    we.system[N](B), b?.onTabClick?.(o);
+  }, [z, s.enabled_systems, b?.onTabClick]), We = x((o) => {
+    const N = z ? "mobile" : "desktop", B = s.company.products?.find((T) => T.name === o)?.domain;
+    we.product[N](B), b?.onTabClick?.(o);
+  }, [z, s.company.products, b?.onTabClick]), ue = x((o, N) => {
+    if (N) {
+      N(o), b?.onTabClick?.(o);
       return;
     } else
-      x?.onTabClick?.(o);
-  }, [x?.onTabClick]), He = h(() => {
+      b?.onTabClick?.(o);
+  }, [b?.onTabClick]), He = x(() => {
     const o = {};
-    s.enabled_systems.forEach((F) => {
-      o[F.url] = F.name;
+    s.enabled_systems.forEach((B) => {
+      o[B.url] = B.name;
     });
-    const w = window.location.origin;
-    for (const [F, T] of Object.entries(o))
-      if (w === F)
+    const N = window.location.origin;
+    for (const [B, T] of Object.entries(o))
+      if (N === B)
         return T;
     return "";
-  }, [s.enabled_systems]), Te = x?.currentTabName || He(), Oe = pe(
+  }, [s.enabled_systems]), Te = b?.currentTabName || He(), Oe = pe(
     () => s.sessions || [],
     [s.sessions]
-  ), ee = (o) => o == null ? null : typeof o == "string" || typeof o == "number" || typeof o == "boolean" ? String(o) : ke(o) ? o : typeof o == "object" ? JSON.stringify(o) : null, fe = h((o, w) => {
+  ), ee = (o) => o == null ? null : typeof o == "string" || typeof o == "number" || typeof o == "boolean" ? String(o) : ke(o) ? o : typeof o == "object" ? JSON.stringify(o) : null, fe = x((o, N) => {
     if (!o) return null;
     if (Array.isArray(o)) {
-      const F = o?.[0] ? Se(w, o[0]) : null, T = o?.[1] ? Se(w, o[1]) : null, ne = ee(F), Ve = ee(T);
+      const B = o?.[0] ? Se(N, o[0]) : null, T = o?.[1] ? Se(N, o[1]) : null, ne = ee(B), Ve = ee(T);
       return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default line-clamp-1 min-w-[40%] text-nowrap wrap-break-word overflow-hidden text-ellipsis", children: ne }),
         Ve && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 flex-1 grow shrink-0 min-w-max max-w-2/3 overflow-visible ", children: [
@@ -1349,112 +1353,112 @@ const wt = Me(null), Dr = () => {
       ] });
     }
     if (typeof o == "string") {
-      const F = Se(w, o);
-      return ee(F);
+      const B = Se(N, o);
+      return ee(B);
     }
-    return typeof o == "function" ? ee(o(w)) : null;
-  }, []), n = h(
+    return typeof o == "function" ? ee(o(N)) : null;
+  }, []), n = x(
     (o) => {
-      const w = A?.userCardOptions?.secondarySlot;
-      if (!w) return null;
-      const F = s.enabled_systems?.find((ne) => ne._id === m), T = { company: s.company, user: s.user, system: F, metadata: o };
-      return fe(w, T);
+      const N = S?.userCardOptions?.secondarySlot;
+      if (!N) return null;
+      const B = s.enabled_systems?.find((ne) => ne._id === p), T = { company: s.company, user: s.user, system: B, metadata: o };
+      return fe(N, T);
     },
-    [m, A?.userCardOptions?.secondarySlot, fe, s.company, s.enabled_systems, s.user]
-  ), u = h(
+    [p, S?.userCardOptions?.secondarySlot, fe, s.company, s.enabled_systems, s.user]
+  ), f = x(
     (o) => {
-      const w = A?.sessionCardOptions?.secondarySlot || A?.userCardOptions?.secondarySlot;
-      if (!w) return null;
-      const F = s.enabled_systems?.find((ne) => ne._id === m), T = { company: s.company, user: o.auth_id, metadata: o?.metadata, system: F };
-      return fe(w, T);
+      const N = S?.sessionCardOptions?.secondarySlot || S?.userCardOptions?.secondarySlot;
+      if (!N) return null;
+      const B = s.enabled_systems?.find((ne) => ne._id === p), T = { company: s.company, user: o.auth_id, metadata: o?.metadata, system: B };
+      return fe(N, T);
     },
-    [m, A?.sessionCardOptions?.secondarySlot, A?.userCardOptions?.secondarySlot, fe, s.company, s.enabled_systems]
-  ), v = pe(() => {
+    [p, S?.sessionCardOptions?.secondarySlot, S?.userCardOptions?.secondarySlot, fe, s.company, s.enabled_systems]
+  ), w = pe(() => {
     const o = [];
-    return N.current.openNotifications = () => {
-      G.current = "notifications", N.current.openSidebar?.(), $.current?.setActiveSection("notifications");
-    }, N.current.openHelp = () => {
-      G.current = "help", N.current.openSidebar?.(), $.current?.setActiveSection("help");
-    }, !A?.notificationsDrawerOptions?.hideActionButton && !A?.notificationsDrawerOptions?.hide && o.push({
+    return v.current.openNotifications = () => {
+      G.current = "notifications", v.current.openSidebar?.(), q.current?.setActiveSection("notifications");
+    }, v.current.openHelp = () => {
+      G.current = "help", v.current.openSidebar?.(), q.current?.setActiveSection("help");
+    }, !S?.notificationsDrawerOptions?.hideActionButton && !S?.notificationsDrawerOptions?.hide && o.push({
       id: "notifications",
       title: "Notificaciones",
       icon: et,
-      onClick: N.current.openNotifications,
+      onClick: v.current.openNotifications,
       count: _
-    }), !A?.helpSectionDrawerOptions?.hideActionButton && r && !A?.helpSectionDrawerOptions?.hide && o.push({
+    }), !S?.helpSectionDrawerOptions?.hideActionButton && r && !S?.helpSectionDrawerOptions?.hide && o.push({
       id: "help",
       title: "Ayuda",
       icon: tt,
-      onClick: N.current.openHelp
-    }), A?.configurationActionOptions?.onClick && !A?.configurationActionOptions?.hideActionButton && o.push({
+      onClick: v.current.openHelp
+    }), S?.configurationActionOptions?.onClick && !S?.configurationActionOptions?.hideActionButton && o.push({
       id: "configuration",
       title: "Configuracion",
       icon: _t,
-      onClick: A.configurationActionOptions?.onClick
+      onClick: S.configurationActionOptions?.onClick
     }), o;
-  }, [A, r, p, _]), E = pe(
-    () => [...v, ...i || []],
-    [v, i]
-  ), V = pe(() => {
+  }, [S, r, h, _]), E = pe(
+    () => [...w, ...i || []],
+    [w, i]
+  ), H = pe(() => {
     const o = s.enabled_systems.map((T) => ({
       name: T.name,
       thumbnail: T.thumbnail,
       onClick: Ae,
       id: T._id
-    })) || [], w = x?.customTabs?.map((T) => ({
+    })) || [], N = b?.customTabs?.map((T) => ({
       ...T,
       onClick: () => ue(T.name, T?.onClick)
-    })) || [], F = s.company.products?.map((T) => ({
+    })) || [], B = s.company.products?.map((T) => ({
       name: T.name,
       thumbnail: T.thumbnail,
       onClick: We
     })) || [];
-    return [...o, ...w, ...F];
-  }, [s.enabled_systems, s.company.products, x?.customTabs]), B = h((o, w) => {
-    S.current?.addNewNotification ? S.current.addNewNotification(o, w) : console.warn("Notifications controls not ready yet");
-  }, []), te = h((o) => S.current?.subscribeToUpdates ? S.current.subscribeToUpdates(o) : (console.warn("Notifications controls not ready yet"), () => {
-  }), []), oe = h((o) => {
-    S.current?.removeNotification ? S.current.removeNotification(o) : console.warn("Notifications controls not ready yet");
-  }, []), me = h(() => {
-    S.current?.removeAllNotifications ? S.current.removeAllNotifications() : console.warn("Notifications controls not ready yet");
-  }, []), Ne = h((o) => {
-    S.current?.setNotifications ? S.current.setNotifications(o) : console.warn("Notifications controls not ready yet");
-  }, []), ye = h((o, w) => U.current?.subscribeToScrollTarget ? U.current.subscribeToScrollTarget(o, w) : (console.warn("Scrollable controls not ready yet"), () => {
-  }), []), L = h((o, w = "load_more") => {
-    S.current?.setLoading ? S.current.setLoading(o, w) : console.warn("Notifications controls not ready yet");
-  }, []), Y = h((o, w) => {
-    S.current?.setError ? S.current.setError(o, w) : console.warn("Notifications controls not ready yet");
-  }, []), W = h(() => {
-    q.current?.open();
-  }, []), le = h(() => {
-    q.current?.close();
-  }, []), Ie = h(() => {
-    q.current?.toggle();
-  }, []), Ce = h((o, w, F) => {
-    const T = /* @__PURE__ */ e.jsxs("div", { className: D(" bg-black/60 z-200 inset-0 h-full w-full grid place-items-center text-neutral-default-default", w ? "fixed" : "sticky"), children: [
-      !F && /* @__PURE__ */ e.jsx(he, { label: "", icon: /* @__PURE__ */ e.jsx(Fe, {}), onClick: () => R(!1), variant: "text", className: "absolute top-0 right-0", size: "small", color: "secondary" }),
+    return [...o, ...N, ...B];
+  }, [s.enabled_systems, s.company.products, b?.customTabs]), R = x((o, N) => {
+    k.current?.addNewNotification ? k.current.addNewNotification(o, N) : console.warn("Notifications controls not ready yet");
+  }, []), te = x((o) => k.current?.subscribeToUpdates ? k.current.subscribeToUpdates(o) : (console.warn("Notifications controls not ready yet"), () => {
+  }), []), oe = x((o) => {
+    k.current?.removeNotification ? k.current.removeNotification(o) : console.warn("Notifications controls not ready yet");
+  }, []), me = x(() => {
+    k.current?.removeAllNotifications ? k.current.removeAllNotifications() : console.warn("Notifications controls not ready yet");
+  }, []), Ne = x((o) => {
+    k.current?.setNotifications ? k.current.setNotifications(o) : console.warn("Notifications controls not ready yet");
+  }, []), ye = x((o, N) => U.current?.subscribeToScrollTarget ? U.current.subscribeToScrollTarget(o, N) : (console.warn("Scrollable controls not ready yet"), () => {
+  }), []), L = x((o, N = "load_more") => {
+    k.current?.setLoading ? k.current.setLoading(o, N) : console.warn("Notifications controls not ready yet");
+  }, []), Y = x((o, N) => {
+    k.current?.setError ? k.current.setError(o, N) : console.warn("Notifications controls not ready yet");
+  }, []), W = x(() => {
+    V.current?.open();
+  }, []), le = x(() => {
+    V.current?.close();
+  }, []), Ie = x(() => {
+    V.current?.toggle();
+  }, []), Ce = x((o, N, B) => {
+    const T = /* @__PURE__ */ e.jsxs("div", { className: D(" bg-black/60 z-200 inset-0 h-full w-full grid place-items-center text-neutral-default-default", N ? "fixed" : "sticky"), children: [
+      !B && /* @__PURE__ */ e.jsx(he, { label: "", icon: /* @__PURE__ */ e.jsx(Fe, {}), onClick: () => M(!1), variant: "text", className: "absolute top-0 right-0", size: "small", color: "secondary" }),
       typeof o == "function" ? o() : o
     ] });
     let ne;
-    return w ? ne = $e(T, document.body, `modal-error-${Date.now()}`) : I.current && (ne = $e(T, I.current, `modal-error-${Date.now()}`)), Q(ne), R(!0), T;
-  }, [I]), je = h(() => {
-    R(!1);
+    return N ? ne = $e(T, document.body, `modal-error-${Date.now()}`) : $.current && (ne = $e(T, $.current, `modal-error-${Date.now()}`)), Q(ne), M(!0), T;
+  }, [$]), je = x(() => {
+    M(!1);
   }, []);
-  return N.current.addNewNotification = B, N.current.subscribeToNotificationsUpdates = te, N.current.removeNotification = oe, N.current.removeAllNotifications = me, N.current.setNotifications = Ne, N.current.setNotificationsError = Y, N.current.setNotificationsLoading = L, N.current.subscribeToNotificationsScroll = ye, N.current.showErrorModal = Ce, N.current.closeErrorModal = je, N.current.userCardExpand = W, N.current.userCardCollapse = le, N.current.userCardToggle = Ie, se(() => {
-    te((o, w) => {
-      g(w);
+  return v.current.addNewNotification = R, v.current.subscribeToNotificationsUpdates = te, v.current.removeNotification = oe, v.current.removeAllNotifications = me, v.current.setNotifications = Ne, v.current.setNotificationsError = Y, v.current.setNotificationsLoading = L, v.current.subscribeToNotificationsScroll = ye, v.current.showErrorModal = Ce, v.current.closeErrorModal = je, v.current.userCardExpand = W, v.current.userCardCollapse = le, v.current.userCardToggle = Ie, se(() => {
+    te((o, N) => {
+      u(N);
     });
-  }, [te]), /* @__PURE__ */ e.jsxs(wt.Provider, { value: N.current, children: [
-    P && z,
+  }, [te]), /* @__PURE__ */ e.jsxs(wt.Provider, { value: v.current, children: [
+    O && F,
     /* @__PURE__ */ e.jsxs("div", { className: "flex h-screen", children: [
       /* @__PURE__ */ e.jsx(
         Pt,
         {
           className: "hidden md:flex",
-          tabs: V,
+          tabs: H,
           activeColor: "var(--neutral-900)",
           currentTabName: Te,
-          currentSystemId: m,
+          currentSystemId: p,
           isLoading: !s.enabled_systems || s.enabled_systems.length === 0
         }
       ),
@@ -1464,28 +1468,28 @@ const wt = Me(null), Dr = () => {
           links: a,
           handleNavigation: ae,
           allActions: E,
-          activeActionId: f,
-          onActionClick: p,
+          activeActionId: m,
+          onActionClick: h,
           state: s,
           currentAppSessions: Oe,
           resolveUserSecondarySlot: n,
-          resolveSessionSecondarySlot: u,
-          onSessionClick: b,
+          resolveSessionSecondarySlot: f,
+          onSessionClick: g,
           onLogoutClick: d,
-          options: A,
-          currentSystemId: m,
-          userOptionsControls: q,
+          options: S,
+          currentSystemId: p,
+          userOptionsControls: V,
           mobileAppSwitcherControls: X,
           onSystemLogoClick: j,
-          tabs: V,
+          tabs: H,
           helpSection: r,
-          sidebarContentRef: $,
+          sidebarContentRef: q,
           initialSectionRef: G,
-          navigationControlsRef: N,
-          notificationsListControls: S,
+          navigationControlsRef: v,
+          notificationsListControls: k,
           scrollableControls: U,
-          outletRef: I,
-          onProfileClick: k,
+          outletRef: $,
+          onProfileClick: A,
           children: t
         }
       )