rk-designsystem 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/components/Carousel/index.js +7 -7
  2. package/dist/components/DateInput/index.js +34 -34
  3. package/dist/components/DatePicker/index.js +123 -120
  4. package/dist/components/DatePicker/styles.module.css.js +10 -10
  5. package/dist/components/Donor/index.js +1 -1
  6. package/dist/components/Footer/index.js +1 -1
  7. package/dist/components/Footer/styles.module.css.js +82 -82
  8. package/dist/components/GraphicElement/index.js +6 -6
  9. package/dist/components/Header/index.js +179 -155
  10. package/dist/components/Header/styles.module.css.js +74 -74
  11. package/dist/rk-designsystem.css +1 -1
  12. package/package.json +6 -12
package/dist/components/Header/index.js CHANGED
@@ -1,11 +1,11 @@
1
1
  "use client";
2
- import { jsxs as o, jsx as t, Fragment as ye } from "react/jsx-runtime";
3
- import N, { useState as L, useEffect as g, useMemo as be } from "react";
2
+ import { jsxs as i, jsx as t, Fragment as be } from "react/jsx-runtime";
3
+ import E, { useState as L, useEffect as f, useMemo as ye } from "react";
4
4
  import { useLanguageOptional as Ce } from "../../context/LanguageContext.js";
5
5
  import { Link as B } from "../Link/index.js";
6
- import { Button as R } from "../Button/index.js";
6
+ import { Button as S } from "../Button/index.js";
7
7
  import { Avatar as $e } from "../Avatar/index.js";
8
- import { Paragraph as S } from "../Paragraph/index.js";
8
+ import { Paragraph as D } from "../Paragraph/index.js";
9
9
  import { Search as T } from "../Search/index.js";
10
10
  import { Switch as W } from "../Switch/index.js";
11
11
  import { Dropdown as d } from "../Dropdown/index.js";
@@ -15,7 +15,7 @@ import { searchIndex as ke } from "../../utils/search-index.js";
15
15
  function ze(C) {
16
16
  return C.split(/\s+/).map((e) => e[0] ?? "").join("").slice(0, 2).toUpperCase();
17
17
  }
