prometeo-design-system 4.2.3 → 4.2.5

package/dist/PyrionLayout.es.js

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