rk-designsystem 1.3.4 → 1.4.0

package/dist/components/Header/index.js

@@ -1,52 +1,58 @@
 "use client";
-import { jsxs as i, jsx as r, Fragment as ye } from "react/jsx-runtime";
-import E, { useState as L, useEffect as p, useMemo as $e } from "react";
-import { RedCrossLogo as Y } from "../../assets/logos/RedCrossLogo.js";
-import { useLanguageOptional as we } from "../../context/LanguageContext.js";
-import { Link as B } from "../Link/index.js";
-import { Button as D } from "../Button/index.js";
-import { Avatar as ke } from "../Avatar/index.js";
-import { Paragraph as j } from "../Paragraph/index.js";
-import { Search as T } from "../Search/index.js";
-import { Switch as M } from "../Switch/index.js";
-import { Dropdown as d } from "../Dropdown/index.js";
+import { jsxs as o, jsx as r, Fragment as Te } from "react/jsx-runtime";
+import C, { useState as E, useEffect as g, useMemo as Oe } from "react";
+import { RedCrossLogo as ie } from "../../assets/logos/RedCrossLogo.js";
+import { useLanguageOptional as Re } from "../../context/LanguageContext.js";
+import { Link as D } from "../Link/index.js";
+import { Button as K } from "../Button/index.js";
+import { Avatar as Ie } from "../Avatar/index.js";
+import { Paragraph as U } from "../Paragraph/index.js";
+import { Search as W } from "../Search/index.js";
+import { Switch as Q } from "../Switch/index.js";
+import { Dropdown as c } from "../Dropdown/index.js";
 import n from "./styles.module.css.js";
