prometeo-design-system 6.3.6 → 6.3.7

package/dist/PyrionLayout.es.js

@@ -2,7 +2,7 @@ import { j as e } from "./jsx-runtime-GkKLlHH4.js";
 import { u as Tt, g as It } from "./useDevice-vwn4GLwK.js";
 import { c as k } from "./cn-B6yFEsav.js";
 import { g as ye } from "./utils-X4-h3cum.js";
-import je, { forwardRef as de, useState as H, useRef as D, useEffect as V, memo as E, useContext as ze, createContext as Le, useCallback as x, Children as Ot, isValidElement as pe, useMemo as ne, useLayoutEffect as De, useImperativeHandle as Te, use as Et } from "react";
+import je, { forwardRef as de, useState as H, useRef as D, useEffect as V, memo as E, useContext as ze, createContext as Le, useCallback as x, Children as Ot, isValidElement as pe, useMemo as se, useLayoutEffect as De, useImperativeHandle as Te, use as Et } from "react";
 import { createPortal as Be } from "react-dom";
 import { CloseNavBarDesktop as _t } from "./Icons/CloseNavBarDesktop.es.js";
 import { c as Ie } from "./index-BOQuZ0gG.js";
@@ -26,11 +26,11 @@ import { T as Ut, a as Wt } from "./TabLinks-DnoWdrdk.js";
 import { Notifications as $e } from "./Icons/Notifications.es.js";
 import { Settings as Vt } from "./Icons/Settings.es.js";
 const qt = de((t, r) => {
-  const [s, l] = H(t?.currentTabName || t.tabs[0]?.name), d = D(null), { tabs: a = [], className: c, activeColor: h = "var(--neutral-900)", currentSystemId: u, isLoading: f = !1 } = t;
+  const [s, l] = H(t?.currentTabName || t.tabs[0]?.name), d = D(null), { tabs: a = [], className: i, activeColor: h = "var(--neutral-900)", currentSystemId: u, isLoading: f = !1 } = t;
   V(() => {
     d.current?.style.setProperty("--tab-bg", h);
   }, [h]);
-  const i = a.find((m) => m?.id === u || m?.name === t?.currentTabName) || a.find((m) => m?.name === s);
+  const c = a.find((m) => m?.id === u || m?.name === t?.currentTabName) || a.find((m) => m?.name === s);
   return /* @__PURE__ */ e.jsx(
     "div",
     {
@@ -41,7 +41,7 @@ const qt = de((t, r) => {
         "bg-neutral-strong-default",
         "h-full w-14 max-w-14 pl-[6px] py-6",
         "border-r border-neutral-default-default",
-        c
+        i
       ),
       children: (f ? Array(3).fill(null) : a).map(
         (m, g) => {
@@ -65,7 +65,7 @@ const qt = de((t, r) => {
               ), children: /* @__PURE__ */ e.jsx(ce, { shape: "rounded", className: "w-full h-full" }) })
             }
           );
-          const S = m?.name === i?.name, C = typeof m?.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: m?.thumbnail, alt: m?.description, className: "aspect-square object-contain rounded", draggable: !1 }) : m?.thumbnail, p = () => {
+          const S = m?.name === c?.name, C = typeof m?.thumbnail == "string" ? /* @__PURE__ */ e.jsx("img", { src: m?.thumbnail, alt: m?.description, className: "aspect-square object-contain rounded", draggable: !1 }) : m?.thumbnail, p = () => {
             m.disabled || (l(m?.name), m.onClick && m.onClick(m?.name));
           };
           return /* @__PURE__ */ e.jsx(
@@ -95,14 +95,14 @@ const qt = de((t, r) => {
       )
     }
   );
-}), Ke = E(de(({ children: t, className: r, context: s, modal: l = !1, closeOnOverlayClick: d = !1, unmountChildrenOnClose: a = !0 }, c) => {
-  const h = be(t, s), u = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: f } = $t(), { closeSidebar: i } = oe(), [m, g] = H(() => a ? f : !0), [S, C] = H(!1);
+}), Ke = E(de(({ children: t, className: r, context: s, modal: l = !1, closeOnOverlayClick: d = !1, unmountChildrenOnClose: a = !0 }, i) => {
+  const h = be(t, s), u = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, { isSidebarOpen: f } = $t(), { closeSidebar: c } = oe(), [m, g] = H(() => a ? f : !0), [S, C] = H(!1);
   return V(() => {
     a && s?.subscribeToSidebarOpen((p) => {
       p ? (C(!1), g(!0)) : C(!0);
     });
   }, [a]), V(() => {
-    const p = c && typeof c == "object" && "current" in c ? c.current : null;
+    const p = i && typeof i == "object" && "current" in i ? i.current : null;
     if (!p) return;
     const _ = () => {
       S && (g(!1), C(!1));
@@ -114,12 +114,12 @@ const qt = de((t, r) => {
       {
         className: k("navigation-drawer-sidebar-overlay"),
         onClick: (p) => {
-          p.preventDefault(), p.stopPropagation(), d && i?.();
+          p.preventDefault(), p.stopPropagation(), d && c?.();
         },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ e.jsx("div", { ref: c, className: k("sidebar collapsed", "h-full overflow-auto", r), "aria-modal": l || void 0, children: /* @__PURE__ */ e.jsxs("div", { className: k("navigation-drawer-sidebar-inner h-full max-h-full! overflow-hidden!"), children: [
+    /* @__PURE__ */ e.jsx("div", { ref: i, className: k("sidebar collapsed", "h-full overflow-auto", r), "aria-modal": l || void 0, children: /* @__PURE__ */ e.jsxs("div", { className: k("navigation-drawer-sidebar-inner h-full max-h-full! overflow-hidden!"), children: [
       /* @__PURE__ */ e.jsx("div", { className: "secure-click-margin hidden" }),
       m && h
     ] }) })
@@ -148,7 +148,7 @@ const Je = Le(null), Ge = Le(null), $t = () => {
   desktop: !1,
   mobile: !0
 }, Yt = (t) => {
-  const { children: r, classNameDrawer: s, classNameSidebar: l, disableDragOpen: d, modal: a = !0, closeOnOutsideClick: c = !0 } = t, h = D(null), u = D(null), f = D(null), i = t.outletRef ?? D(null), m = D(null), g = D(Jt(Kt(), t.defaultCollapsedState ?? Xt)), S = D(!1), C = D("drawer"), p = D(/* @__PURE__ */ new Set()), _ = D(/* @__PURE__ */ new Set()), j = x((o) => {
+  const { children: r, classNameDrawer: s, classNameSidebar: l, disableDragOpen: d, modal: a = !0, closeOnOutsideClick: i = !0 } = t, h = D(null), u = D(null), f = D(null), c = t.outletRef ?? D(null), m = D(null), g = D(Jt(Kt(), t.defaultCollapsedState ?? Xt)), S = D(!1), C = D("drawer"), p = D(/* @__PURE__ */ new Set()), _ = D(/* @__PURE__ */ new Set()), j = x((o) => {
     const w = f.current;
     w && (w.classList.toggle("collapsed", o), w.classList.toggle("expanded", !o));
   }, []), v = x((o) => {
@@ -221,7 +221,7 @@ const Je = Le(null), Ge = Le(null), $t = () => {
     openDrawer: (o) => q(o),
     getIsCollapsed: () => {
       if (!window.matchMedia("(min-width: 768px)").matches) {
-        const w = h.current, I = i.current;
+        const w = h.current, I = c.current;
         if (w && I) {
           const M = w.scrollLeft, ee = I.offsetLeft, te = Math.abs(M - ee) < Math.abs(M);
           return te !== g.current && (g.current = te, j(te)), te;
@@ -324,7 +324,7 @@ const Je = Le(null), Ge = Le(null), $t = () => {
     }
     Q.push(o);
   });
-  const re = !!W, ae = W ?? (Q.length ? /* @__PURE__ */ e.jsx(we, { children: Q }) : null), le = re ? Q : [], Z = K ?? (!!K ? /* @__PURE__ */ e.jsx(Ae, { children: J, context: U, modal: a, closeOnOutsideClick: c }) : null), xe = Y ?? (!!Y ? /* @__PURE__ */ e.jsx(ve, { children: Y }) : null), Ne = !!L, se = L, me = !!B, ie = ne(() => ({
+  const re = !!W, ae = W ?? (Q.length ? /* @__PURE__ */ e.jsx(we, { children: Q }) : null), le = re ? Q : [], Z = K ?? (!!K ? /* @__PURE__ */ e.jsx(Ae, { children: J, context: U, modal: a, closeOnOutsideClick: i }) : null), xe = Y ?? (!!Y ? /* @__PURE__ */ e.jsx(ve, { children: Y }) : null), Ne = !!L, ne = L, me = !!B, ie = se(() => ({
     isCollapsed: g.current,
     isSidebarOpen: !S.current
   }), [g.current, S.current]);
@@ -369,12 +369,12 @@ const Je = Le(null), Ge = Le(null), $t = () => {
         ]
       }
     ),
-    Z && pe(Z) ? je.cloneElement(Z, { ref: i, modal: a, closeOnOutsideClick: c }) : Z,
-    se && pe(se) ? je.cloneElement(se, {
+    Z && pe(Z) ? je.cloneElement(Z, { ref: c, modal: a, closeOnOutsideClick: i }) : Z,
+    ne && pe(ne) ? je.cloneElement(ne, {
       ref: m,
-      className: k("sidebar", se.props?.className, l),
+      className: k("sidebar", ne.props?.className, l),
       context: U
-    }) : se
+    }) : ne
   ] }) }) });
 }, Fe = E(Yt), Ye = E(({ onToggleCollapse: t }) => /* @__PURE__ */ e.jsx(
   "button",
@@ -404,12 +404,12 @@ ve.displayName = "NavigationDrawerFooter";
 const Qe = E(({ className: t }) => /* @__PURE__ */ e.jsx("div", { className: k("w-full border-t border-neutral-strong-default ", t) }));
 Qe.displayName = "NavigationDrawerSpacer";
 const Ae = E(de(({ children: t, className: r, context: s, modal: l, closeOnOutsideClick: d }, a) => {
-  const c = be(t, s), h = oe(), u = () => {
+  const i = be(t, s), h = oe(), u = () => {
     d && (h.closeDrawer(), h.closeSidebar());
   };
   return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs("div", { id: "navigation-drawer-outlet", ref: a, className: k("flex-1 overflow-auto relative h-full max-h-dvh", r), children: [
     l && /* @__PURE__ */ e.jsx("div", { className: "navigation-drawer-backdrop select-none", onClick: u }),
-    c
+    i
   ] }) });
 }), (t, r) => t.children === r.children && t.className === r.className), X = Object.assign(Fe, {
   Root: Fe,
@@ -485,17 +485,17 @@ const Qt = "hover:bg-neutral-medium-hover", Zt = Ie("", {
     count: l,
     className: d,
     isSelected: a = !1,
-    hasSublinks: c,
+    hasSublinks: i,
     subLinksCollapsed: h,
     onToggleSublinks: u,
     as: f = "div",
-    onClick: i,
+    onClick: c,
     onAuxClick: m,
     disabled: g = !1,
     tooltipText: S,
     selectorCss: C
   } = t, p = (y) => {
-    g || i?.(y);
+    g || c?.(y);
   }, _ = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center flex-nowrap", children: [
       s && (S ? /* @__PURE__ */ e.jsx(Pt, { title: S, disabled: g, children: /* @__PURE__ */ e.jsx(s, { size: 24, className: ke({ disabled: g, isSelected: a }) }) }) : /* @__PURE__ */ e.jsx(s, { size: 24, className: ke({ disabled: g, isSelected: a }) })),
@@ -503,7 +503,7 @@ const Qt = "hover:bg-neutral-medium-hover", Zt = Ie("", {
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 items-center", children: [
       l && l ? /* @__PURE__ */ e.jsx(He, { count: l, maxCount: 99, className: "badge", disabled: g }) : "",
-      c && /* @__PURE__ */ e.jsx(
+      i && /* @__PURE__ */ e.jsx(
         "div",
         {
           className: k(
@@ -559,7 +559,7 @@ const Qt = "hover:bg-neutral-medium-hover", Zt = Ie("", {
 }, Re = E(tr);
 Re.displayName = "NavigationDrawerItemBase";
 const rr = (t) => {
-  const { title: r, icon: s, count: l, className: d, isActive: a, onClick: c, isView: h = !0, disabled: u, tooltipText: f, selectorCss: i } = t;
+  const { title: r, icon: s, count: l, className: d, isActive: a, onClick: i, isView: h = !0, disabled: u, tooltipText: f, selectorCss: c } = t;
   return h ? /* @__PURE__ */ e.jsx(
     Re,
     {
@@ -569,10 +569,10 @@ const rr = (t) => {
       count: l,
       className: d,
       isSelected: a,
-      onClick: c,
+      onClick: i,
       disabled: u,
       tooltipText: f,
-      selectorCss: i
+      selectorCss: c
     }
   ) : null;
 }, Ze = E(rr);
@@ -581,15 +581,15 @@ const sr = ({ actions: t, activeActionId: r, onActionClick: s, className: l }) =
   top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
   bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
 }, children: t?.map((d) => {
-  const { id: a, onClick: c, isView: h = !0, payload: u, ...f } = d, i = a === r, m = () => {
-    s?.(a, u), c?.();
+  const { id: a, onClick: i, isView: h = !0, payload: u, ...f } = d, c = a === r, m = () => {
+    s?.(a, u), i?.();
   };
   return h ? /* @__PURE__ */ e.jsx(
     Ze,
     {
       ...f,
       id: a,
-      isActive: i,
+      isActive: c,
       onClick: m
     },
     a
@@ -597,16 +597,16 @@ const sr = ({ actions: t, activeActionId: r, onActionClick: s, className: l }) =
 }) }), et = E(sr);
 et.displayName = "NavigationDrawerActions";
 const nr = (t) => {
-  const { className: r, title: s, path: l, onClick: d, isSelected: a, parentPath: c } = t, { pathname: h } = Ue(), u = x(() => {
+  const { className: r, title: s, path: l, onClick: d, isSelected: a, parentPath: i } = t, { pathname: h } = Ue(), u = x(() => {
     d?.(l);
   }, [l]), f = x(() => {
     if (l.startsWith("./")) {
-      if (!c) return;
-      const m = c + l.slice(2);
+      if (!i) return;
+      const m = i + l.slice(2);
       window.open(m, "_blank");
     } else
       window.open(l, "_blank");
-  }, [l]), i = a || l === h;
+  }, [l]), c = a || l === h;
   return /* @__PURE__ */ e.jsx(
     "a",
     {
@@ -617,20 +617,20 @@ const nr = (t) => {
         "transition-all duration-300 ease-in-out cursor-pointer",
         "h-10 w-full rounded-lg py-[11px] px-3",
         "hover:bg-neutral-medium-hover",
-        i && "bg-neutral-medium-selected hover:bg-neutral-medium-hover active:bg-transparent focus:bg-transparent",
+        c && "bg-neutral-medium-selected hover:bg-neutral-medium-hover active:bg-transparent focus:bg-transparent",
         r
       ),
       children: /* @__PURE__ */ e.jsx("p", { className: k(
         "prometeo-fonts-label-large text-neutral-medium-default",
         "group-active:text-neutral-default-focused group-focus:text-neutral-default-focused",
-        i && "text-primary-default-default group-hover:text-primary-default-hover group-focus:text-primary-default-focused group-active:text-primary-default-focused"
+        c && "text-primary-default-default group-hover:text-primary-default-hover group-focus:text-primary-default-focused group-active:text-primary-default-focused"
       ), children: s })
     }
   );
 }, tt = E(nr);
 tt.displayName = "NavItemSecondary";
 const or = de((t, r) => {
-  const [s, l] = H(!0), d = D(null), { path: a, title: c, icon: h, count: u, className: f, isSelected: i = !1, onClick: m, sublinks: g, toggleCollapse: S, getIsCollapsed: C, subscribeToCollapse: p, isView: _ = !0, disabled: j, tooltipText: v, selectorCss: y } = t;
+  const [s, l] = H(!0), d = D(null), { path: a, title: i, icon: h, count: u, className: f, isSelected: c = !1, onClick: m, sublinks: g, toggleCollapse: S, getIsCollapsed: C, subscribeToCollapse: p, isView: _ = !0, disabled: j, tooltipText: v, selectorCss: y } = t;
   V(() => p ? p((P) => {
     P && l(!0);
   }) : void 0, [p]);
@@ -685,11 +685,11 @@ const or = de((t, r) => {
       Re,
       {
         as: "a",
-        title: c,
+        title: i,
         icon: z,
         count: u,
         className: f,
-        isSelected: i,
+        isSelected: c,
         hasSublinks: !!g,
         subLinksCollapsed: s,
         onToggleSublinks: J,
@@ -704,12 +704,12 @@ const or = de((t, r) => {
 }), rt = E(or);
 rt.displayName = "NavigationDrawerLinkItem";
 const ar = ({ navlinks: t, handleNavigation: r, className: s, getIsCollapsed: l, toggleCollapse: d, subscribeToCollapse: a }) => {
-  const { pathname: c } = Ue();
+  const { pathname: i } = Ue();
   return /* @__PURE__ */ e.jsx(Oe, { className: k("flex flex-col w-full", s), 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, u) => {
-    const f = h.isSelected || h.path === c || (h.relatedPaths?.some((i) => c.startsWith(i)) ?? !1) || (h.sublinks?.some((i) => i.path === c) ?? !1);
+    const f = h.isSelected || h.path === i || (h.relatedPaths?.some((c) => i.startsWith(c)) ?? !1) || (h.sublinks?.some((c) => c.path === i) ?? !1);
     return /* @__PURE__ */ e.jsx(
       rt,
       {
@@ -728,14 +728,14 @@ const ar = ({ navlinks: t, handleNavigation: r, className: s, getIsCollapsed: l,
   }) });
 }, st = E(ar);
 st.displayName = "NavigationDrawerNavlinks";
-const nt = E(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId: l, initialSectionRef: d, navigationControlsRef: a, onActionClick: c }) => {
-  const { getIsCollapsed: h, toggleCollapse: u, subscribeToCollapse: f, subscribeToSidebarOpen: i, getIsSidebarOpen: m } = oe(), [g, S] = H(() => m?.() ?? !1), [C, p] = H(() => d?.current ?? "notifications");
+const nt = E(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId: l, initialSectionRef: d, navigationControlsRef: a, onActionClick: i }) => {
+  const { getIsCollapsed: h, toggleCollapse: u, subscribeToCollapse: f, subscribeToSidebarOpen: c, getIsSidebarOpen: m } = oe(), [g, S] = H(() => m?.() ?? !1), [C, p] = H(() => d?.current ?? "notifications");
   V(() => {
-    const v = i?.(S), y = a?.current?.subscribeToSection?.(p);
+    const v = c?.(S), y = a?.current?.subscribeToSection?.(p);
     return () => {
       v?.(), y?.();
     };
-  }, [i, a]);
+  }, [c, a]);
   const j = g && (C === "notifications" || C === "help") ? C : l;
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(X.Spacer, { className: "pb-3" }),
@@ -756,7 +756,7 @@ const nt = E(({ navlinks: t, handleNavigation: r, allActions: s, activeActionId:
         {
           actions: s,
           activeActionId: j,
-          onActionClick: c,
+          onActionClick: i,
           className: "max-h-[30dvh]"
         }
       )
@@ -770,7 +770,7 @@ const lr = (t) => {
     return null;
   const a = (u, f) => {
     s && f && s(u, f);
-  }, c = (u) => {
+  }, i = (u) => {
     if (!d)
       return;
     const f = ye({ session: u }, d);
@@ -785,7 +785,7 @@ const lr = (t) => {
         name: f.name,
         avatarSize: "xxs",
         secondarySlot: h(u),
-        subImageUrl: c(u),
+        subImageUrl: i(u),
         imageUrl: f.profile_picture,
         className: "pyrion-navigation-drawer-user-card"
       },
@@ -799,19 +799,19 @@ const lr = (t) => {
   resolveSessionSecondarySlot: l,
   onSessionClick: d,
   onLogoutClick: a,
-  onProfileClick: c,
+  onProfileClick: i,
   options: h,
   currentSystemId: u,
   userOptionsControls: f,
-  mobileAppSwitcherControls: i
+  mobileAppSwitcherControls: c
 }) => {
   const { getIsCollapsed: m, toggleCollapse: g, subscribeToCollapse: S } = oe(), C = x(() => {
     const p = m();
-    p ? (g(), f.current?.open()) : c?.(p);
-  }, [m, g, f, c]);
+    p ? (g(), f.current?.open()) : i?.(p);
+  }, [m, g, f, i]);
   return V(() => S((p) => {
-    p && (f.current?.close(), i.current?.close());
-  }), [S, f, i]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    p && (f.current?.close(), c.current?.close());
+  }), [S, f, c]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(X.Spacer, { className: "mb-3" }),
     /* @__PURE__ */ e.jsxs(he, { className: "", controls: f, children: [
       /* @__PURE__ */ e.jsx(he.Content, { onClick: C, className: "max-h-[60px] min-h-[60px] h-[60px] max-w-[70vw] w-[min(285px,70vw)] flex items-center", children: /* @__PURE__ */ e.jsx(
@@ -880,8 +880,8 @@ const lr = (t) => {
   for (const d of s) {
     if (!Object.prototype.hasOwnProperty.call(r, d))
       return !1;
-    const a = t[d], c = r[d];
-    if (a !== c)
+    const a = t[d], i = r[d];
+    if (a !== i)
       return !1;
   }
   return t.currentAppSessions !== r.currentAppSessions || t.options !== r.options || t.currentSystemId !== r.currentSystemId || t.userOptionsControls !== r.userOptionsControls || t.mobileAppSwitcherControls !== r.mobileAppSwitcherControls;
@@ -894,8 +894,8 @@ const at = E(({ enabled_systems: t, onClick: r, currentSystemId: s }) => {
         const h = t.find((u) => u._id === s);
         if (h) return { coverImage: h.coverImage, thumbnail: h.thumbnail };
       }
-      const a = window.location.origin, c = t.find((h) => h.url === a);
-      if (c) return { coverImage: c.coverImage, thumbnail: c.thumbnail };
+      const a = window.location.origin, i = t.find((h) => h.url === a);
+      if (i) return { coverImage: i.coverImage, thumbnail: i.thumbnail };
     }
     return { coverImage: "", thumbnail: "" };
   }, [t]), d = !!r;
@@ -981,10 +981,10 @@ function fr({
   isHyperDown: l,
   feedback: d,
   showSummaryInSlot: a,
-  copyOverrides: c,
+  copyOverrides: i,
   className: h
 }) {
-  const u = ur(t, c), f = !s && d.phase === "empty" && l, i = !s && d.phase === "idle";
+  const u = ur(t, i), f = !s && d.phase === "empty" && l, c = !s && d.phase === "idle";
   return /* @__PURE__ */ e.jsxs("div", { className: k("grid min-h-11 place-items-center p-4 relative text-center isolate", h), children: [
     /* @__PURE__ */ e.jsx(
       "p",
@@ -1024,7 +1024,7 @@ function fr({
       {
         className: k(
           "relative z-0 prometeo-fonts-label-medium text-neutral-medium-default transition-opacity duration-300 pointer-events-none",
-          i ? "opacity-100" : "opacity-0"
+          c ? "opacity-100" : "opacity-0"
         ),
         children: u.idleHint
       }
@@ -1041,7 +1041,7 @@ const mr = ({ type: t }) => {
   ] }),
   /* @__PURE__ */ e.jsx(ce, { shape: "rounded", className: "w-20 h-3" })
 ] }), hr = 2500, br = 400, xr = ({ onCloseClick: t, onMarkAllAsRead: r, loadingState: s, errorState: l, notifications: d, scrollableState: a }) => {
-  const [c, h] = H("NO_LEIDAS"), u = D(null), f = D(null), [i, m] = H({ phase: "idle" }), g = D(null), S = D(s.isLoading), C = D(0), p = D(!1), _ = D(0), j = D(0), v = x(() => {
+  const [i, h] = H("NO_LEIDAS"), u = D(null), f = D(null), [c, m] = H({ phase: "idle" }), g = D(null), S = D(s.isLoading), C = D(0), p = D(!1), _ = D(0), j = D(0), v = x(() => {
     g.current && (clearTimeout(g.current), g.current = null);
   }, []), y = x(() => {
     v(), g.current = setTimeout(() => {
@@ -1050,7 +1050,7 @@ const mr = ({ type: t }) => {
   }, [v]);
   V(() => () => v(), [v]), V(() => {
     v(), m({ phase: "idle" }), p.current = !1;
-  }, [c, v]), V(() => {
+  }, [i, v]), V(() => {
     const L = S.current;
     if (S.current = s.isLoading, !L && s.isLoading && s.type === "load_more" && (p.current = !0, C.current = d.length, v(), m({ phase: "idle" })), L && !s.isLoading && p.current) {
       p.current = !1;
@@ -1068,7 +1068,7 @@ const mr = ({ type: t }) => {
     v,
     y
   ]), V(() => {
-    if (!(i.phase !== "success" && i.phase !== "empty")) {
+    if (!(c.phase !== "success" && c.phase !== "empty")) {
       if (a.state.hyperextensionActive.down) {
         v();
         return;
@@ -1076,15 +1076,15 @@ const mr = ({ type: t }) => {
       y();
     }
   }, [
-    i.phase,
-    i.phase === "success" ? i.addedCount : 0,
-    i.phase === "success" ? i.bumpId : 0,
+    c.phase,
+    c.phase === "success" ? c.addedCount : 0,
+    c.phase === "success" ? c.bumpId : 0,
     a.state.hyperextensionActive.down,
     v,
     y
   ]), V(() => {
-    if (i.phase !== "success") return;
-    const L = i.bumpId;
+    if (c.phase !== "success") return;
+    const L = c.bumpId;
     if (j.current === L) return;
     j.current = L;
     let B = 0, re = 0;
@@ -1098,8 +1098,8 @@ const mr = ({ type: t }) => {
       cancelAnimationFrame(B), cancelAnimationFrame(re);
     };
   }, [
-    i.phase,
-    i.phase === "success" ? i.bumpId : 0,
+    c.phase,
+    c.phase === "success" ? c.bumpId : 0,
     a.handlers
   ]);
   const A = (L) => {
@@ -1110,15 +1110,15 @@ const mr = ({ type: t }) => {
       const L = u.current.clientHeight;
       f.current.style.setProperty("height", `calc(100dvh - ${L}px - 20px)`);
     }
-  }, [u?.current, c]);
-  const R = d.filter((L) => !L.read).length, { isLoading: z, type: q } = s, $ = z && q === "load_more", { hasError: U, children: J } = l, F = ne(() => d?.filter(
-    (L) => c === "NO_LEIDAS" ? !L.read : L
-  ), [d, c]), P = ne(() => ({
-    activeTab: c,
+  }, [u?.current, i]);
+  const R = d.filter((L) => !L.read).length, { isLoading: z, type: q } = s, $ = z && q === "load_more", { hasError: U, children: J } = l, F = se(() => d?.filter(
+    (L) => i === "NO_LEIDAS" ? !L.read : L
+  ), [d, i]), P = se(() => ({
+    activeTab: i,
     isLoading: z,
     notificationsLength: d.length
     // Añadir la longitud de las notificaciones como metadata
-  }), [c, z, d.length]), W = c !== "NO_LEIDAS", Y = a.state.hyperextensionActive.down, Q = c === "NO_LEIDAS" ? "sync_unread" : "load_more", K = !$ && (i.phase === "success" || i.phase === "empty");
+  }), [i, z, d.length]), W = se(() => i !== "NO_LEIDAS", [i]), Y = a.state.hyperextensionActive.down, Q = i === "NO_LEIDAS" ? "sync_unread" : "load_more", K = !$ && (c.phase === "success" || c.phase === "empty");
   return /* @__PURE__ */ e.jsx(
     "section",
     {
@@ -1137,7 +1137,7 @@ const mr = ({ type: t }) => {
             {
               className: "px-4 md:px-2 md:pl-2 pl-2 gap-0 md:gap-0",
               onTabChange: A,
-              activeTab: c,
+              activeTab: i,
               items: [
                 { id: "ALL", title: "Todas" },
                 { id: "NO_LEIDAS", title: "Sin leer" }
@@ -1161,7 +1161,7 @@ const mr = ({ type: t }) => {
               ] })
             }
           ),
-          r && b && c === "NO_LEIDAS" && !U && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end px-4", children: /* @__PURE__ */ e.jsx(Ee, { disabled: z || R === 0, onClick: r, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) })
+          r && b && i === "NO_LEIDAS" && !U && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end px-4", children: /* @__PURE__ */ e.jsx(Ee, { disabled: z || R === 0, onClick: r, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) })
         ] }),
         /* @__PURE__ */ e.jsxs(
           "div",
@@ -1187,10 +1187,10 @@ const mr = ({ type: t }) => {
                       fr,
                       {
                         action: Q,
-                        activeTab: c,
+                        activeTab: i,
                         isLoadMorePending: $,
                         isHyperDown: Y,
-                        feedback: i,
+                        feedback: c,
                         showSummaryInSlot: K
                       }
                     )
@@ -1218,7 +1218,7 @@ const mr = ({ type: t }) => {
                       /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-label-medium text-neutral-strong-default", children: "Cargando más notificaciones" }),
                       /* @__PURE__ */ e.jsx(Ht, { variant: "dot", size: "small", color: "var(--neutral-200)", className: "*:size-[3px]", speedMultiplier: 0.9 })
                     ] }),
-                    i.phase === "empty" && /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-label-medium text-neutral-medium-default", children: "No se agregaron notificaciones nuevas" })
+                    c.phase === "empty" && /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-label-medium text-neutral-medium-default", children: "No se agregaron notificaciones nuevas" })
                   ]
                 }
               )
@@ -1229,7 +1229,7 @@ const mr = ({ type: t }) => {
     }
   );
 }, gr = (t) => {
-  const { notificationsListControls: r } = t, [s, l] = H([]), [d, a] = H({ isLoading: !1, type: "load_more" }), [c, h] = H({ hasError: !1 }), [u, f] = H(!0), i = D(/* @__PURE__ */ new Set());
+  const { notificationsListControls: r } = t, [s, l] = H([]), [d, a] = H({ isLoading: !1, type: "load_more" }), [i, h] = H({ hasError: !1 }), [u, f] = H(!0), c = D(/* @__PURE__ */ new Set());
   V(() => {
     u || setTimeout(() => {
       f(!0);
@@ -1239,26 +1239,26 @@ const mr = ({ type: t }) => {
     l((A) => {
       const b = Array.isArray(v) ? y === "bottom" ? [...A, ...v] : [...v, ...A] : y === "bottom" ? [...A, v] : [v, ...A];
       return queueMicrotask(() => {
-        i.current.forEach((R) => R(b, { total: b.length, unread: b.filter((z) => !z.read).length }));
+        c.current.forEach((R) => R(b, { total: b.length, unread: b.filter((z) => !z.read).length }));
       }), b;
     });
-  }, []), g = x((v) => (i.current.add(v), () => {
-    i.current.delete(v);
+  }, []), g = x((v) => (c.current.add(v), () => {
+    c.current.delete(v);
   }), []), S = x((v) => {
     l((y) => {
       const A = Array.isArray(v) ? y.filter((b) => !v.includes(b._id)) : y.filter((b) => b._id !== v);
       return queueMicrotask(() => {
-        i.current.forEach((b) => b(A, { total: A.length, unread: A.filter((R) => !R.read).length }));
+        c.current.forEach((b) => b(A, { total: A.length, unread: A.filter((R) => !R.read).length }));
       }), A;
     });
   }, []), C = x(() => {
     l([]), queueMicrotask(() => {
-      i.current.forEach((v) => v([], { total: 0, unread: 0 }));
+      c.current.forEach((v) => v([], { total: 0, unread: 0 }));
     });
   }, []), p = x((v) => {
     const y = Array.isArray(v) ? v : v(s);
     l(y), queueMicrotask(() => {
-      i.current.forEach((A) => A(y, { total: y.length, unread: y.filter((b) => !b.read).length }));
+      c.current.forEach((A) => A(y, { total: y.length, unread: y.filter((b) => !b.read).length }));
     });
   }, []), _ = x((v, y = "load_more") => {
     a({ isLoading: v, type: y });
@@ -1277,20 +1277,20 @@ const mr = ({ type: t }) => {
   }), [m, g, p, S, C, _, j, f]), {
     notifications: s,
     loadingState: d,
-    errorState: c,
+    errorState: i,
     hasNextPage: u
   };
-}, yr = ({ closeSidebar: t, options: r, helpSection: s, initialSection: l, notificationsListControls: d, scrollableControls: a, navigationControls: c }) => {
+}, yr = ({ closeSidebar: t, options: r, helpSection: s, initialSection: l, notificationsListControls: d, scrollableControls: a, navigationControls: i }) => {
   const [h, u] = H(l ?? "notifications");
   V(() => {
-    const C = c?.current?.subscribeToSection?.(u);
+    const C = i?.current?.subscribeToSection?.(u);
     return () => {
       C?.();
     };
-  }, [c]);
+  }, [i]);
   const f = () => {
     t();
-  }, { notifications: i, loadingState: m, errorState: g } = gr({ notificationsListControls: d }), S = Ft({ scrollTopButton: { target: "2000px" } });
+  }, { notifications: c, loadingState: m, errorState: g } = gr({ notificationsListControls: d }), S = Ft({ scrollTopButton: { target: "2000px" } });
   return Te(a, () => ({
     subscribeToScrollTarget: S.handlers.subscribeToScrollTarget,
     subscribeToHyperextension: S.handlers.subscribeToHyperextension,
@@ -1301,7 +1301,7 @@ const mr = ({ type: t }) => {
       {
         onCloseClick: f,
         onMarkAllAsRead: r?.notificationsDrawerOptions?.onMarkAllAsRead,
-        notifications: i,
+        notifications: c,
         loadingState: m,
         errorState: g,
         scrollableState: S
@@ -1319,11 +1319,11 @@ const wr = ({
   scrollableControls: d,
   navigationControls: a
 }) => {
-  const { closeSidebar: c } = oe();
+  const { closeSidebar: i } = oe();
   return /* @__PURE__ */ e.jsx(
     it,
     {
-      closeSidebar: c,
+      closeSidebar: i,
       options: t,
       helpSection: r,
       initialSection: s.current,
@@ -1338,7 +1338,7 @@ const vr = ({ navigationControlsRef: t }) => {
   const r = oe();
   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;
 }, Nr = (t) => {
-  const { children: r, currentAppSessions: s, resolveUserSecondarySlot: l, resolveSessionSecondarySlot: d, handleNavigation: a, allActions: c, tabs: h, navigationControlsRef: u, initialSectionRef: f, userOptionsControls: i, mobileAppSwitcherControls: m, notificationsListControls: g, scrollableControls: S, outletRef: C, ...p } = t;
+  const { children: r, currentAppSessions: s, resolveUserSecondarySlot: l, resolveSessionSecondarySlot: d, handleNavigation: a, allActions: i, tabs: h, navigationControlsRef: u, initialSectionRef: f, userOptionsControls: c, mobileAppSwitcherControls: m, notificationsListControls: g, scrollableControls: S, outletRef: C, ...p } = t;
   return /* @__PURE__ */ e.jsxs(X, { disableDragOpen: p.options?.disableDragOpen, outletRef: C, defaultCollapsedState: p.options?.defaultCollapsedState, children: [
     /* @__PURE__ */ e.jsx(vr, { navigationControlsRef: u }),
     /* @__PURE__ */ e.jsx(X.LeftSlot, { children: /* @__PURE__ */ e.jsx(
@@ -1365,7 +1365,7 @@ const vr = ({ navigationControlsRef: t }) => {
       {
         navlinks: p.links,
         handleNavigation: a,
-        allActions: c,
+        allActions: i,
         activeActionId: p.activeActionId,
         initialSectionRef: f,
         navigationControlsRef: u,
@@ -1383,7 +1383,7 @@ const vr = ({ navigationControlsRef: t }) => {
         onLogoutClick: p.onLogoutClick,
         options: p.options,
         currentSystemId: p.currentSystemId,
-        userOptionsControls: i,
+        userOptionsControls: c,
         mobileAppSwitcherControls: m,
         onProfileClick: p.onProfileClick
       }
@@ -1411,14 +1411,14 @@ const vr = ({ navigationControlsRef: t }) => {
     )
   ] });
 }, dt = E(Nr, (t, r) => {
-  const { children: s, ...l } = t, { children: d, ...a } = r, c = Object.keys(l), h = Object.keys(a);
-  if (c.length !== h.length)
+  const { children: s, ...l } = t, { children: d, ...a } = r, i = Object.keys(l), h = Object.keys(a);
+  if (i.length !== h.length)
     return !1;
-  for (const u of c) {
+  for (const u of i) {
     if (!Object.prototype.hasOwnProperty.call(a, u))
       return !1;
-    const f = l[u], i = a[u];
-    if (f !== i)
+    const f = l[u], c = a[u];
+    if (f !== c)
       return !1;
   }
   return !0;
@@ -1431,7 +1431,7 @@ const ft = Le(null), Xr = () => {
   if (!t)
     throw new Error("usePyrionLayout debe usarse dentro de PyrionLayout");
   return t;
-}, Yr = ({ children: t, helpSection: r, state: s, links: l, onLinkClick: d, onNavigate: a, onLogoutClick: c, actions: h, activeActionId: u, onActionClick: f, tabsProps: i, currentSystemId: m, onSessionClick: g, onSystemLogoClick: S, onProfileClick: C, ...p }) => {
+}, Yr = ({ children: t, helpSection: r, state: s, links: l, onLinkClick: d, onNavigate: a, onLogoutClick: i, actions: h, activeActionId: u, onActionClick: f, tabsProps: c, currentSystemId: m, onSessionClick: g, onSystemLogoClick: S, onProfileClick: C, ...p }) => {
   const j = Object.assign({
     closeDrawerOnNavigate: !0,
     disableDragOpen: {
@@ -1484,17 +1484,17 @@ const ft = Le(null), Xr = () => {
       internal: ue(O?.url),
       external: O?.url
     };
-    le.system[N][T](G[T]), i?.onTabClick?.(n);
-  }, [m, ue, v, s.enabled_systems, i?.onTabClick]), fe = x((n) => {
+    le.system[N][T](G[T]), c?.onTabClick?.(n);
+  }, [m, ue, v, s.enabled_systems, c?.onTabClick]), fe = x((n) => {
     const N = v ? "mobile" : "desktop", O = s.company.products?.find((T) => T.name === n)?.domain;
-    le.product[N](O), i?.onTabClick?.(n);
-  }, [v, s.company.products, i?.onTabClick]), xe = x((n, N) => {
+    le.product[N](O), c?.onTabClick?.(n);
+  }, [v, s.company.products, c?.onTabClick]), xe = x((n, N) => {
     if (N) {
-      N(n), i?.onTabClick?.(n);
+      N(n), c?.onTabClick?.(n);
       return;
     } else
-      i?.onTabClick?.(n);
-  }, [i?.onTabClick]), Ne = x(() => {
+      c?.onTabClick?.(n);
+  }, [c?.onTabClick]), Ne = x(() => {
     const n = {};
     s.enabled_systems.forEach((O) => {
       n[O.url] = O.name;
@@ -1504,7 +1504,7 @@ const ft = Le(null), Xr = () => {
       if (N === O)
         return T;
     return "";
-  }, [s.enabled_systems]), se = i?.currentTabName || Ne(), me = ne(
+  }, [s.enabled_systems]), ne = c?.currentTabName || Ne(), me = se(
     () => s.sessions || [],
     [s.sessions]
   ), ie = (n) => n == null ? null : typeof n == "string" || typeof n == "number" || typeof n == "boolean" ? String(n) : pe(n) ? n : typeof n == "object" ? JSON.stringify(n) : null, o = x((n, N) => {
@@ -1540,7 +1540,7 @@ const ft = Le(null), Xr = () => {
       return o(N, T);
     },
     [m, j?.sessionCardOptions?.secondarySlot, j?.userCardOptions?.secondarySlot, o, s.company, s.enabled_systems]
-  ), M = ne(() => {
+  ), M = se(() => {
     const n = [];
     return b.current.openNotifications = () => {
       R.current = "notifications", z.current.forEach((N) => N("notifications")), b.current.openSidebar?.();
@@ -1566,16 +1566,16 @@ const ft = Le(null), Xr = () => {
       onClick: () => j.configurationActionOptions?.onClick?.(b.current),
       className: "default-action-configuration"
     }), n;
-  }, [j, r, f, J]), ee = ne(
+  }, [j, r, f, J]), ee = se(
     () => [...M, ...h || []],
     [M, h]
-  ), te = ne(() => {
+  ), te = se(() => {
     const n = s.enabled_systems.map((T) => ({
       name: T.name,
       thumbnail: T.thumbnail,
       onClick: Z,
       id: T._id
-    })) || [], N = i?.customTabs?.map((T) => ({
+    })) || [], N = c?.customTabs?.map((T) => ({
       ...T,
       onClick: () => xe(T.name, T?.onClick)
     })) || [], O = s.company.products?.map((T) => ({
@@ -1584,7 +1584,7 @@ const ft = Le(null), Xr = () => {
       onClick: fe
     })) || [];
     return [...n, ...N, ...O];
-  }, [xe, fe, Z, s.enabled_systems, s.company.products, i?.customTabs]), Se = x((n, N) => {
+  }, [xe, fe, Z, s.enabled_systems, s.company.products, c?.customTabs]), Se = x((n, N) => {
     y.current?.addNewNotification ? y.current.addNewNotification(n, N) : console.warn("Notifications controls not ready yet");
   }, []), Ce = x((n) => y.current?.subscribeToUpdates ? y.current.subscribeToUpdates(n) : (console.warn("Notifications controls not ready yet"), () => {
   }), []), mt = x((n) => {
@@ -1617,8 +1617,8 @@ const ft = Le(null), Xr = () => {
   }, [U]), kt = x(() => {
     W(!1);
   }, []), Dt = x(() => {
-    c?.(b.current);
-  }, [c]), At = x((n) => {
+    i?.(b.current);
+  }, [i]), At = x((n) => {
     C?.(n, b.current);
   }, [C]), Lt = x((n, N) => {
     g?.(n, N, b.current);
@@ -1656,7 +1656,7 @@ const ft = Le(null), Xr = () => {
         scrollableControls: A,
         outletRef: U,
         onProfileClick: At,
-        currentTabName: se,
+        currentTabName: ne,
         children: t
       }
     ) })

package/package.json

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