quirk-ui 0.1.149 → 0.1.151

package/dist/core/components/NavBar/index.mjs

@@ -1,12 +1,12 @@
 import { jsx as a, jsxs as i, Fragment as ce } from "react/jsx-runtime";
 import { useState as v, useRef as F, useCallback as _, useEffect as z } from "react";
 import { Modal as oe } from "../Modal/index.mjs";
-import { B as Y, M as Ae } from "../../../index-aWdsapYP.js";
+import { B as A, M as Re } from "../../../index-aWdsapYP.js";
 import { ButtonGroup as de } from "../ButtonGroup/index.mjs";
-import { s as e, N as Re } from "../../../NavLink-u4KvVgDl.js";
+import { s as e, N as xe } from "../../../NavLink-u4KvVgDl.js";
 import { lockScroll as Be, unlockScroll as ue } from "../../utils/NoScroll/noScroll.mjs";
 import { C as Oe } from "../../../chevron-right-Cim1KPuL.js";
-import { E as X } from "../../../external-link-BOPobeQJ.js";
+import { E as Y } from "../../../external-link-BOPobeQJ.js";
 import { X as We } from "../../../x-CnsEH4Ox.js";
 import { c as me } from "../../../createLucideIcon-C8GTh_Qx.js";
 import { C as De } from "../../../chevron-down-DSUzBz9F.js";
