rk-designsystem 1.3.2 → 1.3.4

package/dist/components/Header/index.js

@@ -1,316 +1,291 @@
 "use client";
-import { jsxs as i, jsx as t, Fragment as be } from "react/jsx-runtime";
-import E, { useState as L, useEffect as f, useMemo as ye } from "react";
-import { useLanguageOptional as Ce } from "../../context/LanguageContext.js";
+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 S } from "../Button/index.js";
-import { Avatar as $e } from "../Avatar/index.js";
-import { Paragraph as D } from "../Paragraph/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 W } from "../Switch/index.js";
+import { Switch as M } from "../Switch/index.js";
 import { Dropdown as d } from "../Dropdown/index.js";
-import r from "./styles.module.css.js";
-import { ChevronDownIcon as _, XMarkIcon as P, MagnifyingGlassIcon as ee, MenuHamburgerIcon as we, HeartIcon as Le } from "@navikt/aksel-icons";
-import { searchIndex as ke } from "../../utils/search-index.js";
-function ze(C) {
-  return C.split(/\s+/).map((e) => e[0] ?? "").join("").slice(0, 2).toUpperCase();
+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();
 }
-const je = ({
-  variant: C = "default",
+const Ue = ({
+  variant: $ = "default",
   "data-color": e = "primary-color-red",
-  activePage: te,
+  activePage: ee,
   setPage: m,
-  children: ne,
-  showUser: re = !0,
-  showSearch: ae = !0,
-  showLogin: oe = !0,
-  showCta: ie = !1,
-  ctaLabel: le,
-  ctaIcon: Z = /* @__PURE__ */ t(Le, { "aria-hidden": !0 }),
-  onCtaClick: se,
-  showThemeToggle: de = !1,
-  secondaryLogo: V = !1,
-  secondaryLogoSrc: j,
-  secondaryLogoSrcDark: q,
+  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: A = !0,
+  showNavItems: H = !0,
   showMenuButton: he = !0,
-  showHeaderExtension: H = !1,
-  showModeToggle: k = !1,
-  showLanguageSwitch: z = !1,
-  extensionColor: F,
-  userName: I,
+  showHeaderExtension: I = !1,
+  showModeToggle: w = !1,
+  showLanguageSwitch: N = !1,
+  extensionColor: U,
+  userName: O,
   userInitials: ue,
-  userAvatarSrc: M,
-  onUserClick: $
+  userAvatarSrc: R,
+  onUserClick: k
 }) => {
-  const [s, w] = L(!1), [c, p] = L(!1), U = E.useRef(null), K = E.useRef(null), Q = E.useRef(null), G = E.useRef(null), [h, b] = L(""), [v, me] = L(() => {
-    var n;
+  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(() => {
+    var t;
     if (typeof document < "u") {
       const a = document.documentElement.getAttribute("data-color-scheme");
       if (a === "dark" || a === "light") return a;
-      if ((n = window.matchMedia) != null && n.call(window, "(prefers-color-scheme: dark)").matches) return "dark";
+      if ((t = window.matchMedia) != null && t.call(window, "(prefers-color-scheme: dark)").matches) return "dark";
     }
     return "light";
-  }), { language: X, setLanguage: N, t: l } = Ce(), [g, ge] = L(!1);
-  f(() => {
-    const n = "rk-header-inline-styles";
-    if (typeof document > "u" || document.getElementById(n)) return;
-    const a = Ne(r), o = document.createElement("style");
-    o.id = n, o.textContent = a, document.head.prepend(o);
-  }, []);
-  const J = () => /* @__PURE__ */ i(
-    "svg",
-    {
-      width: "170",
-      height: "119",
-      viewBox: "24 0 170 119",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      "aria-hidden": !0,
-      focusable: "false",
-      className: r.redCrossLogo,
-      children: [
-        /* @__PURE__ */ t("path", { d: "M76.1036 48.1397C77.8925 47.8781 79.6984 47.7525 81.5061 47.7639C84.1713 47.7639 86.0396 48.1669 87.3182 49.1857C87.8735 49.639 88.3149 50.2176 88.6067 50.8744C88.8984 51.5312 89.0323 52.2479 88.9974 52.9665C88.9839 53.9451 88.6724 54.896 88.1049 55.691C87.5373 56.4861 86.7411 57.087 85.8235 57.4129V57.4944C87.0796 58.006 87.7684 59.2104 88.2231 60.8722C88.7813 62.9097 89.3441 65.2688 89.6907 65.9661H85.5309C85.2382 65.4544 84.7835 63.9829 84.2793 61.7597C83.7751 59.5365 83.0097 58.8527 81.344 58.8527H80.1284V65.9661H76.1036V48.1397ZM80.1284 55.9141H81.7312C83.7526 55.9141 84.9546 54.8954 84.9546 53.3151C84.9546 51.6534 83.8336 50.8202 81.9698 50.7931C81.3532 50.7814 80.7368 50.8268 80.1284 50.9289V55.9141Z", fill: "currentColor" }),
-        /* @__PURE__ */ t("path", { d: "M97.8528 52.5633C98.9439 52.5351 100.026 52.7744 101.004 53.2606L102.256 51.4087L103.669 52.4003L102.467 54.2115C103.188 54.8589 103.758 55.6585 104.137 56.5531C104.515 57.4478 104.692 58.4154 104.655 59.3869C104.655 64.0506 101.243 66.2738 97.8573 66.2738C96.7852 66.2984 95.7234 66.059 94.7644 65.5765L93.4543 67.4556L92.1037 66.387L93.2787 64.6438C91.8651 63.4892 91.0277 61.7233 91.0277 59.414C91.0277 55.2891 93.7965 52.5543 97.8213 52.5543L97.8528 52.5633ZM99.2934 55.9411C98.8798 55.6237 98.3731 55.4533 97.8528 55.4566C95.7458 55.4566 94.949 57.5757 94.949 59.4005C94.9265 60.126 95.0909 60.845 95.4262 61.4878L95.4802 61.515L99.2934 55.9411ZM96.4932 62.8552C96.8653 63.1843 97.3486 63.3576 97.8438 63.3397C99.6446 63.3397 100.748 61.7821 100.748 59.4774C100.76 58.7777 100.625 58.0833 100.351 57.4399L100.27 57.4127L96.4932 62.8552Z", fill: "currentColor" }),
-        /* @__PURE__ */ t("path", { d: "M119.76 46.9351V62.0537C119.76 63.5253 119.814 65.0829 119.868 65.9659H116.266L116.077 64.037H116.01C115.593 64.7375 114.998 65.3131 114.285 65.7041C113.573 66.095 112.769 66.287 111.958 66.2602C108.865 66.2602 106.384 63.6068 106.384 59.5317C106.384 55.1079 109.085 52.5632 112.237 52.5632C113.835 52.5632 115.087 53.1247 115.676 54.0393H115.726V46.9351H119.76ZM115.708 58.4088C115.708 58.1914 115.681 57.8971 115.658 57.6843C115.556 57.1295 115.266 56.6274 114.838 56.2627C114.41 55.8981 113.869 55.6933 113.308 55.683C111.467 55.683 110.508 57.3447 110.508 59.4094C110.508 61.6327 111.602 63.0318 113.281 63.0318C113.838 63.0337 114.378 62.8389 114.807 62.4814C115.235 62.1239 115.526 61.6264 115.627 61.0757C115.702 60.7676 115.737 60.451 115.73 60.1339L115.708 58.4088Z", fill: "currentColor" }),
-        /* @__PURE__ */ t("path", { d: "M126.13 60.6869C126.265 62.3758 127.931 63.1772 129.808 63.1772C131.029 63.1934 132.245 63.013 133.41 62.6429L133.946 65.4049C132.438 65.9752 130.838 66.2562 129.227 66.2335C124.802 66.2335 122.272 63.6345 122.272 59.5322C122.272 56.2088 124.325 52.5366 128.854 52.5366C133.063 52.5366 134.666 55.8329 134.666 59.0794C134.666 59.6271 134.62 60.1738 134.531 60.714L126.13 60.6869ZM130.902 57.8977C130.902 56.9061 130.475 55.2443 128.611 55.2443C126.904 55.2443 126.211 56.8246 126.103 57.8977H130.902Z", fill: "currentColor" }),
-        /* @__PURE__ */ t("path", { d: "M142.603 47.8994H146.623V55.8866H146.7C147.1 55.1893 147.501 54.5283 147.929 53.9034L151.981 47.8994H156.978L151.035 55.5969L157.297 65.9703H152.57L148.172 58.1687L146.623 60.0704V65.9567H142.598L142.603 47.8994Z", fill: "currentColor" }),
-        /* @__PURE__ */ t("path", { d: "M164.294 66.2599C160.485 66.2599 157.541 63.7424 157.541 59.5043C157.541 55.2662 160.309 52.563 164.496 52.563C168.494 52.563 171.159 55.325 171.159 59.2643C171.159 64.0639 167.774 66.2599 164.307 66.2599H164.294ZM164.375 63.3394C165.946 63.3394 166.959 61.7592 166.959 59.4001C166.959 57.4395 166.216 55.4563 164.375 55.4563C162.43 55.4563 161.709 57.4667 161.709 59.4001C161.709 61.6641 162.641 63.3394 164.348 63.3394H164.375Z", fill: "currentColor" }),
-        /* @__PURE__ */ t("path", { d: "M173.676 57.1727C173.676 55.2438 173.622 54.0031 173.568 52.8576H177.062L177.197 55.271H177.3C177.535 54.507 178 53.8353 178.63 53.3486C179.261 52.8619 180.026 52.5843 180.821 52.5542C181.105 52.5425 181.391 52.5607 181.672 52.6086V56.4392C181.303 56.3736 180.93 56.3387 180.555 56.335C179.06 56.335 178.048 57.1365 177.782 58.3997C177.726 58.6983 177.699 59.0015 177.701 59.3053V65.9659H173.649L173.676 57.1727Z", fill: "currentColor" }),
-        /* @__PURE__ */ t("path", { d: "M183.752 62.4023C184.824 62.9936 186.018 63.3283 187.241 63.3803C188.47 63.3803 188.974 62.9275 188.974 62.28C188.974 61.6325 188.573 61.2613 187.056 60.7768C184.355 59.8712 183.351 58.3951 183.351 56.8375C183.351 54.3969 185.404 52.5496 188.654 52.5496C189.92 52.5283 191.175 52.7848 192.332 53.3012L191.612 56.1357C190.741 55.6712 189.775 55.4155 188.789 55.3886C187.803 55.3886 187.241 55.787 187.241 56.4571C187.241 57.1273 187.749 57.4216 189.348 57.9604C191.828 58.8162 192.868 60.0795 192.891 62.0084C192.891 64.4444 190.973 66.2691 187.241 66.2691C185.784 66.2951 184.341 65.974 183.031 65.3318L183.752 62.4023Z", fill: "currentColor" }),
-        /* @__PURE__ */ t("path", { d: "M50.1985 39.8037H37.1426V79.1965H50.1985V39.8037Z", fill: "#D52B1E" }),
-        /* @__PURE__ */ t("path", { d: "M63.2545 52.9331H24.0869V66.0625H63.2545V52.9331Z", fill: "#D52B1E" })
-      ]
-    }
-  );
-  f(() => {
-    w(!1), p(!1), b("");
-  }, [te]), f(() => {
+  }), { language: J, setLanguage: C, t: l } = we(), [g, ge] = L(!1), pe = w && (I && !g || g);
+  p(() => {
+    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 n = document.body.style.overflow;
+      const t = document.body.style.overflow;
       return document.body.style.overflow = "hidden", () => {
-        document.body.style.overflow = n;
+        document.body.style.overflow = t;
       };
     }
-  }, [s, g]), f(() => {
+  }, [s, g]), p(() => {
     if (typeof window > "u" || typeof window.matchMedia > "u") return;
-    const n = window.matchMedia("(max-width: 850px)"), a = (o) => ge("matches" in o ? o.matches : n.matches);
-    return a(n), n.addEventListener ? n.addEventListener("change", a) : n.addListener(a), () => {
-      n.removeEventListener ? n.removeEventListener("change", a) : n.removeListener(a);
+    const t = window.matchMedia("(max-width: 850px)"), a = (o) => ge("matches" in o ? o.matches : t.matches);
+    return a(t), t.addEventListener ? t.addEventListener("change", a) : t.addListener(a), () => {
+      t.removeEventListener ? t.removeEventListener("change", a) : t.removeListener(a);
     };
-  }, []), f(() => {
+  }, []), p(() => {
     if (typeof document > "u") return;
-    const n = document.querySelector(`.${r.header}`);
-    if (!n) return;
+    const t = document.querySelector(`.${n.header}`);
+    if (!t) return;
     const a = () => {
-      const u = n.offsetHeight;
+      const u = t.offsetHeight;
       document.documentElement.style.setProperty("--header-height-mobile", `${u}px`);
     };
     a(), window.addEventListener("resize", a);
     const o = new ResizeObserver(() => {
       a();
     });
-    return o.observe(n), () => {
+    return o.observe(t), () => {
       window.removeEventListener("resize", a), o.disconnect();
     };
-  }, [g]), f(() => {
+  }, [g]), p(() => {
     if (typeof document > "u") return;
-    const n = document.querySelector(`.${r.logoWrapper}`);
-    if (!n) return;
+    const t = document.querySelector(`.${n.logoWrapper}`);
+    if (!t) return;
     const a = () => {
-      const o = n.offsetWidth;
+      const o = t.offsetWidth;
       document.documentElement.style.setProperty("--rk-logo-width", `${o}px`);
     };
     return a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
-  }, [g]), f(() => {
+  }, [g]), p(() => {
     if (typeof document > "u" || !c) {
       document.documentElement.style.setProperty("--rk-search-overlay-height", "0px");
       return;
     }
-    const n = document.querySelector(`.${r.searchOverlay}`);
-    if (!n) return;
+    const t = document.querySelector(`.${n.searchOverlay}`);
+    if (!t) return;
     const a = () => {
-      const u = n.offsetHeight;
+      const u = t.offsetHeight;
       document.documentElement.style.setProperty("--rk-search-overlay-height", `${u}px`);
     };
     requestAnimationFrame(a), window.addEventListener("resize", a);
     const o = new ResizeObserver(a);
-    return o.observe(n), () => {
+    return o.observe(t), () => {
       window.removeEventListener("resize", a), o.disconnect();
     };
-  }, [c]), f(() => {
+  }, [c]), p(() => {
     if (!s && !c) return;
-    const n = (a) => {
+    const t = (a) => {
       var o, u;
-      a.key === "Escape" && (s && (w(!1), (o = U.current) == null || o.focus()), c && (p(!1), (u = K.current) == null || u.focus()));
+      a.key === "Escape" && (s && (z(!1), (o = K.current) == null || o.focus()), c && (f(!1), (u = Q.current) == null || u.focus()));
     };
-    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
-  }, [s, c]), f(() => {
-    var n, a, o;
-    c ? (n = G.current) == null || n.focus() : s && ((o = (a = Q.current) == null ? void 0 : a.querySelector('a[href], button, input, select, [tabindex]:not([tabindex="-1"])')) == null || o.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 O = () => {
-    const n = v === "light" ? "dark" : "light";
-    me(n), document.documentElement.setAttribute("data-color-scheme", n);
-  }, fe = (n) => {
-    m && (n.preventDefault(), m("home")), w(!1), p(!1);
-  }, pe = () => {
-    w(!s), c && p(!1), !s && typeof document < "u" && requestAnimationFrame(() => {
-      const n = document.querySelector(`.${r.header}`);
-      if (n) {
-        const a = n.offsetHeight;
+  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(() => {
+      const t = document.querySelector(`.${n.header}`);
+      if (t) {
+        const a = t.offsetHeight;
         document.documentElement.style.setProperty("--header-height-mobile", `${a}px`);
       }
     });
-  }, ve = () => {
-    p(!c), s && w(!1);
-  }, y = ye(() => {
+  }, xe = () => {
+    f(!c), s && z(!1);
+  }, y = $e(() => {
     if (!h.trim()) return [];
-    const n = h.toLowerCase();
-    return ke.filter((a) => a.title.toLowerCase().includes(n)).sort((a, o) => {
-      const u = a.title.toLowerCase().startsWith(n) ? 0 : 1, R = o.title.toLowerCase().startsWith(n) ? 0 : 1;
-      return u - R;
+    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;
     });
-  }, [h]), Y = () => {
-    !m || !h.trim() || (m(`search/${encodeURIComponent(h.trim())}`), p(!1), b(""));
-  }, xe = (n) => {
-    m && m(n), p(!1), b("");
+  }, [h]), V = () => {
+    !m || !h.trim() || (m(`search/${encodeURIComponent(h.trim())}`), f(!1), b(""));
+  }, be = (t) => {
+    m && m(t), f(!1), b("");
   };
   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: r.header, "data-open": s ? "true" : "false", "data-color": e === "primary" ? "primary-color-red" : e, "data-variant": C, "data-header-extension": H ? "true" : "false", children: [
-      H && /* @__PURE__ */ t("div", { className: `${r.headerExtension}${F === "tinted" ? ` ${r.headerExtensionTinted}` : ""}`, "data-color-scheme": "light", "data-extension-color": F, children: /* @__PURE__ */ i("div", { className: r.extensionContentWrapper, children: [
-        k && /* @__PURE__ */ t("div", { className: r.extensionContent, children: /* @__PURE__ */ t(
-          W,
+    /* @__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,
           {
             "data-size": "sm",
             checked: v === "dark",
-            onChange: O,
+            onChange: S,
             label: l("header.darkMode"),
             color: "neutral",
             "data-color-scheme": "light"
           }
         ) }),
-        k && z && /* @__PURE__ */ t("div", { className: r.extensionDivider }),
-        z && /* @__PURE__ */ i("div", { className: r.languageSwitch, children: [
-          /* @__PURE__ */ t("span", { className: r.languageLabel, children: l("header.language") }),
+        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,
               {
-                className: r.languageLink,
+                className: n.languageLink,
                 "aria-label": l("header.selectLanguage"),
                 style: { background: "transparent", border: "none", padding: 0, cursor: "pointer", font: "inherit" },
                 children: [
-                  X,
+                  J,
                   " ",
-                  /* @__PURE__ */ t(_, { "aria-hidden": !0 })
+                  /* @__PURE__ */ r(Z, { "aria-hidden": !0 })
                 ]
               }
             ),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ r(
               d,
               {
                 "data-color-scheme": v,
                 placement: "bottom-end",
                 children: /* @__PURE__ */ i(d.List, { children: [
-                  /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => N("NO"), children: "Norsk (NO)" }) }),
-                  /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => N("EN"), children: "English (EN)" }) })
+                  /* @__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)" }) })
                 ] })
               }
             )
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ i("div", { className: r.headerInner, children: [
-        /* @__PURE__ */ i("div", { className: r.logoWrapper, children: [
-          /* @__PURE__ */ t(
+      /* @__PURE__ */ i("div", { className: n.headerInner, children: [
+        /* @__PURE__ */ i("div", { className: n.logoWrapper, children: [
+          /* @__PURE__ */ r(
             B,
             {
               href: "/",
-              className: `${r.logo} ${r.primaryLogo}`,
+              className: `${n.logo} ${n.primaryLogo}`,
               "aria-label": l("header.homeAriaLabel"),
               onClick: fe,
-              children: /* @__PURE__ */ t(J, {})
+              children: /* @__PURE__ */ r(Y, { className: n.redCrossLogo })
             }
           ),
-          /* @__PURE__ */ t("div", { className: r.secondaryLogoWrapper, children: V && j ? /* @__PURE__ */ t(
+          de && /* @__PURE__ */ r("div", { className: n.secondaryLogoWrapper, children: A ? /* @__PURE__ */ r(
             "img",
             {
-              src: v === "dark" && q ? q : j,
+              src: v === "dark" && F ? F : A,
               alt: ce,
-              className: r.secondaryLogo
+              className: n.secondaryLogo
             }
-          ) : V ? /* @__PURE__ */ t("div", { className: r.slotComponent, children: /* @__PURE__ */ t("div", { className: r.slotContainer, children: /* @__PURE__ */ t("p", { className: r.slotText, children: "SLOT" }) }) }) : null })
+          ) : /* @__PURE__ */ r("div", { className: n.slotComponent, children: /* @__PURE__ */ r("div", { className: n.slotContainer, children: /* @__PURE__ */ r("p", { className: n.slotText, children: "SLOT" }) }) }) })
         ] }),
-        A && x && x.length > 0 && !g && /* @__PURE__ */ t("nav", { className: r.navItems, children: x.map((n, a) => /* @__PURE__ */ t(
+        H && x && x.length > 0 && !g && /* @__PURE__ */ r("nav", { className: n.navItems, children: x.map((t, a) => /* @__PURE__ */ r(
           B,
           {
-            href: n.href,
-            className: r.navLink,
+            href: t.href,
+            className: n.navLink,
             onClick: (o) => {
-              m && (o.preventDefault(), m(n.href));
+              m && (o.preventDefault(), m(t.href));
             },
-            children: n.label
+            children: t.label
           },
           a
         )) }),
-        /* @__PURE__ */ i("div", { className: r.actions, children: [
-          ie && // data-color="main" was removed here and on the search/menu buttons below:
+        /* @__PURE__ */ i("div", { className: n.actions, children: [
+          oe && // 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(
-            S,
+            D,
             {
               variant: "primary",
               "data-size": "md",
-              className: r.ctaButton,
-              onClick: se,
+              className: n.ctaButton,
+              onClick: le,
               children: [
-                Z,
-                /* @__PURE__ */ t("span", { className: Z ? r.buttonText : void 0, children: le || l("header.supportUs") })
+                q,
+                /* @__PURE__ */ r("span", { className: q ? n.buttonText : void 0, children: ie || l("header.supportUs") })
               ]
             }
           ),
-          !H && de && /* @__PURE__ */ t("div", { className: r.themeToggle, children: /* @__PURE__ */ t(
-            W,
+          se && !pe && /* @__PURE__ */ r("div", { className: n.themeToggle, children: /* @__PURE__ */ r(
+            M,
             {
               checked: v === "dark",
-              onChange: O,
+              onChange: S,
               "aria-label": l("header.toggleTheme")
             }
           ) }),
-          re && (() => {
-            const n = I ?? "Frodo Baggins", a = ue ?? (I ? ze(I) : "FB"), o = !!$;
+          ne && (() => {
+            const t = O ?? "Frodo Baggins", a = ue ?? (O ? Ce(O) : "FB"), o = !!k;
             return /* @__PURE__ */ i(
               "div",
               {
-                className: r.userInfo,
-                onClick: $,
+                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(), $ == null || $());
+                  (u.key === "Enter" || u.key === " ") && (u.preventDefault(), k == null || k());
                 } : void 0,
                 style: o ? { cursor: "pointer" } : void 0,
                 children: [
-                  /* @__PURE__ */ t(D, { "data-size": "md", className: r.userName, children: n }),
-                  /* @__PURE__ */ t(
-                    $e,
+                  /* @__PURE__ */ r(j, { "data-size": "md", className: n.userName, children: t }),
+                  /* @__PURE__ */ r(
+                    ke,
                     {
-                      "aria-label": n,
+                      "aria-label": t,
                       variant: "circle",
-                      initials: M ? void 0 : a,
-                      children: M ? /* @__PURE__ */ t(
+                      initials: R ? void 0 : a,
+                      children: R ? /* @__PURE__ */ r(
                         "img",
                         {
-                          src: M,
+                          src: R,
                           alt: "",
                           style: { width: "100%", height: "100%", objectFit: "cover" }
                         }
@@ -321,155 +296,155 @@ const je = ({
               }
             );
           })(),
-          oe && /* @__PURE__ */ i("a", { href: "#", className: r.loginLink, children: [
-            /* @__PURE__ */ t(D, { "data-size": "md", className: r.loginText, children: l("header.login") }),
-            /* @__PURE__ */ t("div", { className: r.underline })
+          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 })
           ] }),
-          ae && /* @__PURE__ */ t("div", { className: r.searchButtonWrapper, children: /* @__PURE__ */ i(
-            S,
+          re && /* @__PURE__ */ r("div", { className: n.searchButtonWrapper, children: /* @__PURE__ */ i(
+            D,
             {
-              ref: K,
+              ref: Q,
               variant: "secondary",
               "data-size": "md",
-              onClick: ve,
+              onClick: xe,
               "aria-expanded": c,
               "aria-label": l(c ? "header.closeSearch" : "header.openSearch"),
               children: [
-                c ? /* @__PURE__ */ t(P, { "aria-hidden": !0 }) : /* @__PURE__ */ t(ee, { "aria-hidden": !0 }),
-                /* @__PURE__ */ t("span", { className: r.buttonText, children: l(c ? "header.close" : "header.search") })
+                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") })
               ]
             }
           ) }),
           (he || g) && /* @__PURE__ */ i(
-            S,
+            D,
             {
-              ref: U,
+              ref: K,
               variant: "primary",
               "data-size": "md",
-              onClick: pe,
+              onClick: ve,
               "aria-expanded": s,
               "aria-label": l(s ? "header.closeMenu" : "header.openMenu"),
-              className: r.menuButton,
+              className: n.menuButton,
               children: [
-                s ? /* @__PURE__ */ t(P, { "aria-hidden": !0 }) : /* @__PURE__ */ t(we, { "aria-hidden": !0 }),
-                /* @__PURE__ */ t("span", { className: r.buttonText, children: l(s ? "header.close" : "header.menu") })
+                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") })
               ]
             }
           )
         ] })
       ] }),
-      s && /* @__PURE__ */ t("div", { className: r.menuOverlay, ref: Q, children: /* @__PURE__ */ i("div", { className: r.menuContent, children: [
-        /* @__PURE__ */ t("div", { className: r.menuLeftColumn }),
-        /* @__PURE__ */ i("div", { className: r.menuRightColumn, children: [
-          g && (z || k) && /* @__PURE__ */ i("div", { className: r.menuUtilities, children: [
-            z && /* @__PURE__ */ i("div", { className: r.languageSwitch, children: [
-              /* @__PURE__ */ t("span", { className: r.languageLabel, children: l("header.language") }),
+      s && /* @__PURE__ */ r("div", { className: n.menuOverlay, ref: G, children: /* @__PURE__ */ i("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,
                   {
-                    className: r.languageLink,
+                    className: n.languageLink,
                     "aria-label": l("header.selectLanguage"),
                     style: { background: "transparent", border: "none", padding: 0, cursor: "pointer", font: "inherit" },
                     children: [
-                      X,
+                      J,
                       " ",
-                      /* @__PURE__ */ t(_, { "aria-hidden": !0 })
+                      /* @__PURE__ */ r(Z, { "aria-hidden": !0 })
                     ]
                   }
                 ),
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ r(
                   d,
                   {
                     "data-color-scheme": v,
                     placement: "bottom-start",
                     children: /* @__PURE__ */ i(d.List, { children: [
-                      /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => N("NO"), children: "Norsk (NO)" }) }),
-                      /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => N("EN"), children: "English (EN)" }) })
+                      /* @__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)" }) })
                     ] })
                   }
                 )
               ] })
             ] }),
-            k && /* @__PURE__ */ t("div", { className: r.extensionContent, children: /* @__PURE__ */ t(
-              W,
+            w && /* @__PURE__ */ r("div", { className: n.extensionContent, children: /* @__PURE__ */ r(
+              M,
               {
                 "data-size": "sm",
                 checked: v === "dark",
-                onChange: O,
+                onChange: S,
                 label: l("header.darkMode"),
                 color: "neutral",
                 "data-color-scheme": "light"
               }
             ) })
           ] }),
-          /* @__PURE__ */ i("div", { className: r.slotContent, children: [
-            ne,
-            g && A && x && x.length > 0 && /* @__PURE__ */ t("nav", { className: r.navList, children: x.map((n, a) => /* @__PURE__ */ t(
+          /* @__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,
               {
-                href: n.href,
-                className: r.navLink,
+                href: t.href,
+                className: n.navLink,
                 onClick: (o) => {
-                  m && (o.preventDefault(), m(n.href));
+                  m && (o.preventDefault(), m(t.href));
                 },
-                children: n.label
+                children: t.label
               },
               a
             )) })
           ] }),
-          g && /* @__PURE__ */ t("div", { className: r.menuBrand, children: /* @__PURE__ */ t(J, {}) })
+          g && /* @__PURE__ */ r("div", { className: n.menuBrand, children: /* @__PURE__ */ r(Y, { className: n.redCrossLogo }) })
         ] })
       ] }) }),
-      c && /* @__PURE__ */ t("div", { className: r.searchOverlay, children: /* @__PURE__ */ i("div", { className: r.searchContent, children: [
+      c && /* @__PURE__ */ r("div", { className: n.searchOverlay, children: /* @__PURE__ */ i("div", { className: n.searchContent, children: [
         /* @__PURE__ */ i(T, { children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             T.Input,
             {
-              ref: G,
+              ref: X,
               "aria-label": l("header.search"),
               placeholder: l("header.searchPlaceholder"),
               value: h,
-              onChange: (n) => b(n.target.value),
-              onKeyDown: (n) => {
-                n.key === "Enter" && Y();
+              onChange: (t) => b(t.target.value),
+              onKeyDown: (t) => {
+                t.key === "Enter" && V();
               }
             }
           ),
-          /* @__PURE__ */ t(T.Button, { "aria-label": l("header.search"), onClick: Y }),
-          /* @__PURE__ */ t(T.ClearButton, { onClick: () => b(""), "aria-label": l("header.clearSearch") })
+          /* @__PURE__ */ r(T.Button, { "aria-label": l("header.search"), onClick: V }),
+          /* @__PURE__ */ r(T.ClearButton, { onClick: () => b(""), "aria-label": l("header.clearSearch") })
         ] }),
-        h && /* @__PURE__ */ t("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__ */ t("div", { className: r.searchResults, children: y.length > 0 ? /* @__PURE__ */ i("div", { className: r.suggestionsSection, children: [
-          /* @__PURE__ */ t("h3", { className: r.suggestionsTitle, children: l("header.suggestions") }),
-          /* @__PURE__ */ t("ul", { className: r.resultList, children: y.slice(0, 5).map((n) => /* @__PURE__ */ t("li", { className: r.resultItem, children: /* @__PURE__ */ i(
+        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(
             "button",
             {
-              className: r.resultLink,
-              onClick: () => xe(n.path),
+              className: n.resultLink,
+              onClick: () => be(t.path),
               children: [
-                /* @__PURE__ */ t("span", { className: r.suggestionIcon, children: /* @__PURE__ */ t(ee, { "aria-hidden": !0 }) }),
-                /* @__PURE__ */ t("span", { className: r.suggestionText, children: (() => {
-                  const a = n.title.toLowerCase().indexOf(h.toLowerCase());
-                  if (a === -1) return /* @__PURE__ */ t("span", { className: r.remainingText, children: n.title });
-                  const o = n.title.slice(0, a), u = n.title.slice(a, a + h.length), R = n.title.slice(a + h.length);
-                  return /* @__PURE__ */ i(be, { children: [
-                    /* @__PURE__ */ t("span", { className: r.remainingText, children: o }),
-                    /* @__PURE__ */ t("span", { className: r.highlightedText, children: u }),
-                    /* @__PURE__ */ t("span", { className: r.remainingText, children: R })
+                /* @__PURE__ */ r("span", { className: n.suggestionIcon, children: /* @__PURE__ */ r(P, { "aria-hidden": !0 }) }),
+                /* @__PURE__ */ r("span", { className: n.suggestionText, children: (() => {
+                  const a = t.title.toLowerCase().indexOf(h.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 })
                   ] });
                 })() })
               ]
             }
-          ) }, n.id)) }),
+          ) }, t.id)) }),
           y.length > 5 && /* @__PURE__ */ i(
             B,
             {
               href: "#",
               "data-color": "neutral",
-              className: r.viewAllLink,
-              onClick: (n) => {
-                n.preventDefault(), m && m(`search/${encodeURIComponent(h)}`), p(!1), b("");
+              className: n.viewAllLink,
+              onClick: (t) => {
+                t.preventDefault(), m && m(`search/${encodeURIComponent(h)}`), f(!1), b("");
               },
               children: [
                 l("header.viewAll"),
@@ -479,7 +454,7 @@ const je = ({
               ]
             }
           )
-        ] }) : /* @__PURE__ */ t("div", { className: r.noResults, children: /* @__PURE__ */ i(D, { children: [
+        ] }) : /* @__PURE__ */ r("div", { className: n.noResults, children: /* @__PURE__ */ i(j, { children: [
           l("header.noResults"),
           ' "',
           h,
@@ -489,8 +464,8 @@ const je = ({
     ] })
   );
 };
-function Ne(C) {
-  const e = C;
+function Ee($) {
+  const e = $;
   return `
 .${e.header} {
   --rk-header-extension-height: 44px;
@@ -516,6 +491,10 @@ function Ne(C) {
 }
 .${e.header}[data-header-extension="true"]::before { top: var(--rk-header-extension-height); }
 .${e.header}[data-variant="compact"]::before { display: none; }
+.${e.header}[data-variant="compact"] .${e.headerInner} { min-height: var(--ds-size-18, 72px); }
+.${e.header}[data-variant="compact"] .${e.logoWrapper} { background-color: transparent; margin-left: 0; padding-left: 0; height: auto; }
+.${e.header}[data-variant="compact"] .${e.logo} { width: auto; height: auto; }
+.${e.header}[data-variant="compact"] .${e.redCrossLogo} { width: auto; height: 44px; }
 .${e.headerExtension} {
   background-color: var(--ds-color-primary-color-red-base-default, #D52B1E);
   width: 100%;
@@ -673,5 +652,5 @@ function Ne(C) {
 `;
 }
 export {
-  je as Header
+  Ue as Header
 };