prometeo-design-system 4.6.4 → 4.7.0

package/dist/PyrionLayout.es.js

@@ -1,454 +1,455 @@
 import { j as e } from "./jsx-runtime-DKDX3adD.js";
-import { u as We, g as ht } from "./useDevice-vwn4GLwK.js";
-import { c as L } from "./cn-B6yFEsav.js";
-import { g as Ne } from "./utils-X4-h3cum.js";
-import ze, { forwardRef as he, useState as Y, useRef as T, useEffect as Q, memo as M, useContext as qe, createContext as Oe, useCallback as x, Children as bt, isValidElement as ye, useMemo as me, useImperativeHandle as Ie, useLayoutEffect as xt, use as gt } from "react";
-import { createPortal as Ue } from "react-dom";
-import { useLocation as vt, useNavigate as wt } from "react-router";
-import { CloseNavBarDesktop as Nt } from "./Icons/CloseNavBarDesktop.es.js";
-import { c as Ee } from "./index-BOQuZ0gG.js";
-import { B as $e } from "./badge-CiiB9SGl.js";
-import yt from "./PlainTooltip.es.js";
-import { CrevronLeft as Ct } from "./Icons/CrevronLeft.es.js";
+import { u as Ke, g as gt } from "./useDevice-vwn4GLwK.js";
+import { c as T } from "./cn-B6yFEsav.js";
+import { g as ye } from "./utils-X4-h3cum.js";
+import He, { forwardRef as he, useState as G, useRef as O, useEffect as ne, memo as R, useContext as Ye, createContext as Ee, useCallback as x, Children as vt, isValidElement as Se, useMemo as me, useImperativeHandle as _e, useLayoutEffect as wt, use as Nt } from "react";
+import { createPortal as Ve } from "react-dom";
+import { useLocation as yt, useNavigate as St } from "react-router";
+import { CloseNavBarDesktop as Ct } from "./Icons/CloseNavBarDesktop.es.js";
+import { c as Pe } from "./index-BOQuZ0gG.js";
+import { B as Xe } from "./badge-CiiB9SGl.js";
+import jt from "./PlainTooltip.es.js";
+import { CrevronLeft as kt } from "./Icons/CrevronLeft.es.js";
 import { Scrollable as be } from "./Scrollable.es.js";
-import se from "./TicketCard.es.js";
-import Ke from "./UserCard.es.js";
+import ie from "./TicketCard.es.js";
+import Je from "./UserCard.es.js";
 import pe from "./Button.es.js";
