prometeo-design-system 4.0.0 → 4.1.1

package/dist/PyrionLayout.es.js

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