-import { ChevronDownIcon as Z, XMarkIcon as _, MagnifyingGlassIcon as P, MenuHamburgerIcon as ze, HeartIcon as Le } from "@navikt/aksel-icons";
-import { searchIndex as Ne } from "../../utils/search-index.js";
-function Ce($) {
-  return $.split(/\s+/).map((e) => e[0] ?? "").join("").slice(0, 2).toUpperCase();
+import { ChevronDownIcon as oe, XMarkIcon as se, MagnifyingGlassIcon as le, MenuHamburgerIcon as Se, HeartIcon as De } from "@navikt/aksel-icons";
+const de = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+function We(w) {
+  return w.split(/\s+/).map((e) => e[0] ?? "").join("").slice(0, 2).toUpperCase();
 }
-const Ue = ({
-  variant: $ = "default",
+const Ae = [], Pe = ({
+  variant: w = "default",
   "data-color": e = "primary-color-red",
-  activePage: ee,
-  setPage: m,
-  children: te,
-  showUser: ne = !0,
-  showSearch: re = !0,
-  showLogin: ae = !0,
-  showCta: oe = !1,
-  ctaLabel: ie,
-  ctaIcon: q = /* @__PURE__ */ r(Le, { "aria-hidden": !0 }),
-  onCtaClick: le,
-  showThemeToggle: se = !1,
-  secondaryLogo: de = !1,
-  secondaryLogoSrc: A,
-  secondaryLogoSrcDark: F,
-  secondaryLogoAlt: ce = "Secondary Logo",
-  navItems: x,
-  showNavItems: H = !0,
-  showMenuButton: he = !0,
-  showHeaderExtension: I = !1,
-  showModeToggle: w = !1,
-  showLanguageSwitch: N = !1,
-  extensionColor: U,
-  userName: O,
-  userInitials: ue,
-  userAvatarSrc: R,
-  onUserClick: k
+  activePage: ce,
+  setPage: f,
+  children: he,
+  // All three OFF by default: the old defaults showed a placeholder user,
+  // a dead login link and a search box over data the consumer never
+  // provided, on every page that dropped in a bare <Header />.
+  showUser: ue = !1,
+  showSearch: me = !1,
+  showLogin: fe = !1,
+  loginHref: V,
+  onLoginClick: _,
+  searchItems: G = Ae,
+  showCta: ge = !1,
+  ctaLabel: pe,
+  ctaIcon: X = /* @__PURE__ */ r(De, { "aria-hidden": !0 }),
+  onCtaClick: ve,
+  showThemeToggle: xe = !1,
+  secondaryLogo: be = !1,
+  secondaryLogoSrc: Y,
+  secondaryLogoSrcDark: J,
+  secondaryLogoAlt: ye = "Secondary Logo",
+  navItems: b,
+  showNavItems: P = !0,
+  showMenuButton: $e = !0,
+  showHeaderExtension: A = !1,
+  showModeToggle: k = !1,
+  showLanguageSwitch: B = !1,
+  extensionColor: Z,
+  userName: M,
+  userInitials: we,
+  userAvatarSrc: j,
+  onUserClick: z
 }) => {
-  const [s, z] = L(!1), [c, f] = L(!1), K = E.useRef(null), Q = E.useRef(null), G = E.useRef(null), X = E.useRef(null), [h, b] = L(""), [v, me] = L(() => {
+  const [l, L] = E(!1), [h, v] = E(!1), T = C.useRef(null), ee = C.useRef(null), q = C.useRef(null), te = C.useRef(null), [u, y] = E(""), [x, ke] = E(() => {
     var t;
     if (typeof document < "u") {
       const a = document.documentElement.getAttribute("data-color-scheme");
@@ -54,238 +60,257 @@ const Ue = ({
       if ((t = window.matchMedia) != null && t.call(window, "(prefers-color-scheme: dark)").matches) return "dark";
     }
     return "light";
-  }), { language: J, setLanguage: C, t: l } = we(), [g, ge] = L(!1), pe = w && (I && !g || g);
-  p(() => {
+  }), { language: ne, setLanguage: O, t: s } = Re(), [m, ze] = E(!1), Le = k && (A && !m || m);
+  g(() => {
     const t = "rk-header-inline-styles";
     if (typeof document > "u" || document.getElementById(t)) return;
-    const a = Ee(n), o = document.createElement("style");
-    o.id = t, o.textContent = a, document.head.prepend(o);
-  }, []), p(() => {
-    z(!1), f(!1), b("");
-  }, [ee]), p(() => {
-    if (!(typeof document > "u") && s && g) {
+    const a = Me(n), i = document.createElement("style");
+    i.id = t, i.textContent = a, document.head.prepend(i);
+  }, []), g(() => {
+    L(!1), v(!1), y("");
+  }, [ce]), g(() => {
+    if (!(typeof document > "u") && l && m) {
       const t = document.body.style.overflow;
       return document.body.style.overflow = "hidden", () => {
         document.body.style.overflow = t;
       };
     }
-  }, [s, g]), p(() => {
+  }, [l, m]), g(() => {
     if (typeof window > "u" || typeof window.matchMedia > "u") return;
-    const t = window.matchMedia("(max-width: 850px)"), a = (o) => ge("matches" in o ? o.matches : t.matches);
+    const t = window.matchMedia("(max-width: 850px)"), a = (i) => ze("matches" in i ? i.matches : t.matches);
     return a(t), t.addEventListener ? t.addEventListener("change", a) : t.addListener(a), () => {
       t.removeEventListener ? t.removeEventListener("change", a) : t.removeListener(a);
     };
-  }, []), p(() => {
+  }, []), g(() => {
     if (typeof document > "u") return;
     const t = document.querySelector(`.${n.header}`);
     if (!t) return;
     const a = () => {
-      const u = t.offsetHeight;
-      document.documentElement.style.setProperty("--header-height-mobile", `${u}px`);
+      const d = t.offsetHeight;
+      document.documentElement.style.setProperty("--header-height-mobile", `${d}px`);
     };
     a(), window.addEventListener("resize", a);
-    const o = new ResizeObserver(() => {
+    const i = new ResizeObserver(() => {
       a();
     });
-    return o.observe(t), () => {
-      window.removeEventListener("resize", a), o.disconnect();
+    return i.observe(t), () => {
+      window.removeEventListener("resize", a), i.disconnect();
     };
-  }, [g]), p(() => {
+  }, [m]), g(() => {
     if (typeof document > "u") return;
     const t = document.querySelector(`.${n.logoWrapper}`);
     if (!t) return;
     const a = () => {
-      const o = t.offsetWidth;
-      document.documentElement.style.setProperty("--rk-logo-width", `${o}px`);
+      const i = t.offsetWidth;
+      document.documentElement.style.setProperty("--rk-logo-width", `${i}px`);
     };
     return a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
-  }, [g]), p(() => {
-    if (typeof document > "u" || !c) {
+  }, [m]), g(() => {
+    if (typeof document > "u" || !h) {
       document.documentElement.style.setProperty("--rk-search-overlay-height", "0px");
       return;
     }
     const t = document.querySelector(`.${n.searchOverlay}`);
     if (!t) return;
     const a = () => {
-      const u = t.offsetHeight;
-      document.documentElement.style.setProperty("--rk-search-overlay-height", `${u}px`);
+      const d = t.offsetHeight;
+      document.documentElement.style.setProperty("--rk-search-overlay-height", `${d}px`);
     };
     requestAnimationFrame(a), window.addEventListener("resize", a);
-    const o = new ResizeObserver(a);
-    return o.observe(t), () => {
-      window.removeEventListener("resize", a), o.disconnect();
+    const i = new ResizeObserver(a);
+    return i.observe(t), () => {
+      window.removeEventListener("resize", a), i.disconnect();
     };
-  }, [c]), p(() => {
-    if (!s && !c) return;
+  }, [h]), g(() => {
+    if (!l && !h) return;
     const t = (a) => {
-      var o, u;
-      a.key === "Escape" && (s && (z(!1), (o = K.current) == null || o.focus()), c && (f(!1), (u = Q.current) == null || u.focus()));
+      var i, d;
+      a.key === "Escape" && (l && (L(!1), (i = T.current) == null || i.focus()), h && (v(!1), (d = ee.current) == null || d.focus()));
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [s, c]), p(() => {
-    var t, a, o;
-    c ? (t = X.current) == null || t.focus() : s && ((o = (a = G.current) == null ? void 0 : a.querySelector('a[href], button, input, select, [tabindex]:not([tabindex="-1"])')) == null || o.focus());
-  }, [s, c]);
-  const S = () => {
-    const t = v === "light" ? "dark" : "light";
-    me(t), document.documentElement.setAttribute("data-color-scheme", t);
-  }, fe = (t) => {
-    m && (t.preventDefault(), m("home")), z(!1), f(!1);
-  }, ve = () => {
-    z(!s), c && f(!1), !s && typeof document < "u" && requestAnimationFrame(() => {
+  }, [l, h]), g(() => {
+    var t, a, i;
+    h ? (t = te.current) == null || t.focus() : l && ((i = (a = q.current) == null ? void 0 : a.querySelector(de)) == null || i.focus());
+  }, [l, h]), g(() => {
+    if (!l || !m) return;
+    const t = (a) => {
+      if (a.key !== "Tab") return;
+      const i = q.current;
+      if (!i) return;
+      const d = (p) => typeof p.checkVisibility == "function" ? p.checkVisibility() : p.offsetParent !== null, N = Array.from(i.querySelectorAll(de)).filter(
+        (p) => !p.hasAttribute("disabled") && p.getAttribute("aria-hidden") !== "true" && d(p)
+      ), R = [T.current, ...N].filter((p) => !!p), I = R[0], H = R[R.length - 1];
+      if (!I || !H) return;
+      const S = document.activeElement;
+      (a.shiftKey ? S === I : S === H) ? (a.preventDefault(), (a.shiftKey ? H : I).focus()) : (!S || !R.includes(S)) && (a.preventDefault(), I.focus());
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [l, m]);
+  const re = C.useRef(!1);
+  g(() => {
+    var t;
+    re.current && !l && typeof document < "u" && (!document.activeElement || document.activeElement === document.body) && ((t = T.current) == null || t.focus()), re.current = l;
+  }, [l]);
+  const F = () => {
+    const t = x === "light" ? "dark" : "light";
+    ke(t), document.documentElement.setAttribute("data-color-scheme", t);
+  }, Ne = (t) => {
+    f && (t.preventDefault(), f("home")), L(!1), v(!1);
+  }, Ce = () => {
+    L(!l), h && v(!1), !l && typeof document < "u" && requestAnimationFrame(() => {
       const t = document.querySelector(`.${n.header}`);
       if (t) {
         const a = t.offsetHeight;
         document.documentElement.style.setProperty("--header-height-mobile", `${a}px`);
       }
     });
-  }, xe = () => {
-    f(!c), s && z(!1);
-  }, y = $e(() => {
-    if (!h.trim()) return [];
-    const t = h.toLowerCase();
-    return Ne.filter((a) => a.title.toLowerCase().includes(t)).sort((a, o) => {
-      const u = a.title.toLowerCase().startsWith(t) ? 0 : 1, W = o.title.toLowerCase().startsWith(t) ? 0 : 1;
-      return u - W;
+  }, Ee = () => {
+    v(!h), l && L(!1);
+  }, $ = Oe(() => {
+    if (!u.trim()) return [];
+    const t = u.toLowerCase();
+    return G.filter((a) => a.title.toLowerCase().includes(t)).sort((a, i) => {
+      const d = a.title.toLowerCase().startsWith(t) ? 0 : 1, N = i.title.toLowerCase().startsWith(t) ? 0 : 1;
+      return d - N;
     });
-  }, [h]), V = () => {
-    !m || !h.trim() || (m(`search/${encodeURIComponent(h.trim())}`), f(!1), b(""));
-  }, be = (t) => {
-    m && m(t), f(!1), b("");
+  }, [u, G]), ae = () => {
+    !f || !u.trim() || (f(`search/${encodeURIComponent(u.trim())}`), v(!1), y(""));
+  }, Be = (t) => {
+    f && f(t), v(!1), y("");
   };
   return (
     // The attribute sets a real Digdir theme scope, so the extension CSS can
     // use scope-relative variables (--ds-color-base-default etc.) and any
     // scope themes it correctly. Legacy 'primary' aliases to the scope it
     // always meant.
-    /* @__PURE__ */ i("header", { className: n.header, "data-open": s ? "true" : "false", "data-color": e === "primary" ? "primary-color-red" : e, "data-variant": $, "data-header-extension": I ? "true" : "false", children: [
-      I && /* @__PURE__ */ r("div", { className: `${n.headerExtension}${U === "tinted" ? ` ${n.headerExtensionTinted}` : ""}`, "data-color-scheme": "light", "data-extension-color": U, children: /* @__PURE__ */ i("div", { className: n.extensionContentWrapper, children: [
-        w && /* @__PURE__ */ r("div", { className: n.extensionContent, children: /* @__PURE__ */ r(
-          M,
+    /* @__PURE__ */ o("header", { className: n.header, "data-open": l ? "true" : "false", "data-color": e === "primary" ? "primary-color-red" : e, "data-variant": w, "data-header-extension": A ? "true" : "false", children: [
+      A && /* @__PURE__ */ r("div", { className: `${n.headerExtension}${Z === "tinted" ? ` ${n.headerExtensionTinted}` : ""}`, "data-color-scheme": "light", "data-extension-color": Z, children: /* @__PURE__ */ o("div", { className: n.extensionContentWrapper, children: [
+        k && /* @__PURE__ */ r("div", { className: n.extensionContent, children: /* @__PURE__ */ r(
+          Q,
           {
             "data-size": "sm",
-            checked: v === "dark",
-            onChange: S,
-            label: l("header.darkMode"),
+            checked: x === "dark",
+            onChange: F,
+            label: s("header.darkMode"),
             color: "neutral",
             "data-color-scheme": "light"
           }
         ) }),
-        w && N && /* @__PURE__ */ r("div", { className: n.extensionDivider }),
-        N && /* @__PURE__ */ i("div", { className: n.languageSwitch, children: [
-          /* @__PURE__ */ r("span", { className: n.languageLabel, children: l("header.language") }),
-          /* @__PURE__ */ i(d.TriggerContext, { children: [
-            /* @__PURE__ */ i(
-              d.Trigger,
+        k && B && /* @__PURE__ */ r("div", { className: n.extensionDivider }),
+        B && /* @__PURE__ */ o("div", { className: n.languageSwitch, children: [
+          /* @__PURE__ */ r("span", { className: n.languageLabel, children: s("header.language") }),
+          /* @__PURE__ */ o(c.TriggerContext, { children: [
+            /* @__PURE__ */ o(
+              c.Trigger,
               {
                 className: n.languageLink,
-                "aria-label": l("header.selectLanguage"),
+                "aria-label": s("header.selectLanguage"),
                 style: { background: "transparent", border: "none", padding: 0, cursor: "pointer", font: "inherit" },
                 children: [
-                  J,
+                  ne,
                   " ",
-                  /* @__PURE__ */ r(Z, { "aria-hidden": !0 })
+                  /* @__PURE__ */ r(oe, { "aria-hidden": !0 })
                 ]
               }
             ),
             /* @__PURE__ */ r(
-              d,
+              c,
               {
-                "data-color-scheme": v,
+                "data-color-scheme": x,
                 placement: "bottom-end",
-                children: /* @__PURE__ */ i(d.List, { children: [
-                  /* @__PURE__ */ r(d.Item, { children: /* @__PURE__ */ r(d.Button, { onClick: () => C("NO"), children: "Norsk (NO)" }) }),
-                  /* @__PURE__ */ r(d.Item, { children: /* @__PURE__ */ r(d.Button, { onClick: () => C("EN"), children: "English (EN)" }) })
+                children: /* @__PURE__ */ o(c.List, { children: [
+                  /* @__PURE__ */ r(c.Item, { children: /* @__PURE__ */ r(c.Button, { onClick: () => O("NO"), children: "Norsk (NO)" }) }),
+                  /* @__PURE__ */ r(c.Item, { children: /* @__PURE__ */ r(c.Button, { onClick: () => O("EN"), children: "English (EN)" }) })
                 ] })
               }
             )
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ i("div", { className: n.headerInner, children: [
-        /* @__PURE__ */ i("div", { className: n.logoWrapper, children: [
+      /* @__PURE__ */ o("div", { className: n.headerInner, children: [
+        /* @__PURE__ */ o("div", { className: n.logoWrapper, children: [
           /* @__PURE__ */ r(
-            B,
+            D,
             {
               href: "/",
               className: `${n.logo} ${n.primaryLogo}`,
-              "aria-label": l("header.homeAriaLabel"),
-              onClick: fe,
-              children: /* @__PURE__ */ r(Y, { className: n.redCrossLogo })
+              "aria-label": s("header.homeAriaLabel"),
+              onClick: Ne,
+              children: /* @__PURE__ */ r(ie, { className: n.redCrossLogo })
             }
           ),
-          de && /* @__PURE__ */ r("div", { className: n.secondaryLogoWrapper, children: A ? /* @__PURE__ */ r(
+          be && /* @__PURE__ */ r("div", { className: n.secondaryLogoWrapper, children: Y ? /* @__PURE__ */ r(
             "img",
             {
-              src: v === "dark" && F ? F : A,
-              alt: ce,
+              src: x === "dark" && J ? J : Y,
+              alt: ye,
               className: n.secondaryLogo
             }
           ) : /* @__PURE__ */ r("div", { className: n.slotComponent, children: /* @__PURE__ */ r("div", { className: n.slotContainer, children: /* @__PURE__ */ r("p", { className: n.slotText, children: "SLOT" }) }) }) })
         ] }),
-        H && x && x.length > 0 && !g && /* @__PURE__ */ r("nav", { className: n.navItems, children: x.map((t, a) => /* @__PURE__ */ r(
-          B,
+        P && b && b.length > 0 && !m && /* @__PURE__ */ r("nav", { className: n.navItems, children: b.map((t, a) => /* @__PURE__ */ r(
+          D,
           {
             href: t.href,
             className: n.navLink,
-            onClick: (o) => {
-              m && (o.preventDefault(), m(t.href));
+            onClick: (i) => {
+              f && (i.preventDefault(), f(t.href));
             },
             children: t.label
           },
           a
         )) }),
-        /* @__PURE__ */ i("div", { className: n.actions, children: [
-          oe && // data-color="main" was removed here and on the search/menu buttons below:
+        /* @__PURE__ */ o("div", { className: n.actions, children: [
+          ge && // data-color="main" was removed here and on the search/menu buttons below:
           // "main" matches no theme scope, so the buttons always inherited the
           // ancestor scope — now they do so explicitly. data-color is
           // compile-checked against the real scopes since 1.4.0.
-          /* @__PURE__ */ i(
-            D,
+          /* @__PURE__ */ o(
+            K,
             {
               variant: "primary",
               "data-size": "md",
               className: n.ctaButton,
-              onClick: le,
+              onClick: ve,
               children: [
-                q,
-                /* @__PURE__ */ r("span", { className: q ? n.buttonText : void 0, children: ie || l("header.supportUs") })
+                X,
+                /* @__PURE__ */ r("span", { className: X ? n.buttonText : void 0, children: pe || s("header.supportUs") })
               ]
             }
           ),
-          se && !pe && /* @__PURE__ */ r("div", { className: n.themeToggle, children: /* @__PURE__ */ r(
-            M,
+          xe && !Le && /* @__PURE__ */ r("div", { className: n.themeToggle, children: /* @__PURE__ */ r(
+            Q,
             {
-              checked: v === "dark",
-              onChange: S,
-              "aria-label": l("header.toggleTheme")
+              checked: x === "dark",
+              onChange: F,
+              "aria-label": s("header.toggleTheme")
             }
           ) }),
-          ne && (() => {
-            const t = O ?? "Frodo Baggins", a = ue ?? (O ? Ce(O) : "FB"), o = !!k;
-            return /* @__PURE__ */ i(
+          ue && M && (() => {
+            const t = M, a = we ?? We(M), i = !!z;
+            return /* @__PURE__ */ o(
               "div",
               {
                 className: n.userInfo,
-                onClick: k,
-                role: o ? "button" : void 0,
-                tabIndex: o ? 0 : void 0,
-                onKeyDown: o ? (u) => {
-                  (u.key === "Enter" || u.key === " ") && (u.preventDefault(), k == null || k());
+                onClick: z,
+                role: i ? "button" : void 0,
+                tabIndex: i ? 0 : void 0,
+                onKeyDown: i ? (d) => {
+                  (d.key === "Enter" || d.key === " ") && (d.preventDefault(), z == null || z());
                 } : void 0,
-                style: o ? { cursor: "pointer" } : void 0,
+                style: i ? { cursor: "pointer" } : void 0,
                 children: [
-                  /* @__PURE__ */ r(j, { "data-size": "md", className: n.userName, children: t }),
+                  /* @__PURE__ */ r(U, { "data-size": "md", className: n.userName, children: t }),
                   /* @__PURE__ */ r(
-                    ke,
+                    Ie,
                     {
                       "aria-label": t,
                       variant: "circle",
-                      initials: R ? void 0 : a,
-                      children: R ? /* @__PURE__ */ r(
+                      initials: j ? void 0 : a,
+                      children: j ? /* @__PURE__ */ r(
                         "img",
                         {
-                          src: R,
+                          src: j,
                           alt: "",
                           style: { width: "100%", height: "100%", objectFit: "cover" }
                         }
@@ -296,176 +321,186 @@ const Ue = ({
               }
             );
           })(),
-          ae && /* @__PURE__ */ i("a", { href: "#", className: n.loginLink, children: [
-            /* @__PURE__ */ r(j, { "data-size": "md", className: n.loginText, children: l("header.login") }),
-            /* @__PURE__ */ r("div", { className: n.underline })
-          ] }),
-          re && /* @__PURE__ */ r("div", { className: n.searchButtonWrapper, children: /* @__PURE__ */ i(
-            D,
+          fe && /* @__PURE__ */ o(
+            "a",
             {
-              ref: Q,
+              href: V ?? "#",
+              className: n.loginLink,
+              onClick: _ ? (t) => {
+                V || t.preventDefault(), _();
+              } : void 0,
+              children: [
+                /* @__PURE__ */ r(U, { "data-size": "md", className: n.loginText, children: s("header.login") }),
+                /* @__PURE__ */ r("div", { className: n.underline })
+              ]
+            }
+          ),
+          me && /* @__PURE__ */ r("div", { className: n.searchButtonWrapper, children: /* @__PURE__ */ o(
+            K,
+            {
+              ref: ee,
               variant: "secondary",
               "data-size": "md",
-              onClick: xe,
-              "aria-expanded": c,
-              "aria-label": l(c ? "header.closeSearch" : "header.openSearch"),
+              onClick: Ee,
+              "aria-expanded": h,
+              "aria-label": s(h ? "header.closeSearch" : "header.openSearch"),
               children: [
-                c ? /* @__PURE__ */ r(_, { "aria-hidden": !0 }) : /* @__PURE__ */ r(P, { "aria-hidden": !0 }),
-                /* @__PURE__ */ r("span", { className: n.buttonText, children: l(c ? "header.close" : "header.search") })
+                h ? /* @__PURE__ */ r(se, { "aria-hidden": !0 }) : /* @__PURE__ */ r(le, { "aria-hidden": !0 }),
+                /* @__PURE__ */ r("span", { className: n.buttonText, children: s(h ? "header.close" : "header.search") })
               ]
             }
           ) }),
-          (he || g) && /* @__PURE__ */ i(
-            D,
+          ($e || m) && /* @__PURE__ */ o(
+            K,
             {
-              ref: K,
+              ref: T,
               variant: "primary",
               "data-size": "md",
-              onClick: ve,
-              "aria-expanded": s,
-              "aria-label": l(s ? "header.closeMenu" : "header.openMenu"),
+              onClick: Ce,
+              "aria-expanded": l,
+              "aria-label": s(l ? "header.closeMenu" : "header.openMenu"),
               className: n.menuButton,
               children: [
-                s ? /* @__PURE__ */ r(_, { "aria-hidden": !0 }) : /* @__PURE__ */ r(ze, { "aria-hidden": !0 }),
-                /* @__PURE__ */ r("span", { className: n.buttonText, children: l(s ? "header.close" : "header.menu") })
+                l ? /* @__PURE__ */ r(se, { "aria-hidden": !0 }) : /* @__PURE__ */ r(Se, { "aria-hidden": !0 }),
+                /* @__PURE__ */ r("span", { className: n.buttonText, children: s(l ? "header.close" : "header.menu") })
               ]
             }
           )
         ] })
       ] }),
-      s && /* @__PURE__ */ r("div", { className: n.menuOverlay, ref: G, children: /* @__PURE__ */ i("div", { className: n.menuContent, children: [
+      l && /* @__PURE__ */ r("div", { className: n.menuOverlay, ref: q, children: /* @__PURE__ */ o("div", { className: n.menuContent, children: [
         /* @__PURE__ */ r("div", { className: n.menuLeftColumn }),
-        /* @__PURE__ */ i("div", { className: n.menuRightColumn, children: [
-          g && (N || w) && /* @__PURE__ */ i("div", { className: n.menuUtilities, children: [
-            N && /* @__PURE__ */ i("div", { className: n.languageSwitch, children: [
-              /* @__PURE__ */ r("span", { className: n.languageLabel, children: l("header.language") }),
-              /* @__PURE__ */ i(d.TriggerContext, { children: [
-                /* @__PURE__ */ i(
-                  d.Trigger,
+        /* @__PURE__ */ o("div", { className: n.menuRightColumn, children: [
+          m && (B || k) && /* @__PURE__ */ o("div", { className: n.menuUtilities, children: [
+            B && /* @__PURE__ */ o("div", { className: n.languageSwitch, children: [
+              /* @__PURE__ */ r("span", { className: n.languageLabel, children: s("header.language") }),
+              /* @__PURE__ */ o(c.TriggerContext, { children: [
+                /* @__PURE__ */ o(
+                  c.Trigger,
                   {
                     className: n.languageLink,
-                    "aria-label": l("header.selectLanguage"),
+                    "aria-label": s("header.selectLanguage"),
                     style: { background: "transparent", border: "none", padding: 0, cursor: "pointer", font: "inherit" },
                     children: [
-                      J,
+                      ne,
                       " ",
-                      /* @__PURE__ */ r(Z, { "aria-hidden": !0 })
+                      /* @__PURE__ */ r(oe, { "aria-hidden": !0 })
                     ]
                   }
                 ),
                 /* @__PURE__ */ r(
-                  d,
+                  c,
                   {
-                    "data-color-scheme": v,
+                    "data-color-scheme": x,
                     placement: "bottom-start",
-                    children: /* @__PURE__ */ i(d.List, { children: [
-                      /* @__PURE__ */ r(d.Item, { children: /* @__PURE__ */ r(d.Button, { onClick: () => C("NO"), children: "Norsk (NO)" }) }),
-                      /* @__PURE__ */ r(d.Item, { children: /* @__PURE__ */ r(d.Button, { onClick: () => C("EN"), children: "English (EN)" }) })
+                    children: /* @__PURE__ */ o(c.List, { children: [
+                      /* @__PURE__ */ r(c.Item, { children: /* @__PURE__ */ r(c.Button, { onClick: () => O("NO"), children: "Norsk (NO)" }) }),
+                      /* @__PURE__ */ r(c.Item, { children: /* @__PURE__ */ r(c.Button, { onClick: () => O("EN"), children: "English (EN)" }) })
                     ] })
                   }
                 )
               ] })
             ] }),
-            w && /* @__PURE__ */ r("div", { className: n.extensionContent, children: /* @__PURE__ */ r(
-              M,
+            k && /* @__PURE__ */ r("div", { className: n.extensionContent, children: /* @__PURE__ */ r(
+              Q,
               {
                 "data-size": "sm",
-                checked: v === "dark",
-                onChange: S,
-                label: l("header.darkMode"),
+                checked: x === "dark",
+                onChange: F,
+                label: s("header.darkMode"),
                 color: "neutral",
                 "data-color-scheme": "light"
               }
             ) })
           ] }),
-          /* @__PURE__ */ i("div", { className: n.slotContent, children: [
-            te,
-            g && H && x && x.length > 0 && /* @__PURE__ */ r("nav", { className: n.navList, children: x.map((t, a) => /* @__PURE__ */ r(
-              B,
+          /* @__PURE__ */ o("div", { className: n.slotContent, children: [
+            he,
+            m && P && b && b.length > 0 && /* @__PURE__ */ r("nav", { className: n.navList, children: b.map((t, a) => /* @__PURE__ */ r(
+              D,
               {
                 href: t.href,
                 className: n.navLink,
-                onClick: (o) => {
-                  m && (o.preventDefault(), m(t.href));
+                onClick: (i) => {
+                  f && (i.preventDefault(), f(t.href));
                 },
                 children: t.label
               },
               a
             )) })
           ] }),
-          g && /* @__PURE__ */ r("div", { className: n.menuBrand, children: /* @__PURE__ */ r(Y, { className: n.redCrossLogo }) })
+          m && /* @__PURE__ */ r("div", { className: n.menuBrand, children: /* @__PURE__ */ r(ie, { className: n.redCrossLogo }) })
         ] })
       ] }) }),
-      c && /* @__PURE__ */ r("div", { className: n.searchOverlay, children: /* @__PURE__ */ i("div", { className: n.searchContent, children: [
-        /* @__PURE__ */ i(T, { children: [
+      h && /* @__PURE__ */ r("div", { className: n.searchOverlay, children: /* @__PURE__ */ o("div", { className: n.searchContent, children: [
+        /* @__PURE__ */ o(W, { children: [
           /* @__PURE__ */ r(
-            T.Input,
+            W.Input,
             {
-              ref: X,
-              "aria-label": l("header.search"),
-              placeholder: l("header.searchPlaceholder"),
-              value: h,
-              onChange: (t) => b(t.target.value),
+              ref: te,
+              "aria-label": s("header.search"),
+              placeholder: s("header.searchPlaceholder"),
+              value: u,
+              onChange: (t) => y(t.target.value),
               onKeyDown: (t) => {
-                t.key === "Enter" && V();
+                t.key === "Enter" && ae();
               }
             }
           ),
-          /* @__PURE__ */ r(T.Button, { "aria-label": l("header.search"), onClick: V }),
-          /* @__PURE__ */ r(T.ClearButton, { onClick: () => b(""), "aria-label": l("header.clearSearch") })
+          /* @__PURE__ */ r(W.Button, { "aria-label": s("header.search"), onClick: ae }),
+          /* @__PURE__ */ r(W.ClearButton, { onClick: () => y(""), "aria-label": s("header.clearSearch") })
         ] }),
-        h && /* @__PURE__ */ r("div", { role: "status", className: "ds-sr-only", children: y.length > 0 ? l("header.suggestionCount").replace("{count}", String(Math.min(y.length, 5))) : `${l("header.noResults")} ${h}` }),
-        h && /* @__PURE__ */ r("div", { className: n.searchResults, children: y.length > 0 ? /* @__PURE__ */ i("div", { className: n.suggestionsSection, children: [
-          /* @__PURE__ */ r("h3", { className: n.suggestionsTitle, children: l("header.suggestions") }),
-          /* @__PURE__ */ r("ul", { className: n.resultList, children: y.slice(0, 5).map((t) => /* @__PURE__ */ r("li", { className: n.resultItem, children: /* @__PURE__ */ i(
+        u && /* @__PURE__ */ r("div", { role: "status", className: "ds-sr-only", children: $.length > 0 ? s("header.suggestionCount").replace("{count}", String(Math.min($.length, 5))) : `${s("header.noResults")} ${u}` }),
+        u && /* @__PURE__ */ r("div", { className: n.searchResults, children: $.length > 0 ? /* @__PURE__ */ o("div", { className: n.suggestionsSection, children: [
+          /* @__PURE__ */ r("h3", { className: n.suggestionsTitle, children: s("header.suggestions") }),
+          /* @__PURE__ */ r("ul", { className: n.resultList, children: $.slice(0, 5).map((t) => /* @__PURE__ */ r("li", { className: n.resultItem, children: /* @__PURE__ */ o(
             "button",
             {
               className: n.resultLink,
-              onClick: () => be(t.path),
+              onClick: () => Be(t.path),
               children: [
-                /* @__PURE__ */ r("span", { className: n.suggestionIcon, children: /* @__PURE__ */ r(P, { "aria-hidden": !0 }) }),
+                /* @__PURE__ */ r("span", { className: n.suggestionIcon, children: /* @__PURE__ */ r(le, { "aria-hidden": !0 }) }),
                 /* @__PURE__ */ r("span", { className: n.suggestionText, children: (() => {
-                  const a = t.title.toLowerCase().indexOf(h.toLowerCase());
+                  const a = t.title.toLowerCase().indexOf(u.toLowerCase());
                   if (a === -1) return /* @__PURE__ */ r("span", { className: n.remainingText, children: t.title });
-                  const o = t.title.slice(0, a), u = t.title.slice(a, a + h.length), W = t.title.slice(a + h.length);
-                  return /* @__PURE__ */ i(ye, { children: [
-                    /* @__PURE__ */ r("span", { className: n.remainingText, children: o }),
-                    /* @__PURE__ */ r("span", { className: n.highlightedText, children: u }),
-                    /* @__PURE__ */ r("span", { className: n.remainingText, children: W })
+                  const i = t.title.slice(0, a), d = t.title.slice(a, a + u.length), N = t.title.slice(a + u.length);
+                  return /* @__PURE__ */ o(Te, { children: [
+                    /* @__PURE__ */ r("span", { className: n.remainingText, children: i }),
+                    /* @__PURE__ */ r("span", { className: n.highlightedText, children: d }),
+                    /* @__PURE__ */ r("span", { className: n.remainingText, children: N })
                   ] });
                 })() })
               ]
             }
           ) }, t.id)) }),
-          y.length > 5 && /* @__PURE__ */ i(
-            B,
+          $.length > 5 && /* @__PURE__ */ o(
+            D,
             {
               href: "#",
               "data-color": "neutral",
               className: n.viewAllLink,
               onClick: (t) => {
-                t.preventDefault(), m && m(`search/${encodeURIComponent(h)}`), f(!1), b("");
+                t.preventDefault(), f && f(`search/${encodeURIComponent(u)}`), v(!1), y("");
               },
               children: [
-                l("header.viewAll"),
+                s("header.viewAll"),
                 " (",
-                y.length,
+                $.length,
                 ")"
               ]
             }
           )
-        ] }) : /* @__PURE__ */ r("div", { className: n.noResults, children: /* @__PURE__ */ i(j, { children: [
-          l("header.noResults"),
+        ] }) : /* @__PURE__ */ r("div", { className: n.noResults, children: /* @__PURE__ */ o(U, { children: [
+          s("header.noResults"),
           ' "',
-          h,
+          u,
           '"'
         ] }) }) })
       ] }) })
     ] })
   );
 };
-function Ee($) {
-  const e = $;
+function Me(w) {
+  const e = w;
   return `
 .${e.header} {
   --rk-header-extension-height: 44px;
@@ -543,7 +578,7 @@ function Ee($) {
 .${e.extensionDivider} { width: 1px; height: 18px; background-color: rgba(247,233,232,1); }
 .${e.languageSwitch} { display: flex; align-items: center; gap: var(--ds-size-2); }
 .${e.languageLabel} { font-size: var(--ds-font-size-3); color: #ECECEC; }
-.${e.languageLink} { color: white !important; text-decoration: none; display: flex; align-items: center; gap: 4px; }
+.${e.languageLink} { color: white !important; text-decoration: none; display: flex; align-items: center; gap: var(--ds-size-1, 4px); }
 .${e.header}[data-color] .${e.languageLabel} { color: var(--ds-color-base-contrast-subtle); }
 .${e.header}[data-color] .${e.languageLink} { color: var(--ds-color-base-contrast-default) !important; }
 .${e.languageSwitch} [popover] { margin-top: 0 !important; background-color: var(--ds-color-neutral-background-default) !important; position: fixed !important; overflow: visible; z-index: 20000 !important; }
@@ -564,7 +599,7 @@ function Ee($) {
 .${e.header}[data-variant="compact"] .${e.redCrossLogo} { color: var(--ds-color-neutral-text-default); }
 .${e.secondaryLogoWrapper} { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 var(--ds-size-6); background-color: var(--ds-color-neutral-background-default); }
 .${e.secondaryLogo} { height: 24px; width: auto; display: block; }
-.${e.navItems} { display: flex; gap: 40px; align-items: center; margin-left: 24px; flex-grow: 1; justify-content: center; }
+.${e.navItems} { display: flex; gap: 40px; align-items: center; margin-left: var(--ds-size-6, 24px); flex-grow: 1; justify-content: center; }
 .${e.navLink} { color: var(--ds-color-primary-color-red-text-default); font-family: inherit; font-size: var(--ds-font-size-3); text-decoration: none; font-weight: var(--ds-font-weight-regular); letter-spacing: 0.09px; }
 .${e.navLink}:hover { text-decoration: underline; }
 .${e.actions} { display: flex; align-items: center; gap: var(--ds-size-6); flex-shrink: 0; margin-left: auto; }
@@ -597,7 +632,7 @@ function Ee($) {
 }
 .${e.menuContent} { max-width: 1364px; margin: 0 auto; display: flex; flex-direction: row; align-items: stretch; box-sizing: border-box; }
 .${e.menuLeftColumn} { width: calc(217px + var(--ds-size-6)); flex-shrink: 0; display: flex; }
-.${e.menuRightColumn} { flex: 1; display: flex; flex-direction: column; padding: 48px 24px 80px 24px; gap: 24px; }
+.${e.menuRightColumn} { flex: 1; display: flex; flex-direction: column; padding: var(--ds-size-12, 48px) var(--ds-size-6, 24px) 80px var(--ds-size-6, 24px); gap: var(--ds-size-6, 24px); }
 .${e.slotContent} { width: 100%; padding: var(--ds-size-10) 0; text-align: left; color: var(--ds-color-neutral-text-subtle); font-size: var(--ds-font-size-3); border-radius: var(--ds-border-radius-md); display: flex; flex-direction: column; gap: var(--ds-size-4); align-items: flex-start; }
 .${e.navList} { display: flex; flex-direction: column; gap: var(--ds-size-3); align-items: flex-start; }
 .${e.menuBrand} { display: none; }
@@ -652,5 +687,5 @@ function Ee($) {
 `;
 }
 export {
-  Ue as Header
+  Pe as Header
 };