npm - prometeo-design-system - Versions diffs - 6.3.4 → 6.3.5 - Mend

prometeo-design-system 6.3.4 → 6.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/PyrionLayout.es.js +561 -527
package/dist/{Scrollable-BhxCCeiu.js → Scrollable-CG3uKuW_.js} +55 -52
package/dist/Scrollable.es.js +1 -1
package/dist/components/Scrollable/useScrollable.d.ts +1 -0
package/dist/prometeo-design-system.es.js +1 -1
package/dist/useScrollable-BFxxUfPe.js +487 -0
package/package.json +1 -1
package/dist/useScrollable-CSfF1lbV.js +0 -483

package/dist/PyrionLayout.es.js CHANGED Viewed

@@ -1,22 +1,22 @@
 import { j as e } from "./jsx-runtime-GkKLlHH4.js";
 import { u as Lt, g as Tt } from "./useDevice-vwn4GLwK.js";
-import { c as D } from "./cn-B6yFEsav.js";
+import { c as L } from "./cn-B6yFEsav.js";
 import { g as be } from "./utils-X4-h3cum.js";
-import je, { forwardRef as le, useState as R, useRef as I, useEffect as Y, memo as O, useContext as ze, createContext as Le, useCallback as x, Children as It, isValidElement as ce, useMemo as re, useLayoutEffect as De, useImperativeHandle as Te, use as Ot } from "react";
+import je, { forwardRef as le, useState as U, useRef as I, useEffect as J, memo as _, useContext as ze, createContext as Le, useCallback as b, Children as It, isValidElement as ce, useMemo as re, useLayoutEffect as De, useImperativeHandle as Te, use as Ot } from "react";
 import { createPortal as Be } from "react-dom";
 import { CloseNavBarDesktop as Et } from "./Icons/CloseNavBarDesktop.es.js";
 import { c as Ie } from "./index-BOQuZ0gG.js";
 import { B as We } from "./badge-CWYEc-DA.js";
 import _t from "./PlainTooltip.es.js";
 import { CrevronLeft as Pt } from "./Icons/CrevronLeft.es.js";
-import { S as Oe, a as Mt } from "./Scrollable-BhxCCeiu.js";
+import { S as Oe, a as Mt } from "./Scrollable-CG3uKuW_.js";
 import { useLocation as Ve } from "react-router";
 import de from "./TicketCard.es.js";
 import He from "./UserCard.es.js";
 import Ee from "./Button.es.js";
 import { Logout as Rt } from "./Icons/Logout.es.js";
 import ae from "./Skeleton.es.js";
-import { u as Bt } from "./useScrollable-CSfF1lbV.js";
+import { u as Bt } from "./useScrollable-BFxxUfPe.js";
 import $e from "./IconButton.es.js";
 import { Help as qe } from "./Icons/Help.es.js";
 import { Close as _e } from "./Icons/Close.es.js";