18
- const Ve = ({
18
+ const je = ({
19
19
  variant: C = "default",
20
20
  "data-color": e = "primary-color-red",
21
21
  activePage: te,
@@ -23,29 +23,29 @@ const Ve = ({
23
23
  children: ne,
24
24
  showUser: re = !0,
25
25
  showSearch: ae = !0,
26
- showLogin: ie = !0,
27
- showCta: oe = !1,
26
+ showLogin: oe = !0,
27
+ showCta: ie = !1,
28
28
  ctaLabel: le,
29
- ctaIcon: D = /* @__PURE__ */ t(Le, { "aria-hidden": !0 }),
29
+ ctaIcon: Z = /* @__PURE__ */ t(Le, { "aria-hidden": !0 }),
30
30
  onCtaClick: se,
31
31
  showThemeToggle: de = !1,
32
- secondaryLogo: Z = !1,
32
+ secondaryLogo: V = !1,
33
33
  secondaryLogoSrc: j,
34
- secondaryLogoSrcDark: V,
34
+ secondaryLogoSrcDark: q,
35
35
  secondaryLogoAlt: ce = "Secondary Logo",
36
- navItems: v,
37
- showNavItems: q = !0,
36
+ navItems: x,
37
+ showNavItems: A = !0,
38
38
  showMenuButton: he = !0,
39
- showHeaderExtension: A = !1,
39
+ showHeaderExtension: H = !1,
40
40
  showModeToggle: k = !1,
41
41
  showLanguageSwitch: z = !1,
42
42
  extensionColor: F,
43
- userName: H,
43
+ userName: I,
44
44
  userInitials: ue,
45
- userAvatarSrc: I,
45
+ userAvatarSrc: M,
46
46
  onUserClick: $
47
47
  }) => {
48
- const [s, w] = L(!1), [c, p] = L(!1), U = N.useRef(null), K = N.useRef(null), Q = N.useRef(null), G = N.useRef(null), [h, y] = L(""), [x, me] = L(() => {
48
+ 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(() => {
49
49
  var n;
50
50
  if (typeof document < "u") {
51
51
  const a = document.documentElement.getAttribute("data-color-scheme");
@@ -53,14 +53,14 @@ const Ve = ({
53
53
  if ((n = window.matchMedia) != null && n.call(window, "(prefers-color-scheme: dark)").matches) return "dark";
54
54
  }
55
55
  return "light";
56
- }), { language: X, setLanguage: E, t: l } = Ce(), [f, fe] = L(!1);
57
- g(() => {
56
+ }), { language: X, setLanguage: N, t: l } = Ce(), [g, ge] = L(!1);
57
+ f(() => {
58
58
  const n = "rk-header-inline-styles";
59
59
  if (typeof document > "u" || document.getElementById(n)) return;
60
- const a = Ee(r), i = document.createElement("style");
61
- i.id = n, i.textContent = a, document.head.appendChild(i);
60
+ const a = Ne(r), o = document.createElement("style");
61
+ o.id = n, o.textContent = a, document.head.prepend(o);
62
62
  }, []);
63
- const J = () => /* @__PURE__ */ o(
63
+ const J = () => /* @__PURE__ */ i(
64
64
  "svg",
65
65
  {
66
66
  width: "170",
@@ -72,35 +72,35 @@ const Ve = ({
72
72
  focusable: "false",
73
73
  className: r.redCrossLogo,
74
74
  children: [
75
- /* @__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: "#1E1E1E" }),
76
- /* @__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: "#1E1E1E" }),
77
- /* @__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: "#1E1E1E" }),
78
- /* @__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: "#1E1E1E" }),
79
- /* @__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: "#1E1E1E" }),
80
- /* @__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: "#1E1E1E" }),
81
- /* @__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: "#1E1E1E" }),
82
- /* @__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: "#1E1E1E" }),
75
+ /* @__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" }),
76
+ /* @__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" }),
77
+ /* @__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" }),
78
+ /* @__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" }),
79
+ /* @__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" }),
80
+ /* @__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" }),
81
+ /* @__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" }),
82
+ /* @__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" }),
83
83
  /* @__PURE__ */ t("path", { d: "M50.1985 39.8037H37.1426V79.1965H50.1985V39.8037Z", fill: "#D52B1E" }),
84
84
  /* @__PURE__ */ t("path", { d: "M63.2545 52.9331H24.0869V66.0625H63.2545V52.9331Z", fill: "#D52B1E" })
85
85
  ]
86
86
  }
87
87
  );
88
- g(() => {
89
- w(!1), p(!1), y("");
90
- }, [te]), g(() => {
91
- if (!(typeof document > "u") && s && f) {
88
+ f(() => {
89
+ w(!1), p(!1), b("");
90
+ }, [te]), f(() => {
91
+ if (!(typeof document > "u") && s && g) {
92
92
  const n = document.body.style.overflow;
93
93
  return document.body.style.overflow = "hidden", () => {
94
94
  document.body.style.overflow = n;
95
95
  };
96
96
  }
97
- }, [s, f]), g(() => {
97
+ }, [s, g]), f(() => {
98
98
  if (typeof window > "u" || typeof window.matchMedia > "u") return;
99
- const n = window.matchMedia("(max-width: 850px)"), a = (i) => fe("matches" in i ? i.matches : n.matches);
99
+ const n = window.matchMedia("(max-width: 850px)"), a = (o) => ge("matches" in o ? o.matches : n.matches);
100
100
  return a(n), n.addEventListener ? n.addEventListener("change", a) : n.addListener(a), () => {
101
101
  n.removeEventListener ? n.removeEventListener("change", a) : n.removeListener(a);
102
102
  };
103
- }, []), g(() => {
103
+ }, []), f(() => {
104
104
  if (typeof document > "u") return;
105
105
  const n = document.querySelector(`.${r.header}`);
106
106
  if (!n) return;
@@ -109,22 +109,22 @@ const Ve = ({
109
109
  document.documentElement.style.setProperty("--header-height-mobile", `${u}px`);
110
110
  };
111
111
  a(), window.addEventListener("resize", a);
112
- const i = new ResizeObserver(() => {
112
+ const o = new ResizeObserver(() => {
113
113
  a();
114
114
  });
115
- return i.observe(n), () => {
116
- window.removeEventListener("resize", a), i.disconnect();
115
+ return o.observe(n), () => {
116
+ window.removeEventListener("resize", a), o.disconnect();
117
117
  };
118
- }, [f]), g(() => {
118
+ }, [g]), f(() => {
119
119
  if (typeof document > "u") return;
120
120
  const n = document.querySelector(`.${r.logoWrapper}`);
121
121
  if (!n) return;
122
122
  const a = () => {
123
- const i = n.offsetWidth;
124
- document.documentElement.style.setProperty("--rk-logo-width", `${i}px`);
123
+ const o = n.offsetWidth;
124
+ document.documentElement.style.setProperty("--rk-logo-width", `${o}px`);
125
125
  };
126
126
  return a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
127
- }, [f]), g(() => {
127
+ }, [g]), f(() => {
128
128
  if (typeof document > "u" || !c) {
129
129
  document.documentElement.style.setProperty("--rk-search-overlay-height", "0px");
130
130
  return;
@@ -136,25 +136,25 @@ const Ve = ({
136
136
  document.documentElement.style.setProperty("--rk-search-overlay-height", `${u}px`);
137
137
  };
138
138
  requestAnimationFrame(a), window.addEventListener("resize", a);
139
- const i = new ResizeObserver(a);
140
- return i.observe(n), () => {
141
- window.removeEventListener("resize", a), i.disconnect();
139
+ const o = new ResizeObserver(a);
140
+ return o.observe(n), () => {
141
+ window.removeEventListener("resize", a), o.disconnect();
142
142
  };
143
- }, [c]), g(() => {
143
+ }, [c]), f(() => {
144
144
  if (!s && !c) return;
145
145
  const n = (a) => {
146
- var i, u;
147
- a.key === "Escape" && (s && (w(!1), (i = U.current) == null || i.focus()), c && (p(!1), (u = K.current) == null || u.focus()));
146
+ var o, u;
147
+ a.key === "Escape" && (s && (w(!1), (o = U.current) == null || o.focus()), c && (p(!1), (u = K.current) == null || u.focus()));
148
148
  };
149
149
  return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
150
- }, [s, c]), g(() => {
151
- var n, a, i;
152
- c ? (n = G.current) == null || n.focus() : s && ((i = (a = Q.current) == null ? void 0 : a.querySelector('a[href], button, input, select, [tabindex]:not([tabindex="-1"])')) == null || i.focus());
150
+ }, [s, c]), f(() => {
151
+ var n, a, o;
152
+ 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());
153
153
  }, [s, c]);
154
- const M = () => {
155
- const n = x === "light" ? "dark" : "light";
154
+ const O = () => {
155
+ const n = v === "light" ? "dark" : "light";
156
156
  me(n), document.documentElement.setAttribute("data-color-scheme", n);
157
- }, ge = (n) => {
157
+ }, fe = (n) => {
158
158
  m && (n.preventDefault(), m("home")), w(!1), p(!1);
159
159
  }, pe = () => {
160
160
  w(!s), c && p(!1), !s && typeof document < "u" && requestAnimationFrame(() => {
@@ -164,43 +164,43 @@ const Ve = ({
164
164
  document.documentElement.style.setProperty("--header-height-mobile", `${a}px`);
165
165
  }
166
166
  });
167
- }, xe = () => {
167
+ }, ve = () => {
168
168
  p(!c), s && w(!1);
169
- }, b = be(() => {
169
+ }, y = ye(() => {
170
170
  if (!h.trim()) return [];
171
171
  const n = h.toLowerCase();
172
- return ke.filter((a) => a.title.toLowerCase().includes(n)).sort((a, i) => {
173
- const u = a.title.toLowerCase().startsWith(n) ? 0 : 1, O = i.title.toLowerCase().startsWith(n) ? 0 : 1;
174
- return u - O;
172
+ return ke.filter((a) => a.title.toLowerCase().includes(n)).sort((a, o) => {
173
+ const u = a.title.toLowerCase().startsWith(n) ? 0 : 1, R = o.title.toLowerCase().startsWith(n) ? 0 : 1;
174
+ return u - R;
175
175
  });
176
176
  }, [h]), Y = () => {
177
- !m || !h.trim() || (m(`search/${encodeURIComponent(h.trim())}`), p(!1), y(""));
178
- }, ve = (n) => {
179
- m && m(n), p(!1), y("");
177
+ !m || !h.trim() || (m(`search/${encodeURIComponent(h.trim())}`), p(!1), b(""));
178
+ }, xe = (n) => {
179
+ m && m(n), p(!1), b("");
180
180
  };
181
181
  return (
182
182
  // The attribute sets a real Digdir theme scope, so the extension CSS can
183
183
  // use scope-relative variables (--ds-color-base-default etc.) and any
184
184
  // scope themes it correctly. Legacy 'primary' aliases to the scope it
185
185
  // always meant.
186
- /* @__PURE__ */ o("header", { className: r.header, "data-open": s ? "true" : "false", "data-color": e === "primary" ? "primary-color-red" : e, "data-variant": C, children: [
187
- A && /* @__PURE__ */ t("div", { className: `${r.headerExtension}${F === "tinted" ? ` ${r.headerExtensionTinted}` : ""}`, "data-color-scheme": "light", "data-extension-color": F, children: /* @__PURE__ */ o("div", { className: r.extensionContentWrapper, children: [
186
+ /* @__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: [
187
+ 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: [
188
188
  k && /* @__PURE__ */ t("div", { className: r.extensionContent, children: /* @__PURE__ */ t(
189
189
  W,
190
190
  {
191
191
  "data-size": "sm",
192
- checked: x === "dark",
193
- onChange: M,
192
+ checked: v === "dark",
193
+ onChange: O,
194
194
  label: l("header.darkMode"),
195
195
  color: "neutral",
196
196
  "data-color-scheme": "light"
197
197
  }
198
198
  ) }),
199
199
  k && z && /* @__PURE__ */ t("div", { className: r.extensionDivider }),
200
- z && /* @__PURE__ */ o("div", { className: r.languageSwitch, children: [
200
+ z && /* @__PURE__ */ i("div", { className: r.languageSwitch, children: [
201
201
  /* @__PURE__ */ t("span", { className: r.languageLabel, children: l("header.language") }),
202
- /* @__PURE__ */ o(d.TriggerContext, { children: [
203
- /* @__PURE__ */ o(
202
+ /* @__PURE__ */ i(d.TriggerContext, { children: [
203
+ /* @__PURE__ */ i(
204
204
  d.Trigger,
205
205
  {
206
206
  className: r.languageLink,
@@ -216,101 +216,101 @@ const Ve = ({
216
216
  /* @__PURE__ */ t(
217
217
  d,
218
218
  {
219
- "data-color-scheme": x,
219
+ "data-color-scheme": v,
220
220
  placement: "bottom-end",
221
- children: /* @__PURE__ */ o(d.List, { children: [
222
- /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => E("NO"), children: "Norsk (NO)" }) }),
223
- /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => E("EN"), children: "English (EN)" }) })
221
+ children: /* @__PURE__ */ i(d.List, { children: [
222
+ /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => N("NO"), children: "Norsk (NO)" }) }),
223
+ /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => N("EN"), children: "English (EN)" }) })
224
224
  ] })
225
225
  }
226
226
  )
227
227
  ] })
228
228
  ] })
229
229
  ] }) }),
230
- /* @__PURE__ */ o("div", { className: r.headerInner, children: [
231
- /* @__PURE__ */ o("div", { className: r.logoWrapper, children: [
230
+ /* @__PURE__ */ i("div", { className: r.headerInner, children: [
231
+ /* @__PURE__ */ i("div", { className: r.logoWrapper, children: [
232
232
  /* @__PURE__ */ t(
233
233
  B,
234
234
  {
235
235
  href: "/",
236
236
  className: `${r.logo} ${r.primaryLogo}`,
237
237
  "aria-label": l("header.homeAriaLabel"),
238
- onClick: ge,
238
+ onClick: fe,
239
239
  children: /* @__PURE__ */ t(J, {})
240
240
  }
241
241
  ),
242
- /* @__PURE__ */ t("div", { className: r.secondaryLogoWrapper, children: Z && j ? /* @__PURE__ */ t(
242
+ /* @__PURE__ */ t("div", { className: r.secondaryLogoWrapper, children: V && j ? /* @__PURE__ */ t(
243
243
  "img",
244
244
  {
245
- src: x === "dark" && V ? V : j,
245
+ src: v === "dark" && q ? q : j,
246
246
  alt: ce,
247
247
  className: r.secondaryLogo
248
248
  }
249
- ) : Z ? /* @__PURE__ */ t("div", { className: r.slotComponent, children: /* @__PURE__ */ t("div", { className: r.slotContainer, children: /* @__PURE__ */ t("p", { className: r.slotText, children: "SLOT" }) }) }) : null })
249
+ ) : V ? /* @__PURE__ */ t("div", { className: r.slotComponent, children: /* @__PURE__ */ t("div", { className: r.slotContainer, children: /* @__PURE__ */ t("p", { className: r.slotText, children: "SLOT" }) }) }) : null })
250
250
  ] }),
251
- q && v && v.length > 0 && !f && /* @__PURE__ */ t("nav", { className: r.navItems, children: v.map((n, a) => /* @__PURE__ */ t(
251
+ A && x && x.length > 0 && !g && /* @__PURE__ */ t("nav", { className: r.navItems, children: x.map((n, a) => /* @__PURE__ */ t(
252
252
  B,
253
253
  {
254
254
  href: n.href,
255
255
  className: r.navLink,
256
- onClick: (i) => {
257
- m && (i.preventDefault(), m(n.href));
256
+ onClick: (o) => {
257
+ m && (o.preventDefault(), m(n.href));
258
258
  },
259
259
  children: n.label
260
260
  },
261
261
  a
262
262
  )) }),
263
- /* @__PURE__ */ o("div", { className: r.actions, children: [
264
- oe && // data-color="main" was removed here and on the search/menu buttons below:
263
+ /* @__PURE__ */ i("div", { className: r.actions, children: [
264
+ ie && // data-color="main" was removed here and on the search/menu buttons below:
265
265
  // "main" matches no theme scope, so the buttons always inherited the
266
266
  // ancestor scope — now they do so explicitly. data-color is
267
267
  // compile-checked against the real scopes since 1.4.0.
268
- /* @__PURE__ */ o(
269
- R,
268
+ /* @__PURE__ */ i(
269
+ S,
270
270
  {
271
271
  variant: "primary",
272
272
  "data-size": "md",
273
273
  className: r.ctaButton,
274
274
  onClick: se,
275
275
  children: [
276
- D,
277
- /* @__PURE__ */ t("span", { className: D ? r.buttonText : void 0, children: le || l("header.supportUs") })
276
+ Z,
277
+ /* @__PURE__ */ t("span", { className: Z ? r.buttonText : void 0, children: le || l("header.supportUs") })
278
278
  ]
279
279
  }
280
280
  ),
281
- !A && de && /* @__PURE__ */ t("div", { className: r.themeToggle, children: /* @__PURE__ */ t(
281
+ !H && de && /* @__PURE__ */ t("div", { className: r.themeToggle, children: /* @__PURE__ */ t(
282
282
  W,
283
283
  {
284
- checked: x === "dark",
285
- onChange: M,
284
+ checked: v === "dark",
285
+ onChange: O,
286
286
  "aria-label": l("header.toggleTheme")
287
287
  }
288
288
  ) }),
289
289
  re && (() => {
290
- const n = H ?? "Frodo Baggins", a = ue ?? (H ? ze(H) : "FB"), i = !!$;
291
- return /* @__PURE__ */ o(
290
+ const n = I ?? "Frodo Baggins", a = ue ?? (I ? ze(I) : "FB"), o = !!$;
291
+ return /* @__PURE__ */ i(
292
292
  "div",
293
293
  {
294
294
  className: r.userInfo,
295
295
  onClick: $,
296
- role: i ? "button" : void 0,
297
- tabIndex: i ? 0 : void 0,
298
- onKeyDown: i ? (u) => {
296
+ role: o ? "button" : void 0,
297
+ tabIndex: o ? 0 : void 0,
298
+ onKeyDown: o ? (u) => {
299
299
  (u.key === "Enter" || u.key === " ") && (u.preventDefault(), $ == null || $());
300
300
  } : void 0,
301
- style: i ? { cursor: "pointer" } : void 0,
301
+ style: o ? { cursor: "pointer" } : void 0,
302
302
  children: [
303
- /* @__PURE__ */ t(S, { "data-size": "md", className: r.userName, children: n }),
303
+ /* @__PURE__ */ t(D, { "data-size": "md", className: r.userName, children: n }),
304
304
  /* @__PURE__ */ t(
305
305
  $e,
306
306
  {
307
307
  "aria-label": n,
308
308
  variant: "circle",
309
- initials: I ? void 0 : a,
310
- children: I ? /* @__PURE__ */ t(
309
+ initials: M ? void 0 : a,
310
+ children: M ? /* @__PURE__ */ t(
311
311
  "img",
312
312
  {
313
- src: I,
313
+ src: M,
314
314
  alt: "",
315
315
  style: { width: "100%", height: "100%", objectFit: "cover" }
316
316
  }
@@ -321,17 +321,17 @@ const Ve = ({
321
321
  }
322
322
  );
323
323
  })(),
324
- ie && /* @__PURE__ */ o("a", { href: "#", className: r.loginLink, children: [
325
- /* @__PURE__ */ t(S, { "data-size": "md", className: r.loginText, children: l("header.login") }),
324
+ oe && /* @__PURE__ */ i("a", { href: "#", className: r.loginLink, children: [
325
+ /* @__PURE__ */ t(D, { "data-size": "md", className: r.loginText, children: l("header.login") }),
326
326
  /* @__PURE__ */ t("div", { className: r.underline })
327
327
  ] }),
328
- ae && /* @__PURE__ */ t("div", { className: r.searchButtonWrapper, children: /* @__PURE__ */ o(
329
- R,
328
+ ae && /* @__PURE__ */ t("div", { className: r.searchButtonWrapper, children: /* @__PURE__ */ i(
329
+ S,
330
330
  {
331
331
  ref: K,
332
332
  variant: "secondary",
333
333
  "data-size": "md",
334
- onClick: xe,
334
+ onClick: ve,
335
335
  "aria-expanded": c,
336
336
  "aria-label": l(c ? "header.closeSearch" : "header.openSearch"),
337
337
  children: [
@@ -340,8 +340,8 @@ const Ve = ({
340
340
  ]
341
341
  }
342
342
  ) }),
343
- (he || f) && /* @__PURE__ */ o(
344
- R,
343
+ (he || g) && /* @__PURE__ */ i(
344
+ S,
345
345
  {
346
346
  ref: U,
347
347
  variant: "primary",
@@ -358,14 +358,14 @@ const Ve = ({
358
358
  )
359
359
  ] })
360
360
  ] }),
361
- s && /* @__PURE__ */ t("div", { className: r.menuOverlay, ref: Q, children: /* @__PURE__ */ o("div", { className: r.menuContent, children: [
361
+ s && /* @__PURE__ */ t("div", { className: r.menuOverlay, ref: Q, children: /* @__PURE__ */ i("div", { className: r.menuContent, children: [
362
362
  /* @__PURE__ */ t("div", { className: r.menuLeftColumn }),
363
- /* @__PURE__ */ o("div", { className: r.menuRightColumn, children: [
364
- f && (z || k) && /* @__PURE__ */ o("div", { className: r.menuUtilities, children: [
365
- z && /* @__PURE__ */ o("div", { className: r.languageSwitch, children: [
363
+ /* @__PURE__ */ i("div", { className: r.menuRightColumn, children: [
364
+ g && (z || k) && /* @__PURE__ */ i("div", { className: r.menuUtilities, children: [
365
+ z && /* @__PURE__ */ i("div", { className: r.languageSwitch, children: [
366
366
  /* @__PURE__ */ t("span", { className: r.languageLabel, children: l("header.language") }),
367
- /* @__PURE__ */ o(d.TriggerContext, { children: [
368
- /* @__PURE__ */ o(
367
+ /* @__PURE__ */ i(d.TriggerContext, { children: [
368
+ /* @__PURE__ */ i(
369
369
  d.Trigger,
370
370
  {
371
371
  className: r.languageLink,
@@ -381,11 +381,11 @@ const Ve = ({
381
381
  /* @__PURE__ */ t(
382
382
  d,
383
383
  {
384
- "data-color-scheme": x,
384
+ "data-color-scheme": v,
385
385
  placement: "bottom-start",
386
- children: /* @__PURE__ */ o(d.List, { children: [
387
- /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => E("NO"), children: "Norsk (NO)" }) }),
388
- /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => E("EN"), children: "English (EN)" }) })
386
+ children: /* @__PURE__ */ i(d.List, { children: [
387
+ /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => N("NO"), children: "Norsk (NO)" }) }),
388
+ /* @__PURE__ */ t(d.Item, { children: /* @__PURE__ */ t(d.Button, { onClick: () => N("EN"), children: "English (EN)" }) })
389
389
  ] })
390
390
  }
391
391
  )
@@ -395,34 +395,34 @@ const Ve = ({
395
395
  W,
396
396
  {
397
397
  "data-size": "sm",
398
- checked: x === "dark",
399
- onChange: M,
398
+ checked: v === "dark",
399
+ onChange: O,
400
400
  label: l("header.darkMode"),
401
401
  color: "neutral",
402
402
  "data-color-scheme": "light"
403
403
  }
404
404
  ) })
405
405
  ] }),
406
- /* @__PURE__ */ o("div", { className: r.slotContent, children: [
406
+ /* @__PURE__ */ i("div", { className: r.slotContent, children: [
407
407
  ne,
408
- f && q && v && v.length > 0 && /* @__PURE__ */ t("nav", { className: r.navList, children: v.map((n, a) => /* @__PURE__ */ t(
408
+ g && A && x && x.length > 0 && /* @__PURE__ */ t("nav", { className: r.navList, children: x.map((n, a) => /* @__PURE__ */ t(
409
409
  B,
410
410
  {
411
411
  href: n.href,
412
412
  className: r.navLink,
413
- onClick: (i) => {
414
- m && (i.preventDefault(), m(n.href));
413
+ onClick: (o) => {
414
+ m && (o.preventDefault(), m(n.href));
415
415
  },
416
416
  children: n.label
417
417
  },
418
418
  a
419
419
  )) })
420
420
  ] }),
421
- f && /* @__PURE__ */ t("div", { className: r.menuBrand, children: /* @__PURE__ */ t(J, {}) })
421
+ g && /* @__PURE__ */ t("div", { className: r.menuBrand, children: /* @__PURE__ */ t(J, {}) })
422
422
  ] })
423
423
  ] }) }),
424
- c && /* @__PURE__ */ t("div", { className: r.searchOverlay, children: /* @__PURE__ */ o("div", { className: r.searchContent, children: [
425
- /* @__PURE__ */ o(T, { children: [
424
+ c && /* @__PURE__ */ t("div", { className: r.searchOverlay, children: /* @__PURE__ */ i("div", { className: r.searchContent, children: [
425
+ /* @__PURE__ */ i(T, { children: [
426
426
  /* @__PURE__ */ t(
427
427
  T.Input,
428
428
  {
@@ -430,56 +430,56 @@ const Ve = ({
430
430
  "aria-label": l("header.search"),
431
431
  placeholder: l("header.searchPlaceholder"),
432
432
  value: h,
433
- onChange: (n) => y(n.target.value),
433
+ onChange: (n) => b(n.target.value),
434
434
  onKeyDown: (n) => {
435
435
  n.key === "Enter" && Y();
436
436
  }
437
437
  }
438
438
  ),
439
439
  /* @__PURE__ */ t(T.Button, { "aria-label": l("header.search"), onClick: Y }),
440
- /* @__PURE__ */ t(T.ClearButton, { onClick: () => y(""), "aria-label": l("header.clearSearch") })
440
+ /* @__PURE__ */ t(T.ClearButton, { onClick: () => b(""), "aria-label": l("header.clearSearch") })
441
441
  ] }),
442
- h && /* @__PURE__ */ t("div", { role: "status", className: "ds-sr-only", children: b.length > 0 ? l("header.suggestionCount").replace("{count}", String(Math.min(b.length, 5))) : `${l("header.noResults")} ${h}` }),
443
- h && /* @__PURE__ */ t("div", { className: r.searchResults, children: b.length > 0 ? /* @__PURE__ */ o("div", { className: r.suggestionsSection, children: [
442
+ 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}` }),
443
+ h && /* @__PURE__ */ t("div", { className: r.searchResults, children: y.length > 0 ? /* @__PURE__ */ i("div", { className: r.suggestionsSection, children: [
444
444
  /* @__PURE__ */ t("h3", { className: r.suggestionsTitle, children: l("header.suggestions") }),
445
- /* @__PURE__ */ t("ul", { className: r.resultList, children: b.slice(0, 5).map((n) => /* @__PURE__ */ t("li", { className: r.resultItem, children: /* @__PURE__ */ o(
445
+ /* @__PURE__ */ t("ul", { className: r.resultList, children: y.slice(0, 5).map((n) => /* @__PURE__ */ t("li", { className: r.resultItem, children: /* @__PURE__ */ i(
446
446
  "button",
447
447
  {
448
448
  className: r.resultLink,
449
- onClick: () => ve(n.path),
449
+ onClick: () => xe(n.path),
450
450
  children: [
451
451
  /* @__PURE__ */ t("span", { className: r.suggestionIcon, children: /* @__PURE__ */ t(ee, { "aria-hidden": !0 }) }),
452
452
  /* @__PURE__ */ t("span", { className: r.suggestionText, children: (() => {
453
453
  const a = n.title.toLowerCase().indexOf(h.toLowerCase());
454
454
  if (a === -1) return /* @__PURE__ */ t("span", { className: r.remainingText, children: n.title });
455
- const i = n.title.slice(0, a), u = n.title.slice(a, a + h.length), O = n.title.slice(a + h.length);
456
- return /* @__PURE__ */ o(ye, { children: [
457
- /* @__PURE__ */ t("span", { className: r.remainingText, children: i }),
455
+ const o = n.title.slice(0, a), u = n.title.slice(a, a + h.length), R = n.title.slice(a + h.length);
456
+ return /* @__PURE__ */ i(be, { children: [
457
+ /* @__PURE__ */ t("span", { className: r.remainingText, children: o }),
458
458
  /* @__PURE__ */ t("span", { className: r.highlightedText, children: u }),
459
- /* @__PURE__ */ t("span", { className: r.remainingText, children: O })
459
+ /* @__PURE__ */ t("span", { className: r.remainingText, children: R })
460
460
  ] });
461
461
  })() })
462
462
  ]
463
463
  }
464
464
  ) }, n.id)) }),
465
- b.length > 5 && /* @__PURE__ */ o(
465
+ y.length > 5 && /* @__PURE__ */ i(
466
466
  B,
467
467
  {
468
468
  href: "#",
469
469
  "data-color": "neutral",
470
470
  className: r.viewAllLink,
471
471
  onClick: (n) => {
472
- n.preventDefault(), m && m(`search/${encodeURIComponent(h)}`), p(!1), y("");
472
+ n.preventDefault(), m && m(`search/${encodeURIComponent(h)}`), p(!1), b("");
473
473
  },
474
474
  children: [
475
475
  l("header.viewAll"),
476
476
  " (",
477
- b.length,
477
+ y.length,
478
478
  ")"
479
479
  ]
480
480
  }
481
481
  )
482
- ] }) : /* @__PURE__ */ t("div", { className: r.noResults, children: /* @__PURE__ */ o(S, { children: [
482
+ ] }) : /* @__PURE__ */ t("div", { className: r.noResults, children: /* @__PURE__ */ i(D, { children: [
483
483
  l("header.noResults"),
484
484
  ' "',
485
485
  h,
@@ -489,10 +489,11 @@ const Ve = ({
489
489
  ] })
490
490
  );
491
491
  };
492
- function Ee(C) {
492
+ function Ne(C) {
493
493
  const e = C;
494
494
  return `
495
495
  .${e.header} {
496
+ --rk-header-extension-height: 44px;
496
497
  width: 100%;
497
498
  background-color: var(--ds-color-neutral-background-default);
498
499
  border-bottom: none;
@@ -502,10 +503,23 @@ function Ee(C) {
502
503
  flex-direction: column;
503
504
  font-family: 'Source Sans 3', sans-serif;
504
505
  }
506
+ .${e.header}::before {
507
+ content: '';
508
+ position: absolute;
509
+ left: 0;
510
+ top: 0;
511
+ bottom: 0;
512
+ width: max(241px, calc((100vw - 1364px) / 2 + 242px));
513
+ background-color: white;
514
+ z-index: 0;
515
+ pointer-events: none;
516
+ }
517
+ .${e.header}[data-header-extension="true"]::before { top: var(--rk-header-extension-height); }
518
+ .${e.header}[data-variant="compact"]::before { display: none; }
505
519
  .${e.headerExtension} {
506
520
  background-color: var(--ds-color-primary-color-red-base-default, #D52B1E);
507
521
  width: 100%;
508
- height: 44px;
522
+ height: var(--rk-header-extension-height);
509
523
  padding: 0 var(--ds-size-6);
510
524
  display: flex;
511
525
  justify-content: center;
@@ -550,7 +564,7 @@ function Ee(C) {
550
564
  .${e.extensionDivider} { width: 1px; height: 18px; background-color: rgba(247,233,232,1); }
551
565
  .${e.languageSwitch} { display: flex; align-items: center; gap: var(--ds-size-2); }
552
566
  .${e.languageLabel} { font-size: var(--ds-font-size-3); color: #ECECEC; }
553
- .${e.languageLink} { color: white; text-decoration: none; display: flex; align-items: center; gap: 4px; }
567
+ .${e.languageLink} { color: white !important; text-decoration: none; display: flex; align-items: center; gap: 4px; }
554
568
  .${e.header}[data-color] .${e.languageLabel} { color: var(--ds-color-base-contrast-subtle); }
555
569
  .${e.header}[data-color] .${e.languageLink} { color: var(--ds-color-base-contrast-default) !important; }
556
570
  .${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; }
@@ -558,11 +572,18 @@ function Ee(C) {
558
572
  display: flex; align-items: center; justify-content: space-between;
559
573
  min-height: 119px; width: 100%; max-width: 1364px;
560
574
  margin: 0 auto; padding: 0 var(--ds-size-6); box-sizing: border-box; gap: var(--ds-size-6);
575
+ /* Load-bearing for the slab above, not decoration. The slab is an absolutely
576
+ positioned ::before with z-index: 0, and a positioned box paints AFTER
577
+ ordinary in-flow content — so without lifting this row into its own stack
578
+ level the opaque white slab covers the logo. The bundled stylesheet pairs
579
+ the two rules; a consumer relying only on this fallback needs them both. */
580
+ position: relative; z-index: 10;
561
581
  }
562
582
  .${e.logoWrapper} { display: flex; align-items: center; height: 119px; flex-shrink: 0; background-color: white; }
563
583
  .${e.logo} { display: flex; align-items: center; justify-content: center; width: 217px; height: 100%; text-decoration: none; color: inherit; flex-shrink: 0; }
564
- .${e.redCrossLogo} { width: 169px; height: auto; display: block; }
565
- .${e.secondaryLogoWrapper} { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 var(--ds-size-6); background: var(--ds-color-neutral-background-default); }
584
+ .${e.redCrossLogo} { width: 169px; height: auto; display: block; color: #1e1e1e; }
585
+ .${e.header}[data-variant="compact"] .${e.redCrossLogo} { color: var(--ds-color-neutral-text-default); }
586
+ .${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); }
566
587
  .${e.secondaryLogo} { height: 24px; width: auto; display: block; }
567
588
  .${e.navItems} { display: flex; gap: 40px; align-items: center; margin-left: 24px; flex-grow: 1; justify-content: center; }
568
589
  .${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; }
@@ -581,10 +602,14 @@ function Ee(C) {
581
602
  .${e.menuOverlay}, .${e.searchOverlay} {
582
603
  position: absolute; top: 100%; left: 0; width: 100%;
583
604
  background-color: var(--ds-color-neutral-background-default);
584
- border-bottom: none;
585
- box-shadow: none; z-index: 999;
605
+ z-index: 999;
606
+ }
607
+ .${e.menuOverlay} { border-bottom: none; box-shadow: none; }
608
+ .${e.searchOverlay} {
609
+ padding: var(--ds-size-10) 0;
610
+ border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
611
+ box-shadow: var(--ds-shadow-lg);
586
612
  }
587
- .${e.searchOverlay} { padding: var(--ds-size-10) 0; }
588
613
  .${e.searchOverlay}::before { display: none; }
589
614
  .${e.searchContent} {
590
615
  max-width: 1364px; margin: 0 auto;
@@ -592,7 +617,7 @@ function Ee(C) {
592
617
  display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box;
593
618
  }
594
619
  .${e.menuContent} { max-width: 1364px; margin: 0 auto; display: flex; flex-direction: row; align-items: stretch; box-sizing: border-box; }
595
- .${e.menuLeftColumn} { width: calc(217px + var(--ds-size-6)); flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: var(--ds-size-6); }
620
+ .${e.menuLeftColumn} { width: calc(217px + var(--ds-size-6)); flex-shrink: 0; display: flex; }
596
621
  .${e.menuRightColumn} { flex: 1; display: flex; flex-direction: column; padding: 48px 24px 80px 24px; gap: 24px; }
597
622
  .${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; }
598
623
  .${e.navList} { display: flex; flex-direction: column; gap: var(--ds-size-3); align-items: flex-start; }
@@ -616,10 +641,11 @@ function Ee(C) {
616
641
  .${e.noResults} { padding: var(--ds-size-4); text-align: center; color: var(--ds-color-neutral-text-subtle); }
617
642
  @media (max-width: 850px) {
618
643
  .${e.header} { z-index: 10000; position: relative; }
644
+ .${e.header}::before { display: none; }
619
645
  .${e.headerExtension} { display: none; }
620
646
  .${e.headerInner} { padding: var(--ds-size-5) var(--ds-size-6); min-height: auto; }
621
647
  .${e.navItems} { display: none; }
622
- .${e.logoWrapper} { gap: var(--ds-size-2); }
648
+ .${e.logoWrapper} { gap: var(--ds-size-2); background-color: transparent; height: auto; }
623
649
  .${e.logo} { height: 40px; }
624
650
  /* Mobile: always hide primary logo in header */
625
651
  .${e.primaryLogo} { display: none; }
@@ -628,14 +654,12 @@ function Ee(C) {
628
654
  .${e.actions} { gap: var(--ds-size-4); }
629
655
  .${e.userName} { display: none; }
630
656
  .${e.menuButton} .${e.buttonText} { display: none; }
631
- .${e.searchButtonWrapper} .${e.buttonText} { display: inline; }
632
657
  .${e.menuOverlay} { position: fixed; top: var(--header-height-mobile, 70px); left: 0; right: 0; bottom: 0; width: 100vw; height: calc(100vh - var(--header-height-mobile, 70px)); z-index: 9999; border-radius: 0; border: none; overflow-y: auto; }
633
658
  .${e.searchOverlay} { width: 100%; right: 0; left: 0; border-radius: 0; border: none; }
634
659
  .${e.searchContent} { padding: var(--ds-size-6); }
635
660
  .${e.menuContent} { flex-direction: column; padding: 0; min-height: 100%; }
636
661
  .${e.menuRightColumn} { padding: var(--ds-size-4) var(--ds-size-6) var(--ds-size-6) var(--ds-size-6); gap: var(--ds-size-4); flex: 1; display: flex; flex-direction: column; min-height: 0; }
637
662
  .${e.slotContent} { padding: 0; }
638
- .${e.menuLeftColumn} { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: var(--ds-size-6); }
639
663
  .${e.menuBrand} { display: flex; justify-content: flex-start; margin-top: auto; padding: var(--ds-size-6); margin-left: calc(-1 * var(--ds-size-6)); margin-right: calc(-1 * var(--ds-size-6)); margin-bottom: calc(-1 * var(--ds-size-6)); background-color: white; }
640
664
  .${e.menuUtilities} .${e.languageSwitch} [popover] { background-color: var(--ds-color-neutral-background-default) !important; margin-top: 0 !important; position: fixed !important; overflow: visible; z-index: 20000 !important; }
641
665
  @media (prefers-color-scheme: light) {
@@ -649,5 +673,5 @@ function Ee(C) {
649
673
  `;
650
674
  }
651
675
  export {
652
- Ve as Header
676
+ je as Header
653
677
  };