@blakesteve/roster 5.6.0 → 5.8.0

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

@@ -1,118 +1,143 @@
 "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 { 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 { 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 { 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 }) {
   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: a(gr({ size: n, variant: "neutral" }), "rst:pointer-events-none"),
+      children: /* @__PURE__ */ r("span", { className: a(hr({ size: n })) })
     }
   );
 }
-const gr = (e) => {
+const kr = (e) => {
   e?.setAttribute("role", "menuitemcheckbox");
-}, G = (e, n) => typeof e == "function" ? e({ close: n }) : e;
-function ur(e) {
-  return Z.useSyncExternalStore(
+}, Y = (e, n) => typeof e == "function" ? e({ close: n }) : e, br = {
+  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 Nr(e) {
+  return nr.useSyncExternalStore(
     (n) => {
       if (!e || typeof document > "u") return () => {
       };
-      const l = new MutationObserver(n);
-      return l.observe(document.documentElement, {
+      const i = new MutationObserver(n);
+      return i.observe(document.documentElement, {
         attributes: !0,
         attributeFilter: ["class"]
-      }), () => l.disconnect();
+      }), () => i.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 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();
     };
     return document.addEventListener("pointerdown", n, { capture: !0 }), () => document.removeEventListener("pointerdown", n, { capture: !0 });
   }, [e]), null;
 }
-function yr({
+function Mr({
   activePath: e,
   close: n
 }) {
-  const l = rr(e);
-  return H(() => {
-    l.current !== e && (l.current = e, n());
+  const i = ir(e);
+  return Z(() => {
+    i.current !== e && (i.current = e, n());
   }, [e, n]), null;
 }
-const Ir = ({
+const Ur = ({
   logoSrc: e,
   logoSize: n = "2rem",
-  logoClassName: l,
-  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",
-  themeMode: B,
-  notificationVariant: O = "error",
-  notificationFill: L = "solid",
-  ...W
+  logoHeight: i,
+  logoWidth: y,
+  logoClassName: b,
+  brandName: f,
+  items: E,
+  activePath: N,
+  routerElement: x,
+  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
 }) => {
-  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 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" ? {
+    // 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: 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"
   };
   return /* @__PURE__ */ r(
-    mr,
+    xr,
     {
       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: [
+      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(
-              f,
+              k,
               {
-                as: p,
+                as: x,
                 href: "/",
                 to: "/",
                 variant: "neutral",
                 underline: "none",
                 className: a(
                   "rst:flex rst:items-center rst:gap-3 rst:transition-opacity",
-                  D.brand
+                  I.brand
                 ),
                 children: [
                   /* @__PURE__ */ r(
@@ -120,28 +145,28 @@ const Ir = ({
                     {
                       src: e,
                       alt: "",
-                      style: q,
-                      className: a("rst:shrink-0", l ?? "rst:rounded-md")
+                      style: U,
+                      className: a("rst:shrink-0", V, b ?? "rst:rounded-md")
                     }
                   ),
-                  M ?? /* @__PURE__ */ r("span", { className: "rst:text-xl rst:font-bold rst:tracking-tight", children: x })
+                  R ?? /* @__PURE__ */ r("span", { className: "rst:text-xl rst:font-bold rst:tracking-tight", children: f })
                 ]
               }
             ),
             /* @__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;
+              /* @__PURE__ */ r("div", { className: "rst:flex rst:items-center rst:gap-6", children: E.map((t) => {
+                const d = N === t.path;
                 return /* @__PURE__ */ s(
-                  f,
+                  k,
                   {
-                    as: p,
+                    as: x,
                     href: t.path,
                     to: t.path,
                     variant: "neutral",
                     underline: "none",
                     className: a(
                       "rst:inline-flex rst:items-center rst:gap-1.5 rst:text-sm rst:transition-colors rst:duration-200",
-                      o ? D.linkActive : D.linkBase
+                      d ? I.linkActive : I.linkBase
                     ),
                     children: [
                       t.label,
@@ -151,69 +176,67 @@ 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" }),
+              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(
-                    ar,
+                    mr,
                     {
-                      initials: i.initials,
-                      src: i.avatarSrc,
+                      "aria-hidden": "true",
+                      alt: "",
+                      initials: o.initials,
+                      src: o.avatarSrc,
                       size: "sm",
                       shape: "circle",
-                      colorScheme: i.avatarColor ?? "primary"
+                      colorScheme: o.avatarColor ?? "primary"
                     }
                   ),
-                  C && /* @__PURE__ */ r("div", { className: "rst:absolute rst:-top-1 rst:-right-2", children: /* @__PURE__ */ r(
-                    _,
+                  S && /* @__PURE__ */ r("div", { className: "rst:absolute rst:-top-1 rst:-right-2", children: /* @__PURE__ */ r(
+                    G,
                     {
-                      fill: L,
+                      fill: q,
                       size: "xs",
                       statusBadge: !0,
-                      variant: O,
-                      children: i.notificationCount
+                      variant: $,
+                      children: o.notificationCount
                     }
                   ) })
                 ] }),
                 /* @__PURE__ */ r(
-                  T,
+                  P,
                   {
-                    as: E,
+                    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(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: [
+                    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: [
-                        C && N && /* @__PURE__ */ r(A, { children: ({ focus: t }) => /* @__PURE__ */ s(
-                          u,
+                        S && j && /* @__PURE__ */ r(F, { children: ({ focus: t }) => /* @__PURE__ */ r(
+                          p,
                           {
                             variant: "ghost",
                             colorScheme: "neutral",
                             size: "sm",
-                            onClick: N,
+                            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(
-                              g,
+                              u,
                               {
-                                icon: tr,
+                                icon: or,
                                 className: "rst:text-primary-500 rst:w-4"
                               }
                             ),
-                            children: [
-                              "Inbox (",
-                              i.notificationCount,
-                              ")"
-                            ]
+                            children: l.inbox(o.notificationCount ?? 0)
                           }
                         ) }),
-                        y && /* @__PURE__ */ r(A, { children: ({ focus: t }) => (
+                        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
@@ -221,10 +244,10 @@ const Ir = ({
                           /* @__PURE__ */ s(
                             "div",
                             {
-                              ref: gr,
-                              "aria-checked": c,
-                              onClick: (o) => {
-                                o.preventDefault(), y();
+                              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",
@@ -233,34 +256,34 @@ const Ir = ({
                               children: [
                                 /* @__PURE__ */ s("div", { className: "rst:flex rst:items-center rst:gap-2", children: [
                                   /* @__PURE__ */ r(
-                                    g,
+                                    u,
                                     {
-                                      icon: K,
+                                      icon: T,
                                       className: a(
                                         "rst:w-4 rst:transition-colors",
-                                        c ? "rst:text-amber-500" : "rst:text-gray-400"
+                                        m ? "rst:text-amber-500" : "rst:text-gray-400"
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ r("span", { className: "rst:font-medium", children: "Dark Mode" })
+                                  /* @__PURE__ */ r("span", { className: "rst:font-medium", children: l.darkMode })
                                 ] }),
-                                /* @__PURE__ */ r(X, { on: c, size: "xs" })
+                                /* @__PURE__ */ r(Q, { on: m, 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,
+                      C.length > 0 && /* @__PURE__ */ r("div", { className: "rst:py-1", children: C.map((t) => /* @__PURE__ */ r(F, { children: ({ focus: d }) => /* @__PURE__ */ s(
+                        k,
                         {
-                          as: p,
+                          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",
-                            o && "rst:bg-gray-50 rst:dark:bg-gray-700"
+                            d && "rst:bg-gray-50 rst:dark:bg-gray-700"
                           ),
                           children: [
                             t.label,
@@ -268,69 +291,69 @@ const Ir = ({
                           ]
                         }
                       ) }, t.path)) }),
-                      k && /* @__PURE__ */ r("div", { className: "rst:py-1", children: /* @__PURE__ */ r(A, { children: ({ focus: t }) => /* @__PURE__ */ r(
-                        u,
+                      M && /* @__PURE__ */ r("div", { className: "rst:py-1", children: /* @__PURE__ */ r(F, { children: ({ focus: t }) => /* @__PURE__ */ r(
+                        p,
                         {
                           variant: "ghost",
                           colorScheme: "neutral",
                           size: "sm",
-                          onClick: k,
+                          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(
-                            g,
+                            u,
                             {
-                              icon: sr,
+                              icon: lr,
                               className: "rst:text-gray-400 rst:dark:text-gray-500 rst:w-4"
                             }
                           ),
-                          children: "Log Out"
+                          children: l.logOut
                         }
                       ) }) })
                     ] })
                   }
                 )
-              ] }) : /* @__PURE__ */ r(u, { size: "sm", variant: "solid", colorScheme: "primary", onClick: b, children: "Log In" }))
+              ] }) : /* @__PURE__ */ r(p, { size: "sm", variant: "solid", colorScheme: "primary", onClick: w, children: l.logIn }))
             ] }),
             /* @__PURE__ */ r("div", { "data-roster-hamburger": !0, className: "rst:flex rst:md:hidden", children: /* @__PURE__ */ s(
-              $,
+              J,
               {
                 className: a(
                   "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
+                  I.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: l.openMainMenu }),
+                  g ? /* @__PURE__ */ r(
+                    u,
                     {
-                      icon: V,
+                      icon: X,
                       className: "rst:block rst:h-6 rst:w-6",
                       "aria-hidden": "true"
                     }
                   ) : /* @__PURE__ */ s("div", { className: "rst:relative", children: [
                     /* @__PURE__ */ r(
-                      g,
+                      u,
                       {
-                        icon: er,
+                        icon: dr,
                         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" })
+                    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" })
                   ] })
                 ]
               }
             ) })
           ] }),
-          F && /* @__PURE__ */ r(pr, { close: d }),
-          F && /* @__PURE__ */ r(yr, { activePath: h, close: d }),
+          g && /* @__PURE__ */ r(wr, { close: h }),
+          g && /* @__PURE__ */ r(Mr, { activePath: N, close: h }),
           /* @__PURE__ */ r(
-            T,
+            P,
             {
-              as: E,
+              as: _,
               enter: "rst:duration-200 rst:ease-out",
               enterFrom: "rst:opacity-0 rst:scale-95",
               enterTo: "rst:opacity-100 rst:scale-100",
@@ -338,7 +361,7 @@ const Ir = ({
               leaveFrom: "rst:opacity-100 rst:scale-100",
               leaveTo: "rst:opacity-0 rst:scale-95",
               children: /* @__PURE__ */ r(
-                hr,
+                vr,
                 {
                   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",
@@ -351,18 +374,18 @@ const Ir = ({
                             {
                               src: e,
                               alt: "",
-                              style: q,
-                              className: a("rst:shrink-0", l ?? "rst:rounded-md")
+                              style: U,
+                              className: a("rst:shrink-0", V, b ?? "rst:rounded-md")
                             }
                           ),
-                          M ?? /* @__PURE__ */ r("span", { className: "rst:font-bold rst:text-gray-900 rst:dark:text-white", children: x })
+                          R ?? /* @__PURE__ */ r("span", { className: "rst:font-bold rst:text-gray-900 rst:dark:text-white", children: f })
                         ] }),
-                        /* @__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__ */ 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(
-                            g,
+                            u,
                             {
-                              icon: V,
+                              icon: X,
                               className: "rst:h-6 rst:w-6",
                               "aria-hidden": "true"
                             }
@@ -370,30 +393,30 @@ const Ir = ({
                         ] }) })
                       ] }),
                       /* @__PURE__ */ s("div", { className: "rst:mt-6", children: [
-                        z && /* @__PURE__ */ r("div", { className: "rst:mb-4", children: z }),
+                        O && /* @__PURE__ */ r("div", { className: "rst:mb-4", children: O }),
                         /* @__PURE__ */ s("nav", { className: "rst:grid rst:gap-y-4", children: [
-                          v.map((t) => {
-                            const o = h === t.path;
+                          E.map((t) => {
+                            const d = N === t.path;
                             return /* @__PURE__ */ r(
-                              f,
+                              k,
                               {
-                                as: p,
+                                as: x,
                                 href: t.path,
                                 to: t.path,
-                                onClick: () => d(),
+                                onClick: () => h(),
                                 variant: "neutral",
                                 underline: "none",
                                 className: a(
                                   "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"
+                                  d ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
                                 ),
                                 children: /* @__PURE__ */ s(
                                   "span",
                                   {
                                     className: a(
                                       "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"
+                                      d ? "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,23 +428,23 @@ const Ir = ({
                               t.path
                             );
                           }),
-                          i && w.length > 0 && /* @__PURE__ */ s(I, { children: [
+                          o && C.length > 0 && /* @__PURE__ */ s(L, { children: [
                             /* @__PURE__ */ r("hr", { className: "rst:border-gray-100 rst:dark:border-gray-700" }),
-                            w.map((t) => {
-                              const o = h === t.path;
+                            C.map((t) => {
+                              const d = N === t.path;
                               return /* @__PURE__ */ s(
-                                f,
+                                k,
                                 {
-                                  as: p,
+                                  as: x,
                                   href: t.path,
                                   to: t.path,
-                                  onClick: () => d(),
+                                  onClick: () => h(),
                                   variant: "neutral",
                                   underline: "none",
                                   className: a(
                                     "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"
+                                    d ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
                                   ),
                                   children: [
                                     /* @__PURE__ */ r(
@@ -429,7 +452,7 @@ const Ir = ({
                                       {
                                         className: a(
                                           "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"
+                                          d ? "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 +467,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 || D || w) && /* @__PURE__ */ r("div", { className: "rst:py-6 rst:px-5 rst:space-y-4", children: D || (!o && w ? /* @__PURE__ */ r(
+                      p,
                       {
                         variant: "solid",
                         colorScheme: "primary",
                         className: "rst:w-full rst:justify-center",
                         onClick: () => {
-                          b(), d();
+                          w(), h();
                         },
-                        children: "Log In"
+                        children: l.logIn
                       }
-                    ) : /* @__PURE__ */ s(I, { children: [
-                      C && N && /* @__PURE__ */ r(
-                        u,
+                    ) : /* @__PURE__ */ s(L, { children: [
+                      S && j && /* @__PURE__ */ r(
+                        p,
                         {
                           variant: "ghost",
                           colorScheme: "neutral",
                           onClick: () => {
-                            N?.(), d();
+                            j?.(), h();
                           },
                           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,
                             {
-                              fill: L,
+                              fill: q,
                               size: "xs",
                               statusBadge: !0,
-                              variant: O,
-                              children: i?.notificationCount
+                              variant: $,
+                              children: o?.notificationCount
                             }
                           ),
-                          children: "Pending Invitations"
+                          children: l.pendingInvitations
                         }
                       ),
-                      y && /* The row is the switch: one tab stop, its
+                      v && /* The row is the switch: one tab stop, its
                       state in `aria-checked`, its name from its text. */
                       /* @__PURE__ */ s(
                         "div",
                         {
                           onClick: (t) => {
-                            t.preventDefault(), y();
+                            t.preventDefault(), v();
                           },
                           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(), v());
                           },
                           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__ */ r(
-                                g,
+                                u,
                                 {
-                                  icon: K,
+                                  icon: T,
                                   className: a(
                                     "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: l.darkMode })
                             ] }),
-                            /* @__PURE__ */ r(X, { on: c, size: "sm" })
+                            /* @__PURE__ */ r(Q, { on: m, size: "sm" })
                           ]
                         }
                       ),
-                      k && /* @__PURE__ */ r(
-                        u,
+                      M && /* @__PURE__ */ r(
+                        p,
                         {
                           variant: "outline",
                           colorScheme: "error",
                           className: "rst:w-full rst:justify-center",
                           onClick: () => {
-                            k?.(), d();
+                            M?.(), h();
                           },
-                          children: "Log Out"
+                          children: l.logOut
                         }
                       )
                     ] })) })
@@ -535,5 +558,5 @@ const Ir = ({
   );
 };
 export {
-  Ir as Navbar
+  Ur as Navbar
 };