@@ -16,7 +16,7 @@ import { C as De } from "../../../chevron-down-DSUzBz9F.js";
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ue = [
+const Pe = [
   ["path", { d: "M21.54 15H17a2 2 0 0 0-2 2v4.54", key: "1djwo0" }],
   [
     "path",
@@ -27,17 +27,17 @@ const Ue = [
   ],
   ["path", { d: "M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05", key: "14pb5j" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
-], Fe = me("earth", Ue);
+], Ue = me("earth", Pe);
 /**
  * @license lucide-react v0.488.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const je = [
+const Fe = [
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
-], Ge = me("search", je), Pe = {
+], je = me("search", Fe), Ge = {
   standard: e.standard,
   transparent: e.transparent
 }, qe = {
@@ -45,66 +45,66 @@ const je = [
   center: e.center,
   right: e.right
 }, Ke = ({
-  spotlight: s,
+  spotlight: o,
   renderText: k
 }) => {
-  var h, x, g, w, C, A;
-  const o = s.callToAction;
-  if (!o) return null;
-  const $ = ((h = o.linkOptions) == null ? void 0 : h.linkType) === "external";
+  var h, R, g, w, C, x;
+  const d = o.callToAction;
+  if (!d) return null;
+  const $ = ((h = d.linkOptions) == null ? void 0 : h.linkType) === "external";
   let m = "#";
-  return $ && ((x = o.linkOptions) != null && x.externalUrl) ? m = o.linkOptions.externalUrl : ((g = o.linkOptions) == null ? void 0 : g.linkType) === "internal" && ((C = (w = o.linkOptions) == null ? void 0 : w.internalUrl) != null && C.slug.current) && (m = `/${o.linkOptions.internalUrl.slug.current}`), /* @__PURE__ */ i("div", { className: e.spotlight, children: [
-    s.image && /* @__PURE__ */ a("div", { className: e.imageWrapper, children: /* @__PURE__ */ a(
+  return $ && ((R = d.linkOptions) != null && R.externalUrl) ? m = d.linkOptions.externalUrl : ((g = d.linkOptions) == null ? void 0 : g.linkType) === "internal" && ((C = (w = d.linkOptions) == null ? void 0 : w.internalUrl) != null && C.slug.current) && (m = `/${d.linkOptions.internalUrl.slug.current}`), /* @__PURE__ */ i("div", { className: e.spotlight, children: [
+    o.image && /* @__PURE__ */ a("div", { className: e.imageWrapper, children: /* @__PURE__ */ a(
       "img",
       {
-        src: ((A = s.image.imageUrls) == null ? void 0 : A.medium) ?? "",
-        alt: s.image.asset.altText || s.image.asset.description || "Content image",
+        src: ((x = o.image.imageUrls) == null ? void 0 : x.medium) ?? "",
+        alt: o.image.asset.altText || o.image.asset.description || "Content image",
         width: 600,
         height: 400
       }
     ) }),
     /* @__PURE__ */ i("div", { className: e.content, children: [
-      s.title && /* @__PURE__ */ a("div", { className: e.title, children: k == null ? void 0 : k(s.title, e.title) }),
-      s.description && /* @__PURE__ */ a("div", { className: e.description, children: k == null ? void 0 : k(s.description, e.description) })
+      o.title && /* @__PURE__ */ a("div", { className: e.title, children: k == null ? void 0 : k(o.title, e.title) }),
+      o.description && /* @__PURE__ */ a("div", { className: e.description, children: k == null ? void 0 : k(o.description, e.description) })
     ] }),
-    o.linkOptions && /* @__PURE__ */ a("div", { className: e.actions, children: /* @__PURE__ */ a(
-      Y,
+    d.linkOptions && /* @__PURE__ */ a("div", { className: e.actions, children: /* @__PURE__ */ a(
+      A,
       {
         as: "a",
-        variant: o.variant ?? "primary",
+        variant: d.variant ?? "primary",
         href: m,
         target: $ ? "_blank" : "_self",
         rel: $ ? "noopener noreferrer" : void 0,
-        "aria-label": o.ariaLabel || o.label,
-        children: o.label
+        "aria-label": d.ariaLabel || d.label,
+        children: d.label
       }
     ) })
   ] });
 };
-function tn({
-  renderText: s,
+function rn({
+  renderText: o,
   title: k,
-  logo: o,
+  logo: d,
   items: $,
   groups: m,
   utilityItems: h,
-  isSticky: x = !1,
+  isSticky: R = !1,
   showSearch: g = !0,
   showLocaleSelect: w = !0,
   showThemeToggle: C = !0,
-  themeToggleComponent: A,
+  themeToggleComponent: x,
   alignment: j = "right",
   variant: J = "standard",
-  navigationType: R = "default",
+  navigationType: B = "default",
   searchComponent: he,
   localeSelectComponent: fe,
   className: be,
   style: pe,
   ...ve
 }) {
-  const [f, Q] = v(!1), [Z, N] = v(null), [ke, ge] = v(0), [Ne, ye] = v(!1), [T, $e] = v(!1), [we, Ce] = v(null), [d, M] = v([]), [B, G] = v(
+  const [f, Q] = v(!1), [Z, N] = v(null), [ke, ge] = v(0), [Ne, ye] = v(!1), [T, $e] = v(!1), [we, Ce] = v(null), [u, L] = v([]), [O, G] = v(
     0
-  ), [Ee, ee] = v(null), [I, Me] = v(!1), [O, W] = v("forward"), P = F(null), y = F(null), ne = F(null), q = F(/* @__PURE__ */ new Map()), ae = () => /* @__PURE__ */ a(
+  ), [Ee, ee] = v(null), [M, Le] = v(!1), [W, D] = v("forward"), q = F(null), y = F(null), ne = F(null), K = F(/* @__PURE__ */ new Map()), ae = () => /* @__PURE__ */ a(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent}`,
@@ -114,11 +114,11 @@ function tn({
         {
           className: `${e.linkItem} ${e.themeToggle}`,
           role: "presentation",
-          children: A
+          children: x
         }
       )
     }
-  ), K = () => /* @__PURE__ */ a(
+  ), V = () => /* @__PURE__ */ a(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
@@ -133,7 +133,7 @@ function tn({
               title: "Search",
               "aria-label": "Search",
               className: e.search,
-              children: /* @__PURE__ */ a(Ge, { size: 16, "aria-hidden": "true" })
+              children: /* @__PURE__ */ a(je, { size: 16, "aria-hidden": "true" })
             }
           ),
           content: he
@@ -150,32 +150,32 @@ function tn({
           title: "Locale Select",
           "aria-label": "Locale Select",
           className: e.locale,
-          children: /* @__PURE__ */ a(Fe, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ a(Ue, { size: 16, "aria-hidden": "true" })
         }
       ),
       content: fe
     }
-  ) }) }), D = _(() => {
+  ) }) }), P = _(() => {
     y.current && ge(y.current.getBoundingClientRect().width);
   }, []), ie = () => {
     Q((n) => {
       const l = !n;
-      return l || (M([]), W("forward"), N(null)), l;
+      return l || (L([]), D("forward"), N(null)), l;
     });
-  }, te = _((n) => {
-    const l = q.current.get(n);
+  }, re = _((n) => {
+    const l = K.current.get(n);
     if (l && y.current) {
       const c = l.getBoundingClientRect(), r = y.current.getBoundingClientRect();
       Ce(c.left - r.left + c.width / 2);
     }
-  }, []), Ie = _((n) => {
+  }, []), Me = _((n) => {
     N((l) => l === n ? null : n);
-  }, []), V = _((n) => {
-    P.current && !P.current.contains(n.target) && N(null);
-  }, []), H = _(() => {
-    D(), typeof window < "u" && window.innerWidth > 768 && (Q(!1), N(null));
-  }, [D]), Le = () => M([]), Se = (n) => {
-    W("forward"), M([
+  }, []), H = _((n) => {
+    q.current && !q.current.contains(n.target) && N(null);
+  }, []), X = _(() => {
+    P(), typeof window < "u" && window.innerWidth > 768 && (Q(!1), N(null));
+  }, [P]), Ie = () => L([]), Se = (n) => {
+    D("forward"), L([
       {
         title: n.title,
         primary: n.primaryItems ?? [],
@@ -183,8 +183,8 @@ function tn({
         description: ""
       }
     ]);
-  }, re = (n) => {
-    W("forward"), M((l) => [
+  }, te = (n) => {
+    D("forward"), L((l) => [
       ...l,
       {
         title: n.label,
@@ -194,11 +194,11 @@ function tn({
       }
     ]);
   }, _e = () => {
-    W("backward"), M((n) => n.slice(0, -1));
+    D("backward"), L((n) => n.slice(0, -1));
   };
   z(() => {
     if (typeof window > "u") return;
-    const n = () => Me(window.innerWidth < 768);
+    const n = () => Le(window.innerWidth < 768);
     return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
   }, []), z(() => {
     if (typeof window > "u") return;
@@ -206,10 +206,10 @@ function tn({
     return n(), window.addEventListener("scroll", n, { passive: !0 }), () => window.removeEventListener("scroll", n);
   }, []), z(() => {
     const n = typeof window < "u", l = typeof document < "u";
-    return n && window.addEventListener("resize", H), l && document.addEventListener("click", V), D(), ye(!0), () => {
-      n && window.removeEventListener("resize", H), l && document.removeEventListener("click", V);
+    return n && window.addEventListener("resize", X), l && document.addEventListener("click", H), P(), ye(!0), () => {
+      n && window.removeEventListener("resize", X), l && document.removeEventListener("click", H);
     };
-  }, [H, V, D]), z(() => {
+  }, [X, H, P]), z(() => {
     if (!(typeof document > "u"))
       return f ? setTimeout(() => Be(), 0) : ue(), () => ue();
   }, [f]), z(() => {
@@ -232,46 +232,46 @@ function tn({
         y.current.querySelectorAll(
           'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])'
         )
-      ).filter((t) => !t.closest("[aria-hidden=true]"));
+      ).filter((s) => !s.closest("[aria-hidden=true]"));
       if (p.length === 0) return;
-      const b = p[0], L = p[p.length - 1];
-      r.shiftKey ? document.activeElement === b && (r.preventDefault(), L.focus()) : document.activeElement === L && (r.preventDefault(), b.focus());
+      const b = p[0], I = p[p.length - 1];
+      r.shiftKey ? document.activeElement === b && (r.preventDefault(), I.focus()) : document.activeElement === I && (r.preventDefault(), b.focus());
     };
     return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
   }, [f]);
   const U = (n, l = "") => n.map((c, r) => {
     const p = `${l}/${c._key ?? c.label}-${r}`;
     return /* @__PURE__ */ a(
-      Re,
+      xe,
       {
         link: c,
         path: p,
         parentPath: l,
         openPath: Z,
-        togglePath: Ie,
-        updateTriangleIndicator: te,
+        togglePath: Me,
+        updateTriangleIndicator: re,
         setOpenPath: N,
         renderLinks: U,
-        buttonRefs: q
+        buttonRefs: K
       },
       p
     );
   }), ze = (n) => n.map((l, c) => {
-    var L, S;
-    const r = `group-${c}`, p = Ee === c, b = (L = l.primaryItems) == null ? void 0 : L[B ?? 0];
+    var I, S;
+    const r = `group-${c}`, p = Ee === c, b = (I = l.primaryItems) == null ? void 0 : I[O ?? 0];
     return /* @__PURE__ */ i(
       "div",
       {
         className: `${e.linkWrapper} ${e.parent}`,
         onMouseEnter: () => {
-          ee(c), N(r), te(r);
+          ee(c), N(r), re(r);
         },
         children: [
           /* @__PURE__ */ a("div", { className: e.linkItem, children: /* @__PURE__ */ i(
             "button",
             {
-              ref: (t) => {
-                q.current.set(r, t);
+              ref: (s) => {
+                K.current.set(r, s);
               },
               "aria-haspopup": !0,
               "aria-expanded": p,
@@ -312,25 +312,25 @@ function tn({
                         children: [
                           /* @__PURE__ */ a("div", { className: e.linkItem }),
                           (S = l.primaryItems) == null ? void 0 : S.map(
-                            (t, E) => t.href ? /* @__PURE__ */ a("div", { role: "menuitem", children: /* @__PURE__ */ i(
+                            (s, E) => s.href ? /* @__PURE__ */ a("div", { role: "menuitem", children: /* @__PURE__ */ i(
                               "a",
                               {
-                                href: t.href,
-                                className: `${e.link} ${B === E ? e.open : ""}`,
-                                target: t.isExternal ? "_blank" : "_self",
-                                rel: t.isExternal ? "noopener noreferrer" : void 0,
+                                href: s.href,
+                                className: `${e.link} ${O === E ? e.open : ""}`,
+                                target: s.isExternal ? "_blank" : "_self",
+                                rel: s.isExternal ? "noopener noreferrer" : void 0,
                                 onClick: () => {
                                   var se;
-                                  N(null), (se = t.onClick) == null || se.call(t);
+                                  N(null), (se = s.onClick) == null || se.call(s);
                                 },
                                 onMouseEnter: () => G(E),
                                 children: [
                                   /* @__PURE__ */ i("span", { className: e.linkContent, children: [
-                                    t.label,
-                                    t.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: t.subtitle })
+                                    s.label,
+                                    s.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: s.subtitle })
                                   ] }),
-                                  t.isExternal && /* @__PURE__ */ a(
-                                    X,
+                                  s.isExternal && /* @__PURE__ */ a(
+                                    Y,
                                     {
                                       className: e.newTabIcon,
                                       size: 16,
@@ -339,17 +339,17 @@ function tn({
                                   )
                                 ]
                               }
-                            ) }, t._key ?? E) : /* @__PURE__ */ a("div", { role: "menuitem", children: /* @__PURE__ */ a(
+                            ) }, s._key ?? E) : /* @__PURE__ */ a("div", { role: "menuitem", children: /* @__PURE__ */ a(
                               "button",
                               {
-                                className: `${e.sublinkToggle} ${B === E ? e.open : ""}`,
+                                className: `${e.sublinkToggle} ${O === E ? e.open : ""}`,
                                 onMouseEnter: () => G(E),
                                 children: /* @__PURE__ */ i("span", { className: e.linkContent, children: [
-                                  t.label,
-                                  t.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: t.subtitle })
+                                  s.label,
+                                  s.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: s.subtitle })
                                 ] })
                               }
-                            ) }, t._key ?? E)
+                            ) }, s._key ?? E)
                           )
                         ]
                       }
@@ -359,10 +359,10 @@ function tn({
                       {
                         className: `${e.sublinksColumn} ${e.fadeInFromLeft}`,
                         children: [
-                          b.description && /* @__PURE__ */ a("div", { className: e.sublinksDescription, children: s == null ? void 0 : s(b.description) }),
+                          b.description && /* @__PURE__ */ a("div", { className: e.sublinksDescription, children: o == null ? void 0 : o(b.description) }),
                           U(
                             b.sublinks,
-                            `${r}-${B}`
+                            `${r}-${O}`
                           )
                         ]
                       },
@@ -383,7 +383,7 @@ function tn({
                           Ke,
                           {
                             spotlight: l.spotlight,
-                            renderText: s
+                            renderText: o
                           }
                         )
                       }
@@ -397,20 +397,20 @@ function tn({
       },
       l._key ?? `group-${c}`
     );
-  }), xe = [
+  }), Ae = [
     e.navbar,
     qe[j],
-    Pe[J],
-    x ? e.sticky : "",
+    Ge[J],
+    R ? e.sticky : "",
     // isScrolled ? styles.scrolled : "",
     m != null && m.length ? e.advanced : e.default,
     be ?? ""
-  ].filter(Boolean).join(" "), u = h && h.length > 0 ? h[Math.min(1, h.length - 1)] : null;
+  ].filter(Boolean).join(" "), t = h && h.length > 0 ? h[Math.min(1, h.length - 1)] : null;
   return /* @__PURE__ */ a(
     "header",
     {
-      ref: P,
-      className: xe,
+      ref: q,
+      className: Ae,
       style: pe,
       "aria-label": "Site header",
       ...ve,
@@ -419,7 +419,7 @@ function tn({
         {
           className: `${e.container} ${(!h || h.length === 0) && j !== "center" ? e.twoColumn : ""}`,
           children: [
-            o ? /* @__PURE__ */ a("div", { className: e.logo, children: o }) : k ? /* @__PURE__ */ a("div", { className: e.title, children: k }) : null,
+            d ? /* @__PURE__ */ a("div", { className: e.logo, children: d }) : k ? /* @__PURE__ */ a("div", { className: e.title, children: k }) : null,
             /* @__PURE__ */ a(
               "nav",
               {
@@ -453,7 +453,7 @@ function tn({
                       )
                     }
                   ),
-                  R === "default" && $ && /* @__PURE__ */ i("div", { className: e.grid, children: [
+                  B === "default" && $ && /* @__PURE__ */ i("div", { className: e.grid, children: [
                     $.length > 0 && /* @__PURE__ */ a("div", { role: "menubar", className: e.menubar, children: U($) }),
                     (g || w || C) && /* @__PURE__ */ i(ce, { children: [
                       /* @__PURE__ */ a("span", { className: e.separator, "aria-hidden": "true" }),
@@ -465,14 +465,14 @@ function tn({
                           className: e.toolbar,
                           children: [
                             C && /* @__PURE__ */ a(ae, {}),
-                            g && !I && /* @__PURE__ */ a(K, {}),
+                            g && !M && /* @__PURE__ */ a(V, {}),
                             w && /* @__PURE__ */ a(le, {})
                           ]
                         }
                       )
                     ] })
                   ] }),
-                  !I && R === "advanced" && m && /* @__PURE__ */ i("div", { className: e.grid, children: [
+                  !M && B === "advanced" && m && /* @__PURE__ */ i("div", { className: e.grid, children: [
                     m.length > 0 && /* @__PURE__ */ a("div", { role: "menubar", className: e.menubar, children: ze(m) }),
                     (g || w || C) && /* @__PURE__ */ i(ce, { children: [
                       /* @__PURE__ */ a("span", { className: e.separator, "aria-hidden": "true" }),
@@ -484,17 +484,17 @@ function tn({
                           className: e.toolbar,
                           children: [
                             C && /* @__PURE__ */ a(ae, {}),
-                            g && /* @__PURE__ */ a(K, {}),
+                            g && /* @__PURE__ */ a(V, {}),
                             w && /* @__PURE__ */ a(le, {})
                           ]
                         }
                       )
                     ] })
                   ] }),
-                  I && R === "advanced" && f && d.length === 0 && m && /* @__PURE__ */ a("div", { className: e.mobileMenu, children: m.map((n, l) => /* @__PURE__ */ a(
+                  M && B === "advanced" && f && u.length === 0 && m && /* @__PURE__ */ a("div", { className: e.mobileMenu, children: m.map((n, l) => /* @__PURE__ */ a(
                     "div",
                     {
-                      className: `${e.mobileMenuItem} ${O === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                      className: `${e.mobileMenuItem} ${W === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
                       children: /* @__PURE__ */ a(
                         "button",
                         {
@@ -506,7 +506,7 @@ function tn({
                     },
                     n._key ?? l
                   )) }),
-                  I && R === "advanced" && f && d.length > 0 && /* @__PURE__ */ i(
+                  M && B === "advanced" && f && u.length > 0 && /* @__PURE__ */ i(
                     "div",
                     {
                       className: e.mobileMenuSlide,
@@ -516,29 +516,29 @@ function tn({
                           {
                             className: e.back,
                             "aria-label": "Go back",
-                            onClick: d.length === 1 ? Le : _e,
+                            onClick: u.length === 1 ? Ie : _e,
                             children: /* @__PURE__ */ a(Oe, { size: 18, "aria-hidden": "true" })
                           }
                         ),
-                        d[d.length - 1].description && /* @__PURE__ */ a(
+                        u[u.length - 1].description && /* @__PURE__ */ a(
                           "div",
                           {
-                            className: `${e.sublinksDescription} ${O === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
-                            children: s == null ? void 0 : s(
-                              d[d.length - 1].description
+                            className: `${e.sublinksDescription} ${W === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                            children: o == null ? void 0 : o(
+                              u[u.length - 1].description
                             )
                           }
                         ),
-                        d[d.length - 1].primary.map((n, l) => /* @__PURE__ */ a(
+                        u[u.length - 1].primary.map((n, l) => /* @__PURE__ */ a(
                           "div",
                           {
                             role: "menuitem",
-                            className: `${e.mobileMenuItem} ${O === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                            className: `${e.mobileMenuItem} ${W === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
                             children: n.sublinks ? /* @__PURE__ */ a(
                               "button",
                               {
                                 className: e.sublinkToggle,
-                                onClick: () => re(n),
+                                onClick: () => te(n),
                                 children: /* @__PURE__ */ i("span", { className: e.linkContent, children: [
                                   n.label,
                                   n.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: n.subtitle })
@@ -557,7 +557,7 @@ function tn({
                                     n.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: n.subtitle })
                                   ] }),
                                   n.isExternal && /* @__PURE__ */ a(
-                                    X,
+                                    Y,
                                     {
                                       className: e.newTabIcon,
                                       size: 16,
@@ -570,18 +570,18 @@ function tn({
                           },
                           n._key ?? `primary-${l}`
                         )),
-                        d[d.length - 1].secondary.length > 0 && /* @__PURE__ */ a("hr", { className: e.groupDivider }),
-                        d[d.length - 1].secondary.map(
+                        u[u.length - 1].secondary.length > 0 && /* @__PURE__ */ a("hr", { className: e.groupDivider }),
+                        u[u.length - 1].secondary.map(
                           (n, l) => /* @__PURE__ */ a(
                             "div",
                             {
                               role: "menuitem",
-                              className: `${e.mobileMenuItem} ${O === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                              className: `${e.mobileMenuItem} ${W === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
                               children: n.sublinks ? /* @__PURE__ */ a(
                                 "button",
                                 {
                                   className: e.sublinkToggle,
-                                  onClick: () => re(n),
+                                  onClick: () => te(n),
                                   children: n.label
                                 }
                               ) : /* @__PURE__ */ i(
@@ -594,7 +594,7 @@ function tn({
                                   children: [
                                     n.label,
                                     n.isExternal && /* @__PURE__ */ a(
-                                      X,
+                                      Y,
                                       {
                                         className: e.newTabIcon,
                                         size: 16,
@@ -610,7 +610,7 @@ function tn({
                         )
                       ]
                     },
-                    `stack-${d.length}`
+                    `stack-${u.length}`
                   )
                 ] })
               }
@@ -621,63 +621,92 @@ function tn({
                 className: e.utility,
                 "data-scrolled": T,
                 "aria-label": "Utility navigation",
-                children: /* @__PURE__ */ a(de, { spacing: "sm", children: h.map((n, l) => /* @__PURE__ */ a(
-                  Y,
-                  {
-                    as: "a",
-                    size: "sm",
-                    href: n.href ?? "/",
-                    variant: n.variant ?? "primary",
-                    displayType: n.displayType ?? "text",
-                    imageSrc: n.imageSrc,
-                    imageAlt: n.imageAlt,
-                    "aria-label": n.ariaLabel,
-                    icon: n.icon,
-                    iconAlignment: n.iconAlignment,
-                    className: J == "transparent" && n.variant === "link" && T ? e.utilityScrolled : e.utilityDefault,
-                    children: n.imageSrc ? /* @__PURE__ */ a(
-                      "img",
-                      {
-                        src: n.imageSrc,
-                        alt: n.imageAlt ?? n.ariaLabel
-                      }
-                    ) : n.label
-                  },
-                  n._key ?? l
-                )) })
+                children: /* @__PURE__ */ a(de, { spacing: "sm", children: h.map((n, l) => {
+                  const c = J == "transparent" && n.variant === "link" && T ? e.utilityScrolled : e.utilityDefault, r = n.imageSrc ? /* @__PURE__ */ a(
+                    "img",
+                    {
+                      src: n.imageSrc,
+                      alt: n.imageAlt ?? n.ariaLabel
+                    }
+                  ) : n.label;
+                  return n.modalPayload ? /* @__PURE__ */ a(
+                    A,
+                    {
+                      as: "modal",
+                      size: "sm",
+                      modalPayload: n.modalPayload,
+                      variant: n.variant ?? "primary",
+                      "aria-label": n.ariaLabel,
+                      icon: n.icon,
+                      iconAlignment: n.iconAlignment,
+                      className: c,
+                      children: r
+                    },
+                    n._key ?? l
+                  ) : /* @__PURE__ */ a(
+                    A,
+                    {
+                      as: "a",
+                      size: "sm",
+                      href: n.href ?? "/",
+                      variant: n.variant ?? "primary",
+                      displayType: n.displayType ?? "text",
+                      imageSrc: n.imageSrc,
+                      imageAlt: n.imageAlt,
+                      "aria-label": n.ariaLabel,
+                      icon: n.icon,
+                      iconAlignment: n.iconAlignment,
+                      className: c,
+                      children: r
+                    },
+                    n._key ?? l
+                  );
+                }) })
               }
             ),
-            u && /* @__PURE__ */ a(
+            t && /* @__PURE__ */ a(
               "nav",
               {
                 "aria-label": "Utility navigation",
                 className: `${e.utilityMobile} ${f ? e.open : ""}`,
-                children: /* @__PURE__ */ a(de, { alignment: "center", children: /* @__PURE__ */ a(
-                  Y,
+                children: /* @__PURE__ */ a(de, { alignment: "center", children: t.modalPayload ? /* @__PURE__ */ a(
+                  A,
+                  {
+                    as: "modal",
+                    size: "sm",
+                    modalPayload: t.modalPayload,
+                    variant: t.variant ?? "primary",
+                    "aria-label": t.ariaLabel,
+                    icon: t.icon,
+                    iconAlignment: t.iconAlignment,
+                    children: t.label
+                  }
+                ) : /* @__PURE__ */ a(
+                  A,
                   {
                     as: "a",
                     size: "sm",
-                    href: u.href ?? "/",
-                    variant: u.variant ?? "primary",
-                    displayType: u.displayType ?? "text",
-                    imageSrc: u.imageSrc,
-                    imageAlt: u.imageAlt,
-                    "aria-label": u.ariaLabel,
-                    icon: u.icon,
-                    iconAlignment: u.iconAlignment,
-                    children: u.imageSrc ? /* @__PURE__ */ a(
+                    href: t.href ?? "/",
+                    variant: t.variant ?? "primary",
+                    displayType: t.displayType ?? "text",
+                    imageSrc: t.imageSrc,
+                    imageAlt: t.imageAlt,
+                    "aria-label": t.ariaLabel,
+                    icon: t.icon,
+                    iconAlignment: t.iconAlignment,
+                    children: t.imageSrc ? /* @__PURE__ */ a(
                       "img",
                       {
-                        src: u.imageSrc,
-                        alt: u.imageAlt ?? u.ariaLabel
+                        src: t.imageSrc,
+                        alt: t.imageAlt ?? t.ariaLabel
                       }
-                    ) : u.label
+                    ) : t.label
                   }
                 ) })
               }
             ),
             /* @__PURE__ */ i("div", { className: e.mobileButtons, children: [
-              I && g && /* @__PURE__ */ a(K, {}),
+              M && g && /* @__PURE__ */ a(V, {}),
               /* @__PURE__ */ a(
                 "button",
                 {
@@ -687,7 +716,7 @@ function tn({
                   "aria-label": f ? "Close menu" : "Open menu",
                   "aria-expanded": f,
                   "aria-controls": "main-menu",
-                  children: f ? /* @__PURE__ */ a(We, { size: 24, "aria-hidden": "true" }) : /* @__PURE__ */ a(Ae, { size: 24, "aria-hidden": "true" })
+                  children: f ? /* @__PURE__ */ a(We, { size: 24, "aria-hidden": "true" }) : /* @__PURE__ */ a(Re, { size: 24, "aria-hidden": "true" })
                 }
               )
             ] })
@@ -698,5 +727,5 @@ function tn({
   );
 }
 export {
-  tn as Navbar
+  rn as Navbar
 };