@blakesteve/roster 5.8.0 → 5.10.0

package/dist/components/organisms/Navbar/Navbar.js

@@ -1,34 +1,44 @@
 "use client";
-import { jsx as r, jsxs as s, Fragment as L } from "react/jsx-runtime";
-import nr, { Fragment as _, useEffect as Z, useRef as ir } from "react";
-import { FontAwesomeIcon as u } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faInbox as or, faMoon as T, faRightFromBracket as lr, faXmark as X, faBars as dr } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
-import { cn as a } from "../../../lib/utils.js";
-import { withLabels as cr } from "../../../lib/labels.js";
-import { Button as p } from "../../atoms/Button/Button.js";
-import { Link as k } from "../../atoms/Link/Link.js";
-import { Badge as G } from "../../atoms/Badge/Badge.js";
-import { Avatar as mr } from "../../atoms/Avatar/Avatar.js";
-import { switchThumbVariants as hr, switchTrackVariants as gr } from "../../atoms/Switch/switch-variants.js";
-import { navbarVariants as ur } from "./navbar-variants.js";
-import { Menu as pr, MenuButton as yr, MenuItems as fr, MenuItem as F } from "../../../node_modules/@headlessui/react/dist/components/menu/menu.js";
-import { Popover as xr, PopoverButton as J, PopoverPanel as vr } from "../../../node_modules/@headlessui/react/dist/components/popover/popover.js";
-import { Transition as P } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-function Q({ on: e, size: n }) {
+import { jsx as r, jsxs as a, Fragment as U } from "react/jsx-runtime";
+import ur, { useRef as R, Fragment as hr, useEffect as z } from "react";
+import { FontAwesomeIcon as y } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faInbox as gr, faMoon as W, faRightFromBracket as fr, faXmark as Y, faBars as yr } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { cn as i } from "../../../lib/utils.js";
+import { withLabels as pr } from "../../../lib/labels.js";
+import { Button as j } from "../../atoms/Button/Button.js";
+import { Link as A } from "../../atoms/Link/Link.js";
+import { Badge as Z } from "../../atoms/Badge/Badge.js";
+import { Avatar as xr } from "../../atoms/Avatar/Avatar.js";
+import { switchThumbVariants as vr, switchTrackVariants as br } from "../../atoms/Switch/switch-variants.js";
+import { Menu as kr, MenuButton as Nr, MenuItems as wr, MenuGroup as D, MenuItem as _, MenuCheckboxItem as Mr } from "../../molecules/Menu/Menu.js";
+import { navbarVariants as Sr } from "./navbar-variants.js";
+import { Popover as Cr, PopoverButton as T, PopoverPanel as Er } from "../../../node_modules/@headlessui/react/dist/components/popover/popover.js";
+import { Transition as Fr } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+function H({ on: e, size: s }) {
   return /* @__PURE__ */ r(
     "span",
     {
       "aria-hidden": "true",
       "data-testid": "navbar-theme-track",
       "data-checked": e ? "" : void 0,
-      className: a(gr({ size: n, variant: "neutral" }), "rst:pointer-events-none"),
-      children: /* @__PURE__ */ r("span", { className: a(hr({ size: n })) })
+      className: i(br({ size: s, variant: "neutral" }), "rst:pointer-events-none"),
+      children: /* @__PURE__ */ r("span", { className: i(vr({ size: s })) })
     }
   );
 }
