@alixpartners/ui-components 2.0.0-beta.9 → 2.0.1

package/dist/components/NavBar/NavBar.js

@@ -1,190 +1,192 @@
-import { jsx as e, jsxs as M } from "react/jsx-runtime";
-import q from "../Tag/Tag.js";
-import B from "../Icon/Icon.js";
-import { c as U } from "../../clsx-OuTLNxxd.js";
-import * as u from "react";
-import { u as ee, c as j, a as ae, R as re, I as ne } from "../../index-CjQV7MmW.js";
-import { u as oe, c as te, P as V, d as ie, a as N } from "../../index-DWydnyjJ.js";
-import { u as T } from "../../index-2H7slGYV.js";
-import { c as ue, R as se, A as ce, P as le, C as me, I as de, G as be, L as pe, a as ve, b as _e, d as fe, e as ge, S as he, f as Me, g as Ne, h as Re } from "../../index-CVWHq7Pr.js";
-import '../../assets/NavBar.css';var x = "Menubar", [O, xe, Se] = ae(x), [z, ta] = te(x, [
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
+import ae from "../Tag/Tag.js";
+import D from "../Icon/Icon.js";
+import { c as G } from "../../clsx-OuTLNxxd.js";
+import re from "../Logo/Logo.js";
+import * as s from "react";
+import { useState as S } from "react";
+import { u as ne, c as H, a as oe, R as te, I as ie } from "../../index-CjQV7MmW.js";
+import { u as ue, c as se, P as z, d as ce, a as R } from "../../index-DWydnyjJ.js";
+import { u as K } from "../../index-2H7slGYV.js";
+import { c as le, R as de, A as me, P as be, C as ve, I as pe, G as _e, L as fe, a as ge, b as he, d as Me, e as Ne, S as Ce, f as Re, g as Pe, h as we } from "../../index-CVWHq7Pr.js";
+import '../../assets/NavBar.css';var x = "Menubar", [L, xe, Se] = oe(x), [Y, ca] = se(x, [
   Se,
-  j
-]), p = ue(), H = j(), [we, G] = z(x), Y = u.forwardRef(
-  (a, t) => {
+  H
+]), p = le(), Q = H(), [Ae, V] = Y(x), X = s.forwardRef(
+  (a, o) => {
     const {
-      __scopeMenubar: n,
-      value: o,
-      onValueChange: r,
-      defaultValue: h,
-      loop: s = !0,
-      dir: c,
-      ...m
-    } = a, v = ee(c), l = H(n), [f, b] = oe({
-      prop: o,
-      onChange: r,
-      defaultProp: h ?? "",
+      __scopeMenubar: r,
+      value: n,
+      onValueChange: i,
+      defaultValue: M,
+      loop: v = !0,
+      dir: t,
+      ...d
+    } = a, _ = ne(t), l = Q(r), [g, m] = ue({
+      prop: n,
+      onChange: i,
+      defaultProp: M ?? "",
       caller: x
-    }), [g, d] = u.useState(null);
+    }), [h, c] = s.useState(null);
     return /* @__PURE__ */ e(
-      we,
+      Ae,
       {
-        scope: n,
-        value: f,
-        onMenuOpen: u.useCallback(
-          (_) => {
-            b(_), d(_);
+        scope: r,
+        value: g,
+        onMenuOpen: s.useCallback(
+          (f) => {
+            m(f), c(f);
           },
-          [b]
+          [m]
         ),
-        onMenuClose: u.useCallback(() => b(""), [b]),
-        onMenuToggle: u.useCallback(
-          (_) => {
-            b((k) => k ? "" : _), d(_);
+        onMenuClose: s.useCallback(() => m(""), [m]),
+        onMenuToggle: s.useCallback(
+          (f) => {
+            m((w) => w ? "" : f), c(f);
           },
-          [b]
+          [m]
         ),
-        dir: v,
-        loop: s,
-        children: /* @__PURE__ */ e(O.Provider, { scope: n, children: /* @__PURE__ */ e(O.Slot, { scope: n, children: /* @__PURE__ */ e(
-          re,
+        dir: _,
+        loop: v,
+        children: /* @__PURE__ */ e(L.Provider, { scope: r, children: /* @__PURE__ */ e(L.Slot, { scope: r, children: /* @__PURE__ */ e(
+          te,
           {
             asChild: !0,
             ...l,
             orientation: "horizontal",
-            loop: s,
-            dir: v,
-            currentTabStopId: g,
-            onCurrentTabStopIdChange: d,
-            children: /* @__PURE__ */ e(V.div, { role: "menubar", ...m, ref: t })
+            loop: v,
+            dir: _,
+            currentTabStopId: h,
+            onCurrentTabStopIdChange: c,
+            children: /* @__PURE__ */ e(z.div, { role: "menubar", ...d, ref: o })
           }
         ) }) })
       }
     );
   }
 );
-Y.displayName = x;
-var K = "MenubarMenu", [Ce, Q] = z(K), X = (a) => {
-  const { __scopeMenubar: t, value: n, ...o } = a, r = T(), h = n || r || "LEGACY_REACT_AUTO_VALUE", s = G(K, t), c = p(t), m = u.useRef(null), v = u.useRef(!1), l = s.value === h;
-  return u.useEffect(() => {
-    l || (v.current = !1);
+X.displayName = x;
+var j = "MenubarMenu", [ye, J] = Y(j), W = (a) => {
+  const { __scopeMenubar: o, value: r, ...n } = a, i = K(), M = r || i || "LEGACY_REACT_AUTO_VALUE", v = V(j, o), t = p(o), d = s.useRef(null), _ = s.useRef(!1), l = v.value === M;
+  return s.useEffect(() => {
+    l || (_.current = !1);
   }, [l]), /* @__PURE__ */ e(
-    Ce,
+    ye,
     {
-      scope: t,
-      value: h,
-      triggerId: T(),
-      triggerRef: m,
-      contentId: T(),
-      wasKeyboardTriggerOpenRef: v,
+      scope: o,
+      value: M,
+      triggerId: K(),
+      triggerRef: d,
+      contentId: K(),
+      wasKeyboardTriggerOpenRef: _,
       children: /* @__PURE__ */ e(
-        se,
+        de,
         {
-          ...c,
+          ...t,
           open: l,
-          onOpenChange: (f) => {
-            f || s.onMenuClose();
+          onOpenChange: (g) => {
+            g || v.onMenuClose();
           },
           modal: !1,
-          dir: s.dir,
-          ...o
+          dir: v.dir,
+          ...n
         }
       )
     }
   );
 };
-X.displayName = K;
-var I = "MenubarTrigger", W = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, disabled: o = !1, ...r } = a, h = H(n), s = p(n), c = G(I, n), m = Q(I, n), v = u.useRef(null), l = ie(t, v, m.triggerRef), [f, b] = u.useState(!1), g = c.value === m.value;
-    return /* @__PURE__ */ e(O.ItemSlot, { scope: n, value: m.value, disabled: o, children: /* @__PURE__ */ e(
-      ne,
+W.displayName = j;
+var F = "MenubarTrigger", Z = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, disabled: n = !1, ...i } = a, M = Q(r), v = p(r), t = V(F, r), d = J(F, r), _ = s.useRef(null), l = ce(o, _, d.triggerRef), [g, m] = s.useState(!1), h = t.value === d.value;
+    return /* @__PURE__ */ e(L.ItemSlot, { scope: r, value: d.value, disabled: n, children: /* @__PURE__ */ e(
+      ie,
       {
         asChild: !0,
-        ...h,
-        focusable: !o,
-        tabStopId: m.value,
-        children: /* @__PURE__ */ e(ce, { asChild: !0, ...s, children: /* @__PURE__ */ e(
-          V.button,
+        ...M,
+        focusable: !n,
+        tabStopId: d.value,
+        children: /* @__PURE__ */ e(me, { asChild: !0, ...v, children: /* @__PURE__ */ e(
+          z.button,
           {
             type: "button",
             role: "menuitem",
-            id: m.triggerId,
+            id: d.triggerId,
             "aria-haspopup": "menu",
-            "aria-expanded": g,
-            "aria-controls": g ? m.contentId : void 0,
-            "data-highlighted": f ? "" : void 0,
-            "data-state": g ? "open" : "closed",
-            "data-disabled": o ? "" : void 0,
-            disabled: o,
-            ...r,
+            "aria-expanded": h,
+            "aria-controls": h ? d.contentId : void 0,
+            "data-highlighted": g ? "" : void 0,
+            "data-state": h ? "open" : "closed",
+            "data-disabled": n ? "" : void 0,
+            disabled: n,
+            ...i,
             ref: l,
-            onPointerDown: N(a.onPointerDown, (d) => {
-              !o && d.button === 0 && d.ctrlKey === !1 && (c.onMenuOpen(m.value), g || d.preventDefault());
+            onPointerDown: R(a.onPointerDown, (c) => {
+              !n && c.button === 0 && c.ctrlKey === !1 && (t.onMenuOpen(d.value), h || c.preventDefault());
             }),
-            onPointerEnter: N(a.onPointerEnter, () => {
-              var _;
-              !!c.value && !g && (c.onMenuOpen(m.value), (_ = v.current) == null || _.focus());
+            onPointerEnter: R(a.onPointerEnter, () => {
+              var f;
+              !!t.value && !h && (t.onMenuOpen(d.value), (f = _.current) == null || f.focus());
             }),
-            onKeyDown: N(a.onKeyDown, (d) => {
-              o || (["Enter", " "].includes(d.key) && c.onMenuToggle(m.value), d.key === "ArrowDown" && c.onMenuOpen(m.value), ["Enter", " ", "ArrowDown"].includes(d.key) && (m.wasKeyboardTriggerOpenRef.current = !0, d.preventDefault()));
+            onKeyDown: R(a.onKeyDown, (c) => {
+              n || (["Enter", " "].includes(c.key) && t.onMenuToggle(d.value), c.key === "ArrowDown" && t.onMenuOpen(d.value), ["Enter", " ", "ArrowDown"].includes(c.key) && (d.wasKeyboardTriggerOpenRef.current = !0, c.preventDefault()));
             }),
-            onFocus: N(a.onFocus, () => b(!0)),
-            onBlur: N(a.onBlur, () => b(!1))
+            onFocus: R(a.onFocus, () => m(!0)),
+            onBlur: R(a.onBlur, () => m(!1))
           }
         ) })
       }
     ) });
   }
 );
-W.displayName = I;
-var Ae = "MenubarPortal", Z = (a) => {
-  const { __scopeMenubar: t, ...n } = a, o = p(t);
-  return /* @__PURE__ */ e(le, { ...o, ...n });
+Z.displayName = F;
+var Oe = "MenubarPortal", $ = (a) => {
+  const { __scopeMenubar: o, ...r } = a, n = p(o);
+  return /* @__PURE__ */ e(be, { ...n, ...r });
 };
-Z.displayName = Ae;
-var D = "MenubarContent", $ = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, align: o = "start", ...r } = a, h = p(n), s = G(D, n), c = Q(D, n), m = xe(n), v = u.useRef(!1);
+$.displayName = Oe;
+var U = "MenubarContent", q = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, align: n = "start", ...i } = a, M = p(r), v = V(U, r), t = J(U, r), d = xe(r), _ = s.useRef(!1);
     return /* @__PURE__ */ e(
-      me,
+      ve,
       {
-        id: c.contentId,
-        "aria-labelledby": c.triggerId,
+        id: t.contentId,
+        "aria-labelledby": t.triggerId,
         "data-radix-menubar-content": "",
-        ...h,
-        ...r,
-        ref: t,
-        align: o,
-        onCloseAutoFocus: N(a.onCloseAutoFocus, (l) => {
-          var b;
-          !!!s.value && !v.current && ((b = c.triggerRef.current) == null || b.focus()), v.current = !1, l.preventDefault();
+        ...M,
+        ...i,
+        ref: o,
+        align: n,
+        onCloseAutoFocus: R(a.onCloseAutoFocus, (l) => {
+          var m;
+          !!!v.value && !_.current && ((m = t.triggerRef.current) == null || m.focus()), _.current = !1, l.preventDefault();
         }),
-        onFocusOutside: N(a.onFocusOutside, (l) => {
-          const f = l.target;
-          m().some((g) => {
-            var d;
-            return (d = g.ref.current) == null ? void 0 : d.contains(f);
+        onFocusOutside: R(a.onFocusOutside, (l) => {
+          const g = l.target;
+          d().some((h) => {
+            var c;
+            return (c = h.ref.current) == null ? void 0 : c.contains(g);
           }) && l.preventDefault();
         }),
-        onInteractOutside: N(a.onInteractOutside, () => {
-          v.current = !0;
+        onInteractOutside: R(a.onInteractOutside, () => {
+          _.current = !0;
         }),
         onEntryFocus: (l) => {
-          c.wasKeyboardTriggerOpenRef.current || l.preventDefault();
+          t.wasKeyboardTriggerOpenRef.current || l.preventDefault();
         },
-        onKeyDown: N(
+        onKeyDown: R(
           a.onKeyDown,
           (l) => {
             if (["ArrowRight", "ArrowLeft"].includes(l.key)) {
-              const f = l.target, b = f.hasAttribute("data-radix-menubar-subtrigger"), g = f.closest("[data-radix-menubar-content]") !== l.currentTarget, _ = (s.dir === "rtl" ? "ArrowRight" : "ArrowLeft") === l.key;
-              if (!_ && b || g && _) return;
-              let R = m().filter((E) => !E.disabled).map((E) => E.value);
-              _ && R.reverse();
-              const F = R.indexOf(c.value);
-              R = s.loop ? We(R, F + 1) : R.slice(F + 1);
-              const [L] = R;
-              L && s.onMenuOpen(L);
+              const g = l.target, m = g.hasAttribute("data-radix-menubar-subtrigger"), h = g.closest("[data-radix-menubar-content]") !== l.currentTarget, f = (v.dir === "rtl" ? "ArrowRight" : "ArrowLeft") === l.key;
+              if (!f && m || h && f) return;
+              let N = d().filter((k) => !k.disabled).map((k) => k.value);
+              f && N.reverse();
+              const b = N.indexOf(t.value);
+              N = v.loop ? $e(N, b + 1) : N.slice(b + 1);
+              const [P] = N;
+              P && v.onMenuOpen(P);
             }
           },
           { checkForDefaultPrevented: !1 }
@@ -201,93 +203,93 @@ var D = "MenubarContent", $ = u.forwardRef(
     );
   }
 );
-$.displayName = D;
-var ye = "MenubarGroup", Pe = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(be, { ...r, ...o, ref: t });
-  }
-);
-Pe.displayName = ye;
-var Ee = "MenubarLabel", Be = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(pe, { ...r, ...o, ref: t });
+q.displayName = U;
+var Ee = "MenubarGroup", Be = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, i = p(r);
+    return /* @__PURE__ */ e(_e, { ...i, ...n, ref: o });
   }
 );
 Be.displayName = Ee;
-var Te = "MenubarItem", J = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(de, { ...r, ...o, ref: t });
+var Te = "MenubarLabel", Ie = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, i = p(r);
+    return /* @__PURE__ */ e(fe, { ...i, ...n, ref: o });
   }
 );
-J.displayName = Te;
-var Oe = "MenubarCheckboxItem", Ie = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(ve, { ...r, ...o, ref: t });
+Ie.displayName = Te;
+var ke = "MenubarItem", ee = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, i = p(r);
+    return /* @__PURE__ */ e(pe, { ...i, ...n, ref: o });
   }
 );
-Ie.displayName = Oe;
-var De = "MenubarRadioGroup", Ge = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(_e, { ...r, ...o, ref: t });
+ee.displayName = ke;
+var De = "MenubarCheckboxItem", Ge = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, i = p(r);
+    return /* @__PURE__ */ e(ge, { ...i, ...n, ref: o });
   }
 );
 Ge.displayName = De;
-var Ke = "MenubarRadioItem", ke = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(fe, { ...r, ...o, ref: t });
+var Ke = "MenubarRadioGroup", Le = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, i = p(r);
+    return /* @__PURE__ */ e(he, { ...i, ...n, ref: o });
   }
 );
-ke.displayName = Ke;
-var Fe = "MenubarItemIndicator", Le = u.forwardRef((a, t) => {
-  const { __scopeMenubar: n, ...o } = a, r = p(n);
-  return /* @__PURE__ */ e(ge, { ...r, ...o, ref: t });
+Le.displayName = Ke;
+var Fe = "MenubarRadioItem", Ue = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, i = p(r);
+    return /* @__PURE__ */ e(Me, { ...i, ...n, ref: o });
+  }
+);
+Ue.displayName = Fe;
+var Ve = "MenubarItemIndicator", je = s.forwardRef((a, o) => {
+  const { __scopeMenubar: r, ...n } = a, i = p(r);
+  return /* @__PURE__ */ e(Ne, { ...i, ...n, ref: o });
 });
-Le.displayName = Fe;
-var Ue = "MenubarSeparator", je = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(he, { ...r, ...o, ref: t });
+je.displayName = Ve;
+var He = "MenubarSeparator", ze = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, i = p(r);
+    return /* @__PURE__ */ e(Ce, { ...i, ...n, ref: o });
   }
 );
-je.displayName = Ue;
-var Ve = "MenubarArrow", ze = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(Me, { ...r, ...o, ref: t });
+ze.displayName = He;
+var Ye = "MenubarArrow", Qe = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, i = p(r);
+    return /* @__PURE__ */ e(Re, { ...i, ...n, ref: o });
   }
 );
-ze.displayName = Ve;
-var He = "MenubarSubTrigger", Ye = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
+Qe.displayName = Ye;
+var Xe = "MenubarSubTrigger", Je = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, i = p(r);
     return /* @__PURE__ */ e(
-      Ne,
+      Pe,
       {
         "data-radix-menubar-subtrigger": "",
-        ...r,
-        ...o,
-        ref: t
+        ...i,
+        ...n,
+        ref: o
       }
     );
   }
 );
-Ye.displayName = He;
-var Qe = "MenubarSubContent", Xe = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
+Je.displayName = Xe;
+var We = "MenubarSubContent", Ze = s.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, i = p(r);
     return /* @__PURE__ */ e(
-      Re,
+      we,
       {
-        ...r,
+        ...i,
         "data-radix-menubar-content": "",
-        ...o,
-        ref: t,
+        ...n,
+        ref: o,
         style: {
           ...a.style,
           "--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
@@ -300,24 +302,29 @@ var Qe = "MenubarSubContent", Xe = u.forwardRef(
     );
   }
 );
-Xe.displayName = Qe;
-function We(a, t) {
-  return a.map((n, o) => a[(t + o) % a.length]);
+Ze.displayName = We;
+function $e(a, o) {
+  return a.map((r, n) => a[(o + n) % a.length]);
 }
-var S = Y, w = X, C = W, A = Z, y = $, P = J;
-const i = {
+var A = X, y = W, O = Z, E = $, B = q, T = ee;
+const u = {
+  "navbar-wrapper": "NavBar-module__navbar-wrapper___e-f8y",
   "navbar-container": "NavBar-module__navbar-container___KnbUz",
   "navbar-logo-container": "NavBar-module__navbar-logo-container___VXWAo",
+  "navbar-logo-link": "NavBar-module__navbar-logo-link___r8CV2",
   "navbar-project-name-separator": "NavBar-module__navbar-project-name-separator___SmBBN",
   "navbar-project-name": "NavBar-module__navbar-project-name___zQY4u",
   "navbar-menu": "NavBar-module__navbar-menu___QDrB4",
+  "navbar-menu-button": "NavBar-module__navbar-menu-button___f1doV",
   "navbar-menu-list": "NavBar-module__navbar-menu-list___xZE02",
   "navbar-menu-list-item": "NavBar-module__navbar-menu-list-item___Y87cK",
   "navbar-menu-list-item-trigger-container": "NavBar-module__navbar-menu-list-item-trigger-container___OsXar",
   "navbar-menu-list-item-action": "NavBar-module__navbar-menu-list-item-action___MPFZz",
+  "navbar-menu-list-item-action-active": "NavBar-module__navbar-menu-list-item-action-active___J7eRN",
   "navbar-menu-list-item-arrow": "NavBar-module__navbar-menu-list-item-arrow___QoJsh",
   "navbar-menu-list-item-submenu": "NavBar-module__navbar-menu-list-item-submenu___goVcf",
   "navbar-menu-list-item-submenu-item": "NavBar-module__navbar-menu-list-item-submenu-item___sH6du",
+  "navbar-menu-additional-separator": "NavBar-module__navbar-menu-additional-separator___F7jfY",
   "navbar-menu-additional": "NavBar-module__navbar-menu-additional___B8kH-",
   "navbar-menu-additional-trigger": "NavBar-module__navbar-menu-additional-trigger___IpMHL",
   "navbar-menu-additional-icon": "NavBar-module__navbar-menu-additional-icon___jhULk",
@@ -325,49 +332,58 @@ const i = {
   "navbar-notification-container": "NavBar-module__navbar-notification-container___K2YeD",
   "navbar-notification-badge": "NavBar-module__navbar-notification-badge___vp5bK"
 };
-function ia({
-  projectName: a,
-  projectLogoSrc: t,
-  projectTag: n,
-  menuItems: o,
-  additionalItems: r,
-  className: h
+function la({
+  activeMenuItemHref: a,
+  projectName: o,
+  projectLogoIcon: r,
+  projectLogoOnClick: n,
+  projectTag: i,
+  menuItems: M,
+  menuButton: v,
+  additionalItems: t,
+  className: d,
+  maxWidth: _
 }) {
-  return /* @__PURE__ */ M("div", { className: U(i["navbar-container"], h), children: [
-    /* @__PURE__ */ M("div", { className: i["navbar-logo-container"], children: [
-      /* @__PURE__ */ e("img", { src: t, alt: "NavBar" }),
-      /* @__PURE__ */ e("span", { className: i["navbar-project-name-separator"] }),
-      /* @__PURE__ */ e("span", { className: i["navbar-project-name"], children: a }),
-      n && /* @__PURE__ */ e(q, { type: "success", size: "md", structure: "border", label: n })
+  const l = (b) => b ? a === b : !1, [g, m] = S(!1), [h, c] = S(!1), [f, w] = S(!1), [I, N] = S(null);
+  return /* @__PURE__ */ e("div", { className: G(u["navbar-wrapper"], d), children: /* @__PURE__ */ C("div", { className: u["navbar-container"], style: {
+    maxWidth: _
+  }, children: [
+    /* @__PURE__ */ C("div", { className: u["navbar-logo-container"], children: [
+      /* @__PURE__ */ e("a", { onClick: n, className: u["navbar-logo-link"], children: /* @__PURE__ */ e(re, { logo: r, color: "white" }) }),
+      /* @__PURE__ */ e("span", { className: u["navbar-project-name-separator"] }),
+      /* @__PURE__ */ e("span", { className: u["navbar-project-name"], children: o }),
+      i && /* @__PURE__ */ e(ae, { type: "basic", color: "green", size: "md", structure: "border", label: i })
     ] }),
-    /* @__PURE__ */ M("div", { className: i["navbar-menu"], children: [
-      /* @__PURE__ */ e(S, { className: i["navbar-menu-list"], children: o == null ? void 0 : o.map((s) => /* @__PURE__ */ M(w, { children: [
-        /* @__PURE__ */ e(C, { className: i["navbar-menu-list-item"], children: s.menuItems ? /* @__PURE__ */ M("span", { className: i["navbar-menu-list-item-trigger-container"], children: [
-          /* @__PURE__ */ e("span", { children: s.label }),
-          /* @__PURE__ */ e(B, { icon: "ap-icon-expand-more", className: U(i["navbar-menu-list-item-arrow"]) })
-        ] }) : /* @__PURE__ */ e("a", { className: i["navbar-menu-list-item-action"], href: s.href, children: s.label }) }),
-        s.menuItems && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { className: i["navbar-menu-list-item-submenu"], children: s.menuItems.map((c) => /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: /* @__PURE__ */ e("a", { href: c.href, children: c.label }) }, c.label)) }) })
-      ] }, s.label)) }),
-      /* @__PURE__ */ M("div", { className: i["navbar-menu-additional"], children: [
-        (r == null ? void 0 : r.notifications) && /* @__PURE__ */ e(S, { children: /* @__PURE__ */ M(w, { children: [
-          /* @__PURE__ */ e(C, { className: i["navbar-menu-additional-trigger"], children: /* @__PURE__ */ M("div", { className: i["navbar-notification-container"], children: [
-            /* @__PURE__ */ e(B, { icon: "ap-icon-notification-filled", className: i["navbar-menu-additional-icon"] }),
-            r.notifications.count > 0 && /* @__PURE__ */ e("span", { className: i["navbar-notification-badge"], children: r.notifications.count > 99 ? "99+" : r.notifications.count })
+    /* @__PURE__ */ C("div", { className: u["navbar-menu"], children: [
+      /* @__PURE__ */ e("div", { className: u["navbar-menu-button"], children: v }),
+      /* @__PURE__ */ e(A, { className: u["navbar-menu-list"], children: M == null ? void 0 : M.map((b) => /* @__PURE__ */ e("div", { onPointerLeave: () => N(null), children: /* @__PURE__ */ C(y, { open: I === b.label, onOpenChange: (P) => N(P ? b.label : null), children: [
+        /* @__PURE__ */ e(O, { "data-state": I === b.label ? "open" : "closed", onClick: () => N(b.label), onPointerMove: () => N(b.label), className: u["navbar-menu-list-item"], children: b.menuItems ? /* @__PURE__ */ C("span", { className: u["navbar-menu-list-item-trigger-container"], children: [
+          /* @__PURE__ */ e("span", { children: b.label }),
+          /* @__PURE__ */ e(D, { icon: "ap-icon-expand-more", className: G(u["navbar-menu-list-item-arrow"]) })
+        ] }) : /* @__PURE__ */ e("a", { className: G(u["navbar-menu-list-item-action"], l(b.href) && u["navbar-menu-list-item-action-active"]), onClick: b.onClick, children: b.label }) }),
+        b.menuItems && /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(B, { className: u["navbar-menu-list-item-submenu"], children: b.menuItems.map((P) => /* @__PURE__ */ e(T, { className: u["navbar-menu-list-item-submenu-item"], children: /* @__PURE__ */ e("a", { onClick: P.onClick, children: P.label }) }, P.label)) }) })
+      ] }) }, b.label)) }),
+      t && /* @__PURE__ */ e("span", { className: u["navbar-menu-additional-separator"] }),
+      /* @__PURE__ */ C("div", { className: u["navbar-menu-additional"], children: [
+        (t == null ? void 0 : t.notifications) && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { onPointerLeave: () => m(!1), children: /* @__PURE__ */ C(y, { open: g, onOpenChange: m, children: [
+          /* @__PURE__ */ e(O, { onClick: () => m(!0), onPointerMove: () => m(!0), className: u["navbar-menu-additional-trigger"], children: /* @__PURE__ */ C("div", { className: u["navbar-notification-container"], children: [
+            /* @__PURE__ */ e(D, { icon: "ap-icon-notification-filled", className: u["navbar-menu-additional-icon"] }),
+            t.notifications.count > 0 && /* @__PURE__ */ e("span", { className: u["navbar-notification-badge"], children: t.notifications.count > 99 ? "99+" : t.notifications.count })
           ] }) }),
-          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: r.notifications.content }) }) })
-        ] }) }),
-        (r == null ? void 0 : r.help) && /* @__PURE__ */ e(S, { children: /* @__PURE__ */ M(w, { children: [
-          /* @__PURE__ */ e(C, { className: i["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e(B, { icon: "ap-icon-help-filled", className: i["navbar-menu-additional-icon"] }) }),
-          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: r.help }) }) })
-        ] }) }),
-        (r == null ? void 0 : r.userProfile) && /* @__PURE__ */ e(S, { children: /* @__PURE__ */ M(w, { children: [
-          /* @__PURE__ */ e(C, { className: i["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e("span", { className: i["navbar-menu-additional-user-profile"], children: r.userProfile.initials }) }),
-          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: r.userProfile.content }) }) })
-        ] }) })
+          /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(B, { align: "end", className: u["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(T, { className: u["navbar-menu-list-item-submenu-item"], children: t.notifications.content }) }) })
+        ] }) }) }),
+        (t == null ? void 0 : t.help) && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { onPointerLeave: () => c(!1), children: /* @__PURE__ */ C(y, { open: h, onOpenChange: c, children: [
+          /* @__PURE__ */ e(O, { onClick: () => c(!0), onPointerMove: () => c(!0), className: u["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e(D, { icon: "ap-icon-help-filled", className: u["navbar-menu-additional-icon"] }) }),
+          /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(B, { align: "end", className: u["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(T, { className: u["navbar-menu-list-item-submenu-item"], children: t.help }) }) })
+        ] }) }) }),
+        (t == null ? void 0 : t.userProfile) && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e("div", { onPointerLeave: () => w(!1), children: /* @__PURE__ */ C(y, { open: f, onOpenChange: w, children: [
+          /* @__PURE__ */ e(O, { onClick: () => w(!0), onPointerMove: () => w(!0), className: u["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e("span", { className: u["navbar-menu-additional-user-profile"], children: t.userProfile.initials }) }),
+          /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(B, { align: "end", className: u["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(T, { className: u["navbar-menu-list-item-submenu-item"], children: t.userProfile.content }) }) })
+        ] }) }) })
       ] })
     ] })
-  ] });
+  ] }) });
 }
 export {
-  ia as default
+  la as default
 };