quirk-ui 0.1.112 → 0.1.113

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

@@ -1,22 +1,22 @@
-import { jsx as n, jsxs as i, Fragment as re } from "react/jsx-runtime";
-import { useState as v, useRef as U, useCallback as _, useEffect as F } from "react";
-import { Modal as se } from "../Modal/index.mjs";
-import { B as J, M as ze } from "../../../index-CnlJ2RgH.js";
-import { ButtonGroup as ce } from "../ButtonGroup/index.mjs";
-import { s as e, N as xe } from "../../../NavLink-C7jlTfri.js";
-import { lockScroll as Ae, unlockScroll as oe } from "../../utils/NoScroll/noScroll.mjs";
-import { C as Re } from "../../../chevron-right-Cim1KPuL.js";
-import { E as X } from "../../../external-link-BOPobeQJ.js";
-import { X as Be } from "../../../x-CnsEH4Ox.js";
-import { c as de } from "../../../createLucideIcon-C8GTh_Qx.js";
-import { C as Oe } from "../../../chevron-down-DSUzBz9F.js";
+import { jsx as a, jsxs as i, Fragment as se } from "react/jsx-runtime";
+import { useState as v, useRef as F, useCallback as _, useEffect as z } from "react";
+import { Modal as ce } from "../Modal/index.mjs";
+import { B as J, M as Ae } from "../../../index-CnlJ2RgH.js";
+import { ButtonGroup as oe } from "../ButtonGroup/index.mjs";
+import { s as e, N as Re } from "../../../NavLink-CaWX-AXn.js";
+import { lockScroll as Be, unlockScroll as de } from "../../utils/NoScroll/noScroll.mjs";
+import { C as Oe } from "../../../chevron-right-Cim1KPuL.js";
+import { E as Y } from "../../../external-link-BOPobeQJ.js";
+import { X as We } from "../../../x-CnsEH4Ox.js";
+import { c as ue } from "../../../createLucideIcon-C8GTh_Qx.js";
+import { C as De } from "../../../chevron-down-DSUzBz9F.js";
 /**
  * @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 We = [
+const Ue = [
   ["path", { d: "M21.54 15H17a2 2 0 0 0-2 2v4.54", key: "1djwo0" }],
   [
     "path",
@@ -27,47 +27,47 @@ const We = [
   ],
   ["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" }]
-], De = de("earth", We);
+], Fe = ue("earth", Ue);
 /**
  * @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 Ue = [
+const je = [
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
-], Fe = de("search", Ue), je = {
+], Ge = ue("search", je), Pe = {
   standard: e.standard,
   transparent: e.transparent
-}, Ge = {
+}, qe = {
   left: e.left,
   center: e.center,
   right: e.right
-}, Pe = ({
+}, Ke = ({
   spotlight: s,
   renderText: k
 }) => {
-  var h, z, g, w, C, x;
+  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";
   let m = "#";
-  return $ && ((z = o.linkOptions) != null && z.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__ */ n("div", { className: e.imageWrapper, children: /* @__PURE__ */ n(
+  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(
       "img",
       {
-        src: ((x = s.image.imageUrls) == null ? void 0 : x.medium) ?? "",
+        src: ((A = s.image.imageUrls) == null ? void 0 : A.medium) ?? "",
         alt: s.image.asset.altText || s.image.asset.description || "Content image",
         width: 600,
         height: 400
       }
     ) }),
     /* @__PURE__ */ i("div", { className: e.content, children: [
-      s.title && /* @__PURE__ */ n("div", { className: e.title, children: k == null ? void 0 : k(s.title, e.title) }),
-      s.description && /* @__PURE__ */ n("div", { className: e.description, children: k == null ? void 0 : k(s.description, e.description) })
+      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.linkOptions && /* @__PURE__ */ n("div", { className: e.actions, children: /* @__PURE__ */ n(
+    o.linkOptions && /* @__PURE__ */ a("div", { className: e.actions, children: /* @__PURE__ */ a(
       J,
       {
         as: "a",
@@ -81,193 +81,197 @@ const Ue = [
     ) })
   ] });
 };
-function an({
+function rn({
   renderText: s,
   title: k,
   logo: o,
   items: $,
   groups: m,
   utilityItems: h,
-  isSticky: z = !1,
+  isSticky: x = !1,
   showSearch: g = !0,
   showLocaleSelect: w = !0,
   showThemeToggle: C = !0,
-  themeToggleComponent: x,
+  themeToggleComponent: A,
   alignment: j = "right",
-  variant: ue = "standard",
-  navigationType: A = "default",
-  searchComponent: me,
-  localeSelectComponent: he,
-  className: fe,
-  style: be,
-  ...pe
+  variant: me = "standard",
+  navigationType: R = "default",
+  searchComponent: he,
+  localeSelectComponent: fe,
+  className: be,
+  style: pe,
+  ...ve
 }) {
-  const [f, Q] = v(!1), [Y, N] = v(null), [ve, ke] = v(0), [ge, Ne] = v(!1), [ye, $e] = v(null), [d, E] = v([]), [R, G] = v(
+  const [f, Q] = v(!1), [Z, N] = v(null), [ke, ge] = v(0), [Ne, ye] = v(!1), [G, $e] = v(!1), [we, Ce] = v(null), [d, M] = v([]), [B, P] = v(
     0
-  ), [we, Z] = v(null), [I, Ce] = v(!1), [B, O] = v("forward"), P = U(null), y = U(null), T = U(null), q = U(/* @__PURE__ */ new Map()), ee = () => /* @__PURE__ */ n(
+  ), [Ee, T] = v(null), [I, Me] = v(!1), [O, W] = v("forward"), q = F(null), y = F(null), ee = F(null), K = F(/* @__PURE__ */ new Map()), ne = () => /* @__PURE__ */ a(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent}`,
       role: "presentation",
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ a(
         "div",
         {
           className: `${e.linkItem} ${e.themeToggle}`,
           role: "presentation",
-          children: x
+          children: A
         }
       )
     }
-  ), K = () => /* @__PURE__ */ n(
+  ), V = () => /* @__PURE__ */ a(
     "div",
     {
       className: `${e.linkWrapper} ${e.parent} ${e.searchWrapper}`,
-      children: /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ n(
-        se,
+      children: /* @__PURE__ */ a("div", { className: e.linkItem, children: /* @__PURE__ */ a(
+        ce,
         {
           size: "lg",
           className: e.searchModal,
-          trigger: /* @__PURE__ */ n(
+          trigger: /* @__PURE__ */ a(
             "button",
             {
               title: "Search",
               "aria-label": "Search",
               className: e.search,
-              children: /* @__PURE__ */ n(Fe, { size: 16, "aria-hidden": "true" })
+              children: /* @__PURE__ */ a(Ge, { size: 16, "aria-hidden": "true" })
             }
           ),
-          content: me
+          content: he
         }
       ) })
     }
-  ), ne = () => /* @__PURE__ */ n("div", { className: `${e.linkWrapper} ${e.parent}`, children: /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ n(
-    se,
+  ), ae = () => /* @__PURE__ */ a("div", { className: `${e.linkWrapper} ${e.parent}`, children: /* @__PURE__ */ a("div", { className: e.linkItem, children: /* @__PURE__ */ a(
+    ce,
     {
       className: e.localeModal,
-      trigger: /* @__PURE__ */ n(
+      trigger: /* @__PURE__ */ a(
         "button",
         {
           title: "Locale Select",
           "aria-label": "Locale Select",
           className: e.locale,
-          children: /* @__PURE__ */ n(De, { size: 16, "aria-hidden": "true" })
+          children: /* @__PURE__ */ a(Fe, { size: 16, "aria-hidden": "true" })
         }
       ),
-      content: he
+      content: fe
     }
-  ) }) }), W = _(() => {
-    y.current && ke(y.current.getBoundingClientRect().width);
-  }, []), ae = () => {
-    Q((a) => {
-      const l = !a;
-      return l || (E([]), O("forward"), N(null)), l;
+  ) }) }), D = _(() => {
+    y.current && ge(y.current.getBoundingClientRect().width);
+  }, []), le = () => {
+    Q((n) => {
+      const l = !n;
+      return l || (M([]), W("forward"), N(null)), l;
     });
-  }, le = _((a) => {
-    const l = q.current.get(a);
+  }, ie = _((n) => {
+    const l = K.current.get(n);
     if (l && y.current) {
-      const c = l.getBoundingClientRect(), r = y.current.getBoundingClientRect();
-      $e(c.left - r.left + c.width / 2);
+      const c = l.getBoundingClientRect(), t = y.current.getBoundingClientRect();
+      Ce(c.left - t.left + c.width / 2);
     }
-  }, []), Me = _((a) => {
-    N((l) => l === a ? null : a);
-  }, []), V = _((a) => {
-    P.current && !P.current.contains(a.target) && N(null);
-  }, []), H = _(() => {
-    W(), typeof window < "u" && window.innerWidth > 768 && (Q(!1), N(null));
-  }, [W]), Ee = () => E([]), Ie = (a) => {
-    O("forward"), E([
+  }, []), Ie = _((n) => {
+    N((l) => l === n ? null : n);
+  }, []), H = _((n) => {
+    q.current && !q.current.contains(n.target) && N(null);
+  }, []), X = _(() => {
+    D(), typeof window < "u" && window.innerWidth > 768 && (Q(!1), N(null));
+  }, [D]), Le = () => M([]), Se = (n) => {
+    W("forward"), M([
       {
-        title: a.title,
-        primary: a.primaryItems ?? [],
-        secondary: a.secondaryItems ?? [],
+        title: n.title,
+        primary: n.primaryItems ?? [],
+        secondary: n.secondaryItems ?? [],
         description: ""
       }
     ]);
-  }, ie = (a) => {
-    O("forward"), E((l) => [
+  }, re = (n) => {
+    W("forward"), M((l) => [
       ...l,
       {
-        title: a.label,
-        primary: a.sublinks ?? [],
+        title: n.label,
+        primary: n.sublinks ?? [],
         secondary: [],
-        description: a.description
+        description: n.description
       }
     ]);
-  }, Le = () => {
-    O("backward"), E((a) => a.slice(0, -1));
+  }, _e = () => {
+    W("backward"), M((n) => n.slice(0, -1));
   };
-  F(() => {
+  z(() => {
     if (typeof window > "u") return;
-    const a = () => Ce(window.innerWidth < 768);
-    return a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
-  }, []), F(() => {
-    const a = typeof window < "u", l = typeof document < "u";
-    return a && window.addEventListener("resize", H), l && document.addEventListener("click", V), W(), Ne(!0), () => {
-      a && window.removeEventListener("resize", H), l && document.removeEventListener("click", V);
+    const n = () => Me(window.innerWidth < 768);
+    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, []), z(() => {
+    if (typeof window > "u") return;
+    const n = () => $e(window.scrollY > 10);
+    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", X), l && document.addEventListener("click", H), D(), ye(!0), () => {
+      n && window.removeEventListener("resize", X), l && document.removeEventListener("click", H);
     };
-  }, [H, V, W]), F(() => {
+  }, [X, H, D]), z(() => {
     if (!(typeof document > "u"))
-      return f ? setTimeout(() => Ae(), 0) : oe(), () => oe();
-  }, [f]), F(() => {
+      return f ? setTimeout(() => Be(), 0) : de(), () => de();
+  }, [f]), z(() => {
     var c;
     if (!f) return;
     if (typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(pointer: fine)").matches) {
-      const r = (c = y.current) == null ? void 0 : c.querySelector(
+      const t = (c = y.current) == null ? void 0 : c.querySelector(
         'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])'
       );
-      r == null || r.focus();
+      t == null || t.focus();
     }
-    const l = (r) => {
+    const l = (t) => {
       var S;
-      if (r.key === "Escape") {
-        ae(), (S = T.current) == null || S.focus();
+      if (t.key === "Escape") {
+        le(), (S = ee.current) == null || S.focus();
         return;
       }
-      if (r.key !== "Tab" || !y.current) return;
+      if (t.key !== "Tab" || !y.current) return;
       const p = Array.from(
         y.current.querySelectorAll(
           'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])'
         )
-      ).filter((t) => !t.closest("[aria-hidden=true]"));
+      ).filter((r) => !r.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());
+      t.shiftKey ? document.activeElement === b && (t.preventDefault(), L.focus()) : document.activeElement === L && (t.preventDefault(), b.focus());
     };
     return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
   }, [f]);
-  const D = (a, l = "") => a.map((c, r) => {
-    const p = `${l}/${c._key ?? c.label}-${r}`;
-    return /* @__PURE__ */ n(
-      xe,
+  const U = (n, l = "") => n.map((c, t) => {
+    const p = `${l}/${c._key ?? c.label}-${t}`;
+    return /* @__PURE__ */ a(
+      Re,
       {
         link: c,
         path: p,
         parentPath: l,
-        openPath: Y,
-        togglePath: Me,
-        updateTriangleIndicator: le,
+        openPath: Z,
+        togglePath: Ie,
+        updateTriangleIndicator: ie,
         setOpenPath: N,
-        renderLinks: D,
-        buttonRefs: q
+        renderLinks: U,
+        buttonRefs: K
       },
       p
     );
-  }), Se = (a) => a.map((l, c) => {
+  }), ze = (n) => n.map((l, c) => {
     var L, S;
-    const r = `group-${c}`, p = we === c, b = (L = l.primaryItems) == null ? void 0 : L[R ?? 0];
+    const t = `group-${c}`, p = Ee === c, b = (L = l.primaryItems) == null ? void 0 : L[B ?? 0];
     return /* @__PURE__ */ i(
       "div",
       {
         className: `${e.linkWrapper} ${e.parent}`,
         onMouseEnter: () => {
-          Z(c), N(r), le(r);
+          T(c), N(t), ie(t);
         },
         children: [
-          /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ i(
+          /* @__PURE__ */ a("div", { className: e.linkItem, children: /* @__PURE__ */ i(
             "button",
             {
-              ref: (t) => {
-                q.current.set(r, t);
+              ref: (r) => {
+                K.current.set(t, r);
               },
               "aria-haspopup": !0,
               "aria-expanded": p,
@@ -275,8 +279,8 @@ function an({
               className: `${e.sublinkToggle} ${p ? e.open : ""}`,
               children: [
                 l.title,
-                /* @__PURE__ */ n(
-                  Oe,
+                /* @__PURE__ */ a(
+                  De,
                   {
                     size: 18,
                     className: e.chevron,
@@ -286,7 +290,7 @@ function an({
               ]
             }
           ) }),
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ a(
             "div",
             {
               id: `submenu-${c}`,
@@ -294,9 +298,9 @@ function an({
               role: "menu",
               "aria-label": `${l.title} submenu`,
               onMouseLeave: () => {
-                Z(null), G(0), N(null);
+                T(null), P(0), N(null);
               },
-              children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ i(
+              children: /* @__PURE__ */ a("div", { children: /* @__PURE__ */ i(
                 "div",
                 {
                   className: `${e.sublinksInner} ${l.spotlight ? e.withSpotlight : e.withoutSpotlight}`,
@@ -306,27 +310,27 @@ function an({
                       {
                         className: `${e.sublinksColumn} ${e.primaryColumn}`,
                         children: [
-                          /* @__PURE__ */ n("div", { className: e.linkItem }),
+                          /* @__PURE__ */ a("div", { className: e.linkItem }),
                           (S = l.primaryItems) == null ? void 0 : S.map(
-                            (t, M) => t.href ? /* @__PURE__ */ n("div", { role: "menuitem", children: /* @__PURE__ */ i(
+                            (r, E) => r.href ? /* @__PURE__ */ a("div", { role: "menuitem", children: /* @__PURE__ */ i(
                               "a",
                               {
-                                href: t.href,
-                                className: `${e.link} ${R === M ? e.open : ""}`,
-                                target: t.isExternal ? "_blank" : "_self",
-                                rel: t.isExternal ? "noopener noreferrer" : void 0,
+                                href: r.href,
+                                className: `${e.link} ${B === E ? e.open : ""}`,
+                                target: r.isExternal ? "_blank" : "_self",
+                                rel: r.isExternal ? "noopener noreferrer" : void 0,
                                 onClick: () => {
                                   var te;
-                                  N(null), (te = t.onClick) == null || te.call(t);
+                                  N(null), (te = r.onClick) == null || te.call(r);
                                 },
-                                onMouseEnter: () => G(M),
+                                onMouseEnter: () => P(E),
                                 children: [
                                   /* @__PURE__ */ i("span", { className: e.linkContent, children: [
-                                    t.label,
-                                    t.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: t.subtitle })
+                                    r.label,
+                                    r.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: r.subtitle })
                                   ] }),
-                                  t.isExternal && /* @__PURE__ */ n(
-                                    X,
+                                  r.isExternal && /* @__PURE__ */ a(
+                                    Y,
                                     {
                                       className: e.newTabIcon,
                                       size: 16,
@@ -335,17 +339,17 @@ function an({
                                   )
                                 ]
                               }
-                            ) }, t._key ?? M) : /* @__PURE__ */ n("div", { role: "menuitem", children: /* @__PURE__ */ n(
+                            ) }, r._key ?? E) : /* @__PURE__ */ a("div", { role: "menuitem", children: /* @__PURE__ */ a(
                               "button",
                               {
-                                className: `${e.sublinkToggle} ${R === M ? e.open : ""}`,
-                                onMouseEnter: () => G(M),
+                                className: `${e.sublinkToggle} ${B === E ? e.open : ""}`,
+                                onMouseEnter: () => P(E),
                                 children: /* @__PURE__ */ i("span", { className: e.linkContent, children: [
-                                  t.label,
-                                  t.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: t.subtitle })
+                                  r.label,
+                                  r.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: r.subtitle })
                                 ] })
                               }
-                            ) }, t._key ?? M)
+                            ) }, r._key ?? E)
                           )
                         ]
                       }
@@ -355,28 +359,28 @@ function an({
                       {
                         className: `${e.sublinksColumn} ${e.fadeInFromLeft}`,
                         children: [
-                          b.description && /* @__PURE__ */ n("div", { className: e.sublinksDescription, children: s == null ? void 0 : s(b.description) }),
-                          D(
+                          b.description && /* @__PURE__ */ a("div", { className: e.sublinksDescription, children: s == null ? void 0 : s(b.description) }),
+                          U(
                             b.sublinks,
-                            `${r}-${R}`
+                            `${t}-${B}`
                           )
                         ]
                       },
                       `${b.label}-${b.sublinks.length}`
                     ),
-                    l.secondaryItems && l.secondaryItems.length > 0 && /* @__PURE__ */ n(
+                    l.secondaryItems && l.secondaryItems.length > 0 && /* @__PURE__ */ a(
                       "div",
                       {
                         className: `${e.sublinksColumn} ${e.secondaryColumn}`,
-                        children: D(l.secondaryItems, `${r}-secondary`)
+                        children: U(l.secondaryItems, `${t}-secondary`)
                       }
                     ),
-                    l.spotlight && /* @__PURE__ */ n(
+                    l.spotlight && /* @__PURE__ */ a(
                       "div",
                       {
                         className: `${e.sublinksColumn} ${e.spotlightColumn}`,
-                        children: /* @__PURE__ */ n(
-                          Pe,
+                        children: /* @__PURE__ */ a(
+                          Ke,
                           {
                             spotlight: l.spotlight,
                             renderText: s
@@ -393,51 +397,52 @@ function an({
       },
       l._key ?? `group-${c}`
     );
-  }), _e = [
+  }), xe = [
     e.navbar,
-    Ge[j],
-    je[ue],
-    z ? e.sticky : "",
+    qe[j],
+    Pe[me],
+    x ? e.sticky : "",
+    G ? e.scrolled : "",
     m != null && m.length ? e.advanced : e.default,
-    fe ?? ""
+    be ?? ""
   ].filter(Boolean).join(" "), u = h && h.length > 0 ? h[Math.min(1, h.length - 1)] : null;
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(
     "header",
     {
-      ref: P,
-      className: _e,
-      style: be,
+      ref: q,
+      className: xe,
+      style: pe,
       "aria-label": "Site header",
-      ...pe,
+      ...ve,
       children: /* @__PURE__ */ i(
         "div",
         {
           className: `${e.container} ${(!h || h.length === 0) && j !== "center" ? e.twoColumn : ""}`,
           children: [
-            o ? /* @__PURE__ */ n("div", { className: e.logo, children: o }) : k ? /* @__PURE__ */ n("div", { className: e.title, children: k }) : null,
-            /* @__PURE__ */ n(
+            o ? /* @__PURE__ */ a("div", { className: e.logo, children: o }) : k ? /* @__PURE__ */ a("div", { className: e.title, children: k }) : null,
+            /* @__PURE__ */ a(
               "nav",
               {
                 ref: y,
                 style: {
-                  left: j === "center" ? `calc(50% - ${ve / 2}px)` : "0"
+                  left: j === "center" ? `calc(50% - ${ke / 2}px)` : "0"
                 },
                 "aria-modal": f ? "true" : void 0,
-                className: `${e.nav} ${f ? e.open : ""} ${ge ? e.visible : e.hidden}`,
+                className: `${e.nav} ${f ? e.open : ""} ${Ne ? e.visible : e.hidden}`,
                 id: "main-menu",
                 "aria-label": "Primary navigation",
                 children: /* @__PURE__ */ i("div", { className: e.navInner, children: [
-                  /* @__PURE__ */ n(
+                  /* @__PURE__ */ a(
                     "svg",
                     {
-                      style: { left: `${ye}px` },
-                      className: `${e.triangle} ${Y ? e.show : ""}`,
+                      style: { left: `${we}px` },
+                      className: `${e.triangle} ${Z ? e.show : ""}`,
                       width: 16,
                       height: 12,
                       viewBox: "0 0 100 75",
                       xmlns: "http://www.w3.org/2000/svg",
                       "aria-hidden": "true",
-                      children: /* @__PURE__ */ n(
+                      children: /* @__PURE__ */ a(
                         "polygon",
                         {
                           points: "50,5 95,70 5,70",
@@ -448,10 +453,10 @@ function an({
                       )
                     }
                   ),
-                  A === "default" && $ && /* @__PURE__ */ i("div", { className: e.grid, children: [
-                    $.length > 0 && /* @__PURE__ */ n("div", { role: "menubar", className: e.menubar, children: D($) }),
-                    (g || w || C) && /* @__PURE__ */ i(re, { children: [
-                      /* @__PURE__ */ n("span", { className: e.separator, "aria-hidden": "true" }),
+                  R === "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(se, { children: [
+                      /* @__PURE__ */ a("span", { className: e.separator, "aria-hidden": "true" }),
                       /* @__PURE__ */ i(
                         "div",
                         {
@@ -459,18 +464,18 @@ function an({
                           "aria-label": "Site controls",
                           className: e.toolbar,
                           children: [
-                            C && /* @__PURE__ */ n(ee, {}),
-                            g && !I && /* @__PURE__ */ n(K, {}),
-                            w && /* @__PURE__ */ n(ne, {})
+                            C && /* @__PURE__ */ a(ne, {}),
+                            g && !I && /* @__PURE__ */ a(V, {}),
+                            w && /* @__PURE__ */ a(ae, {})
                           ]
                         }
                       )
                     ] })
                   ] }),
-                  !I && A === "advanced" && m && /* @__PURE__ */ i("div", { className: e.grid, children: [
-                    m.length > 0 && /* @__PURE__ */ n("div", { role: "menubar", className: e.menubar, children: Se(m) }),
-                    (g || w || C) && /* @__PURE__ */ i(re, { children: [
-                      /* @__PURE__ */ n("span", { className: e.separator, "aria-hidden": "true" }),
+                  !I && R === "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(se, { children: [
+                      /* @__PURE__ */ a("span", { className: e.separator, "aria-hidden": "true" }),
                       /* @__PURE__ */ i(
                         "div",
                         {
@@ -478,81 +483,81 @@ function an({
                           "aria-label": "Site controls",
                           className: e.toolbar,
                           children: [
-                            C && /* @__PURE__ */ n(ee, {}),
-                            g && /* @__PURE__ */ n(K, {}),
-                            w && /* @__PURE__ */ n(ne, {})
+                            C && /* @__PURE__ */ a(ne, {}),
+                            g && /* @__PURE__ */ a(V, {}),
+                            w && /* @__PURE__ */ a(ae, {})
                           ]
                         }
                       )
                     ] })
                   ] }),
-                  I && A === "advanced" && f && d.length === 0 && m && /* @__PURE__ */ n("div", { className: e.mobileMenu, children: m.map((a, l) => /* @__PURE__ */ n(
+                  I && R === "advanced" && f && d.length === 0 && m && /* @__PURE__ */ a("div", { className: e.mobileMenu, children: m.map((n, l) => /* @__PURE__ */ a(
                     "div",
                     {
-                      className: `${e.mobileMenuItem} ${B === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
-                      children: /* @__PURE__ */ n(
+                      className: `${e.mobileMenuItem} ${O === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                      children: /* @__PURE__ */ a(
                         "button",
                         {
                           className: e.sublinkToggle,
-                          onClick: () => Ie(a),
-                          children: a.title
+                          onClick: () => Se(n),
+                          children: n.title
                         }
                       )
                     },
-                    a._key ?? l
+                    n._key ?? l
                   )) }),
-                  I && A === "advanced" && f && d.length > 0 && /* @__PURE__ */ i(
+                  I && R === "advanced" && f && d.length > 0 && /* @__PURE__ */ i(
                     "div",
                     {
                       className: e.mobileMenuSlide,
                       children: [
-                        /* @__PURE__ */ n(
+                        /* @__PURE__ */ a(
                           "button",
                           {
                             className: e.back,
                             "aria-label": "Go back",
-                            onClick: d.length === 1 ? Ee : Le,
-                            children: /* @__PURE__ */ n(Re, { size: 18, "aria-hidden": "true" })
+                            onClick: d.length === 1 ? Le : _e,
+                            children: /* @__PURE__ */ a(Oe, { size: 18, "aria-hidden": "true" })
                           }
                         ),
-                        d[d.length - 1].description && /* @__PURE__ */ n(
+                        d[d.length - 1].description && /* @__PURE__ */ a(
                           "div",
                           {
-                            className: `${e.sublinksDescription} ${B === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                            className: `${e.sublinksDescription} ${O === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
                             children: s == null ? void 0 : s(
                               d[d.length - 1].description
                             )
                           }
                         ),
-                        d[d.length - 1].primary.map((a, l) => /* @__PURE__ */ n(
+                        d[d.length - 1].primary.map((n, l) => /* @__PURE__ */ a(
                           "div",
                           {
                             role: "menuitem",
-                            className: `${e.mobileMenuItem} ${B === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
-                            children: a.sublinks ? /* @__PURE__ */ n(
+                            className: `${e.mobileMenuItem} ${O === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                            children: n.sublinks ? /* @__PURE__ */ a(
                               "button",
                               {
                                 className: e.sublinkToggle,
-                                onClick: () => ie(a),
+                                onClick: () => re(n),
                                 children: /* @__PURE__ */ i("span", { className: e.linkContent, children: [
-                                  a.label,
-                                  a.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: a.subtitle })
+                                  n.label,
+                                  n.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: n.subtitle })
                                 ] })
                               }
                             ) : /* @__PURE__ */ i(
                               "a",
                               {
-                                href: a.href,
+                                href: n.href,
                                 className: e.link,
-                                target: a.isExternal ? "_blank" : "_self",
-                                rel: a.isExternal ? "noopener noreferrer" : void 0,
+                                target: n.isExternal ? "_blank" : "_self",
+                                rel: n.isExternal ? "noopener noreferrer" : void 0,
                                 children: [
                                   /* @__PURE__ */ i("span", { className: e.linkContent, children: [
-                                    a.label,
-                                    a.subtitle && /* @__PURE__ */ n("span", { className: e.subtitle, children: a.subtitle })
+                                    n.label,
+                                    n.subtitle && /* @__PURE__ */ a("span", { className: e.subtitle, children: n.subtitle })
                                   ] }),
-                                  a.isExternal && /* @__PURE__ */ n(
-                                    X,
+                                  n.isExternal && /* @__PURE__ */ a(
+                                    Y,
                                     {
                                       className: e.newTabIcon,
                                       size: 16,
@@ -563,33 +568,33 @@ function an({
                               }
                             )
                           },
-                          a._key ?? `primary-${l}`
+                          n._key ?? `primary-${l}`
                         )),
-                        d[d.length - 1].secondary.length > 0 && /* @__PURE__ */ n("hr", { className: e.groupDivider }),
+                        d[d.length - 1].secondary.length > 0 && /* @__PURE__ */ a("hr", { className: e.groupDivider }),
                         d[d.length - 1].secondary.map(
-                          (a, l) => /* @__PURE__ */ n(
+                          (n, l) => /* @__PURE__ */ a(
                             "div",
                             {
                               role: "menuitem",
-                              className: `${e.mobileMenuItem} ${B === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
-                              children: a.sublinks ? /* @__PURE__ */ n(
+                              className: `${e.mobileMenuItem} ${O === "forward" ? e.fadeInFromLeft : e.fadeInFromRight}`,
+                              children: n.sublinks ? /* @__PURE__ */ a(
                                 "button",
                                 {
                                   className: e.sublinkToggle,
-                                  onClick: () => ie(a),
-                                  children: a.label
+                                  onClick: () => re(n),
+                                  children: n.label
                                 }
                               ) : /* @__PURE__ */ i(
                                 "a",
                                 {
-                                  href: a.href,
+                                  href: n.href,
                                   className: e.link,
-                                  target: a.isExternal ? "_blank" : "_self",
-                                  rel: a.isExternal ? "noopener noreferrer" : void 0,
+                                  target: n.isExternal ? "_blank" : "_self",
+                                  rel: n.isExternal ? "noopener noreferrer" : void 0,
                                   children: [
-                                    a.label,
-                                    a.isExternal && /* @__PURE__ */ n(
-                                      X,
+                                    n.label,
+                                    n.isExternal && /* @__PURE__ */ a(
+                                      Y,
                                       {
                                         className: e.newTabIcon,
                                         size: 16,
@@ -600,7 +605,7 @@ function an({
                                 }
                               )
                             },
-                            a._key ?? `secondary-${l}`
+                            n._key ?? `secondary-${l}`
                           )
                         )
                       ]
@@ -610,35 +615,43 @@ function an({
                 ] })
               }
             ),
-            h && h.length > 0 && /* @__PURE__ */ n("nav", { className: e.utility, "aria-label": "Utility navigation", children: /* @__PURE__ */ n(ce, { children: h.map((a, l) => /* @__PURE__ */ n(
-              J,
+            h && h.length > 0 && /* @__PURE__ */ a(
+              "nav",
               {
-                as: "a",
-                size: "sm",
-                href: a.href ?? "/",
-                variant: a.variant ?? "primary",
-                displayType: a.displayType ?? "text",
-                imageSrc: a.imageSrc,
-                imageAlt: a.imageAlt,
-                "aria-label": a.ariaLabel,
-                icon: a.icon,
-                iconAlignment: a.iconAlignment,
-                children: a.imageSrc ? /* @__PURE__ */ n(
-                  "img",
+                className: e.utility,
+                "data-scrolled": G,
+                "aria-label": "Utility navigation",
+                children: /* @__PURE__ */ a(oe, { children: h.map((n, l) => /* @__PURE__ */ a(
+                  J,
                   {
-                    src: a.imageSrc,
-                    alt: a.imageAlt ?? a.ariaLabel
-                  }
-                ) : a.label
-              },
-              a._key ?? l
-            )) }) }),
-            u && /* @__PURE__ */ n(
+                    as: "a",
+                    size: "sm",
+                    href: n.href ?? "/",
+                    variant: n.variant === "link" && G ? "blurred" : n.variant ?? "primary",
+                    displayType: n.displayType ?? "text",
+                    imageSrc: n.imageSrc,
+                    imageAlt: n.imageAlt,
+                    "aria-label": n.ariaLabel,
+                    icon: n.icon,
+                    iconAlignment: n.iconAlignment,
+                    children: n.imageSrc ? /* @__PURE__ */ a(
+                      "img",
+                      {
+                        src: n.imageSrc,
+                        alt: n.imageAlt ?? n.ariaLabel
+                      }
+                    ) : n.label
+                  },
+                  n._key ?? l
+                )) })
+              }
+            ),
+            u && /* @__PURE__ */ a(
               "nav",
               {
                 "aria-label": "Utility navigation",
                 className: `${e.utilityMobile} ${f ? e.open : ""}`,
-                children: /* @__PURE__ */ n(ce, { alignment: "center", children: /* @__PURE__ */ n(
+                children: /* @__PURE__ */ a(oe, { alignment: "center", children: /* @__PURE__ */ a(
                   J,
                   {
                     as: "a",
@@ -651,7 +664,7 @@ function an({
                     "aria-label": u.ariaLabel,
                     icon: u.icon,
                     iconAlignment: u.iconAlignment,
-                    children: u.imageSrc ? /* @__PURE__ */ n(
+                    children: u.imageSrc ? /* @__PURE__ */ a(
                       "img",
                       {
                         src: u.imageSrc,
@@ -663,17 +676,17 @@ function an({
               }
             ),
             /* @__PURE__ */ i("div", { className: e.mobileButtons, children: [
-              I && g && /* @__PURE__ */ n(K, {}),
-              /* @__PURE__ */ n(
+              I && g && /* @__PURE__ */ a(V, {}),
+              /* @__PURE__ */ a(
                 "button",
                 {
-                  ref: T,
+                  ref: ee,
                   className: e.menuToggle,
-                  onClick: ae,
+                  onClick: le,
                   "aria-label": f ? "Close menu" : "Open menu",
                   "aria-expanded": f,
                   "aria-controls": "main-menu",
-                  children: f ? /* @__PURE__ */ n(Be, { size: 24, "aria-hidden": "true" }) : /* @__PURE__ */ n(ze, { size: 24, "aria-hidden": "true" })
+                  children: f ? /* @__PURE__ */ a(We, { size: 24, "aria-hidden": "true" }) : /* @__PURE__ */ a(Ae, { size: 24, "aria-hidden": "true" })
                 }
               )
             ] })
@@ -684,5 +697,5 @@ function an({
   );
 }
 export {
-  an as Navbar
+  rn as Navbar
 };