prometeo-design-system 4.7.7 → 4.7.8

package/dist/PyrionLayout.es.js

@@ -2,7 +2,7 @@ import { j as e } from "./jsx-runtime-GkKLlHH4.js";
 import { u as Je, g as Nt } from "./useDevice-vwn4GLwK.js";
 import { c as D } from "./cn-B6yFEsav.js";
 import { g as je } from "./utils-X4-h3cum.js";
-import qe, { forwardRef as be, useState as J, useRef as E, useEffect as se, memo as M, useContext as Ge, createContext as Me, useCallback as b, Children as yt, isValidElement as ke, useMemo as me, useImperativeHandle as Re, useLayoutEffect as Ct, use as St } from "react";
+import qe, { forwardRef as be, useState as J, useRef as O, useEffect as se, memo as M, useContext as Ge, createContext as Me, useCallback as h, Children as yt, isValidElement as ke, useMemo as me, useImperativeHandle as Re, useLayoutEffect as Ct, use as St } from "react";
 import { createPortal as $e } from "react-dom";
 import { useLocation as jt, useNavigate as kt } from "react-router";
 import pe from "./Skeleton.es.js";
@@ -23,11 +23,11 @@ import { Close as Fe } from "./Icons/Close.es.js";
 import { Help as tt } from "./Icons/Help.es.js";
 import { Settings as _t } from "./Icons/Settings.es.js";
 const Pt = be((t, r) => {
-  const [s, o] = J(t?.currentTabName || t.tabs[0]?.name), c = E(null), { tabs: l = [], className: d, activeColor: i = "var(--neutral-900)", currentSystemId: f, isLoading: p = !1 } = t;
-  se(() => {
+  const [s, o] = J(t?.currentTabName || t.tabs[0]?.name), c = O(null), { tabs: l = [], className: d, activeColor: i = "var(--neutral-900)", currentSystemId: f, isLoading: m = !1 } = t;
+  console.log("tabs en el tabswitch del layout", l), se(() => {
     c.current?.style.setProperty("--tab-bg", i);
   }, [i]);
-  const x = l.find((m) => m?.id === f || m?.name === (t?.currentTabName || s));
+  const x = l.find((p) => p?.id === f || p?.name === (t?.currentTabName || s));
   return /* @__PURE__ */ e.jsx(
     "div",
     {
@@ -40,9 +40,9 @@ const Pt = be((t, r) => {
         "border-r border-neutral-default-default",
         d
       ),
-      children: (p ? Array(3).fill(null) : l).map(
-        (m, h) => {
-          if (p) return /* @__PURE__ */ e.jsx(
+      children: (m ? Array(3).fill(null) : l).map(
+        (p, b) => {
+          if (m) return /* @__PURE__ */ e.jsx(
             "div",
             {
               className: D(
@@ -51,19 +51,19 @@ const Pt = be((t, r) => {
                 "flex items-center pl-[6px] ",
                 "rounded-l-[8px]",
                 "tabswitch-element relative",
-                h === 0 && "active"
+                b === 0 && "active"
               ),
               children: /* @__PURE__ */ e.jsx("div", { className: D(
                 "size-8 rounded-[4px]",
                 "grid place-items-center",
                 "tab-thumbnail-icon",
                 "bg-transparent text-neutral-default-default",
-                m?.className
+                p?.className
               ), children: /* @__PURE__ */ e.jsx(pe, { shape: "rounded", className: "w-full h-full" }) })
             }
           );
-          const S = m?.name === x?.name, k = typeof m?.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: m?.thumbnail, alt: m?.description, className: "aspect-square object-contain rounded", draggable: !1 }) : m?.thumbnail, y = () => {
-            m.disabled || (o(m?.name), m.onClick && m.onClick(m?.name));
+          const S = p?.name === x?.name, k = typeof p?.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: p?.thumbnail, alt: p?.description, className: "aspect-square object-contain rounded", draggable: !1 }) : p?.thumbnail, y = () => {
+            p.disabled || (o(p?.name), p.onClick && p.onClick(p?.name));
           };
           return /* @__PURE__ */ e.jsx(
             "div",
@@ -83,26 +83,26 @@ const Pt = be((t, r) => {
                 "grid place-items-center",
                 "tab-thumbnail-icon",
                 "bg-transparent text-neutral-default-default",
-                m?.className
+                p?.className
               ), children: k })
             },
-            m?.name
+            p?.name
           );
         }
       )
     }
   );
 }), rt = M(be(({ children: t, className: r, context: s, modal: o = !1, closeOnOverlayClick: c = !1, unmountChildrenOnClose: l = !0 }, d) => {
-  const i = ge(t, s), f = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: p } = Mt(), { closeSidebar: x } = ce(), [m, h] = J(() => l ? p : !0), [S, k] = J(!1);
+  const i = ge(t, s), f = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: m } = Mt(), { closeSidebar: x } = ce(), [p, b] = J(() => l ? m : !0), [S, k] = J(!1);
   return se(() => {
     l && s?.subscribeToSidebarOpen((y) => {
-      y ? (k(!1), h(!0)) : k(!0);
+      y ? (k(!1), b(!0)) : k(!0);
     });
   }, [l, s]), se(() => {
     const y = d && typeof d == "object" && "current" in d ? d.current : null;
     if (!y) return;
     const C = () => {
-      S && (h(!1), k(!1));
+      S && (b(!1), k(!1));
     };
     return y.addEventListener("transitionend", C), () => y.removeEventListener("transitionend", C);
   }, [S]), /* @__PURE__ */ e.jsxs("div", { ref: d, className: D("sidebar", f ? "collapsed" : "expanded", "h-full overflow-auto", r), "aria-modal": o || void 0, children: [
@@ -118,7 +118,7 @@ const Pt = be((t, r) => {
     ),
     /* @__PURE__ */ e.jsxs("div", { className: D("navigation-drawer-sidebar-inner"), children: [
       /* @__PURE__ */ e.jsx("div", { className: "secure-click-margin" }),
-      m && i
+      p && i
     ] })
   ] });
 })), st = Me(null), nt = Me(null), Mt = () => {
@@ -144,31 +144,31 @@ const Pt = be((t, r) => {
     } catch {
     }
 }, Bt = (t) => {
-  const { children: r, classNameDrawer: s, classNameSidebar: o, disableDragOpen: c, modal: l = !0, closeOnOutsideClick: d = !0 } = t, i = E(null), f = E(null), p = t.outletRef ?? E(null), x = E(null), m = E(Ke()), h = E(!1), S = E("drawer"), k = E(/* @__PURE__ */ new Set()), y = E(/* @__PURE__ */ new Set()), C = E(!1), A = E(null), V = b((n) => {
+  const { children: r, classNameDrawer: s, classNameSidebar: o, disableDragOpen: c, modal: l = !0, closeOnOutsideClick: d = !0 } = t, i = O(null), f = O(null), m = t.outletRef ?? O(null), x = O(null), p = O(Ke()), b = O(!1), S = O("drawer"), k = O(/* @__PURE__ */ new Set()), y = O(/* @__PURE__ */ new Set()), C = O(!1), A = O(null), V = h((n) => {
     const u = f.current;
     u && (u.classList.toggle("collapsed", n), u.classList.toggle("expanded", !n));
-  }, []), $ = b((n) => {
+  }, []), $ = h((n) => {
     const u = x.current;
     if (!u) return;
     u.classList.toggle("collapsed", n), u.classList.toggle("expanded", !n);
     const v = i.current;
     v && (v.classList.toggle("sidebar-collapsed", n), v.classList.toggle("sidebar-expanded", !n));
-  }, []), j = b(
+  }, []), j = h(
     (n, { notify: u = !0 } = {}) => {
-      const v = m.current !== n;
-      m.current = n, Rt(n), V(n), u && v && k.current.forEach((I) => I(n));
+      const v = p.current !== n;
+      p.current = n, Rt(n), V(n), u && v && k.current.forEach((I) => I(n));
     },
     [V]
-  ), U = b(
+  ), U = h(
     (n, { notify: u = !0 } = {}) => {
-      const v = h.current !== n;
-      if (h.current = n, $(n), u && v) {
+      const v = b.current !== n;
+      if (b.current = n, $(n), u && v) {
         const I = !n;
         y.current.forEach((W) => W(I));
       }
     },
     [$]
-  ), N = b(
+  ), N = h(
     (n, { notify: u = !0 } = {}) => {
       const v = S.current, I = v !== n;
       S.current = n, window.matchMedia("(min-width: 768px)").matches || j(n !== "drawer", { notify: u });
@@ -176,11 +176,11 @@ const Pt = be((t, r) => {
       u && I && W !== B && y.current.forEach((te) => te(B)), U(n !== "sidebar", { notify: u }), j(n !== "drawer", { notify: u });
     },
     [j, U]
-  ), K = b((n) => {
+  ), K = h((n) => {
     const u = i.current;
     if (!u || window.matchMedia("(min-width: 768px)").matches) return;
     C.current = !0;
-    const v = p.current?.offsetLeft ?? 0, I = x.current?.offsetLeft ?? v, W = n === "drawer" ? 0 : n === "sidebar" ? I : v;
+    const v = m.current?.offsetLeft ?? 0, I = x.current?.offsetLeft ?? v, W = n === "drawer" ? 0 : n === "sidebar" ? I : v;
     A.current = W, u.scrollTo({ left: W, behavior: "smooth" });
     const B = () => {
       C.current = !1, A.current = null, u.removeEventListener("scrollend", B);
@@ -188,8 +188,8 @@ const Pt = be((t, r) => {
     u.addEventListener("scrollend", B, { once: !0 }), setTimeout(() => {
       C.current && B();
     }, 1e3);
-  }, []), G = b(() => {
-    const n = i.current, u = p.current;
+  }, []), G = h(() => {
+    const n = i.current, u = m.current;
     if (!n || !u || window.matchMedia("(min-width: 768px)").matches) return;
     const v = [
       { panel: "drawer", offset: 0 },
@@ -208,7 +208,7 @@ const Pt = be((t, r) => {
     const n = i.current;
     n && (c?.drawer && n.classList.add("disabled-dragopen"), c?.sidebar && n.classList.add("disabled-dragopen-sidebar"));
   }, [c, i]), se(() => {
-    const n = i.current, u = p.current;
+    const n = i.current, u = m.current;
     if (!n || !u) return;
     if (window.matchMedia("(min-width: 768px)").matches) {
       const I = Ke();
@@ -220,7 +220,7 @@ const Pt = be((t, r) => {
     });
   }, [N, j, U]), se(() => {
     const n = i.current;
-    if (!n || !p.current) return;
+    if (!n || !m.current) return;
     let v = !1, I = 0, W = 0;
     const B = (L) => {
       I = L.touches[0].clientX, W = L.touches[0].clientY;
@@ -272,26 +272,26 @@ const Pt = be((t, r) => {
       n.removeEventListener("touchstart", B), n.removeEventListener("touchmove", Ne), n.removeEventListener("touchend", ye);
     };
   }, [G]);
-  const q = b(() => {
-    const n = window.matchMedia("(min-width: 768px)").matches, u = !m.current;
+  const q = h(() => {
+    const n = window.matchMedia("(min-width: 768px)").matches, u = !p.current;
     if (n) {
       j(u);
       return;
     }
     const v = u ? "outlet" : "drawer";
     N(v), K(v);
-  }, [K, N, j]), X = E(null);
+  }, [K, N, j]), X = O(null);
   X.current || (X.current = {
     toggleCollapse: () => q(),
     getIsCollapsed: () => {
       if (!window.matchMedia("(min-width: 768px)").matches) {
-        const u = i.current, v = p.current;
+        const u = i.current, v = m.current;
         if (u && v) {
           const I = u.scrollLeft, W = v.offsetLeft, B = Math.abs(I - W) < Math.abs(I - 0);
-          return B !== m.current && (m.current = B, V(B)), B;
+          return B !== p.current && (p.current = B, V(B)), B;
         }
       }
-      return m.current;
+      return p.current;
     },
     subscribeToCollapse: (n) => (k.current.add(n), () => {
       k.current.delete(n);
@@ -315,13 +315,13 @@ const Pt = be((t, r) => {
     toggleSidebar: () => {
       if (!x.current) return;
       if (window.matchMedia("(min-width: 768px)").matches) {
-        U(!h.current);
+        U(!b.current);
         return;
       }
       const n = S.current === "sidebar" ? "outlet" : "sidebar";
       N(n), K(n);
     },
-    getIsSidebarOpen: () => x.current ? window.matchMedia("(min-width: 768px)").matches ? !h.current : S.current === "sidebar" : !1,
+    getIsSidebarOpen: () => x.current ? window.matchMedia("(min-width: 768px)").matches ? !b.current : S.current === "sidebar" : !1,
     subscribeToSidebarOpen: (n) => (y.current.add(n), () => {
       y.current.delete(n);
     }),
@@ -353,7 +353,7 @@ const Pt = be((t, r) => {
           u.classList.add("disabled-dragopen-sidebar");
     }
   });
-  const O = X.current, _ = typeof r == "function" ? r(O) : r, g = yt.toArray(_);
+  const E = X.current, _ = typeof r == "function" ? r(E) : r, g = yt.toArray(_);
   let P = null, R = null, z = null;
   const Q = [];
   let ae = null, Z = null;
@@ -384,11 +384,11 @@ const Pt = be((t, r) => {
     }
     Q.push(n);
   });
-  const ve = !!R, we = R ?? (Q.length ? /* @__PURE__ */ e.jsx(Le, { children: Q }) : null), Ae = ve ? Q : [], de = ae ?? (!!ae ? /* @__PURE__ */ e.jsx(_e, { children: _, context: O, modal: l, closeOnOutsideClick: d }) : null), Te = z ?? (!!z ? /* @__PURE__ */ e.jsx(De, { children: z }) : null), Oe = !!Z, ee = Z, ue = me(() => ({
-    isCollapsed: m.current,
-    isSidebarOpen: !h.current
-  }), [m.current, h.current]);
-  return /* @__PURE__ */ e.jsx(st.Provider, { value: ue, children: /* @__PURE__ */ e.jsx(nt.Provider, { value: O, children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-container", ref: i, className: D(
+  const ve = !!R, we = R ?? (Q.length ? /* @__PURE__ */ e.jsx(Le, { children: Q }) : null), Ae = ve ? Q : [], de = ae ?? (!!ae ? /* @__PURE__ */ e.jsx(_e, { children: _, context: E, modal: l, closeOnOutsideClick: d }) : null), Te = z ?? (!!z ? /* @__PURE__ */ e.jsx(De, { children: z }) : null), Oe = !!Z, ee = Z, ue = me(() => ({
+    isCollapsed: p.current,
+    isSidebarOpen: !b.current
+  }), [p.current, b.current]);
+  return /* @__PURE__ */ e.jsx(st.Provider, { value: ue, children: /* @__PURE__ */ e.jsx(nt.Provider, { value: E, children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-container", ref: i, className: D(
     "w-full h-full max-h-dvh overflow-y-hidden",
     Oe ? "navigation-drawer-with-sidebar" : "navigation-drawer",
     c?.drawer ? "disabled-dragopen" : "",
@@ -400,7 +400,7 @@ const Pt = be((t, r) => {
         ref: f,
         className: D(
           "bg-neutral-default-default border-r border-neutral-strong-default h-dvh md:h-screen p-4 overflow-hidden drawer flex flex-col gap-4",
-          m.current ? "collapsed" : "expanded",
+          p.current ? "collapsed" : "expanded",
           s
         ),
         children: [
@@ -418,7 +418,7 @@ const Pt = be((t, r) => {
         ]
       }
     ),
-    de && ke(de) ? qe.cloneElement(de, { ref: p, modal: l, closeOnOutsideClick: d }) : de,
+    de && ke(de) ? qe.cloneElement(de, { ref: m, modal: l, closeOnOutsideClick: d }) : de,
     ee && ke(ee) ? qe.cloneElement(ee, {
       ref: x,
       className: D("sidebar", ee.props?.className, o)
@@ -535,20 +535,20 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
     hasSublinks: d,
     subLinksCollapsed: i,
     onToggleSublinks: f,
-    as: p = "div",
+    as: m = "div",
     onClick: x,
-    onAuxClick: m,
-    disabled: h = !1,
+    onAuxClick: p,
+    disabled: b = !1,
     tooltipText: S
   } = t, k = (V) => {
-    h || x?.(V);
+    b || x?.(V);
   }, y = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center flex-nowrap", children: [
-      s && (S ? /* @__PURE__ */ e.jsx(Dt, { title: S, disabled: h, children: /* @__PURE__ */ e.jsx(s, { size: 24, className: Ie({ disabled: h, isSelected: l }) }) }) : /* @__PURE__ */ e.jsx(s, { size: 24, className: Ie({ disabled: h, isSelected: l }) })),
-      /* @__PURE__ */ e.jsx("label", { className: Ut({ disabled: h, isSelected: l }), children: r })
+      s && (S ? /* @__PURE__ */ e.jsx(Dt, { title: S, disabled: b, children: /* @__PURE__ */ e.jsx(s, { size: 24, className: Ie({ disabled: b, isSelected: l }) }) }) : /* @__PURE__ */ e.jsx(s, { size: 24, className: Ie({ disabled: b, isSelected: l }) })),
+      /* @__PURE__ */ e.jsx("label", { className: Ut({ disabled: b, isSelected: l }), children: r })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 items-center", children: [
-      o && o ? /* @__PURE__ */ e.jsx(Qe, { count: o, maxCount: 9, className: "badge", disabled: h }) : "",
+      o && o ? /* @__PURE__ */ e.jsx(Qe, { count: o, maxCount: 9, className: "badge", disabled: b }) : "",
       d && /* @__PURE__ */ e.jsx(
         "div",
         {
@@ -562,10 +562,10 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
           children: /* @__PURE__ */ e.jsx(
             "button",
             {
-              disabled: h,
+              disabled: b,
               type: "button",
               onClick: f,
-              className: D("absolute cursor-pointer hover:text-primary-default-hover top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-2 z-100 select-none", Ie({ disabled: h, isSelected: l }), h && "pointer-events-none"),
+              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", Ie({ disabled: b, isSelected: l }), b && "pointer-events-none"),
               children: /* @__PURE__ */ e.jsx(At, {})
             }
           )
@@ -577,18 +577,18 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
     "h-12 flex-1 flex items-center p-3 rounded-lg justify-between w-full",
     "transition-all duration-300",
     Ft,
-    zt({ isSelected: l, disabled: h }),
+    zt({ isSelected: l, disabled: b }),
     c
   );
-  if (p === "a") {
+  if (m === "a") {
     const V = {
       onClick: k,
-      onAuxClick: m,
+      onAuxClick: p,
       className: C
     };
     return /* @__PURE__ */ e.jsx("a", { ...V, children: y });
   }
-  if (p === "button") {
+  if (m === "button") {
     const V = {
       onClick: k,
       type: "button",
@@ -604,7 +604,7 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
 }, Ue = M(Wt);
 Ue.displayName = "NavigationDrawerItemBase";
 const Ht = (t) => {
-  const { title: r, icon: s, count: o, className: c, isActive: l, onClick: d, isView: i = !0, disabled: f, tooltipText: p } = t;
+  const { title: r, icon: s, count: o, className: c, isActive: l, onClick: d, isView: i = !0, disabled: f, tooltipText: m } = t;
   return i ? /* @__PURE__ */ e.jsx(
     Ue,
     {
@@ -616,7 +616,7 @@ const Ht = (t) => {
       isSelected: l,
       onClick: d,
       disabled: f,
-      tooltipText: p
+      tooltipText: m
     }
   ) : null;
 }, it = M(Ht);
@@ -625,29 +625,29 @@ const Vt = ({ actions: t, activeActionId: r, onActionClick: s, className: o }) =
   top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
   bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
 }, children: t?.map((c) => {
-  const { id: l, onClick: d, isView: i = !0, payload: f, ...p } = c, x = l === r, m = () => {
+  const { id: l, onClick: d, isView: i = !0, payload: f, ...m } = c, x = l === r, p = () => {
     s?.(l, f), d?.();
   };
   return i ? /* @__PURE__ */ e.jsx(
     it,
     {
-      ...p,
+      ...m,
       id: l,
       isActive: x,
-      onClick: m
+      onClick: p
     },
     l
   ) : null;
 }) }), ct = M(Vt);
 ct.displayName = "NavigationDrawerActions";
 const qt = (t) => {
-  const { className: r, title: s, path: o, onClick: c, isSelected: l, parentPath: d } = t, i = b(() => {
+  const { className: r, title: s, path: o, onClick: c, isSelected: l, parentPath: d } = t, i = h(() => {
     c?.(o);
-  }, [o]), f = b(() => {
+  }, [o]), f = h(() => {
     if (o.startsWith("./")) {
       if (!d) return;
-      const p = d + o.slice(2);
-      window.open(p, "_blank");
+      const m = d + o.slice(2);
+      window.open(m, "_blank");
     } else
       window.open(o, "_blank");
   }, [o]);
@@ -674,14 +674,14 @@ const qt = (t) => {
 }, dt = M(qt);
 dt.displayName = "NavItemSecondary";
 const $t = be((t, r) => {
-  const [s, o] = J(!0), c = E(null), { path: l, title: d, icon: i, count: f, className: p, isSelected: x = !1, onClick: m, sublinks: h, toggleCollapse: S, getIsCollapsed: k, subscribeToCollapse: y, isView: C = !0, disabled: A, tooltipText: V } = t;
+  const [s, o] = J(!0), c = O(null), { path: l, title: d, icon: i, count: f, className: m, isSelected: x = !1, onClick: p, sublinks: b, toggleCollapse: S, getIsCollapsed: k, subscribeToCollapse: y, isView: C = !0, disabled: A, tooltipText: V } = t;
   se(() => y ? y((_) => {
     _ && o(!0);
   }) : void 0, [y]);
-  const $ = b(() => {
-    o((O) => !O);
-  }, []), j = b((O) => {
-    o(O);
+  const $ = h(() => {
+    o((E) => !E);
+  }, []), j = h((E) => {
+    o(E);
   }, []), U = {
     toggle: $,
     setIsCollapsed: j,
@@ -695,34 +695,34 @@ const $t = be((t, r) => {
     subscribeToCollapse: y
   };
   Re(r, () => U, [U, s, k, S]);
-  const N = i, K = b(() => {
-    const O = k?.() ?? !1;
-    if (h && h.length > 0 && O) {
+  const N = i, K = h(() => {
+    const E = k?.() ?? !1;
+    if (b && b.length > 0 && E) {
       j(!1), S?.();
       return;
     }
-    m?.(l);
-  }, [l, m, h, S, j, k]), G = b(() => {
+    p?.(l);
+  }, [l, p, b, S, j, k]), G = h(() => {
     window.open(l, "_blank");
   }, [l]), q = () => {
-    if (!h || A) return null;
-    if (t.subLinksRender && h)
-      return t.subLinksRender(h, U);
-    const O = b((_) => {
+    if (!b || A) return null;
+    if (t.subLinksRender && b)
+      return t.subLinksRender(b, U);
+    const E = h((_) => {
       if (_.startsWith("./")) {
         const g = l + _.slice(2);
-        m?.(g);
+        p?.(g);
       } else
-        m?.(_);
+        p?.(_);
     }, [l]);
     return se(() => {
       const _ = c.current;
       if (!_) return;
       const g = _.scrollHeight;
       _.style.setProperty("--sublinks-max-height", `${g}px`);
-    }, []), /* @__PURE__ */ e.jsx("div", { ref: c, className: `sublinks flex flex-col gap-1 ml-8 ${s ? "collapsed" : "expanded"}`, children: h.map((_) => /* @__PURE__ */ e.jsx(dt, { ..._, onClick: O, parentPath: l }, `${_.title}-${_.path}`)) });
-  }, X = (O) => {
-    O.stopPropagation(), O.preventDefault(), $();
+    }, []), /* @__PURE__ */ e.jsx("div", { ref: c, className: `sublinks flex flex-col gap-1 ml-8 ${s ? "collapsed" : "expanded"}`, children: b.map((_) => /* @__PURE__ */ e.jsx(dt, { ..._, onClick: E, parentPath: l }, `${_.title}-${_.path}`)) });
+  }, X = (E) => {
+    E.stopPropagation(), E.preventDefault(), $();
   };
   return C ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 ", children: [
     /* @__PURE__ */ e.jsx(
@@ -732,9 +732,9 @@ const $t = be((t, r) => {
         title: d,
         icon: N,
         count: f,
-        className: p,
+        className: m,
         isSelected: x,
-        hasSublinks: !!h,
+        hasSublinks: !!b,
         subLinksCollapsed: s,
         onToggleSublinks: X,
         onClick: K,
@@ -753,12 +753,12 @@ const Kt = ({ navlinks: t, handleNavigation: r, className: s, getIsCollapsed: o,
     top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
     bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
   }, children: t?.map((i, f) => {
-    const p = i.isSelected || i.path === d || (i.relatedPaths?.some((x) => d.startsWith(x)) ?? !1);
+    const m = i.isSelected || i.path === d || (i.relatedPaths?.some((x) => d.startsWith(x)) ?? !1);
     return /* @__PURE__ */ e.jsx(
       ut,
       {
         ...i,
-        isSelected: p,
+        isSelected: m,
         onClick: r,
         toggleCollapse: c,
         getIsCollapsed: o,
@@ -804,28 +804,28 @@ const Yt = (t) => {
   const { sessions: r, onSessionClick: s, secondarySlot: o, subImageUrlAccessor: c } = t;
   if (!r || r.length === 0)
     return null;
-  const l = (f) => {
-    s && s(f);
+  const l = (f, m) => {
+    s && m && s(f, m);
   }, d = (f) => {
     if (!c)
       return;
-    const p = f.metadata;
-    if (!p)
+    const m = f.metadata;
+    if (!m)
       return;
-    const x = je({ metadata: p }, c);
+    const x = je({ metadata: m }, c);
     if (x != null)
       return typeof x == "string" ? x : String(x);
-  }, i = b((f) => typeof o == "function" ? o(f) : o, [o]);
+  }, i = h((f) => typeof o == "function" ? o(f) : o, [o]);
   return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-2", children: r?.map((f) => {
-    const { auth_id: p } = f;
-    return /* @__PURE__ */ e.jsx(ie, { className: " shrink-0 h-max", children: /* @__PURE__ */ e.jsx(ie.Content, { onClick: () => l(f), className: "p-0 group-data-[expanded=true]/ticketcard:border-none", children: /* @__PURE__ */ e.jsx(
+    const { auth_id: m } = f;
+    return /* @__PURE__ */ e.jsx(ie, { className: " shrink-0 h-max", children: /* @__PURE__ */ e.jsx(ie.Content, { onClick: () => l(f, t.userOptionsControls), className: "p-0 group-data-[expanded=true]/ticketcard:border-none", children: /* @__PURE__ */ e.jsx(
       Ze,
       {
-        name: p.name,
+        name: m.name,
         avatarSize: "xxs",
         secondarySlot: i(f),
         subImageUrl: d(f),
-        imageUrl: p.profile_picture,
+        imageUrl: m.profile_picture,
         className: "pyrion-navigation-drawer-user-card"
       },
       f.token
@@ -841,18 +841,18 @@ const Yt = (t) => {
   onProfileClick: d,
   options: i,
   currentSystemId: f,
-  userOptionsControls: p,
+  userOptionsControls: m,
   mobileAppSwitcherControls: x
 }) => {
-  const { getIsCollapsed: m, toggleCollapse: h, subscribeToCollapse: S } = ce(), k = b(() => {
-    const y = m();
-    y ? (h(), p.current?.open()) : d?.(y);
-  }, [m, h, p, d]);
+  const { getIsCollapsed: p, toggleCollapse: b, subscribeToCollapse: S } = ce(), k = h(() => {
+    const y = p();
+    y ? (b(), m.current?.open()) : d?.(y);
+  }, [p, b, m, d]);
   return se(() => S((y) => {
-    y && (p.current?.close(), x.current?.close());
-  }), [S, p, x]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    y && (m.current?.close(), x.current?.close());
+  }), [S, m, x]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(re.Spacer, { className: "mb-3" }),
-    /* @__PURE__ */ e.jsxs(ie, { className: "", controls: p, children: [
+    /* @__PURE__ */ e.jsxs(ie, { className: "", controls: m, children: [
       /* @__PURE__ */ e.jsx(ie.Content, { onClick: k, children: /* @__PURE__ */ e.jsx(
         Ze,
         {
@@ -868,14 +868,15 @@ const Yt = (t) => {
       /* @__PURE__ */ e.jsxs(ie.Options, { className: "min-h-max flex flex-col gap-3 pl-3 mt-3 pt-2", children: [
         r && r.length > 0 && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-label-medium text-neutral-medium-default select-none", children: "Cambiar cuenta" }),
-          /* @__PURE__ */ e.jsx(xe, { className: "flex flex-col gap-2 max-h-[165px] flex-1", scrollbarProps: { hide: !0 }, children: /* @__PURE__ */ e.jsx(
+          /* @__PURE__ */ e.jsx(xe, { className: "flex flex-col gap-2 max-h-[165px] flex-1", scrollbarProps: { hide: !0 }, indicators: { bottom: { show: !0, type: "shadow", behavior: "scroll-on-hover" }, top: { show: !0, type: "shadow", behavior: "scroll-on-hover" } }, children: /* @__PURE__ */ e.jsx(
             Yt,
             {
               sessions: r,
               onSessionClick: c,
               secondarySlot: o,
               subImageUrlAccessor: i?.sessionCardOptions?.subImageUrlAccessor,
-              currentSystemId: f
+              currentSystemId: f,
+              userOptionsControls: m
             }
           ) })
         ] }),
@@ -942,7 +943,7 @@ const Jt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(ie,
     /* @__PURE__ */ e.jsx("div", {})
   ] })
 ] }), Pe = M(({ enabled_systems: t, onClick: r, currentSystemId: s }) => {
-  const o = b(() => {
+  const o = h(() => {
     if (t) {
       if (s) {
         const i = t.find((f) => f._id === s);
@@ -978,7 +979,7 @@ const Jt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(ie,
 }, (t, r) => t.enabled_systems === r.enabled_systems && t.onClick === r.onClick && t.currentSystemId === r.currentSystemId);
 Pe.displayName = "PyrionNavigationDrawer.SystemLogo";
 const ht = M(({ onSystemLogoClick: t, state: r, currentSystemId: s, tabs: o, mobileAppSwitcherControls: c }) => {
-  const { getIsCollapsed: l } = ce(), d = Je(), i = b(() => {
+  const { getIsCollapsed: l } = ce(), d = Je(), i = h(() => {
     if (t) {
       const f = l();
       t(f);
@@ -1018,34 +1019,34 @@ const Xe = ({ type: t }) => {
   ] }),
   /* @__PURE__ */ e.jsx(pe, { shape: "rounded", className: "w-20 h-3" })
 ] }), Qt = ({ onCloseClick: t, onMarkAllAsRead: r, notificationsListControls: s, scrollableControls: o }) => {
-  const [c, l] = J([]), [d, i] = J("NO_LEIDAS"), [f, p] = J({ isLoading: !1, type: "load_more" }), [x, m] = J({ hasError: !1 }), h = E(/* @__PURE__ */ new Set()), S = E(null), k = E(null), y = b((g, P = "top") => {
+  const [c, l] = J([]), [d, i] = J("NO_LEIDAS"), [f, m] = J({ isLoading: !1, type: "load_more" }), [x, p] = J({ hasError: !1 }), b = O(/* @__PURE__ */ new Set()), S = O(null), k = O(null), y = h((g, P = "top") => {
     l((R) => {
       const z = Array.isArray(g) ? P === "bottom" ? [...R, ...g] : [...g, ...R] : P === "bottom" ? [...R, g] : [g, ...R];
       return queueMicrotask(() => {
-        h.current.forEach((Q) => Q(z, z.length));
+        b.current.forEach((Q) => Q(z, z.length));
       }), z;
     });
-  }, []), C = b((g) => (h.current.add(g), () => {
-    h.current.delete(g);
-  }), []), A = b((g) => {
+  }, []), C = h((g) => (b.current.add(g), () => {
+    b.current.delete(g);
+  }), []), A = h((g) => {
     l((P) => {
       const R = Array.isArray(g) ? P.filter((z) => !g.includes(z._id)) : P.filter((z) => z._id !== g);
       return queueMicrotask(() => {
-        h.current.forEach((z) => z(R, R.length));
+        b.current.forEach((z) => z(R, R.length));
       }), R;
     });
-  }, []), V = b(() => {
+  }, []), V = h(() => {
     l([]), queueMicrotask(() => {
-      h.current.forEach((g) => g([], 0));
+      b.current.forEach((g) => g([], 0));
     });
-  }, []), $ = b((g) => {
+  }, []), $ = h((g) => {
     l(g), queueMicrotask(() => {
-      h.current.forEach((P) => P(g, g.length));
+      b.current.forEach((P) => P(g, g.length));
     });
-  }, []), j = b((g, P = "load_more") => {
-    p({ isLoading: g, type: P });
-  }, []), U = b((g, P) => {
-    m({ hasError: g, children: P });
+  }, []), j = h((g, P = "load_more") => {
+    m({ isLoading: g, type: P });
+  }, []), U = h((g, P) => {
+    p({ hasError: g, children: P });
   }, []);
   Re(s, () => ({
     addNewNotification: y,
@@ -1065,8 +1066,8 @@ const Xe = ({ type: t }) => {
       k.current.style.setProperty("height", `calc(100vh - ${g}px - 20px)`);
     }
   }, [S?.current]);
-  const G = c.filter((g) => !g.read).length, { isLoading: q, type: X } = f, { hasError: O, children: _ } = x;
-  return console.log("hasError", O), console.log("listenersRef", Array.from(h.current)), /* @__PURE__ */ e.jsx(
+  const G = c.filter((g) => !g.read).length, { isLoading: q, type: X } = f, { hasError: E, children: _ } = x;
+  return /* @__PURE__ */ e.jsx(
     "section",
     {
       className: "w-full md:w-[479px] bg-neutral-default-default flex flex-col border-l-0 md:border-l border-neutral-strong-default min-h-full  h-full max-h-full overflow-hidden",
@@ -1108,7 +1109,7 @@ const Xe = ({ type: t }) => {
               ] })
             }
           ),
-          r && K && d === "NO_LEIDAS" && !O && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end px-4", children: /* @__PURE__ */ e.jsx(he, { disabled: q, onClick: r, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) })
+          r && K && d === "NO_LEIDAS" && !E && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end px-4", children: /* @__PURE__ */ e.jsx(he, { disabled: q, onClick: r, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { ref: k, className: "", children: /* @__PURE__ */ e.jsxs(
           xe,
@@ -1127,8 +1128,8 @@ const Xe = ({ type: t }) => {
               isLoading: q
             },
             children: [
-              O && /* @__PURE__ */ e.jsx("div", { className: "w-full h-full grid place-items-center", children: typeof _ == "function" ? _() : _ }),
-              !O && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              E && /* @__PURE__ */ e.jsx("div", { className: "w-full h-full grid place-items-center", children: typeof _ == "function" ? _() : _ }),
+              !E && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                 q && X === "skeletons" ? /* @__PURE__ */ e.jsx(Xe, { type: X }) : K ? c?.filter((g) => d === "NO_LEIDAS" ? !g.read : g)?.map((g, P) => /* @__PURE__ */ e.jsx(Ot, { ...g, className: " border-b border-neutral-strong-default rounded-b-none last:border-b-0" }, P)) : /* @__PURE__ */ e.jsx("p", { className: "flex-1 grid place-items-center prometeo-fonts-headline-xsmall text-neutral-default-default text-center py-8 text-balance", children: "No tienes notificaciones nuevas por el momento" }),
                 q && X === "load_more" && /* @__PURE__ */ e.jsx(Xe, { type: X })
               ] })
@@ -1158,20 +1159,20 @@ const Xe = ({ type: t }) => {
   Re(d, () => ({
     setActiveSection: f
   }));
-  const p = () => {
+  const m = () => {
     t();
   };
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     i === "notifications" && !r?.notificationsDrawerOptions?.hide && /* @__PURE__ */ e.jsx(
       Qt,
       {
-        onCloseClick: p,
+        onCloseClick: m,
         onMarkAllAsRead: r?.notificationsDrawerOptions?.onMarkAllAsRead,
         notificationsListControls: c,
         scrollableControls: l
       }
     ),
-    i === "help" && s && !r?.helpSectionDrawerOptions?.hide && /* @__PURE__ */ e.jsx(Zt, { onCloseClick: p, children: typeof s == "function" ? s() : s })
+    i === "help" && s && !r?.helpSectionDrawerOptions?.hide && /* @__PURE__ */ e.jsx(Zt, { onCloseClick: m, children: typeof s == "function" ? s() : s })
   ] });
 }, bt = be(er);
 bt.displayName = "SidebarContent";
@@ -1202,7 +1203,7 @@ const rr = ({ 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;
 }, sr = (t) => {
-  const { children: r, currentAppSessions: s, resolveUserSecondarySlot: o, resolveSessionSecondarySlot: c, handleNavigation: l, allActions: d, tabs: i, navigationControlsRef: f, sidebarContentRef: p, initialSectionRef: x, userOptionsControls: m, mobileAppSwitcherControls: h, notificationsListControls: S, scrollableControls: k, outletRef: y, ...C } = t;
+  const { children: r, currentAppSessions: s, resolveUserSecondarySlot: o, resolveSessionSecondarySlot: c, handleNavigation: l, allActions: d, tabs: i, navigationControlsRef: f, sidebarContentRef: m, initialSectionRef: x, userOptionsControls: p, mobileAppSwitcherControls: b, notificationsListControls: S, scrollableControls: k, outletRef: y, ...C } = t;
   return /* @__PURE__ */ e.jsxs(re, { disableDragOpen: C.options?.disableDragOpen, outletRef: y, children: [
     /* @__PURE__ */ e.jsx(rr, { navigationControlsRef: f }),
     /* @__PURE__ */ e.jsx(re.Header, { className: "flex flex-col relative w-full select-none", children: /* @__PURE__ */ e.jsx(
@@ -1212,7 +1213,7 @@ const rr = ({ navigationControlsRef: t }) => {
         state: C.state,
         currentSystemId: C.currentSystemId,
         tabs: i,
-        mobileAppSwitcherControls: h
+        mobileAppSwitcherControls: b
       }
     ) }, "PL-Header"),
     /* @__PURE__ */ e.jsx(re.Content, { className: "overflow-hidden flex flex-col relative flex-1  md:w-auto", children: /* @__PURE__ */ e.jsx(
@@ -1236,8 +1237,8 @@ const rr = ({ navigationControlsRef: t }) => {
         onLogoutClick: C.onLogoutClick,
         options: C.options,
         currentSystemId: C.currentSystemId,
-        userOptionsControls: m,
-        mobileAppSwitcherControls: h,
+        userOptionsControls: p,
+        mobileAppSwitcherControls: b,
         onProfileClick: C.onProfileClick
       }
     ) }, "PL-Footer"),
@@ -1253,7 +1254,7 @@ const rr = ({ navigationControlsRef: t }) => {
           {
             options: C.options,
             helpSection: C.helpSection,
-            sidebarContentRef: p,
+            sidebarContentRef: m,
             initialSectionRef: x,
             notificationsListControls: S,
             scrollableControls: k
@@ -1269,8 +1270,8 @@ const rr = ({ navigationControlsRef: t }) => {
   for (const f of d) {
     if (!Object.prototype.hasOwnProperty.call(l, f))
       return !1;
-    const p = o[f], x = l[f];
-    if (p !== x)
+    const m = o[f], x = l[f];
+    if (m !== x)
       return !1;
   }
   return !0;
@@ -1283,14 +1284,14 @@ const wt = Me(null), Dr = () => {
   if (!t)
     throw new Error("usePyrionLayout debe usarse dentro de PyrionLayout");
   return t;
-}, Ar = ({ children: t, helpSection: r, state: s, links: o, onLinkClick: c, onNavigate: l, onLogoutClick: d, actions: i, activeActionId: f, onActionClick: p, tabsProps: x, currentSystemId: m, onSessionClick: h, onSystemLogoClick: S, onProfileClick: k, ...y }) => {
+}, Ar = ({ children: t, helpSection: r, state: s, links: o, onLinkClick: c, onNavigate: l, onLogoutClick: d, actions: i, activeActionId: f, onActionClick: m, tabsProps: x, currentSystemId: p, onSessionClick: b, onSystemLogoClick: S, onProfileClick: k, ...y }) => {
   const A = Object.assign({
     closeDrawerOnNavigate: !0,
     disableDragOpen: {
       sidebar: !0,
       drawer: !1
     }
-  }, y.options), V = kt(), $ = Je(), j = E(null), U = E(null), N = E({}), K = E(null), G = E("notifications"), q = E(null), X = E(null), O = E(null), [_, g] = J(0), [P, R] = J(!1), [z, Q] = J(null), ae = b((a) => {
+  }, y.options), V = kt(), $ = Je(), j = O(null), U = O(null), N = O({}), K = O(null), G = O("notifications"), q = O(null), X = O(null), E = O(null), [_, g] = J(0), [P, R] = J(!1), [z, Q] = J(null), ae = h((a) => {
     if (R(!1), c) {
       c(a);
       return;
@@ -1310,19 +1311,19 @@ const wt = Me(null), Dr = () => {
       mobile: Z,
       desktop: Z
     }
-  }, Ae = b((a) => {
+  }, Ae = h((a) => {
     const w = $ ? "mobile" : "desktop", F = s.enabled_systems.find((T) => T.name === a)?.url;
     we.system[w](F), x?.onTabClick?.(a);
-  }, [$, s.enabled_systems, x?.onTabClick]), We = b((a) => {
+  }, [$, s.enabled_systems, x?.onTabClick]), We = h((a) => {
     const w = $ ? "mobile" : "desktop", F = s.company.products?.find((T) => T.name === a)?.domain;
     we.product[w](F), x?.onTabClick?.(a);
-  }, [$, s.company.products, x?.onTabClick]), de = b((a, w) => {
+  }, [$, s.company.products, x?.onTabClick]), de = h((a, w) => {
     if (w) {
       w(a), x?.onTabClick?.(a);
       return;
     } else
       x?.onTabClick?.(a);
-  }, [x?.onTabClick]), He = b(() => {
+  }, [x?.onTabClick]), He = h(() => {
     const a = {};
     s.enabled_systems.forEach((F) => {
       a[F.url] = F.name;
@@ -1335,7 +1336,7 @@ const wt = Me(null), Dr = () => {
   }, [s.enabled_systems]), Te = x?.currentTabName || He(), Oe = me(
     () => s.sessions || [],
     [s.sessions]
-  ), ee = (a) => a == null ? null : typeof a == "string" || typeof a == "number" || typeof a == "boolean" ? String(a) : ke(a) ? a : typeof a == "object" ? JSON.stringify(a) : null, ue = b((a, w) => {
+  ), ee = (a) => a == null ? null : typeof a == "string" || typeof a == "number" || typeof a == "boolean" ? String(a) : ke(a) ? a : typeof a == "object" ? JSON.stringify(a) : null, ue = h((a, w) => {
     if (!a) return null;
     if (Array.isArray(a)) {
       const F = a?.[0] ? je(w, a[0]) : null, T = a?.[1] ? je(w, a[1]) : null, ne = ee(F), Ve = ee(T);
@@ -1352,22 +1353,22 @@ const wt = Me(null), Dr = () => {
       return ee(F);
     }
     return typeof a == "function" ? ee(a(w)) : null;
-  }, []), n = b(
+  }, []), n = h(
     (a) => {
       const w = A?.userCardOptions?.secondarySlot;
       if (!w) return null;
-      const F = s.enabled_systems?.find((ne) => ne._id === m), T = { company: s.company, user: s.user, system: F, metadata: a };
+      const F = s.enabled_systems?.find((ne) => ne._id === p), T = { company: s.company, user: s.user, system: F, metadata: a };
       return ue(w, T);
     },
-    [m, A?.userCardOptions?.secondarySlot, ue, s.company, s.enabled_systems, s.user]
-  ), u = b(
+    [p, A?.userCardOptions?.secondarySlot, ue, s.company, s.enabled_systems, s.user]
+  ), u = h(
     (a) => {
       const w = A?.sessionCardOptions?.secondarySlot || A?.userCardOptions?.secondarySlot;
       if (!w) return null;
-      const F = s.enabled_systems?.find((ne) => ne._id === m), T = { company: s.company, user: a.auth_id, metadata: a?.metadata, system: F };
+      const F = s.enabled_systems?.find((ne) => ne._id === p), T = { company: s.company, user: a.auth_id, metadata: a?.metadata, system: F };
       return ue(w, T);
     },
-    [m, A?.sessionCardOptions?.secondarySlot, A?.userCardOptions?.secondarySlot, ue, s.company, s.enabled_systems]
+    [p, A?.sessionCardOptions?.secondarySlot, A?.userCardOptions?.secondarySlot, ue, s.company, s.enabled_systems]
   ), v = me(() => {
     const a = [];
     return N.current.openNotifications = () => {
@@ -1391,7 +1392,7 @@ const wt = Me(null), Dr = () => {
       icon: _t,
       onClick: A.configurationActionOptions?.onClick
     }), a;
-  }, [A, r, p, _]), I = me(
+  }, [A, r, m, _]), I = me(
     () => [...v, ...i || []],
     [v, i]
   ), W = me(() => {
@@ -1409,34 +1410,34 @@ const wt = Me(null), Dr = () => {
       onClick: We
     })) || [];
     return [...a, ...w, ...F];
-  }, [s.enabled_systems, s.company.products, x?.customTabs]), B = b((a, w) => {
+  }, [s.enabled_systems, s.company.products, x?.customTabs]), B = h((a, w) => {
     j.current?.addNewNotification ? j.current.addNewNotification(a, w) : console.warn("Notifications controls not ready yet");
-  }, []), te = b((a) => j.current?.subscribeToUpdates ? j.current.subscribeToUpdates(a) : (console.warn("Notifications controls not ready yet"), () => {
-  }), []), oe = b((a) => {
+  }, []), te = h((a) => j.current?.subscribeToUpdates ? j.current.subscribeToUpdates(a) : (console.warn("Notifications controls not ready yet"), () => {
+  }), []), oe = h((a) => {
     j.current?.removeNotification ? j.current.removeNotification(a) : console.warn("Notifications controls not ready yet");
-  }, []), fe = b(() => {
+  }, []), fe = h(() => {
     j.current?.removeAllNotifications ? j.current.removeAllNotifications() : console.warn("Notifications controls not ready yet");
-  }, []), Ne = b((a) => {
+  }, []), Ne = h((a) => {
     j.current?.setNotifications ? j.current.setNotifications(a) : console.warn("Notifications controls not ready yet");
-  }, []), ye = b((a, w) => U.current?.subscribeToScrollTarget ? U.current.subscribeToScrollTarget(a, w) : (console.warn("Scrollable controls not ready yet"), () => {
-  }), []), L = b((a, w = "load_more") => {
+  }, []), ye = h((a, w) => U.current?.subscribeToScrollTarget ? U.current.subscribeToScrollTarget(a, w) : (console.warn("Scrollable controls not ready yet"), () => {
+  }), []), L = h((a, w = "load_more") => {
     j.current?.setLoading ? j.current.setLoading(a, w) : console.warn("Notifications controls not ready yet");
-  }, []), Y = b((a, w) => {
+  }, []), Y = h((a, w) => {
     j.current?.setError ? j.current.setError(a, w) : console.warn("Notifications controls not ready yet");
-  }, []), H = b(() => {
+  }, []), H = h(() => {
     q.current?.open();
-  }, []), le = b(() => {
+  }, []), le = h(() => {
     q.current?.close();
-  }, []), Ee = b(() => {
+  }, []), Ee = h(() => {
     q.current?.toggle();
-  }, []), Ce = b((a, w, F) => {
+  }, []), Ce = h((a, w, F) => {
     const T = /* @__PURE__ */ e.jsxs("div", { className: D(" bg-black/60 z-200 inset-0 h-full w-full grid place-items-center text-neutral-default-default", w ? "fixed" : "sticky"), children: [
       !F && /* @__PURE__ */ e.jsx(he, { label: "", icon: /* @__PURE__ */ e.jsx(Fe, {}), onClick: () => R(!1), variant: "text", className: "absolute top-0 right-0", size: "small", color: "secondary" }),
       typeof a == "function" ? a() : a
     ] });
     let ne;
-    return w ? ne = $e(T, document.body, `modal-error-${Date.now()}`) : O.current && (ne = $e(T, O.current, `modal-error-${Date.now()}`)), Q(ne), R(!0), T;
-  }, [O]), Se = b(() => {
+    return w ? ne = $e(T, document.body, `modal-error-${Date.now()}`) : E.current && (ne = $e(T, E.current, `modal-error-${Date.now()}`)), Q(ne), R(!0), T;
+  }, [E]), Se = h(() => {
     R(!1);
   }, []);
   return N.current.addNewNotification = B, N.current.subscribeToNotificationsUpdates = te, N.current.removeNotification = oe, N.current.removeAllNotifications = fe, N.current.setNotifications = Ne, N.current.setNotificationsError = Y, N.current.setNotificationsLoading = L, N.current.subscribeToNotificationsScroll = ye, N.current.showErrorModal = Ce, N.current.closeErrorModal = Se, N.current.userCardExpand = H, N.current.userCardCollapse = le, N.current.userCardToggle = Ee, se(() => {
@@ -1453,7 +1454,7 @@ const wt = Me(null), Dr = () => {
           tabs: W,
           activeColor: "var(--neutral-900)",
           currentTabName: Te,
-          currentSystemId: m,
+          currentSystemId: p,
           isLoading: !s.enabled_systems || s.enabled_systems.length === 0
         }
       ),
@@ -1464,15 +1465,15 @@ const wt = Me(null), Dr = () => {
           handleNavigation: ae,
           allActions: I,
           activeActionId: f,
-          onActionClick: p,
+          onActionClick: m,
           state: s,
           currentAppSessions: Oe,
           resolveUserSecondarySlot: n,
           resolveSessionSecondarySlot: u,
-          onSessionClick: h,
+          onSessionClick: b,
           onLogoutClick: d,
           options: A,
-          currentSystemId: m,
+          currentSystemId: p,
           userOptionsControls: q,
           mobileAppSwitcherControls: X,
           onSystemLogoClick: S,
@@ -1483,7 +1484,7 @@ const wt = Me(null), Dr = () => {
           navigationControlsRef: N,
           notificationsListControls: j,
           scrollableControls: U,
-          outletRef: O,
+          outletRef: E,
           onProfileClick: k,
           children: t
         }