@apolitical/component-library 3.5.10-ac.9 → 3.5.11

package/index.mjs

@@ -74,7 +74,7 @@ var da = { exports: {} };
   })();
 })(da);
 var Fs = da.exports;
-const S = /* @__PURE__ */ la(Fs), Os = ({
+const E = /* @__PURE__ */ la(Fs), Os = ({
   element: t = "span",
   showOnFocus: e = !0,
   children: n,
@@ -82,7 +82,7 @@ const S = /* @__PURE__ */ la(Fs), Os = ({
   ...s
 }) => Y.createElement(t, {
   ...s,
-  className: S("hidden", r, { "show-on-focus": e }),
+  className: E("hidden", r, { "show-on-focus": e }),
   children: n
 }), be = Ae(Os), As = ({
   element: t = "span",
@@ -142,10 +142,10 @@ function Is() {
       {
         for (var M = arguments.length, I = new Array(M > 1 ? M - 1 : 0), ne = 1; ne < M; ne++)
           I[ne - 1] = arguments[ne];
-        E("error", h, I);
+        S("error", h, I);
       }
     }
-    function E(h, M, I) {
+    function S(h, M, I) {
       {
         var ne = y.ReactDebugCurrentFrame, le = ne.getStackAddendum();
         le !== "" && (M += "%s", I = I.concat([le]));
@@ -743,7 +743,7 @@ function Bs(t, e, n) {
       f.current = !1;
     };
   }, []);
-  var E = wt(function() {
+  var S = wt(function() {
     var w = function($) {
       var C = c.current, k = d.current;
       return c.current = d.current = null, i.current = $, l.current = u.current.apply(k, C);
@@ -784,7 +784,7 @@ function Bs(t, e, n) {
       return o.current ? R(Date.now()) : l.current;
     }, B;
   }, [g, _, e, x, v, p, m, y]);
-  return E;
+  return S;
 }
 function fa(t, e, n) {
   var r = n === void 0 ? {} : n, s = r.leading, i = r.trailing;
@@ -1461,7 +1461,7 @@ Thank you for helping to protect the Apolitical community from abusive content.`
   typeof e == "string" && g.push(e), 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"))), n.muted && g.push("muted"), n.fullWidth && g.push("full-width");
   const v = {
     ...f,
-    className: S(t, c, g, {
+    className: E(t, c, g, {
       "no-text": !u,
       disabled: d,
       button: s
@@ -1479,14 +1479,14 @@ Thank you for helping to protect the Apolitical community from abusive content.`
 }, kt = ({ buttons: t, className: e = "", ...n }) => {
   const r = t.length > 1 ? "ul" : "p", s = t.map((i, o) => r === "p" ? /* @__PURE__ */ a.jsx(se, { ...i }, o) : /* @__PURE__ */ a.jsx("li", { children: /* @__PURE__ */ a.jsx(se, { ...i }) }, o));
   return Y.createElement(r, {
-    className: S("button-wrapper", e),
+    className: E("button-wrapper", e),
     ...n,
     children: s
   });
 };
 const Oe = ({ className: t = "", maxWidth: e = !1 }) => {
   const n = e ? { "--max-width": `${e / 16}rem` } : {};
-  return /* @__PURE__ */ a.jsx("hr", { className: S(t, { "has-max-width": e }), style: n });
+  return /* @__PURE__ */ a.jsx("hr", { className: E(t, { "has-max-width": e }), style: n });
 }, kr = {
   card: {
     range: [
@@ -1665,7 +1665,7 @@ const Nl = ({ image: t, className: e, testId: n }) => /* @__PURE__ */ a.jsx(
 }) => {
   if (t) {
     const d = { ...c };
-    return s && (d.onClick = s), i && (d["data-gtm-event-context"] = i), o && (d["data-gtm-event-type"] = o), /* @__PURE__ */ a.jsx("a", { href: t, className: S("gtm-trackable", r), ...d, children: e });
+    return s && (d.onClick = s), i && (d["data-gtm-event-context"] = i), o && (d["data-gtm-event-type"] = o), /* @__PURE__ */ a.jsx("a", { href: t, className: E("gtm-trackable", r), ...d, children: e });
   }
   return n ? Y.createElement(n, { children: e, className: r, ...c }) : /* @__PURE__ */ a.jsx(a.Fragment, { children: e });
 };
@@ -1683,7 +1683,7 @@ const Pl = ({ currentStep: t = 1, steps: e = 1 }) => /* @__PURE__ */ a.jsxs(a.Fr
       /* @__PURE__ */ a.jsx(
         "div",
         {
-          className: S("dot", {
+          className: E("dot", {
             active: s === t,
             completed: s < t
           }),
@@ -1693,7 +1693,7 @@ const Pl = ({ currentStep: t = 1, steps: e = 1 }) => /* @__PURE__ */ a.jsxs(a.Fr
       /* @__PURE__ */ a.jsx(
         "div",
         {
-          className: S("line", {
+          className: E("line", {
             active: s < t
           })
         }
@@ -1782,7 +1782,7 @@ const Jn = ({
     "details",
     {
       ref: i,
-      className: S("collapsible-section", e, {
+      className: E("collapsible-section", e, {
         "should-animate": r
       }),
       children: [
@@ -1819,7 +1819,7 @@ const Cr = {
   return !n && !o ? null : /* @__PURE__ */ a.jsx(
     "small",
     {
-      className: S(
+      className: E(
         "content-type-label text-small",
         t in Cr ? Cr[t] : t,
         r,
@@ -1845,7 +1845,7 @@ const Fe = ({
   return /* @__PURE__ */ a.jsx(
     "div",
     {
-      className: S("highlighted-text-box", t, r, {
+      className: E("highlighted-text-box", t, r, {
         "has-icon": e,
         "show-highlight": o,
         [c]: c !== "default"
@@ -1878,7 +1878,7 @@ const He = ({
     Fe,
     {
       variant: "subtle",
-      className: S("empty-state-box", t, r),
+      className: E("empty-state-box", t, r),
       children: /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
         e && typeof e == "string" ? /* @__PURE__ */ a.jsx(Le, { options: { forceBlock: !0 }, children: e }) : e,
         s && typeof n == "object" && (l || /* @__PURE__ */ a.jsx(
@@ -1901,7 +1901,7 @@ const ci = ({
   className: e = "",
   heading: n = !1,
   children: r
-}) => /* @__PURE__ */ a.jsxs("div", { className: S("helper-text-box text-small", t, e), children: [
+}) => /* @__PURE__ */ a.jsxs("div", { className: E("helper-text-box text-small", t, e), children: [
   n && /* @__PURE__ */ a.jsx("p", { className: "title", children: n }),
   typeof r == "string" ? /* @__PURE__ */ a.jsx(
     Le,
@@ -1951,9 +1951,9 @@ const Rl = ({
     Fe,
     {
       variant: "subtle",
-      className: S("hide-show-text-box", t),
+      className: E("hide-show-text-box", t),
       children: [
-        /* @__PURE__ */ a.jsxs("div", { ref: o, className: S("content", l), children: [
+        /* @__PURE__ */ a.jsxs("div", { ref: o, className: E("content", l), children: [
           /* @__PURE__ */ a.jsx(Le, { options: { forceBlock: !0 }, children: l === "closed" ? c : r }),
           l !== "closed" && s
         ] }),
@@ -1963,7 +1963,7 @@ const Rl = ({
             variant: "tertiary",
             icon: { icon: "navigation_arrow", position: "left", animate: !0 },
             styling: { muted: !0 },
-            className: S({ "rotate-180": m }),
+            className: E({ "rotate-180": m }),
             onClick: () => {
               u(m ? "ready-to-close" : "opening");
             },
@@ -1984,7 +1984,7 @@ const Fl = ({
 }) => {
   const { hasBorder: o = !1, zebraStriping: c = !1 } = s;
   return Y.createElement(t, {
-    className: S("icon-bulleted-list text-medium", n, i, {
+    className: E("icon-bulleted-list text-medium", n, i, {
       "has-border": o,
       "has-zebra-stripes": c,
       [e]: t !== "dl"
@@ -2142,7 +2142,7 @@ const vi = {
   return /* @__PURE__ */ a.jsx(
     "div",
     {
-      className: S("markdown-text", t, {
+      className: E("markdown-text", t, {
         "highlight-titles": i
       }),
       children: /* @__PURE__ */ a.jsx(Le, { options: { ...o, ...e }, children: n })
@@ -2157,8 +2157,8 @@ const bi = ({
   className: s = ""
 }) => {
   const i = t ? { "--max-width": `${t / 16}rem` } : {};
-  return /* @__PURE__ */ a.jsxs("section", { className: S("page-heading", s), children: [
-    /* @__PURE__ */ a.jsxs("div", { className: S("content", { "has-max-width": t }), style: i, children: [
+  return /* @__PURE__ */ a.jsxs("section", { className: E("page-heading", s), children: [
+    /* @__PURE__ */ a.jsxs("div", { className: E("content", { "has-max-width": t }), style: i, children: [
       e && e.text && Y.createElement(e.element || "h1", { className: "title" }, e.text),
       n && n.text && Y.createElement(
         n.element || "h2",
@@ -2183,7 +2183,7 @@ const ht = ({
   return /* @__PURE__ */ a.jsx(
     "span",
     {
-      className: S("pill", t, e, n, {
+      className: E("pill", t, e, n, {
         "has-icon": r
       }),
       style: o,
@@ -2201,7 +2201,7 @@ const Wt = ({
   t,
   {
     ...r,
-    className: S("status-banner text-small", n),
+    className: E("status-banner text-small", n),
     "aria-live": "assertive"
   },
   e
@@ -2235,7 +2235,7 @@ const Al = ({
     Fe,
     {
       variant: "subtle",
-      className: S("table-of-contents", n),
+      className: E("table-of-contents", n),
       children: [
         /* @__PURE__ */ a.jsx("h2", { children: r.formatMessage({ id: "tableOfContents" }) }),
         /* @__PURE__ */ a.jsx("nav", { children: /* @__PURE__ */ a.jsx("ul", { children: s.map(({ id: o, text: c }) => /* @__PURE__ */ a.jsx("li", { children: /* @__PURE__ */ a.jsx("a", { href: `#${o}`, children: c }) }, o)) }) })
@@ -2277,7 +2277,7 @@ const Xn = ({
       { early: l, late: f }
     );
   }
-  return n && (l = `${n} ${l}`, d = `${n} ${d}`), r && (l = `${l} ${r}`, d = `${d} ${r}`), /* @__PURE__ */ a.jsx("span", { className: S("time-to-complete", s), "aria-label": l, children: d });
+  return n && (l = `${n} ${l}`, d = `${n} ${d}`), r && (l = `${l} ${r}`, d = `${d} ${r}`), /* @__PURE__ */ a.jsx("span", { className: E("time-to-complete", s), "aria-label": l, children: d });
 };
 let ct = !1;
 const _i = ({ isOpen: t = !1, isLoading: e = !1, children: n }) => {
@@ -2302,7 +2302,7 @@ const _i = ({ isOpen: t = !1, isLoading: e = !1, children: n }) => {
     "aside",
     {
       ref: s,
-      className: S("tooltip text-medium", i, { loading: e }),
+      className: E("tooltip text-medium", i, { loading: e }),
       hidden: i === "hidden",
       children: e ? /* @__PURE__ */ a.jsx("p", { children: r.formatMessage({ id: "tooltip_loading" }) }) : typeof n == "string" ? /* @__PURE__ */ a.jsx("p", { children: n }) : n
     }
@@ -2321,7 +2321,7 @@ const Dl = ({ className: t = "", image: e, ...n }) => e ? (typeof e == "string"
   Tt,
   {
     ...n,
-    className: S("banner", t),
+    className: E("banner", t),
     image: { ...e, aspect: "banner" }
   }
 )) : null;
@@ -2335,7 +2335,7 @@ const Ve = ({
   return /* @__PURE__ */ a.jsx(
     "section",
     {
-      className: S("full-width-section", e, {
+      className: E("full-width-section", e, {
         [s]: s !== "default"
       }),
       ...r,
@@ -2356,7 +2356,7 @@ const Il = ({ text: t, buttons: e, className: n = "" }) => {
       target: "_blank",
       children: s.text
     });
-  }), /* @__PURE__ */ a.jsx(Ve, { className: S("download-section", n), children: /* @__PURE__ */ a.jsxs("div", { className: "content-default", children: [
+  }), /* @__PURE__ */ a.jsx(Ve, { className: E("download-section", n), children: /* @__PURE__ */ a.jsxs("div", { className: "content-default", children: [
     Y.createElement(
       typeof t == "string" ? "h2" : t.element,
       { className: "text" },
@@ -2370,7 +2370,7 @@ function ba({ href: t, setShowModal: e }) {
 }
 const xi = ({ icon: t, description: e, ctaMessage: n, href: r, showEditButton: s, setShowModal: i }) => {
   const { formatMessage: o } = H();
-  return /* @__PURE__ */ a.jsxs("div", { className: S("edit-section-placeholder", { "has-icon": !!t }), style: Hs(t), children: [
+  return /* @__PURE__ */ a.jsxs("div", { className: E("edit-section-placeholder", { "has-icon": !!t }), style: Hs(t), children: [
     /* @__PURE__ */ a.jsx("p", { children: e || o({ id: "edit_section_placeholder_description" }) }),
     s && /* @__PURE__ */ a.jsx(se, { href: r, variant: "secondary", size: "small", onClick: () => ba({ href: r, setShowModal: i }), children: n || o({ id: "edit_section_placeholder_cta" }) })
   ] });
@@ -2385,7 +2385,7 @@ const xi = ({ icon: t, description: e, ctaMessage: n, href: r, showEditButton: s
   showDivider: c = !0
 }) => {
   const [d, l] = Y.useState(!1), u = typeof r == "string" || !!n, f = () => l(!1);
-  return /* @__PURE__ */ a.jsxs("section", { className: S("edit-section", e), children: [
+  return /* @__PURE__ */ a.jsxs("section", { className: E("edit-section", e), children: [
     n && /* @__PURE__ */ a.jsx(
       an,
       {
@@ -2394,7 +2394,7 @@ const xi = ({ icon: t, description: e, ctaMessage: n, href: r, showEditButton: s
         showDivider: !1,
         showIcon: !1,
         functions: { onClose: f },
-        className: S("edit-section-modal"),
+        className: E("edit-section-modal"),
         children: /* @__PURE__ */ a.jsx(rn, { ...n, fields: n.fields, meta: {
           ...n == null ? void 0 : n.meta,
           shouldShowCancelButton: !0,
@@ -2435,20 +2435,20 @@ const Bl = ({
   return /* @__PURE__ */ a.jsxs(
     "div",
     {
-      className: S("logos", r, `align-${c}`, {
+      className: E("logos", r, `align-${c}`, {
         [d]: d !== "block",
         "wrap-logos": o
       }),
       children: [
         t && Y.createElement(
           i.element,
-          { className: S("title", i.className) },
+          { className: E("title", i.className) },
           i.text
         ),
         /* @__PURE__ */ a.jsx(
           "ul",
           {
-            className: S({
+            className: E({
               "two-col": s === 2 || s === 4,
               "three-col": s === 5 || s <= 10 && s % 3 === 0
             }),
@@ -2533,7 +2533,7 @@ const wi = [
   }), /* @__PURE__ */ a.jsx(
     Ve,
     {
-      className: S("banner-section", r, s, t, {
+      className: E("banner-section", r, s, t, {
         "has-image": n,
         "has-extra-spacing": s === "normal" && u.eyebrow && u.title
       }),
@@ -2573,7 +2573,7 @@ const Ul = ({
   return t && (s["--image"] = `url(${t})`), /* @__PURE__ */ a.jsx(
     Ve,
     {
-      className: S("custom-content-banner", e, r, {
+      className: E("custom-content-banner", e, r, {
         "has-image": t
       }),
       style: s,
@@ -2588,11 +2588,11 @@ const ki = ({
   image: r
 }) => {
   const s = typeof n == "string" ? /* @__PURE__ */ a.jsx(xt, { children: n }) : n;
-  return /* @__PURE__ */ a.jsxs(Ve, { className: S("highlight-section", e), children: [
+  return /* @__PURE__ */ a.jsxs(Ve, { className: E("highlight-section", e), children: [
     r && /* @__PURE__ */ a.jsx(
       "div",
       {
-        className: S("highlight-container highlight-image", {
+        className: E("highlight-container highlight-image", {
           [`highlight-image-${t}`]: t === "right"
         }),
         children: /* @__PURE__ */ a.jsx(Tt, { image: r })
@@ -2601,13 +2601,13 @@ const ki = ({
     /* @__PURE__ */ a.jsx(
       "div",
       {
-        className: S("highlight-container highlight-content-wrapper", {
+        className: E("highlight-container highlight-content-wrapper", {
           "no-image": !r
         }),
         children: /* @__PURE__ */ a.jsx(
           "div",
           {
-            className: S("highlight-content", {
+            className: E("highlight-content", {
               "highlight-content-right": t === "left"
             }),
             children: r ? s : /* @__PURE__ */ a.jsx("div", { className: "content-default", children: s })
@@ -2623,7 +2623,7 @@ const zl = ({
   title: n,
   text: r,
   gtmContext: s
-}) => !n && !r ? null : /* @__PURE__ */ a.jsxs("aside", { className: S("marketing-block", t), children: [
+}) => !n && !r ? null : /* @__PURE__ */ a.jsxs("aside", { className: E("marketing-block", t), children: [
   n && /* @__PURE__ */ a.jsx("p", { className: "title", children: n }),
   r && /* @__PURE__ */ a.jsx("p", { children: r }),
   e && /* @__PURE__ */ a.jsx(
@@ -2728,7 +2728,7 @@ const Pi = ({
   return /* @__PURE__ */ a.jsx(
     "span",
     {
-      className: S(`progress-bar section-${l}`, o, r, {
+      className: E(`progress-bar section-${l}`, o, r, {
         [c]: c !== "default",
         [d !== "default" ? d : ""]: d !== "default"
       }),
@@ -2757,7 +2757,7 @@ const vn = "loadingBlock_", Mi = ({ progress: t = 0, steps: e = !1, className: n
   return /* @__PURE__ */ a.jsxs(
     Fe,
     {
-      className: S("loading-block", n, {
+      className: E("loading-block", n, {
         "has-icon": s && e[s].icon
       }),
       variant: "subtle",
@@ -2773,7 +2773,7 @@ const Se = ({ element: t = "div", className: e = "", ...n }) => /* @__PURE__ */
   Gn,
   {
     element: t,
-    className: S("loading-placeholder", e),
+    className: E("loading-placeholder", e),
     ...n
   }
 );
@@ -2826,7 +2826,7 @@ const zn = {
   "course-navigation": ["button", "button"],
   "course-lesson-page": ["breadcrumb", "course-navigation", "text-page"],
   "course-lesson-quiz": ["text-page", "quiz-box"]
-}, xa = (t, e) => t in zn ? /* @__PURE__ */ a.jsx("div", { className: t, children: zn[t].map((n, r) => xa(n, r)) }, e) : /* @__PURE__ */ a.jsx(Se, { className: t }, e), wa = ({ layout: t = "overview-page", ...e }) => /* @__PURE__ */ a.jsx("div", { className: S("loading-state", t), ...e, children: zn[t].map((n, r) => xa(n, r)) }), ja = (t) => {
+}, xa = (t, e) => t in zn ? /* @__PURE__ */ a.jsx("div", { className: t, children: zn[t].map((n, r) => xa(n, r)) }, e) : /* @__PURE__ */ a.jsx(Se, { className: t }, e), wa = ({ layout: t = "overview-page", ...e }) => /* @__PURE__ */ a.jsx("div", { className: E("loading-state", t), ...e, children: zn[t].map((n, r) => xa(n, r)) }), ja = (t) => {
   const e = t && t.toUpperCase().trim().split(" ");
   return Array.isArray(e) && e.length > 1 && e[0] !== "" ? e[1] === "" ? e[0][0] : e[0][0] + e[e.length - 1][0] : t ? t.substr(0, 1) : "";
 }, Ct = ["#5AB6A3", "#A2D7AF", "#806056", "#3962B3"], Ri = (t) => {
@@ -2862,7 +2862,7 @@ const Nr = 256, Ye = ({
   return e && e !== "" && !c && (e.includes("http") || e.includes("//")) && (u = !0), /* @__PURE__ */ a.jsx(
     "figure",
     {
-      className: S("profile-picture", t, { error: c }),
+      className: E("profile-picture", t, { error: c }),
       ...o,
       children: u ? /* @__PURE__ */ a.jsx(
         "img",
@@ -2916,7 +2916,7 @@ const tr = ({
   }));
   const { name: d, url: l, image: u } = c, f = Fi(c), m = n && n.createdAt ? Un(n.createdAt) : !1, p = n && n.createdAt ? ga(n.createdAt) : "";
   return Y.createElement(t, {
-    className: S("member text-medium", i),
+    className: E("member text-medium", i),
     children: /* @__PURE__ */ a.jsxs(
       at,
       {
@@ -2964,7 +2964,7 @@ const Pr = {
   const f = H();
   return !n || n.length === 0 ? null : Y.createElement(t, {
     ...u,
-    className: S("contributors", l, s, { "has-gap": i }),
+    className: E("contributors", l, s, { "has-gap": i }),
     children: /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
       /* @__PURE__ */ a.jsx("ul", { children: n.map((m, p) => {
         let g, v = "";
@@ -2986,7 +2986,7 @@ const Pr = {
           g = /* @__PURE__ */ a.jsxs(
             "small",
             {
-              className: S({ "large-number": _ > 99 }),
+              className: E({ "large-number": _ > 99 }),
               children: [
                 "+",
                 ei(_, 0)
@@ -2994,7 +2994,7 @@ const Pr = {
             }
           ), v = "number-left";
         }
-        return g ? /* @__PURE__ */ a.jsx("li", { className: S("contributor", v), children: g }, p) : null;
+        return g ? /* @__PURE__ */ a.jsx("li", { className: E("contributor", v), children: g }, p) : null;
       }) }),
       r && /* @__PURE__ */ a.jsx("span", { className: "label", children: typeof r == "string" ? r : n.length === 1 ? typeof n[0] == "string" ? f.formatMessage({ id: `member_${n[0]}` }) : et(n[0].name || "", 20) : d || null })
     ] })
@@ -3159,7 +3159,7 @@ const $t = "emailHelperTextBox_", Oi = ({
     type: c,
     id: n,
     name: i,
-    className: S(t, e, {
+    className: E(t, e, {
       "has-scrollbar": c === "textarea" && f.current && f.current.clientHeight < f.current.scrollHeight
     }),
     value: d,
@@ -3252,7 +3252,7 @@ const Qe = {
       activePredictionIndex: -1,
       isPredictionSelected: !1
     }));
-  }, E = (w) => {
+  }, S = (w) => {
     o(w.description), f((b) => ({
       ...b,
       input: w.description,
@@ -3280,12 +3280,12 @@ const Qe = {
     /* @__PURE__ */ a.jsx("ul", { className: "predictions-list", children: m.map((w, b) => /* @__PURE__ */ a.jsx(
       "li",
       {
-        onClick: () => E(w),
+        onClick: () => S(w),
         onMouseEnter: () => v((F) => ({
           ...F,
           activePredictionIndex: b
         })),
-        className: S("predictions-list-item", {
+        className: E("predictions-list-item", {
           active: b === p
         }),
         children: w.description
@@ -3340,7 +3340,7 @@ const Ea = ({
         const x = y.target;
         x.nodeName.toLowerCase() === "a" || x.parentNode && x.parentNode.nodeName.toLowerCase() === "a" || (y.preventDefault(), y.stopPropagation(), v());
       },
-      className: S("checkbox-wrapper", t),
+      className: E("checkbox-wrapper", t),
       ...f,
       ...g
     },
@@ -3353,7 +3353,7 @@ const Ii = Ae(function({
   return /* @__PURE__ */ a.jsx(
     Gn,
     {
-      className: S("rotating-chevron", `direction-${e}`)
+      className: E("rotating-chevron", `direction-${e}`)
     }
   );
 });
@@ -3376,7 +3376,7 @@ const Li = ({
   Array.isArray(v) && v.length === 1 && typeof v[0] == "string" ? y = e && v ? e.find((R) => R.id === v[0]) : e ? e[0] : { id: "", label: "" } : Array.isArray(v) && v.length === 1 && typeof v[0] != "string" ? y = v[0] : y = { id: "", label: "" }, ae(() => {
     _(g);
   }, [r, n]);
-  const { onChange: x, onMultiSelectSubmit: E, ...w } = s, b = (R) => {
+  const { onChange: x, onMultiSelectSubmit: S, ...w } = s, b = (R) => {
     if (c) {
       let Q = [];
       v != null && v.includes(R.id) ? Q = v.filter((B) => B !== R.id) : Q = [...v, R.id], _([...Q]), x && x([...Q]);
@@ -3389,7 +3389,7 @@ const Li = ({
     } else
       _([]), x && x([]);
   };
-  return /* @__PURE__ */ a.jsxs("div", { className: S("dropdown-wrapper", t), children: [
+  return /* @__PURE__ */ a.jsxs("div", { className: E("dropdown-wrapper", t), children: [
     /* @__PURE__ */ a.jsxs(
       "button",
       {
@@ -3460,7 +3460,7 @@ const Li = ({
               return /* @__PURE__ */ a.jsx("li", { "data-testid": "dropdown-options", children: /* @__PURE__ */ a.jsxs(
                 "button",
                 {
-                  className: S("gtm-trackable", {
+                  className: E("gtm-trackable", {
                     selected: Q,
                     "selected-single": Q && !c
                   }),
@@ -3474,7 +3474,7 @@ const Li = ({
                   "data-testid": Q ? "current-selection" : "",
                   children: [
                     c && /* @__PURE__ */ a.jsx("span", { className: "pretty-checkbox", "data-testid": "pretty-checkbox" }),
-                    /* @__PURE__ */ a.jsx("span", { className: S({ "menu-option-label": c }), children: R.label })
+                    /* @__PURE__ */ a.jsx("span", { className: E({ "menu-option-label": c }), children: R.label })
                   ]
                 }
               ) }, R.id);
@@ -3485,7 +3485,7 @@ const Li = ({
             {
               variant: "secondary",
               onClick: () => {
-                E && E(v), document.dispatchEvent(
+                S && S(v), document.dispatchEvent(
                   new CustomEvent("dropdownMultiSelectSubmit", {
                     detail: {
                       id: l || "dropdown-multi-select",
@@ -3522,7 +3522,7 @@ const Bi = ({
     "ul",
     {
       ...f,
-      className: S("options-wrapper", t),
+      className: E("options-wrapper", t),
       "data-testid": `ul-${r}`,
       children: c == null ? void 0 : c.map(
         ({
@@ -3531,7 +3531,7 @@ const Bi = ({
           value: y = v,
           disabled: x = !1
         }) => {
-          const E = `${r}_${v}`, w = () => {
+          const S = `${r}_${v}`, w = () => {
             if (x)
               return;
             let b;
@@ -3546,7 +3546,7 @@ const Bi = ({
             Ea,
             {
               element: "li",
-              id: E,
+              id: S,
               type: l === "checkboxes" ? "checkbox" : "radio",
               shownValue: y,
               value: i ? p == null ? void 0 : p.includes(y) : g === y,
@@ -3560,7 +3560,7 @@ const Bi = ({
               }),
               disabled: x
             },
-            E
+            S
           );
         }
       )
@@ -3582,7 +3582,7 @@ const qi = ({
       "button",
       {
         type: "button",
-        className: S("show-password gtm-trackable", {
+        className: E("show-password gtm-trackable", {
           "password-visible": c
         }),
         "data-gtm-event-context": n,
@@ -3656,18 +3656,18 @@ const Je = {
         {
           ..._,
           label: y,
-          className: S("field-wrapper", n)
+          className: E("field-wrapper", n)
         }
       ),
       /* @__PURE__ */ a.jsx(x, { as: "p" })
     ] });
-  const E = (w) => Y.createElement(w.element || "label", {
+  const S = (w) => Y.createElement(w.element || "label", {
     ...w,
     className: "checkboxes-label text-small",
     "data-testid": `label-${t}`
   });
-  return /* @__PURE__ */ a.jsxs("dl", { className: S("field-wrapper text-medium", n), children: [
-    /* @__PURE__ */ a.jsx("dt", { children: /* @__PURE__ */ a.jsxs(E, { ...v, children: [
+  return /* @__PURE__ */ a.jsxs("dl", { className: E("field-wrapper text-medium", n), children: [
+    /* @__PURE__ */ a.jsx("dt", { children: /* @__PURE__ */ a.jsxs(S, { ...v, children: [
       y,
       m && o && /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
         " ",
@@ -3683,7 +3683,7 @@ const Je = {
       i > 0 ? /* @__PURE__ */ a.jsxs(
         "small",
         {
-          className: S("character-limit", {
+          className: E("character-limit", {
             "near-limit": p >= 0.99 * i,
             "approaching-limit": p >= 0.9 * i && p < 0.99 * i
           }),
@@ -3837,7 +3837,7 @@ const rn = ({
 }) => {
   const { customOnSubmit: g, hideButton: v, ..._ } = i, y = 40, {
     shouldShowCancelButton: x = !1,
-    shouldReset: E = !0,
+    shouldReset: S = !0,
     showRequiredLabels: w = !0,
     showSuccessMessage: b = !1
   } = c || {}, F = H(), R = {};
@@ -3852,7 +3852,7 @@ const rn = ({
     values: R
   }), { errors: $, isSubmitting: C, formSubmitted: k, values: j } = Q;
   ae(() => {
-    E && k && (bn = setTimeout(() => {
+    S && k && (bn = setTimeout(() => {
       B({
         type: "updateValue",
         payload: { key: "formSubmitted", value: !1 }
@@ -3914,7 +3914,7 @@ const rn = ({
             dispatch: B,
             onSuccess: async (q) => {
               try {
-                await l(q), B({ type: E ? "formSubmittedAndReset" : "formSubmitted" });
+                await l(q), B({ type: S ? "formSubmittedAndReset" : "formSubmitted" });
               } catch (L) {
                 f(L), B({
                   type: "updateValue",
@@ -3954,7 +3954,7 @@ const rn = ({
       {
         ...p,
         id: n,
-        className: S("form", e),
+        className: E("form", e),
         ref: A,
         children: [
           $ != null && $.general ? /* @__PURE__ */ a.jsx(
@@ -3964,7 +3964,7 @@ const rn = ({
               text: F.formatMessage({ id: "form_error_generalError" })
             }
           ) : null,
-          (!E || !C && !k || g) && t.map((z, K) => {
+          (!S || !C && !k || g) && t.map((z, K) => {
             const {
               id: T = z.name || K,
               component: P,
@@ -3995,7 +3995,7 @@ const rn = ({
           v ? null : (C || k) && g ? g : /* @__PURE__ */ a.jsx(
             kt,
             {
-              className: S("cta", {
+              className: E("cta", {
                 center: C || k,
                 submitted: k
               }),
@@ -4021,13 +4021,13 @@ const Nt = "passwordRules_", Sa = "isMoreThanEightCharacters", Ca = "includesNum
   className: e = ""
 }) => {
   const n = H();
-  return /* @__PURE__ */ a.jsxs("aside", { className: S("password-rules", e), children: [
+  return /* @__PURE__ */ a.jsxs("aside", { className: E("password-rules", e), children: [
     /* @__PURE__ */ a.jsx("small", { children: n.formatMessage({ id: `${Nt}intro` }) }),
     /* @__PURE__ */ a.jsx("ul", { children: [Sa, Ca, $a].map(
       (r) => /* @__PURE__ */ a.jsxs(
         "li",
         {
-          className: S({ matches: t[r] }),
+          className: E({ matches: t[r] }),
           children: [
             /* @__PURE__ */ a.jsxs(be, { children: [
               n.formatMessage({ id: `${Nt}rule_label` }),
@@ -4091,19 +4091,19 @@ const Vl = ({
       try {
         l((x) => ({ ...x, rating: y, disabled: !0 })), await r({ id: f, value: y });
       } catch (x) {
-        l((E) => ({ ...E, rating: null })), s(x);
+        l((S) => ({ ...S, rating: null })), s(x);
       } finally {
         l((x) => ({ ...x, disabled: !1 }));
       }
   };
-  return /* @__PURE__ */ a.jsxs("div", { className: S("rating", i), children: [
+  return /* @__PURE__ */ a.jsxs("div", { className: E("rating", i), children: [
     /* @__PURE__ */ a.jsx("span", { className: "label", children: v[m ? "success" : "text"] }),
     /* @__PURE__ */ a.jsx("ol", { children: Array.from(new Array(e).keys()).map((y) => {
       const x = y + 1;
       return /* @__PURE__ */ a.jsx(
         "li",
         {
-          className: S({ selected: m && x <= m }),
+          className: E({ selected: m && x <= m }),
           children: /* @__PURE__ */ a.jsx(
             se,
             {
@@ -4118,8 +4118,8 @@ const Vl = ({
                 { id: `${g}stars` },
                 { number: x, total: e }
               )}${x === 1 || x === e ? ` - ${v[x === 1 ? "low" : "high"]}` : ""}`,
-              onClick: (E) => {
-                E.preventDefault(), E.stopPropagation(), _(x);
+              onClick: (S) => {
+                S.preventDefault(), S.stopPropagation(), _(x);
               },
               disabled: p
             }
@@ -4152,7 +4152,7 @@ const Yl = ({
   return /* @__PURE__ */ a.jsxs(
     "div",
     {
-      className: S("toggle", o),
+      className: E("toggle", o),
       onClick: (u) => {
         u.preventDefault(), u.stopPropagation(), l(c === n[0].value ? n[1].value : n[0].value);
       },
@@ -4161,7 +4161,7 @@ const Yl = ({
         /* @__PURE__ */ a.jsx(
           "ul",
           {
-            className: S("toggle-options", {
+            className: E("toggle-options", {
               disabled: i,
               on: c === n[1].value
             }),
@@ -4211,7 +4211,7 @@ function Kl({ className: t = "", userId: e, userName: n, src: r, setUserImage: s
     }
     c(!1);
   };
-  return /* @__PURE__ */ a.jsxs("div", { className: S("profile-image-change-figure", t), children: [
+  return /* @__PURE__ */ a.jsxs("div", { className: E("profile-image-change-figure", t), children: [
     /* @__PURE__ */ a.jsx(Ye, { className: "profile-image-change-picture", name: n, src: r, "data-testid": "profile-picture" }),
     d && /* @__PURE__ */ a.jsx("p", { className: "error text-small", children: /* @__PURE__ */ a.jsx(ye, { id: "profile_image_change_error" }) }),
     /* @__PURE__ */ a.jsx(
@@ -4319,7 +4319,7 @@ const Yi = ({
       "NOT_SUBMITTED"
       /* NOT_SUBMITTED */
     ), p(!0), f([]);
-  }, E = (w) => {
+  }, S = (w) => {
     w.preventDefault(), o(), v(
       "CLOSED"
       /* CLOSED */
@@ -4333,14 +4333,14 @@ const Yi = ({
     /* @__PURE__ */ a.jsx(Oe, {}),
     /* @__PURE__ */ a.jsx("div", { className: "footer", children: g === "SUCCESS" ? /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
       /* @__PURE__ */ a.jsx(se, { variant: "secondary", onClick: x, children: _({ id: "inviteForm_ctaSendMoreInvites" }) }),
-      /* @__PURE__ */ a.jsx(se, { onClick: E, children: _({ id: "inviteForm_ctaDone" }) })
+      /* @__PURE__ */ a.jsx(se, { onClick: S, children: _({ id: "inviteForm_ctaDone" }) })
     ] }) : /* @__PURE__ */ a.jsx(se, { onClick: x, children: _({ id: "inviteForm_ctaTryAgain" }) }) })
   ] }) : /* @__PURE__ */ a.jsx("div", { className: "invite-form-wrapper", children: /* @__PURE__ */ a.jsxs(
     "form",
     {
       style: { backgroundColor: i },
       onSubmit: y,
-      className: S("invite-form gtm-trackable"),
+      className: E("invite-form gtm-trackable"),
       children: [
         /* @__PURE__ */ a.jsxs("fieldset", { className: "content", children: [
           /* @__PURE__ */ a.jsx("h2", { className: "title", style: { color: r }, children: t }),
@@ -4468,7 +4468,7 @@ const Ki = ({
     "form",
     {
       onSubmit: u,
-      className: S("search-form gtm-trackable", e),
+      className: E("search-form gtm-trackable", e),
       "data-gtm-event-context": s,
       "data-gtm-event-type": i,
       children: /* @__PURE__ */ a.jsx(
@@ -4756,7 +4756,7 @@ const Ki = ({
 const Xi = ({ className: t = "" }) => /* @__PURE__ */ a.jsxs(
   "div",
   {
-    className: S("success-message", t),
+    className: E("success-message", t),
     "data-testid": "success-message",
     children: [
       /* @__PURE__ */ a.jsx("p", { className: "success-title", children: /* @__PURE__ */ a.jsx(ye, { id: "signup_success_title" }) }),
@@ -4817,7 +4817,7 @@ const eo = {
   }, [v, _] = Yn(ma, eo), {
     validFields: y,
     emailDetails: x,
-    shouldManuallyApprove: E,
+    shouldManuallyApprove: S,
     shouldDisableButton: w,
     showSuccessMessage: b,
     showError: F
@@ -4834,8 +4834,8 @@ const eo = {
     hiddenValidation: Y.createRef()
   };
   ae(() => {
-    E === !0 && B.jobTitle.current && B.jobTitle.current.focus();
-  }, [E]), ae(() => {
+    S === !0 && B.jobTitle.current && B.jobTitle.current.focus();
+  }, [S]), ae(() => {
     R["signup-this-session"] && _([{ type: "showSuccessMessage", value: !0 }]);
   }, [R]), ae(() => {
     b && R["functional-cookie-consent"] && Q("signup-this-session", "true", {
@@ -4853,11 +4853,11 @@ const eo = {
     dispatch: _,
     dataToSubmit: o,
     intl: d
-  }), [o, r, d, B, g, v]), C = w ? !0 : E ? !Object.values(y).every((k) => k === !0) : !y.name || !y.email || ["exists", "pending", "verify"].includes(x.boxType);
+  }), [o, r, d, B, g, v]), C = w ? !0 : S ? !Object.values(y).every((k) => k === !0) : !y.name || !y.email || ["exists", "pending", "verify"].includes(x.boxType);
   return g.successMessage && b ? /* @__PURE__ */ a.jsx(Xi, { className: t }) : /* @__PURE__ */ a.jsxs(
     "fieldset",
     {
-      className: S("signup-form-fieldset", t),
+      className: E("signup-form-fieldset", t),
       "data-testid": "signup-form",
       children: [
         g.title && /* @__PURE__ */ a.jsx("p", { className: "signup-title", children: /* @__PURE__ */ a.jsx(ye, { id: "signup_title" }) }),
@@ -4943,7 +4943,7 @@ function to() {
     return ue;
   Rr = 1;
   var t = typeof Symbol == "function" && Symbol.for, e = t ? Symbol.for("react.element") : 60103, n = t ? Symbol.for("react.portal") : 60106, r = t ? Symbol.for("react.fragment") : 60107, s = t ? Symbol.for("react.strict_mode") : 60108, i = t ? Symbol.for("react.profiler") : 60114, o = t ? Symbol.for("react.provider") : 60109, c = t ? Symbol.for("react.context") : 60110, d = t ? Symbol.for("react.async_mode") : 60111, l = t ? Symbol.for("react.concurrent_mode") : 60111, u = t ? Symbol.for("react.forward_ref") : 60112, f = t ? Symbol.for("react.suspense") : 60113, m = t ? Symbol.for("react.suspense_list") : 60120, p = t ? Symbol.for("react.memo") : 60115, g = t ? Symbol.for("react.lazy") : 60116, v = t ? Symbol.for("react.block") : 60121, _ = t ? Symbol.for("react.fundamental") : 60117, y = t ? Symbol.for("react.responder") : 60118, x = t ? Symbol.for("react.scope") : 60119;
-  function E(b) {
+  function S(b) {
     if (typeof b == "object" && b !== null) {
       var F = b.$$typeof;
       switch (F) {
@@ -4974,35 +4974,35 @@ function to() {
     }
   }
   function w(b) {
-    return E(b) === l;
+    return S(b) === l;
   }
   return ue.AsyncMode = d, ue.ConcurrentMode = l, ue.ContextConsumer = c, ue.ContextProvider = o, ue.Element = e, ue.ForwardRef = u, ue.Fragment = r, ue.Lazy = g, ue.Memo = p, ue.Portal = n, ue.Profiler = i, ue.StrictMode = s, ue.Suspense = f, ue.isAsyncMode = function(b) {
-    return w(b) || E(b) === d;
+    return w(b) || S(b) === d;
   }, ue.isConcurrentMode = w, ue.isContextConsumer = function(b) {
-    return E(b) === c;
+    return S(b) === c;
   }, ue.isContextProvider = function(b) {
-    return E(b) === o;
+    return S(b) === o;
   }, ue.isElement = function(b) {
     return typeof b == "object" && b !== null && b.$$typeof === e;
   }, ue.isForwardRef = function(b) {
-    return E(b) === u;
+    return S(b) === u;
   }, ue.isFragment = function(b) {
-    return E(b) === r;
+    return S(b) === r;
   }, ue.isLazy = function(b) {
-    return E(b) === g;
+    return S(b) === g;
   }, ue.isMemo = function(b) {
-    return E(b) === p;
+    return S(b) === p;
   }, ue.isPortal = function(b) {
-    return E(b) === n;
+    return S(b) === n;
   }, ue.isProfiler = function(b) {
-    return E(b) === i;
+    return S(b) === i;
   }, ue.isStrictMode = function(b) {
-    return E(b) === s;
+    return S(b) === s;
   }, ue.isSuspense = function(b) {
-    return E(b) === f;
+    return S(b) === f;
   }, ue.isValidElementType = function(b) {
     return typeof b == "string" || typeof b == "function" || b === r || b === l || b === i || b === s || b === f || b === m || typeof b == "object" && b !== null && (b.$$typeof === g || b.$$typeof === p || b.$$typeof === o || b.$$typeof === c || b.$$typeof === u || b.$$typeof === _ || b.$$typeof === y || b.$$typeof === x || b.$$typeof === v);
-  }, ue.typeOf = E, ue;
+  }, ue.typeOf = S, ue;
 }
 var de = {};
 /** @license React v16.13.1
@@ -5017,7 +5017,7 @@ var Fr;
 function no() {
   return Fr || (Fr = 1, process.env.NODE_ENV !== "production" && function() {
     var t = typeof Symbol == "function" && Symbol.for, e = t ? Symbol.for("react.element") : 60103, n = t ? Symbol.for("react.portal") : 60106, r = t ? Symbol.for("react.fragment") : 60107, s = t ? Symbol.for("react.strict_mode") : 60108, i = t ? Symbol.for("react.profiler") : 60114, o = t ? Symbol.for("react.provider") : 60109, c = t ? Symbol.for("react.context") : 60110, d = t ? Symbol.for("react.async_mode") : 60111, l = t ? Symbol.for("react.concurrent_mode") : 60111, u = t ? Symbol.for("react.forward_ref") : 60112, f = t ? Symbol.for("react.suspense") : 60113, m = t ? Symbol.for("react.suspense_list") : 60120, p = t ? Symbol.for("react.memo") : 60115, g = t ? Symbol.for("react.lazy") : 60116, v = t ? Symbol.for("react.block") : 60121, _ = t ? Symbol.for("react.fundamental") : 60117, y = t ? Symbol.for("react.responder") : 60118, x = t ? Symbol.for("react.scope") : 60119;
-    function E(D) {
+    function S(D) {
       return typeof D == "string" || typeof D == "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
       D === r || D === l || D === i || D === s || D === f || D === m || typeof D == "object" && D !== null && (D.$$typeof === g || D.$$typeof === p || D.$$typeof === o || D.$$typeof === c || D.$$typeof === u || D.$$typeof === _ || D.$$typeof === y || D.$$typeof === x || D.$$typeof === v);
     }
@@ -5093,7 +5093,7 @@ function no() {
     function oe(D) {
       return w(D) === f;
     }
-    de.AsyncMode = b, de.ConcurrentMode = F, de.ContextConsumer = R, de.ContextProvider = Q, de.Element = B, de.ForwardRef = $, de.Fragment = C, de.Lazy = k, de.Memo = j, de.Portal = N, de.Profiler = A, de.StrictMode = W, de.Suspense = Z, de.isAsyncMode = K, de.isConcurrentMode = T, de.isContextConsumer = P, de.isContextProvider = q, de.isElement = L, de.isForwardRef = U, de.isFragment = te, de.isLazy = G, de.isMemo = V, de.isPortal = ee, de.isProfiler = re, de.isStrictMode = O, de.isSuspense = oe, de.isValidElementType = E, de.typeOf = w;
+    de.AsyncMode = b, de.ConcurrentMode = F, de.ContextConsumer = R, de.ContextProvider = Q, de.Element = B, de.ForwardRef = $, de.Fragment = C, de.Lazy = k, de.Memo = j, de.Portal = N, de.Profiler = A, de.StrictMode = W, de.Suspense = Z, de.isAsyncMode = K, de.isConcurrentMode = T, de.isContextConsumer = P, de.isContextProvider = q, de.isElement = L, de.isForwardRef = U, de.isFragment = te, de.isLazy = G, de.isMemo = V, de.isPortal = ee, de.isProfiler = re, de.isStrictMode = O, de.isSuspense = oe, de.isValidElementType = S, de.typeOf = w;
   }()), de;
 }
 var Or;
@@ -5249,7 +5249,7 @@ function so() {
       string: y("string"),
       symbol: y("symbol"),
       any: x(),
-      arrayOf: E,
+      arrayOf: S,
       element: w(),
       elementType: b(),
       instanceOf: F,
@@ -5307,7 +5307,7 @@ function so() {
     function x() {
       return _(o);
     }
-    function E(T) {
+    function S(T) {
       function P(q, L, U, te, G) {
         if (typeof T != "function")
           return new v("Property `" + G + "` of component `" + U + "` has invalid PropType notation inside arrayOf.");
@@ -6119,7 +6119,7 @@ var Zr = {
       })), g(A || o.mostRecentlyFocusedNode || f());
     }
     o.recentNavEvent = void 0;
-  }, E = function(k) {
+  }, S = function(k) {
     var j = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
     o.recentNavEvent = k;
     var N = _({
@@ -6132,7 +6132,7 @@ var Zr = {
       k.preventDefault(), c.deactivate();
       return;
     }
-    (i.isKeyForward(k) || i.isKeyBackward(k)) && E(k, i.isKeyBackward(k));
+    (i.isKeyForward(k) || i.isKeyBackward(k)) && S(k, i.isKeyBackward(k));
   }, b = function(k) {
     var j = Mt(k);
     l(j, k) >= 0 || lt(i.clickOutsideDeactivates, k) || lt(i.allowOutsideClick, k) || (k.preventDefault(), k.stopImmediatePropagation());
@@ -6567,7 +6567,7 @@ rr.defaultProps = {
 var Qo = rr;
 const Jo = /* @__PURE__ */ la(Qo);
 const qa = ({ element: t = "section", children: e, className: n, ...r }) => Y.createElement(t, {
-  className: S("modal", n),
+  className: E("modal", n),
   children: typeof e == "string" ? /* @__PURE__ */ a.jsx("p", { children: e }) : e,
   ...r
 });
@@ -6599,11 +6599,11 @@ const an = ({
     _(e);
   }, [e]);
   const y = r ? { "--max-width": `${r / 16}rem` } : {};
-  return /* @__PURE__ */ a.jsx("div", { className: S("overlay", { open: p }), role: "dialog", children: /* @__PURE__ */ a.jsx(
+  return /* @__PURE__ */ a.jsx("div", { className: E("overlay", { open: p }), role: "dialog", children: /* @__PURE__ */ a.jsx(
     qa,
     {
       id: t,
-      className: S("overlay-modal", u, {
+      className: E("overlay-modal", u, {
         "has-max-width": r
       }),
       hidden: !p,
@@ -6662,7 +6662,7 @@ const Jl = ({
       showDivider: !1,
       showIcon: o,
       functions: { onClose: c },
-      className: S("invite-modal", t, { success: !!n }),
+      className: E("invite-modal", t, { success: !!n }),
       children: /* @__PURE__ */ a.jsx(
         Yi,
         {
@@ -6874,8 +6874,8 @@ const Xl = ({ members: t }) => {
     ) : null;
   const g = ["communityPage", "microcourse", "event"];
   if (e && e.onClick && g.includes(m) && u !== "premium") {
-    const y = i.loading || i.registered || ((_ = t == null ? void 0 : t.members) == null ? void 0 : _.isMember), x = async (E) => {
-      if (E.preventDefault(), E.stopPropagation(), !(y || !e || !e.onClick)) {
+    const y = i.loading || i.registered || ((_ = t == null ? void 0 : t.members) == null ? void 0 : _.isMember), x = async (S) => {
+      if (S.preventDefault(), S.stopPropagation(), !(y || !e || !e.onClick)) {
         o((w) => ({ ...w, loading: !0 }));
         try {
           const w = await e.onClick(t);
@@ -6885,22 +6885,30 @@ const Xl = ({ members: t }) => {
         }
       }
     };
-    return /* @__PURE__ */ a.jsx("p", { className: "cta-wrapper", children: /* @__PURE__ */ a.jsx(
-      se,
+    return /* @__PURE__ */ a.jsx(
+      "p",
       {
-        onClick: x,
-        className: "gtm-trackable",
-        size: "small",
-        styling: { fullWidth: !0 },
-        disabled: y,
-        "data-gtm-event-context": `${r}Page-${m}: ${f}`,
-        "data-gtm-event-type": `${r}-${m}-register-click`,
-        "data-testid": "in-card-button",
-        children: c || s.formatMessage({
-          id: `card_cta_${m}${y ? `_${i.loading ? "loading" : "done"}` : ""}`
-        })
+        className: E("cta-wrapper", {
+          "has-member-section": t == null ? void 0 : t.members
+        }),
+        children: /* @__PURE__ */ a.jsx(
+          se,
+          {
+            onClick: x,
+            className: "gtm-trackable",
+            size: "small",
+            styling: { fullWidth: !0 },
+            disabled: y,
+            "data-gtm-event-context": `${r}Page-${m}: ${f}`,
+            "data-gtm-event-type": `${r}-${m}-register-click`,
+            "data-testid": "in-card-button",
+            children: c || s.formatMessage({
+              id: `card_cta_${m}${y ? `_${i.loading ? "loading" : "done"}` : ""}`
+            })
+          }
+        )
       }
-    ) });
+    );
   }
   return null;
 };
@@ -6949,7 +6957,7 @@ const nc = {
     basePath: _ = "",
     className: y,
     length: x,
-    gtmEvent: E
+    gtmEvent: S
   } = Kt[v];
   let w = m.slug ? `${_}${m.slug}` : !1;
   m.slug && (m.slug.slice(0, 4) === "http" || m.slug.slice(0, 2) === "//" || m.slug.slice(0, 6) === "mailto" || m.slug.slice(0, 3) === "tel") && (w = m.slug);
@@ -6959,12 +6967,12 @@ const nc = {
     href: w,
     className: "card gtm-trackable",
     "data-gtm-event-context": `${s}-CarouselCard`,
-    "data-gtm-event-type": `${E}-click`,
+    "data-gtm-event-type": `${S}-click`,
     "data-testid": "link"
   }, m.openInNewTab && (F.target = "_blank")), /* @__PURE__ */ a.jsx(
     "li",
     {
-      className: S("card-wrapper text-medium", y, i, {
+      className: E("card-wrapper text-medium", y, i, {
         "has-link": w,
         "no-link": !w,
         "has-image": m.banner
@@ -7053,7 +7061,7 @@ const nc = {
     }
   );
 };
-const rc = ({ cards: t, cardTypes: e, className: n = "", ...r }) => /* @__PURE__ */ a.jsx("ul", { className: S("card-block", n), children: t.map((s, i) => {
+const rc = ({ cards: t, cardTypes: e, className: n = "", ...r }) => /* @__PURE__ */ a.jsx("ul", { className: E("card-block", n), children: t.map((s, i) => {
   const o = s.slug ? `${s.slug}-${e[i]}` : `${e[i]}-${i}`;
   return /* @__PURE__ */ a.jsx(
     Ua,
@@ -7073,7 +7081,7 @@ const rc = ({ cards: t, cardTypes: e, className: n = "", ...r }) => /* @__PURE__
     return null;
   const { text: r, element: s = "h2", variant: i = "default", size: o = "medium", link: c } = e;
   return Y.createElement(s, {
-    className: S("title", i, o, {
+    className: E("title", i, o, {
       "highlighted-title": i === "highlighted"
     }),
     children: /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
@@ -7113,7 +7121,7 @@ const ic = ({
   }), { cardsPerPage: f, isLoading: m } = l, [p, g] = X({
     currentPage: 0,
     loadedPages: [0]
-  }), { currentPage: v, loadedPages: _ } = p, y = e.length, x = Math.ceil(y / f), E = pe(null), w = jt(!0, !0, E == null ? void 0 : E.current);
+  }), { currentPage: v, loadedPages: _ } = p, y = e.length, x = Math.ceil(y / f), S = pe(null), w = jt(!0, !0, S == null ? void 0 : S.current);
   ae(() => {
     let $ = 1;
     w && (w >= En.fourCards ? $ = 4 : w >= En.threeCards ? $ = 3 : w >= En.twoCards && ($ = 2), $ > y && ($ = y)), u((C) => ({
@@ -7164,8 +7172,8 @@ const ic = ({
   return /* @__PURE__ */ a.jsxs(
     "section",
     {
-      ref: E,
-      className: S("carousel-wrapper", i),
+      ref: S,
+      className: E("carousel-wrapper", i),
       "data-testid": "carousel",
       children: [
         /* @__PURE__ */ a.jsx(sc, { id: t, title: s }),
@@ -7220,7 +7228,7 @@ const ic = ({
           [...Array(x)].map(($, C) => /* @__PURE__ */ a.jsx("li", { "data-testid": "carousel-controls-button", children: /* @__PURE__ */ a.jsx(
             "button",
             {
-              className: S("page-indicator", {
+              className: E("page-indicator", {
                 selected: C === v
               }),
               onClick: (k) => {
@@ -7303,7 +7311,7 @@ const Sn = "joinCommunityButton", Wa = ({
       onClick: async (p) => {
         o && (p.currentTarget.blur(), c ? (u("leaving"), typeof r == "function" && await r()) : (u("joining"), typeof n == "function" && await n()), d(!c));
       },
-      className: S("join-community-button", l, {
+      className: E("join-community-button", l, {
         active: l === "joining"
       }),
       disabled: !o,
@@ -7322,7 +7330,7 @@ const Cn = "communityDetails_", tu = ({
   functions: { invite: i, ...o }
 }) => {
   const c = H(), d = 5, l = r || s.length, u = s.length ? s : Array(d).fill({}), f = `/communities/${n}/members` === window.location.pathname;
-  return /* @__PURE__ */ a.jsxs("div", { className: S("community-details", t), children: [
+  return /* @__PURE__ */ a.jsxs("div", { className: E("community-details", t), children: [
     /* @__PURE__ */ a.jsx(Oe, {}),
     /* @__PURE__ */ a.jsxs("div", { className: "member-details", children: [
       /* @__PURE__ */ a.jsxs("div", { className: "top", children: [
@@ -7371,7 +7379,7 @@ const nu = ({ breadcrumbs: t, cutoff: e = 20, className: n = "" }) => {
         children: r.formatMessage({ id: "breadcrumbs_label" })
       }
     ),
-    /* @__PURE__ */ a.jsx("ul", { className: S("breadcrumbs text-small", n), children: t.map(
+    /* @__PURE__ */ a.jsx("ul", { className: E("breadcrumbs text-small", n), children: t.map(
       ({ text: s, href: i, current: o = !1 }, c) => /* @__PURE__ */ a.jsxs("li", { children: [
         o && /* @__PURE__ */ a.jsx(
           be,
@@ -7403,7 +7411,7 @@ const ru = ({
     let m = [];
     c.includes(u) ? m = c.filter((p) => p !== u) : u === "all" ? m = ["all"] : n ? m = [...c.filter((p) => p !== "all"), u] : m = [u], d((p) => (r && typeof r == "function" && r({ current: m, previous: p }), m)), f && typeof f == "function" && f();
   };
-  return /* @__PURE__ */ a.jsx("ul", { className: S("filters", s), children: o.map(({ id: u, text: f, disabled: m = !1, callback: p = () => {
+  return /* @__PURE__ */ a.jsx("ul", { className: E("filters", s), children: o.map(({ id: u, text: f, disabled: m = !1, callback: p = () => {
   } }) => {
     let g = {};
     return m && (g = {
@@ -7412,7 +7420,7 @@ const ru = ({
     }), /* @__PURE__ */ a.jsx("li", { children: /* @__PURE__ */ a.jsx(
       "button",
       {
-        className: S(u, { selected: c.includes(u) }),
+        className: E(u, { selected: c.includes(u) }),
         onClick: (v) => {
           v.preventDefault(), v.stopPropagation(), l(u, p);
         },
@@ -7453,14 +7461,14 @@ const Ot = "languageSwitcher_", au = ({
   ))
     return null;
   const g = Object.keys(r), v = f !== t;
-  return /* @__PURE__ */ a.jsxs("div", { className: S("language-switcher text-small", o, d), children: [
+  return /* @__PURE__ */ a.jsxs("div", { className: E("language-switcher text-small", o, d), children: [
     /* @__PURE__ */ a.jsxs("nav", { children: [
       o !== "short" && /* @__PURE__ */ a.jsx("p", { children: c || l.formatMessage({ id: `${Ot}label` }) }),
       /* @__PURE__ */ a.jsx("ul", { children: g.map((_) => {
-        var E;
+        var S;
         if (!gn[_])
           return null;
-        const y = (E = r[_]) == null ? void 0 : E.post_name;
+        const y = (S = r[_]) == null ? void 0 : S.post_name;
         let x = { className: _ };
         if (f === _)
           x["aria-label"] = l.formatMessage(
@@ -7528,7 +7536,7 @@ const $n = ks({ locale: "en", messages: rt }), sn = ({
         g instanceof Error ? f(g.message) : f("Unknown error");
       }
   };
-  return !u && !t && !c.endOfFeed ? null : /* @__PURE__ */ a.jsx("footer", { className: S("load-more", d), children: !u && t ? /* @__PURE__ */ a.jsx(
+  return !u && !t && !c.endOfFeed ? null : /* @__PURE__ */ a.jsx("footer", { className: E("load-more", d), children: !u && t ? /* @__PURE__ */ a.jsx(
     se,
     {
       variant: r,
@@ -7554,7 +7562,7 @@ const za = ({
   "a",
   {
     href: "/home/",
-    className: S("logo", t, e, n),
+    className: E("logo", t, e, n),
     ...r,
     children: /* @__PURE__ */ a.jsx(be, { children: /* @__PURE__ */ a.jsx(ye, { id: "apolitical" }) })
   }
@@ -7575,7 +7583,7 @@ const cc = ({
     document.removeEventListener("click", d, !0);
   })), Y.createElement(t, {
     ref: i,
-    className: S("more-menu text-medium", r),
+    className: E("more-menu text-medium", r),
     children: /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
       /* @__PURE__ */ a.jsx(
         se,
@@ -7646,7 +7654,7 @@ const uc = [
     uc.map(({ key: s, href: i }) => /* @__PURE__ */ a.jsx(
       "li",
       {
-        className: S(s, { active: lc(i, t) }),
+        className: E(s, { active: lc(i, t) }),
         children: /* @__PURE__ */ a.jsx(
           "a",
           {
@@ -7733,7 +7741,7 @@ const mc = "shareLinks_", su = ({
   className: o = ""
 }) => {
   const c = H(), d = fc({ title: t, link: e, referrer: n });
-  return /* @__PURE__ */ a.jsxs("aside", { className: S("share-links", s, i, o), children: [
+  return /* @__PURE__ */ a.jsxs("aside", { className: E("share-links", s, i, o), children: [
     /* @__PURE__ */ a.jsx("p", { className: "text-small", children: c.formatMessage({ id: "shareLinks_label" }) }),
     /* @__PURE__ */ a.jsx("ul", { children: d.map(({ key: l, icon: u, url: f, shouldRender: m = !0, onClick: p }) => {
       if (typeof m == "function" && !m())
@@ -7809,7 +7817,7 @@ const iu = ({ tabs: t, className: e = "", preventLocationChange: n }) => {
         {
           href: p || `#${u}`,
           id: `tab-${u}`,
-          className: S({ selected: _ }),
+          className: E({ selected: _ }),
           role: "tab",
           "aria-selected": _,
           ...y,
@@ -7817,7 +7825,7 @@ const iu = ({ tabs: t, className: e = "", preventLocationChange: n }) => {
         }
       ) }, `tab-${u}`)
     );
-  }), /* @__PURE__ */ a.jsxs("div", { className: S("tabs-wrapper", e), children: [
+  }), /* @__PURE__ */ a.jsxs("div", { className: E("tabs-wrapper", e), children: [
     /* @__PURE__ */ a.jsx("ul", { className: "tabs", role: "tablist", children: c }),
     /* @__PURE__ */ a.jsx("div", { className: "tab-content", children: d })
   ] });
@@ -7829,12 +7837,21 @@ const pc = {
 }, hc = ({
   layout: t = "2-1",
   hideOnMobile: e = !1,
-  className: n = "",
-  children: r
+  hasCSSContainers: n = !1,
+  className: r = "",
+  children: s
 }) => {
-  const s = jt(!0);
-  let i = r;
-  return Y.Children.count(r) === 1 && (i = Y.Children.toArray(r)[0], i.props && (i = i.props.children)), /* @__PURE__ */ a.jsx("section", { className: S("columns", `layout-${t}`, n), children: Y.Children.map(i, (o, c) => e !== !1 && c === e && s && s < pc[t] ? null : o) });
+  const i = jt(!0);
+  let o = s;
+  return Y.Children.count(s) === 1 && (o = Y.Children.toArray(s)[0], o.props && (o = o.props.children)), /* @__PURE__ */ a.jsx(
+    "section",
+    {
+      className: E("columns", `layout-${t}`, r, {
+        "has-containers": n
+      }),
+      children: Y.Children.map(o, (c, d) => e !== !1 && d === e && i && i < pc[t] ? null : c)
+    }
+  );
 };
 let Nn;
 const Pn = "contactFooter_", ou = ({ onSuccess: t = async () => {
@@ -8312,8 +8329,8 @@ const Xe = "footer_", Gt = "SiteFooter", Kr = ({ group: t }) => {
   if (c.href) {
     let x = c.gtmType || `${t}-click`;
     if (x.includes(".")) {
-      const E = x.split("."), w = E[E.length - 2];
-      x = `${w === "topics" ? `${w}-` : ""}${E[E.length - 1]}`;
+      const S = x.split("."), w = S[S.length - 2];
+      x = `${w === "topics" ? `${w}-` : ""}${S[S.length - 1]}`;
     }
     m = {
       href: c.href,
@@ -8333,7 +8350,7 @@ const Xe = "footer_", Gt = "SiteFooter", Kr = ({ group: t }) => {
   const p = c.order && c.order[0] && c[c.order[0]], g = p && c[c.order[0]].order, v = m && window.location.pathname === c.href;
   let _ = {}, y = {};
   if (p) {
-    const x = c.menuId || t, E = {
+    const x = c.menuId || t, S = {
       onClick: (w) => fe.events.onClick(w, { id: x, callback: s, isOpen: r[x] }),
       onFocus: () => fe.events.onFocus({ id: x }),
       onBlur: () => fe.events.onBlur({ id: x, callback: s }),
@@ -8341,7 +8358,7 @@ const Xe = "footer_", Gt = "SiteFooter", Kr = ({ group: t }) => {
       onMouseEnter: () => fe.events.onMouseEnter({ id: x, callback: s })
     };
     n && (g && (_ = {
-      ...E,
+      ...S,
       onKeyPress: (w) => {
         w.key === "Enter" && fe.events.onClick(w, { id: x, callback: s, isOpen: r[x] });
       },
@@ -8352,13 +8369,13 @@ const Xe = "footer_", Gt = "SiteFooter", Kr = ({ group: t }) => {
       "aria-controls": x
     }), y = { hidden: x in r ? !r[x] : !0 }), g || (y = {
       ...y,
-      ...E
+      ...S
     });
   }
   return /* @__PURE__ */ a.jsxs(
     "li",
     {
-      className: S({
+      className: E({
         [c.className]: c.className,
         "has-submenu": p,
         parent: g,
@@ -8375,7 +8392,7 @@ const Xe = "footer_", Gt = "SiteFooter", Kr = ({ group: t }) => {
         c.order && /* @__PURE__ */ a.jsx("ul", { ...y, children: c.order.map((x) => {
           if (!c[x])
             return null;
-          const E = {
+          const S = {
             isLoggedIn: e,
             isDesktopVersion: n,
             menus: r,
@@ -8385,7 +8402,7 @@ const Xe = "footer_", Gt = "SiteFooter", Kr = ({ group: t }) => {
           return c[x].order ? /* @__PURE__ */ a.jsxs(
             "li",
             {
-              className: S({
+              className: E({
                 [c[x].className]: c[x].className
               }),
               children: [
@@ -8394,7 +8411,7 @@ const Xe = "footer_", Gt = "SiteFooter", Kr = ({ group: t }) => {
                   Jt,
                   {
                     id: `${t}.${x}.${w}`,
-                    ...E
+                    ...S
                   },
                   w
                 )) })
@@ -8405,7 +8422,7 @@ const Xe = "footer_", Gt = "SiteFooter", Kr = ({ group: t }) => {
             Jt,
             {
               id: `${t}.${x}`,
-              ...E
+              ...S
             },
             x
           );
@@ -8462,7 +8479,7 @@ const vc = { height: 67, height_desktop: 83 }, Ha = ({ showNavigation: t = !0 })
       "nav",
       {
         id: "header",
-        className: S({
+        className: E({
           "logged-in": s,
           "logged-out": !s,
           visible: d
@@ -8584,7 +8601,7 @@ const vc = { height: 67, height_desktop: 83 }, Ha = ({ showNavigation: t = !0 })
     /* @__PURE__ */ a.jsx(
       "div",
       {
-        className: S("overlay", {
+        className: E("overlay", {
           open: l.navigation || l.account || !i.search && l.search
         })
       }
@@ -8631,14 +8648,14 @@ const bc = () => {
     "div",
     {
       id: "wrapper",
-      className: S(o, x, { "has-footer": l }),
+      className: E(o, x, { "has-footer": l }),
       children: [
         /* @__PURE__ */ a.jsx(Ha, { showNavigation: d }),
         /* @__PURE__ */ a.jsxs("section", { id: "content-wrapper", children: [
           _ && /* @__PURE__ */ a.jsx(
             "div",
             {
-              className: S("additional-content prepended", {
+              className: E("additional-content prepended", {
                 "large-modal": p === "large"
               }),
               children: _
@@ -8647,7 +8664,7 @@ const bc = () => {
           Y.createElement(u === "bold" ? qa : "div", {
             id: "content",
             children: v,
-            className: S({ "large-modal": p === "large" })
+            className: E({ "large-modal": p === "large" })
           })
         ] }),
         y && /* @__PURE__ */ a.jsx("div", { className: "additional-content appended", children: y }),
@@ -8708,7 +8725,7 @@ const lu = ({
   }), d.length < 1 ? null : /* @__PURE__ */ a.jsx(
     "ul",
     {
-      className: S("tags text-small", e, s, {
+      className: E("tags text-small", e, s, {
         "one-line": n
       }),
       children: d.map((l) => {
@@ -8737,7 +8754,7 @@ const uu = ({
   className: o = ""
 }) => {
   const c = H();
-  return t.length === 0 ? null : /* @__PURE__ */ a.jsxs("div", { className: S("members-list", o), children: [
+  return t.length === 0 ? null : /* @__PURE__ */ a.jsxs("div", { className: E("members-list", o), children: [
     /* @__PURE__ */ a.jsxs("h1", { children: [
       c.formatMessage({ id: "membersList" }),
       /* @__PURE__ */ a.jsx("span", { className: "count", children: e })
@@ -8773,7 +8790,7 @@ const du = ({
   l > 99 ? l = 100 : l < 1 && (l = 0);
   const { highlightPercentage: u = !1 } = o;
   return Y.createElement(t, {
-    className: S("course-progression", c, {
+    className: E("course-progression", c, {
       "highlight-percentage": u,
       "has-circle-graph": i === "circle"
     }),
@@ -8812,7 +8829,7 @@ const xc = ({
   title: r,
   className: s = ""
 }) => Y.createElement(t, {
-  className: S("lesson-name", s),
+  className: E("lesson-name", s),
   "data-number": `${e}.${n}`,
   children: r
 });
@@ -8825,8 +8842,8 @@ const wc = ({
   children: i
 }) => {
   const o = H(), c = Qn(`lessonType_${s}`) ? o.formatMessage({ id: `lessonType_${s}` }) : Zs(s || "");
-  return /* @__PURE__ */ a.jsxs("small", { className: S("content-type", { [t]: t !== "default" }), children: [
-    /* @__PURE__ */ a.jsx("span", { className: S("type", n), children: c }),
+  return /* @__PURE__ */ a.jsxs("small", { className: E("content-type", { [t]: t !== "default" }), children: [
+    /* @__PURE__ */ a.jsx("span", { className: E("type", n), children: c }),
     " ",
     e > 0 && !r && /* @__PURE__ */ a.jsx(Xn, { time: e }),
     " ",
@@ -8880,18 +8897,18 @@ const fu = ({
             contentType: _,
             icon: y,
             image: x,
-            isIntroduction: E,
+            isIntroduction: S,
             optional: w,
             slug: b,
             subsectionId: F,
             title: R,
             type: Q
           }) => {
-            const B = s && e || E, $ = {};
+            const B = s && e || S, $ = {};
             return x && ($.style = { "--image": `url(${x})` }), /* @__PURE__ */ a.jsx(
               "li",
               {
-                className: S({
+                className: E({
                   article: _ === St.ARTICLE,
                   discussion: _ === St.DISCUSSION,
                   quiz: _ === St.QUIZ,
@@ -8956,7 +8973,7 @@ const mu = ({
         hover: "check-inside-circle_no-overlap_inverted"
       },
       onClick: e,
-      className: S("mark-complete-button center gtm-trackable", {
+      className: E("mark-complete-button center gtm-trackable", {
         completed: t
       }),
       "data-gtm-event-type": "mark-as-complete",
@@ -9011,7 +9028,7 @@ const we = "discussion_form_", ar = ({
         "data-testid": "loading-placeholder"
       }
     );
-  const E = (j) => {
+  const S = (j) => {
     const N = j.target.value;
     p(N);
     let A;
@@ -9124,7 +9141,7 @@ const we = "discussion_form_", ar = ({
     "form",
     {
       id: w,
-      className: S("discussion-card discussion-form", {
+      className: E("discussion-card discussion-form", {
         "no-styling": n.isInWrapper && n.isEditing
       }),
       "data-testid": `discussion-${t.type}-form`,
@@ -9151,7 +9168,7 @@ const we = "discussion_form_", ar = ({
               t.type,
               "action"
             ),
-            onChange: E,
+            onChange: S,
             value: _ === "submitting" && !g ? "" : m,
             maxLength: i,
             "aria-invalid": !!g,
@@ -9252,7 +9269,7 @@ const An = () => {
   const [u, f] = X(e), [m, p] = X(s), [g, v] = X(!1), [_, y] = X(!1), x = wt(
     () => Ec(n, Dn),
     [n]
-  ), E = (b) => {
+  ), S = (b) => {
     if (b.preventDefault(), b.stopPropagation(), y(!1), bt)
       return An(), !1;
     if (An(), g || !o)
@@ -9278,12 +9295,12 @@ const An = () => {
     }
   };
   return Y.createElement(t, {
-    className: S("likes-wrapper text-medium action-button", {
+    className: E("likes-wrapper text-medium action-button", {
       "show-spinner": g,
       "is-liked": m,
       disabled: !o
     }),
-    onClick: E,
+    onClick: S,
     onMouseEnter: () => {
       y(!0);
     },
@@ -9303,7 +9320,7 @@ const An = () => {
           variant: "tertiary",
           size: "medium",
           icon: { icon: m ? "heart" : "heart_empty", animate: "bounce" },
-          className: S({ "do-animation": m && !s }),
+          className: E({ "do-animation": m && !s }),
           screenreaderText: o ? l.formatMessage(
             {
               id: `discussion_likes_${m ? "unlike" : "like"}`
@@ -9314,7 +9331,7 @@ const An = () => {
               })
             }
           ) : !1,
-          onClick: E,
+          onClick: S,
           disabled: !o,
           "aria-hidden": !o,
           "data-testid": "like-button",
@@ -9325,7 +9342,7 @@ const An = () => {
       /* @__PURE__ */ a.jsx(
         "span",
         {
-          className: S("number-of-likes", { "no-likes": u === 0 }),
+          className: E("number-of-likes", { "no-likes": u === 0 }),
           "data-testid": "number-of-likes",
           children: l.formatMessage(
             { id: `discussion_likes${r ? "_short" : ""}` },
@@ -9387,7 +9404,7 @@ const Me = "discussion_", Cc = 280, cn = ({
   children: v,
   isTruncated: _ = !1
 }) => {
-  const y = H(), x = Ee(De), E = Ee(sr), { author: w, canLike: b, createdAt: F, id: R, likes: Q = 0, userLiked: B, comments: $ = 0 } = e, C = x && x.id && typeof w != "string" && w.id && w.id === x.id || !1, k = typeof b == "boolean" ? b : n ? !C : !1, j = C && (!e.createdAt || Ys(e.createdAt, 10, "seconds")), N = pe(null), [A, W] = X({
+  const y = H(), x = Ee(De), S = Ee(sr), { author: w, canLike: b, createdAt: F, id: R, likes: Q = 0, userLiked: B, comments: $ = 0 } = e, C = x && x.id && typeof w != "string" && w.id && w.id === x.id || !1, k = typeof b == "boolean" ? b : n ? !C : !1, j = C && (!e.createdAt || Ys(e.createdAt, 10, "seconds")), N = pe(null), [A, W] = X({
     body: e && e.body || "",
     isEditing: !1,
     didEdit: e && e.isEdited || !1
@@ -9432,7 +9449,7 @@ const Me = "discussion_", Cc = 280, cn = ({
       q(`${Me}form_error`);
     }
   }, V = () => {
-    E && E.updateConversation && E.updateConversation({ showForm: !0 }), setTimeout(() => {
+    S && S.updateConversation && S.updateConversation({ showForm: !0 }), setTimeout(() => {
       var Ne, Ce, Ue;
       const oe = `reply-form-${(e.type === "answer" ? e.slug : ((Ne = e.slugs) == null ? void 0 : Ne.reply) || ((Ce = e.slugs) == null ? void 0 : Ce.answer) || ((Ue = e.slugs) == null ? void 0 : Ue.question) || "").toLowerCase().slice(-15)}`, D = document.getElementById(oe), ve = document.getElementById(`${oe}-input`);
       ve && ve.focus(), D && D.scrollIntoView({ behavior: "smooth" });
@@ -9486,7 +9503,7 @@ const Me = "discussion_", Cc = 280, cn = ({
       ...Xo(`delete-${e.slug}-modal`, Z)
     }
   ), Y.createElement(t, {
-    className: S("discussion-post", p, {
+    className: E("discussion-post", p, {
       [K]: !p || !p.includes("highlighted-text-box")
     }),
     ref: N,
@@ -9496,7 +9513,7 @@ const Me = "discussion_", Cc = 280, cn = ({
         "div",
         {
           id: R || e.slug,
-          className: S("discussion-card", e.type, {
+          className: E("discussion-card", e.type, {
             editing: A.isEditing,
             "has-link": m.post && !A.isEditing
           }),
@@ -9568,7 +9585,7 @@ const Me = "discussion_", Cc = 280, cn = ({
             !A.isEditing && !(i != null && i.actionBar) && /* @__PURE__ */ a.jsxs(
               "ul",
               {
-                className: S("actions text-medium", e.type),
+                className: E("actions text-medium", e.type),
                 "data-testid": `${e.type}-actions`,
                 children: [
                   !i.likes && /* @__PURE__ */ a.jsx(
@@ -10289,29 +10306,29 @@ const pu = ({
         }
       }
     ),
-    c == null ? void 0 : c.map((E, w) => {
+    c == null ? void 0 : c.map((S, w) => {
       var A, W, Z, z, K, T, P, q;
       const {
         id: b,
         own_reactions: F,
         latest_reactions: R,
         reaction_counts: Q
-      } = E, B = (((A = R == null ? void 0 : R.like) == null ? void 0 : A.length) || 0) > 0, $ = (((W = F == null ? void 0 : F.like) == null ? void 0 : W.length) || 0) > 0, C = $ ? F == null ? void 0 : F.like[0].id : "", k = B ? (Z = R == null ? void 0 : R.like) == null ? void 0 : Z.map((L) => {
+      } = S, B = (((A = R == null ? void 0 : R.like) == null ? void 0 : A.length) || 0) > 0, $ = (((W = F == null ? void 0 : F.like) == null ? void 0 : W.length) || 0) > 0, C = $ ? F == null ? void 0 : F.like[0].id : "", k = B ? (Z = R == null ? void 0 : R.like) == null ? void 0 : Z.map((L) => {
         var U, te, G;
         return {
           id: (U = L == null ? void 0 : L.user) == null ? void 0 : U.id,
           name: (G = (te = L == null ? void 0 : L.user) == null ? void 0 : te.data) == null ? void 0 : G.name
         };
-      }) : !1, j = E == null ? void 0 : E.actor, N = (j == null ? void 0 : j.id) === (y == null ? void 0 : y.id);
+      }) : !1, j = S == null ? void 0 : S.actor, N = (j == null ? void 0 : j.id) === (y == null ? void 0 : y.id);
       return /* @__PURE__ */ a.jsxs(yt, { children: [
         /* @__PURE__ */ a.jsx(
           cn,
           {
             content: {
               type: "post",
-              body: E == null ? void 0 : E.content,
+              body: S == null ? void 0 : S.content,
               canLike: on(n, N),
-              createdAt: (E == null ? void 0 : E.time) || "",
+              createdAt: (S == null ? void 0 : S.time) || "",
               slugs: {
                 question: `${t}/${e}`,
                 answer: b
@@ -11165,12 +11182,12 @@ const ol = ({
         const {
           id: y,
           own_children: x,
-          latest_children: E,
+          latest_children: S,
           children_counts: w
         } = _, F = (((A = x == null ? void 0 : x.like) == null ? void 0 : A.length) || 0) > 0 ? (W = x == null ? void 0 : x.like) == null ? void 0 : W.find((V) => {
           var ee;
           return ((ee = V == null ? void 0 : V.user) == null ? void 0 : ee.id) === (v == null ? void 0 : v.id);
-        }) : !1, R = F ? F == null ? void 0 : F.id : "", Q = !!F, $ = (((Z = E == null ? void 0 : E.like) == null ? void 0 : Z.length) || 0) > 0 ? (z = E == null ? void 0 : E.like) == null ? void 0 : z.map((V) => {
+        }) : !1, R = F ? F == null ? void 0 : F.id : "", Q = !!F, $ = (((Z = S == null ? void 0 : S.like) == null ? void 0 : Z.length) || 0) > 0 ? (z = S == null ? void 0 : S.like) == null ? void 0 : z.map((V) => {
           var ee, re, O;
           return {
             id: (ee = V == null ? void 0 : V.user) == null ? void 0 : ee.id,
@@ -11258,7 +11275,7 @@ const ol = ({
           content: { type: "reply", slugs: {} },
           functions: {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            create: (E, { body: w }) => p({ activityId: n, content: w })
+            create: (S, { body: w }) => p({ activityId: n, content: w })
           },
           meta: { isEditing: !1, showSuccessMessage: !1 },
           placeholder: c.formatMessage({ id: "discussion_responses_placeholder" })
@@ -11272,9 +11289,9 @@ const ol = ({
         }
       }
     ),
-    d == null ? void 0 : d.map((E) => {
+    d == null ? void 0 : d.map((S) => {
       var z, K, T, P, q, L, U, te, G, V, ee, re;
-      const { id: w, own_children: b, latest_children: F, children_counts: R } = E, B = (((z = b == null ? void 0 : b.like) == null ? void 0 : z.length) || 0) > 0 ? (K = b == null ? void 0 : b.like) == null ? void 0 : K.find((O) => {
+      const { id: w, own_children: b, latest_children: F, children_counts: R } = S, B = (((z = b == null ? void 0 : b.like) == null ? void 0 : z.length) || 0) > 0 ? (K = b == null ? void 0 : b.like) == null ? void 0 : K.find((O) => {
         var oe;
         return ((oe = O == null ? void 0 : O.user) == null ? void 0 : oe.id) === (x == null ? void 0 : x.id);
       }) : !1, $ = B ? B == null ? void 0 : B.id : "", C = !!B, j = (((T = F == null ? void 0 : F.like) == null ? void 0 : T.length) || 0) > 0 ? (P = F == null ? void 0 : F.like) == null ? void 0 : P.map((O) => {
@@ -11283,9 +11300,9 @@ const ol = ({
           id: (oe = O == null ? void 0 : O.user) == null ? void 0 : oe.id,
           name: (ve = (D = O == null ? void 0 : O.user) == null ? void 0 : D.data) == null ? void 0 : ve.name
         };
-      }) : !1, N = E == null ? void 0 : E.user, A = (N == null ? void 0 : N.id) === (x == null ? void 0 : x.id), W = on(r, A), Z = typeof E.data.content == "string" ? (q = E == null ? void 0 : E.data) == null ? void 0 : q.content : (
+      }) : !1, N = S == null ? void 0 : S.user, A = (N == null ? void 0 : N.id) === (x == null ? void 0 : x.id), W = on(r, A), Z = typeof S.data.content == "string" ? (q = S == null ? void 0 : S.data) == null ? void 0 : q.content : (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ((U = (L = E == null ? void 0 : E.data) == null ? void 0 : L.content) == null ? void 0 : U.text) || ""
+        ((U = (L = S == null ? void 0 : S.data) == null ? void 0 : L.content) == null ? void 0 : U.text) || ""
       );
       return /* @__PURE__ */ a.jsx(kc, { children: /* @__PURE__ */ a.jsx(
         cn,
@@ -11295,7 +11312,7 @@ const ol = ({
             type: "reply",
             body: Z,
             canLike: W,
-            createdAt: E == null ? void 0 : E.created_at,
+            createdAt: S == null ? void 0 : S.created_at,
             slugs: {
               question: `${t}/${e}`,
               answer: n,
@@ -11485,7 +11502,7 @@ const gu = ({
         text: l.formatMessage({ id: "activitySection_notFoundError" })
       }
     );
-  const { own_reactions: y, latest_reactions: x } = f, E = (((B = x == null ? void 0 : x.like) == null ? void 0 : B.length) || 0) > 0, w = ((($ = y == null ? void 0 : y.like) == null ? void 0 : $.length) || 0) > 0, b = w ? y == null ? void 0 : y.like[0].id : "", F = E ? (C = x == null ? void 0 : x.like) == null ? void 0 : C.map((K) => {
+  const { own_reactions: y, latest_reactions: x } = f, S = (((B = x == null ? void 0 : x.like) == null ? void 0 : B.length) || 0) > 0, w = ((($ = y == null ? void 0 : y.like) == null ? void 0 : $.length) || 0) > 0, b = w ? y == null ? void 0 : y.like[0].id : "", F = S ? (C = x == null ? void 0 : x.like) == null ? void 0 : C.map((K) => {
     var T, P, q;
     return {
       id: (T = K == null ? void 0 : K.user) == null ? void 0 : T.id,