fansunited-frontend-components 0.0.39 → 0.0.40

package/EitherOrPlay.js

@@ -0,0 +1,2533 @@
+import { jsx as t, jsxs as C, Fragment as Le } from "react/jsx-runtime";
+import { useState as R, useEffect as re, useRef as Ie, useCallback as me } from "react";
+import { c as ge, h as de, f as ue, T as w, e as fe, B as l, A as ee, aq as we, k as H, j as ne, D as pe, R as He, u as De, F as Ge, W as Ae, i as je } from "./chunks/PrizeCard-gMp7I66d.js";
+import { P as Ne } from "./chunks/Portal-B9wkUnY2.js";
+import { S as ke } from "./chunks/Spinner-BBA89t5s.js";
+import "react-dom";
+import { Z as Ve, A as Ye, S as Oe } from "./chunks/index-2s5UkG1y.js";
+import { h as Q, c as qe, u as Fe, e as _e } from "./chunks/useImageVariant-pnFelF9A.js";
+import { S as Ke, N as Ze } from "./chunks/NotFoundSkeleton-B3RNa8KJ.js";
+import { A as We } from "./chunks/ArrowRightAlt-88jKjh6A.js";
+import { F as Me, a as Xe } from "./chunks/FavoriteBorder-BHnvGBrn.js";
+import { C as Pe } from "./chunks/CheckCircle-ClY-iOQ5.js";
+import { T as Je } from "./chunks/TimerOutlined-DmKZDDI-.js";
+import { S as Te } from "./chunks/AlertMessage-cjTHrMUK.js";
+import { S as Qe, T as et, P as tt } from "./chunks/Person-D0Im9_zE.js";
+import { A as nt } from "./chunks/Avatar-CQCrd1m-.js";
+import { t as rt, T as ot, a as it, b as Re, c as Be } from "./chunks/Tabs-D_n8rNw3.js";
+import { S as lt, a as at } from "./chunks/StandardLeadAfterCollection-L1cOGfS6.js";
+import { C as st } from "./chunks/CollectLeadForm-0vVnu4DL.js";
+const ct = ge([/* @__PURE__ */ t("path", {
+  d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"
+}, "0"), /* @__PURE__ */ t("path", {
+  d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
+}, "1")], "AccessTime"), ve = ge(/* @__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"), dt = ge(/* @__PURE__ */ t("path", {
+  d: "M9.01 14H2v2h7.01v3L13 15l-3.99-4zm5.98-1v-3H22V8h-7.01V5L11 9z"
+}), "CompareArrows"), Ce = ge(/* @__PURE__ */ t("path", {
+  d: "M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2M5 8V7h2v3.82C5.84 10.4 5 9.3 5 8m14 0c0 1.3-.84 2.4-2 2.82V7h2z"
+}), "EmojiEvents"), ut = ge(/* @__PURE__ */ t("path", {
+  d: "M7.5 21H2V9h5.5zm7.25-18h-5.5v18h5.5zM22 11h-5.5v10H22z"
+}), "Leaderboard"), mt = ge(/* @__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"), gt = ge(/* @__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"), ft = (e, n) => {
+  const [d, b] = R(null), a = async () => {
+    try {
+      const p = await n.miniGames.getEitherOrById(e, !0);
+      b(p);
+    } catch (p) {
+      console.error(p), b(new Ve());
+    }
+  };
+  return re(() => (a(), () => b(null)), [e, n]), d;
+}, ht = (e, n, d = !1) => {
+  const [b, a] = R(null), [p, i] = R(!1), [s, o] = R(!1), c = async () => {
+    try {
+      const h = await n.miniGames.getMyEitherOrStats(e);
+      a(h);
+    } catch (h) {
+      if (a(null), n.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
+        const S = h;
+        if (S.error.code === 404)
+          return;
+        if (S.error.code === 401 || S.error.code === 403) {
+          i(!0);
+          return;
+        }
+        o(!0);
+        return;
+      }
+      const y = h;
+      if (y.data.error.code === 404)
+        return;
+      if (y.data.error.code === 401 || y.data.error.code === 403) {
+        i(!0);
+        return;
+      }
+      o(!0);
+    }
+  };
+  return re(() => (c(), () => {
+    a(null), i(!1), o(!1);
+  }), [e, n, d]), {
+    myStats: b,
+    setMyStats: a,
+    isUnauthorized: p,
+    isApiError: s,
+    setIsUnauthorized: i,
+    setIsApiError: o
+  };
+}, K = {
+  LOADING: "loading",
+  TUTORIAL: "tutorial",
+  PLAYING: "playing",
+  RESULTS: "results"
+}, oe = (e) => {
+  const n = de().secondary, d = ue();
+  if (!e.brandingLogo)
+    return null;
+  const b = e.label ? /* @__PURE__ */ t(
+    w,
+    {
+      level: "body-sm",
+      sx: {
+        fontWeight: 400,
+        lineHeight: "166%",
+        letterSpacing: "0.4px",
+        fontSize: "1em",
+        color: e.textColor,
+        textAlign: "right",
+        fontFamily: n
+      },
+      children: e.label
+    }
+  ) : null;
+  return fe() ? /* @__PURE__ */ C(
+    l,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: d.xs,
+        alignItems: "center",
+        minWidth: "180px",
+        fontSize: "1em",
+        zIndex: 1
+      },
+      children: [
+        b,
+        /* @__PURE__ */ t(
+          "img",
+          {
+            src: e.brandingLogo,
+            alt: "branding-logo",
+            style: { maxHeight: "50px", maxWidth: "100px" }
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ C(
+    l,
+    {
+      sx: {
+        minWidth: "180px",
+        display: "flex",
+        gap: "8px",
+        alignItems: "center",
+        zIndex: 10,
+        fontSize: "1em"
+      },
+      children: [
+        b,
+        /* @__PURE__ */ t(
+          "img",
+          {
+            src: e.brandingLogo,
+            alt: "branding-logo",
+            style: { maxHeight: "50px", maxWidth: "100px" }
+          }
+        )
+      ]
+    }
+  );
+}, xt = ({
+  onStart: e,
+  game: n,
+  signInCTA: d,
+  showSignInCTA: b
+}) => {
+  var $, m, O, P, M, F, x, U, r;
+  const { t: a } = ee(), p = fe(), i = we(), s = (($ = n == null ? void 0 : n.branding) == null ? void 0 : $.colors) || null, o = (s == null ? void 0 : s.primaryColor) || H().palette.primary.plainColor, c = H().palette.primary.onPrimary, h = (s == null ? void 0 : s.contentColor) || H().textColor, f = H().surfaceVariant, y = de().primary, S = ne().xl, k = ne().md, I = ue(), D = Q(o || ""), T = Q(f || ""), v = D ? `rgba(${D.replace(/[^\d,]/g, "")}, 0.12)` : `${o}20`, u = p ? ((O = (m = n == null ? void 0 : n.branding) == null ? void 0 : m.images) == null ? void 0 : O.mobileLogo) || ((M = (P = n == null ? void 0 : n.branding) == null ? void 0 : P.images) == null ? void 0 : M.mainLogo) || "" : ((x = (F = n == null ? void 0 : n.branding) == null ? void 0 : F.images) == null ? void 0 : x.mainLogo) || "", z = [
+    {
+      icon: /* @__PURE__ */ t(mt, { sx: { fontSize: "1.1em" } }),
+      title: a("eitherOr.tutorial.step1Title"),
+      description: a("eitherOr.tutorial.step1Description", {
+        seconds: (n == null ? void 0 : n.time) ?? 10
+      })
+    },
+    {
+      icon: /* @__PURE__ */ t(Me, { sx: { fontSize: "1.1em" } }),
+      title: a("eitherOr.tutorial.step2Title", { lives: (n == null ? void 0 : n.lives) ?? 3 }),
+      description: a("eitherOr.tutorial.step2Description", {
+        lives: (n == null ? void 0 : n.lives) ?? 3
+      })
+    },
+    {
+      icon: /* @__PURE__ */ t(Ce, { sx: { fontSize: "1.1em" } }),
+      title: a("eitherOr.tutorial.step3Title"),
+      description: a("eitherOr.tutorial.step3Description")
+    }
+  ];
+  return n ? /* @__PURE__ */ t(l, { sx: { display: "flex", flexDirection: "column", p: I.md }, children: /* @__PURE__ */ C(
+    l,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: p ? I.lg : I.md
+      },
+      children: [
+        /* @__PURE__ */ t(
+          l,
+          {
+            sx: {
+              borderRadius: k,
+              overflow: "hidden",
+              bgcolor: T ? `rgba(${T.replace(/[^\d,]/g, "")}, 0.5)` : f,
+              display: "flex",
+              flexDirection: "column",
+              backdropFilter: "blur(4px)"
+            },
+            children: z.map((j, N) => {
+              const A = N === z.length - 1;
+              return /* @__PURE__ */ C(l, { children: [
+                /* @__PURE__ */ C(
+                  l,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "flex-start",
+                      gap: I.md,
+                      px: I.md,
+                      py: I.md
+                    },
+                    children: [
+                      /* @__PURE__ */ t(
+                        l,
+                        {
+                          sx: {
+                            width: 36,
+                            height: 36,
+                            borderRadius: "50%",
+                            bgcolor: v,
+                            color: o,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            flexShrink: 0
+                          },
+                          children: j.icon
+                        }
+                      ),
+                      /* @__PURE__ */ C(l, { sx: { flex: 1, minWidth: 0, pt: "2px" }, children: [
+                        /* @__PURE__ */ t(
+                          w,
+                          {
+                            sx: {
+                              fontFamily: y,
+                              fontWeight: 700,
+                              fontSize: "0.875em",
+                              lineHeight: 1.3,
+                              color: h
+                            },
+                            children: j.title
+                          }
+                        ),
+                        /* @__PURE__ */ t(
+                          w,
+                          {
+                            sx: {
+                              fontFamily: y,
+                              fontWeight: 400,
+                              fontSize: "0.75em",
+                              lineHeight: 1.6,
+                              color: h,
+                              opacity: 0.65,
+                              mt: I["2xs"]
+                            },
+                            children: j.description
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                !A && /* @__PURE__ */ t(
+                  l,
+                  {
+                    sx: {
+                      height: "1px",
+                      mx: I.md,
+                      bgcolor: D ? `rgba(${D.replace(/[^\d,]/g, "")}, 0.1)` : `${o}1A`
+                    }
+                  }
+                )
+              ] }, N);
+            })
+          }
+        ),
+        /* @__PURE__ */ C(
+          l,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: i ? "column" : "row",
+              justifyContent: u ? "space-between" : "flex-end",
+              alignItems: "center",
+              gap: I.lg
+            },
+            children: [
+              u && !i && /* @__PURE__ */ t(
+                oe,
+                {
+                  brandingLogo: u,
+                  textColor: h,
+                  label: ((U = n == null ? void 0 : n.labels) == null ? void 0 : U.sponsor) || null
+                }
+              ),
+              /* @__PURE__ */ t(
+                pe,
+                {
+                  variant: "soft",
+                  endDecorator: /* @__PURE__ */ t(We, {}),
+                  onClick: b && d ? d.onClick : e,
+                  sx: {
+                    borderRadius: S,
+                    py: "10px",
+                    pr: "12px",
+                    pl: "16px",
+                    bgcolor: o,
+                    color: c,
+                    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+                    transform: "scale(1)",
+                    alignSelf: "center",
+                    "&:hover": { bgcolor: o, transform: "scale(1.02)" },
+                    "&:active": { color: c, transform: "scale(0.98)" },
+                    "&:disabled": {
+                      bgcolor: o,
+                      color: c,
+                      opacity: "12%"
+                    },
+                    "--Icon-color": c,
+                    "@keyframes pulse": {
+                      "0%": { transform: "scale(1)" },
+                      "50%": { transform: "scale(1.05)" },
+                      "100%": { transform: "scale(1)" }
+                    },
+                    animation: "pulse 1s infinite",
+                    fontSize: "0.9375em"
+                  },
+                  children: /* @__PURE__ */ t(
+                    w,
+                    {
+                      sx: {
+                        fontFamily: y,
+                        fontWeight: 500,
+                        fontSize: "0.9375em",
+                        lineHeight: "24px",
+                        letterSpacing: "0.46px",
+                        textTransform: "uppercase",
+                        color: c,
+                        gap: I.xs,
+                        display: "flex",
+                        alignItems: "center"
+                      },
+                      children: b && d ? d.defaultLabel : a("eitherOr.buttons.start")
+                    }
+                  )
+                }
+              ),
+              u && i && /* @__PURE__ */ t(
+                oe,
+                {
+                  brandingLogo: u,
+                  textColor: h,
+                  label: ((r = n == null ? void 0 : n.labels) == null ? void 0 : r.sponsor) || null
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) }) : null;
+}, bt = He`
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+`, pt = {
+  pointsAdded: {
+    position: "absolute",
+    top: -20,
+    right: 0,
+    color: "primary.500",
+    animation: `${bt} 1s ease-out forwards`
+  },
+  optionWrapper: {
+    position: "relative",
+    flex: 1,
+    transition: "transform 0.2s"
+  },
+  dividerWrapper: {
+    width: { xs: "100%", sm: "40px" },
+    my: { xs: 2, sm: 0 }
+  },
+  dividerButton: {
+    borderRadius: "50%",
+    bgcolor: "background.surface",
+    boxShadow: "sm",
+    width: "30px",
+    height: "30px",
+    "&:hover": { bgcolor: "background.level1" }
+  },
+  dividerText: {
+    fontWeight: "lg",
+    color: "text.secondary",
+    display: { xs: "none", sm: "block" },
+    textTransform: "uppercase",
+    fontSize: "0.675em !important"
+  },
+  timerProgressWrapper: {
+    position: "relative",
+    width: "100%",
+    height: 8,
+    bgcolor: "neutral.200",
+    borderRadius: "4px",
+    overflow: "hidden"
+  },
+  timerProgress: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    height: "100%",
+    transition: "width 1s linear, background-color 0.3s ease",
+    borderRadius: "inherit",
+    transform: "translateZ(0)"
+  }
+}, Ee = ({
+  option: e,
+  selected: n,
+  feedback: d,
+  onSelect: b,
+  pairId: a,
+  brandingPrimaryColor: p,
+  optionIndex: i = 0
+}) => {
+  const s = H(), o = ue(), c = p || s.palette.primary.plainColor, h = s.palette.primary.onPrimary, f = s.palette.success.plainColor, y = s.palette.danger.plainColor, S = Q(c || ""), k = S ? S.replace(/[^\d,]/g, "") : null, I = qe(e.images ?? null), D = !!I, T = i === 0 ? "A" : "B", v = d.selectedOption === e.id, u = v && d.isCorrect, z = v && !d.isCorrect;
+  if (!D) {
+    const $ = i === 0 ? "135deg" : "225deg", m = u ? `linear-gradient(${$}, ${f}20 0%, ${f}0D 100%)` : z ? `linear-gradient(${$}, ${y}20 0%, ${y}0D 100%)` : k ? `linear-gradient(${$}, rgba(${k}, 0.22) 0%, rgba(${k}, 0.08) 60%, rgba(${k}, 0.14) 100%)` : `linear-gradient(${$}, ${c}38 0%, ${c}14 60%, ${c}24 100%)`, O = k ? `repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(${k}, 0.04) 10px, rgba(${k}, 0.04) 11px)` : "none", P = u ? f : z ? y : k ? `rgba(${k}, 0.3)` : `${c}4D`, M = u ? f : z ? y : c;
+    return /* @__PURE__ */ C(
+      l,
+      {
+        onClick: () => !n && b(a, e.id),
+        sx: {
+          position: "relative",
+          height: "100px",
+          borderRadius: "sm",
+          overflow: "hidden",
+          cursor: n ? "default" : "pointer",
+          background: m,
+          border: "1.5px solid",
+          borderColor: P,
+          display: "flex",
+          alignItems: "center",
+          gap: "14px",
+          px: o.md,
+          transition: "transform 0.2s, box-shadow 0.2s, border-color 0.25s",
+          boxShadow: u ? `0 0 0 3px ${f}30` : z ? `0 0 0 3px ${y}30` : "none",
+          "&:hover": n ? {} : {
+            transform: "scale(1.01)",
+            boxShadow: `0 4px 16px ${k ? `rgba(${k}, 0.2)` : `${c}33`}`
+          }
+        },
+        children: [
+          /* @__PURE__ */ t(
+            l,
+            {
+              sx: {
+                position: "absolute",
+                inset: 0,
+                background: O,
+                zIndex: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ t(
+            l,
+            {
+              sx: {
+                width: 40,
+                height: 40,
+                borderRadius: "50%",
+                bgcolor: M,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0,
+                zIndex: 2,
+                transition: "background-color 0.25s",
+                boxShadow: u ? `0 2px 8px ${f}59` : z ? `0 2px 8px ${y}59` : `0 2px 8px ${k ? `rgba(${k}, 0.35)` : `${c}59`}`
+              },
+              children: u ? /* @__PURE__ */ t(Pe, { sx: { fontSize: "1.3em", color: "#fff" } }) : z ? /* @__PURE__ */ t(ve, { sx: { fontSize: "1.3em", color: "#fff" } }) : /* @__PURE__ */ t(
+                w,
+                {
+                  sx: {
+                    color: h,
+                    fontWeight: 800,
+                    fontSize: "1em",
+                    lineHeight: 1,
+                    userSelect: "none"
+                  },
+                  children: T
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ t(
+            w,
+            {
+              sx: {
+                fontWeight: 700,
+                fontSize: "0.9375em",
+                lineHeight: 1.35,
+                color: u ? f : z ? y : c,
+                zIndex: 2,
+                flex: 1,
+                transition: "color 0.25s"
+              },
+              children: e.label
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ C(
+    l,
+    {
+      onClick: () => !n && b(a, e.id),
+      sx: {
+        position: "relative",
+        height: "160px",
+        borderRadius: "sm",
+        overflow: "hidden",
+        cursor: n ? "default" : "pointer",
+        backgroundImage: `url(${I})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center top",
+        bgcolor: s.surfaceVariant,
+        border: "1.5px solid transparent",
+        borderColor: u ? f : z ? y : "transparent",
+        transition: "transform 0.2s, border-color 0.25s",
+        boxShadow: u ? `0 0 0 3px ${f}30` : z ? `0 0 0 3px ${y}30` : "none",
+        "&:hover": n ? {} : { transform: "scale(1.01)" }
+      },
+      children: [
+        /* @__PURE__ */ t(
+          l,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              background: "linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0) 100%)"
+            }
+          }
+        ),
+        v && /* @__PURE__ */ t(
+          l,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              background: u ? `linear-gradient(to top, ${f}CC, ${f}55 50%, transparent 100%)` : `linear-gradient(to top, ${y}CC, ${y}55 50%, transparent 100%)`,
+              transition: "background 0.25s",
+              zIndex: 1
+            }
+          }
+        ),
+        v && /* @__PURE__ */ t(
+          l,
+          {
+            sx: {
+              position: "absolute",
+              top: "8px",
+              right: "10px",
+              zIndex: 3
+            },
+            children: u ? /* @__PURE__ */ t(
+              Pe,
+              {
+                sx: {
+                  fontSize: 28,
+                  color: "#fff",
+                  filter: "drop-shadow(0 1px 4px rgba(0,0,0,0.5))"
+                }
+              }
+            ) : /* @__PURE__ */ t(
+              ve,
+              {
+                sx: {
+                  fontSize: 28,
+                  color: "#fff",
+                  filter: "drop-shadow(0 1px 4px rgba(0,0,0,0.5))"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          l,
+          {
+            sx: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              px: "12px",
+              py: "8px",
+              zIndex: 2
+            },
+            children: /* @__PURE__ */ t(
+              w,
+              {
+                sx: {
+                  color: "#fff",
+                  fontWeight: 700,
+                  fontSize: "0.875em",
+                  textShadow: "0 1px 2px rgba(0,0,0,0.4)",
+                  textAlign: "center"
+                },
+                children: e.label
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, yt = ({
+  time: e,
+  maxTime: n,
+  brandingPrimaryColor: d
+}) => {
+  const b = H().palette.danger.softBg, a = H().palette.danger.plainColor, p = H().palette.warning.softBg, i = H().palette.warning.plainColor, s = d || H().palette.primary.plainColor, o = H().palette.primary.onPrimary, c = ne().xl, h = de().secondary, f = ue(), y = {
+    "@keyframes pulse": {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(1.05)" },
+      "100%": { transform: "scale(1)" }
+    }
+  }, S = n > 0 ? e / n * 100 : 100, I = S <= 30 ? {
+    background: b,
+    color: a,
+    animation: "pulse 1s infinite"
+  } : S <= 50 ? {
+    background: p,
+    color: i,
+    animation: void 0
+  } : {
+    background: s,
+    color: o,
+    animation: void 0
+  }, D = (T) => {
+    const v = Math.floor(T / 60), u = T % 60;
+    return `${v < 10 ? "0" : ""}${v}:${u < 10 ? "0" : ""}${u}${v > 0 ? "m" : "s"}`;
+  };
+  return /* @__PURE__ */ C(
+    l,
+    {
+      sx: {
+        py: f.xs,
+        pl: f.sm,
+        pr: f.md,
+        display: "flex",
+        gap: f["2xs"],
+        alignItems: "center",
+        bgcolor: I.background,
+        borderRadius: c,
+        maxWidth: "105px",
+        maxHeight: "40px",
+        transition: "all 0.3s ease",
+        animation: I.animation,
+        ...y,
+        zIndex: 10
+      },
+      children: [
+        /* @__PURE__ */ t(
+          Je,
+          {
+            sx: {
+              width: "24px",
+              height: "24px",
+              color: I.color,
+              transition: "color 0.3s ease"
+            }
+          }
+        ),
+        /* @__PURE__ */ t(
+          w,
+          {
+            sx: {
+              fontFamily: h,
+              fontWeight: 400,
+              fontSize: "1em",
+              lineHeight: "150%",
+              letterSpacing: "0.15px",
+              color: I.color,
+              transition: "color 0.3s ease"
+            },
+            children: D(e)
+          }
+        )
+      ]
+    }
+  );
+}, St = ({
+  currentPair: e,
+  timer: n,
+  selected: d,
+  maxTime: b,
+  feedback: a,
+  onSelect: p,
+  stepInfo: i,
+  brandingPrimaryColor: s,
+  game: o
+}) => {
+  var Z, q, J, te, he, xe, ie, le, ae, se;
+  const [c, h] = R(0), [f, y] = R(!1), [S, k] = R(0), [I, D] = R(0), [T, v] = R(!1), u = Ie(0), { t: z } = ee(), $ = fe(), m = H(), O = m.surfaceVariant, P = s || m.palette.primary.plainColor, M = ((q = (Z = o == null ? void 0 : o.branding) == null ? void 0 : Z.colors) == null ? void 0 : q.contentColor) || m.textColor, F = ne().md, x = ue(), U = Q(O || ""), r = Q(P || ""), j = $ ? ((te = (J = o == null ? void 0 : o.branding) == null ? void 0 : J.images) == null ? void 0 : te.mobileLogo) || ((xe = (he = o == null ? void 0 : o.branding) == null ? void 0 : he.images) == null ? void 0 : xe.mainLogo) || "" : ((le = (ie = o == null ? void 0 : o.branding) == null ? void 0 : ie.images) == null ? void 0 : le.mainLogo) || "", N = z("common.labels.point", { count: c });
+  re(() => {
+    if (i != null && i.currentPoints && i.currentPoints > c) {
+      k(i.currentPoints - c), y(!0), D((Y) => Y + 1);
+      const _ = setTimeout(() => y(!1), 1e3);
+      return h(i.currentPoints), () => clearTimeout(_);
+    }
+  }, [i == null ? void 0 : i.currentPoints, c]);
+  const A = (o == null ? void 0 : o.points) ?? [], L = A.length >= 2 ? A[1].correctSteps - A[0].correctSteps : ((ae = A[0]) == null ? void 0 : ae.correctSteps) || 5;
+  re(() => {
+    const _ = u.current, Y = (i == null ? void 0 : i.currentStreak) ?? 0;
+    if (u.current = Y, Y > _ && Y > 0 && Y % L === 0) {
+      v(!0);
+      const g = setTimeout(() => v(!1), 500);
+      return () => clearTimeout(g);
+    }
+  }, [i == null ? void 0 : i.currentStreak, L]);
+  const W = () => {
+    const _ = [], Y = (i == null ? void 0 : i.currentLives) ?? 3;
+    for (let g = 0; g < Y; g++)
+      _.push(
+        /* @__PURE__ */ t(
+          Me,
+          {
+            sx: { height: 20, color: P }
+          },
+          `life-${g}`
+        )
+      );
+    for (let g = Y; g < 3; g++)
+      _.push(
+        /* @__PURE__ */ t(
+          Xe,
+          {
+            sx: {
+              height: 20,
+              color: r ? `rgba(${r.replace(/[^\d,]/g, "")}, 0.35)` : `${P}59`
+            }
+          },
+          `empty-${g}`
+        )
+      );
+    return _;
+  }, G = () => {
+    const _ = (i == null ? void 0 : i.currentStreak) ?? 0, Y = T ? L : _ % L, B = Math.floor(_ / L) + 1;
+    return /* @__PURE__ */ C(l, { sx: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+      Array.from({ length: L }, (E, X) => /* @__PURE__ */ t(
+        l,
+        {
+          sx: {
+            flex: 1,
+            height: 4,
+            bgcolor: X < Y ? P : r ? `rgba(${r.replace(/[^\d,]/g, "")}, 0.2)` : `${P}33`,
+            borderRadius: "2px",
+            transition: "background-color 0.3s ease"
+          }
+        },
+        `streak-${X}`
+      )),
+      B > 1 && /* @__PURE__ */ C(
+        w,
+        {
+          sx: {
+            color: P,
+            fontWeight: 700,
+            fontSize: "0.75em",
+            lineHeight: 1,
+            ml: x["2xs"],
+            flexShrink: 0
+          },
+          children: [
+            "×",
+            B
+          ]
+        }
+      )
+    ] });
+  }, V = () => /* @__PURE__ */ t(
+    l,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        width: "100%",
+        my: x["3xs"]
+      },
+      children: /* @__PURE__ */ t(
+        l,
+        {
+          sx: {
+            borderRadius: "50%",
+            bgcolor: m.surface,
+            boxShadow: "sm",
+            width: "32px",
+            height: "32px",
+            minWidth: "32px",
+            border: "1px solid",
+            borderColor: P,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ t(dt, { sx: { fontSize: "1.1em", color: P } })
+        }
+      )
+    }
+  );
+  return e ? (
+    // questionArea
+    /* @__PURE__ */ t(l, { sx: { display: "flex", flexDirection: "column", p: x.md }, children: /* @__PURE__ */ C(
+      l,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: $ ? x.lg : x.md
+        },
+        children: [
+          /* @__PURE__ */ t(l, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ t(
+            yt,
+            {
+              time: n,
+              maxTime: b,
+              brandingPrimaryColor: s
+            },
+            `timer-${e.pairId}`
+          ) }),
+          /* @__PURE__ */ C(
+            l,
+            {
+              sx: {
+                borderRadius: F,
+                overflow: "hidden",
+                bgcolor: U ? `rgba(${U.replace(/[^\d,]/g, "")}, 0.5)` : m.surfaceVariant,
+                display: "flex",
+                flexDirection: "column",
+                backdropFilter: "blur(4px)",
+                px: x.md,
+                pt: x.md,
+                pb: x.lg,
+                gap: x.md
+              },
+              children: [
+                /* @__PURE__ */ t(l, { sx: { width: "100%" }, children: /* @__PURE__ */ t(
+                  Ee,
+                  {
+                    option: e.optionOne,
+                    selected: d,
+                    feedback: a,
+                    onSelect: p,
+                    pairId: e.pairId,
+                    brandingPrimaryColor: s,
+                    optionIndex: 0
+                  }
+                ) }),
+                V(),
+                /* @__PURE__ */ t(l, { sx: { width: "100%" }, children: /* @__PURE__ */ t(
+                  Ee,
+                  {
+                    option: e.optionTwo,
+                    selected: d,
+                    feedback: a,
+                    onSelect: p,
+                    pairId: e.pairId,
+                    brandingPrimaryColor: s,
+                    optionIndex: 1
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ C(l, { children: [
+            /* @__PURE__ */ t(l, { sx: { mb: x.xs }, children: G() }),
+            /* @__PURE__ */ C(
+              Te,
+              {
+                direction: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
+                children: [
+                  /* @__PURE__ */ t(l, { children: W() }),
+                  /* @__PURE__ */ C(Te, { direction: "row", spacing: 1, alignItems: "center", children: [
+                    /* @__PURE__ */ C(w, { sx: { color: M }, children: [
+                      N,
+                      ":"
+                    ] }),
+                    /* @__PURE__ */ C(
+                      w,
+                      {
+                        level: "h4",
+                        sx: { position: "relative", color: M },
+                        children: [
+                          c,
+                          f && /* @__PURE__ */ C(
+                            w,
+                            {
+                              sx: pt.pointsAdded,
+                              children: [
+                                "+",
+                                S
+                              ]
+                            },
+                            I
+                          )
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            j && /* @__PURE__ */ t(
+              l,
+              {
+                sx: {
+                  mt: x.xs,
+                  display: "flex",
+                  justifyContent: "flex-start"
+                },
+                children: /* @__PURE__ */ t(
+                  oe,
+                  {
+                    brandingLogo: j,
+                    textColor: M,
+                    label: ((se = o == null ? void 0 : o.labels) == null ? void 0 : se.sponsor) || null
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ) : null;
+}, Ct = (e, n, d, b) => {
+  if (n === 0)
+    return {
+      emoji: "🎮",
+      message: b("eitherOr.results.practice", "Keep practicing!")
+    };
+  const a = e / n * 100;
+  let p;
+  if (a === 100 ? p = {
+    emoji: "🏆",
+    message: b("eitherOr.results.perfect", "Perfect! Flawless!")
+  } : a >= 80 ? p = {
+    emoji: "🔥",
+    message: b("eitherOr.results.excellent", "Excellent!")
+  } : a >= 60 ? p = { emoji: "✨", message: b("eitherOr.results.great", "Great job!") } : a >= 40 ? p = { emoji: "💪", message: b("eitherOr.results.good", "Good try!") } : p = {
+    emoji: "📚",
+    message: b("eitherOr.results.practice", "Keep practicing!")
+  }, d > 0) {
+    const i = b("eitherOr.results.livesBonus", { count: d }) || (d === 1 ? "And with 1 life to spare!" : `And with ${d} lives to spare!`);
+    p = { ...p, message: `${p.message} ${i}` };
+  }
+  return p;
+}, It = ({
+  stepInfo: e,
+  game: n,
+  sdk: d,
+  onPlayAgain: b,
+  brandingPrimaryColor: a,
+  additionalCTA: p
+}) => {
+  var J, te, he, xe, ie, le, ae, se, _, Y;
+  const { t: i } = ee(), s = H(), o = a || s.palette.primary.plainColor, c = s.palette.primary.onPrimary, h = ((te = (J = n == null ? void 0 : n.branding) == null ? void 0 : J.colors) == null ? void 0 : te.contentColor) || s.textColor, f = s.palette.success.plainColor, y = s.palette.danger.plainColor, S = s.palette.success.softBg, k = s.palette.danger.softBg, I = ne().md, D = ne().xl, T = ue(), v = de().primary, u = fe(), z = we(), $ = Q(o || ""), m = $ ? $.replace(/[^\d,]/g, "") : null, O = u ? ((xe = (he = n == null ? void 0 : n.branding) == null ? void 0 : he.images) == null ? void 0 : xe.mobileLogo) || ((le = (ie = n == null ? void 0 : n.branding) == null ? void 0 : ie.images) == null ? void 0 : le.mainLogo) || "" : ((se = (ae = n == null ? void 0 : n.branding) == null ? void 0 : ae.images) == null ? void 0 : se.mainLogo) || "", [P, M] = R(0), [F, x] = R(null), U = (e == null ? void 0 : e.currentPoints) ?? 0, r = P > 0 && U >= P;
+  if (re(() => {
+    n && (async () => {
+      try {
+        const B = await d.miniGames.getMyEitherOrStats(n.id);
+        M(B.personalBest ?? 0), x(B.betterThan ?? null);
+      } catch {
+      }
+    })();
+  }, [e, n, d]), !e) return null;
+  const j = e.steps.filter((g) => g.played), N = j.filter((g) => g.correct === !0).length, A = j.filter(
+    (g) => g.correct === !1 && g.userSelection !== null
+  ).length, L = j.filter(
+    (g) => g.userSelection === null
+  ).length, W = j.length, G = Ct(
+    N,
+    W,
+    e.currentLives,
+    i
+  ), V = W > 0 ? N / W * 100 : 0, Z = W > 0 ? A / W * 100 : 0, q = W > 0 ? L / W * 100 : 0;
+  return /* @__PURE__ */ C(
+    l,
+    {
+      sx: {
+        p: T.md,
+        display: "flex",
+        flexDirection: "column",
+        gap: T.md,
+        animation: "eoFadeUp 0.45s ease-out both",
+        "@keyframes eoFadeUp": {
+          from: { opacity: 0, transform: "translateY(14px)" },
+          to: { opacity: 1, transform: "translateY(0)" }
+        }
+      },
+      children: [
+        r && /* @__PURE__ */ C(
+          l,
+          {
+            sx: {
+              position: "relative",
+              overflow: "hidden",
+              borderRadius: I,
+              background: m ? `linear-gradient(135deg, rgba(${m},0.92) 0%, rgba(${m},0.72) 100%)` : `linear-gradient(135deg, ${o}EB 0%, ${o}B8 100%)`,
+              p: "20px 20px 18px",
+              display: "flex",
+              alignItems: "center",
+              gap: "16px",
+              animation: "eoPBSlideIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.05s both",
+              "@keyframes eoPBSlideIn": {
+                from: { opacity: 0, transform: "scale(0.88) translateY(-8px)" },
+                to: { opacity: 1, transform: "scale(1) translateY(0)" }
+              },
+              "&::before": {
+                content: '""',
+                position: "absolute",
+                inset: 0,
+                background: "linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%)",
+                backgroundSize: "200% 100%",
+                animation: "eoPBShimmer 2.2s ease-in-out 0.6s infinite"
+              },
+              "@keyframes eoPBShimmer": {
+                "0%": { backgroundPosition: "200% 0" },
+                "100%": { backgroundPosition: "-200% 0" }
+              }
+            },
+            children: [
+              /* @__PURE__ */ C(
+                l,
+                {
+                  sx: {
+                    flexShrink: 0,
+                    position: "relative",
+                    width: 56,
+                    height: 56,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ t(
+                      l,
+                      {
+                        sx: {
+                          position: "absolute",
+                          inset: -6,
+                          borderRadius: "50%",
+                          border: "2px solid rgba(255,255,255,0.5)",
+                          animation: "eoPBPulse 1.6s ease-in-out 0.8s infinite",
+                          "@keyframes eoPBPulse": {
+                            "0%, 100%": { transform: "scale(1)", opacity: 0.6 },
+                            "50%": { transform: "scale(1.18)", opacity: 0 }
+                          }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      l,
+                      {
+                        sx: {
+                          width: 56,
+                          height: 56,
+                          borderRadius: "50%",
+                          bgcolor: "rgba(255,255,255,0.22)",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center"
+                        },
+                        children: /* @__PURE__ */ t(Ce, { sx: { fontSize: "1.9em", color: "#fff" } })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ C(l, { sx: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ C(
+                  l,
+                  {
+                    sx: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "5px",
+                      bgcolor: "rgba(255,255,255,0.22)",
+                      border: "1px solid rgba(255,255,255,0.35)",
+                      borderRadius: "100px",
+                      px: "8px",
+                      py: "2px",
+                      mb: "6px"
+                    },
+                    children: [
+                      /* @__PURE__ */ t(
+                        l,
+                        {
+                          sx: {
+                            width: 6,
+                            height: 6,
+                            borderRadius: "50%",
+                            bgcolor: "#fff",
+                            animation: "eoDot 1s ease-in-out infinite",
+                            "@keyframes eoDot": {
+                              "0%, 100%": { opacity: 1 },
+                              "50%": { opacity: 0.3 }
+                            }
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ t(
+                        w,
+                        {
+                          sx: {
+                            fontSize: "0.6em",
+                            fontWeight: 800,
+                            letterSpacing: "0.14em",
+                            textTransform: "uppercase",
+                            color: "#fff",
+                            lineHeight: 1
+                          },
+                          children: i("eitherOr.newRecord", "New Record")
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  w,
+                  {
+                    sx: {
+                      fontSize: "1.05em",
+                      fontWeight: 800,
+                      color: "#fff",
+                      lineHeight: 1.25
+                    },
+                    children: i("eitherOr.personalBestImprovedTitle", "Congratulations!")
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  w,
+                  {
+                    sx: {
+                      fontSize: "0.8em",
+                      color: "rgba(255,255,255,0.82)",
+                      mt: "2px"
+                    },
+                    children: i(
+                      "eitherOr.personalBestImprovedSubtitle",
+                      "You just broke your personal record!"
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ C(
+          l,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: "10px",
+              py: T.lg,
+              borderRadius: I,
+              background: m ? `linear-gradient(135deg, rgba(${m},0.13) 0%, rgba(${m},0.04) 100%)` : `linear-gradient(135deg, ${o}21 0%, ${o}0A 100%)`,
+              border: "1.5px solid",
+              borderColor: m ? `rgba(${m},0.2)` : `${o}33`
+            },
+            children: [
+              /* @__PURE__ */ t(
+                l,
+                {
+                  sx: {
+                    width: 52,
+                    height: 52,
+                    borderRadius: "50%",
+                    bgcolor: m ? `rgba(${m},0.14)` : `${o}24`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: /* @__PURE__ */ t(Ce, { sx: { fontSize: "1.75em", color: o } })
+                }
+              ),
+              /* @__PURE__ */ t(
+                w,
+                {
+                  sx: {
+                    fontSize: "0.65em",
+                    fontWeight: 700,
+                    letterSpacing: "0.12em",
+                    textTransform: "uppercase",
+                    color: s.textColor
+                  },
+                  children: i("eitherOr.yourScore", "Your Score")
+                }
+              ),
+              /* @__PURE__ */ t(
+                w,
+                {
+                  sx: {
+                    fontSize: "3.5em",
+                    fontWeight: 900,
+                    lineHeight: 1,
+                    color: o,
+                    textShadow: m ? `0 2px 24px rgba(${m},0.35)` : `0 2px 24px ${o}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)" },
+                      to: { opacity: 1, transform: "scale(1)" }
+                    }
+                  },
+                  children: e.currentPoints
+                }
+              ),
+              /* @__PURE__ */ C(
+                w,
+                {
+                  sx: { fontSize: "1em", fontWeight: 600, color: s.textColor },
+                  children: [
+                    G.emoji,
+                    " ",
+                    G.message
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ C(
+          l,
+          {
+            sx: {
+              height: 7,
+              borderRadius: "4px",
+              overflow: "hidden",
+              display: "flex",
+              bgcolor: s.surfaceVariant
+            },
+            children: [
+              V > 0 && /* @__PURE__ */ t(
+                l,
+                {
+                  sx: {
+                    width: `${V}%`,
+                    bgcolor: f,
+                    transition: "width 0.7s ease"
+                  }
+                }
+              ),
+              Z > 0 && /* @__PURE__ */ t(
+                l,
+                {
+                  sx: {
+                    width: `${Z}%`,
+                    bgcolor: y,
+                    transition: "width 0.7s ease 0.1s"
+                  }
+                }
+              ),
+              q > 0 && /* @__PURE__ */ t(
+                l,
+                {
+                  sx: {
+                    width: `${q}%`,
+                    bgcolor: s.secondaryContainer,
+                    transition: "width 0.7s ease 0.2s"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(Te, { direction: "row", spacing: 1, children: [
+          {
+            icon: /* @__PURE__ */ t(
+              Pe,
+              {
+                sx: { fontSize: "1.25em", color: f }
+              }
+            ),
+            value: N,
+            label: i("eitherOr.results.correct", "Correct"),
+            bg: S,
+            valueSx: { color: f },
+            labelSx: { color: f }
+          },
+          {
+            icon: /* @__PURE__ */ t(ve, { sx: { fontSize: "1.25em", color: y } }),
+            value: A,
+            label: i("eitherOr.results.wrong", "Wrong"),
+            bg: k,
+            valueSx: { color: y },
+            labelSx: { color: y }
+          },
+          {
+            icon: /* @__PURE__ */ t(
+              ct,
+              {
+                sx: { fontSize: "1.25em", color: s.textColor }
+              }
+            ),
+            value: L,
+            label: i("eitherOr.results.missed", "Missed"),
+            bg: s.surfaceVariant,
+            valueSx: { color: s.textColor },
+            labelSx: { color: s.textColor }
+          }
+        ].map((g) => /* @__PURE__ */ C(
+          l,
+          {
+            sx: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: "4px",
+              py: "14px",
+              borderRadius: I,
+              bgcolor: g.bg
+            },
+            children: [
+              g.icon,
+              /* @__PURE__ */ t(
+                w,
+                {
+                  sx: {
+                    fontSize: "1.3em",
+                    fontWeight: 800,
+                    lineHeight: 1,
+                    ...g.valueSx
+                  },
+                  children: g.value
+                }
+              ),
+              /* @__PURE__ */ t(
+                w,
+                {
+                  sx: { fontSize: "0.68em", fontWeight: 600, ...g.labelSx },
+                  children: g.label
+                }
+              )
+            ]
+          },
+          g.label
+        )) }),
+        P > 0 && F !== null && F > 0 && /* @__PURE__ */ C(
+          l,
+          {
+            sx: {
+              borderRadius: I,
+              p: T.md,
+              bgcolor: m ? `rgba(${m},0.07)` : `${o}12`,
+              border: "1px solid",
+              borderColor: m ? `rgba(${m},0.15)` : `${o}26`,
+              display: "flex",
+              alignItems: "center",
+              gap: "10px"
+            },
+            children: [
+              /* @__PURE__ */ t(
+                gt,
+                {
+                  sx: { color: o, fontSize: "1.4em", flexShrink: 0 }
+                }
+              ),
+              /* @__PURE__ */ t(
+                w,
+                {
+                  sx: {
+                    fontSize: "0.8em",
+                    color: s.textColor,
+                    lineHeight: 1.5
+                  },
+                  children: i("eitherOr.betterThanLabel", {
+                    points: r ? U : P,
+                    percentile: F
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ C(
+          l,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: z ? "column" : "row",
+              justifyContent: O ? "space-between" : "flex-end",
+              alignItems: "center",
+              gap: T.lg
+            },
+            children: [
+              O && !z && /* @__PURE__ */ t(
+                oe,
+                {
+                  brandingLogo: O,
+                  textColor: h,
+                  label: ((_ = n == null ? void 0 : n.labels) == null ? void 0 : _.sponsor) || null
+                }
+              ),
+              /* @__PURE__ */ t(
+                pe,
+                {
+                  variant: "soft",
+                  endDecorator: /* @__PURE__ */ t(We, {}),
+                  onClick: b,
+                  sx: {
+                    borderRadius: D,
+                    py: "10px",
+                    pr: "12px",
+                    pl: "16px",
+                    bgcolor: o,
+                    color: c,
+                    alignSelf: "center",
+                    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+                    "&:hover": { bgcolor: o, transform: "scale(1.02)" },
+                    "&:active": { color: c, transform: "scale(0.98)" },
+                    "--Icon-color": c
+                  },
+                  children: /* @__PURE__ */ t(
+                    w,
+                    {
+                      sx: {
+                        fontFamily: v,
+                        fontWeight: 500,
+                        fontSize: "0.9375em",
+                        lineHeight: "24px",
+                        letterSpacing: "0.46px",
+                        textTransform: "uppercase",
+                        color: c
+                      },
+                      children: i("eitherOr.buttons.playAgain", "Play Again")
+                    }
+                  )
+                }
+              ),
+              O && z && /* @__PURE__ */ t(
+                oe,
+                {
+                  brandingLogo: O,
+                  textColor: h,
+                  label: ((Y = n == null ? void 0 : n.labels) == null ? void 0 : Y.sponsor) || null
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          Ye,
+          {
+            additionalCTA: p,
+            buttonStyle: {
+              borderRadius: D,
+              width: "100%",
+              py: "10px"
+            },
+            buttonContentStyle: { display: "flex", justifyContent: "center" },
+            textStyle: {
+              fontFamily: v,
+              fontWeight: 500,
+              fontSize: "0.9375em",
+              lineHeight: "24px",
+              letterSpacing: "0.46px",
+              textTransform: "uppercase"
+            }
+          }
+        )
+      ]
+    }
+  );
+}, Se = 10, Pt = ({
+  game: e,
+  sdk: n,
+  stepInfo: d,
+  brandingPrimaryColor: b
+}) => {
+  var N;
+  const { t: a } = ee(), p = De(), i = H(), s = ((N = e == null ? void 0 : e.branding) == null ? void 0 : N.colors) || null, o = b || (s == null ? void 0 : s.primaryColor) || i.palette.primary.plainColor, c = (s == null ? void 0 : s.contentColor) || i.textColor, h = de().primary, f = de().secondary, y = ne(), S = ue(), k = we(), I = i.surfaceVariant, D = p.colorSchemes.light.palette.primary.onPrimary, T = i.outlineEnabledBorder, [v, u] = R(null), [z, $] = R(!0), [m, O] = R(0), [P, M] = R(null), F = (d == null ? void 0 : d.currentPoints) ?? 0;
+  re(() => {
+    (async () => {
+      try {
+        if (!e) return;
+        const [L, W] = await Promise.all([
+          n.miniGames.getEitherOrResults(e.id),
+          n.profile.getOwn().getInfo().catch(() => null)
+        ]), G = (W == null ? void 0 : W.id) ?? null;
+        if (M(G), G && L.standings.some(
+          (Z) => Z.userId === G
+        )) {
+          u(L);
+          return;
+        }
+        if (F > 0) {
+          const V = [...L.standings], Z = {
+            userId: "current",
+            userModel: {
+              id: "current",
+              name: a("common.labels.me", "Me"),
+              nickname: null,
+              avatar: null,
+              anonymous: !0,
+              gender: null,
+              country: null,
+              birthDate: null,
+              verified: !1,
+              staffMember: !1,
+              disabled: !1,
+              interests: [],
+              followingCount: 0,
+              followersCount: 0
+            },
+            personalBest: F.toString()
+          }, q = V.findIndex(
+            (J) => Number.parseInt(J.personalBest) < F
+          );
+          q >= 0 && q < 50 && (V.splice(q, 0, Z), L.standings = V);
+        }
+        u(L);
+      } catch {
+      } finally {
+        $(!1);
+      }
+    })();
+  }, [e, n, d]);
+  const x = {
+    tableContainer: {
+      overflowX: "auto",
+      borderRadius: y.md,
+      border: `1px solid ${T}`
+    },
+    table: {
+      backgroundColor: I,
+      "--TableCell-paddingX": "0.5em",
+      "--TableCell-paddingY": "0.375em",
+      cursor: "default",
+      "& > tbody > tr:hover": { backgroundColor: "transparent" },
+      "& > thead > tr > th": {
+        backgroundColor: `rgba(${Q(I)}, 0.8)`,
+        color: c,
+        fontFamily: h,
+        fontWeight: 600,
+        fontSize: "0.875em",
+        textAlign: "center",
+        borderBottom: `1px solid ${T}`
+      }
+    },
+    headerCellPosition: {
+      backgroundColor: `rgba(${Q(I)}, 0.8)`,
+      color: c,
+      fontFamily: h,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      textAlign: "center",
+      padding: "0.375rem 0.5em",
+      width: "10%"
+    },
+    headerCellName: {
+      backgroundColor: `rgba(${Q(I)}, 0.8)`,
+      color: c,
+      fontFamily: h,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      textAlign: "left",
+      padding: "0.375rem 0.5em",
+      width: "80%"
+    },
+    headerCellPoints: {
+      backgroundColor: `rgba(${Q(I)}, 0.8)`,
+      color: c,
+      fontFamily: h,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      textAlign: "center",
+      padding: "0.375rem 0.5em",
+      width: "10%"
+    },
+    tableCellPosition: {
+      padding: "0.375rem 0.5em",
+      width: "10%",
+      textAlign: "center"
+    },
+    tableCellName: { padding: "0.375rem 0.5em", width: "80%" },
+    tableCellPoints: {
+      padding: "0.375rem 0.5em",
+      width: "10%",
+      textAlign: "center"
+    },
+    userRow: {
+      backgroundColor: `rgba(${Q(o)}, 0.1)`
+    },
+    nameCell: {
+      display: "flex",
+      alignItems: "center",
+      gap: S.sm
+    },
+    leaderboardAvatar: {
+      width: "32px",
+      height: "32px",
+      fontSize: "0.875em",
+      fontWeight: 600,
+      backgroundColor: o,
+      color: D
+    },
+    nameText: {
+      fontFamily: h,
+      fontWeight: 500,
+      fontSize: "0.875em",
+      color: c,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    positionText: {
+      fontFamily: h,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      color: c
+    },
+    pointsText: {
+      fontFamily: h,
+      fontWeight: 600,
+      fontSize: "0.875em",
+      color: c
+    },
+    avatarIcon: { fontSize: "1em", color: D },
+    noLeaderboardText: {
+      fontFamily: f,
+      fontSize: "1.25em",
+      color: c,
+      textAlign: "center",
+      marginY: S.md
+    }
+  };
+  if (z)
+    return /* @__PURE__ */ t(ke, { my: 10 });
+  if (!(v != null && v.standings) || v.standings.length === 0)
+    return /* @__PURE__ */ t(
+      l,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          flex: 1
+        },
+        children: /* @__PURE__ */ t(w, { level: "body-lg", sx: x.noLeaderboardText, children: a("common.labels.noData", "No standings available yet.") })
+      }
+    );
+  const U = v.standings, r = Math.ceil(U.length / Se), j = U.slice(
+    m * Se,
+    (m + 1) * Se
+  );
+  return /* @__PURE__ */ C(
+    l,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: S.sm,
+        p: S.md
+      },
+      children: [
+        /* @__PURE__ */ t(
+          w,
+          {
+            sx: {
+              fontFamily: h,
+              fontWeight: 700,
+              fontSize: "1.5em",
+              color: c,
+              textAlign: "center"
+            },
+            children: a("eitherOr.leaderboard.top50Note", "Top 50")
+          }
+        ),
+        /* @__PURE__ */ t(Qe, { sx: x.tableContainer, children: /* @__PURE__ */ C(
+          et,
+          {
+            variant: "outlined",
+            hoverRow: !1,
+            borderAxis: "bothBetween",
+            size: "sm",
+            sx: x.table,
+            children: [
+              /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ C("tr", { children: [
+                /* @__PURE__ */ t("th", { style: x.headerCellPosition, children: k ? "" : a("eitherOr.leaderboard.position", "#") }),
+                /* @__PURE__ */ t("th", { style: x.headerCellName, children: a("eitherOr.leaderboard.name", "Name") }),
+                /* @__PURE__ */ t("th", { style: x.headerCellPoints, children: k ? "🎯" : a("eitherOr.leaderboard.points", "Pts") })
+              ] }) }),
+              /* @__PURE__ */ t("tbody", { children: j.map((A, L) => {
+                var q, J, te;
+                const W = m * Se + L, G = A.userId === "current" || P !== null && A.userId === P, V = ((q = A.userModel) == null ? void 0 : q.avatar) || void 0, Z = ((J = A.userModel) == null ? void 0 : J.nickname) || ((te = A.userModel) == null ? void 0 : te.name) || a("common.labels.anonymous", "Anonymous");
+                return /* @__PURE__ */ C(
+                  "tr",
+                  {
+                    style: G ? x.userRow : void 0,
+                    children: [
+                      /* @__PURE__ */ t("td", { style: x.tableCellPosition, children: /* @__PURE__ */ C(w, { sx: x.positionText, children: [
+                        "#",
+                        W + 1
+                      ] }) }),
+                      /* @__PURE__ */ t("td", { style: x.tableCellName, children: /* @__PURE__ */ C(l, { sx: x.nameCell, children: [
+                        /* @__PURE__ */ t(nt, { src: V, sx: x.leaderboardAvatar, children: !V && /* @__PURE__ */ t(tt, { sx: x.avatarIcon }) }),
+                        /* @__PURE__ */ t(
+                          w,
+                          {
+                            sx: {
+                              ...x.nameText,
+                              fontWeight: G ? 700 : 500,
+                              color: G ? o : c
+                            },
+                            children: G ? a("common.labels.me", "Me") : Z
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ t("td", { style: x.tableCellPoints, children: /* @__PURE__ */ t(w, { sx: x.pointsText, children: A.personalBest }) })
+                    ]
+                  },
+                  `${A.userId}-${W}`
+                );
+              }) })
+            ]
+          }
+        ) }),
+        r > 1 && /* @__PURE__ */ C(
+          l,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: S.sm
+            },
+            children: [
+              /* @__PURE__ */ t(
+                l,
+                {
+                  onClick: () => m > 0 && O((A) => A - 1),
+                  sx: {
+                    cursor: m > 0 ? "pointer" : "default",
+                    opacity: m > 0 ? 1 : 0.3,
+                    fontFamily: h,
+                    fontSize: "1.25em",
+                    fontWeight: 600,
+                    color: o,
+                    px: "12px",
+                    py: "6px",
+                    borderRadius: "4px",
+                    userSelect: "none"
+                  },
+                  children: "‹"
+                }
+              ),
+              /* @__PURE__ */ C(
+                w,
+                {
+                  sx: {
+                    fontFamily: h,
+                    fontSize: "0.75em",
+                    color: c,
+                    opacity: 0.7
+                  },
+                  children: [
+                    m + 1,
+                    " / ",
+                    r
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t(
+                l,
+                {
+                  onClick: () => m < r - 1 && O((A) => A + 1),
+                  sx: {
+                    cursor: m < r - 1 ? "pointer" : "default",
+                    opacity: m < r - 1 ? 1 : 0.3,
+                    fontFamily: h,
+                    fontSize: "1.25em",
+                    fontWeight: 600,
+                    color: o,
+                    px: "12px",
+                    py: "6px",
+                    borderRadius: "4px",
+                    userSelect: "none"
+                  },
+                  children: "›"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, ce = ({
+  children: e,
+  brandingBorderColor: n
+}) => {
+  const d = ne().md, b = n || H().secondaryContainer, a = H().surface, i = Ge().size + " solid " + b;
+  return /* @__PURE__ */ t(
+    l,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: { xs: "column", md: "row" },
+        width: "100%",
+        borderRadius: d,
+        boxShadow: "md",
+        border: i,
+        overflow: "hidden",
+        background: a,
+        minHeight: "320px"
+      },
+      children: e
+    }
+  );
+}, Tt = (e) => {
+  var G, V;
+  const {
+    eitherOr: n,
+    currentPair: d,
+    stepInfo: b,
+    gameState: a,
+    timer: p,
+    selected: i,
+    feedback: s,
+    sdk: o,
+    defaultImagePlaceholderUrl: c,
+    rulesDisplay: h,
+    showStandings: f,
+    additionalCTA: y,
+    onGameStart: S,
+    onSelection: k,
+    onPlayAgain: I,
+    imagePosition: D = "left"
+  } = e, { t: T } = ee(), v = H(), u = ((G = n == null ? void 0 : n.branding) == null ? void 0 : G.colors) || null, z = (u == null ? void 0 : u.primaryColor) || v.palette.primary.plainColor, $ = v.secondaryContainer, m = v.surfaceTintDim, O = ((V = Q(m || "")) == null ? void 0 : V.replace(/[^\d,]/g, "")) ?? null, P = ne().md, M = de().primary, F = ue(), x = fe(), [U, r] = R(0), j = Fe(
+    {
+      images: n == null ? void 0 : n.images,
+      imagePlaceholder: c || ""
+    },
+    Ae.STANDARD
+  ), N = () => {
+    switch (a) {
+      case K.LOADING:
+        return /* @__PURE__ */ t(ke, { my: 20 });
+      case K.TUTORIAL:
+        return /* @__PURE__ */ t(
+          xt,
+          {
+            onStart: S,
+            game: n,
+            showSignInCTA: !1
+          }
+        );
+      case K.PLAYING:
+        return /* @__PURE__ */ t(
+          St,
+          {
+            currentPair: d,
+            timer: p,
+            maxTime: (n == null ? void 0 : n.time) ?? 10,
+            selected: i,
+            feedback: s,
+            onSelect: k,
+            stepInfo: b,
+            brandingPrimaryColor: (u == null ? void 0 : u.primaryColor) || null,
+            game: n
+          }
+        );
+      case K.RESULTS:
+        return /* @__PURE__ */ t(
+          It,
+          {
+            stepInfo: b,
+            game: n,
+            sdk: o,
+            onPlayAgain: I,
+            brandingPrimaryColor: (u == null ? void 0 : u.primaryColor) || null,
+            additionalCTA: y
+          }
+        );
+      default:
+        return null;
+    }
+  }, A = a === K.RESULTS, L = {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    flex: x ? "0 0 auto" : 1,
+    width: x ? "100%" : "auto",
+    borderBottom: "1px solid " + $,
+    opacity: "60%",
+    py: F.sm,
+    px: F.md,
+    gap: F.xs,
+    "&:not(.Mui-selected):hover": {
+      bgcolor: O ? `rgba(${O},0.06)` : `${m}0F`
+    },
+    [`&.${rt.selected}`]: {
+      bgcolor: O ? `rgba(${O},0.06)` : `${m}0F`,
+      borderBottom: "3px solid " + z,
+      opacity: "100%",
+      mb: "-1px"
+    }
+  }, W = {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "auto"
+  };
+  return A && f ? /* @__PURE__ */ t(ce, { brandingBorderColor: (u == null ? void 0 : u.borderColor) || null, children: /* @__PURE__ */ C(
+    ot,
+    {
+      value: U,
+      onChange: (Z, q) => r(q),
+      sx: {
+        borderRadius: P,
+        width: "100%",
+        backgroundColor: "transparent"
+      },
+      children: [
+        /* @__PURE__ */ C(
+          it,
+          {
+            sx: {
+              fontSize: "1em",
+              "--Icon-fontSize": "1.25em",
+              flexDirection: x ? "column" : "row"
+            },
+            children: [
+              /* @__PURE__ */ t(Re, { sx: L, disableIndicator: !0, children: /* @__PURE__ */ C(
+                l,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: F.xs
+                  },
+                  children: [
+                    /* @__PURE__ */ t(Ce, { sx: { fontSize: "1.25em" } }),
+                    /* @__PURE__ */ t(
+                      w,
+                      {
+                        sx: {
+                          fontFamily: M,
+                          fontSize: "1em",
+                          fontWeight: 500,
+                          lineHeight: "24px",
+                          letterSpacing: "0.4px",
+                          textTransform: "uppercase"
+                        },
+                        children: T("eitherOr.tabs.score", "Score")
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ t(Re, { sx: L, disableIndicator: !0, children: /* @__PURE__ */ C(
+                l,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: F.xs
+                  },
+                  children: [
+                    /* @__PURE__ */ t(ut, { sx: { fontSize: "1.25em" } }),
+                    /* @__PURE__ */ t(
+                      w,
+                      {
+                        sx: {
+                          fontFamily: M,
+                          fontSize: "1em",
+                          fontWeight: 500,
+                          lineHeight: "24px",
+                          letterSpacing: "0.4px",
+                          textTransform: "uppercase"
+                        },
+                        children: T("eitherOr.tabs.standings", "Standings")
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        U === 0 && /* @__PURE__ */ t(Be, { value: 0, sx: { p: 0, fontSize: "1em", display: "flex" }, children: /* @__PURE__ */ t(l, { sx: W, children: N() }) }),
+        U === 1 && /* @__PURE__ */ t(Be, { value: 1, sx: { p: 0, fontSize: "1em", display: "flex" }, children: /* @__PURE__ */ t(l, { sx: W, children: /* @__PURE__ */ t(
+          Pt,
+          {
+            game: n,
+            sdk: o,
+            stepInfo: b,
+            brandingPrimaryColor: (u == null ? void 0 : u.primaryColor) || null
+          }
+        ) }) })
+      ]
+    }
+  ) }) : A ? /* @__PURE__ */ t(ce, { brandingBorderColor: (u == null ? void 0 : u.borderColor) || null, children: /* @__PURE__ */ t(l, { sx: W, children: N() }) }) : /* @__PURE__ */ t(ce, { brandingBorderColor: (u == null ? void 0 : u.borderColor) || null, children: /* @__PURE__ */ t(
+    Ke,
+    {
+      entity: n,
+      headline: T("eitherOr.headline", "Either/Or"),
+      finalImage: j,
+      imagePosition: D,
+      rulesDisplay: h,
+      children: N()
+    }
+  ) });
+}, vt = () => {
+  const { t: e } = ee();
+  return /* @__PURE__ */ t(ce, { brandingBorderColor: null, children: /* @__PURE__ */ t(
+    Ze,
+    {
+      notFoundTitle: e("eitherOr.eitherOrNotFound"),
+      notFoundMessage: e("eitherOr.eitherOrNotFoundDescription")
+    }
+  ) });
+}, wt = (e) => ({
+  // Pulse animation for buttons
+  pulseAnimation: {
+    "@keyframes pulse": {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(1.05)" },
+      "100%": { transform: "scale(1)" }
+    }
+  },
+  // Sign in button
+  signInButton: {
+    borderRadius: e.buttonRadius,
+    py: "10px",
+    px: "16px",
+    bgcolor: e.primaryColor,
+    color: e.onPrimaryColor,
+    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
+    transform: "scale(1)",
+    alignSelf: "center",
+    "&:hover": {
+      bgcolor: e.primaryColor,
+      transform: "scale(1.02)"
+    },
+    "&:active": {
+      color: e.onPrimaryColor,
+      transform: "scale(0.98)"
+    },
+    "&:disabled": {
+      bgcolor: e.primaryColor,
+      color: e.onPrimaryColor,
+      opacity: "12%"
+    },
+    animation: "pulse 1s infinite",
+    fontSize: "0.9375em"
+  },
+  // Sign in button text
+  signInButtonText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: e.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  }
+}), At = (e) => {
+  var I, D, T, v, u;
+  const n = ((I = e.eitherOr.branding) == null ? void 0 : I.colors) || null, d = fe(), b = De(), a = Fe(
+    {
+      images: e.eitherOr.images,
+      imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
+    },
+    Ae.STANDARD
+  ), p = de().primary, i = ne().xl, s = (n == null ? void 0 : n.primaryColor) || H().palette.primary.plainColor, o = H().palette.primary.onPrimary, c = (n == null ? void 0 : n.contentColor) || H().textColor, h = d ? ((D = e.eitherOr.branding) == null ? void 0 : D.images.mobileLogo) || ((T = e.eitherOr.branding) == null ? void 0 : T.images.mainLogo) || "" : ((v = e.eitherOr.branding) == null ? void 0 : v.images.mainLogo) || "", { t: f } = ee(), y = e.imagePosition || "left", S = wt({
+    fontFamilyPrimary: p,
+    buttonRadius: i,
+    primaryColor: s,
+    onPrimaryColor: o
+  }), k = () => {
+    var z, $, m, O;
+    return e.signInCTA ? (z = e.signInCTA) != null && z.component ? e.signInCTA.component : ($ = e.signInCTA) != null && $.onClick ? /* @__PURE__ */ t(
+      pe,
+      {
+        variant: "soft",
+        sx: {
+          ...S.signInButton,
+          ...S.pulseAnimation
+        },
+        onClick: e.signInCTA.onClick,
+        children: /* @__PURE__ */ t(w, { sx: S.signInButtonText, children: e.signInCTA.defaultLabel || f("common.signIn") })
+      }
+    ) : (m = e.signInCTA) != null && m.url ? typeof window > "u" ? /* @__PURE__ */ t(
+      l,
+      {
+        component: "a",
+        href: e.signInCTA.url,
+        target: ((O = e.signInCTA) == null ? void 0 : O.target) || "_self",
+        sx: {
+          ...S.signInButton,
+          ...S.pulseAnimation,
+          textDecoration: "none",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ t(w, { sx: S.signInButtonText, children: e.signInCTA.defaultLabel || f("common.signIn") })
+      }
+    ) : /* @__PURE__ */ t(
+      pe,
+      {
+        variant: "soft",
+        sx: {
+          ...S.signInButton,
+          ...S.pulseAnimation
+        },
+        onClick: () => {
+          var P, M, F;
+          ((P = e.signInCTA) == null ? void 0 : P.target) === "_blank" ? window.open((M = e.signInCTA) == null ? void 0 : M.url, "_blank") : window.location.href = (F = e.signInCTA) == null ? void 0 : F.url;
+        },
+        children: /* @__PURE__ */ t(w, { sx: S.signInButtonText, children: e.signInCTA.defaultLabel || f("common.signIn") })
+      }
+    ) : /* @__PURE__ */ t(
+      pe,
+      {
+        variant: "soft",
+        sx: {
+          ...S.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ t(w, { sx: S.signInButtonText, children: e.signInCTA.defaultLabel || f("common.signIn") })
+      }
+    ) : /* @__PURE__ */ t(
+      pe,
+      {
+        variant: "soft",
+        sx: {
+          ...S.signInButton
+        },
+        disabled: !0,
+        children: /* @__PURE__ */ t(w, { sx: S.signInButtonText, children: f("common.signIn") })
+      }
+    );
+  };
+  return /* @__PURE__ */ t(ce, { brandingBorderColor: (n == null ? void 0 : n.borderColor) || null, children: /* @__PURE__ */ t(
+    lt,
+    {
+      entity: e.eitherOr,
+      headline: f("eitherOr.headline"),
+      finalImage: a,
+      imagePosition: y,
+      signInContent: k(),
+      brandingContent: /* @__PURE__ */ t(
+        oe,
+        {
+          brandingLogo: h,
+          textColor: d && a ? (n == null ? void 0 : n.contentColor) || b.colorSchemes.dark.textColor : c,
+          label: ((u = e.eitherOr.labels) == null ? void 0 : u.sponsor) || null
+        }
+      ),
+      rulesDisplay: e.rulesDisplay
+    }
+  ) });
+}, kt = ({
+  eitherOr: e,
+  imagePosition: n,
+  defaultImagePlaceholderUrl: d,
+  rulesDisplay: b
+}) => {
+  var c;
+  const { t: a } = ee(), p = ((c = e.branding) == null ? void 0 : c.colors) || null, { brandingLogo: i } = _e(
+    e.branding || null
+  ), s = (h) => {
+    var f;
+    return /* @__PURE__ */ t(
+      oe,
+      {
+        brandingLogo: i,
+        textColor: h,
+        label: ((f = e.labels) == null ? void 0 : f.sponsor) || null
+      }
+    );
+  }, o = {
+    entity: e,
+    headline: a("eitherOr.headline"),
+    tryAgainButtonText: "",
+    isApiError: !1,
+    alertVariant: "neutral",
+    customAlertTitle: a("eitherOr.gameNotAvailable"),
+    customAlertMessage: a("eitherOr.gameNotAvailableDescription"),
+    renderPresentedBy: s
+  };
+  return /* @__PURE__ */ t(ce, { brandingBorderColor: (p == null ? void 0 : p.borderColor) || null, children: /* @__PURE__ */ t(
+    Oe,
+    {
+      ...o,
+      imagePosition: n || "left",
+      defaultImagePlaceholderUrl: d,
+      rulesDisplay: b
+    }
+  ) });
+}, zt = (e) => {
+  var p, i, s, o, c, h, f;
+  const { t: n } = ee(), d = ((p = e.eitherOr.branding) == null ? void 0 : p.colors) || null, b = fe() ? ((s = (i = e.eitherOr.branding) == null ? void 0 : i.images) == null ? void 0 : s.mobileLogo) || ((c = (o = e.eitherOr.branding) == null ? void 0 : o.images) == null ? void 0 : c.mainLogo) || "" : ((f = (h = e.eitherOr.branding) == null ? void 0 : h.images) == null ? void 0 : f.mainLogo) || "", a = {
+    ...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(ce, { brandingBorderColor: (d == null ? void 0 : d.borderColor) || null, children: /* @__PURE__ */ t(
+    Oe,
+    {
+      entity: a,
+      headline: n("eitherOr.headline"),
+      tryAgainButtonText: n("eitherOr.buttons.tryAgain"),
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      imagePosition: e.imagePosition || "left",
+      isApiError: e.isApiError,
+      toggleTryAgain: e.toggleTryAgain,
+      apiErrorMessage: e.apiErrorMessage,
+      renderPresentedBy: (y) => {
+        var S;
+        return /* @__PURE__ */ t(
+          oe,
+          {
+            brandingLogo: b,
+            textColor: y,
+            label: ((S = e.eitherOr.labels) == null ? void 0 : S.sponsor) || null
+          }
+        );
+      },
+      rulesDisplay: e.rulesDisplay
+    }
+  ) });
+}, $t = ({
+  sdk: e,
+  contentId: n,
+  contentName: d,
+  brandingColors: b,
+  brandingUrls: a,
+  campaignId: p,
+  campaignName: i,
+  startGame: s,
+  fields: o = ["fullName", "email"],
+  leadTitle: c,
+  leadDescription: h,
+  leadCta: f,
+  leadSuccessTitle: y,
+  leadSuccessDescription: S,
+  syncWithProfile: k = !1,
+  isAfterPosition: I = !1,
+  isSubmittingParticipation: D = !1
+}) => {
+  const { t: T } = ee(), v = c ?? T("leads.header.title"), u = h ?? T("leads.header.description"), z = f ?? T("leads.buttons.submit"), $ = y ?? T("leads.success.title"), m = S ?? T("leads.success.description"), O = {
+    defaultLabel: T(I ? "eitherOr.buttons.finish" : "eitherOr.buttons.start"),
+    onClick: s
+  };
+  return /* @__PURE__ */ t(
+    st,
+    {
+      sdk: e,
+      content: {
+        id: n,
+        type: "either-or",
+        name: d
+      },
+      onSuccessCta: O,
+      branding: {
+        colors: b,
+        urls: a
+      },
+      campaign: {
+        id: p,
+        name: i
+      },
+      fields: o,
+      labels: {
+        title: v,
+        description: u,
+        submitButtonLabel: z,
+        successTitle: $,
+        successDescription: m
+      },
+      syncWithProfile: k,
+      isSubmittingParticipation: D
+    }
+  );
+}, Lt = (e) => {
+  const { t: n } = ee();
+  return /* @__PURE__ */ t(
+    at,
+    {
+      entity: e.eitherOr,
+      headline: n("eitherOr.headline"),
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      imagePosition: e.imagePosition,
+      onLeadSubmitted: e.onLeadSubmitted,
+      isSubmitting: e.isSubmitting,
+      MainCard: ce,
+      PresentedBy: oe,
+      CollectLeadWrapper: $t,
+      rulesDisplay: e.rulesDisplay
+    }
+  );
+};
+function ye(e) {
+  return e.template === Ae.STANDARD;
+}
+const Rt = (e) => {
+  var ie, le, ae, se, _, Y;
+  const [n, d] = R(
+    K.LOADING
+  ), [b, a] = R(null), [p, i] = R(null), [s, o] = R(10), [c, h] = R(null), [f, y] = R({
+    isCorrect: null,
+    selectedOption: null
+  }), [S, k] = R(!1), [I, D] = R(!1), [T, v] = R(!1), [u, z] = R(""), [$, m] = R(!1), [O, P] = R(!1), [M, F] = R(!1), x = Ie(null), U = Ie(void 0), r = ft(e.entityId, e.sdk), {
+    setIsUnauthorized: j,
+    setIsApiError: N
+  } = ht(e.entityId, e.sdk, S);
+  re(() => {
+    je(e.language || "en");
+  }, [e.language]), re(() => {
+    r && r.id && d(K.TUTORIAL);
+  }, [r]), re(() => () => {
+    x.current && clearInterval(x.current);
+  }, []);
+  const A = me(() => {
+    x.current && (clearInterval(x.current), x.current = null);
+  }, []), L = me(
+    (g) => {
+      A(), o(g);
+      let B = g;
+      x.current = setInterval(() => {
+        var E;
+        B -= 1, o(B), B <= 0 && (clearInterval(x.current), x.current = null, (E = U.current) == null || E.call(U));
+      }, 1e3);
+    },
+    [A]
+  ), W = (g) => {
+    if (e.sdk.helpers.getSDKConfiguration().errorHandlingMode === "standard") {
+      const E = g;
+      E.error.code === 401 || E.error.code === 403 ? D(!0) : (v(!0), z(E.error.message));
+    } else {
+      const E = g;
+      E.data.error.code === 401 || E.data.error.code === 403 ? D(!0) : (v(!0), z(E.data.error.message));
+    }
+  }, G = me(async () => {
+    var g;
+    if ((r == null ? void 0 : r.authRequirement) === "LEAD" && ((g = e.leads) == null ? void 0 : g.position) === "before" && !$) {
+      P(!0);
+      return;
+    }
+    try {
+      const B = await e.sdk.miniGames.participateInEitherOr(
+        e.entityId,
+        null
+      ), E = (r == null ? void 0 : r.time) ?? 10;
+      o(E), i(B), a(B.steps.find((X) => !X.played) || null), d(K.PLAYING), L(E);
+    } catch (B) {
+      console.error("Failed to start game:", B), W(B);
+    }
+  }, [e.entityId, e.sdk, (ie = e.leads) == null ? void 0 : ie.position, r == null ? void 0 : r.authRequirement, r == null ? void 0 : r.time, $, L]), V = me(
+    async (g, B) => {
+      if (!c) {
+        A(), h(B);
+        try {
+          const E = await e.sdk.miniGames.participateInEitherOr(
+            e.entityId,
+            { pair: g, answer: B }
+          ), X = E.steps.find(
+            (be) => be.pairId === g
+          );
+          y({
+            isCorrect: (X == null ? void 0 : X.correct) ?? !1,
+            selectedOption: B
+          }), i(E), setTimeout(() => {
+            var $e;
+            const be = (($e = e.leads) == null ? void 0 : $e.position) === "after" && (r == null ? void 0 : r.authRequirement) === "LEAD" && !$;
+            if (E.currentLives === 0) {
+              be ? P(!0) : d(K.RESULTS);
+              return;
+            }
+            const ze = E.steps.find((Ue) => !Ue.played);
+            ze ? (a(ze), h(null), y({ isCorrect: null, selectedOption: null }), L((r == null ? void 0 : r.time) ?? 10)) : be ? P(!0) : d(K.RESULTS);
+          }, 1e3);
+        } catch (E) {
+          console.error("Failed to submit answer:", E), h(null), W(E);
+        }
+      }
+    },
+    [
+      e.entityId,
+      e.sdk,
+      c,
+      A,
+      L,
+      r == null ? void 0 : r.time,
+      (le = e.leads) == null ? void 0 : le.position,
+      r == null ? void 0 : r.authRequirement,
+      $
+    ]
+  ), Z = me(async () => {
+    try {
+      const g = await e.sdk.miniGames.participateInEitherOr(
+        e.entityId,
+        null
+      );
+      y({ isCorrect: !1, selectedOption: null }), i(g), setTimeout(() => {
+        var X;
+        const B = ((X = e.leads) == null ? void 0 : X.position) === "after" && (r == null ? void 0 : r.authRequirement) === "LEAD" && !$;
+        if (g.currentLives === 0) {
+          B ? P(!0) : d(K.RESULTS);
+          return;
+        }
+        const E = g.steps.find((be) => !be.played);
+        E ? (a(E), h(null), y({ isCorrect: null, selectedOption: null }), L((r == null ? void 0 : r.time) ?? 10)) : B ? P(!0) : d(K.RESULTS);
+      }, 1e3);
+    } catch (g) {
+      console.error("Timer elapsed - failed to submit:", g), W(g);
+    }
+  }, [e.entityId, e.sdk, L, r == null ? void 0 : r.time, (ae = e.leads) == null ? void 0 : ae.position, r == null ? void 0 : r.authRequirement, $]);
+  U.current = Z;
+  const q = me(async () => {
+    var g;
+    if (m(!0), ((g = e.leads) == null ? void 0 : g.position) === "before") {
+      F(!0);
+      try {
+        const B = await e.sdk.miniGames.participateInEitherOr(
+          e.entityId,
+          null
+        ), E = (r == null ? void 0 : r.time) ?? 10;
+        o(E), i(B), a(B.steps.find((X) => !X.played) || null), P(!1), F(!1), d(K.PLAYING), L(E);
+      } catch (B) {
+        F(!1), P(!1), W(B);
+      }
+    } else
+      P(!1), F(!1), d(K.RESULTS);
+  }, [(se = e.leads) == null ? void 0 : se.position, e.entityId, e.sdk, r == null ? void 0 : r.time, L]), J = me(() => {
+    A(), d(K.TUTORIAL), a(null), i(null), o((r == null ? void 0 : r.time) ?? 10), h(null), y({ isCorrect: null, selectedOption: null }), m(!1), P(!1);
+  }, [A, r == null ? void 0 : r.time]), te = () => {
+    v(!1), D(!1), z(""), N(!1), j(!1), k(!S);
+  };
+  return r ? r.id ? r.status !== "ACTIVE" ? /* @__PURE__ */ t(
+    kt,
+    {
+      eitherOr: r,
+      template: e.template,
+      imagePosition: ye(e) ? e.imagePosition : void 0,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : r.authRequirement === "REGISTERED" && !e.userIsLoggedIn ? ye(e) ? /* @__PURE__ */ t(
+    At,
+    {
+      eitherOr: r,
+      imagePosition: e.imagePosition,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      signInCTA: e.signInCTA,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : /* @__PURE__ */ t(Le, {}) : I || T ? /* @__PURE__ */ t(
+    zt,
+    {
+      eitherOr: r,
+      imagePosition: ye(e) ? e.imagePosition : void 0,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      isApiError: T,
+      apiErrorMessage: u,
+      toggleTryAgain: te,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : O && r.authRequirement === "LEAD" && (((_ = e.leads) == null ? void 0 : _.position) === "after" || ((Y = e.leads) == null ? void 0 : Y.position) === "before") && ye(e) ? /* @__PURE__ */ t(
+    Lt,
+    {
+      eitherOr: r,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      onLeadSubmitted: q,
+      imagePosition: e.imagePosition,
+      isSubmitting: M,
+      rulesDisplay: e.rulesDisplay
+    }
+  ) : ye(e) ? /* @__PURE__ */ t(
+    Tt,
+    {
+      eitherOr: r,
+      currentPair: b,
+      stepInfo: p,
+      gameState: n,
+      timer: s,
+      selected: c,
+      feedback: f,
+      sdk: e.sdk,
+      leads: e.leads,
+      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
+      rulesDisplay: e.rulesDisplay,
+      showStandings: e.showStandings,
+      additionalCTA: e.additionalCTA,
+      imagePosition: e.imagePosition,
+      onGameStart: G,
+      onSelection: V,
+      onPlayAgain: J
+    }
+  ) : /* @__PURE__ */ t(Le, {}) : /* @__PURE__ */ t(vt, {}) : /* @__PURE__ */ t(ke, { my: 20 });
+}, Bt = (e) => /* @__PURE__ */ t(Ne, { packageName: "either-or-play", ...e, children: /* @__PURE__ */ t(Rt, { ...e }) }), Qt = Bt;
+export {
+  Qt as EitherOrPlay
+};