prometeo-design-system 3.1.6 → 4.0.0

package/dist/PyrionNavigationDrawer.es.js

@@ -1,962 +0,0 @@
-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
-};