prometeo-design-system 3.1.7 → 4.0.0

package/dist/PyrionLayout.es.js

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