@blakesteve/roster 5.7.0 → 5.9.0

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

@@ -1,118 +1,172 @@
 "use client";
-import { jsx as r, jsxs as s, Fragment as I } from "react/jsx-runtime";
-import Z, { Fragment as E, useEffect as H, useRef as rr } from "react";
-import { FontAwesomeIcon as g } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faInbox as tr, faMoon as K, faRightFromBracket as sr, faXmark as V, faBars as er } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
-import { cn as a } from "../../../lib/utils.js";
-import { Button as u } from "../../atoms/Button/Button.js";
-import { Link as f } from "../../atoms/Link/Link.js";
-import { Badge as _ } from "../../atoms/Badge/Badge.js";
-import { Avatar as ar } from "../../atoms/Avatar/Avatar.js";
-import { switchThumbVariants as nr, switchTrackVariants as ir } from "../../atoms/Switch/switch-variants.js";
-import { navbarVariants as or } from "./navbar-variants.js";
-import { Menu as lr, MenuButton as cr, MenuItems as dr, MenuItem as A } from "../../../node_modules/@headlessui/react/dist/components/menu/menu.js";
-import { Popover as mr, PopoverButton as $, PopoverPanel as hr } from "../../../node_modules/@headlessui/react/dist/components/popover/popover.js";
-import { Transition as T } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-function X({ on: e, size: n }) {
+import { jsx as r, jsxs as a, Fragment as U } from "react/jsx-runtime";
+import hr, { useRef as R, Fragment as ur, useEffect as z } from "react";
+import { FontAwesomeIcon as f } 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(ir({ size: n, variant: "neutral" }), "rst:pointer-events-none"),
-      children: /* @__PURE__ */ r("span", { className: a(nr({ size: n })) })
+      className: i(br({ size: s, variant: "neutral" }), "rst:pointer-events-none"),
+      children: /* @__PURE__ */ r("span", { className: i(vr({ size: s })) })
     }
   );
 }
