rk-designsystem 1.2.4 → 1.3.0

package/dist/componentlibrary.es.js

@@ -1,101 +1,95 @@
-import { jsx as t, jsxs as r, Fragment as Se } from "react/jsx-runtime";
-import Ne, { forwardRef as ie, useState as O, useContext as He, createContext as Je, useEffect as z, useMemo as fe, useCallback as se, useRef as Qe } from "react";
-import { Alert as et, Avatar as tt, BadgePosition as nt, Badge as ot, Breadcrumbs as rt, BreadcrumbsItem as at, BreadcrumbsLink as st, BreadcrumbsList as it, Button as Me, Card as lt, CardBlock as dt, Checkbox as ct, useCheckboxGroup as pt, Fieldset as Ue, Chip as mt, Spinner as gt, Details as ut, Dialog as ht, Divider as ft, Dropdown as kt, DropdownButton as vt, DropdownHeading as bt, DropdownItem as yt, DropdownList as xt, DropdownTrigger as Tt, DropdownTriggerContext as Ct, ErrorSummary as wt, Field as St, FieldCounter as It, FieldDescription as _t, Heading as Dt, Input as Lt, Label as At, Link as Nt, List as Mt, Pagination as jt, PaginationButton as Ft, PaginationItem as Bt, PaginationList as Et, usePagination as $t, Paragraph as Pt, Popover as zt, Radio as Rt, useRadioGroup as Gt, Search as Wt, SearchInput as Ht, SearchClear as Ut, SearchButton as Vt, Select as Ot, Skeleton as Kt, SkipLink as qt, EXPERIMENTAL_Suggestion as Yt, Switch as Zt, Table as Xt, Tabs as Jt, Tag as Qt, Textarea as en, Textfield as tn, ToggleGroup as nn, Tooltip as on, ValidationMessage as rn } from "@digdir/designsystemet-react";
-import { startOfMonth as ue, isValid as Ie, isSameMonth as Fe, startOfWeek as Ve, format as ke, addDays as Oe, subMonths as an, addMonths as sn, isSameDay as ln, isToday as dn, eachDayOfInterval as cn } from "date-fns";
-import pn from "embla-carousel-react";
-import { ChevronLeftIcon as mn, ChevronRightIcon as gn, ChevronDownIcon as Be, XMarkIcon as _e, MagnifyingGlassIcon as Ee, MenuHamburgerIcon as $e, HeartIcon as un } from "@navikt/aksel-icons";
-const hn = ie((n, e) => /* @__PURE__ */ t(et, { ref: e, ...n }));
-hn.displayName = "Alert";
-const Ke = ie((n, e) => /* @__PURE__ */ t(tt, { ref: e, ...n }));
-Ke.displayName = "Avatar";
-const fn = ie((n, e) => /* @__PURE__ */ t(ot, { ref: e, ...n }));
-fn.displayName = "Badge";
-const Os = nt, Ks = rt, qs = it, Ys = at, Zs = st;
-function kn() {
-  return {
-    "--dsc-button-background": "var(--ds-color-surface-tinted)",
-    "--dsc-button-background--hover": "var(--ds-color-surface-hover)",
-    "--dsc-button-background--active": "var(--ds-color-surface-active)",
-    "--dsc-button-color": "var(--ds-color-text-default)",
-    "--dsc-button-color--hover": "var(--ds-color-text-default)",
-    "--dsc-button-border-color": "transparent"
-  };
-}
-const ce = ie(function({ variant: e, shape: a, style: d, ...h }, f) {
-  const g = {};
-  e === "soft" && Object.assign(g, kn()), a === "pill" && (g.borderRadius = "var(--ds-border-radius-full)");
-  const k = Object.keys(g).length === 0 && !d ? void 0 : { ...g, ...d }, D = {};
-  return e !== void 0 && (D.variant = e), a === "pill" && (D["data-shape"] = "pill"), /* @__PURE__ */ t(Me, { ref: f, ...h, ...D, style: k });
+import { jsx as t, jsxs as r, Fragment as tt } from "react/jsx-runtime";
+import ye, { forwardRef as me, useState as Z, useContext as nt, createContext as pt, useEffect as U, useRef as Ee, useMemo as Ae, useCallback as ce, useId as We } from "react";
+import { Heading as mt, Alert as gt, Avatar as ut, BadgePosition as ht, Badge as ft, Breadcrumbs as kt, BreadcrumbsItem as vt, BreadcrumbsLink as bt, BreadcrumbsList as yt, Button as Ge, Card as xt, CardBlock as Tt, Checkbox as Ct, useCheckboxGroup as wt, Fieldset as ot, Chip as St, Spinner as _t, Details as It, Dialog as Lt, Divider as Dt, Dropdown as Mt, DropdownButton as jt, DropdownHeading as At, DropdownItem as Nt, DropdownList as Et, DropdownTrigger as Bt, DropdownTriggerContext as Ft, ErrorSummary as Pt, Field as $t, FieldCounter as zt, FieldDescription as Rt, Input as Gt, Label as Ht, Link as Wt, List as Ut, Pagination as Vt, PaginationButton as Ot, PaginationItem as Kt, PaginationList as Zt, usePagination as qt, Paragraph as Yt, Popover as Xt, Radio as Jt, useRadioGroup as Qt, Search as en, SearchInput as tn, SearchClear as nn, SearchButton as on, Select as rn, Skeleton as an, SkipLink as sn, EXPERIMENTAL_Suggestion as ln, Switch as dn, Table as cn, Tabs as pn, Tag as mn, Textarea as gn, Textfield as un, ToggleGroup as hn, Tooltip as fn, ValidationMessage as kn } from "@digdir/designsystemet-react";
+import { startOfMonth as be, isValid as De, isSameMonth as Fe, format as ve, startOfWeek as He, addDays as Ce, subMonths as Ve, addMonths as Oe, endOfWeek as vn, isSameDay as Ke, isToday as bn, eachDayOfInterval as yn, getDaysInMonth as xn, setDate as Tn, parse as Cn } from "date-fns";
+import wn from "embla-carousel-react";
+import { ChevronLeftIcon as Sn, ChevronRightIcon as _n, PlayIcon as In, PauseIcon as Ln, ChevronDownIcon as Ze, XMarkIcon as qe, MagnifyingGlassIcon as Ye, MenuHamburgerIcon as Dn, HeartIcon as Mn } from "@navikt/aksel-icons";
+const rt = me((n, e) => /* @__PURE__ */ t(mt, { ref: e, ...n }));
+rt.displayName = "Heading";
+const jn = me((n, e) => {
+  const { title: a, titleLevel: c, children: k, ...y } = n;
+  return /* @__PURE__ */ r(gt, { ref: e, ...y, children: [
+    a && (c ? /* @__PURE__ */ t(rt, { level: c, "data-size": "2xs", style: { marginBottom: "var(--ds-size-1)" }, children: a }) : /* @__PURE__ */ t("p", { className: "ds-heading", "data-size": "2xs", style: { marginBottom: "var(--ds-size-1)" }, children: a })),
+    k
+  ] });
 });
-ce.displayName = "Button";
-const vn = lt, Xs = dt;
-vn.displayName = "Card";
-const bn = ct, yn = Ue, Js = pt;
-bn.displayName = "Checkbox";
-yn.displayName = "Fieldset";
-const Qs = mt;
-function De(n) {
+jn.displayName = "Alert";
+const at = me((n, e) => /* @__PURE__ */ t(ut, { ref: e, ...n }));
+at.displayName = "Avatar";
+const An = me((n, e) => /* @__PURE__ */ t(ft, { ref: e, ...n }));
+An.displayName = "Badge";
+const gi = ht, ui = kt, hi = yt, fi = vt, ki = bt, fe = me(function({ variant: e, ...a }, c) {
+  return /* @__PURE__ */ t(Ge, { ref: c, variant: e, ...a });
+});
+fe.displayName = "Button";
+const Nn = xt, vi = Tt;
+Nn.displayName = "Card";
+const En = Ct, Bn = ot, bi = wt;
+En.displayName = "Checkbox";
+Bn.displayName = "Fieldset";
+const yi = St;
+function $e(n) {
   return (e = {}) => {
     const a = e.width ? String(e.width) : n.defaultWidth;
     return n.formats[a] || n.formats[n.defaultWidth];
   };
 }
-function ve(n) {
+function _e(n) {
   return (e, a) => {
-    const d = a != null && a.context ? String(a.context) : "standalone";
-    let h;
-    if (d === "formatting" && n.formattingValues) {
-      const g = n.defaultFormattingWidth || n.defaultWidth, k = a != null && a.width ? String(a.width) : g;
-      h = n.formattingValues[k] || n.formattingValues[g];
+    const c = a != null && a.context ? String(a.context) : "standalone";
+    let k;
+    if (c === "formatting" && n.formattingValues) {
+      const f = n.defaultFormattingWidth || n.defaultWidth, x = a != null && a.width ? String(a.width) : f;
+      k = n.formattingValues[x] || n.formattingValues[f];
     } else {
-      const g = n.defaultWidth, k = a != null && a.width ? String(a.width) : n.defaultWidth;
-      h = n.values[k] || n.values[g];
+      const f = n.defaultWidth, x = a != null && a.width ? String(a.width) : n.defaultWidth;
+      k = n.values[x] || n.values[f];
     }
-    const f = n.argumentCallback ? n.argumentCallback(e) : e;
-    return h[f];
+    const y = n.argumentCallback ? n.argumentCallback(e) : e;
+    return k[y];
   };
 }
-function be(n) {
+function Ie(n) {
   return (e, a = {}) => {
-    const d = a.width, h = d && n.matchPatterns[d] || n.matchPatterns[n.defaultMatchWidth], f = e.match(h);
-    if (!f)
+    const c = a.width, k = c && n.matchPatterns[c] || n.matchPatterns[n.defaultMatchWidth], y = e.match(k);
+    if (!y)
       return null;
-    const g = f[0], k = d && n.parsePatterns[d] || n.parsePatterns[n.defaultParseWidth], D = Array.isArray(k) ? Tn(k, (_) => _.test(g)) : (
+    const f = y[0], x = c && n.parsePatterns[c] || n.parsePatterns[n.defaultParseWidth], B = Array.isArray(x) ? Pn(x, (L) => L.test(f)) : (
       // [TODO] -- I challenge you to fix the type
-      xn(k, (_) => _.test(g))
+      Fn(x, (L) => L.test(f))
     );
-    let S;
-    S = n.valueCallback ? n.valueCallback(D) : D, S = a.valueCallback ? (
+    let I;
+    I = n.valueCallback ? n.valueCallback(B) : B, I = a.valueCallback ? (
       // [TODO] -- I challenge you to fix the type
-      a.valueCallback(S)
-    ) : S;
-    const R = e.slice(g.length);
-    return { value: S, rest: R };
+      a.valueCallback(I)
+    ) : I;
+    const J = e.slice(f.length);
+    return { value: I, rest: J };
   };
 }
-function xn(n, e) {
+function Fn(n, e) {
   for (const a in n)
     if (Object.prototype.hasOwnProperty.call(n, a) && e(n[a]))
       return a;
 }
-function Tn(n, e) {
+function Pn(n, e) {
   for (let a = 0; a < n.length; a++)
     if (e(n[a]))
       return a;
 }
-function Cn(n) {
+function $n(n) {
   return (e, a = {}) => {
-    const d = e.match(n.matchPattern);
-    if (!d) return null;
-    const h = d[0], f = e.match(n.parsePattern);
-    if (!f) return null;
-    let g = n.valueCallback ? n.valueCallback(f[0]) : f[0];
-    g = a.valueCallback ? a.valueCallback(g) : g;
-    const k = e.slice(h.length);
-    return { value: g, rest: k };
+    const c = e.match(n.matchPattern);
+    if (!c) return null;
+    const k = c[0], y = e.match(n.parsePattern);
+    if (!y) return null;
+    let f = n.valueCallback ? n.valueCallback(y[0]) : y[0];
+    f = a.valueCallback ? a.valueCallback(f) : f;
+    const x = e.slice(k.length);
+    return { value: f, rest: x };
   };
 }
-const wn = {
+const zn = {
   lessThanXSeconds: {
     one: "mindre enn ett sekund",
     other: "mindre enn {{count}} sekunder"
@@ -157,54 +151,54 @@ const wn = {
     one: "nesten ett år",
     other: "nesten {{count}} år"
   }
-}, Sn = (n, e, a) => {
-  let d;
-  const h = wn[n];
-  return typeof h == "string" ? d = h : e === 1 ? d = h.one : d = h.other.replace("{{count}}", String(e)), a != null && a.addSuffix ? a.comparison && a.comparison > 0 ? "om " + d : d + " siden" : d;
-}, In = {
+}, Rn = (n, e, a) => {
+  let c;
+  const k = zn[n];
+  return typeof k == "string" ? c = k : e === 1 ? c = k.one : c = k.other.replace("{{count}}", String(e)), a != null && a.addSuffix ? a.comparison && a.comparison > 0 ? "om " + c : c + " siden" : c;
+}, Gn = {
   full: "EEEE d. MMMM y",
   long: "d. MMMM y",
   medium: "d. MMM y",
   short: "dd.MM.y"
-}, _n = {
+}, Hn = {
   full: "'kl'. HH:mm:ss zzzz",
   long: "HH:mm:ss z",
   medium: "HH:mm:ss",
   short: "HH:mm"
-}, Dn = {
+}, Wn = {
   full: "{{date}} 'kl.' {{time}}",
   long: "{{date}} 'kl.' {{time}}",
   medium: "{{date}} {{time}}",
   short: "{{date}} {{time}}"
-}, Ln = {
-  date: De({
-    formats: In,
+}, Un = {
+  date: $e({
+    formats: Gn,
     defaultWidth: "full"
   }),
-  time: De({
-    formats: _n,
+  time: $e({
+    formats: Hn,
     defaultWidth: "full"
   }),
-  dateTime: De({
-    formats: Dn,
+  dateTime: $e({
+    formats: Wn,
     defaultWidth: "full"
   })
-}, An = {
+}, Vn = {
   lastWeek: "'forrige' eeee 'kl.' p",
   yesterday: "'i går kl.' p",
   today: "'i dag kl.' p",
   tomorrow: "'i morgen kl.' p",
   nextWeek: "EEEE 'kl.' p",
   other: "P"
-}, Nn = (n, e, a, d) => An[n], Mn = {
+}, On = (n, e, a, c) => Vn[n], Kn = {
   narrow: ["f.Kr.", "e.Kr."],
   abbreviated: ["f.Kr.", "e.Kr."],
   wide: ["før Kristus", "etter Kristus"]
-}, jn = {
+}, Zn = {
   narrow: ["1", "2", "3", "4"],
   abbreviated: ["Q1", "Q2", "Q3", "Q4"],
   wide: ["1. kvartal", "2. kvartal", "3. kvartal", "4. kvartal"]
-}, Fn = {
+}, qn = {
   narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
   abbreviated: [
     "jan.",
@@ -234,7 +228,7 @@ const wn = {
     "november",
     "desember"
   ]
-}, Bn = {
+}, Yn = {
   narrow: ["S", "M", "T", "O", "T", "F", "L"],
   short: ["sø", "ma", "ti", "on", "to", "fr", "lø"],
   abbreviated: ["søn", "man", "tir", "ons", "tor", "fre", "lør"],
@@ -247,7 +241,7 @@ const wn = {
     "fredag",
     "lørdag"
   ]
-}, En = {
+}, Xn = {
   narrow: {
     am: "a",
     pm: "p",
@@ -278,46 +272,46 @@ const wn = {
     evening: "på kvelden",
     night: "på natten"
   }
-}, $n = (n, e) => Number(n) + ".", Pn = {
-  ordinalNumber: $n,
-  era: ve({
-    values: Mn,
+}, Jn = (n, e) => Number(n) + ".", Qn = {
+  ordinalNumber: Jn,
+  era: _e({
+    values: Kn,
     defaultWidth: "wide"
   }),
-  quarter: ve({
-    values: jn,
+  quarter: _e({
+    values: Zn,
     defaultWidth: "wide",
     argumentCallback: (n) => n - 1
   }),
-  month: ve({
-    values: Fn,
+  month: _e({
+    values: qn,
     defaultWidth: "wide"
   }),
-  day: ve({
-    values: Bn,
+  day: _e({
+    values: Yn,
     defaultWidth: "wide"
   }),
-  dayPeriod: ve({
-    values: En,
+  dayPeriod: _e({
+    values: Xn,
     defaultWidth: "wide"
   })
-}, zn = /^(\d+)\.?/i, Rn = /\d+/i, Gn = {
+}, eo = /^(\d+)\.?/i, to = /\d+/i, no = {
   narrow: /^(f\.? ?Kr\.?|fvt\.?|e\.? ?Kr\.?|evt\.?)/i,
   abbreviated: /^(f\.? ?Kr\.?|fvt\.?|e\.? ?Kr\.?|evt\.?)/i,
   wide: /^(før Kristus|før vår tid|etter Kristus|vår tid)/i
-}, Wn = {
+}, oo = {
   any: [/^f/i, /^e/i]
-}, Hn = {
+}, ro = {
   narrow: /^[1234]/i,
   abbreviated: /^q[1234]/i,
   wide: /^[1234](\.)? kvartal/i
-}, Un = {
+}, ao = {
   any: [/1/i, /2/i, /3/i, /4/i]
-}, Vn = {
+}, so = {
   narrow: /^[jfmasond]/i,
   abbreviated: /^(jan|feb|mars?|apr|mai|juni?|juli?|aug|sep|okt|nov|des)\.?/i,
   wide: /^(januar|februar|mars|april|mai|juni|juli|august|september|oktober|november|desember)/i
-}, On = {
+}, io = {
   narrow: [
     /^j/i,
     /^f/i,
@@ -346,17 +340,17 @@ const wn = {
     /^n/i,
     /^d/i
   ]
-}, Kn = {
+}, lo = {
   narrow: /^[smtofl]/i,
   short: /^(sø|ma|ti|on|to|fr|lø)/i,
   abbreviated: /^(søn|man|tir|ons|tor|fre|lør)/i,
   wide: /^(søndag|mandag|tirsdag|onsdag|torsdag|fredag|lørdag)/i
-}, qn = {
+}, co = {
   any: [/^s/i, /^m/i, /^ti/i, /^o/i, /^to/i, /^f/i, /^l/i]
-}, Yn = {
+}, po = {
   narrow: /^(midnatt|middag|(på) (morgenen|ettermiddagen|kvelden|natten)|[ap])/i,
   any: /^([ap]\.?\s?m\.?|midnatt|middag|(på) (morgenen|ettermiddagen|kvelden|natten))/i
-}, Zn = {
+}, mo = {
   any: {
     am: /^a(\.?\s?m\.?)?$/i,
     pm: /^p(\.?\s?m\.?)?$/i,
@@ -367,55 +361,55 @@ const wn = {
     evening: /kveld/i,
     night: /natt/i
   }
-}, Xn = {
-  ordinalNumber: Cn({
-    matchPattern: zn,
-    parsePattern: Rn,
+}, go = {
+  ordinalNumber: $n({
+    matchPattern: eo,
+    parsePattern: to,
     valueCallback: (n) => parseInt(n, 10)
   }),
-  era: be({
-    matchPatterns: Gn,
+  era: Ie({
+    matchPatterns: no,
     defaultMatchWidth: "wide",
-    parsePatterns: Wn,
+    parsePatterns: oo,
     defaultParseWidth: "any"
   }),
-  quarter: be({
-    matchPatterns: Hn,
+  quarter: Ie({
+    matchPatterns: ro,
     defaultMatchWidth: "wide",
-    parsePatterns: Un,
+    parsePatterns: ao,
     defaultParseWidth: "any",
     valueCallback: (n) => n + 1
   }),
-  month: be({
-    matchPatterns: Vn,
+  month: Ie({
+    matchPatterns: so,
     defaultMatchWidth: "wide",
-    parsePatterns: On,
+    parsePatterns: io,
     defaultParseWidth: "any"
   }),
-  day: be({
-    matchPatterns: Kn,
+  day: Ie({
+    matchPatterns: lo,
     defaultMatchWidth: "wide",
-    parsePatterns: qn,
+    parsePatterns: co,
     defaultParseWidth: "any"
   }),
-  dayPeriod: be({
-    matchPatterns: Yn,
+  dayPeriod: Ie({
+    matchPatterns: po,
     defaultMatchWidth: "any",
-    parsePatterns: Zn,
+    parsePatterns: mo,
     defaultParseWidth: "any"
   })
 }, he = {
   code: "nb",
-  formatDistance: Sn,
-  formatLong: Ln,
-  formatRelative: Nn,
-  localize: Pn,
-  match: Xn,
+  formatDistance: Rn,
+  formatLong: Un,
+  formatRelative: On,
+  localize: Qn,
+  match: go,
   options: {
     weekStartsOn: 1,
     firstWeekContainsDate: 4
   }
-}, qe = ({ title: n, ...e }) => /* @__PURE__ */ r(
+}, st = ({ title: n, ...e }) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -440,8 +434,8 @@ const wn = {
     ]
   }
 );
-qe.displayName = "ChevronLeftIcon";
-const Ye = ({ title: n, ...e }) => /* @__PURE__ */ r(
+st.displayName = "ChevronLeftIcon";
+const it = ({ title: n, ...e }) => /* @__PURE__ */ r(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -466,20 +460,21 @@ const Ye = ({ title: n, ...e }) => /* @__PURE__ */ r(
     ]
   }
 );
-Ye.displayName = "ChevronRightIcon";
-const Jn = "_calendarContainer_htlea_1", Qn = "_calendarHeader_htlea_16", eo = "_monthYear_htlea_23", to = "_navigationButtons_htlea_34", no = "_grid_htlea_43", oo = "_dayNameCell_htlea_51", ro = "_dateCell_htlea_69", ao = "_dateNumberContainer_htlea_95", so = "_otherMonth_htlea_108", io = "_disabled_htlea_108", lo = "_selectedDate_htlea_134", ee = {
-  calendarContainer: Jn,
-  calendarHeader: Qn,
-  monthYear: eo,
-  navigationButtons: to,
-  grid: no,
-  dayNameCell: oo,
-  dateCell: ro,
-  dateNumberContainer: ao,
-  otherMonth: so,
-  disabled: io,
-  selectedDate: lo
-}, co = {
+it.displayName = "ChevronRightIcon";
+const uo = "_calendarContainer_1ukqo_1", ho = "_calendarHeader_1ukqo_16", fo = "_monthYear_1ukqo_23", ko = "_navigationButtons_1ukqo_34", vo = "_gridWrapper_1ukqo_43", bo = "_gridRow_1ukqo_48", yo = "_dayNameCell_1ukqo_55", xo = "_dateCell_1ukqo_73", To = "_dateNumberContainer_1ukqo_106", Co = "_otherMonth_1ukqo_119", wo = "_disabled_1ukqo_119", So = "_selectedDate_1ukqo_145", de = {
+  calendarContainer: uo,
+  calendarHeader: ho,
+  monthYear: fo,
+  navigationButtons: ko,
+  gridWrapper: vo,
+  gridRow: bo,
+  dayNameCell: yo,
+  dateCell: xo,
+  dateNumberContainer: To,
+  otherMonth: Co,
+  disabled: wo,
+  selectedDate: So
+}, _o = {
   NO: {
     // Header
     header: {
@@ -500,6 +495,7 @@ const Jn = "_calendarContainer_htlea_1", Qn = "_calendarHeader_htlea_16", eo = "
       suggestions: "Forslag til søk",
       viewAll: "Vis alle resultater",
       noResults: "Ingen treff funnet for",
+      suggestionCount: "{count} forslag",
       selectLanguage: "Velg språk",
       homeAriaLabel: "Norges Røde Kors Hjem",
       nav: {
@@ -507,6 +503,7 @@ const Jn = "_calendarContainer_htlea_1", Qn = "_calendarHeader_htlea_16", eo = "
         components: "Komponenter",
         code: "Kode",
         tokens: "Tokens",
+        skipToContent: "Hopp til hovedinnhold",
         work: "Vårt arbeid",
         volunteer: "Bli frivillig",
         courses: "Kurs og opplæring"
@@ -516,6 +513,16 @@ const Jn = "_calendarContainer_htlea_1", Qn = "_calendarHeader_htlea_16", eo = "
     home: {
       heroTitle: "Røde Kors Designsystem",
       heroLead: "Felles komponentbibliotek og retningslinjer for design og utvikling av digitale løsninger i Røde Kors.",
+      hero: {
+        kicker: "For designere og utviklere",
+        title: "Ett felles designspråk for Røde Kors",
+        lead: "Ferdige React-komponenter, designtokens og retningslinjer — bygget på Digdir Designsystemet og tilpasset Røde Kors sin visuelle identitet.",
+        primaryCta: "Kom i gang",
+        secondaryCta: "Utforsk komponenter",
+        specimenButton: "Bli frivillig",
+        breadcrumbLabel: "Du er her",
+        breadcrumbHome: "Hjem"
+      },
       searchComponents: "Søk i komponenter",
       exploreSystem: "Utforsk systemet",
       componentsDesc: "Bibliotek med ferdige React-komponenter.",
@@ -524,6 +531,11 @@ const Jn = "_calendarContainer_htlea_1", Qn = "_calendarHeader_htlea_16", eo = "
       tokensDesc: "Design tokens, farger og spacing.",
       universalDesign: "Universell utforming",
       universalDesignText: "Innebygd tilgjengelighet som standard. Vi følger WCAG 2.1-kravene strengt.",
+      palette: {
+        title: "Varme farger",
+        lead: "Fargepaletten er utvidet med varme, nøytrale toner som komplementerer rød uten å konkurrere med den — og gir flaten mer pust.",
+        link: "Se alle tokens"
+      },
       readGuidelines: "Les retningslinjene",
       consistentBrand: "Konsistent merkevare",
       consistentBrandText: "Design tokens sikrer at Røde Kors sin visuelle profil ivaretas på alle flater.",
@@ -595,7 +607,11 @@ const Jn = "_calendarContainer_htlea_1", Qn = "_calendarHeader_htlea_16", eo = "
       intro: "Designsystemet inneholder grunnleggende komponenter som kan settes sammen på mange ulike måter og i forskjellige mønstre.",
       searchPlaceholder: "Søk etter komponent...",
       searchAriaLabel: "Søk i komponenter",
-      noResults: "Ingen komponenter funnet for"
+      noResults: "Ingen komponenter funnet for",
+      openLabel: "Les mer",
+      ctaTitle: "Utforsk komponentene i Storybook",
+      ctaText: "Se alle varianter, tilstander og kodeeksempler i den interaktive dokumentasjonen.",
+      ctaButton: "Åpne Storybook"
     },
     // Code Page
     code: {
@@ -1509,7 +1525,9 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
       previousImage: "Forrige bilde",
       nextImage: "Neste bilde",
       imagePosition: "Bildeposisjon",
-      goToImage: "Gå til bilde"
+      goToImage: "Gå til bilde",
+      pauseAutoplay: "Pause automatisk avspilling",
+      resumeAutoplay: "Start automatisk avspilling"
     },
     // DatePicker
     datePicker: {
@@ -1541,6 +1559,7 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
       suggestions: "Search suggestions",
       viewAll: "View all results",
       noResults: "No results found for",
+      suggestionCount: "{count} suggestions",
       selectLanguage: "Select language",
       homeAriaLabel: "Norwegian Red Cross Home",
       nav: {
@@ -1548,6 +1567,7 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
         components: "Components",
         code: "Code",
         tokens: "Tokens",
+        skipToContent: "Skip to main content",
         work: "Our Work",
         volunteer: "Volunteer",
         courses: "Courses & Training"
@@ -1557,6 +1577,16 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
     home: {
       heroTitle: "Red Cross Design System",
       heroLead: "Common component library and guidelines for design and development of digital solutions in Red Cross.",
+      hero: {
+        kicker: "For designers and developers",
+        title: "One shared design language for the Red Cross",
+        lead: "Ready-made React components, design tokens and guidelines — built on the Digdir Design System and tailored to the Red Cross visual identity.",
+        primaryCta: "Get started",
+        secondaryCta: "Explore components",
+        specimenButton: "Volunteer",
+        breadcrumbLabel: "You are here",
+        breadcrumbHome: "Home"
+      },
       searchComponents: "Search components",
       exploreSystem: "Explore the system",
       componentsDesc: "Library with ready-made React components.",
@@ -1565,6 +1595,11 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
       tokensDesc: "Design tokens, colors, and spacing.",
       universalDesign: "Universal Design",
       universalDesignText: "Built-in accessibility by default. We strictly follow WCAG 2.1 requirements.",
+      palette: {
+        title: "Warm colors",
+        lead: "The color palette has been extended with warm, neutral tones that complement red without competing with it — giving the surface more room to breathe.",
+        link: "See all tokens"
+      },
       readGuidelines: "Read guidelines",
       consistentBrand: "Consistent Brand",
       consistentBrandText: "Design tokens ensure the Red Cross visual profile is maintained across all surfaces.",
@@ -1636,7 +1671,11 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
       intro: "The design system contains fundamental components that can be combined in many different ways and in different patterns.",
       searchPlaceholder: "Search for component...",
       searchAriaLabel: "Search components",
-      noResults: "No components found for"
+      noResults: "No components found for",
+      openLabel: "Learn more",
+      ctaTitle: "Explore the components in Storybook",
+      ctaText: "See every variant, state and code example in the interactive documentation.",
+      ctaButton: "Open Storybook"
     },
     // Code Page
     code: {
@@ -2552,7 +2591,9 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
       previousImage: "Previous image",
       nextImage: "Next image",
       imagePosition: "Image position",
-      goToImage: "Go to image"
+      goToImage: "Go to image",
+      pauseAutoplay: "Pause autoplay",
+      resumeAutoplay: "Resume autoplay"
     },
     // DatePicker
     datePicker: {
@@ -2564,25 +2605,25 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
       openDatePicker: "Open date picker"
     }
   }
-}, je = Je(void 0), ei = ({ children: n }) => {
-  const [e, a] = O("NO"), d = (h) => {
-    const f = h.split(".");
-    let g = co[e];
-    for (const k of f) {
-      if (g[k] === void 0)
-        return console.warn(`Translation missing for key: ${h} in language: ${e}`), h;
-      g = g[k];
+}, Ue = pt(void 0), xi = ({ children: n }) => {
+  const [e, a] = Z("NO"), c = (k) => {
+    const y = k.split(".");
+    let f = _o[e];
+    for (const x of y) {
+      if (f[x] === void 0)
+        return console.warn(`Translation missing for key: ${k} in language: ${e}`), k;
+      f = f[x];
     }
-    return g;
+    return f;
   };
-  return /* @__PURE__ */ t(je.Provider, { value: { language: e, setLanguage: a, t: d }, children: n });
-}, ti = () => {
-  const n = He(je);
+  return /* @__PURE__ */ t(Ue.Provider, { value: { language: e, setLanguage: a, t: c }, children: n });
+}, Ti = () => {
+  const n = nt(Ue);
   if (n === void 0)
     throw new Error("useLanguage must be used within a LanguageProvider");
   return n;
-}, Te = () => {
-  const n = He(je);
+}, Be = () => {
+  const n = nt(Ue);
   return n === void 0 ? {
     language: "NO",
     setLanguage: () => {
@@ -2609,6 +2650,7 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
       "header.suggestions": "Forslag",
       "header.viewAll": "Se alle",
       "header.noResults": "Ingen resultater for",
+      "header.suggestionCount": "{count} forslag",
       // Footer translations
       "footer.shortcuts": "Snarveier",
       "footer.shortcutsLinks.services": "Tilbudene",
@@ -2635,6 +2677,8 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
       "carousel.nextImage": "Neste bilde",
       "carousel.imagePosition": "Bildeposisjon",
       "carousel.goToImage": "Gå til bilde",
+      "carousel.pauseAutoplay": "Pause automatisk avspilling",
+      "carousel.resumeAutoplay": "Start automatisk avspilling",
       // DatePicker translations
       "datePicker.previousMonth": "Forrige måned",
       "datePicker.nextMonth": "Neste måned",
@@ -2642,122 +2686,182 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
       "dateInput.openDatePicker": "Åpne datovelger"
     })[e] || e
   } : n;
-}, po = (n) => {
-  const e = ue(n), a = Ve(e, { locale: he }), d = Oe(a, 41);
-  return cn({ start: a, end: d });
-}, Pe = (n) => n && n.charAt(0).toUpperCase() + n.slice(1), mo = ({
+}, Io = (n) => {
+  const e = be(n), a = He(e, { locale: he }), c = Ce(a, 41);
+  return yn({ start: a, end: c });
+}, Xe = (n) => n && n.charAt(0).toUpperCase() + n.slice(1), Le = (n, e) => {
+  const a = Math.min(n.getDate(), xn(e));
+  return Tn(be(e), a);
+}, Lo = ({
   initialDate: n = /* @__PURE__ */ new Date(),
   selectedDate: e = null,
-  // Prop for valgt dato
   onDateSelect: a,
-  "data-color": d,
-  // <-- Destrukturert
-  "data-size": h
-  // <-- Destrukturert
+  "data-color": c,
+  "data-size": k
 }) => {
-  const { t: f } = Te();
-  z(() => {
-    const m = "rk-datepicker-inline-styles";
-    if (typeof document > "u" || document.getElementById(m)) return;
-    const M = go(ee), I = document.createElement("style");
-    I.id = m, I.textContent = M, document.head.appendChild(I);
+  const { t: y } = Be();
+  U(() => {
+    const d = "rk-datepicker-inline-styles";
+    if (typeof document > "u" || document.getElementById(d)) return;
+    const l = Do(de), v = document.createElement("style");
+    v.id = d, v.textContent = l, document.head.appendChild(v);
   }, []);
-  const [g, k] = O(
-    ue(e && Ie(e) ? e : n)
-  );
-  z(() => {
-    if (e && Ie(e)) {
-      const m = ue(e);
-      Fe(m, g) || k(m);
+  const [f, x] = Z(
+    be(e && De(e) ? e : n)
+  ), [B, I] = Z(
+    () => e && De(e) ? e : n
+  ), J = Ee(null), L = Ee(!1);
+  U(() => {
+    if (e && De(e)) {
+      I(e);
+      const d = be(e);
+      x(
+        (l) => Fe(d, l) ? l : d
+      );
     }
-  }, [e]);
-  const D = fe(() => ue(/* @__PURE__ */ new Date()), []), S = fe(() => !1, [g, D]), R = fe(
-    () => po(g),
-    [g]
-  ), _ = fe(() => {
-    const m = Ve(/* @__PURE__ */ new Date(), { locale: he });
-    return Array.from({ length: 7 }).map((M, I) => {
-      const F = ke(Oe(m, I), "EEEEEE", { locale: he });
-      return Pe(F);
+  }, [e]), U(() => {
+    var l;
+    if (!L.current) return;
+    L.current = !1;
+    const d = (l = J.current) == null ? void 0 : l.querySelector(
+      `[data-date="${ve(B, "yyyy-MM-dd")}"]`
+    );
+    d == null || d.focus();
+  }, [B, f]);
+  const R = Ae(
+    () => Io(f),
+    [f]
+  ), G = Ae(() => {
+    const d = [];
+    for (let l = 0; l < R.length; l += 7)
+      d.push(R.slice(l, l + 7));
+    return d;
+  }, [R]), p = Ae(() => {
+    const d = He(/* @__PURE__ */ new Date(), { locale: he });
+    return Array.from({ length: 7 }).map((l, v) => {
+      const S = ve(Ce(d, v), "EEEEEE", { locale: he });
+      return Xe(S);
+    });
+  }, []), Q = ce(() => {
+    x((d) => {
+      const l = be(Ve(d, 1));
+      return I((v) => Le(v, l)), l;
+    });
+  }, []), K = ce(() => {
+    x((d) => {
+      const l = be(Oe(d, 1));
+      return I((v) => Le(v, l)), l;
     });
-  }, []), V = se(() => {
-    S || k((m) => ue(an(m, 1)));
-  }, [S]), N = se(() => {
-    k((m) => ue(sn(m, 1)));
-  }, []), p = se(
-    (m) => {
-      a && a(m);
+  }, []), N = ce(
+    (d) => {
+      I(d), a == null || a(d);
     },
     [a]
-  ), K = se(
-    (m, M) => {
-      (m.key === "Enter" || m.key === " ") && (m.preventDefault(), p(M));
+  ), w = ce((d) => {
+    L.current = !0, I(d), x(
+      (l) => Fe(d, l) ? l : be(d)
+    );
+  }, []), H = ce(
+    (d, l) => {
+      switch (d.key) {
+        case "Enter":
+        case " ":
+          d.preventDefault(), N(l);
+          return;
+        case "ArrowLeft":
+          d.preventDefault(), w(Ce(l, -1));
+          return;
+        case "ArrowRight":
+          d.preventDefault(), w(Ce(l, 1));
+          return;
+        case "ArrowUp":
+          d.preventDefault(), w(Ce(l, -7));
+          return;
+        case "ArrowDown":
+          d.preventDefault(), w(Ce(l, 7));
+          return;
+        case "Home":
+          d.preventDefault(), w(He(l, { locale: he }));
+          return;
+        case "End":
+          d.preventDefault(), w(vn(l, { locale: he }));
+          return;
+        case "PageUp":
+          d.preventDefault(), w(Le(l, Ve(l, 1)));
+          return;
+        case "PageDown":
+          d.preventDefault(), w(Le(l, Oe(l, 1)));
+          return;
+      }
     },
-    [p]
-  ), X = ke(g, "MMMM", { locale: he }), A = ke(g, "yyyy", { locale: he }), q = `${Pe(X)} ${A}`;
+    [N, w]
+  ), P = ve(f, "MMMM", { locale: he }), E = ve(f, "yyyy", { locale: he }), q = `${Xe(P)} ${E}`, Y = We(), $ = Fe(B, f) ? B : Le(B, f);
   return /* @__PURE__ */ r(
     "div",
     {
-      className: ee.calendarContainer,
-      "data-color": d,
-      "data-size": h,
+      className: de.calendarContainer,
+      "data-color": c,
+      "data-size": k,
       children: [
-        /* @__PURE__ */ r("div", { className: ee.calendarHeader, children: [
-          /* @__PURE__ */ t("span", { className: ee.monthYear, children: q }),
-          /* @__PURE__ */ r("div", { className: ee.navigationButtons, children: [
+        /* @__PURE__ */ r("div", { className: de.calendarHeader, children: [
+          /* @__PURE__ */ t("span", { className: de.monthYear, id: Y, "aria-live": "polite", children: q }),
+          /* @__PURE__ */ r("div", { className: de.navigationButtons, children: [
             /* @__PURE__ */ t(
-              Me,
+              Ge,
               {
                 variant: "tertiary",
                 icon: !0,
-                onClick: V,
-                "aria-label": f("datePicker.previousMonth"),
-                disabled: S,
-                children: /* @__PURE__ */ t(qe, {})
+                onClick: Q,
+                "aria-label": y("datePicker.previousMonth"),
+                children: /* @__PURE__ */ t(st, {})
               }
             ),
             /* @__PURE__ */ t(
-              Me,
+              Ge,
               {
                 variant: "tertiary",
                 icon: !0,
-                onClick: N,
-                "aria-label": f("datePicker.nextMonth"),
-                children: /* @__PURE__ */ t(Ye, {})
+                onClick: K,
+                "aria-label": y("datePicker.nextMonth"),
+                children: /* @__PURE__ */ t(it, {})
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ t("div", { className: ee.grid, children: _.map((m) => /* @__PURE__ */ t("div", { className: ee.dayNameCell, children: m }, m)) }),
-        /* @__PURE__ */ t("div", { className: ee.grid, children: R.map((m) => {
-          const M = Fe(m, g), I = e && Ie(e) && ln(m, e), F = dn(m), j = [
-            ee.dateCell,
-            M ? "" : ee.otherMonth,
-            I ? ee.selectedDate : "",
-            // Utheving basert på prop
-            F && !I ? ee.todayDate : ""
-          ].filter(Boolean).join(" ");
-          return /* @__PURE__ */ t(
-            "div",
-            {
-              className: j,
-              onClick: () => p(m),
-              onKeyDown: (L) => K(L, m),
-              role: "button",
-              tabIndex: 0,
-              "aria-pressed": I ?? !1,
-              "aria-label": ke(m, "PPP", { locale: he }),
-              children: /* @__PURE__ */ t("span", { className: ee.dateNumberContainer, children: ke(m, "d") })
-            },
-            m.toISOString()
-          );
-        }) })
+        /* @__PURE__ */ r("div", { role: "grid", "aria-labelledby": Y, className: de.gridWrapper, ref: J, children: [
+          /* @__PURE__ */ t("div", { role: "row", className: de.gridRow, children: p.map((d) => /* @__PURE__ */ t("div", { role: "columnheader", className: de.dayNameCell, children: d }, d)) }),
+          G.map((d) => /* @__PURE__ */ t("div", { role: "row", className: de.gridRow, children: d.map((l) => {
+            const v = Fe(l, f), S = e && De(e) && Ke(l, e), F = bn(l), D = v && Ke(l, $), g = [
+              de.dateCell,
+              v ? "" : de.otherMonth,
+              S ? de.selectedDate : "",
+              F && !S ? de.todayDate : ""
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ t(
+              "div",
+              {
+                role: "gridcell",
+                className: g,
+                "data-date": ve(l, "yyyy-MM-dd"),
+                onClick: v ? () => N(l) : void 0,
+                onKeyDown: v ? (se) => H(se, l) : void 0,
+                tabIndex: v ? D ? 0 : -1 : void 0,
+                "aria-selected": v ? !!S : void 0,
+                "aria-disabled": !v || void 0,
+                "aria-current": F ? "date" : void 0,
+                "aria-label": ve(l, "PPP", { locale: he }),
+                children: /* @__PURE__ */ t("span", { className: de.dateNumberContainer, children: ve(l, "d") })
+              },
+              l.toISOString()
+            );
+          }) }, d[0].toISOString()))
+        ] })
       ]
     }
   );
 };
-mo.displayName = "DatePicker";
-function go(n) {
+Lo.displayName = "DatePicker";
+function Do(n) {
   return `
 .${n.calendarContainer} {
   display: inline-flex;
@@ -2794,12 +2898,15 @@ function go(n) {
 .${n.navigationButtons} > button:disabled svg {
   opacity: var(--ds-opacity-disabled, 0.3);
 }
-.${n.grid} {
+.${n.gridWrapper} {
+  width: 100%;
+  overflow: hidden;
+}
+.${n.gridRow} {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   width: 100%;
   text-align: center;
-  overflow: hidden;
 }
 .${n.dayNameCell} {
   display: flex;
@@ -2836,6 +2943,12 @@ function go(n) {
   user-select: none;
   min-width: 0;
 }
+.${n.dateCell}:focus-visible {
+  outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer, #2b2b2b);
+  outline-offset: calc(-1 * var(--ds-border-width-focus, 3px));
+  position: relative;
+  z-index: 2;
+}
 .${n.dateNumberContainer} {
   display: flex;
   justify-content: center;
@@ -2887,11 +3000,11 @@ function go(n) {
   }
   .${n.dayNameCell} {
     padding: var(--ds-size-1, 4px);
-    font-size: var(--ds-body-2xs-font-size, 12px);
+    font-size: var(--ds-font-size-1, 12px);
   }
   .${n.dateCell} {
     padding: var(--ds-size-2, 8px);
-    font-size: var(--ds-body-2xs-font-size, 12px);
+    font-size: var(--ds-font-size-1, 12px);
   }
   .${n.dateNumberContainer} {
     width: 20px;
@@ -2917,203 +3030,191 @@ function go(n) {
 }
 `;
 }
-const uo = "_fieldset_16fx7_2", ho = "_description_16fx7_14", fo = "_error_16fx7_21", ko = "_inputWrapper_16fx7_30", vo = "_inputWrapperError_16fx7_42", bo = "_suffixButton_16fx7_80", yo = "_suffixButtonInteractive_16fx7_100", de = {
-  fieldset: uo,
-  description: ho,
-  error: fo,
-  inputWrapper: ko,
-  inputWrapperError: vo,
-  suffixButton: bo,
-  suffixButtonInteractive: yo
-}, ze = (n) => {
-  const e = n.slice(0, 2), a = n.slice(2, 4), d = n.slice(4, 8);
-  return n.length > 4 ? `${e}.${a}.${d}` : n.length > 2 ? `${e}.${a}` : n.length > 0 ? e : "";
-}, Re = (n) => (n || "").replace(/\D/g, ""), Ge = (n) => {
-  let e = n;
-  if (e.length >= 2) {
-    const a = parseInt(e.substring(0, 2), 10);
-    !isNaN(a) && a > 31 && (e = "31" + e.substring(2));
-  }
-  if (e.length >= 4) {
-    const a = parseInt(e.substring(2, 4), 10);
-    !isNaN(a) && a > 12 && (e = e.substring(0, 2) + "12" + e.substring(4));
-  }
-  return e.slice(0, 8);
-}, xo = ie(
+const Mo = "_fieldset_1d1ez_2", jo = "_description_1d1ez_14", Ao = "_error_1d1ez_21", No = "_inputWrapper_1d1ez_30", Eo = "_inputWrapperError_1d1ez_42", Bo = "_suffixButton_1d1ez_80", Fo = "_suffixButtonInteractive_1d1ez_100", ue = {
+  fieldset: Mo,
+  description: jo,
+  error: Ao,
+  inputWrapper: No,
+  inputWrapperError: Eo,
+  suffixButton: Bo,
+  suffixButtonInteractive: Fo
+}, Me = (n) => {
+  const e = n.slice(0, 2), a = n.slice(2, 4), c = n.slice(4, 8);
+  return n.length > 4 ? `${e}.${a}.${c}` : n.length > 2 ? `${e}.${a}` : n.length > 0 ? e : "";
+}, ze = (n) => (n || "").replace(/\D/g, "").slice(0, 8), Je = (n) => {
+  if (n.length < 8) return null;
+  const e = Cn(Me(n), "dd.MM.yyyy", /* @__PURE__ */ new Date());
+  return De(e);
+}, Po = me(
   (n, e) => {
-    const { t: a } = Te();
-    z(() => {
-      const c = "rk-dateinput-inline-styles";
-      if (typeof document > "u" || document.getElementById(c)) return;
-      const w = To(de), $ = document.createElement("style");
-      $.id = c, $.textContent = w, document.head.appendChild($);
+    const { t: a } = Be();
+    U(() => {
+      const A = "rk-dateinput-inline-styles";
+      if (typeof document > "u" || document.getElementById(A)) return;
+      const ae = $o(ue), s = document.createElement("style");
+      s.id = A, s.textContent = ae, document.head.appendChild(s);
     }, []);
     const {
-      label: d,
-      suffixIcon: h,
-      onSuffixClick: f,
-      className: g,
-      // For ytre fieldset
-      inputWrapperClassName: k,
-      // For input wrapper div
-      inputClassName: D,
-      // For selve input-elementet
-      value: S,
-      defaultValue: R,
-      onChange: _,
-      readOnly: V,
-      placeholder: N = "dd.mm.åååå",
-      id: p,
+      label: c,
+      suffixIcon: k,
+      onSuffixClick: y,
+      className: f,
+      inputWrapperClassName: x,
+      inputClassName: B,
+      value: I,
+      defaultValue: J,
+      onChange: L,
+      onValidationChange: R,
+      readOnly: G,
+      placeholder: p = "dd.mm.åååå",
+      id: Q,
       name: K,
-      required: X,
-      disabled: A,
-      onClick: q,
-      onFocus: m,
-      // Send ekstern onFocus videre
-      onBlur: M,
-      // Send ekstern onBlur videre
-      autoComplete: I = "off",
-      "aria-label": F,
-      "aria-labelledby": j,
-      description: L,
-      error: G,
-      // Bruk error-prop for styling
-      "data-color": ne,
-      // <-- Destrukturering
-      "data-size": H,
-      // <-- Destrukturering
-      ...J
-    } = n, T = S !== void 0, b = Qe(null);
-    Ne.useImperativeHandle(
+      required: N,
+      disabled: w,
+      onClick: H,
+      onFocus: P,
+      onBlur: E,
+      autoComplete: q = "off",
+      "aria-label": Y,
+      "aria-labelledby": $,
+      description: d,
+      error: l,
+      "data-color": v,
+      "data-size": S,
+      ...F
+    } = n, D = I !== void 0, g = Ee(null);
+    ye.useImperativeHandle(
       e,
-      () => b.current
+      () => g.current
     );
-    const l = se(
-      (c) => {
-        const w = Re(c), $ = Ge(w);
-        return ze($);
+    const se = Ee(null), ee = ce(
+      (A, ae) => {
+        A !== se.current && (se.current = A, R == null || R(A, ae));
       },
+      [R]
+    ), te = ce(
+      (A) => Me(ze(A)),
       []
-    ), [C, B] = O(
-      () => l(S ?? R)
+    ), [ne, z] = Z(
+      () => te(I ?? J)
     );
-    z(() => {
-      if (T) {
-        const c = l(S);
-        c !== C && (B(c), b.current && b.current.value !== c && (b.current.value = c));
+    U(() => {
+      if (D) {
+        const A = te(I);
+        A !== ne && (z(A), g.current && g.current.value !== A && (g.current.value = A));
       }
-    }, [S, T, C, l]);
-    const Y = se(
-      (c) => {
-        const w = c.target, $ = w.value, oe = C, re = Re($).slice(0, 8), pe = Ge(re), i = ze(pe);
-        let u = 0;
-        const x = pe.length;
-        x <= 2 ? u = x : x <= 4 ? u = x + 1 : u = x + 2, u = Math.min(u, i.length), requestAnimationFrame(() => {
-          if (b.current && (B(i), b.current.value = i, b.current.setSelectionRange(u, u), (i !== oe || T) && _)) {
-            const ae = {
-              ...c,
-              target: { ...w, value: i }
-            };
-            _(ae, i);
-          }
-        });
+    }, [I, D, ne, te]);
+    const ie = ce(
+      (A) => {
+        const ae = A.target, s = ne, m = ze(ae.value), b = Me(m);
+        let V = 0;
+        const ke = m.length;
+        ke <= 2 ? V = ke : ke <= 4 ? V = ke + 1 : V = ke + 2, V = Math.min(V, b.length), z(b), ae.value = b, ae.setSelectionRange(V, V), (b !== s || D) && (L == null || L(A, b));
+        const ct = Je(m);
+        (m.length === 0 || m.length === 8) && ee(m.length === 0 ? null : ct, b);
+      },
+      [ne, D, L, ee]
+    ), T = ce(
+      (A) => {
+        const ae = ze(A.target.value);
+        ae.length === 0 ? ee(null, "") : ae.length < 8 ? ee(!1, Me(ae)) : ee(Je(ae), Me(ae)), E == null || E(A);
       },
-      [C, T, _, l]
-    ), y = [de.fieldset, g].filter(Boolean).join(" "), E = [
-      de.inputWrapper,
-      k,
-      G ? de.inputWrapperError : ""
-    ].filter(Boolean).join(" "), Q = [
-      D
-    ].filter(Boolean).join(" "), le = [
-      de.suffixButton,
-      f ? de.suffixButtonInteractive : ""
+      [E, ee]
+    ), h = [ue.fieldset, f].filter(Boolean).join(" "), C = [
+      ue.inputWrapper,
+      x,
+      l ? ue.inputWrapperError : ""
+    ].filter(Boolean).join(" "), j = [
+      B
+    ].filter(Boolean).join(" "), _ = [
+      ue.suffixButton,
+      y ? ue.suffixButtonInteractive : ""
     ].filter(Boolean).join(" ");
-    !d && !F && !j && console.warn("Advarsel: DateInput-komponenten bør ha label, aria-label, eller aria-labelledby for tilgjengelighet.");
-    const v = d && typeof d == "string" ? j || `${p}-label` : void 0, Z = L ? `${p}-desc` : void 0, me = G ? `${p}-err` : void 0, ge = [Z, me].filter(Boolean).join(" ") || void 0;
+    !c && !Y && !$ && console.warn("Advarsel: DateInput-komponenten bør ha label, aria-label, eller aria-labelledby for tilgjengelighet.");
+    const u = We(), M = Q ?? `dateinput${u}`, le = c && typeof c == "string" ? `${M}-label` : void 0, re = d ? `${M}-desc` : void 0, ge = l ? `${M}-err` : void 0, xe = [re, ge].filter(Boolean).join(" ") || void 0, Se = $ ?? le;
     return (
       // --- Bruk data-color og data-size på den ytre wrapperen ---
       /* @__PURE__ */ r(
         "div",
         {
-          className: y,
-          "data-color": ne,
-          "data-size": H,
+          className: h,
+          "data-color": v,
+          "data-size": S,
           children: [
-            d && typeof d == "string" ? /* @__PURE__ */ t("label", { id: v, htmlFor: p, children: d }) : d,
-            L && /* @__PURE__ */ t("p", { id: Z, className: de.description, children: L }),
-            /* @__PURE__ */ r("div", { className: E, children: [
+            c && typeof c == "string" ? /* @__PURE__ */ t("label", { id: le, htmlFor: M, children: c }) : c,
+            d && /* @__PURE__ */ t("p", { id: re, className: ue.description, children: d }),
+            /* @__PURE__ */ r("div", { className: C, children: [
               /* @__PURE__ */ t(
                 "input",
                 {
-                  ref: b,
+                  ref: g,
                   type: "text",
                   inputMode: "numeric",
                   pattern: "\\d{2}\\.\\d{2}\\.\\d{4}",
                   maxLength: 10,
-                  value: C,
-                  readOnly: V,
-                  placeholder: N,
-                  id: p,
+                  value: ne,
+                  readOnly: G,
+                  placeholder: p,
+                  id: M,
                   name: K,
-                  required: X,
-                  disabled: A,
-                  onClick: q,
-                  onChange: Y,
-                  onFocus: m,
-                  onBlur: M,
-                  autoComplete: I,
-                  "aria-label": F,
-                  "aria-labelledby": v,
-                  "aria-describedby": ge,
-                  "aria-invalid": !!G,
-                  className: Q,
-                  ...J
+                  required: N,
+                  disabled: w,
+                  onClick: H,
+                  onChange: ie,
+                  onFocus: P,
+                  onBlur: T,
+                  autoComplete: q,
+                  "aria-label": Y,
+                  "aria-labelledby": Se,
+                  "aria-describedby": xe,
+                  "aria-invalid": !!l,
+                  className: j,
+                  ...F
                 }
               ),
-              h && /* @__PURE__ */ t(
+              k && /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  className: le,
-                  onClick: A ? void 0 : f,
-                  tabIndex: f && !A ? 0 : -1,
-                  "aria-hidden": !f,
-                  disabled: A,
-                  "aria-label": f ? a("dateInput.openDatePicker") : void 0,
-                  children: h
+                  className: _,
+                  onClick: w ? void 0 : y,
+                  tabIndex: y && !w ? 0 : -1,
+                  "aria-hidden": !y,
+                  disabled: w,
+                  "aria-label": y ? a("dateInput.openDatePicker") : void 0,
+                  children: k
                 }
               )
             ] }),
-            G && /* @__PURE__ */ t("p", { id: me, className: de.error, role: "alert", children: G })
+            l && /* @__PURE__ */ t("p", { id: ge, className: ue.error, role: "alert", children: l })
           ]
         }
       )
     );
   }
 );
-xo.displayName = "DateInput";
-function To(n) {
+Po.displayName = "DateInput";
+function $o(n) {
   return `
 .${n.fieldset} {
-  margin-bottom: var(--ds-spacing-4, 16px);
+  margin-bottom: var(--ds-size-4, 16px);
 }
 .${n.fieldset} label {
   display: block;
-  margin-bottom: var(--ds-spacing-1, 4px);
+  margin-bottom: var(--ds-size-1, 4px);
   font-weight: var(--ds-font-weight-medium, 500);
   color: var(--ds-color-text-default, #2b2b2b);
 }
 .${n.description} {
-  font-size: var(--ds-font-size-sm, 14px);
+  font-size: var(--ds-font-size-2, 14px);
   color: var(--ds-color-text-subtle, #5d5d5d);
-  margin-top: var(--ds-spacing-1, 4px);
-  margin-bottom: var(--ds-spacing-2, 8px);
+  margin-top: var(--ds-size-1, 4px);
+  margin-bottom: var(--ds-size-2, 8px);
 }
 .${n.error} {
-  font-size: var(--ds-font-size-sm, 14px);
+  font-size: var(--ds-font-size-2, 14px);
   color: var(--ds-color-danger-text-default, #c30000);
-  margin-top: var(--ds-spacing-1, 4px);
+  margin-top: var(--ds-size-1, 4px);
 }
 .${n.inputWrapper} {
   display: flex;
@@ -3130,7 +3231,7 @@ function To(n) {
 }
 .${n.inputWrapper}:focus-within {
   outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer, #2B2B2B);
-  outline-offset: var(--ds-focus-outline-offset, 2px);
+  outline-offset: var(--ds-border-width-focus, 2px);
 }
 .${n.inputWrapper} input {
   box-sizing: border-box;
@@ -3151,7 +3252,7 @@ function To(n) {
 .${n.inputWrapper} input:disabled {
   opacity: var(--ds-opacity-disabled, 0.5);
   cursor: not-allowed;
-  background-color: var(--ds-color-neutral-surface-subtle, #f0f0f0);
+  background-color: var(--ds-color-neutral-surface-tinted, #f0f0f0);
   color: var(--ds-color-neutral-text-subtle, #5d5d5d);
 }
 .${n.suffixButton} {
@@ -3186,173 +3287,204 @@ function To(n) {
 }
 `;
 }
-const Co = "_carouselContainer_eo3g5_1", wo = "_viewport_eo3g5_14", So = "_slides_eo3g5_20", Io = "_slide_eo3g5_20", _o = "_slideInner_eo3g5_40", Do = "_loaderOverlay_eo3g5_48", Lo = "_image_eo3g5_58", Ao = "_loaded_eo3g5_69", No = "_loading_eo3g5_73", Mo = "_empty_eo3g5_81", jo = "_controls_eo3g5_87", Fo = "_arrows_eo3g5_97", Bo = "_dots_eo3g5_107", Eo = "_dot_eo3g5_107", $o = "_dotActive_eo3g5_133", W = {
-  carouselContainer: Co,
-  viewport: wo,
-  slides: So,
-  slide: Io,
-  slideInner: _o,
-  loaderOverlay: Do,
-  image: Lo,
-  loaded: Ao,
-  loading: No,
-  empty: Mo,
-  controls: jo,
-  arrows: Fo,
-  dots: Bo,
-  dot: Eo,
-  dotActive: $o
-}, Po = gt, zo = ({
+const zo = "_carouselContainer_oit30_1", Ro = "_viewport_oit30_14", Go = "_slides_oit30_20", Ho = "_slide_oit30_20", Wo = "_slideInner_oit30_40", Uo = "_loaderOverlay_oit30_48", Vo = "_image_oit30_58", Oo = "_loaded_oit30_69", Ko = "_loading_oit30_73", Zo = "_empty_oit30_81", qo = "_controls_oit30_87", Yo = "_arrows_oit30_97", Xo = "_dots_oit30_107", Jo = "_playPause_oit30_122", Qo = "_dot_oit30_107", er = "_dotActive_oit30_153", X = {
+  carouselContainer: zo,
+  viewport: Ro,
+  slides: Go,
+  slide: Ho,
+  slideInner: Wo,
+  loaderOverlay: Uo,
+  image: Vo,
+  loaded: Oo,
+  loading: Ko,
+  empty: Zo,
+  controls: qo,
+  arrows: Yo,
+  dots: Xo,
+  playPause: Jo,
+  dot: Qo,
+  dotActive: er
+}, tr = _t, nr = ({
   images: n,
   autoPlay: e = !1,
   autoDelay: a = 5,
-  showArrows: d = !0,
-  showDots: h = !0,
-  variant: f,
-  slidesPerView: g = 1,
-  slideSpacing: k = 16,
-  cornerRadius: D = 0,
-  "data-color": S,
-  "data-size": R
+  showArrows: c = !0,
+  showDots: k = !0,
+  variant: y,
+  slidesPerView: f = 1,
+  slideSpacing: x = 16,
+  cornerRadius: B = 0,
+  "data-color": I,
+  "data-size": J
 }) => {
-  const { t: _ } = Te();
-  z(() => {
-    const b = "rk-carousel-inline-styles";
-    if (typeof document > "u" || document.getElementById(b)) return;
-    const l = Ro(W), C = document.createElement("style");
-    C.id = b, C.textContent = l, document.head.appendChild(C);
+  const { t: L } = Be();
+  U(() => {
+    const h = "rk-carousel-inline-styles";
+    if (typeof document > "u" || document.getElementById(h)) return;
+    const C = or(X), j = document.createElement("style");
+    j.id = h, j.textContent = C, document.head.appendChild(j);
   }, []);
-  const V = {
+  const R = {
     loop: !0,
     align: "start",
     containScroll: "trimSnaps",
     slidesToScroll: 1
-  }, [N, p] = pn(V), [K, X] = O(0), [A, q] = O([]), [m, M] = O([]);
-  z(() => {
-    M(new Array((n == null ? void 0 : n.length) || 0).fill(!1));
-  }, [n]);
-  const I = se((b) => {
-    M((l) => {
-      const C = [...l];
-      return C[b] = !0, C;
+  }, [G, p] = wn(R), [Q, K] = Z(0), [N, w] = Z([]), [H, P] = Z([]), E = Ee([]), q = (n ?? []).map((h) => h.src).join(`
+`);
+  U(() => {
+    P(
+      (n ?? []).map((h, C) => {
+        const j = E.current[C];
+        return !!(j && j.complete && j.naturalWidth > 0);
+      })
+    );
+  }, [q]);
+  const Y = ce((h) => {
+    P((C) => {
+      if (C[h]) return C;
+      const j = [...C];
+      return j[h] = !0, j;
     });
-  }, []), F = fe(() => a * 1e3, [a]), j = se(() => {
-    p && X(p.selectedScrollSnap());
-  }, [p]), L = se((b) => p && p.scrollTo(b), [p]), G = se(() => p && p.scrollPrev(), [p]), ne = se(() => p && p.scrollNext(), [p]);
-  z(() => {
+  }, []), $ = Ae(() => a * 1e3, [a]), d = ce(() => {
+    p && K(p.selectedScrollSnap());
+  }, [p]), l = ce((h) => p && p.scrollTo(h), [p]), v = ce(() => p && p.scrollPrev(), [p]), S = ce(() => p && p.scrollNext(), [p]);
+  U(() => {
     if (p)
-      return p.on("select", j), p.on("reInit", j), q(p.scrollSnapList()), () => {
-        p.off("select", j), p.off("reInit", j);
+      return p.on("select", d), p.on("reInit", d), w(p.scrollSnapList()), () => {
+        p.off("select", d), p.off("reInit", d);
       };
-  }, [p, j]), z(() => {
-    p && (p.reInit(), q(p.scrollSnapList()));
-  }, [p, n, g, k]), z(() => {
-    if (!e || !p || !n || n.length <= 1) return;
-    const b = window.setInterval(() => {
+  }, [p, d]), U(() => {
+    p && (p.reInit(), w(p.scrollSnapList()));
+  }, [p, n, f, x]);
+  const [F, D] = Z(!1), [g, se] = Z(!1), [ee, te] = Z(!1), ne = e && !F && !g && !ee;
+  U(() => {
+    if (!ne || !p || !n || n.length <= 1) return;
+    const h = window.setInterval(() => {
       p.canScrollNext() && p.scrollNext();
-    }, F);
+    }, $);
     return () => {
-      window.clearInterval(b);
+      window.clearInterval(h);
     };
-  }, [e, F, p, n]);
-  const H = Math.max(1, g), J = `${100 / H}%`, T = k / 2;
+  }, [ne, $, p, n]);
+  const z = Math.max(1, f), ie = `${100 / z}%`, T = x / 2;
   return /* @__PURE__ */ r(
     "div",
     {
-      className: W.carouselContainer,
-      "data-color": S,
-      "data-size": R,
-      "data-variant": f,
+      className: X.carouselContainer,
+      "data-color": I,
+      "data-size": J,
+      "data-variant": y,
+      onMouseEnter: e ? () => se(!0) : void 0,
+      onMouseLeave: e ? () => se(!1) : void 0,
+      onFocus: e ? () => te(!0) : void 0,
+      onBlur: e ? (h) => {
+        h.currentTarget.contains(h.relatedTarget) || te(!1);
+      } : void 0,
       children: [
-        /* @__PURE__ */ t("div", { className: W.viewport, ref: N, children: /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { className: X.viewport, ref: G, children: /* @__PURE__ */ t(
           "div",
           {
-            className: W.slides,
+            className: X.slides,
             style: {
               marginLeft: `-${T}px`,
               marginRight: `-${T}px`
             },
-            children: n && n.length > 0 ? n.map((b, l) => /* @__PURE__ */ t(
+            children: n && n.length > 0 ? n.map((h, C) => /* @__PURE__ */ t(
               "div",
               {
-                className: W.slide,
+                className: X.slide,
                 style: {
-                  flex: `0 0 ${J}`,
+                  flex: `0 0 ${ie}`,
                   paddingLeft: `${T}px`,
                   paddingRight: `${T}px`,
-                  borderRadius: D > 0 ? `${D}px` : void 0,
+                  borderRadius: B > 0 ? `${B}px` : void 0,
                   overflow: "hidden"
                   // Ensure radius clips content
                 },
-                children: /* @__PURE__ */ r("div", { className: W.slideInner, style: { borderRadius: `${D}px`, overflow: "hidden", position: "relative", width: "100%", height: "100%" }, children: [
-                  !m[l] && /* @__PURE__ */ t("div", { className: W.loaderOverlay, children: /* @__PURE__ */ t(Po, { "aria-label": _("carousel.loading") }) }),
+                children: /* @__PURE__ */ r("div", { className: X.slideInner, style: { borderRadius: `${B}px`, overflow: "hidden", position: "relative", width: "100%", height: "100%" }, children: [
+                  !H[C] && /* @__PURE__ */ t("div", { className: X.loaderOverlay, children: /* @__PURE__ */ t(tr, { "aria-label": L("carousel.loading") }) }),
                   /* @__PURE__ */ t(
                     "img",
                     {
-                      className: `${W.image} ${m[l] ? W.loaded : W.loadingImage}`,
-                      src: b.src,
-                      alt: b.alt,
-                      loading: l < H ? "eager" : "lazy",
+                      ref: (j) => {
+                        E.current[C] = j;
+                      },
+                      className: `${X.image} ${H[C] ? X.loaded : X.loadingImage}`,
+                      src: h.src,
+                      alt: h.alt,
+                      loading: C < z ? "eager" : "lazy",
                       crossOrigin: "anonymous",
-                      onLoad: () => I(l),
-                      onError: (C) => {
-                        C.target.style.display = "none", I(l);
+                      onLoad: () => Y(C),
+                      onError: (j) => {
+                        j.target.style.display = "none", Y(C);
                       }
                     }
                   )
                 ] })
               },
-              `image-${l}-${b.src}`
-            )) : /* @__PURE__ */ t("div", { className: W.slide, style: { flex: "0 0 100%" }, children: /* @__PURE__ */ t("div", { className: W.empty, children: "Ingen bilder" }) })
+              `image-${C}-${h.src}`
+            )) : /* @__PURE__ */ t("div", { className: X.slide, style: { flex: "0 0 100%" }, children: /* @__PURE__ */ t("div", { className: X.empty, children: "Ingen bilder" }) })
           }
         ) }),
-        (d || h && n && n.length > 1) && /* @__PURE__ */ r("div", { className: W.controls, "aria-hidden": "false", children: [
-          d && /* @__PURE__ */ r("div", { className: W.arrows, children: [
+        (c || k && n && n.length > 1) && /* @__PURE__ */ r("div", { className: X.controls, "aria-hidden": "false", children: [
+          c && /* @__PURE__ */ r("div", { className: X.arrows, children: [
             /* @__PURE__ */ t(
-              ce,
+              fe,
               {
                 variant: "primary",
                 icon: !0,
-                "aria-label": _("carousel.previousImage"),
-                onClick: G,
+                "aria-label": L("carousel.previousImage"),
+                onClick: v,
                 disabled: !n || n.length <= 1,
-                children: /* @__PURE__ */ t(mn, { "aria-hidden": !0 })
+                children: /* @__PURE__ */ t(Sn, { "aria-hidden": !0 })
               }
             ),
             /* @__PURE__ */ t(
-              ce,
+              fe,
               {
                 variant: "primary",
                 icon: !0,
-                "aria-label": _("carousel.nextImage"),
-                onClick: ne,
+                "aria-label": L("carousel.nextImage"),
+                onClick: S,
                 disabled: !n || n.length <= 1,
-                children: /* @__PURE__ */ t(gn, { "aria-hidden": !0 })
+                children: /* @__PURE__ */ t(_n, { "aria-hidden": !0 })
               }
             )
           ] }),
-          h && n && n.length > 1 && /* @__PURE__ */ t("div", { className: W.dots, role: "tablist", "aria-label": _("carousel.imagePosition"), children: A.map((b, l) => {
-            const C = l === K;
-            return /* @__PURE__ */ t(
+          k && n && n.length > 1 && /* @__PURE__ */ r("div", { className: X.dots, role: "group", "aria-label": L("carousel.imagePosition"), children: [
+            e && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                className: `${W.dot} ${C ? W.dotActive : ""}`,
-                onClick: () => L(l),
-                "aria-label": `${_("carousel.goToImage")} ${l + 1}`,
-                "aria-selected": C,
-                role: "tab"
-              },
-              `dot-${l}`
-            );
-          }) })
+                className: X.playPause,
+                onClick: () => D((h) => !h),
+                "aria-label": L(F ? "carousel.resumeAutoplay" : "carousel.pauseAutoplay"),
+                "aria-pressed": F,
+                children: F ? /* @__PURE__ */ t(In, { "aria-hidden": !0 }) : /* @__PURE__ */ t(Ln, { "aria-hidden": !0 })
+              }
+            ),
+            N.map((h, C) => {
+              const j = C === Q;
+              return /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  className: `${X.dot} ${j ? X.dotActive : ""}`,
+                  onClick: () => l(C),
+                  "aria-label": `${L("carousel.goToImage")} ${C + 1}`,
+                  "aria-current": j || void 0
+                },
+                `dot-${C}`
+              );
+            })
+          ] })
         ] })
       ]
     }
   );
 };
-zo.displayName = "Carousel";
-function Ro(n) {
+nr.displayName = "Carousel";
+function or(n) {
   return `
 .${n.carouselContainer} {
   position: relative;
@@ -3393,7 +3525,7 @@ function Ro(n) {
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: var(--ds-color-neutral-surface-subtle, #f5f5f5);
+  background-color: var(--ds-color-neutral-surface-tinted, #f5f5f5);
   overflow: hidden;
 }
 .${n.loaderOverlay} {
@@ -3423,11 +3555,11 @@ function Ro(n) {
   align-items: center;
   gap: var(--ds-size-2, 8px);
   color: var(--ds-color-text-subtle, #5d5d5d);
-  font-size: var(--ds-font-size-sm, 14px);
+  font-size: var(--ds-font-size-2, 14px);
 }
 .${n.empty} {
   color: var(--ds-color-text-subtle, #5d5d5d);
-  font-size: var(--ds-font-size-sm, 14px);
+  font-size: var(--ds-font-size-2, 14px);
   text-align: center;
 }
 .${n.controls} {
@@ -3454,6 +3586,7 @@ function Ro(n) {
   transform: translateX(-50%);
   bottom: var(--ds-size-3, 12px);
   display: inline-flex;
+  align-items: center;
   gap: var(--ds-size-2, 8px);
   pointer-events: auto;
   background-color: rgba(255, 255, 255, 0.1);
@@ -3472,6 +3605,20 @@ function Ro(n) {
   cursor: pointer;
   transition: all 0.2s ease;
 }
+.${n.playPause} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-size-6, 24px);
+  height: var(--ds-size-6, 24px);
+  border-radius: 999px;
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-border-subtle, #d6d6d6);
+  background-color: rgba(255, 255, 255, 0.85);
+  color: var(--ds-color-neutral-text-default, #2b2b2b);
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
 .${n.dotActive} {
   background-color: var(--ds-color-primary-color-red-base-default, #D52B1E);
   border-color: var(--ds-color-primary-color-red-base-default, #D52B1E);
@@ -3524,225 +3671,471 @@ function Ro(n) {
 }
 `;
 }
-const Go = "_crossCorner_1caiu_1", Wo = "_shape_1caiu_6", Le = {
-  crossCorner: Go,
-  shape: Wo
+const rr = "_graphicElement_134cx_1", ar = "_shape_134cx_12", sr = "_faceFront_134cx_28", ir = "_faceTop_134cx_32", lr = "_faceRight_134cx_36", we = {
+  graphicElement: rr,
+  shape: ar,
+  faceFront: sr,
+  faceTop: ir,
+  faceRight: lr
 };
-function Ho(n) {
+function dr(n) {
   return `
-.${n.crossCorner} {
+.${n.graphicElement} {
   display: inline-block;
   flex-shrink: 0;
+  --graphic-element-color: var(--ds-color-base-default, #DA4236);
+  --graphic-element-face-front: var(--ds-color-border-subtle, #EEABA6);
+  --graphic-element-face-top: var(--ds-color-surface-active, #E5776F);
 }
+/* data-color scoping: the theme's [data-color] scopes swap the generic
+   --ds-color-* variables, so no per-ramp rules are needed here. */
 .${n.shape} {
-  fill: var(--ds-color-base-default, #DA4236);
+  fill: var(--graphic-element-color);
 }
-/* Color variants via data-color attribute */
-.${n.crossCorner}[data-color="accent"] .${n.shape} {
-  fill: var(--ds-color-accent-base-default, #DA4236);
+/* Outline variant: thin stroke, no fill */
+.${n.graphicElement}[data-variant="outline"] {
+  overflow: visible;
 }
-.${n.crossCorner}[data-color="brand1"] .${n.shape} {
-  fill: var(--ds-color-brand1-base-default, #DA4236);
+.${n.graphicElement}[data-variant="outline"] .${n.shape} {
+  fill: none;
+  stroke: var(--graphic-element-color);
+  stroke-width: 2px;
 }
-.${n.crossCorner}[data-color="brand2"] .${n.shape} {
-  fill: var(--ds-color-brand2-base-default, #1E2B3C);
+/* Isometric variant: three token-driven cube faces */
+.${n.faceFront} {
+  fill: var(--graphic-element-face-front);
 }
-.${n.crossCorner}[data-color="brand3"] .${n.shape} {
-  fill: var(--ds-color-brand3-base-default, #F5F5F5);
+.${n.faceTop} {
+  fill: var(--graphic-element-face-top);
 }
-.${n.crossCorner}[data-color="neutral"] .${n.shape} {
-  fill: var(--ds-color-neutral-base-default, #5D5D5D);
+.${n.faceRight} {
+  fill: var(--graphic-element-color);
 }
 `;
 }
-const Uo = {
-  sm: 48,
-  md: 68,
-  lg: 96
-}, Vo = {
+const cr = {
+  sm: 24,
+  md: 34,
+  lg: 48
+}, pr = {
   "top-left": 270,
   "top-right": 0,
   "bottom-right": 90,
   "bottom-left": 180
-}, ye = ie(
+}, mr = {
+  // One unit square. Outline: bottom edge only.
+  square: {
+    viewBoxW: 34,
+    viewBoxH: 34,
+    solid: "M0 0H34V34H0V0Z",
+    outline: "M0 34H34"
+  },
+  // Three cells of a 2x2 grid with the TOP-LEFT cell missing:
+  // (1,0), (0,1), (1,1). Outline: bottom + right edges (open step).
+  corner: {
+    viewBoxW: 68,
+    viewBoxH: 68,
+    solid: "M34 0H68V68H0V34H34V0Z",
+    outline: "M0 68H68V0"
+  },
+  // The corner rotated -90deg: (0,0), (1,0), (1,1) - top bar plus the
+  // bottom-right cell (this is the legacy CrossCorner form).
+  // Outline: top + right edges.
+  angle: {
+    viewBoxW: 68,
+    viewBoxH: 68,
+    solid: "M0 0H68V68H34V34H0V0Z",
+    outline: "M0 0H68V68"
+  },
+  // Three unit squares rotated 45deg (diamonds, radius 24 = U*sqrt(2)/2):
+  // two side by side on top (centers (24,24) and (72,24)) and one
+  // centered below/between them (center (48,48)). Their union forms
+  // the angular heart. Outline: only the two bottom edges (open V).
+  heart: {
+    viewBoxW: 96,
+    viewBoxH: 72,
+    solid: "M24 0L48 24L72 0L96 24L48 72L0 24L24 0Z",
+    outline: "M0 24L48 72L96 24"
+  },
+  // Four cells: a 3x1 row plus one center cell above it -
+  // (1,0), (0,1), (1,1), (2,1). T pointing up.
+  // Outline: 2U horizontal line with a 1U tick rising from its midpoint.
+  tee: {
+    viewBoxW: 102,
+    viewBoxH: 68,
+    solid: "M34 0H68V34H102V68H0V34H34V0Z",
+    outline: "M17 68H85M51 34V68"
+  },
+  // Three cells in a row. Outline: bottom edge (one 3U line).
+  bar: {
+    viewBoxW: 102,
+    viewBoxH: 34,
+    solid: "M0 0H102V34H0V0Z",
+    outline: "M0 34H102"
+  },
+  // Four cells with NO center cell: (1,0), (0,1), (2,1), (1,2) -
+  // the gapped, checkerboard-style cross.
+  // Outline: full-height vertical axis plus two 1U horizontal ticks,
+  // leaving a gap over the (empty) center cell.
+  cross: {
+    viewBoxW: 102,
+    viewBoxH: 102,
+    solid: "M34 0H68V34H34V0ZM0 34H34V68H0V34ZM68 34H102V68H68V34ZM34 68H68V102H34V68Z",
+    outline: "M51 0V102M0 51H34M68 51H102"
+  }
+}, W = {
+  cube: {
+    w: 58.89,
+    h: 68,
+    faces: [
+      { face: "top", d: "M0 17L29.44 0L58.89 17L29.44 34Z" },
+      { face: "right", d: "M29.44 34L58.89 17L58.89 51L29.44 68Z" },
+      { face: "front", d: "M0 17L29.44 34L29.44 68L0 51Z" }
+    ]
+  },
+  cornerStanding: {
+    w: 88.33,
+    h: 102,
+    faces: [
+      { face: "top", d: "M0 34L29.44 17L58.89 34L29.44 51Z" },
+      { face: "front", d: "M0 34L29.44 51L29.44 85L0 68Z" },
+      { face: "right", d: "M58.89 68L88.33 51L88.33 85L58.89 102Z" },
+      { face: "front", d: "M29.44 51L58.89 68L58.89 102L29.44 85Z" },
+      { face: "top", d: "M29.44 17L58.89 0L88.33 17L58.89 34Z" },
+      { face: "right", d: "M58.89 34L88.33 17L88.33 51L58.89 68Z" },
+      { face: "front", d: "M29.44 17L58.89 34L58.89 68L29.44 51Z" }
+    ]
+  },
+  cornerLying: {
+    w: 117.78,
+    h: 85,
+    faces: [
+      { face: "front", d: "M0 17L29.44 34L29.44 68L0 51Z" },
+      { face: "top", d: "M0 17L29.44 34L58.89 17L29.44 0Z" },
+      { face: "right", d: "M88.33 34L117.78 17L117.78 51L88.33 68Z" },
+      { face: "top", d: "M58.89 17L88.33 34L117.78 17L88.33 0Z" },
+      { face: "front", d: "M29.44 34L58.89 51L58.89 85L29.44 68Z" },
+      { face: "right", d: "M58.89 51L88.33 34L88.33 68L58.89 85Z" },
+      { face: "top", d: "M29.44 34L58.89 51L88.33 34L58.89 17Z" }
+    ]
+  },
+  angleStanding: {
+    w: 88.33,
+    h: 119,
+    faces: [
+      { face: "top", d: "M0 17L29.44 0L58.89 17L29.44 34Z" },
+      { face: "front", d: "M0 17L29.44 34L29.44 68L0 51Z" },
+      { face: "right", d: "M58.89 85L88.33 68L88.33 102L58.89 119Z" },
+      { face: "front", d: "M29.44 68L58.89 85L58.89 119L29.44 102Z" },
+      { face: "top", d: "M29.44 34L58.89 17L88.33 34L58.89 51Z" },
+      { face: "right", d: "M58.89 51L88.33 34L88.33 68L58.89 85Z" },
+      { face: "front", d: "M29.44 34L58.89 51L58.89 85L29.44 68Z" }
+    ]
+  },
+  angleLying: {
+    w: 88.33,
+    h: 102,
+    faces: [
+      { face: "right", d: "M58.89 34L88.33 17L88.33 51L58.89 68Z" },
+      { face: "top", d: "M29.44 17L58.89 34L88.33 17L58.89 0Z" },
+      { face: "front", d: "M0 34L29.44 51L29.44 85L0 68Z" },
+      { face: "top", d: "M0 34L29.44 51L58.89 34L29.44 17Z" },
+      { face: "front", d: "M29.44 51L58.89 68L58.89 102L29.44 85Z" },
+      { face: "right", d: "M58.89 68L88.33 51L88.33 85L58.89 102Z" },
+      { face: "top", d: "M29.44 51L58.89 68L88.33 51L58.89 34Z" }
+    ]
+  },
+  heart: {
+    w: 102,
+    h: 88.33,
+    faces: [
+      { face: "front", d: "M17 0L34 29.44L17 58.89L0 29.44Z" },
+      { face: "top", d: "M17 0L51 0L68 29.44L34 29.44Z" },
+      { face: "right", d: "M51 58.89L85 58.89L68 88.33L34 88.33Z" },
+      { face: "front", d: "M34 29.44L51 58.89L34 88.33L17 58.89Z" },
+      { face: "right", d: "M68 29.44L102 29.44L85 58.89L51 58.89Z" },
+      { face: "front", d: "M51 0L68 29.44L51 58.89L34 29.44Z" },
+      { face: "top", d: "M51 0L85 0L102 29.44L68 29.44Z" }
+    ]
+  },
+  heartMirrored: {
+    w: 102,
+    h: 88.33,
+    faces: [
+      { face: "front", d: "M85 0L68 29.44L85 58.89L102 29.44Z" },
+      { face: "top", d: "M85 0L51 0L34 29.44L68 29.44Z" },
+      { face: "right", d: "M51 58.89L17 58.89L34 88.33L68 88.33Z" },
+      { face: "front", d: "M68 29.44L51 58.89L68 88.33L85 58.89Z" },
+      { face: "right", d: "M34 29.44L0 29.44L17 58.89L51 58.89Z" },
+      { face: "front", d: "M51 0L34 29.44L51 58.89L68 29.44Z" },
+      { face: "top", d: "M51 0L17 0L0 29.44L34 29.44Z" }
+    ]
+  },
+  barHorizontal: {
+    w: 117.78,
+    h: 102,
+    faces: [
+      { face: "top", d: "M0 17L29.44 0L58.89 17L29.44 34Z" },
+      { face: "front", d: "M0 17L29.44 34L29.44 68L0 51Z" },
+      { face: "top", d: "M29.44 34L58.89 17L88.33 34L58.89 51Z" },
+      { face: "front", d: "M29.44 34L58.89 51L58.89 85L29.44 68Z" },
+      { face: "top", d: "M58.89 51L88.33 34L117.78 51L88.33 68Z" },
+      { face: "right", d: "M88.33 68L117.78 51L117.78 85L88.33 102Z" },
+      { face: "front", d: "M58.89 51L88.33 68L88.33 102L58.89 85Z" }
+    ]
+  },
+  barVertical: {
+    w: 58.89,
+    h: 136,
+    faces: [
+      { face: "right", d: "M29.44 102L58.89 85L58.89 119L29.44 136Z" },
+      { face: "front", d: "M0 85L29.44 102L29.44 136L0 119Z" },
+      { face: "right", d: "M29.44 68L58.89 51L58.89 85L29.44 102Z" },
+      { face: "front", d: "M0 51L29.44 68L29.44 102L0 85Z" },
+      { face: "top", d: "M0 17L29.44 0L58.89 17L29.44 34Z" },
+      { face: "right", d: "M29.44 34L58.89 17L58.89 51L29.44 68Z" },
+      { face: "front", d: "M0 17L29.44 34L29.44 68L0 51Z" }
+    ]
+  }
+}, lt = {
+  square: {
+    "top-left": W.cube,
+    "top-right": W.cube,
+    "bottom-left": W.cube,
+    "bottom-right": W.cube
+  },
+  corner: {
+    "top-left": W.cornerStanding,
+    "top-right": W.cornerStanding,
+    "bottom-left": W.cornerLying,
+    "bottom-right": W.cornerLying
+  },
+  angle: {
+    "top-left": W.angleStanding,
+    "top-right": W.angleStanding,
+    "bottom-left": W.angleLying,
+    "bottom-right": W.angleLying
+  },
+  heart: {
+    "top-left": W.heart,
+    "top-right": W.heart,
+    "bottom-left": W.heart,
+    "bottom-right": W.heart
+  },
+  bar: {
+    "top-left": W.barVertical,
+    "top-right": W.barHorizontal,
+    "bottom-left": W.barHorizontal,
+    "bottom-right": W.barVertical
+  }
+}, Qe = 34, gr = {
+  front: we.faceFront,
+  top: we.faceTop,
+  right: we.faceRight
+};
+function ur(n) {
+  return n in lt;
+}
+const je = me(
   ({
-    position: n = "top-left",
-    size: e = "md",
-    className: a,
-    "aria-label": d,
-    "aria-hidden": h = !0,
-    "data-color": f,
-    "data-size": g,
-    ...k
-  }, D) => {
-    z(() => {
-      const _ = "rk-crosscorner-inline-styles";
-      if (typeof document > "u" || document.getElementById(_)) return;
-      const V = Ho(Le), N = document.createElement("style");
-      N.id = _, N.textContent = V, document.head.appendChild(N);
+    shape: n = "corner",
+    variant: e = "solid",
+    position: a = "top-left",
+    size: c = "md",
+    mirrored: k = !1,
+    className: y,
+    "aria-label": f,
+    "aria-hidden": x = !0,
+    "data-color": B,
+    "data-size": I,
+    ...J
+  }, L) => {
+    U(() => {
+      const d = "rk-graphic-element-inline-styles";
+      if (typeof document > "u" || document.getElementById(d)) return;
+      const l = dr(we), v = document.createElement("style");
+      v.id = d, v.textContent = l, document.head.appendChild(v);
     }, []);
-    const S = Uo[e], R = Vo[n];
+    const R = cr[c], G = mr[n], p = e === "isometric" && ur(n) ? n === "heart" && k ? W.heartMirrored : lt[n][a] : void 0, Q = e === "isometric" && !p ? "solid" : e, K = p ? 0 : pr[a], N = p ? p.w : G.viewBoxW, w = p ? p.h : G.viewBoxH, H = K === 90 || K === 270, P = H ? w : N, E = H ? N : w, q = Math.round(R * P / Qe), Y = Math.round(R * E / Qe), $ = K === 90 ? `rotate(90) translate(0 ${-w})` : K === 180 ? `rotate(180) translate(${-N} ${-w})` : K === 270 ? `rotate(-90) translate(${-N} 0)` : void 0;
     return /* @__PURE__ */ t(
       "svg",
       {
-        ref: D,
-        className: `${Le.crossCorner} ${a || ""}`,
-        width: S,
-        height: S,
-        viewBox: "0 0 68 68",
+        ref: L,
+        className: `${we.graphicElement} ${y || ""}`,
+        width: q,
+        height: Y,
+        viewBox: `0 0 ${P} ${E}`,
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        "aria-label": d,
-        "aria-hidden": h,
-        role: h ? void 0 : "img",
-        "data-color": f,
-        "data-size": g,
-        style: {
-          transform: R ? `rotate(${R}deg)` : void 0
-        },
-        ...k,
-        children: /* @__PURE__ */ t(
+        "aria-label": f,
+        "aria-hidden": x,
+        role: x ? void 0 : "img",
+        "data-shape": n,
+        "data-variant": Q,
+        "data-color": B,
+        "data-size": I,
+        ...J,
+        children: /* @__PURE__ */ t("g", { transform: $, children: p ? p.faces.map((d, l) => /* @__PURE__ */ t("path", { d: d.d, className: gr[d.face] }, l)) : /* @__PURE__ */ t(
           "path",
           {
-            d: "M68 0V33.8203H67.998V68H34.1777V33.8203H0V0H68Z",
-            className: Le.shape
+            d: Q === "outline" ? G.outline : G.solid,
+            className: we.shape,
+            vectorEffect: "non-scaling-stroke"
           }
-        )
+        ) })
       }
     );
   }
 );
-ye.displayName = "CrossCorner";
-const ni = ut, oi = ht, ri = ft, U = kt, ai = Tt, si = Ct, ii = bt, li = xt, di = yt, ci = vt, pi = wt, mi = St, Oo = _t, Ko = It;
-Oo.displayName = "Field.Description";
-Ko.displayName = "Field.Counter";
-const gi = Ue, qo = ie((n, e) => /* @__PURE__ */ t(Dt, { ref: e, ...n }));
-qo.displayName = "Heading";
-const Ze = Lt;
-Ze.displayName = "Input";
-const Yo = ie((n, e) => /* @__PURE__ */ t(At, { ref: e, ...n }));
-Yo.displayName = "Label";
-const te = Nt, ui = Mt, Zo = jt, hi = Et, fi = Bt, ki = Ft, vi = $t;
-Zo.displayName = "Pagination";
-const xe = ie(
-  (n, e) => /* @__PURE__ */ t(Pt, { ref: e, ...n })
+je.displayName = "GraphicElement";
+const Ci = It, wi = Lt, Si = Dt, oe = Mt, _i = Bt, Ii = Ft, Li = At, Di = Et, Mi = Nt, ji = jt, Ai = Pt, Ni = $t, hr = Rt, fr = zt;
+hr.displayName = "Field.Description";
+fr.displayName = "Field.Counter";
+const Ei = ot, dt = Gt;
+dt.displayName = "Input";
+const kr = me((n, e) => /* @__PURE__ */ t(Ht, { ref: e, ...n }));
+kr.displayName = "Label";
+const pe = Wt, Bi = Ut, vr = Vt, Fi = Zt, Pi = Kt, $i = Ot, zi = qt;
+vr.displayName = "Pagination";
+const Ne = me(
+  (n, e) => /* @__PURE__ */ t(Yt, { ref: e, ...n })
 );
-xe.displayName = "Paragraph";
-const bi = zt, yi = Rt, xi = Gt, Ce = Object.assign(Wt, {
-  Button: Vt,
-  ClearButton: Ut,
-  Input: Ht
-}), Ti = Ot, Ci = Kt, wi = qt, Xo = Yt;
-Xo.displayName = "Suggestion";
-const Ae = Zt, Si = Xt, we = Jt, Jo = ie(function({ shape: e, style: a, ...d }, h) {
-  const f = {};
-  e === "rounded" && (f.borderRadius = "var(--ds-border-radius-xl)");
-  const g = Object.keys(f).length === 0 && !a ? void 0 : { ...f, ...a }, k = {};
-  return e === "rounded" && (k["data-shape"] = "rounded"), /* @__PURE__ */ t(Qt, { ref: h, ...d, ...k, style: g });
+Ne.displayName = "Paragraph";
+const Ri = Xt, Gi = Jt, Hi = Qt, Pe = Object.assign(en, {
+  Button: on,
+  ClearButton: nn,
+  Input: tn
+}), Wi = rn, Ui = an, Vi = sn, br = ln;
+br.displayName = "Suggestion";
+const Re = dn, Oi = cn, Te = pn, yr = me(function({ shape: e, style: a, ...c }, k) {
+  const y = {};
+  e === "rounded" && (y.borderRadius = "var(--ds-border-radius-xl)");
+  const f = Object.keys(y).length === 0 && !a ? void 0 : { ...y, ...a }, x = {};
+  return e === "rounded" && (x["data-shape"] = "rounded"), /* @__PURE__ */ t(mn, { ref: k, ...c, ...x, style: f });
 });
-Jo.displayName = "Tag";
-const Ii = en, Qo = tn, _i = nn, Di = on, er = ie((n, e) => /* @__PURE__ */ t(rn, { ref: e, ...n }));
-er.displayName = "ValidationMessage";
-const tr = "_header_1h8vy_1", nr = "_languageSwitch_1h8vy_37", or = "_searchOverlay_1h8vy_41", rr = "_headerExtension_1h8vy_46", ar = "_headerExtensionTinted_1h8vy_75", sr = "_languageLabel_1h8vy_83", ir = "_languageLink_1h8vy_88", lr = "_extensionContent_1h8vy_93", dr = "_extensionDivider_1h8vy_98", cr = "_extensionContentWrapper_1h8vy_103", pr = "_headerInner_1h8vy_199", mr = "_logoWrapper_1h8vy_216", gr = "_logo_1h8vy_216", ur = "_secondaryLogoWrapper_1h8vy_239", hr = "_slotComponent_1h8vy_248", fr = "_slotContainer_1h8vy_258", kr = "_slotText_1h8vy_266", vr = "_secondaryLogo_1h8vy_239", br = "_redCrossLogo_1h8vy_293", yr = "_primaryLogo_1h8vy_299", xr = "_navItems_1h8vy_303", Tr = "_navLink_1h8vy_312", Cr = "_actions_1h8vy_325", wr = "_ctaButton_1h8vy_333", Sr = "_themeToggle_1h8vy_338", Ir = "_userInfo_1h8vy_343", _r = "_userName_1h8vy_349", Dr = "_loginLink_1h8vy_356", Lr = "_loginText_1h8vy_365", Ar = "_underline_1h8vy_372", Nr = "_searchButtonWrapper_1h8vy_378", Mr = "_buttonText_1h8vy_382", jr = "_menuButton_1h8vy_387", Fr = "_menuOverlay_1h8vy_410", Br = "_searchContent_1h8vy_444", Er = "_menuContent_1h8vy_454", $r = "_menuLeftColumn_1h8vy_463", Pr = "_menuRightColumn_1h8vy_469", zr = "_slotContent_1h8vy_483", Rr = "_navList_1h8vy_496", Gr = "_menuUtilities_1h8vy_503", Wr = "_menuBrand_1h8vy_510", Hr = "_suggestionsSection_1h8vy_514", Ur = "_suggestionsTitle_1h8vy_520", Vr = "_searchResults_1h8vy_529", Or = "_resultList_1h8vy_535", Kr = "_resultItem_1h8vy_541", qr = "_resultLink_1h8vy_549", Yr = "_suggestionIcon_1h8vy_563", Zr = "_suggestionText_1h8vy_576", Xr = "_highlightedText_1h8vy_583", Jr = "_remainingText_1h8vy_588", Qr = "_viewAllLink_1h8vy_601", ea = "_noResults_1h8vy_636", s = {
-  header: tr,
-  languageSwitch: nr,
-  searchOverlay: or,
-  headerExtension: rr,
-  headerExtensionTinted: ar,
-  languageLabel: sr,
-  languageLink: ir,
-  extensionContent: lr,
-  extensionDivider: dr,
-  extensionContentWrapper: cr,
-  headerInner: pr,
-  logoWrapper: mr,
-  logo: gr,
-  secondaryLogoWrapper: ur,
-  slotComponent: hr,
-  slotContainer: fr,
-  slotText: kr,
-  secondaryLogo: vr,
-  redCrossLogo: br,
-  primaryLogo: yr,
-  navItems: xr,
-  navLink: Tr,
-  actions: Cr,
-  ctaButton: wr,
-  themeToggle: Sr,
-  userInfo: Ir,
-  userName: _r,
-  loginLink: Dr,
-  loginText: Lr,
-  underline: Ar,
-  searchButtonWrapper: Nr,
-  buttonText: Mr,
-  menuButton: jr,
-  menuOverlay: Fr,
-  searchContent: Br,
-  menuContent: Er,
-  menuLeftColumn: $r,
-  menuRightColumn: Pr,
-  slotContent: zr,
-  navList: Rr,
-  menuUtilities: Gr,
-  menuBrand: Wr,
-  suggestionsSection: Hr,
-  suggestionsTitle: Ur,
-  searchResults: Vr,
-  resultList: Or,
-  resultItem: Kr,
-  resultLink: qr,
-  suggestionIcon: Yr,
-  suggestionText: Zr,
-  highlightedText: Xr,
-  remainingText: Jr,
-  viewAllLink: Qr,
-  noResults: ea
-}, ta = [
+yr.displayName = "Tag";
+const Ki = gn, xr = un, Zi = hn, qi = fn, Tr = me((n, e) => /* @__PURE__ */ t(kn, { ref: e, ...n }));
+Tr.displayName = "ValidationMessage";
+const Cr = "_header_4177j_1", wr = "_languageSwitch_4177j_37", Sr = "_searchOverlay_4177j_41", _r = "_headerExtension_4177j_46", Ir = "_headerExtensionTinted_4177j_75", Lr = "_languageLabel_4177j_83", Dr = "_languageLink_4177j_88", Mr = "_extensionContent_4177j_93", jr = "_extensionDivider_4177j_98", Ar = "_extensionContentWrapper_4177j_103", Nr = "_headerInner_4177j_199", Er = "_logoWrapper_4177j_216", Br = "_logo_4177j_216", Fr = "_secondaryLogoWrapper_4177j_239", Pr = "_slotComponent_4177j_248", $r = "_slotContainer_4177j_258", zr = "_slotText_4177j_266", Rr = "_secondaryLogo_4177j_239", Gr = "_redCrossLogo_4177j_293", Hr = "_primaryLogo_4177j_299", Wr = "_navItems_4177j_303", Ur = "_navLink_4177j_312", Vr = "_actions_4177j_325", Or = "_ctaButton_4177j_333", Kr = "_themeToggle_4177j_338", Zr = "_userInfo_4177j_343", qr = "_userName_4177j_349", Yr = "_loginLink_4177j_356", Xr = "_loginText_4177j_365", Jr = "_underline_4177j_372", Qr = "_searchButtonWrapper_4177j_378", ea = "_buttonText_4177j_382", ta = "_menuButton_4177j_387", na = "_menuOverlay_4177j_392", oa = "_searchContent_4177j_426", ra = "_menuContent_4177j_436", aa = "_menuLeftColumn_4177j_445", sa = "_menuRightColumn_4177j_451", ia = "_slotContent_4177j_465", la = "_navList_4177j_478", da = "_menuUtilities_4177j_485", ca = "_menuBrand_4177j_492", pa = "_suggestionsSection_4177j_496", ma = "_suggestionsTitle_4177j_502", ga = "_searchResults_4177j_511", ua = "_resultList_4177j_517", ha = "_resultItem_4177j_523", fa = "_resultLink_4177j_531", ka = "_suggestionIcon_4177j_545", va = "_suggestionText_4177j_558", ba = "_highlightedText_4177j_565", ya = "_remainingText_4177j_570", xa = "_viewAllLink_4177j_583", Ta = "_noResults_4177j_618", i = {
+  header: Cr,
+  languageSwitch: wr,
+  searchOverlay: Sr,
+  headerExtension: _r,
+  headerExtensionTinted: Ir,
+  languageLabel: Lr,
+  languageLink: Dr,
+  extensionContent: Mr,
+  extensionDivider: jr,
+  extensionContentWrapper: Ar,
+  headerInner: Nr,
+  logoWrapper: Er,
+  logo: Br,
+  secondaryLogoWrapper: Fr,
+  slotComponent: Pr,
+  slotContainer: $r,
+  slotText: zr,
+  secondaryLogo: Rr,
+  redCrossLogo: Gr,
+  primaryLogo: Hr,
+  navItems: Wr,
+  navLink: Ur,
+  actions: Vr,
+  ctaButton: Or,
+  themeToggle: Kr,
+  userInfo: Zr,
+  userName: qr,
+  loginLink: Yr,
+  loginText: Xr,
+  underline: Jr,
+  searchButtonWrapper: Qr,
+  buttonText: ea,
+  menuButton: ta,
+  menuOverlay: na,
+  searchContent: oa,
+  menuContent: ra,
+  menuLeftColumn: aa,
+  menuRightColumn: sa,
+  slotContent: ia,
+  navList: la,
+  menuUtilities: da,
+  menuBrand: ca,
+  suggestionsSection: pa,
+  suggestionsTitle: ma,
+  searchResults: ga,
+  resultList: ua,
+  resultItem: ha,
+  resultLink: fa,
+  suggestionIcon: ka,
+  suggestionText: va,
+  highlightedText: ba,
+  remainingText: ya,
+  viewAllLink: xa,
+  noResults: Ta
+}, Ca = [
   // Pages
   { id: "home", title: "Hjem", category: "Page", path: "home", description: "Forsiden" },
   { id: "components", title: "Komponenter", category: "Page", path: "components", description: "Oversikt over alle komponenter" },
   { id: "design", title: "Design", category: "Page", path: "design", description: "Designretningslinjer og prinsipper" },
   { id: "code", title: "Kode", category: "Page", path: "code", description: "Utviklerdokumentasjon og oppsett" },
-  // Components
+  { id: "tokens", title: "Tokens", category: "Page", path: "tokens", description: "Design tokens: farger, størrelser og typografi" },
+  // Components (samme utvalg som komponentkatalogen)
   { id: "alert", title: "Alert", category: "Component", path: "components", description: "Varselbokser for viktige meldinger" },
   { id: "avatar", title: "Avatar", category: "Component", path: "components", description: "Profilbilder og initialer" },
   { id: "badge", title: "Badge", category: "Component", path: "components", description: "Små merker for status eller antall" },
+  { id: "breadcrumbs", title: "Breadcrumbs", category: "Component", path: "components", description: "Brødsmulesti for navigasjon" },
   { id: "button", title: "Button", category: "Component", path: "components", description: "Knapper for handlinger" },
   { id: "card", title: "Card", category: "Component", path: "components", description: "Kort for gruppering av innhold" },
   { id: "carousel", title: "Carousel", category: "Component", path: "components", description: "Bildekarusell" },
   { id: "checkbox", title: "Checkbox", category: "Component", path: "components", description: "Valg av flere alternativer" },
+  { id: "chip", title: "Chip", category: "Component", path: "components", description: "Filtrering og valg i kompakte merker" },
+  { id: "dateinput", title: "DateInput", category: "Component", path: "components", description: "Tekstfelt for dato (dd.mm.åååå)" },
+  { id: "datepicker", title: "DatePicker", category: "Component", path: "components", description: "Kalender for valg av dato" },
+  { id: "details", title: "Details", category: "Component", path: "components", description: "Ekspanderbare seksjoner" },
   { id: "dialog", title: "Dialog", category: "Component", path: "components", description: "Modale vinduer" },
+  { id: "divider", title: "Divider", category: "Component", path: "components", description: "Skillelinjer" },
   { id: "dropdown", title: "Dropdown", category: "Component", path: "components", description: "Nedtrekksmenyer" },
+  { id: "errorsummary", title: "ErrorSummary", category: "Component", path: "components", description: "Oppsummering av skjemafeil" },
+  { id: "field", title: "Field", category: "Component", path: "components", description: "Feltoppsett med etikett og beskrivelse" },
+  { id: "fieldset", title: "Fieldset", category: "Component", path: "components", description: "Gruppering av skjemafelt" },
+  { id: "graphicelement", title: "GraphicElement", category: "Component", path: "components", description: "Grafiske merkevareelementer fra designretningen" },
   { id: "header", title: "Header", category: "Component", path: "components", description: "Topptekst og navigasjon" },
-  { id: "herosection", title: "HeroSection", category: "Component", path: "components", description: "Store introduksjonsseksjoner" },
   { id: "input", title: "Input", category: "Component", path: "components", description: "Tekstfelt for brukerinput" },
   { id: "link", title: "Link", category: "Component", path: "components", description: "Lenker til andre sider" },
   { id: "list", title: "List", category: "Component", path: "components", description: "Ordnede og uordnede lister" },
   { id: "pagination", title: "Pagination", category: "Component", path: "components", description: "Navigasjon mellom sider" },
+  { id: "popover", title: "Popover", category: "Component", path: "components", description: "Flytende innholdsbokser" },
   { id: "radio", title: "Radio", category: "Component", path: "components", description: "Valg av ett alternativ" },
   { id: "search", title: "Search", category: "Component", path: "components", description: "Søkefelter" },
   { id: "select", title: "Select", category: "Component", path: "components", description: "Valgmeny" },
-  { id: "spinner", title: "Spinner", category: "Component", path: "components", description: "Lasteindikator" },
+  { id: "skeletonloader", title: "SkeletonLoader", category: "Component", path: "components", description: "Plassholdere under lasting" },
+  { id: "skiplink", title: "SkipLink", category: "Component", path: "components", description: "Hopp til hovedinnhold" },
+  { id: "spinnerloader", title: "SpinnerLoader", category: "Component", path: "components", description: "Lasteindikator" },
+  { id: "suggestion", title: "Suggestion", category: "Component", path: "components", description: "Søkefelt med forslag" },
   { id: "switch", title: "Switch", category: "Component", path: "components", description: "Av/på bryter" },
   { id: "table", title: "Table", category: "Component", path: "components", description: "Tabeller for data" },
   { id: "tabs", title: "Tabs", category: "Component", path: "components", description: "Faner for inndeling av innhold" },
   { id: "tag", title: "Tag", category: "Component", path: "components", description: "Merkelapper og emneknagger" },
   { id: "textarea", title: "Textarea", category: "Component", path: "components", description: "Flerlinjers tekstfelt" },
+  { id: "textfield", title: "Textfield", category: "Component", path: "components", description: "Komplett tekstfelt med etikett" },
+  { id: "togglegroup", title: "ToggleGroup", category: "Component", path: "components", description: "Grupperte veksleknapper" },
   { id: "tooltip", title: "Tooltip", category: "Component", path: "components", description: "Hjelpetekster ved hover" },
-  // Design Docs - For Designere
+  // Design — For designere
   { id: "figma-oppkobling", title: "Figma tilkobling", category: "Design", path: "design/figma-oppkobling", description: "Hvordan koble til Figma-biblioteket" },
   { id: "oppstart", title: "Oppstart", category: "Design", path: "design/oppstart", description: "Oppsett av arbeidsområde" },
-  { id: "lage-komponenter", title: "Lage ett nytt komponent", category: "Design", path: "design/lage-komponenter", description: "Veileder for komponentbygging" },
+  { id: "lage-komponenter", title: "Lage en ny komponent", category: "Design", path: "design/lage-komponenter", description: "Veileder for komponentbygging" },
   { id: "praktiske-eksempler", title: "Praktiske eksempler", category: "Design", path: "design/praktiske-eksempler", description: "Eksempler på bruk av designsystemet" },
   { id: "token-studio", title: "Token Studio", category: "Design", path: "design/token-studio", description: "Bruk av Token Studio" },
-  // Design Docs - Farger
+  // Design — Farger
   { id: "fargesystem", title: "Sette opp ditt eget fargesystem", category: "Design", path: "design/fargesystem", description: "Hvordan sette opp farger" },
   { id: "temabygger", title: "Temabygger", category: "Design", path: "design/temabygger", description: "Designsystemets temagenerator" },
   { id: "bruk-farger", title: "Bruk fargene", category: "Design", path: "design/bruk-farger", description: "Bruk genererte farger" },
-  // Design Docs - Bidra
+  // Design — Guider
+  { id: "vedlikeholde-design-tokens", title: "Vedlikeholde design tokens", category: "Design", path: "design/vedlikeholde-design-tokens", description: "Endre tokens og publisere ny versjon" },
+  { id: "endre-bygge-tema", title: "Endre og bygge tema", category: "Design", path: "design/endre-bygge-tema", description: "Temaoppsett og bygging av tokens" },
+  { id: "koble-tokens-til-figma", title: "Koble tokens til Figma", category: "Design", path: "design/koble-tokens-til-figma", description: "Synkronisere tokens med Figma" },
+  // Design — Bidra
   { id: "foresla-design", title: "Foreslå nytt design", category: "Design", path: "design/foresla-design", description: "Hvordan bidra med nytt design" },
-  // Design Docs - Designelementer
+  // Design — Designelementer
   { id: "hva-er-design-tokens", title: "Hva er design tokens", category: "Design", path: "design/hva-er-design-tokens", description: "Introduksjon til design tokens" },
   { id: "design-tokens-i-figma", title: "Design tokens i Figma", category: "Design", path: "design/design-tokens-i-figma", description: "Bruke tokens i Figma" },
   { id: "farger-navnestruktur", title: "Farger: Navnestruktur", category: "Design", path: "design/farger-navnestruktur", description: "Navngiving av farger" },
@@ -3754,56 +4147,67 @@ const tr = "_header_1h8vy_1", nr = "_languageSwitch_1h8vy_37", or = "_searchOver
   { id: "storrelse-tokens", title: "Størrelse-tokens", category: "Design", path: "design/storrelse-tokens", description: "Tokens for størrelser" },
   { id: "font-family", title: "Typografi: Font-family", category: "Design", path: "design/font-family", description: "Font-familier" },
   { id: "typografi-tokens", title: "Typografi-tokens", category: "Design", path: "design/typografi-tokens", description: "Tokens for typografi" },
-  // Code Docs
-  { id: "code-intro", title: "Oversikt (Kode)", category: "Code", path: "code/intro", description: "Startside for kode" },
+  // Code
   { id: "kom-i-gang", title: "Kom i gang (Kode)", category: "Code", path: "code/kom-i-gang", description: "Installasjon og oppsett" },
-  { id: "figma-mcp", title: "Fra Figma til Kode (MCP)", category: "Code", path: "code/figma-mcp", description: "Automatisert arbeidsflyt med MCP" },
-  { id: "komponent-kreasjon", title: "Komponent Kreasjon", category: "Code", path: "code/komponent-kreasjon", description: "Opprette nye komponenter" },
-  { id: "progression", title: "Progresjon", category: "Code", path: "code/progression", description: "Fra design til ferdig komponent" },
-  { id: "metadata-files", title: "Metadata filer", category: "Code", path: "code/metadata-files", description: "Struktur og bruk av metadata.json" }
+  { id: "code-design-tokens", title: "Design tokens (Kode)", category: "Code", path: "code/design-tokens", description: "Bruke tokens i kode" },
+  { id: "fonts", title: "Fonter", category: "Code", path: "code/fonts", description: "Oppsett av Source Sans 3" },
+  { id: "icons", title: "Ikoner", category: "Code", path: "code/icons", description: "Ikonbibliotek og bruk" },
+  { id: "contributing", title: "Bidra med kode", category: "Code", path: "code/contributing", description: "Retningslinjer for bidrag" },
+  { id: "figma-mcp-intro", title: "Fra Figma til kode (MCP)", category: "Code", path: "code/figma-mcp-intro", description: "Automatisert arbeidsflyt med MCP" },
+  { id: "figma-mcp-cursor", title: "Figma MCP i Cursor", category: "Code", path: "code/figma-mcp-cursor", description: "Oppsett av MCP i Cursor" },
+  { id: "figma-mcp-claude", title: "Figma MCP i Claude", category: "Code", path: "code/figma-mcp-claude", description: "Oppsett av MCP i Claude" },
+  { id: "komponent-kreasjon", title: "Komponentkreasjon", category: "Code", path: "code/komponent-kreasjon", description: "Opprette nye komponenter" },
+  { id: "metadata-files", title: "Metadata-filer", category: "Code", path: "code/metadata-files", description: "Struktur og bruk av metadata.json" }
 ];
-function na(n) {
+function wa(n) {
   return n.split(/\s+/).map((e) => e[0] ?? "").join("").slice(0, 2).toUpperCase();
 }
-const Li = ({
+const Yi = ({
   variant: n = "default",
   "data-color": e = "primary",
   activePage: a,
-  setPage: d,
-  children: h,
-  showUser: f = !0,
-  showSearch: g = !0,
-  showLogin: k = !0,
-  showCta: D = !1,
-  ctaLabel: S,
-  ctaIcon: R = /* @__PURE__ */ t(un, { "aria-hidden": !0 }),
-  onCtaClick: _,
-  showThemeToggle: V = !1,
-  secondaryLogo: N = !1,
+  setPage: c,
+  children: k,
+  showUser: y = !0,
+  showSearch: f = !0,
+  showLogin: x = !0,
+  showCta: B = !1,
+  ctaLabel: I,
+  ctaIcon: J = /* @__PURE__ */ t(Mn, { "aria-hidden": !0 }),
+  onCtaClick: L,
+  showThemeToggle: R = !1,
+  secondaryLogo: G = !1,
   secondaryLogoSrc: p,
-  secondaryLogoSrcDark: K,
-  secondaryLogoAlt: X = "Secondary Logo",
-  navItems: A,
-  showNavItems: q = !0,
-  showMenuButton: m = !0,
-  showHeaderExtension: M = !1,
-  showModeToggle: I = !1,
-  showLanguageSwitch: F = !1,
-  extensionColor: j,
-  buttonStyle: L = "default",
-  userName: G,
-  userInitials: ne,
-  userAvatarSrc: H,
-  onUserClick: J
+  secondaryLogoSrcDark: Q,
+  secondaryLogoAlt: K = "Secondary Logo",
+  navItems: N,
+  showNavItems: w = !0,
+  showMenuButton: H = !0,
+  showHeaderExtension: P = !1,
+  showModeToggle: E = !1,
+  showLanguageSwitch: q = !1,
+  extensionColor: Y,
+  userName: $,
+  userInitials: d,
+  userAvatarSrc: l,
+  onUserClick: v
 }) => {
-  const [T, b] = O(!1), [l, C] = O(!1), [B, Y] = O(""), [y, E] = O("light"), { language: Q, setLanguage: le, t: v } = Te(), [Z, me] = O(!1);
-  z(() => {
-    const i = "rk-header-inline-styles";
-    if (typeof document > "u" || document.getElementById(i)) return;
-    const u = oa(s), x = document.createElement("style");
-    x.id = i, x.textContent = u, document.head.appendChild(x);
+  const [S, F] = Z(!1), [D, g] = Z(!1), se = ye.useRef(null), ee = ye.useRef(null), te = ye.useRef(null), ne = ye.useRef(null), [z, ie] = Z(""), [T, h] = Z(() => {
+    var s;
+    if (typeof document < "u") {
+      const m = document.documentElement.getAttribute("data-color-scheme");
+      if (m === "dark" || m === "light") return m;
+      if ((s = window.matchMedia) != null && s.call(window, "(prefers-color-scheme: dark)").matches) return "dark";
+    }
+    return "light";
+  }), { language: C, setLanguage: j, t: _ } = Be(), [u, M] = Z(!1);
+  U(() => {
+    const s = "rk-header-inline-styles";
+    if (typeof document > "u" || document.getElementById(s)) return;
+    const m = Sa(i), b = document.createElement("style");
+    b.id = s, b.textContent = m, document.head.appendChild(b);
   }, []);
-  const ge = () => /* @__PURE__ */ r(
+  const le = () => /* @__PURE__ */ r(
     "svg",
     {
       width: "170",
@@ -3813,7 +4217,7 @@ const Li = ({
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": !0,
       focusable: "false",
-      className: s.redCrossLogo,
+      className: i.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: "#1E1E1E" }),
         /* @__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" }),
@@ -3828,212 +4232,222 @@ const Li = ({
       ]
     }
   );
-  z(() => {
-    b(!1), C(!1), Y("");
-  }, [a]), z(() => {
-    if (!(typeof document > "u") && T && Z) {
-      const i = document.body.style.overflow;
+  U(() => {
+    F(!1), g(!1), ie("");
+  }, [a]), U(() => {
+    if (!(typeof document > "u") && S && u) {
+      const s = document.body.style.overflow;
       return document.body.style.overflow = "hidden", () => {
-        document.body.style.overflow = i;
+        document.body.style.overflow = s;
       };
     }
-  }, [T, Z]), z(() => {
+  }, [S, u]), U(() => {
     if (typeof window > "u" || typeof window.matchMedia > "u") return;
-    const i = window.matchMedia("(max-width: 850px)"), u = (x) => me("matches" in x ? x.matches : i.matches);
-    return u(i), i.addEventListener ? i.addEventListener("change", u) : i.addListener(u), () => {
-      i.removeEventListener ? i.removeEventListener("change", u) : i.removeListener(u);
+    const s = window.matchMedia("(max-width: 850px)"), m = (b) => M("matches" in b ? b.matches : s.matches);
+    return m(s), s.addEventListener ? s.addEventListener("change", m) : s.addListener(m), () => {
+      s.removeEventListener ? s.removeEventListener("change", m) : s.removeListener(m);
     };
-  }, []), z(() => {
+  }, []), U(() => {
     if (typeof document > "u") return;
-    const i = document.querySelector(`.${s.header}`);
-    if (!i) return;
-    const u = () => {
-      const ae = i.offsetHeight;
-      document.documentElement.style.setProperty("--header-height-mobile", `${ae}px`);
+    const s = document.querySelector(`.${i.header}`);
+    if (!s) return;
+    const m = () => {
+      const V = s.offsetHeight;
+      document.documentElement.style.setProperty("--header-height-mobile", `${V}px`);
     };
-    u(), window.addEventListener("resize", u);
-    const x = new ResizeObserver(() => {
-      u();
+    m(), window.addEventListener("resize", m);
+    const b = new ResizeObserver(() => {
+      m();
     });
-    return x.observe(i), () => {
-      window.removeEventListener("resize", u), x.disconnect();
+    return b.observe(s), () => {
+      window.removeEventListener("resize", m), b.disconnect();
     };
-  }, [Z]), z(() => {
+  }, [u]), U(() => {
     if (typeof document > "u") return;
-    const i = document.querySelector(`.${s.logoWrapper}`);
-    if (!i) return;
-    const u = () => {
-      const x = i.offsetWidth;
-      document.documentElement.style.setProperty("--rk-logo-width", `${x}px`);
+    const s = document.querySelector(`.${i.logoWrapper}`);
+    if (!s) return;
+    const m = () => {
+      const b = s.offsetWidth;
+      document.documentElement.style.setProperty("--rk-logo-width", `${b}px`);
     };
-    return u(), window.addEventListener("resize", u), () => window.removeEventListener("resize", u);
-  }, [Z]), z(() => {
-    if (typeof document > "u" || !l) {
+    return m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m);
+  }, [u]), U(() => {
+    if (typeof document > "u" || !D) {
       document.documentElement.style.setProperty("--rk-search-overlay-height", "0px");
       return;
     }
-    const i = document.querySelector(`.${s.searchOverlay}`);
-    if (!i) return;
-    const u = () => {
-      const ae = i.offsetHeight;
-      document.documentElement.style.setProperty("--rk-search-overlay-height", `${ae}px`);
+    const s = document.querySelector(`.${i.searchOverlay}`);
+    if (!s) return;
+    const m = () => {
+      const V = s.offsetHeight;
+      document.documentElement.style.setProperty("--rk-search-overlay-height", `${V}px`);
+    };
+    requestAnimationFrame(m), window.addEventListener("resize", m);
+    const b = new ResizeObserver(m);
+    return b.observe(s), () => {
+      window.removeEventListener("resize", m), b.disconnect();
     };
-    requestAnimationFrame(u), window.addEventListener("resize", u);
-    const x = new ResizeObserver(u);
-    return x.observe(i), () => {
-      window.removeEventListener("resize", u), x.disconnect();
+  }, [D]), U(() => {
+    if (!S && !D) return;
+    const s = (m) => {
+      var b, V;
+      m.key === "Escape" && (S && (F(!1), (b = se.current) == null || b.focus()), D && (g(!1), (V = ee.current) == null || V.focus()));
     };
-  }, [l]);
-  const c = () => {
-    const i = y === "light" ? "dark" : "light";
-    E(i), document.documentElement.setAttribute("data-color-scheme", i);
-  }, w = (i) => {
-    d && (i.preventDefault(), d("home")), b(!1), C(!1);
-  }, $ = () => {
-    b(!T), l && C(!1), !T && typeof document < "u" && requestAnimationFrame(() => {
-      const i = document.querySelector(`.${s.header}`);
-      if (i) {
-        const u = i.offsetHeight;
-        document.documentElement.style.setProperty("--header-height-mobile", `${u}px`);
+    return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
+  }, [S, D]), U(() => {
+    var s, m, b;
+    D ? (s = ne.current) == null || s.focus() : S && ((b = (m = te.current) == null ? void 0 : m.querySelector('a[href], button, input, select, [tabindex]:not([tabindex="-1"])')) == null || b.focus());
+  }, [S, D]);
+  const re = () => {
+    const s = T === "light" ? "dark" : "light";
+    h(s), document.documentElement.setAttribute("data-color-scheme", s);
+  }, ge = (s) => {
+    c && (s.preventDefault(), c("home")), F(!1), g(!1);
+  }, xe = () => {
+    F(!S), D && g(!1), !S && typeof document < "u" && requestAnimationFrame(() => {
+      const s = document.querySelector(`.${i.header}`);
+      if (s) {
+        const m = s.offsetHeight;
+        document.documentElement.style.setProperty("--header-height-mobile", `${m}px`);
       }
     });
-  }, oe = () => {
-    C(!l), T && b(!1);
-  }, re = fe(() => {
-    if (!B.trim()) return [];
-    const i = B.toLowerCase();
-    return ta.filter(
-      (u) => u.title.toLowerCase().startsWith(i)
+  }, Se = () => {
+    g(!D), S && F(!1);
+  }, A = Ae(() => {
+    if (!z.trim()) return [];
+    const s = z.toLowerCase();
+    return Ca.filter(
+      (m) => m.title.toLowerCase().startsWith(s)
     );
-  }, [B]), pe = (i) => {
-    d && d(i), C(!1), Y("");
+  }, [z]), ae = (s) => {
+    c && c(s), g(!1), ie("");
   };
-  return /* @__PURE__ */ r("header", { className: s.header, "data-open": T ? "true" : "false", "data-color": e, "data-button-style": L, "data-variant": n, children: [
-    M && /* @__PURE__ */ t("div", { className: `${s.headerExtension}${j === "tinted" ? ` ${s.headerExtensionTinted}` : ""}`, "data-color-scheme": "light", "data-extension-color": j, children: /* @__PURE__ */ r("div", { className: s.extensionContentWrapper, children: [
-      I && /* @__PURE__ */ t("div", { className: s.extensionContent, children: /* @__PURE__ */ t(
-        Ae,
+  return /* @__PURE__ */ r("header", { className: i.header, "data-open": S ? "true" : "false", "data-color": e, "data-variant": n, children: [
+    P && /* @__PURE__ */ t("div", { className: `${i.headerExtension}${Y === "tinted" ? ` ${i.headerExtensionTinted}` : ""}`, "data-color-scheme": "light", "data-extension-color": Y, children: /* @__PURE__ */ r("div", { className: i.extensionContentWrapper, children: [
+      E && /* @__PURE__ */ t("div", { className: i.extensionContent, children: /* @__PURE__ */ t(
+        Re,
         {
           "data-size": "sm",
-          checked: y === "dark",
-          onChange: c,
-          label: v("header.darkMode"),
+          checked: T === "dark",
+          onChange: re,
+          label: _("header.darkMode"),
           color: "neutral",
           "data-color-scheme": "light"
         }
       ) }),
-      I && F && /* @__PURE__ */ t("div", { className: s.extensionDivider }),
-      F && /* @__PURE__ */ r("div", { className: s.languageSwitch, children: [
-        /* @__PURE__ */ t("span", { className: s.languageLabel, children: v("header.language") }),
-        /* @__PURE__ */ r(U.TriggerContext, { children: [
+      E && q && /* @__PURE__ */ t("div", { className: i.extensionDivider }),
+      q && /* @__PURE__ */ r("div", { className: i.languageSwitch, children: [
+        /* @__PURE__ */ t("span", { className: i.languageLabel, children: _("header.language") }),
+        /* @__PURE__ */ r(oe.TriggerContext, { children: [
           /* @__PURE__ */ r(
-            U.Trigger,
+            oe.Trigger,
             {
-              className: s.languageLink,
-              "aria-label": v("header.selectLanguage"),
+              className: i.languageLink,
+              "aria-label": _("header.selectLanguage"),
               style: { background: "transparent", border: "none", padding: 0, cursor: "pointer", font: "inherit" },
               children: [
-                Q,
+                C,
                 " ",
-                /* @__PURE__ */ t(Be, { "aria-hidden": !0 })
+                /* @__PURE__ */ t(Ze, { "aria-hidden": !0 })
               ]
             }
           ),
           /* @__PURE__ */ t(
-            U,
+            oe,
             {
-              "data-color-scheme": y,
+              "data-color-scheme": T,
               placement: "bottom-end",
-              children: /* @__PURE__ */ r(U.List, { children: [
-                /* @__PURE__ */ t(U.Item, { children: /* @__PURE__ */ t(U.Button, { onClick: () => le("NO"), children: "Norsk (NO)" }) }),
-                /* @__PURE__ */ t(U.Item, { children: /* @__PURE__ */ t(U.Button, { onClick: () => le("EN"), children: "English (EN)" }) })
+              children: /* @__PURE__ */ r(oe.List, { children: [
+                /* @__PURE__ */ t(oe.Item, { children: /* @__PURE__ */ t(oe.Button, { onClick: () => j("NO"), children: "Norsk (NO)" }) }),
+                /* @__PURE__ */ t(oe.Item, { children: /* @__PURE__ */ t(oe.Button, { onClick: () => j("EN"), children: "English (EN)" }) })
               ] })
             }
           )
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ r("div", { className: s.headerInner, children: [
-      /* @__PURE__ */ r("div", { className: s.logoWrapper, children: [
+    /* @__PURE__ */ r("div", { className: i.headerInner, children: [
+      /* @__PURE__ */ r("div", { className: i.logoWrapper, children: [
         /* @__PURE__ */ t(
-          te,
+          pe,
           {
             href: "/",
-            className: `${s.logo} ${s.primaryLogo}`,
-            "aria-label": v("header.homeAriaLabel"),
-            onClick: w,
-            children: /* @__PURE__ */ t(ge, {})
+            className: `${i.logo} ${i.primaryLogo}`,
+            "aria-label": _("header.homeAriaLabel"),
+            onClick: ge,
+            children: /* @__PURE__ */ t(le, {})
           }
         ),
-        /* @__PURE__ */ t("div", { className: s.secondaryLogoWrapper, children: N && p ? /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { className: i.secondaryLogoWrapper, children: G && p ? /* @__PURE__ */ t(
           "img",
           {
-            src: y === "dark" && K ? K : p,
-            alt: X,
-            className: s.secondaryLogo
+            src: T === "dark" && Q ? Q : p,
+            alt: K,
+            className: i.secondaryLogo
           }
-        ) : N ? /* @__PURE__ */ t("div", { className: s.slotComponent, children: /* @__PURE__ */ t("div", { className: s.slotContainer, children: /* @__PURE__ */ t("p", { className: s.slotText, children: "SLOT" }) }) }) : null })
+        ) : G ? /* @__PURE__ */ t("div", { className: i.slotComponent, children: /* @__PURE__ */ t("div", { className: i.slotContainer, children: /* @__PURE__ */ t("p", { className: i.slotText, children: "SLOT" }) }) }) : null })
       ] }),
-      q && A && A.length > 0 && !Z && /* @__PURE__ */ t("nav", { className: s.navItems, children: A.map((i, u) => /* @__PURE__ */ t(
-        te,
+      w && N && N.length > 0 && !u && /* @__PURE__ */ t("nav", { className: i.navItems, children: N.map((s, m) => /* @__PURE__ */ t(
+        pe,
         {
-          href: i.href,
-          className: s.navLink,
-          onClick: (x) => {
-            d && (x.preventDefault(), d(i.href));
+          href: s.href,
+          className: i.navLink,
+          onClick: (b) => {
+            c && (b.preventDefault(), c(s.href));
           },
-          children: i.label
+          children: s.label
         },
-        u
+        m
       )) }),
-      /* @__PURE__ */ r("div", { className: s.actions, children: [
-        D && /* @__PURE__ */ r(
-          ce,
+      /* @__PURE__ */ r("div", { className: i.actions, children: [
+        B && /* @__PURE__ */ r(
+          fe,
           {
             variant: "primary",
             "data-color": "main",
             "data-size": "md",
-            className: s.ctaButton,
-            onClick: _,
+            className: i.ctaButton,
+            onClick: L,
             children: [
-              R,
-              /* @__PURE__ */ t("span", { className: R ? s.buttonText : void 0, children: S || v("header.supportUs") })
+              J,
+              /* @__PURE__ */ t("span", { className: J ? i.buttonText : void 0, children: I || _("header.supportUs") })
             ]
           }
         ),
-        !M && V && /* @__PURE__ */ t("div", { className: s.themeToggle, children: /* @__PURE__ */ t(
-          Ae,
+        !P && R && /* @__PURE__ */ t("div", { className: i.themeToggle, children: /* @__PURE__ */ t(
+          Re,
           {
-            checked: y === "dark",
-            onChange: c,
-            "aria-label": v("header.toggleTheme")
+            checked: T === "dark",
+            onChange: re,
+            "aria-label": _("header.toggleTheme")
           }
         ) }),
-        f && (() => {
-          const i = G ?? "Frodo Baggins", u = ne ?? (G ? na(G) : "FB"), x = !!J;
+        y && (() => {
+          const s = $ ?? "Frodo Baggins", m = d ?? ($ ? wa($) : "FB"), b = !!v;
           return /* @__PURE__ */ r(
             "div",
             {
-              className: s.userInfo,
-              onClick: J,
-              role: x ? "button" : void 0,
-              tabIndex: x ? 0 : void 0,
-              onKeyDown: x ? (ae) => {
-                (ae.key === "Enter" || ae.key === " ") && (ae.preventDefault(), J == null || J());
+              className: i.userInfo,
+              onClick: v,
+              role: b ? "button" : void 0,
+              tabIndex: b ? 0 : void 0,
+              onKeyDown: b ? (V) => {
+                (V.key === "Enter" || V.key === " ") && (V.preventDefault(), v == null || v());
               } : void 0,
-              style: x ? { cursor: "pointer" } : void 0,
+              style: b ? { cursor: "pointer" } : void 0,
               children: [
-                /* @__PURE__ */ t(xe, { "data-size": "md", className: s.userName, children: i }),
+                /* @__PURE__ */ t(Ne, { "data-size": "md", className: i.userName, children: s }),
                 /* @__PURE__ */ t(
-                  Ke,
+                  at,
                   {
-                    "aria-label": i,
+                    "aria-label": s,
                     "data-color": "main",
                     variant: "circle",
-                    initials: H ? void 0 : u,
-                    children: H ? /* @__PURE__ */ t(
+                    initials: l ? void 0 : m,
+                    children: l ? /* @__PURE__ */ t(
                       "img",
                       {
-                        src: H,
+                        src: l,
                         alt: "",
                         style: { width: "100%", height: "100%", objectFit: "cover" }
                       }
@@ -4044,174 +4458,173 @@ const Li = ({
             }
           );
         })(),
-        k && /* @__PURE__ */ r("a", { href: "#", className: s.loginLink, children: [
-          /* @__PURE__ */ t(xe, { "data-size": "md", className: s.loginText, children: v("header.login") }),
-          /* @__PURE__ */ t("div", { className: s.underline })
+        x && /* @__PURE__ */ r("a", { href: "#", className: i.loginLink, children: [
+          /* @__PURE__ */ t(Ne, { "data-size": "md", className: i.loginText, children: _("header.login") }),
+          /* @__PURE__ */ t("div", { className: i.underline })
         ] }),
-        g && /* @__PURE__ */ t("div", { className: s.searchButtonWrapper, children: /* @__PURE__ */ r(
-          ce,
+        f && /* @__PURE__ */ t("div", { className: i.searchButtonWrapper, children: /* @__PURE__ */ r(
+          fe,
           {
+            ref: ee,
             variant: "secondary",
-            shape: L === "soft" ? "pill" : void 0,
-            "data-color": L === "soft" ? "neutral" : "main",
+            "data-color": "main",
             "data-size": "md",
-            onClick: oe,
-            "aria-expanded": l,
-            "aria-label": v(l ? "header.closeSearch" : "header.openSearch"),
+            onClick: Se,
+            "aria-expanded": D,
+            "aria-label": _(D ? "header.closeSearch" : "header.openSearch"),
             children: [
-              l ? /* @__PURE__ */ t(_e, { "aria-hidden": !0 }) : /* @__PURE__ */ t(Ee, { "aria-hidden": !0 }),
-              /* @__PURE__ */ t("span", { className: s.buttonText, children: v(l ? "header.close" : "header.search") })
+              D ? /* @__PURE__ */ t(qe, { "aria-hidden": !0 }) : /* @__PURE__ */ t(Ye, { "aria-hidden": !0 }),
+              /* @__PURE__ */ t("span", { className: i.buttonText, children: _(D ? "header.close" : "header.search") })
             ]
           }
         ) }),
-        (m || Z) && /* @__PURE__ */ t(
-          ce,
+        (H || u) && /* @__PURE__ */ r(
+          fe,
           {
-            variant: L === "soft" ? "soft" : "primary",
-            shape: L === "soft" ? "pill" : void 0,
+            ref: se,
+            variant: "primary",
             "data-color": "main",
             "data-size": "md",
-            onClick: $,
-            "aria-expanded": T,
-            "aria-label": v(T ? "header.closeMenu" : "header.openMenu"),
-            className: s.menuButton,
-            children: L === "soft" ? /* @__PURE__ */ r(Se, { children: [
-              /* @__PURE__ */ t("span", { className: s.buttonText, children: v(T ? "header.close" : "header.menu") }),
-              T ? /* @__PURE__ */ t(_e, { "aria-hidden": !0 }) : /* @__PURE__ */ t($e, { "aria-hidden": !0 })
-            ] }) : /* @__PURE__ */ r(Se, { children: [
-              T ? /* @__PURE__ */ t(_e, { "aria-hidden": !0 }) : /* @__PURE__ */ t($e, { "aria-hidden": !0 }),
-              /* @__PURE__ */ t("span", { className: s.buttonText, children: v(T ? "header.close" : "header.menu") })
-            ] })
+            onClick: xe,
+            "aria-expanded": S,
+            "aria-label": _(S ? "header.closeMenu" : "header.openMenu"),
+            className: i.menuButton,
+            children: [
+              S ? /* @__PURE__ */ t(qe, { "aria-hidden": !0 }) : /* @__PURE__ */ t(Dn, { "aria-hidden": !0 }),
+              /* @__PURE__ */ t("span", { className: i.buttonText, children: _(S ? "header.close" : "header.menu") })
+            ]
           }
         )
       ] })
     ] }),
-    T && /* @__PURE__ */ t("div", { className: s.menuOverlay, children: /* @__PURE__ */ r("div", { className: s.menuContent, children: [
-      /* @__PURE__ */ t("div", { className: s.menuLeftColumn }),
-      /* @__PURE__ */ r("div", { className: s.menuRightColumn, children: [
-        Z && (F || I) && /* @__PURE__ */ r("div", { className: s.menuUtilities, children: [
-          F && /* @__PURE__ */ r("div", { className: s.languageSwitch, children: [
-            /* @__PURE__ */ t("span", { className: s.languageLabel, children: v("header.language") }),
-            /* @__PURE__ */ r(U.TriggerContext, { children: [
+    S && /* @__PURE__ */ t("div", { className: i.menuOverlay, ref: te, children: /* @__PURE__ */ r("div", { className: i.menuContent, children: [
+      /* @__PURE__ */ t("div", { className: i.menuLeftColumn }),
+      /* @__PURE__ */ r("div", { className: i.menuRightColumn, children: [
+        u && (q || E) && /* @__PURE__ */ r("div", { className: i.menuUtilities, children: [
+          q && /* @__PURE__ */ r("div", { className: i.languageSwitch, children: [
+            /* @__PURE__ */ t("span", { className: i.languageLabel, children: _("header.language") }),
+            /* @__PURE__ */ r(oe.TriggerContext, { children: [
               /* @__PURE__ */ r(
-                U.Trigger,
+                oe.Trigger,
                 {
-                  className: s.languageLink,
-                  "aria-label": v("header.selectLanguage"),
+                  className: i.languageLink,
+                  "aria-label": _("header.selectLanguage"),
                   style: { background: "transparent", border: "none", padding: 0, cursor: "pointer", font: "inherit" },
                   children: [
-                    Q,
+                    C,
                     " ",
-                    /* @__PURE__ */ t(Be, { "aria-hidden": !0 })
+                    /* @__PURE__ */ t(Ze, { "aria-hidden": !0 })
                   ]
                 }
               ),
               /* @__PURE__ */ t(
-                U,
+                oe,
                 {
-                  "data-color-scheme": y,
+                  "data-color-scheme": T,
                   placement: "bottom-start",
-                  children: /* @__PURE__ */ r(U.List, { children: [
-                    /* @__PURE__ */ t(U.Item, { children: /* @__PURE__ */ t(U.Button, { onClick: () => le("NO"), children: "Norsk (NO)" }) }),
-                    /* @__PURE__ */ t(U.Item, { children: /* @__PURE__ */ t(U.Button, { onClick: () => le("EN"), children: "English (EN)" }) })
+                  children: /* @__PURE__ */ r(oe.List, { children: [
+                    /* @__PURE__ */ t(oe.Item, { children: /* @__PURE__ */ t(oe.Button, { onClick: () => j("NO"), children: "Norsk (NO)" }) }),
+                    /* @__PURE__ */ t(oe.Item, { children: /* @__PURE__ */ t(oe.Button, { onClick: () => j("EN"), children: "English (EN)" }) })
                   ] })
                 }
               )
             ] })
           ] }),
-          I && /* @__PURE__ */ t("div", { className: s.extensionContent, children: /* @__PURE__ */ t(
-            Ae,
+          E && /* @__PURE__ */ t("div", { className: i.extensionContent, children: /* @__PURE__ */ t(
+            Re,
             {
               "data-size": "sm",
-              checked: y === "dark",
-              onChange: c,
-              label: v("header.darkMode"),
+              checked: T === "dark",
+              onChange: re,
+              label: _("header.darkMode"),
               color: "neutral",
               "data-color-scheme": "light"
             }
           ) })
         ] }),
-        /* @__PURE__ */ r("div", { className: s.slotContent, children: [
-          h,
-          Z && q && A && A.length > 0 && /* @__PURE__ */ t("nav", { className: s.navList, children: A.map((i, u) => /* @__PURE__ */ t(
-            te,
+        /* @__PURE__ */ r("div", { className: i.slotContent, children: [
+          k,
+          u && w && N && N.length > 0 && /* @__PURE__ */ t("nav", { className: i.navList, children: N.map((s, m) => /* @__PURE__ */ t(
+            pe,
             {
-              href: i.href,
-              className: s.navLink,
-              onClick: (x) => {
-                d && (x.preventDefault(), d(i.href));
+              href: s.href,
+              className: i.navLink,
+              onClick: (b) => {
+                c && (b.preventDefault(), c(s.href));
               },
-              children: i.label
+              children: s.label
             },
-            u
+            m
           )) })
         ] }),
-        Z && /* @__PURE__ */ t("div", { className: s.menuBrand, children: /* @__PURE__ */ t(ge, {}) })
+        u && /* @__PURE__ */ t("div", { className: i.menuBrand, children: /* @__PURE__ */ t(le, {}) })
       ] })
     ] }) }),
-    l && /* @__PURE__ */ t("div", { className: s.searchOverlay, children: /* @__PURE__ */ r("div", { className: s.searchContent, children: [
-      /* @__PURE__ */ r(Ce, { children: [
+    D && /* @__PURE__ */ t("div", { className: i.searchOverlay, children: /* @__PURE__ */ r("div", { className: i.searchContent, children: [
+      /* @__PURE__ */ r(Pe, { children: [
         /* @__PURE__ */ t(
-          Ce.Input,
+          Pe.Input,
           {
-            "aria-label": v("header.search"),
-            placeholder: v("header.searchPlaceholder"),
-            value: B,
-            onChange: (i) => Y(i.target.value)
+            ref: ne,
+            "aria-label": _("header.search"),
+            placeholder: _("header.searchPlaceholder"),
+            value: z,
+            onChange: (s) => ie(s.target.value)
           }
         ),
-        /* @__PURE__ */ t(Ce.Button, { "aria-label": v("header.search") }),
-        /* @__PURE__ */ t(Ce.ClearButton, { onClick: () => Y(""), "aria-label": v("header.clearSearch") })
+        /* @__PURE__ */ t(Pe.Button, { "aria-label": _("header.search") }),
+        /* @__PURE__ */ t(Pe.ClearButton, { onClick: () => ie(""), "aria-label": _("header.clearSearch") })
       ] }),
-      B && /* @__PURE__ */ t("div", { className: s.searchResults, children: re.length > 0 ? /* @__PURE__ */ r("div", { className: s.suggestionsSection, children: [
-        /* @__PURE__ */ t("h3", { className: s.suggestionsTitle, children: v("header.suggestions") }),
-        /* @__PURE__ */ t("ul", { className: s.resultList, children: re.slice(0, 5).map((i) => /* @__PURE__ */ t("li", { className: s.resultItem, children: /* @__PURE__ */ r(
+      z && /* @__PURE__ */ t("div", { role: "status", className: "ds-sr-only", children: A.length > 0 ? _("header.suggestionCount").replace("{count}", String(Math.min(A.length, 5))) : `${_("header.noResults")} ${z}` }),
+      z && /* @__PURE__ */ t("div", { className: i.searchResults, children: A.length > 0 ? /* @__PURE__ */ r("div", { className: i.suggestionsSection, children: [
+        /* @__PURE__ */ t("h3", { className: i.suggestionsTitle, children: _("header.suggestions") }),
+        /* @__PURE__ */ t("ul", { className: i.resultList, children: A.slice(0, 5).map((s) => /* @__PURE__ */ t("li", { className: i.resultItem, children: /* @__PURE__ */ r(
           "button",
           {
-            className: s.resultLink,
-            onClick: () => pe(i.path),
+            className: i.resultLink,
+            onClick: () => ae(s.path),
             children: [
-              /* @__PURE__ */ t("span", { className: s.suggestionIcon, children: /* @__PURE__ */ t(Ee, { "aria-hidden": !0 }) }),
-              /* @__PURE__ */ t("span", { className: s.suggestionText, children: (() => {
-                const u = i.title.toLowerCase().indexOf(B.toLowerCase());
-                if (u === -1) return /* @__PURE__ */ t("span", { className: s.remainingText, children: i.title });
-                const x = i.title.slice(0, u), ae = i.title.slice(u, u + B.length), Xe = i.title.slice(u + B.length);
-                return /* @__PURE__ */ r(Se, { children: [
-                  /* @__PURE__ */ t("span", { className: s.remainingText, children: x }),
-                  /* @__PURE__ */ t("span", { className: s.highlightedText, children: ae }),
-                  /* @__PURE__ */ t("span", { className: s.remainingText, children: Xe })
+              /* @__PURE__ */ t("span", { className: i.suggestionIcon, children: /* @__PURE__ */ t(Ye, { "aria-hidden": !0 }) }),
+              /* @__PURE__ */ t("span", { className: i.suggestionText, children: (() => {
+                const m = s.title.toLowerCase().indexOf(z.toLowerCase());
+                if (m === -1) return /* @__PURE__ */ t("span", { className: i.remainingText, children: s.title });
+                const b = s.title.slice(0, m), V = s.title.slice(m, m + z.length), ke = s.title.slice(m + z.length);
+                return /* @__PURE__ */ r(tt, { children: [
+                  /* @__PURE__ */ t("span", { className: i.remainingText, children: b }),
+                  /* @__PURE__ */ t("span", { className: i.highlightedText, children: V }),
+                  /* @__PURE__ */ t("span", { className: i.remainingText, children: ke })
                 ] });
               })() })
             ]
           }
-        ) }, i.id)) }),
-        re.length > 5 && /* @__PURE__ */ r(
-          te,
+        ) }, s.id)) }),
+        A.length > 5 && /* @__PURE__ */ r(
+          pe,
           {
             href: "#",
             "data-color": "neutral",
-            className: s.viewAllLink,
-            onClick: (i) => {
-              i.preventDefault(), d && d(`search/${B}`), C(!1), Y("");
+            className: i.viewAllLink,
+            onClick: (s) => {
+              s.preventDefault(), c && c(`search/${encodeURIComponent(z)}`), g(!1), ie("");
             },
             children: [
-              v("header.viewAll"),
+              _("header.viewAll"),
               " (",
-              re.length,
+              A.length,
               ")"
             ]
           }
         )
-      ] }) : /* @__PURE__ */ t("div", { className: s.noResults, children: /* @__PURE__ */ r(xe, { children: [
-        v("header.noResults"),
+      ] }) : /* @__PURE__ */ t("div", { className: i.noResults, children: /* @__PURE__ */ r(Ne, { children: [
+        _("header.noResults"),
         ' "',
-        B,
+        z,
         '"'
       ] }) }) })
     ] }) })
   ] });
 };
-function oa(n) {
+function Sa(n) {
   const e = n;
   return `
 .${e.header} {
@@ -4272,10 +4685,10 @@ function oa(n) {
   align-items: center;
   gap: var(--ds-size-4);
 }
-.${e.extensionContent} .ds-label { font-size: var(--ds-font-size-md) !important; }
+.${e.extensionContent} .ds-label { font-size: var(--ds-font-size-3) !important; }
 .${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-md); color: #ECECEC; }
+.${e.languageLabel} { font-size: var(--ds-font-size-3); color: #ECECEC; }
 .${e.languageLink} { color: white; text-decoration: none; display: flex; align-items: center; gap: 4px; }
 .${e.header}[data-color="primary"] .${e.languageLabel} { color: #ECECEC; }
 .${e.header}[data-color="neutral"] .${e.languageLabel} { color: var(--ds-color-neutral-text-default); }
@@ -4293,27 +4706,19 @@ function oa(n) {
 .${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); }
 .${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.navLink} { color: var(--ds-color-primary-color-red-text-default); font-family: inherit; font-size: var(--ds-font-size-md); text-decoration: none; font-weight: var(--ds-font-weight-regular); letter-spacing: 0.09px; }
+.${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; }
 .${e.ctaButton} { display: flex; align-items: center; }
 .${e.themeToggle} { display: flex; align-items: center; }
 .${e.userInfo} { display: flex; align-items: center; gap: var(--ds-size-3); }
-.${e.userName} { display: block; font-family: inherit; font-size: var(--ds-font-size-md); color: var(--ds-color-neutral-text-default); }
-.${e.loginLink} { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ds-color-main-text-subtle); gap: 2px; }
-.${e.loginText} { font-family: inherit; font-size: var(--ds-font-size-md); font-weight: var(--ds-font-weight-regular); line-height: 1.5; }
-.${e.underline} { width: 100%; height: 1px; background-color: var(--ds-color-main-border-strong); }
+.${e.userName} { display: block; font-family: inherit; font-size: var(--ds-font-size-3); color: var(--ds-color-neutral-text-default); }
+.${e.loginLink} { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--ds-color-primary-color-red-text-subtle); gap: 2px; }
+.${e.loginText} { font-family: inherit; font-size: var(--ds-font-size-3); font-weight: var(--ds-font-weight-regular); line-height: 1.5; }
+.${e.underline} { width: 100%; height: 1px; background-color: var(--ds-color-primary-color-red-border-strong); }
 .${e.searchButtonWrapper} { display: flex; }
 .${e.buttonText} { display: inline-block; margin-left: var(--ds-size-2); }
 .${e.menuButton} { display: flex; align-items: center; }
-.${e.header}[data-button-style="soft"] .${e.actions} { gap: var(--ds-size-2); }
-.${e.header}[data-button-style="soft"] .${e.searchButtonWrapper} .ds-button,
-.${e.header}[data-button-style="soft"] .${e.menuButton} {
-  --dsc-button-padding: 0 var(--ds-size-4);
-  height: var(--ds-size-12);
-}
-.${e.header}[data-button-style="soft"] .${e.searchButtonWrapper} .${e.buttonText},
-.${e.header}[data-button-style="soft"] .${e.menuButton} .${e.buttonText} { margin-left: 0; }
 .${e.menuOverlay}, .${e.searchOverlay} {
   position: absolute; top: 100%; left: 0; width: 100%;
   background-color: var(--ds-color-neutral-background-default);
@@ -4330,12 +4735,12 @@ function oa(n) {
 .${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; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: var(--ds-size-6); }
 .${e.menuRightColumn} { flex: 1; display: flex; flex-direction: column; padding: 48px 24px 80px 24px; gap: 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-md); border-radius: var(--ds-border-radius-md); display: flex; flex-direction: column; gap: var(--ds-size-4); align-items: flex-start; }
+.${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; }
 .${e.menuUtilities} { display: flex; justify-content: space-between; align-items: center; width: 100%; }
 .${e.suggestionsSection} { display: flex; flex-direction: column; gap: var(--ds-size-4); }
-.${e.suggestionsTitle} { font-family: inherit; font-size: var(--ds-font-size-md); color: var(--ds-color-neutral-text-subtle); font-weight: var(--ds-font-weight-regular); margin: 0; letter-spacing: 0.09px; }
+.${e.suggestionsTitle} { font-family: inherit; font-size: var(--ds-font-size-3); color: var(--ds-color-neutral-text-subtle); font-weight: var(--ds-font-weight-regular); margin: 0; letter-spacing: 0.09px; }
 .${e.searchResults} { margin-top: var(--ds-size-4); max-height: 400px; overflow-y: auto; }
 .${e.resultList} { list-style: none; padding: 0; margin: 0; }
 .${e.resultItem} { border-bottom: none; }
@@ -4345,10 +4750,10 @@ function oa(n) {
   text-align: left; cursor: pointer; gap: var(--ds-size-4); text-decoration: none;
 }
 .${e.suggestionIcon} { font-size: 20px; color: var(--ds-color-neutral-text-subtle); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
-.${e.suggestionText} { font-family: inherit; font-size: var(--ds-font-size-md); color: var(--ds-color-neutral-text-default); line-height: 1.5; }
+.${e.suggestionText} { font-family: inherit; font-size: var(--ds-font-size-3); color: var(--ds-color-neutral-text-default); line-height: 1.5; }
 .${e.highlightedText} { color: var(--ds-color-primary-color-red-text-default); font-weight: var(--ds-font-weight-medium); }
 .${e.remainingText} { color: var(--ds-color-neutral-border-subtle); }
-.${e.viewAllLink} { display: block; padding: var(--ds-size-3); text-align: left; font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); color: var(--ds-color-neutral-text-default); text-decoration: none; }
+.${e.viewAllLink} { display: block; padding: var(--ds-size-3); text-align: left; font-size: var(--ds-font-size-2); font-weight: var(--ds-font-weight-medium); color: var(--ds-color-neutral-text-default); text-decoration: none; }
 .${e.noResults} { padding: var(--ds-size-4); text-align: center; color: var(--ds-color-neutral-text-subtle); }
 @media (max-width: 850px) {
   .${e.header} { z-index: 10000; position: relative; }
@@ -4384,117 +4789,115 @@ function oa(n) {
 }
 `;
 }
-const ra = "_footer_12vvu_1", aa = "_mainSection_12vvu_7", sa = "_mainContainer_12vvu_25", ia = "_crossCornerTopRight_12vvu_35", la = "_crossCornerBottomLeft_12vvu_42", da = "_contentRow_12vvu_50", ca = "_newsletterSection_12vvu_60", pa = "_newsletterDescription_12vvu_67", ma = "_newsletterForm_12vvu_76", ga = "_newsletterInputGroup_12vvu_82", ua = "_newsletterInput_12vvu_82", ha = "_consentText_12vvu_93", fa = "_linksSection_12vvu_103", ka = "_linksColumn_12vvu_109", va = "_linksTitle_12vvu_116", ba = "_linksList_12vvu_127", ya = "_footerLink_12vvu_136", xa = "_divider_12vvu_158", Ta = "_contactSection_12vvu_166", Ca = "_contactColumn_12vvu_173", wa = "_contactTitle_12vvu_181", Sa = "_contactContent_12vvu_190", Ia = "_copyrightSection_12vvu_204", _a = "_copyrightText_12vvu_209", Da = "_whiteSection_12vvu_219", La = "_whiteContainer_12vvu_224", Aa = "_whiteContent_12vvu_232", Na = "_logo_12vvu_240", Ma = "_redCrossLogo_12vvu_254", ja = "_slotLarge_12vvu_260", Fa = "_contentRowContact_12vvu_315", Ba = "_socialLinksSection_12vvu_325", Ea = "_socialLinksTitle_12vvu_332", $a = "_socialLinksList_12vvu_343", Pa = "_socialLink_12vvu_325", za = "_socialLinkIcon_12vvu_376", Ra = "_contactPersonsSection_12vvu_391", Ga = "_contactPersonsTitle_12vvu_398", Wa = "_contactPersonsGrid_12vvu_409", Ha = "_contactPersonCard_12vvu_415", Ua = "_contactPersonName_12vvu_422", Va = "_contactPersonRole_12vvu_431", Oa = "_contactPersonDetails_12vvu_440", Ka = "_contactPersonLabel_12vvu_447", qa = "_contactPersonEmail_12vvu_451", Ya = "_contactPersonPhone_12vvu_452", Za = "_contactPersonAddress_12vvu_453", Xa = "_bottomRowContact_12vvu_474", Ja = "_legalLinksRow_12vvu_483", Qa = "_legalLink_12vvu_483", es = "_dpMain_12vvu_558", ts = "_dpContainer_12vvu_567", ns = "_dpColumns_12vvu_575", os = "_dpColumn_12vvu_575", rs = "_dpColTitle_12vvu_588", as = "_dpList_12vvu_596", ss = "_dpLink_12vvu_605", is = "_dpDivider_12vvu_619", ls = "_dpMeta_12vvu_627", ds = "_dpMetaCol_12vvu_633", cs = "_dpMetaTitle_12vvu_641", ps = "_dpMetaText_12vvu_649", ms = "_dpBottom_12vvu_657", gs = "_dpLegal_12vvu_665", us = "_dpLegalLink_12vvu_674", hs = "_dpCopyright_12vvu_686", fs = "_dpLogoBox_12vvu_694", ks = "_dpLogoImg_12vvu_710", o = {
-  footer: ra,
-  mainSection: aa,
-  mainContainer: sa,
-  crossCornerTopRight: ia,
-  crossCornerBottomLeft: la,
-  contentRow: da,
-  newsletterSection: ca,
-  newsletterDescription: pa,
-  newsletterForm: ma,
-  newsletterInputGroup: ga,
-  newsletterInput: ua,
-  consentText: ha,
-  linksSection: fa,
-  linksColumn: ka,
-  linksTitle: va,
-  linksList: ba,
-  footerLink: ya,
-  divider: xa,
-  contactSection: Ta,
-  contactColumn: Ca,
-  contactTitle: wa,
-  contactContent: Sa,
-  copyrightSection: Ia,
-  copyrightText: _a,
-  whiteSection: Da,
-  whiteContainer: La,
-  whiteContent: Aa,
-  logo: Na,
-  redCrossLogo: Ma,
-  slotLarge: ja,
-  contentRowContact: Fa,
-  socialLinksSection: Ba,
-  socialLinksTitle: Ea,
-  socialLinksList: $a,
-  socialLink: Pa,
-  socialLinkIcon: za,
-  contactPersonsSection: Ra,
-  contactPersonsTitle: Ga,
-  contactPersonsGrid: Wa,
-  contactPersonCard: Ha,
-  contactPersonName: Ua,
-  contactPersonRole: Va,
-  contactPersonDetails: Oa,
-  contactPersonLabel: Ka,
-  contactPersonEmail: qa,
-  contactPersonPhone: Ya,
-  contactPersonAddress: Za,
-  bottomRowContact: Xa,
-  legalLinksRow: Ja,
-  legalLink: Qa,
-  dpMain: es,
-  dpContainer: ts,
-  dpColumns: ns,
-  dpColumn: os,
-  dpColTitle: rs,
-  dpList: as,
-  dpLink: ss,
-  dpDivider: is,
-  dpMeta: ls,
-  dpMetaCol: ds,
-  dpMetaTitle: cs,
-  dpMetaText: ps,
-  dpBottom: ms,
-  dpLegal: gs,
-  dpLegalLink: us,
-  dpCopyright: hs,
-  dpLogoBox: fs,
-  dpLogoImg: ks
-}, Ai = ({
+const _a = "_footer_61pj1_1", Ia = "_mainSection_61pj1_7", La = "_mainContainer_61pj1_25", Da = "_graphicElementTopRight_61pj1_35", Ma = "_graphicElementBottomLeft_61pj1_42", ja = "_contentRow_61pj1_50", Aa = "_newsletterSection_61pj1_60", Na = "_newsletterDescription_61pj1_67", Ea = "_newsletterForm_61pj1_76", Ba = "_newsletterInputGroup_61pj1_82", Fa = "_newsletterInput_61pj1_82", Pa = "_consentText_61pj1_93", $a = "_linksSection_61pj1_103", za = "_linksColumn_61pj1_109", Ra = "_linksTitle_61pj1_116", Ga = "_linksList_61pj1_127", Ha = "_footerLink_61pj1_136", Wa = "_divider_61pj1_158", Ua = "_contactSection_61pj1_166", Va = "_contactColumn_61pj1_173", Oa = "_contactTitle_61pj1_181", Ka = "_contactContent_61pj1_190", Za = "_copyrightSection_61pj1_204", qa = "_copyrightText_61pj1_209", Ya = "_whiteSection_61pj1_219", Xa = "_whiteContainer_61pj1_224", Ja = "_whiteContent_61pj1_232", Qa = "_logo_61pj1_240", es = "_redCrossLogo_61pj1_254", ts = "_slotLarge_61pj1_260", ns = "_contentRowContact_61pj1_315", os = "_socialLinksSection_61pj1_325", rs = "_socialLinksTitle_61pj1_332", as = "_socialLinksList_61pj1_343", ss = "_socialLink_61pj1_325", is = "_socialLinkIcon_61pj1_376", ls = "_contactPersonsSection_61pj1_391", ds = "_contactPersonsTitle_61pj1_398", cs = "_contactPersonsGrid_61pj1_409", ps = "_contactPersonCard_61pj1_415", ms = "_contactPersonName_61pj1_422", gs = "_contactPersonRole_61pj1_431", us = "_contactPersonDetails_61pj1_440", hs = "_contactPersonLabel_61pj1_447", fs = "_contactPersonEmail_61pj1_451", ks = "_contactPersonPhone_61pj1_452", vs = "_contactPersonAddress_61pj1_453", bs = "_bottomRowContact_61pj1_474", ys = "_legalLinksRow_61pj1_483", xs = "_legalLink_61pj1_483", Ts = "_dpMain_61pj1_558", Cs = "_dpContainer_61pj1_567", ws = "_dpColumns_61pj1_575", Ss = "_dpColumn_61pj1_575", _s = "_dpColTitle_61pj1_588", Is = "_dpList_61pj1_596", Ls = "_dpLink_61pj1_605", Ds = "_dpDivider_61pj1_619", Ms = "_dpMeta_61pj1_627", js = "_dpMetaCol_61pj1_633", As = "_dpMetaTitle_61pj1_641", Ns = "_dpMetaText_61pj1_649", Es = "_dpBottom_61pj1_657", Bs = "_dpLegal_61pj1_665", Fs = "_dpLegalLink_61pj1_674", Ps = "_dpCopyright_61pj1_686", o = {
+  footer: _a,
+  mainSection: Ia,
+  mainContainer: La,
+  graphicElementTopRight: Da,
+  graphicElementBottomLeft: Ma,
+  contentRow: ja,
+  newsletterSection: Aa,
+  newsletterDescription: Na,
+  newsletterForm: Ea,
+  newsletterInputGroup: Ba,
+  newsletterInput: Fa,
+  consentText: Pa,
+  linksSection: $a,
+  linksColumn: za,
+  linksTitle: Ra,
+  linksList: Ga,
+  footerLink: Ha,
+  divider: Wa,
+  contactSection: Ua,
+  contactColumn: Va,
+  contactTitle: Oa,
+  contactContent: Ka,
+  copyrightSection: Za,
+  copyrightText: qa,
+  whiteSection: Ya,
+  whiteContainer: Xa,
+  whiteContent: Ja,
+  logo: Qa,
+  redCrossLogo: es,
+  slotLarge: ts,
+  contentRowContact: ns,
+  socialLinksSection: os,
+  socialLinksTitle: rs,
+  socialLinksList: as,
+  socialLink: ss,
+  socialLinkIcon: is,
+  contactPersonsSection: ls,
+  contactPersonsTitle: ds,
+  contactPersonsGrid: cs,
+  contactPersonCard: ps,
+  contactPersonName: ms,
+  contactPersonRole: gs,
+  contactPersonDetails: us,
+  contactPersonLabel: hs,
+  contactPersonEmail: fs,
+  contactPersonPhone: ks,
+  contactPersonAddress: vs,
+  bottomRowContact: bs,
+  legalLinksRow: ys,
+  legalLink: xs,
+  dpMain: Ts,
+  dpContainer: Cs,
+  dpColumns: ws,
+  dpColumn: Ss,
+  dpColTitle: _s,
+  dpList: Is,
+  dpLink: Ls,
+  dpDivider: Ds,
+  dpMeta: Ms,
+  dpMetaCol: js,
+  dpMetaTitle: As,
+  dpMetaText: Ns,
+  dpBottom: Es,
+  dpLegal: Bs,
+  dpLegalLink: Fs,
+  dpCopyright: Ps
+}, Xi = ({
   "data-color": n = "neutral",
   variant: e = "default",
   colorScheme: a,
-  columns: d,
-  showCrossCorners: h = !1,
-  newsletterDescription: f = "Tekst om rødekors som kan være rundt 2 linjebrudd i lengde.",
-  newsletterPlaceholder: g = "Input tekst",
-  newsletterButtonText: k = "Meld deg på",
-  newsletterConsentText: D,
-  onNewsletterSubmit: S,
-  hideNewsletter: R = !1,
-  shortcutsLinks: _,
-  linksLinks: V,
-  shortcutsTitle: N,
+  columns: c,
+  showGraphicElements: k = !1,
+  newsletterDescription: y = "Tekst om rødekors som kan være rundt 2 linjebrudd i lengde.",
+  newsletterPlaceholder: f = "Input tekst",
+  newsletterButtonText: x = "Meld deg på",
+  newsletterConsentText: B,
+  onNewsletterSubmit: I,
+  hideNewsletter: J = !1,
+  shortcutsLinks: L,
+  linksLinks: R,
+  shortcutsTitle: G,
   linksTitle: p,
-  visitingAddress: K = ["Hausmannsgate 7 (Korsegården)", "0186 Oslo"],
-  organizationNumber: X = "XXX XXX XXX",
-  email: A = "post@redcross.no",
-  showPrimaryLogo: q = !0,
-  primaryLogoSrc: m,
-  primaryLogoAlt: M = "Røde Kors Logo",
-  whiteSectionSlot: I,
-  socialLinks: F = [],
-  contactPersons: j = [],
-  legalLinks: L = [],
-  socialLinksTitle: G,
-  contactPersonsTitle: ne
+  visitingAddress: Q = ["Hausmannsgate 7 (Korsegården)", "0186 Oslo"],
+  organizationNumber: K = "XXX XXX XXX",
+  email: N = "post@redcross.no",
+  showPrimaryLogo: w = !0,
+  primaryLogoSrc: H,
+  primaryLogoAlt: P = "Røde Kors Logo",
+  whiteSectionSlot: E,
+  socialLinks: q = [],
+  contactPersons: Y = [],
+  legalLinks: $ = [],
+  socialLinksTitle: d,
+  contactPersonsTitle: l
 } = {}) => {
-  const H = (/* @__PURE__ */ new Date()).getFullYear(), { t: J } = Te(), [T, b] = Ne.useState(""), l = (c, w) => {
-    const $ = J(c);
-    return $ === c ? w : $;
+  const v = (/* @__PURE__ */ new Date()).getFullYear(), { t: S } = Be(), [F, D] = ye.useState(""), g = (u, M) => {
+    const le = S(u);
+    return le === u ? M : le;
   };
-  Ne.useEffect(() => {
-    const c = "rk-footer-inline-styles";
-    if (typeof document > "u" || document.getElementById(c)) return;
-    const w = vs(o), $ = document.createElement("style");
-    $.id = c, $.textContent = w, document.head.appendChild($);
+  ye.useEffect(() => {
+    const u = "rk-footer-inline-styles";
+    if (typeof document > "u" || document.getElementById(u)) return;
+    const M = $s(o), le = document.createElement("style");
+    le.id = u, le.textContent = M, document.head.appendChild(le);
   }, []);
-  const C = (c) => {
-    c.preventDefault(), S == null || S(T);
-  }, B = () => /* @__PURE__ */ r(
+  const se = (u) => {
+    u.preventDefault(), I == null || I(F);
+  }, ee = () => /* @__PURE__ */ r(
     "svg",
     {
       width: "170",
@@ -4518,223 +4921,233 @@ const ra = "_footer_12vvu_1", aa = "_mainSection_12vvu_7", sa = "_mainContainer_
         /* @__PURE__ */ t("path", { d: "M63.2545 52.9331H24.0869V66.0625H63.2545V52.9331Z", fill: "#D52B1E" })
       ]
     }
-  ), Y = [
-    { label: l("footer.shortcutsLinks.services", "Tilbudene"), href: "#" },
-    { label: l("footer.shortcutsLinks.volunteer", "Bli frivillig"), href: "#" },
-    { label: l("footer.shortcutsLinks.ourWork", "Vårt arbeid"), href: "#" },
-    { label: l("footer.shortcutsLinks.about", "Om Røde Kors"), href: "#" },
-    { label: l("footer.shortcutsLinks.support", "Støtt arbeidet"), href: "#" },
-    { label: l("footer.shortcutsLinks.contact", "Kontakt oss"), href: "#" }
-  ], y = [
-    { label: l("footer.legal.privacy", "Personvern"), href: "#" },
-    { label: l("footer.legal.press", "For presse"), href: "#" },
-    { label: l("footer.legal.procurement", "Regler for innkjøp"), href: "#" },
-    { label: l("footer.legal.whistleblowing", "Varsling/Misconduct"), href: "#" }
-  ], E = /* @__PURE__ */ r(Se, { children: [
+  ), te = [
+    { label: g("footer.shortcutsLinks.services", "Tilbudene"), href: "#" },
+    { label: g("footer.shortcutsLinks.volunteer", "Bli frivillig"), href: "#" },
+    { label: g("footer.shortcutsLinks.ourWork", "Vårt arbeid"), href: "#" },
+    { label: g("footer.shortcutsLinks.about", "Om Røde Kors"), href: "#" },
+    { label: g("footer.shortcutsLinks.support", "Støtt arbeidet"), href: "#" },
+    { label: g("footer.shortcutsLinks.contact", "Kontakt oss"), href: "#" }
+  ], ne = [
+    { label: g("footer.legal.privacy", "Personvern"), href: "#" },
+    { label: g("footer.legal.press", "For presse"), href: "#" },
+    { label: g("footer.legal.procurement", "Regler for innkjøp"), href: "#" },
+    { label: g("footer.legal.whistleblowing", "Varsling/Misconduct"), href: "#" }
+  ], z = /* @__PURE__ */ r(tt, { children: [
     'Ved å trykke "',
-    k,
+    x,
     '" samtykker du til å motta nyhetsbrev.',
     /* @__PURE__ */ t("br", {}),
     "Du kan når som helst ",
-    /* @__PURE__ */ t(te, { href: "#", children: "melde deg av" }),
+    /* @__PURE__ */ t(pe, { href: "#", children: "melde deg av" }),
     " nyhetsbrevet uten kostnad."
-  ] }), Q = _ || Y, le = V || y, v = () => /* @__PURE__ */ r("div", { className: o.socialLinksSection, children: [
-    G && /* @__PURE__ */ t("h3", { className: o.socialLinksTitle, children: G }),
-    /* @__PURE__ */ t("ul", { className: o.socialLinksList, children: F.map((c, w) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ r(te, { href: c.href, className: o.socialLink, children: [
-      /* @__PURE__ */ t("span", { className: o.socialLinkIcon, children: c.icon }),
-      c.label
-    ] }) }, w)) })
-  ] }), Z = ({ person: c }) => /* @__PURE__ */ r("div", { className: o.contactPersonCard, children: [
-    /* @__PURE__ */ t("p", { className: o.contactPersonName, children: c.name }),
-    /* @__PURE__ */ t("p", { className: o.contactPersonRole, children: c.role }),
+  ] }), ie = L || te, T = R || ne, h = () => /* @__PURE__ */ r("div", { className: o.socialLinksSection, children: [
+    d && /* @__PURE__ */ t("h3", { className: o.socialLinksTitle, children: d }),
+    /* @__PURE__ */ t("ul", { className: o.socialLinksList, children: q.map((u, M) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ r(pe, { href: u.href, className: o.socialLink, children: [
+      /* @__PURE__ */ t("span", { className: o.socialLinkIcon, children: u.icon }),
+      u.label
+    ] }) }, M)) })
+  ] }), C = ({ person: u }) => /* @__PURE__ */ r("div", { className: o.contactPersonCard, children: [
+    /* @__PURE__ */ t("p", { className: o.contactPersonName, children: u.name }),
+    /* @__PURE__ */ t("p", { className: o.contactPersonRole, children: u.role }),
     /* @__PURE__ */ r("div", { className: o.contactPersonDetails, children: [
       /* @__PURE__ */ r("p", { className: o.contactPersonEmail, children: [
         /* @__PURE__ */ r("span", { className: o.contactPersonLabel, children: [
-          l("footer.contact.email", "E-post"),
+          g("footer.contact.email", "E-post"),
           ":"
         ] }),
         " ",
-        /* @__PURE__ */ t(te, { href: `mailto:${c.email}`, children: c.email })
+        /* @__PURE__ */ t(pe, { href: `mailto:${u.email}`, children: u.email })
       ] }),
-      c.phone && /* @__PURE__ */ r("p", { className: o.contactPersonPhone, children: [
+      u.phone && /* @__PURE__ */ r("p", { className: o.contactPersonPhone, children: [
         /* @__PURE__ */ r("span", { className: o.contactPersonLabel, children: [
-          l("footer.contact.phone", "Telefon"),
+          g("footer.contact.phone", "Telefon"),
           ":"
         ] }),
         " ",
-        c.phone
+        u.phone
       ] }),
-      c.address && /* @__PURE__ */ t("p", { className: o.contactPersonAddress, children: c.address })
+      u.address && /* @__PURE__ */ t("p", { className: o.contactPersonAddress, children: u.address })
     ] })
-  ] }), me = () => /* @__PURE__ */ r("div", { className: o.contactPersonsSection, children: [
-    ne && /* @__PURE__ */ t("h3", { className: o.contactPersonsTitle, children: ne }),
-    /* @__PURE__ */ t("div", { className: o.contactPersonsGrid, children: j.map((c, w) => /* @__PURE__ */ t(Z, { person: c }, w)) })
-  ] }), ge = () => /* @__PURE__ */ t("ul", { className: o.legalLinksRow, children: L.map((c, w) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(te, { href: c.href, className: o.legalLink, children: c.label }) }, w)) });
+  ] }), j = () => /* @__PURE__ */ r("div", { className: o.contactPersonsSection, children: [
+    l && /* @__PURE__ */ t("h3", { className: o.contactPersonsTitle, children: l }),
+    /* @__PURE__ */ t("div", { className: o.contactPersonsGrid, children: Y.map((u, M) => /* @__PURE__ */ t(C, { person: u }, M)) })
+  ] }), _ = () => /* @__PURE__ */ t("ul", { className: o.legalLinksRow, children: $.map((u, M) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(pe, { href: u.href, className: o.legalLink, children: u.label }) }, M)) });
   if (e === "columns") {
-    const c = [
+    const u = [
       {
-        title: l("footer.contact.title", "Kontakt"),
-        links: Y
+        title: g("footer.contact.title", "Kontakt"),
+        links: te
       },
       {
-        title: l("footer.bidra", "Bidra"),
-        links: Y
+        title: g("footer.bidra", "Bidra"),
+        links: te
       },
       {
-        title: l("footer.shortcuts", "Snarveier"),
-        links: Y
+        title: g("footer.shortcuts", "Snarveier"),
+        links: te
       }
-    ], w = d && d.length > 0 ? d : c, $ = L.length > 0 ? L : y;
-    return /* @__PURE__ */ t("footer", { className: o.footer, "data-color": n, "data-color-scheme": a, children: /* @__PURE__ */ t("div", { className: o.dpMain, children: /* @__PURE__ */ r("div", { className: o.dpContainer, children: [
-      /* @__PURE__ */ t("div", { className: o.dpColumns, children: w.map((oe, re) => /* @__PURE__ */ r("nav", { className: o.dpColumn, "aria-label": oe.title, children: [
-        /* @__PURE__ */ t("h3", { className: o.dpColTitle, children: oe.title }),
-        /* @__PURE__ */ t("ul", { className: o.dpList, children: oe.links.map((pe, i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(te, { href: pe.href, className: o.dpLink, children: pe.label }) }, i)) })
-      ] }, re)) }),
-      /* @__PURE__ */ t("hr", { className: o.dpDivider }),
-      /* @__PURE__ */ r("div", { className: o.dpMeta, children: [
-        /* @__PURE__ */ r("div", { className: o.dpMetaCol, children: [
-          /* @__PURE__ */ t("h4", { className: o.dpMetaTitle, children: l("footer.contact.visitingAddress", "Besøksadresse") }),
-          K.map((oe, re) => /* @__PURE__ */ t("p", { className: o.dpMetaText, children: oe }, re))
-        ] }),
-        /* @__PURE__ */ r("div", { className: o.dpMetaCol, children: [
-          /* @__PURE__ */ t("h4", { className: o.dpMetaTitle, children: l("footer.contact.organizationNumber", "Organisasjonsnummer") }),
-          /* @__PURE__ */ t("p", { className: o.dpMetaText, children: X })
+    ], M = c && c.length > 0 ? c : u, le = $.length > 0 ? $ : ne;
+    return /* @__PURE__ */ r("footer", { className: o.footer, "data-color": n, "data-color-scheme": a, children: [
+      /* @__PURE__ */ t("div", { className: o.dpMain, children: /* @__PURE__ */ r("div", { className: o.dpContainer, children: [
+        /* @__PURE__ */ t("div", { className: o.dpColumns, children: M.map((re, ge) => /* @__PURE__ */ r("nav", { className: o.dpColumn, "aria-label": re.title, children: [
+          /* @__PURE__ */ t("h3", { className: o.dpColTitle, children: re.title }),
+          /* @__PURE__ */ t("ul", { className: o.dpList, children: re.links.map((xe, Se) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(pe, { href: xe.href, className: o.dpLink, children: xe.label }) }, Se)) })
+        ] }, ge)) }),
+        /* @__PURE__ */ t("hr", { className: o.dpDivider }),
+        /* @__PURE__ */ r("div", { className: o.dpMeta, children: [
+          /* @__PURE__ */ r("div", { className: o.dpMetaCol, children: [
+            /* @__PURE__ */ t("h4", { className: o.dpMetaTitle, children: g("footer.contact.visitingAddress", "Besøksadresse") }),
+            Q.map((re, ge) => /* @__PURE__ */ t("p", { className: o.dpMetaText, children: re }, ge))
+          ] }),
+          /* @__PURE__ */ r("div", { className: o.dpMetaCol, children: [
+            /* @__PURE__ */ t("h4", { className: o.dpMetaTitle, children: g("footer.contact.organizationNumber", "Organisasjonsnummer") }),
+            /* @__PURE__ */ t("p", { className: o.dpMetaText, children: K })
+          ] }),
+          /* @__PURE__ */ r("div", { className: o.dpMetaCol, children: [
+            /* @__PURE__ */ t("h4", { className: o.dpMetaTitle, children: g("footer.contact.email", "E-post") }),
+            /* @__PURE__ */ t("p", { className: o.dpMetaText, children: N })
+          ] })
         ] }),
-        /* @__PURE__ */ r("div", { className: o.dpMetaCol, children: [
-          /* @__PURE__ */ t("h4", { className: o.dpMetaTitle, children: l("footer.contact.email", "E-post") }),
-          /* @__PURE__ */ t("p", { className: o.dpMetaText, children: A })
-        ] })
-      ] }),
-      /* @__PURE__ */ t("hr", { className: o.dpDivider }),
-      /* @__PURE__ */ r("div", { className: o.dpBottom, children: [
-        /* @__PURE__ */ t("ul", { className: o.dpLegal, children: $.map((oe, re) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(te, { href: oe.href, className: o.dpLegalLink, children: oe.label }) }, re)) }),
-        /* @__PURE__ */ r("p", { className: o.dpCopyright, children: [
-          "© ",
-          H,
-          " ",
-          l("footer.copyright", "Røde Kors")
+        /* @__PURE__ */ t("hr", { className: o.dpDivider }),
+        /* @__PURE__ */ r("div", { className: o.dpBottom, children: [
+          /* @__PURE__ */ t("ul", { className: o.dpLegal, children: le.map((re, ge) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(pe, { href: re.href, className: o.dpLegalLink, children: re.label }) }, ge)) }),
+          /* @__PURE__ */ r("p", { className: o.dpCopyright, children: [
+            "© ",
+            v,
+            " ",
+            g("footer.copyright", "Røde Kors")
+          ] })
         ] })
-      ] }),
-      m ? /* @__PURE__ */ t("img", { src: m, alt: M, className: o.dpLogoImg }) : /* @__PURE__ */ t("div", { className: o.dpLogoBox, "data-color-scheme": "light", children: /* @__PURE__ */ t(B, {}) })
-    ] }) }) });
+      ] }) }),
+      w && /* @__PURE__ */ t("div", { className: o.whiteSection, "data-color-scheme": "light", children: /* @__PURE__ */ t("div", { className: o.whiteContainer, children: /* @__PURE__ */ t("div", { className: o.whiteContent, children: H ? /* @__PURE__ */ t(
+        "img",
+        {
+          src: H,
+          alt: P,
+          className: o.logo,
+          loading: "lazy"
+        }
+      ) : /* @__PURE__ */ t("div", { className: o.logo, children: /* @__PURE__ */ t(ee, {}) }) }) }) })
+    ] });
   }
   return e === "contact" ? /* @__PURE__ */ r("footer", { className: o.footer, "data-color": n, children: [
     /* @__PURE__ */ t("div", { className: o.mainSection, children: /* @__PURE__ */ r("div", { className: o.mainContainer, children: [
-      h && /* @__PURE__ */ t("div", { className: o.crossCornerTopRight, children: /* @__PURE__ */ t(ye, { position: "top-right", size: "md", "aria-hidden": !0 }) }),
+      k && /* @__PURE__ */ t("div", { className: o.graphicElementTopRight, children: /* @__PURE__ */ t(je, { shape: "angle", position: "top-right", size: "md", "aria-hidden": !0 }) }),
       /* @__PURE__ */ r("div", { className: o.contentRowContact, children: [
-        F.length > 0 && /* @__PURE__ */ t(v, {}),
-        j.length > 0 && /* @__PURE__ */ t(me, {})
+        q.length > 0 && /* @__PURE__ */ t(h, {}),
+        Y.length > 0 && /* @__PURE__ */ t(j, {})
       ] }),
       /* @__PURE__ */ t("div", { className: o.divider }),
       /* @__PURE__ */ r("div", { className: o.contactSection, children: [
         /* @__PURE__ */ r("div", { className: o.contactColumn, children: [
-          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: l("footer.contact.visitingAddress", "Besøks adresse") }),
-          /* @__PURE__ */ t("div", { className: o.contactContent, children: K.map((c, w) => /* @__PURE__ */ t("p", { children: c }, w)) })
+          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: g("footer.contact.visitingAddress", "Besøks adresse") }),
+          /* @__PURE__ */ t("div", { className: o.contactContent, children: Q.map((u, M) => /* @__PURE__ */ t("p", { children: u }, M)) })
         ] }),
         /* @__PURE__ */ r("div", { className: o.contactColumn, children: [
-          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: l("footer.contact.organizationNumber", "Organisasjonsnummer") }),
-          /* @__PURE__ */ t("p", { className: o.contactContent, children: X })
+          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: g("footer.contact.organizationNumber", "Organisasjonsnummer") }),
+          /* @__PURE__ */ t("p", { className: o.contactContent, children: K })
         ] }),
         /* @__PURE__ */ r("div", { className: o.contactColumn, children: [
-          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: l("footer.contact.email", "E-post") }),
-          /* @__PURE__ */ t("p", { className: o.contactContent, children: A })
+          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: g("footer.contact.email", "E-post") }),
+          /* @__PURE__ */ t("p", { className: o.contactContent, children: N })
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: o.divider }),
       /* @__PURE__ */ r("div", { className: o.bottomRowContact, children: [
-        L.length > 0 && /* @__PURE__ */ t(ge, {}),
+        $.length > 0 && /* @__PURE__ */ t(_, {}),
         /* @__PURE__ */ r("p", { className: o.copyrightText, children: [
           "© ",
-          H,
+          v,
           " ",
-          l("footer.copyright", "Rødekors")
+          g("footer.copyright", "Rødekors")
         ] })
       ] }),
-      h && /* @__PURE__ */ t("div", { className: o.crossCornerBottomLeft, children: /* @__PURE__ */ t(ye, { position: "bottom-left", size: "md", "aria-hidden": !0 }) })
+      k && /* @__PURE__ */ t("div", { className: o.graphicElementBottomLeft, children: /* @__PURE__ */ t(je, { shape: "angle", position: "bottom-left", size: "md", "aria-hidden": !0 }) })
     ] }) }),
     /* @__PURE__ */ t("div", { className: o.whiteSection, children: /* @__PURE__ */ t("div", { className: o.whiteContainer, children: /* @__PURE__ */ r("div", { className: o.whiteContent, children: [
-      q && (m ? /* @__PURE__ */ t(
+      w && (H ? /* @__PURE__ */ t(
         "img",
         {
-          src: m,
-          alt: M,
+          src: H,
+          alt: P,
           className: o.logo,
           loading: "lazy"
         }
-      ) : /* @__PURE__ */ t("div", { className: o.logo, children: /* @__PURE__ */ t(B, {}) })),
-      I && /* @__PURE__ */ t("div", { className: o.slotLarge, children: I })
+      ) : /* @__PURE__ */ t("div", { className: o.logo, children: /* @__PURE__ */ t(ee, {}) })),
+      E && /* @__PURE__ */ t("div", { className: o.slotLarge, children: E })
     ] }) }) })
   ] }) : /* @__PURE__ */ r("footer", { className: o.footer, "data-color": n, children: [
     /* @__PURE__ */ t("div", { className: o.mainSection, children: /* @__PURE__ */ r("div", { className: o.mainContainer, children: [
-      h && /* @__PURE__ */ t("div", { className: o.crossCornerTopRight, children: /* @__PURE__ */ t(ye, { position: "top-right", size: "md", "aria-hidden": !0 }) }),
+      k && /* @__PURE__ */ t("div", { className: o.graphicElementTopRight, children: /* @__PURE__ */ t(je, { shape: "angle", position: "top-right", size: "md", "aria-hidden": !0 }) }),
       /* @__PURE__ */ r("div", { className: o.contentRow, children: [
-        !R && /* @__PURE__ */ r("div", { className: o.newsletterSection, children: [
-          /* @__PURE__ */ t("p", { className: o.newsletterDescription, children: f }),
-          /* @__PURE__ */ t("form", { className: o.newsletterForm, onSubmit: C, children: /* @__PURE__ */ r("div", { className: o.newsletterInputGroup, children: [
+        !J && /* @__PURE__ */ r("div", { className: o.newsletterSection, children: [
+          /* @__PURE__ */ t("p", { className: o.newsletterDescription, children: y }),
+          /* @__PURE__ */ t("form", { className: o.newsletterForm, onSubmit: se, children: /* @__PURE__ */ r("div", { className: o.newsletterInputGroup, children: [
             /* @__PURE__ */ t(
-              Ze,
+              dt,
               {
                 type: "email",
-                placeholder: g,
-                value: T,
-                onChange: (c) => b(c.target.value),
+                placeholder: f,
+                value: F,
+                onChange: (u) => D(u.target.value),
                 className: o.newsletterInput
               }
             ),
-            /* @__PURE__ */ t(ce, { type: "submit", variant: "primary", "data-color": "neutral", children: k })
+            /* @__PURE__ */ t(fe, { type: "submit", variant: "primary", "data-color": "neutral", children: x })
           ] }) }),
-          /* @__PURE__ */ t("p", { className: o.consentText, children: D || E })
+          /* @__PURE__ */ t("p", { className: o.consentText, children: B || z })
         ] }),
         /* @__PURE__ */ r("div", { className: o.linksSection, children: [
-          /* @__PURE__ */ r("nav", { className: o.linksColumn, "aria-label": N || l("footer.shortcuts", "Snarveier"), children: [
-            /* @__PURE__ */ t("h3", { className: o.linksTitle, children: N || l("footer.shortcuts", "Snarveier") }),
-            /* @__PURE__ */ t("ul", { className: o.linksList, children: Q.map((c, w) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(te, { href: c.href, className: o.footerLink, children: c.label }) }, w)) })
+          /* @__PURE__ */ r("nav", { className: o.linksColumn, "aria-label": G || g("footer.shortcuts", "Snarveier"), children: [
+            /* @__PURE__ */ t("h3", { className: o.linksTitle, children: G || g("footer.shortcuts", "Snarveier") }),
+            /* @__PURE__ */ t("ul", { className: o.linksList, children: ie.map((u, M) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(pe, { href: u.href, className: o.footerLink, children: u.label }) }, M)) })
           ] }),
-          /* @__PURE__ */ r("nav", { className: o.linksColumn, "aria-label": p || l("footer.links", "Lenker"), children: [
-            /* @__PURE__ */ t("h3", { className: o.linksTitle, children: p || l("footer.links", "Lenker") }),
-            /* @__PURE__ */ t("ul", { className: o.linksList, children: le.map((c, w) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(te, { href: c.href, className: o.footerLink, children: c.label }) }, w)) })
+          /* @__PURE__ */ r("nav", { className: o.linksColumn, "aria-label": p || g("footer.links", "Lenker"), children: [
+            /* @__PURE__ */ t("h3", { className: o.linksTitle, children: p || g("footer.links", "Lenker") }),
+            /* @__PURE__ */ t("ul", { className: o.linksList, children: T.map((u, M) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(pe, { href: u.href, className: o.footerLink, children: u.label }) }, M)) })
           ] })
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: o.divider }),
       /* @__PURE__ */ r("div", { className: o.contactSection, children: [
         /* @__PURE__ */ r("div", { className: o.contactColumn, children: [
-          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: l("footer.contact.visitingAddress", "Besøks adresse") }),
-          /* @__PURE__ */ t("div", { className: o.contactContent, children: K.map((c, w) => /* @__PURE__ */ t("p", { children: c }, w)) })
+          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: g("footer.contact.visitingAddress", "Besøks adresse") }),
+          /* @__PURE__ */ t("div", { className: o.contactContent, children: Q.map((u, M) => /* @__PURE__ */ t("p", { children: u }, M)) })
         ] }),
         /* @__PURE__ */ r("div", { className: o.contactColumn, children: [
-          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: l("footer.contact.organizationNumber", "Organisasjonsnummer") }),
-          /* @__PURE__ */ t("p", { className: o.contactContent, children: X })
+          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: g("footer.contact.organizationNumber", "Organisasjonsnummer") }),
+          /* @__PURE__ */ t("p", { className: o.contactContent, children: K })
         ] }),
         /* @__PURE__ */ r("div", { className: o.contactColumn, children: [
-          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: l("footer.contact.email", "E-post") }),
-          /* @__PURE__ */ t("p", { className: o.contactContent, children: A })
+          /* @__PURE__ */ t("h4", { className: o.contactTitle, children: g("footer.contact.email", "E-post") }),
+          /* @__PURE__ */ t("p", { className: o.contactContent, children: N })
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: o.divider }),
       /* @__PURE__ */ t("div", { className: o.copyrightSection, children: /* @__PURE__ */ r("p", { className: o.copyrightText, children: [
         "© ",
-        H,
+        v,
         " ",
-        l("footer.copyright", "Rødekors")
+        g("footer.copyright", "Rødekors")
       ] }) }),
-      h && /* @__PURE__ */ t("div", { className: o.crossCornerBottomLeft, children: /* @__PURE__ */ t(ye, { position: "bottom-left", size: "md", "aria-hidden": !0 }) })
+      k && /* @__PURE__ */ t("div", { className: o.graphicElementBottomLeft, children: /* @__PURE__ */ t(je, { shape: "angle", position: "bottom-left", size: "md", "aria-hidden": !0 }) })
     ] }) }),
     /* @__PURE__ */ t("div", { className: o.whiteSection, children: /* @__PURE__ */ t("div", { className: o.whiteContainer, children: /* @__PURE__ */ r("div", { className: o.whiteContent, children: [
-      q && (m ? /* @__PURE__ */ t(
+      w && (H ? /* @__PURE__ */ t(
         "img",
         {
-          src: m,
-          alt: M,
+          src: H,
+          alt: P,
           className: o.logo,
           loading: "lazy"
         }
-      ) : /* @__PURE__ */ t("div", { className: o.logo, children: /* @__PURE__ */ t(B, {}) })),
-      I && /* @__PURE__ */ t("div", { className: o.slotLarge, children: I })
+      ) : /* @__PURE__ */ t("div", { className: o.logo, children: /* @__PURE__ */ t(ee, {}) })),
+      E && /* @__PURE__ */ t("div", { className: o.slotLarge, children: E })
     ] }) }) })
   ] });
 };
-function vs(n) {
+function $s(n) {
   const e = n;
   return `
 .${e.footer} {
@@ -4759,16 +5172,16 @@ function vs(n) {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto;
-  padding: var(--ds-size-30, 120px) var(--ds-size-44, 175px);
+  padding: var(--ds-size-30, 120px) 175px;
   box-sizing: border-box;
 }
-.${e.crossCornerTopRight} {
+.${e.graphicElementTopRight} {
   display: flex;
   justify-content: flex-end;
   width: 100%;
   margin-bottom: var(--ds-size-6, 24px);
 }
-.${e.crossCornerBottomLeft} {
+.${e.graphicElementBottomLeft} {
   display: flex;
   justify-content: flex-start;
   width: 100%;
@@ -4877,7 +5290,7 @@ function vs(n) {
 }
 .${e.contactTitle} {
   font-size: var(--ds-font-size-3, 16px);
-  font-weight: var(--ds-font-weight-bold);
+  font-weight: var(--ds-font-weight-semibold);
   line-height: 1.5;
   letter-spacing: 0.04px;
   color: var(--ds-color-neutral-text-default, #2b2b2b);
@@ -4914,7 +5327,7 @@ function vs(n) {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto;
-  padding: var(--ds-size-6, 24px) var(--ds-size-44, 175px);
+  padding: var(--ds-size-6, 24px) 175px;
   box-sizing: border-box;
 }
 .${e.whiteContent} {
@@ -4950,7 +5363,7 @@ function vs(n) {
 }
 @media (max-width: 1024px) {
   .${e.mainContainer} {
-    padding: var(--ds-size-16, 64px) var(--ds-size-8, 32px);
+    padding: var(--ds-size-15, 64px) var(--ds-size-8, 32px);
   }
   .${e.whiteContainer} {
     padding: var(--ds-size-6, 24px) var(--ds-size-8, 32px);
@@ -5060,7 +5473,7 @@ function vs(n) {
 }
 .${e.contactPersonName} {
   font-size: var(--ds-font-size-4, 18px);
-  font-weight: var(--ds-font-weight-bold);
+  font-weight: var(--ds-font-weight-semibold);
   line-height: 1.5;
   letter-spacing: 0.09px;
   color: var(--ds-color-neutral-text-default, #2b2b2b);
@@ -5159,25 +5572,26 @@ function vs(n) {
 }
 `;
 }
-const bs = "_donor_1hxqz_1", ys = "_tabsWrapper_1hxqz_14", xs = "_content_1hxqz_35", Ts = "_amountSection_1hxqz_47", Cs = "_amountLabel_1hxqz_55", ws = "_amountButtons_1hxqz_64", Ss = "_customAmountField_1hxqz_75", Is = "_impactRow_1hxqz_80", _s = "_heartIcon_1hxqz_88", Ds = "_impactText_1hxqz_102", Ls = "_impactAmount_1hxqz_112", As = "_actionsSection_1hxqz_117", Ns = "_vippsButton_1hxqz_127", Ms = "_vippsButtonLabel_1hxqz_157", js = "_vippsLogo_1hxqz_166", Fs = "_avtalegiroLink_1hxqz_179", Bs = "_tabHeartIcon_1hxqz_184", P = {
-  donor: bs,
-  tabsWrapper: ys,
-  content: xs,
-  amountSection: Ts,
-  amountLabel: Cs,
-  amountButtons: ws,
-  customAmountField: Ss,
-  impactRow: Is,
-  heartIcon: _s,
-  impactText: Ds,
-  impactAmount: Ls,
-  actionsSection: As,
-  vippsButton: Ns,
-  vippsButtonLabel: Ms,
-  vippsLogo: js,
-  avtalegiroLink: Fs,
-  tabHeartIcon: Bs
-}, We = () => /* @__PURE__ */ t(
+const zs = "_donor_xzqak_1", Rs = "_tabsWrapper_xzqak_14", Gs = "_content_xzqak_35", Hs = "_amountSection_xzqak_47", Ws = "_amountLabel_xzqak_55", Us = "_amountButtons_xzqak_64", Vs = "_customAmountField_xzqak_75", Os = "_impactRow_xzqak_80", Ks = "_heartIcon_xzqak_88", Zs = "_impactText_xzqak_102", qs = "_impactAmount_xzqak_112", Ys = "_actionsSection_xzqak_117", Xs = "_vippsButton_xzqak_127", Js = "_vippsButtonLabel_xzqak_157", Qs = "_vippsLogo_xzqak_166", ei = "_avtalegiroLink_xzqak_179", ti = "_tabHeartIcon_xzqak_184", ni = "_tabPanel_xzqak_214", O = {
+  donor: zs,
+  tabsWrapper: Rs,
+  content: Gs,
+  amountSection: Hs,
+  amountLabel: Ws,
+  amountButtons: Us,
+  customAmountField: Vs,
+  impactRow: Os,
+  heartIcon: Ks,
+  impactText: Zs,
+  impactAmount: qs,
+  actionsSection: Ys,
+  vippsButton: Xs,
+  vippsButtonLabel: Js,
+  vippsLogo: Qs,
+  avtalegiroLink: ei,
+  tabHeartIcon: ti,
+  tabPanel: ni
+}, et = () => /* @__PURE__ */ t(
   "svg",
   {
     width: "19",
@@ -5195,7 +5609,7 @@ const bs = "_donor_1hxqz_1", ys = "_tabsWrapper_1hxqz_14", xs = "_content_1hxqz_
       }
     )
   }
-), Es = () => /* @__PURE__ */ t(
+), oi = () => /* @__PURE__ */ t(
   "svg",
   {
     width: "16",
@@ -5213,7 +5627,7 @@ const bs = "_donor_1hxqz_1", ys = "_tabsWrapper_1hxqz_14", xs = "_content_1hxqz_
       }
     )
   }
-), $s = () => /* @__PURE__ */ t(
+), ri = () => /* @__PURE__ */ t(
   "svg",
   {
     width: "64",
@@ -5231,134 +5645,154 @@ const bs = "_donor_1hxqz_1", ys = "_tabsWrapper_1hxqz_14", xs = "_content_1hxqz_
       }
     )
   }
-), Ps = [
+), ai = [
   { value: 220, label: "220 kr" },
   { value: 345, label: "345 kr" },
   { value: 660, label: "660 kr" }
-], Ni = ({
+], Ji = ({
   "data-color": n = "primary",
-  amounts: e = Ps,
+  amounts: e = ai,
   defaultAmount: a = 345,
-  oneTimeLabel: d = "En gang",
-  monthlyLabel: h = "Hver måned",
-  customAmountPlaceholder: f = "Valgfritt beløp",
-  amountLabel: g = "Velg ønsket beløp:",
-  impactMessage: k = "En gave på {amount} bidrar til ...",
-  vippsButtonLabel: D = "Gi med",
-  avtalegiroLabel: S = "Gi med avtalegiro",
-  avtalegiroHref: R = "#",
-  currencySuffix: _ = "kr",
-  onVippsClick: V,
-  onAvtalegiroClick: N,
+  oneTimeLabel: c = "En gang",
+  monthlyLabel: k = "Hver måned",
+  customAmountPlaceholder: y = "Valgfritt beløp",
+  amountLabel: f = "Velg ønsket beløp:",
+  impactMessage: x = "En gave på {amount} bidrar til ...",
+  vippsButtonLabel: B = "Gi med",
+  avtalegiroLabel: I = "Gi med avtalegiro",
+  avtalegiroHref: J = "#",
+  currencySuffix: L = "kr",
+  onVippsClick: R,
+  onAvtalegiroClick: G,
   onAmountChange: p,
-  showVippsButton: K = !0,
-  showAvtalegiroLink: X = !0,
-  showImpactMessage: A = !0,
-  heartVariant: q = "outlined"
+  showVippsButton: Q = !0,
+  showAvtalegiroLink: K = !0,
+  showImpactMessage: N = !0,
+  heartVariant: w = "outlined"
 }) => {
-  const [m, M] = O("monthly"), [I, F] = O(a), [j, L] = O(""), [G, ne] = O(!1);
-  z(() => {
-    const y = "rk-donor-inline-styles";
-    if (typeof document > "u" || document.getElementById(y)) return;
-    const E = zs(P), Q = document.createElement("style");
-    Q.id = y, Q.textContent = E, document.head.appendChild(Q);
+  const H = We(), [P, E] = Z("monthly"), [q, Y] = Z(a), [$, d] = Z(""), [l, v] = Z(!1);
+  U(() => {
+    const T = "rk-donor-inline-styles";
+    if (typeof document > "u" || document.getElementById(T)) return;
+    const h = si(O), C = document.createElement("style");
+    C.id = T, C.textContent = h, document.head.appendChild(C);
   }, []);
-  const H = G && j ? parseInt(j, 10) || 0 : I, J = (y) => {
-    F(y), ne(!1), L(""), p == null || p(y, m);
-  }, T = (y) => {
-    const E = y.target.value;
-    L(E), ne(!0);
-    const Q = parseInt(E, 10);
-    Q > 0 && (p == null || p(Q, m));
-  }, b = () => {
-    ne(!0);
-  }, l = (y) => {
-    const E = y;
-    M(E), p == null || p(H, E);
-  }, C = () => {
-    V == null || V(H, m);
-  }, B = () => {
-    N == null || N();
-  }, Y = () => {
-    const y = `${H} ${_}`, E = k.split("{amount}");
+  const S = parseInt($, 10), F = l && $ && S > 0 ? S : q, D = (T) => {
+    Y(T), v(!1), d(""), p == null || p(T, P);
+  }, g = (T) => {
+    const h = T.target.value;
+    d(h), v(!0);
+    const C = parseInt(h, 10);
+    C > 0 && (p == null || p(C, P));
+  }, se = () => {
+    v(!0);
+  }, ee = (T) => {
+    const h = T;
+    E(h), p == null || p(F, h);
+  }, te = () => {
+    F > 0 && (R == null || R(F, P));
+  }, ne = () => {
+    G == null || G();
+  }, z = () => {
+    const T = `${F} ${L}`, h = x.split("{amount}");
     return /* @__PURE__ */ r("span", { children: [
-      E[0],
-      /* @__PURE__ */ t("span", { className: P.impactAmount, children: y }),
-      E[1] || ""
+      h[0],
+      /* @__PURE__ */ t("span", { className: O.impactAmount, children: T }),
+      h[1] || ""
     ] });
-  };
-  return /* @__PURE__ */ r("div", { className: P.donor, "data-color": n, children: [
-    /* @__PURE__ */ t("div", { className: P.tabsWrapper, children: /* @__PURE__ */ t(we, { defaultValue: "monthly", onChange: l, "data-size": "md", children: /* @__PURE__ */ r(we.List, { children: [
-      /* @__PURE__ */ t(we.Tab, { value: "one-time", children: d }),
-      /* @__PURE__ */ r(we.Tab, { value: "monthly", children: [
-        /* @__PURE__ */ t("span", { className: P.tabHeartIcon, children: /* @__PURE__ */ t(We, {}) }),
-        h
-      ] })
-    ] }) }) }),
-    /* @__PURE__ */ r("div", { className: P.content, children: [
-      /* @__PURE__ */ r("div", { className: P.amountSection, children: [
-        /* @__PURE__ */ t(xe, { className: P.amountLabel, "data-size": "sm", children: g }),
-        /* @__PURE__ */ t("div", { className: P.amountButtons, children: e.map((y) => {
-          const E = !G && I === y.value;
-          return /* @__PURE__ */ t(
-            ce,
-            {
-              variant: E ? "primary" : "secondary",
-              "data-color": E ? "accent" : "neutral",
-              onClick: () => J(y.value),
-              children: y.label
-            },
-            y.value
-          );
-        }) }),
-        /* @__PURE__ */ t("div", { className: P.customAmountField, children: /* @__PURE__ */ t(
-          Qo,
-          {
-            "aria-label": f,
-            placeholder: f,
-            value: j,
-            onChange: T,
-            onFocus: b,
-            type: "number",
-            min: 1
-          }
-        ) })
-      ] }),
-      A && /* @__PURE__ */ r("div", { className: P.impactRow, children: [
-        /* @__PURE__ */ t("div", { className: P.heartIcon, children: q === "filled" ? /* @__PURE__ */ t(We, {}) : /* @__PURE__ */ t(Es, {}) }),
-        /* @__PURE__ */ t("p", { className: P.impactText, children: Y() })
-      ] }),
-      /* @__PURE__ */ r("div", { className: P.actionsSection, children: [
-        K && /* @__PURE__ */ r(
-          "button",
-          {
-            className: P.vippsButton,
-            onClick: C,
-            type: "button",
-            "aria-label": `${D} Vipps`,
-            children: [
-              /* @__PURE__ */ t("span", { className: P.vippsButtonLabel, children: D }),
-              /* @__PURE__ */ t("span", { className: P.vippsLogo, children: /* @__PURE__ */ t($s, {}) })
-            ]
-          }
-        ),
-        X && /* @__PURE__ */ t(
-          te,
-          {
-            href: R,
-            "data-color": "neutral",
-            className: P.avtalegiroLink,
-            onClick: (y) => {
-              N && (y.preventDefault(), B());
-            },
-            children: S
-          }
-        )
-      ] })
+  }, ie = /* @__PURE__ */ r("div", { className: O.content, children: [
+    /* @__PURE__ */ r("div", { className: O.amountSection, children: [
+      /* @__PURE__ */ t(Ne, { className: O.amountLabel, "data-size": "sm", id: H, children: f }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: O.amountButtons,
+          role: "group",
+          "aria-labelledby": H,
+          children: e.map((T) => {
+            const h = !l && q === T.value;
+            return /* @__PURE__ */ t(
+              fe,
+              {
+                variant: h ? "primary" : "secondary",
+                "data-color": h ? "accent" : "neutral",
+                "aria-pressed": h,
+                onClick: () => D(T.value),
+                children: T.label
+              },
+              T.value
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: O.customAmountField, children: /* @__PURE__ */ t(
+        xr,
+        {
+          "aria-label": y,
+          placeholder: y,
+          value: $,
+          onChange: g,
+          onFocus: se,
+          type: "number",
+          min: 1
+        }
+      ) })
+    ] }),
+    N && /* @__PURE__ */ r("div", { className: O.impactRow, children: [
+      /* @__PURE__ */ t("div", { className: O.heartIcon, children: w === "filled" ? /* @__PURE__ */ t(et, {}) : /* @__PURE__ */ t(oi, {}) }),
+      /* @__PURE__ */ t("p", { className: O.impactText, children: z() })
+    ] }),
+    /* @__PURE__ */ r("div", { className: O.actionsSection, children: [
+      Q && /* @__PURE__ */ r(
+        "button",
+        {
+          className: O.vippsButton,
+          onClick: te,
+          type: "button",
+          "aria-label": `${B} Vipps`,
+          "data-brand-exception": "vipps",
+          children: [
+            /* @__PURE__ */ t("span", { className: O.vippsButtonLabel, children: B }),
+            /* @__PURE__ */ t("span", { className: O.vippsLogo, children: /* @__PURE__ */ t(ri, {}) })
+          ]
+        }
+      ),
+      K && /* @__PURE__ */ t(
+        pe,
+        {
+          href: J,
+          "data-color": "neutral",
+          className: O.avtalegiroLink,
+          onClick: (T) => {
+            G && (T.preventDefault(), ne());
+          },
+          children: I
+        }
+      )
     ] })
   ] });
+  return /* @__PURE__ */ t("div", { className: O.donor, "data-color": n, children: /* @__PURE__ */ r(
+    Te,
+    {
+      defaultValue: "monthly",
+      onChange: ee,
+      "data-size": "md",
+      className: O.tabsWrapper,
+      children: [
+        /* @__PURE__ */ r(Te.List, { children: [
+          /* @__PURE__ */ t(Te.Tab, { value: "one-time", children: c }),
+          /* @__PURE__ */ r(Te.Tab, { value: "monthly", children: [
+            /* @__PURE__ */ t("span", { className: O.tabHeartIcon, children: /* @__PURE__ */ t(et, {}) }),
+            k
+          ] })
+        ] }),
+        /* @__PURE__ */ t(Te.Panel, { value: "one-time", className: O.tabPanel, children: P === "one-time" ? ie : null }),
+        /* @__PURE__ */ t(Te.Panel, { value: "monthly", className: O.tabPanel, children: P === "monthly" ? ie : null })
+      ]
+    }
+  ) });
 };
-function zs(n) {
+function si(n) {
   return `
 .${n.donor} {
   border-radius: 16px;
@@ -5380,6 +5814,10 @@ function zs(n) {
   display: flex !important;
   width: 100% !important;
 }
+.${n.tabPanel} {
+  width: 100%;
+  padding: 0;
+}
 .${n.tabsWrapper} [role="tab"] {
   flex: 1 1 50% !important;
   display: inline-flex !important;
@@ -5524,72 +5962,72 @@ function zs(n) {
 `;
 }
 export {
-  hn as Alert,
-  Ke as Avatar,
-  fn as Badge,
-  Os as BadgePosition,
-  Ks as Breadcrumbs,
-  Ys as BreadcrumbsItem,
-  Zs as BreadcrumbsLink,
-  qs as BreadcrumbsList,
-  ce as Button,
-  vn as Card,
-  Xs as CardBlock,
-  zo as Carousel,
-  bn as Checkbox,
-  Qs as Chip,
-  ye as CrossCorner,
-  xo as DateInput,
-  mo as DatePicker,
-  ni as Details,
-  oi as Dialog,
-  ri as Divider,
-  Ni as Donor,
-  U as Dropdown,
-  ci as DropdownButton,
-  ii as DropdownHeading,
-  di as DropdownItem,
-  li as DropdownList,
-  ai as DropdownTrigger,
-  si as DropdownTriggerContext,
-  pi as ErrorSummary,
-  mi as Field,
-  Ko as FieldCounter,
-  Oo as FieldDescription,
-  gi as Fieldset,
-  Ai as Footer,
-  Li as Header,
-  qo as Heading,
-  Ze as Input,
-  Yo as Label,
-  ei as LanguageProvider,
-  te as Link,
-  ui as List,
-  Zo as Pagination,
-  ki as PaginationButton,
-  fi as PaginationItem,
-  hi as PaginationList,
-  xe as Paragraph,
-  bi as Popover,
-  yi as Radio,
-  Ce as Search,
-  Ti as Select,
-  Ci as SkeletonLoader,
-  wi as SkipLink,
-  Po as Spinner,
-  Xo as Suggestion,
-  Ae as Switch,
-  Si as Table,
-  we as Tabs,
-  Jo as Tag,
-  Ii as Textarea,
-  Qo as Textfield,
-  _i as ToggleGroup,
-  Di as Tooltip,
-  er as ValidationMessage,
-  Js as useCheckboxGroup,
-  ti as useLanguage,
-  Te as useLanguageOptional,
-  vi as usePagination,
-  xi as useRadioGroup
+  jn as Alert,
+  at as Avatar,
+  An as Badge,
+  gi as BadgePosition,
+  ui as Breadcrumbs,
+  fi as BreadcrumbsItem,
+  ki as BreadcrumbsLink,
+  hi as BreadcrumbsList,
+  fe as Button,
+  Nn as Card,
+  vi as CardBlock,
+  nr as Carousel,
+  En as Checkbox,
+  yi as Chip,
+  Po as DateInput,
+  Lo as DatePicker,
+  Ci as Details,
+  wi as Dialog,
+  Si as Divider,
+  Ji as Donor,
+  oe as Dropdown,
+  ji as DropdownButton,
+  Li as DropdownHeading,
+  Mi as DropdownItem,
+  Di as DropdownList,
+  _i as DropdownTrigger,
+  Ii as DropdownTriggerContext,
+  Ai as ErrorSummary,
+  Ni as Field,
+  fr as FieldCounter,
+  hr as FieldDescription,
+  Ei as Fieldset,
+  Xi as Footer,
+  je as GraphicElement,
+  Yi as Header,
+  rt as Heading,
+  dt as Input,
+  kr as Label,
+  xi as LanguageProvider,
+  pe as Link,
+  Bi as List,
+  vr as Pagination,
+  $i as PaginationButton,
+  Pi as PaginationItem,
+  Fi as PaginationList,
+  Ne as Paragraph,
+  Ri as Popover,
+  Gi as Radio,
+  Pe as Search,
+  Wi as Select,
+  Ui as SkeletonLoader,
+  Vi as SkipLink,
+  tr as Spinner,
+  br as Suggestion,
+  Re as Switch,
+  Oi as Table,
+  Te as Tabs,
+  yr as Tag,
+  Ki as Textarea,
+  xr as Textfield,
+  Zi as ToggleGroup,
+  qi as Tooltip,
+  Tr as ValidationMessage,
+  bi as useCheckboxGroup,
+  Ti as useLanguage,
+  Be as useLanguageOptional,
+  zi as usePagination,
+  Hi as useRadioGroup
 };