@@ -25,105 +25,105 @@ import { T as Ut, a as zt } from "./TabLinks-DnoWdrdk.js";
 import { Notifications as Ke } from "./Icons/Notifications.es.js";
 import { Settings as Wt } from "./Icons/Settings.es.js";
 const Vt = le((t, r) => {
-  const [n, a] = R(t?.currentTabName || t.tabs[0]?.name), m = I(null), { tabs: l = [], className: d, activeColor: h = "var(--neutral-900)", currentSystemId: i, isLoading: f = !1 } = t;
-  Y(() => {
-    m.current?.style.setProperty("--tab-bg", h);
-  }, [h]);
-  const w = l.find((p) => p?.id === i || p?.name === t?.currentTabName) || l.find((p) => p?.name === n);
+  const [n, a] = U(t?.currentTabName || t.tabs[0]?.name), m = I(null), { tabs: l = [], className: c, activeColor: p = "var(--neutral-900)", currentSystemId: i, isLoading: f = !1 } = t;
+  J(() => {
+    m.current?.style.setProperty("--tab-bg", p);
+  }, [p]);
+  const w = l.find((d) => d?.id === i || d?.name === t?.currentTabName) || l.find((d) => d?.name === n);
   return /* @__PURE__ */ e.jsx(
     "div",
     {
       ref: r,
-      className: D(
+      className: L(
         "select-none",
         "flex flex-col gap-2",
         "bg-neutral-strong-default",
         "h-full w-14 max-w-14 pl-[6px] py-6",
         "border-r border-neutral-default-default",
-        d
+        c
       ),
       children: (f ? Array(3).fill(null) : l).map(
-        (p, b) => {
+        (d, h) => {
           if (f) return /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: D(
+              className: L(
                 "bg-[(--tab-bg)]",
                 "h-12 w-[50px] z-20",
                 "flex items-center pl-[6px] ",
                 "rounded-l-[8px]",
                 "tabswitch-element relative",
-                b === 0 && "active"
+                h === 0 && "active"
               ),
-              children: /* @__PURE__ */ e.jsx("div", { className: D(
+              children: /* @__PURE__ */ e.jsx("div", { className: L(
                 "size-8 rounded-[4px]",
                 "grid place-items-center",
                 "tab-thumbnail-icon",
                 "bg-transparent text-neutral-default-default",
-                p?.className
+                d?.className
               ), children: /* @__PURE__ */ e.jsx(ae, { shape: "rounded", className: "w-full h-full" }) })
             }
           );
-          const S = p?.name === w?.name, j = typeof p?.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: p?.thumbnail, alt: p?.description, className: "aspect-square object-contain rounded", draggable: !1 }) : p?.thumbnail, u = () => {
-            p.disabled || (a(p?.name), p.onClick && p.onClick(p?.name));
+          const C = d?.name === w?.name, j = typeof d?.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: d?.thumbnail, alt: d?.description, className: "aspect-square object-contain rounded", draggable: !1 }) : d?.thumbnail, u = () => {
+            d.disabled || (a(d?.name), d.onClick && d.onClick(d?.name));
           };
           return /* @__PURE__ */ e.jsx(
             "div",
             {
-              className: D(
+              className: L(
                 "bg-[(--tab-bg)]",
                 "h-12 w-[50px] z-20",
                 "flex items-center pl-[6px] ",
                 "rounded-l-[8px]",
                 "tabswitch-element relative",
-                S && "active"
+                C && "active"
               ),
               onClick: u,
               ref: m,
-              children: /* @__PURE__ */ e.jsx("div", { className: D(
+              children: /* @__PURE__ */ e.jsx("div", { className: L(
                 "size-8 rounded-[4px]",
                 "grid place-items-center",
                 "tab-thumbnail-icon",
                 "bg-transparent text-neutral-default-default",
-                p?.className
+                d?.className
               ), children: j })
             },
-            p?.name
+            d?.name
           );
         }
       )
     }
   );
-}), Je = O(le(({ children: t, className: r, context: n, modal: a = !1, closeOnOverlayClick: m = !1, unmountChildrenOnClose: l = !0 }, d) => {
-  const h = ue(t, n), i = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: f } = Ht(), { closeSidebar: w } = se(), [p, b] = R(() => l ? f : !0), [S, j] = R(!1);
-  return Y(() => {
+}), Je = _(le(({ children: t, className: r, context: n, modal: a = !1, closeOnOverlayClick: m = !1, unmountChildrenOnClose: l = !0 }, c) => {
+  const p = ue(t, n), i = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: f } = Ht(), { closeSidebar: w } = se(), [d, h] = U(() => l ? f : !0), [C, j] = U(!1);
+  return J(() => {
     l && n?.subscribeToSidebarOpen((u) => {
-      u ? (j(!1), b(!0)) : j(!0);
+      u ? (j(!1), h(!0)) : j(!0);
     });
-  }, [l]), Y(() => {
-    const u = d && typeof d == "object" && "current" in d ? d.current : null;
+  }, [l]), J(() => {
+    const u = c && typeof c == "object" && "current" in c ? c.current : null;
     if (!u) return;
-    const C = () => {
-      S && (b(!1), j(!1));
+    const y = () => {
+      C && (h(!1), j(!1));
     };
-    return u.addEventListener("transitionend", C), () => u.removeEventListener("transitionend", C);
-  }, [S]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    return u.addEventListener("transitionend", y), () => u.removeEventListener("transitionend", y);
+  }, [C]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     a && i && /* @__PURE__ */ e.jsx(
       "div",
       {
-        className: D("navigation-drawer-sidebar-overlay"),
+        className: L("navigation-drawer-sidebar-overlay"),
         onClick: (u) => {
           u.preventDefault(), u.stopPropagation(), m && w?.();
         },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { ref: d, className: D("sidebar collapsed", "h-full overflow-auto", r), "aria-modal": a || void 0, children: /* @__PURE__ */ e.jsxs("div", { className: D("navigation-drawer-sidebar-inner h-full max-h-full! overflow-hidden!"), children: [
+    /* @__PURE__ */ e.jsx("div", { ref: c, className: L("sidebar collapsed", "h-full overflow-auto", r), "aria-modal": a || void 0, children: /* @__PURE__ */ e.jsxs("div", { className: L("navigation-drawer-sidebar-inner h-full max-h-full! overflow-hidden!"), children: [
       /* @__PURE__ */ e.jsx("div", { className: "secure-click-margin hidden" }),
-      p && h
+      d && p
     ] }) })
   ] });
-})), Pe = O(le(({ children: t }, r) => /* @__PURE__ */ e.jsx("div", { ref: r, className: "h-full w-max top-0 left-0 z-50", children: t })));
+})), Pe = _(le(({ children: t }, r) => /* @__PURE__ */ e.jsx("div", { ref: r, className: "h-full w-max top-0 left-0 z-50", children: t })));
 Pe.displayName = "LeftSlot";
 const Ge = Le(null), Ye = Le(null), Ht = () => {
   const t = ze(Ge);
@@ -147,94 +147,94 @@ const Ge = Le(null), Ye = Le(null), Ht = () => {
   desktop: !1,
   mobile: !0
 }, Gt = (t) => {
-  const { children: r, classNameDrawer: n, classNameSidebar: a, disableDragOpen: m, modal: l = !0, closeOnOutsideClick: d = !0 } = t, h = I(null), i = I(null), f = I(null), w = t.outletRef ?? I(null), p = I(null), b = I(qt($t(), t.defaultCollapsedState ?? Jt)), S = I(!1), j = I("drawer"), u = I(/* @__PURE__ */ new Set()), C = I(/* @__PURE__ */ new Set()), v = x((o) => {
-    const g = f.current;
-    g && (g.classList.toggle("collapsed", o), g.classList.toggle("expanded", !o));
-  }, []), A = x((o) => {
-    const g = p.current;
-    if (!g) return;
-    g.classList.toggle("collapsed", o), g.classList.toggle("expanded", !o);
-    const L = h.current;
-    L && (L.classList.toggle("sidebar-collapsed", o), L.classList.toggle("sidebar-expanded", !o));
-  }, []), c = x(
-    (o, { notify: g = !0 } = {}) => {
-      const L = b.current !== o;
-      b.current = o, Kt(o), v(o), g && L && u.current.forEach((E) => E(o));
+  const { children: r, classNameDrawer: n, classNameSidebar: a, disableDragOpen: m, modal: l = !0, closeOnOutsideClick: c = !0 } = t, p = I(null), i = I(null), f = I(null), w = t.outletRef ?? I(null), d = I(null), h = I(qt($t(), t.defaultCollapsedState ?? Jt)), C = I(!1), j = I("drawer"), u = I(/* @__PURE__ */ new Set()), y = I(/* @__PURE__ */ new Set()), x = b((o) => {
+    const v = f.current;
+    v && (v.classList.toggle("collapsed", o), v.classList.toggle("expanded", !o));
+  }, []), k = b((o) => {
+    const v = d.current;
+    if (!v) return;
+    v.classList.toggle("collapsed", o), v.classList.toggle("expanded", !o);
+    const O = p.current;
+    O && (O.classList.toggle("sidebar-collapsed", o), O.classList.toggle("sidebar-expanded", !o));
+  }, []), g = b(
+    (o, { notify: v = !0 } = {}) => {
+      const O = h.current !== o;
+      h.current = o, Kt(o), x(o), v && O && u.current.forEach((M) => M(o));
     },
-    [v]
-  ), P = x(
-    (o, { notify: g = !0 } = {}) => {
-      const L = S.current !== o;
-      if (S.current = o, A(o), g && L) {
-        const E = !o;
-        C.current.forEach((J) => J(E));
+    [x]
+  ), R = b(
+    (o, { notify: v = !0 } = {}) => {
+      const O = C.current !== o;
+      if (C.current = o, k(o), v && O) {
+        const M = !o;
+        y.current.forEach((Q) => Q(M));
       }
     },
-    [A]
-  ), N = x(
-    (o, { notify: g = !0 } = {}) => {
-      const L = j.current, E = L !== o;
-      j.current = o, window.matchMedia("(min-width: 768px)").matches || c(o !== "drawer", { notify: g });
-      const J = L === "sidebar", G = o === "sidebar";
-      g && E && J !== G && C.current.forEach((Se) => Se(G)), P(o !== "sidebar", { notify: g }), c(o !== "drawer", { notify: g });
+    [k]
+  ), N = b(
+    (o, { notify: v = !0 } = {}) => {
+      const O = j.current, M = O !== o;
+      j.current = o, window.matchMedia("(min-width: 768px)").matches || g(o !== "drawer", { notify: v });
+      const Q = O === "sidebar", X = o === "sidebar";
+      v && M && Q !== X && y.current.forEach((Se) => Se(X)), R(o !== "sidebar", { notify: v }), g(o !== "drawer", { notify: v });
     },
-    [c, P]
-  ), B = x(() => {
-    const o = window.matchMedia("(min-width: 768px)").matches, g = !b.current;
+    [g, R]
+  ), D = b(() => {
+    const o = window.matchMedia("(min-width: 768px)").matches, v = !h.current;
     if (o) {
-      c(g);
+      g(v);
       return;
     }
-    N(g ? "outlet" : "drawer");
-  }, [N, c]), H = x((o) => {
-    const g = {
+    N(v ? "outlet" : "drawer");
+  }, [N, g]), V = b((o) => {
+    const v = {
       closeIfMobile: !0,
       closeIfDesktop: !0
-    }, { closeIfMobile: L, closeIfDesktop: E } = { ...g, ...o };
+    }, { closeIfMobile: O, closeIfDesktop: M } = { ...v, ...o };
     if (window.matchMedia("(min-width: 768px)").matches) {
-      E && c(!0);
+      M && g(!0);
       return;
     }
-    if (L) {
+    if (O) {
       N("outlet");
       return;
     }
-  }, [, N, c]), $ = x((o) => {
-    const g = {
+  }, [, N, g]), z = b((o) => {
+    const v = {
       openIfMobile: !0,
       openIfDesktop: !0
-    }, { openIfMobile: L, openIfDesktop: E } = { ...g, ...o };
-    if (window.matchMedia("(min-width: 768px)").matches && E) {
-      E && c(!1);
+    }, { openIfMobile: O, openIfDesktop: M } = { ...v, ...o };
+    if (window.matchMedia("(min-width: 768px)").matches && M) {
+      M && g(!1);
       return;
     }
-    if (L) {
+    if (O) {
       N("drawer");
       return;
     }
-  }, [N, c]), q = I(null);
-  q.current || (q.current = {
-    toggleCollapse: () => B(),
-    toggleDrawer: () => B(),
-    closeDrawer: (o) => H(o),
-    openDrawer: (o) => $(o),
+  }, [N, g]), $ = I(null);
+  $.current || ($.current = {
+    toggleCollapse: () => D(),
+    toggleDrawer: () => D(),
+    closeDrawer: (o) => V(o),
+    openDrawer: (o) => z(o),
     getIsCollapsed: () => {
       if (!window.matchMedia("(min-width: 768px)").matches) {
-        const g = h.current, L = w.current;
-        if (g && L) {
-          const E = g.scrollLeft, J = L.offsetLeft, G = Math.abs(E - J) < Math.abs(E);
-          return G !== b.current && (b.current = G, v(G)), G;
+        const v = p.current, O = w.current;
+        if (v && O) {
+          const M = v.scrollLeft, Q = O.offsetLeft, X = Math.abs(M - Q) < Math.abs(M);
+          return X !== h.current && (h.current = X, x(X)), X;
         }
       }
-      return b.current;
+      return h.current;
     },
     subscribeToCollapse: (o) => (u.current.add(o), () => {
       u.current.delete(o);
     }),
     openSidebar: () => {
-      if (p.current) {
+      if (d.current) {
         if (window.matchMedia("(min-width: 768px)").matches) {
-          P(!1);
+          R(!1);
           return;
         }
         N("sidebar");
@@ -242,101 +242,101 @@ const Ge = Le(null), Ye = Le(null), Ht = () => {
     },
     closeSidebar: (o) => {
       if (window.matchMedia("(min-width: 768px)").matches) {
-        P(!0), o?.();
+        R(!0), o?.();
         return;
       }
       N("outlet"), o?.();
     },
     toggleSidebar: (o) => {
-      if (!p.current) return;
+      if (!d.current) return;
       if (window.matchMedia("(min-width: 768px)").matches) {
-        P(!S.current);
+        R(!C.current);
         return;
       }
-      const g = j.current === "sidebar" ? "outlet" : "sidebar";
-      N(g), o?.(S.current ? "closed" : "open");
+      const v = j.current === "sidebar" ? "outlet" : "sidebar";
+      N(v), o?.(C.current ? "closed" : "open");
     },
-    getIsSidebarOpen: () => p.current ? window.matchMedia("(min-width: 768px)").matches ? !S.current : j.current === "sidebar" : !1,
-    subscribeToSidebarOpen: (o) => (C.current.add(o), () => {
-      C.current.delete(o);
+    getIsSidebarOpen: () => d.current ? window.matchMedia("(min-width: 768px)").matches ? !C.current : j.current === "sidebar" : !1,
+    subscribeToSidebarOpen: (o) => (y.current.add(o), () => {
+      y.current.delete(o);
     }),
     setDrawerDragEnabled: (o) => {
-      const g = h.current;
-      if (!g) return;
-      const L = g.scrollLeft;
+      const v = p.current;
+      if (!v) return;
+      const O = v.scrollLeft;
       if (o) {
-        const E = g.style.scrollBehavior;
-        g.style.scrollBehavior = "auto", g.classList.remove("disabled-dragopen"), requestAnimationFrame(() => {
-          g.scrollLeft = L, requestAnimationFrame(() => {
-            g.style.scrollBehavior = E;
+        const M = v.style.scrollBehavior;
+        v.style.scrollBehavior = "auto", v.classList.remove("disabled-dragopen"), requestAnimationFrame(() => {
+          v.scrollLeft = O, requestAnimationFrame(() => {
+            v.style.scrollBehavior = M;
           });
         });
       } else
-        g.classList.add("disabled-dragopen");
+        v.classList.add("disabled-dragopen");
     },
     setSidebarDragEnabled: (o) => {
-      const g = h.current;
-      if (g)
+      const v = p.current;
+      if (v)
         if (o) {
-          const L = g.scrollLeft, E = g.style.scrollBehavior;
-          g.style.scrollBehavior = "auto", g.classList.remove("disabled-dragopen-sidebar"), requestAnimationFrame(() => {
-            g.scrollLeft = L, requestAnimationFrame(() => {
-              g.style.scrollBehavior = E;
+          const O = v.scrollLeft, M = v.style.scrollBehavior;
+          v.style.scrollBehavior = "auto", v.classList.remove("disabled-dragopen-sidebar"), requestAnimationFrame(() => {
+            v.scrollLeft = O, requestAnimationFrame(() => {
+              v.style.scrollBehavior = M;
             });
           });
         } else
-          g.classList.add("disabled-dragopen-sidebar");
+          v.classList.add("disabled-dragopen-sidebar");
     }
   });
-  const F = q.current, Q = typeof r == "function" ? r(F) : r, M = It.toArray(Q);
-  let _ = null, U = null, X = null;
+  const B = $.current, W = typeof r == "function" ? r(B) : r, P = It.toArray(W);
+  let T = null, F = null, G = null;
   const Z = [];
-  let K = null, ne = null, W = null;
-  M.forEach((o) => {
+  let Y = null, ne = null, q = null;
+  P.forEach((o) => {
     if (!ce(o)) {
       Z.push(o);
       return;
     }
-    if (o.type === Me && !_) {
-      _ = o;
+    if (o.type === Me && !T) {
+      T = o;
       return;
     }
-    if (o.type === xe && !U) {
-      U = o;
+    if (o.type === xe && !F) {
+      F = o;
       return;
     }
-    if (o.type === ge && !X) {
-      X = o;
+    if (o.type === ge && !G) {
+      G = o;
       return;
     }
-    if (o.type === Ae && !K) {
-      K = o;
+    if (o.type === Ae && !Y) {
+      Y = o;
       return;
     }
     if (o.type === Je && !ne) {
       ne = o;
       return;
     }
-    if (o.type === Pe && !W) {
-      W = o;
+    if (o.type === Pe && !q) {
+      q = o;
       return;
     }
     Z.push(o);
   });
-  const we = !!U, fe = U ?? (Z.length ? /* @__PURE__ */ e.jsx(xe, { children: Z }) : null), me = we ? Z : [], ee = K ?? (!!K ? /* @__PURE__ */ e.jsx(Ae, { children: Q, context: F, modal: l, closeOnOutsideClick: d }) : null), pe = X ?? (!!X ? /* @__PURE__ */ e.jsx(ge, { children: X }) : null), ye = !!ne, te = ne, ie = !!W, oe = re(() => ({
-    isCollapsed: b.current,
-    isSidebarOpen: !S.current
-  }), [b.current, S.current]);
+  const we = !!F, fe = F ?? (Z.length ? /* @__PURE__ */ e.jsx(xe, { children: Z }) : null), me = we ? Z : [], ee = Y ?? (!!Y ? /* @__PURE__ */ e.jsx(Ae, { children: W, context: B, modal: l, closeOnOutsideClick: c }) : null), pe = G ?? (!!G ? /* @__PURE__ */ e.jsx(ge, { children: G }) : null), ye = !!ne, te = ne, ie = !!q, oe = re(() => ({
+    isCollapsed: h.current,
+    isSidebarOpen: !C.current
+  }), [h.current, C.current]);
   return De(() => {
     i.current && f.current?.style.setProperty("--left-slot-width", `${i.current?.offsetWidth}px`);
   }, [i.current]), De(() => {
     const o = f.current;
     if (!o) return;
-    const g = o.style.transition;
+    const v = o.style.transition;
     o.style.transition = "none";
-    const L = b.current;
-    o.className = o.className.replace(/\b(collapsed|expanded|has-left-slot)\b/g, "").trim(), o.classList.add(L ? "collapsed" : "expanded"), ie && o.classList.add("has-left-slot"), o.style.transition = g;
-  }, [ie]), /* @__PURE__ */ e.jsx(Ge.Provider, { value: oe, children: /* @__PURE__ */ e.jsx(Ye.Provider, { value: F, children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-container", ref: h, className: D(
+    const O = h.current;
+    o.className = o.className.replace(/\b(collapsed|expanded|has-left-slot)\b/g, "").trim(), o.classList.add(O ? "collapsed" : "expanded"), ie && o.classList.add("has-left-slot"), o.style.transition = v;
+  }, [ie]), /* @__PURE__ */ e.jsx(Ge.Provider, { value: oe, children: /* @__PURE__ */ e.jsx(Ye.Provider, { value: B, children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-container", ref: p, className: L(
     "w-full h-full max-h-dvh overflow-y-hidden",
     ye ? "navigation-drawer-with-sidebar" : "navigation-drawer",
     m?.drawer ? "disabled-dragopen" : "",
@@ -346,18 +346,18 @@ const Ge = Le(null), Ye = Le(null), Ht = () => {
       "div",
       {
         ref: f,
-        className: D(
+        className: L(
           "bg-neutral-default-default border-r border-neutral-strong-default h-dvh md:h-screen p-0 overflow-hidden drawer flex gap-0",
-          b.current ? "collapsed" : "expanded",
+          h.current ? "collapsed" : "expanded",
           ie ? "has-left-slot" : "",
           n
         ),
         children: [
-          W && ce(W) ? je.cloneElement(W, { ref: i }) : W,
+          q && ce(q) ? je.cloneElement(q, { ref: i }) : q,
           /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-1 gap-4 p-4 overflow-hidden", children: [
             /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ e.jsx(Xe, { onToggleCollapse: B }),
-              _
+              /* @__PURE__ */ e.jsx(Xe, { onToggleCollapse: D }),
+              T
             ] }),
             /* @__PURE__ */ e.jsxs("div", { className: "flex flex-1 overflow-hidden relative flex-col", children: [
               me,
@@ -368,14 +368,14 @@ const Ge = Le(null), Ye = Le(null), Ht = () => {
         ]
       }
     ),
-    ee && ce(ee) ? je.cloneElement(ee, { ref: w, modal: l, closeOnOutsideClick: d }) : ee,
+    ee && ce(ee) ? je.cloneElement(ee, { ref: w, modal: l, closeOnOutsideClick: c }) : ee,
     te && ce(te) ? je.cloneElement(te, {
-      ref: p,
-      className: D("sidebar", te.props?.className, a),
-      context: F
+      ref: d,
+      className: L("sidebar", te.props?.className, a),
+      context: B
     }) : te
   ] }) }) });
-}, Fe = O(Gt), Xe = O(({ onToggleCollapse: t }) => /* @__PURE__ */ e.jsx(
+}, Fe = _(Gt), Xe = _(({ onToggleCollapse: t }) => /* @__PURE__ */ e.jsx(
   "button",
   {
     type: "button",
@@ -385,32 +385,32 @@ const Ge = Le(null), Ye = Le(null), Ht = () => {
   }
 ), (t, r) => t.onToggleCollapse === r.onToggleCollapse);
 Xe.displayName = "NavigationDrawerCollapseButton";
-const Me = O(({ children: t, className: r, context: n }) => {
+const Me = _(({ children: t, className: r, context: n }) => {
   const a = ue(t, n);
-  return /* @__PURE__ */ e.jsx("div", { className: D("flex items-center justify-between", r), children: a });
+  return /* @__PURE__ */ e.jsx("div", { className: L("flex items-center justify-between", r), children: a });
 });
 Me.displayName = "NavigationDrawerHeader";
-const xe = O(({ children: t, className: r, context: n, ...a }) => {
+const xe = _(({ children: t, className: r, context: n, ...a }) => {
   const m = ue(t, n);
-  return /* @__PURE__ */ e.jsx("div", { ...a, className: D("w-full flex-1 drawer-content select-none", r), children: m });
+  return /* @__PURE__ */ e.jsx("div", { ...a, className: L("w-full flex-1 drawer-content select-none", r), children: m });
 });
 xe.displayName = "NavigationDrawerContent";
-const ge = O(({ children: t, className: r, context: n }) => {
+const ge = _(({ children: t, className: r, context: n }) => {
   const a = ue(t, n);
-  return /* @__PURE__ */ e.jsx("div", { className: D("flex items-center justify-between", r), children: a });
+  return /* @__PURE__ */ e.jsx("div", { className: L("flex items-center justify-between", r), children: a });
 });
 ge.displayName = "NavigationDrawerFooter";
-const Ze = O(({ className: t }) => /* @__PURE__ */ e.jsx("div", { className: D("w-full border-t border-neutral-strong-default ", t) }));
+const Ze = _(({ className: t }) => /* @__PURE__ */ e.jsx("div", { className: L("w-full border-t border-neutral-strong-default ", t) }));
 Ze.displayName = "NavigationDrawerSpacer";
-const Ae = O(le(({ children: t, className: r, context: n, modal: a, closeOnOutsideClick: m }, l) => {
-  const d = ue(t, n), h = se(), i = () => {
-    m && (h.closeDrawer(), h.closeSidebar());
+const Ae = _(le(({ children: t, className: r, context: n, modal: a, closeOnOutsideClick: m }, l) => {
+  const c = ue(t, n), p = se(), i = () => {
+    m && (p.closeDrawer(), p.closeSidebar());
   };
-  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-outlet", ref: l, className: D("flex-1 overflow-auto relative h-full max-h-dvh", r), children: [
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-outlet", ref: l, className: L("flex-1 overflow-auto relative h-full max-h-dvh", r), children: [
     a && /* @__PURE__ */ e.jsx("div", { className: "navigation-drawer-backdrop select-none", onClick: i }),
-    d
+    c
   ] }) });
-}), (t, r) => t.children === r.children && t.className === r.className), V = Object.assign(Fe, {
+}), (t, r) => t.children === r.children && t.className === r.className), K = Object.assign(Fe, {
   Root: Fe,
   Header: Me,
   Content: xe,
@@ -420,7 +420,7 @@ const Ae = O(le(({ children: t, className: r, context: n, modal: a, closeOnOutsi
   Sidebar: Je,
   LeftSlot: Pe
 });
-V.displayName = "NavigationDrawer";
+K.displayName = "NavigationDrawer";
 const Yt = "hover:bg-neutral-medium-hover", Qt = Ie("", {
   variants: {
     isSelected: {
@@ -433,7 +433,7 @@ const Yt = "hover:bg-neutral-medium-hover", Qt = Ie("", {
     }
   }
 }), Xt = Ie(
-  D(
+  L(
     "select-none line-clamp-1 min-w-max",
     "prometeo-fonts-label-large transition-colors duration-300 ease-out"
   ),
@@ -456,7 +456,7 @@ const Yt = "hover:bg-neutral-medium-hover", Qt = Ie("", {
     ]
   }
 ), ke = Ie(
-  D(
+  L(
     "transition-colors duration-300 ease-out min-w-max"
   ),
   {
@@ -484,82 +484,82 @@ const Yt = "hover:bg-neutral-medium-hover", Qt = Ie("", {
     count: a,
     className: m,
     isSelected: l = !1,
-    hasSublinks: d,
-    subLinksCollapsed: h,
+    hasSublinks: c,
+    subLinksCollapsed: p,
     onToggleSublinks: i,
     as: f = "div",
     onClick: w,
-    onAuxClick: p,
-    disabled: b = !1,
-    tooltipText: S,
+    onAuxClick: d,
+    disabled: h = !1,
+    tooltipText: C,
     selectorCss: j
-  } = t, u = (c) => {
-    b || w?.(c);
-  }, C = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  } = t, u = (g) => {
+    h || w?.(g);
+  }, y = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center flex-nowrap", children: [
-      n && (S ? /* @__PURE__ */ e.jsx(_t, { title: S, disabled: b, children: /* @__PURE__ */ e.jsx(n, { size: 24, className: ke({ disabled: b, isSelected: l }) }) }) : /* @__PURE__ */ e.jsx(n, { size: 24, className: ke({ disabled: b, isSelected: l }) })),
-      /* @__PURE__ */ e.jsx("label", { className: Xt({ disabled: b, isSelected: l }), children: r })
+      n && (C ? /* @__PURE__ */ e.jsx(_t, { title: C, disabled: h, children: /* @__PURE__ */ e.jsx(n, { size: 24, className: ke({ disabled: h, isSelected: l }) }) }) : /* @__PURE__ */ e.jsx(n, { size: 24, className: ke({ disabled: h, isSelected: l }) })),
+      /* @__PURE__ */ e.jsx("label", { className: Xt({ disabled: h, isSelected: l }), children: r })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 items-center", children: [
-      a && a ? /* @__PURE__ */ e.jsx(We, { count: a, maxCount: 99, className: "badge", disabled: b }) : "",
-      d && /* @__PURE__ */ e.jsx(
+      a && a ? /* @__PURE__ */ e.jsx(We, { count: a, maxCount: 99, className: "badge", disabled: h }) : "",
+      c && /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: D(
+          className: L(
             "sublinks-toggle",
             "transition-all duration-200",
             "rounded-full relative grid place-items-center size-6",
             l && "text-primary-default-default",
-            `${h ? "-rotate-90" : "rotate-90"}`
+            `${p ? "-rotate-90" : "rotate-90"}`
           ),
           children: /* @__PURE__ */ e.jsx(
             "button",
             {
-              disabled: b,
+              disabled: h,
               type: "button",
               onClick: i,
-              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", ke({ disabled: b, isSelected: l }), b && "pointer-events-none"),
+              className: L("absolute cursor-pointer hover:text-primary-default-hover top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-2 z-100 select-none", ke({ disabled: h, isSelected: l }), h && "pointer-events-none"),
               children: /* @__PURE__ */ e.jsx(Pt, {})
             }
           )
         }
       )
     ] })
-  ] }), v = D(
+  ] }), x = L(
     "group navitem",
     "h-12 flex-1 flex items-center p-3 rounded-lg justify-between w-full",
     "transition-all duration-300",
     Yt,
-    Qt({ isSelected: l, disabled: b }),
+    Qt({ isSelected: l, disabled: h }),
     m
   );
   if (f === "a") {
-    const c = {
+    const g = {
       onClick: u,
-      onAuxClick: p,
-      className: v
+      onAuxClick: d,
+      className: x
     };
-    return /* @__PURE__ */ e.jsx("a", { ...c, children: C });
+    return /* @__PURE__ */ e.jsx("a", { ...g, children: y });
   }
   if (f === "button") {
-    const c = {
+    const g = {
       onClick: u,
       type: "button",
-      className: v,
+      className: x,
       id: j
     };
-    return /* @__PURE__ */ e.jsx("button", { ...c, children: C });
+    return /* @__PURE__ */ e.jsx("button", { ...g, children: y });
   }
-  const A = {
+  const k = {
     onClick: u,
-    className: v
+    className: x
   };
-  return /* @__PURE__ */ e.jsx("div", { ...A, children: C });
-}, Re = O(Zt);
+  return /* @__PURE__ */ e.jsx("div", { ...k, children: y });
+}, Re = _(Zt);
 Re.displayName = "NavigationDrawerItemBase";
 const er = (t) => {
-  const { title: r, icon: n, count: a, className: m, isActive: l, onClick: d, isView: h = !0, disabled: i, tooltipText: f, selectorCss: w } = t;
-  return h ? /* @__PURE__ */ e.jsx(
+  const { title: r, icon: n, count: a, className: m, isActive: l, onClick: c, isView: p = !0, disabled: i, tooltipText: f, selectorCss: w } = t;
+  return p ? /* @__PURE__ */ e.jsx(
     Re,
     {
       as: "button",
@@ -568,50 +568,50 @@ const er = (t) => {
       count: a,
       className: m,
       isSelected: l,
-      onClick: d,
+      onClick: c,
       disabled: i,
       tooltipText: f,
       selectorCss: w
     }
   ) : null;
-}, et = O(er);
+}, et = _(er);
 et.displayName = "NavigationDrawerActionItem";
-const tr = ({ actions: t, activeActionId: r, onActionClick: n, className: a }) => /* @__PURE__ */ e.jsx(Oe, { className: D("flex flex-col w-full ", a), contentClassName: "space-y-2", scrollbarProps: { hide: !0 }, indicators: {
+const tr = ({ actions: t, activeActionId: r, onActionClick: n, className: a }) => /* @__PURE__ */ e.jsx(Oe, { className: L("flex flex-col w-full ", a), contentClassName: "space-y-2", scrollbarProps: { hide: !0 }, indicators: {
   top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
   bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
 }, children: t?.map((m) => {
-  const { id: l, onClick: d, isView: h = !0, payload: i, ...f } = m, w = l === r, p = () => {
-    n?.(l, i), d?.();
+  const { id: l, onClick: c, isView: p = !0, payload: i, ...f } = m, w = l === r, d = () => {
+    n?.(l, i), c?.();
   };
-  return h ? /* @__PURE__ */ e.jsx(
+  return p ? /* @__PURE__ */ e.jsx(
     et,
     {
       ...f,
       id: l,
       isActive: w,
-      onClick: p
+      onClick: d
     },
     l
   ) : null;
-}) }), tt = O(tr);
+}) }), tt = _(tr);
 tt.displayName = "NavigationDrawerActions";
 const rr = (t) => {
-  const { className: r, title: n, path: a, onClick: m, isSelected: l, parentPath: d } = t, { pathname: h } = Ve(), i = x(() => {
+  const { className: r, title: n, path: a, onClick: m, isSelected: l, parentPath: c } = t, { pathname: p } = Ve(), i = b(() => {
     m?.(a);
-  }, [a]), f = x(() => {
+  }, [a]), f = b(() => {
     if (a.startsWith("./")) {
-      if (!d) return;
-      const p = d + a.slice(2);
-      window.open(p, "_blank");
+      if (!c) return;
+      const d = c + a.slice(2);
+      window.open(d, "_blank");
     } else
       window.open(a, "_blank");
-  }, [a]), w = l || a === h;
+  }, [a]), w = l || a === p;
   return /* @__PURE__ */ e.jsx(
     "a",
     {
       onClick: i,
       onAuxClick: f,
-      className: D(
+      className: L(
         "group",
         "transition-all duration-300 ease-in-out cursor-pointer",
         "h-10 w-full rounded-lg py-[11px] px-3",
@@ -619,26 +619,26 @@ const rr = (t) => {
         w && "bg-neutral-medium-selected hover:bg-neutral-medium-hover active:bg-transparent focus:bg-transparent",
         r
       ),
-      children: /* @__PURE__ */ e.jsx("p", { className: D(
+      children: /* @__PURE__ */ e.jsx("p", { className: L(
         "prometeo-fonts-label-large text-neutral-medium-default",
         "group-active:text-neutral-default-focused group-focus:text-neutral-default-focused",
         w && "text-primary-default-default group-hover:text-primary-default-hover group-focus:text-primary-default-focused group-active:text-primary-default-focused"
       ), children: n })
     }
   );
-}, rt = O(rr);
+}, rt = _(rr);
 rt.displayName = "NavItemSecondary";
 const sr = le((t, r) => {
-  const [n, a] = R(!0), m = I(null), { path: l, title: d, icon: h, count: i, className: f, isSelected: w = !1, onClick: p, sublinks: b, toggleCollapse: S, getIsCollapsed: j, subscribeToCollapse: u, isView: C = !0, disabled: v, tooltipText: A, selectorCss: c } = t;
-  Y(() => u ? u((_) => {
-    _ && a(!0);
+  const [n, a] = U(!0), m = I(null), { path: l, title: c, icon: p, count: i, className: f, isSelected: w = !1, onClick: d, sublinks: h, toggleCollapse: C, getIsCollapsed: j, subscribeToCollapse: u, isView: y = !0, disabled: x, tooltipText: k, selectorCss: g } = t;
+  J(() => u ? u((T) => {
+    T && a(!0);
   }) : void 0, [u]);
-  const P = x(() => {
-    a((M) => !M);
-  }, []), N = x((M) => {
-    a(M);
-  }, []), B = {
-    toggle: P,
+  const R = b(() => {
+    a((P) => !P);
+  }, []), N = b((P) => {
+    a(P);
+  }, []), D = {
+    toggle: R,
     setIsCollapsed: N,
     get isCollapsed() {
       return n;
@@ -646,103 +646,103 @@ const sr = le((t, r) => {
     get isDrawerCollapsed() {
       return j?.() ?? !1;
     },
-    toggleDrawerCollapse: S,
+    toggleDrawerCollapse: C,
     subscribeToCollapse: u
   };
-  Te(r, () => B, [B, n, j, S]);
-  const H = h, $ = x(() => {
-    const M = j?.() ?? !1;
-    if (b && b.length > 0 && M) {
-      N(!1), S?.();
+  Te(r, () => D, [D, n, j, C]);
+  const V = p, z = b(() => {
+    const P = j?.() ?? !1;
+    if (h && h.length > 0 && P) {
+      N(!1), C?.();
       return;
     }
-    p?.(l);
-  }, [l, p, b, S, N, j]), q = x(() => {
+    d?.(l);
+  }, [l, d, h, C, N, j]), $ = b(() => {
     window.open(l, "_blank");
-  }, [l]), F = () => {
-    if (!b || v) return null;
-    if (t.subLinksRender && b)
-      return t.subLinksRender(b, B);
-    const M = x((_) => {
-      if (_.startsWith("./")) {
-        const U = l + _.slice(2);
-        p?.(U);
+  }, [l]), B = () => {
+    if (!h || x) return null;
+    if (t.subLinksRender && h)
+      return t.subLinksRender(h, D);
+    const P = b((T) => {
+      if (T.startsWith("./")) {
+        const F = l + T.slice(2);
+        d?.(F);
       } else
-        p?.(_);
+        d?.(T);
     }, [l]);
-    return Y(() => {
-      const _ = m.current;
-      if (!_) return;
-      const U = _.scrollHeight;
-      _.style.setProperty("--sublinks-max-height", `${U}px`);
-    }, []), /* @__PURE__ */ e.jsx("div", { ref: m, className: `sublinks flex flex-col gap-1 ml-8 ${n ? "collapsed" : "expanded"}`, children: b.map((_) => /* @__PURE__ */ e.jsx(rt, { ..._, onClick: M, parentPath: l }, `${_.title}-${_.path}`)) });
-  }, Q = (M) => {
-    M.stopPropagation(), M.preventDefault(), P();
+    return J(() => {
+      const T = m.current;
+      if (!T) return;
+      const F = T.scrollHeight;
+      T.style.setProperty("--sublinks-max-height", `${F}px`);
+    }, []), /* @__PURE__ */ e.jsx("div", { ref: m, className: `sublinks flex flex-col gap-1 ml-8 ${n ? "collapsed" : "expanded"}`, children: h.map((T) => /* @__PURE__ */ e.jsx(rt, { ...T, onClick: P, parentPath: l }, `${T.title}-${T.path}`)) });
+  }, W = (P) => {
+    P.stopPropagation(), P.preventDefault(), R();
   };
-  return C ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 ", id: c, children: [
+  return y ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 ", id: g, children: [
     /* @__PURE__ */ e.jsx(
       Re,
       {
         as: "a",
-        title: d,
-        icon: H,
+        title: c,
+        icon: V,
         count: i,
         className: f,
         isSelected: w,
-        hasSublinks: !!b,
+        hasSublinks: !!h,
         subLinksCollapsed: n,
-        onToggleSublinks: Q,
-        onClick: $,
-        onAuxClick: q,
-        disabled: v,
-        tooltipText: A
+        onToggleSublinks: W,
+        onClick: z,
+        onAuxClick: $,
+        disabled: x,
+        tooltipText: k
       }
     ),
-    F()
+    B()
   ] }) : null;
-}), st = O(sr);
+}), st = _(sr);
 st.displayName = "NavigationDrawerLinkItem";
 const nr = ({ navlinks: t, handleNavigation: r, className: n, getIsCollapsed: a, toggleCollapse: m, subscribeToCollapse: l }) => {
-  const { pathname: d } = Ve();
-  return /* @__PURE__ */ e.jsx(Oe, { className: D("flex flex-col w-full", n), contentClassName: "space-y-2", axis: "y", scrollbarProps: { hide: !0 }, indicators: {
+  const { pathname: c } = Ve();
+  return /* @__PURE__ */ e.jsx(Oe, { className: L("flex flex-col w-full", n), contentClassName: "space-y-2", axis: "y", scrollbarProps: { hide: !0 }, indicators: {
     top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
     bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
-  }, children: t?.map((h, i) => {
-    const f = h.isSelected || h.path === d || (h.relatedPaths?.some((w) => d.startsWith(w)) ?? !1) || (h.sublinks?.some((w) => w.path === d) ?? !1);
+  }, children: t?.map((p, i) => {
+    const f = p.isSelected || p.path === c || (p.relatedPaths?.some((w) => c.startsWith(w)) ?? !1) || (p.sublinks?.some((w) => w.path === c) ?? !1);
     return /* @__PURE__ */ e.jsx(
       st,
       {
-        ...h,
+        ...p,
         isSelected: f,
         onClick: r,
         toggleCollapse: m,
         getIsCollapsed: a,
         subscribeToCollapse: l,
-        disabled: h.disabled,
-        isView: h.isView,
-        selectorCss: h.selectorCss
+        disabled: p.disabled,
+        isView: p.isView,
+        selectorCss: p.selectorCss
       },
       i
     );
   }) });
-}, nt = O(nr);
+}, nt = _(nr);
 nt.displayName = "NavigationDrawerNavlinks";
-const ot = O(({ navlinks: t, handleNavigation: r, allActions: n, activeActionId: a, initialSectionRef: m, navigationControlsRef: l, onActionClick: d }) => {
-  const { getIsCollapsed: h, toggleCollapse: i, subscribeToCollapse: f, subscribeToSidebarOpen: w, getIsSidebarOpen: p } = se(), [b, S] = R(() => p?.() ?? !1), [j, u] = R(() => m?.current ?? "notifications");
-  Y(() => {
-    const A = w?.(S), c = l?.current?.subscribeToSection?.(u);
+const ot = _(({ navlinks: t, handleNavigation: r, allActions: n, activeActionId: a, initialSectionRef: m, navigationControlsRef: l, onActionClick: c }) => {
+  const { getIsCollapsed: p, toggleCollapse: i, subscribeToCollapse: f, subscribeToSidebarOpen: w, getIsSidebarOpen: d } = se(), [h, C] = U(() => d?.() ?? !1), [j, u] = U(() => m?.current ?? "notifications");
+  J(() => {
+    const k = w?.(C), g = l?.current?.subscribeToSection?.(u);
     return () => {
-      A?.(), c?.();
+      k?.(), g?.();
     };
   }, [w, l]);
-  const v = b && (j === "notifications" || j === "help") ? j : a;
+  const x = h && (j === "notifications" || j === "help") ? j : a;
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(V.Spacer, { className: "pb-3" }),
+    /* @__PURE__ */ e.jsx(K.Spacer, { className: "pb-3" }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col overflow-hidden h-full gap-4 relative w-full", children: [
       /* @__PURE__ */ e.jsx(
         nt,
         {
-          getIsCollapsed: h,
+          getIsCollapsed: p,
           toggleCollapse: i,
           subscribeToCollapse: f,
           navlinks: t,
@@ -754,8 +754,8 @@ const ot = O(({ navlinks: t, handleNavigation: r, allActions: n, activeActionId:
         tt,
         {
           actions: n,
-          activeActionId: v,
-          onActionClick: d,
+          activeActionId: x,
+          onActionClick: c,
           className: "max-h-[30dvh]"
         }
       )
@@ -769,13 +769,13 @@ const or = (t) => {
     return null;
   const l = (i, f) => {
     n && f && n(i, f);
-  }, d = (i) => {
+  }, c = (i) => {
     if (!m)
       return;
     const f = be({ session: i }, m);
     if (f != null)
       return typeof f == "string" ? f : String(f);
-  }, h = x((i) => typeof a == "function" ? a(i) : a, [a]);
+  }, p = b((i) => typeof a == "function" ? a(i) : a, [a]);
   return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-2", children: r?.map((i) => {
     const { auth_id: f } = i;
     return /* @__PURE__ */ e.jsx(de, { className: " shrink-0 h-max", children: /* @__PURE__ */ e.jsx(de.Content, { onClick: () => l(i, t.userOptionsControls), className: "p-0 group-data-[expanded=true]/ticketcard:border-none", children: /* @__PURE__ */ e.jsx(
@@ -783,8 +783,8 @@ const or = (t) => {
       {
         name: f.name,
         avatarSize: "xxs",
-        secondarySlot: h(i),
-        subImageUrl: d(i),
+        secondarySlot: p(i),
+        subImageUrl: c(i),
         imageUrl: f.profile_picture,
         className: "pyrion-navigation-drawer-user-card"
       },
@@ -798,20 +798,20 @@ const or = (t) => {
   resolveSessionSecondarySlot: a,
   onSessionClick: m,
   onLogoutClick: l,
-  onProfileClick: d,
-  options: h,
+  onProfileClick: c,
+  options: p,
   currentSystemId: i,
   userOptionsControls: f,
   mobileAppSwitcherControls: w
 }) => {
-  const { getIsCollapsed: p, toggleCollapse: b, subscribeToCollapse: S } = se(), j = x(() => {
-    const u = p();
-    u ? (b(), f.current?.open()) : d?.(u);
-  }, [p, b, f, d]);
-  return Y(() => S((u) => {
+  const { getIsCollapsed: d, toggleCollapse: h, subscribeToCollapse: C } = se(), j = b(() => {
+    const u = d();
+    u ? (h(), f.current?.open()) : c?.(u);
+  }, [d, h, f, c]);
+  return J(() => C((u) => {
     u && (f.current?.close(), w.current?.close());
-  }), [S, f, w]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx(V.Spacer, { className: "mb-3" }),
+  }), [C, f, w]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(K.Spacer, { className: "mb-3" }),
     /* @__PURE__ */ e.jsxs(de, { className: "", controls: f, children: [
       /* @__PURE__ */ e.jsx(de.Content, { onClick: j, className: "max-h-[60px] min-h-[60px] h-[60px] max-w-[70vw] w-[min(285px,70vw)] flex items-center", children: /* @__PURE__ */ e.jsx(
         He,
@@ -844,7 +844,7 @@ const or = (t) => {
                   sessions: r,
                   onSessionClick: m,
                   secondarySlot: a,
-                  subImageUrlAccessor: h?.sessionCardOptions?.subImageUrlAccessor,
+                  subImageUrlAccessor: p?.sessionCardOptions?.subImageUrlAccessor,
                   currentSystemId: i,
                   userOptionsControls: f
                 }
@@ -872,29 +872,29 @@ const or = (t) => {
       ] })
     ] })
   ] });
-}, at = O(ar, (t, r) => {
+}, at = _(ar, (t, r) => {
   const n = Object.keys(t), a = Object.keys(r);
   if (n.length !== a.length)
     return !1;
   for (const m of n) {
     if (!Object.prototype.hasOwnProperty.call(r, m))
       return !1;
-    const l = t[m], d = r[m];
-    if (l !== d)
+    const l = t[m], c = r[m];
+    if (l !== c)
       return !1;
   }
   return t.currentAppSessions !== r.currentAppSessions || t.options !== r.options || t.currentSystemId !== r.currentSystemId || t.userOptionsControls !== r.userOptionsControls || t.mobileAppSwitcherControls !== r.mobileAppSwitcherControls;
 });
 at.displayName = "PyrionNavigationDrawer.Footer";
-const lt = O(({ enabled_systems: t, onClick: r, currentSystemId: n }) => {
-  const a = x(() => {
+const lt = _(({ enabled_systems: t, onClick: r, currentSystemId: n }) => {
+  const a = b(() => {
     if (t) {
       if (n) {
-        const h = t.find((i) => i._id === n);
-        if (h) return { coverImage: h.coverImage, thumbnail: h.thumbnail };
+        const p = t.find((i) => i._id === n);
+        if (p) return { coverImage: p.coverImage, thumbnail: p.thumbnail };
       }
-      const l = window.location.origin, d = t.find((h) => h.url === l);
-      if (d) return { coverImage: d.coverImage, thumbnail: d.thumbnail };
+      const l = window.location.origin, c = t.find((p) => p.url === l);
+      if (c) return { coverImage: c.coverImage, thumbnail: c.thumbnail };
     }
     return { coverImage: "", thumbnail: "" };
   }, [t]), m = !!r;
@@ -904,7 +904,7 @@ const lt = O(({ enabled_systems: t, onClick: r, currentSystemId: n }) => {
       {
         src: a().coverImage,
         alt: "System Logo",
-        className: D("w-full h-12 rounded object-contain system-cover-image ", m && "cursor-pointer"),
+        className: L("w-full h-12 rounded object-contain system-cover-image ", m && "cursor-pointer"),
         draggable: !1,
         onClick: r
       }
@@ -914,7 +914,7 @@ const lt = O(({ enabled_systems: t, onClick: r, currentSystemId: n }) => {
       {
         src: a().thumbnail,
         alt: "System Logo",
-        className: D("w-12 h-12 rounded object-cover system-thumbnail ", m && "cursor-pointer"),
+        className: L("w-12 h-12 rounded object-cover system-thumbnail ", m && "cursor-pointer"),
         draggable: !1,
         onClick: r
       }
@@ -922,9 +922,9 @@ const lt = O(({ enabled_systems: t, onClick: r, currentSystemId: n }) => {
   ] });
 }, (t, r) => t.enabled_systems === r.enabled_systems && t.onClick === r.onClick && t.currentSystemId === r.currentSystemId);
 lt.displayName = "PyrionNavigationDrawer.SystemLogo";
-const it = O(
+const it = _(
   ({ onSystemLogoClick: t, state: r, currentSystemId: n }) => {
-    const { getIsCollapsed: a } = se(), m = x(() => {
+    const { getIsCollapsed: a } = se(), m = b(() => {
       if (t) {
         const l = a();
         t(l);
@@ -966,24 +966,39 @@ const lr = ({ onCloseClick: t, children: r, title: n = "Ayuda" }) => /* @__PURE_
   ] }),
   /* @__PURE__ */ e.jsx(ae, { shape: "rounded", className: "w-20 h-3" })
 ] }), cr = ({ onCloseClick: t, onMarkAllAsRead: r, loadingState: n, errorState: a, notifications: m, scrollableState: l }) => {
-  const [d, h] = R("NO_LEIDAS"), i = I(null), f = I(null), w = (c) => {
-    h(c);
-  }, p = m.length > 0;
+  const [c, p] = U("NO_LEIDAS"), i = I(null), f = I(null), w = I(null), d = I(null), h = I(null), C = (D) => {
+    p(D);
+  }, j = m.length > 0;
   De(() => {
     if (i.current && f.current) {
-      const c = i.current.clientHeight;
-      f.current.style.setProperty("height", `calc(100dvh - ${c}px - 20px)`);
+      const D = i.current.clientHeight;
+      f.current.style.setProperty("height", `calc(100dvh - ${D}px - 20px)`);
     }
-  }, [i?.current, d]);
-  const b = m.filter((c) => !c.read).length, { isLoading: S, type: j } = n, { hasError: u, children: C } = a, v = re(() => m?.filter(
-    (c) => d === "NO_LEIDAS" ? !c.read : c
-  ), [m, d]), A = re(() => ({
-    activeTab: d,
-    isLoading: S,
+  }, [i?.current, c]);
+  const u = m.filter((D) => !D.read).length, { isLoading: y, type: x } = n, { hasError: k, children: g } = a, R = re(() => m?.filter(
+    (D) => c === "NO_LEIDAS" ? !D.read : D
+  ), [m, c]), N = re(() => ({
+    activeTab: c,
+    isLoading: y,
     notificationsLength: m.length
     // Añadir la longitud de las notificaciones como metadata
-  }), [d, S, m.length]);
-  return /* @__PURE__ */ e.jsx(
+  }), [c, y, m.length]);
+  return J(
+    () => {
+      if (x !== "load_more") return;
+      const D = l.handlers.subscribeToScrollTarget((V) => {
+        if (!w.current || !d.current || !l.state.scrollableElement) return;
+        const { clientHeight: z } = V, $ = l.state.scrollableElement.getBoundingClientRect(), B = d.current.getBoundingClientRect(), W = B.height, P = B.top - $.top;
+        let T = 0;
+        if (z !== 0 && W !== 0) {
+          const F = Math.max(0, P), G = Math.min(z, P + W);
+          T = Math.max(0, G - F) / W;
+        }
+        return console.log(T, "progress"), h.current && (h.current.style.top = `${50 - T * 30}%`, h.current.style.opacity = `${0.4 + T * 1}`, h.current.style.fontWeight = `${T > 0.99 ? "bold" : "normal"}`), () => D();
+      });
+    },
+    [l, x, w.current, d.current]
+  ), /* @__PURE__ */ e.jsx(
     "section",
     {
       className: " w-full md:w-[492px] 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",
@@ -1000,54 +1015,73 @@ const lr = ({ onCloseClick: t, children: r, title: n = "Ayuda" }) => /* @__PURE_
             Ut,
             {
               className: "px-4 md:px-2 md:pl-2 pl-2 gap-0 md:gap-0",
-              onTabChange: w,
-              activeTab: d,
+              onTabChange: C,
+              activeTab: c,
               items: [
                 { id: "ALL", title: "Todas" },
                 { id: "NO_LEIDAS", title: "Sin leer" }
               ],
-              renderTab: (c, P, N, B, H, $, q, F) => /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+              renderTab: (D, V, z, $, B, W, P, T) => /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ e.jsx(
                   zt,
                   {
-                    id: c.id,
-                    title: c.title,
-                    onClick: N,
-                    isActive: P,
-                    onIconClick: B,
-                    onIconHover: H,
-                    iconTooltipProps: q,
-                    iconTooltipTitle: $,
-                    iconSize: F
+                    id: D.id,
+                    title: D.title,
+                    onClick: z,
+                    isActive: V,
+                    onIconClick: $,
+                    onIconHover: B,
+                    iconTooltipProps: P,
+                    iconTooltipTitle: W,
+                    iconSize: T
                   }
                 ),
-                b > 0 && c.id === "NO_LEIDAS" && /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(We, { count: b, maxCount: 99, className: "absolute top-1 -right-1" }) })
+                u > 0 && D.id === "NO_LEIDAS" && /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx(We, { count: u, maxCount: 99, className: "absolute top-1 -right-1" }) })
               ] })
             }
           ),
-          r && p && d === "NO_LEIDAS" && !u && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end px-4", children: /* @__PURE__ */ e.jsx(Ee, { disabled: S || b === 0, onClick: r, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) })
+          r && j && c === "NO_LEIDAS" && !k && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end px-4", children: /* @__PURE__ */ e.jsx(Ee, { disabled: y || u === 0, onClick: r, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) })
         ] }),
         /* @__PURE__ */ e.jsx("div", { ref: f, className: " ", children: /* @__PURE__ */ e.jsxs(
           Mt,
           {
             scrollableState: l,
-            className: "*:px-4 md:*:px-2 flex flex-col gap-3 h-full  *:prometeo-scrollbar-none",
+            className: "*:px-4 md:*:px-2 flex flex-col gap-3 h-full  *:prometeo-scrollbar-none *:flex *:flex-col",
             persistScroll: "notifications-scroll",
             scrollbarProps: { hide: !0, size: "small" },
             axis: "y",
             disableMouseScroll: !1,
-            scrollMetadata: A,
+            scrollMetadata: N,
             scrollTopButton: {
               target: "2000px"
             },
             children: [
-              u && /* @__PURE__ */ e.jsx("div", { className: "w-full h-full grid place-items-center", children: typeof C == "function" ? C() : C }),
-              !u && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col md:h-[110%] h-[120%] ", children: [
-                S && j === "skeletons" ? /* @__PURE__ */ e.jsx(Ue, { type: j }) : p ? v?.map((c) => /* @__PURE__ */ e.jsxs("div", { children: [
-                  /* @__PURE__ */ e.jsx(Ft, { ...c, className: "mt-2" }),
+              k && /* @__PURE__ */ e.jsx("div", { className: "w-full h-full grid place-items-center", children: typeof g == "function" ? g() : g }),
+              !k && // <div className='flex flex-col md:h-[110%] h-[120%] '>
+              /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                y && x === "skeletons" ? /* @__PURE__ */ e.jsx(Ue, { type: x }) : j ? R?.map((D) => /* @__PURE__ */ e.jsxs("div", { children: [
+                  /* @__PURE__ */ e.jsx(Ft, { ...D, className: "mt-2" }),
                   /* @__PURE__ */ e.jsx("div", { className: "h-0 mt-2 w-full border-b border-neutral-strong-default" })
-                ] }, c._id)) : /* @__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" }),
-                j === "load_more" && /* @__PURE__ */ e.jsx("div", { className: "w-full min-h-16 flex-1 flex flex-col items-center justify-center", children: S && /* @__PURE__ */ e.jsx(Ue, { type: j }) })
+                ] }, D._id)) : /* @__PURE__ */ e.jsx("p", { className: "flex-0 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" }),
+                x === "load_more" && /* @__PURE__ */ e.jsxs(
+                  "div",
+                  {
+                    ref: w,
+                    className: "w-full min-h-0 flex-1 flex flex-col items-center justify-center relative",
+                    children: [
+                      /* @__PURE__ */ e.jsx(
+                        "div",
+                        {
+                          ref: d,
+                          style: { opacity: 0.5, scale: "1", transition: "opacity 0.1s ease-out" },
+                          className: "w-full h-20 bottom-0 absolute translate-y-full flex items-center justify-center",
+                          children: /* @__PURE__ */ e.jsx("p", { ref: h, className: "transtition-all duration-100 absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-neutral-default-default prometeo-fonts-body-small", children: y ? "Cargando más..." : "Cargar más notificaciones" })
+                        }
+                      ),
+                      y && x !== "load_more" && /* @__PURE__ */ e.jsx(Ue, { type: x })
+                    ]
+                  }
+                )
               ] })
             ]
           }
@@ -1056,75 +1090,75 @@ const lr = ({ onCloseClick: t, children: r, title: n = "Ayuda" }) => /* @__PURE_
     }
   );
 }, dr = (t) => {
-  const { notificationsListControls: r } = t, [n, a] = R([]), [m, l] = R({ isLoading: !1, type: "load_more" }), [d, h] = R({ hasError: !1 }), i = I(/* @__PURE__ */ new Set()), f = x((C, v = "top") => {
-    a((A) => {
-      const c = Array.isArray(C) ? v === "bottom" ? [...A, ...C] : [...C, ...A] : v === "bottom" ? [...A, C] : [C, ...A];
+  const { notificationsListControls: r } = t, [n, a] = U([]), [m, l] = U({ isLoading: !1, type: "load_more" }), [c, p] = U({ hasError: !1 }), i = I(/* @__PURE__ */ new Set()), f = b((y, x = "top") => {
+    a((k) => {
+      const g = Array.isArray(y) ? x === "bottom" ? [...k, ...y] : [...y, ...k] : x === "bottom" ? [...k, y] : [y, ...k];
       return queueMicrotask(() => {
-        i.current.forEach((P) => P(c, { total: c.length, unread: c.filter((N) => !N.read).length }));
-      }), c;
+        i.current.forEach((R) => R(g, { total: g.length, unread: g.filter((N) => !N.read).length }));
+      }), g;
     });
-  }, []), w = x((C) => (i.current.add(C), () => {
-    i.current.delete(C);
-  }), []), p = x((C) => {
-    a((v) => {
-      const A = Array.isArray(C) ? v.filter((c) => !C.includes(c._id)) : v.filter((c) => c._id !== C);
+  }, []), w = b((y) => (i.current.add(y), () => {
+    i.current.delete(y);
+  }), []), d = b((y) => {
+    a((x) => {
+      const k = Array.isArray(y) ? x.filter((g) => !y.includes(g._id)) : x.filter((g) => g._id !== y);
       return queueMicrotask(() => {
-        i.current.forEach((c) => c(A, { total: A.length, unread: A.filter((P) => !P.read).length }));
-      }), A;
+        i.current.forEach((g) => g(k, { total: k.length, unread: k.filter((R) => !R.read).length }));
+      }), k;
     });
-  }, []), b = x(() => {
+  }, []), h = b(() => {
     a([]), queueMicrotask(() => {
-      i.current.forEach((C) => C([], { total: 0, unread: 0 }));
+      i.current.forEach((y) => y([], { total: 0, unread: 0 }));
     });
-  }, []), S = x((C) => {
-    const v = Array.isArray(C) ? C : C(n);
-    a(v), queueMicrotask(() => {
-      i.current.forEach((A) => A(v, { total: v.length, unread: v.filter((c) => !c.read).length }));
+  }, []), C = b((y) => {
+    const x = Array.isArray(y) ? y : y(n);
+    a(x), queueMicrotask(() => {
+      i.current.forEach((k) => k(x, { total: x.length, unread: x.filter((g) => !g.read).length }));
     });
-  }, []), j = x((C, v = "load_more") => {
-    l({ isLoading: C, type: v });
-  }, []), u = x((C, v) => {
-    h({ hasError: C, children: v });
+  }, []), j = b((y, x = "load_more") => {
+    l({ isLoading: y, type: x });
+  }, []), u = b((y, x) => {
+    p({ hasError: y, children: x });
   }, []);
   return Te(r, () => ({
     addNewNotification: f,
     subscribeToUpdates: w,
-    setNotifications: S,
-    removeNotification: p,
-    removeAllNotifications: b,
+    setNotifications: C,
+    removeNotification: d,
+    removeAllNotifications: h,
     setLoading: j,
     setError: u
-  }), [f, w, S, p, b, j, u]), {
+  }), [f, w, C, d, h, j, u]), {
     notifications: n,
     loadingState: m,
-    errorState: d
+    errorState: c
   };
-}, ur = ({ closeSidebar: t, options: r, helpSection: n, initialSection: a, notificationsListControls: m, scrollableControls: l, navigationControls: d }) => {
-  const [h, i] = R(a ?? "notifications");
-  Y(() => {
-    const j = d?.current?.subscribeToSection?.(i);
+}, ur = ({ closeSidebar: t, options: r, helpSection: n, initialSection: a, notificationsListControls: m, scrollableControls: l, navigationControls: c }) => {
+  const [p, i] = U(a ?? "notifications");
+  J(() => {
+    const j = c?.current?.subscribeToSection?.(i);
     return () => {
       j?.();
     };
-  }, [d]);
+  }, [c]);
   const f = () => {
     t();
-  }, { notifications: w, loadingState: p, errorState: b } = dr({ notificationsListControls: m }), S = Bt({ scrollTopButton: { target: "2000px" } });
+  }, { notifications: w, loadingState: d, errorState: h } = dr({ notificationsListControls: m }), C = Bt({ scrollTopButton: { target: "2000px" } });
   return Te(l, () => ({
-    subscribeToScrollTarget: S.handlers.subscribeToScrollTarget
-  }), [S]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    h === "notifications" && !r?.notificationsDrawerOptions?.hide && /* @__PURE__ */ e.jsx(
+    subscribeToScrollTarget: C.handlers.subscribeToScrollTarget
+  }), [C]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    p === "notifications" && !r?.notificationsDrawerOptions?.hide && /* @__PURE__ */ e.jsx(
       cr,
       {
         onCloseClick: f,
         onMarkAllAsRead: r?.notificationsDrawerOptions?.onMarkAllAsRead,
         notifications: w,
-        loadingState: p,
-        errorState: b,
-        scrollableState: S
+        loadingState: d,
+        errorState: h,
+        scrollableState: C
       }
     ),
-    h === "help" && n && !r?.helpSectionDrawerOptions?.hide && /* @__PURE__ */ e.jsx(lr, { onCloseClick: f, children: typeof n == "function" ? n() : n })
+    p === "help" && n && !r?.helpSectionDrawerOptions?.hide && /* @__PURE__ */ e.jsx(lr, { onCloseClick: f, children: typeof n == "function" ? n() : n })
   ] });
 }, ct = le(ur);
 ct.displayName = "SidebarContent";
@@ -1136,11 +1170,11 @@ const fr = ({
   scrollableControls: m,
   navigationControls: l
 }) => {
-  const { closeSidebar: d } = se();
+  const { closeSidebar: c } = se();
   return /* @__PURE__ */ e.jsx(
     ct,
     {
-      closeSidebar: d,
+      closeSidebar: c,
       options: t,
       helpSection: r,
       initialSection: n.current,
@@ -1149,27 +1183,27 @@ const fr = ({
       navigationControls: l
     }
   );
-}, dt = O(fr);
+}, dt = _(fr);
 dt.displayName = "PyrionLayout.Sidebar";
 const mr = ({ navigationControlsRef: t }) => {
   const r = se();
   return t.current.toggleCollapse = r.toggleCollapse, t.current.toggleDrawer = r.toggleDrawer, t.current.closeDrawer = r.closeDrawer, t.current.openDrawer = r.openDrawer, 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;
 }, pr = (t) => {
-  const { children: r, currentAppSessions: n, resolveUserSecondarySlot: a, resolveSessionSecondarySlot: m, handleNavigation: l, allActions: d, tabs: h, navigationControlsRef: i, initialSectionRef: f, userOptionsControls: w, mobileAppSwitcherControls: p, notificationsListControls: b, scrollableControls: S, outletRef: j, ...u } = t;
-  return /* @__PURE__ */ e.jsxs(V, { disableDragOpen: u.options?.disableDragOpen, outletRef: j, defaultCollapsedState: u.options?.defaultCollapsedState, children: [
+  const { children: r, currentAppSessions: n, resolveUserSecondarySlot: a, resolveSessionSecondarySlot: m, handleNavigation: l, allActions: c, tabs: p, navigationControlsRef: i, initialSectionRef: f, userOptionsControls: w, mobileAppSwitcherControls: d, notificationsListControls: h, scrollableControls: C, outletRef: j, ...u } = t;
+  return /* @__PURE__ */ e.jsxs(K, { disableDragOpen: u.options?.disableDragOpen, outletRef: j, defaultCollapsedState: u.options?.defaultCollapsedState, children: [
     /* @__PURE__ */ e.jsx(mr, { navigationControlsRef: i }),
-    /* @__PURE__ */ e.jsx(V.LeftSlot, { children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(K.LeftSlot, { children: /* @__PURE__ */ e.jsx(
       Vt,
       {
         className: "",
-        tabs: h,
+        tabs: p,
         activeColor: "var(--neutral-900)",
         currentTabName: u.currentTabName,
         currentSystemId: u.currentSystemId,
         isLoading: !u.state.enabled_systems || u.state.enabled_systems.length === 0
       }
     ) }),
-    /* @__PURE__ */ e.jsx(V.Header, { className: "flex flex-col relative w-full select-none", children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(K.Header, { className: "flex flex-col relative w-full select-none", children: /* @__PURE__ */ e.jsx(
       it,
       {
         onSystemLogoClick: u.onSystemLogoClick,
@@ -1177,19 +1211,19 @@ const mr = ({ navigationControlsRef: t }) => {
         currentSystemId: u.currentSystemId
       }
     ) }, "PL-Header"),
-    /* @__PURE__ */ e.jsx(V.Content, { className: "overflow-hidden flex flex-col relative flex-1  md:w-auto", children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(K.Content, { className: "overflow-hidden flex flex-col relative flex-1  md:w-auto", children: /* @__PURE__ */ e.jsx(
       ot,
       {
         navlinks: u.links,
         handleNavigation: l,
-        allActions: d,
+        allActions: c,
         activeActionId: u.activeActionId,
         initialSectionRef: f,
         navigationControlsRef: i,
         onActionClick: u.onActionClick
       }
     ) }, "PL-Content"),
-    /* @__PURE__ */ e.jsx(V.Footer, { className: "md:min-h-max flex flex-col w-full overflow-hidden max-w-full", children: /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(K.Footer, { className: "md:min-h-max flex flex-col w-full overflow-hidden max-w-full", children: /* @__PURE__ */ e.jsx(
       at,
       {
         state: u.state,
@@ -1201,13 +1235,13 @@ const mr = ({ navigationControlsRef: t }) => {
         options: u.options,
         currentSystemId: u.currentSystemId,
         userOptionsControls: w,
-        mobileAppSwitcherControls: p,
+        mobileAppSwitcherControls: d,
         onProfileClick: u.onProfileClick
       }
     ) }, "PL-Footer"),
-    /* @__PURE__ */ e.jsx(V.Outlet, { className: " *:prometeo-scrollbar-thin!", children: /* @__PURE__ */ e.jsx(ft, { children: r }) }),
+    /* @__PURE__ */ e.jsx(K.Outlet, { className: " *:prometeo-scrollbar-thin!", children: /* @__PURE__ */ e.jsx(ft, { children: r }) }),
     /* @__PURE__ */ e.jsx(
-      V.Sidebar,
+      K.Sidebar,
       {
         className: "bg-neutral-default-default pyrion-layout-sidebar",
         modal: u.options?.sidebarOptions?.modal,
@@ -1219,19 +1253,19 @@ const mr = ({ navigationControlsRef: t }) => {
             options: u.options,
             helpSection: u.helpSection,
             initialSectionRef: f,
-            notificationsListControls: b,
-            scrollableControls: S,
+            notificationsListControls: h,
+            scrollableControls: C,
             navigationControls: i
           }
         )
       }
     )
   ] });
-}, ut = O(pr, (t, r) => {
-  const { children: n, ...a } = t, { children: m, ...l } = r, d = Object.keys(a), h = Object.keys(l);
-  if (d.length !== h.length)
+}, ut = _(pr, (t, r) => {
+  const { children: n, ...a } = t, { children: m, ...l } = r, c = Object.keys(a), p = Object.keys(l);
+  if (c.length !== p.length)
     return !1;
-  for (const i of d) {
+  for (const i of c) {
     if (!Object.prototype.hasOwnProperty.call(l, i))
       return !1;
     const f = a[i], w = l[i];
@@ -1241,21 +1275,21 @@ const mr = ({ navigationControlsRef: t }) => {
   return !0;
 });
 ut.displayName = "PyrionNavigationDrawer.LayoutBase";
-const ft = O(({ children: t }) => /* @__PURE__ */ e.jsx(V.Outlet, { children: t }));
+const ft = _(({ children: t }) => /* @__PURE__ */ e.jsx(K.Outlet, { children: t }));
 ft.displayName = "PyrionNavigationDrawer.IsolatedOutlet";
 const mt = Le(null), zr = () => {
   const t = Ot(mt);
   if (!t)
     throw new Error("usePyrionLayout debe usarse dentro de PyrionLayout");
   return t;
-}, Wr = ({ children: t, helpSection: r, state: n, links: a, onLinkClick: m, onNavigate: l, onLogoutClick: d, actions: h, activeActionId: i, onActionClick: f, tabsProps: w, currentSystemId: p, onSessionClick: b, onSystemLogoClick: S, onProfileClick: j, ...u }) => {
-  const v = Object.assign({
+}, Wr = ({ children: t, helpSection: r, state: n, links: a, onLinkClick: m, onNavigate: l, onLogoutClick: c, actions: p, activeActionId: i, onActionClick: f, tabsProps: w, currentSystemId: d, onSessionClick: h, onSystemLogoClick: C, onProfileClick: j, ...u }) => {
+  const x = Object.assign({
     closeDrawerOnNavigate: !0,
     disableDragOpen: {
       sidebar: !0,
       drawer: !1
     }
-  }, u.options), A = Lt(), c = I(null), P = I(null), N = I({}), B = I("notifications"), H = I(/* @__PURE__ */ new Set()), $ = I(null), q = I(null), F = I(null), [Q, M] = R({ total: 0, unread: 0 }), [_, U] = R(!1), [X, Z] = R(null), K = x((s) => {
+  }, u.options), k = Lt(), g = I(null), R = I(null), N = I({}), D = I("notifications"), V = I(/* @__PURE__ */ new Set()), z = I(null), $ = I(null), B = I(null), [W, P] = U({ total: 0, unread: 0 }), [T, F] = U(!1), [G, Z] = U(null), Y = b((s) => {
     if (!(!s || typeof window > "u")) {
       if (m) {
         m(s);
@@ -1263,17 +1297,17 @@ const mt = Le(null), zr = () => {
       }
       window.history.pushState({}, "", s), window.dispatchEvent(new PopStateEvent("popstate"));
     }
-  }, [m]), ne = x((s) => {
-    U(!1);
-    const y = window.location.pathname;
-    K(s), v.closeDrawerOnNavigate && Tt() && !N.current?.getIsCollapsed?.() && N.current?.toggleCollapse?.(), l && l(y, s);
-  }, [K, l, v.closeDrawerOnNavigate]), W = (s) => {
+  }, [m]), ne = b((s) => {
+    F(!1);
+    const S = window.location.pathname;
+    Y(s), x.closeDrawerOnNavigate && Tt() && !N.current?.getIsCollapsed?.() && N.current?.toggleCollapse?.(), l && l(S, s);
+  }, [Y, l, x.closeDrawerOnNavigate]), q = (s) => {
     s && window.open(s, "_blank");
   }, we = (s) => {
     typeof window < "u" && s && (window.location.href = s);
-  }, fe = x((s) => {
-    s && K(s);
-  }, [K]), me = {
+  }, fe = b((s) => {
+    s && Y(s);
+  }, [Y]), me = {
     system: {
       mobile: {
         internal: fe,
@@ -1281,57 +1315,57 @@ const mt = Le(null), zr = () => {
       },
       desktop: {
         internal: fe,
-        external: W
+        external: q
       }
     },
     product: {
-      mobile: W,
-      desktop: W
+      mobile: q,
+      desktop: q
     }
-  }, ve = x((s) => {
+  }, ve = b((s) => {
     if (s)
       try {
-        const y = typeof window < "u" ? window.location.origin : "http://localhost", T = new URL(s, y);
-        return `${T.pathname}${T.search}${T.hash}`;
+        const S = typeof window < "u" ? window.location.origin : "http://localhost", E = new URL(s, S);
+        return `${E.pathname}${E.search}${E.hash}`;
       } catch {
         return;
       }
-  }, []), ee = x((s) => {
-    const y = A ? "mobile" : "desktop", T = n.enabled_systems.find((he) => he.name === s), k = T?._id === p ? "internal" : "external";
-    console.log("navigationType", k);
-    const z = {
-      internal: ve(T?.url),
-      external: T?.url
+  }, []), ee = b((s) => {
+    const S = k ? "mobile" : "desktop", E = n.enabled_systems.find((he) => he.name === s), A = E?._id === d ? "internal" : "external";
+    console.log("navigationType", A);
+    const H = {
+      internal: ve(E?.url),
+      external: E?.url
     };
-    console.log("sanitizedUrl", z), me.system[y][k](z[k]), w?.onTabClick?.(s);
-  }, [p, ve, A, n.enabled_systems, w?.onTabClick]), Ne = x((s) => {
-    const y = A ? "mobile" : "desktop", T = n.company.products?.find((k) => k.name === s)?.domain;
-    me.product[y](T), w?.onTabClick?.(s);
-  }, [A, n.company.products, w?.onTabClick]), pe = x((s, y) => {
-    if (y) {
-      y(s), w?.onTabClick?.(s);
+    console.log("sanitizedUrl", H), me.system[S][A](H[A]), w?.onTabClick?.(s);
+  }, [d, ve, k, n.enabled_systems, w?.onTabClick]), Ne = b((s) => {
+    const S = k ? "mobile" : "desktop", E = n.company.products?.find((A) => A.name === s)?.domain;
+    me.product[S](E), w?.onTabClick?.(s);
+  }, [k, n.company.products, w?.onTabClick]), pe = b((s, S) => {
+    if (S) {
+      S(s), w?.onTabClick?.(s);
       return;
     } else
       w?.onTabClick?.(s);
-  }, [w?.onTabClick]), ye = x(() => {
+  }, [w?.onTabClick]), ye = b(() => {
     const s = {};
-    n.enabled_systems.forEach((T) => {
-      s[T.url] = T.name;
+    n.enabled_systems.forEach((E) => {
+      s[E.url] = E.name;
     });
-    const y = window.location.origin;
-    for (const [T, k] of Object.entries(s))
-      if (y === T)
-        return k;
+    const S = window.location.origin;
+    for (const [E, A] of Object.entries(s))
+      if (S === E)
+        return A;
     return "";
   }, [n.enabled_systems]), te = w?.currentTabName || ye(), ie = re(
     () => n.sessions || [],
     [n.sessions]
-  ), oe = (s) => s == null ? null : typeof s == "string" || typeof s == "number" || typeof s == "boolean" ? String(s) : ce(s) ? s : typeof s == "object" ? JSON.stringify(s) : null, o = x((s, y) => {
+  ), oe = (s) => s == null ? null : typeof s == "string" || typeof s == "number" || typeof s == "boolean" ? String(s) : ce(s) ? s : typeof s == "object" ? JSON.stringify(s) : null, o = b((s, S) => {
     if (!s) return null;
     if (Array.isArray(s)) {
-      const T = s?.[0] ? be(y, s[0]) : null, k = s?.[1] ? be(y, s[1]) : null, z = oe(T), he = oe(k);
+      const E = s?.[0] ? be(S, s[0]) : null, A = s?.[1] ? be(S, s[1]) : null, H = oe(E), he = oe(A);
       return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default overflow-hidden truncate", children: z }),
+        /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default overflow-hidden truncate", children: H }),
         he && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 flex-1 grow shrink-0 min-w-max max-w-2/3 overflow-visible ", children: [
           /* @__PURE__ */ e.jsx("span", { className: "size-0.5 bg-(--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: he })
@@ -1339,138 +1373,138 @@ const mt = Le(null), zr = () => {
       ] });
     }
     if (typeof s == "string") {
-      const T = be(y, s);
-      return oe(T);
+      const E = be(S, s);
+      return oe(E);
     }
-    return typeof s == "function" ? oe(s(y)) : null;
-  }, []), g = x(
+    return typeof s == "function" ? oe(s(S)) : null;
+  }, []), v = b(
     (s) => {
-      const y = v?.userCardOptions?.secondarySlot;
-      if (!y) return null;
-      const T = n.enabled_systems?.find((z) => z._id === p), k = { company: n.company, user: n.user, system: T, metadata: s };
-      return o(y, k);
+      const S = x?.userCardOptions?.secondarySlot;
+      if (!S) return null;
+      const E = n.enabled_systems?.find((H) => H._id === d), A = { company: n.company, user: n.user, system: E, metadata: s };
+      return o(S, A);
     },
-    [p, v?.userCardOptions?.secondarySlot, o, n.company, n.enabled_systems, n.user]
-  ), L = x(
+    [d, x?.userCardOptions?.secondarySlot, o, n.company, n.enabled_systems, n.user]
+  ), O = b(
     (s) => {
-      const y = v?.sessionCardOptions?.secondarySlot || v?.userCardOptions?.secondarySlot;
-      if (!y) return null;
-      const T = n.enabled_systems?.find((z) => z._id === p), k = { company: n.company, user: s.auth_id, metadata: s?.metadata, system: T };
-      return o(y, k);
+      const S = x?.sessionCardOptions?.secondarySlot || x?.userCardOptions?.secondarySlot;
+      if (!S) return null;
+      const E = n.enabled_systems?.find((H) => H._id === d), A = { company: n.company, user: s.auth_id, metadata: s?.metadata, system: E };
+      return o(S, A);
     },
-    [p, v?.sessionCardOptions?.secondarySlot, v?.userCardOptions?.secondarySlot, o, n.company, n.enabled_systems]
-  ), E = re(() => {
+    [d, x?.sessionCardOptions?.secondarySlot, x?.userCardOptions?.secondarySlot, o, n.company, n.enabled_systems]
+  ), M = re(() => {
     const s = [];
     return N.current.openNotifications = () => {
-      B.current = "notifications", H.current.forEach((y) => y("notifications")), N.current.openSidebar?.();
+      D.current = "notifications", V.current.forEach((S) => S("notifications")), N.current.openSidebar?.();
     }, N.current.openHelp = () => {
-      B.current = "help", H.current.forEach((y) => y("help")), N.current.openSidebar?.();
-    }, !v?.notificationsDrawerOptions?.hideActionButton && !v?.notificationsDrawerOptions?.hide && s.push({
+      D.current = "help", V.current.forEach((S) => S("help")), N.current.openSidebar?.();
+    }, !x?.notificationsDrawerOptions?.hideActionButton && !x?.notificationsDrawerOptions?.hide && s.push({
       id: "notifications",
       title: "Notificaciones",
       icon: Ke,
       onClick: N.current.openNotifications,
-      count: Q.unread,
+      count: W.unread,
       className: "default-action-notifications"
-    }), !v?.helpSectionDrawerOptions?.hideActionButton && r && !v?.helpSectionDrawerOptions?.hide && s.push({
+    }), !x?.helpSectionDrawerOptions?.hideActionButton && r && !x?.helpSectionDrawerOptions?.hide && s.push({
       id: "help",
       title: "Ayuda",
       icon: qe,
       onClick: N.current.openHelp,
       className: "default-action-help"
-    }), v?.configurationActionOptions?.onClick && !v?.configurationActionOptions?.hideActionButton && s.push({
+    }), x?.configurationActionOptions?.onClick && !x?.configurationActionOptions?.hideActionButton && s.push({
       id: "configuration",
       title: "Configuracion",
       icon: Wt,
-      onClick: () => v.configurationActionOptions?.onClick?.(N.current),
+      onClick: () => x.configurationActionOptions?.onClick?.(N.current),
       className: "default-action-configuration"
     }), s;
-  }, [v, r, f, Q]), J = re(
-    () => [...E, ...h || []],
-    [E, h]
-  ), G = re(() => {
-    const s = n.enabled_systems.map((k) => ({
-      name: k.name,
-      thumbnail: k.thumbnail,
+  }, [x, r, f, W]), Q = re(
+    () => [...M, ...p || []],
+    [M, p]
+  ), X = re(() => {
+    const s = n.enabled_systems.map((A) => ({
+      name: A.name,
+      thumbnail: A.thumbnail,
       onClick: ee,
-      id: k._id
-    })) || [], y = w?.customTabs?.map((k) => ({
-      ...k,
-      onClick: () => pe(k.name, k?.onClick)
-    })) || [], T = n.company.products?.map((k) => ({
-      name: k.name,
-      thumbnail: k.thumbnail,
+      id: A._id
+    })) || [], S = w?.customTabs?.map((A) => ({
+      ...A,
+      onClick: () => pe(A.name, A?.onClick)
+    })) || [], E = n.company.products?.map((A) => ({
+      name: A.name,
+      thumbnail: A.thumbnail,
       onClick: Ne
     })) || [];
-    return [...s, ...y, ...T];
-  }, [pe, Ne, ee, n.enabled_systems, n.company.products, w?.customTabs]), Se = x((s, y) => {
-    c.current?.addNewNotification ? c.current.addNewNotification(s, y) : console.warn("Notifications controls not ready yet");
-  }, []), Ce = x((s) => c.current?.subscribeToUpdates ? c.current.subscribeToUpdates(s) : (console.warn("Notifications controls not ready yet"), () => {
-  }), []), pt = x((s) => {
-    c.current?.removeNotification ? c.current.removeNotification(s) : console.warn("Notifications controls not ready yet");
-  }, []), ht = x(() => {
-    c.current?.removeAllNotifications ? c.current.removeAllNotifications() : console.warn("Notifications controls not ready yet");
-  }, []), bt = x((s) => {
-    c.current?.setNotifications ? c.current.setNotifications(s) : console.warn("Notifications controls not ready yet");
-  }, []), xt = x((s, y) => P.current?.subscribeToScrollTarget ? P.current.subscribeToScrollTarget(s, y) : (console.warn("Scrollable controls not ready yet"), () => {
-  }), []), gt = x((s) => (H.current.add(s), () => H.current.delete(s)), []), wt = x((s, y = "load_more") => {
-    c.current?.setLoading ? c.current.setLoading(s, y) : console.warn("Notifications controls not ready yet");
-  }, []), vt = x((s, y) => {
-    c.current?.setError ? c.current.setError(s, y) : console.warn("Notifications controls not ready yet");
-  }, []), Nt = x(() => {
-    $.current?.open();
-  }, []), yt = x(() => {
-    $.current?.close();
-  }, []), St = x(() => {
-    $.current?.toggle();
-  }, []), Ct = x((s, y, T) => {
-    const k = /* @__PURE__ */ e.jsxs("div", { className: D(" bg-black/60 z-100 inset-0 h-full w-full grid place-items-center text-neutral-default-default", y ? "fixed" : "sticky"), children: [
-      !T && /* @__PURE__ */ e.jsx(Ee, { label: "", icon: /* @__PURE__ */ e.jsx(_e, {}), onClick: () => U(!1), variant: "text", className: "absolute top-0 right-0", size: "small", color: "secondary" }),
+    return [...s, ...S, ...E];
+  }, [pe, Ne, ee, n.enabled_systems, n.company.products, w?.customTabs]), Se = b((s, S) => {
+    g.current?.addNewNotification ? g.current.addNewNotification(s, S) : console.warn("Notifications controls not ready yet");
+  }, []), Ce = b((s) => g.current?.subscribeToUpdates ? g.current.subscribeToUpdates(s) : (console.warn("Notifications controls not ready yet"), () => {
+  }), []), pt = b((s) => {
+    g.current?.removeNotification ? g.current.removeNotification(s) : console.warn("Notifications controls not ready yet");
+  }, []), ht = b(() => {
+    g.current?.removeAllNotifications ? g.current.removeAllNotifications() : console.warn("Notifications controls not ready yet");
+  }, []), bt = b((s) => {
+    g.current?.setNotifications ? g.current.setNotifications(s) : console.warn("Notifications controls not ready yet");
+  }, []), xt = b((s, S) => R.current?.subscribeToScrollTarget ? R.current.subscribeToScrollTarget(s, S) : (console.warn("Scrollable controls not ready yet"), () => {
+  }), []), gt = b((s) => (V.current.add(s), () => V.current.delete(s)), []), wt = b((s, S = "load_more") => {
+    g.current?.setLoading ? g.current.setLoading(s, S) : console.warn("Notifications controls not ready yet");
+  }, []), vt = b((s, S) => {
+    g.current?.setError ? g.current.setError(s, S) : console.warn("Notifications controls not ready yet");
+  }, []), Nt = b(() => {
+    z.current?.open();
+  }, []), yt = b(() => {
+    z.current?.close();
+  }, []), St = b(() => {
+    z.current?.toggle();
+  }, []), Ct = b((s, S, E) => {
+    const A = /* @__PURE__ */ e.jsxs("div", { className: L(" bg-black/60 z-100 inset-0 h-full w-full grid place-items-center text-neutral-default-default", S ? "fixed" : "sticky"), children: [
+      !E && /* @__PURE__ */ e.jsx(Ee, { label: "", icon: /* @__PURE__ */ e.jsx(_e, {}), onClick: () => F(!1), variant: "text", className: "absolute top-0 right-0", size: "small", color: "secondary" }),
       typeof s == "function" ? s() : s
     ] });
-    let z;
-    return y ? z = Be(k, document.body, `modal-error-${Date.now()}`) : F.current && (z = Be(k, F.current, `modal-error-${Date.now()}`)), Z(z), U(!0), k;
-  }, [F]), jt = x(() => {
-    U(!1);
-  }, []), kt = x(() => {
-    d?.(N.current);
-  }, [d]), Dt = x((s) => {
+    let H;
+    return S ? H = Be(A, document.body, `modal-error-${Date.now()}`) : B.current && (H = Be(A, B.current, `modal-error-${Date.now()}`)), Z(H), F(!0), A;
+  }, [B]), jt = b(() => {
+    F(!1);
+  }, []), kt = b(() => {
+    c?.(N.current);
+  }, [c]), Dt = b((s) => {
     j?.(s, N.current);
-  }, [j]), At = x((s, y) => {
-    b?.(s, y, N.current);
-  }, [b]);
-  return N.current.addNewNotification = Se, N.current.subscribeToNotificationsUpdates = Ce, N.current.removeNotification = pt, N.current.removeAllNotifications = ht, N.current.setNotifications = bt, N.current.setNotificationsError = vt, N.current.setNotificationsLoading = wt, N.current.subscribeToNotificationsScroll = xt, N.current.showErrorModal = Ct, N.current.closeErrorModal = jt, N.current.userCardExpand = Nt, N.current.userCardCollapse = yt, N.current.userCardToggle = St, N.current.subscribeToSection = gt, Y(() => {
-    Ce((s, y) => {
-      M(y);
+  }, [j]), At = b((s, S) => {
+    h?.(s, S, N.current);
+  }, [h]);
+  return N.current.addNewNotification = Se, N.current.subscribeToNotificationsUpdates = Ce, N.current.removeNotification = pt, N.current.removeAllNotifications = ht, N.current.setNotifications = bt, N.current.setNotificationsError = vt, N.current.setNotificationsLoading = wt, N.current.subscribeToNotificationsScroll = xt, N.current.showErrorModal = Ct, N.current.closeErrorModal = jt, N.current.userCardExpand = Nt, N.current.userCardCollapse = yt, N.current.userCardToggle = St, N.current.subscribeToSection = gt, J(() => {
+    Ce((s, S) => {
+      P(S);
     });
   }, [Ce]), /* @__PURE__ */ e.jsxs(mt.Provider, { value: N.current, children: [
-    _ && X,
+    T && G,
     /* @__PURE__ */ e.jsx("div", { className: "flex h-screen", children: /* @__PURE__ */ e.jsx(
       ut,
       {
         links: a,
         handleNavigation: ne,
-        allActions: J,
+        allActions: Q,
         activeActionId: i,
         onActionClick: f,
         state: n,
         currentAppSessions: ie,
-        resolveUserSecondarySlot: g,
-        resolveSessionSecondarySlot: L,
+        resolveUserSecondarySlot: v,
+        resolveSessionSecondarySlot: O,
         onSessionClick: At,
         onLogoutClick: kt,
-        options: v,
-        currentSystemId: p,
-        userOptionsControls: $,
-        mobileAppSwitcherControls: q,
-        onSystemLogoClick: S,
-        tabs: G,
+        options: x,
+        currentSystemId: d,
+        userOptionsControls: z,
+        mobileAppSwitcherControls: $,
+        onSystemLogoClick: C,
+        tabs: X,
         helpSection: r,
-        initialSectionRef: B,
+        initialSectionRef: D,
         navigationControlsRef: N,
-        notificationsListControls: c,
-        scrollableControls: P,
-        outletRef: F,
+        notificationsListControls: g,
+        scrollableControls: R,
+        outletRef: B,
         onProfileClick: Dt,
         currentTabName: te,
         children: t