@apolitical/component-library 6.4.0 → 6.4.1-ac.0

package/index.mjs

@@ -75,7 +75,7 @@ var Vc = { exports: {} };
   })();
 })(Vc);
 var $h = Vc.exports;
-const H = /* @__PURE__ */ qn($h), Ih = ({
+const V = /* @__PURE__ */ qn($h), Ih = ({
   element: e = "span",
   showOnFocus: t = !0,
   children: n,
@@ -83,7 +83,7 @@ const H = /* @__PURE__ */ qn($h), Ih = ({
   ...i
 }) => ee.createElement(e, {
   ...i,
-  className: H("hidden", r, { "show-on-focus": t }),
+  className: V("hidden", r, { "show-on-focus": t }),
   children: n
 }), $e = nn(Ih), Lh = ({
   element: e = "span",
@@ -932,12 +932,12 @@ const nu = {}, yr = to(
     const R = {
       className: "content"
     };
-    return _ ? R.className = H("content", { hidden: f === "hidden" }) : R.hidden = f === "hidden", /* @__PURE__ */ c.jsx(
+    return _ ? R.className = V("content", { hidden: f === "hidden" }) : R.hidden = f === "hidden", /* @__PURE__ */ c.jsx(
       "aside",
       {
         ref: v,
         id: p,
-        className: H("tooltip text-medium", f, a, {
+        className: V("tooltip text-medium", f, a, {
           loading: r,
           "extra-padding": g,
           "has-pointer": x,
@@ -1727,7 +1727,7 @@ const Fe = ({
   typeof t == "string" && g.push(t), r && (g.push("icon"), typeof r == "object" ? (g.push(r.icon), r.position ? g.push(r.position) : g.push("left"), r.hover && g.push(`hover_${r.hover}`), r.animate && (g.push("animate"), typeof r.animate == "string" && g.push(r.animate))) : (g.push(r), !r.includes("right") && !r.includes("left") && g.push("left")));
   const x = {
     ...p,
-    className: H(e, o, g, {
+    className: V(e, o, g, {
       "no-text": !h,
       disabled: l,
       button: i,
@@ -1762,14 +1762,14 @@ const Fe = ({
     return i === "p" ? /* @__PURE__ */ c.jsx(Fe, { ...s }, o) : /* @__PURE__ */ c.jsx("li", { className: ((l = t[o]) == null ? void 0 : l.className) || "", children: /* @__PURE__ */ c.jsx(Fe, { ...s }) }, o);
   });
   return ee.createElement(i, {
-    className: H("button-wrapper", n),
+    className: V("button-wrapper", n),
     ...r,
     children: a
   });
 };
 const en = ({ className: e = "", maxWidth: t = !1 }) => {
   const n = t ? { "--max-width": `${t / 16}rem` } : {};
-  return /* @__PURE__ */ c.jsx("hr", { className: H(e, { "has-max-width": t }), style: n });
+  return /* @__PURE__ */ c.jsx("hr", { className: V(e, { "has-max-width": t }), style: n });
 }, au = {
   card: {
     range: [
@@ -1981,7 +1981,7 @@ const ok = ({ 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: H("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 ? ee.createElement(n, { children: t, className: r, ...o }) : /* @__PURE__ */ c.jsx(c.Fragment, { children: t });
 };
@@ -1992,7 +1992,7 @@ const dm = to(
       "aside",
       {
         ref: i,
-        className: H("popover", e),
+        className: V("popover", e),
         "aria-live": "polite",
         children: t
       }
@@ -2022,7 +2022,7 @@ const uk = ({
       /* @__PURE__ */ c.jsx(
         "div",
         {
-          className: H("dot", {
+          className: V("dot", {
             active: i === e,
             completed: i < e
           }),
@@ -2032,7 +2032,7 @@ const uk = ({
       /* @__PURE__ */ c.jsx(
         "div",
         {
-          className: H("line", {
+          className: V("line", {
             active: i < e
           })
         }
@@ -2062,7 +2062,7 @@ const lk = ({ elementId: e, offset: t = 20 }) => {
     }
   );
 };
-const ck = ({ items: e, className: t = "", ...n }) => /* @__PURE__ */ c.jsx("ul", { className: H("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 ck = ({ 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)) }), su = 300, ou = "ease-in-out";
@@ -2125,7 +2125,7 @@ const oo = ({
     "details",
     {
       ref: a,
-      className: H("collapsible-section", t, {
+      className: V("collapsible-section", t, {
         "should-animate": r
       }),
       children: [
@@ -2162,7 +2162,7 @@ const lu = {
   return !n && !s ? null : /* @__PURE__ */ c.jsx(
     "small",
     {
-      className: H(
+      className: V(
         "content-type-label text-small",
         e in lu ? lu[e] : e,
         r,
@@ -2188,7 +2188,7 @@ const $t = ({
   return /* @__PURE__ */ c.jsx(
     "div",
     {
-      className: H("highlighted-text-box", e, r, {
+      className: V("highlighted-text-box", e, r, {
         "has-icon": t,
         "show-highlight": s,
         [o]: o !== "default"
@@ -2221,7 +2221,7 @@ const Wn = ({
     $t,
     {
       variant: "subtle",
-      className: H("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(Xt, { options: { forceBlock: !0 }, children: t }) : t,
         i && typeof n == "object" && (u || /* @__PURE__ */ c.jsx(
@@ -2245,7 +2245,7 @@ const gm = ({
   heading: n = !1,
   children: r,
   ...i
-}) => /* @__PURE__ */ c.jsxs("div", { ...i, className: H("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(
     Xt,
@@ -2297,14 +2297,14 @@ const vm = ({
     $t,
     {
       variant: "subtle",
-      className: H("hide-show-text-box", t),
+      className: V("hide-show-text-box", t),
       children: [
         /* @__PURE__ */ c.jsx(
           "div",
           {
             ref: u,
             id: e,
-            className: H("content", p, s),
+            className: V("content", p, s),
             children: i ? /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
               /* @__PURE__ */ c.jsx(Xt, { options: { forceBlock: !0, ...a }, children: p === "closed" ? d : i }),
               p !== "closed" && o
@@ -2317,7 +2317,7 @@ const vm = ({
             variant: "tertiary",
             icon: { icon: "navigation_arrow", position: "left", animate: !0 },
             styling: { muted: !0 },
-            className: H({ "rotate-180": f }),
+            className: V({ "rotate-180": f }),
             onClick: () => {
               m(f ? "ready-to-close" : "opening");
             },
@@ -2340,7 +2340,7 @@ const dk = ({
 }) => {
   const { hasBorder: s = !1, zebraStriping: o = !1 } = i;
   return ee.createElement(e, {
-    className: H("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"
@@ -2466,7 +2466,7 @@ const dk = ({
     "@",
     n.formatMessage({ id: "member_deleted" })
   ] })) : a ? (r = { ...r, className: "button primary medium" }, /* @__PURE__ */ c.jsx("p", { className: "center", children: /* @__PURE__ */ c.jsx(Fe, { variant: "primary", size: "medium", ...r, children: i }) })) : /* @__PURE__ */ c.jsx("a", { ...r, children: i });
-}, du = ({ children: e, ...t }) => /* @__PURE__ */ c.jsx("span", { className: H({ url: t == null ? void 0 : t.href }), children: e });
+}, du = ({ children: e, ...t }) => /* @__PURE__ */ c.jsx("span", { className: V({ url: t == null ? void 0 : t.href }), children: e });
 const _m = {
   default: {
     a: Em,
@@ -2518,7 +2518,7 @@ const _m = {
   };
   let l = _m[i];
   return n.overrides && (l = { ...l, ...n.overrides }), ee.createElement(e, {
-    className: H("markdown-text", t, {
+    className: V("markdown-text", t, {
       "highlight-titles": s
     }),
     children: /* @__PURE__ */ c.jsx(Xt, { options: { ...o, ...n, overrides: l }, children: r })
@@ -2532,8 +2532,8 @@ const km = ({
   className: i = ""
 }) => {
   const a = e ? { "--max-width": `${e / 16}rem` } : {};
-  return /* @__PURE__ */ c.jsxs("section", { className: H("page-heading", i), children: [
-    /* @__PURE__ */ c.jsxs("div", { className: H("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 && ee.createElement(t.element || "h1", { className: "title" }, t.text),
       n && n.text && ee.createElement(
         n.element || "h2",
@@ -2559,7 +2559,7 @@ const cn = ({
   }, { showTooltip: u, tooltipProps: d } = Yc(!!i), h = {}, p = i ? typeof i == "string" ? `tooltip-${window.btoa(i)}` : i.id : void 0, m = i ? typeof i == "string" ? i : i.text : void 0;
   i && p && (h["aria-describedby"] = p);
   const v = ee.createElement(i ? "button" : s, {
-    className: H("pill", e, t, n, {
+    className: V("pill", e, t, n, {
       "has-icon": r
     }),
     style: l,
@@ -2586,7 +2586,7 @@ const Hr = ({
   e,
   {
     ...r,
-    className: H("status-banner text-small", n),
+    className: V("status-banner text-small", n),
     "aria-live": "assertive"
   },
   t
@@ -2706,7 +2706,7 @@ const Im = ({ slug: e }) => {
   return /* @__PURE__ */ c.jsx(
     cn,
     {
-      className: H("user-badge", a == null ? void 0 : a.toLowerCase()),
+      className: V("user-badge", a == null ? void 0 : a.toLowerCase()),
       icon: i && $m[i],
       element: "li",
       tooltip: s,
@@ -2742,7 +2742,7 @@ const zm = ({
   return /* @__PURE__ */ c.jsx(
     "span",
     {
-      className: H(`progress-bar section-${u}`, s, r, {
+      className: V(`progress-bar section-${u}`, s, r, {
         [o]: o !== "default",
         [l !== "default" ? l : ""]: l !== "default"
       }),
@@ -2775,7 +2775,7 @@ const ka = "loadingBlock_", qm = ({
   return /* @__PURE__ */ c.jsxs(
     $t,
     {
-      className: H("loading-block", n, {
+      className: V("loading-block", n, {
         "has-icon": i && t[i].icon
       }),
       variant: "subtle",
@@ -2791,7 +2791,7 @@ const Ht = ({ element: e = "div", className: t = "", ...n }) => /* @__PURE__ */
   io,
   {
     element: e,
-    className: H("loading-placeholder", t),
+    className: V("loading-placeholder", t),
     ...n
   }
 );
@@ -2845,7 +2845,7 @@ const Fs = {
   "course-navigation": ["button", "button"],
   "course-lesson-page": ["breadcrumb", "course-navigation", "text-page"],
   "course-lesson-quiz": ["text-page", "quiz-box"]
-}, sd = (e, t) => e in Fs ? /* @__PURE__ */ c.jsx("div", { className: e, children: Fs[e].map((n, r) => sd(n, r)) }, t) : /* @__PURE__ */ c.jsx(Ht, { className: e }, t), lo = ({ layout: e = "overview-page", ...t }) => /* @__PURE__ */ c.jsx("div", { className: H("loading-state", e), ...t, children: Fs[e].map((n, r) => sd(n, r)) }), od = (e) => {
+}, sd = (e, t) => e in Fs ? /* @__PURE__ */ c.jsx("div", { className: e, children: Fs[e].map((n, r) => sd(n, r)) }, t) : /* @__PURE__ */ c.jsx(Ht, { className: e }, t), lo = ({ layout: e = "overview-page", ...t }) => /* @__PURE__ */ c.jsx("div", { className: V("loading-state", e), ...t, children: Fs[e].map((n, r) => sd(n, r)) }), od = (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) : "";
 }, oi = ["#5AB6A3", "#A2D7AF", "#806056", "#3962B3"], Wm = (e) => {
@@ -2882,7 +2882,7 @@ const fu = 256, kn = ({
   return t && t !== "" && !l && (t.includes("http") || t.includes("//")) && (p = !0), /* @__PURE__ */ c.jsx(
     "figure",
     {
-      className: H("profile-picture", e, { error: l }),
+      className: V("profile-picture", e, { error: l }),
       ...o,
       children: p ? /* @__PURE__ */ c.jsx(
         "img",
@@ -2959,7 +2959,7 @@ const En = ({
   const L = Vm(_), R = r && r.createdAt ? _s(r.createdAt) : !1, A = r && r.createdAt ? Jc(r.createdAt) : "";
   return ee.createElement(e, {
     ...d,
-    className: H("member text-medium", v, f, l, {
+    className: V("member text-medium", v, f, l, {
       "has-profile-link": D
     }),
     ...m,
@@ -2987,7 +2987,7 @@ const En = ({
               /* @__PURE__ */ c.jsxs(
                 "div",
                 {
-                  className: H("name", { "new-line": g }),
+                  className: V("name", { "new-line": g }),
                   "data-testid": "member-name",
                   children: [
                     /* @__PURE__ */ c.jsx("span", { children: T }),
@@ -2995,7 +2995,7 @@ const En = ({
                     r && /* @__PURE__ */ c.jsxs(
                       "span",
                       {
-                        className: H("additional-content", {
+                        className: V("additional-content", {
                           "new-line": g
                         }),
                         children: [
@@ -3045,7 +3045,7 @@ const En = ({
               L && !g && /* @__PURE__ */ c.jsx(
                 "small",
                 {
-                  className: H({ "text-medium": v === "large" }),
+                  className: V({ "text-medium": v === "large" }),
                   "data-testid": "member-details",
                   children: b ? L : /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
                     _.role,
@@ -3114,7 +3114,7 @@ const hu = {
   const h = le();
   return !n || n.length === 0 ? null : ee.createElement(e, {
     ...d,
-    className: H("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((p, m) => {
         let v, f = "";
@@ -3136,7 +3136,7 @@ const hu = {
           v = /* @__PURE__ */ c.jsxs(
             "small",
             {
-              className: H({ "large-number": b > 99 }),
+              className: V({ "large-number": b > 99 }),
               children: [
                 "+",
                 am(b, 0)
@@ -3144,14 +3144,14 @@ const hu = {
             }
           ), f = "number-left";
         }
-        return v ? /* @__PURE__ */ c.jsx("li", { className: H("contributor", f), children: v }, m) : null;
+        return v ? /* @__PURE__ */ c.jsx("li", { className: V("contributor", f), children: v }, m) : 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]}` }) : lr(n[0].name || "", 20) : l || null })
     ] })
   });
 };
 const ld = ({ element: e = "section", children: t, className: n, ...r }) => ee.createElement(e, {
-  className: H("modal", n),
+  className: V("modal", n),
   children: typeof t == "string" ? /* @__PURE__ */ c.jsx("p", { children: t }) : t,
   ...r
 });
@@ -4844,7 +4844,7 @@ const Fn = ({
     {
       id: `${e}-overlay`,
       ref: D,
-      className: H("overlay", {
+      className: V("overlay", {
         open: f,
         "in-portal": d.includes("in-portal")
       }),
@@ -4853,7 +4853,7 @@ const Fn = ({
         ld,
         {
           id: e,
-          className: H("overlay-modal", d, {
+          className: V("overlay-modal", d, {
             "has-max-width": r
           }),
           hidden: !f,
@@ -4932,7 +4932,7 @@ const Fr = "joinCommunityButton", Dd = ({
           await x();
         }, 500), h(!d);
       },
-      className: H("join-community-button", p, {
+      className: V("join-community-button", p, {
         active: p === "joining"
       }),
       disabled: u,
@@ -4953,7 +4953,7 @@ const Oa = "communityDetails_", hk = ({
   functions: { invite: s, ...o }
 }) => {
   const l = le(), { id: u } = Me(ft), d = u, h = 5, p = i || a.length, m = a.length ? a : Array(h).fill({}), v = `/communities/${r}/members` === window.location.pathname, f = t || n, b = !n && !t;
-  return /* @__PURE__ */ c.jsxs("div", { className: H("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: [
@@ -5008,7 +5008,7 @@ const Yi = ({
 }) => /* @__PURE__ */ c.jsx(
   Fe,
   {
-    className: H("action-button", t),
+    className: V("action-button", t),
     variant: "tertiary",
     icon: e,
     ...n
@@ -5146,7 +5146,7 @@ const Jp = ({
       /* @__PURE__ */ c.jsx(
         Yi,
         {
-          className: H(
+          className: V(
             "discussion-button text-medium action-button likes-button",
             {
               "show-spinner": D,
@@ -7346,7 +7346,7 @@ const Ig = ({
       functions: {
         onClose: t
       },
-      className: H("profile-modal in-portal", i, {
+      className: V("profile-modal in-portal", i, {
         open: e
       }),
       maxWidth: 600,
@@ -7470,7 +7470,7 @@ const zg = 3e3, qg = ({
     /* @__PURE__ */ c.jsx(
       yr,
       {
-        className: H({
+        className: V({
           copied: i.isCopied
         }),
         isOpen: i.isOpen,
@@ -7514,7 +7514,7 @@ const Yn = "discussion_", Ug = ({
   }), /* @__PURE__ */ c.jsxs(
     "ul",
     {
-      className: H("actions text-medium", e),
+      className: V("actions text-medium", e),
       "data-testid": `${n}-actions`,
       children: [
         r ? /* @__PURE__ */ c.jsx(
@@ -7601,7 +7601,7 @@ const vk = ({ breadcrumbs: e, cutoff: t = 20, className: n = "" }) => {
         children: r.formatMessage({ id: "breadcrumbs_label" })
       }
     ),
-    /* @__PURE__ */ c.jsx("ul", { className: H("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: [
@@ -7629,7 +7629,7 @@ const jd = ({
   return /* @__PURE__ */ c.jsxs(
     "aside",
     {
-      className: H("enriched-url gtm-trackable", {
+      className: V("enriched-url gtm-trackable", {
         "has-image": t,
         [e]: e !== "default"
       }),
@@ -7683,7 +7683,7 @@ const Wg = ({
     let v = [];
     u.includes(p) && !a ? v = u.filter((f) => f !== p) : p === "all" ? v = ["all"] : r ? v = [...u.filter((f) => f !== "all"), p] : v = [p], d((f) => (i && typeof i == "function" && i({ current: v, previous: f }), v)), m && typeof m == "function" && m();
   };
-  return /* @__PURE__ */ c.jsx("ul", { className: H("filters", s), children: l.map(({ id: p, text: m, disabled: v = !1, callback: f = () => {
+  return /* @__PURE__ */ c.jsx("ul", { className: V("filters", s), children: l.map(({ id: p, text: m, disabled: v = !1, callback: f = () => {
   } }) => {
     let b = {};
     return v && (b = {
@@ -7692,7 +7692,7 @@ const Wg = ({
     }), /* @__PURE__ */ c.jsx("li", { children: /* @__PURE__ */ c.jsx(
       "button",
       {
-        className: H(p, {
+        className: V(p, {
           selected: u.includes(p)
         }),
         onClick: (g) => {
@@ -7736,7 +7736,7 @@ const fi = "languageSwitcher_", bk = ({
   ))
     return null;
   const v = Object.keys(r), f = h !== e;
-  return /* @__PURE__ */ c.jsxs("div", { className: H("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: `${fi}label` }) }),
       /* @__PURE__ */ c.jsx("ul", { children: v.map((b) => {
@@ -7811,7 +7811,7 @@ const Ra = Bh({ locale: "en", messages: xr }), fa = ({
         v instanceof Error ? h(v.message) : h("Unknown error");
       }
   };
-  return !d && !e && !o.endOfFeed ? null : /* @__PURE__ */ c.jsx("footer", { className: H("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(
     Fe,
     {
       variant: r,
@@ -7837,7 +7837,7 @@ const Od = ({
   "a",
   {
     href: "/home/",
-    className: H("logo", e, t, n),
+    className: V("logo", e, t, n),
     ...r,
     children: /* @__PURE__ */ c.jsx($e, { children: /* @__PURE__ */ c.jsx(ct, { id: "apolitical" }) })
   }
@@ -7858,7 +7858,7 @@ const Hg = ({
     document.removeEventListener("click", l, !0);
   })), ee.createElement(e, {
     ref: a,
-    className: H("more-menu text-medium", r),
+    className: V("more-menu text-medium", r),
     children: /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
       /* @__PURE__ */ c.jsx(
         Fe,
@@ -7930,7 +7930,7 @@ const Zg = gr(() => Promise.resolve().then(() => Zm)), Yg = [
   return /* @__PURE__ */ c.jsxs("ul", { id: "navigation-menu", className: "text-medium", children: [
     Yg.map(({ key: a, href: s }) => {
       const o = Kg(s, e), l = {};
-      return o && (l["aria-current"] = "page"), /* @__PURE__ */ c.jsx("li", { className: H(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,
@@ -8010,7 +8010,7 @@ const Jg = "shareLinks_", yk = ({
   className: s = ""
 }) => {
   const o = le(), l = Qg({ title: e, link: t, referrer: n });
-  return /* @__PURE__ */ c.jsxs("aside", { className: H("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: p = !0, onClick: m }) => {
       if (typeof p == "function" && !p())
@@ -8108,7 +8108,7 @@ const xk = ({ tabs: e, className: t = "", preventLocationChange: n }) => {
             href: x || `#${f}`,
             id: `tab-${f}`,
             "aria-controls": f,
-            className: H({ selected: _ }),
+            className: V({ selected: _ }),
             role: "tab",
             tabIndex: _ ? 0 : -1,
             "aria-selected": _,
@@ -8119,7 +8119,7 @@ const xk = ({ tabs: e, className: t = "", preventLocationChange: n }) => {
         ) }, `tab-${f}`)
       );
     }
-  ), /* @__PURE__ */ c.jsxs("div", { className: H("tabs-wrapper", t), children: [
+  ), /* @__PURE__ */ c.jsxs("div", { className: V("tabs-wrapper", t), children: [
     /* @__PURE__ */ c.jsx("ul", { className: "tabs", role: "tablist", children: p }),
     /* @__PURE__ */ c.jsx("div", { className: "tab-content", children: m })
   ] });
@@ -8140,7 +8140,7 @@ const Xg = {
   return ee.Children.count(i) === 1 && (s = ee.Children.toArray(i)[0], s.props && (s = s.props.children)), /* @__PURE__ */ c.jsx(
     "section",
     {
-      className: H("columns", `layout-${e}`, r, {
+      className: V("columns", `layout-${e}`, r, {
         "has-containers": n
       }),
       children: ee.Children.map(s, (o, l) => t !== !1 && l === t && a && a < Xg[e] ? null : o)
@@ -8162,7 +8162,7 @@ const Pd = ({
       "small",
       {
         id: e,
-        className: H("character-limit", {
+        className: V("character-limit", {
           "near-limit": l,
           "approaching-limit": u
         }),
@@ -8361,7 +8361,7 @@ const mi = "emailHelperTextBox_", nv = ({
     type: o,
     id: n,
     name: a,
-    className: H(e, t, {
+    className: V(e, t, {
       "has-scrollbar": o === "textarea" && m.current && m.current.clientHeight < m.current.scrollHeight
     }),
     value: l,
@@ -8488,7 +8488,7 @@ const Gn = {
           ..._,
           activePredictionIndex: C
         })),
-        className: H("predictions-list-item", {
+        className: V("predictions-list-item", {
           active: C === m
         }),
         children: F.description
@@ -8530,7 +8530,16 @@ const Nd = ({
         tabIndex: -1
       }
     ),
-    /* @__PURE__ */ c.jsx("span", { className: "pretty-checkbox", "data-testid": "pretty-checkbox" }),
+    /* @__PURE__ */ c.jsx(
+      "span",
+      {
+        className: V("pretty-checkbox", {
+          radio: u === "radio"
+        }),
+        "data-testid": "pretty-checkbox",
+        children: u === "radio" && /* @__PURE__ */ c.jsx("span", { className: "radio-inner" })
+      }
+    ),
     /* @__PURE__ */ c.jsx(
       "label",
       {
@@ -8574,7 +8583,7 @@ const Nd = ({
               break;
           }
       } : void 0,
-      className: H(i, "checkbox-wrapper", e, {
+      className: V(i, "checkbox-wrapper", e, {
         "is-checked": d
       }),
       ...p,
@@ -8589,7 +8598,7 @@ const av = nn(function({
   return /* @__PURE__ */ c.jsx(
     io,
     {
-      className: H("rotating-chevron", `direction-${t}`)
+      className: V("rotating-chevron", `direction-${t}`)
     }
   );
 });
@@ -8625,7 +8634,7 @@ const sv = ({
     } else
       b([]), x && x([]);
   };
-  return /* @__PURE__ */ c.jsxs("div", { className: H("dropdown-wrapper", e), children: [
+  return /* @__PURE__ */ c.jsxs("div", { className: V("dropdown-wrapper", e), children: [
     /* @__PURE__ */ c.jsxs(
       "button",
       {
@@ -8710,7 +8719,7 @@ const sv = ({
               return /* @__PURE__ */ c.jsx("li", { "data-testid": "dropdown-options", children: /* @__PURE__ */ c.jsxs(
                 "button",
                 {
-                  className: H("gtm-trackable", {
+                  className: V("gtm-trackable", {
                     selected: $,
                     "selected-single": $ && !o
                   }),
@@ -8724,7 +8733,7 @@ const sv = ({
                   "data-testid": $ ? "current-selection" : "",
                   children: [
                     o && /* @__PURE__ */ c.jsx("span", { className: "pretty-checkbox", "data-testid": "pretty-checkbox" }),
-                    /* @__PURE__ */ c.jsx("span", { className: H({ "menu-option-label": o }), children: T.label })
+                    /* @__PURE__ */ c.jsx("span", { className: V({ "menu-option-label": o }), children: T.label })
                   ]
                 }
               ) }, T.id);
@@ -8855,7 +8864,7 @@ const ov = ({
   return /* @__PURE__ */ c.jsxs(
     "fieldset",
     {
-      className: H("multiple-inputs field-wrapper", {
+      className: V("multiple-inputs field-wrapper", {
         "has-button": D,
         "has-legend": t
       }),
@@ -8947,7 +8956,7 @@ const Nu = ({
     "ul",
     {
       ...m,
-      className: H("options-wrapper", e, {
+      className: V("options-wrapper", e, {
         "with-pills filters": p
       }),
       "data-testid": `ul-${r}`,
@@ -9011,7 +9020,7 @@ const uv = ({
       "button",
       {
         type: "button",
-        className: H("show-password gtm-trackable", {
+        className: V("show-password gtm-trackable", {
           "password-visible": l
         }),
         "data-gtm-event-context": n,
@@ -9112,7 +9121,7 @@ const Qn = {
         {
           ...T,
           label: P,
-          className: H("field-wrapper", i)
+          className: V("field-wrapper", i)
         }
       ),
       /* @__PURE__ */ c.jsx(L, { as: "p" })
@@ -9125,7 +9134,7 @@ const Qn = {
   });
   return /* @__PURE__ */ c.jsx(c.Fragment, { children: ee.createElement(
     x ? "fieldset" : "div",
-    { className: H("field-wrapper text-medium", i) },
+    { className: V("field-wrapper text-medium", i) },
     /* @__PURE__ */ c.jsxs(c.Fragment, {
       /* If the `label` prop is `false`, don't render anything here; this lets us set a single label for all multiple inputs, for example */
       children: [
@@ -9399,7 +9408,7 @@ const mn = ({
     {
       ...g,
       icon: ne ? { icon: "tick", position: "left" } : !1,
-      className: H("gtm-trackable", g.className),
+      className: V("gtm-trackable", g.className),
       onClick: j,
       disabled: U || ne || s.disabled,
       "data-gtm-event-context": d.context,
@@ -9409,7 +9418,7 @@ const mn = ({
   ];
   return D && z.unshift({
     ...o,
-    className: H("gtm-trackable", o.className),
+    className: V("gtm-trackable", o.className),
     "data-gtm-event-context": d.context,
     "data-gtm-event-type": d.event,
     disabled: U || ne,
@@ -9421,7 +9430,7 @@ const mn = ({
       {
         ...p,
         id: r,
-        className: H("form", n),
+        className: V("form", n),
         ref: G
       },
       /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
@@ -9472,7 +9481,7 @@ const mn = ({
         b ? null : (U || ne) && f ? f : /* @__PURE__ */ c.jsx(
           ti,
           {
-            className: H("cta", {
+            className: V("cta", {
               center: U || ne,
               submitted: ne
             }),
@@ -9497,13 +9506,13 @@ const pi = "passwordRules_", Rd = "isMoreThanEightCharacters", $d = "includesNum
   className: t = ""
 }) => {
   const n = le();
-  return /* @__PURE__ */ c.jsxs("aside", { className: H("password-rules", t), children: [
+  return /* @__PURE__ */ c.jsxs("aside", { className: V("password-rules", t), children: [
     /* @__PURE__ */ c.jsx("small", { children: n.formatMessage({ id: `${pi}intro` }) }),
     /* @__PURE__ */ c.jsx("ul", { children: [Rd, $d, Id].map(
       (r) => /* @__PURE__ */ c.jsxs(
         "li",
         {
-          className: H({ matches: e[r] }),
+          className: V({ matches: e[r] }),
           children: [
             /* @__PURE__ */ c.jsxs($e, { children: [
               n.formatMessage({ id: `${pi}rule_label` }),
@@ -9572,14 +9581,14 @@ const Dk = ({
         u((x) => ({ ...x, disabled: !1 }));
       }
   };
-  return /* @__PURE__ */ c.jsxs("div", { className: H("rating", a), children: [
+  return /* @__PURE__ */ c.jsxs("div", { className: V("rating", a), children: [
     /* @__PURE__ */ c.jsx("span", { className: "label", children: f[p ? "success" : "text"] }),
     /* @__PURE__ */ c.jsx("ol", { children: Array.from(new Array(t).keys()).map((g) => {
       const x = g + 1;
       return /* @__PURE__ */ c.jsx(
         "li",
         {
-          className: H({ selected: p && x <= p }),
+          className: V({ selected: p && x <= p }),
           children: /* @__PURE__ */ c.jsx(
             Fe,
             {
@@ -9631,7 +9640,7 @@ const Dk = ({
     console.error(e);
   }
 }, pn = At(hv);
-var V = /* @__PURE__ */ ((e) => (e.blockquote = "block_quote", e.bold = "bold", e.code = "code", e.codeblock = "code_block", e.heading = "heading", e.hr = "thematic_break", e.image = "image", e.italic = "italic", e.li = "list_item", e.link = "link", e.mention = "mention", e.ol = "ol_list", e.paragraph = "paragraph", e.ul = "ul_list", e.strikethrough = "strikeThrough", e.span = "span", e.h3 = "heading_three", e))(V || {}), un = /* @__PURE__ */ ((e) => (e.delete = "delete_mark", e.emphasis = "emphasis_mark", e.code = "inline_code_mark", e.strong = "strong_mark", e))(un || {});
+var H = /* @__PURE__ */ ((e) => (e.blockquote = "block_quote", e.bold = "bold", e.code = "code", e.codeblock = "code_block", e.heading = "heading", e.hr = "thematic_break", e.image = "image", e.italic = "italic", e.li = "list_item", e.link = "link", e.mention = "mention", e.ol = "ol_list", e.paragraph = "paragraph", e.ul = "ul_list", e.strikethrough = "strikeThrough", e.span = "span", e.h3 = "heading_three", e))(H || {}), un = /* @__PURE__ */ ((e) => (e.delete = "delete_mark", e.emphasis = "emphasis_mark", e.code = "inline_code_mark", e.strong = "strong_mark", e))(un || {});
 const mv = ({
   attributes: e,
   children: t,
@@ -9639,13 +9648,13 @@ const mv = ({
 }) => {
   const r = n;
   switch (r.type) {
-    case V.blockquote:
+    case H.blockquote:
       return /* @__PURE__ */ c.jsx("blockquote", { className: "subtle", ...e, children: t });
-    case V.link:
+    case H.link:
       return /* @__PURE__ */ c.jsx("a", { ...e, children: t });
-    case V.li:
+    case H.li:
       return /* @__PURE__ */ c.jsx("li", { ...e, children: t });
-    case V.mention:
+    case H.mention:
       const i = r;
       return i != null && i.name && i.name === Li ? /* @__PURE__ */ c.jsxs("span", { ...e, className: "mention deleted-user", children: [
         "@",
@@ -9656,20 +9665,20 @@ const mv = ({
         (i == null ? void 0 : i.name) || "",
         t
       ] });
-    case V.ol:
+    case H.ol:
       return /* @__PURE__ */ c.jsx("ol", { ...e, children: t });
-    case V.ul:
+    case H.ul:
       return /* @__PURE__ */ c.jsx("ul", { ...e, children: t });
-    case V.span:
+    case H.span:
       return /* @__PURE__ */ c.jsx("span", { ...e, children: t });
-    case V.paragraph:
+    case H.paragraph:
       return /* @__PURE__ */ c.jsx("p", { ...e, children: t });
     default:
       return /* @__PURE__ */ c.jsx("span", { ...e, children: t });
   }
 }, pv = ({ attributes: e, children: t, leaf: n }) => {
   const r = n;
-  return r[V.bold] && (t = /* @__PURE__ */ c.jsx("strong", { children: t })), r[V.italic] && (t = /* @__PURE__ */ c.jsx("em", { children: t })), r[V.strikethrough] && (t = /* @__PURE__ */ c.jsx("s", { children: t })), r[V.h3] && (t = /* @__PURE__ */ c.jsx("h3", { children: t })), /* @__PURE__ */ c.jsx("span", { ...e, children: t });
+  return r[H.bold] && (t = /* @__PURE__ */ c.jsx("strong", { children: t })), r[H.italic] && (t = /* @__PURE__ */ c.jsx("em", { children: t })), r[H.strikethrough] && (t = /* @__PURE__ */ c.jsx("s", { children: t })), r[H.h3] && (t = /* @__PURE__ */ c.jsx("h3", { children: t })), /* @__PURE__ */ c.jsx("span", { ...e, children: t });
 };
 var gv = yv, Ld = "֑-߿יִ-﷽ﹰ-ﻼ", zd = "A-Za-zÀ-ÖØ-öø-ʸ̀-֐ࠀ-῿‎Ⰰ-﬜︀-﹯﻽-￿", vv = new RegExp("^[^" + zd + "]*[" + Ld + "]"), bv = new RegExp("^[^" + Ld + "]*[" + zd + "]");
 function yv(e) {
@@ -17427,7 +17436,7 @@ const Vs = "MENTION: ", jf = {
     }
     const [i] = y.nodes(e, {
       at: r,
-      match: (a) => a.type === V.link
+      match: (a) => a.type === H.link
     });
     if (i) {
       const a = i[0], s = so(a.link), o = a.children[0], l = (o == null ? void 0 : o.text) || "";
@@ -17438,15 +17447,15 @@ const Vs = "MENTION: ", jf = {
 };
 var bt = /* @__PURE__ */ ((e) => (e.paragraph = "paragraph", e.heading = "heading", e.list = "list", e.listItem = "listItem", e.link = "link", e.mention = "mention", e.image = "image", e.blockquote = "blockquote", e.code = "code", e.html = "html", e.emphasis = "emphasis", e.strong = "strong", e.delete = "delete", e.inlineCode = "inlineCode", e.thematicBreak = "thematicBreak", e.text = "text", e.h3 = "heading_three", e))(bt || {});
 const ir = {
-  [V.paragraph]: V.paragraph,
-  [V.blockquote]: V.blockquote,
-  [V.codeblock]: V.codeblock,
-  [V.link]: V.link,
-  [V.ul]: V.ul,
-  [V.ol]: V.ol,
-  [V.li]: V.li,
-  [V.mention]: V.mention,
-  [V.heading]: {
+  [H.paragraph]: H.paragraph,
+  [H.blockquote]: H.blockquote,
+  [H.codeblock]: H.codeblock,
+  [H.link]: H.link,
+  [H.ul]: H.ul,
+  [H.ol]: H.ol,
+  [H.li]: H.li,
+  [H.mention]: H.mention,
+  [H.heading]: {
     1: "heading_one",
     2: "heading_two",
     3: "heading_three",
@@ -17454,13 +17463,13 @@ const ir = {
     5: "heading_five",
     6: "heading_six"
   },
-  [un.emphasis]: V.italic,
-  [un.strong]: V.bold,
-  [un.delete]: V.strikethrough,
-  [un.code]: V.code,
-  [V.hr]: V.hr,
-  [V.image]: V.image,
-  [V.h3]: V.h3
+  [un.emphasis]: H.italic,
+  [un.strong]: H.bold,
+  [un.delete]: H.strikethrough,
+  [un.code]: H.code,
+  [H.hr]: H.hr,
+  [H.image]: H.image,
+  [H.h3]: H.h3
 };
 function nc(e) {
   if (e)
@@ -21625,9 +21634,9 @@ function Zf(e, t) {
   const n = {
     ...ir,
     ...t == null ? void 0 : t.nodeTypes,
-    [V.heading]: {
-      ...ir[V.heading],
-      ...(l = t == null ? void 0 : t.nodeTypes) == null ? void 0 : l[V.heading]
+    [H.heading]: {
+      ...ir[H.heading],
+      ...(l = t == null ? void 0 : t.nodeTypes) == null ? void 0 : l[H.heading]
     }
   }, r = (t == null ? void 0 : t.linkDestinationKey) ?? "link", i = (t == null ? void 0 : t.imageSourceKey) ?? "link", a = (t == null ? void 0 : t.imageCaptionKey) ?? "caption";
   let s = [{ text: "" }];
@@ -21643,49 +21652,49 @@ function Zf(e, t) {
   )), e.type) {
     case bt.heading:
       return {
-        type: n[V.heading][e.depth || 1],
+        type: n[H.heading][e.depth || 1],
         // we need to flag the type of heading in the children to ensure it renders as the correct heading type
         children: s.map((h) => ({
           ...h,
-          [n[V.heading][e.depth || 1]]: !0
+          [n[H.heading][e.depth || 1]]: !0
         }))
       };
     case bt.list:
       return {
-        type: e.ordered ? n[V.ol] : n[V.ul],
+        type: e.ordered ? n[H.ol] : n[H.ul],
         children: s
       };
     case bt.listItem:
-      return { type: n[V.li], children: s };
+      return { type: n[H.li], children: s };
     case bt.paragraph:
-      return { type: n[V.paragraph], children: s };
+      return { type: n[H.paragraph], children: s };
     case bt.link:
       return {
-        type: n[V.link],
+        type: n[H.link],
         [r]: e.url,
         children: s
       };
     case bt.image:
       return {
-        type: n[V.image],
+        type: n[H.image],
         children: [{ text: "" }],
         [i]: e.url,
         [a]: e.alt
       };
     case bt.blockquote:
-      return { type: n[V.blockquote], children: s };
+      return { type: n[H.blockquote], children: s };
     case bt.code:
       return {
-        type: n[V.codeblock],
+        type: n[H.codeblock],
         language: e.lang,
         children: [{ text: e.value }]
       };
     case bt.html:
       return (u = e.value) != null && u.includes("<br>") ? {
         break: !0,
-        type: n[V.paragraph],
+        type: n[H.paragraph],
         children: [{ text: ((d = e.value) == null ? void 0 : d.replace(/<br>/g, "")) || "" }]
-      } : { type: V.paragraph, children: [{ text: e.value || "" }] };
+      } : { type: H.paragraph, children: [{ text: e.value || "" }] };
     case bt.emphasis:
       return {
         [n[un.emphasis]]: !0,
@@ -21712,7 +21721,7 @@ function Zf(e, t) {
       };
     case bt.thematicBreak:
       return {
-        type: n[V.hr],
+        type: n[H.hr],
         children: [{ text: "" }]
       };
     case "text":
@@ -21736,20 +21745,20 @@ const TC = function(t) {
   xD().use(BC).use(TC).process(e).then((n) => {
     const r = Ut(n.result), i = (s) => {
       const o = s;
-      [V.li, V.blockquote].includes(o.type) && o.children.map((l, u) => {
+      [H.li, H.blockquote].includes(o.type) && o.children.map((l, u) => {
         const d = l;
-        d.type === V.paragraph && o.children.splice(u, 1, ...d.children);
+        d.type === H.paragraph && o.children.splice(u, 1, ...d.children);
       }), "children" in s && s.children && s.children.forEach((l) => i(l));
     };
     r.forEach(i);
     const a = (s) => {
       for (let o = 0; o < s.length; o++) {
         const l = s[o], u = l;
-        if (u.type === V.link) {
+        if (u.type === H.link) {
           const d = u.children && u.children[0];
           if (d && "text" in d && d.text.includes(Vs)) {
             const h = u, p = d.text.replace(Vs, ""), m = "link" in h && h.link ? h.link : "";
-            h.type = V.mention, h.id = m, h.name = p, h.children = [{ text: "" }], s[o + 1] || s.splice(o + 1, 0, { text: " " }), o++;
+            h.type = H.mention, h.id = m, h.name = p, h.children = [{ text: "" }], s[o + 1] || s.splice(o + 1, 0, { text: " " }), o++;
           }
         }
         "children" in l && l.children && a(l.children);
@@ -21762,7 +21771,7 @@ const TC = function(t) {
           u && u.map((d) => {
             const h = d.replace(/~~/g, ""), p = o.text.indexOf(d), m = o.text.substring(0, p), v = o.text.substring(p + d.length), f = [
               { text: m },
-              { text: h, [V.strikethrough]: !0 },
+              { text: h, [H.strikethrough]: !0 },
               { text: v }
             ];
             s.children.splice(l, 1, ...f);
@@ -21798,24 +21807,24 @@ const TC = function(t) {
 }, PC = (e) => {
   for (const [t] of oe.descendants(e)) {
     const n = t;
-    if (n.type === V.link)
+    if (n.type === H.link)
       return n.link;
   }
   return null;
 }, Fc = {
-  "mod+b": V.bold,
-  "mod+i": V.italic,
-  "mod+shift+x": V.strikethrough,
-  "mod+k": V.link,
-  "mod+shift+7": V.ol,
-  "mod+shift+8": V.ul,
-  "mod+shift+9": V.blockquote
+  "mod+b": H.bold,
+  "mod+i": H.italic,
+  "mod+shift+x": H.strikethrough,
+  "mod+k": H.link,
+  "mod+shift+7": H.ol,
+  "mod+shift+8": H.ul,
+  "mod+shift+9": H.blockquote
 }, NC = (e, t, n, r) => {
   for (const i in Fc)
     if (B1(i, e)) {
       e.stopPropagation(), e.preventDefault();
       const a = Fc[i];
-      if (a === V.link) {
+      if (a === H.link) {
         n([{ type: "showLinkEditor", value: !0 }]);
         return;
       }
@@ -21833,7 +21842,7 @@ const TC = function(t) {
   const o = s.userId || "", l = (d = s.user) == null ? void 0 : d.name;
   n([{ type: "mentionPopover", value: { ...t, show: !1 } }]);
   const u = {
-    type: V.mention,
+    type: H.mention,
     id: o,
     name: l,
     children: [{ text: "" }]
@@ -21890,9 +21899,9 @@ const TC = function(t) {
   }
   return t;
 }, Xn = (e) => typeof e.text == "string", RC = [
-  V.hr,
-  V.image,
-  V.mention
+  H.hr,
+  H.image,
+  H.mention
 ], Ac = "<br>";
 function Qf(e, t = { nodeTypes: ir }) {
   const {
@@ -21905,12 +21914,12 @@ function Qf(e, t = { nodeTypes: ir }) {
     ...ir,
     ...n,
     heading: {
-      ...ir[V.heading],
-      ...n[V.heading]
+      ...ir[H.heading],
+      ...n[H.heading]
     }
-  }, l = [o[V.ul], o[V.ol]];
+  }, l = [o[H.ul], o[H.ol]];
   let u = a;
-  if (!Xn(e) && s !== V.mention && (u = e.children.map((d) => {
+  if (!Xn(e) && s !== H.mention && (u = e.children.map((d) => {
     const h = Xn(d) ? !1 : l.includes(d.type || ""), p = l.includes(e.type || "");
     let m = !1;
     return !Xn(e) && Array.isArray(e.children) && (m = e.children.some(
@@ -21930,65 +21939,65 @@ function Qf(e, t = { nodeTypes: ir }) {
         !d.break,
         // track depth of nested lists so we can add proper spacing
         listDepth: l.includes(d.type || "") ? i + 1 : i,
-        inBlockquote: s === o[V.blockquote] || e.parentType === o[V.blockquote]
+        inBlockquote: s === o[H.blockquote] || e.parentType === o[H.blockquote]
       }
     );
   }).join("")), !r && (a === "" || a === `
-`) && e.parentType === o[V.paragraph] && s !== o[V.mention] && (s = o[V.paragraph], u = Ac), !(u === "" && !RC.find((d) => o[d] === s)))
-    switch (u !== Ac && Xn(e) && (e[V.strikethrough] && e[V.bold] && e[V.italic] ? u = er(u, "~~***") : e[V.bold] && e[V.italic] ? u = er(u, "***") : (e[V.bold] && (u = er(u, "**")), e[V.italic] && (u = er(u, "_")), e[V.strikethrough] && (u = er(u, "~~")), e[V.code] && (u = er(u, "`")))), s) {
-      case o[V.heading][1]:
+`) && e.parentType === o[H.paragraph] && s !== o[H.mention] && (s = o[H.paragraph], u = Ac), !(u === "" && !RC.find((d) => o[d] === s)))
+    switch (u !== Ac && Xn(e) && (e[H.strikethrough] && e[H.bold] && e[H.italic] ? u = er(u, "~~***") : e[H.bold] && e[H.italic] ? u = er(u, "***") : (e[H.bold] && (u = er(u, "**")), e[H.italic] && (u = er(u, "_")), e[H.strikethrough] && (u = er(u, "~~")), e[H.code] && (u = er(u, "`")))), s) {
+      case o[H.heading][1]:
         return `# ${u}
 `;
-      case o[V.heading][2]:
+      case o[H.heading][2]:
         return `## ${u}
 `;
-      case o[V.heading][3]:
+      case o[H.heading][3]:
         return `### ${u}
 `;
-      case o[V.heading][4]:
+      case o[H.heading][4]:
         return `#### ${u}
 `;
-      case o[V.heading][5]:
+      case o[H.heading][5]:
         return `##### ${u}
 `;
-      case o[V.heading][6]:
+      case o[H.heading][6]:
         return `###### ${u}
 `;
-      case o[V.blockquote]:
+      case o[H.blockquote]:
         return `> ${u}
 
 `;
-      case o[V.codeblock]:
+      case o[H.codeblock]:
         return `\`\`\`${e.language || ""}
 ${u}
 \`\`\`
 `;
-      case o[V.link]:
+      case o[H.link]:
         return `[${u}](${e.link || ""})`;
       case o.image:
         return `![${e.caption}](${e.link || ""})`;
-      case o[V.mention]:
+      case o[H.mention]:
         const { id: d } = e;
         return e ? `@{{${d}}}` : u;
-      case o[V.ul]:
-      case o[V.ol]:
+      case o[H.ul]:
+      case o[H.ol]:
         return `
 ${u}
 
 `;
-      case o[V.li]:
-        const h = e && e.parentType === o[V.ol], p = e.children.length === 1 && Xn(e.children[0]);
+      case o[H.li]:
+        const h = e && e.parentType === o[H.ol], p = e.children.length === 1 && Xn(e.children[0]);
         let m = "";
         for (let v = 0; i > v; v++)
           h ? m += "   " : m += "  ";
         return t.inBlockquote && (m = "> " + m), `
 ${m}${h ? "1." : "-"} ${u}${p ? `
 ` : ""}`;
-      case o[V.paragraph]:
+      case o[H.paragraph]:
         return `${u}
 
 `;
-      case o[V.hr]:
+      case o[H.hr]:
         return `---
 `;
       default:
@@ -22024,7 +22033,7 @@ const IC = ({
           En,
           {
             element: "li",
-            className: H({ selected: f === u }),
+            className: V({ selected: f === u }),
             member: { id: m, ...v, link: !1 },
             functions: {
               onClick: (b) => {
@@ -22045,7 +22054,7 @@ const IC = ({
           En,
           {
             element: "li",
-            className: H("fallback", {
+            className: V("fallback", {
               selected: d.length === u
             }),
             member: {
@@ -22115,7 +22124,7 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
     "li",
     {
       id: `${d}-${e}`,
-      className: H(e, { "has-divider": n }),
+      className: V(e, { "has-divider": n }),
       onMouseEnter: () => {
         v([{ type: "openTooltip", value: e }]);
       },
@@ -22142,7 +22151,7 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
           {
             ...o,
             ...f,
-            className: H(e, i, { active: t }),
+            className: V(e, i, { active: t }),
             onClick: (b) => {
               b.stopPropagation(), b.preventDefault();
             },
@@ -22196,7 +22205,7 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
       ]
     }
   );
-}, Tc = [V.ol, V.ul], Xf = (e, t) => {
+}, Tc = [H.ol, H.ul], Xf = (e, t) => {
   const { selection: n } = e;
   if (!n)
     return !1;
@@ -22212,7 +22221,7 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
   return !!r;
 }, LC = (e) => {
   const [t] = y.nodes(e, {
-    match: (n) => n.type === V.blockquote
+    match: (n) => n.type === H.blockquote
   });
   return !!t;
 }, eh = (e, t, n) => {
@@ -22226,9 +22235,9 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
       split: !0
     });
     const o = {
-      type: i ? V.paragraph : a ? V.li : t
+      type: i ? H.paragraph : a ? H.li : t
     };
-    if (Q.setNodes(e, o), t === V.h3) {
+    if (Q.setNodes(e, o), t === H.h3) {
       const l = {
         type: t
       };
@@ -22245,7 +22254,7 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
             at: d,
             match: (p) => {
               const m = p;
-              return !y.isEditor(p) && he.isElement(p) && m.type === V.li;
+              return !y.isEditor(p) && he.isElement(p) && m.type === H.li;
             }
           })
         ).forEach(([p, m]) => {
@@ -22254,7 +22263,7 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
       } else {
         if (r) {
           const u = {
-            type: V.blockquote,
+            type: H.blockquote,
             children: []
           };
           Q.wrapNodes(e, u);
@@ -22283,7 +22292,7 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
   const [t] = y.nodes(e, {
     match: (n) => {
       const r = n;
-      return !y.isEditor(n) && he.isElement(n) && r.type === V.link;
+      return !y.isEditor(n) && he.isElement(n) && r.type === H.link;
     }
   });
   return !!t;
@@ -22295,7 +22304,7 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
     const [s] = y.nodes(e, {
       match: (o) => {
         const l = o;
-        return !y.isEditor(o) && he.isElement(o) && l.type === V.link;
+        return !y.isEditor(o) && he.isElement(o) && l.type === H.link;
       }
     });
     if (s) {
@@ -22310,7 +22319,7 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
   try {
     Ur(e) && th(e);
     const { selection: i } = e, a = i && K.isCollapsed(i), s = {
-      type: V.link,
+      type: H.link,
       link: t,
       children: a ? [{ text: t }] : []
     };
@@ -22323,7 +22332,7 @@ const Jf = ({ formID: e, label: t, showLabel: n }) => {
   Q.unwrapNodes(e, {
     match: (t) => {
       const n = t;
-      return !y.isEditor(t) && he.isElement(t) && n.type === V.link;
+      return !y.isEditor(t) && he.isElement(t) && n.type === H.link;
     }
   });
 };
@@ -22445,7 +22454,7 @@ const UC = () => {
         {
           element: "fieldset",
           id: `${n}-link-editor`,
-          className: H({ "show-labels": h }),
+          className: V({ "show-labels": h }),
           meta: { shouldReset: !0, showRequiredLabels: !1 },
           functions: {
             onSuccess: async (C) => {
@@ -22491,7 +22500,7 @@ const UC = () => {
       "aria-pressed": null
     }
   );
-}, VC = (e) => [V.bold, V.italic, V.strikethrough].includes(
+}, VC = (e) => [H.bold, H.italic, H.strikethrough].includes(
   e
 ), nh = (e, t) => {
   const n = y.marks(e);
@@ -22517,13 +22526,13 @@ const UC = () => {
     }
   );
 }, aa = [
-  V.bold,
-  V.italic,
-  V.strikethrough
+  H.bold,
+  H.italic,
+  H.strikethrough
 ], KC = [
-  V.ol,
-  V.ul,
-  V.blockquote
+  H.ol,
+  H.ul,
+  H.blockquote
 ];
 const ZC = ({
   styling: e = { showHeadingOption: !1 },
@@ -22534,7 +22543,7 @@ const ZC = ({
     /* @__PURE__ */ c.jsxs("fieldset", { id: `toolbar-${r}`, className: "toolbar", ...t, children: [
       /* @__PURE__ */ c.jsx($e, { element: "legend", showOnFocus: !1, children: n.formatMessage({ id: "richTextEditor_toolbar" }) }),
       /* @__PURE__ */ c.jsxs("ul", { children: [
-        (e == null ? void 0 : e.showHeadingOption) && /* @__PURE__ */ c.jsx(Sc, { format: V.h3, hasDivider: !0 }, V.h3),
+        (e == null ? void 0 : e.showHeadingOption) && /* @__PURE__ */ c.jsx(Sc, { format: H.h3, hasDivider: !0 }, H.h3),
         aa.map((i, a) => /* @__PURE__ */ c.jsx(HC, { format: i, hasDivider: a === aa.length - 1 }, i)),
         /* @__PURE__ */ c.jsx(WC, {}),
         KC.map((i, a) => /* @__PURE__ */ c.jsx(Sc, { format: i, hasDivider: a === 1 }, i))
@@ -23320,7 +23329,7 @@ const EE = (e, t) => {
   const { apply: n } = e;
   try {
     e.apply = (r) => {
-      if (r.type === "remove_node" && "type" in r.node && r.node.type === V.link) {
+      if (r.type === "remove_node" && "type" in r.node && r.node.type === H.link) {
         const i = r.node;
         if (i.link) {
           const a = new CustomEvent("linkRemoved", {
@@ -23352,7 +23361,7 @@ const TE = /* @__PURE__ */ qn(_E), SE = (e, t, n) => {
   try {
     e.isInline = (a) => {
       const s = a;
-      return [V.link].includes(s.type) || i(a);
+      return [H.link].includes(s.type) || i(a);
     }, e.insertText = (a) => {
       a && TE(a) ? zo(e, a, t) : r(a);
     };
@@ -23364,7 +23373,7 @@ const TE = /* @__PURE__ */ qn(_E), SE = (e, t, n) => {
 }, jE = (e, t) => {
   const { isInline: n, isVoid: r, markableVoid: i } = e;
   try {
-    e.isInline = (a) => a.type === V.mention ? !0 : n(a), e.isVoid = (a) => a.type === V.mention ? !0 : r(a), e.markableVoid = (a) => a.type === V.mention || i(a);
+    e.isInline = (a) => a.type === H.mention ? !0 : n(a), e.isVoid = (a) => a.type === H.mention ? !0 : r(a), e.markableVoid = (a) => a.type === H.mention || i(a);
   } catch (a) {
     const s = a.message;
     t(`Error in withMentions: ${s}`);
@@ -23374,7 +23383,7 @@ const TE = /* @__PURE__ */ qn(_E), SE = (e, t, n) => {
   const { normalizeNode: n } = e;
   try {
     e.normalizeNode = ([r, i]) => {
-      if (r.type === V.link && oe.string(r).trim() === "") {
+      if (r.type === H.link && oe.string(r).trim() === "") {
         Q.removeNodes(e, { at: i });
         return;
       }
@@ -23415,7 +23424,7 @@ const dh = ({
     }
   } = a || {}, F = [
     {
-      type: V.paragraph,
+      type: H.paragraph,
       children: [{ text: "" }]
     }
   ];
@@ -23630,8 +23639,8 @@ const dh = ({
                         const Y = K.isCollapsed(I), [Z, te] = y.node(E, I, { depth: 1 });
                         let ce = Z, J = ce.type;
                         const ve = ce.children[0];
-                        if (ve && (ve == null ? void 0 : ve[V.h3]) === !0 && (B.stopPropagation(), B.preventDefault(), Q.insertNodes(E, F)), ve && [V.ol, V.ul].includes(ve.type) && (ce = ve, J = ve.type), ce && he.isElement(ce) && J !== V.paragraph) {
-                          if (J === V.blockquote && !B.shiftKey) {
+                        if (ve && (ve == null ? void 0 : ve[H.h3]) === !0 && (B.stopPropagation(), B.preventDefault(), Q.insertNodes(E, F)), ve && [H.ol, H.ul].includes(ve.type) && (ce = ve, J = ve.type), ce && he.isElement(ce) && J !== H.paragraph) {
+                          if (J === H.blockquote && !B.shiftKey) {
                             B.stopPropagation(), B.preventDefault(), Q.insertNodes(E, F);
                             return;
                           }
@@ -23639,8 +23648,8 @@ const dh = ({
                             const [me, Be] = y.parent(E, I, {
                               edge: "end"
                             }), Oe = me.type;
-                            if ([V.ul, V.ol].includes(J))
-                              if (B.stopPropagation(), B.preventDefault(), Oe === V.li && k === "Enter") {
+                            if ([H.ul, H.ol].includes(J))
+                              if (B.stopPropagation(), B.preventDefault(), Oe === H.li && k === "Enter") {
                                 me.children.length === 1 && "text" in me.children[0] && me.children[0].text === "" && Q.removeNodes(E, { at: Be }), Q.insertNodes(E, F, {
                                   at: M.next(te)
                                 }), Q.select(
@@ -23649,8 +23658,8 @@ const dh = ({
                                 );
                                 return;
                               } else {
-                                const [Qe, ze] = jC(E, V.li), We = {
-                                  type: V.li,
+                                const [Qe, ze] = jC(E, H.li), We = {
+                                  type: H.li,
                                   children: [{ text: "" }]
                                 };
                                 Q.insertNodes(E, We, {
@@ -23773,7 +23782,7 @@ const wk = ({
   return /* @__PURE__ */ c.jsxs(
     "div",
     {
-      className: H("toggle", s),
+      className: V("toggle", s),
       onClick: (d) => {
         d.preventDefault(), d.stopPropagation(), u(o === n[0].value ? n[1].value : n[0].value);
       },
@@ -23782,7 +23791,7 @@ const wk = ({
         /* @__PURE__ */ c.jsx(
           "ul",
           {
-            className: H("toggle-options", {
+            className: V("toggle-options", {
               disabled: a,
               on: o === n[1].value
             }),
@@ -23841,7 +23850,7 @@ function PE({
     change: x = o.formatMessage({ id: `${l}cta_change` }),
     uploading: D = o.formatMessage({ id: `${l}cta_uploading` })
   } = (a == null ? void 0 : a.text) || {};
-  return /* @__PURE__ */ c.jsxs("div", { className: H("profile-image-change-figure", e), children: [
+  return /* @__PURE__ */ c.jsxs("div", { className: V("profile-image-change-figure", e), children: [
     /* @__PURE__ */ c.jsx(
       kn,
       {
@@ -24447,7 +24456,7 @@ const LE = ({
     "form",
     {
       onSubmit: d,
-      className: H("search-form gtm-trackable", t),
+      className: V("search-form gtm-trackable", t),
       role: "search",
       "data-gtm-event-context": i,
       "data-gtm-event-type": a,
@@ -24730,7 +24739,7 @@ const LE = ({
 const WE = ({ className: e = "" }) => /* @__PURE__ */ c.jsxs(
   "div",
   {
-    className: H("success-message", e),
+    className: V("success-message", e),
     "data-testid": "success-message",
     children: [
       /* @__PURE__ */ c.jsx("p", { className: "success-title", children: /* @__PURE__ */ c.jsx(ct, { id: "signup_success_title" }) }),
@@ -24830,7 +24839,7 @@ const VE = {
   return v.successMessage && C ? /* @__PURE__ */ c.jsx(WE, { className: e }) : /* @__PURE__ */ c.jsxs(
     "fieldset",
     {
-      className: H("signup-form-fieldset", e),
+      className: V("signup-form-fieldset", e),
       "data-testid": "signup-form",
       children: [
         v.title && /* @__PURE__ */ c.jsx("p", { className: "signup-title", children: /* @__PURE__ */ c.jsx(ct, { id: "signup_title" }) }),
@@ -24911,7 +24920,7 @@ const Hn = ({
   return /* @__PURE__ */ c.jsx(
     "section",
     {
-      className: H("full-width-section", t, {
+      className: V("full-width-section", t, {
         [i]: i !== "default",
         [a]: a !== "none"
       }),
@@ -24936,7 +24945,7 @@ const kk = ({ text: e, buttons: t, className: n = "" }) => {
   }), /* @__PURE__ */ c.jsx(
     Hn,
     {
-      className: H("download-section", n),
+      className: V("download-section", n),
       styling: { background: "dark" },
       children: /* @__PURE__ */ c.jsxs("div", { className: "content-default", children: [
         ee.createElement(
@@ -25004,7 +25013,7 @@ const HE = ({
         r.props.functions.onCancel && r.props.functions.onCancel(), m();
       }
     }
-  })), /* @__PURE__ */ c.jsxs("section", { className: H("edit-section", t), children: [
+  })), /* @__PURE__ */ c.jsxs("section", { className: V("edit-section", t), children: [
     v && /* @__PURE__ */ c.jsx(
       Fn,
       {
@@ -25013,7 +25022,7 @@ const HE = ({
         showDivider: !1,
         showIcon: !1,
         functions: { onClose: m },
-        className: H("edit-section-modal"),
+        className: V("edit-section-modal"),
         children: b || (n ? /* @__PURE__ */ c.jsx(
           mn,
           {
@@ -25037,7 +25046,7 @@ const HE = ({
         ) : /* @__PURE__ */ c.jsx(c.Fragment, {}))
       }
     ),
-    /* @__PURE__ */ c.jsxs("div", { className: H("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(
         Fe,
@@ -25081,21 +25090,21 @@ const Ak = ({
   return /* @__PURE__ */ c.jsxs(
     "div",
     {
-      className: H("logos", i, `align-${l}`, {
+      className: V("logos", i, `align-${l}`, {
         [u]: u !== "block",
         "wrap-logos": o
       }),
       children: [
         e && ee.createElement(
           s.element,
-          { className: H("title", s.className) },
+          { className: V("title", s.className) },
           s.text
         ),
         t && /* @__PURE__ */ c.jsx("p", { children: t }),
         /* @__PURE__ */ c.jsx(
           "ul",
           {
-            className: H({
+            className: V({
               "two-col": a === 2 || a === 4,
               "three-col": a === 5 || a <= 10 && a % 3 === 0
             }),
@@ -25681,7 +25690,7 @@ const sr = "footer_", oa = "SiteFooter", Rc = ({ group: e }) => {
   return /* @__PURE__ */ c.jsxs(
     "li",
     {
-      className: H({
+      className: V({
         [o.className]: o.className,
         "has-submenu": m,
         parent: v,
@@ -25712,7 +25721,7 @@ const sr = "footer_", oa = "SiteFooter", Rc = ({ group: e }) => {
           return o[D].order ? /* @__PURE__ */ c.jsxs(
             "li",
             {
-              className: H({
+              className: V({
                 [o[D].className]: o[D].className
               }),
               children: [
@@ -25934,7 +25943,7 @@ const mh = ({ showNavigation: e = !0 }) => {
       "nav",
       {
         id: "header",
-        className: H({
+        className: V({
           "logged-in": i,
           "logged-out": !i,
           visible: l
@@ -26008,7 +26017,7 @@ const mh = ({ showNavigation: e = !0 }) => {
     /* @__PURE__ */ c.jsx(
       "div",
       {
-        className: H("overlay", {
+        className: V("overlay", {
           open: u[
             "site-navigation"
             /* SITE */
@@ -26067,14 +26076,14 @@ const YE = () => {
       "div",
       {
         id: "wrapper",
-        className: H(s, C, { "has-footer": u }),
+        className: V(s, C, { "has-footer": u }),
         children: [
           /* @__PURE__ */ c.jsx(mh, { showNavigation: l }),
           /* @__PURE__ */ c.jsxs("main", { id: "content-wrapper", children: [
             D && /* @__PURE__ */ c.jsx(
               "div",
               {
-                className: H("additional-content prepended", {
+                className: V("additional-content prepended", {
                   "large-modal": m === "large"
                 }),
                 children: D
@@ -26083,7 +26092,7 @@ const YE = () => {
             ee.createElement(d === "bold" ? ld : "div", {
               id: "content",
               children: x,
-              className: H({ "large-modal": m === "large" })
+              className: V({ "large-modal": m === "large" })
             })
           ] }),
           F && /* @__PURE__ */ c.jsx("div", { className: "additional-content appended", children: F }),
@@ -26154,7 +26163,7 @@ const Sk = ({
   }), l.length < 1 ? null : /* @__PURE__ */ c.jsx(
     "ul",
     {
-      className: H("tags text-small", t, i, {
+      className: V("tags text-small", t, i, {
         "one-line": n
       }),
       children: l.map((u) => {
@@ -26188,7 +26197,7 @@ const JE = 25, XE = ({
   className: h = ""
 }) => {
   const p = le(), m = "membersList", v = Me(ft), [f, b] = ue(!1);
-  return e.length === 0 && !d ? null : /* @__PURE__ */ c.jsxs("div", { className: H("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: [
       p.formatMessage({ id: m }),
       /* @__PURE__ */ c.jsx("span", { className: "count", children: t })
@@ -26574,7 +26583,7 @@ const rt = "discussion_form_", xa = ({
       mn,
       {
         id: ce,
-        className: H("discussion-card discussion-form", {
+        className: V("discussion-card discussion-form", {
           "no-styling": x && C
         }),
         meta: {
@@ -26669,7 +26678,7 @@ const rt = "discussion_form_", xa = ({
 }) => {
   const r = {
     ...n,
-    class: H("subtle", t)
+    class: V("subtle", t)
   };
   return /* @__PURE__ */ c.jsx("blockquote", { ...r, children: e });
 };
@@ -26851,7 +26860,7 @@ const Da = ({
     "data-gtm-event-context": d,
     "data-gtm-event-type": `edit-${t.type}-click`
   }), m && ((We = z == null ? void 0 : z.current) == null || We.focus(), (tt = z == null ? void 0 : z.current) == null || tt.scrollIntoView({ behavior: "smooth" })), ee.createElement(e, {
-    className: H("discussion-post", u, {
+    className: V("discussion-post", u, {
       [te]: !u || !u.includes("highlighted-text-box"),
       "has-link": l.post && !B.isEditing,
       "is-pinned": (t == null ? void 0 : t.pinned) || !1
@@ -26876,7 +26885,7 @@ const Da = ({
         "div",
         {
           id: U || t.slug,
-          className: H("discussion-card", t.type, {
+          className: V("discussion-card", t.type, {
             editing: B.isEditing,
             "has-link": l.post && !B.isEditing
           }),
@@ -27158,7 +27167,7 @@ const o_ = gr(
     /* @__PURE__ */ c.jsxs(
       "button",
       {
-        className: H("discussion-form-card", n),
+        className: V("discussion-form-card", n),
         onClick: (b) => {
           b.preventDefault(), b.stopPropagation(), h((g) => ({ ...g, form: !0 }));
         },
@@ -27168,7 +27177,7 @@ const o_ = gr(
           /* @__PURE__ */ c.jsx(
             cr,
             {
-              className: H("input", { placeholder: !p.showCachedText }),
+              className: V("input", { placeholder: !p.showCachedText }),
               element: "span",
               options: {
                 forceInline: !0,
@@ -27353,7 +27362,7 @@ const f_ = ({
   return /* @__PURE__ */ c.jsxs(
     "div",
     {
-      className: H("thread-wrapper", {
+      className: V("thread-wrapper", {
         "empty-thread": !o
       }),
       children: [
@@ -27676,7 +27685,7 @@ const D_ = ({
           (p !== "" || m !== "") && l((b) => ({ ...b, showCachedText: !0 })), o();
         }
       },
-      className: H("discussion-form-modal", i),
+      className: V("discussion-form-modal", i),
       children: /* @__PURE__ */ c.jsx(
         xa,
         {
@@ -27756,7 +27765,7 @@ const Ok = ({
       showDivider: !1,
       showIcon: o,
       functions: { onClose: l },
-      className: H("invite-modal", e, { success: !!n }),
+      className: V("invite-modal", e, { success: !!n }),
       children: /* @__PURE__ */ c.jsx(
         RE,
         {
@@ -27797,7 +27806,7 @@ const C_ = ({
       functions: {
         onClose: d
       },
-      className: H("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: [
@@ -27876,13 +27885,13 @@ const __ = ({
   content: n,
   member: r,
   className: i = ""
-}) => /* @__PURE__ */ c.jsxs("blockquote", { className: H("testimonial-block", i), children: [
+}) => /* @__PURE__ */ c.jsxs("blockquote", { className: V("testimonial-block", i), children: [
   /* @__PURE__ */ c.jsx(Xt, { className: "testimonial", children: n }),
   r ? /* @__PURE__ */ c.jsx(En, { member: r, styling: { size: "large" } }) : /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
     e && /* @__PURE__ */ c.jsx(
       "p",
       {
-        className: H("author", {
+        className: V("author", {
           "text-small": !i.includes("new")
         }),
         children: e
@@ -27891,7 +27900,7 @@ const __ = ({
     t && /* @__PURE__ */ c.jsx(
       "p",
       {
-        className: H("author-cite", {
+        className: V("author-cite", {
           "text-small": !i.includes("new")
         }),
         children: /* @__PURE__ */ c.jsx("cite", { children: t })
@@ -27923,7 +27932,7 @@ const Mk = ({
     $t,
     {
       variant: "subtle",
-      className: H("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)) }) })
@@ -27965,7 +27974,7 @@ const Ko = ({
       { early: u, late: h }
     );
   }
-  return n && (u = `${n} ${u}`, l = `${n} ${l}`), r && (u = `${u} ${r}`, l = `${l} ${r}`), /* @__PURE__ */ c.jsx("span", { className: H("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 Rk = ({ className: e = "", image: t, ...n }) => t ? (typeof t == "string" && (t = {
   width: 1080,
@@ -27980,7 +27989,7 @@ const Rk = ({ className: e = "", image: t, ...n }) => t ? (typeof t == "string"
   Dr,
   {
     ...n,
-    className: H("banner", e),
+    className: V("banner", e),
     image: { ...t, aspect: "banner" }
   }
 )) : null;
@@ -28051,7 +28060,7 @@ const k_ = [
   }), /* @__PURE__ */ c.jsx(
     Hn,
     {
-      className: H("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,
@@ -28075,7 +28084,7 @@ const k_ = [
               size: { mobile: "medium", 768: "large" },
               href: o.link,
               ...o.props,
-              className: H({
+              className: V({
                 new: r === "subtle",
                 [(v = o.props) == null ? void 0 : v.className]: (f = o.props) == null ? void 0 : f.className
               }),
@@ -28106,7 +28115,7 @@ const Ik = ({
   return e && (i["--image"] = `url(${e})`), /* @__PURE__ */ c.jsx(
     Hn,
     {
-      className: H("custom-content-banner", t, r, {
+      className: V("custom-content-banner", t, r, {
         "has-image": e
       }),
       style: i,
@@ -28121,11 +28130,11 @@ const A_ = ({
   image: r
 }) => {
   const i = typeof n == "string" ? /* @__PURE__ */ c.jsx(cr, { children: n }) : n;
-  return /* @__PURE__ */ c.jsxs(Hn, { className: H("highlight-section", t), children: [
+  return /* @__PURE__ */ c.jsxs(Hn, { className: V("highlight-section", t), children: [
     r && /* @__PURE__ */ c.jsx(
       "div",
       {
-        className: H("highlight-container highlight-image", {
+        className: V("highlight-container highlight-image", {
           [`highlight-image-${e}`]: e === "right"
         }),
         children: /* @__PURE__ */ c.jsx(
@@ -28144,13 +28153,13 @@ const A_ = ({
     /* @__PURE__ */ c.jsx(
       "div",
       {
-        className: H("highlight-container highlight-content-wrapper", {
+        className: V("highlight-container highlight-content-wrapper", {
           "no-image": !r
         }),
         children: /* @__PURE__ */ c.jsx(
           "div",
           {
-            className: H("highlight-content", {
+            className: V("highlight-content", {
               "highlight-content-right": e === "left"
             }),
             children: r ? i : /* @__PURE__ */ c.jsx("div", { className: "content-default", children: i })
@@ -28166,7 +28175,7 @@ const zk = ({
   title: n,
   text: r,
   gtmContext: i
-}) => !n && !r ? null : /* @__PURE__ */ c.jsxs("aside", { className: H("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(
@@ -28358,7 +28367,7 @@ const zk = ({
     return /* @__PURE__ */ c.jsx(
       "p",
       {
-        className: H("cta-wrapper", {
+        className: V("cta-wrapper", {
           "has-member-section": e == null ? void 0 : e.members
         }),
         children: /* @__PURE__ */ c.jsx(
@@ -28480,7 +28489,7 @@ const vh = ({
   }, (k = v == null ? void 0 : v.current) == null || k.focus(), (O = v == null ? void 0 : v.current) == null || O.scrollIntoView({ behavior: "smooth" })), /* @__PURE__ */ c.jsx(
     "li",
     {
-      className: H("card-wrapper text-medium", C, t, {
+      className: V("card-wrapper text-medium", C, t, {
         "has-link": $,
         "no-link": !$,
         "has-image": g.banner
@@ -28566,7 +28575,7 @@ const vh = ({
     }
   );
 };
-const O_ = ({ cards: e, cardTypes: t, className: n = "", ...r }) => /* @__PURE__ */ c.jsx("ul", { className: H("card-block", n), children: e.map((i, a) => {
+const O_ = ({ 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(
     vh,
@@ -28590,7 +28599,7 @@ const O_ = ({ 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 ee.createElement(i, {
-    className: H("title", a, s, {
+    className: V("title", a, s, {
       "highlighted-title": a === "highlighted"
     }),
     children: /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
@@ -28703,7 +28712,7 @@ const M_ = ({
     "section",
     {
       ref: _,
-      className: H("carousel-wrapper", a),
+      className: V("carousel-wrapper", a),
       "data-testid": "carousel",
       children: [
         /* @__PURE__ */ c.jsx(N_, { id: e, title: i }),
@@ -28770,7 +28779,7 @@ const M_ = ({
                 children: /* @__PURE__ */ c.jsx(
                   "button",
                   {
-                    className: H("page-indicator", {
+                    className: V("page-indicator", {
                       selected: O === b
                     }),
                     onClick: (S) => {
@@ -28854,7 +28863,7 @@ const Uk = ({
     "data-gtm-event-context": `${r}-NarrowCard`,
     "data-gtm-event-type": `${r}-click`
   }), ee.createElement(e, {
-    className: H("narrow-card", t, {
+    className: V("narrow-card", t, {
       "has-link": l,
       "gtm-trackable": l,
       "no-link": !l
@@ -28864,7 +28873,7 @@ const Uk = ({
       /* @__PURE__ */ c.jsx(
         "div",
         {
-          className: H("img", {
+          className: V("img", {
             private: o,
             "no-image": !i
           }),
@@ -28894,7 +28903,7 @@ const Wk = ({
   u > 99 ? u = 100 : u < 1 && (u = 0);
   const { highlightPercentage: d = !1 } = s;
   return ee.createElement(e, {
-    className: H("course-progression", o, {
+    className: V("course-progression", o, {
       "highlight-percentage": d,
       "has-circle-graph": a === "circle"
     }),
@@ -28933,7 +28942,7 @@ const R_ = ({
   title: r,
   className: i = ""
 }) => ee.createElement(e, {
-  className: H("lesson-name", i),
+  className: V("lesson-name", i),
   "data-number": `${t}.${n}`,
   children: r
 });
@@ -28946,8 +28955,8 @@ const $_ = ({
   children: a
 }) => {
   const s = le(), o = ao(`lessonType_${i}`) ? s.formatMessage({ id: `lessonType_${i}` }) : Kh(i || "");
-  return /* @__PURE__ */ c.jsxs("small", { className: H("content-type", { [e]: e !== "default" }), children: [
-    /* @__PURE__ */ c.jsx("span", { className: H("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(Ko, { time: t }),
     " ",
@@ -29012,7 +29021,7 @@ const Vk = ({
             return x && (L.style = { "--image": `url(${x})` }), /* @__PURE__ */ c.jsx(
               "li",
               {
-                className: H({
+                className: V({
                   article: b === si.ARTICLE,
                   discussion: b === si.DISCUSSION,
                   quiz: b === si.QUIZ,
@@ -29077,7 +29086,7 @@ const Hk = ({
         hover: "check-inside-circle_no-overlap_inverted"
       },
       onClick: t,
-      className: H("mark-complete-button center gtm-trackable", {
+      className: V("mark-complete-button center gtm-trackable", {
         completed: e
       }),
       "data-gtm-event-type": "mark-as-complete",
@@ -29212,7 +29221,7 @@ const z_ = ({
     g.stopPropagation(), m && (l == null || l.createVote(t), d(!0));
   }, f = {
     htmlFor: t.id,
-    className: H({
+    className: V({
       "can-vote": m
     }),
     tabIndex: o && m ? 0 : -1,
@@ -29248,7 +29257,7 @@ const z_ = ({
     {
       "data-testid": "poll-option",
       style: p,
-      className: H("poll-option text-small", {
+      className: V("poll-option text-small", {
         selected: t.hasUserVoted
       }),
       children: [
@@ -29400,7 +29409,7 @@ export {
   jm as FlagsProvider,
   hh as Footer,
   mn as Form,
-  V as Formatting,
+  H as Formatting,
   zt as Fragment,
   Hn as FullWidthSection,
   ru as GET_STREAM_USER_PREFIX,