-const gr = (e) => {
-  e?.setAttribute("role", "menuitemcheckbox");
-}, G = (e, n) => typeof e == "function" ? e({ close: n }) : e;
-function ur(e) {
-  return Z.useSyncExternalStore(
-    (n) => {
+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",
+  logIn: "Log In",
+  logOut: "Log Out",
+  darkMode: "Dark Mode",
+  pendingInvitations: "Pending Invitations",
+  inbox: (e) => `Inbox (${e})`
+};
+function Br(e) {
+  return hr.useSyncExternalStore(
+    (s) => {
       if (!e || typeof document > "u") return () => {
       };
-      const l = new MutationObserver(n);
-      return l.observe(document.documentElement, {
+      const n = new MutationObserver(s);
+      return n.observe(document.documentElement, {
         attributes: !0,
         attributeFilter: ["class"]
-      }), () => l.disconnect();
+      }), () => n.disconnect();
     },
     () => e && document.documentElement.classList.contains("dark"),
     () => !1
   );
 }
-function pr({ close: e }) {
-  return H(() => {
-    const n = (l) => {
-      const x = document.querySelector("[data-roster-mobile-panel]"), v = document.querySelector("[data-roster-hamburger]"), h = l.target;
-      !x?.contains(h) && !v?.contains(h) && 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 h = (y) => {
+      const x = y.target;
+      !sr(s.current, x) && !n.current?.contains(x) && e();
     };
-    return document.addEventListener("pointerdown", n, { capture: !0 }), () => document.removeEventListener("pointerdown", n, { capture: !0 });
-  }, [e]), null;
+    return document.addEventListener("pointerdown", h, { capture: !0 }), () => document.removeEventListener("pointerdown", h, { capture: !0 });
+  }, [e, s, n]), null;
 }
-function yr({
+function Ur({ close: e, panel: s }) {
+  return z(() => {
+    const n = (y) => {
+      sr(s.current, y.target) || e();
+    }, h = requestAnimationFrame(() => {
+      s.current?.querySelector(Ir)?.focus(), document.addEventListener("focusin", n);
+    });
+    return () => {
+      cancelAnimationFrame(h), document.removeEventListener("focusin", n);
+    };
+  }, [e, s]), null;
+}
+function Dr({
   activePath: e,
-  close: n
+  close: s
 }) {
-  const l = rr(e);
-  return H(() => {
-    l.current !== e && (l.current = e, n());
-  }, [e, n]), null;
+  const n = R(e);
+  return z(() => {
+    n.current !== e && (n.current = e, s());
+  }, [e, s]), null;
 }
-const Ir = ({
+const Hr = ({
   logoSrc: e,
-  logoSize: n = "2rem",
-  logoClassName: l,
+  logoSize: s = "2rem",
+  logoHeight: n,
+  logoWidth: h,
+  logoClassName: y,
   brandName: x,
-  items: v,
-  activePath: h,
-  routerElement: p,
-  user: i,
-  onLogin: b,
-  onLogout: k,
-  onInboxClick: N,
-  onThemeToggle: y,
-  actions: J,
-  brandElement: M,
-  navActions: P,
-  userMenuItems: w = [],
-  className: Q,
-  variant: m = "default",
-  position: U = "sticky",
+  items: $,
+  activePath: N,
+  routerElement: v,
+  user: o,
+  onLogin: w,
+  onLogout: M,
+  onInboxClick: b,
+  onThemeToggle: p,
+  actions: ar,
+  brandElement: q,
+  navActions: nr,
+  userMenuItems: S = [],
+  className: ir,
+  variant: l = "default",
+  position: or = "sticky",
   themeMode: B,
-  notificationVariant: O = "error",
-  notificationFill: L = "solid",
-  ...W
+  labels: cr,
+  notificationVariant: P = "error",
+  notificationFill: V = "solid",
+  ...dr
 }) => {
-  const C = (i?.notificationCount || 0) > 0, R = typeof n == "number" ? `${n}px` : n, q = { width: R, height: R }, Y = ur(B === "auto"), c = (B === "auto" ? Y ? "dark" : "light" : B ?? (m === "white" || m === "default" ? "light" : "dark")) === "dark", j = m === "slate" || m === "primary" || m === "default" && c || m === "white" && c || m === "transparent" && c, D = {
-    brand: j ? "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: j ? "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: j ? "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: j ? "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"
-  };
+  const c = pr(Ar, cr), lr = jr(v), k = (o?.notificationCount || 0) > 0, C = (u) => typeof u == "number" ? `${u}px` : u, G = n !== void 0 || h !== void 0, X = G ? {
+    width: h === void 0 ? "auto" : C(h),
+    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
+    // white and grays.
+    brand: "rst:text-primary-700-ink rst:hover:text-primary-700-ink/80 rst:dark:text-white rst:dark:hover:text-gray-200",
+    linkBase: "rst:text-primary-700-ink/80 rst:hover:text-primary-700-ink rst:dark:text-gray-300 rst:dark:hover:text-white",
+    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: 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(
-    mr,
+    Cr,
     {
       as: "nav",
-      className: a("rst:z-50", or({ variant: m, position: U }), Q),
-      ...W,
-      children: ({ open: F, close: d }) => {
-        const S = G(J, d), z = G(P, d);
-        return /* @__PURE__ */ s(I, { 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(
-              f,
+      className: i("rst:z-50", Sr({ variant: l, position: or }), ir),
+      ...dr,
+      children: ({ open: u, 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: p,
+                as: v,
                 href: "/",
                 to: "/",
                 variant: "neutral",
                 underline: "none",
-                className: a(
+                className: i(
                   "rst:flex rst:items-center rst:gap-3 rst:transition-opacity",
-                  D.brand
+                  F.brand
                 ),
                 children: [
                   /* @__PURE__ */ r(
@@ -120,28 +174,28 @@ const Ir = ({
                     {
                       src: e,
                       alt: "",
-                      style: q,
-                      className: a("rst:shrink-0", l ?? "rst:rounded-md")
+                      style: X,
+                      className: i("rst:shrink-0", J, y ?? "rst:rounded-md")
                     }
                   ),
-                  M ?? /* @__PURE__ */ r("span", { className: "rst:text-xl rst:font-bold rst:tracking-tight", children: x })
+                  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: v.map((t) => {
-                const o = h === t.path;
-                return /* @__PURE__ */ s(
-                  f,
+            /* @__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 g = N === t.path;
+                return /* @__PURE__ */ a(
+                  A,
                   {
-                    as: p,
+                    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",
-                      o ? D.linkActive : D.linkBase
+                      g ? F.linkActive : F.linkBase
                     ),
                     children: [
                       t.label,
@@ -151,186 +205,129 @@ const Ir = ({
                   t.path
                 );
               }) }),
-              z,
-              S ?? (i ? /* @__PURE__ */ s(lr, { as: "div", className: "rst:relative rst:ml-2", children: [
-                /* @__PURE__ */ s(cr, { 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: "Open user menu" }),
-                  /* @__PURE__ */ r(
-                    ar,
-                    {
-                      initials: i.initials,
-                      src: i.avatarSrc,
-                      size: "sm",
-                      shape: "circle",
-                      colorScheme: i.avatarColor ?? "primary"
-                    }
-                  ),
-                  C && /* @__PURE__ */ r("div", { className: "rst:absolute rst:-top-1 rst:-right-2", children: /* @__PURE__ */ r(
-                    _,
-                    {
-                      fill: L,
-                      size: "xs",
-                      statusBadge: !0,
-                      variant: O,
-                      children: i.notificationCount
-                    }
-                  ) })
-                ] }),
-                /* @__PURE__ */ r(
-                  T,
+              L,
+              O ?? (o ? /* @__PURE__ */ r("div", { className: "rst:relative rst:ml-2", children: /* @__PURE__ */ a(kr, { linkComponent: lr, children: [
+                /* @__PURE__ */ a(
+                  Nr,
                   {
-                    as: E,
-                    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(dr, { 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: [
-                        C && N && /* @__PURE__ */ r(A, { children: ({ focus: t }) => /* @__PURE__ */ s(
-                          u,
+                    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: N,
-                            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(
-                              g,
+                            onSelect: b,
+                            className: tr,
+                            icon: /* @__PURE__ */ r(f, { 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(
+                              f,
                               {
-                                icon: tr,
-                                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: [
-                              "Inbox (",
-                              i.notificationCount,
-                              ")"
-                            ]
+                            indicator: /* @__PURE__ */ r(H, { on: m, size: "xs" }),
+                            children: /* @__PURE__ */ r("span", { className: "rst:font-medium", children: c.darkMode })
                           }
-                        ) }),
-                        y && /* @__PURE__ */ r(A, { 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: gr,
-                              "aria-checked": c,
-                              onClick: (o) => {
-                                o.preventDefault(), y();
-                              },
-                              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(
-                                    g,
-                                    {
-                                      icon: K,
-                                      className: a(
-                                        "rst:w-4 rst:transition-colors",
-                                        c ? "rst:text-amber-500" : "rst:text-gray-400"
-                                      )
-                                    }
-                                  ),
-                                  /* @__PURE__ */ r("span", { className: "rst:font-medium", children: "Dark Mode" })
-                                ] }),
-                                /* @__PURE__ */ r(X, { on: c, size: "xs" })
-                              ]
-                            }
-                          )
-                        ) })
+                        )
                       ] }),
-                      w.length > 0 && /* @__PURE__ */ r("div", { className: "rst:py-1", children: w.map((t) => /* @__PURE__ */ r(A, { children: ({ focus: o }) => /* @__PURE__ */ s(
-                        f,
-                        {
-                          as: p,
-                          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",
-                            o && "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)) }),
-                      k && /* @__PURE__ */ r("div", { className: "rst:py-1", children: /* @__PURE__ */ r(A, { children: ({ focus: t }) => /* @__PURE__ */ r(
-                        u,
+                      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: k,
-                          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(
-                            g,
-                            {
-                              icon: sr,
-                              className: "rst:text-gray-400 rst:dark:text-gray-500 rst:w-4"
-                            }
-                          ),
-                          children: "Log Out"
+                          onSelect: M,
+                          className: tr,
+                          icon: /* @__PURE__ */ r(f, { icon: fr, className: "rst:text-gray-400 rst:dark:text-gray-500 rst:w-4" }),
+                          children: c.logOut
                         }
-                      ) }) })
-                    ] })
+                      ) })
+                    ]
                   }
                 )
-              ] }) : /* @__PURE__ */ r(u, { size: "sm", variant: "solid", colorScheme: "primary", onClick: b, children: "Log In" }))
+              ] }) }) : /* @__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(
-              $,
+            /* @__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",
-                  D.hamburger
+                  F.hamburger
                 ),
                 children: [
-                  /* @__PURE__ */ r("span", { className: "rst:sr-only", children: "Open main menu" }),
-                  F ? /* @__PURE__ */ r(
-                    g,
+                  /* @__PURE__ */ r("span", { className: "rst:sr-only", children: c.openMainMenu }),
+                  u ? /* @__PURE__ */ r(
+                    f,
                     {
-                      icon: V,
+                      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(
-                      g,
+                      f,
                       {
-                        icon: er,
+                        icon: yr,
                         className: "rst:block rst:h-6 rst:w-6",
                         "aria-hidden": "true"
                       }
                     ),
-                    C && /* @__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" })
                   ] })
                 ]
               }
             ) })
           ] }),
-          F && /* @__PURE__ */ r(pr, { close: d }),
-          F && /* @__PURE__ */ r(yr, { activePath: h, close: d }),
+          u && /* @__PURE__ */ r(Lr, { close: d, panel: I, hamburger: Q }),
+          u && /* @__PURE__ */ r(Ur, { close: d, panel: I }),
+          u && /* @__PURE__ */ r(Dr, { activePath: N, close: d }),
           /* @__PURE__ */ r(
-            T,
+            Fr,
             {
-              as: E,
+              as: ur,
               enter: "rst:duration-200 rst:ease-out",
               enterFrom: "rst:opacity-0 rst:scale-95",
               enterTo: "rst:opacity-100 rst:scale-100",
@@ -338,62 +335,61 @@ const Ir = ({
               leaveFrom: "rst:opacity-100 rst:scale-100",
               leaveTo: "rst:opacity-0 rst:scale-95",
               children: /* @__PURE__ */ r(
-                hr,
+                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: q,
-                              className: a("rst:shrink-0", l ?? "rst:rounded-md")
+                              style: X,
+                              className: i("rst:shrink-0", J, y ?? "rst:rounded-md")
                             }
                           ),
-                          M ?? /* @__PURE__ */ r("span", { className: "rst:font-bold rst:text-gray-900 rst:dark:text-white", children: x })
+                          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($, { 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: "Close menu" }),
+                        /* @__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(
-                            g,
+                            f,
                             {
-                              icon: V,
+                              icon: Y,
                               className: "rst:h-6 rst:w-6",
                               "aria-hidden": "true"
                             }
                           )
                         ] }) })
                       ] }),
-                      /* @__PURE__ */ s("div", { className: "rst:mt-6", children: [
-                        z && /* @__PURE__ */ r("div", { className: "rst:mb-4", children: z }),
-                        /* @__PURE__ */ s("nav", { className: "rst:grid rst:gap-y-4", children: [
-                          v.map((t) => {
-                            const o = h === 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 g = N === t.path;
                             return /* @__PURE__ */ r(
-                              f,
+                              A,
                               {
-                                as: p,
+                                as: v,
                                 href: t.path,
                                 to: t.path,
                                 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",
-                                  o ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                  g ? "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",
-                                      o ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                      g ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
                                     ),
                                     children: [
                                       t.label,
@@ -405,31 +401,31 @@ const Ir = ({
                               t.path
                             );
                           }),
-                          i && w.length > 0 && /* @__PURE__ */ s(I, { children: [
+                          o && S.length > 0 && /* @__PURE__ */ a(U, { children: [
                             /* @__PURE__ */ r("hr", { className: "rst:border-gray-100 rst:dark:border-gray-700" }),
-                            w.map((t) => {
-                              const o = h === t.path;
-                              return /* @__PURE__ */ s(
-                                f,
+                            S.map((t) => {
+                              const g = N === t.path;
+                              return /* @__PURE__ */ a(
+                                A,
                                 {
-                                  as: p,
+                                  as: v,
                                   href: t.path,
                                   to: t.path,
                                   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",
-                                    o ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                    g ? "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",
-                                          o ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                          g ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
                                         ),
                                         children: t.label
                                       }
@@ -444,83 +440,83 @@ const Ir = ({
                         ] })
                       ] })
                     ] }),
-                    (i || S || b) && /* @__PURE__ */ r("div", { className: "rst:py-6 rst:px-5 rst:space-y-4", children: S || (!i && b ? /* @__PURE__ */ r(
-                      u,
+                    (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: () => {
-                          b(), d();
+                          w(), d();
                         },
-                        children: "Log In"
+                        children: c.logIn
                       }
-                    ) : /* @__PURE__ */ s(I, { children: [
-                      C && N && /* @__PURE__ */ r(
-                        u,
+                    ) : /* @__PURE__ */ a(U, { children: [
+                      k && b && /* @__PURE__ */ r(
+                        j,
                         {
                           variant: "ghost",
                           colorScheme: "neutral",
                           onClick: () => {
-                            N?.(), d();
+                            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(
-                            _,
+                            Z,
                             {
-                              fill: L,
+                              fill: V,
                               size: "xs",
                               statusBadge: !0,
-                              variant: O,
-                              children: i?.notificationCount
+                              variant: P,
+                              children: o?.notificationCount
                             }
                           ),
-                          children: "Pending Invitations"
+                          children: c.pendingInvitations
                         }
                       ),
-                      y && /* 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(), y();
+                            t.preventDefault(), p();
                           },
                           role: "switch",
-                          "aria-checked": c,
+                          "aria-checked": m,
                           tabIndex: 0,
                           onKeyDown: (t) => {
-                            t.repeat || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), y());
+                            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(
-                                g,
+                                f,
                                 {
-                                  icon: K,
-                                  className: a(
+                                  icon: W,
+                                  className: i(
                                     "rst:w-5 rst:transition-colors",
-                                    c ? "rst:text-amber-500" : "rst:text-gray-400"
+                                    m ? "rst:text-amber-500" : "rst:text-gray-400"
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ r("span", { children: "Dark Mode" })
+                              /* @__PURE__ */ r("span", { children: c.darkMode })
                             ] }),
-                            /* @__PURE__ */ r(X, { on: c, size: "sm" })
+                            /* @__PURE__ */ r(H, { on: m, size: "sm" })
                           ]
                         }
                       ),
-                      k && /* @__PURE__ */ r(
-                        u,
+                      M && /* @__PURE__ */ r(
+                        j,
                         {
                           variant: "outline",
                           colorScheme: "error",
                           className: "rst:w-full rst:justify-center",
                           onClick: () => {
-                            k?.(), d();
+                            M?.(), d();
                           },
-                          children: "Log Out"
+                          children: c.logOut
                         }
                       )
                     ] })) })
@@ -535,5 +531,5 @@ const Ir = ({
   );
 };
 export {
-  Ir as Navbar
+  Hr as Navbar
 };