prometeo-design-system 3.1.4 → 3.1.6

package/dist/PyrionNavigationDrawer.es.js

@@ -0,0 +1,962 @@
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { useIsMobile as Me } from "./useDevice.es.js";
+import { g as te } from "./utils-X4-h3cum.js";
+import q, { memo as A, forwardRef as ae, useState as se, useEffect as W, useRef as O, useCallback as N, useMemo as Fe, Children as ze, isValidElement as ue, useImperativeHandle as we, useContext as Be, createContext as Ue } from "react";
+import { useNavigate as Ve } from "react-router";
+import { c as j } from "./cn-B6yFEsav.js";
+import { CloseNavBarDesktop as He } from "./Icons/CloseNavBarDesktop.es.js";
+import { c as pe } from "./index-BOQuZ0gG.js";
+import { B as $e, T as qe } from "./badge-B1IK_-i5.js";
+import { CrevronLeft as We } from "./Icons/CrevronLeft.es.js";
+import { Scrollable as le } from "./Scrollable.es.js";
+import H from "./TicketCard.es.js";
+import Ge from "./Avatar.es.js";
+import Je from "./NotificationCard.es.js";
+import { Notifications as Ne } from "./Icons/Notifications.es.js";
+import ne from "./Button.es.js";
+import { Close as je } from "./Icons/Close.es.js";
+import { Help as ye } from "./Icons/Help.es.js";
+import { Logout as Ke } from "./Icons/Logout.es.js";
+import { Settings as Qe } from "./Icons/Settings.es.js";
+const Q = (a, l) => typeof a == "function" ? l ? a(l) : null : a, Xe = (a) => {
+  const { children: l, classNameDrawer: s, classNameSidebar: n } = a, d = O(null), o = O(null), i = O(null), f = O(null), b = O(!1), x = O(!1), v = O("drawer"), y = O(/* @__PURE__ */ new Set()), g = O(/* @__PURE__ */ new Set()), u = N((r) => {
+    const p = o.current;
+    p && (p.classList.toggle("collapsed", r), p.classList.toggle("expanded", !r));
+  }, []), S = N((r) => {
+    const p = f.current;
+    p && (p.classList.toggle("collapsed", r), p.classList.toggle("expanded", !r));
+  }, []), D = N(
+    (r, { notify: p = !0 } = {}) => {
+      const t = b.current !== r;
+      b.current = r, u(r), p && t && y.current.forEach((c) => c(r));
+    },
+    [u]
+  ), T = N(
+    (r, { notify: p = !0 } = {}) => {
+      const t = x.current !== r;
+      if (x.current = r, S(r), p && t) {
+        const c = !r;
+        g.current.forEach((h) => h(c));
+      }
+    },
+    [S]
+  ), m = N(
+    (r, { notify: p = !0 } = {}) => {
+      const t = v.current, c = t !== r;
+      v.current = r, window.matchMedia("(min-width: 768px)").matches || D(r !== "drawer", { notify: p });
+      const h = t === "sidebar", w = r === "sidebar";
+      p && c && h !== w && g.current.forEach((_) => _(w));
+    },
+    [D]
+  ), I = N((r) => {
+    const p = d.current;
+    if (!p || window.matchMedia("(min-width: 768px)").matches) return;
+    const t = i.current?.offsetLeft ?? 0, c = f.current?.offsetLeft ?? t, h = r === "drawer" ? 0 : r === "sidebar" ? c : t;
+    p.scrollTo({ left: h, behavior: "smooth" });
+  }, []), E = N(() => {
+    const r = d.current, p = i.current;
+    if (!r || !p || window.matchMedia("(min-width: 768px)").matches) return;
+    const t = [
+      { panel: "drawer", offset: 0 },
+      { panel: "outlet", offset: p.offsetLeft }
+    ], c = f.current;
+    c && t.push({ panel: "sidebar", offset: c.offsetLeft });
+    const h = r.scrollLeft;
+    let w = t[0], _ = Math.abs(h - w.offset);
+    for (let P = 1; P < t.length; P++) {
+      const Z = Math.abs(h - t[P].offset);
+      Z < _ && (w = t[P], _ = Z);
+    }
+    m(w.panel);
+  }, [m]);
+  W(() => {
+    const r = d.current, p = i.current;
+    if (!r || !p) return;
+    if (window.matchMedia("(min-width: 768px)").matches) {
+      D(!1, { notify: !1 }), T(!0, { notify: !1 });
+      return;
+    }
+    requestAnimationFrame(() => {
+      r.scrollLeft = p.offsetLeft, m("outlet");
+    });
+  }, [m, D]), W(() => {
+    const r = d.current;
+    if (!r) return;
+    let p = !1;
+    const t = () => {
+      window.matchMedia("(min-width: 768px)").matches || p || (p = !0, requestAnimationFrame(() => {
+        E(), p = !1;
+      }));
+    };
+    return r.addEventListener("scroll", t, { passive: !0 }), () => r.removeEventListener("scroll", t);
+  }, [E]);
+  const F = N(() => {
+    const r = window.matchMedia("(min-width: 768px)").matches, p = !b.current;
+    if (r) {
+      D(p);
+      return;
+    }
+    const t = p ? "outlet" : "drawer";
+    m(t), I(t);
+  }, [I, m, D]), R = Fe(
+    () => ({
+      toggleCollapse: F,
+      getIsCollapsed: () => b.current,
+      subscribeToCollapse: (r) => (y.current.add(r), () => {
+        y.current.delete(r);
+      }),
+      openSidebar: () => {
+        if (f.current) {
+          if (window.matchMedia("(min-width: 768px)").matches) {
+            T(!1);
+            return;
+          }
+          m("sidebar"), I("sidebar");
+        }
+      },
+      closeSidebar: () => {
+        if (window.matchMedia("(min-width: 768px)").matches) {
+          T(!0);
+          return;
+        }
+        m("outlet"), I("outlet");
+      },
+      toggleSidebar: () => {
+        if (!f.current) return;
+        if (window.matchMedia("(min-width: 768px)").matches) {
+          T(!x.current);
+          return;
+        }
+        const r = v.current === "sidebar" ? "outlet" : "sidebar";
+        m(r), I(r);
+      },
+      getIsSidebarOpen: () => f.current ? window.matchMedia("(min-width: 768px)").matches ? !x.current : v.current === "sidebar" : !1,
+      subscribeToSidebarOpen: (r) => (g.current.add(r), () => {
+        g.current.delete(r);
+      })
+    }),
+    [F, I, m, T]
+  ), z = typeof l == "function" ? l(R) : l, X = ze.toArray(z);
+  let B = null, U = null, k = null;
+  const C = [];
+  let L = null, G = null;
+  X.forEach((r) => {
+    if (!ue(r)) {
+      C.push(r);
+      return;
+    }
+    if (r.type === ke && !B) {
+      B = q.cloneElement(r, { context: R });
+      return;
+    }
+    if (r.type === re && !U) {
+      U = q.cloneElement(r, { context: R });
+      return;
+    }
+    if (r.type === fe && !k) {
+      k = q.cloneElement(r, { context: R });
+      return;
+    }
+    if (r.type === me && !L) {
+      L = q.cloneElement(r, { context: R });
+      return;
+    }
+    if (r.type === Se && !G) {
+      G = q.cloneElement(r, { context: R });
+      return;
+    }
+    C.push(r);
+  });
+  const oe = !!U, ie = U ?? (C.length ? /* @__PURE__ */ e.jsx(re, { context: R, children: C }) : null), ce = oe ? C : [], V = L ?? (!!L ? /* @__PURE__ */ e.jsx(me, { context: R, children: z }) : null), K = k ?? (!!k ? /* @__PURE__ */ e.jsx(fe, { context: R, children: k }) : null), J = !!G, $ = G;
+  return /* @__PURE__ */ e.jsxs("div", { ref: d, className: j("w-full h-full overflow-y-hidden", J ? "navigation-drawer-with-sidebar" : "navigation-drawer"), children: [
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: o,
+        className: j(
+          "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",
+          "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(Ce, { onToggleCollapse: F }),
+              B
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { className: "flex flex-1 overflow-hidden relative flex-col", children: [
+              ce,
+              ie
+            ] })
+          ] }),
+          K
+        ]
+      }
+    ),
+    V && ue(V) ? q.cloneElement(V, { ref: i }) : V,
+    $ && ue($) ? q.cloneElement($, {
+      ref: f,
+      className: j("sidebar", "collapsed", $.props?.className, n)
+    }) : $
+  ] });
+}, be = A(Xe), Ce = A(({ onToggleCollapse: a }) => /* @__PURE__ */ e.jsx(
+  "button",
+  {
+    type: "button",
+    onClick: a,
+    className: "collapse-button cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300 w-max",
+    children: /* @__PURE__ */ e.jsx(He, { size: 32, className: "transition-transform duration-300 p-1" })
+  }
+));
+Ce.displayName = "NavigationDrawerCollapseButton";
+const ke = A(({ children: a, className: l, context: s }) => {
+  const n = Q(a, s);
+  return /* @__PURE__ */ e.jsx("div", { className: j("flex items-center justify-between", l), children: n });
+}), re = A(({ children: a, className: l, context: s, ...n }) => {
+  const d = Q(a, s);
+  return /* @__PURE__ */ e.jsx("div", { ...n, className: j("w-full flex-1 drawer-content", l), children: d });
+});
+re.displayName = "NavigationDrawerContent";
+const fe = A(({ children: a, className: l, context: s }) => {
+  const n = Q(a, s);
+  return /* @__PURE__ */ e.jsx("div", { className: j("flex items-center justify-between", l), children: n });
+}), Ye = A(({ className: a }) => /* @__PURE__ */ e.jsx("div", { className: j("w-full border-t border-neutral-strong-default ", a) })), me = A(ae(({ children: a, className: l, context: s }, n) => {
+  const d = Q(a, s);
+  return /* @__PURE__ */ e.jsx("div", { ref: n, className: j("flex-1 overflow-auto ", l), children: d });
+})), Se = A(ae(({ children: a, className: l, context: s, modal: n = !1, closeOnOverlayClick: d = !1, unmountChildrenOnClose: o = !0 }, i) => {
+  const f = Q(a, s), b = typeof window < "u" && window.matchMedia("(min-width: 768px)").matches, [x, v] = se(() => !o), [y, g] = se(!1);
+  return W(() => {
+    o && s?.subscribeToSidebarOpen((u) => {
+      u ? (g(!1), v(!0)) : g(!0);
+    });
+  }, [o]), W(() => {
+    const u = i && typeof i == "object" && "current" in i ? i.current : null;
+    if (!u) return;
+    const S = () => {
+      y && (v(!1), g(!1));
+    };
+    return u.addEventListener("transitionend", S), () => u.removeEventListener("transitionend", S);
+  }, [y]), /* @__PURE__ */ e.jsxs("div", { ref: i, className: j("sidebar", b ? "collapsed" : "expanded", "h-full overflow-auto", l), "aria-modal": n || void 0, children: [
+    n && b && /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: j("navigation-drawer-sidebar-overlay"),
+        onClick: (u) => {
+          u.preventDefault(), u.stopPropagation(), d && s?.closeSidebar?.();
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: j("navigation-drawer-sidebar-inner"), children: [
+      /* @__PURE__ */ e.jsx("div", { className: "secure-click-margin" }),
+      x && f
+    ] })
+  ] });
+})), M = Object.assign(be, {
+  Root: be,
+  Header: ke,
+  Content: re,
+  Footer: fe,
+  Spacer: Ye,
+  Outlet: me,
+  Sidebar: Se
+});
+M.displayName = "NavigationDrawer";
+const Ze = "hover:bg-neutral-medium-hover", et = pe("", {
+  variants: {
+    isSelected: {
+      true: "bg-neutral-medium-selected ",
+      false: ""
+    },
+    disabled: {
+      true: "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent",
+      false: "cursor-pointer"
+    }
+  }
+}), tt = pe(
+  j(
+    "select-none",
+    "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" }
+    ]
+  }
+), ge = pe(
+  j(
+    "transition-colors duration-300 ease-out"
+  ),
+  {
+    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" }
+    ]
+  }
+), st = (a) => {
+  const {
+    title: l,
+    icon: s,
+    count: n,
+    className: d,
+    isSelected: o = !1,
+    hasSublinks: i,
+    subLinksCollapsed: f,
+    onToggleSublinks: b,
+    as: x = "div",
+    onClick: v,
+    onAuxClick: y,
+    disabled: g = !1
+  } = a, u = (m) => {
+    g || v?.(m);
+  }, S = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-center", children: [
+      s && /* @__PURE__ */ e.jsx(s, { size: 24, className: ge({ disabled: g, isSelected: o }) }),
+      /* @__PURE__ */ e.jsx("label", { className: tt({ disabled: g, isSelected: o }), children: l })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1 items-center", children: [
+      n && n ? /* @__PURE__ */ e.jsx($e, { count: n, maxCount: 9, className: "badge", disabled: g }) : "",
+      i && /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: j(
+            "sublinks-toggle",
+            "transition-all duration-200",
+            "rounded-full relative grid place-items-center size-6",
+            o && "text-primary-default-default",
+            `${f ? "-rotate-90" : "rotate-90"}`
+          ),
+          children: /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              disabled: g,
+              type: "button",
+              onClick: b,
+              className: j("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", ge({ disabled: g, isSelected: o }), g && "pointer-events-none"),
+              children: /* @__PURE__ */ e.jsx(We, {})
+            }
+          )
+        }
+      )
+    ] })
+  ] }), D = j(
+    "group navitem",
+    "h-12 flex-1 flex items-center p-3 rounded-lg justify-between w-full",
+    "transition-all duration-300",
+    Ze,
+    et({ isSelected: o, disabled: g }),
+    d
+  );
+  if (x === "a") {
+    const m = {
+      onClick: u,
+      onAuxClick: y,
+      className: D
+    };
+    return /* @__PURE__ */ e.jsx("a", { ...m, children: S });
+  }
+  if (x === "button") {
+    const m = {
+      onClick: u,
+      type: "button",
+      className: D
+    };
+    return /* @__PURE__ */ e.jsx("button", { ...m, children: S });
+  }
+  const T = {
+    onClick: u,
+    className: D
+  };
+  return /* @__PURE__ */ e.jsx("div", { ...T, children: S });
+}, xe = A(st);
+xe.displayName = "NavigationDrawerItemBase";
+const nt = (a) => {
+  const { title: l, icon: s, count: n, className: d, isActive: o, onClick: i, isView: f = !0, disabled: b } = a;
+  return f ? /* @__PURE__ */ e.jsx(
+    xe,
+    {
+      as: "button",
+      title: l,
+      icon: s,
+      count: n,
+      className: d,
+      isSelected: o,
+      onClick: i,
+      disabled: b
+    }
+  ) : null;
+}, De = A(nt);
+De.displayName = "NavigationDrawerActionItem";
+const rt = ({ actions: a, activeActionId: l, onActionClick: s, className: n }) => /* @__PURE__ */ e.jsx(le, { className: j("flex flex-col gap-2 w-full ", n), scrollbarProps: { hide: !0 }, indicators: {
+  top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
+  bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
+}, children: a?.map((d) => {
+  const { id: o, onClick: i, isView: f = !0, ...b } = d, x = o === l, v = () => {
+    s?.(o), i?.();
+  };
+  return f ? /* @__PURE__ */ e.jsx(
+    De,
+    {
+      ...b,
+      id: o,
+      isActive: x,
+      onClick: v
+    },
+    o
+  ) : null;
+}) }), Ae = A(rt);
+Ae.displayName = "NavigationDrawerActions";
+const at = (a) => {
+  const { className: l, title: s, path: n, onClick: d, isSelected: o, parentPath: i } = a, f = N(() => {
+    d?.(n);
+  }, [n]), b = N(() => {
+    if (n.startsWith("./")) {
+      if (!i) return;
+      const x = i + n.slice(2);
+      window.open(x, "_blank");
+    } else
+      window.open(n, "_blank");
+  }, [n]);
+  return /* @__PURE__ */ e.jsx(
+    "a",
+    {
+      onClick: f,
+      onAuxClick: b,
+      className: j(
+        "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",
+        l
+      ),
+      children: /* @__PURE__ */ e.jsx("p", { className: j(
+        "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 })
+    }
+  );
+}, Oe = A(at);
+Oe.displayName = "NavItemSecondary";
+const lt = ae((a, l) => {
+  const [s, n] = se(!0), d = O(null), { path: o, title: i, icon: f, count: b, className: x, isSelected: v = !1, onClick: y, sublinks: g, toggleCollapse: u, getIsCollapsed: S, subscribeToCollapse: D, isView: T = !0, disabled: m } = a;
+  W(() => D ? D((C) => {
+    C && n(!0);
+  }) : void 0, [D]);
+  const I = N(() => {
+    n((k) => !k);
+  }, []), E = N((k) => {
+    n(k);
+  }, []), F = {
+    toggle: I,
+    setIsCollapsed: E,
+    get isCollapsed() {
+      return s;
+    },
+    get isDrawerCollapsed() {
+      return S?.() ?? !1;
+    },
+    toggleDrawerCollapse: u,
+    subscribeToCollapse: D
+  };
+  we(l, () => F, [F, s, S, u]);
+  const R = f, z = N(() => {
+    const k = S?.() ?? !1;
+    if (g && g.length > 0 && k) {
+      E(!1), u?.();
+      return;
+    }
+    y?.(o);
+  }, [o, y, g, u, E, S]), X = N(() => {
+    window.open(o, "_blank");
+  }, [o]), B = () => {
+    if (!g || m) return null;
+    if (a.subLinksRender && g)
+      return a.subLinksRender(g, F);
+    const k = N((C) => {
+      if (C.startsWith("./")) {
+        const L = o + C.slice(2);
+        y?.(L);
+      } else
+        y?.(C);
+    }, [o]);
+    return W(() => {
+      const C = d.current;
+      if (!C) return;
+      const L = C.scrollHeight;
+      C.style.setProperty("--sublinks-max-height", `${L}px`);
+    }, []), /* @__PURE__ */ e.jsx("div", { ref: d, className: `sublinks flex flex-col gap-1 ml-8 ${s ? "collapsed" : "expanded"}`, children: g.map((C) => /* @__PURE__ */ e.jsx(Oe, { ...C, onClick: k, parentPath: o }, `${C.title}-${C.path}`)) });
+  }, U = (k) => {
+    k.stopPropagation(), k.preventDefault(), I();
+  };
+  return T ? /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ e.jsx(
+      xe,
+      {
+        as: "a",
+        title: i,
+        icon: R,
+        count: b,
+        className: x,
+        isSelected: v,
+        hasSublinks: !!g,
+        subLinksCollapsed: s,
+        onToggleSublinks: U,
+        onClick: z,
+        onAuxClick: X,
+        disabled: m
+      }
+    ),
+    B()
+  ] }) : null;
+}), Te = A(lt);
+Te.displayName = "NavigationDrawerLinkItem";
+const ot = ({ navlinks: a, handleNavigation: l, className: s, getIsCollapsed: n, toggleCollapse: d, subscribeToCollapse: o }) => (
+  // <div className={cn("flex flex-col gap-2 h-full",className)}>
+  /* @__PURE__ */ e.jsx(le, { className: j("flex flex-col gap-2 w-full ", s), scrollbarProps: { hide: !0 }, indicators: {
+    top: { type: "shadow", behavior: "scroll-on-hover", show: !0 },
+    bottom: { type: "shadow", behavior: "scroll-on-hover", show: !0 }
+  }, children: a?.map((i, f) => {
+    const b = i.isSelected || i.path === window.location.pathname || (i.relatedPaths?.some((x) => window.location.pathname.startsWith(x)) ?? !1);
+    return /* @__PURE__ */ e.jsx(
+      Te,
+      {
+        className: "",
+        ...i,
+        isSelected: b,
+        onClick: l,
+        toggleCollapse: d,
+        getIsCollapsed: n,
+        subscribeToCollapse: o,
+        disabled: i.disabled,
+        isView: i.isView
+      },
+      f
+    );
+  }) })
+), Ie = A(ot);
+Ie.displayName = "NavigationDrawerNavlinks";
+const it = ({ name: a, imageUrl: l, avatarSize: s = "xxs", subImageUrl: n, className: d, mainSlot: o = a, secondarySlot: i }) => {
+  const f = N(() => 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]), b = N(() => 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: j("flex items-center gap-2 p-3 rounded-lg max-w-full max-h-full select-none ", d), children: [
+    /* @__PURE__ */ e.jsx(
+      Ge,
+      {
+        fallbackText: a,
+        sizeImage: s,
+        sizeFallback: s,
+        imageUrl: l,
+        subImageUrl: n
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: j("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: f() }),
+      /* @__PURE__ */ e.jsx("div", { className: "flex gap-1 justify-between overflow-hidden relative w-full", children: b() })
+    ] })
+  ] });
+}, he = A(it);
+he.displayName = "UserCard";
+const ct = ({ tabs: a, content: l, controls: s }) => /* @__PURE__ */ e.jsxs(H, { controls: s, children: [
+  /* @__PURE__ */ e.jsx(H.Content, { children: typeof l == "function" ? l() : l }),
+  /* @__PURE__ */ e.jsxs(H.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(le, { className: "max-h-52", scrollbarProps: { hide: !0 }, children: a?.map((n) => {
+        const d = typeof n.thumbnail == "string" ? /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            src: n.thumbnail,
+            alt: n.description,
+            className: "size-8 aspect-square rounded",
+            draggable: !1
+          }
+        ) : n.thumbnail, o = () => {
+          n.disabled || n.onClick && n.onClick(n.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: n.name }),
+            n.description && /* @__PURE__ */ e.jsx("p", { className: "prometeo-fonts-body-small text-neutral-medium-default line-clamp-1", children: n.description })
+          ] })
+        ] });
+      }) })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", {})
+  ] })
+] }), ve = A(({ enabled_systems: a, onClick: l, currentSystemId: s }) => {
+  const n = N(() => {
+    if (a) {
+      if (s) {
+        const f = a.find((b) => b.system_id === s);
+        if (f) return { coverImage: f.coverImage, thumbnail: f.thumbnail };
+      }
+      const o = window.location.origin, i = a.find((f) => f.url === o);
+      if (i) return { coverImage: i.coverImage, thumbnail: i.thumbnail };
+    }
+    return { coverImage: "", thumbnail: "" };
+  }, [a]), d = !!l;
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      "img",
+      {
+        src: n().coverImage,
+        alt: "System Logo",
+        className: j("w-full h-12 rounded object-contain system-cover-image ", d && "cursor-pointer"),
+        draggable: !1,
+        onClick: l
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      "img",
+      {
+        src: n().thumbnail,
+        alt: "System Logo",
+        className: j("w-12 h-12 rounded object-cover system-thumbnail ", d && "cursor-pointer"),
+        draggable: !1,
+        onClick: l
+      }
+    )
+  ] });
+}), dt = ({ onCloseClick: a, onMarkAllAsRead: l, notifications: s }) => /* @__PURE__ */ e.jsxs(
+  "section",
+  {
+    className: "w-full md:w-[479px] bg-neutral-default-default border-l-0 md:border-l border-neutral-strong-default",
+    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(Ne, { 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(ne, { onClick: () => a?.(), icon: /* @__PURE__ */ e.jsx(je, {}), 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: [
+        l && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ e.jsx(ne, { onClick: l, label: "Marcar todas como leidas", variant: "text", animate: !1, animateIcon: !1, size: "small" }) }),
+        s?.map((n, d) => /* @__PURE__ */ e.jsx(Je, { ...n, className: " border-b border-neutral-strong-default rounded-b-none last:border-b-0" }, d))
+      ] })
+    ]
+  }
+), ut = ({ onCloseClick: a, children: l, 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(ye, { 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(ne, { onClick: () => a?.(), icon: /* @__PURE__ */ e.jsx(je, {}), 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: l })
+    ]
+  }
+), Re = ae(({ closeSidebar: a, options: l, state: s, helpSection: n, initialSection: d }, o) => {
+  const [i, f] = se(d ?? "notifications");
+  we(o, () => ({
+    setActiveSection: f
+  }));
+  const b = () => {
+    a();
+  };
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    i === "notifications" && !l?.notificationsDrawerOptions?.hide && /* @__PURE__ */ e.jsx(
+      dt,
+      {
+        onCloseClick: b,
+        onMarkAllAsRead: l?.notificationsDrawerOptions?.onMarkAllAsRead,
+        notifications: s.notifications
+      }
+    ),
+    i === "help" && n && !l?.helpSectionDrawerOptions?.hide && /* @__PURE__ */ e.jsx(ut, { onCloseClick: b, children: typeof n == "function" ? n() : n })
+  ] });
+});
+Re.displayName = "SidebarContent";
+const ft = (a) => {
+  const { sessions: l, onSessionClick: s, secondarySlot: n, currentSystemId: d, subImageUrlAccessor: o } = a;
+  if (!l || l.length === 0)
+    return null;
+  const i = (x) => {
+    s && s(x);
+  }, f = (x) => {
+    if (!o)
+      return;
+    const v = x.systems?.find((g) => g.system_id === d)?.metadata;
+    return v ? te(v, o) : void 0;
+  }, b = N((x) => typeof n == "function" ? n(x) : n, [n]);
+  return /* @__PURE__ */ e.jsx("div", { className: "w-full h-full flex flex-col gap-2", children: l?.map((x) => {
+    const { userHub: v } = x;
+    return /* @__PURE__ */ e.jsx(H, { className: " shrink-0 h-max", children: /* @__PURE__ */ e.jsx(H.Content, { onClick: () => i(x), className: "p-0 group-data-[expanded=true]/ticketcard:border-none", children: /* @__PURE__ */ e.jsx(
+      he,
+      {
+        name: v.name,
+        avatarSize: "xxs",
+        secondarySlot: b(x),
+        subImageUrl: f(x),
+        imageUrl: v.profile_picture,
+        className: "pyrion-navigation-drawer-user-card"
+      },
+      x.token
+    ) }) });
+  }) });
+}, _e = Ue(null), _t = () => {
+  const a = Be(_e);
+  if (!a)
+    throw new Error("usePyrionNavigation debe usarse dentro de PyrionNavigationDrawer");
+  return a;
+}, Et = ({ children: a, helpSection: l, state: s, links: n, onLinkClick: d, onNavigate: o, onLogoutClick: i, actions: f, activeActionId: b, onActionClick: x, tabsProps: v, currentSystemId: y, onSessionClick: g, options: u, onSystemLogoClick: S }) => {
+  const D = Ve(), T = Me(), m = O({}), I = O(null), E = O("notifications"), R = N((t) => {
+    if (d) {
+      d(t);
+      return;
+    }
+    const c = window.location.pathname;
+    D(t), o && o(c, t);
+  }, [d, o, window.location.pathname]), z = (t) => {
+    t && window.open(t, "_blank");
+  }, B = {
+    system: {
+      mobile: z,
+      desktop: (t) => {
+        typeof window < "u" && t && (window.location.href = t);
+      }
+    },
+    product: {
+      mobile: z,
+      desktop: z
+    }
+  }, U = (t) => {
+    const c = T ? "mobile" : "desktop", h = s.enabled_systems.find((w) => w.name === t)?.url;
+    B.system[c](h), v?.onTabClick?.(t);
+  }, k = (t) => {
+    const c = T ? "mobile" : "desktop", h = s.company.products?.find((w) => w.name === t)?.domain;
+    B.product[c](h), v?.onTabClick?.(t);
+  }, C = (t, c) => {
+    if (c) {
+      c(t), v?.onTabClick?.(t);
+      return;
+    } else
+      v?.onTabClick?.(t);
+  }, L = s.enabled_systems.map((t) => ({ name: t.name, thumbnail: t.thumbnail, onClick: U })) || [], G = v?.customTabs?.map((t) => ({ ...t, onClick: () => C(t.name, t?.onClick) })) || [], oe = s.company.products?.map((t) => ({ name: t.name, thumbnail: t.thumbnail, onClick: k })) || [], ie = () => {
+    const t = {};
+    s.enabled_systems.forEach((h) => {
+      t[h.url] = h.name;
+    });
+    const c = window.location.origin;
+    for (const [h, w] of Object.entries(t))
+      if (c === h)
+        return w;
+    return "";
+  }, ce = v?.currentTabName || ie(), Y = [
+    ...L,
+    ...G,
+    ...oe
+  ], V = O(null), de = O(null), K = s.sessions?.filter((t) => t.systems?.some((c) => c.system_id === y)), J = N((t, c) => {
+    if (!t) return null;
+    if (Array.isArray(t)) {
+      const h = t?.[0] ? te(c, t[0]) : null, w = t?.[1] ? te(c, t[1]) : null;
+      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: h }),
+        w && /* @__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: w })
+        ] })
+      ] });
+    }
+    return typeof t == "string" ? te(c, t) : typeof t == "function" ? t(c) : null;
+  }, []), $ = N(
+    (t) => {
+      const c = u?.userCardOptions?.secondarySlot;
+      if (!c) return null;
+      const h = s.enabled_systems?.find((_) => _.system_id === y), w = { company: s.company, user: s.user, system: h, metadata: t };
+      return J(c, w);
+    },
+    [y, u?.userCardOptions?.secondarySlot, J, s.company, s.enabled_systems, s.user]
+  ), r = N(
+    (t) => {
+      const c = u?.sessionCardOptions?.secondarySlot || u?.userCardOptions?.secondarySlot;
+      if (!c) return null;
+      const h = t.systems?.find((_) => _.system_id === y), w = { company: s.company, user: t.userHub, system: h, metadata: h?.metadata };
+      return J(c, w);
+    },
+    [y, u?.sessionCardOptions?.secondarySlot, u?.userCardOptions?.secondarySlot, J, s.company]
+  ), p = ({ children: t }) => /* @__PURE__ */ e.jsx(_e.Provider, { value: m.current, children: /* @__PURE__ */ e.jsxs(M, { children: [
+    /* @__PURE__ */ e.jsx(M.Header, { className: "flex flex-col relative select-none", children: ({ getIsCollapsed: c }) => {
+      const h = N(() => {
+        if (S) {
+          const w = c();
+          S(w);
+        }
+      }, [S, c]);
+      return T ? /* @__PURE__ */ e.jsx(
+        ct,
+        {
+          controls: de,
+          tabs: Y,
+          content: /* @__PURE__ */ e.jsx(ve, { enabled_systems: s.enabled_systems, onClick: h, currentSystemId: y })
+        }
+      ) : /* @__PURE__ */ e.jsx(ve, { enabled_systems: s.enabled_systems, onClick: h, currentSystemId: y });
+    } }),
+    /* @__PURE__ */ e.jsx(M.Content, { className: "overflow-hidden flex flex-col  relative flex-1 w-[285px] md:w-auto", children: ({ toggleCollapse: c, getIsCollapsed: h, subscribeToCollapse: w, openSidebar: _, closeSidebar: P, toggleSidebar: Z, getIsSidebarOpen: Ee, subscribeToSidebarOpen: Le }) => {
+      m.current.toggleCollapse = c, m.current.getIsCollapsed = h, m.current.subscribeToCollapse = w, m.current.openSidebar = _, m.current.closeSidebar = P, m.current.toggleSidebar = Z, m.current.getIsSidebarOpen = Ee, m.current.subscribeToSidebarOpen = Le, m.current.openNotifications = () => {
+        E.current = "notifications", m.current.openSidebar?.(), I.current?.setActiveSection("notifications");
+      }, m.current.openHelp = () => {
+        E.current = "help", m.current.openSidebar?.(), I.current?.setActiveSection("help");
+      };
+      const ee = [];
+      !u?.notificationsDrawerOptions?.hideActionButton && !u?.notificationsDrawerOptions?.hideActionButton && ee.push({
+        id: "notifications",
+        title: "Notificaciones",
+        icon: Ne,
+        onClick: m.current.openNotifications
+      }), !u?.helpSectionDrawerOptions?.hideActionButton && l && !u?.helpSectionDrawerOptions?.hide && ee.push({
+        id: "help",
+        title: "Ayuda",
+        icon: ye,
+        onClick: m.current.openHelp
+      }), u?.configurationActionOptions?.onClick && !u?.configurationActionOptions?.hideActionButton && ee.push({
+        id: "configuration",
+        title: "Configuracion",
+        icon: Qe,
+        onClick: () => {
+          u.configurationActionOptions?.onClick?.(), x?.("configuration");
+        }
+      });
+      const Pe = [...ee, ...f || []];
+      return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(M.Spacer, { className: "pb-3" }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col overflow-hidden h-full gap-4", children: [
+          /* @__PURE__ */ e.jsx(
+            Ie,
+            {
+              getIsCollapsed: h,
+              toggleCollapse: c,
+              subscribeToCollapse: w,
+              navlinks: n,
+              handleNavigation: R,
+              className: "flex flex-1 "
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            Ae,
+            {
+              actions: Pe,
+              activeActionId: b,
+              onActionClick: x,
+              className: " max-h-[35vh] min-h-max"
+            }
+          )
+        ] })
+      ] });
+    } }),
+    /* @__PURE__ */ e.jsx(M.Footer, { className: "md:min-h-max flex flex-col w-full overflow-hidden max-w-full", children: ({ getIsCollapsed: c, subscribeToCollapse: h, toggleCollapse: w }) => {
+      const _ = N(
+        () => {
+          c() && (w(), V.current?.open());
+        },
+        [c]
+      );
+      return W(() => {
+        h((P) => {
+          P && (V.current?.close(), de.current?.close());
+        });
+      }, []), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(M.Spacer, { className: "mb-3" }),
+        /* @__PURE__ */ e.jsxs(H, { className: "", controls: V, children: [
+          /* @__PURE__ */ e.jsx(H.Content, { onClick: _, children: /* @__PURE__ */ e.jsx(
+            he,
+            {
+              className: "pyrion-navigation-drawer-user-card p-0 ",
+              name: s.user.name,
+              secondarySlot: $(s.metadata),
+              imageUrl: s.user.profile_picture,
+              subImageUrl: s.company.icon,
+              avatarSize: "xxs"
+            }
+          ) }),
+          /* @__PURE__ */ e.jsxs(H.Options, { className: "min-h-max flex flex-col gap-3 pl-3 mt-3 pt-2", children: [
+            K && K.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(le, { className: "flex flex-col gap-2 max-h-[165px] flex-1", scrollbarProps: { hide: !0 }, children: /* @__PURE__ */ e.jsx(
+                ft,
+                {
+                  sessions: K,
+                  onSessionClick: g,
+                  secondarySlot: r,
+                  subImageUrlAccessor: u?.sessionCardOptions?.subImageUrlAccessor,
+                  currentSystemId: y
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ e.jsx("div", { className: "flex flex-col gap-2", children: i && /* @__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(ne, { onClick: i, animate: !1, animateIcon: !1, variant: "text", label: "Cerrar sesión", icon: /* @__PURE__ */ e.jsx(Ke, {}), size: "small", color: "secondary" })
+            ] }) })
+          ] })
+        ] })
+      ] });
+    } }),
+    /* @__PURE__ */ e.jsx(M.Outlet, { children: t }),
+    /* @__PURE__ */ e.jsx(
+      M.Sidebar,
+      {
+        className: "bg-neutral-default-default",
+        modal: u?.sidebarOptions?.modal,
+        closeOnOverlayClick: u?.sidebarOptions?.closeOnOverlayClick,
+        children: ({ closeSidebar: c }) => /* @__PURE__ */ e.jsx(
+          Re,
+          {
+            ref: I,
+            closeSidebar: c,
+            options: u,
+            state: s,
+            helpSection: l,
+            initialSection: E.current
+          }
+        )
+      }
+    )
+  ] }) });
+  return T ? /* @__PURE__ */ e.jsx(p, { children: /* @__PURE__ */ e.jsx(e.Fragment, { children: a }) }) : /* @__PURE__ */ e.jsxs("div", { className: "flex h-screen", children: [
+    Y.length > 0 && /* @__PURE__ */ e.jsx(
+      qe,
+      {
+        className: "hidden md:flex",
+        tabs: Y,
+        activeColor: "var(--neutral-900)",
+        currentTabName: ce
+      }
+    ),
+    /* @__PURE__ */ e.jsx(p, { children: a })
+  ] });
+};
+export {
+  Et as default,
+  _t as u
+};