prometeo-design-system 4.8.3 → 4.8.4

package/dist/PyrionLayout.es.js

@@ -1,33 +1,33 @@
 import { j as e } from "./jsx-runtime-GkKLlHH4.js";
-import { u as Je, g as Nt } from "./useDevice-vwn4GLwK.js";
+import { u as Je, g as yt } from "./useDevice-vwn4GLwK.js";
 import { c as D } from "./cn-B6yFEsav.js";
 import { g as Se } from "./utils-X4-h3cum.js";
-import qe, { forwardRef as be, useState as J, useRef as I, useEffect as se, memo as P, useContext as Ge, createContext as Me, useCallback as x, Children as yt, isValidElement as ke, useMemo as pe, useImperativeHandle as Re, useLayoutEffect as Ct, use as jt } from "react";
+import qe, { forwardRef as be, useState as J, useRef as I, useEffect as se, memo as P, useContext as Ge, createContext as Me, useCallback as x, Children as Ct, isValidElement as ke, useMemo as pe, useImperativeHandle as Re, useLayoutEffect as jt, use as St } from "react";
 import { createPortal as $e } from "react-dom";
-import { useLocation as St, useNavigate as kt } from "react-router";
+import { useLocation as Qe, useNavigate as kt } from "react-router";
 import ce from "./Skeleton.es.js";
 import { CloseNavBarDesktop as Lt } from "./Icons/CloseNavBarDesktop.es.js";
 import { c as Be } from "./index-BOQuZ0gG.js";
-import { B as Qe } from "./badge-BEx-0Q-K.js";
+import { B as Ze } from "./badge-BEx-0Q-K.js";
 import Dt from "./PlainTooltip.es.js";
 import { CrevronLeft as At } from "./Icons/CrevronLeft.es.js";
 import { Scrollable as xe } from "./Scrollable.es.js";
 import ie from "./TicketCard.es.js";
-import Ze from "./UserCard.es.js";
+import et from "./UserCard.es.js";
 import he from "./Button.es.js";
 import { Logout as Tt } from "./Icons/Logout.es.js";
 import Ot from "./NotificationCard.es.js";
 import { T as It, a as Et } from "./TabLinks-DnoWdrdk.js";
-import { Notifications as et } from "./Icons/Notifications.es.js";
+import { Notifications as tt } from "./Icons/Notifications.es.js";
 import { Close as Fe } from "./Icons/Close.es.js";
