@apolitical/component-library 5.3.4-beta.0 → 5.3.4

package/index.mjs

@@ -75,7 +75,7 @@ var Mc = { exports: {} };
   })();
 })(Mc);
 var Fh = Mc.exports;
-const K = /* @__PURE__ */ Mn(Fh), Ah = ({
+const V = /* @__PURE__ */ Mn(Fh), Ah = ({
   element: e = "span",
   showOnFocus: t = !0,
   children: n,
@@ -83,7 +83,7 @@ const K = /* @__PURE__ */ Mn(Fh), Ah = ({
   ...i
 }) => te.createElement(e, {
   ...i,
-  className: K("hidden", r, { "show-on-focus": t }),
+  className: V("hidden", r, { "show-on-focus": t }),
   children: n
 }), He = Jt(Ah), Bh = ({
   element: e = "span",
@@ -447,17 +447,17 @@ function Sh() {
     }
     function je(N) {
       try {
-        return V(N), !1;
+        return K(N), !1;
       } catch {
         return !0;
       }
     }
-    function V(N) {
+    function K(N) {
       return "" + N;
     }
     function se(N) {
       if (je(N))
-        return w("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ae(N)), V(N);
+        return w("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ae(N)), K(N);
     }
     var pe = v.ReactCurrentOwner, ye = {
       key: !0,
@@ -928,11 +928,11 @@ const Yo = {}, pr = Ys(
     const $ = {
       className: "content"
     };
-    return C ? $.className = K("content", { hidden: f === "hidden" }) : $.hidden = f === "hidden", /* @__PURE__ */ c.jsx(
+    return C ? $.className = V("content", { hidden: f === "hidden" }) : $.hidden = f === "hidden", /* @__PURE__ */ c.jsx(
       "aside",
       {
         ref: g,
-        className: K("tooltip text-medium", f, a, {
+        className: V("tooltip text-medium", f, a, {
           loading: r,
           "extra-padding": v,
           "has-pointer": w,
@@ -1686,13 +1686,15 @@ const Se = ({
   }
   !l && u && (u = "");
   const v = [];
-  typeof t == "string" && v.push(t), r && (v.push("icon"), typeof r == "object" ? (v.push(r.icon), r.position ? v.push(r.position) : v.push("left"), r.hover && v.push(`hover_${r.hover}`), r.animate && (v.push("animate"), typeof r.animate == "string" && v.push(r.animate))) : (v.push(r), !r.includes("right") && !r.includes("left") && v.push("left"))), n.muted && v.push("muted"), n.fullWidth && v.push("full-width");
+  typeof t == "string" && v.push(t), r && (v.push("icon"), typeof r == "object" ? (v.push(r.icon), r.position ? v.push(r.position) : v.push("left"), r.hover && v.push(`hover_${r.hover}`), r.animate && (v.push("animate"), typeof r.animate == "string" && v.push(r.animate))) : (v.push(r), !r.includes("right") && !r.includes("left") && v.push("left")));
   const w = {
     ...m,
-    className: K(e, o, v, {
+    className: V(e, o, v, {
       "no-text": !h,
       disabled: l,
-      button: i
+      button: i,
+      muted: n.muted,
+      "full-width": n.fullWidth
     }),
     onClick: (B) => {
       (!i || i[0] === "#") && s && (B.preventDefault(), B.stopPropagation()), s && s(B);
@@ -1722,14 +1724,14 @@ const Se = ({
     return i === "p" ? /* @__PURE__ */ c.jsx(Se, { ...s }, o) : /* @__PURE__ */ c.jsx("li", { className: ((l = t[o]) == null ? void 0 : l.className) || "", children: /* @__PURE__ */ c.jsx(Se, { ...s }) }, o);
   });
   return te.createElement(i, {
-    className: K("button-wrapper", n),
+    className: V("button-wrapper", n),
     ...r,
     children: a
   });
 };
 const on = ({ className: e = "", maxWidth: t = !1 }) => {
   const n = t ? { "--max-width": `${t / 16}rem` } : {};
-  return /* @__PURE__ */ c.jsx("hr", { className: K(e, { "has-max-width": t }), style: n });
+  return /* @__PURE__ */ c.jsx("hr", { className: V(e, { "has-max-width": t }), style: n });
 }, Xo = {
   card: {
     range: [
@@ -1941,7 +1943,7 @@ const R_ = ({ image: e, className: t = "", testId: n }) => /* @__PURE__ */ c.jsx
 }) => {
   if (e) {
     const l = { ...o };
-    return i && (l.onClick = i), a && (l["data-gtm-event-context"] = a), s && (l["data-gtm-event-type"] = s), /* @__PURE__ */ c.jsx("a", { href: e, className: K("gtm-trackable", r), ...l, children: t });
+    return i && (l.onClick = i), a && (l["data-gtm-event-context"] = a), s && (l["data-gtm-event-type"] = s), /* @__PURE__ */ c.jsx("a", { href: e, className: V("gtm-trackable", r), ...l, children: t });
   }
   return n ? te.createElement(n, { children: t, className: r, ...o }) : /* @__PURE__ */ c.jsx(c.Fragment, { children: t });
 };
@@ -1952,7 +1954,7 @@ const em = Ys(
       "aside",
       {
         ref: i,
-        className: K("popover", e),
+        className: V("popover", e),
         "aria-live": "polite",
         children: t
       }
@@ -1979,7 +1981,7 @@ const $_ = ({ currentStep: e = 1, steps: t = 1 }) => /* @__PURE__ */ c.jsxs(c.Fr
       /* @__PURE__ */ c.jsx(
         "div",
         {
-          className: K("dot", {
+          className: V("dot", {
             active: i === e,
             completed: i < e
           }),
@@ -1989,7 +1991,7 @@ const $_ = ({ currentStep: e = 1, steps: t = 1 }) => /* @__PURE__ */ c.jsxs(c.Fr
       /* @__PURE__ */ c.jsx(
         "div",
         {
-          className: K("line", {
+          className: V("line", {
             active: i < e
           })
         }
@@ -2019,7 +2021,7 @@ const I_ = ({ elementId: e, offset: t = 20 }) => {
     }
   );
 };
-const L_ = ({ items: e, className: t = "", ...n }) => /* @__PURE__ */ c.jsx("ul", { className: K("buckets", t), ...n, children: e.map(({ title: r, text: i, link: a, ...s }, o) => /* @__PURE__ */ c.jsx("li", { className: "bucket text-medium", children: /* @__PURE__ */ c.jsxs("a", { href: a, ...s, children: [
+const L_ = ({ items: e, className: t = "", ...n }) => /* @__PURE__ */ c.jsx("ul", { className: V("buckets", t), ...n, children: e.map(({ title: r, text: i, link: a, ...s }, o) => /* @__PURE__ */ c.jsx("li", { className: "bucket text-medium", children: /* @__PURE__ */ c.jsxs("a", { href: a, ...s, children: [
   /* @__PURE__ */ c.jsx("p", { className: "title", children: r }),
   /* @__PURE__ */ c.jsx("p", { children: i })
 ] }) }, o)) }), eu = 300, tu = "ease-in-out";
@@ -2082,7 +2084,7 @@ const eo = ({
     "details",
     {
       ref: a,
-      className: K("collapsible-section", t, {
+      className: V("collapsible-section", t, {
         "should-animate": r
       }),
       children: [
@@ -2119,7 +2121,7 @@ const ru = {
   return !n && !s ? null : /* @__PURE__ */ c.jsx(
     "small",
     {
-      className: K(
+      className: V(
         "content-type-label text-small",
         e in ru ? ru[e] : e,
         r,
@@ -2145,7 +2147,7 @@ const Gt = ({
   return /* @__PURE__ */ c.jsx(
     "div",
     {
-      className: K("highlighted-text-box", e, r, {
+      className: V("highlighted-text-box", e, r, {
         "has-icon": t,
         "show-highlight": s,
         [o]: o !== "default"
@@ -2178,7 +2180,7 @@ const $n = ({
     Gt,
     {
       variant: "subtle",
-      className: K("empty-state-box", e, r),
+      className: V("empty-state-box", e, r),
       children: /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
         t && typeof t == "string" ? /* @__PURE__ */ c.jsx(Yt, { options: { forceBlock: !0 }, children: t }) : t,
         i && typeof n == "object" && (u || /* @__PURE__ */ c.jsx(
@@ -2202,7 +2204,7 @@ const am = ({
   heading: n = !1,
   children: r,
   ...i
-}) => /* @__PURE__ */ c.jsxs("div", { ...i, className: K("helper-text-box text-small", e, t), children: [
+}) => /* @__PURE__ */ c.jsxs("div", { ...i, className: V("helper-text-box text-small", e, t), children: [
   n && /* @__PURE__ */ c.jsx("p", { className: "title", children: n }),
   typeof r == "string" ? /* @__PURE__ */ c.jsx(
     Yt,
@@ -2254,14 +2256,14 @@ const sm = ({
     Gt,
     {
       variant: "subtle",
-      className: K("hide-show-text-box", t),
+      className: V("hide-show-text-box", t),
       children: [
         /* @__PURE__ */ c.jsx(
           "div",
           {
             ref: u,
             id: e,
-            className: K("content", m, s),
+            className: V("content", m, s),
             children: i ? /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
               /* @__PURE__ */ c.jsx(Yt, { options: { forceBlock: !0, ...a }, children: m === "closed" ? d : i }),
               m !== "closed" && o
@@ -2274,7 +2276,7 @@ const sm = ({
             variant: "tertiary",
             icon: { icon: "navigation_arrow", position: "left", animate: !0 },
             styling: { muted: !0 },
-            className: K({ "rotate-180": f }),
+            className: V({ "rotate-180": f }),
             onClick: () => {
               p(f ? "ready-to-close" : "opening");
             },
@@ -2297,7 +2299,7 @@ const z_ = ({
 }) => {
   const { hasBorder: s = !1, zebraStriping: o = !1 } = i;
   return te.createElement(e, {
-    className: K("icon-bulleted-list text-medium", n, a, {
+    className: V("icon-bulleted-list text-medium", n, a, {
       "has-border": s,
       "has-zebra-stripes": o,
       [t]: e !== "dl"
@@ -2423,7 +2425,7 @@ const z_ = ({
     "@",
     n.formatMessage({ id: "member_deleted" })
   ] })) : a ? (r = { ...r, className: "button primary medium" }, /* @__PURE__ */ c.jsx("p", { className: "center", children: /* @__PURE__ */ c.jsx(Se, { variant: "primary", size: "medium", ...r, children: i }) })) : /* @__PURE__ */ c.jsx("a", { ...r, children: i });
-}, au = ({ children: e, ...t }) => /* @__PURE__ */ c.jsx("span", { className: K({ url: t == null ? void 0 : t.href }), children: e });
+}, au = ({ children: e, ...t }) => /* @__PURE__ */ c.jsx("span", { className: V({ url: t == null ? void 0 : t.href }), children: e });
 const mm = {
   default: {
     a: hm,
@@ -2475,7 +2477,7 @@ const mm = {
   };
   let l = mm[i];
   return n.overrides && (l = { ...l, ...n.overrides }), te.createElement(e, {
-    className: K("markdown-text", t, {
+    className: V("markdown-text", t, {
       "highlight-titles": s
     }),
     children: /* @__PURE__ */ c.jsx(Yt, { options: { ...o, ...n, overrides: l }, children: r })
@@ -2489,8 +2491,8 @@ const pm = ({
   className: i = ""
 }) => {
   const a = e ? { "--max-width": `${e / 16}rem` } : {};
-  return /* @__PURE__ */ c.jsxs("section", { className: K("page-heading", i), children: [
-    /* @__PURE__ */ c.jsxs("div", { className: K("content", { "has-max-width": e }), style: a, children: [
+  return /* @__PURE__ */ c.jsxs("section", { className: V("page-heading", i), children: [
+    /* @__PURE__ */ c.jsxs("div", { className: V("content", { "has-max-width": e }), style: a, children: [
       t && t.text && te.createElement(t.element || "h1", { className: "title" }, t.text),
       n && n.text && te.createElement(
         n.element || "h2",
@@ -2514,7 +2516,7 @@ const an = ({
   const l = {
     "--icon": `url(${sn}icons/${r}.svg)`
   }, { showTooltip: u, tooltipProps: d } = Lc(!!i), h = te.createElement(s, {
-    className: K("pill", e, t, n, {
+    className: V("pill", e, t, n, {
       "has-icon": r
     }),
     style: l,
@@ -2543,7 +2545,7 @@ const Ri = ({
   e,
   {
     ...r,
-    className: K("status-banner text-small", n),
+    className: V("status-banner text-small", n),
     "aria-live": "assertive"
   },
   t
@@ -2675,7 +2677,7 @@ const Am = ({ slug: e }) => {
   return /* @__PURE__ */ c.jsx(
     an,
     {
-      className: K("user-badge", a == null ? void 0 : a.toLowerCase()),
+      className: V("user-badge", a == null ? void 0 : a.toLowerCase()),
       icon: i && Fm[i],
       element: "li",
       tooltip: s,
@@ -2711,7 +2713,7 @@ const Tm = ({
   return /* @__PURE__ */ c.jsx(
     "span",
     {
-      className: K(`progress-bar section-${u}`, s, r, {
+      className: V(`progress-bar section-${u}`, s, r, {
         [o]: o !== "default",
         [l !== "default" ? l : ""]: l !== "default"
       }),
@@ -2740,7 +2742,7 @@ const xa = "loadingBlock_", Sm = ({ progress: e = 0, steps: t = !1, className: n
   return /* @__PURE__ */ c.jsxs(
     Gt,
     {
-      className: K("loading-block", n, {
+      className: V("loading-block", n, {
         "has-icon": i && t[i].icon
       }),
       variant: "subtle",
@@ -2756,7 +2758,7 @@ const zt = ({ element: e = "div", className: t = "", ...n }) => /* @__PURE__ */
   Js,
   {
     element: e,
-    className: K("loading-placeholder", t),
+    className: V("loading-placeholder", t),
     ...n
   }
 );
@@ -2810,7 +2812,7 @@ const ws = {
   "course-navigation": ["button", "button"],
   "course-lesson-page": ["breadcrumb", "course-navigation", "text-page"],
   "course-lesson-quiz": ["text-page", "quiz-box"]
-}, ed = (e, t) => e in ws ? /* @__PURE__ */ c.jsx("div", { className: e, children: ws[e].map((n, r) => ed(n, r)) }, t) : /* @__PURE__ */ c.jsx(zt, { className: e }, t), no = ({ layout: e = "overview-page", ...t }) => /* @__PURE__ */ c.jsx("div", { className: K("loading-state", e), ...t, children: ws[e].map((n, r) => ed(n, r)) }), td = (e) => {
+}, ed = (e, t) => e in ws ? /* @__PURE__ */ c.jsx("div", { className: e, children: ws[e].map((n, r) => ed(n, r)) }, t) : /* @__PURE__ */ c.jsx(zt, { className: e }, t), no = ({ layout: e = "overview-page", ...t }) => /* @__PURE__ */ c.jsx("div", { className: V("loading-state", e), ...t, children: ws[e].map((n, r) => ed(n, r)) }), td = (e) => {
   const t = e && e.toUpperCase().trim().split(" ");
   return Array.isArray(t) && t.length > 1 && t[0] !== "" ? t[1] === "" ? t[0][0] : t[0][0] + t[t.length - 1][0] : e ? e.substr(0, 1) : "";
 }, ri = ["#5AB6A3", "#A2D7AF", "#806056", "#3962B3"], jm = (e) => {
@@ -2847,7 +2849,7 @@ const su = 256, In = ({
   return t && t !== "" && !l && (t.includes("http") || t.includes("//")) && (m = !0), /* @__PURE__ */ c.jsx(
     "figure",
     {
-      className: K("profile-picture", e, { error: l }),
+      className: V("profile-picture", e, { error: l }),
       ...o,
       children: m ? /* @__PURE__ */ c.jsx(
         "img",
@@ -2922,7 +2924,7 @@ const yn = ({
   const z = Om(C), $ = r && r.createdAt ? Ds(r.createdAt) : !1, A = r && r.createdAt ? Wc(r.createdAt) : "";
   return te.createElement(e, {
     ...d,
-    className: K("member text-medium", g, f, l, {
+    className: V("member text-medium", g, f, l, {
       "has-profile-link": E
     }),
     ...p,
@@ -2950,7 +2952,7 @@ const yn = ({
               /* @__PURE__ */ c.jsxs(
                 "div",
                 {
-                  className: K("name", { "new-line": v }),
+                  className: V("name", { "new-line": v }),
                   "data-testid": "member-name",
                   children: [
                     /* @__PURE__ */ c.jsx("span", { children: S }),
@@ -2958,7 +2960,7 @@ const yn = ({
                     r && /* @__PURE__ */ c.jsxs(
                       "span",
                       {
-                        className: K("additional-content", {
+                        className: V("additional-content", {
                           "new-line": v
                         }),
                         children: [
@@ -2986,7 +2988,7 @@ const yn = ({
               z && !v && /* @__PURE__ */ c.jsx(
                 "small",
                 {
-                  className: K({ "text-medium": g === "large" }),
+                  className: V({ "text-medium": g === "large" }),
                   "data-testid": "member-details",
                   children: b ? z : /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
                     C.role,
@@ -3055,7 +3057,7 @@ const ou = {
   const h = ce();
   return !n || n.length === 0 ? null : te.createElement(e, {
     ...d,
-    className: K("contributors", u, i, { "has-gap": a }),
+    className: V("contributors", u, i, { "has-gap": a }),
     children: /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
       /* @__PURE__ */ c.jsx("ul", { children: n.map((m, p) => {
         let g, f = "";
@@ -3077,7 +3079,7 @@ const ou = {
           g = /* @__PURE__ */ c.jsxs(
             "small",
             {
-              className: K({ "large-number": b > 99 }),
+              className: V({ "large-number": b > 99 }),
               children: [
                 "+",
                 Zh(b, 0)
@@ -3085,14 +3087,14 @@ const ou = {
             }
           ), f = "number-left";
         }
-        return g ? /* @__PURE__ */ c.jsx("li", { className: K("contributor", f), children: g }, p) : null;
+        return g ? /* @__PURE__ */ c.jsx("li", { className: V("contributor", f), children: g }, p) : null;
       }) }),
       r && /* @__PURE__ */ c.jsx("span", { className: "label", children: typeof r == "string" ? r : n.length === 1 ? typeof n[0] == "string" ? h.formatMessage({ id: `member_${n[0]}` }) : ar(n[0].name || "", 20) : l || null })
     ] })
   });
 };
 const rd = ({ element: e = "section", children: t, className: n, ...r }) => te.createElement(e, {
-  className: K("modal", n),
+  className: V("modal", n),
   children: typeof t == "string" ? /* @__PURE__ */ c.jsx("p", { children: t }) : t,
   ...r
 });
@@ -4785,7 +4787,7 @@ const xn = ({
     {
       id: `${e}-overlay`,
       ref: E,
-      className: K("overlay", {
+      className: V("overlay", {
         open: f,
         "in-portal": d.includes("in-portal")
       }),
@@ -4794,7 +4796,7 @@ const xn = ({
         rd,
         {
           id: e,
-          className: K("overlay-modal", d, {
+          className: V("overlay-modal", d, {
             "has-max-width": r
           }),
           hidden: !f,
@@ -4873,7 +4875,7 @@ const Cr = "joinCommunityButton", pd = ({
           await w();
         }, 500), h(!d);
       },
-      className: K("join-community-button", m, {
+      className: V("join-community-button", m, {
         active: m === "joining"
       }),
       disabled: u,
@@ -4894,7 +4896,7 @@ const Aa = "communityDetails_", U_ = ({
   functions: { invite: s, ...o }
 }) => {
   const l = ce(), { id: u } = $e(Dt), d = u, h = 5, m = i || a.length, p = a.length ? a : Array(h).fill({}), g = `/communities/${r}/members` === window.location.pathname, f = t || n, b = !n && !t;
-  return /* @__PURE__ */ c.jsxs("div", { className: K("community-details", e), children: [
+  return /* @__PURE__ */ c.jsxs("div", { className: V("community-details", e), children: [
     f ? /* @__PURE__ */ c.jsxs("div", { className: "member-details", children: [
       /* @__PURE__ */ c.jsxs("div", { className: "top", children: [
         /* @__PURE__ */ c.jsxs("h4", { children: [
@@ -4952,7 +4954,7 @@ const H_ = ({ breadcrumbs: e, cutoff: t = 20, className: n = "" }) => {
         children: r.formatMessage({ id: "breadcrumbs_label" })
       }
     ),
-    /* @__PURE__ */ c.jsx("ul", { className: K("breadcrumbs text-small", n), children: e.map(
+    /* @__PURE__ */ c.jsx("ul", { className: V("breadcrumbs text-small", n), children: e.map(
       ({ text: i, href: a, current: s = !1 }, o) => {
         const l = {};
         return s && (l["aria-current"] = "location"), /* @__PURE__ */ c.jsxs("li", { children: [
@@ -4980,7 +4982,7 @@ const Np = ({
   return /* @__PURE__ */ c.jsxs(
     "aside",
     {
-      className: K("enriched-url gtm-trackable", {
+      className: V("enriched-url gtm-trackable", {
         "has-image": t,
         [e]: e !== "default"
       }),
@@ -5034,7 +5036,7 @@ const Mp = ({
     let g = [];
     u.includes(m) && !a ? g = u.filter((f) => f !== m) : m === "all" ? g = ["all"] : r ? g = [...u.filter((f) => f !== "all"), m] : g = [m], d((f) => (i && typeof i == "function" && i({ current: g, previous: f }), g)), p && typeof p == "function" && p();
   };
-  return /* @__PURE__ */ c.jsx("ul", { className: K("filters", s), children: l.map(({ id: m, text: p, disabled: g = !1, callback: f = () => {
+  return /* @__PURE__ */ c.jsx("ul", { className: V("filters", s), children: l.map(({ id: m, text: p, disabled: g = !1, callback: f = () => {
   } }) => {
     let b = {};
     return g && (b = {
@@ -5043,7 +5045,7 @@ const Mp = ({
     }), /* @__PURE__ */ c.jsx("li", { children: /* @__PURE__ */ c.jsx(
       "button",
       {
-        className: K(m, {
+        className: V(m, {
           selected: u.includes(m)
         }),
         onClick: (v) => {
@@ -5087,7 +5089,7 @@ const ui = "languageSwitcher_", V_ = ({
   ))
     return null;
   const g = Object.keys(r), f = h !== e;
-  return /* @__PURE__ */ c.jsxs("div", { className: K("language-switcher text-small", s, l), children: [
+  return /* @__PURE__ */ c.jsxs("div", { className: V("language-switcher text-small", s, l), children: [
     /* @__PURE__ */ c.jsxs("nav", { children: [
       s !== "short" && /* @__PURE__ */ c.jsx("p", { children: o || u.formatMessage({ id: `${ui}label` }) }),
       /* @__PURE__ */ c.jsx("ul", { children: g.map((b) => {
@@ -5162,7 +5164,7 @@ const Ba = bh({ locale: "en", messages: gr }), sa = ({
         g instanceof Error ? h(g.message) : h("Unknown error");
       }
   };
-  return !d && !e && !o.endOfFeed ? null : /* @__PURE__ */ c.jsx("footer", { className: K("load-more", l), children: !d && e ? /* @__PURE__ */ c.jsx(
+  return !d && !e && !o.endOfFeed ? null : /* @__PURE__ */ c.jsx("footer", { className: V("load-more", l), children: !d && e ? /* @__PURE__ */ c.jsx(
     Se,
     {
       variant: r,
@@ -5188,7 +5190,7 @@ const gd = ({
   "a",
   {
     href: "/home/",
-    className: K("logo", e, t, n),
+    className: V("logo", e, t, n),
     ...r,
     children: /* @__PURE__ */ c.jsx(He, { children: /* @__PURE__ */ c.jsx(ht, { id: "apolitical" }) })
   }
@@ -5209,7 +5211,7 @@ const $p = ({
     document.removeEventListener("click", l, !0);
   })), te.createElement(e, {
     ref: a,
-    className: K("more-menu text-medium", r),
+    className: V("more-menu text-medium", r),
     children: /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
       /* @__PURE__ */ c.jsx(
         Se,
@@ -5280,7 +5282,7 @@ const Lp = fr(() => Promise.resolve().then(() => Mm)), zp = [
   return /* @__PURE__ */ c.jsxs("ul", { id: "navigation-menu", className: "text-medium", children: [
     zp.map(({ key: a, href: s }) => {
       const o = Ip(s, e), l = {};
-      return o && (l["aria-current"] = "page"), /* @__PURE__ */ c.jsx("li", { className: K(a, { active: o }), children: /* @__PURE__ */ c.jsx(
+      return o && (l["aria-current"] = "page"), /* @__PURE__ */ c.jsx("li", { className: V(a, { active: o }), children: /* @__PURE__ */ c.jsx(
         "a",
         {
           href: s,
@@ -5360,7 +5362,7 @@ const Up = "shareLinks_", K_ = ({
   className: s = ""
 }) => {
   const o = ce(), l = Wp({ title: e, link: t, referrer: n });
-  return /* @__PURE__ */ c.jsxs("aside", { className: K("share-links", i, a, s), children: [
+  return /* @__PURE__ */ c.jsxs("aside", { className: V("share-links", i, a, s), children: [
     /* @__PURE__ */ c.jsx("p", { className: "text-small", children: o.formatMessage({ id: "shareLinks_label" }) }),
     /* @__PURE__ */ c.jsx("ul", { children: l.map(({ key: u, icon: d, url: h, shouldRender: m = !0, onClick: p }) => {
       if (typeof m == "function" && !m())
@@ -5458,7 +5460,7 @@ const Z_ = ({ tabs: e, className: t = "", preventLocationChange: n }) => {
             href: w || `#${f}`,
             id: `tab-${f}`,
             "aria-controls": f,
-            className: K({ selected: C }),
+            className: V({ selected: C }),
             role: "tab",
             tabIndex: C ? 0 : -1,
             "aria-selected": C,
@@ -5469,7 +5471,7 @@ const Z_ = ({ tabs: e, className: t = "", preventLocationChange: n }) => {
         ) }, `tab-${f}`)
       );
     }
-  ), /* @__PURE__ */ c.jsxs("div", { className: K("tabs-wrapper", t), children: [
+  ), /* @__PURE__ */ c.jsxs("div", { className: V("tabs-wrapper", t), children: [
     /* @__PURE__ */ c.jsx("ul", { className: "tabs", role: "tablist", children: m }),
     /* @__PURE__ */ c.jsx("div", { className: "tab-content", children: p })
   ] });
@@ -5490,7 +5492,7 @@ const Hp = {
   return te.Children.count(i) === 1 && (s = te.Children.toArray(i)[0], s.props && (s = s.props.children)), /* @__PURE__ */ c.jsx(
     "section",
     {
-      className: K("columns", `layout-${e}`, r, {
+      className: V("columns", `layout-${e}`, r, {
         "has-containers": n
       }),
       children: te.Children.map(s, (o, l) => t !== !1 && l === t && a && a < Hp[e] ? null : o)
@@ -5512,7 +5514,7 @@ const vd = ({
       "small",
       {
         id: e,
-        className: K("character-limit", {
+        className: V("character-limit", {
           "near-limit": l,
           "approaching-limit": u
         }),
@@ -5708,7 +5710,7 @@ const ci = "emailHelperTextBox_", Zp = ({
     type: o,
     id: n,
     name: a,
-    className: K(e, t, {
+    className: V(e, t, {
       "has-scrollbar": o === "textarea" && m.current && m.current.clientHeight < m.current.scrollHeight
     }),
     value: l,
@@ -5835,7 +5837,7 @@ const Vn = {
           ...C,
           activePredictionIndex: D
         })),
-        className: K("predictions-list-item", {
+        className: V("predictions-list-item", {
           active: D === p
         }),
         children: B.description
@@ -5921,7 +5923,7 @@ const bd = ({
               break;
           }
       } : void 0,
-      className: K(i, "checkbox-wrapper", e, {
+      className: V(i, "checkbox-wrapper", e, {
         "is-checked": d
       }),
       ...m,
@@ -5936,7 +5938,7 @@ const Qp = Jt(function({
   return /* @__PURE__ */ c.jsx(
     Js,
     {
-      className: K("rotating-chevron", `direction-${t}`)
+      className: V("rotating-chevron", `direction-${t}`)
     }
   );
 });
@@ -5972,7 +5974,7 @@ const Jp = ({
     } else
       b([]), w && w([]);
   };
-  return /* @__PURE__ */ c.jsxs("div", { className: K("dropdown-wrapper", e), children: [
+  return /* @__PURE__ */ c.jsxs("div", { className: V("dropdown-wrapper", e), children: [
     /* @__PURE__ */ c.jsxs(
       "button",
       {
@@ -6057,7 +6059,7 @@ const Jp = ({
               return /* @__PURE__ */ c.jsx("li", { "data-testid": "dropdown-options", children: /* @__PURE__ */ c.jsxs(
                 "button",
                 {
-                  className: K("gtm-trackable", {
+                  className: V("gtm-trackable", {
                     selected: L,
                     "selected-single": L && !o
                   }),
@@ -6071,7 +6073,7 @@ const Jp = ({
                   "data-testid": L ? "current-selection" : "",
                   children: [
                     o && /* @__PURE__ */ c.jsx("span", { className: "pretty-checkbox", "data-testid": "pretty-checkbox" }),
-                    /* @__PURE__ */ c.jsx("span", { className: K({ "menu-option-label": o }), children: S.label })
+                    /* @__PURE__ */ c.jsx("span", { className: V({ "menu-option-label": o }), children: S.label })
                   ]
                 }
               ) }, S.id);
@@ -6120,7 +6122,7 @@ const Eu = ({
     "ul",
     {
       ...m,
-      className: K("options-wrapper", e),
+      className: V("options-wrapper", e),
       "data-testid": `ul-${r}`,
       children: o == null ? void 0 : o.map(
         ({
@@ -6182,7 +6184,7 @@ const Xp = ({
       "button",
       {
         type: "button",
-        className: K("show-password gtm-trackable", {
+        className: V("show-password gtm-trackable", {
           "password-visible": l
         }),
         "data-gtm-event-context": n,
@@ -6276,7 +6278,7 @@ const Kn = {
         {
           ...D,
           label: S,
-          className: K("field-wrapper", n)
+          className: V("field-wrapper", n)
         }
       ),
       /* @__PURE__ */ c.jsx(L, { as: "p" })
@@ -6290,7 +6292,7 @@ const Kn = {
   });
   return /* @__PURE__ */ c.jsx(c.Fragment, { children: te.createElement(
     b ? "fieldset" : "div",
-    { className: K("field-wrapper text-medium", n) },
+    { className: V("field-wrapper text-medium", n) },
     /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
       te.createElement(
         b ? te.Fragment : "p",
@@ -6542,23 +6544,23 @@ const Ln = ({
         }
       });
     }
+  }, ie = (k) => {
+    var q;
+    if (k.preventDefault(), k.stopPropagation(), R)
+      return;
+    let P = 0;
+    if ((q = re == null ? void 0 : re.current) != null && q.id) {
+      const J = document.getElementById(re.current.id);
+      J && (P = J.getBoundingClientRect().top + window.scrollY);
+    }
+    const j = document.getElementById("header");
+    j && (P = P - j.offsetHeight - b), P < 0 && (P = 0), window.scrollTo({ top: P, behavior: "smooth" }), I();
   }, F = [
     {
       ...f,
       icon: W ? { icon: "tick", position: "left" } : !1,
-      className: "gtm-trackable",
-      onClick: (k) => {
-        var q;
-        if (k.preventDefault(), k.stopPropagation(), R)
-          return;
-        let P = 0;
-        if ((q = re == null ? void 0 : re.current) != null && q.id) {
-          const J = document.getElementById(re.current.id);
-          J && (P = J.getBoundingClientRect().top + window.scrollY);
-        }
-        const j = document.getElementById("header");
-        j && (P = P - j.offsetHeight - b), P < 0 && (P = 0), window.scrollTo({ top: P, behavior: "smooth" }), I();
-      },
+      className: V("gtm-trackable", f.className),
+      onClick: ie,
       disabled: R || W || s.disabled,
       "data-gtm-event-context": d.context,
       "data-gtm-event-type": d.event,
@@ -6567,7 +6569,7 @@ const Ln = ({
   ];
   return v && F.unshift({
     ...o,
-    className: "gtm-trackable",
+    className: V("gtm-trackable", o.className),
     "data-gtm-event-context": d.context,
     "data-gtm-event-type": d.event,
     disabled: R || W,
@@ -6579,7 +6581,7 @@ const Ln = ({
       {
         ...m,
         id: r,
-        className: K("form", n),
+        className: V("form", n),
         ref: re
       },
       /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
@@ -6625,7 +6627,7 @@ const Ln = ({
         g ? null : (R || W) && p ? p : /* @__PURE__ */ c.jsx(
           Yr,
           {
-            className: K("cta", {
+            className: V("cta", {
               center: R || W,
               submitted: W
             }),
@@ -6650,13 +6652,13 @@ const di = "passwordRules_", yd = "isMoreThanEightCharacters", Dd = "includesNum
   className: t = ""
 }) => {
   const n = ce();
-  return /* @__PURE__ */ c.jsxs("aside", { className: K("password-rules", t), children: [
+  return /* @__PURE__ */ c.jsxs("aside", { className: V("password-rules", t), children: [
     /* @__PURE__ */ c.jsx("small", { children: n.formatMessage({ id: `${di}intro` }) }),
     /* @__PURE__ */ c.jsx("ul", { children: [yd, Dd, xd].map(
       (r) => /* @__PURE__ */ c.jsxs(
         "li",
         {
-          className: K({ matches: e[r] }),
+          className: V({ matches: e[r] }),
           children: [
             /* @__PURE__ */ c.jsxs(He, { children: [
               n.formatMessage({ id: `${di}rule_label` }),
@@ -6725,14 +6727,14 @@ const Y_ = ({
         u((w) => ({ ...w, disabled: !1 }));
       }
   };
-  return /* @__PURE__ */ c.jsxs("div", { className: K("rating", a), children: [
+  return /* @__PURE__ */ c.jsxs("div", { className: V("rating", a), children: [
     /* @__PURE__ */ c.jsx("span", { className: "label", children: f[m ? "success" : "text"] }),
     /* @__PURE__ */ c.jsx("ol", { children: Array.from(new Array(t).keys()).map((v) => {
       const w = v + 1;
       return /* @__PURE__ */ c.jsx(
         "li",
         {
-          className: K({ selected: m && w <= m }),
+          className: V({ selected: m && w <= m }),
           children: /* @__PURE__ */ c.jsx(
             Se,
             {
@@ -8278,18 +8280,18 @@ var Vg = (e, t, n) => {
     }
     case "set_selection": {
       var {
-        newProperties: V
+        newProperties: K
       } = n;
-      if (V == null)
-        t = V;
+      if (K == null)
+        t = K;
       else {
         if (t == null) {
-          if (!Y.isRange(V))
-            throw new Error('Cannot apply an incomplete "set_selection" operation properties '.concat(ot.stringify(V), " when there is no current selection."));
-          t = _r({}, V);
+          if (!Y.isRange(K))
+            throw new Error('Cannot apply an incomplete "set_selection" operation properties '.concat(ot.stringify(K), " when there is no current selection."));
+          t = _r({}, K);
         }
-        for (var se in V) {
-          var pe = V[se];
+        for (var se in K) {
+          var pe = K[se];
           if (pe == null) {
             if (se === "anchor" || se === "focus")
               throw new Error('Cannot remove the "'.concat(se, '" selection property'));
@@ -13606,20 +13608,20 @@ function E1(e) {
               at: R
             });
           if (M.equals(R.anchor.path, R.focus.path)) {
-            var [Ae, je] = Y.edges(R), V = {
+            var [Ae, je] = Y.edges(R), K = {
               start: Ae.offset,
               end: je.offset,
               text: ve
             };
             if (ve && u && T === "insertCompositionText") {
-              var se = u.start + u.text.search(/\S|$/), pe = V.start + V.text.search(/\S|$/);
-              pe === se + 1 && V.end === u.start + u.text.length ? (V.start -= 1, u = null, z()) : u = !1;
+              var se = u.start + u.text.search(/\S|$/), pe = K.start + K.text.search(/\S|$/);
+              pe === se + 1 && K.end === u.start + u.text.length ? (K.start -= 1, u = null, z()) : u = !1;
             } else
-              T === "insertText" ? u === null ? u = V : u && Y.isCollapsed(R) && u.end + u.text.length === Ae.offset ? u = bi(bi({}, u), {}, {
+              T === "insertText" ? u === null ? u = K : u && Y.isCollapsed(R) && u.end + u.text.length === Ae.offset ? u = bi(bi({}, u), {}, {
                 text: u.text + ve
               }) : u = !1 : u = !1;
             if (x) {
-              b(Ae.path, V);
+              b(Ae.path, K);
               return;
             }
           }
@@ -14498,8 +14500,8 @@ var oD = (e) => /* @__PURE__ */ te.createElement(te.Fragment, null, vf(e)), uD =
           break;
         }
       }
-      var V = (P = Pr.get(f)) === null || P === void 0 ? void 0 : P.unref();
-      Pr.delete(f), V && (!f.selection || !Y.equals(f.selection, V)) && Q.select(f, V);
+      var K = (P = Pr.get(f)) === null || P === void 0 ? void 0 : P.unref();
+      Pr.delete(f), K && (!f.selection || !Y.equals(f.selection, K)) && Q.select(f, K);
     }
   }, [f, $, C, i, s, A]), T = Re((k) => {
     k == null ? ($.cancel(), A.cancel(), Si.delete(f), Sn.delete(f), w.current && fn && w.current.removeEventListener("beforeinput", _)) : fn && k.addEventListener("beforeinput", _), w.current = k;
@@ -19041,7 +19043,7 @@ function Zw(e) {
   Mf(t, (e || {}).mdastExtensions || []);
   const n = {};
   return r;
-  function r(V) {
+  function r(K) {
     let se = {
       type: "root",
       children: []
@@ -19057,24 +19059,24 @@ function Zw(e) {
       data: n
     }, ye = [];
     let _e = -1;
-    for (; ++_e < V.length; )
-      if (V[_e][1].type === "listOrdered" || V[_e][1].type === "listUnordered")
-        if (V[_e][0] === "enter")
+    for (; ++_e < K.length; )
+      if (K[_e][1].type === "listOrdered" || K[_e][1].type === "listUnordered")
+        if (K[_e][0] === "enter")
           ye.push(_e);
         else {
           const Xe = ye.pop();
-          _e = i(V, Xe, _e);
+          _e = i(K, Xe, _e);
         }
-    for (_e = -1; ++_e < V.length; ) {
-      const Xe = t[V[_e][0]];
-      Nf.call(Xe, V[_e][1].type) && Xe[V[_e][1].type].call(
+    for (_e = -1; ++_e < K.length; ) {
+      const Xe = t[K[_e][0]];
+      Nf.call(Xe, K[_e][1].type) && Xe[K[_e][1].type].call(
         Object.assign(
           {
-            sliceSerialize: V[_e][2].sliceSerialize
+            sliceSerialize: K[_e][2].sliceSerialize
           },
           pe
         ),
-        V[_e][1]
+        K[_e][1]
       );
     }
     if (pe.tokenStack.length > 0) {
@@ -19083,14 +19085,14 @@ function Zw(e) {
     }
     for (se.position = {
       start: hn(
-        V.length > 0 ? V[0][1].start : {
+        K.length > 0 ? K[0][1].start : {
           line: 1,
           column: 1,
           offset: 0
         }
       ),
       end: hn(
-        V.length > 0 ? V[V.length - 2][1].end : {
+        K.length > 0 ? K[K.length - 2][1].end : {
           line: 1,
           column: 1,
           offset: 0
@@ -19100,10 +19102,10 @@ function Zw(e) {
       se = t.transforms[_e](se) || se;
     return se;
   }
-  function i(V, se, pe) {
+  function i(K, se, pe) {
     let ye = se - 1, _e = -1, Xe = !1, et, xe, Oe, st;
     for (; ++ye <= pe; ) {
-      const it = V[ye];
+      const it = K[ye];
       switch (it[1].type) {
         case "listUnordered":
         case "listOrdered":
@@ -19128,18 +19130,18 @@ function Zw(e) {
         if (et) {
           let At = ye;
           for (xe = void 0; At--; ) {
-            const dt = V[At];
+            const dt = K[At];
             if (dt[1].type === "lineEnding" || dt[1].type === "lineEndingBlank") {
               if (dt[0] === "exit")
                 continue;
-              xe && (V[xe][1].type = "lineEndingBlank", Xe = !0), dt[1].type = "lineEnding", xe = At;
+              xe && (K[xe][1].type = "lineEndingBlank", Xe = !0), dt[1].type = "lineEnding", xe = At;
             } else if (!(dt[1].type === "linePrefix" || dt[1].type === "blockQuotePrefix" || dt[1].type === "blockQuotePrefixWhitespace" || dt[1].type === "blockQuoteMarker" || dt[1].type === "listItemIndent"))
               break;
           }
           Oe && (!xe || Oe < xe) && (et._spread = !0), et.end = Object.assign(
             {},
-            xe ? V[xe][1].start : it[1].end
-          ), V.splice(xe || ye, 0, ["exit", et, it[2]]), ye++, pe++;
+            xe ? K[xe][1].start : it[1].end
+          ), K.splice(xe || ye, 0, ["exit", et, it[2]]), ye++, pe++;
         }
         if (it[1].type === "listItemPrefix") {
           const At = {
@@ -19149,16 +19151,16 @@ function Zw(e) {
             // @ts-expect-error: we’ll add `end` in a second.
             end: void 0
           };
-          et = At, V.splice(ye, 0, ["enter", At, it[2]]), ye++, pe++, Oe = void 0, st = !0;
+          et = At, K.splice(ye, 0, ["enter", At, it[2]]), ye++, pe++, Oe = void 0, st = !0;
         }
       }
     }
-    return V[se][1]._spread = Xe, pe;
+    return K[se][1]._spread = Xe, pe;
   }
-  function a(V, se) {
+  function a(K, se) {
     return pe;
     function pe(ye) {
-      o.call(this, V(ye), ye), se && se.call(this, ye);
+      o.call(this, K(ye), ye), se && se.call(this, ye);
     }
   }
   function s() {
@@ -19167,31 +19169,31 @@ function Zw(e) {
       children: []
     });
   }
-  function o(V, se, pe) {
-    this.stack[this.stack.length - 1].children.push(V), this.stack.push(V), this.tokenStack.push([se, pe]), V.position = {
+  function o(K, se, pe) {
+    this.stack[this.stack.length - 1].children.push(K), this.stack.push(K), this.tokenStack.push([se, pe]), K.position = {
       start: hn(se.start),
       // @ts-expect-error: `end` will be patched later.
       end: void 0
     };
   }
-  function l(V) {
+  function l(K) {
     return se;
     function se(pe) {
-      V && V.call(this, pe), u.call(this, pe);
+      K && K.call(this, pe), u.call(this, pe);
     }
   }
-  function u(V, se) {
+  function u(K, se) {
     const pe = this.stack.pop(), ye = this.tokenStack.pop();
     if (ye)
-      ye[0].type !== V.type && (se ? se.call(this, V, ye[0]) : (ye[1] || gc).call(this, V, ye[0]));
+      ye[0].type !== K.type && (se ? se.call(this, K, ye[0]) : (ye[1] || gc).call(this, K, ye[0]));
     else
       throw new Error(
-        "Cannot close `" + V.type + "` (" + Nr({
-          start: V.start,
-          end: V.end
+        "Cannot close `" + K.type + "` (" + Nr({
+          start: K.start,
+          end: K.end
         }) + "): it’s not open"
       );
-    pe.position.end = hn(V.end);
+    pe.position.end = hn(K.end);
   }
   function d() {
     return VD(this.stack.pop());
@@ -19199,136 +19201,136 @@ function Zw(e) {
   function h() {
     this.data.expectingFirstListItemValue = !0;
   }
-  function m(V) {
+  function m(K) {
     if (this.data.expectingFirstListItemValue) {
       const se = this.stack[this.stack.length - 2];
-      se.start = Number.parseInt(this.sliceSerialize(V), 10), this.data.expectingFirstListItemValue = void 0;
+      se.start = Number.parseInt(this.sliceSerialize(K), 10), this.data.expectingFirstListItemValue = void 0;
     }
   }
   function p() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.lang = V;
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.lang = K;
   }
   function g() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.meta = V;
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.meta = K;
   }
   function f() {
     this.data.flowCodeInside || (this.buffer(), this.data.flowCodeInside = !0);
   }
   function b() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.value = V.replace(/^(\r?\n|\r)|(\r?\n|\r)$/g, ""), this.data.flowCodeInside = void 0;
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.value = K.replace(/^(\r?\n|\r)|(\r?\n|\r)$/g, ""), this.data.flowCodeInside = void 0;
   }
   function v() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.value = V.replace(/(\r?\n|\r)$/g, "");
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.value = K.replace(/(\r?\n|\r)$/g, "");
   }
-  function w(V) {
+  function w(K) {
     const se = this.resume(), pe = this.stack[this.stack.length - 1];
     pe.label = se, pe.identifier = ir(
-      this.sliceSerialize(V)
+      this.sliceSerialize(K)
     ).toLowerCase();
   }
   function E() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.title = V;
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.title = K;
   }
   function B() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.url = V;
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.url = K;
   }
-  function D(V) {
+  function D(K) {
     const se = this.stack[this.stack.length - 1];
     if (!se.depth) {
-      const pe = this.sliceSerialize(V).length;
+      const pe = this.sliceSerialize(K).length;
       se.depth = pe;
     }
   }
   function C() {
     this.data.setextHeadingSlurpLineEnding = !0;
   }
-  function S(V) {
+  function S(K) {
     const se = this.stack[this.stack.length - 1];
-    se.depth = this.sliceSerialize(V).codePointAt(0) === 61 ? 1 : 2;
+    se.depth = this.sliceSerialize(K).codePointAt(0) === 61 ? 1 : 2;
   }
   function L() {
     this.data.setextHeadingSlurpLineEnding = void 0;
   }
-  function O(V) {
+  function O(K) {
     const pe = this.stack[this.stack.length - 1].children;
     let ye = pe[pe.length - 1];
     (!ye || ye.type !== "text") && (ye = Ae(), ye.position = {
-      start: hn(V.start),
+      start: hn(K.start),
       // @ts-expect-error: we’ll add `end` later.
       end: void 0
     }, pe.push(ye)), this.stack.push(ye);
   }
-  function z(V) {
+  function z(K) {
     const se = this.stack.pop();
-    se.value += this.sliceSerialize(V), se.position.end = hn(V.end);
+    se.value += this.sliceSerialize(K), se.position.end = hn(K.end);
   }
-  function $(V) {
+  function $(K) {
     const se = this.stack[this.stack.length - 1];
     if (this.data.atHardBreak) {
       const pe = se.children[se.children.length - 1];
-      pe.position.end = hn(V.end), this.data.atHardBreak = void 0;
+      pe.position.end = hn(K.end), this.data.atHardBreak = void 0;
       return;
     }
-    !this.data.setextHeadingSlurpLineEnding && t.canContainEols.includes(se.type) && (O.call(this, V), z.call(this, V));
+    !this.data.setextHeadingSlurpLineEnding && t.canContainEols.includes(se.type) && (O.call(this, K), z.call(this, K));
   }
   function A() {
     this.data.atHardBreak = !0;
   }
   function _() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.value = V;
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.value = K;
   }
   function T() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.value = V;
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.value = K;
   }
   function R() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.value = V;
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.value = K;
   }
   function W() {
-    const V = this.stack[this.stack.length - 1];
+    const K = this.stack[this.stack.length - 1];
     if (this.data.inReference) {
       const se = this.data.referenceType || "shortcut";
-      V.type += "Reference", V.referenceType = se, delete V.url, delete V.title;
+      K.type += "Reference", K.referenceType = se, delete K.url, delete K.title;
     } else
-      delete V.identifier, delete V.label;
+      delete K.identifier, delete K.label;
     this.data.referenceType = void 0;
   }
   function U() {
-    const V = this.stack[this.stack.length - 1];
+    const K = this.stack[this.stack.length - 1];
     if (this.data.inReference) {
       const se = this.data.referenceType || "shortcut";
-      V.type += "Reference", V.referenceType = se, delete V.url, delete V.title;
+      K.type += "Reference", K.referenceType = se, delete K.url, delete K.title;
     } else
-      delete V.identifier, delete V.label;
+      delete K.identifier, delete K.label;
     this.data.referenceType = void 0;
   }
-  function ne(V) {
-    const se = this.sliceSerialize(V), pe = this.stack[this.stack.length - 2];
+  function ne(K) {
+    const se = this.sliceSerialize(K), pe = this.stack[this.stack.length - 2];
     pe.label = Hw(se), pe.identifier = ir(se).toLowerCase();
   }
   function re() {
-    const V = this.stack[this.stack.length - 1], se = this.resume(), pe = this.stack[this.stack.length - 1];
+    const K = this.stack[this.stack.length - 1], se = this.resume(), pe = this.stack[this.stack.length - 1];
     if (this.data.inReference = !0, pe.type === "link") {
-      const ye = V.children;
+      const ye = K.children;
       pe.children = ye;
     } else
       pe.alt = se;
   }
   function x() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.url = V;
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.url = K;
   }
   function I() {
-    const V = this.resume(), se = this.stack[this.stack.length - 1];
-    se.title = V;
+    const K = this.resume(), se = this.stack[this.stack.length - 1];
+    se.title = K;
   }
   function ie() {
     this.data.inReference = void 0;
@@ -19336,34 +19338,34 @@ function Zw(e) {
   function F() {
     this.data.referenceType = "collapsed";
   }
-  function k(V) {
+  function k(K) {
     const se = this.resume(), pe = this.stack[this.stack.length - 1];
     pe.label = se, pe.identifier = ir(
-      this.sliceSerialize(V)
+      this.sliceSerialize(K)
     ).toLowerCase(), this.data.referenceType = "full";
   }
-  function P(V) {
-    this.data.characterReferenceType = V.type;
+  function P(K) {
+    this.data.characterReferenceType = K.type;
   }
-  function j(V) {
-    const se = this.sliceSerialize(V), pe = this.data.characterReferenceType;
+  function j(K) {
+    const se = this.sliceSerialize(K), pe = this.data.characterReferenceType;
     let ye;
     pe ? (ye = _f(
       se,
       pe === "characterReferenceMarkerNumeric" ? 10 : 16
     ), this.data.characterReferenceType = void 0) : ye = Ao(se);
     const _e = this.stack.pop();
-    _e.value += ye, _e.position.end = hn(V.end);
+    _e.value += ye, _e.position.end = hn(K.end);
   }
-  function q(V) {
-    z.call(this, V);
+  function q(K) {
+    z.call(this, K);
     const se = this.stack[this.stack.length - 1];
-    se.url = this.sliceSerialize(V);
+    se.url = this.sliceSerialize(K);
   }
-  function J(V) {
-    z.call(this, V);
+  function J(K) {
+    z.call(this, K);
     const se = this.stack[this.stack.length - 1];
-    se.url = "mailto:" + this.sliceSerialize(V);
+    se.url = "mailto:" + this.sliceSerialize(K);
   }
   function H() {
     return {
@@ -19435,19 +19437,19 @@ function Zw(e) {
       children: []
     };
   }
-  function Ge(V) {
+  function Ge(K) {
     return {
       type: "list",
-      ordered: V.type === "listOrdered",
+      ordered: K.type === "listOrdered",
       start: null,
-      spread: V._spread,
+      spread: K._spread,
       children: []
     };
   }
-  function Qe(V) {
+  function Qe(K) {
     return {
       type: "listItem",
-      spread: V._spread,
+      spread: K._spread,
       checked: null,
       children: []
     };
@@ -19944,7 +19946,7 @@ const sC = ({
           yn,
           {
             element: "li",
-            className: K({ selected: f === u }),
+            className: V({ selected: f === u }),
             member: { id: p, ...g, link: !1 },
             functions: {
               onClick: (b) => {
@@ -19965,7 +19967,7 @@ const sC = ({
           yn,
           {
             element: "li",
-            className: K("fallback", {
+            className: V("fallback", {
               selected: d.length === u
             }),
             member: {
@@ -20017,7 +20019,7 @@ const sC = ({
     "li",
     {
       id: `${d}-${e}`,
-      className: K(e, { "has-divider": n }),
+      className: V(e, { "has-divider": n }),
       onMouseEnter: () => {
         g([{ type: "openTooltip", value: e }]);
       },
@@ -20044,7 +20046,7 @@ const sC = ({
           {
             ...o,
             ...f,
-            className: K(e, i, { active: t }),
+            className: V(e, i, { active: t }),
             onClick: (b) => {
               b.stopPropagation(), b.preventDefault();
             },
@@ -20341,7 +20343,7 @@ const dC = () => {
         {
           element: "fieldset",
           id: `${n}-link-editor`,
-          className: K({ "show-labels": h }),
+          className: V({ "show-labels": h }),
           meta: { shouldReset: !0, showRequiredLabels: !1 },
           functions: {
             onSuccess: async (D) => {
@@ -20356,7 +20358,7 @@ const dC = () => {
                 }
                 if (s(C), D.url && o && (!m || a && (d == null ? void 0 : d.full) === a.url)) {
                   const L = await o(S);
-                  L.url && s([{ type: "enrichedUrl", value: L }]);
+                  s([{ type: "enrichedUrl", value: L }]);
                 }
               });
             }
@@ -20570,7 +20572,7 @@ const FC = ({
     k && D([{ type: "tabbableOption", value: k || Gi[0] }]);
   }, U = async (k) => {
     const P = await f(k);
-    P.url && D([{ type: "enrichedUrl", value: P }]);
+    D([{ type: "enrichedUrl", value: P }]);
   }, ne = `rte-${e}`, re = Re(
     (k) => /* @__PURE__ */ c.jsx(xD, { ...k }),
     []
@@ -20866,7 +20868,7 @@ const G_ = ({
   return /* @__PURE__ */ c.jsxs(
     "div",
     {
-      className: K("toggle", s),
+      className: V("toggle", s),
       onClick: (d) => {
         d.preventDefault(), d.stopPropagation(), u(o === n[0].value ? n[1].value : n[0].value);
       },
@@ -20875,7 +20877,7 @@ const G_ = ({
         /* @__PURE__ */ c.jsx(
           "ul",
           {
-            className: K("toggle-options", {
+            className: V("toggle-options", {
               disabled: a,
               on: o === n[1].value
             }),
@@ -20934,7 +20936,7 @@ function AC({
     change: w = o.formatMessage({ id: `${l}cta_change` }),
     uploading: E = o.formatMessage({ id: `${l}cta_uploading` })
   } = (a == null ? void 0 : a.text) || {};
-  return /* @__PURE__ */ c.jsxs("div", { className: K("profile-image-change-figure", e), children: [
+  return /* @__PURE__ */ c.jsxs("div", { className: V("profile-image-change-figure", e), children: [
     /* @__PURE__ */ c.jsx(
       In,
       {
@@ -21018,7 +21020,8 @@ const BC = ({
       ],
       intlPath: "contactForm",
       gtm: { context: r, event: i },
-      functions: { onSuccess: t, onFailure: n }
+      functions: { onSuccess: t, onFailure: n },
+      button: { className: "new" }
     }
   );
 };
@@ -21074,7 +21077,7 @@ const TC = ({
     {
       style: { backgroundColor: a },
       onSubmit: v,
-      className: K("invite-form gtm-trackable"),
+      className: V("invite-form gtm-trackable"),
       children: [
         /* @__PURE__ */ c.jsxs("fieldset", { className: "content", children: [
           /* @__PURE__ */ c.jsx("h2", { className: "title", style: { color: r }, children: e }),
@@ -21331,7 +21334,7 @@ const jC = ({
     "form",
     {
       onSubmit: d,
-      className: K("search-form gtm-trackable", t),
+      className: V("search-form gtm-trackable", t),
       role: "search",
       "data-gtm-event-context": i,
       "data-gtm-event-type": a,
@@ -21614,7 +21617,7 @@ const jC = ({
 const MC = ({ className: e = "" }) => /* @__PURE__ */ c.jsxs(
   "div",
   {
-    className: K("success-message", e),
+    className: V("success-message", e),
     "data-testid": "success-message",
     children: [
       /* @__PURE__ */ c.jsx("p", { className: "success-title", children: /* @__PURE__ */ c.jsx(ht, { id: "signup_success_title" }) }),
@@ -21714,7 +21717,7 @@ const RC = {
   return g.successMessage && D ? /* @__PURE__ */ c.jsx(MC, { className: e }) : /* @__PURE__ */ c.jsxs(
     "fieldset",
     {
-      className: K("signup-form-fieldset", e),
+      className: V("signup-form-fieldset", e),
       "data-testid": "signup-form",
       children: [
         g.title && /* @__PURE__ */ c.jsx("p", { className: "signup-title", children: /* @__PURE__ */ c.jsx(ht, { id: "signup_title" }) }),
@@ -21791,12 +21794,13 @@ const qn = ({
   styling: n = {},
   ...r
 }) => {
-  const { background: i = "default" } = n;
+  const { background: i = "default", padding: a = "none" } = n;
   return /* @__PURE__ */ c.jsx(
     "section",
     {
-      className: K("full-width-section", t, {
-        [i]: i !== "default"
+      className: V("full-width-section", t, {
+        [i]: i !== "default",
+        [a]: a !== "none"
       }),
       ...r,
       children: e
@@ -21810,20 +21814,27 @@ const X_ = ({ text: e, buttons: t, className: n = "" }) => {
       href: i.link,
       variant: "secondary",
       size: { mobile: "medium", 1024: "large" },
-      className: "gtm-trackable",
+      className: "gtm-trackable new",
       "data-gtm-event-type": "download-click",
       "data-gtm-event-context": i.eventContext || "Download",
       target: "_blank",
       children: i.text
     });
-  }), /* @__PURE__ */ c.jsx(qn, { className: K("download-section", n), children: /* @__PURE__ */ c.jsxs("div", { className: "content-default", children: [
-    te.createElement(
-      typeof e == "string" ? "h2" : e.element,
-      { className: "text" },
-      typeof e == "string" ? e : e.text
-    ),
-    /* @__PURE__ */ c.jsx(Yr, { buttons: r })
-  ] }) });
+  }), /* @__PURE__ */ c.jsx(
+    qn,
+    {
+      className: V("download-section", n),
+      styling: { background: "dark" },
+      children: /* @__PURE__ */ c.jsxs("div", { className: "content-default", children: [
+        te.createElement(
+          typeof e == "string" ? "h2" : e.element,
+          { className: "text" },
+          typeof e == "string" ? e : e.text
+        ),
+        /* @__PURE__ */ c.jsx(Yr, { buttons: r })
+      ] })
+    }
+  );
 };
 const Zs = "editSection_";
 function Vf({ href: e, setShowModal: t }) {
@@ -21880,7 +21891,7 @@ const $C = ({
         r.props.functions.onCancel && r.props.functions.onCancel(), p();
       }
     }
-  })), /* @__PURE__ */ c.jsxs("section", { className: K("edit-section", t), children: [
+  })), /* @__PURE__ */ c.jsxs("section", { className: V("edit-section", t), children: [
     g && /* @__PURE__ */ c.jsx(
       xn,
       {
@@ -21889,7 +21900,7 @@ const $C = ({
         showDivider: !1,
         showIcon: !1,
         functions: { onClose: p },
-        className: K("edit-section-modal"),
+        className: V("edit-section-modal"),
         children: b || (n ? /* @__PURE__ */ c.jsx(
           Ln,
           {
@@ -21913,7 +21924,7 @@ const $C = ({
         ) : /* @__PURE__ */ c.jsx(c.Fragment, {}))
       }
     ),
-    /* @__PURE__ */ c.jsxs("div", { className: K("edit-section-header", { "no-title": !s }), children: [
+    /* @__PURE__ */ c.jsxs("div", { className: V("edit-section-header", { "no-title": !s }), children: [
       s && /* @__PURE__ */ c.jsx("h2", { className: "edit-section-header-title", children: a }),
       f && /* @__PURE__ */ c.jsx(
         Se,
@@ -21957,21 +21968,21 @@ const tk = ({
   return /* @__PURE__ */ c.jsxs(
     "div",
     {
-      className: K("logos", i, `align-${l}`, {
+      className: V("logos", i, `align-${l}`, {
         [u]: u !== "block",
         "wrap-logos": o
       }),
       children: [
         e && te.createElement(
           s.element,
-          { className: K("title", s.className) },
+          { className: V("title", s.className) },
           s.text
         ),
         t && /* @__PURE__ */ c.jsx("p", { children: t }),
         /* @__PURE__ */ c.jsx(
           "ul",
           {
-            className: K({
+            className: V({
               "two-col": a === 2 || a === 4,
               "three-col": a === 5 || a <= 10 && a % 3 === 0
             }),
@@ -22554,7 +22565,7 @@ const nr = "footer_", Qi = "SiteFooter", Cc = ({ group: e }) => {
   return /* @__PURE__ */ c.jsxs(
     "li",
     {
-      className: K({
+      className: V({
         [o.className]: o.className,
         "has-submenu": p,
         parent: g,
@@ -22585,7 +22596,7 @@ const nr = "footer_", Qi = "SiteFooter", Cc = ({ group: e }) => {
           return o[E].order ? /* @__PURE__ */ c.jsxs(
             "li",
             {
-              className: K({
+              className: V({
                 [o[E].className]: o[E].className
               }),
               children: [
@@ -22807,7 +22818,7 @@ const Zf = ({ showNavigation: e = !0 }) => {
       "nav",
       {
         id: "header",
-        className: K({
+        className: V({
           "logged-in": i,
           "logged-out": !i,
           visible: l
@@ -22881,7 +22892,7 @@ const Zf = ({ showNavigation: e = !0 }) => {
     /* @__PURE__ */ c.jsx(
       "div",
       {
-        className: K("overlay", {
+        className: V("overlay", {
           open: u[
             "site-navigation"
             /* SITE */
@@ -22940,14 +22951,14 @@ const zC = () => {
       "div",
       {
         id: "wrapper",
-        className: K(s, D, { "has-footer": u }),
+        className: V(s, D, { "has-footer": u }),
         children: [
           /* @__PURE__ */ c.jsx(Zf, { showNavigation: l }),
           /* @__PURE__ */ c.jsxs("main", { id: "content-wrapper", children: [
             E && /* @__PURE__ */ c.jsx(
               "div",
               {
-                className: K("additional-content prepended", {
+                className: V("additional-content prepended", {
                   "large-modal": p === "large"
                 }),
                 children: E
@@ -22956,7 +22967,7 @@ const zC = () => {
             te.createElement(d === "bold" ? rd : "div", {
               id: "content",
               children: w,
-              className: K({ "large-modal": p === "large" })
+              className: V({ "large-modal": p === "large" })
             })
           ] }),
           B && /* @__PURE__ */ c.jsx("div", { className: "additional-content appended", children: B }),
@@ -23027,7 +23038,7 @@ const ik = ({
   }), l.length < 1 ? null : /* @__PURE__ */ c.jsx(
     "ul",
     {
-      className: K("tags text-small", t, i, {
+      className: V("tags text-small", t, i, {
         "one-line": n
       }),
       children: l.map((u) => {
@@ -23061,7 +23072,7 @@ const UC = 25, HC = ({
   className: h = ""
 }) => {
   const m = ce(), p = "membersList", g = $e(Dt), [f, b] = ue(!1);
-  return e.length === 0 && !d ? null : /* @__PURE__ */ c.jsxs("div", { className: K("members-list", h), children: [
+  return e.length === 0 && !d ? null : /* @__PURE__ */ c.jsxs("div", { className: V("members-list", h), children: [
     u ? /* @__PURE__ */ c.jsxs("h1", { children: [
       m.formatMessage({ id: p }),
       /* @__PURE__ */ c.jsx("span", { className: "count", children: t })
@@ -23174,7 +23185,7 @@ const ea = ({
 }) => /* @__PURE__ */ c.jsx(
   Se,
   {
-    className: K("discussion-button", t),
+    className: V("discussion-button", t),
     variant: "tertiary",
     icon: e,
     ...n
@@ -23355,18 +23366,18 @@ const nt = "discussion_form_", ma = ({
       }, 500);
     } catch (Ae) {
       const je = Ae;
-      let V = `${nt}error`;
-      je != null && je.message.includes("entry already exists") && (V = $t(
+      let K = `${nt}error`;
+      je != null && je.message.includes("entry already exists") && (K = $t(
         p.formatMessage,
         `${nt}error_alreadyExists`,
         n.type,
         "action"
-      )), je != null && je.message.includes("429") ? V = $t(
+      )), je != null && je.message.includes("429") ? K = $t(
         p.formatMessage,
         `${nt}error_tooMany`,
         n.type,
         "action"
-      ) : je != null && je.message.includes("400") && (V = `${nt}error`), j(V), G();
+      ) : je != null && je.message.includes("400") && (K = `${nt}error`), j(K), G();
     }
   }, G = () => {
     xi = setTimeout(() => {
@@ -23466,7 +23477,7 @@ const nt = "discussion_form_", ma = ({
       Ln,
       {
         id: ee,
-        className: K("discussion-card discussion-form", {
+        className: V("discussion-card discussion-form", {
           "no-styling": w && D
         }),
         meta: {
@@ -23490,7 +23501,6 @@ const nt = "discussion_form_", ma = ({
         button: {
           variant: "primary",
           size: { mobile: "small", 600: "medium" },
-          className: "gtm-trackable",
           "data-gtm-event-context": m,
           "data-gtm-event-type": `${D ? "save" : "submit"}-${n.type}-click`,
           "data-testid": "save-button",
@@ -23507,7 +23517,6 @@ const nt = "discussion_form_", ma = ({
         secondaryActionButton: {
           variant: "secondary",
           size: { mobile: "small", 600: "medium" },
-          className: "gtm-trackable",
           "data-gtm-event-context": m,
           "data-gtm-event-type": `cancel-${n.type}-click`,
           disabled: !l.cancel && (!g || !g.id || !F.body),
@@ -23690,7 +23699,7 @@ const nE = ({
       /* @__PURE__ */ c.jsx(
         ea,
         {
-          className: K("discussion-button text-medium action-button", {
+          className: V("discussion-button text-medium action-button", {
             "show-spinner": B,
             "is-liked": E,
             disabled: !s
@@ -25748,7 +25757,7 @@ const ME = ({
       functions: {
         onClose: n
       },
-      className: K("profile-modal in-portal", a, {
+      className: V("profile-modal in-portal", a, {
         open: e
       }),
       maxWidth: 600,
@@ -25776,7 +25785,7 @@ const ME = ({
 }) => {
   const r = {
     ...n,
-    class: K("subtle", t)
+    class: V("subtle", t)
   };
   return /* @__PURE__ */ c.jsx("blockquote", { ...r, children: e });
 }, $E = 280, rh = async (e, t, n, r = () => Promise.resolve([])) => {
@@ -25836,7 +25845,7 @@ const IE = 3e3, LE = ({
     /* @__PURE__ */ c.jsx(
       pr,
       {
-        className: K({
+        className: V({
           copied: i.isCopied
         }),
         isOpen: i.isOpen,
@@ -25875,7 +25884,7 @@ const pa = ({
   basePath: E,
   parentId: B
 }) => {
-  var Ae, je, V, se, pe, ye, _e, Xe, et;
+  var Ae, je, K, se, pe, ye, _e, Xe, et;
   const D = ce(), C = $e(Dt), S = $e(Po), {
     createContent: L = async () => {
     },
@@ -26035,7 +26044,7 @@ const pa = ({
     "data-gtm-event-context": d,
     "data-gtm-event-type": `edit-${t.type}-click`
   }), f && ((Ae = J == null ? void 0 : J.current) == null || Ae.focus(), (je = J == null ? void 0 : J.current) == null || je.scrollIntoView({ behavior: "smooth" })), te.createElement(e, {
-    className: K("discussion-post", u, {
+    className: V("discussion-post", u, {
       [be]: !u || !u.includes("highlighted-text-box"),
       "has-link": l.post && !H.isEditing,
       "is-pinned": (t == null ? void 0 : t.pinned) || !1
@@ -26060,7 +26069,7 @@ const pa = ({
         "div",
         {
           id: x || t.slug,
-          className: K("discussion-card", t.type, {
+          className: V("discussion-card", t.type, {
             editing: H.isEditing,
             "has-link": l.post && !H.isEditing
           }),
@@ -26158,14 +26167,14 @@ const pa = ({
                 }
               )
             ] }),
-            w && ((V = t.categories) != null && V.length) ? /* @__PURE__ */ c.jsx("ul", { className: "categories-list", children: t.categories.map((xe) => {
+            w && ((K = t.categories) != null && K.length) ? /* @__PURE__ */ c.jsx("ul", { className: "categories-list", children: t.categories.map((xe) => {
               const Oe = w == null ? void 0 : w.find((st) => st.slug === xe);
               return Oe ? /* @__PURE__ */ c.jsx(an, { size: "small", element: "li", children: Oe.name }, Oe.slug) : null;
             }) }) : /* @__PURE__ */ c.jsx(c.Fragment, {}),
             !H.isEditing && !(s != null && s.actionBar) && /* @__PURE__ */ c.jsxs(
               "ul",
               {
-                className: K("actions text-medium", t.type),
+                className: V("actions text-medium", t.type),
                 "data-testid": `${t.type}-actions`,
                 children: [
                   !s.likes && /* @__PURE__ */ c.jsx(
@@ -26372,7 +26381,7 @@ const qE = fr(
     /* @__PURE__ */ c.jsxs(
       "button",
       {
-        className: K("discussion-form-card", n),
+        className: V("discussion-form-card", n),
         onClick: (b) => {
           b.preventDefault(), b.stopPropagation(), h((v) => ({ ...v, form: !0 }));
         },
@@ -26382,7 +26391,7 @@ const qE = fr(
           /* @__PURE__ */ c.jsx(
             sr,
             {
-              className: K("input", { placeholder: !m.showCachedText }),
+              className: V("input", { placeholder: !m.showCachedText }),
               element: "span",
               options: {
                 forceInline: !0,
@@ -26567,7 +26576,7 @@ const KE = ({
   return /* @__PURE__ */ c.jsxs(
     "div",
     {
-      className: K("thread-wrapper", {
+      className: V("thread-wrapper", {
         "empty-thread": !o
       }),
       children: [
@@ -26867,7 +26876,7 @@ const t_ = ({
           (m !== "" || p !== "") && l((b) => ({ ...b, showCachedText: !0 })), o();
         }
       },
-      className: K("discussion-form-modal", i),
+      className: V("discussion-form-modal", i),
       children: /* @__PURE__ */ c.jsx(
         ma,
         {
@@ -26946,7 +26955,7 @@ const uk = ({
       showDivider: !1,
       showIcon: s,
       functions: { onClose: o },
-      className: K("invite-modal", e, { success: !!n }),
+      className: V("invite-modal", e, { success: !!n }),
       children: /* @__PURE__ */ c.jsx(
         TC,
         {
@@ -26986,7 +26995,7 @@ const Io = ({
       functions: {
         onClose: d
       },
-      className: K("profile-modal", s, { success: !!t }),
+      className: V("profile-modal", s, { success: !!t }),
       maxWidth: 700,
       children: /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
         t && n || r ? /* @__PURE__ */ c.jsxs("div", { className: "intro", children: [
@@ -27065,13 +27074,13 @@ const i_ = ({
   content: n,
   member: r,
   className: i = ""
-}) => /* @__PURE__ */ c.jsxs("blockquote", { className: K("testimonial-block", i), children: [
+}) => /* @__PURE__ */ c.jsxs("blockquote", { className: V("testimonial-block", i), children: [
   /* @__PURE__ */ c.jsx(Yt, { className: "testimonial", children: n }),
   r ? /* @__PURE__ */ c.jsx(yn, { member: r, styling: { size: "large" } }) : /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
     e && /* @__PURE__ */ c.jsx(
       "p",
       {
-        className: K("author", {
+        className: V("author", {
           "text-small": !i.includes("new")
         }),
         children: e
@@ -27080,7 +27089,7 @@ const i_ = ({
     t && /* @__PURE__ */ c.jsx(
       "p",
       {
-        className: K("author-cite", {
+        className: V("author-cite", {
           "text-small": !i.includes("new")
         }),
         children: /* @__PURE__ */ c.jsx("cite", { children: t })
@@ -27112,7 +27121,7 @@ const dk = ({
     Gt,
     {
       variant: "subtle",
-      className: K("table-of-contents", n),
+      className: V("table-of-contents", n),
       children: [
         /* @__PURE__ */ c.jsx("h2", { children: r.formatMessage({ id: "tableOfContents" }) }),
         /* @__PURE__ */ c.jsx("nav", { children: /* @__PURE__ */ c.jsx("ul", { children: i.map(({ id: s, text: o }) => /* @__PURE__ */ c.jsx("li", { children: /* @__PURE__ */ c.jsx("a", { href: `#${s}`, children: o }) }, s)) }) })
@@ -27154,7 +27163,7 @@ const Lo = ({
       { early: u, late: h }
     );
   }
-  return n && (u = `${n} ${u}`, l = `${n} ${l}`), r && (u = `${u} ${r}`, l = `${l} ${r}`), /* @__PURE__ */ c.jsx("span", { className: K("time-to-complete", i), "aria-label": u, children: l });
+  return n && (u = `${n} ${u}`, l = `${n} ${l}`), r && (u = `${u} ${r}`, l = `${l} ${r}`), /* @__PURE__ */ c.jsx("span", { className: V("time-to-complete", i), "aria-label": u, children: l });
 };
 const fk = ({ className: e = "", image: t, ...n }) => t ? (typeof t == "string" && (t = {
   width: 1080,
@@ -27169,7 +27178,7 @@ const fk = ({ className: e = "", image: t, ...n }) => t ? (typeof t == "string"
   Gr,
   {
     ...n,
-    className: K("banner", e),
+    className: V("banner", e),
     image: { ...t, aspect: "banner" }
   }
 )) : null;
@@ -27240,7 +27249,7 @@ const a_ = [
   }), /* @__PURE__ */ c.jsx(
     qn,
     {
-      className: K("banner-section", r, i, e, {
+      className: V("banner-section", r, i, e, {
         "has-image": n,
         "image-full-width": n && u.imageFullWidth,
         "image-inline": n && !u.imageFullWidth,
@@ -27264,7 +27273,7 @@ const a_ = [
               size: { mobile: "medium", 768: "large" },
               href: o.link,
               ...o.props,
-              className: K({
+              className: V({
                 new: r === "subtle",
                 [(g = o.props) == null ? void 0 : g.className]: (f = o.props) == null ? void 0 : f.className
               }),
@@ -27295,7 +27304,7 @@ const mk = ({
   return e && (i["--image"] = `url(${e})`), /* @__PURE__ */ c.jsx(
     qn,
     {
-      className: K("custom-content-banner", t, r, {
+      className: V("custom-content-banner", t, r, {
         "has-image": e
       }),
       style: i,
@@ -27310,11 +27319,11 @@ const o_ = ({
   image: r
 }) => {
   const i = typeof n == "string" ? /* @__PURE__ */ c.jsx(sr, { children: n }) : n;
-  return /* @__PURE__ */ c.jsxs(qn, { className: K("highlight-section", t), children: [
+  return /* @__PURE__ */ c.jsxs(qn, { className: V("highlight-section", t), children: [
     r && /* @__PURE__ */ c.jsx(
       "div",
       {
-        className: K("highlight-container highlight-image", {
+        className: V("highlight-container highlight-image", {
           [`highlight-image-${e}`]: e === "right"
         }),
         children: /* @__PURE__ */ c.jsx(
@@ -27333,13 +27342,13 @@ const o_ = ({
     /* @__PURE__ */ c.jsx(
       "div",
       {
-        className: K("highlight-container highlight-content-wrapper", {
+        className: V("highlight-container highlight-content-wrapper", {
           "no-image": !r
         }),
         children: /* @__PURE__ */ c.jsx(
           "div",
           {
-            className: K("highlight-content", {
+            className: V("highlight-content", {
               "highlight-content-right": e === "left"
             }),
             children: r ? i : /* @__PURE__ */ c.jsx("div", { className: "content-default", children: i })
@@ -27355,7 +27364,7 @@ const gk = ({
   title: n,
   text: r,
   gtmContext: i
-}) => !n && !r ? null : /* @__PURE__ */ c.jsxs("aside", { className: K("marketing-block", e), children: [
+}) => !n && !r ? null : /* @__PURE__ */ c.jsxs("aside", { className: V("marketing-block", e), children: [
   n && /* @__PURE__ */ c.jsx("p", { className: "title", children: n }),
   r && /* @__PURE__ */ c.jsx("p", { children: r }),
   t && /* @__PURE__ */ c.jsx(
@@ -27547,7 +27556,7 @@ const gk = ({
     return /* @__PURE__ */ c.jsx(
       "p",
       {
-        className: K("cta-wrapper", {
+        className: V("cta-wrapper", {
           "has-member-section": e == null ? void 0 : e.members
         }),
         children: /* @__PURE__ */ c.jsx(
@@ -27669,7 +27678,7 @@ const sh = ({
   }, ($ = m == null ? void 0 : m.current) == null || $.focus(), (A = m == null ? void 0 : m.current) == null || A.scrollIntoView({ behavior: "smooth" })), /* @__PURE__ */ c.jsx(
     "li",
     {
-      className: K("card-wrapper text-medium", E, t, {
+      className: V("card-wrapper text-medium", E, t, {
         "has-link": C,
         "no-link": !C,
         "has-image": f.banner
@@ -27755,7 +27764,7 @@ const sh = ({
     }
   );
 };
-const f_ = ({ cards: e, cardTypes: t, className: n = "", ...r }) => /* @__PURE__ */ c.jsx("ul", { className: K("card-block", n), children: e.map((i, a) => {
+const f_ = ({ cards: e, cardTypes: t, className: n = "", ...r }) => /* @__PURE__ */ c.jsx("ul", { className: V("card-block", n), children: e.map((i, a) => {
   const s = i.slug ? `${i.slug}-${t[a]}` : `${t[a]}-${a}`;
   return /* @__PURE__ */ c.jsx(
     sh,
@@ -27776,7 +27785,7 @@ const f_ = ({ cards: e, cardTypes: t, className: n = "", ...r }) => /* @__PURE__
     return null;
   const { text: r, element: i = "h2", variant: a = "default", size: s = "medium", link: o } = t;
   return te.createElement(i, {
-    className: K("title", a, s, {
+    className: V("title", a, s, {
       "highlighted-title": a === "highlighted"
     }),
     children: /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
@@ -27889,7 +27898,7 @@ const p_ = ({
     "section",
     {
       ref: C,
-      className: K("carousel-wrapper", a),
+      className: V("carousel-wrapper", a),
       "data-testid": "carousel",
       children: [
         /* @__PURE__ */ c.jsx(m_, { id: e, title: i }),
@@ -27949,7 +27958,7 @@ const p_ = ({
                 children: /* @__PURE__ */ c.jsx(
                   "button",
                   {
-                    className: K("page-indicator", {
+                    className: V("page-indicator", {
                       selected: T === b
                     }),
                     onClick: (R) => {
@@ -28040,7 +28049,7 @@ const bk = ({
   u > 99 ? u = 100 : u < 1 && (u = 0);
   const { highlightPercentage: d = !1 } = s;
   return te.createElement(e, {
-    className: K("course-progression", o, {
+    className: V("course-progression", o, {
       "highlight-percentage": d,
       "has-circle-graph": a === "circle"
     }),
@@ -28079,7 +28088,7 @@ const g_ = ({
   title: r,
   className: i = ""
 }) => te.createElement(e, {
-  className: K("lesson-name", i),
+  className: V("lesson-name", i),
   "data-number": `${t}.${n}`,
   children: r
 });
@@ -28092,8 +28101,8 @@ const v_ = ({
   children: a
 }) => {
   const s = ce(), o = Xs(`lessonType_${i}`) ? s.formatMessage({ id: `lessonType_${i}` }) : Mh(i || "");
-  return /* @__PURE__ */ c.jsxs("small", { className: K("content-type", { [e]: e !== "default" }), children: [
-    /* @__PURE__ */ c.jsx("span", { className: K("type", n), children: o }),
+  return /* @__PURE__ */ c.jsxs("small", { className: V("content-type", { [e]: e !== "default" }), children: [
+    /* @__PURE__ */ c.jsx("span", { className: V("type", n), children: o }),
     " ",
     t > 0 && !r && /* @__PURE__ */ c.jsx(Lo, { time: t }),
     " ",
@@ -28158,7 +28167,7 @@ const yk = ({
             return w && (z.style = { "--image": `url(${w})` }), /* @__PURE__ */ c.jsx(
               "li",
               {
-                className: K({
+                className: V({
                   article: b === ni.ARTICLE,
                   discussion: b === ni.DISCUSSION,
                   quiz: b === ni.QUIZ,
@@ -28223,7 +28232,7 @@ const Dk = ({
         hover: "check-inside-circle_no-overlap_inverted"
       },
       onClick: t,
-      className: K("mark-complete-button center gtm-trackable", {
+      className: V("mark-complete-button center gtm-trackable", {
         completed: e
       }),
       "data-gtm-event-type": "mark-as-complete",