fansunited-frontend-components 0.0.69 → 0.0.71

package/EitherOrPlay.js

@@ -1,116 +1,118 @@
-import { jsx as t, jsxs as g, Fragment as De } from "react/jsx-runtime";
-import { useState as D, useEffect as me, useRef as qe, useCallback as Oe } from "react";
-import { l as Pe, d as be, k as ze, B as r, u as se, i as xe, b as K, c as fe, f as pe, G as Ht, a as Me, e as Gt, W as Se, m as St, n as jt } from "./chunks/PrizeCard-CXjFADAN.js";
-import { P as Vt } from "./chunks/Portal-bNE7Trh9.js";
+import { jsx as t, jsxs as h, Fragment as et } from "react/jsx-runtime";
+import { useState as B, useEffect as fe, useRef as mt, useCallback as Ge } from "react";
+import { l as $e, d as Te, k as Ve, B as r, u as Q, i as Se, b as q, c as pe, f as ve, L as Xt, q as Zt, a as Ne, e as Jt, W as Pe, m as Lt, n as Qt } from "./chunks/PrizeCard-CyVJJLo1.js";
+import { P as en } from "./chunks/Portal-D8t1Jd5e.js";
 import "react-dom";
-import { S as He } from "./chunks/Spinner-C219bcnm.js";
-import { Z as Nt } from "./chunks/index-BBrO1Htm.js";
-import { g as Yt, h as re, e as Ge, a as Ct } from "./chunks/helpers-D8cWUfGf.js";
-import { S as _t, N as qt, O as Kt } from "./chunks/NotFoundSkeleton-CJZIRj5-.js";
-import { u as Xt, b as je, d as Ke, a as Xe } from "./chunks/useImageVariant-Cs6lWUs2.js";
-import { A as Ze, O as Zt } from "./chunks/ArrowRightAlt-DrBMgptf.js";
-import { T as x } from "./chunks/Typography-DFdgIDQS.js";
-import { F as Fe, a as It } from "./chunks/FavoriteBorder-Lr6swB6-.js";
-import { E as ve } from "./chunks/EmojiEvents-g001ss_z.js";
-import { B as ge } from "./chunks/Button-GawVOPKi.js";
-import { C as Ne } from "./chunks/CheckCircle-DgKcR_no.js";
-import { T as Jt } from "./chunks/TimerOutlined-BUL4BZFp.js";
-import { S as we } from "./chunks/Stack-JIDLCVx0.js";
-import { A as Qt } from "./chunks/AccessTime-7cim24ED.js";
-import { A as en, S as Tt, O as tn } from "./chunks/OverlayApiErrorSkeleton-JMWA0FV8.js";
-import { P as nn } from "./chunks/Person-DB_bEPcg.js";
-import { S as rn } from "./chunks/Sheet-vOgATocO.js";
-import { T as on } from "./chunks/Table-Cx7htUDp.js";
-import { A as ln } from "./chunks/Avatar-RBMU1Gkk.js";
-import { t as vt, T as Pt, a as kt, b as Ee, c as We } from "./chunks/Tabs-CIJK8YZY.js";
-import { S as an, a as sn, O as cn, b as dn } from "./chunks/OverlayLeadAfterCollection-BwF9MvIB.js";
-import { C as un } from "./chunks/CollectLeadForm-D0P_JHmT.js";
-const Ye = Pe(/* @__PURE__ */ t("path", {
+import { g as tn, h as oe, e as it, a as Ot, c as nn } from "./chunks/helpers-DgUDSfd1.js";
+import { S as lt } from "./chunks/Spinner-Bb4eb64F.js";
+import { C as at, A as gt, a as rn, S as Bt, b as Dt, O as on, c as $t, d as Ft, u as ln } from "./chunks/useConsents-CIhPZNel.js";
+import { Z as an } from "./chunks/index-BBrO1Htm.js";
+import { S as sn, N as cn, O as dn } from "./chunks/NotFoundSkeleton-DKxLhOwI.js";
+import { u as un, b as st, d as ht, a as ft } from "./chunks/useImageVariant-D6aho5sy.js";
+import { b as Et } from "./chunks/ConsentsList-CtKgLYa8.js";
+import { D as xt } from "./chunks/DirectionScope-BGDPaR6B.js";
+import { T as C } from "./chunks/Typography-B8CtvKkm.js";
+import { F as tt, a as Ut } from "./chunks/FavoriteBorder-DrC_eOCd.js";
+import { E as De } from "./chunks/EmojiEvents-CpsA2Qo0.js";
+import { B as ye } from "./chunks/Button-CO-k2gLb.js";
+import { C as ct } from "./chunks/CheckCircle-BzM-2e1z.js";
+import { T as mn } from "./chunks/TimerOutlined-DeWQFv5g.js";
+import { S as je } from "./chunks/Stack-DX41loGb.js";
+import { A as gn } from "./chunks/AccessTime-BkHriW4j.js";
+import { P as hn } from "./chunks/Person-CLQl7Sxs.js";
+import { S as fn } from "./chunks/Sheet-sYNAL7gX.js";
+import { T as xn } from "./chunks/Table-C09wF6nK.js";
+import { A as bn } from "./chunks/Avatar-CEbT4X-o.js";
+import { t as Wt, T as Mt, a as Ht, b as nt, c as rt } from "./chunks/Tabs-Dhih1Lqb.js";
+import { S as yn, O as pn } from "./chunks/OverlaySignInSkeleton-DEiH7fmp.js";
+import { C as Sn } from "./chunks/CollectLeadForm-BZj-9IDt.js";
+import { O as Cn } from "./chunks/OverlayScoreStateWrapperSkeleton-Ch_E6KQ6.js";
+const dt = $e(/* @__PURE__ */ t("path", {
   d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"
-}), "Cancel"), At = Pe(/* @__PURE__ */ t("path", {
+}), "Cancel"), Gt = $e(/* @__PURE__ */ t("path", {
   d: "M9.01 14H2v2h7.01v3L13 15l-3.99-4zm5.98-1v-3H22V8h-7.01V5L11 9z"
-}), "CompareArrows"), wt = Pe(/* @__PURE__ */ t("path", {
+}), "CompareArrows"), jt = $e(/* @__PURE__ */ t("path", {
   d: "M7.5 21H2V9h5.5zm7.25-18h-5.5v18h5.5zM22 11h-5.5v10H22z"
-}), "Leaderboard"), mn = Pe(/* @__PURE__ */ t("path", {
+}), "Leaderboard"), In = $e(/* @__PURE__ */ t("path", {
   d: "M16 17.01V10h-2v7.01h-3L15 21l4-3.99zM9 3 5 6.99h3V14h2V6.99h3z"
-}), "SwapVert"), zt = Pe(/* @__PURE__ */ t("path", {
+}), "SwapVert"), Vt = $e(/* @__PURE__ */ t("path", {
   d: "M9 1h6v2H9zm10.03 6.39 1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42C16.07 4.74 14.12 4 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9 9-4.03 9-9c0-2.12-.74-4.07-1.97-5.61M13 14h-2V8h2z"
-}), "Timer"), gn = Pe(/* @__PURE__ */ t("path", {
+}), "Timer"), kn = $e(/* @__PURE__ */ t("path", {
   d: "M9.68 13.69 12 11.93l2.31 1.76-.88-2.85L15.75 9h-2.84L12 6.19 11.09 9H8.25l2.31 1.84zM20 10c0-4.42-3.58-8-8-8s-8 3.58-8 8c0 2.03.76 3.87 2 5.28V23l6-2 6 2v-7.72c1.24-1.41 2-3.25 2-5.28m-8-6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6 2.69-6 6-6"
-}), "WorkspacePremium"), fn = (e, n) => {
-  const [i, s] = D(null), d = async () => {
+}), "WorkspacePremium"), Tn = (e, n) => {
+  const [l, i] = B(null), s = async () => {
     try {
-      const f = await n.miniGames.getEitherOrById(e, !0);
-      s(f);
-    } catch (f) {
-      console.error(f), s(new Nt());
+      const g = await n.miniGames.getEitherOrById(e, !0);
+      i(g);
+    } catch (g) {
+      console.error(g), i(new an());
     }
   };
-  return me(() => (d(), () => s(null)), [e, n]), i;
-}, hn = (e, n, i = !1) => {
-  const [s, d] = D(null), [f, l] = D(!1), [u, a] = D(!1), m = async () => {
+  return fe(() => (s(), () => i(null)), [e, n]), l;
+}, vn = (e, n, l = !1) => {
+  const [i, s] = B(null), [g, o] = B(!1), [m, c] = B(!1), u = async () => {
     try {
-      const y = await n.miniGames.getMyEitherOrStats(e);
-      d(y);
-    } catch (y) {
-      if (d(null), n.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
-        const I = y;
-        if (I.error.code === 404)
+      const f = await n.miniGames.getMyEitherOrStats(e);
+      s(f);
+    } catch (f) {
+      if (s(null), n.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
+        const x = f;
+        if (x.error.code === 404)
           return;
-        if (I.error.code === 401 || I.error.code === 403) {
-          l(!0);
+        if (x.error.code === 401 || x.error.code === 403) {
+          o(!0);
           return;
         }
-        a(!0);
+        c(!0);
         return;
       }
-      const h = y;
-      if (h.data.error.code === 404)
+      const p = f;
+      if (p.data.error.code === 404)
         return;
-      if (h.data.error.code === 401 || h.data.error.code === 403) {
-        l(!0);
+      if (p.data.error.code === 401 || p.data.error.code === 403) {
+        o(!0);
         return;
       }
-      a(!0);
+      c(!0);
     }
   };
-  return me(() => (m(), () => {
-    d(null), l(!1), a(!1);
-  }), [e, n, i]), {
-    myStats: s,
-    setMyStats: d,
-    isUnauthorized: f,
-    isApiError: u,
-    setIsUnauthorized: l,
-    setIsApiError: a
+  return fe(() => (u(), () => {
+    s(null), o(!1), c(!1);
+  }), [e, n, l]), {
+    myStats: i,
+    setMyStats: s,
+    isUnauthorized: g,
+    isApiError: m,
+    setIsUnauthorized: o,
+    setIsApiError: c
   };
-}, q = {
+}, _ = {
   LOADING: "loading",
   TUTORIAL: "tutorial",
   PLAYING: "playing",
   RESULTS: "results"
-}, de = (e) => {
-  const n = be().secondary, i = ze(), s = Yt(
+}, ue = (e) => {
+  const n = Te().secondary, l = Ve(), i = tn(
     e.primaryUrl,
     e.secondaryUrl,
     "logo"
   );
   if (!e.brandingLogo)
     return null;
-  const d = () => {
-    s && window.open(s, "_blank", "noopener,noreferrer");
-  }, f = /* @__PURE__ */ t(
+  const s = () => {
+    i && window.open(i, "_blank", "noopener,noreferrer");
+  }, g = /* @__PURE__ */ t(
     "img",
     {
       src: e.brandingLogo,
       alt: "branding-logo",
       style: { maxHeight: "50px", maxWidth: "100px" }
     }
-  ), l = s ? typeof window > "u" ? /* @__PURE__ */ t(
+  ), o = i ? typeof window > "u" ? /* @__PURE__ */ t(
     r,
     {
       component: "a",
-      href: s,
+      href: i,
       target: "_blank",
       rel: "noopener noreferrer",
       sx: {
@@ -118,17 +120,17 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
         textDecoration: "none",
         display: "inline-flex"
       },
-      children: f
+      children: g
     }
   ) : /* @__PURE__ */ t(
     r,
     {
-      onClick: d,
+      onClick: s,
       sx: { cursor: "pointer", display: "inline-flex" },
-      children: f
+      children: g
     }
-  ) : f;
-  return e.isCentered || i ? /* @__PURE__ */ g(
+  ) : g;
+  return e.isCentered || l ? /* @__PURE__ */ h(
     r,
     {
       sx: {
@@ -142,7 +144,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       },
       children: [
         e.label && /* @__PURE__ */ t(
-          x,
+          C,
           {
             level: "body-sm",
             sx: {
@@ -157,10 +159,10 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
             children: e.label
           }
         ),
-        l
+        o
       ]
     }
-  ) : /* @__PURE__ */ g(
+  ) : /* @__PURE__ */ h(
     r,
     {
       sx: {
@@ -173,7 +175,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       },
       children: [
         e.label && /* @__PURE__ */ t(
-          x,
+          C,
           {
             level: "body-sm",
             sx: {
@@ -188,74 +190,76 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
             children: e.label
           }
         ),
-        l
+        o
       ]
     }
   );
-}, xn = ({
+}, Pn = ({
   onStart: e,
   game: n,
-  signInCTA: i,
-  showSignInCTA: s
+  signInCTA: l,
+  showSignInCTA: i,
+  consents: s,
+  isSubmitting: g
 }) => {
-  var k, v, W, R, F, E, L, o, z;
-  const { t: d } = se(), f = xe(), l = ze(), u = ((k = n == null ? void 0 : n.branding) == null ? void 0 : k.colors) || null, a = (u == null ? void 0 : u.primaryColor) || K().palette.primary.plainColor, m = K().palette.primary.onPrimary, y = (u == null ? void 0 : u.contentColor) || K().textColor, b = K().surfaceVariant, h = be().primary, I = fe().xl, O = fe().md, p = pe(), S = re(a || ""), C = re(b || ""), P = S ? `rgba(${S.replace(/[^\d,]/g, "")}, 0.12)` : `${a}20`, c = f ? ((W = (v = n == null ? void 0 : n.branding) == null ? void 0 : v.images) == null ? void 0 : W.mobileLogo) || ((F = (R = n == null ? void 0 : n.branding) == null ? void 0 : R.images) == null ? void 0 : F.mainLogo) || "" : ((L = (E = n == null ? void 0 : n.branding) == null ? void 0 : E.images) == null ? void 0 : L.mainLogo) || "", B = [
+  var D, P, $, L, N, R, k, O, H, j, V;
+  const { t: o } = Q(), m = Se(), c = Ve(), u = ((D = n == null ? void 0 : n.branding) == null ? void 0 : D.colors) || null, f = (u == null ? void 0 : u.primaryColor) || q().palette.primary.plainColor, b = q().palette.primary.onPrimary, p = (u == null ? void 0 : u.contentColor) || q().textColor, x = q().surfaceVariant, A = Te().primary, E = pe().xl, w = pe().md, I = ve(), y = oe(f || ""), d = oe(x || ""), z = y ? `rgba(${y.replace(/[^\d,]/g, "")}, 0.12)` : `${f}20`, S = m ? (($ = (P = n == null ? void 0 : n.branding) == null ? void 0 : P.images) == null ? void 0 : $.mobileLogo) || ((N = (L = n == null ? void 0 : n.branding) == null ? void 0 : L.images) == null ? void 0 : N.mainLogo) || "" : ((k = (R = n == null ? void 0 : n.branding) == null ? void 0 : R.images) == null ? void 0 : k.mainLogo) || "", v = [
     {
-      icon: /* @__PURE__ */ t(zt, { sx: { fontSize: "1.1em" } }),
-      title: d("eitherOr.tutorial.step1Title"),
-      description: d("eitherOr.tutorial.step1Description", {
+      icon: /* @__PURE__ */ t(Vt, { sx: { fontSize: "1.1em" } }),
+      title: o("eitherOr.tutorial.step1Title"),
+      description: o("eitherOr.tutorial.step1Description", {
         seconds: (n == null ? void 0 : n.time) ?? 10
       })
     },
     {
-      icon: /* @__PURE__ */ t(Fe, { sx: { fontSize: "1.1em" } }),
-      title: d("eitherOr.tutorial.step2Title", {
+      icon: /* @__PURE__ */ t(tt, { sx: { fontSize: "1.1em" } }),
+      title: o("eitherOr.tutorial.step2Title", {
         lives: (n == null ? void 0 : n.lives) ?? 3,
         context: String((n == null ? void 0 : n.lives) ?? 3)
       }),
-      description: d("eitherOr.tutorial.step2Description", {
+      description: o("eitherOr.tutorial.step2Description", {
         lives: (n == null ? void 0 : n.lives) ?? 3,
         context: String((n == null ? void 0 : n.lives) ?? 3)
       })
     },
     {
-      icon: /* @__PURE__ */ t(ve, { sx: { fontSize: "1.1em" } }),
-      title: d("eitherOr.tutorial.step3Title"),
-      description: d("eitherOr.tutorial.step3Description")
+      icon: /* @__PURE__ */ t(De, { sx: { fontSize: "1.1em" } }),
+      title: o("eitherOr.tutorial.step3Title"),
+      description: o("eitherOr.tutorial.step3Description")
     }
   ];
-  return n ? /* @__PURE__ */ t(r, { sx: { display: "flex", flexDirection: "column", p: p.md }, children: /* @__PURE__ */ g(
+  return n ? /* @__PURE__ */ t(r, { sx: { display: "flex", flexDirection: "column", p: I.md }, children: /* @__PURE__ */ h(
     r,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
-        gap: f ? p.lg : p.md
+        gap: m ? I.lg : I.md
       },
       children: [
         /* @__PURE__ */ t(
           r,
           {
             sx: {
-              borderRadius: O,
+              borderRadius: w,
               overflow: "hidden",
-              bgcolor: C ? `rgba(${C.replace(/[^\d,]/g, "")}, 0.5)` : b,
+              bgcolor: d ? `rgba(${d.replace(/[^\d,]/g, "")}, 0.5)` : x,
               display: "flex",
               flexDirection: "column",
               backdropFilter: "blur(4px)"
             },
-            children: B.map((G, U) => {
-              const N = U === B.length - 1;
-              return /* @__PURE__ */ g(r, { children: [
-                /* @__PURE__ */ g(
+            children: v.map((a, W) => {
+              const T = W === v.length - 1;
+              return /* @__PURE__ */ h(r, { children: [
+                /* @__PURE__ */ h(
                   r,
                   {
                     sx: {
                       display: "flex",
                       alignItems: "flex-start",
-                      gap: p.md,
-                      px: p.md,
-                      py: p.md
+                      gap: I.md,
+                      px: I.md,
+                      py: I.md
                     },
                     children: [
                       /* @__PURE__ */ t(
@@ -265,140 +269,165 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                             width: 36,
                             height: 36,
                             borderRadius: "50%",
-                            bgcolor: P,
-                            color: a,
+                            bgcolor: z,
+                            color: f,
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
                             flexShrink: 0
                           },
-                          children: G.icon
+                          children: a.icon
                         }
                       ),
-                      /* @__PURE__ */ g(r, { sx: { flex: 1, minWidth: 0, pt: "2px" }, children: [
+                      /* @__PURE__ */ h(r, { sx: { flex: 1, minWidth: 0, pt: "2px" }, children: [
                         /* @__PURE__ */ t(
-                          x,
+                          C,
                           {
                             sx: {
-                              fontFamily: h,
+                              fontFamily: A,
                               fontWeight: 700,
                               fontSize: "0.875em",
                               lineHeight: 1.3,
-                              color: y
+                              color: p
                             },
-                            children: G.title
+                            children: a.title
                           }
                         ),
                         /* @__PURE__ */ t(
-                          x,
+                          C,
                           {
                             sx: {
-                              fontFamily: h,
+                              fontFamily: A,
                               fontWeight: 400,
                               fontSize: "0.75em",
                               lineHeight: 1.6,
-                              color: y,
+                              color: p,
                               opacity: 0.65,
-                              mt: p["2xs"]
+                              mt: I["2xs"]
                             },
-                            children: G.description
+                            children: a.description
                           }
                         )
                       ] })
                     ]
                   }
                 ),
-                !N && /* @__PURE__ */ t(
+                !T && /* @__PURE__ */ t(
                   r,
                   {
                     sx: {
                       height: "1px",
-                      mx: p.md,
-                      bgcolor: S ? `rgba(${S.replace(/[^\d,]/g, "")}, 0.1)` : `${a}1A`
+                      mx: I.md,
+                      bgcolor: y ? `rgba(${y.replace(/[^\d,]/g, "")}, 0.1)` : `${f}1A`
                     }
                   }
                 )
-              ] }, U);
+              ] }, W);
             })
           }
         ),
-        /* @__PURE__ */ g(
+        s != null && s.items.length ? /* @__PURE__ */ t(
           r,
           {
             sx: {
+              borderRadius: w,
+              bgcolor: d ? `rgba(${d.replace(/[^\d,]/g, "")}, 0.5)` : x,
+              p: I.md,
               display: "flex",
-              flexDirection: l ? "column" : "row",
-              justifyContent: c ? "space-between" : "flex-end",
+              flexDirection: "column",
+              backdropFilter: "blur(4px)"
+            },
+            children: /* @__PURE__ */ t(
+              at,
+              {
+                consents: s,
+                primaryColor: f,
+                textColor: p,
+                brandingUrls: (O = n == null ? void 0 : n.branding) == null ? void 0 : O.urls,
+                align: "center"
+              }
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ h(
+          r,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: c ? "column" : "row",
+              justifyContent: S ? "space-between" : "flex-end",
               alignItems: "center",
-              gap: p.lg
+              gap: I.lg
             },
             children: [
-              c && !l && /* @__PURE__ */ t(
-                de,
+              S && !c && /* @__PURE__ */ t(
+                ue,
                 {
-                  brandingLogo: c,
-                  textColor: y,
-                  label: ((o = n == null ? void 0 : n.labels) == null ? void 0 : o.sponsor) || null
+                  brandingLogo: S,
+                  textColor: p,
+                  label: ((H = n == null ? void 0 : n.labels) == null ? void 0 : H.sponsor) || null
                 }
               ),
               /* @__PURE__ */ t(
-                ge,
+                ye,
                 {
                   variant: "soft",
-                  endDecorator: /* @__PURE__ */ t(Ze, {}),
-                  onClick: s && i ? i.onClick : e,
+                  loading: g,
+                  endDecorator: /* @__PURE__ */ t(xt, { children: /* @__PURE__ */ t(gt, {}) }),
+                  onClick: i && l ? l.onClick : e,
                   sx: {
-                    borderRadius: I,
+                    borderRadius: E,
                     py: "10px",
                     pr: "12px",
                     pl: "16px",
-                    bgcolor: a,
-                    color: m,
+                    bgcolor: f,
+                    color: b,
                     transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
                     transform: "scale(1)",
                     alignSelf: "center",
-                    "&:hover": { bgcolor: a, transform: "scale(1.02)" },
-                    "&:active": { color: m, transform: "scale(0.98)" },
+                    "&:hover": { bgcolor: f, transform: "scale(1.02)" },
+                    "&:active": { color: b, transform: "scale(0.98)" },
                     "&:disabled": {
-                      bgcolor: a,
-                      color: m,
+                      bgcolor: f,
+                      color: b,
                       opacity: "12%"
                     },
-                    "--Icon-color": m,
+                    "--Icon-color": b,
                     "@keyframes pulse": {
                       "0%": { transform: "scale(1)" },
                       "50%": { transform: "scale(1.05)" },
                       "100%": { transform: "scale(1)" }
                     },
                     animation: "pulse 1s infinite",
-                    fontSize: "0.9375em"
+                    fontSize: "0.9375em",
+                    ...g ? Et(f, b) : {}
                   },
                   children: /* @__PURE__ */ t(
-                    x,
+                    C,
                     {
                       sx: {
-                        fontFamily: h,
+                        fontFamily: A,
                         fontWeight: 500,
                         fontSize: "0.9375em",
                         lineHeight: "24px",
                         letterSpacing: "0.46px",
                         textTransform: "uppercase",
-                        color: m,
-                        gap: p.xs,
+                        color: g ? "transparent" : b,
+                        gap: I.xs,
                         display: "flex",
                         alignItems: "center"
                       },
-                      children: s && i ? i.defaultLabel : d("eitherOr.buttons.start")
+                      children: i && l ? l.defaultLabel : ((j = s == null ? void 0 : s.labels) == null ? void 0 : j.ctaLabel) || o("eitherOr.buttons.start")
                     }
                   )
                 }
               ),
-              c && l && /* @__PURE__ */ t(
-                de,
+              S && c && /* @__PURE__ */ t(
+                ue,
                 {
-                  brandingLogo: c,
-                  textColor: y,
-                  label: ((z = n == null ? void 0 : n.labels) == null ? void 0 : z.sponsor) || null
+                  brandingLogo: S,
+                  textColor: p,
+                  label: ((V = n == null ? void 0 : n.labels) == null ? void 0 : V.sponsor) || null
                 }
               )
             ]
@@ -407,7 +436,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       ]
     }
   ) }) : null;
-}, bn = Ht`
+}, An = Xt`
   0% {
     opacity: 1;
     transform: translateY(0);
@@ -416,13 +445,13 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
     opacity: 0;
     transform: translateY(-20px);
   }
-`, Rt = {
+`, Nt = {
   pointsAdded: {
     position: "absolute",
     top: -20,
     right: 0,
     color: "primary.500",
-    animation: `${bn} 1s ease-out forwards`
+    animation: `${An} 1s ease-out forwards`
   },
   optionWrapper: {
     position: "relative",
@@ -465,22 +494,22 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
     borderRadius: "inherit",
     transform: "translateZ(0)"
   }
-}, Ue = ({
+}, ot = ({
   option: e,
   selected: n,
-  feedback: i,
-  onSelect: s,
-  pairId: d,
-  brandingPrimaryColor: f,
-  optionIndex: l = 0
+  feedback: l,
+  onSelect: i,
+  pairId: s,
+  brandingPrimaryColor: g,
+  optionIndex: o = 0
 }) => {
-  const u = K(), a = pe(), m = f || u.palette.primary.plainColor, y = u.palette.primary.onPrimary, b = u.palette.success.plainColor, h = u.palette.danger.plainColor, I = re(m || ""), O = I ? I.replace(/[^\d,]/g, "") : null, p = Xt(e.images ?? null), S = !!p, C = l === 0 ? "A" : "B", P = i.selectedOption === e.id, c = P && !!i.isCorrect || e.id === i.correctOptionId, B = P && !i.isCorrect || !!i.timedOut && e.id !== i.correctOptionId;
-  if (!S) {
-    const k = l === 0 ? "135deg" : "225deg", v = c ? `linear-gradient(${k}, ${b}20 0%, ${b}0D 100%)` : B ? `linear-gradient(${k}, ${h}20 0%, ${h}0D 100%)` : O ? `linear-gradient(${k}, rgba(${O}, 0.22) 0%, rgba(${O}, 0.08) 60%, rgba(${O}, 0.14) 100%)` : `linear-gradient(${k}, ${m}38 0%, ${m}14 60%, ${m}24 100%)`, W = O ? `repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(${O}, 0.04) 10px, rgba(${O}, 0.04) 11px)` : "none", R = c ? b : B ? h : O ? `rgba(${O}, 0.3)` : `${m}4D`, F = c ? b : B ? h : m;
-    return /* @__PURE__ */ g(
+  const m = q(), c = ve(), u = g || m.palette.primary.plainColor, f = m.palette.primary.onPrimary, b = m.palette.success.plainColor, p = m.palette.danger.plainColor, x = oe(u || ""), A = x ? x.replace(/[^\d,]/g, "") : null, E = un(e.images ?? null), w = !!E, I = o === 0 ? "A" : "B", y = l.selectedOption === e.id, d = y && !!l.isCorrect || e.id === l.correctOptionId, z = y && !l.isCorrect || !!l.timedOut && e.id !== l.correctOptionId;
+  if (!w) {
+    const S = o === 0 ? "135deg" : "225deg", v = d ? `linear-gradient(${S}, ${b}20 0%, ${b}0D 100%)` : z ? `linear-gradient(${S}, ${p}20 0%, ${p}0D 100%)` : A ? `linear-gradient(${S}, rgba(${A}, 0.22) 0%, rgba(${A}, 0.08) 60%, rgba(${A}, 0.14) 100%)` : `linear-gradient(${S}, ${u}38 0%, ${u}14 60%, ${u}24 100%)`, D = A ? `repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(${A}, 0.04) 10px, rgba(${A}, 0.04) 11px)` : "none", P = d ? b : z ? p : A ? `rgba(${A}, 0.3)` : `${u}4D`, $ = d ? b : z ? p : u;
+    return /* @__PURE__ */ h(
       r,
       {
-        onClick: () => !n && s(d, e.id),
+        onClick: () => !n && i(s, e.id),
         sx: {
           position: "relative",
           height: "100px",
@@ -489,16 +518,16 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
           cursor: n ? "default" : "pointer",
           background: v,
           border: "1.5px solid",
-          borderColor: R,
+          borderColor: P,
           display: "flex",
           alignItems: "center",
           gap: "14px",
-          px: a.md,
+          px: c.md,
           transition: "transform 0.2s, box-shadow 0.2s, border-color 0.25s",
-          boxShadow: c ? `0 0 0 3px ${b}30` : B ? `0 0 0 3px ${h}30` : "none",
+          boxShadow: d ? `0 0 0 3px ${b}30` : z ? `0 0 0 3px ${p}30` : "none",
           "&:hover": n ? {} : {
             transform: "scale(1.01)",
-            boxShadow: `0 4px 16px ${O ? `rgba(${O}, 0.2)` : `${m}33`}`
+            boxShadow: `0 4px 16px ${A ? `rgba(${A}, 0.2)` : `${u}33`}`
           }
         },
         children: [
@@ -508,7 +537,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               sx: {
                 position: "absolute",
                 inset: 0,
-                background: W,
+                background: D,
                 zIndex: 0
               }
             }
@@ -520,38 +549,38 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                 width: 40,
                 height: 40,
                 borderRadius: "50%",
-                bgcolor: F,
+                bgcolor: $,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
                 flexShrink: 0,
                 zIndex: 2,
                 transition: "background-color 0.25s",
-                boxShadow: c ? `0 2px 8px ${b}59` : B ? `0 2px 8px ${h}59` : `0 2px 8px ${O ? `rgba(${O}, 0.35)` : `${m}59`}`
+                boxShadow: d ? `0 2px 8px ${b}59` : z ? `0 2px 8px ${p}59` : `0 2px 8px ${A ? `rgba(${A}, 0.35)` : `${u}59`}`
               },
-              children: c ? /* @__PURE__ */ t(Ne, { sx: { fontSize: "1.3em", color: "#fff" } }) : B ? /* @__PURE__ */ t(Ye, { sx: { fontSize: "1.3em", color: "#fff" } }) : /* @__PURE__ */ t(
-                x,
+              children: d ? /* @__PURE__ */ t(ct, { sx: { fontSize: "1.3em", color: "#fff" } }) : z ? /* @__PURE__ */ t(dt, { sx: { fontSize: "1.3em", color: "#fff" } }) : /* @__PURE__ */ t(
+                C,
                 {
                   sx: {
-                    color: y,
+                    color: f,
                     fontWeight: 800,
                     fontSize: "1em",
                     lineHeight: 1,
                     userSelect: "none"
                   },
-                  children: C
+                  children: I
                 }
               )
             }
           ),
           /* @__PURE__ */ t(
-            x,
+            C,
             {
               sx: {
                 fontWeight: 700,
                 fontSize: "0.9375em",
                 lineHeight: 1.35,
-                color: c ? b : B ? h : m,
+                color: d ? b : z ? p : u,
                 zIndex: 2,
                 flex: 1,
                 transition: "color 0.25s"
@@ -563,25 +592,25 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       }
     );
   }
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ h(
     r,
     {
-      onClick: () => !n && s(d, e.id),
+      onClick: () => !n && i(s, e.id),
       sx: {
         position: "relative",
         aspectRatio: "16/9",
         borderRadius: "sm",
         overflow: "hidden",
         cursor: n ? "default" : "pointer",
-        backgroundImage: `url(${p})`,
+        backgroundImage: `url(${E})`,
         backgroundSize: "cover",
         backgroundPosition: "center top",
         backgroundClip: "padding-box",
-        bgcolor: u.surfaceVariant,
+        bgcolor: m.surfaceVariant,
         border: "1.5px solid transparent",
-        borderColor: c ? b : B ? h : "transparent",
+        borderColor: d ? b : z ? p : "transparent",
         transition: "transform 0.2s, border-color 0.25s",
-        boxShadow: c ? `0 0 0 3px ${b}30` : B ? `0 0 0 3px ${h}30` : "none",
+        boxShadow: d ? `0 0 0 3px ${b}30` : z ? `0 0 0 3px ${p}30` : "none",
         "&:hover": n ? {} : { transform: "scale(1.01)" }
       },
       children: [
@@ -595,19 +624,19 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
             }
           }
         ),
-        (P || i.timedOut || e.id === i.correctOptionId) && /* @__PURE__ */ t(
+        (y || l.timedOut || e.id === l.correctOptionId) && /* @__PURE__ */ t(
           r,
           {
             sx: {
               position: "absolute",
               inset: 0,
-              background: c ? `linear-gradient(to top, ${b}CC, ${b}55 50%, transparent 100%)` : `linear-gradient(to top, ${h}CC, ${h}55 50%, transparent 100%)`,
+              background: d ? `linear-gradient(to top, ${b}CC, ${b}55 50%, transparent 100%)` : `linear-gradient(to top, ${p}CC, ${p}55 50%, transparent 100%)`,
               transition: "background 0.25s",
               zIndex: 1
             }
           }
         ),
-        (P || i.timedOut || e.id === i.correctOptionId) && /* @__PURE__ */ t(
+        (y || l.timedOut || e.id === l.correctOptionId) && /* @__PURE__ */ t(
           r,
           {
             sx: {
@@ -616,8 +645,8 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               right: "10px",
               zIndex: 3
             },
-            children: c ? /* @__PURE__ */ t(
-              Ne,
+            children: d ? /* @__PURE__ */ t(
+              ct,
               {
                 sx: {
                   fontSize: 28,
@@ -626,7 +655,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                 }
               }
             ) : /* @__PURE__ */ t(
-              Ye,
+              dt,
               {
                 sx: {
                   fontSize: 28,
@@ -650,7 +679,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               zIndex: 2
             },
             children: /* @__PURE__ */ t(
-              x,
+              C,
               {
                 sx: {
                   color: "#fff",
@@ -667,34 +696,34 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       ]
     }
   );
-}, Lt = ({
+}, Yt = ({
   time: e,
   maxTime: n,
-  brandingPrimaryColor: i
+  brandingPrimaryColor: l
 }) => {
-  const s = K().palette.danger.softBg, d = K().palette.danger.plainColor, f = K().palette.warning.softBg, l = K().palette.warning.plainColor, u = i || K().palette.primary.plainColor, a = K().palette.primary.onPrimary, m = fe().xl, y = be().secondary, b = pe(), h = {
+  const i = q().palette.danger.softBg, s = q().palette.danger.plainColor, g = q().palette.warning.softBg, o = q().palette.warning.plainColor, m = l || q().palette.primary.plainColor, c = q().palette.primary.onPrimary, u = pe().xl, f = Te().secondary, b = ve(), p = {
     "@keyframes pulse": {
       "0%": { transform: "scale(1)" },
       "50%": { transform: "scale(1.05)" },
       "100%": { transform: "scale(1)" }
     }
-  }, I = n > 0 ? e / n * 100 : 100, p = I <= 30 ? {
-    background: s,
-    color: d,
+  }, x = n > 0 ? e / n * 100 : 100, E = x <= 30 ? {
+    background: i,
+    color: s,
     animation: "pulse 1s infinite"
-  } : I <= 50 ? {
-    background: f,
-    color: l,
+  } : x <= 50 ? {
+    background: g,
+    color: o,
     animation: void 0
   } : {
-    background: u,
-    color: a,
+    background: m,
+    color: c,
     animation: void 0
-  }, S = (C) => {
-    const P = Math.floor(C / 60), c = C % 60;
-    return `${P < 10 ? "0" : ""}${P}:${c < 10 ? "0" : ""}${c}${P > 0 ? "m" : "s"}`;
+  }, w = (I) => {
+    const y = Math.floor(I / 60), d = I % 60;
+    return `${y < 10 ? "0" : ""}${y}:${d < 10 ? "0" : ""}${d}${y > 0 ? "m" : "s"}`;
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ h(
     r,
     {
       sx: {
@@ -704,181 +733,181 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
         display: "flex",
         gap: b["2xs"],
         alignItems: "center",
-        bgcolor: p.background,
-        borderRadius: m,
+        bgcolor: E.background,
+        borderRadius: u,
         maxWidth: "105px",
         maxHeight: "40px",
         transition: "all 0.3s ease",
-        animation: p.animation,
-        ...h,
+        animation: E.animation,
+        ...p,
         zIndex: 10
       },
       children: [
         /* @__PURE__ */ t(
-          Jt,
+          mn,
           {
             sx: {
               width: "24px",
               height: "24px",
-              color: p.color,
+              color: E.color,
               transition: "color 0.3s ease"
             }
           }
         ),
         /* @__PURE__ */ t(
-          x,
+          C,
           {
             sx: {
-              fontFamily: y,
+              fontFamily: f,
               fontWeight: 400,
               fontSize: "1em",
               lineHeight: "150%",
               letterSpacing: "0.15px",
-              color: p.color,
+              color: E.color,
               transition: "color 0.3s ease"
             },
-            children: S(e)
+            children: w(e)
           }
         )
       ]
     }
   );
-}, pn = ({
+}, wn = ({
   currentPair: e,
   timer: n,
-  selected: i,
-  maxTime: s,
-  feedback: d,
-  onSelect: f,
-  stepInfo: l,
-  brandingPrimaryColor: u,
-  game: a
+  selected: l,
+  maxTime: i,
+  feedback: s,
+  onSelect: g,
+  stepInfo: o,
+  brandingPrimaryColor: m,
+  game: c
 }) => {
-  var X, oe, ee, te, ie, ce, _, H, w, $;
-  const [m, y] = D(0), [b, h] = D(!1), [I, O] = D(0), [p, S] = D(0), [C, P] = D(!1), c = qe(0), { t: B } = se(), k = xe(), v = ze(), W = K(), R = W.surfaceVariant, F = u || W.palette.primary.plainColor, E = ((oe = (X = a == null ? void 0 : a.branding) == null ? void 0 : X.colors) == null ? void 0 : oe.contentColor) || W.textColor, L = fe().md, o = pe(), z = re(R || ""), G = re(F || ""), U = k ? ((te = (ee = a == null ? void 0 : a.branding) == null ? void 0 : ee.images) == null ? void 0 : te.mobileLogo) || ((ce = (ie = a == null ? void 0 : a.branding) == null ? void 0 : ie.images) == null ? void 0 : ce.mainLogo) || "" : ((H = (_ = a == null ? void 0 : a.branding) == null ? void 0 : _.images) == null ? void 0 : H.mainLogo) || "", N = B("common.labels.point", { count: m });
-  me(() => {
-    if (l != null && l.currentPoints && l.currentPoints > m) {
-      O(l.currentPoints - m), h(!0), S((V) => V + 1);
-      const A = setTimeout(() => h(!1), 1e3);
-      return y(l.currentPoints), () => clearTimeout(A);
+  var X, Z, ee, J, me, ae, se, ce, Y, he;
+  const [u, f] = B(0), [b, p] = B(!1), [x, A] = B(0), [E, w] = B(0), [I, y] = B(!1), d = mt(0), { t: z } = Q(), S = Se(), v = Ve(), D = q(), P = D.surfaceVariant, $ = m || D.palette.primary.plainColor, L = ((Z = (X = c == null ? void 0 : c.branding) == null ? void 0 : X.colors) == null ? void 0 : Z.contentColor) || D.textColor, N = pe().md, R = ve(), k = oe(P || ""), O = oe($ || ""), H = S ? ((J = (ee = c == null ? void 0 : c.branding) == null ? void 0 : ee.images) == null ? void 0 : J.mobileLogo) || ((ae = (me = c == null ? void 0 : c.branding) == null ? void 0 : me.images) == null ? void 0 : ae.mainLogo) || "" : ((ce = (se = c == null ? void 0 : c.branding) == null ? void 0 : se.images) == null ? void 0 : ce.mainLogo) || "", j = z("common.labels.point", { count: u });
+  fe(() => {
+    if (o != null && o.currentPoints && o.currentPoints > u) {
+      A(o.currentPoints - u), p(!0), w((G) => G + 1);
+      const U = setTimeout(() => p(!1), 1e3);
+      return f(o.currentPoints), () => clearTimeout(U);
     }
-  }, [l == null ? void 0 : l.currentPoints, m]);
-  const Y = (a == null ? void 0 : a.points) ?? [], T = Y.length >= 2 ? Y[1].correctSteps - Y[0].correctSteps : ((w = Y[0]) == null ? void 0 : w.correctSteps) || 5;
-  me(() => {
-    const A = c.current, V = (l == null ? void 0 : l.currentStreak) ?? 0;
-    if (c.current = V, V > A && V > 0 && V % T === 0) {
-      P(!0);
-      const Z = setTimeout(() => P(!1), 500);
-      return () => clearTimeout(Z);
+  }, [o == null ? void 0 : o.currentPoints, u]);
+  const V = (c == null ? void 0 : c.points) ?? [], a = V.length >= 2 ? V[1].correctSteps - V[0].correctSteps : ((Y = V[0]) == null ? void 0 : Y.correctSteps) || 5;
+  fe(() => {
+    const U = d.current, G = (o == null ? void 0 : o.currentStreak) ?? 0;
+    if (d.current = G, G > U && G > 0 && G % a === 0) {
+      y(!0);
+      const de = setTimeout(() => y(!1), 500);
+      return () => clearTimeout(de);
     }
-  }, [l == null ? void 0 : l.currentStreak, T]);
-  const M = () => {
-    const A = [], V = (l == null ? void 0 : l.currentLives) ?? 3;
-    for (let Z = 0; Z < V; Z++)
-      A.push(
+  }, [o == null ? void 0 : o.currentStreak, a]);
+  const W = () => {
+    const U = [], G = (o == null ? void 0 : o.currentLives) ?? 3;
+    for (let de = 0; de < G; de++)
+      U.push(
         /* @__PURE__ */ t(
-          Fe,
+          tt,
           {
-            sx: { height: 20, color: F }
+            sx: { height: 20, color: $ }
           },
-          `life-${Z}`
+          `life-${de}`
         )
       );
-    for (let Z = V; Z < 3; Z++)
-      A.push(
+    for (let de = G; de < 3; de++)
+      U.push(
         /* @__PURE__ */ t(
-          It,
+          Ut,
           {
             sx: {
               height: 20,
-              color: G ? `rgba(${G.replace(/[^\d,]/g, "")}, 0.35)` : `${F}59`
+              color: O ? `rgba(${O.replace(/[^\d,]/g, "")}, 0.35)` : `${$}59`
             }
           },
-          `empty-${Z}`
+          `empty-${de}`
         )
       );
-    return A;
-  }, j = () => {
-    const A = (l == null ? void 0 : l.currentStreak) ?? 0, V = C ? T : A % T, le = Math.floor(A / T) + 1;
-    return /* @__PURE__ */ g(r, { sx: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-      Array.from({ length: T }, (he, Q) => /* @__PURE__ */ t(
+    return U;
+  }, T = () => {
+    const U = (o == null ? void 0 : o.currentStreak) ?? 0, G = I ? a : U % a, Ae = Math.floor(U / a) + 1;
+    return /* @__PURE__ */ h(r, { sx: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+      Array.from({ length: a }, (we, Ce) => /* @__PURE__ */ t(
         r,
         {
           sx: {
             flex: 1,
             height: 4,
-            bgcolor: Q < V ? F : G ? `rgba(${G.replace(/[^\d,]/g, "")}, 0.2)` : `${F}33`,
+            bgcolor: Ce < G ? $ : O ? `rgba(${O.replace(/[^\d,]/g, "")}, 0.2)` : `${$}33`,
             borderRadius: "2px",
             transition: "background-color 0.3s ease"
           }
         },
-        `streak-${Q}`
+        `streak-${Ce}`
       )),
-      le > 1 && /* @__PURE__ */ g(
-        x,
+      Ae > 1 && /* @__PURE__ */ h(
+        C,
         {
           sx: {
-            color: F,
+            color: $,
             fontWeight: 700,
             fontSize: "0.75em",
             lineHeight: 1,
-            ml: o["2xs"],
+            ml: R["2xs"],
             flexShrink: 0
           },
           children: [
             "×",
-            le
+            Ae
           ]
         }
       )
     ] });
-  }, J = () => /* @__PURE__ */ t(
+  }, K = () => /* @__PURE__ */ t(
     r,
     {
       sx: {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        ...k ? { width: "100%", my: o.sm } : {}
+        ...S ? { width: "100%", my: R.sm } : {}
       },
       children: /* @__PURE__ */ t(
         r,
         {
           sx: {
             borderRadius: "50%",
-            bgcolor: W.surface,
+            bgcolor: D.surface,
             boxShadow: "sm",
             width: "32px",
             height: "32px",
             minWidth: "32px",
             border: "1px solid",
-            borderColor: F,
+            borderColor: $,
             display: "flex",
             alignItems: "center",
             justifyContent: "center"
           },
-          children: k ? /* @__PURE__ */ t(mn, { sx: { fontSize: "1.1em", color: F } }) : /* @__PURE__ */ t(At, { sx: { fontSize: "1.1em", color: F } })
+          children: S ? /* @__PURE__ */ t(In, { sx: { fontSize: "1.1em", color: $ } }) : /* @__PURE__ */ t(Gt, { sx: { fontSize: "1.1em", color: $ } })
         }
       )
     }
   );
   return e ? (
     // questionArea
-    /* @__PURE__ */ t(r, { sx: { display: "flex", flexDirection: "column", p: o.md }, children: /* @__PURE__ */ g(
+    /* @__PURE__ */ t(r, { sx: { display: "flex", flexDirection: "column", p: R.md }, children: /* @__PURE__ */ h(
       r,
       {
         sx: {
           display: "flex",
           flexDirection: "column",
-          gap: k ? o.lg : o.md
+          gap: S ? R.lg : R.md
         },
         children: [
           /* @__PURE__ */ t(r, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ t(
-            Lt,
+            Yt,
             {
               time: n,
-              maxTime: s,
-              brandingPrimaryColor: u
+              maxTime: i,
+              brandingPrimaryColor: m
             },
             `timer-${e.pairId}`
           ) }),
@@ -886,49 +915,49 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
             r,
             {
               sx: {
-                borderRadius: L,
+                borderRadius: N,
                 overflow: "hidden",
-                bgcolor: z ? `rgba(${z.replace(/[^\d,]/g, "")}, 0.5)` : W.surfaceVariant,
+                bgcolor: k ? `rgba(${k.replace(/[^\d,]/g, "")}, 0.5)` : D.surfaceVariant,
                 display: "flex",
                 flexDirection: "column",
                 backdropFilter: "blur(4px)",
-                px: o.md,
-                pt: o.md,
-                pb: o.lg,
-                gap: o.md
+                px: R.md,
+                pt: R.md,
+                pb: R.lg,
+                gap: R.md
               },
-              children: /* @__PURE__ */ g(
+              children: /* @__PURE__ */ h(
                 r,
                 {
                   sx: {
                     display: "flex",
-                    flexDirection: k ? "column" : "row",
-                    gap: k ? 0 : o.md,
-                    alignItems: k ? "stretch" : "center"
+                    flexDirection: S ? "column" : "row",
+                    gap: S ? 0 : R.md,
+                    alignItems: S ? "stretch" : "center"
                   },
                   children: [
                     /* @__PURE__ */ t(r, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ t(
-                      Ue,
+                      ot,
                       {
                         option: e.optionOne,
-                        selected: i,
-                        feedback: d,
-                        onSelect: f,
+                        selected: l,
+                        feedback: s,
+                        onSelect: g,
                         pairId: e.pairId,
-                        brandingPrimaryColor: u,
+                        brandingPrimaryColor: m,
                         optionIndex: 0
                       }
                     ) }),
-                    J(),
+                    K(),
                     /* @__PURE__ */ t(r, { sx: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ t(
-                      Ue,
+                      ot,
                       {
                         option: e.optionTwo,
-                        selected: i,
-                        feedback: d,
-                        onSelect: f,
+                        selected: l,
+                        feedback: s,
+                        onSelect: g,
                         pairId: e.pairId,
-                        brandingPrimaryColor: u,
+                        brandingPrimaryColor: m,
                         optionIndex: 1
                       }
                     ) })
@@ -937,38 +966,38 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               )
             }
           ),
-          /* @__PURE__ */ g(r, { children: [
-            /* @__PURE__ */ t(r, { sx: { mb: o.xs }, children: j() }),
-            /* @__PURE__ */ g(
-              we,
+          /* @__PURE__ */ h(r, { children: [
+            /* @__PURE__ */ t(r, { sx: { mb: R.xs }, children: T() }),
+            /* @__PURE__ */ h(
+              je,
               {
                 direction: "row",
                 justifyContent: "space-between",
                 alignItems: "center",
                 children: [
-                  /* @__PURE__ */ t(r, { children: M() }),
-                  /* @__PURE__ */ g(we, { direction: "row", spacing: 1, alignItems: "center", children: [
-                    /* @__PURE__ */ g(x, { sx: { color: E }, children: [
-                      N,
+                  /* @__PURE__ */ t(r, { children: W() }),
+                  /* @__PURE__ */ h(je, { direction: "row", spacing: 1, alignItems: "center", children: [
+                    /* @__PURE__ */ h(C, { sx: { color: L }, children: [
+                      j,
                       ":"
                     ] }),
-                    /* @__PURE__ */ g(
-                      x,
+                    /* @__PURE__ */ h(
+                      C,
                       {
                         level: "h4",
-                        sx: { position: "relative", color: E },
+                        sx: { position: "relative", color: L },
                         children: [
-                          m,
-                          b && /* @__PURE__ */ g(
-                            x,
+                          u,
+                          b && /* @__PURE__ */ h(
+                            C,
                             {
-                              sx: Rt.pointsAdded,
+                              sx: Nt.pointsAdded,
                               children: [
                                 "+",
-                                I
+                                x
                               ]
                             },
-                            p
+                            E
                           )
                         ]
                       }
@@ -977,20 +1006,20 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                 ]
               }
             ),
-            U && /* @__PURE__ */ t(
+            H && /* @__PURE__ */ t(
               r,
               {
                 sx: {
-                  mt: o.xs,
+                  mt: R.xs,
                   display: "flex",
                   justifyContent: v ? "center" : "flex-start"
                 },
                 children: /* @__PURE__ */ t(
-                  de,
+                  ue,
                   {
-                    brandingLogo: U,
-                    textColor: E,
-                    label: (($ = a == null ? void 0 : a.labels) == null ? void 0 : $.sponsor) || null
+                    brandingLogo: H,
+                    textColor: L,
+                    label: ((he = c == null ? void 0 : c.labels) == null ? void 0 : he.sponsor) || null
                   }
                 )
               }
@@ -1000,65 +1029,65 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       }
     ) })
   ) : null;
-}, yn = (e, n, i, s) => {
+}, Rn = (e, n, l, i) => {
   if (n === 0)
     return {
       emoji: "🎮",
-      message: s("eitherOr.results.practice", "Keep practicing!")
+      message: i("eitherOr.results.practice", "Keep practicing!")
     };
-  const d = e / n * 100;
-  let f;
-  if (d === 100 ? f = {
+  const s = e / n * 100;
+  let g;
+  if (s === 100 ? g = {
     emoji: "🏆",
-    message: s("eitherOr.results.perfect", "Perfect! Flawless!")
-  } : d >= 80 ? f = {
+    message: i("eitherOr.results.perfect", "Perfect! Flawless!")
+  } : s >= 80 ? g = {
     emoji: "🔥",
-    message: s("eitherOr.results.excellent", "Excellent!")
-  } : d >= 60 ? f = { emoji: "✨", message: s("eitherOr.results.great", "Great job!") } : d >= 40 ? f = { emoji: "💪", message: s("eitherOr.results.good", "Good try!") } : f = {
+    message: i("eitherOr.results.excellent", "Excellent!")
+  } : s >= 60 ? g = { emoji: "✨", message: i("eitherOr.results.great", "Great job!") } : s >= 40 ? g = { emoji: "💪", message: i("eitherOr.results.good", "Good try!") } : g = {
     emoji: "📚",
-    message: s("eitherOr.results.practice", "Keep practicing!")
-  }, i > 0) {
-    const l = s("eitherOr.results.livesBonus", { count: i }) || (i === 1 ? "And with 1 life to spare!" : `And with ${i} lives to spare!`);
-    f = { ...f, message: `${f.message} ${l}` };
+    message: i("eitherOr.results.practice", "Keep practicing!")
+  }, l > 0) {
+    const o = i("eitherOr.results.livesBonus", { count: l }) || (l === 1 ? "And with 1 life to spare!" : `And with ${l} lives to spare!`);
+    g = { ...g, message: `${g.message} ${o}` };
   }
-  return f;
-}, _e = ({
+  return g;
+}, ut = ({
   stepInfo: e,
   game: n,
-  sdk: i,
-  onPlayAgain: s,
-  brandingPrimaryColor: d,
-  additionalCTA: f
+  sdk: l,
+  onPlayAgain: i,
+  brandingPrimaryColor: s,
+  additionalCTA: g
 }) => {
-  var oe, ee, te, ie, ce, _, H, w, $;
-  const { t: l } = se(), u = K(), a = d || u.palette.primary.plainColor, m = u.palette.primary.onPrimary, y = ((ee = (oe = n == null ? void 0 : n.branding) == null ? void 0 : oe.colors) == null ? void 0 : ee.contentColor) || u.textColor, b = u.palette.success.plainColor, h = u.palette.danger.plainColor, I = u.palette.success.softBg, O = u.palette.danger.softBg, p = fe().md, S = fe().xl, C = pe(), P = be().primary, c = xe(), B = ze(), k = re(a || ""), v = k ? k.replace(/[^\d,]/g, "") : null, W = c ? ((ie = (te = n == null ? void 0 : n.branding) == null ? void 0 : te.images) == null ? void 0 : ie.mobileLogo) || ((_ = (ce = n == null ? void 0 : n.branding) == null ? void 0 : ce.images) == null ? void 0 : _.mainLogo) || "" : ((w = (H = n == null ? void 0 : n.branding) == null ? void 0 : H.images) == null ? void 0 : w.mainLogo) || "", [R, F] = D(0), [E, L] = D(null), o = (e == null ? void 0 : e.currentPoints) ?? 0, z = R > 0 && o >= R;
-  if (me(() => {
+  var Z, ee, J, me, ae, se, ce, Y, he;
+  const { t: o } = Q(), m = q(), c = s || m.palette.primary.plainColor, u = m.palette.primary.onPrimary, f = ((ee = (Z = n == null ? void 0 : n.branding) == null ? void 0 : Z.colors) == null ? void 0 : ee.contentColor) || m.textColor, b = m.palette.success.plainColor, p = m.palette.danger.plainColor, x = m.palette.success.softBg, A = m.palette.danger.softBg, E = pe().md, w = pe().xl, I = ve(), y = Te().primary, d = Se(), z = Ve(), S = oe(c || ""), v = S ? S.replace(/[^\d,]/g, "") : null, D = d ? ((me = (J = n == null ? void 0 : n.branding) == null ? void 0 : J.images) == null ? void 0 : me.mobileLogo) || ((se = (ae = n == null ? void 0 : n.branding) == null ? void 0 : ae.images) == null ? void 0 : se.mainLogo) || "" : ((Y = (ce = n == null ? void 0 : n.branding) == null ? void 0 : ce.images) == null ? void 0 : Y.mainLogo) || "", [P, $] = B(0), [L, N] = B(null), R = (e == null ? void 0 : e.currentPoints) ?? 0, k = P > 0 && R >= P;
+  if (fe(() => {
     n && (async () => {
       try {
-        const V = await i.miniGames.getMyEitherOrStats(n.id);
-        F(V.personalBest ?? 0), L(V.betterThan ?? null);
+        const G = await l.miniGames.getMyEitherOrStats(n.id);
+        $(G.personalBest ?? 0), N(G.betterThan ?? null);
       } catch {
       }
     })();
-  }, [e, n, i]), !e) return null;
-  const G = e.steps.filter((A) => A.played), U = G.filter((A) => A.correct === !0).length, N = G.filter(
-    (A) => A.correct === !1 && A.userSelection !== null
-  ).length, Y = G.filter(
-    (A) => A.userSelection === null
-  ).length, T = G.length, M = yn(
-    U,
-    T,
+  }, [e, n, l]), !e) return null;
+  const O = e.steps.filter((U) => U.played), H = O.filter((U) => U.correct === !0).length, j = O.filter(
+    (U) => U.correct === !1 && U.userSelection !== null
+  ).length, V = O.filter(
+    (U) => U.userSelection === null
+  ).length, a = O.length, W = Rn(
+    H,
+    a,
     e.currentLives,
-    l
-  ), j = T > 0 ? U / T * 100 : 0, J = T > 0 ? N / T * 100 : 0, X = T > 0 ? Y / T * 100 : 0;
-  return /* @__PURE__ */ g(
+    o
+  ), T = a > 0 ? H / a * 100 : 0, K = a > 0 ? j / a * 100 : 0, X = a > 0 ? V / a * 100 : 0;
+  return /* @__PURE__ */ h(
     r,
     {
       sx: {
-        p: C.md,
+        p: I.md,
         display: "flex",
         flexDirection: "column",
-        gap: C.md,
+        gap: I.md,
         animation: "eoFadeUp 0.45s ease-out both",
         "@keyframes eoFadeUp": {
           from: { opacity: 0, transform: "translateY(14px)" },
@@ -1066,14 +1095,14 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
         }
       },
       children: [
-        z && /* @__PURE__ */ g(
+        k && /* @__PURE__ */ h(
           r,
           {
             sx: {
               position: "relative",
               overflow: "hidden",
-              borderRadius: p,
-              background: v ? `linear-gradient(135deg, rgba(${v},0.92) 0%, rgba(${v},0.72) 100%)` : `linear-gradient(135deg, ${a}EB 0%, ${a}B8 100%)`,
+              borderRadius: E,
+              background: v ? `linear-gradient(135deg, rgba(${v},0.92) 0%, rgba(${v},0.72) 100%)` : `linear-gradient(135deg, ${c}EB 0%, ${c}B8 100%)`,
               p: "20px 20px 18px",
               display: "flex",
               alignItems: "center",
@@ -1097,7 +1126,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               }
             },
             children: [
-              /* @__PURE__ */ g(
+              /* @__PURE__ */ h(
                 r,
                 {
                   sx: {
@@ -1138,14 +1167,14 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                           alignItems: "center",
                           justifyContent: "center"
                         },
-                        children: /* @__PURE__ */ t(ve, { sx: { fontSize: "1.9em", color: "#fff" } })
+                        children: /* @__PURE__ */ t(De, { sx: { fontSize: "1.9em", color: "#fff" } })
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ g(r, { sx: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ g(
+              /* @__PURE__ */ h(r, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ h(
                   r,
                   {
                     sx: {
@@ -1177,7 +1206,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                         }
                       ),
                       /* @__PURE__ */ t(
-                        x,
+                        C,
                         {
                           sx: {
                             fontSize: "0.6em",
@@ -1187,14 +1216,14 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                             color: "#fff",
                             lineHeight: 1
                           },
-                          children: l("eitherOr.newRecord", "New Record")
+                          children: o("eitherOr.newRecord", "New Record")
                         }
                       )
                     ]
                   }
                 ),
                 /* @__PURE__ */ t(
-                  x,
+                  C,
                   {
                     sx: {
                       fontSize: "1.05em",
@@ -1202,18 +1231,18 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                       color: "#fff",
                       lineHeight: 1.25
                     },
-                    children: l("eitherOr.personalBestImprovedTitle", "Congratulations!")
+                    children: o("eitherOr.personalBestImprovedTitle", "Congratulations!")
                   }
                 ),
                 /* @__PURE__ */ t(
-                  x,
+                  C,
                   {
                     sx: {
                       fontSize: "0.8em",
                       color: "rgba(255,255,255,0.82)",
                       mt: "2px"
                     },
-                    children: l(
+                    children: o(
                       "eitherOr.personalBestImprovedSubtitle",
                       "You just broke your personal record!"
                     )
@@ -1223,7 +1252,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
             ]
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ h(
           r,
           {
             sx: {
@@ -1231,8 +1260,8 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               flexDirection: "column",
               alignItems: "center",
               gap: "10px",
-              py: C.lg,
-              borderRadius: p,
+              py: I.lg,
+              borderRadius: E,
               backdropFilter: "blur(4px)",
               position: "relative",
               "&::before": {
@@ -1242,7 +1271,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                 left: 0,
                 right: 0,
                 bottom: 0,
-                backgroundColor: u.surfaceVariant,
+                backgroundColor: m.surfaceVariant,
                 opacity: 0.5,
                 borderRadius: "inherit",
                 zIndex: 0
@@ -1257,36 +1286,36 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                     width: 52,
                     height: 52,
                     borderRadius: "50%",
-                    bgcolor: v ? `rgba(${v},0.14)` : `${a}24`,
+                    bgcolor: v ? `rgba(${v},0.14)` : `${c}24`,
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center"
                   },
-                  children: /* @__PURE__ */ t(ve, { sx: { fontSize: "1.75em", color: a } })
+                  children: /* @__PURE__ */ t(De, { sx: { fontSize: "1.75em", color: c } })
                 }
               ),
               /* @__PURE__ */ t(
-                x,
+                C,
                 {
                   sx: {
                     fontSize: "0.65em",
                     fontWeight: 700,
                     letterSpacing: "0.12em",
                     textTransform: "uppercase",
-                    color: u.textColor
+                    color: m.textColor
                   },
-                  children: l("eitherOr.yourScore", "Your Score")
+                  children: o("eitherOr.yourScore", "Your Score")
                 }
               ),
               /* @__PURE__ */ t(
-                x,
+                C,
                 {
                   sx: {
                     fontSize: "3.5em",
                     fontWeight: 900,
                     lineHeight: 1,
-                    color: a,
-                    textShadow: v ? `0 2px 24px rgba(${v},0.35)` : `0 2px 24px ${a}59`,
+                    color: c,
+                    textShadow: v ? `0 2px 24px rgba(${v},0.35)` : `0 2px 24px ${c}59`,
                     animation: "eoScorePop 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.1s both",
                     "@keyframes eoScorePop": {
                       from: { opacity: 0, transform: "scale(0.5)" },
@@ -1296,21 +1325,21 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                   children: e.currentPoints
                 }
               ),
-              /* @__PURE__ */ g(
-                x,
+              /* @__PURE__ */ h(
+                C,
                 {
-                  sx: { fontSize: "1em", fontWeight: 600, color: u.textColor },
+                  sx: { fontSize: "1em", fontWeight: 600, color: m.textColor },
                   children: [
-                    M.emoji,
+                    W.emoji,
                     " ",
-                    M.message
+                    W.message
                   ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ h(
           r,
           {
             sx: {
@@ -1318,25 +1347,25 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               borderRadius: "4px",
               overflow: "hidden",
               display: "flex",
-              bgcolor: u.surfaceVariant
+              bgcolor: m.surfaceVariant
             },
             children: [
-              j > 0 && /* @__PURE__ */ t(
+              T > 0 && /* @__PURE__ */ t(
                 r,
                 {
                   sx: {
-                    width: `${j}%`,
+                    width: `${T}%`,
                     bgcolor: b,
                     transition: "width 0.7s ease"
                   }
                 }
               ),
-              J > 0 && /* @__PURE__ */ t(
+              K > 0 && /* @__PURE__ */ t(
                 r,
                 {
                   sx: {
-                    width: `${J}%`,
-                    bgcolor: h,
+                    width: `${K}%`,
+                    bgcolor: p,
                     transition: "width 0.7s ease 0.1s"
                   }
                 }
@@ -1346,7 +1375,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                 {
                   sx: {
                     width: `${X}%`,
-                    bgcolor: u.secondaryContainer,
+                    bgcolor: m.secondaryContainer,
                     transition: "width 0.7s ease 0.2s"
                   }
                 }
@@ -1354,42 +1383,42 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
             ]
           }
         ),
-        /* @__PURE__ */ t(we, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ t(je, { direction: "row", spacing: 1, children: [
           {
             icon: /* @__PURE__ */ t(
-              Ne,
+              ct,
               {
                 sx: { fontSize: "1.25em", color: b }
               }
             ),
-            value: U,
-            label: l("eitherOr.results.correct", "Correct"),
-            bg: I,
+            value: H,
+            label: o("eitherOr.results.correct", "Correct"),
+            bg: x,
             valueSx: { color: b },
             labelSx: { color: b }
           },
           {
-            icon: /* @__PURE__ */ t(Ye, { sx: { fontSize: "1.25em", color: h } }),
-            value: N,
-            label: l("eitherOr.results.wrong", "Wrong"),
-            bg: O,
-            valueSx: { color: h },
-            labelSx: { color: h }
+            icon: /* @__PURE__ */ t(dt, { sx: { fontSize: "1.25em", color: p } }),
+            value: j,
+            label: o("eitherOr.results.wrong", "Wrong"),
+            bg: A,
+            valueSx: { color: p },
+            labelSx: { color: p }
           },
           {
             icon: /* @__PURE__ */ t(
-              Qt,
+              gn,
               {
-                sx: { fontSize: "1.25em", color: u.textColor }
+                sx: { fontSize: "1.25em", color: m.textColor }
               }
             ),
-            value: Y,
-            label: l("eitherOr.results.missed", "Missed"),
-            bg: u.surfaceVariant,
-            valueSx: { color: u.textColor },
-            labelSx: { color: u.textColor }
+            value: V,
+            label: o("eitherOr.results.missed", "Missed"),
+            bg: m.surfaceVariant,
+            valueSx: { color: m.textColor },
+            labelSx: { color: m.textColor }
           }
-        ].map((A) => /* @__PURE__ */ g(
+        ].map((U) => /* @__PURE__ */ h(
           r,
           {
             sx: {
@@ -1399,40 +1428,40 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               alignItems: "center",
               gap: "4px",
               py: "14px",
-              borderRadius: p,
-              bgcolor: A.bg
+              borderRadius: E,
+              bgcolor: U.bg
             },
             children: [
-              A.icon,
+              U.icon,
               /* @__PURE__ */ t(
-                x,
+                C,
                 {
                   sx: {
                     fontSize: "1.3em",
                     fontWeight: 800,
                     lineHeight: 1,
-                    ...A.valueSx
+                    ...U.valueSx
                   },
-                  children: A.value
+                  children: U.value
                 }
               ),
               /* @__PURE__ */ t(
-                x,
+                C,
                 {
-                  sx: { fontSize: "0.68em", fontWeight: 600, ...A.labelSx },
-                  children: A.label
+                  sx: { fontSize: "0.68em", fontWeight: 600, ...U.labelSx },
+                  children: U.label
                 }
               )
             ]
           },
-          A.label
+          U.label
         )) }),
-        R > 0 && E !== null && E > 0 && /* @__PURE__ */ g(
+        P > 0 && L !== null && L > 0 && /* @__PURE__ */ h(
           r,
           {
             sx: {
-              borderRadius: p,
-              p: C.md,
+              borderRadius: E,
+              p: I.md,
               display: "flex",
               alignItems: "center",
               gap: "10px",
@@ -1445,7 +1474,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                 left: 0,
                 right: 0,
                 bottom: 0,
-                backgroundColor: u.surfaceVariant,
+                backgroundColor: m.surfaceVariant,
                 opacity: 0.5,
                 borderRadius: "inherit",
                 zIndex: 0
@@ -1454,79 +1483,79 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
             },
             children: [
               /* @__PURE__ */ t(
-                gn,
+                kn,
                 {
-                  sx: { color: a, fontSize: "1.4em", flexShrink: 0 }
+                  sx: { color: c, fontSize: "1.4em", flexShrink: 0 }
                 }
               ),
               /* @__PURE__ */ t(
-                x,
+                C,
                 {
                   sx: {
                     fontSize: "0.8em",
-                    color: u.textColor,
+                    color: m.textColor,
                     lineHeight: 1.5
                   },
-                  children: l("eitherOr.betterThanLabel", {
-                    points: z ? o : R,
-                    percentile: E
+                  children: o("eitherOr.betterThanLabel", {
+                    points: k ? R : P,
+                    percentile: L
                   })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ h(
           r,
           {
             sx: {
               display: "flex",
-              flexDirection: B ? "column-reverse" : "row",
-              justifyContent: W ? "space-between" : "flex-end",
+              flexDirection: z ? "column-reverse" : "row",
+              justifyContent: D ? "space-between" : "flex-end",
               alignItems: "center",
-              gap: C.lg
+              gap: I.lg
             },
             children: [
               /* @__PURE__ */ t(
-                de,
+                ue,
                 {
-                  brandingLogo: W,
-                  textColor: y,
-                  label: (($ = n == null ? void 0 : n.labels) == null ? void 0 : $.sponsor) || null
+                  brandingLogo: D,
+                  textColor: f,
+                  label: ((he = n == null ? void 0 : n.labels) == null ? void 0 : he.sponsor) || null
                 }
               ),
               /* @__PURE__ */ t(
-                ge,
+                ye,
                 {
                   variant: "soft",
-                  endDecorator: /* @__PURE__ */ t(Ze, {}),
-                  onClick: s,
+                  endDecorator: /* @__PURE__ */ t(xt, { children: /* @__PURE__ */ t(gt, {}) }),
+                  onClick: i,
                   sx: {
-                    borderRadius: S,
+                    borderRadius: w,
                     py: "10px",
                     pr: "12px",
                     pl: "16px",
-                    bgcolor: a,
-                    color: m,
+                    bgcolor: c,
+                    color: u,
                     alignSelf: "center",
                     transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
-                    "&:hover": { bgcolor: a, transform: "scale(1.02)" },
-                    "&:active": { color: m, transform: "scale(0.98)" },
-                    "--Icon-color": m
+                    "&:hover": { bgcolor: c, transform: "scale(1.02)" },
+                    "&:active": { color: u, transform: "scale(0.98)" },
+                    "--Icon-color": u
                   },
                   children: /* @__PURE__ */ t(
-                    x,
+                    C,
                     {
                       sx: {
-                        fontFamily: P,
+                        fontFamily: y,
                         fontWeight: 500,
                         fontSize: "0.9375em",
                         lineHeight: "24px",
                         letterSpacing: "0.46px",
                         textTransform: "uppercase",
-                        color: m
+                        color: u
                       },
-                      children: l("eitherOr.buttons.playAgain", "Play Again")
+                      children: o("eitherOr.buttons.playAgain", "Play Again")
                     }
                   )
                 }
@@ -1535,17 +1564,17 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
           }
         ),
         /* @__PURE__ */ t(
-          en,
+          rn,
           {
-            additionalCTA: f,
+            additionalCTA: g,
             buttonStyle: {
-              borderRadius: S,
+              borderRadius: w,
               width: "100%",
               py: "10px"
             },
             buttonContentStyle: { display: "flex", justifyContent: "center" },
             textStyle: {
-              fontFamily: P,
+              fontFamily: y,
               fontWeight: 500,
               fontSize: "0.9375em",
               lineHeight: "24px",
@@ -1557,54 +1586,54 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       ]
     }
   );
-}, ke = (e) => e.toLocaleString(), Sn = 150, Cn = ({
+}, zn = 150, Ln = ({
   breakdown: e,
   currentPoints: n,
-  primaryColor: i,
-  textColor: s
+  primaryColor: l,
+  textColor: i
 }) => {
-  const { t: d } = se(), f = K(), l = fe(), u = pe(), a = be().primary, m = f.outlineEnabledBorder, y = re(i), [b, h] = D(null), [I, O] = D(!1);
-  if (me(() => {
-    const L = requestAnimationFrame(() => {
-      setTimeout(() => O(!0), 80);
+  const { t: s } = Q(), g = Zt(), o = (k) => k.toLocaleString(g), m = q(), c = pe(), u = ve(), f = Te().primary, b = m.outlineEnabledBorder, p = oe(l), [x, A] = B(null), [E, w] = B(!1);
+  if (fe(() => {
+    const k = requestAnimationFrame(() => {
+      setTimeout(() => w(!0), 80);
     });
-    return () => cancelAnimationFrame(L);
+    return () => cancelAnimationFrame(k);
   }, []), !e || e.length === 0)
     return /* @__PURE__ */ t(r, { sx: { py: u.lg, textAlign: "center" }, children: /* @__PURE__ */ t(
-      x,
+      C,
       {
         sx: {
-          fontFamily: a,
-          color: s,
+          fontFamily: f,
+          color: i,
           opacity: 0.4,
           fontSize: "0.875em"
         },
         children: "No distribution data available."
       }
     ) });
-  const p = e.filter((L) => L.totalUsers > 0), S = Math.max(...p.map((L) => L.totalUsers), 1), C = Math.log(S + 1), P = e.reduce((L, o) => L + o.totalUsers, 0), c = n != null ? e.find(
-    (L) => n >= L.rangeStartInclusive && n <= L.rangeEndInclusive
-  ) ?? null : null, B = c ? p.findIndex(
-    (L) => L.rangeStartInclusive === c.rangeStartInclusive
-  ) : -1, k = b !== null ? p[b] : null, v = k ? `${ke(k.rangeStartInclusive)} – ${ke(k.rangeEndInclusive)} ${d("eitherOr.standings.pts", "pts")}` : c ? d("eitherOr.standings.yourRange", "Your range: {{start}} – {{end}}", {
-    start: ke(c.rangeStartInclusive),
-    end: ke(c.rangeEndInclusive)
-  }) : null, W = k ? k.totalUsers : c ? c.totalUsers : null, R = 5, F = Math.floor(
-    (p.length - 1) / (R - 1)
-  ), E = new Set(
+  const I = e.filter((k) => k.totalUsers > 0), y = Math.max(...I.map((k) => k.totalUsers), 1), d = Math.log(y + 1), z = e.reduce((k, O) => k + O.totalUsers, 0), S = n != null ? e.find(
+    (k) => n >= k.rangeStartInclusive && n <= k.rangeEndInclusive
+  ) ?? null : null, v = S ? I.findIndex(
+    (k) => k.rangeStartInclusive === S.rangeStartInclusive
+  ) : -1, D = x !== null ? I[x] : null, P = D ? `${o(D.rangeStartInclusive)} – ${o(D.rangeEndInclusive)} ${s("eitherOr.standings.pts", "pts")}` : S ? s("eitherOr.standings.yourRange", "Your range: {{start}} – {{end}}", {
+    start: o(S.rangeStartInclusive),
+    end: o(S.rangeEndInclusive)
+  }) : null, $ = D ? D.totalUsers : S ? S.totalUsers : null, L = 5, N = Math.floor(
+    (I.length - 1) / (L - 1)
+  ), R = new Set(
     Array.from(
-      { length: R },
-      (L, o) => Math.min(o * F, p.length - 1)
+      { length: L },
+      (k, O) => Math.min(O * N, I.length - 1)
     )
   );
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ h(
     r,
     {
       sx: {
         width: "100%",
         boxSizing: "border-box",
         p: u.md,
-        borderRadius: l.sm,
+        borderRadius: c.sm,
         backdropFilter: "blur(4px)",
         position: "relative",
         "&::before": {
@@ -1614,7 +1643,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
           left: 0,
           right: 0,
           bottom: 0,
-          backgroundColor: f.surfaceVariant,
+          backgroundColor: m.surfaceVariant,
           opacity: 0.5,
           borderRadius: "inherit",
           zIndex: 0
@@ -1622,7 +1651,7 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
         "& > *": { position: "relative", zIndex: 1 }
       },
       children: [
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ h(
           r,
           {
             sx: {
@@ -1631,35 +1660,35 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               alignItems: "center",
               pb: u.xs,
               mb: u.xs,
-              borderBottom: `1px solid rgba(${y}, 0.5)`
+              borderBottom: `1px solid rgba(${p}, 0.5)`
             },
             children: [
               /* @__PURE__ */ t(
-                x,
+                C,
                 {
                   sx: {
-                    fontFamily: a,
+                    fontFamily: f,
                     fontSize: "0.7em",
                     fontWeight: 700,
-                    color: s,
+                    color: i,
                     letterSpacing: "0.08em",
                     textTransform: "uppercase"
                   },
-                  children: d("eitherOr.standings.scoreDistribution", "Score Distribution")
+                  children: s("eitherOr.standings.scoreDistribution", "Score Distribution")
                 }
               ),
               /* @__PURE__ */ t(
-                x,
+                C,
                 {
                   sx: {
-                    fontFamily: a,
+                    fontFamily: f,
                     fontSize: "0.7em",
                     fontWeight: 500,
-                    color: s,
+                    color: i,
                     opacity: 0.6
                   },
-                  children: d("eitherOr.standings.totalUsers", "{{count}} users", {
-                    count: P
+                  children: s("eitherOr.standings.totalUsers", "{{count}} users", {
+                    count: z
                   })
                 }
               )
@@ -1676,50 +1705,50 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               px: u.sm,
               py: "10px",
               mb: u.md,
-              borderRadius: l.xs,
-              borderLeft: `3px solid ${v ? i : m}`,
-              backgroundColor: k ? `rgba(${re(m)}, 0.6)` : `rgba(${re(m)}, 0.35)`,
+              borderRadius: c.xs,
+              borderLeft: `3px solid ${P ? l : b}`,
+              backgroundColor: D ? `rgba(${oe(b)}, 0.6)` : `rgba(${oe(b)}, 0.35)`,
               transition: "background-color 200ms ease, border-left-color 200ms ease"
             },
-            children: v ? /* @__PURE__ */ g(De, { children: [
+            children: P ? /* @__PURE__ */ h(et, { children: [
               /* @__PURE__ */ t(
-                x,
+                C,
                 {
                   sx: {
-                    fontFamily: a,
+                    fontFamily: f,
                     fontSize: "0.8em",
-                    color: i,
+                    color: l,
                     fontWeight: 700,
                     letterSpacing: "0.01em"
                   },
-                  children: v
+                  children: P
                 }
               ),
               /* @__PURE__ */ t(
-                x,
+                C,
                 {
                   sx: {
-                    fontFamily: a,
+                    fontFamily: f,
                     fontSize: "0.75em",
-                    color: s,
+                    color: i,
                     fontWeight: 600
                   },
-                  children: d("eitherOr.standings.totalUsers", "{{count}} users", {
-                    count: W ?? 0
+                  children: s("eitherOr.standings.totalUsers", "{{count}} users", {
+                    count: $ ?? 0
                   })
                 }
               )
             ] }) : /* @__PURE__ */ t(
-              x,
+              C,
               {
                 sx: {
-                  fontFamily: a,
+                  fontFamily: f,
                   fontSize: "0.75em",
-                  color: s,
+                  color: i,
                   opacity: 0.4,
                   fontStyle: "italic"
                 },
-                children: d("eitherOr.standings.noScoreHint", "Play and score points to see where you rank on this chart")
+                children: s("eitherOr.standings.noScoreHint", "Play and score points to see where you rank on this chart")
               }
             )
           }
@@ -1731,11 +1760,11 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               display: "flex",
               alignItems: "flex-end",
               gap: "3px",
-              height: `${Sn}px`,
+              height: `${zn}px`,
               width: "100%"
             },
-            children: p.map((L, o) => {
-              const z = o === B, G = b === o, U = Math.log(L.totalUsers + 1) / C * 100, N = z || G ? i : `rgba(${y}, 0.5)`;
+            children: I.map((k, O) => {
+              const H = O === v, j = x === O, V = Math.log(k.totalUsers + 1) / d * 100, a = H || j ? l : `rgba(${p}, 0.5)`;
               return /* @__PURE__ */ t(
                 r,
                 {
@@ -1746,29 +1775,29 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                     alignItems: "flex-end",
                     cursor: "pointer"
                   },
-                  onMouseEnter: () => h(o),
-                  onMouseLeave: () => h(null),
-                  onTouchStart: (Y) => {
-                    Y.preventDefault(), h(o);
+                  onMouseEnter: () => A(O),
+                  onMouseLeave: () => A(null),
+                  onTouchStart: (W) => {
+                    W.preventDefault(), A(O);
                   },
-                  onTouchEnd: () => setTimeout(() => h(null), 2e3),
+                  onTouchEnd: () => setTimeout(() => A(null), 2e3),
                   children: /* @__PURE__ */ t(
                     r,
                     {
                       sx: {
                         width: "100%",
-                        height: I ? `${U}%` : "0%",
+                        height: E ? `${V}%` : "0%",
                         borderRadius: "3px 3px 1px 1px",
-                        backgroundColor: N,
-                        boxShadow: z || G ? `0 0 10px rgba(${y}, 0.4), 0 0 3px rgba(${y}, 0.2)` : "none",
+                        backgroundColor: a,
+                        boxShadow: H || j ? `0 0 10px rgba(${p}, 0.4), 0 0 3px rgba(${p}, 0.2)` : "none",
                         transition: [
-                          `height 480ms cubic-bezier(0.34, 1.56, 0.64, 1) ${o * 18}ms`,
+                          `height 480ms cubic-bezier(0.34, 1.56, 0.64, 1) ${O * 18}ms`,
                           "background-color 150ms ease",
                           "box-shadow 150ms ease"
                         ].join(", "),
                         position: "relative",
                         overflow: "hidden",
-                        "&::after": z ? {
+                        "&::after": H ? {
                           content: '""',
                           position: "absolute",
                           top: 0,
@@ -1781,65 +1810,65 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                     }
                   )
                 },
-                o
+                O
               );
             })
           }
         ),
-        /* @__PURE__ */ t(r, { sx: { height: "1px", backgroundColor: m, mt: "1px" } }),
-        /* @__PURE__ */ t(r, { sx: { position: "relative", height: "18px", mt: "4px" }, children: p.map((L, o) => {
-          if (!E.has(o)) return null;
-          const z = p.length > 1 ? o / (p.length - 1) * 100 : 0, G = o === 0, U = o === p.length - 1;
+        /* @__PURE__ */ t(r, { sx: { height: "1px", backgroundColor: b, mt: "1px" } }),
+        /* @__PURE__ */ t(r, { sx: { position: "relative", height: "18px", mt: "4px" }, children: I.map((k, O) => {
+          if (!R.has(O)) return null;
+          const H = I.length > 1 ? O / (I.length - 1) * 100 : 0, j = O === 0, V = O === I.length - 1;
           return /* @__PURE__ */ t(
-            x,
+            C,
             {
               sx: {
                 position: "absolute",
-                left: `${z}%`,
-                transform: G ? "none" : U ? "translateX(-100%)" : "translateX(-50%)",
+                left: `${H}%`,
+                transform: j ? "none" : V ? "translateX(-100%)" : "translateX(-50%)",
                 fontSize: "0.6em",
-                fontFamily: a,
-                color: s,
+                fontFamily: f,
+                color: i,
                 opacity: 0.4,
                 lineHeight: 1,
                 userSelect: "none"
               },
-              children: ke(L.rangeStartInclusive)
+              children: o(k.rangeStartInclusive)
             },
-            o
+            O
           );
         }) })
       ]
     }
   );
-}, Be = 10, Ot = ({
+}, Je = 10, _t = ({
   game: e,
   sdk: n,
-  stepInfo: i,
-  brandingPrimaryColor: s
+  stepInfo: l,
+  brandingPrimaryColor: i
 }) => {
-  var T;
-  const { t: d } = se(), f = Me(), l = K(), u = ((T = e == null ? void 0 : e.branding) == null ? void 0 : T.colors) || null, a = s || (u == null ? void 0 : u.primaryColor) || l.palette.primary.plainColor, m = (u == null ? void 0 : u.contentColor) || l.textColor, y = be().primary, b = be().secondary, h = fe(), I = pe(), O = ze(), p = l.surfaceVariant, S = f.colorSchemes.light.palette.primary.onPrimary, C = l.outlineEnabledBorder, [P, c] = D(null), [B, k] = D(!0), [v, W] = D(0), [R, F] = D(null), [E, L] = D("leaderboard"), o = (i == null ? void 0 : i.currentPoints) ?? 0;
-  me(() => {
+  var a;
+  const { t: s } = Q(), g = Ne(), o = q(), m = ((a = e == null ? void 0 : e.branding) == null ? void 0 : a.colors) || null, c = i || (m == null ? void 0 : m.primaryColor) || o.palette.primary.plainColor, u = (m == null ? void 0 : m.contentColor) || o.textColor, f = Te().primary, b = Te().secondary, p = pe(), x = ve(), A = Ve(), E = o.surfaceVariant, w = g.colorSchemes.light.palette.primary.onPrimary, I = o.outlineEnabledBorder, [y, d] = B(null), [z, S] = B(!0), [v, D] = B(0), [P, $] = B(null), [L, N] = B("leaderboard"), R = (l == null ? void 0 : l.currentPoints) ?? 0;
+  fe(() => {
     (async () => {
       try {
         if (!e) return;
-        const [j, J] = await Promise.all([
+        const [T, K] = await Promise.all([
           n.miniGames.getEitherOrResults(e.id),
           n.profile.getOwn().getInfo().catch(() => null)
-        ]), X = (J == null ? void 0 : J.id) ?? null;
-        if (F(X), X && j.standings.some(
+        ]), X = (K == null ? void 0 : K.id) ?? null;
+        if ($(X), X && T.standings.some(
           (ee) => ee.userId === X
         )) {
-          c(j);
+          d(T);
           return;
         }
-        if (o > 0) {
-          const oe = [...j.standings], ee = {
+        if (R > 0) {
+          const Z = [...T.standings], ee = {
             userId: "current",
             userModel: {
               id: "current",
-              name: d("common.labels.me", "Me"),
+              name: s("common.labels.me", "Me"),
               nickname: null,
               avatar: null,
               anonymous: !0,
@@ -1853,45 +1882,45 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
               followingCount: 0,
               followersCount: 0
             },
-            personalBest: o.toString()
-          }, te = oe.findIndex(
-            (ie) => Number.parseInt(ie.personalBest) < o
+            personalBest: R.toString()
+          }, J = Z.findIndex(
+            (me) => Number.parseInt(me.personalBest) < R
           );
-          te >= 0 && te < 50 && (oe.splice(te, 0, ee), j.standings = oe);
+          J >= 0 && J < 50 && (Z.splice(J, 0, ee), T.standings = Z);
         }
-        c(j);
+        d(T);
       } catch {
       } finally {
-        k(!1);
+        S(!1);
       }
     })();
-  }, [e, n, i]);
-  const z = {
+  }, [e, n, l]);
+  const k = {
     tableContainer: {
       overflowX: "auto",
-      borderRadius: h.md,
-      border: `1px solid ${C}`
+      borderRadius: p.md,
+      border: `1px solid ${I}`
     },
     table: {
-      backgroundColor: p,
+      backgroundColor: E,
       "--TableCell-paddingX": "0.5em",
       "--TableCell-paddingY": "0.375em",
       cursor: "default",
       "& > tbody > tr:hover": { backgroundColor: "transparent" },
       "& > thead > tr > th": {
-        backgroundColor: `rgba(${re(p)}, 0.8)`,
-        color: m,
-        fontFamily: y,
+        backgroundColor: `rgba(${oe(E)}, 0.8)`,
+        color: u,
+        fontFamily: f,
         fontWeight: 600,
         fontSize: "0.875em",
         textAlign: "center",
-        borderBottom: `1px solid ${C}`
+        borderBottom: `1px solid ${I}`
       }
     },
     headerCellPosition: {
-      backgroundColor: `rgba(${re(p)}, 0.8)`,
-      color: m,
-      fontFamily: y,
+      backgroundColor: `rgba(${oe(E)}, 0.8)`,
+      color: u,
+      fontFamily: f,
       fontWeight: 600,
       fontSize: "0.875em",
       textAlign: "center",
@@ -1899,9 +1928,9 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       width: "10%"
     },
     headerCellName: {
-      backgroundColor: `rgba(${re(p)}, 0.8)`,
-      color: m,
-      fontFamily: y,
+      backgroundColor: `rgba(${oe(E)}, 0.8)`,
+      color: u,
+      fontFamily: f,
       fontWeight: 600,
       fontSize: "0.875em",
       textAlign: "left",
@@ -1909,9 +1938,9 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       width: "80%"
     },
     headerCellPoints: {
-      backgroundColor: `rgba(${re(p)}, 0.8)`,
-      color: m,
-      fontFamily: y,
+      backgroundColor: `rgba(${oe(E)}, 0.8)`,
+      color: u,
+      fontFamily: f,
       fontWeight: 600,
       fontSize: "0.875em",
       textAlign: "center",
@@ -1930,54 +1959,54 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       textAlign: "center"
     },
     userRow: {
-      backgroundColor: `rgba(${re(a)}, 0.1)`
+      backgroundColor: `rgba(${oe(c)}, 0.1)`
     },
     nameCell: {
       display: "flex",
       alignItems: "center",
-      gap: I.sm
+      gap: x.sm
     },
     leaderboardAvatar: {
       width: "32px",
       height: "32px",
       fontSize: "0.875em",
       fontWeight: 600,
-      backgroundColor: a,
-      color: S
+      backgroundColor: c,
+      color: w
     },
     nameText: {
-      fontFamily: y,
+      fontFamily: f,
       fontWeight: 500,
       fontSize: "0.875em",
-      color: m,
+      color: u,
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     },
     positionText: {
-      fontFamily: y,
+      fontFamily: f,
       fontWeight: 600,
       fontSize: "0.875em",
-      color: m
+      color: u
     },
     pointsText: {
-      fontFamily: y,
+      fontFamily: f,
       fontWeight: 600,
       fontSize: "0.875em",
-      color: m
+      color: u
     },
-    avatarIcon: { fontSize: "1em", color: S },
+    avatarIcon: { fontSize: "1em", color: w },
     noLeaderboardText: {
       fontFamily: b,
       fontSize: "1.25em",
-      color: m,
+      color: u,
       textAlign: "center",
-      marginY: I.md
+      marginY: x.md
     }
   };
-  if (B)
-    return /* @__PURE__ */ t(He, { my: 10 });
-  if (!(P != null && P.standings) || P.standings.length === 0)
+  if (z)
+    return /* @__PURE__ */ t(lt, { my: 10 });
+  if (!(y != null && y.standings) || y.standings.length === 0)
     return /* @__PURE__ */ t(
       r,
       {
@@ -1988,30 +2017,30 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
           height: "100%",
           flex: 1
         },
-        children: /* @__PURE__ */ t(x, { level: "body-lg", sx: z.noLeaderboardText, children: d("common.labels.noData", "No standings available yet.") })
+        children: /* @__PURE__ */ t(C, { level: "body-lg", sx: k.noLeaderboardText, children: s("common.labels.noData", "No standings available yet.") })
       }
     );
-  const G = P.standings, U = Math.ceil(G.length / Be), N = G.slice(
-    v * Be,
-    (v + 1) * Be
-  ), Y = [
+  const O = y.standings, H = Math.ceil(O.length / Je), j = O.slice(
+    v * Je,
+    (v + 1) * Je
+  ), V = [
     {
       id: "leaderboard",
-      label: d("eitherOr.standings.leaderboard", "Leaderboard")
+      label: s("eitherOr.standings.leaderboard", "Leaderboard")
     },
     {
       id: "distribution",
-      label: d("eitherOr.standings.distribution", "Distribution")
+      label: s("eitherOr.standings.distribution", "Distribution")
     }
   ];
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ h(
     r,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
-        gap: I.sm,
-        p: I.md
+        gap: x.sm,
+        p: x.md
       },
       children: [
         /* @__PURE__ */ t(
@@ -2019,134 +2048,134 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
           {
             sx: {
               display: "flex",
-              borderRadius: h["2xl"],
+              borderRadius: p["2xl"],
               p: "3px",
-              gap: I.xs
+              gap: x.xs
             },
-            children: Y.map((M) => {
-              const j = E === M.id;
+            children: V.map((W) => {
+              const T = L === W.id;
               return /* @__PURE__ */ t(
                 r,
                 {
-                  onClick: () => L(M.id),
+                  onClick: () => N(W.id),
                   sx: {
                     flex: 1,
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    p: I.xs,
-                    borderRadius: `calc(${h["2xl"]} - 3px)`,
-                    backgroundColor: j ? a : p,
+                    p: x.xs,
+                    borderRadius: `calc(${p["2xl"]} - 3px)`,
+                    backgroundColor: T ? c : E,
                     cursor: "pointer",
                     transition: "background-color 220ms ease",
                     userSelect: "none",
                     WebkitTapHighlightColor: "transparent"
                   },
                   children: /* @__PURE__ */ t(
-                    x,
+                    C,
                     {
                       sx: {
-                        fontFamily: y,
-                        fontWeight: j ? 700 : 500,
+                        fontFamily: f,
+                        fontWeight: T ? 700 : 500,
                         fontSize: "0.8em",
-                        color: j ? S : m,
-                        opacity: j ? 1 : 0.45,
+                        color: T ? w : u,
+                        opacity: T ? 1 : 0.45,
                         transition: "color 220ms ease, opacity 220ms ease",
                         lineHeight: 1
                       },
-                      children: M.label
+                      children: W.label
                     }
                   )
                 },
-                M.id
+                W.id
               );
             })
           }
         ),
-        E === "leaderboard" && /* @__PURE__ */ g(De, { children: [
+        L === "leaderboard" && /* @__PURE__ */ h(et, { children: [
           /* @__PURE__ */ t(
-            x,
+            C,
             {
               sx: {
-                fontFamily: y,
+                fontFamily: f,
                 fontWeight: 700,
                 fontSize: "1.5em",
-                color: m,
+                color: u,
                 textAlign: "center"
               },
-              children: d("eitherOr.leaderboard.top50Note", "Top 50")
+              children: s("eitherOr.leaderboard.top50Note", "Top 50")
             }
           ),
-          /* @__PURE__ */ t(rn, { sx: z.tableContainer, children: /* @__PURE__ */ g(
-            on,
+          /* @__PURE__ */ t(fn, { sx: k.tableContainer, children: /* @__PURE__ */ h(
+            xn,
             {
               variant: "outlined",
               hoverRow: !1,
               borderAxis: "bothBetween",
               size: "sm",
-              sx: z.table,
+              sx: k.table,
               children: [
-                /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ g("tr", { children: [
-                  /* @__PURE__ */ t("th", { style: z.headerCellPosition, children: O ? "" : d("eitherOr.leaderboard.position", "#") }),
-                  /* @__PURE__ */ t("th", { style: z.headerCellName, children: d("eitherOr.leaderboard.name", "Name") }),
-                  /* @__PURE__ */ t("th", { style: z.headerCellPoints, children: O ? "🎯" : d("eitherOr.leaderboard.points", "Pts") })
+                /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ h("tr", { children: [
+                  /* @__PURE__ */ t("th", { style: k.headerCellPosition, children: A ? "" : s("eitherOr.leaderboard.position", "#") }),
+                  /* @__PURE__ */ t("th", { style: k.headerCellName, children: s("eitherOr.leaderboard.name", "Name") }),
+                  /* @__PURE__ */ t("th", { style: k.headerCellPoints, children: A ? "🎯" : s("eitherOr.leaderboard.points", "Pts") })
                 ] }) }),
-                /* @__PURE__ */ t("tbody", { children: N.map((M, j) => {
-                  var te, ie, ce;
-                  const J = v * Be + j, X = M.userId === "current" || R !== null && M.userId === R, oe = ((te = M.userModel) == null ? void 0 : te.avatar) || void 0, ee = ((ie = M.userModel) == null ? void 0 : ie.nickname) || ((ce = M.userModel) == null ? void 0 : ce.name) || d("common.labels.anonymous", "Anonymous");
-                  return /* @__PURE__ */ g(
+                /* @__PURE__ */ t("tbody", { children: j.map((W, T) => {
+                  var J, me, ae;
+                  const K = v * Je + T, X = W.userId === "current" || P !== null && W.userId === P, Z = ((J = W.userModel) == null ? void 0 : J.avatar) || void 0, ee = ((me = W.userModel) == null ? void 0 : me.nickname) || ((ae = W.userModel) == null ? void 0 : ae.name) || s("common.labels.anonymous", "Anonymous");
+                  return /* @__PURE__ */ h(
                     "tr",
                     {
-                      style: X ? z.userRow : void 0,
+                      style: X ? k.userRow : void 0,
                       children: [
-                        /* @__PURE__ */ t("td", { style: z.tableCellPosition, children: /* @__PURE__ */ g(x, { sx: z.positionText, children: [
+                        /* @__PURE__ */ t("td", { style: k.tableCellPosition, children: /* @__PURE__ */ h(C, { sx: k.positionText, children: [
                           "#",
-                          J + 1
+                          K + 1
                         ] }) }),
-                        /* @__PURE__ */ t("td", { style: z.tableCellName, children: /* @__PURE__ */ g(r, { sx: z.nameCell, children: [
-                          /* @__PURE__ */ t(ln, { src: oe, sx: z.leaderboardAvatar, children: !oe && /* @__PURE__ */ t(nn, { sx: z.avatarIcon }) }),
+                        /* @__PURE__ */ t("td", { style: k.tableCellName, children: /* @__PURE__ */ h(r, { sx: k.nameCell, children: [
+                          /* @__PURE__ */ t(bn, { src: Z, sx: k.leaderboardAvatar, children: !Z && /* @__PURE__ */ t(hn, { sx: k.avatarIcon }) }),
                           /* @__PURE__ */ t(
-                            x,
+                            C,
                             {
                               sx: {
-                                ...z.nameText,
+                                ...k.nameText,
                                 fontWeight: X ? 700 : 500,
-                                color: X ? a : m
+                                color: X ? c : u
                               },
-                              children: X ? d("common.labels.me", "Me") : ee
+                              children: X ? s("common.labels.me", "Me") : ee
                             }
                           )
                         ] }) }),
-                        /* @__PURE__ */ t("td", { style: z.tableCellPoints, children: /* @__PURE__ */ t(x, { sx: z.pointsText, children: M.personalBest }) })
+                        /* @__PURE__ */ t("td", { style: k.tableCellPoints, children: /* @__PURE__ */ t(C, { sx: k.pointsText, children: W.personalBest }) })
                       ]
                     },
-                    `${M.userId}-${J}`
+                    `${W.userId}-${K}`
                   );
                 }) })
               ]
             }
           ) }),
-          U > 1 && /* @__PURE__ */ g(
+          H > 1 && /* @__PURE__ */ h(
             r,
             {
               sx: {
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
-                gap: I.sm
+                gap: x.sm
               },
               children: [
                 /* @__PURE__ */ t(
                   r,
                   {
-                    onClick: () => v > 0 && W((M) => M - 1),
+                    onClick: () => v > 0 && D((W) => W - 1),
                     sx: {
                       cursor: v > 0 ? "pointer" : "default",
                       opacity: v > 0 ? 1 : 0.3,
-                      fontFamily: y,
+                      fontFamily: f,
                       fontSize: "1.25em",
                       fontWeight: 600,
-                      color: a,
+                      color: c,
                       px: "12px",
                       py: "6px",
                       borderRadius: "4px",
@@ -2155,33 +2184,33 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                     children: "‹"
                   }
                 ),
-                /* @__PURE__ */ g(
-                  x,
+                /* @__PURE__ */ h(
+                  C,
                   {
                     sx: {
-                      fontFamily: y,
+                      fontFamily: f,
                       fontSize: "0.75em",
-                      color: m,
+                      color: u,
                       opacity: 0.7
                     },
                     children: [
                       v + 1,
                       " / ",
-                      U
+                      H
                     ]
                   }
                 ),
                 /* @__PURE__ */ t(
                   r,
                   {
-                    onClick: () => v < U - 1 && W((M) => M + 1),
+                    onClick: () => v < H - 1 && D((W) => W + 1),
                     sx: {
-                      cursor: v < U - 1 ? "pointer" : "default",
-                      opacity: v < U - 1 ? 1 : 0.3,
-                      fontFamily: y,
+                      cursor: v < H - 1 ? "pointer" : "default",
+                      opacity: v < H - 1 ? 1 : 0.3,
+                      fontFamily: f,
                       fontSize: "1.25em",
                       fontWeight: 600,
-                      color: a,
+                      color: c,
                       px: "12px",
                       py: "6px",
                       borderRadius: "4px",
@@ -2194,204 +2223,206 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
             }
           )
         ] }),
-        E === "distribution" && /* @__PURE__ */ t(
-          Cn,
+        L === "distribution" && /* @__PURE__ */ t(
+          Ln,
           {
-            breakdown: P.breakdown,
-            currentPoints: o > 0 ? o : void 0,
-            primaryColor: a,
-            textColor: m
+            breakdown: y.breakdown,
+            currentPoints: R > 0 ? R : void 0,
+            primaryColor: c,
+            textColor: u
           }
         )
       ]
     }
   );
-}, ye = ({
+}, ke = ({
   children: e,
   brandingBorderColor: n
 }) => {
-  const i = fe().md, s = n || K().secondaryContainer, d = K().surface, f = Gt().size, l = xe(), u = f + " solid " + s;
+  const l = pe().md, i = n || q().secondaryContainer, s = q().surface, g = Jt().size, o = Se(), m = g + " solid " + i;
   return /* @__PURE__ */ t(
     r,
     {
       sx: {
         display: "flex",
-        flexDirection: l ? "column" : "row",
+        flexDirection: o ? "column" : "row",
         width: "100%",
-        borderRadius: i,
+        borderRadius: l,
         boxShadow: "md",
-        border: u,
+        border: m,
         overflow: "hidden",
-        background: d,
+        background: s,
         minHeight: "320px"
       },
       children: e
     }
   );
-}, In = (e) => {
-  var M, j;
+}, On = (e) => {
+  var W, T;
   const {
     eitherOr: n,
-    currentPair: i,
-    stepInfo: s,
-    gameState: d,
-    timer: f,
-    selected: l,
-    feedback: u,
-    sdk: a,
-    defaultImagePlaceholderUrl: m,
-    rulesDisplay: y,
+    currentPair: l,
+    stepInfo: i,
+    gameState: s,
+    timer: g,
+    selected: o,
+    feedback: m,
+    sdk: c,
+    defaultImagePlaceholderUrl: u,
+    rulesDisplay: f,
     showStandings: b,
-    additionalCTA: h,
-    onGameStart: I,
-    onSelection: O,
-    onPlayAgain: p,
-    imagePosition: S = "left"
-  } = e, { t: C } = se(), P = K(), c = ((M = n == null ? void 0 : n.branding) == null ? void 0 : M.colors) || null, B = (c == null ? void 0 : c.primaryColor) || P.palette.primary.plainColor, k = P.secondaryContainer, v = P.surfaceTintDim, W = ((j = re(v || "")) == null ? void 0 : j.replace(/[^\d,]/g, "")) ?? null, R = fe().md, F = be().primary, E = pe(), L = xe(), [o, z] = D(0), G = je(
+    additionalCTA: p,
+    onGameStart: x,
+    onSelection: A,
+    onPlayAgain: E,
+    imagePosition: w = "left"
+  } = e, { t: I } = Q(), y = q(), d = ((W = n == null ? void 0 : n.branding) == null ? void 0 : W.colors) || null, z = (d == null ? void 0 : d.primaryColor) || y.palette.primary.plainColor, S = y.secondaryContainer, v = y.surfaceTintDim, D = ((T = oe(v || "")) == null ? void 0 : T.replace(/[^\d,]/g, "")) ?? null, P = pe().md, $ = Te().primary, L = ve(), N = Se(), [R, k] = B(0), O = st(
     {
       images: n == null ? void 0 : n.images,
-      imagePlaceholder: m || ""
+      imagePlaceholder: u || ""
     },
-    Se.STANDARD
-  ), U = () => {
-    switch (d) {
-      case q.LOADING:
-        return /* @__PURE__ */ t(He, { my: 20 });
-      case q.TUTORIAL:
+    Pe.STANDARD
+  ), H = () => {
+    switch (s) {
+      case _.LOADING:
+        return /* @__PURE__ */ t(lt, { my: 20 });
+      case _.TUTORIAL:
         return /* @__PURE__ */ t(
-          xn,
+          Pn,
           {
-            onStart: I,
+            onStart: x,
             game: n,
-            showSignInCTA: !1
+            showSignInCTA: !1,
+            consents: e.consents,
+            isSubmitting: e.isSubmitting
           }
         );
-      case q.PLAYING:
+      case _.PLAYING:
         return /* @__PURE__ */ t(
-          pn,
+          wn,
           {
-            currentPair: i,
-            timer: f,
+            currentPair: l,
+            timer: g,
             maxTime: (n == null ? void 0 : n.time) ?? 10,
-            selected: l,
-            feedback: u,
-            onSelect: O,
-            stepInfo: s,
-            brandingPrimaryColor: (c == null ? void 0 : c.primaryColor) || null,
+            selected: o,
+            feedback: m,
+            onSelect: A,
+            stepInfo: i,
+            brandingPrimaryColor: (d == null ? void 0 : d.primaryColor) || null,
             game: n
           }
         );
-      case q.RESULTS:
+      case _.RESULTS:
         return /* @__PURE__ */ t(
-          _e,
+          ut,
           {
-            stepInfo: s,
+            stepInfo: i,
             game: n,
-            sdk: a,
-            onPlayAgain: p,
-            brandingPrimaryColor: (c == null ? void 0 : c.primaryColor) || null,
-            additionalCTA: h
+            sdk: c,
+            onPlayAgain: E,
+            brandingPrimaryColor: (d == null ? void 0 : d.primaryColor) || null,
+            additionalCTA: p
           }
         );
       default:
         return null;
     }
-  }, N = d === q.RESULTS, Y = {
+  }, j = s === _.RESULTS, V = {
     display: "flex",
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
-    flex: L ? "0 0 auto" : 1,
-    width: L ? "100%" : "auto",
-    borderBottom: "1px solid " + k,
+    flex: N ? "0 0 auto" : 1,
+    width: N ? "100%" : "auto",
+    borderBottom: "1px solid " + S,
     opacity: "60%",
-    py: E.sm,
-    px: E.md,
-    gap: E.xs,
+    py: L.sm,
+    px: L.md,
+    gap: L.xs,
     "&:not(.Mui-selected):hover": {
-      bgcolor: W ? `rgba(${W},0.06)` : `${v}0F`
+      bgcolor: D ? `rgba(${D},0.06)` : `${v}0F`
     },
-    [`&.${vt.selected}`]: {
-      bgcolor: W ? `rgba(${W},0.06)` : `${v}0F`,
-      borderBottom: "3px solid " + B,
+    [`&.${Wt.selected}`]: {
+      bgcolor: D ? `rgba(${D},0.06)` : `${v}0F`,
+      borderBottom: "3px solid " + z,
       opacity: "100%",
       mb: "-1px"
     }
-  }, T = {
+  }, a = {
     flex: 1,
     display: "flex",
     flexDirection: "column",
     overflow: "auto"
   };
-  return N && b ? /* @__PURE__ */ t(ye, { brandingBorderColor: (c == null ? void 0 : c.borderColor) || null, children: /* @__PURE__ */ g(
-    Pt,
+  return j && b ? /* @__PURE__ */ t(ke, { brandingBorderColor: (d == null ? void 0 : d.borderColor) || null, children: /* @__PURE__ */ h(
+    Mt,
     {
-      value: o,
-      onChange: (J, X) => z(X),
+      value: R,
+      onChange: (K, X) => k(X),
       sx: {
-        borderRadius: R,
+        borderRadius: P,
         width: "100%",
         backgroundColor: "transparent"
       },
       children: [
-        /* @__PURE__ */ g(
-          kt,
+        /* @__PURE__ */ h(
+          Ht,
           {
             sx: {
               fontSize: "1em",
               "--Icon-fontSize": "1.25em",
-              flexDirection: L ? "column" : "row"
+              flexDirection: N ? "column" : "row"
             },
             children: [
-              /* @__PURE__ */ t(Ee, { sx: Y, disableIndicator: !0, children: /* @__PURE__ */ g(
+              /* @__PURE__ */ t(nt, { sx: V, disableIndicator: !0, children: /* @__PURE__ */ h(
                 r,
                 {
                   sx: {
                     display: "flex",
                     alignItems: "center",
-                    gap: E.xs
+                    gap: L.xs
                   },
                   children: [
-                    /* @__PURE__ */ t(ve, { sx: { fontSize: "1.25em" } }),
+                    /* @__PURE__ */ t(De, { sx: { fontSize: "1.25em" } }),
                     /* @__PURE__ */ t(
-                      x,
+                      C,
                       {
                         sx: {
-                          fontFamily: F,
+                          fontFamily: $,
                           fontSize: "1em",
                           fontWeight: 500,
                           lineHeight: "24px",
                           letterSpacing: "0.4px",
                           textTransform: "uppercase"
                         },
-                        children: C("eitherOr.tabs.score", "Score")
+                        children: I("eitherOr.tabs.score", "Score")
                       }
                     )
                   ]
                 }
               ) }),
-              /* @__PURE__ */ t(Ee, { sx: Y, disableIndicator: !0, children: /* @__PURE__ */ g(
+              /* @__PURE__ */ t(nt, { sx: V, disableIndicator: !0, children: /* @__PURE__ */ h(
                 r,
                 {
                   sx: {
                     display: "flex",
                     alignItems: "center",
-                    gap: E.xs
+                    gap: L.xs
                   },
                   children: [
-                    /* @__PURE__ */ t(wt, { sx: { fontSize: "1.25em" } }),
+                    /* @__PURE__ */ t(jt, { sx: { fontSize: "1.25em" } }),
                     /* @__PURE__ */ t(
-                      x,
+                      C,
                       {
                         sx: {
-                          fontFamily: F,
+                          fontFamily: $,
                           fontSize: "1em",
                           fontWeight: 500,
                           lineHeight: "24px",
                           letterSpacing: "0.4px",
                           textTransform: "uppercase"
                         },
-                        children: C("eitherOr.tabs.standings", "Standings")
+                        children: I("eitherOr.tabs.standings", "Standings")
                       }
                     )
                   ]
@@ -2400,39 +2431,39 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
             ]
           }
         ),
-        o === 0 && /* @__PURE__ */ t(We, { value: 0, sx: { p: 0, fontSize: "1em", display: "flex" }, children: /* @__PURE__ */ t(r, { sx: T, children: U() }) }),
-        o === 1 && /* @__PURE__ */ t(We, { value: 1, sx: { p: 0, fontSize: "1em", display: "flex" }, children: /* @__PURE__ */ t(r, { sx: T, children: /* @__PURE__ */ t(
-          Ot,
+        R === 0 && /* @__PURE__ */ t(rt, { value: 0, sx: { p: 0, fontSize: "1em", display: "flex" }, children: /* @__PURE__ */ t(r, { sx: a, children: H() }) }),
+        R === 1 && /* @__PURE__ */ t(rt, { value: 1, sx: { p: 0, fontSize: "1em", display: "flex" }, children: /* @__PURE__ */ t(r, { sx: a, children: /* @__PURE__ */ t(
+          _t,
           {
             game: n,
-            sdk: a,
-            stepInfo: s,
-            brandingPrimaryColor: (c == null ? void 0 : c.primaryColor) || null
+            sdk: c,
+            stepInfo: i,
+            brandingPrimaryColor: (d == null ? void 0 : d.primaryColor) || null
           }
         ) }) })
       ]
     }
-  ) }) : N ? /* @__PURE__ */ t(ye, { brandingBorderColor: (c == null ? void 0 : c.borderColor) || null, children: /* @__PURE__ */ t(r, { sx: T, children: U() }) }) : /* @__PURE__ */ t(ye, { brandingBorderColor: (c == null ? void 0 : c.borderColor) || null, children: /* @__PURE__ */ t(
-    _t,
+  ) }) : j ? /* @__PURE__ */ t(ke, { brandingBorderColor: (d == null ? void 0 : d.borderColor) || null, children: /* @__PURE__ */ t(r, { sx: a, children: H() }) }) : /* @__PURE__ */ t(ke, { brandingBorderColor: (d == null ? void 0 : d.borderColor) || null, children: /* @__PURE__ */ t(
+    sn,
     {
       entity: n,
-      headline: C("eitherOr.headline", "Either/Or"),
-      finalImage: G,
-      imagePosition: S,
-      rulesDisplay: y,
-      children: U()
+      headline: I("eitherOr.headline", "Either/Or"),
+      finalImage: O,
+      imagePosition: w,
+      rulesDisplay: f,
+      children: H()
     }
   ) });
-}, Tn = () => {
-  const { t: e } = se();
-  return /* @__PURE__ */ t(ye, { brandingBorderColor: null, children: /* @__PURE__ */ t(
-    qt,
+}, Bn = () => {
+  const { t: e } = Q();
+  return /* @__PURE__ */ t(ke, { brandingBorderColor: null, children: /* @__PURE__ */ t(
+    cn,
     {
       notFoundTitle: e("eitherOr.eitherOrNotFound"),
       notFoundMessage: e("eitherOr.eitherOrNotFoundDescription")
     }
   ) });
-}, vn = (e) => ({
+}, Dn = (e) => ({
   // Pulse animation for buttons
   pulseAnimation: {
     "@keyframes pulse": {
@@ -2480,154 +2511,154 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
     display: "flex",
     alignItems: "center"
   }
-}), Pn = (e) => {
-  var p, S, C, P, c;
-  const n = ((p = e.eitherOr.branding) == null ? void 0 : p.colors) || null, i = xe(), s = Me(), d = je(
+}), $n = (e) => {
+  var E, w, I, y, d;
+  const n = ((E = e.eitherOr.branding) == null ? void 0 : E.colors) || null, l = Se(), i = Ne(), s = st(
     {
       images: e.eitherOr.images,
       imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
     },
-    Se.STANDARD
-  ), f = be().primary, l = fe().xl, u = (n == null ? void 0 : n.primaryColor) || K().palette.primary.plainColor, a = K().palette.primary.onPrimary, m = (n == null ? void 0 : n.contentColor) || K().textColor, y = i ? ((S = e.eitherOr.branding) == null ? void 0 : S.images.mobileLogo) || ((C = e.eitherOr.branding) == null ? void 0 : C.images.mainLogo) || "" : ((P = e.eitherOr.branding) == null ? void 0 : P.images.mainLogo) || "", { t: b } = se(), h = e.imagePosition || "left", I = vn({
-    fontFamilyPrimary: f,
-    buttonRadius: l,
-    primaryColor: u,
-    onPrimaryColor: a
-  }), O = () => {
-    var B, k, v, W;
-    return e.signInCTA ? (B = e.signInCTA) != null && B.component ? e.signInCTA.component : (k = e.signInCTA) != null && k.onClick ? /* @__PURE__ */ t(
-      ge,
+    Pe.STANDARD
+  ), g = Te().primary, o = pe().xl, m = (n == null ? void 0 : n.primaryColor) || q().palette.primary.plainColor, c = q().palette.primary.onPrimary, u = (n == null ? void 0 : n.contentColor) || q().textColor, f = l ? ((w = e.eitherOr.branding) == null ? void 0 : w.images.mobileLogo) || ((I = e.eitherOr.branding) == null ? void 0 : I.images.mainLogo) || "" : ((y = e.eitherOr.branding) == null ? void 0 : y.images.mainLogo) || "", { t: b } = Q(), p = e.imagePosition || "left", x = Dn({
+    fontFamilyPrimary: g,
+    buttonRadius: o,
+    primaryColor: m,
+    onPrimaryColor: c
+  }), A = () => {
+    var z, S, v, D;
+    return e.signInCTA ? (z = e.signInCTA) != null && z.component ? e.signInCTA.component : (S = e.signInCTA) != null && S.onClick ? /* @__PURE__ */ t(
+      ye,
       {
         variant: "soft",
         sx: {
-          ...I.signInButton,
-          ...I.pulseAnimation
+          ...x.signInButton,
+          ...x.pulseAnimation
         },
         onClick: e.signInCTA.onClick,
-        children: /* @__PURE__ */ t(x, { sx: I.signInButtonText, children: e.signInCTA.defaultLabel || b("common.signIn") })
+        children: /* @__PURE__ */ t(C, { sx: x.signInButtonText, children: e.signInCTA.defaultLabel || b("common.signIn") })
       }
     ) : (v = e.signInCTA) != null && v.url ? typeof window > "u" ? /* @__PURE__ */ t(
       r,
       {
         component: "a",
         href: e.signInCTA.url,
-        target: ((W = e.signInCTA) == null ? void 0 : W.target) || "_self",
+        target: ((D = e.signInCTA) == null ? void 0 : D.target) || "_self",
         sx: {
-          ...I.signInButton,
-          ...I.pulseAnimation,
+          ...x.signInButton,
+          ...x.pulseAnimation,
           textDecoration: "none",
           display: "inline-flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ t(x, { sx: I.signInButtonText, children: e.signInCTA.defaultLabel || b("common.signIn") })
+        children: /* @__PURE__ */ t(C, { sx: x.signInButtonText, children: e.signInCTA.defaultLabel || b("common.signIn") })
       }
     ) : /* @__PURE__ */ t(
-      ge,
+      ye,
       {
         variant: "soft",
         sx: {
-          ...I.signInButton,
-          ...I.pulseAnimation
+          ...x.signInButton,
+          ...x.pulseAnimation
         },
         onClick: () => {
-          var R, F, E;
-          ((R = e.signInCTA) == null ? void 0 : R.target) === "_blank" ? window.open((F = e.signInCTA) == null ? void 0 : F.url, "_blank") : window.location.href = (E = e.signInCTA) == null ? void 0 : E.url;
+          var P, $, L;
+          ((P = e.signInCTA) == null ? void 0 : P.target) === "_blank" ? window.open(($ = e.signInCTA) == null ? void 0 : $.url, "_blank") : window.location.href = (L = e.signInCTA) == null ? void 0 : L.url;
         },
-        children: /* @__PURE__ */ t(x, { sx: I.signInButtonText, children: e.signInCTA.defaultLabel || b("common.signIn") })
+        children: /* @__PURE__ */ t(C, { sx: x.signInButtonText, children: e.signInCTA.defaultLabel || b("common.signIn") })
       }
     ) : /* @__PURE__ */ t(
-      ge,
+      ye,
       {
         variant: "soft",
         sx: {
-          ...I.signInButton
+          ...x.signInButton
         },
         disabled: !0,
-        children: /* @__PURE__ */ t(x, { sx: I.signInButtonText, children: e.signInCTA.defaultLabel || b("common.signIn") })
+        children: /* @__PURE__ */ t(C, { sx: x.signInButtonText, children: e.signInCTA.defaultLabel || b("common.signIn") })
       }
     ) : /* @__PURE__ */ t(
-      ge,
+      ye,
       {
         variant: "soft",
         sx: {
-          ...I.signInButton
+          ...x.signInButton
         },
         disabled: !0,
-        children: /* @__PURE__ */ t(x, { sx: I.signInButtonText, children: b("common.signIn") })
+        children: /* @__PURE__ */ t(C, { sx: x.signInButtonText, children: b("common.signIn") })
       }
     );
   };
-  return /* @__PURE__ */ t(ye, { brandingBorderColor: (n == null ? void 0 : n.borderColor) || null, children: /* @__PURE__ */ t(
-    an,
+  return /* @__PURE__ */ t(ke, { brandingBorderColor: (n == null ? void 0 : n.borderColor) || null, children: /* @__PURE__ */ t(
+    yn,
     {
       entity: e.eitherOr,
       headline: b("eitherOr.headline"),
-      finalImage: d,
-      imagePosition: h,
-      signInContent: O(),
+      finalImage: s,
+      imagePosition: p,
+      signInContent: A(),
       brandingContent: /* @__PURE__ */ t(
-        de,
+        ue,
         {
-          brandingLogo: y,
-          textColor: i && d ? (n == null ? void 0 : n.contentColor) || s.colorSchemes.dark.textColor : m,
-          label: ((c = e.eitherOr.labels) == null ? void 0 : c.sponsor) || null
+          brandingLogo: f,
+          textColor: l && s ? (n == null ? void 0 : n.contentColor) || i.colorSchemes.dark.textColor : u,
+          label: ((d = e.eitherOr.labels) == null ? void 0 : d.sponsor) || null
         }
       ),
       rulesDisplay: e.rulesDisplay
     }
   ) });
-}, kn = ({
+}, Fn = ({
   eitherOr: e,
   imagePosition: n,
-  defaultImagePlaceholderUrl: i,
-  rulesDisplay: s
+  defaultImagePlaceholderUrl: l,
+  rulesDisplay: i
 }) => {
-  var m;
-  const { t: d } = se(), f = ((m = e.branding) == null ? void 0 : m.colors) || null, { brandingLogo: l } = Ge(
+  var u;
+  const { t: s } = Q(), g = ((u = e.branding) == null ? void 0 : u.colors) || null, { brandingLogo: o } = it(
     e.branding || null
-  ), u = (y) => {
+  ), m = (f) => {
     var b;
     return /* @__PURE__ */ t(
-      de,
+      ue,
       {
-        brandingLogo: l,
-        textColor: y,
+        brandingLogo: o,
+        textColor: f,
         label: ((b = e.labels) == null ? void 0 : b.sponsor) || null
       }
     );
-  }, a = {
+  }, c = {
     entity: e,
-    headline: d("eitherOr.headline"),
+    headline: s("eitherOr.headline"),
     tryAgainButtonText: "",
     isApiError: !1,
     alertVariant: "neutral",
-    customAlertTitle: d("eitherOr.gameNotAvailable"),
-    customAlertMessage: d("eitherOr.gameNotAvailableDescription"),
-    renderPresentedBy: u
+    customAlertTitle: s("eitherOr.gameNotAvailable"),
+    customAlertMessage: s("eitherOr.gameNotAvailableDescription"),
+    renderPresentedBy: m
   };
-  return /* @__PURE__ */ t(ye, { brandingBorderColor: (f == null ? void 0 : f.borderColor) || null, children: /* @__PURE__ */ t(
-    Tt,
+  return /* @__PURE__ */ t(ke, { brandingBorderColor: (g == null ? void 0 : g.borderColor) || null, children: /* @__PURE__ */ t(
+    Bt,
     {
-      ...a,
+      ...c,
       imagePosition: n || "left",
-      defaultImagePlaceholderUrl: i,
-      rulesDisplay: s
+      defaultImagePlaceholderUrl: l,
+      rulesDisplay: i
     }
   ) });
-}, An = (e) => {
-  var f, l, u, a, m, y, b;
-  const { t: n } = se(), i = ((f = e.eitherOr.branding) == null ? void 0 : f.colors) || null, s = xe() ? ((u = (l = e.eitherOr.branding) == null ? void 0 : l.images) == null ? void 0 : u.mobileLogo) || ((m = (a = e.eitherOr.branding) == null ? void 0 : a.images) == null ? void 0 : m.mainLogo) || "" : ((b = (y = e.eitherOr.branding) == null ? void 0 : y.images) == null ? void 0 : b.mainLogo) || "", d = {
+}, En = (e) => {
+  var g, o, m, c, u, f, b;
+  const { t: n } = Q(), l = ((g = e.eitherOr.branding) == null ? void 0 : g.colors) || null, i = Se() ? ((m = (o = e.eitherOr.branding) == null ? void 0 : o.images) == null ? void 0 : m.mobileLogo) || ((u = (c = e.eitherOr.branding) == null ? void 0 : c.images) == null ? void 0 : u.mainLogo) || "" : ((b = (f = e.eitherOr.branding) == null ? void 0 : f.images) == null ? void 0 : b.mainLogo) || "", s = {
     ...e.eitherOr,
     branding: e.eitherOr.branding ? {
       ...e.eitherOr.branding,
       colors: e.eitherOr.branding.colors ? { ...e.eitherOr.branding.colors, secondaryColor: void 0 } : null
     } : null
   };
-  return /* @__PURE__ */ t(ye, { brandingBorderColor: (i == null ? void 0 : i.borderColor) || null, children: /* @__PURE__ */ t(
-    Tt,
+  return /* @__PURE__ */ t(ke, { brandingBorderColor: (l == null ? void 0 : l.borderColor) || null, children: /* @__PURE__ */ t(
+    Bt,
     {
-      entity: d,
+      entity: s,
       headline: n("eitherOr.headline"),
       tryAgainButtonText: n("eitherOr.buttons.tryAgain"),
       defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
@@ -2635,77 +2666,79 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       isApiError: e.isApiError,
       toggleTryAgain: e.toggleTryAgain,
       apiErrorMessage: e.apiErrorMessage,
-      renderPresentedBy: (h) => {
-        var I;
+      renderPresentedBy: (p) => {
+        var x;
         return /* @__PURE__ */ t(
-          de,
+          ue,
           {
-            brandingLogo: s,
-            textColor: h,
-            label: ((I = e.eitherOr.labels) == null ? void 0 : I.sponsor) || null
+            brandingLogo: i,
+            textColor: p,
+            label: ((x = e.eitherOr.labels) == null ? void 0 : x.sponsor) || null
           }
         );
       },
       rulesDisplay: e.rulesDisplay
     }
   ) });
-}, Bt = ({
+}, qt = ({
   sdk: e,
   contentId: n,
-  contentName: i,
-  brandingColors: s,
-  brandingUrls: d,
-  campaignId: f,
-  campaignName: l,
-  startGame: u,
-  fields: a = ["fullName", "email"],
-  leadTitle: m,
-  leadDescription: y,
+  contentName: l,
+  brandingColors: i,
+  brandingUrls: s,
+  campaignId: g,
+  campaignName: o,
+  startGame: m,
+  fields: c = ["fullName", "email"],
+  leadTitle: u,
+  leadDescription: f,
   leadCta: b,
-  leadSuccessTitle: h,
-  leadSuccessDescription: I,
-  syncWithProfile: O = !1,
-  isAfterPosition: p = !1,
-  isSubmittingParticipation: S = !1
+  leadSuccessTitle: p,
+  leadSuccessDescription: x,
+  syncWithProfile: A = !1,
+  consents: E,
+  isAfterPosition: w = !1,
+  isSubmittingParticipation: I = !1
 }) => {
-  const { t: C } = se(), P = m ?? C("leads.header.title"), c = y ?? C("leads.header.description"), B = b ?? C("leads.buttons.submit"), k = h ?? C("leads.success.title"), v = I ?? C("leads.success.description"), W = {
-    defaultLabel: C(p ? "eitherOr.buttons.finish" : "eitherOr.buttons.start"),
-    onClick: u
+  const { t: y } = Q(), d = u ?? y("leads.header.title"), z = f ?? y("leads.header.description"), S = b ?? y("leads.buttons.submit"), v = p ?? y("leads.success.title"), D = x ?? y("leads.success.description"), P = {
+    defaultLabel: y(w ? "eitherOr.buttons.finish" : "eitherOr.buttons.start"),
+    onClick: m
   };
   return /* @__PURE__ */ t(
-    un,
+    Sn,
     {
       sdk: e,
       content: {
         id: n,
         type: "either-or",
-        name: i
+        name: l
       },
-      onSuccessCta: W,
+      onSuccessCta: P,
       branding: {
-        colors: s,
-        urls: d
+        colors: i,
+        urls: s
       },
       campaign: {
-        id: f,
-        name: l
+        id: g,
+        name: o
       },
-      fields: a,
+      fields: c,
       labels: {
-        title: P,
-        description: c,
-        submitButtonLabel: B,
-        successTitle: k,
-        successDescription: v
+        title: d,
+        description: z,
+        submitButtonLabel: S,
+        successTitle: v,
+        successDescription: D
       },
-      syncWithProfile: O,
-      isSubmittingParticipation: S
+      syncWithProfile: A,
+      consents: E,
+      isSubmittingParticipation: I
     }
   );
-}, wn = (e) => {
-  const { t: n } = se();
+}, Un = (e) => {
+  const { t: n } = Q();
   return /* @__PURE__ */ t(
-    sn,
+    Dt,
     {
       entity: e.eitherOr,
       headline: n("eitherOr.headline"),
@@ -2715,13 +2748,14 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       imagePosition: e.imagePosition,
       onLeadSubmitted: e.onLeadSubmitted,
       isSubmitting: e.isSubmitting,
-      MainCard: ye,
-      PresentedBy: de,
-      CollectLeadWrapper: Bt,
+      MainCard: ke,
+      PresentedBy: ue,
+      CollectLeadWrapper: qt,
+      consents: e.consents,
       rulesDisplay: e.rulesDisplay
     }
   );
-}, zn = (e) => ({
+}, Wn = (e) => ({
   // Pulse animation for buttons
   pulseAnimation: {
     "@keyframes pulse": {
@@ -2833,208 +2867,210 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
     flexDirection: e.isMobile ? "column-reverse" : "row",
     gap: e.spacingScale.md
   }
-}), Rn = (e) => {
-  var et, tt, nt, rt, ot, it, lt, at, st, ct, dt, ut, mt, gt, ft, ht, xt, bt, pt, yt;
+}), Mn = (e) => {
+  var ne, xe, Le, be, Ue, We, Me, Ze, bt, yt, pt, St, Ct, It, kt, Tt, vt, Pt, At, wt;
   const {
     eitherOr: n,
-    currentPair: i,
-    stepInfo: s,
-    gameState: d,
-    timer: f,
-    selected: l,
-    feedback: u,
-    sdk: a,
-    defaultImagePlaceholderUrl: m,
-    rulesDisplay: y,
+    currentPair: l,
+    stepInfo: i,
+    gameState: s,
+    timer: g,
+    selected: o,
+    feedback: m,
+    sdk: c,
+    defaultImagePlaceholderUrl: u,
+    rulesDisplay: f,
     showStandings: b,
-    additionalCTA: h,
-    onGameStart: I,
-    onSelection: O,
-    onPlayAgain: p
-  } = e, S = Me(), C = pe(), P = xe(), { t: c } = se(), [B, k] = D(0), [v, W] = D(0), [R, F] = D(!1), [E, L] = D(0), [o, z] = D(0), [G, U] = D(!1), N = qe(0), { brandingImage: Y, brandingColors: T } = Ge(
+    additionalCTA: p,
+    consents: x,
+    isSubmitting: A,
+    onGameStart: E,
+    onSelection: w,
+    onPlayAgain: I
+  } = e, y = Ne(), d = ve(), z = Se(), { t: S } = Q(), [v, D] = B(0), [P, $] = B(0), [L, N] = B(!1), [R, k] = B(0), [O, H] = B(0), [j, V] = B(!1), a = mt(0), { brandingImage: W, brandingColors: T } = it(
     n.branding || null
-  ), M = m || (P ? Ke : Xe), j = je(
-    { images: n == null ? void 0 : n.images, imagePlaceholder: M },
-    Se.OVERLAY
-  ), J = Y || j, X = Ct(J), oe = St(
-    Se.OVERLAY
-  ), ee = S.customRadius.dark.sm, te = S.customRadius.dark.md, ie = (T == null ? void 0 : T.backgroundColor) || ((tt = (et = S.colorSchemes) == null ? void 0 : et.dark) == null ? void 0 : tt.surfaceVariant), ce = (rt = (nt = S.customRadius) == null ? void 0 : nt.light) == null ? void 0 : rt.xl, _ = (T == null ? void 0 : T.primaryColor) || ((at = (lt = (it = (ot = S.colorSchemes) == null ? void 0 : ot.light) == null ? void 0 : it.palette) == null ? void 0 : lt.primary) == null ? void 0 : at.plainColor), H = (ut = (dt = (ct = (st = S.colorSchemes) == null ? void 0 : st.light) == null ? void 0 : ct.palette) == null ? void 0 : dt.primary) == null ? void 0 : ut.onPrimary, w = S.customFontFamily.dark.primary, $ = S.colorSchemes.dark.textColor, A = S.colorSchemes.dark.surface, V = S.colorSchemes.dark.secondaryContainer, Z = S.colorSchemes.dark.surfaceTintDim, le = ((mt = re(Z || "")) == null ? void 0 : mt.replace(/[^\d,]/g, "")) ?? null, he = re(_ || ""), Q = zn({
-    spacingScale: C,
-    smBorderRadius: ee,
-    contentBgColor: ie,
+  ), K = u || (z ? ht : ft), X = st(
+    { images: n == null ? void 0 : n.images, imagePlaceholder: K },
+    Pe.OVERLAY
+  ), Z = W || X, ee = Ot(Z), J = Lt(
+    Pe.OVERLAY
+  ), me = y.customRadius.dark.sm, ae = y.customRadius.dark.md, se = (T == null ? void 0 : T.backgroundColor) || ((xe = (ne = y.colorSchemes) == null ? void 0 : ne.dark) == null ? void 0 : xe.surfaceVariant), ce = (be = (Le = y.customRadius) == null ? void 0 : Le.light) == null ? void 0 : be.xl, Y = (T == null ? void 0 : T.primaryColor) || ((Ze = (Me = (We = (Ue = y.colorSchemes) == null ? void 0 : Ue.light) == null ? void 0 : We.palette) == null ? void 0 : Me.primary) == null ? void 0 : Ze.plainColor), he = (St = (pt = (yt = (bt = y.colorSchemes) == null ? void 0 : bt.light) == null ? void 0 : yt.palette) == null ? void 0 : pt.primary) == null ? void 0 : St.onPrimary, U = y.customFontFamily.dark.primary, G = y.colorSchemes.dark.textColor, de = y.colorSchemes.dark.surface, Ae = y.colorSchemes.dark.secondaryContainer, we = y.colorSchemes.dark.surfaceTintDim, Ce = ((Ct = oe(we || "")) == null ? void 0 : Ct.replace(/[^\d,]/g, "")) ?? null, Ie = oe(Y || ""), ie = Wn({
+    spacingScale: d,
+    smBorderRadius: me,
+    contentBgColor: se,
     buttonRadius: ce,
-    primaryColor: _,
-    onPrimaryColor: H,
-    fontFamilyPrimary: w,
-    darkTextColor: $,
-    isMobile: P
+    primaryColor: Y,
+    onPrimaryColor: he,
+    fontFamilyPrimary: U,
+    darkTextColor: G,
+    isMobile: z
   });
-  me(() => {
-    if (s != null && s.currentPoints && s.currentPoints > v) {
-      L(s.currentPoints - v), F(!0), z((ae) => ae + 1);
-      const ne = setTimeout(() => F(!1), 1e3);
-      return W(s.currentPoints), () => clearTimeout(ne);
+  fe(() => {
+    if (i != null && i.currentPoints && i.currentPoints > P) {
+      k(i.currentPoints - P), N(!0), H((le) => le + 1);
+      const re = setTimeout(() => N(!1), 1e3);
+      return $(i.currentPoints), () => clearTimeout(re);
     }
-  }, [s == null ? void 0 : s.currentPoints, v]);
-  const Ce = (n == null ? void 0 : n.points) ?? [], Ie = Ce.length >= 2 ? Ce[1].correctSteps - Ce[0].correctSteps : ((gt = Ce[0]) == null ? void 0 : gt.correctSteps) || 5;
-  me(() => {
-    const ne = N.current, ae = (s == null ? void 0 : s.currentStreak) ?? 0;
-    if (N.current = ae, ae > ne && ae > 0 && ae % Ie === 0) {
-      U(!0);
-      const ue = setTimeout(() => U(!1), 500);
-      return () => clearTimeout(ue);
+  }, [i == null ? void 0 : i.currentPoints, P]);
+  const Fe = (n == null ? void 0 : n.points) ?? [], Re = Fe.length >= 2 ? Fe[1].correctSteps - Fe[0].correctSteps : ((It = Fe[0]) == null ? void 0 : It.correctSteps) || 5;
+  fe(() => {
+    const re = a.current, le = (i == null ? void 0 : i.currentStreak) ?? 0;
+    if (a.current = le, le > re && le > 0 && le % Re === 0) {
+      V(!0);
+      const ge = setTimeout(() => V(!1), 500);
+      return () => clearTimeout(ge);
     }
-  }, [s == null ? void 0 : s.currentStreak, Ie]);
-  const Re = P ? ((ht = (ft = n.branding) == null ? void 0 : ft.images) == null ? void 0 : ht.mobileLogo) || ((bt = (xt = n.branding) == null ? void 0 : xt.images) == null ? void 0 : bt.mainLogo) || "" : ((yt = (pt = n.branding) == null ? void 0 : pt.images) == null ? void 0 : yt.mainLogo) || "", $t = c("common.labels.point", { count: v }), Dt = () => {
-    const ne = [], ae = (s == null ? void 0 : s.currentLives) ?? 3;
-    for (let ue = 0; ue < ae; ue++)
-      ne.push(
+  }, [i == null ? void 0 : i.currentStreak, Re]);
+  const ze = z ? ((Tt = (kt = n.branding) == null ? void 0 : kt.images) == null ? void 0 : Tt.mobileLogo) || ((Pt = (vt = n.branding) == null ? void 0 : vt.images) == null ? void 0 : Pt.mainLogo) || "" : ((wt = (At = n.branding) == null ? void 0 : At.images) == null ? void 0 : wt.mainLogo) || "", Ye = S("common.labels.point", { count: P }), _e = () => {
+    const re = [], le = (i == null ? void 0 : i.currentLives) ?? 3;
+    for (let ge = 0; ge < le; ge++)
+      re.push(
         /* @__PURE__ */ t(
-          Fe,
+          tt,
           {
-            sx: { height: 20, color: _ }
+            sx: { height: 20, color: Y }
           },
-          `life-${ue}`
+          `life-${ge}`
         )
       );
-    for (let ue = ae; ue < 3; ue++)
-      ne.push(
+    for (let ge = le; ge < 3; ge++)
+      re.push(
         /* @__PURE__ */ t(
-          It,
+          Ut,
           {
             sx: {
               height: 20,
-              color: he ? `rgba(${he.replace(/[^\d,]/g, "")}, 0.35)` : `${_}59`
+              color: Ie ? `rgba(${Ie.replace(/[^\d,]/g, "")}, 0.35)` : `${Y}59`
             }
           },
-          `empty-${ue}`
+          `empty-${ge}`
         )
       );
-    return ne;
-  }, Ft = () => {
-    const ne = (s == null ? void 0 : s.currentStreak) ?? 0, ae = G ? Ie : ne % Ie, Te = Math.floor(ne / Ie) + 1;
-    return /* @__PURE__ */ g(r, { sx: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-      Array.from({ length: Ie }, (Ve, Le) => /* @__PURE__ */ t(
+    return re;
+  }, qe = () => {
+    const re = (i == null ? void 0 : i.currentStreak) ?? 0, le = j ? Re : re % Re, He = Math.floor(re / Re) + 1;
+    return /* @__PURE__ */ h(r, { sx: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+      Array.from({ length: Re }, (Rt, Oe) => /* @__PURE__ */ t(
         r,
         {
           sx: {
             flex: 1,
             height: 4,
-            bgcolor: Le < ae ? _ : $,
+            bgcolor: Oe < le ? Y : G,
             borderRadius: "2px",
             transition: "background-color 0.3s ease"
           }
         },
-        `streak-${Le}`
+        `streak-${Oe}`
       )),
-      Te > 1 && /* @__PURE__ */ g(
-        x,
+      He > 1 && /* @__PURE__ */ h(
+        C,
         {
           sx: {
-            color: _,
+            color: Y,
             fontWeight: 700,
             fontSize: "0.75em",
             lineHeight: 1,
-            ml: C["2xs"],
+            ml: d["2xs"],
             flexShrink: 0
           },
           children: [
             "×",
-            Te
+            He
           ]
         }
       )
     ] });
-  }, Et = () => /* @__PURE__ */ t(r, { sx: Q.dividerContainer, children: /* @__PURE__ */ t(
+  }, Ke = () => /* @__PURE__ */ t(r, { sx: ie.dividerContainer, children: /* @__PURE__ */ t(
     r,
     {
       sx: {
         borderRadius: "50%",
-        bgcolor: A,
+        bgcolor: de,
         boxShadow: "sm",
         width: "32px",
         height: "32px",
         minWidth: "32px",
         border: "1px solid",
-        borderColor: _,
+        borderColor: Y,
         display: "flex",
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ t(At, { sx: { fontSize: "1.1em", color: _ } })
+      children: /* @__PURE__ */ t(Gt, { sx: { fontSize: "1.1em", color: Y } })
     }
-  ) }), Wt = () => {
-    var ne;
-    return i ? /* @__PURE__ */ g(r, { sx: Q.mainContentSection, children: [
-      /* @__PURE__ */ t(r, { sx: Q.timerContainer, children: /* @__PURE__ */ t(
-        Lt,
+  ) }), Xe = () => {
+    var re;
+    return l ? /* @__PURE__ */ h(r, { sx: ie.mainContentSection, children: [
+      /* @__PURE__ */ t(r, { sx: ie.timerContainer, children: /* @__PURE__ */ t(
+        Yt,
         {
-          time: f,
+          time: g,
           maxTime: (n == null ? void 0 : n.time) ?? 10,
           brandingPrimaryColor: (T == null ? void 0 : T.primaryColor) || null
         },
-        `timer-${i.pairId}`
+        `timer-${l.pairId}`
       ) }),
-      /* @__PURE__ */ g(r, { sx: Q.contentContainerWithBackdrop, children: [
-        /* @__PURE__ */ g(r, { sx: Q.optionsContainer, children: [
-          /* @__PURE__ */ t(r, { sx: Q.optionWrapper, children: /* @__PURE__ */ t(
-            Ue,
+      /* @__PURE__ */ h(r, { sx: ie.contentContainerWithBackdrop, children: [
+        /* @__PURE__ */ h(r, { sx: ie.optionsContainer, children: [
+          /* @__PURE__ */ t(r, { sx: ie.optionWrapper, children: /* @__PURE__ */ t(
+            ot,
             {
-              option: i.optionOne,
-              selected: l,
-              feedback: u,
-              onSelect: O,
-              pairId: i.pairId,
+              option: l.optionOne,
+              selected: o,
+              feedback: m,
+              onSelect: w,
+              pairId: l.pairId,
               brandingPrimaryColor: (T == null ? void 0 : T.primaryColor) || null,
               optionIndex: 0
             }
           ) }),
-          Et(),
-          /* @__PURE__ */ t(r, { sx: Q.optionWrapper, children: /* @__PURE__ */ t(
-            Ue,
+          Ke(),
+          /* @__PURE__ */ t(r, { sx: ie.optionWrapper, children: /* @__PURE__ */ t(
+            ot,
             {
-              option: i.optionTwo,
-              selected: l,
-              feedback: u,
-              onSelect: O,
-              pairId: i.pairId,
+              option: l.optionTwo,
+              selected: o,
+              feedback: m,
+              onSelect: w,
+              pairId: l.pairId,
               brandingPrimaryColor: (T == null ? void 0 : T.primaryColor) || null,
               optionIndex: 1
             }
           ) })
         ] }),
-        /* @__PURE__ */ g(r, { children: [
-          /* @__PURE__ */ t(r, { sx: { mb: C.xs }, children: Ft() }),
-          /* @__PURE__ */ g(
-            we,
+        /* @__PURE__ */ h(r, { children: [
+          /* @__PURE__ */ t(r, { sx: { mb: d.xs }, children: qe() }),
+          /* @__PURE__ */ h(
+            je,
             {
               direction: "row",
               justifyContent: "space-between",
               alignItems: "center",
               children: [
-                /* @__PURE__ */ t(r, { children: Dt() }),
-                /* @__PURE__ */ g(we, { direction: "row", spacing: 1, alignItems: "center", children: [
-                  /* @__PURE__ */ g(x, { sx: { color: $ }, children: [
-                    $t,
+                /* @__PURE__ */ t(r, { children: _e() }),
+                /* @__PURE__ */ h(je, { direction: "row", spacing: 1, alignItems: "center", children: [
+                  /* @__PURE__ */ h(C, { sx: { color: G }, children: [
+                    Ye,
                     ":"
                   ] }),
-                  /* @__PURE__ */ g(
-                    x,
+                  /* @__PURE__ */ h(
+                    C,
                     {
                       level: "h4",
-                      sx: { position: "relative", color: $ },
+                      sx: { position: "relative", color: G },
                       children: [
-                        v,
-                        R && /* @__PURE__ */ g(
-                          x,
+                        P,
+                        L && /* @__PURE__ */ h(
+                          C,
                           {
-                            sx: Rt.pointsAdded,
+                            sx: Nt.pointsAdded,
                             children: [
                               "+",
-                              E
+                              R
                             ]
                           },
-                          o
+                          O
                         )
                       ]
                     }
@@ -3045,113 +3081,113 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
           )
         ] })
       ] }),
-      Re && /* @__PURE__ */ t(r, { sx: Q.bottomFooterContainer, children: /* @__PURE__ */ t(
-        de,
+      ze && /* @__PURE__ */ t(r, { sx: ie.bottomFooterContainer, children: /* @__PURE__ */ t(
+        ue,
         {
-          brandingLogo: Re,
-          textColor: $,
-          label: ((ne = n == null ? void 0 : n.labels) == null ? void 0 : ne.sponsor) || null,
-          isCentered: P
+          brandingLogo: ze,
+          textColor: G,
+          label: ((re = n == null ? void 0 : n.labels) == null ? void 0 : re.sponsor) || null,
+          isCentered: z
         }
       ) })
     ] }) : null;
-  }, Je = {
+  }, Ee = {
     display: "flex",
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
-    flex: P ? "0 0 auto" : 1,
-    width: P ? "100%" : "auto",
-    borderBottom: "1px solid " + V,
+    flex: z ? "0 0 auto" : 1,
+    width: z ? "100%" : "auto",
+    borderBottom: "1px solid " + Ae,
     opacity: "60%",
-    py: C.sm,
-    px: C.md,
-    gap: C.xs,
+    py: d.sm,
+    px: d.md,
+    gap: d.xs,
     "&:not(.Mui-selected):hover": {
-      bgcolor: le ? `rgba(${le},0.06)` : `${Z}0F`
+      bgcolor: Ce ? `rgba(${Ce},0.06)` : `${we}0F`
     },
-    [`&.${vt.selected}`]: {
-      bgcolor: le ? `rgba(${le},0.06)` : `${Z}0F`,
-      borderBottom: "3px solid " + _,
+    [`&.${Wt.selected}`]: {
+      bgcolor: Ce ? `rgba(${Ce},0.06)` : `${we}0F`,
+      borderBottom: "3px solid " + Y,
       opacity: "100%",
       mb: "-1px"
     }
-  }, Qe = {
+  }, M = {
     flex: 1,
     display: "flex",
     flexDirection: "column",
     overflow: "auto"
-  }, Ut = () => b ? /* @__PURE__ */ t(r, { sx: { width: "100%" }, children: /* @__PURE__ */ g(
-    Pt,
+  }, F = () => b ? /* @__PURE__ */ t(r, { sx: { width: "100%" }, children: /* @__PURE__ */ h(
+    Mt,
     {
-      value: B,
-      onChange: (ne, ae) => k(ae),
+      value: v,
+      onChange: (re, le) => D(le),
       sx: {
-        borderRadius: te,
+        borderRadius: ae,
         width: "100%",
         backgroundColor: "transparent"
       },
       children: [
-        /* @__PURE__ */ g(
-          kt,
+        /* @__PURE__ */ h(
+          Ht,
           {
             sx: {
               fontSize: "1em",
               "--Icon-fontSize": "1.25em",
-              flexDirection: P ? "column" : "row"
+              flexDirection: z ? "column" : "row"
             },
             children: [
-              /* @__PURE__ */ t(Ee, { sx: Je, disableIndicator: !0, children: /* @__PURE__ */ g(
+              /* @__PURE__ */ t(nt, { sx: Ee, disableIndicator: !0, children: /* @__PURE__ */ h(
                 r,
                 {
                   sx: {
                     display: "flex",
                     alignItems: "center",
-                    gap: C.xs
+                    gap: d.xs
                   },
                   children: [
-                    /* @__PURE__ */ t(ve, { sx: { fontSize: "1.25em" } }),
+                    /* @__PURE__ */ t(De, { sx: { fontSize: "1.25em" } }),
                     /* @__PURE__ */ t(
-                      x,
+                      C,
                       {
                         sx: {
-                          fontFamily: w,
+                          fontFamily: U,
                           fontSize: "1em",
                           fontWeight: 500,
                           lineHeight: "24px",
                           letterSpacing: "0.4px",
                           textTransform: "uppercase",
-                          color: $
+                          color: G
                         },
-                        children: c("eitherOr.tabs.score", "Score")
+                        children: S("eitherOr.tabs.score", "Score")
                       }
                     )
                   ]
                 }
               ) }),
-              /* @__PURE__ */ t(Ee, { sx: Je, disableIndicator: !0, children: /* @__PURE__ */ g(
+              /* @__PURE__ */ t(nt, { sx: Ee, disableIndicator: !0, children: /* @__PURE__ */ h(
                 r,
                 {
                   sx: {
                     display: "flex",
                     alignItems: "center",
-                    gap: C.xs
+                    gap: d.xs
                   },
                   children: [
-                    /* @__PURE__ */ t(wt, { sx: { fontSize: "1.25em" } }),
+                    /* @__PURE__ */ t(jt, { sx: { fontSize: "1.25em" } }),
                     /* @__PURE__ */ t(
-                      x,
+                      C,
                       {
                         sx: {
-                          fontFamily: w,
+                          fontFamily: U,
                           fontSize: "1em",
                           fontWeight: 500,
                           lineHeight: "24px",
                           letterSpacing: "0.4px",
                           textTransform: "uppercase",
-                          color: $
+                          color: G
                         },
-                        children: c("eitherOr.tabs.standings", "Standings")
+                        children: S("eitherOr.tabs.standings", "Standings")
                       }
                     )
                   ]
@@ -3160,35 +3196,35 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
             ]
           }
         ),
-        B === 0 && /* @__PURE__ */ t(
-          We,
+        v === 0 && /* @__PURE__ */ t(
+          rt,
           {
             value: 0,
             sx: { p: 0, fontSize: "1em", display: "flex" },
-            children: /* @__PURE__ */ t(r, { sx: Qe, children: /* @__PURE__ */ t(
-              _e,
+            children: /* @__PURE__ */ t(r, { sx: M, children: /* @__PURE__ */ t(
+              ut,
               {
-                stepInfo: s,
+                stepInfo: i,
                 game: n,
-                sdk: a,
-                onPlayAgain: p,
+                sdk: c,
+                onPlayAgain: I,
                 brandingPrimaryColor: (T == null ? void 0 : T.primaryColor) || null,
-                additionalCTA: h
+                additionalCTA: p
               }
             ) })
           }
         ),
-        B === 1 && /* @__PURE__ */ t(
-          We,
+        v === 1 && /* @__PURE__ */ t(
+          rt,
           {
             value: 1,
             sx: { p: 0, fontSize: "1em", display: "flex" },
-            children: /* @__PURE__ */ t(r, { sx: Qe, children: /* @__PURE__ */ t(
-              Ot,
+            children: /* @__PURE__ */ t(r, { sx: M, children: /* @__PURE__ */ t(
+              _t,
               {
                 game: n,
-                sdk: a,
-                stepInfo: s,
+                sdk: c,
+                stepInfo: i,
                 brandingPrimaryColor: (T == null ? void 0 : T.primaryColor) || null
               }
             ) })
@@ -3197,60 +3233,60 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       ]
     }
   ) }) : /* @__PURE__ */ t(
-    _e,
+    ut,
     {
-      stepInfo: s,
+      stepInfo: i,
       game: n,
-      sdk: a,
-      onPlayAgain: p,
+      sdk: c,
+      onPlayAgain: I,
       brandingPrimaryColor: (T == null ? void 0 : T.primaryColor) || null,
-      additionalCTA: h
+      additionalCTA: p
     }
-  ), Mt = () => {
-    var ne;
-    switch (d) {
-      case q.LOADING:
-        return /* @__PURE__ */ t(He, { my: 20 });
-      case q.TUTORIAL: {
-        const ae = [
+  ), te = () => {
+    var re, le, ge;
+    switch (s) {
+      case _.LOADING:
+        return /* @__PURE__ */ t(lt, { my: 20 });
+      case _.TUTORIAL: {
+        const He = [
           {
-            icon: /* @__PURE__ */ t(zt, { sx: { fontSize: "1.1em" } }),
-            title: c("eitherOr.tutorial.step1Title"),
-            description: c("eitherOr.tutorial.step1Description", {
+            icon: /* @__PURE__ */ t(Vt, { sx: { fontSize: "1.1em" } }),
+            title: S("eitherOr.tutorial.step1Title"),
+            description: S("eitherOr.tutorial.step1Description", {
               seconds: (n == null ? void 0 : n.time) ?? 10
             })
           },
           {
-            icon: /* @__PURE__ */ t(Fe, { sx: { fontSize: "1.1em" } }),
-            title: c("eitherOr.tutorial.step2Title", {
+            icon: /* @__PURE__ */ t(tt, { sx: { fontSize: "1.1em" } }),
+            title: S("eitherOr.tutorial.step2Title", {
               lives: (n == null ? void 0 : n.lives) ?? 3,
               context: String((n == null ? void 0 : n.lives) ?? 3)
             }),
-            description: c("eitherOr.tutorial.step2Description", {
+            description: S("eitherOr.tutorial.step2Description", {
               lives: (n == null ? void 0 : n.lives) ?? 3,
               context: String((n == null ? void 0 : n.lives) ?? 3)
             })
           },
           {
-            icon: /* @__PURE__ */ t(ve, { sx: { fontSize: "1.1em" } }),
-            title: c("eitherOr.tutorial.step3Title"),
-            description: c("eitherOr.tutorial.step3Description")
+            icon: /* @__PURE__ */ t(De, { sx: { fontSize: "1.1em" } }),
+            title: S("eitherOr.tutorial.step3Title"),
+            description: S("eitherOr.tutorial.step3Description")
           }
-        ], ue = he ? `rgba(${he.replace(/[^\d,]/g, "")}, 0.12)` : `${_}20`;
-        return /* @__PURE__ */ g(
+        ], Rt = Ie ? `rgba(${Ie.replace(/[^\d,]/g, "")}, 0.12)` : `${Y}20`;
+        return /* @__PURE__ */ h(
           r,
           {
             sx: {
               display: "flex",
               flexDirection: "column",
-              gap: C.md
+              gap: d.md
             },
             children: [
               /* @__PURE__ */ t(
                 r,
                 {
                   sx: {
-                    borderRadius: ee,
+                    borderRadius: me,
                     overflow: "hidden",
                     display: "flex",
                     flexDirection: "column",
@@ -3263,25 +3299,25 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                       left: 0,
                       right: 0,
                       bottom: 0,
-                      backgroundColor: ie,
+                      backgroundColor: se,
                       opacity: 0.5,
                       borderRadius: "inherit",
                       zIndex: 0
                     },
                     "& > *": { position: "relative", zIndex: 1 }
                   },
-                  children: ae.map((Te, Ve) => {
-                    const Le = Ve === ae.length - 1;
-                    return /* @__PURE__ */ g(r, { children: [
-                      /* @__PURE__ */ g(
+                  children: He.map((Oe, zt) => {
+                    const Kt = zt === He.length - 1;
+                    return /* @__PURE__ */ h(r, { children: [
+                      /* @__PURE__ */ h(
                         r,
                         {
                           sx: {
                             display: "flex",
                             alignItems: "flex-start",
-                            gap: C.md,
-                            px: C.md,
-                            py: C.md
+                            gap: d.md,
+                            px: d.md,
+                            py: d.md
                           },
                           children: [
                             /* @__PURE__ */ t(
@@ -3291,88 +3327,114 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
                                   width: 36,
                                   height: 36,
                                   borderRadius: "50%",
-                                  bgcolor: ue,
-                                  color: _,
+                                  bgcolor: Rt,
+                                  color: Y,
                                   display: "flex",
                                   alignItems: "center",
                                   justifyContent: "center",
                                   flexShrink: 0
                                 },
-                                children: Te.icon
+                                children: Oe.icon
                               }
                             ),
-                            /* @__PURE__ */ g(r, { sx: { flex: 1, minWidth: 0, pt: "2px" }, children: [
+                            /* @__PURE__ */ h(r, { sx: { flex: 1, minWidth: 0, pt: "2px" }, children: [
                               /* @__PURE__ */ t(
-                                x,
+                                C,
                                 {
                                   sx: {
-                                    fontFamily: w,
+                                    fontFamily: U,
                                     fontWeight: 700,
                                     fontSize: "0.875em",
                                     lineHeight: 1.3,
-                                    color: $
+                                    color: G
                                   },
-                                  children: Te.title
+                                  children: Oe.title
                                 }
                               ),
                               /* @__PURE__ */ t(
-                                x,
+                                C,
                                 {
                                   sx: {
-                                    fontFamily: w,
+                                    fontFamily: U,
                                     fontWeight: 400,
                                     fontSize: "0.75em",
                                     lineHeight: 1.6,
-                                    color: $,
+                                    color: G,
                                     opacity: 0.65,
-                                    mt: C["2xs"]
+                                    mt: d["2xs"]
                                   },
-                                  children: Te.description
+                                  children: Oe.description
                                 }
                               )
                             ] })
                           ]
                         }
                       ),
-                      !Le && /* @__PURE__ */ t(
+                      !Kt && /* @__PURE__ */ t(
                         r,
                         {
                           sx: {
                             height: "1px",
-                            mx: C.md,
-                            bgcolor: he ? `rgba(${he.replace(/[^\d,]/g, "")}, 0.1)` : `${_}1A`
+                            mx: d.md,
+                            bgcolor: Ie ? `rgba(${Ie.replace(/[^\d,]/g, "")}, 0.1)` : `${Y}1A`
                           }
                         }
                       )
-                    ] }, Ve);
+                    ] }, zt);
                   })
                 }
               ),
-              /* @__PURE__ */ g(
+              x != null && x.items.length ? /* @__PURE__ */ t(r, { sx: ie.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
+                at,
+                {
+                  consents: x,
+                  primaryColor: Y,
+                  textColor: G,
+                  brandingUrls: (re = n == null ? void 0 : n.branding) == null ? void 0 : re.urls
+                }
+              ) }) : null,
+              /* @__PURE__ */ h(
                 r,
                 {
                   sx: {
-                    ...Q.filterScreenContainer,
-                    justifyContent: Re ? "space-between" : "flex-end"
+                    ...ie.filterScreenContainer,
+                    justifyContent: ze ? "space-between" : "flex-end"
                   },
                   children: [
                     /* @__PURE__ */ t(
-                      de,
+                      ue,
                       {
-                        brandingLogo: Re,
-                        textColor: $,
-                        label: ((ne = n == null ? void 0 : n.labels) == null ? void 0 : ne.sponsor) || null,
-                        isCentered: P
+                        brandingLogo: ze,
+                        textColor: G,
+                        label: ((le = n == null ? void 0 : n.labels) == null ? void 0 : le.sponsor) || null,
+                        isCentered: z
                       }
                     ),
                     /* @__PURE__ */ t(
-                      ge,
+                      ye,
                       {
                         variant: "soft",
-                        sx: { ...Q.startButton, ...Q.pulseAnimation },
-                        endDecorator: /* @__PURE__ */ t(Ze, {}),
-                        onClick: I,
-                        children: /* @__PURE__ */ t(x, { sx: Q.startButtonText, children: c("eitherOr.buttons.start") })
+                        loading: A,
+                        sx: {
+                          ...ie.startButton,
+                          ...ie.pulseAnimation,
+                          ...A ? Et(
+                            Y,
+                            he
+                          ) : {}
+                        },
+                        endDecorator: /* @__PURE__ */ t(xt, { children: /* @__PURE__ */ t(gt, {}) }),
+                        onClick: E,
+                        children: /* @__PURE__ */ t(
+                          C,
+                          {
+                            sx: {
+                              ...ie.startButtonText,
+                              ...A ? { color: "transparent" } : {}
+                            },
+                            children: ((ge = x == null ? void 0 : x.labels) == null ? void 0 : ge.ctaLabel) || S("eitherOr.buttons.start")
+                          }
+                        )
                       }
                     )
                   ]
@@ -3382,32 +3444,32 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
           }
         );
       }
-      case q.PLAYING:
-        return Wt();
+      case _.PLAYING:
+        return Xe();
       default:
         return null;
     }
   };
-  return d === q.RESULTS ? /* @__PURE__ */ t(
-    Zt,
+  return s === _.RESULTS ? /* @__PURE__ */ t(
+    Cn,
     {
       entity: n,
-      backgroundImage: X,
-      imageBackgroundGradient: oe,
+      backgroundImage: ee,
+      imageBackgroundGradient: J,
       isWrappedWithScoreStateWrapper: !0,
-      children: Ut()
+      children: F()
     }
   ) : /* @__PURE__ */ t(
-    Kt,
+    dn,
     {
       entity: n,
-      headline: c("eitherOr.headline"),
-      finalImage: J,
-      rulesDisplay: y,
-      children: Mt()
+      headline: S("eitherOr.headline"),
+      finalImage: Z,
+      rulesDisplay: f,
+      children: te()
     }
   );
-}, Ln = (e) => ({
+}, Hn = (e) => ({
   // Pulse animation for buttons
   pulseAnimation: {
     "@keyframes pulse": {
@@ -3445,109 +3507,109 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
     display: "flex",
     alignItems: "center"
   }
-}), On = (e) => {
-  var P, c, B, k, v, W, R, F, E, L, o;
-  const n = Me(), { t: i } = se(), s = xe(), d = St(
-    Se.OVERLAY
-  ), f = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : s ? Ke : Xe, l = je(
-    { images: e.eitherOr.images, imagePlaceholder: f },
-    Se.OVERLAY
-  ), { brandingImage: u, brandingColors: a, brandingLogo: m } = Ge(e.eitherOr.branding || null), b = Ct(u || l), h = (c = (P = n.customRadius) == null ? void 0 : P.light) == null ? void 0 : c.xl, I = (a == null ? void 0 : a.primaryColor) || ((W = (v = (k = (B = n.colorSchemes) == null ? void 0 : B.light) == null ? void 0 : k.palette) == null ? void 0 : v.primary) == null ? void 0 : W.plainColor), O = (L = (E = (F = (R = n.colorSchemes) == null ? void 0 : R.light) == null ? void 0 : F.palette) == null ? void 0 : E.primary) == null ? void 0 : L.onPrimary, p = n.customFontFamily.dark.primary, S = Ln({
-    buttonRadius: h,
-    primaryColor: I,
-    onPrimaryColor: O,
-    fontFamilyPrimary: p
-  }), C = () => {
-    var z, G, U, N;
-    return e.signInCTA ? (z = e.signInCTA) != null && z.component ? e.signInCTA.component : (G = e.signInCTA) != null && G.onClick ? /* @__PURE__ */ t(
-      ge,
+}), Gn = (e) => {
+  var y, d, z, S, v, D, P, $, L, N, R;
+  const n = Ne(), { t: l } = Q(), i = Se(), s = Lt(
+    Pe.OVERLAY
+  ), g = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : i ? ht : ft, o = st(
+    { images: e.eitherOr.images, imagePlaceholder: g },
+    Pe.OVERLAY
+  ), { brandingImage: m, brandingColors: c, brandingLogo: u } = it(e.eitherOr.branding || null), b = Ot(m || o), p = (d = (y = n.customRadius) == null ? void 0 : y.light) == null ? void 0 : d.xl, x = (c == null ? void 0 : c.primaryColor) || ((D = (v = (S = (z = n.colorSchemes) == null ? void 0 : z.light) == null ? void 0 : S.palette) == null ? void 0 : v.primary) == null ? void 0 : D.plainColor), A = (N = (L = ($ = (P = n.colorSchemes) == null ? void 0 : P.light) == null ? void 0 : $.palette) == null ? void 0 : L.primary) == null ? void 0 : N.onPrimary, E = n.customFontFamily.dark.primary, w = Hn({
+    buttonRadius: p,
+    primaryColor: x,
+    onPrimaryColor: A,
+    fontFamilyPrimary: E
+  }), I = () => {
+    var k, O, H, j;
+    return e.signInCTA ? (k = e.signInCTA) != null && k.component ? e.signInCTA.component : (O = e.signInCTA) != null && O.onClick ? /* @__PURE__ */ t(
+      ye,
       {
         variant: "soft",
-        sx: { ...S.signInButton, ...S.pulseAnimation },
+        sx: { ...w.signInButton, ...w.pulseAnimation },
         onClick: e.signInCTA.onClick,
-        children: /* @__PURE__ */ t(x, { sx: S.signInButtonText, children: e.signInCTA.defaultLabel || i("common.signIn") })
+        children: /* @__PURE__ */ t(C, { sx: w.signInButtonText, children: e.signInCTA.defaultLabel || l("common.signIn") })
       }
-    ) : (U = e.signInCTA) != null && U.url ? typeof window > "u" ? /* @__PURE__ */ t(
+    ) : (H = e.signInCTA) != null && H.url ? typeof window > "u" ? /* @__PURE__ */ t(
       r,
       {
         component: "a",
         href: e.signInCTA.url,
-        target: ((N = e.signInCTA) == null ? void 0 : N.target) || "_self",
+        target: ((j = e.signInCTA) == null ? void 0 : j.target) || "_self",
         sx: {
-          ...S.signInButton,
-          ...S.pulseAnimation,
+          ...w.signInButton,
+          ...w.pulseAnimation,
           textDecoration: "none",
           display: "inline-flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ t(x, { sx: S.signInButtonText, children: e.signInCTA.defaultLabel || i("common.signIn") })
+        children: /* @__PURE__ */ t(C, { sx: w.signInButtonText, children: e.signInCTA.defaultLabel || l("common.signIn") })
       }
     ) : /* @__PURE__ */ t(
-      ge,
+      ye,
       {
         variant: "soft",
-        sx: { ...S.signInButton, ...S.pulseAnimation },
+        sx: { ...w.signInButton, ...w.pulseAnimation },
         onClick: () => {
-          var Y, T, M;
-          ((Y = e.signInCTA) == null ? void 0 : Y.target) === "_blank" ? window.open((T = e.signInCTA) == null ? void 0 : T.url, "_blank") : window.location.href = (M = e.signInCTA) == null ? void 0 : M.url;
+          var V, a, W;
+          ((V = e.signInCTA) == null ? void 0 : V.target) === "_blank" ? window.open((a = e.signInCTA) == null ? void 0 : a.url, "_blank") : window.location.href = (W = e.signInCTA) == null ? void 0 : W.url;
         },
-        children: /* @__PURE__ */ t(x, { sx: S.signInButtonText, children: e.signInCTA.defaultLabel || i("common.signIn") })
+        children: /* @__PURE__ */ t(C, { sx: w.signInButtonText, children: e.signInCTA.defaultLabel || l("common.signIn") })
       }
-    ) : /* @__PURE__ */ t(ge, { variant: "soft", sx: S.signInButton, disabled: !0, children: /* @__PURE__ */ t(x, { sx: S.signInButtonText, children: e.signInCTA.defaultLabel || i("common.signIn") }) }) : /* @__PURE__ */ t(ge, { variant: "soft", sx: S.signInButton, disabled: !0, children: /* @__PURE__ */ t(x, { sx: S.signInButtonText, children: i("common.signIn") }) });
+    ) : /* @__PURE__ */ t(ye, { variant: "soft", sx: w.signInButton, disabled: !0, children: /* @__PURE__ */ t(C, { sx: w.signInButtonText, children: e.signInCTA.defaultLabel || l("common.signIn") }) }) : /* @__PURE__ */ t(ye, { variant: "soft", sx: w.signInButton, disabled: !0, children: /* @__PURE__ */ t(C, { sx: w.signInButtonText, children: l("common.signIn") }) });
   };
   return /* @__PURE__ */ t(
-    cn,
+    pn,
     {
       entity: e.eitherOr,
-      headline: i("eitherOr.headline"),
+      headline: l("eitherOr.headline"),
       backgroundImage: b,
-      imageBackgroundGradient: d,
-      signInContent: C(),
+      imageBackgroundGradient: s,
+      signInContent: I(),
       brandingContent: /* @__PURE__ */ t(
-        de,
+        ue,
         {
-          brandingLogo: m,
+          brandingLogo: u,
           textColor: n.colorSchemes.dark.textColor,
-          label: ((o = e.eitherOr.labels) == null ? void 0 : o.sponsor) || null
+          label: ((R = e.eitherOr.labels) == null ? void 0 : R.sponsor) || null
         }
       ),
       rulesDisplay: e.rulesDisplay
     }
   );
-}, Bn = (e) => {
-  const { t: n } = se(), i = xe(), s = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : i ? Ke : Xe, { brandingLogo: d } = Ge(
+}, jn = (e) => {
+  const { t: n } = Q(), l = Se(), i = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : l ? ht : ft, { brandingLogo: s } = it(
     e.eitherOr.branding || null
   );
   return /* @__PURE__ */ t(
-    tn,
+    on,
     {
       entity: e.eitherOr,
       headline: n("eitherOr.headline"),
       tryAgainButtonText: n("eitherOr.buttons.tryAgain"),
-      defaultImagePlaceholderUrl: s,
+      defaultImagePlaceholderUrl: i,
       isApiError: e.isApiError,
       apiErrorMessage: e.apiErrorMessage,
       toggleTryAgain: e.toggleTryAgain,
-      renderPresentedBy: (f) => {
-        var l;
+      renderPresentedBy: (g) => {
+        var o;
         return /* @__PURE__ */ t(
-          de,
+          ue,
           {
-            brandingLogo: d,
-            textColor: f,
-            label: ((l = e.eitherOr.labels) == null ? void 0 : l.sponsor) || null,
-            isCentered: i
+            brandingLogo: s,
+            textColor: g,
+            label: ((o = e.eitherOr.labels) == null ? void 0 : o.sponsor) || null,
+            isCentered: l
           }
         );
       },
       rulesDisplay: e.rulesDisplay
     }
   );
-}, $n = (e) => {
-  const { t: n } = se();
+}, Vn = (e) => {
+  const { t: n } = Q();
   return /* @__PURE__ */ t(
-    dn,
+    $t,
     {
       entity: e.eitherOr,
       headline: n("eitherOr.headline"),
@@ -3556,250 +3618,377 @@ const Ye = Pe(/* @__PURE__ */ t("path", {
       defaultImagePlaceholder: e.defaultImagePlaceholderUrl,
       onLeadSubmitted: e.onLeadSubmitted,
       isSubmitting: e.isSubmitting,
-      PresentedBy: de,
-      CollectLeadWrapper: Bt,
+      PresentedBy: ue,
+      CollectLeadWrapper: qt,
+      consents: e.consents,
       rulesDisplay: e.rulesDisplay
     }
   );
+}, Nn = (e) => {
+  var s, g, o;
+  const { t: n } = Q(), l = ((s = e.eitherOr.branding) == null ? void 0 : s.colors) || null, i = (l == null ? void 0 : l.primaryColor) || q().palette.primary.plainColor;
+  return /* @__PURE__ */ t(
+    Dt,
+    {
+      entity: e.eitherOr,
+      headline: n("eitherOr.headline"),
+      sdk: e.sdk,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      imagePosition: e.imagePosition,
+      onLeadSubmitted: e.onSubmit,
+      isSubmitting: e.isSubmitting,
+      MainCard: ke,
+      PresentedBy: ue,
+      rulesDisplay: e.rulesDisplay,
+      content: /* @__PURE__ */ t(
+        at,
+        {
+          consents: e.consents,
+          primaryColor: i,
+          brandingUrls: (g = e.eitherOr.branding) == null ? void 0 : g.urls,
+          align: "center"
+        }
+      ),
+      footerAction: /* @__PURE__ */ t(
+        Ft,
+        {
+          onClick: e.onSubmit,
+          label: ((o = e.consents.labels) == null ? void 0 : o.ctaLabel) || n("eitherOr.buttons.finish"),
+          isSubmitting: e.isSubmitting,
+          primaryColor: i
+        }
+      )
+    }
+  );
+}, Yn = (e) => {
+  var g, o, m;
+  const { t: n } = Q(), l = Ne(), i = ((g = e.eitherOr.branding) == null ? void 0 : g.colors) || null, s = (i == null ? void 0 : i.primaryColor) || l.colorSchemes.dark.palette.primary.plainColor;
+  return /* @__PURE__ */ t(
+    $t,
+    {
+      entity: e.eitherOr,
+      headline: n("eitherOr.headline"),
+      sdk: e.sdk,
+      defaultImagePlaceholder: e.defaultImagePlaceholderUrl,
+      onLeadSubmitted: e.onSubmit,
+      isSubmitting: e.isSubmitting,
+      PresentedBy: ue,
+      rulesDisplay: e.rulesDisplay,
+      content: /* @__PURE__ */ t(
+        at,
+        {
+          consents: e.consents,
+          primaryColor: s,
+          textColor: (i == null ? void 0 : i.contentColor) || l.colorSchemes.dark.textColor,
+          brandingUrls: (o = e.eitherOr.branding) == null ? void 0 : o.urls
+        }
+      ),
+      footerAction: /* @__PURE__ */ t(
+        Ft,
+        {
+          onClick: e.onSubmit,
+          label: ((m = e.consents.labels) == null ? void 0 : m.ctaLabel) || n("eitherOr.buttons.finish"),
+          isSubmitting: e.isSubmitting,
+          primaryColor: s
+        }
+      )
+    }
+  );
 };
-function Ae(e) {
-  return e.template === Se.STANDARD;
+function Be(e) {
+  return e.template === Pe.STANDARD;
 }
-function $e(e) {
-  return e.template === Se.OVERLAY;
+function Qe(e) {
+  return e.template === Pe.OVERLAY;
 }
-const Dn = (e) => {
-  var ee, te, ie, ce, _;
-  const [n, i] = D(
-    q.LOADING
-  ), [s, d] = D(null), [f, l] = D(null), [u, a] = D(10), [m, y] = D(null), [b, h] = D({
+const _n = (e) => {
+  var ze, Ye, _e, qe, Ke, Xe, Ee;
+  const [n, l] = B(
+    _.LOADING
+  ), [i, s] = B(null), [g, o] = B(null), [m, c] = B(10), [u, f] = B(null), [b, p] = B({
     isCorrect: null,
     selectedOption: null
-  }), [I, O] = D(!1), [p, S] = D(!1), [C, P] = D(!1), [c, B] = D(""), [k, v] = D(!1), [W, R] = D(!1), [F, E] = D(!1), L = qe(null), o = fn(e.entityId, e.sdk), {
-    setIsUnauthorized: z,
-    setIsApiError: G
-  } = hn(e.entityId, e.sdk, I);
-  me(() => {
-    var H, w;
-    n !== q.RESULTS || !f || (w = (H = e.callbacks) == null ? void 0 : H.onFinish) == null || w.call(H, f);
-  }, [n]), me(() => {
-    jt(e.language || "en");
-  }, [e.language]), me(() => {
-    o && o.id && i(q.TUTORIAL);
-  }, [o]);
+  }), [x, A] = B(!1), [E, w] = B(!1), [I, y] = B(!1), [d, z] = B(""), [S, v] = B(!1), [D, P] = B(!1), [$, L] = B(!1), [N, R] = B(!1), [k, O] = B(!1), [H, j] = B(!1), V = mt(null), a = Tn(e.entityId, e.sdk), {
+    setIsUnauthorized: W,
+    setIsApiError: T
+  } = vn(e.entityId, e.sdk, x), {
+    pending: K,
+    checked: X,
+    setChecked: Z,
+    allRequiredChecked: ee,
+    submit: J
+  } = ln({
+    sdk: e.sdk,
+    consents: (ze = e.consents) == null ? void 0 : ze.items,
+    entityId: e.entityId,
+    entityType: "either_or"
+  }), ae = !!((a == null ? void 0 : a.authRequirement) === "LEAD" ? (Ye = e.leads) == null ? void 0 : Ye.position : void 0) && K.length > 0, se = ae ? [] : K.filter((M) => M.position !== "after"), ce = ae ? [] : K.filter((M) => M.position === "after"), Y = (M) => {
+    Z(M), j(!1);
+  }, he = (M) => {
+    var F;
+    return {
+      items: M,
+      checked: X,
+      onChange: Y,
+      labels: (F = e.consents) == null ? void 0 : F.labels,
+      showError: H
+    };
+  };
+  fe(() => {
+    var M, F;
+    n !== _.RESULTS || !g || (F = (M = e.callbacks) == null ? void 0 : M.onFinish) == null || F.call(M, g);
+  }, [n]), fe(() => {
+    Qt(e.language || "en");
+  }, [e.language]), fe(() => {
+    a && a.id && l(_.TUTORIAL);
+  }, [a]);
   const U = () => ({
-    onTimerTick: (H) => {
-      a(H);
+    onTimerTick: (M) => {
+      c(M);
     },
-    onElapsedResponse: (H) => {
-      const w = H.steps.find(
-        (A) => {
-          var V;
-          return A.pairId === ((V = L.current) == null ? void 0 : V.pairId);
+    onElapsedResponse: (M) => {
+      const F = M.steps.find(
+        (ne) => {
+          var xe;
+          return ne.pairId === ((xe = V.current) == null ? void 0 : xe.pairId);
         }
-      ), $ = ((w == null ? void 0 : w.optionOne.value) ?? 0) >= ((w == null ? void 0 : w.optionTwo.value) ?? 0) ? (w == null ? void 0 : w.optionOne.id) ?? null : (w == null ? void 0 : w.optionTwo.id) ?? null;
-      h({
+      ), te = ((F == null ? void 0 : F.optionOne.value) ?? 0) >= ((F == null ? void 0 : F.optionTwo.value) ?? 0) ? (F == null ? void 0 : F.optionOne.id) ?? null : (F == null ? void 0 : F.optionTwo.id) ?? null;
+      p({
         isCorrect: !1,
         selectedOption: null,
         timedOut: !0,
-        correctOptionId: $
-      }), l(H), setTimeout(() => {
-        var Z;
-        const A = ((Z = e.leads) == null ? void 0 : Z.position) === "after" && (o == null ? void 0 : o.authRequirement) === "LEAD" && !k;
-        if (H.currentLives === 0) {
-          A ? R(!0) : i(q.RESULTS);
+        correctOptionId: te
+      }), o(M), setTimeout(() => {
+        var Le;
+        const ne = ((Le = e.leads) == null ? void 0 : Le.position) === "after" && (a == null ? void 0 : a.authRequirement) === "LEAD" && !S;
+        if (M.currentLives === 0) {
+          ne ? P(!0) : l(_.RESULTS);
           return;
         }
-        const V = H.steps.find((le) => !le.played);
-        V ? (d(V), y(null), h({ isCorrect: null, selectedOption: null })) : A ? R(!0) : i(q.RESULTS);
+        const xe = M.steps.find((be) => !be.played);
+        xe ? (s(xe), f(null), p({ isCorrect: null, selectedOption: null })) : ne ? P(!0) : l(_.RESULTS);
       }, 1e3);
     }
-  }), N = (H) => {
-    if (e.sdk.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
-      const $ = H;
-      $.error.code === 401 || $.error.code === 403 ? S(!0) : (P(!0), B($.error.message));
-    } else {
-      const $ = H;
-      $.data.error.code === 401 || $.data.error.code === 403 ? S(!0) : (P(!0), B($.data.error.message));
+  }), G = (M) => {
+    console.error("[either-or-play] request failed", M);
+    const { code: F, message: te } = nn(M, e.sdk);
+    F === 401 || F === 403 ? w(!0) : (y(!0), z(te));
+  }, de = Ge(async () => {
+    var M;
+    if (se.length > 0) {
+      if ($) return;
+      if (!ee(se)) {
+        j(!0);
+        return;
+      }
+      L(!0), await J(se), L(!1);
     }
-  }, Y = Oe(async () => {
-    var H;
-    if ((o == null ? void 0 : o.authRequirement) === "LEAD" && ((H = e.leads) == null ? void 0 : H.position) === "before" && !k) {
-      R(!0);
+    if ((a == null ? void 0 : a.authRequirement) === "LEAD" && ((M = e.leads) == null ? void 0 : M.position) === "before" && !S) {
+      P(!0);
       return;
     }
     try {
-      const w = await e.sdk.miniGames.participateInEitherOr(
+      const F = await e.sdk.miniGames.participateInEitherOr(
         e.entityId,
         null,
         U()
       );
-      a((o == null ? void 0 : o.time) ?? 10), l(w), d(w.steps.find(($) => !$.played) || null), i(q.PLAYING);
-    } catch (w) {
-      console.error("Failed to start game:", w), N(w);
+      c((a == null ? void 0 : a.time) ?? 10), o(F), s(F.steps.find((te) => !te.played) || null), l(_.PLAYING);
+    } catch (F) {
+      console.error("Failed to start game:", F), G(F);
     }
   }, [
     e.entityId,
     e.sdk,
-    (ee = e.leads) == null ? void 0 : ee.position,
-    o == null ? void 0 : o.authRequirement,
-    o == null ? void 0 : o.time,
-    k
+    (_e = e.leads) == null ? void 0 : _e.position,
+    a == null ? void 0 : a.authRequirement,
+    a == null ? void 0 : a.time,
+    S,
+    se,
+    $
   ]);
-  L.current = s;
-  const T = Oe(
-    async (H, w) => {
-      if (!m) {
-        y(w);
+  V.current = i;
+  const Ae = Ge(
+    async (M, F) => {
+      if (!u) {
+        f(F);
         try {
-          const $ = await e.sdk.miniGames.participateInEitherOr(
+          const te = await e.sdk.miniGames.participateInEitherOr(
             e.entityId,
-            { pair: H, answer: w },
+            { pair: M, answer: F },
             U()
-          ), A = $.steps.find(
-            (le) => le.pairId === H
-          ), V = (A == null ? void 0 : A.correct) ?? !1, Z = V ? null : [A == null ? void 0 : A.optionOne.id, A == null ? void 0 : A.optionTwo.id].find(
-            (le) => le !== w
+          ), ne = te.steps.find(
+            (be) => be.pairId === M
+          ), xe = (ne == null ? void 0 : ne.correct) ?? !1, Le = xe ? null : [ne == null ? void 0 : ne.optionOne.id, ne == null ? void 0 : ne.optionTwo.id].find(
+            (be) => be !== F
           ) ?? null;
-          h({ isCorrect: V, selectedOption: w, correctOptionId: Z }), l($), setTimeout(() => {
-            var Q;
-            const le = ((Q = e.leads) == null ? void 0 : Q.position) === "after" && (o == null ? void 0 : o.authRequirement) === "LEAD" && !k;
-            if ($.currentLives === 0) {
-              le ? R(!0) : i(q.RESULTS);
+          p({ isCorrect: xe, selectedOption: F, correctOptionId: Le }), o(te), setTimeout(() => {
+            var Me;
+            const be = ((Me = e.leads) == null ? void 0 : Me.position) === "after" && (a == null ? void 0 : a.authRequirement) === "LEAD" && !S, Ue = ce.length > 0 && !k;
+            if (te.currentLives === 0) {
+              Ue ? R(!0) : be ? P(!0) : l(_.RESULTS);
               return;
             }
-            const he = $.steps.find((Ce) => !Ce.played);
-            he ? (d(he), y(null), h({ isCorrect: null, selectedOption: null })) : le ? R(!0) : i(q.RESULTS);
+            const We = te.steps.find((Ze) => !Ze.played);
+            We ? (s(We), f(null), p({ isCorrect: null, selectedOption: null })) : Ue ? R(!0) : be ? P(!0) : l(_.RESULTS);
           }, 1e3);
-        } catch ($) {
-          console.error("Failed to submit answer:", $), y(null), N($);
+        } catch (te) {
+          console.error("Failed to submit answer:", te), f(null), G(te);
         }
       }
     },
     [
       e.entityId,
       e.sdk,
-      m,
-      o == null ? void 0 : o.authRequirement,
-      (te = e.leads) == null ? void 0 : te.position,
+      u,
+      a == null ? void 0 : a.authRequirement,
+      (qe = e.leads) == null ? void 0 : qe.position,
+      S,
+      ce,
       k
     ]
-  ), M = Oe(async () => {
-    var H;
-    if (v(!0), ((H = e.leads) == null ? void 0 : H.position) === "before") {
-      E(!0);
+  ), we = Ge(async () => {
+    var M;
+    if (v(!0), ((M = e.leads) == null ? void 0 : M.position) === "before") {
+      L(!0);
       try {
-        const w = await e.sdk.miniGames.participateInEitherOr(
+        const F = await e.sdk.miniGames.participateInEitherOr(
           e.entityId,
           null,
           U()
         );
-        a((o == null ? void 0 : o.time) ?? 10), l(w), d(w.steps.find(($) => !$.played) || null), R(!1), E(!1), i(q.PLAYING);
-      } catch (w) {
-        E(!1), R(!1), N(w);
+        c((a == null ? void 0 : a.time) ?? 10), o(F), s(F.steps.find((te) => !te.played) || null), P(!1), L(!1), l(_.PLAYING);
+      } catch (F) {
+        L(!1), P(!1), G(F);
       }
     } else
-      R(!1), E(!1), i(q.RESULTS);
-  }, [(ie = e.leads) == null ? void 0 : ie.position, e.entityId, e.sdk, o == null ? void 0 : o.time]), j = Oe(() => {
-    i(q.TUTORIAL), d(null), l(null), a((o == null ? void 0 : o.time) ?? 10), y(null), h({ isCorrect: null, selectedOption: null }), v(!1), R(!1);
-  }, [o == null ? void 0 : o.time]), J = () => {
-    P(!1), S(!1), B(""), G(!1), z(!1), O(!I), i(q.TUTORIAL), d(null), l(null), y(null), h({ isCorrect: null, selectedOption: null }), v(!1), R(!1);
+      P(!1), L(!1), l(_.RESULTS);
+  }, [(Ke = e.leads) == null ? void 0 : Ke.position, e.entityId, e.sdk, a == null ? void 0 : a.time]), Ce = Ge(async () => {
+    if (!ee(ce)) {
+      j(!0);
+      return;
+    }
+    L(!0), await J(ce), O(!0), L(!1), R(!1), l(_.RESULTS);
+  }, [ce, ee, J]), Ie = Ge(() => {
+    l(_.TUTORIAL), s(null), o(null), c((a == null ? void 0 : a.time) ?? 10), f(null), p({ isCorrect: null, selectedOption: null }), v(!1), P(!1), R(!1), j(!1);
+  }, [a == null ? void 0 : a.time]), ie = () => {
+    y(!1), w(!1), z(""), T(!1), W(!1), A(!x), l(_.TUTORIAL), s(null), o(null), f(null), p({ isCorrect: null, selectedOption: null }), v(!1), P(!1), R(!1), j(!1);
   };
-  if (!o)
-    return /* @__PURE__ */ t(He, { my: 20 });
-  if (!o.id)
-    return /* @__PURE__ */ t(Tn, {});
-  if (o.status !== "ACTIVE")
+  if (!a)
+    return /* @__PURE__ */ t(lt, { my: 20 });
+  if (!a.id)
+    return /* @__PURE__ */ t(Bn, {});
+  if (a.status !== "ACTIVE")
     return /* @__PURE__ */ t(
-      kn,
+      Fn,
       {
-        eitherOr: o,
+        eitherOr: a,
         template: e.template,
-        imagePosition: Ae(e) ? e.imagePosition : void 0,
+        imagePosition: Be(e) ? e.imagePosition : void 0,
         defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
         rulesDisplay: e.rulesDisplay
       }
     );
-  if (o.authRequirement === "REGISTERED" && !e.userIsLoggedIn)
-    return Ae(e) ? /* @__PURE__ */ t(
-      Pn,
+  if (a.authRequirement === "REGISTERED" && !e.userIsLoggedIn)
+    return Be(e) ? /* @__PURE__ */ t(
+      $n,
       {
-        eitherOr: o,
+        eitherOr: a,
         imagePosition: e.imagePosition,
         defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
         signInCTA: e.signInCTA,
         rulesDisplay: e.rulesDisplay
       }
-    ) : $e(e) ? /* @__PURE__ */ t(
-      On,
+    ) : Qe(e) ? /* @__PURE__ */ t(
+      Gn,
       {
-        eitherOr: o,
+        eitherOr: a,
         defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
         signInCTA: e.signInCTA,
         rulesDisplay: e.rulesDisplay
       }
-    ) : /* @__PURE__ */ t(De, {});
-  if (p || C)
-    return $e(e) ? /* @__PURE__ */ t(
-      Bn,
+    ) : /* @__PURE__ */ t(et, {});
+  if (E || I)
+    return Qe(e) ? /* @__PURE__ */ t(
+      jn,
       {
-        eitherOr: o,
+        eitherOr: a,
         defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
-        isApiError: C,
-        apiErrorMessage: c,
-        toggleTryAgain: J,
+        isApiError: I,
+        apiErrorMessage: d,
+        toggleTryAgain: ie,
         rulesDisplay: e.rulesDisplay
       }
     ) : /* @__PURE__ */ t(
-      An,
+      En,
       {
-        eitherOr: o,
-        imagePosition: Ae(e) ? e.imagePosition : void 0,
+        eitherOr: a,
+        imagePosition: Be(e) ? e.imagePosition : void 0,
         defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
-        isApiError: C,
-        apiErrorMessage: c,
-        toggleTryAgain: J,
+        isApiError: I,
+        apiErrorMessage: d,
+        toggleTryAgain: ie,
         rulesDisplay: e.rulesDisplay
       }
     );
-  if (W && o.authRequirement === "LEAD" && (((ce = e.leads) == null ? void 0 : ce.position) === "after" || ((_ = e.leads) == null ? void 0 : _.position) === "before")) {
-    if (Ae(e))
+  if (N && ce.length > 0) {
+    const M = {
+      eitherOr: a,
+      sdk: e.sdk,
+      consents: he(ce),
+      onSubmit: Ce,
+      isSubmitting: $,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      rulesDisplay: e.rulesDisplay
+    };
+    return Be(e) ? /* @__PURE__ */ t(
+      Nn,
+      {
+        ...M,
+        imagePosition: e.imagePosition
+      }
+    ) : /* @__PURE__ */ t(Yn, { ...M });
+  }
+  if (D && a.authRequirement === "LEAD" && (((Xe = e.leads) == null ? void 0 : Xe.position) === "after" || ((Ee = e.leads) == null ? void 0 : Ee.position) === "before")) {
+    if (Be(e))
       return /* @__PURE__ */ t(
-        wn,
+        Un,
         {
-          eitherOr: o,
+          eitherOr: a,
           sdk: e.sdk,
           leads: e.leads,
           defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
-          onLeadSubmitted: M,
+          onLeadSubmitted: we,
           imagePosition: e.imagePosition,
-          isSubmitting: F,
-          rulesDisplay: e.rulesDisplay
+          isSubmitting: $,
+          rulesDisplay: e.rulesDisplay,
+          consents: ae ? K : void 0
         }
       );
-    if ($e(e))
+    if (Qe(e))
       return /* @__PURE__ */ t(
-        $n,
+        Vn,
         {
-          eitherOr: o,
+          eitherOr: a,
           sdk: e.sdk,
           leads: e.leads,
           defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
-          onLeadSubmitted: M,
-          isSubmitting: F,
-          rulesDisplay: e.rulesDisplay
+          onLeadSubmitted: we,
+          isSubmitting: $,
+          rulesDisplay: e.rulesDisplay,
+          consents: ae ? K : void 0
         }
       );
   }
-  return Ae(e) ? /* @__PURE__ */ t(
-    In,
+  return Be(e) ? /* @__PURE__ */ t(
+    On,
     {
-      eitherOr: o,
-      currentPair: s,
-      stepInfo: f,
+      eitherOr: a,
+      currentPair: i,
+      stepInfo: g,
       gameState: n,
-      timer: u,
-      selected: m,
+      timer: m,
+      selected: u,
       feedback: b,
       sdk: e.sdk,
       leads: e.leads,
@@ -3808,19 +3997,21 @@ const Dn = (e) => {
       showStandings: e.showStandings,
       additionalCTA: e.additionalCTA,
       imagePosition: e.imagePosition,
-      onGameStart: Y,
-      onSelection: T,
-      onPlayAgain: j
+      consents: he(se),
+      isSubmitting: $,
+      onGameStart: de,
+      onSelection: Ae,
+      onPlayAgain: Ie
     }
-  ) : $e(e) ? /* @__PURE__ */ t(
-    Rn,
+  ) : Qe(e) ? /* @__PURE__ */ t(
+    Mn,
     {
-      eitherOr: o,
-      currentPair: s,
-      stepInfo: f,
+      eitherOr: a,
+      currentPair: i,
+      stepInfo: g,
       gameState: n,
-      timer: u,
-      selected: m,
+      timer: m,
+      selected: u,
       feedback: b,
       sdk: e.sdk,
       leads: e.leads,
@@ -3828,12 +4019,14 @@ const Dn = (e) => {
       rulesDisplay: e.rulesDisplay,
       showStandings: e.showStandings,
       additionalCTA: e.additionalCTA,
-      onGameStart: Y,
-      onSelection: T,
-      onPlayAgain: j
+      consents: he(se),
+      isSubmitting: $,
+      onGameStart: de,
+      onSelection: Ae,
+      onPlayAgain: Ie
     }
-  ) : /* @__PURE__ */ t(De, {});
-}, Fn = (e) => /* @__PURE__ */ t(Vt, { packageName: "either-or-play", ...e, children: /* @__PURE__ */ t(Dn, { ...e }) }), dr = Fn;
+  ) : /* @__PURE__ */ t(et, {});
+}, qn = (e) => /* @__PURE__ */ t(en, { packageName: "either-or-play", ...e, children: /* @__PURE__ */ t(_n, { ...e }) }), Tr = qn;
 export {
-  dr as EitherOrPlay
+  Tr as EitherOrPlay
 };