-const kr = (e) => {
-  e?.setAttribute("role", "menuitemcheckbox");
-}, Y = (e, n) => typeof e == "function" ? e({ close: n }) : e, br = {
+const K = "rst:gap-2 rst:px-4 rst:[&>[data-menu-lead]]:w-auto rst:text-gray-700 rst:dark:text-gray-200 rst:focus:bg-gray-50 rst:focus:text-gray-700 rst:dark:focus:bg-gray-700 rst:dark:focus:text-gray-200", Or = /* @__PURE__ */ i(
+  K,
+  "rst:font-semibold rst:rounded-sm rst:hover:text-gray-900 rst:dark:hover:text-gray-100 rst:hover:focus:text-gray-900 rst:dark:hover:focus:text-gray-100"
+), rr = /* @__PURE__ */ new WeakMap();
+function jr(e) {
+  if (!e || typeof e == "string") return;
+  let s = rr.get(e);
+  return s || (s = (n) => /* @__PURE__ */ r(e, { ...n }), rr.set(e, s)), s;
+}
+const tr = /* @__PURE__ */ i(
+  K,
+  "rst:border rst:border-transparent rst:font-medium rst:text-gray-600 rst:dark:text-gray-400 rst:focus:text-gray-600 rst:dark:focus:text-gray-400 rst:hover:bg-gray-500/10 rst:dark:hover:bg-gray-400/15 rst:hover:focus:bg-gray-500/10 rst:dark:hover:focus:bg-gray-400/15"
+), er = (e, s) => typeof e == "function" ? e({ close: s }) : e, Ar = {
   openMainMenu: "Open main menu",
   closeMainMenu: "Close menu",
   openUserMenu: "Open user menu",
@@ -38,71 +48,90 @@ const kr = (e) => {
   pendingInvitations: "Pending Invitations",
   inbox: (e) => `Inbox (${e})`
 };
-function Nr(e) {
-  return nr.useSyncExternalStore(
-    (n) => {
+function Br(e) {
+  return ur.useSyncExternalStore(
+    (s) => {
       if (!e || typeof document > "u") return () => {
       };
-      const i = new MutationObserver(n);
-      return i.observe(document.documentElement, {
+      const n = new MutationObserver(s);
+      return n.observe(document.documentElement, {
         attributes: !0,
         attributeFilter: ["class"]
-      }), () => i.disconnect();
+      }), () => n.disconnect();
     },
     () => e && document.documentElement.classList.contains("dark"),
     () => !1
   );
 }
-function wr({ close: e }) {
-  return Z(() => {
-    const n = (i) => {
-      const y = document.querySelector("[data-roster-mobile-panel]"), b = document.querySelector("[data-roster-hamburger]"), f = i.target;
-      !y?.contains(f) && !b?.contains(f) && e();
+function sr(e, s) {
+  if (!s || !e) return !1;
+  if (e.contains(s)) return !0;
+  const n = s.closest?.("[data-menu-panel]")?.getAttribute("data-menu-tree");
+  return !!n && !!e.querySelector(`[data-menu-tree="${CSS.escape(n)}"]`);
+}
+const Ir = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Lr({ close: e, panel: s, hamburger: n }) {
+  return z(() => {
+    const u = (g) => {
+      const x = g.target;
+      !sr(s.current, x) && !n.current?.contains(x) && e();
+    };
+    return document.addEventListener("pointerdown", u, { capture: !0 }), () => document.removeEventListener("pointerdown", u, { capture: !0 });
+  }, [e, s, n]), null;
+}
+function Ur({ close: e, panel: s }) {
+  return z(() => {
+    const n = (g) => {
+      g.target !== s.current?.parentElement && (sr(s.current, g.target) || e());
+    }, u = requestAnimationFrame(() => {
+      s.current?.querySelector(Ir)?.focus(), document.addEventListener("focusin", n);
+    });
+    return () => {
+      cancelAnimationFrame(u), document.removeEventListener("focusin", n);
     };
-    return document.addEventListener("pointerdown", n, { capture: !0 }), () => document.removeEventListener("pointerdown", n, { capture: !0 });
-  }, [e]), null;
+  }, [e, s]), null;
 }
-function Mr({
+function Dr({
   activePath: e,
-  close: n
+  close: s
 }) {
-  const i = ir(e);
-  return Z(() => {
-    i.current !== e && (i.current = e, n());
-  }, [e, n]), null;
+  const n = R(e);
+  return z(() => {
+    n.current !== e && (n.current = e, s());
+  }, [e, s]), null;
 }
-const Ur = ({
+const Hr = ({
   logoSrc: e,
-  logoSize: n = "2rem",
-  logoHeight: i,
-  logoWidth: y,
-  logoClassName: b,
-  brandName: f,
-  items: E,
+  logoSize: s = "2rem",
+  logoHeight: n,
+  logoWidth: u,
+  logoClassName: g,
+  brandName: x,
+  items: $,
   activePath: N,
-  routerElement: x,
+  routerElement: v,
   user: o,
   onLogin: w,
   onLogout: M,
-  onInboxClick: j,
-  onThemeToggle: v,
-  actions: H,
-  brandElement: R,
-  navActions: W,
-  userMenuItems: C = [],
-  className: rr,
-  variant: c = "default",
-  position: tr = "sticky",
-  themeMode: z,
-  labels: sr,
-  notificationVariant: $ = "error",
-  notificationFill: q = "solid",
-  ...er
+  onInboxClick: b,
+  onThemeToggle: p,
+  actions: ar,
+  brandElement: q,
+  navActions: nr,
+  userMenuItems: S = [],
+  className: ir,
+  variant: l = "default",
+  position: or = "sticky",
+  themeMode: B,
+  labels: cr,
+  notificationVariant: P = "error",
+  notificationFill: V = "solid",
+  ...dr
 }) => {
-  const l = cr(br, sr), S = (o?.notificationCount || 0) > 0, A = (g) => typeof g == "number" ? `${g}px` : g, K = i !== void 0 || y !== void 0, U = K ? {
-    width: y === void 0 ? "auto" : A(y),
-    height: i === void 0 ? "auto" : A(i)
-  } : { width: A(n), height: A(n) }, V = K && "rst:object-contain rst:object-left rst:rtl:object-right", ar = Nr(z === "auto"), m = (z === "auto" ? ar ? "dark" : "light" : z ?? (c === "white" || c === "default" ? "light" : "dark")) === "dark", B = c === "slate" || c === "primary" || c === "default" && m || c === "white" && m || c === "transparent" && m, I = c === "primary" ? {
+  const c = pr(Ar, cr), lr = jr(v), k = (o?.notificationCount || 0) > 0, C = (h) => typeof h == "number" ? `${h}px` : h, G = n !== void 0 || u !== void 0, X = G ? {
+    width: u === void 0 ? "auto" : C(u),
+    height: n === void 0 ? "auto" : C(n)
+  } : { width: C(s), height: C(s) }, J = G && "rst:object-contain rst:object-left rst:rtl:object-right", mr = Br(B === "auto"), m = (B === "auto" ? mr ? "dark" : "light" : B ?? (l === "white" || l === "default" ? "light" : "dark")) === "dark", E = l === "slate" || l === "primary" || l === "default" && m || l === "white" && m || l === "transparent" && m, F = l === "primary" ? {
     // On primary-700, text is that fill's ink (the dimmer links at 80%),
     // so a light primary gets dark text. The dark fill is primary-950,
     // which the ink doesn't describe: there it stays the dark surface's
@@ -112,32 +141,32 @@ const Ur = ({
     linkActive: "rst:text-primary-700-ink rst:font-semibold rst:hover:text-primary-700-ink/80 rst:dark:text-primary-400 rst:dark:hover:text-primary-300",
     hamburger: "rst:text-primary-700-ink/80 rst:hover:bg-primary-700-ink/10 rst:hover:text-primary-700-ink rst:dark:text-gray-300 rst:dark:hover:bg-white/10 rst:dark:hover:text-white"
   } : {
-    brand: B ? "rst:text-white rst:dark:text-white rst:hover:text-gray-200 rst:dark:hover:text-gray-200" : "rst:text-gray-900 rst:dark:text-gray-900 rst:hover:text-gray-600 rst:dark:hover:text-gray-600",
-    linkBase: B ? "rst:text-gray-300 rst:dark:text-gray-300 rst:hover:text-white rst:dark:hover:text-white" : "rst:text-gray-600 rst:dark:text-gray-600 rst:hover:text-gray-900 rst:dark:hover:text-gray-900",
-    linkActive: B ? "rst:text-primary-400 rst:dark:text-primary-400 rst:font-semibold rst:hover:text-primary-300 rst:dark:hover:text-primary-300" : "rst:text-primary-600 rst:dark:text-primary-600 rst:font-semibold rst:hover:text-primary-700 rst:dark:hover:text-primary-700",
-    hamburger: B ? "rst:text-gray-300 rst:dark:text-gray-300 rst:hover:bg-white/10 rst:dark:hover:bg-white/10 rst:hover:text-white rst:dark:hover:text-white" : "rst:text-gray-500 rst:dark:text-gray-500 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-100 rst:hover:text-gray-700 rst:dark:hover:text-gray-700"
-  };
+    brand: E ? "rst:text-white rst:dark:text-white rst:hover:text-gray-200 rst:dark:hover:text-gray-200" : "rst:text-gray-900 rst:dark:text-gray-900 rst:hover:text-gray-600 rst:dark:hover:text-gray-600",
+    linkBase: E ? "rst:text-gray-300 rst:dark:text-gray-300 rst:hover:text-white rst:dark:hover:text-white" : "rst:text-gray-600 rst:dark:text-gray-600 rst:hover:text-gray-900 rst:dark:hover:text-gray-900",
+    linkActive: E ? "rst:text-primary-400 rst:dark:text-primary-400 rst:font-semibold rst:hover:text-primary-300 rst:dark:hover:text-primary-300" : "rst:text-primary-600 rst:dark:text-primary-600 rst:font-semibold rst:hover:text-primary-700 rst:dark:hover:text-primary-700",
+    hamburger: E ? "rst:text-gray-300 rst:dark:text-gray-300 rst:hover:bg-white/10 rst:dark:hover:bg-white/10 rst:hover:text-white rst:dark:hover:text-white" : "rst:text-gray-500 rst:dark:text-gray-500 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-100 rst:hover:text-gray-700 rst:dark:hover:text-gray-700"
+  }, I = R(null), Q = R(null);
   return /* @__PURE__ */ r(
-    xr,
+    Cr,
     {
       as: "nav",
-      className: a("rst:z-50", ur({ variant: c, position: tr }), rr),
-      ...er,
-      children: ({ open: g, close: h }) => {
-        const D = Y(H, h), O = Y(W, h);
-        return /* @__PURE__ */ s(L, { children: [
-          /* @__PURE__ */ s("div", { className: "rst:container rst:mx-auto rst:flex rst:items-center rst:justify-between rst:px-4 rst:h-16", children: [
-            /* @__PURE__ */ s(
-              k,
+      className: i("rst:z-50", Sr({ variant: l, position: or }), ir),
+      ...dr,
+      children: ({ open: h, close: d }) => {
+        const O = er(ar, d), L = er(nr, d);
+        return /* @__PURE__ */ a(U, { children: [
+          /* @__PURE__ */ a("div", { className: "rst:container rst:mx-auto rst:flex rst:items-center rst:justify-between rst:px-4 rst:h-16", children: [
+            /* @__PURE__ */ a(
+              A,
               {
-                as: x,
+                as: v,
                 href: "/",
                 to: "/",
                 variant: "neutral",
                 underline: "none",
-                className: a(
+                className: i(
                   "rst:flex rst:items-center rst:gap-3 rst:transition-opacity",
-                  I.brand
+                  F.brand
                 ),
                 children: [
                   /* @__PURE__ */ r(
@@ -145,28 +174,28 @@ const Ur = ({
                     {
                       src: e,
                       alt: "",
-                      style: U,
-                      className: a("rst:shrink-0", V, b ?? "rst:rounded-md")
+                      style: X,
+                      className: i("rst:shrink-0", J, g ?? "rst:rounded-md")
                     }
                   ),
-                  R ?? /* @__PURE__ */ r("span", { className: "rst:text-xl rst:font-bold rst:tracking-tight", children: f })
+                  q ?? /* @__PURE__ */ r("span", { className: "rst:text-xl rst:font-bold rst:tracking-tight", children: x })
                 ]
               }
             ),
-            /* @__PURE__ */ s("div", { className: "rst:hidden rst:md:flex rst:items-center rst:gap-8", children: [
-              /* @__PURE__ */ r("div", { className: "rst:flex rst:items-center rst:gap-6", children: E.map((t) => {
-                const d = N === t.path;
-                return /* @__PURE__ */ s(
-                  k,
+            /* @__PURE__ */ a("div", { className: "rst:hidden rst:md:flex rst:items-center rst:gap-8", children: [
+              /* @__PURE__ */ r("div", { className: "rst:flex rst:items-center rst:gap-6", children: $.map((t) => {
+                const f = N === t.path;
+                return /* @__PURE__ */ a(
+                  A,
                   {
-                    as: x,
+                    as: v,
                     href: t.path,
                     to: t.path,
                     variant: "neutral",
                     underline: "none",
-                    className: a(
+                    className: i(
                       "rst:inline-flex rst:items-center rst:gap-1.5 rst:text-sm rst:transition-colors rst:duration-200",
-                      d ? I.linkActive : I.linkBase
+                      f ? F.linkActive : F.linkBase
                     ),
                     children: [
                       t.label,
@@ -176,184 +205,129 @@ const Ur = ({
                   t.path
                 );
               }) }),
-              O,
-              D ?? (o ? /* @__PURE__ */ s(pr, { as: "div", className: "rst:relative rst:ml-2", children: [
-                /* @__PURE__ */ s(yr, { className: "rst:relative rst:flex rst:rounded-full rst:text-sm rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background", children: [
-                  /* @__PURE__ */ r("span", { className: "rst:sr-only", children: l.openUserMenu }),
-                  /* @__PURE__ */ r(
-                    mr,
-                    {
-                      "aria-hidden": "true",
-                      alt: "",
-                      initials: o.initials,
-                      src: o.avatarSrc,
-                      size: "sm",
-                      shape: "circle",
-                      colorScheme: o.avatarColor ?? "primary"
-                    }
-                  ),
-                  S && /* @__PURE__ */ r("div", { className: "rst:absolute rst:-top-1 rst:-right-2", children: /* @__PURE__ */ r(
-                    G,
-                    {
-                      fill: q,
-                      size: "xs",
-                      statusBadge: !0,
-                      variant: $,
-                      children: o.notificationCount
-                    }
-                  ) })
-                ] }),
-                /* @__PURE__ */ r(
-                  P,
+              L,
+              O ?? (o ? /* @__PURE__ */ r("div", { className: "rst:relative rst:ml-2", children: /* @__PURE__ */ a(kr, { linkComponent: lr, children: [
+                /* @__PURE__ */ a(
+                  Nr,
                   {
-                    as: _,
-                    enter: "rst:transition rst:ease-out rst:duration-100",
-                    enterFrom: "rst:transform rst:opacity-0 rst:scale-95",
-                    enterTo: "rst:transform rst:opacity-100 rst:scale-100",
-                    leave: "rst:transition rst:ease-in rst:duration-75",
-                    leaveFrom: "rst:transform rst:opacity-100 rst:scale-100",
-                    leaveTo: "rst:transform rst:opacity-0 rst:scale-95",
-                    children: /* @__PURE__ */ s(fr, { className: "rst:absolute rst:right-0 rst:z-50 rst:mt-2 rst:w-48 rst:origin-top-right rst:rounded-md rst:bg-white rst:dark:bg-gray-800 rst:py-1 rst:elevation-anchored rst:ring rst:ring-black/5 rst:dark:ring-white/10 rst:focus:outline-hidden rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700", children: [
-                      /* @__PURE__ */ s("div", { className: "rst:py-1", children: [
-                        S && j && /* @__PURE__ */ r(F, { children: ({ focus: t }) => /* @__PURE__ */ r(
-                          p,
+                    plain: !0,
+                    className: "rst:relative rst:flex rst:rounded-full rst:text-sm rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:before:absolute rst:before:-inset-1.5 rst:before:content-['']",
+                    children: [
+                      /* @__PURE__ */ r("span", { className: "rst:sr-only", children: c.openUserMenu }),
+                      /* @__PURE__ */ r(
+                        xr,
+                        {
+                          "aria-hidden": "true",
+                          alt: "",
+                          initials: o.initials,
+                          src: o.avatarSrc,
+                          size: "sm",
+                          shape: "circle",
+                          colorScheme: o.avatarColor ?? "primary"
+                        }
+                      ),
+                      k && /* @__PURE__ */ r("div", { className: "rst:absolute rst:-top-1 rst:-right-2", children: /* @__PURE__ */ r(
+                        Z,
+                        {
+                          fill: V,
+                          size: "xs",
+                          statusBadge: !0,
+                          variant: P,
+                          children: o.notificationCount
+                        }
+                      ) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  wr,
+                  {
+                    align: "end",
+                    offset: 8,
+                    className: "rst:w-48 rst:min-w-0 rst:bg-white rst:dark:bg-gray-800 rst:ring-black/5 rst:dark:ring-white/10 rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700",
+                    children: [
+                      (k && b || p) && /* @__PURE__ */ a(D, { className: "rst:py-1", children: [
+                        k && b && /* @__PURE__ */ r(
+                          _,
                           {
-                            variant: "ghost",
-                            colorScheme: "neutral",
-                            size: "sm",
-                            onClick: j,
-                            className: a(
-                              "rst:w-full rst:justify-start rst:rounded-none rst:px-4",
-                              t && "rst:bg-gray-50 rst:dark:bg-gray-700"
-                            ),
-                            startIcon: /* @__PURE__ */ r(
-                              u,
+                            onSelect: b,
+                            className: tr,
+                            icon: /* @__PURE__ */ r(y, { icon: gr, className: "rst:text-primary-500 rst:w-4" }),
+                            children: c.inbox(o.notificationCount ?? 0)
+                          }
+                        ),
+                        p && /* @__PURE__ */ r(
+                          Mr,
+                          {
+                            checked: m,
+                            onCheckedChange: () => p(),
+                            closeOnSelect: !1,
+                            className: K,
+                            icon: /* @__PURE__ */ r(
+                              y,
                               {
-                                icon: or,
-                                className: "rst:text-primary-500 rst:w-4"
+                                icon: W,
+                                className: i("rst:w-4 rst:transition-colors", m ? "rst:text-amber-500" : "rst:text-gray-400")
                               }
                             ),
-                            children: l.inbox(o.notificationCount ?? 0)
+                            indicator: /* @__PURE__ */ r(H, { on: m, size: "xs" }),
+                            children: /* @__PURE__ */ r("span", { className: "rst:font-medium", children: c.darkMode })
                           }
-                        ) }),
-                        v && /* @__PURE__ */ r(F, { children: ({ focus: t }) => (
-                          /* The row is the control. Headless UI keeps
-                             focus on the menu and clicks the active item
-                             on Enter or Space, so the row needs no key
-                             handler of its own. */
-                          /* @__PURE__ */ s(
-                            "div",
-                            {
-                              ref: kr,
-                              "aria-checked": m,
-                              onClick: (d) => {
-                                d.preventDefault(), v();
-                              },
-                              className: a(
-                                "rst:flex rst:w-full rst:items-center rst:justify-between rst:px-4 rst:py-2 rst:text-sm rst:text-gray-700 rst:dark:text-gray-200 rst:cursor-pointer rst:transition-colors",
-                                t && "rst:bg-gray-50 rst:dark:bg-gray-700"
-                              ),
-                              children: [
-                                /* @__PURE__ */ s("div", { className: "rst:flex rst:items-center rst:gap-2", children: [
-                                  /* @__PURE__ */ r(
-                                    u,
-                                    {
-                                      icon: T,
-                                      className: a(
-                                        "rst:w-4 rst:transition-colors",
-                                        m ? "rst:text-amber-500" : "rst:text-gray-400"
-                                      )
-                                    }
-                                  ),
-                                  /* @__PURE__ */ r("span", { className: "rst:font-medium", children: l.darkMode })
-                                ] }),
-                                /* @__PURE__ */ r(Q, { on: m, size: "xs" })
-                              ]
-                            }
-                          )
-                        ) })
+                        )
                       ] }),
-                      C.length > 0 && /* @__PURE__ */ r("div", { className: "rst:py-1", children: C.map((t) => /* @__PURE__ */ r(F, { children: ({ focus: d }) => /* @__PURE__ */ s(
-                        k,
-                        {
-                          as: x,
-                          href: t.path,
-                          to: t.path,
-                          variant: "neutral",
-                          underline: "none",
-                          className: a(
-                            "rst:flex rst:w-full rst:items-center rst:justify-between rst:gap-2 rst:px-4 rst:py-2 rst:text-sm rst:text-gray-700 rst:dark:text-gray-200 rst:transition-colors",
-                            d && "rst:bg-gray-50 rst:dark:bg-gray-700"
-                          ),
-                          children: [
-                            t.label,
-                            t.badge && /* @__PURE__ */ r("span", { className: "rst:inline-flex", children: t.badge })
-                          ]
-                        }
-                      ) }, t.path)) }),
-                      M && /* @__PURE__ */ r("div", { className: "rst:py-1", children: /* @__PURE__ */ r(F, { children: ({ focus: t }) => /* @__PURE__ */ r(
-                        p,
+                      S.length > 0 && /* @__PURE__ */ r(D, { className: "rst:py-1", children: S.map((t) => /* @__PURE__ */ r(_, { href: t.path, badge: t.badge, className: Or, children: t.label }, t.path)) }),
+                      M && /* @__PURE__ */ r(D, { className: "rst:py-1", children: /* @__PURE__ */ r(
+                        _,
                         {
-                          variant: "ghost",
-                          colorScheme: "neutral",
-                          size: "sm",
-                          onClick: M,
-                          className: a(
-                            "rst:w-full rst:justify-start rst:rounded-none rst:px-4",
-                            t && "rst:bg-gray-50 rst:dark:bg-gray-700"
-                          ),
-                          startIcon: /* @__PURE__ */ r(
-                            u,
-                            {
-                              icon: lr,
-                              className: "rst:text-gray-400 rst:dark:text-gray-500 rst:w-4"
-                            }
-                          ),
-                          children: l.logOut
+                          onSelect: M,
+                          className: tr,
+                          icon: /* @__PURE__ */ r(y, { icon: fr, className: "rst:text-gray-400 rst:dark:text-gray-500 rst:w-4" }),
+                          children: c.logOut
                         }
-                      ) }) })
-                    ] })
+                      ) })
+                    ]
                   }
                 )
-              ] }) : /* @__PURE__ */ r(p, { size: "sm", variant: "solid", colorScheme: "primary", onClick: w, children: l.logIn }))
+              ] }) }) : /* @__PURE__ */ r(j, { size: "sm", variant: "solid", colorScheme: "primary", onClick: w, children: c.logIn }))
             ] }),
-            /* @__PURE__ */ r("div", { "data-roster-hamburger": !0, className: "rst:flex rst:md:hidden", children: /* @__PURE__ */ s(
-              J,
+            /* @__PURE__ */ r("div", { ref: Q, "data-roster-hamburger": !0, className: "rst:flex rst:md:hidden", children: /* @__PURE__ */ a(
+              T,
               {
-                className: a(
+                className: i(
                   "rst:inline-flex rst:items-center rst:justify-center rst:rounded-md rst:p-2 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",
-                  I.hamburger
+                  F.hamburger
                 ),
                 children: [
-                  /* @__PURE__ */ r("span", { className: "rst:sr-only", children: l.openMainMenu }),
-                  g ? /* @__PURE__ */ r(
-                    u,
+                  /* @__PURE__ */ r("span", { className: "rst:sr-only", children: c.openMainMenu }),
+                  h ? /* @__PURE__ */ r(
+                    y,
                     {
-                      icon: X,
+                      icon: Y,
                       className: "rst:block rst:h-6 rst:w-6",
                       "aria-hidden": "true"
                     }
-                  ) : /* @__PURE__ */ s("div", { className: "rst:relative", children: [
+                  ) : /* @__PURE__ */ a("div", { className: "rst:relative", children: [
                     /* @__PURE__ */ r(
-                      u,
+                      y,
                       {
-                        icon: dr,
+                        icon: yr,
                         className: "rst:block rst:h-6 rst:w-6",
                         "aria-hidden": "true"
                       }
                     ),
-                    S && /* @__PURE__ */ r("span", { className: "rst:absolute rst:top-0 rst:right-0 rst:block rst:h-2.5 rst:w-2.5 rst:rounded-full rst:bg-error-500 rst:ring-2 rst:ring-transparent rst:transform rst:translate-x-1/4 rst:-translate-y-1/4" })
+                    k && /* @__PURE__ */ r("span", { className: "rst:absolute rst:top-0 rst:right-0 rst:block rst:h-2.5 rst:w-2.5 rst:rounded-full rst:bg-error-500 rst:ring-2 rst:ring-transparent rst:transform rst:translate-x-1/4 rst:-translate-y-1/4" })
                   ] })
                 ]
               }
             ) })
           ] }),
-          g && /* @__PURE__ */ r(wr, { close: h }),
-          g && /* @__PURE__ */ r(Mr, { activePath: N, close: h }),
+          h && /* @__PURE__ */ r(Lr, { close: d, panel: I, hamburger: Q }),
+          h && /* @__PURE__ */ r(Ur, { close: d, panel: I }),
+          h && /* @__PURE__ */ r(Dr, { activePath: N, close: d }),
           /* @__PURE__ */ r(
-            P,
+            Fr,
             {
-              as: _,
+              as: hr,
               enter: "rst:duration-200 rst:ease-out",
               enterFrom: "rst:opacity-0 rst:scale-95",
               enterTo: "rst:opacity-100 rst:scale-100",
@@ -361,62 +335,61 @@ const Ur = ({
               leaveFrom: "rst:opacity-100 rst:scale-100",
               leaveTo: "rst:opacity-0 rst:scale-95",
               children: /* @__PURE__ */ r(
-                vr,
+                Er,
                 {
-                  focus: !0,
                   className: "rst:absolute rst:top-0 rst:inset-x-0 rst:z-50 rst:origin-top-right rst:transform rst:p-2 rst:transition rst:md:hidden",
-                  children: /* @__PURE__ */ s("div", { "data-roster-mobile-panel": !0, className: "rst:rounded-lg rst:elevation-anchored rst:ring rst:ring-black/5 rst:dark:ring-white/10 rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700 rst:bg-white rst:dark:bg-gray-800", children: [
-                    /* @__PURE__ */ s("div", { className: "rst:px-5 rst:pt-5 rst:pb-6", children: [
-                      /* @__PURE__ */ s("div", { className: "rst:flex rst:items-center rst:justify-between", children: [
-                        /* @__PURE__ */ s("div", { className: "rst:flex rst:items-center rst:gap-3", children: [
+                  children: /* @__PURE__ */ a("div", { ref: I, "data-roster-mobile-panel": !0, className: "rst:rounded-lg rst:elevation-anchored rst:ring rst:ring-black/5 rst:dark:ring-white/10 rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700 rst:bg-white rst:dark:bg-gray-800", children: [
+                    /* @__PURE__ */ a("div", { className: "rst:px-5 rst:pt-5 rst:pb-6", children: [
+                      /* @__PURE__ */ a("div", { className: "rst:flex rst:items-center rst:justify-between", children: [
+                        /* @__PURE__ */ a("div", { className: "rst:flex rst:items-center rst:gap-3", children: [
                           /* @__PURE__ */ r(
                             "img",
                             {
                               src: e,
                               alt: "",
-                              style: U,
-                              className: a("rst:shrink-0", V, b ?? "rst:rounded-md")
+                              style: X,
+                              className: i("rst:shrink-0", J, g ?? "rst:rounded-md")
                             }
                           ),
-                          R ?? /* @__PURE__ */ r("span", { className: "rst:font-bold rst:text-gray-900 rst:dark:text-white", children: f })
+                          q ?? /* @__PURE__ */ r("span", { className: "rst:font-bold rst:text-gray-900 rst:dark:text-white", children: x })
                         ] }),
-                        /* @__PURE__ */ r("div", { className: "rst:-mr-2", children: /* @__PURE__ */ s(J, { className: "rst:inline-flex rst:items-center rst:justify-center rst:rounded-md rst:p-2 rst:text-gray-400 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-700 rst:hover:text-gray-500 rst:dark:hover:text-white rst:focus:outline-hidden", children: [
-                          /* @__PURE__ */ r("span", { className: "rst:sr-only", children: l.closeMainMenu }),
+                        /* @__PURE__ */ r("div", { className: "rst:-mr-2", children: /* @__PURE__ */ a(T, { className: "rst:inline-flex rst:items-center rst:justify-center rst:rounded-md rst:p-2 rst:text-gray-400 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-700 rst:hover:text-gray-500 rst:dark:hover:text-white rst:focus:outline-hidden", children: [
+                          /* @__PURE__ */ r("span", { className: "rst:sr-only", children: c.closeMainMenu }),
                           /* @__PURE__ */ r(
-                            u,
+                            y,
                             {
-                              icon: X,
+                              icon: Y,
                               className: "rst:h-6 rst:w-6",
                               "aria-hidden": "true"
                             }
                           )
                         ] }) })
                       ] }),
-                      /* @__PURE__ */ s("div", { className: "rst:mt-6", children: [
-                        O && /* @__PURE__ */ r("div", { className: "rst:mb-4", children: O }),
-                        /* @__PURE__ */ s("nav", { className: "rst:grid rst:gap-y-4", children: [
-                          E.map((t) => {
-                            const d = N === t.path;
+                      /* @__PURE__ */ a("div", { className: "rst:mt-6", children: [
+                        L && /* @__PURE__ */ r("div", { className: "rst:mb-4", children: L }),
+                        /* @__PURE__ */ a("nav", { className: "rst:grid rst:gap-y-4", children: [
+                          $.map((t) => {
+                            const f = N === t.path;
                             return /* @__PURE__ */ r(
-                              k,
+                              A,
                               {
-                                as: x,
+                                as: v,
                                 href: t.path,
                                 to: t.path,
-                                onClick: () => h(),
+                                onClick: () => d(),
                                 variant: "neutral",
                                 underline: "none",
-                                className: a(
+                                className: i(
                                   "rst:-m-3 rst:flex rst:items-center rst:rounded-md rst:p-3 rst:transition-colors",
                                   "rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700",
-                                  d ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                  f ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
                                 ),
-                                children: /* @__PURE__ */ s(
+                                children: /* @__PURE__ */ a(
                                   "span",
                                   {
-                                    className: a(
+                                    className: i(
                                       "rst:ml-3 rst:inline-flex rst:items-center rst:gap-1.5 rst:text-base rst:font-medium",
-                                      d ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                      f ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
                                     ),
                                     children: [
                                       t.label,
@@ -428,31 +401,31 @@ const Ur = ({
                               t.path
                             );
                           }),
-                          o && C.length > 0 && /* @__PURE__ */ s(L, { children: [
+                          o && S.length > 0 && /* @__PURE__ */ a(U, { children: [
                             /* @__PURE__ */ r("hr", { className: "rst:border-gray-100 rst:dark:border-gray-700" }),
-                            C.map((t) => {
-                              const d = N === t.path;
-                              return /* @__PURE__ */ s(
-                                k,
+                            S.map((t) => {
+                              const f = N === t.path;
+                              return /* @__PURE__ */ a(
+                                A,
                                 {
-                                  as: x,
+                                  as: v,
                                   href: t.path,
                                   to: t.path,
-                                  onClick: () => h(),
+                                  onClick: () => d(),
                                   variant: "neutral",
                                   underline: "none",
-                                  className: a(
+                                  className: i(
                                     "rst:-m-3 rst:flex rst:items-center rst:rounded-md rst:p-3 rst:transition-colors",
                                     "rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700",
-                                    d ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                    f ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
                                   ),
                                   children: [
                                     /* @__PURE__ */ r(
                                       "span",
                                       {
-                                        className: a(
+                                        className: i(
                                           "rst:ml-3 rst:text-base rst:font-medium",
-                                          d ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                          f ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
                                         ),
                                         children: t.label
                                       }
@@ -467,83 +440,83 @@ const Ur = ({
                         ] })
                       ] })
                     ] }),
-                    (o || D || w) && /* @__PURE__ */ r("div", { className: "rst:py-6 rst:px-5 rst:space-y-4", children: D || (!o && w ? /* @__PURE__ */ r(
-                      p,
+                    (o || O || w) && /* @__PURE__ */ r("div", { className: "rst:py-6 rst:px-5 rst:space-y-4", children: O || (!o && w ? /* @__PURE__ */ r(
+                      j,
                       {
                         variant: "solid",
                         colorScheme: "primary",
                         className: "rst:w-full rst:justify-center",
                         onClick: () => {
-                          w(), h();
+                          w(), d();
                         },
-                        children: l.logIn
+                        children: c.logIn
                       }
-                    ) : /* @__PURE__ */ s(L, { children: [
-                      S && j && /* @__PURE__ */ r(
-                        p,
+                    ) : /* @__PURE__ */ a(U, { children: [
+                      k && b && /* @__PURE__ */ r(
+                        j,
                         {
                           variant: "ghost",
                           colorScheme: "neutral",
                           onClick: () => {
-                            j?.(), h();
+                            b?.(), d();
                           },
                           className: "rst:w-full rst:justify-between rst:px-4 rst:text-base rst:font-medium rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700 rst:text-gray-900 rst:dark:text-gray-100",
                           endIcon: /* @__PURE__ */ r(
-                            G,
+                            Z,
                             {
-                              fill: q,
+                              fill: V,
                               size: "xs",
                               statusBadge: !0,
-                              variant: $,
+                              variant: P,
                               children: o?.notificationCount
                             }
                           ),
-                          children: l.pendingInvitations
+                          children: c.pendingInvitations
                         }
                       ),
-                      v && /* The row is the switch: one tab stop, its
+                      p && /* The row is the switch: one tab stop, its
                       state in `aria-checked`, its name from its text. */
-                      /* @__PURE__ */ s(
+                      /* @__PURE__ */ a(
                         "div",
                         {
                           onClick: (t) => {
-                            t.preventDefault(), v();
+                            t.preventDefault(), p();
                           },
                           role: "switch",
                           "aria-checked": m,
                           tabIndex: 0,
                           onKeyDown: (t) => {
-                            t.repeat || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), v());
+                            t.repeat || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), p());
                           },
                           className: "rst:flex rst:w-full rst:items-center rst:justify-between rst:rounded-md rst:px-4 rst:py-2 rst:text-base rst:transition-colors rst:cursor-pointer rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700 rst:text-gray-900 rst:dark:text-gray-100",
                           children: [
-                            /* @__PURE__ */ s("div", { className: "rst:flex rst:items-center rst:gap-3 rst:font-medium", children: [
+                            /* @__PURE__ */ a("div", { className: "rst:flex rst:items-center rst:gap-3 rst:font-medium", children: [
                               /* @__PURE__ */ r(
-                                u,
+                                y,
                                 {
-                                  icon: T,
-                                  className: a(
+                                  icon: W,
+                                  className: i(
                                     "rst:w-5 rst:transition-colors",
                                     m ? "rst:text-amber-500" : "rst:text-gray-400"
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ r("span", { children: l.darkMode })
+                              /* @__PURE__ */ r("span", { children: c.darkMode })
                             ] }),
-                            /* @__PURE__ */ r(Q, { on: m, size: "sm" })
+                            /* @__PURE__ */ r(H, { on: m, size: "sm" })
                           ]
                         }
                       ),
                       M && /* @__PURE__ */ r(
-                        p,
+                        j,
                         {
                           variant: "outline",
                           colorScheme: "error",
                           className: "rst:w-full rst:justify-center",
                           onClick: () => {
-                            M?.(), h();
+                            M?.(), d();
                           },
-                          children: l.logOut
+                          children: c.logOut
                         }
                       )
                     ] })) })
@@ -558,5 +531,5 @@ const Ur = ({
   );
 };
 export {
-  Ur as Navbar
+  Hr as Navbar
 };