-import { Logout as St } from "./Icons/Logout.es.js";
-import jt from "./NotificationCard.es.js";
-import { T as kt, a as Dt } from "./TabLinks-C0ywjYt-.js";
-import { Notifications as Ye } from "./Icons/Notifications.es.js";
-import { Close as Pe } from "./Icons/Close.es.js";
-import { Help as Xe } from "./Icons/Help.es.js";
-import { Settings as Lt } from "./Icons/Settings.es.js";
-const At = he((t, r) => {
-  const [s, o] = Y(t?.currentTabName || t.tabs[0].name), u = T(null), { tabs: l = [], className: f, activeColor: d = "var(--neutral-900)", currentSystemId: p } = t;
-  Q(() => {
-    u.current?.style.setProperty("--tab-bg", d);
-  }, [d]);
-  const h = l.find((c) => c.id === p || c.name === (t?.currentTabName || s));
+import { Logout as Lt } from "./Icons/Logout.es.js";
+import Dt from "./NotificationCard.es.js";
+import { T as At, a as Tt } from "./TabLinks-C0ywjYt-.js";
+import Ce from "./Skeleton.es.js";
+import { Notifications as Ge } from "./Icons/Notifications.es.js";
+import { Close as Me } from "./Icons/Close.es.js";
+import { Help as Qe } from "./Icons/Help.es.js";
+import { Settings as Ot } from "./Icons/Settings.es.js";
+const It = he((t, r) => {
+  const [s, o] = G(t?.currentTabName || t.tabs[0].name), c = O(null), { tabs: l = [], className: u, activeColor: i = "var(--neutral-900)", currentSystemId: m } = t;
+  ne(() => {
+    c.current?.style.setProperty("--tab-bg", i);
+  }, [i]);
+  const p = l.find((d) => d.id === m || d.name === (t?.currentTabName || s));
   return /* @__PURE__ */ e.jsx(
     "div",
     {
       ref: r,
-      className: L(
+      className: T(
         "select-none",
         "flex flex-col gap-2",
         "bg-neutral-strong-default",
         "h-full w-14 max-w-14 pl-[6px] py-6",
         "border-r border-neutral-default-default",
-        f
+        u
       ),
       children: l.map(
-        (c) => {
-          const g = c.name === h?.name, b = typeof c.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: c.thumbnail, alt: c.description, className: "aspect-square object-contain rounded", draggable: !1 }) : c.thumbnail, C = () => {
-            c.disabled || (o(c.name), c.onClick && c.onClick(c.name));
+        (d) => {
+          const w = d.name === p?.name, h = typeof d.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: d.thumbnail, alt: d.description, className: "aspect-square object-contain rounded", draggable: !1 }) : d.thumbnail, C = () => {
+            d.disabled || (o(d.name), d.onClick && d.onClick(d.name));
           };
           return /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: L(
+              className: T(
                 "bg-[(--tab-bg)]",
                 "h-12 w-[50px] z-20",
                 "flex items-center pl-[6px] ",
                 "rounded-l-[8px]",
                 "tabswitch-element relative",
-                g && "active"
+                w && "active"
               ),
               onClick: C,
-              ref: u,
-              children: /* @__PURE__ */ e.jsx("div", { className: L(
+              ref: c,
+              children: /* @__PURE__ */ e.jsx("div", { className: T(
                 "size-8 rounded-[4px]",
                 "grid place-items-center",
                 "tab-thumbnail-icon",
                 "bg-transparent text-neutral-default-default",
-                c?.className
-              ), children: b })
+                d?.className
+              ), children: h })
             },
-            c.name
+            d.name
           );
         }
       )
     }
   );
-}), Je = M(he(({ children: t, className: r, context: s, modal: o = !1, closeOnOverlayClick: u = !1, unmountChildrenOnClose: l = !0 }, f) => {
-  const d = xe(t, s), p = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: h } = Tt(), { closeSidebar: c } = oe(), [g, b] = Y(() => l ? h : !0), [C, A] = Y(!1);
-  return Q(() => {
-    l && s?.subscribeToSidebarOpen((w) => {
-      w ? (A(!1), b(!0)) : A(!0);
+}), Ze = R(he(({ children: t, className: r, context: s, modal: o = !1, closeOnOverlayClick: c = !1, unmountChildrenOnClose: l = !0 }, u) => {
+  const i = xe(t, s), m = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: p } = Et(), { closeSidebar: d } = ce(), [w, h] = G(() => l ? p : !0), [C, A] = G(!1);
+  return ne(() => {
+    l && s?.subscribeToSidebarOpen((N) => {
+      N ? (A(!1), h(!0)) : A(!0);
     });
-  }, [l, s]), Q(() => {
-    const w = f && typeof f == "object" && "current" in f ? f.current : null;
-    if (!w) return;
-    const N = () => {
-      C && (b(!1), A(!1));
+  }, [l, s]), ne(() => {
+    const N = u && typeof u == "object" && "current" in u ? u.current : null;
+    if (!N) return;
+    const y = () => {
+      C && (h(!1), A(!1));
     };
-    return w.addEventListener("transitionend", N), () => w.removeEventListener("transitionend", N);
-  }, [C]), /* @__PURE__ */ e.jsxs("div", { ref: f, className: L("sidebar", p ? "collapsed" : "expanded", "h-full overflow-auto", r), "aria-modal": o || void 0, children: [
-    o && p && /* @__PURE__ */ e.jsx(
+    return N.addEventListener("transitionend", y), () => N.removeEventListener("transitionend", y);
+  }, [C]), /* @__PURE__ */ e.jsxs("div", { ref: u, className: T("sidebar", m ? "collapsed" : "expanded", "h-full overflow-auto", r), "aria-modal": o || void 0, children: [
+    o && m && /* @__PURE__ */ e.jsx(
       "div",
       {
-        className: L("navigation-drawer-sidebar-overlay"),
-        onClick: (w) => {
-          w.preventDefault(), w.stopPropagation(), u && c?.();
+        className: T("navigation-drawer-sidebar-overlay"),
+        onClick: (N) => {
+          N.preventDefault(), N.stopPropagation(), c && d?.();
         },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ e.jsxs("div", { className: L("navigation-drawer-sidebar-inner"), children: [
+    /* @__PURE__ */ e.jsxs("div", { className: T("navigation-drawer-sidebar-inner"), children: [
       /* @__PURE__ */ e.jsx("div", { className: "secure-click-margin" }),
-      g && d
+      w && i
     ] })
   ] });
-})), Ge = Oe(null), Qe = Oe(null), Tt = () => {
-  const t = qe(Ge);
+})), et = Ee(null), tt = Ee(null), Et = () => {
+  const t = Ye(et);
   if (!t) throw new Error("useDrawerState must be used within NavigationDrawer");
   return t;
-}, oe = () => {
-  const t = qe(Qe);
+}, ce = () => {
+  const t = Ye(tt);
   if (!t) throw new Error("useDrawerActions must be used within NavigationDrawer");
   return t;
-}, xe = (t, r) => typeof t == "function" ? r ? t(r) : null : t, Ze = "navigation-drawer-collapsed", He = () => {
+}, xe = (t, r) => typeof t == "function" ? r ? t(r) : null : t, rt = "navigation-drawer-collapsed", We = () => {
   if (typeof window > "u") return !1;
   try {
-    const t = sessionStorage.getItem(Ze);
+    const t = sessionStorage.getItem(rt);
     return t ? JSON.parse(t) : !1;
   } catch {
     return !1;
   }
-}, Ot = (t) => {
+}, _t = (t) => {
   if (!(typeof window > "u"))
     try {
-      sessionStorage.setItem(Ze, JSON.stringify(t));
+      sessionStorage.setItem(rt, JSON.stringify(t));
     } catch {
     }
-}, It = (t) => {
-  const { children: r, classNameDrawer: s, classNameSidebar: o, disableDragOpen: u, modal: l = !0, closeOnOutsideClick: f = !0 } = t, d = T(null), p = T(null), h = t.outletRef ?? T(null), c = T(null), g = T(He()), b = T(!1), C = T("drawer"), A = T(/* @__PURE__ */ new Set()), w = T(/* @__PURE__ */ new Set()), N = T(!1), D = T(null), V = x((n) => {
-    const m = p.current;
-    m && (m.classList.toggle("collapsed", n), m.classList.toggle("expanded", !n));
-  }, []), W = x((n) => {
-    const m = c.current;
-    if (!m) return;
-    m.classList.toggle("collapsed", n), m.classList.toggle("expanded", !n);
-    const v = d.current;
-    v && (v.classList.toggle("sidebar-collapsed", n), v.classList.toggle("sidebar-expanded", !n));
+}, Pt = (t) => {
+  const { children: r, classNameDrawer: s, classNameSidebar: o, disableDragOpen: c, modal: l = !0, closeOnOutsideClick: u = !0 } = t, i = O(null), m = O(null), p = t.outletRef ?? O(null), d = O(null), w = O(We()), h = O(!1), C = O("drawer"), A = O(/* @__PURE__ */ new Set()), N = O(/* @__PURE__ */ new Set()), y = O(!1), D = O(null), W = x((n) => {
+    const f = m.current;
+    f && (f.classList.toggle("collapsed", n), f.classList.toggle("expanded", !n));
+  }, []), q = x((n) => {
+    const f = d.current;
+    if (!f) return;
+    f.classList.toggle("collapsed", n), f.classList.toggle("expanded", !n);
+    const g = i.current;
+    g && (g.classList.toggle("sidebar-collapsed", n), g.classList.toggle("sidebar-expanded", !n));
   }, []), j = x(
-    (n, { notify: m = !0 } = {}) => {
-      const v = g.current !== n;
-      g.current = n, Ot(n), V(n), m && v && A.current.forEach((O) => O(n));
+    (n, { notify: f = !0 } = {}) => {
+      const g = w.current !== n;
+      w.current = n, _t(n), W(n), f && g && A.current.forEach((I) => I(n));
     },
-    [V]
-  ), F = x(
-    (n, { notify: m = !0 } = {}) => {
-      const v = b.current !== n;
-      if (b.current = n, W(n), m && v) {
-        const O = !n;
-        w.current.forEach((U) => U(O));
+    [W]
+  ), U = x(
+    (n, { notify: f = !0 } = {}) => {
+      const g = h.current !== n;
+      if (h.current = n, q(n), f && g) {
+        const I = !n;
+        N.current.forEach((H) => H(I));
       }
     },
-    [W]
-  ), i = x(
-    (n, { notify: m = !0 } = {}) => {
-      const v = C.current, O = v !== n;
-      C.current = n, window.matchMedia("(min-width: 768px)").matches || j(n !== "drawer", { notify: m });
-      const U = v === "sidebar", R = n === "sidebar";
-      m && O && U !== R && w.current.forEach((J) => J(R)), F(n !== "sidebar", { notify: m }), j(n !== "drawer", { notify: m });
+    [q]
+  ), S = x(
+    (n, { notify: f = !0 } = {}) => {
+      const g = C.current, I = g !== n;
+      C.current = n, window.matchMedia("(min-width: 768px)").matches || j(n !== "drawer", { notify: f });
+      const H = g === "sidebar", F = n === "sidebar";
+      f && I && H !== F && N.current.forEach((re) => re(F)), U(n !== "sidebar", { notify: f }), j(n !== "drawer", { notify: f });
     },
-    [j, F]
-  ), I = x((n) => {
-    const m = d.current;
-    if (!m || window.matchMedia("(min-width: 768px)").matches) return;
-    N.current = !0;
-    const v = h.current?.offsetLeft ?? 0, O = c.current?.offsetLeft ?? v, U = n === "drawer" ? 0 : n === "sidebar" ? O : v;
-    D.current = U, m.scrollTo({ left: U, behavior: "smooth" });
-    const R = () => {
-      N.current = !1, D.current = null, m.removeEventListener("scrollend", R);
+    [j, U]
+  ), $ = x((n) => {
+    const f = i.current;
+    if (!f || window.matchMedia("(min-width: 768px)").matches) return;
+    y.current = !0;
+    const g = p.current?.offsetLeft ?? 0, I = d.current?.offsetLeft ?? g, H = n === "drawer" ? 0 : n === "sidebar" ? I : g;
+    D.current = H, f.scrollTo({ left: H, behavior: "smooth" });
+    const F = () => {
+      y.current = !1, D.current = null, f.removeEventListener("scrollend", F);
     };
-    m.addEventListener("scrollend", R, { once: !0 }), setTimeout(() => {
-      N.current && R();
+    f.addEventListener("scrollend", F, { once: !0 }), setTimeout(() => {
+      y.current && F();
     }, 1e3);
-  }, []), B = x(() => {
-    const n = d.current, m = h.current;
-    if (!n || !m || window.matchMedia("(min-width: 768px)").matches) return;
-    const v = [
+  }, []), Q = x(() => {
+    const n = i.current, f = p.current;
+    if (!n || !f || window.matchMedia("(min-width: 768px)").matches) return;
+    const g = [
       { panel: "drawer", offset: 0 },
-      { panel: "outlet", offset: m.offsetLeft }
-    ], O = c.current;
-    O && v.push({ panel: "sidebar", offset: O.offsetLeft });
-    const U = n.scrollLeft;
-    let R = v[0], J = Math.abs(U - R.offset);
-    for (let re = 1; re < v.length; re++) {
-      const de = Math.abs(U - v[re].offset);
-      de < J && (R = v[re], J = de);
+      { panel: "outlet", offset: f.offsetLeft }
+    ], I = d.current;
+    I && g.push({ panel: "sidebar", offset: I.offsetLeft });
+    const H = n.scrollLeft;
+    let F = g[0], re = Math.abs(H - F.offset);
+    for (let oe = 1; oe < g.length; oe++) {
+      const fe = Math.abs(H - g[oe].offset);
+      fe < re && (F = g[oe], re = fe);
     }
-    i(R.panel);
-  }, [i]);
-  Q(() => {
-    const n = d.current;
-    n && (u?.drawer && n.classList.add("disabled-dragopen"), u?.sidebar && n.classList.add("disabled-dragopen-sidebar"));
-  }, [u, d]), Q(() => {
-    const n = d.current, m = h.current;
-    if (!n || !m) return;
+    S(F.panel);
+  }, [S]);
+  ne(() => {
+    const n = i.current;
+    n && (c?.drawer && n.classList.add("disabled-dragopen"), c?.sidebar && n.classList.add("disabled-dragopen-sidebar"));
+  }, [c, i]), ne(() => {
+    const n = i.current, f = p.current;
+    if (!n || !f) return;
     if (window.matchMedia("(min-width: 768px)").matches) {
-      const O = He();
-      j(O, { notify: !1 }), F(!0, { notify: !1 });
+      const I = We();
+      j(I, { notify: !1 }), U(!0, { notify: !1 });
       return;
     }
     requestAnimationFrame(() => {
-      n.scrollLeft = m.offsetLeft, i("outlet");
+      n.scrollLeft = f.offsetLeft, S("outlet");
     });
-  }, [i, j, F]), Q(() => {
-    const n = d.current;
-    if (!n || !h.current) return;
-    let v = !1, O = 0, U = 0;
-    const R = (k) => {
-      O = k.touches[0].clientX, U = k.touches[0].clientY;
-    }, J = (k, q) => {
-      const H = window.getComputedStyle(k), a = q === "x" ? H.overflowX : H.overflowY;
-      return /(auto|scroll|overlay)/.test(a) ? q === "x" ? k.scrollWidth > k.clientWidth : k.scrollHeight > k.clientHeight : !1;
-    }, re = (k, q) => {
-      let H = k;
-      for (; H && H !== n; ) {
-        if (J(H, q))
-          return H;
-        H = H.parentElement;
+  }, [S, j, U]), ne(() => {
+    const n = i.current;
+    if (!n || !p.current) return;
+    let g = !1, I = 0, H = 0;
+    const F = (L) => {
+      I = L.touches[0].clientX, H = L.touches[0].clientY;
+    }, re = (L, K) => {
+      const V = window.getComputedStyle(L), le = K === "x" ? V.overflowX : V.overflowY;
+      return /(auto|scroll|overlay)/.test(le) ? K === "x" ? L.scrollWidth > L.clientWidth : L.scrollHeight > L.clientHeight : !1;
+    }, oe = (L, K) => {
+      let V = L;
+      for (; V && V !== n; ) {
+        if (re(V, K))
+          return V;
+        V = V.parentElement;
       }
       return null;
-    }, de = (k, q, H) => H === 0 ? !1 : q === "x" ? H < 0 ? k.scrollLeft + k.clientWidth < k.scrollWidth : k.scrollLeft > 0 : H < 0 ? k.scrollTop + k.clientHeight < k.scrollHeight : k.scrollTop > 0, ve = (k) => {
-      if (!(k.target instanceof HTMLElement)) return;
-      const q = k.touches[0].clientX - O, H = k.touches[0].clientY - U, a = Math.abs(q) > Math.abs(H) ? "x" : "y", y = a === "x" ? q : H, E = re(k.target, a);
-      if (E && de(E, a, y))
+    }, fe = (L, K, V) => V === 0 ? !1 : K === "x" ? V < 0 ? L.scrollLeft + L.clientWidth < L.scrollWidth : L.scrollLeft > 0 : V < 0 ? L.scrollTop + L.clientHeight < L.scrollHeight : L.scrollTop > 0, we = (L) => {
+      if (!(L.target instanceof HTMLElement)) return;
+      const K = L.touches[0].clientX - I, V = L.touches[0].clientY - H, le = Math.abs(K) > Math.abs(V) ? "x" : "y", a = le === "x" ? K : V, v = oe(L.target, le);
+      if (v && fe(v, le, a))
         return;
-      const S = n.classList.contains("disabled-dragopen"), $ = n.classList.contains("disabled-dragopen-sidebar"), fe = () => k.cancelable ? (k.preventDefault(), !0) : !1;
-      if (a === "x") {
-        if (q > 0) {
-          if (C.current === "sidebar" && !$) {
-            v = !0;
+      const P = n.classList.contains("disabled-dragopen"), k = n.classList.contains("disabled-dragopen-sidebar"), J = () => L.cancelable ? (L.preventDefault(), !0) : !1;
+      if (le === "x") {
+        if (K > 0) {
+          if (C.current === "sidebar" && !k) {
+            g = !0;
             return;
           }
-          if (S) {
-            fe();
+          if (P) {
+            J();
             return;
           }
-        } else if (q < 0) {
-          if (C.current === "drawer" && !S) {
-            v = !0;
+        } else if (K < 0) {
+          if (C.current === "drawer" && !P) {
+            g = !0;
             return;
           }
-          if ($) {
-            fe();
+          if (k) {
+            J();
             return;
           }
         }
-        v = !0;
+        g = !0;
       }
-    }, we = () => {
+    }, Ne = () => {
       setTimeout(() => {
-        v && (B(), v = !1);
+        g && (Q(), g = !1);
       }, 100);
     };
-    return n.addEventListener("touchstart", R, { passive: !1 }), n.addEventListener("touchmove", ve, { passive: !1 }), n.addEventListener("touchend", we), () => {
-      n.removeEventListener("touchstart", R), n.removeEventListener("touchmove", ve), n.removeEventListener("touchend", we);
+    return n.addEventListener("touchstart", F, { passive: !1 }), n.addEventListener("touchmove", we, { passive: !1 }), n.addEventListener("touchend", Ne), () => {
+      n.removeEventListener("touchstart", F), n.removeEventListener("touchmove", we), n.removeEventListener("touchend", Ne);
     };
-  }, [B]);
-  const z = x(() => {
-    const n = window.matchMedia("(min-width: 768px)").matches, m = !g.current;
+  }, [Q]);
+  const Y = x(() => {
+    const n = window.matchMedia("(min-width: 768px)").matches, f = !w.current;
     if (n) {
-      j(m);
+      j(f);
       return;
     }
-    const v = m ? "outlet" : "drawer";
-    i(v), I(v);
-  }, [I, i, j]), K = T(null);
-  K.current || (K.current = {
-    toggleCollapse: () => z(),
+    const g = f ? "outlet" : "drawer";
+    S(g), $(g);
+  }, [$, S, j]), X = O(null);
+  X.current || (X.current = {
+    toggleCollapse: () => Y(),
     getIsCollapsed: () => {
       if (!window.matchMedia("(min-width: 768px)").matches) {
-        const m = d.current, v = h.current;
-        if (m && v) {
-          const O = m.scrollLeft, U = v.offsetLeft, R = Math.abs(O - U) < Math.abs(O - 0);
-          return R !== g.current && (g.current = R, V(R)), R;
+        const f = i.current, g = p.current;
+        if (f && g) {
+          const I = f.scrollLeft, H = g.offsetLeft, F = Math.abs(I - H) < Math.abs(I - 0);
+          return F !== w.current && (w.current = F, W(F)), F;
         }
       }
-      return g.current;
+      return w.current;
     },
     subscribeToCollapse: (n) => (A.current.add(n), () => {
       A.current.delete(n);
     }),
     openSidebar: () => {
-      if (c.current) {
+      if (d.current) {
         if (window.matchMedia("(min-width: 768px)").matches) {
-          F(!1);
+          U(!1);
           return;
         }
-        i("sidebar"), I("sidebar");
+        S("sidebar"), $("sidebar");
       }
     },
     closeSidebar: () => {
       if (window.matchMedia("(min-width: 768px)").matches) {
-        F(!0);
+        U(!0);
         return;
       }
-      i("outlet"), I("outlet");
+      S("outlet"), $("outlet");
     },
     toggleSidebar: () => {
-      if (!c.current) return;
+      if (!d.current) return;
       if (window.matchMedia("(min-width: 768px)").matches) {
-        F(!b.current);
+        U(!h.current);
         return;
       }
       const n = C.current === "sidebar" ? "outlet" : "sidebar";
-      i(n), I(n);
+      S(n), $(n);
     },
-    getIsSidebarOpen: () => c.current ? window.matchMedia("(min-width: 768px)").matches ? !b.current : C.current === "sidebar" : !1,
-    subscribeToSidebarOpen: (n) => (w.current.add(n), () => {
-      w.current.delete(n);
+    getIsSidebarOpen: () => d.current ? window.matchMedia("(min-width: 768px)").matches ? !h.current : C.current === "sidebar" : !1,
+    subscribeToSidebarOpen: (n) => (N.current.add(n), () => {
+      N.current.delete(n);
     }),
     setDrawerDragEnabled: (n) => {
-      const m = d.current;
-      if (!m) return;
-      const v = m.scrollLeft;
+      const f = i.current;
+      if (!f) return;
+      const g = f.scrollLeft;
       if (n) {
-        const O = m.style.scrollBehavior;
-        m.style.scrollBehavior = "auto", m.classList.remove("disabled-dragopen"), requestAnimationFrame(() => {
-          m.scrollLeft = v, requestAnimationFrame(() => {
-            m.style.scrollBehavior = O;
+        const I = f.style.scrollBehavior;
+        f.style.scrollBehavior = "auto", f.classList.remove("disabled-dragopen"), requestAnimationFrame(() => {
+          f.scrollLeft = g, requestAnimationFrame(() => {
+            f.style.scrollBehavior = I;
           });
         });
       } else
-        m.classList.add("disabled-dragopen");
+        f.classList.add("disabled-dragopen");
     },
     setSidebarDragEnabled: (n) => {
-      const m = d.current;
-      if (m)
+      const f = i.current;
+      if (f)
         if (n) {
-          const v = m.scrollLeft, O = m.style.scrollBehavior;
-          m.style.scrollBehavior = "auto", m.classList.remove("disabled-dragopen-sidebar"), requestAnimationFrame(() => {
-            m.scrollLeft = v, requestAnimationFrame(() => {
-              m.style.scrollBehavior = O;
+          const g = f.scrollLeft, I = f.style.scrollBehavior;
+          f.style.scrollBehavior = "auto", f.classList.remove("disabled-dragopen-sidebar"), requestAnimationFrame(() => {
+            f.scrollLeft = g, requestAnimationFrame(() => {
+              f.style.scrollBehavior = I;
             });
           });
         } else
-          m.classList.add("disabled-dragopen-sidebar");
+          f.classList.add("disabled-dragopen-sidebar");
     }
   });
-  const P = K.current, _ = typeof r == "function" ? r(P) : r, Z = bt.toArray(_);
-  let ue = null, ee = null, ne = null;
-  const ae = [];
-  let le = null, te = null;
-  Z.forEach((n) => {
-    if (!ye(n)) {
-      ae.push(n);
+  const E = X.current, _ = typeof r == "function" ? r(E) : r, b = vt.toArray(_);
+  let M = null, B = null, z = null;
+  const Z = [];
+  let ae = null, ee = null;
+  b.forEach((n) => {
+    if (!Se(n)) {
+      Z.push(n);
       return;
     }
-    if (n.type === _e && !ue) {
-      ue = n;
+    if (n.type === Re && !M) {
+      M = n;
       return;
     }
-    if (n.type === Ce && !ee) {
-      ee = n;
+    if (n.type === je && !B) {
+      B = n;
       return;
     }
-    if (n.type === Se && !ne) {
-      ne = n;
+    if (n.type === ke && !z) {
+      z = n;
       return;
     }
-    if (n.type === Ae && !le) {
-      le = n;
+    if (n.type === Oe && !ae) {
+      ae = n;
       return;
     }
-    if (n.type === Je && !te) {
-      te = n;
+    if (n.type === Ze && !ee) {
+      ee = n;
       return;
     }
-    ae.push(n);
+    Z.push(n);
   });
-  const Re = !!ee, ge = ee ?? (ae.length ? /* @__PURE__ */ e.jsx(Ce, { children: ae }) : null), je = Re ? ae : [], ie = le ?? (!!le ? /* @__PURE__ */ e.jsx(Ae, { children: _, context: P, modal: l, closeOnOutsideClick: f }) : null), ke = ne ?? (!!ne ? /* @__PURE__ */ e.jsx(Se, { children: ne }) : null), De = !!te, X = te, ce = me(() => ({
-    isCollapsed: g.current,
-    isSidebarOpen: !b.current
-  }), [g.current, b.current]);
-  return /* @__PURE__ */ e.jsx(Ge.Provider, { value: ce, children: /* @__PURE__ */ e.jsx(Qe.Provider, { value: P, children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-container", ref: d, className: L(
+  const ge = !!B, ve = B ?? (Z.length ? /* @__PURE__ */ e.jsx(je, { children: Z }) : null), Le = ge ? Z : [], de = ae ?? (!!ae ? /* @__PURE__ */ e.jsx(Oe, { children: _, context: E, modal: l, closeOnOutsideClick: u }) : null), De = z ?? (!!z ? /* @__PURE__ */ e.jsx(ke, { children: z }) : null), Ae = !!ee, te = ee, ue = me(() => ({
+    isCollapsed: w.current,
+    isSidebarOpen: !h.current
+  }), [w.current, h.current]);
+  return /* @__PURE__ */ e.jsx(et.Provider, { value: ue, children: /* @__PURE__ */ e.jsx(tt.Provider, { value: E, children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-container", ref: i, className: T(
     "w-full h-full max-h-dvh overflow-y-hidden",
-    De ? "navigation-drawer-with-sidebar" : "navigation-drawer",
-    u?.drawer ? "disabled-dragopen" : "",
-    u?.sidebar ? "disabled-dragopen-sidebar" : ""
+    Ae ? "navigation-drawer-with-sidebar" : "navigation-drawer",
+    c?.drawer ? "disabled-dragopen" : "",
+    c?.sidebar ? "disabled-dragopen-sidebar" : ""
   ), children: [
     /* @__PURE__ */ e.jsxs(
       "div",
       {
-        ref: p,
-        className: L(
+        ref: m,
+        className: T(
           "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",
-          g.current ? "collapsed" : "expanded",
+          w.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(et, { onToggleCollapse: z }),
-              ue
+              /* @__PURE__ */ e.jsx(st, { onToggleCollapse: Y }),
+              M
             ] }),
             /* @__PURE__ */ e.jsxs("div", { className: "flex flex-1 overflow-hidden relative flex-col", children: [
-              je,
-              ge
+              Le,
+              ve
             ] })
           ] }),
-          ke
+          De
         ]
       }
     ),
-    ie && ye(ie) ? ze.cloneElement(ie, { ref: h, modal: l, closeOnOutsideClick: f }) : ie,
-    X && ye(X) ? ze.cloneElement(X, {
-      ref: c,
-      className: L("sidebar", X.props?.className, o)
-    }) : X
+    de && Se(de) ? He.cloneElement(de, { ref: p, modal: l, closeOnOutsideClick: u }) : de,
+    te && Se(te) ? He.cloneElement(te, {
+      ref: d,
+      className: T("sidebar", te.props?.className, o)
+    }) : te
   ] }) }) });
-}, Ve = M(It), et = M(({ onToggleCollapse: t }) => /* @__PURE__ */ e.jsx(
+}, qe = R(Pt), st = R(({ onToggleCollapse: t }) => /* @__PURE__ */ e.jsx(
   "button",
   {
     type: "button",
     onClick: t,
     className: "collapse-button cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300 w-max",
-    children: /* @__PURE__ */ e.jsx(Nt, { size: 32, className: "transition-transform duration-300 p-1" })
+    children: /* @__PURE__ */ e.jsx(Ct, { size: 32, className: "transition-transform duration-300 p-1" })
   }
 ), (t, r) => t.onToggleCollapse === r.onToggleCollapse);
-et.displayName = "NavigationDrawerCollapseButton";
-const _e = M(({ children: t, className: r, context: s }) => {
+st.displayName = "NavigationDrawerCollapseButton";
+const Re = R(({ children: t, className: r, context: s }) => {
   const o = xe(t, s);
-  return /* @__PURE__ */ e.jsx("div", { className: L("flex items-center justify-between", r), children: o });
+  return /* @__PURE__ */ e.jsx("div", { className: T("flex items-center justify-between", r), children: o });
 });
-_e.displayName = "NavigationDrawerHeader";
-const Ce = M(({ children: t, className: r, context: s, ...o }) => {
-  const u = xe(t, s);
-  return /* @__PURE__ */ e.jsx("div", { ...o, className: L("w-full flex-1 drawer-content select-none", r), children: u });
+Re.displayName = "NavigationDrawerHeader";
+const je = R(({ children: t, className: r, context: s, ...o }) => {
+  const c = xe(t, s);
+  return /* @__PURE__ */ e.jsx("div", { ...o, className: T("w-full flex-1 drawer-content select-none", r), children: c });
 });
-Ce.displayName = "NavigationDrawerContent";
-const Se = M(({ children: t, className: r, context: s }) => {
+je.displayName = "NavigationDrawerContent";
+const ke = R(({ children: t, className: r, context: s }) => {
   const o = xe(t, s);
-  return /* @__PURE__ */ e.jsx("div", { className: L("flex items-center justify-between", r), children: o });
+  return /* @__PURE__ */ e.jsx("div", { className: T("flex items-center justify-between", r), children: o });
 });
-Se.displayName = "NavigationDrawerFooter";
-const tt = M(({ className: t }) => /* @__PURE__ */ e.jsx("div", { className: L("w-full border-t border-neutral-strong-default ", t) }));
-tt.displayName = "NavigationDrawerSpacer";
-const Ae = M(he(({ children: t, className: r, context: s, modal: o, closeOnOutsideClick: u }, l) => {
-  const f = xe(t, s), d = oe(), p = () => {
-    u && (d.toggleCollapse(), d.closeSidebar());
+ke.displayName = "NavigationDrawerFooter";
+const nt = R(({ className: t }) => /* @__PURE__ */ e.jsx("div", { className: T("w-full border-t border-neutral-strong-default ", t) }));
+nt.displayName = "NavigationDrawerSpacer";
+const Oe = R(he(({ children: t, className: r, context: s, modal: o, closeOnOutsideClick: c }, l) => {
+  const u = xe(t, s), i = ce(), m = () => {
+    c && (i.toggleCollapse(), i.closeSidebar());
   };
-  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-outlet", ref: l, className: L("flex-1 overflow-auto relative h-full max-h-dvh", r), children: [
-    o && /* @__PURE__ */ e.jsx("div", { className: "navigation-drawer-backdrop select-none", onClick: p }),
-    f
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-outlet", ref: l, className: T("flex-1 overflow-auto relative h-full max-h-dvh", r), children: [
+    o && /* @__PURE__ */ e.jsx("div", { className: "navigation-drawer-backdrop select-none", onClick: m }),
+    u
   ] }) });
-}), (t, r) => t.children === r.children && t.className === r.className), G = Object.assign(Ve, {
-  Root: Ve,
-  Header: _e,
-  Content: Ce,
-  Footer: Se,
-  Spacer: tt,
-  Outlet: Ae,
-  Sidebar: Je
+}), (t, r) => t.children === r.children && t.className === r.className), se = Object.assign(qe, {
+  Root: qe,
+  Header: Re,
+  Content: je,
+  Footer: ke,
+  Spacer: nt,
+  Outlet: Oe,
+  Sidebar: Ze
 });
-G.displayName = "NavigationDrawer";
-const Et = "hover:bg-neutral-medium-hover", Pt = Ee("", {
+se.displayName = "NavigationDrawer";
+const Mt = "hover:bg-neutral-medium-hover", Rt = Pe("", {
   variants: {
     isSelected: {
       true: "bg-neutral-medium-selected ",
@@ -459,8 +460,8 @@ const Et = "hover:bg-neutral-medium-hover", Pt = Ee("", {
       false: "cursor-pointer"
     }
   }
-}), _t = Ee(
-  L(
+}), Bt = Pe(
+  T(
     "select-none line-clamp-1 min-w-max",
     "prometeo-fonts-label-large transition-colors duration-300 ease-out"
   ),
@@ -482,8 +483,8 @@ const Et = "hover:bg-neutral-medium-hover", Pt = Ee("", {
       { isSelected: !1, disabled: !1, className: "  text-neutral-default-default group-active:text-neutral-default-pressed group-focus-visible:text-neutral-default-pressed" }
     ]
   }
-), Le = Ee(
-  L(
+), Te = Pe(
+  T(
     "transition-colors duration-300 ease-out min-w-max"
   ),
   {
@@ -504,138 +505,138 @@ const Et = "hover:bg-neutral-medium-hover", Pt = Ee("", {
       { isSelected: !1, disabled: !1, className: "text-neutral-default-default group-active:text-neutral-default-pressed group-focus-visible:text-neutral-default-pressed" }
     ]
   }
-), Mt = (t) => {
+), Ft = (t) => {
   const {
     title: r,
     icon: s,
     count: o,
-    className: u,
+    className: c,
     isSelected: l = !1,
-    hasSublinks: f,
-    subLinksCollapsed: d,
-    onToggleSublinks: p,
-    as: h = "div",
-    onClick: c,
-    onAuxClick: g,
-    disabled: b = !1,
+    hasSublinks: u,
+    subLinksCollapsed: i,
+    onToggleSublinks: m,
+    as: p = "div",
+    onClick: d,
+    onAuxClick: w,
+    disabled: h = !1,
     tooltipText: C
-  } = t, A = (V) => {
-    b || c?.(V);
-  }, w = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  } = t, A = (W) => {
+    h || d?.(W);
+  }, N = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center flex-nowrap", children: [
-      s && (C ? /* @__PURE__ */ e.jsx(yt, { title: C, disabled: b, children: /* @__PURE__ */ e.jsx(s, { size: 24, className: Le({ disabled: b, isSelected: l }) }) }) : /* @__PURE__ */ e.jsx(s, { size: 24, className: Le({ disabled: b, isSelected: l }) })),
-      /* @__PURE__ */ e.jsx("label", { className: _t({ disabled: b, isSelected: l }), children: r })
+      s && (C ? /* @__PURE__ */ e.jsx(jt, { title: C, disabled: h, children: /* @__PURE__ */ e.jsx(s, { size: 24, className: Te({ disabled: h, isSelected: l }) }) }) : /* @__PURE__ */ e.jsx(s, { size: 24, className: Te({ disabled: h, isSelected: l }) })),
+      /* @__PURE__ */ e.jsx("label", { className: Bt({ disabled: h, isSelected: l }), children: r })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 items-center", children: [
-      o && o ? /* @__PURE__ */ e.jsx($e, { count: o, maxCount: 9, className: "badge", disabled: b }) : "",
-      f && /* @__PURE__ */ e.jsx(
+      o && o ? /* @__PURE__ */ e.jsx(Xe, { count: o, maxCount: 9, className: "badge", disabled: h }) : "",
+      u && /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: L(
+          className: T(
             "sublinks-toggle",
             "transition-all duration-200",
             "rounded-full relative grid place-items-center size-6",
             l && "text-primary-default-default",
-            `${d ? "-rotate-90" : "rotate-90"}`
+            `${i ? "-rotate-90" : "rotate-90"}`
           ),
           children: /* @__PURE__ */ e.jsx(
             "button",
             {
-              disabled: b,
+              disabled: h,
               type: "button",
-              onClick: p,
-              className: L("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", Le({ disabled: b, isSelected: l }), b && "pointer-events-none"),
-              children: /* @__PURE__ */ e.jsx(Ct, {})
+              onClick: m,
+              className: T("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", Te({ disabled: h, isSelected: l }), h && "pointer-events-none"),
+              children: /* @__PURE__ */ e.jsx(kt, {})
             }
           )
         }
       )
     ] })
-  ] }), N = L(
+  ] }), y = T(
     "group navitem",
     "h-12 flex-1 flex items-center p-3 rounded-lg justify-between w-full",
     "transition-all duration-300",
-    Et,
-    Pt({ isSelected: l, disabled: b }),
-    u
+    Mt,
+    Rt({ isSelected: l, disabled: h }),
+    c
   );
-  if (h === "a") {
-    const V = {
+  if (p === "a") {
+    const W = {
       onClick: A,
-      onAuxClick: g,
-      className: N
+      onAuxClick: w,
+      className: y
     };
-    return /* @__PURE__ */ e.jsx("a", { ...V, children: w });
+    return /* @__PURE__ */ e.jsx("a", { ...W, children: N });
   }
-  if (h === "button") {
-    const V = {
+  if (p === "button") {
+    const W = {
       onClick: A,
       type: "button",
-      className: N
+      className: y
     };
-    return /* @__PURE__ */ e.jsx("button", { ...V, children: w });
+    return /* @__PURE__ */ e.jsx("button", { ...W, children: N });
   }
   const D = {
     onClick: A,
-    className: N
+    className: y
   };
-  return /* @__PURE__ */ e.jsx("div", { ...D, children: w });
-}, Me = M(Mt);
-Me.displayName = "NavigationDrawerItemBase";
-const Rt = (t) => {
-  const { title: r, icon: s, count: o, className: u, isActive: l, onClick: f, isView: d = !0, disabled: p, tooltipText: h } = t;
-  return d ? /* @__PURE__ */ e.jsx(
-    Me,
+  return /* @__PURE__ */ e.jsx("div", { ...D, children: N });
+}, Be = R(Ft);
+Be.displayName = "NavigationDrawerItemBase";
+const zt = (t) => {
+  const { title: r, icon: s, count: o, className: c, isActive: l, onClick: u, isView: i = !0, disabled: m, tooltipText: p } = t;
+  return i ? /* @__PURE__ */ e.jsx(
+    Be,
     {
       as: "button",
       title: r,
       icon: s,
       count: o,
-      className: u,
+      className: c,
       isSelected: l,
-      onClick: f,
-      disabled: p,
-      tooltipText: h
+      onClick: u,
+      disabled: m,
+      tooltipText: p
     }
   ) : null;
-}, rt = M(Rt);
-rt.displayName = "NavigationDrawerActionItem";
-const Bt = ({ actions: t, activeActionId: r, onActionClick: s, className: o }) => /* @__PURE__ */ e.jsx(be, { className: L("flex flex-col gap-2 w-full ", o), scrollbarProps: { hide: !0 }, persistScroll: "navigation-actions", indicators: {
+}, at = R(zt);
+at.displayName = "NavigationDrawerActionItem";
+const Ut = ({ actions: t, activeActionId: r, onActionClick: s, className: o }) => /* @__PURE__ */ e.jsx(be, { className: T("flex flex-col gap-2 w-full ", o), 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((u) => {
-  const { id: l, onClick: f, isView: d = !0, payload: p, ...h } = u, c = l === r, g = () => {
-    s?.(l, p), f?.();
+}, children: t?.map((c) => {
+  const { id: l, onClick: u, isView: i = !0, payload: m, ...p } = c, d = l === r, w = () => {
+    s?.(l, m), u?.();
   };
-  return d ? /* @__PURE__ */ e.jsx(
-    rt,
+  return i ? /* @__PURE__ */ e.jsx(
+    at,
     {
-      ...h,
+      ...p,
       id: l,
-      isActive: c,
-      onClick: g
+      isActive: d,
+      onClick: w
     },
     l
   ) : null;
-}) }), st = M(Bt);
-st.displayName = "NavigationDrawerActions";
-const Ft = (t) => {
-  const { className: r, title: s, path: o, onClick: u, isSelected: l, parentPath: f } = t, d = x(() => {
-    u?.(o);
-  }, [o]), p = x(() => {
+}) }), ot = R(Ut);
+ot.displayName = "NavigationDrawerActions";
+const Ht = (t) => {
+  const { className: r, title: s, path: o, onClick: c, isSelected: l, parentPath: u } = t, i = x(() => {
+    c?.(o);
+  }, [o]), m = x(() => {
     if (o.startsWith("./")) {
-      if (!f) return;
-      const h = f + o.slice(2);
-      window.open(h, "_blank");
+      if (!u) return;
+      const p = u + o.slice(2);
+      window.open(p, "_blank");
     } else
       window.open(o, "_blank");
   }, [o]);
   return /* @__PURE__ */ e.jsx(
     "a",
     {
-      onClick: d,
-      onAuxClick: p,
-      className: L(
+      onClick: i,
+      onAuxClick: m,
+      className: T(
         "group",
         "transition-all duration-300 ease-in-out cursor-pointer",
         "h-10 w-full rounded-lg py-[11px] px-3",
@@ -643,26 +644,26 @@ const Ft = (t) => {
         l && "bg-neutral-medium-selected hover:bg-neutral-medium-hover active:bg-transparent focus:bg-transparent",
         r
       ),
-      children: /* @__PURE__ */ e.jsx("p", { className: L(
+      children: /* @__PURE__ */ e.jsx("p", { className: T(
         "prometeo-fonts-label-large text-neutral-medium-default",
         "group-active:text-neutral-default-focused group-focus:text-neutral-default-focused",
         l && "text-primary-default-default group-hover:text-primary-default-hover group-focus:text-primary-default-focused group-active:text-primary-default-focused"
       ), children: s })
     }
   );
-}, nt = M(Ft);
-nt.displayName = "NavItemSecondary";
-const zt = he((t, r) => {
-  const [s, o] = Y(!0), u = T(null), { path: l, title: f, icon: d, count: p, className: h, isSelected: c = !1, onClick: g, sublinks: b, toggleCollapse: C, getIsCollapsed: A, subscribeToCollapse: w, isView: N = !0, disabled: D, tooltipText: V } = t;
-  Q(() => w ? w((_) => {
+}, lt = R(Ht);
+lt.displayName = "NavItemSecondary";
+const Vt = he((t, r) => {
+  const [s, o] = G(!0), c = O(null), { path: l, title: u, icon: i, count: m, className: p, isSelected: d = !1, onClick: w, sublinks: h, toggleCollapse: C, getIsCollapsed: A, subscribeToCollapse: N, isView: y = !0, disabled: D, tooltipText: W } = t;
+  ne(() => N ? N((_) => {
     _ && o(!0);
-  }) : void 0, [w]);
-  const W = x(() => {
-    o((P) => !P);
-  }, []), j = x((P) => {
-    o(P);
-  }, []), F = {
-    toggle: W,
+  }) : void 0, [N]);
+  const q = x(() => {
+    o((E) => !E);
+  }, []), j = x((E) => {
+    o(E);
+  }, []), U = {
+    toggle: q,
     setIsCollapsed: j,
     get isCollapsed() {
       return s;
@@ -671,169 +672,169 @@ const zt = he((t, r) => {
       return A?.() ?? !1;
     },
     toggleDrawerCollapse: C,
-    subscribeToCollapse: w
+    subscribeToCollapse: N
   };
-  Ie(r, () => F, [F, s, A, C]);
-  const i = d, I = x(() => {
-    const P = A?.() ?? !1;
-    if (b && b.length > 0 && P) {
+  _e(r, () => U, [U, s, A, C]);
+  const S = i, $ = x(() => {
+    const E = A?.() ?? !1;
+    if (h && h.length > 0 && E) {
       j(!1), C?.();
       return;
     }
-    g?.(l);
-  }, [l, g, b, C, j, A]), B = x(() => {
+    w?.(l);
+  }, [l, w, h, C, j, A]), Q = x(() => {
     window.open(l, "_blank");
-  }, [l]), z = () => {
-    if (!b || D) return null;
-    if (t.subLinksRender && b)
-      return t.subLinksRender(b, F);
-    const P = x((_) => {
+  }, [l]), Y = () => {
+    if (!h || D) return null;
+    if (t.subLinksRender && h)
+      return t.subLinksRender(h, U);
+    const E = x((_) => {
       if (_.startsWith("./")) {
-        const Z = l + _.slice(2);
-        g?.(Z);
+        const b = l + _.slice(2);
+        w?.(b);
       } else
-        g?.(_);
+        w?.(_);
     }, [l]);
-    return Q(() => {
-      const _ = u.current;
+    return ne(() => {
+      const _ = c.current;
       if (!_) return;
-      const Z = _.scrollHeight;
-      _.style.setProperty("--sublinks-max-height", `${Z}px`);
-    }, []), /* @__PURE__ */ e.jsx("div", { ref: u, className: `sublinks flex flex-col gap-1 ml-8 ${s ? "collapsed" : "expanded"}`, children: b.map((_) => /* @__PURE__ */ e.jsx(nt, { ..._, onClick: P, parentPath: l }, `${_.title}-${_.path}`)) });
-  }, K = (P) => {
-    P.stopPropagation(), P.preventDefault(), W();
+      const b = _.scrollHeight;
+      _.style.setProperty("--sublinks-max-height", `${b}px`);
+    }, []), /* @__PURE__ */ e.jsx("div", { ref: c, className: `sublinks flex flex-col gap-1 ml-8 ${s ? "collapsed" : "expanded"}`, children: h.map((_) => /* @__PURE__ */ e.jsx(lt, { ..._, onClick: E, parentPath: l }, `${_.title}-${_.path}`)) });
+  }, X = (E) => {
+    E.stopPropagation(), E.preventDefault(), q();
   };
-  return N ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 ", children: [
+  return y ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 ", children: [
     /* @__PURE__ */ e.jsx(
-      Me,
+      Be,
       {
         as: "a",
-        title: f,
-        icon: i,
-        count: p,
-        className: h,
-        isSelected: c,
-        hasSublinks: !!b,
+        title: u,
+        icon: S,
+        count: m,
+        className: p,
+        isSelected: d,
+        hasSublinks: !!h,
         subLinksCollapsed: s,
-        onToggleSublinks: K,
-        onClick: I,
-        onAuxClick: B,
+        onToggleSublinks: X,
+        onClick: $,
+        onAuxClick: Q,
         disabled: D,
-        tooltipText: V
+        tooltipText: W
       }
     ),
-    z()
+    Y()
   ] }) : null;
-}), at = M(zt);
-at.displayName = "NavigationDrawerLinkItem";
-const Ut = ({ navlinks: t, handleNavigation: r, className: s, getIsCollapsed: o, toggleCollapse: u, subscribeToCollapse: l }) => {
-  const { pathname: f } = vt();
-  return /* @__PURE__ */ e.jsx(be, { className: L("flex flex-col gap-2 w-full ", s), scrollbarProps: { hide: !0 }, persistScroll: "navigation-links", indicators: {
+}), it = R(Vt);
+it.displayName = "NavigationDrawerLinkItem";
+const Wt = ({ navlinks: t, handleNavigation: r, className: s, getIsCollapsed: o, toggleCollapse: c, subscribeToCollapse: l }) => {
+  const { pathname: u } = yt();
+  return /* @__PURE__ */ e.jsx(be, { className: T("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((d, p) => {
-    const h = d.isSelected || d.path === f || (d.relatedPaths?.some((c) => f.startsWith(c)) ?? !1);
+  }, children: t?.map((i, m) => {
+    const p = i.isSelected || i.path === u || (i.relatedPaths?.some((d) => u.startsWith(d)) ?? !1);
     return /* @__PURE__ */ e.jsx(
-      at,
+      it,
       {
-        ...d,
-        isSelected: h,
+        ...i,
+        isSelected: p,
         onClick: r,
-        toggleCollapse: u,
+        toggleCollapse: c,
         getIsCollapsed: o,
         subscribeToCollapse: l,
-        disabled: d.disabled,
-        isView: d.isView
+        disabled: i.disabled,
+        isView: i.isView
       },
-      p
+      m
     );
   }) });
-}, ot = M(Ut);
-ot.displayName = "NavigationDrawerNavlinks";
-const lt = M(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId: o, onActionClick: u }) => {
-  const { getIsCollapsed: l, toggleCollapse: f, subscribeToCollapse: d } = oe();
+}, ct = R(Wt);
+ct.displayName = "NavigationDrawerNavlinks";
+const dt = R(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId: o, onActionClick: c }) => {
+  const { getIsCollapsed: l, toggleCollapse: u, subscribeToCollapse: i } = ce();
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(G.Spacer, { className: "pb-3" }),
+    /* @__PURE__ */ e.jsx(se.Spacer, { className: "pb-3" }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col overflow-hidden h-full gap-4 relative w-full", children: [
       /* @__PURE__ */ e.jsx(
-        ot,
+        ct,
         {
           getIsCollapsed: l,
-          toggleCollapse: f,
-          subscribeToCollapse: d,
+          toggleCollapse: u,
+          subscribeToCollapse: i,
           navlinks: t,
           handleNavigation: r,
           className: "flex flex-1 min-h-[35dvh] w-full"
         }
       ),
       /* @__PURE__ */ e.jsx(
-        st,
+        ot,
         {
           actions: s,
           activeActionId: o,
-          onActionClick: u,
+          onActionClick: c,
           className: "max-h-[30dvh]"
         }
       )
     ] })
   ] });
 }, (t, r) => t.navlinks === r.navlinks && t.handleNavigation === r.handleNavigation && t.allActions === r.allActions && t.activeActionId === r.activeActionId && t.onActionClick === r.onActionClick);
-lt.displayName = "PyrionNavigationDrawer.Content";
-const Ht = (t) => {
-  const { sessions: r, onSessionClick: s, secondarySlot: o, subImageUrlAccessor: u } = t;
+dt.displayName = "PyrionNavigationDrawer.Content";
+const qt = (t) => {
+  const { sessions: r, onSessionClick: s, secondarySlot: o, subImageUrlAccessor: c } = t;
   if (!r || r.length === 0)
     return null;
-  const l = (p) => {
-    s && s(p);
-  }, f = (p) => {
-    if (!u)
+  const l = (m) => {
+    s && s(m);
+  }, u = (m) => {
+    if (!c)
       return;
-    const h = p.metadata;
-    if (!h)
+    const p = m.metadata;
+    if (!p)
       return;
-    const c = Ne({ metadata: h }, u);
-    if (c != null)
-      return typeof c == "string" ? c : String(c);
-  }, d = x((p) => typeof o == "function" ? o(p) : o, [o]);
-  return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-2", children: r?.map((p) => {
-    const { auth_id: h } = p;
-    return /* @__PURE__ */ e.jsx(se, { className: " shrink-0 h-max", children: /* @__PURE__ */ e.jsx(se.Content, { onClick: () => l(p), className: "p-0 group-data-[expanded=true]/ticketcard:border-none", children: /* @__PURE__ */ e.jsx(
-      Ke,
+    const d = ye({ metadata: p }, c);
+    if (d != null)
+      return typeof d == "string" ? d : String(d);
+  }, i = x((m) => typeof o == "function" ? o(m) : o, [o]);
+  return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-2", children: r?.map((m) => {
+    const { auth_id: p } = m;
+    return /* @__PURE__ */ e.jsx(ie, { className: " shrink-0 h-max", children: /* @__PURE__ */ e.jsx(ie.Content, { onClick: () => l(m), className: "p-0 group-data-[expanded=true]/ticketcard:border-none", children: /* @__PURE__ */ e.jsx(
+      Je,
       {
-        name: h.name,
+        name: p.name,
         avatarSize: "xxs",
-        secondarySlot: d(p),
-        subImageUrl: f(p),
-        imageUrl: h.profile_picture,
+        secondarySlot: i(m),
+        subImageUrl: u(m),
+        imageUrl: p.profile_picture,
         className: "pyrion-navigation-drawer-user-card"
       },
-      p.token
-    ) }) }, p.token);
+      m.token
+    ) }) }, m.token);
   }) });
-}, Vt = ({
+}, $t = ({
   state: t,
   currentAppSessions: r,
   resolveUserSecondarySlot: s,
   resolveSessionSecondarySlot: o,
-  onSessionClick: u,
+  onSessionClick: c,
   onLogoutClick: l,
-  onProfileClick: f,
-  options: d,
-  currentSystemId: p,
-  userOptionsControls: h,
-  mobileAppSwitcherControls: c
+  onProfileClick: u,
+  options: i,
+  currentSystemId: m,
+  userOptionsControls: p,
+  mobileAppSwitcherControls: d
 }) => {
-  const { getIsCollapsed: g, toggleCollapse: b, subscribeToCollapse: C } = oe(), A = x(() => {
-    const w = g();
-    w ? (b(), h.current?.open()) : f?.(w);
-  }, [g, b, h, f]);
-  return Q(() => C((w) => {
-    w && (h.current?.close(), c.current?.close());
-  }), [C, h, c]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(G.Spacer, { className: "mb-3" }),
-    /* @__PURE__ */ e.jsxs(se, { className: "", controls: h, children: [
-      /* @__PURE__ */ e.jsx(se.Content, { onClick: A, children: /* @__PURE__ */ e.jsx(
-        Ke,
+  const { getIsCollapsed: w, toggleCollapse: h, subscribeToCollapse: C } = ce(), A = x(() => {
+    const N = w();
+    N ? (h(), p.current?.open()) : u?.(N);
+  }, [w, h, p, u]);
+  return ne(() => C((N) => {
+    N && (p.current?.close(), d.current?.close());
+  }), [C, p, d]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(se.Spacer, { className: "mb-3" }),
+    /* @__PURE__ */ e.jsxs(ie, { className: "", controls: p, children: [
+      /* @__PURE__ */ e.jsx(ie.Content, { onClick: A, children: /* @__PURE__ */ e.jsx(
+        Je,
         {
           className: "pyrion-navigation-drawer-user-card p-0",
           name: t.user.name,
@@ -843,17 +844,17 @@ const Ht = (t) => {
           avatarSize: "xxs"
         }
       ) }),
-      /* @__PURE__ */ e.jsxs(se.Options, { className: "min-h-max flex flex-col gap-3 pl-3 mt-3 pt-2", children: [
+      /* @__PURE__ */ e.jsxs(ie.Options, { className: "min-h-max flex flex-col gap-3 pl-3 mt-3 pt-2", children: [
         r && r.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-label-medium text-neutral-medium-default select-none", children: "Cambiar cuenta" }),
           /* @__PURE__ */ e.jsx(be, { className: "flex flex-col gap-2 max-h-[165px] flex-1", scrollbarProps: { hide: !0 }, children: /* @__PURE__ */ e.jsx(
-            Ht,
+            qt,
             {
               sessions: r,
-              onSessionClick: u,
+              onSessionClick: c,
               secondarySlot: o,
-              subImageUrlAccessor: d?.sessionCardOptions?.subImageUrlAccessor,
-              currentSystemId: p
+              subImageUrlAccessor: i?.sessionCardOptions?.subImageUrlAccessor,
+              currentSystemId: m
             }
           ) })
         ] }),
@@ -867,7 +868,7 @@ const Ht = (t) => {
               animateIcon: !1,
               variant: "text",
               label: "Cerrar sesión",
-              icon: /* @__PURE__ */ e.jsx(St, {}),
+              icon: /* @__PURE__ */ e.jsx(Lt, {}),
               size: "small",
               color: "secondary",
               className: "w-full justify-start h-12 max-h-none p-3 "
@@ -877,27 +878,27 @@ const Ht = (t) => {
       ] })
     ] })
   ] });
-}, it = M(Vt, (t, r) => {
+}, ut = R($t, (t, r) => {
   const s = Object.keys(t), o = Object.keys(r);
   if (s.length !== o.length)
     return !1;
-  for (const u of s) {
-    if (!Object.prototype.hasOwnProperty.call(r, u))
+  for (const c of s) {
+    if (!Object.prototype.hasOwnProperty.call(r, c))
       return !1;
-    const l = t[u], f = r[u];
-    if (l !== f)
+    const l = t[c], u = r[c];
+    if (l !== u)
       return !1;
   }
   return t.currentAppSessions !== r.currentAppSessions || t.options !== r.options || t.currentSystemId !== r.currentSystemId || t.userOptionsControls !== r.userOptionsControls || t.mobileAppSwitcherControls !== r.mobileAppSwitcherControls;
 });
-it.displayName = "PyrionNavigationDrawer.Footer";
-const Wt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(se, { controls: s, children: [
-  /* @__PURE__ */ e.jsx(se.Content, { children: typeof r == "function" ? r() : r }),
-  /* @__PURE__ */ e.jsxs(se.Options, { children: [
+ut.displayName = "PyrionNavigationDrawer.Footer";
+const Kt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(ie, { controls: s, children: [
+  /* @__PURE__ */ e.jsx(ie.Content, { children: typeof r == "function" ? r() : r }),
+  /* @__PURE__ */ e.jsxs(ie.Options, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col p-2 pl-4 gap-2", children: [
       /* @__PURE__ */ e.jsx("p", { className: " prometeo-fonts-label-medium text-neutral-medium-default", children: "Cambiar módulo" }),
       /* @__PURE__ */ e.jsx(be, { className: "max-h-52", scrollbarProps: { hide: !0 }, children: t?.map((o) => {
-        const u = typeof o.thumbnail == "string" ? /* @__PURE__ */ e.jsx(
+        const c = typeof o.thumbnail == "string" ? /* @__PURE__ */ e.jsx(
           "img",
           {
             src: o.thumbnail,
@@ -909,7 +910,7 @@ const Wt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(se,
           o.disabled || o.onClick && o.onClick(o.name);
         };
         return /* @__PURE__ */ e.jsxs("div", { onClick: l, className: "flex gap-2 p-2 rounded-lg h-12", children: [
-          u,
+          c,
           /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center h-full justify-center  ", children: [
             /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-label-large text-neutral-default-default line-clamp-1", children: o.name }),
             o.description && /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-medium-default line-clamp-1", children: o.description })
@@ -919,25 +920,25 @@ const Wt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(se,
     ] }),
     /* @__PURE__ */ e.jsx("div", {})
   ] })
-] }), Te = M(({ enabled_systems: t, onClick: r, currentSystemId: s }) => {
+] }), Ie = R(({ enabled_systems: t, onClick: r, currentSystemId: s }) => {
   const o = x(() => {
     if (t) {
       if (s) {
-        const d = t.find((p) => p._id === s);
-        if (d) return { coverImage: d.coverImage, thumbnail: d.thumbnail };
+        const i = t.find((m) => m._id === s);
+        if (i) return { coverImage: i.coverImage, thumbnail: i.thumbnail };
       }
-      const l = window.location.origin, f = t.find((d) => d.url === l);
-      if (f) return { coverImage: f.coverImage, thumbnail: f.thumbnail };
+      const l = window.location.origin, u = t.find((i) => i.url === l);
+      if (u) return { coverImage: u.coverImage, thumbnail: u.thumbnail };
     }
     return { coverImage: "", thumbnail: "" };
-  }, [t]), u = !!r;
+  }, [t]), c = !!r;
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "img",
       {
         src: o().coverImage,
         alt: "System Logo",
-        className: L("w-full h-12 rounded object-contain system-cover-image ", u && "cursor-pointer"),
+        className: T("w-full h-12 rounded object-contain system-cover-image ", c && "cursor-pointer"),
         draggable: !1,
         onClick: r
       }
@@ -947,136 +948,148 @@ const Wt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(se,
       {
         src: o().thumbnail,
         alt: "System Logo",
-        className: L("w-12 h-12 rounded object-cover system-thumbnail ", u && "cursor-pointer"),
+        className: T("w-12 h-12 rounded object-cover system-thumbnail ", c && "cursor-pointer"),
         draggable: !1,
         onClick: r
       }
     )
   ] });
 }, (t, r) => t.enabled_systems === r.enabled_systems && t.onClick === r.onClick && t.currentSystemId === r.currentSystemId);
-Te.displayName = "PyrionNavigationDrawer.SystemLogo";
-const ct = M(({ onSystemLogoClick: t, state: r, currentSystemId: s, tabs: o, mobileAppSwitcherControls: u }) => {
-  const { getIsCollapsed: l } = oe(), f = We(), d = x(() => {
+Ie.displayName = "PyrionNavigationDrawer.SystemLogo";
+const ft = R(({ onSystemLogoClick: t, state: r, currentSystemId: s, tabs: o, mobileAppSwitcherControls: c }) => {
+  const { getIsCollapsed: l } = ce(), u = Ke(), i = x(() => {
     if (t) {
-      const p = l();
-      t(p);
+      const m = l();
+      t(m);
     }
   }, [t, l]);
-  return f ? /* @__PURE__ */ e.jsx(
-    Wt,
+  return u ? /* @__PURE__ */ e.jsx(
+    Kt,
     {
-      controls: u,
+      controls: c,
       tabs: o,
       content: /* @__PURE__ */ e.jsx(
-        Te,
+        Ie,
         {
           enabled_systems: r.enabled_systems,
-          onClick: d,
+          onClick: i,
           currentSystemId: s
         }
       )
     }
   ) : /* @__PURE__ */ e.jsx(
-    Te,
+    Ie,
     {
       enabled_systems: r.enabled_systems,
-      onClick: d,
+      onClick: i,
       currentSystemId: s
     }
   );
 });
-ct.displayName = "PyrionNavigationDrawer.Header";
-const qt = ({ onCloseClick: t, onMarkAllAsRead: r, notificationsListControls: s, scrollableControls: o }) => {
-  const [u, l] = Y([]), [f, d] = Y("NO_LEIDAS"), [p, h] = Y(!1), c = T(/* @__PURE__ */ new Set()), g = T(null), b = T(null), C = x((i, I = "top") => {
+ft.displayName = "PyrionNavigationDrawer.Header";
+const $e = ({ type: t }) => {
+  if (t === "load_more") return /* @__PURE__ */ e.jsx("p", { className: " prometeo-fonts-body-large text-neutral-medium-default w-full text-center py-4", children: "Cargando más ..." });
+  if (t === "skeletons") return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-3", children: Array(10)?.fill({})?.map(() => /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(Yt, {}) })) });
+}, Yt = () => /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-end gap-1 p-2", children: [
+  /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 w-full", children: [
+    /* @__PURE__ */ e.jsx(Ce, { shape: "circle", className: "w-12 h-12 aspect-square!" }),
+    /* @__PURE__ */ e.jsx(Ce, { shape: "rounded", className: "w-full h-12 min-h-12" })
+  ] }),
+  /* @__PURE__ */ e.jsx(Ce, { shape: "rounded", className: "w-20 h-3" })
+] }), Xt = ({ onCloseClick: t, onMarkAllAsRead: r, notificationsListControls: s, scrollableControls: o }) => {
+  const [c, l] = G([]), [u, i] = G("NO_LEIDAS"), [m, p] = G({ isLoading: !1, type: "load_more" }), [d, w] = G({ hasError: !1 }), h = O(/* @__PURE__ */ new Set()), C = O(null), A = O(null), N = x((b, M = "top") => {
     l((B) => {
-      const z = Array.isArray(i) ? I === "bottom" ? [...B, ...i] : [...i, ...B] : I === "bottom" ? [...B, i] : [i, ...B];
+      const z = Array.isArray(b) ? M === "bottom" ? [...B, ...b] : [...b, ...B] : M === "bottom" ? [...B, b] : [b, ...B];
       return queueMicrotask(() => {
-        c.current.forEach((K) => K(z, z.length));
+        h.current.forEach((Z) => Z(z, z.length));
       }), z;
     });
-  }, []), A = x((i) => (c.current.add(i), () => {
-    c.current.delete(i);
-  }), []), w = x((i) => {
-    l((I) => {
-      const B = Array.isArray(i) ? I.filter((z) => !i.includes(z._id)) : I.filter((z) => z._id !== i);
+  }, []), y = x((b) => (h.current.add(b), () => {
+    h.current.delete(b);
+  }), []), D = x((b) => {
+    l((M) => {
+      const B = Array.isArray(b) ? M.filter((z) => !b.includes(z._id)) : M.filter((z) => z._id !== b);
       return queueMicrotask(() => {
-        c.current.forEach((z) => z(B, B.length));
+        h.current.forEach((z) => z(B, B.length));
       }), B;
     });
-  }, []), N = x(() => {
+  }, []), W = x(() => {
     l([]), queueMicrotask(() => {
-      c.current.forEach((i) => i([], 0));
+      h.current.forEach((b) => b([], 0));
     });
-  }, []), D = x((i) => {
-    l(i), queueMicrotask(() => {
-      c.current.forEach((I) => I(i, i.length));
+  }, []), q = x((b) => {
+    l(b), queueMicrotask(() => {
+      h.current.forEach((M) => M(b, b.length));
     });
-  }, []), V = x((i) => {
-    h(i);
+  }, []), j = x((b, M = "load_more") => {
+    p({ isLoading: b, type: M });
+  }, []), U = x((b, M) => {
+    w({ hasError: b, children: M });
   }, []);
-  Ie(s, () => ({
-    addNewNotification: C,
-    subscribeToUpdates: A,
-    setNotifications: D,
-    removeNotification: w,
-    removeAllNotifications: N,
-    setLoading: V
-  }), [C, A, D, w, N, V]);
-  const W = (i) => {
-    d(i);
-  }, j = u.length > 0;
-  xt(() => {
-    if (g.current && b.current) {
-      const i = g.current.clientHeight;
-      b.current.style.setProperty("height", `calc(100vh - ${i}px - 20px)`);
+  _e(s, () => ({
+    addNewNotification: N,
+    subscribeToUpdates: y,
+    setNotifications: q,
+    removeNotification: D,
+    removeAllNotifications: W,
+    setLoading: j,
+    setError: U
+  }), [N, y, q, D, W, j, U]);
+  const S = (b) => {
+    i(b);
+  }, $ = c.length > 0;
+  wt(() => {
+    if (C.current && A.current) {
+      const b = C.current.clientHeight;
+      A.current.style.setProperty("height", `calc(100vh - ${b}px - 20px)`);
     }
-  }, [g?.current]);
-  const F = u.filter((i) => !i.read).length;
+  }, [C?.current]);
+  const Q = c.filter((b) => !b.read).length, { isLoading: Y, type: X } = m, { hasError: E, children: _ } = d;
   return /* @__PURE__ */ e.jsx(
     "section",
     {
       className: "w-full md:w-[479px] bg-neutral-default-default flex flex-col border-l-0 md:border-l border-neutral-strong-default min-h-full  h-full max-h-full overflow-hidden",
       children: /* @__PURE__ */ e.jsxs("div", { className: " w-full flex flex-col gap-4 ", children: [
-        /* @__PURE__ */ e.jsxs("div", { ref: g, className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ e.jsxs("div", { ref: C, className: "flex flex-col gap-4", children: [
           /* @__PURE__ */ e.jsxs("div", { className: "w-full h-max flex gap-2 items-center justify-between pt-8 pb-2 pr-2 pl-4 border-b border-neutral-strong-default sticky top-0 z-50 bg-neutral-default-default", children: [
             /* @__PURE__ */ e.jsxs("span", { className: "flex gap-2 items-center", children: [
-              /* @__PURE__ */ e.jsx(Ye, { className: "text-neutral-strong-default", size: 24 }),
+              /* @__PURE__ */ e.jsx(Ge, { className: "text-neutral-strong-default", size: 24 }),
               /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-headline-small text-neutral-strong-default", children: "Notificaciones" })
             ] }),
-            /* @__PURE__ */ e.jsx(pe, { onClick: () => t?.(), icon: /* @__PURE__ */ e.jsx(Pe, {}), variant: "text", animate: !1, animateIcon: !1, color: "secondary", className: "size-12" })
+            /* @__PURE__ */ e.jsx(pe, { onClick: () => t?.(), icon: /* @__PURE__ */ e.jsx(Me, {}), variant: "text", animate: !1, animateIcon: !1, color: "secondary", className: "size-12" })
           ] }),
           /* @__PURE__ */ e.jsx(
-            kt,
+            At,
             {
               className: "px-4 md:px-2 md:pl-2 pl-2 gap-0 md:gap-0",
-              onTabChange: W,
-              activeTab: f,
+              onTabChange: S,
+              activeTab: u,
               items: [
                 { id: "ALL", title: "Todas" },
                 { id: "NO_LEIDAS", title: "Sin leer" }
               ],
-              renderTab: (i, I, B, z, K, P, _, Z) => /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+              renderTab: (b, M, B, z, Z, ae, ee, ge) => /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ e.jsx(
-                  Dt,
+                  Tt,
                   {
-                    id: i.id,
-                    title: i.title,
+                    id: b.id,
+                    title: b.title,
                     onClick: B,
-                    isActive: I,
+                    isActive: M,
                     onIconClick: z,
-                    onIconHover: K,
-                    iconTooltipProps: _,
-                    iconTooltipTitle: P,
-                    iconSize: Z
+                    onIconHover: Z,
+                    iconTooltipProps: ee,
+                    iconTooltipTitle: ae,
+                    iconSize: ge
                   }
                 ),
-                F > 0 && i.title === "Sin leer" && /* @__PURE__ */ e.jsx($e, { count: F, className: "absolute top-0 right-0" })
+                Q > 0 && b.id === "NO_LEIDAS" && (Y ? /* @__PURE__ */ e.jsx("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ e.jsx(Ce, { className: "size-5.5", shape: "circle" }) }) : /* @__PURE__ */ e.jsx(Xe, { count: Q, className: "absolute top-0 right-0" }))
               ] })
             }
           ),
-          r && j && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end px-4", children: /* @__PURE__ */ e.jsx(pe, { onClick: r, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) })
+          r && $ && u === "NO_LEIDAS" && !E && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end px-4", children: /* @__PURE__ */ e.jsx(pe, { disabled: Y, onClick: r, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) })
         ] }),
-        /* @__PURE__ */ e.jsx("div", { ref: b, className: "", children: /* @__PURE__ */ e.jsxs(
+        E ? /* @__PURE__ */ e.jsx("div", { className: "w-full h-full grid place-items-center", children: typeof _ == "function" ? _() : _ }) : /* @__PURE__ */ e.jsx("div", { ref: A, className: "", children: /* @__PURE__ */ e.jsxs(
           be,
           {
             className: "px-4 md:px-2 py-0 md:py-0 flex flex-col gap-3 h-full",
@@ -1088,132 +1101,136 @@ const qt = ({ onCloseClick: t, onMarkAllAsRead: r, notificationsListControls: s,
             scrollTopButton: {
               target: "2000px"
             },
+            scrollMetadata: {
+              activeTab: u,
+              isLoading: Y
+            },
             children: [
-              j ? u?.filter((i) => f === "NO_LEIDAS" ? !i.read : i)?.map((i, I) => /* @__PURE__ */ e.jsx(jt, { ...i, className: " border-b border-neutral-strong-default rounded-b-none last:border-b-0" }, I)) : /* @__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" }),
-              p && /* @__PURE__ */ e.jsx("p", { className: " prometeo-fonts-body-large text-neutral-medium-default w-full text-center py-4", children: "Cargando más ..." })
+              Y && X === "skeletons" ? /* @__PURE__ */ e.jsx($e, { type: X }) : $ ? c?.filter((b) => u === "NO_LEIDAS" ? !b.read : b)?.map((b, M) => /* @__PURE__ */ e.jsx(Dt, { ...b, className: " border-b border-neutral-strong-default rounded-b-none last:border-b-0" }, M)) : /* @__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" }),
+              Y && X === "load_more" && /* @__PURE__ */ e.jsx($e, { type: X })
             ]
           }
         ) })
       ] })
     }
   );
-}, $t = ({ onCloseClick: t, children: r, title: s = "Ayuda" }) => /* @__PURE__ */ e.jsxs(
+}, Jt = ({ onCloseClick: t, children: r, title: s = "Ayuda" }) => /* @__PURE__ */ e.jsxs(
   "section",
   {
     className: "overflow-auto w-full md:w-[479px] bg-neutral-default-default border-l-0 md:border-l border-neutral-strong-default h-full",
     children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-full h-max flex gap-2 items-center justify-between pt-8 pb-2 pr-2 pl-4 border-b border-neutral-strong-default sticky top-0 z-50 bg-neutral-default-default", children: [
         /* @__PURE__ */ e.jsxs("span", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ e.jsx(Xe, { className: "text-neutral-strong-default", size: 24 }),
+          /* @__PURE__ */ e.jsx(Qe, { className: "text-neutral-strong-default", size: 24 }),
           /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-headline-small text-neutral-strong-default", children: s })
         ] }),
-        /* @__PURE__ */ e.jsx(pe, { onClick: () => t?.(), icon: /* @__PURE__ */ e.jsx(Pe, {}), variant: "text", animate: !1, animateIcon: !1, color: "secondary", className: "size-12" })
+        /* @__PURE__ */ e.jsx(pe, { onClick: () => t?.(), icon: /* @__PURE__ */ e.jsx(Me, {}), variant: "text", animate: !1, animateIcon: !1, color: "secondary", className: "size-12" })
       ] }),
       /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-3 pb-8 pt-4 px-4 ", children: r })
     ]
   }
-), Kt = ({ closeSidebar: t, options: r, helpSection: s, initialSection: o, notificationsListControls: u, scrollableControls: l }, f) => {
-  const [d, p] = Y(o ?? "notifications");
-  Ie(f, () => ({
-    setActiveSection: p
+), Gt = ({ closeSidebar: t, options: r, helpSection: s, initialSection: o, notificationsListControls: c, scrollableControls: l }, u) => {
+  const [i, m] = G(o ?? "notifications");
+  _e(u, () => ({
+    setActiveSection: m
   }));
-  const h = () => {
+  const p = () => {
     t();
   };
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    d === "notifications" && !r?.notificationsDrawerOptions?.hide && /* @__PURE__ */ e.jsx(
-      qt,
+    i === "notifications" && !r?.notificationsDrawerOptions?.hide && /* @__PURE__ */ e.jsx(
+      Xt,
       {
-        onCloseClick: h,
+        onCloseClick: p,
         onMarkAllAsRead: r?.notificationsDrawerOptions?.onMarkAllAsRead,
-        notificationsListControls: u,
+        notificationsListControls: c,
         scrollableControls: l
       }
     ),
-    d === "help" && s && !r?.helpSectionDrawerOptions?.hide && /* @__PURE__ */ e.jsx($t, { onCloseClick: h, children: typeof s == "function" ? s() : s })
+    i === "help" && s && !r?.helpSectionDrawerOptions?.hide && /* @__PURE__ */ e.jsx(Jt, { onCloseClick: p, children: typeof s == "function" ? s() : s })
   ] });
-}, dt = he(Kt);
-dt.displayName = "SidebarContent";
-const Yt = ({
+}, mt = he(Gt);
+mt.displayName = "SidebarContent";
+const Qt = ({
   options: t,
   helpSection: r,
   sidebarContentRef: s,
   initialSectionRef: o,
-  notificationsListControls: u,
+  notificationsListControls: c,
   scrollableControls: l
 }) => {
-  const { closeSidebar: f } = oe();
+  const { closeSidebar: u } = ce();
   return /* @__PURE__ */ e.jsx(
-    dt,
+    mt,
     {
       ref: s,
-      closeSidebar: f,
+      closeSidebar: u,
       options: t,
       helpSection: r,
       initialSection: o.current,
-      notificationsListControls: u,
+      notificationsListControls: c,
       scrollableControls: l
     }
   );
-}, ut = M(Yt);
-ut.displayName = "PyrionNavigationDrawer.Sidebar";
-const Xt = ({ navigationControlsRef: t }) => {
-  const r = oe();
+}, pt = R(Qt);
+pt.displayName = "PyrionNavigationDrawer.Sidebar";
+const Zt = ({ navigationControlsRef: t }) => {
+  const r = ce();
   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;
-}, Jt = (t) => {
-  const { children: r, currentAppSessions: s, resolveUserSecondarySlot: o, resolveSessionSecondarySlot: u, handleNavigation: l, allActions: f, tabs: d, navigationControlsRef: p, sidebarContentRef: h, initialSectionRef: c, userOptionsControls: g, mobileAppSwitcherControls: b, notificationsListControls: C, scrollableControls: A, outletRef: w, ...N } = t;
-  return /* @__PURE__ */ e.jsxs(G, { disableDragOpen: N.options?.disableDragOpen, outletRef: w, children: [
-    /* @__PURE__ */ e.jsx(Xt, { navigationControlsRef: p }),
-    /* @__PURE__ */ e.jsx(G.Header, { className: "flex flex-col relative w-full select-none", children: /* @__PURE__ */ e.jsx(
-      ct,
+}, er = (t) => {
+  const { children: r, currentAppSessions: s, resolveUserSecondarySlot: o, resolveSessionSecondarySlot: c, handleNavigation: l, allActions: u, tabs: i, navigationControlsRef: m, sidebarContentRef: p, initialSectionRef: d, userOptionsControls: w, mobileAppSwitcherControls: h, notificationsListControls: C, scrollableControls: A, outletRef: N, ...y } = t;
+  return /* @__PURE__ */ e.jsxs(se, { disableDragOpen: y.options?.disableDragOpen, outletRef: N, children: [
+    /* @__PURE__ */ e.jsx(Zt, { navigationControlsRef: m }),
+    /* @__PURE__ */ e.jsx(se.Header, { className: "flex flex-col relative w-full select-none", children: /* @__PURE__ */ e.jsx(
+      ft,
       {
-        onSystemLogoClick: N.onSystemLogoClick,
-        state: N.state,
-        currentSystemId: N.currentSystemId,
-        tabs: d,
-        mobileAppSwitcherControls: b
+        onSystemLogoClick: y.onSystemLogoClick,
+        state: y.state,
+        currentSystemId: y.currentSystemId,
+        tabs: i,
+        mobileAppSwitcherControls: h
       }
     ) }, "PL-Header"),
-    /* @__PURE__ */ e.jsx(G.Content, { className: "overflow-hidden flex flex-col relative flex-1  md:w-auto", children: /* @__PURE__ */ e.jsx(
-      lt,
+    /* @__PURE__ */ e.jsx(se.Content, { className: "overflow-hidden flex flex-col relative flex-1  md:w-auto", children: /* @__PURE__ */ e.jsx(
+      dt,
       {
-        navlinks: N.links,
+        navlinks: y.links,
         handleNavigation: l,
-        allActions: f,
-        activeActionId: N.activeActionId,
-        onActionClick: N.onActionClick
+        allActions: u,
+        activeActionId: y.activeActionId,
+        onActionClick: y.onActionClick
       }
     ) }, "PL-Content"),
-    /* @__PURE__ */ e.jsx(G.Footer, { className: "md:min-h-max flex flex-col w-full overflow-hidden max-w-full", children: /* @__PURE__ */ e.jsx(
-      it,
+    /* @__PURE__ */ e.jsx(se.Footer, { className: "md:min-h-max flex flex-col w-full overflow-hidden max-w-full", children: /* @__PURE__ */ e.jsx(
+      ut,
       {
-        state: N.state,
+        state: y.state,
         currentAppSessions: s,
         resolveUserSecondarySlot: o,
-        resolveSessionSecondarySlot: u,
-        onSessionClick: N.onSessionClick,
-        onLogoutClick: N.onLogoutClick,
-        options: N.options,
-        currentSystemId: N.currentSystemId,
-        userOptionsControls: g,
-        mobileAppSwitcherControls: b,
-        onProfileClick: N.onProfileClick
+        resolveSessionSecondarySlot: c,
+        onSessionClick: y.onSessionClick,
+        onLogoutClick: y.onLogoutClick,
+        options: y.options,
+        currentSystemId: y.currentSystemId,
+        userOptionsControls: w,
+        mobileAppSwitcherControls: h,
+        onProfileClick: y.onProfileClick
       }
     ) }, "PL-Footer"),
-    /* @__PURE__ */ e.jsx(G.Outlet, { children: /* @__PURE__ */ e.jsx(mt, { children: r }) }),
+    /* @__PURE__ */ e.jsx(se.Outlet, { children: /* @__PURE__ */ e.jsx(bt, { children: r }) }),
     /* @__PURE__ */ e.jsx(
-      G.Sidebar,
+      se.Sidebar,
       {
         className: "bg-neutral-default-default",
-        modal: N.options?.sidebarOptions?.modal,
-        closeOnOverlayClick: N.options?.sidebarOptions?.closeOnOverlayClick,
+        modal: y.options?.sidebarOptions?.modal,
+        closeOnOverlayClick: y.options?.sidebarOptions?.closeOnOverlayClick,
         children: /* @__PURE__ */ e.jsx(
-          ut,
+          pt,
           {
-            options: N.options,
-            helpSection: N.helpSection,
-            sidebarContentRef: h,
-            initialSectionRef: c,
+            options: y.options,
+            helpSection: y.helpSection,
+            sidebarContentRef: p,
+            initialSectionRef: d,
             notificationsListControls: C,
             scrollableControls: A
           }
@@ -1221,219 +1238,221 @@ const Xt = ({ navigationControlsRef: t }) => {
       }
     )
   ] });
-}, ft = M(Jt, (t, r) => {
-  const { children: s, ...o } = t, { children: u, ...l } = r, f = Object.keys(o), d = Object.keys(l);
-  if (f.length !== d.length)
+}, ht = R(er, (t, r) => {
+  const { children: s, ...o } = t, { children: c, ...l } = r, u = Object.keys(o), i = Object.keys(l);
+  if (u.length !== i.length)
     return !1;
-  for (const p of f) {
-    if (!Object.prototype.hasOwnProperty.call(l, p))
+  for (const m of u) {
+    if (!Object.prototype.hasOwnProperty.call(l, m))
       return !1;
-    const h = o[p], c = l[p];
-    if (h !== c)
+    const p = o[m], d = l[m];
+    if (p !== d)
       return !1;
   }
   return !0;
 });
-ft.displayName = "PyrionNavigationDrawer.LayoutBase";
-const mt = M(({ children: t }) => /* @__PURE__ */ e.jsx(G.Outlet, { children: t }));
-mt.displayName = "PyrionNavigationDrawer.IsolatedOutlet";
-const pt = Oe(null), wr = () => {
-  const t = gt(pt);
+ht.displayName = "PyrionNavigationDrawer.LayoutBase";
+const bt = R(({ children: t }) => /* @__PURE__ */ e.jsx(se.Outlet, { children: t }));
+bt.displayName = "PyrionNavigationDrawer.IsolatedOutlet";
+const xt = Ee(null), jr = () => {
+  const t = Nt(xt);
   if (!t)
     throw new Error("usePyrionLayout debe usarse dentro de PyrionLayout");
   return t;
-}, Nr = ({ children: t, helpSection: r, state: s, links: o, onLinkClick: u, onNavigate: l, onLogoutClick: f, actions: d, activeActionId: p, onActionClick: h, tabsProps: c, currentSystemId: g, onSessionClick: b, onSystemLogoClick: C, onProfileClick: A, ...w }) => {
+}, kr = ({ children: t, helpSection: r, state: s, links: o, onLinkClick: c, onNavigate: l, onLogoutClick: u, actions: i, activeActionId: m, onActionClick: p, tabsProps: d, currentSystemId: w, onSessionClick: h, onSystemLogoClick: C, onProfileClick: A, ...N }) => {
   const D = Object.assign({
     closeDrawerOnNavigate: !0,
     disableDragOpen: {
       sidebar: !0,
       drawer: !1
     }
-  }, w.options), V = wt(), W = We(), j = T(null), F = T(null), i = T({}), I = T(null), B = T("notifications"), z = T(null), K = T(null), P = T(null), [_, Z] = Y(0), [ue, ee] = Y(!1), [ne, ae] = Y(null), le = x((a) => {
-    if (ee(!1), u) {
-      u(a);
+  }, N.options), W = St(), q = Ke(), j = O(null), U = O(null), S = O({}), $ = O(null), Q = O("notifications"), Y = O(null), X = O(null), E = O(null), [_, b] = G(0), [M, B] = G(!1), [z, Z] = G(null), ae = x((a) => {
+    if (B(!1), c) {
+      c(a);
       return;
     }
-    const y = window.location.pathname;
-    V(a), D.closeDrawerOnNavigate && ht() && !i.current?.getIsCollapsed?.() && i.current?.toggleCollapse?.(), l && l(y, a);
-  }, [u, l, V]), te = (a) => {
+    const v = window.location.pathname;
+    W(a), D.closeDrawerOnNavigate && gt() && !S.current?.getIsCollapsed?.() && S.current?.toggleCollapse?.(), l && l(v, a);
+  }, [c, l, W]), ee = (a) => {
     a && window.open(a, "_blank");
-  }, ge = {
+  }, ve = {
     system: {
-      mobile: te,
+      mobile: ee,
       desktop: (a) => {
         typeof window < "u" && a && (window.location.href = a);
       }
     },
     product: {
-      mobile: te,
-      desktop: te
+      mobile: ee,
+      desktop: ee
     }
-  }, je = x((a) => {
-    const y = W ? "mobile" : "desktop", E = s.enabled_systems.find((S) => S.name === a)?.url;
-    ge.system[y](E), c?.onTabClick?.(a);
-  }, [W, s.enabled_systems, c?.onTabClick]), Be = x((a) => {
-    const y = W ? "mobile" : "desktop", E = s.company.products?.find((S) => S.name === a)?.domain;
-    ge.product[y](E), c?.onTabClick?.(a);
-  }, [W, s.company.products, c?.onTabClick]), ie = x((a, y) => {
-    if (y) {
-      y(a), c?.onTabClick?.(a);
+  }, Le = x((a) => {
+    const v = q ? "mobile" : "desktop", P = s.enabled_systems.find((k) => k.name === a)?.url;
+    ve.system[v](P), d?.onTabClick?.(a);
+  }, [q, s.enabled_systems, d?.onTabClick]), Fe = x((a) => {
+    const v = q ? "mobile" : "desktop", P = s.company.products?.find((k) => k.name === a)?.domain;
+    ve.product[v](P), d?.onTabClick?.(a);
+  }, [q, s.company.products, d?.onTabClick]), de = x((a, v) => {
+    if (v) {
+      v(a), d?.onTabClick?.(a);
       return;
     } else
-      c?.onTabClick?.(a);
-  }, [c?.onTabClick]), Fe = x(() => {
+      d?.onTabClick?.(a);
+  }, [d?.onTabClick]), ze = x(() => {
     const a = {};
-    s.enabled_systems.forEach((E) => {
-      a[E.url] = E.name;
+    s.enabled_systems.forEach((P) => {
+      a[P.url] = P.name;
     });
-    const y = window.location.origin;
-    for (const [E, S] of Object.entries(a))
-      if (y === E)
-        return S;
+    const v = window.location.origin;
+    for (const [P, k] of Object.entries(a))
+      if (v === P)
+        return k;
     return "";
-  }, [s.enabled_systems]), ke = c?.currentTabName || Fe(), De = me(
+  }, [s.enabled_systems]), De = d?.currentTabName || ze(), Ae = me(
     () => s.sessions || [],
     [s.sessions]
-  ), X = (a) => a == null ? null : typeof a == "string" || typeof a == "number" || typeof a == "boolean" ? String(a) : ye(a) ? a : typeof a == "object" ? JSON.stringify(a) : null, ce = x((a, y) => {
+  ), te = (a) => a == null ? null : typeof a == "string" || typeof a == "number" || typeof a == "boolean" ? String(a) : Se(a) ? a : typeof a == "object" ? JSON.stringify(a) : null, ue = x((a, v) => {
     if (!a) return null;
     if (Array.isArray(a)) {
-      const E = a?.[0] ? Ne(y, a[0]) : null, S = a?.[1] ? Ne(y, a[1]) : null, $ = X(E), fe = X(S);
+      const P = a?.[0] ? ye(v, a[0]) : null, k = a?.[1] ? ye(v, a[1]) : null, J = te(P), Ue = te(k);
       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: $ }),
-        fe && /* @__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: [
+        /* @__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: J }),
+        Ue && /* @__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: [
           /* @__PURE__ */ e.jsx("span", { className: "size-0.5 bg-[var(--neutral-300)] rounded-full" }),
-          /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default line-clamp-1 whitespace-pre text-ellipsis", children: fe })
+          /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default line-clamp-1 whitespace-pre text-ellipsis", children: Ue })
         ] })
       ] });
     }
     if (typeof a == "string") {
-      const E = Ne(y, a);
-      return X(E);
+      const P = ye(v, a);
+      return te(P);
     }
-    return typeof a == "function" ? X(a(y)) : null;
+    return typeof a == "function" ? te(a(v)) : null;
   }, []), n = x(
     (a) => {
-      const y = D?.userCardOptions?.secondarySlot;
-      if (!y) return null;
-      const E = s.enabled_systems?.find(($) => $._id === g), S = { company: s.company, user: s.user, system: E, metadata: a };
-      return ce(y, S);
+      const v = D?.userCardOptions?.secondarySlot;
+      if (!v) return null;
+      const P = s.enabled_systems?.find((J) => J._id === w), k = { company: s.company, user: s.user, system: P, metadata: a };
+      return ue(v, k);
     },
-    [g, D?.userCardOptions?.secondarySlot, ce, s.company, s.enabled_systems, s.user]
-  ), m = x(
+    [w, D?.userCardOptions?.secondarySlot, ue, s.company, s.enabled_systems, s.user]
+  ), f = x(
     (a) => {
-      const y = D?.sessionCardOptions?.secondarySlot || D?.userCardOptions?.secondarySlot;
-      if (!y) return null;
-      const E = s.enabled_systems?.find(($) => $._id === g), S = { company: s.company, user: a.auth_id, metadata: a?.metadata, system: E };
-      return ce(y, S);
+      const v = D?.sessionCardOptions?.secondarySlot || D?.userCardOptions?.secondarySlot;
+      if (!v) return null;
+      const P = s.enabled_systems?.find((J) => J._id === w), k = { company: s.company, user: a.auth_id, metadata: a?.metadata, system: P };
+      return ue(v, k);
     },
-    [g, D?.sessionCardOptions?.secondarySlot, D?.userCardOptions?.secondarySlot, ce, s.company]
-  ), v = me(() => {
+    [w, D?.sessionCardOptions?.secondarySlot, D?.userCardOptions?.secondarySlot, ue, s.company]
+  ), g = me(() => {
     const a = [];
-    return i.current.openNotifications = () => {
-      B.current = "notifications", i.current.openSidebar?.(), I.current?.setActiveSection("notifications");
-    }, i.current.openHelp = () => {
-      B.current = "help", i.current.openSidebar?.(), I.current?.setActiveSection("help");
+    return S.current.openNotifications = () => {
+      Q.current = "notifications", S.current.openSidebar?.(), $.current?.setActiveSection("notifications");
+    }, S.current.openHelp = () => {
+      Q.current = "help", S.current.openSidebar?.(), $.current?.setActiveSection("help");
     }, !D?.notificationsDrawerOptions?.hideActionButton && !D?.notificationsDrawerOptions?.hide && a.push({
       id: "notifications",
       title: "Notificaciones",
-      icon: Ye,
-      onClick: i.current.openNotifications,
+      icon: Ge,
+      onClick: S.current.openNotifications,
       count: _
     }), !D?.helpSectionDrawerOptions?.hideActionButton && r && !D?.helpSectionDrawerOptions?.hide && a.push({
       id: "help",
       title: "Ayuda",
-      icon: Xe,
-      onClick: i.current.openHelp
+      icon: Qe,
+      onClick: S.current.openHelp
     }), D?.configurationActionOptions?.onClick && !D?.configurationActionOptions?.hideActionButton && a.push({
       id: "configuration",
       title: "Configuracion",
-      icon: Lt,
+      icon: Ot,
       onClick: D.configurationActionOptions?.onClick
     }), a;
-  }, [D, r, h, _]), O = me(
-    () => [...v, ...d || []],
-    [v, d]
-  ), U = me(() => {
-    const a = s.enabled_systems.map((S) => ({
-      name: S.name,
-      thumbnail: S.thumbnail,
-      onClick: je,
-      id: S._id
-    })) || [], y = c?.customTabs?.map((S) => ({
-      ...S,
-      onClick: () => ie(S.name, S?.onClick)
-    })) || [], E = s.company.products?.map((S) => ({
-      name: S.name,
-      thumbnail: S.thumbnail,
-      onClick: Be
+  }, [D, r, p, _]), I = me(
+    () => [...g, ...i || []],
+    [g, i]
+  ), H = me(() => {
+    const a = s.enabled_systems.map((k) => ({
+      name: k.name,
+      thumbnail: k.thumbnail,
+      onClick: Le,
+      id: k._id
+    })) || [], v = d?.customTabs?.map((k) => ({
+      ...k,
+      onClick: () => de(k.name, k?.onClick)
+    })) || [], P = s.company.products?.map((k) => ({
+      name: k.name,
+      thumbnail: k.thumbnail,
+      onClick: Fe
     })) || [];
-    return [...a, ...y, ...E];
-  }, [s.enabled_systems, s.company.products, c?.customTabs]), R = x((a, y) => {
-    j.current?.addNewNotification ? j.current.addNewNotification(a, y) : console.warn("Notifications controls not ready yet");
-  }, []), J = x((a) => j.current?.subscribeToUpdates ? j.current.subscribeToUpdates(a) : (console.warn("Notifications controls not ready yet"), () => {
-  }), []), re = x((a) => {
+    return [...a, ...v, ...P];
+  }, [s.enabled_systems, s.company.products, d?.customTabs]), F = x((a, v) => {
+    j.current?.addNewNotification ? j.current.addNewNotification(a, v) : console.warn("Notifications controls not ready yet");
+  }, []), re = x((a) => j.current?.subscribeToUpdates ? j.current.subscribeToUpdates(a) : (console.warn("Notifications controls not ready yet"), () => {
+  }), []), oe = x((a) => {
     j.current?.removeNotification ? j.current.removeNotification(a) : console.warn("Notifications controls not ready yet");
-  }, []), de = x(() => {
+  }, []), fe = x(() => {
     j.current?.removeAllNotifications ? j.current.removeAllNotifications() : console.warn("Notifications controls not ready yet");
-  }, []), ve = x((a) => {
+  }, []), we = x((a) => {
     j.current?.setNotifications ? j.current.setNotifications(a) : console.warn("Notifications controls not ready yet");
-  }, []), we = x((a, y) => F.current?.subscribeToScrollTarget ? F.current.subscribeToScrollTarget(a, y) : (console.warn("Scrollable controls not ready yet"), () => {
-  }), []), k = x((a) => {
-    j.current?.setLoading ? j.current.setLoading(a) : console.warn("Notifications controls not ready yet");
-  }, []), q = x((a, y, E) => {
-    const S = /* @__PURE__ */ e.jsxs("div", { className: L(" bg-black/60 z-200 inset-0 h-full w-full grid place-items-center text-neutral-default-default", y ? "fixed" : "sticky"), children: [
-      !E && /* @__PURE__ */ e.jsx(pe, { label: "", icon: /* @__PURE__ */ e.jsx(Pe, {}), onClick: () => ee(!1), variant: "text", className: "absolute top-0 right-0", size: "small", color: "secondary" }),
+  }, []), Ne = x((a, v) => U.current?.subscribeToScrollTarget ? U.current.subscribeToScrollTarget(a, v) : (console.warn("Scrollable controls not ready yet"), () => {
+  }), []), L = x((a, v = "load_more") => {
+    j.current?.setLoading ? j.current.setLoading(a, v) : console.warn("Notifications controls not ready yet");
+  }, []), K = x((a, v) => {
+    j.current?.setError ? j.current.setError(a, v) : console.warn("Notifications controls not ready yet");
+  }, []), V = x((a, v, P) => {
+    const k = /* @__PURE__ */ e.jsxs("div", { className: T(" bg-black/60 z-200 inset-0 h-full w-full grid place-items-center text-neutral-default-default", v ? "fixed" : "sticky"), children: [
+      !P && /* @__PURE__ */ e.jsx(pe, { label: "", icon: /* @__PURE__ */ e.jsx(Me, {}), onClick: () => B(!1), variant: "text", className: "absolute top-0 right-0", size: "small", color: "secondary" }),
       typeof a == "function" ? a() : a
     ] });
-    let $;
-    return y ? $ = Ue(S, document.body, `modal-error-${Date.now()}`) : P.current && ($ = Ue(S, P.current, `modal-error-${Date.now()}`)), ae($), ee(!0), S;
-  }, [P]), H = x(() => {
-    ee(!1);
+    let J;
+    return v ? J = Ve(k, document.body, `modal-error-${Date.now()}`) : E.current && (J = Ve(k, E.current, `modal-error-${Date.now()}`)), Z(J), B(!0), k;
+  }, [E]), le = x(() => {
+    B(!1);
   }, []);
-  return i.current.addNewNotification = R, i.current.subscribeToNotificationsUpdates = J, i.current.removeNotification = re, i.current.removeAllNotifications = de, i.current.setNotifications = ve, i.current.setNotificationsLoading = k, i.current.subscribeToNotificationsScroll = we, i.current.showErrorModal = q, i.current.closeErrorModal = H, Q(() => {
-    J((a, y) => {
-      Z(y);
+  return S.current.addNewNotification = F, S.current.subscribeToNotificationsUpdates = re, S.current.removeNotification = oe, S.current.removeAllNotifications = fe, S.current.setNotifications = we, S.current.setNotificationsError = K, S.current.setNotificationsLoading = L, S.current.subscribeToNotificationsScroll = Ne, S.current.showErrorModal = V, S.current.closeErrorModal = le, ne(() => {
+    re((a, v) => {
+      b(v);
     });
-  }, [J]), /* @__PURE__ */ e.jsxs(pt.Provider, { value: i.current, children: [
-    ue && ne,
+  }, [re]), /* @__PURE__ */ e.jsxs(xt.Provider, { value: S.current, children: [
+    M && z,
     /* @__PURE__ */ e.jsxs("div", { className: "flex h-screen", children: [
-      !W && U.length > 0 && /* @__PURE__ */ e.jsx(
-        At,
+      !q && H.length > 0 && /* @__PURE__ */ e.jsx(
+        It,
         {
           className: "hidden md:flex",
-          tabs: U,
+          tabs: H,
           activeColor: "var(--neutral-900)",
-          currentTabName: ke,
-          currentSystemId: g
+          currentTabName: De,
+          currentSystemId: w
         }
       ),
       /* @__PURE__ */ e.jsx(
-        ft,
+        ht,
         {
           links: o,
-          handleNavigation: le,
-          allActions: O,
-          activeActionId: p,
-          onActionClick: h,
+          handleNavigation: ae,
+          allActions: I,
+          activeActionId: m,
+          onActionClick: p,
           state: s,
-          currentAppSessions: De,
+          currentAppSessions: Ae,
           resolveUserSecondarySlot: n,
-          resolveSessionSecondarySlot: m,
-          onSessionClick: b,
-          onLogoutClick: f,
+          resolveSessionSecondarySlot: f,
+          onSessionClick: h,
+          onLogoutClick: u,
           options: D,
-          currentSystemId: g,
-          userOptionsControls: z,
-          mobileAppSwitcherControls: K,
+          currentSystemId: w,
+          userOptionsControls: Y,
+          mobileAppSwitcherControls: X,
           onSystemLogoClick: C,
-          tabs: U,
+          tabs: H,
           helpSection: r,
-          sidebarContentRef: I,
-          initialSectionRef: B,
-          navigationControlsRef: i,
+          sidebarContentRef: $,
+          initialSectionRef: Q,
+          navigationControlsRef: S,
           notificationsListControls: j,
-          scrollableControls: F,
-          outletRef: P,
+          scrollableControls: U,
+          outletRef: E,
           onProfileClick: A,
           children: t
         }
@@ -1442,6 +1461,6 @@ const pt = Oe(null), wr = () => {
   ] });
 };
 export {
-  Nr as default,
-  wr as u
+  kr as default,
+  jr as u
 };