-import { Help as tt } from "./Icons/Help.es.js";
+import { Help as rt } from "./Icons/Help.es.js";
 import { Settings as _t } from "./Icons/Settings.es.js";
 const Pt = be((t, r) => {
-  const [s, a] = J(t?.currentTabName || t.tabs[0]?.name), c = I(null), { tabs: l = [], className: d, activeColor: i = "var(--neutral-900)", currentSystemId: m, isLoading: h = !1 } = t;
-  console.log("tabs en el tabswitch del layout", l, m), se(() => {
+  const [s, a] = J(t?.currentTabName || t.tabs[0]?.name), c = I(null), { tabs: l = [], className: d, activeColor: i = "var(--neutral-900)", currentSystemId: p, isLoading: h = !1 } = t;
+  console.log("tabs en el tabswitch del layout", l, p), se(() => {
     c.current?.style.setProperty("--tab-bg", i);
   }, [i]);
-  const b = l.find((p) => p?.id === m || p?.name === t?.currentTabName) || l.find((p) => p?.name === s);
+  const b = l.find((u) => u?.id === p || u?.name === t?.currentTabName) || l.find((u) => u?.name === s);
   return /* @__PURE__ */ e.jsx(
     "div",
     {
@@ -41,7 +41,7 @@ const Pt = be((t, r) => {
         d
       ),
       children: (h ? Array(3).fill(null) : l).map(
-        (p, g) => {
+        (u, g) => {
           if (h) return /* @__PURE__ */ e.jsx(
             "div",
             {
@@ -58,12 +58,12 @@ const Pt = be((t, r) => {
                 "grid place-items-center",
                 "tab-thumbnail-icon",
                 "bg-transparent text-neutral-default-default",
-                p?.className
+                u?.className
               ), children: /* @__PURE__ */ e.jsx(ce, { shape: "rounded", className: "w-full h-full" }) })
             }
           );
-          const j = p?.name === b?.name, A = 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 || (a(p?.name), p.onClick && p.onClick(p?.name));
+          const j = u?.name === b?.name, A = typeof u?.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: u?.thumbnail, alt: u?.description, className: "aspect-square object-contain rounded", draggable: !1 }) : u?.thumbnail, y = () => {
+            u.disabled || (a(u?.name), u.onClick && u.onClick(u?.name));
           };
           return /* @__PURE__ */ e.jsx(
             "div",
@@ -83,17 +83,17 @@ const Pt = be((t, r) => {
                 "grid place-items-center",
                 "tab-thumbnail-icon",
                 "bg-transparent text-neutral-default-default",
-                p?.className
+                u?.className
               ), children: A })
             },
-            p?.name
+            u?.name
           );
         }
       )
     }
   );
-}), rt = P(be(({ children: t, className: r, context: s, modal: a = !1, closeOnOverlayClick: c = !1, unmountChildrenOnClose: l = !0 }, d) => {
-  const i = ge(t, s), m = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: h } = Mt(), { closeSidebar: b } = de(), [p, g] = J(() => l ? h : !0), [j, A] = J(!1);
+}), st = P(be(({ children: t, className: r, context: s, modal: a = !1, closeOnOverlayClick: c = !1, unmountChildrenOnClose: l = !0 }, d) => {
+  const i = ge(t, s), p = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: h } = Mt(), { closeSidebar: b } = de(), [u, g] = J(() => l ? h : !0), [j, A] = J(!1);
   return se(() => {
     l && s?.subscribeToSidebarOpen((y) => {
       y ? (A(!1), g(!0)) : A(!0);
@@ -105,8 +105,8 @@ const Pt = be((t, r) => {
       j && (g(!1), A(!1));
     };
     return y.addEventListener("transitionend", C), () => y.removeEventListener("transitionend", C);
-  }, [j]), /* @__PURE__ */ e.jsxs("div", { ref: d, className: D("sidebar", m ? "collapsed" : "expanded", "h-full overflow-auto", r), "aria-modal": a || void 0, children: [
-    a && m && /* @__PURE__ */ e.jsx(
+  }, [j]), /* @__PURE__ */ e.jsxs("div", { ref: d, className: D("sidebar", p ? "collapsed" : "expanded", "h-full overflow-auto", r), "aria-modal": a || void 0, children: [
+    a && p && /* @__PURE__ */ e.jsx(
       "div",
       {
         className: D("navigation-drawer-sidebar-overlay"),
@@ -118,21 +118,21 @@ const Pt = be((t, r) => {
     ),
     /* @__PURE__ */ e.jsxs("div", { className: D("navigation-drawer-sidebar-inner"), children: [
       /* @__PURE__ */ e.jsx("div", { className: "secure-click-margin" }),
-      p && i
+      u && i
     ] })
   ] });
-})), st = Me(null), nt = Me(null), Mt = () => {
-  const t = Ge(st);
+})), nt = Me(null), at = Me(null), Mt = () => {
+  const t = Ge(nt);
   if (!t) throw new Error("useDrawerState must be used within NavigationDrawer");
   return t;
 }, de = () => {
-  const t = Ge(nt);
+  const t = Ge(at);
   if (!t) throw new Error("useDrawerActions must be used within NavigationDrawer");
   return t;
-}, ge = (t, r) => typeof t == "function" ? r ? t(r) : null : t, at = "navigation-drawer-collapsed", Ke = () => {
+}, ge = (t, r) => typeof t == "function" ? r ? t(r) : null : t, ot = "navigation-drawer-collapsed", Ke = () => {
   if (typeof window > "u") return !1;
   try {
-    const t = sessionStorage.getItem(at);
+    const t = sessionStorage.getItem(ot);
     return t ? JSON.parse(t) : !1;
   } catch {
     return !1;
@@ -140,60 +140,60 @@ const Pt = be((t, r) => {
 }, Rt = (t) => {
   if (!(typeof window > "u"))
     try {
-      sessionStorage.setItem(at, JSON.stringify(t));
+      sessionStorage.setItem(ot, JSON.stringify(t));
     } catch {
     }
 }, Bt = (t) => {
-  const { children: r, classNameDrawer: s, classNameSidebar: a, disableDragOpen: c, modal: l = !0, closeOnOutsideClick: d = !0 } = t, i = I(null), m = I(null), h = t.outletRef ?? I(null), b = I(null), p = I(Ke()), g = I(!1), j = I("drawer"), A = I(/* @__PURE__ */ new Set()), y = I(/* @__PURE__ */ new Set()), C = I(!1), S = I(null), K = x((n) => {
-    const f = m.current;
-    f && (f.classList.toggle("collapsed", n), f.classList.toggle("expanded", !n));
+  const { children: r, classNameDrawer: s, classNameSidebar: a, disableDragOpen: c, modal: l = !0, closeOnOutsideClick: d = !0 } = t, i = I(null), p = I(null), h = t.outletRef ?? I(null), b = I(null), u = I(Ke()), g = I(!1), j = I("drawer"), A = I(/* @__PURE__ */ new Set()), y = I(/* @__PURE__ */ new Set()), C = I(!1), S = I(null), K = x((n) => {
+    const m = p.current;
+    m && (m.classList.toggle("collapsed", n), m.classList.toggle("expanded", !n));
   }, []), z = x((n) => {
-    const f = b.current;
-    if (!f) return;
-    f.classList.toggle("collapsed", n), f.classList.toggle("expanded", !n);
+    const m = b.current;
+    if (!m) return;
+    m.classList.toggle("collapsed", n), m.classList.toggle("expanded", !n);
     const w = i.current;
     w && (w.classList.toggle("sidebar-collapsed", n), w.classList.toggle("sidebar-expanded", !n));
   }, []), k = x(
-    (n, { notify: f = !0 } = {}) => {
-      const w = p.current !== n;
-      p.current = n, Rt(n), K(n), f && w && A.current.forEach((E) => E(n));
+    (n, { notify: m = !0 } = {}) => {
+      const w = u.current !== n;
+      u.current = n, Rt(n), K(n), m && w && A.current.forEach((E) => E(n));
     },
     [K]
   ), U = x(
-    (n, { notify: f = !0 } = {}) => {
+    (n, { notify: m = !0 } = {}) => {
       const w = g.current !== n;
-      if (g.current = n, z(n), f && w) {
+      if (g.current = n, z(n), m && w) {
         const E = !n;
         y.current.forEach((H) => H(E));
       }
     },
     [z]
   ), v = x(
-    (n, { notify: f = !0 } = {}) => {
+    (n, { notify: m = !0 } = {}) => {
       const w = j.current, E = w !== n;
-      j.current = n, window.matchMedia("(min-width: 768px)").matches || k(n !== "drawer", { notify: f });
+      j.current = n, window.matchMedia("(min-width: 768px)").matches || k(n !== "drawer", { notify: m });
       const H = w === "sidebar", R = n === "sidebar";
-      f && E && H !== R && y.current.forEach((te) => te(R)), U(n !== "sidebar", { notify: f }), k(n !== "drawer", { notify: f });
+      m && E && H !== R && y.current.forEach((te) => te(R)), U(n !== "sidebar", { notify: m }), k(n !== "drawer", { notify: m });
     },
     [k, U]
   ), q = x((n) => {
-    const f = i.current;
-    if (!f || window.matchMedia("(min-width: 768px)").matches) return;
+    const m = i.current;
+    if (!m || window.matchMedia("(min-width: 768px)").matches) return;
     C.current = !0;
     const w = h.current?.offsetLeft ?? 0, E = b.current?.offsetLeft ?? w, H = n === "drawer" ? 0 : n === "sidebar" ? E : w;
-    S.current = H, f.scrollTo({ left: H, behavior: "smooth" });
+    S.current = H, m.scrollTo({ left: H, behavior: "smooth" });
     const R = () => {
-      C.current = !1, S.current = null, f.removeEventListener("scrollend", R);
+      C.current = !1, S.current = null, m.removeEventListener("scrollend", R);
     };
-    f.addEventListener("scrollend", R, { once: !0 }), setTimeout(() => {
+    m.addEventListener("scrollend", R, { once: !0 }), setTimeout(() => {
       C.current && R();
     }, 1e3);
   }, []), G = x(() => {
-    const n = i.current, f = h.current;
-    if (!n || !f || window.matchMedia("(min-width: 768px)").matches) return;
+    const n = i.current, m = h.current;
+    if (!n || !m || window.matchMedia("(min-width: 768px)").matches) return;
     const w = [
       { panel: "drawer", offset: 0 },
-      { panel: "outlet", offset: f.offsetLeft }
+      { panel: "outlet", offset: m.offsetLeft }
     ], E = b.current;
     E && w.push({ panel: "sidebar", offset: E.offsetLeft });
     const H = n.scrollLeft;
@@ -208,15 +208,15 @@ 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, f = h.current;
-    if (!n || !f) return;
+    const n = i.current, m = h.current;
+    if (!n || !m) return;
     if (window.matchMedia("(min-width: 768px)").matches) {
       const E = Ke();
       k(E, { notify: !1 }), U(!0, { notify: !1 });
       return;
     }
     requestAnimationFrame(() => {
-      n.scrollLeft = f.offsetLeft, v("outlet");
+      n.scrollLeft = m.offsetLeft, v("outlet");
     });
   }, [v, k, U]), se(() => {
     const n = i.current;
@@ -273,25 +273,25 @@ const Pt = be((t, r) => {
     };
   }, [G]);
   const V = x(() => {
-    const n = window.matchMedia("(min-width: 768px)").matches, f = !p.current;
+    const n = window.matchMedia("(min-width: 768px)").matches, m = !u.current;
     if (n) {
-      k(f);
+      k(m);
       return;
     }
-    const w = f ? "outlet" : "drawer";
+    const w = m ? "outlet" : "drawer";
     v(w), q(w);
   }, [q, v, k]), X = I(null);
   X.current || (X.current = {
     toggleCollapse: () => V(),
     getIsCollapsed: () => {
       if (!window.matchMedia("(min-width: 768px)").matches) {
-        const f = i.current, w = h.current;
-        if (f && w) {
-          const E = f.scrollLeft, H = w.offsetLeft, R = Math.abs(E - H) < Math.abs(E - 0);
-          return R !== p.current && (p.current = R, K(R)), R;
+        const m = i.current, w = h.current;
+        if (m && w) {
+          const E = m.scrollLeft, H = w.offsetLeft, R = Math.abs(E - H) < Math.abs(E - 0);
+          return R !== u.current && (u.current = R, K(R)), R;
         }
       }
-      return p.current;
+      return u.current;
     },
     subscribeToCollapse: (n) => (A.current.add(n), () => {
       A.current.delete(n);
@@ -326,38 +326,38 @@ const Pt = be((t, r) => {
       y.current.delete(n);
     }),
     setDrawerDragEnabled: (n) => {
-      const f = i.current;
-      if (!f) return;
-      const w = f.scrollLeft;
+      const m = i.current;
+      if (!m) return;
+      const w = m.scrollLeft;
       if (n) {
-        const E = f.style.scrollBehavior;
-        f.style.scrollBehavior = "auto", f.classList.remove("disabled-dragopen"), requestAnimationFrame(() => {
-          f.scrollLeft = w, requestAnimationFrame(() => {
-            f.style.scrollBehavior = E;
+        const E = m.style.scrollBehavior;
+        m.style.scrollBehavior = "auto", m.classList.remove("disabled-dragopen"), requestAnimationFrame(() => {
+          m.scrollLeft = w, requestAnimationFrame(() => {
+            m.style.scrollBehavior = E;
           });
         });
       } else
-        f.classList.add("disabled-dragopen");
+        m.classList.add("disabled-dragopen");
     },
     setSidebarDragEnabled: (n) => {
-      const f = i.current;
-      if (f)
+      const m = i.current;
+      if (m)
         if (n) {
-          const w = f.scrollLeft, E = f.style.scrollBehavior;
-          f.style.scrollBehavior = "auto", f.classList.remove("disabled-dragopen-sidebar"), requestAnimationFrame(() => {
-            f.scrollLeft = w, requestAnimationFrame(() => {
-              f.style.scrollBehavior = E;
+          const w = m.scrollLeft, E = m.style.scrollBehavior;
+          m.style.scrollBehavior = "auto", m.classList.remove("disabled-dragopen-sidebar"), requestAnimationFrame(() => {
+            m.scrollLeft = w, requestAnimationFrame(() => {
+              m.style.scrollBehavior = E;
             });
           });
         } else
-          f.classList.add("disabled-dragopen-sidebar");
+          m.classList.add("disabled-dragopen-sidebar");
     }
   });
-  const $ = X.current, _ = typeof r == "function" ? r($) : r, u = yt.toArray(_);
+  const $ = X.current, _ = typeof r == "function" ? r($) : r, f = Ct.toArray(_);
   let O = null, M = null, F = null;
   const Q = [];
   let ae = null, Z = null;
-  u.forEach((n) => {
+  f.forEach((n) => {
     if (!ke(n)) {
       Q.push(n);
       return;
@@ -378,17 +378,17 @@ const Pt = be((t, r) => {
       ae = n;
       return;
     }
-    if (n.type === rt && !Z) {
+    if (n.type === st && !Z) {
       Z = n;
       return;
     }
     Q.push(n);
   });
   const ve = !!M, we = M ?? (Q.length ? /* @__PURE__ */ e.jsx(Le, { children: Q }) : null), Ae = ve ? Q : [], ue = ae ?? (!!ae ? /* @__PURE__ */ e.jsx(_e, { children: _, context: $, modal: l, closeOnOutsideClick: d }) : null), Te = F ?? (!!F ? /* @__PURE__ */ e.jsx(De, { children: F }) : null), Oe = !!Z, ee = Z, fe = pe(() => ({
-    isCollapsed: p.current,
+    isCollapsed: u.current,
     isSidebarOpen: !g.current
-  }), [p.current, g.current]);
-  return /* @__PURE__ */ e.jsx(st.Provider, { value: fe, children: /* @__PURE__ */ e.jsx(nt.Provider, { value: $, children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-container", ref: i, className: D(
+  }), [u.current, g.current]);
+  return /* @__PURE__ */ e.jsx(nt.Provider, { value: fe, children: /* @__PURE__ */ e.jsx(at.Provider, { value: $, 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" : "",
@@ -397,16 +397,16 @@ const Pt = be((t, r) => {
     /* @__PURE__ */ e.jsxs(
       "div",
       {
-        ref: m,
+        ref: p,
         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",
-          p.current ? "collapsed" : "expanded",
+          u.current ? "collapsed" : "expanded",
           s
         ),
         children: [
           /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-1 gap-4 overflow-hidden", children: [
             /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ e.jsx(ot, { onToggleCollapse: V }),
+              /* @__PURE__ */ e.jsx(lt, { onToggleCollapse: V }),
               O
             ] }),
             /* @__PURE__ */ e.jsxs("div", { className: "flex flex-1 overflow-hidden relative flex-col", children: [
@@ -424,7 +424,7 @@ const Pt = be((t, r) => {
       className: D("sidebar", ee.props?.className, a)
     }) : ee
   ] }) }) });
-}, Ye = P(Bt), ot = P(({ onToggleCollapse: t }) => /* @__PURE__ */ e.jsx(
+}, Ye = P(Bt), lt = P(({ onToggleCollapse: t }) => /* @__PURE__ */ e.jsx(
   "button",
   {
     type: "button",
@@ -433,7 +433,7 @@ const Pt = be((t, r) => {
     children: /* @__PURE__ */ e.jsx(Lt, { size: 32, className: "transition-transform duration-300 p-1" })
   }
 ), (t, r) => t.onToggleCollapse === r.onToggleCollapse);
-ot.displayName = "NavigationDrawerCollapseButton";
+lt.displayName = "NavigationDrawerCollapseButton";
 const ze = P(({ children: t, className: r, context: s }) => {
   const a = ge(t, s);
   return /* @__PURE__ */ e.jsx("div", { className: D("flex items-center justify-between", r), children: a });
@@ -449,14 +449,14 @@ const De = P(({ children: t, className: r, context: s }) => {
   return /* @__PURE__ */ e.jsx("div", { className: D("flex items-center justify-between", r), children: a });
 });
 De.displayName = "NavigationDrawerFooter";
-const lt = P(({ className: t }) => /* @__PURE__ */ e.jsx("div", { className: D("w-full border-t border-neutral-strong-default ", t) }));
-lt.displayName = "NavigationDrawerSpacer";
+const it = P(({ className: t }) => /* @__PURE__ */ e.jsx("div", { className: D("w-full border-t border-neutral-strong-default ", t) }));
+it.displayName = "NavigationDrawerSpacer";
 const _e = P(be(({ children: t, className: r, context: s, modal: a, closeOnOutsideClick: c }, l) => {
-  const d = ge(t, s), i = de(), m = () => {
+  const d = ge(t, s), i = de(), p = () => {
     c && (i.toggleCollapse(), i.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: [
-    a && /* @__PURE__ */ e.jsx("div", { className: "navigation-drawer-backdrop select-none", onClick: m }),
+    a && /* @__PURE__ */ e.jsx("div", { className: "navigation-drawer-backdrop select-none", onClick: p }),
     d
   ] }) });
 }), (t, r) => t.children === r.children && t.className === r.className), re = Object.assign(Ye, {
@@ -464,9 +464,9 @@ const _e = P(be(({ children: t, className: r, context: s, modal: a, closeOnOutsi
   Header: ze,
   Content: Le,
   Footer: De,
-  Spacer: lt,
+  Spacer: it,
   Outlet: _e,
-  Sidebar: rt
+  Sidebar: st
 });
 re.displayName = "NavigationDrawer";
 const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
@@ -534,10 +534,10 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
     isSelected: l = !1,
     hasSublinks: d,
     subLinksCollapsed: i,
-    onToggleSublinks: m,
+    onToggleSublinks: p,
     as: h = "div",
     onClick: b,
-    onAuxClick: p,
+    onAuxClick: u,
     disabled: g = !1,
     tooltipText: j,
     selectorCss: A
@@ -549,7 +549,7 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
       /* @__PURE__ */ e.jsx("label", { className: Ut({ disabled: g, isSelected: l }), children: r })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 items-center", children: [
-      a && a ? /* @__PURE__ */ e.jsx(Qe, { count: a, maxCount: 9, className: "badge", disabled: g }) : "",
+      a && a ? /* @__PURE__ */ e.jsx(Ze, { count: a, maxCount: 9, className: "badge", disabled: g }) : "",
       d && /* @__PURE__ */ e.jsx(
         "div",
         {
@@ -565,7 +565,7 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
             {
               disabled: g,
               type: "button",
-              onClick: m,
+              onClick: p,
               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", Ee({ disabled: g, isSelected: l }), g && "pointer-events-none"),
               children: /* @__PURE__ */ e.jsx(At, {})
             }
@@ -584,7 +584,7 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
   if (h === "a") {
     const z = {
       onClick: y,
-      onAuxClick: p,
+      onAuxClick: u,
       className: S
     };
     return /* @__PURE__ */ e.jsx("a", { ...z, children: C });
@@ -606,7 +606,7 @@ const Ft = "hover:bg-neutral-medium-hover", zt = Be("", {
 }, Ue = P(Wt);
 Ue.displayName = "NavigationDrawerItemBase";
 const Ht = (t) => {
-  const { title: r, icon: s, count: a, className: c, isActive: l, onClick: d, isView: i = !0, disabled: m, tooltipText: h, selectorCss: b } = t;
+  const { title: r, icon: s, count: a, className: c, isActive: l, onClick: d, isView: i = !0, disabled: p, tooltipText: h, selectorCss: b } = t;
   return i ? /* @__PURE__ */ e.jsx(
     Ue,
     {
@@ -617,69 +617,69 @@ const Ht = (t) => {
       className: c,
       isSelected: l,
       onClick: d,
-      disabled: m,
+      disabled: p,
       tooltipText: h,
       selectorCss: b
     }
   ) : null;
-}, it = P(Ht);
-it.displayName = "NavigationDrawerActionItem";
+}, ct = P(Ht);
+ct.displayName = "NavigationDrawerActionItem";
 const Vt = ({ actions: t, activeActionId: r, onActionClick: s, className: a }) => /* @__PURE__ */ e.jsx(xe, { className: D("flex flex-col gap-2 w-full ", a), scrollbarProps: { hide: !0 }, persistScroll: "navigation-actions", indicators: {
   top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
   bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
 }, children: t?.map((c) => {
-  const { id: l, onClick: d, isView: i = !0, payload: m, ...h } = c, b = l === r, p = () => {
-    s?.(l, m), d?.();
+  const { id: l, onClick: d, isView: i = !0, payload: p, ...h } = c, b = l === r, u = () => {
+    s?.(l, p), d?.();
   };
   return i ? /* @__PURE__ */ e.jsx(
-    it,
+    ct,
     {
       ...h,
       id: l,
       isActive: b,
-      onClick: p
+      onClick: u
     },
     l
   ) : null;
-}) }), ct = P(Vt);
-ct.displayName = "NavigationDrawerActions";
+}) }), dt = P(Vt);
+dt.displayName = "NavigationDrawerActions";
 const qt = (t) => {
-  const { className: r, title: s, path: a, onClick: c, isSelected: l, parentPath: d } = t, i = x(() => {
+  const { className: r, title: s, path: a, onClick: c, isSelected: l, parentPath: d } = t, { pathname: i } = Qe(), p = x(() => {
     c?.(a);
-  }, [a]), m = x(() => {
+  }, [a]), h = x(() => {
     if (a.startsWith("./")) {
       if (!d) return;
-      const h = d + a.slice(2);
-      window.open(h, "_blank");
+      const u = d + a.slice(2);
+      window.open(u, "_blank");
     } else
       window.open(a, "_blank");
-  }, [a]);
+  }, [a]), b = l || a === i;
   return /* @__PURE__ */ e.jsx(
     "a",
     {
-      onClick: i,
-      onAuxClick: m,
+      onClick: p,
+      onAuxClick: h,
       className: D(
         "group",
         "transition-all duration-300 ease-in-out cursor-pointer",
         "h-10 w-full rounded-lg py-[11px] px-3",
         "hover:bg-neutral-medium-hover",
-        l && "bg-neutral-medium-selected hover:bg-neutral-medium-hover active:bg-transparent focus:bg-transparent",
+        b && "bg-neutral-medium-selected hover:bg-neutral-medium-hover active:bg-transparent focus:bg-transparent",
         r
       ),
       children: /* @__PURE__ */ e.jsx("p", { className: D(
         "prometeo-fonts-label-large text-neutral-medium-default",
         "group-active:text-neutral-default-focused group-focus:text-neutral-default-focused",
-        l && "text-primary-default-default group-hover:text-primary-default-hover group-focus:text-primary-default-focused group-active:text-primary-default-focused"
+        b && "text-primary-default-default group-hover:text-primary-default-hover group-focus:text-primary-default-focused group-active:text-primary-default-focused"
       ), children: s })
     }
   );
-}, dt = P(qt);
-dt.displayName = "NavItemSecondary";
+}, ut = P(qt);
+ut.displayName = "NavItemSecondary";
 const $t = be((t, r) => {
-  const [s, a] = J(!0), c = I(null), { path: l, title: d, icon: i, count: m, className: h, isSelected: b = !1, onClick: p, sublinks: g, toggleCollapse: j, getIsCollapsed: A, subscribeToCollapse: y, isView: C = !0, disabled: S, tooltipText: K, selectorCss: z } = t;
-  se(() => y ? y((u) => {
-    u && a(!0);
+  const [s, a] = J(!0), c = I(null), { path: l, title: d, icon: i, count: p, className: h, isSelected: b = !1, onClick: u, sublinks: g, toggleCollapse: j, getIsCollapsed: A, subscribeToCollapse: y, isView: C = !0, disabled: S, tooltipText: K, selectorCss: z } = t;
+  se(() => y ? y((f) => {
+    f && a(!0);
   }) : void 0, [y]);
   const k = x(() => {
     a((_) => !_);
@@ -704,26 +704,26 @@ const $t = be((t, r) => {
       U(!1), j?.();
       return;
     }
-    p?.(l);
-  }, [l, p, g, j, U, A]), V = x(() => {
+    u?.(l);
+  }, [l, u, g, j, U, A]), V = x(() => {
     window.open(l, "_blank");
   }, [l]), X = () => {
     if (!g || S) return null;
     if (t.subLinksRender && g)
       return t.subLinksRender(g, v);
-    const _ = x((u) => {
-      if (u.startsWith("./")) {
-        const O = l + u.slice(2);
-        p?.(O);
+    const _ = x((f) => {
+      if (f.startsWith("./")) {
+        const O = l + f.slice(2);
+        u?.(O);
       } else
-        p?.(u);
+        u?.(f);
     }, [l]);
     return se(() => {
-      const u = c.current;
-      if (!u) return;
-      const O = u.scrollHeight;
-      u.style.setProperty("--sublinks-max-height", `${O}px`);
-    }, []), /* @__PURE__ */ e.jsx("div", { ref: c, className: `sublinks flex flex-col gap-1 ml-8 ${s ? "collapsed" : "expanded"}`, children: g.map((u) => /* @__PURE__ */ e.jsx(dt, { ...u, onClick: _, parentPath: l }, `${u.title}-${u.path}`)) });
+      const f = c.current;
+      if (!f) return;
+      const O = f.scrollHeight;
+      f.style.setProperty("--sublinks-max-height", `${O}px`);
+    }, []), /* @__PURE__ */ e.jsx("div", { ref: c, className: `sublinks flex flex-col gap-1 ml-8 ${s ? "collapsed" : "expanded"}`, children: g.map((f) => /* @__PURE__ */ e.jsx(ut, { ...f, onClick: _, parentPath: l }, `${f.title}-${f.path}`)) });
   }, $ = (_) => {
     _.stopPropagation(), _.preventDefault(), k();
   };
@@ -734,7 +734,7 @@ const $t = be((t, r) => {
         as: "a",
         title: d,
         icon: q,
-        count: m,
+        count: p,
         className: h,
         isSelected: b,
         hasSublinks: !!g,
@@ -748,17 +748,17 @@ const $t = be((t, r) => {
     ),
     X()
   ] }) : null;
-}), ut = P($t);
-ut.displayName = "NavigationDrawerLinkItem";
+}), ft = P($t);
+ft.displayName = "NavigationDrawerLinkItem";
 const Kt = ({ navlinks: t, handleNavigation: r, className: s, getIsCollapsed: a, toggleCollapse: c, subscribeToCollapse: l }) => {
-  const { pathname: d } = St();
+  const { pathname: d } = Qe();
   return /* @__PURE__ */ e.jsx(xe, { className: D("flex flex-col gap-2 w-full ", s), scrollbarProps: { hide: !0 }, persistScroll: "navigation-links", indicators: {
     top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
     bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
-  }, children: t?.map((i, m) => {
+  }, children: t?.map((i, p) => {
     const h = i.isSelected || i.path === d || (i.relatedPaths?.some((b) => d.startsWith(b)) ?? !1) || (i.sublinks?.some((b) => b.path === d) ?? !1);
     return /* @__PURE__ */ e.jsx(
-      ut,
+      ft,
       {
         ...i,
         isSelected: h,
@@ -770,18 +770,18 @@ const Kt = ({ navlinks: t, handleNavigation: r, className: s, getIsCollapsed: a,
         isView: i.isView,
         selectorCss: i.selectorCss
       },
-      m
+      p
     );
   }) });
-}, ft = P(Kt);
-ft.displayName = "NavigationDrawerNavlinks";
-const mt = P(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId: a, onActionClick: c }) => {
+}, mt = P(Kt);
+mt.displayName = "NavigationDrawerNavlinks";
+const pt = P(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId: a, onActionClick: c }) => {
   const { getIsCollapsed: l, toggleCollapse: d, subscribeToCollapse: i } = de();
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(re.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(
-        ft,
+        mt,
         {
           getIsCollapsed: l,
           toggleCollapse: d,
@@ -792,7 +792,7 @@ const mt = P(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId:
         }
       ),
       /* @__PURE__ */ e.jsx(
-        ct,
+        dt,
         {
           actions: s,
           activeActionId: a,
@@ -803,37 +803,37 @@ const mt = P(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId:
     ] })
   ] });
 }, (t, r) => t.navlinks === r.navlinks && t.handleNavigation === r.handleNavigation && t.allActions === r.allActions && t.activeActionId === r.activeActionId && t.onActionClick === r.onActionClick);
-mt.displayName = "PyrionNavigationDrawer.Content";
+pt.displayName = "PyrionNavigationDrawer.Content";
 const Yt = (t) => {
   const { sessions: r, onSessionClick: s, secondarySlot: a, subImageUrlAccessor: c } = t;
   if (!r || r.length === 0)
     return null;
-  const l = (m, h) => {
-    s && h && s(m, h);
-  }, d = (m) => {
+  const l = (p, h) => {
+    s && h && s(p, h);
+  }, d = (p) => {
     if (!c)
       return;
-    const h = m.metadata;
+    const h = p.metadata;
     if (!h)
       return;
     const b = Se({ metadata: h }, c);
     if (b != null)
       return typeof b == "string" ? b : String(b);
-  }, i = x((m) => typeof a == "function" ? a(m) : a, [a]);
-  return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-2", children: r?.map((m) => {
-    const { auth_id: h } = m;
-    return /* @__PURE__ */ e.jsx(ie, { className: " shrink-0 h-max", children: /* @__PURE__ */ e.jsx(ie.Content, { onClick: () => l(m, t.userOptionsControls), className: "p-0 group-data-[expanded=true]/ticketcard:border-none", children: /* @__PURE__ */ e.jsx(
-      Ze,
+  }, i = x((p) => typeof a == "function" ? a(p) : a, [a]);
+  return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-2", children: r?.map((p) => {
+    const { auth_id: h } = p;
+    return /* @__PURE__ */ e.jsx(ie, { className: " shrink-0 h-max", children: /* @__PURE__ */ e.jsx(ie.Content, { onClick: () => l(p, t.userOptionsControls), className: "p-0 group-data-[expanded=true]/ticketcard:border-none", children: /* @__PURE__ */ e.jsx(
+      et,
       {
         name: h.name,
         avatarSize: "xxs",
-        secondarySlot: i(m),
-        subImageUrl: d(m),
+        secondarySlot: i(p),
+        subImageUrl: d(p),
         imageUrl: h.profile_picture,
         className: "pyrion-navigation-drawer-user-card"
       },
-      m.token
-    ) }) }, m.token);
+      p.token
+    ) }) }, p.token);
   }) });
 }, Xt = ({
   state: t,
@@ -844,21 +844,21 @@ const Yt = (t) => {
   onLogoutClick: l,
   onProfileClick: d,
   options: i,
-  currentSystemId: m,
+  currentSystemId: p,
   userOptionsControls: h,
   mobileAppSwitcherControls: b
 }) => {
-  const { getIsCollapsed: p, toggleCollapse: g, subscribeToCollapse: j } = de(), A = x(() => {
-    const y = p();
+  const { getIsCollapsed: u, toggleCollapse: g, subscribeToCollapse: j } = de(), A = x(() => {
+    const y = u();
     y ? (g(), h.current?.open()) : d?.(y);
-  }, [p, g, h, d]);
+  }, [u, g, h, d]);
   return se(() => j((y) => {
     y && (h.current?.close(), b.current?.close());
   }), [j, h, b]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(re.Spacer, { className: "mb-3" }),
     /* @__PURE__ */ e.jsxs(ie, { className: "", controls: h, children: [
       /* @__PURE__ */ e.jsx(ie.Content, { onClick: A, children: /* @__PURE__ */ e.jsx(
-        Ze,
+        et,
         {
           className: "pyrion-navigation-drawer-user-card p-0",
           name: t.user?.name || "",
@@ -879,7 +879,7 @@ const Yt = (t) => {
               onSessionClick: c,
               secondarySlot: a,
               subImageUrlAccessor: i?.sessionCardOptions?.subImageUrlAccessor,
-              currentSystemId: m,
+              currentSystemId: p,
               userOptionsControls: h
             }
           ) })
@@ -904,7 +904,7 @@ const Yt = (t) => {
       ] })
     ] })
   ] });
-}, pt = P(Xt, (t, r) => {
+}, ht = P(Xt, (t, r) => {
   const s = Object.keys(t), a = Object.keys(r);
   if (s.length !== a.length)
     return !1;
@@ -917,7 +917,7 @@ const Yt = (t) => {
   }
   return t.currentAppSessions !== r.currentAppSessions || t.options !== r.options || t.currentSystemId !== r.currentSystemId || t.userOptionsControls !== r.userOptionsControls || t.mobileAppSwitcherControls !== r.mobileAppSwitcherControls;
 });
-pt.displayName = "PyrionNavigationDrawer.Footer";
+ht.displayName = "PyrionNavigationDrawer.Footer";
 const Jt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(ie, { controls: s, children: [
   /* @__PURE__ */ e.jsx(ie.Content, { children: typeof r == "function" ? r() : r }),
   /* @__PURE__ */ e.jsxs(ie.Options, { children: [
@@ -950,7 +950,7 @@ const Jt = ({ tabs: t, content: r, controls: s }) => /* @__PURE__ */ e.jsxs(ie,
   const a = x(() => {
     if (t) {
       if (s) {
-        const i = t.find((m) => m._id === s);
+        const i = t.find((p) => p._id === s);
         if (i) return { coverImage: i.coverImage, thumbnail: i.thumbnail };
       }
       const l = window.location.origin, d = t.find((i) => i.url === l);
@@ -982,11 +982,11 @@ 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 = P(({ onSystemLogoClick: t, state: r, currentSystemId: s, tabs: a, mobileAppSwitcherControls: c }) => {
+const bt = P(({ onSystemLogoClick: t, state: r, currentSystemId: s, tabs: a, mobileAppSwitcherControls: c }) => {
   const { getIsCollapsed: l } = de(), d = Je(), i = x(() => {
     if (t) {
-      const m = l();
-      t(m);
+      const p = l();
+      t(p);
     }
   }, [t, l]);
   return d ? /* @__PURE__ */ e.jsx(
@@ -1012,7 +1012,7 @@ const ht = P(({ onSystemLogoClick: t, state: r, currentSystemId: s, tabs: a, mob
     }
   );
 });
-ht.displayName = "PyrionNavigationDrawer.Header";
+bt.displayName = "PyrionNavigationDrawer.Header";
 const Xe = ({ type: t }) => {
   if (t === "load_more") return /* @__PURE__ */ e.jsx("p", { className: " prometeo-fonts-body-large text-neutral-medium-default w-full text-center py-4", children: "Cargando más ..." });
   if (t === "skeletons") return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-3", children: Array(10)?.fill({})?.map(() => /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(Gt, {}) })) });
@@ -1023,34 +1023,34 @@ const Xe = ({ type: t }) => {
   ] }),
   /* @__PURE__ */ e.jsx(ce, { shape: "rounded", className: "w-20 h-3" })
 ] }), Qt = ({ onCloseClick: t, onMarkAllAsRead: r, notificationsListControls: s, scrollableControls: a }) => {
-  const [c, l] = J([]), [d, i] = J("NO_LEIDAS"), [m, h] = J({ isLoading: !1, type: "load_more" }), [b, p] = J({ hasError: !1 }), g = I(/* @__PURE__ */ new Set()), j = I(null), A = I(null), y = x((u, O = "top") => {
+  const [c, l] = J([]), [d, i] = J("NO_LEIDAS"), [p, h] = J({ isLoading: !1, type: "load_more" }), [b, u] = J({ hasError: !1 }), g = I(/* @__PURE__ */ new Set()), j = I(null), A = I(null), y = x((f, O = "top") => {
     l((M) => {
-      const F = Array.isArray(u) ? O === "bottom" ? [...M, ...u] : [...u, ...M] : O === "bottom" ? [...M, u] : [u, ...M];
+      const F = Array.isArray(f) ? O === "bottom" ? [...M, ...f] : [...f, ...M] : O === "bottom" ? [...M, f] : [f, ...M];
       return queueMicrotask(() => {
         g.current.forEach((Q) => Q(F, F.length));
       }), F;
     });
-  }, []), C = x((u) => (g.current.add(u), () => {
-    g.current.delete(u);
-  }), []), S = x((u) => {
+  }, []), C = x((f) => (g.current.add(f), () => {
+    g.current.delete(f);
+  }), []), S = x((f) => {
     l((O) => {
-      const M = Array.isArray(u) ? O.filter((F) => !u.includes(F._id)) : O.filter((F) => F._id !== u);
+      const M = Array.isArray(f) ? O.filter((F) => !f.includes(F._id)) : O.filter((F) => F._id !== f);
       return queueMicrotask(() => {
         g.current.forEach((F) => F(M, M.length));
       }), M;
     });
   }, []), K = x(() => {
     l([]), queueMicrotask(() => {
-      g.current.forEach((u) => u([], 0));
+      g.current.forEach((f) => f([], 0));
     });
-  }, []), z = x((u) => {
-    l(u), queueMicrotask(() => {
-      g.current.forEach((O) => O(u, u.length));
+  }, []), z = x((f) => {
+    l(f), queueMicrotask(() => {
+      g.current.forEach((O) => O(f, f.length));
     });
-  }, []), k = x((u, O = "load_more") => {
-    h({ isLoading: u, type: O });
-  }, []), U = x((u, O) => {
-    p({ hasError: u, children: O });
+  }, []), k = x((f, O = "load_more") => {
+    h({ isLoading: f, type: O });
+  }, []), U = x((f, O) => {
+    u({ hasError: f, children: O });
   }, []);
   Re(s, () => ({
     addNewNotification: y,
@@ -1061,16 +1061,16 @@ const Xe = ({ type: t }) => {
     setLoading: k,
     setError: U
   }), [y, C, z, S, K, k, U]);
-  const v = (u) => {
-    i(u);
+  const v = (f) => {
+    i(f);
   }, q = c.length > 0;
-  Ct(() => {
+  jt(() => {
     if (j.current && A.current) {
-      const u = j.current.clientHeight;
-      A.current.style.setProperty("height", `calc(100vh - ${u}px - 20px)`);
+      const f = j.current.clientHeight;
+      A.current.style.setProperty("height", `calc(100vh - ${f}px - 20px)`);
     }
   }, [j?.current]);
-  const G = c.filter((u) => !u.read).length, { isLoading: V, type: X } = m, { hasError: $, children: _ } = b;
+  const G = c.filter((f) => !f.read).length, { isLoading: V, type: X } = p, { hasError: $, children: _ } = b;
   return /* @__PURE__ */ e.jsx(
     "section",
     {
@@ -1079,7 +1079,7 @@ const Xe = ({ type: t }) => {
         /* @__PURE__ */ e.jsxs("div", { ref: j, className: "flex flex-col gap-4", children: [
           /* @__PURE__ */ e.jsxs("div", { className: "w-full h-max flex gap-2 items-center justify-between pt-8 pb-2 pr-2 pl-4 border-b border-neutral-strong-default sticky top-0 z-50 bg-neutral-default-default", children: [
             /* @__PURE__ */ e.jsxs("span", { className: "flex gap-2 items-center", children: [
-              /* @__PURE__ */ e.jsx(et, { className: "text-neutral-strong-default", size: 24 }),
+              /* @__PURE__ */ e.jsx(tt, { className: "text-neutral-strong-default", size: 24 }),
               /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-headline-small text-neutral-strong-default", children: "Notificaciones" })
             ] }),
             /* @__PURE__ */ e.jsx(he, { onClick: () => t?.(), icon: /* @__PURE__ */ e.jsx(Fe, {}), variant: "text", animate: !1, animateIcon: !1, color: "secondary", className: "size-12" })
@@ -1094,12 +1094,12 @@ const Xe = ({ type: t }) => {
                 { id: "ALL", title: "Todas" },
                 { id: "NO_LEIDAS", title: "Sin leer" }
               ],
-              renderTab: (u, O, M, F, Q, ae, Z, ve) => /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+              renderTab: (f, O, M, F, Q, ae, Z, ve) => /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ e.jsx(
                   Et,
                   {
-                    id: u.id,
-                    title: u.title,
+                    id: f.id,
+                    title: f.title,
                     onClick: M,
                     isActive: O,
                     onIconClick: F,
@@ -1109,7 +1109,7 @@ const Xe = ({ type: t }) => {
                     iconSize: ve
                   }
                 ),
-                G > 0 && u.id === "NO_LEIDAS" && (V ? /* @__PURE__ */ e.jsx("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ e.jsx(ce, { className: "size-5.5", shape: "circle" }) }) : /* @__PURE__ */ e.jsx(Qe, { count: G, className: "absolute top-0 right-0" }))
+                G > 0 && f.id === "NO_LEIDAS" && (V ? /* @__PURE__ */ e.jsx("div", { className: "absolute top-0 right-0", children: /* @__PURE__ */ e.jsx(ce, { className: "size-5.5", shape: "circle" }) }) : /* @__PURE__ */ e.jsx(Ze, { count: G, className: "absolute top-0 right-0" }))
               ] })
             }
           ),
@@ -1134,7 +1134,7 @@ const Xe = ({ type: t }) => {
             children: [
               $ && /* @__PURE__ */ e.jsx("div", { className: "w-full h-full grid place-items-center", children: typeof _ == "function" ? _() : _ }),
               !$ && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                V && X === "skeletons" ? /* @__PURE__ */ e.jsx(Xe, { type: X }) : q ? c?.filter((u) => d === "NO_LEIDAS" ? !u.read : u)?.map((u, O) => /* @__PURE__ */ e.jsx(Ot, { ...u, className: " border-b border-neutral-strong-default rounded-b-none last:border-b-0" }, O)) : /* @__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" }),
+                V && X === "skeletons" ? /* @__PURE__ */ e.jsx(Xe, { type: X }) : q ? c?.filter((f) => d === "NO_LEIDAS" ? !f.read : f)?.map((f, O) => /* @__PURE__ */ e.jsx(Ot, { ...f, className: " border-b border-neutral-strong-default rounded-b-none last:border-b-0" }, O)) : /* @__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" }),
                 V && X === "load_more" && /* @__PURE__ */ e.jsx(Xe, { type: X })
               ] })
             ]
@@ -1150,7 +1150,7 @@ const Xe = ({ type: t }) => {
     children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-full h-max flex gap-2 items-center justify-between pt-8 pb-2 pr-2 pl-4 border-b border-neutral-strong-default sticky top-0 z-50 bg-neutral-default-default", children: [
         /* @__PURE__ */ e.jsxs("span", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ e.jsx(tt, { className: "text-neutral-strong-default", size: 24 }),
+          /* @__PURE__ */ e.jsx(rt, { className: "text-neutral-strong-default", size: 24 }),
           /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-headline-small text-neutral-strong-default", children: s })
         ] }),
         /* @__PURE__ */ e.jsx(he, { onClick: () => t?.(), icon: /* @__PURE__ */ e.jsx(Fe, {}), variant: "text", animate: !1, animateIcon: !1, color: "secondary", className: "size-12" })
@@ -1159,9 +1159,9 @@ const Xe = ({ type: t }) => {
     ]
   }
 ), er = ({ closeSidebar: t, options: r, helpSection: s, initialSection: a, notificationsListControls: c, scrollableControls: l }, d) => {
-  const [i, m] = J(a ?? "notifications");
+  const [i, p] = J(a ?? "notifications");
   Re(d, () => ({
-    setActiveSection: m
+    setActiveSection: p
   }));
   const h = () => {
     t();
@@ -1178,8 +1178,8 @@ const Xe = ({ type: t }) => {
     ),
     i === "help" && s && !r?.helpSectionDrawerOptions?.hide && /* @__PURE__ */ e.jsx(Zt, { onCloseClick: h, children: typeof s == "function" ? s() : s })
   ] });
-}, bt = be(er);
-bt.displayName = "SidebarContent";
+}, xt = be(er);
+xt.displayName = "SidebarContent";
 const tr = ({
   options: t,
   helpSection: r,
@@ -1190,7 +1190,7 @@ const tr = ({
 }) => {
   const { closeSidebar: d } = de();
   return /* @__PURE__ */ e.jsx(
-    bt,
+    xt,
     {
       ref: s,
       closeSidebar: d,
@@ -1201,17 +1201,17 @@ const tr = ({
       scrollableControls: l
     }
   );
-}, xt = P(tr);
-xt.displayName = "PyrionNavigationDrawer.Sidebar";
+}, gt = P(tr);
+gt.displayName = "PyrionNavigationDrawer.Sidebar";
 const rr = ({ navigationControlsRef: t }) => {
   const r = de();
   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: a, resolveSessionSecondarySlot: c, handleNavigation: l, allActions: d, tabs: i, navigationControlsRef: m, sidebarContentRef: h, initialSectionRef: b, userOptionsControls: p, mobileAppSwitcherControls: g, notificationsListControls: j, scrollableControls: A, outletRef: y, ...C } = t;
+  const { children: r, currentAppSessions: s, resolveUserSecondarySlot: a, resolveSessionSecondarySlot: c, handleNavigation: l, allActions: d, tabs: i, navigationControlsRef: p, sidebarContentRef: h, initialSectionRef: b, userOptionsControls: u, mobileAppSwitcherControls: g, notificationsListControls: j, scrollableControls: A, outletRef: y, ...C } = t;
   return /* @__PURE__ */ e.jsxs(re, { disableDragOpen: C.options?.disableDragOpen, outletRef: y, children: [
-    /* @__PURE__ */ e.jsx(rr, { navigationControlsRef: m }),
+    /* @__PURE__ */ e.jsx(rr, { navigationControlsRef: p }),
     /* @__PURE__ */ e.jsx(re.Header, { className: "flex flex-col relative w-full select-none", children: /* @__PURE__ */ e.jsx(
-      ht,
+      bt,
       {
         onSystemLogoClick: C.onSystemLogoClick,
         state: C.state,
@@ -1221,7 +1221,7 @@ const rr = ({ navigationControlsRef: t }) => {
       }
     ) }, "PL-Header"),
     /* @__PURE__ */ e.jsx(re.Content, { className: "overflow-hidden flex flex-col relative flex-1  md:w-auto", children: /* @__PURE__ */ e.jsx(
-      mt,
+      pt,
       {
         navlinks: C.links,
         handleNavigation: l,
@@ -1231,7 +1231,7 @@ const rr = ({ navigationControlsRef: t }) => {
       }
     ) }, "PL-Content"),
     /* @__PURE__ */ e.jsx(re.Footer, { className: "md:min-h-max flex flex-col w-full overflow-hidden max-w-full", children: /* @__PURE__ */ e.jsx(
-      pt,
+      ht,
       {
         state: C.state,
         currentAppSessions: s,
@@ -1241,12 +1241,12 @@ const rr = ({ navigationControlsRef: t }) => {
         onLogoutClick: C.onLogoutClick,
         options: C.options,
         currentSystemId: C.currentSystemId,
-        userOptionsControls: p,
+        userOptionsControls: u,
         mobileAppSwitcherControls: g,
         onProfileClick: C.onProfileClick
       }
     ) }, "PL-Footer"),
-    /* @__PURE__ */ e.jsx(re.Outlet, { children: /* @__PURE__ */ e.jsx(vt, { children: r }) }),
+    /* @__PURE__ */ e.jsx(re.Outlet, { children: /* @__PURE__ */ e.jsx(wt, { children: r }) }),
     /* @__PURE__ */ e.jsx(
       re.Sidebar,
       {
@@ -1254,7 +1254,7 @@ const rr = ({ navigationControlsRef: t }) => {
         modal: C.options?.sidebarOptions?.modal,
         closeOnOverlayClick: C.options?.sidebarOptions?.closeOnOverlayClick,
         children: /* @__PURE__ */ e.jsx(
-          xt,
+          gt,
           {
             options: C.options,
             helpSection: C.helpSection,
@@ -1267,41 +1267,41 @@ const rr = ({ navigationControlsRef: t }) => {
       }
     )
   ] });
-}, gt = P(sr, (t, r) => {
+}, vt = P(sr, (t, r) => {
   const { children: s, ...a } = t, { children: c, ...l } = r, d = Object.keys(a), i = Object.keys(l);
   if (d.length !== i.length)
     return !1;
-  for (const m of d) {
-    if (!Object.prototype.hasOwnProperty.call(l, m))
+  for (const p of d) {
+    if (!Object.prototype.hasOwnProperty.call(l, p))
       return !1;
-    const h = a[m], b = l[m];
+    const h = a[p], b = l[p];
     if (h !== b)
       return !1;
   }
   return !0;
 });
-gt.displayName = "PyrionNavigationDrawer.LayoutBase";
-const vt = P(({ children: t }) => /* @__PURE__ */ e.jsx(re.Outlet, { children: t }));
-vt.displayName = "PyrionNavigationDrawer.IsolatedOutlet";
-const wt = Me(null), Dr = () => {
-  const t = jt(wt);
+vt.displayName = "PyrionNavigationDrawer.LayoutBase";
+const wt = P(({ children: t }) => /* @__PURE__ */ e.jsx(re.Outlet, { children: t }));
+wt.displayName = "PyrionNavigationDrawer.IsolatedOutlet";
+const Nt = Me(null), Dr = () => {
+  const t = St(Nt);
   if (!t)
     throw new Error("usePyrionLayout debe usarse dentro de PyrionLayout");
   return t;
-}, Ar = ({ children: t, helpSection: r, state: s, links: a, onLinkClick: c, onNavigate: l, onLogoutClick: d, actions: i, activeActionId: m, onActionClick: h, tabsProps: b, currentSystemId: p, onSessionClick: g, onSystemLogoClick: j, onProfileClick: A, ...y }) => {
+}, Ar = ({ children: t, helpSection: r, state: s, links: a, onLinkClick: c, onNavigate: l, onLogoutClick: d, actions: i, activeActionId: p, onActionClick: h, tabsProps: b, currentSystemId: u, onSessionClick: g, onSystemLogoClick: j, onProfileClick: A, ...y }) => {
   const S = Object.assign({
     closeDrawerOnNavigate: !0,
     disableDragOpen: {
       sidebar: !0,
       drawer: !1
     }
-  }, y.options), K = kt(), z = Je(), k = I(null), U = I(null), v = I({}), q = I(null), G = I("notifications"), V = I(null), X = I(null), $ = I(null), [_, u] = J(0), [O, M] = J(!1), [F, Q] = J(null), ae = x((o) => {
+  }, y.options), K = kt(), z = Je(), k = I(null), U = I(null), v = I({}), q = I(null), G = I("notifications"), V = I(null), X = I(null), $ = I(null), [_, f] = J(0), [O, M] = J(!1), [F, Q] = J(null), ae = x((o) => {
     if (M(!1), c) {
       c(o);
       return;
     }
     const N = window.location.pathname;
-    K(o), S.closeDrawerOnNavigate && Nt() && !v.current?.getIsCollapsed?.() && v.current?.toggleCollapse?.(), l && l(N, o);
+    K(o), S.closeDrawerOnNavigate && yt() && !v.current?.getIsCollapsed?.() && v.current?.toggleCollapse?.(), l && l(N, o);
   }, [c, l, K]), Z = (o) => {
     o && window.open(o, "_blank");
   }, we = {
@@ -1361,18 +1361,18 @@ const wt = Me(null), Dr = () => {
     (o) => {
       const N = S?.userCardOptions?.secondarySlot;
       if (!N) return null;
-      const B = s.enabled_systems?.find((ne) => ne._id === p), T = { company: s.company, user: s.user, system: B, metadata: o };
+      const B = s.enabled_systems?.find((ne) => ne._id === u), T = { company: s.company, user: s.user, system: B, metadata: o };
       return fe(N, T);
     },
-    [p, S?.userCardOptions?.secondarySlot, fe, s.company, s.enabled_systems, s.user]
-  ), f = x(
+    [u, S?.userCardOptions?.secondarySlot, fe, s.company, s.enabled_systems, s.user]
+  ), m = x(
     (o) => {
       const N = S?.sessionCardOptions?.secondarySlot || S?.userCardOptions?.secondarySlot;
       if (!N) return null;
-      const B = s.enabled_systems?.find((ne) => ne._id === p), T = { company: s.company, user: o.auth_id, metadata: o?.metadata, system: B };
+      const B = s.enabled_systems?.find((ne) => ne._id === u), T = { company: s.company, user: o.auth_id, metadata: o?.metadata, system: B };
       return fe(N, T);
     },
-    [p, S?.sessionCardOptions?.secondarySlot, S?.userCardOptions?.secondarySlot, fe, s.company, s.enabled_systems]
+    [u, S?.sessionCardOptions?.secondarySlot, S?.userCardOptions?.secondarySlot, fe, s.company, s.enabled_systems]
   ), w = pe(() => {
     const o = [];
     return v.current.openNotifications = () => {
@@ -1382,13 +1382,13 @@ const wt = Me(null), Dr = () => {
     }, !S?.notificationsDrawerOptions?.hideActionButton && !S?.notificationsDrawerOptions?.hide && o.push({
       id: "notifications",
       title: "Notificaciones",
-      icon: et,
+      icon: tt,
       onClick: v.current.openNotifications,
       count: _
     }), !S?.helpSectionDrawerOptions?.hideActionButton && r && !S?.helpSectionDrawerOptions?.hide && o.push({
       id: "help",
       title: "Ayuda",
-      icon: tt,
+      icon: rt,
       onClick: v.current.openHelp
     }), S?.configurationActionOptions?.onClick && !S?.configurationActionOptions?.hideActionButton && o.push({
       id: "configuration",
@@ -1446,9 +1446,9 @@ const wt = Me(null), Dr = () => {
   }, []);
   return v.current.addNewNotification = R, v.current.subscribeToNotificationsUpdates = te, v.current.removeNotification = oe, v.current.removeAllNotifications = me, v.current.setNotifications = Ne, v.current.setNotificationsError = Y, v.current.setNotificationsLoading = L, v.current.subscribeToNotificationsScroll = ye, v.current.showErrorModal = Ce, v.current.closeErrorModal = je, v.current.userCardExpand = W, v.current.userCardCollapse = le, v.current.userCardToggle = Ie, se(() => {
     te((o, N) => {
-      u(N);
+      f(N);
     });
-  }, [te]), /* @__PURE__ */ e.jsxs(wt.Provider, { value: v.current, children: [
+  }, [te]), /* @__PURE__ */ e.jsxs(Nt.Provider, { value: v.current, children: [
     O && F,
     /* @__PURE__ */ e.jsxs("div", { className: "flex h-screen", children: [
       /* @__PURE__ */ e.jsx(
@@ -1458,26 +1458,26 @@ const wt = Me(null), Dr = () => {
           tabs: H,
           activeColor: "var(--neutral-900)",
           currentTabName: Te,
-          currentSystemId: p,
+          currentSystemId: u,
           isLoading: !s.enabled_systems || s.enabled_systems.length === 0
         }
       ),
       /* @__PURE__ */ e.jsx(
-        gt,
+        vt,
         {
           links: a,
           handleNavigation: ae,
           allActions: E,
-          activeActionId: m,
+          activeActionId: p,
           onActionClick: h,
           state: s,
           currentAppSessions: Oe,
           resolveUserSecondarySlot: n,
-          resolveSessionSecondarySlot: f,
+          resolveSessionSecondarySlot: m,
           onSessionClick: g,
           onLogoutClick: d,
           options: S,
-          currentSystemId: p,
+          currentSystemId: u,
           userOptionsControls: V,
           mobileAppSwitcherControls: X,
           onSystemLogoClick: j,

package/dist/Steps.es.js

@@ -1,6 +1,6 @@
 import { j as e } from "./jsx-runtime-GkKLlHH4.js";
 import { c as j } from "./cn-B6yFEsav.js";
-import { motion as r } from "framer-motion";
+import { motion as c } from "framer-motion";
 import N from "react";
 import { Check as y } from "./Icons/Check.es.js";
 const b = ({
@@ -29,7 +29,7 @@ const b = ({
       }
     ),
     /* @__PURE__ */ e.jsx(
-      r.div,
+      c.div,
       {
         className: "absolute inset-0 rounded-full bg-primary-default-default",
         initial: {
@@ -54,7 +54,7 @@ const b = ({
       }
     ),
     x && /* @__PURE__ */ e.jsx(
-      r.div,
+      c.div,
       {
         className: "absolute inset-0 rounded-full bg-primary-default-default",
         initial: {
@@ -80,7 +80,7 @@ const b = ({
       }
     )
   ] });
-}, S = ({
+}, I = ({
   steps: n,
   currentStep: t,
   orientation: u = "horizontal",
@@ -90,12 +90,12 @@ const b = ({
   onStepClick: o,
   allowClickableSteps: p = !1
 }) => {
-  const c = u === "horizontal", m = {
+  const r = u === "horizontal", m = {
     sm: {
       circle: "size-7 aspect-square text-xs",
       title: "text-sm",
       description: "text-[11px] w-16",
-      spacing: c ? "gap-2" : "gap-1",
+      spacing: r ? "gap-2" : "gap-1",
       connectorContainer: "px-2",
       iconSize: 20
     },
@@ -103,7 +103,7 @@ const b = ({
       circle: "w-10 h-10 text-sm",
       title: "text-base",
       description: "text-sm w-20",
-      spacing: c ? "gap-3" : "gap-2",
+      spacing: r ? "gap-3" : "gap-2",
       connectorContainer: "px-2",
       iconSize: 24
     },
@@ -111,7 +111,7 @@ const b = ({
       circle: "w-12 h-12 text-base",
       title: "text-lg",
       description: "text-base w-28",
-      spacing: c ? "gap-4" : "gap-3",
+      spacing: r ? "gap-4" : "gap-3",
       connectorContainer: "px-2",
       iconSize: 28
     }
@@ -127,13 +127,13 @@ const b = ({
     }
   }, h = (a) => {
     p && o && o(a);
-  }, v = c ? `flex items-center w-full justify-center ${x}` : `space-y-0 ${x}`;
+  }, v = r ? `flex items-center w-full justify-center ${x}` : `space-y-0 ${x}`;
   return /* @__PURE__ */ e.jsx("div", { className: v, children: n.map((a, l) => {
     const d = w(l), f = p && o;
-    return /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex", children: [
+    return /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: r ? /* @__PURE__ */ e.jsxs("div", { className: "flex", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "w-max flex flex-col items-center relative", children: [
         /* @__PURE__ */ e.jsx(
-          r.div,
+          c.div,
           {
             className: `${g(d)} ${f ? "cursor-pointer" : ""} relative z-10`,
             initial: { scale: 0.8, opacity: 0 },
@@ -141,11 +141,11 @@ const b = ({
             transition: { duration: 0.3, delay: l * 0.3 },
             whileTap: f ? { scale: 0.95 } : {},
             onClick: () => h(l),
-            children: s === "numbered" || s === "numbered-minimal" || !a.icon ? d === "completed" ? /* @__PURE__ */ e.jsx(r.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: l + 1 }) : N.cloneElement(a.icon, { size: m[i].iconSize })
+            children: s === "numbered" || s === "numbered-minimal" || !a.icon ? d === "completed" ? /* @__PURE__ */ e.jsx(c.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: l + 1 }) : N.cloneElement(a.icon, { size: m[i].iconSize })
           }
         ),
         s !== "minimal" && s !== "numbered-minimal" && a.description && /* @__PURE__ */ e.jsx("p", { className: j(
-          "absolute text-center w-28 -bottom-2 translate-y-full",
+          "absolute text-center w-28 -bottom-2 translate-y-full break-normal",
           m[i].description,
           "text-gray-400 mt-2 text-center",
           d === "current" ? "text-neutral-strong-default font-semibold " : "text-neutral-medium-default"
@@ -159,7 +159,7 @@ const b = ({
             b,
             {
               index: l,
-              isHorizontal: c,
+              isHorizontal: r,
               currentStep: t,
               size: i
             }
@@ -169,7 +169,7 @@ const b = ({
     ] }) : /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col items-center w-max", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center w-full relative", children: [
         /* @__PURE__ */ e.jsx(
-          r.div,
+          c.div,
           {
             className: `${g(d)} ${f ? "cursor-pointer" : ""}`,
             initial: { scale: 0.8, opacity: 0 },
@@ -177,18 +177,18 @@ const b = ({
             transition: { duration: 0.3, delay: l * 0.1 },
             whileTap: f ? { scale: 0.95 } : {},
             onClick: () => h(l),
-            children: s === "numbered" || s === "numbered-minimal" || !a.icon ? d === "completed" ? /* @__PURE__ */ e.jsx(r.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: l + 1 }) : a.icon
+            children: s === "numbered" || s === "numbered-minimal" || !a.icon ? d === "completed" ? /* @__PURE__ */ e.jsx(c.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: l + 1 }) : a.icon
           }
         ),
         s !== "minimal" && s !== "numbered-minimal" && /* @__PURE__ */ e.jsx(
-          r.div,
+          c.div,
           {
             className: `absolute -right-4 top-1/2 -translate-y-1/2  translate-x-full ml-4  gap-3 flex flex-col w-full ${m[i].spacing} flex  h-full`,
             initial: { opacity: 0, x: -10 },
             animate: { opacity: 1, x: 0 },
             transition: { duration: 0.3, delay: l * 0.1 + 0.1 },
             children: a.description && /* @__PURE__ */ e.jsx("p", { className: j(
-              "h-full text-start flex items-center justify-start ",
+              "h-full text-start flex items-center justify-start break-normal",
               m[i].description,
               "text-gray-400",
               d === "current" ? "text-neutral-strong-default font-semibold " : "text-neutral-medium-default"
@@ -200,7 +200,7 @@ const b = ({
         b,
         {
           index: l,
-          isHorizontal: c,
+          isHorizontal: r,
           currentStep: t,
           size: i
         }
@@ -209,6 +209,6 @@ const b = ({
   }) });
 };
 export {
-  S as Steps,
-  S as default
+  I as Steps,
+  I as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "4.8.3",
+  "version": "4.8.4",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",