fansunited-frontend-components 0.0.31-RC6 → 0.0.31

package/EventGamePlay.js

@@ -1,13 +1,12 @@
 import { jsx as t, jsxs as s, Fragment as I } from "react/jsx-runtime";
 import Ee, { useState as E, useEffect as Ve, useRef as Ct, createContext as pt, useCallback as Ze, useMemo as We } from "react";
-import { i as J, j as W, h as b, w as Re, k as Q, a as X, u as de, f as Z, b as Te, z as Pe, C as xt, G as Ft, p as Se, W as $, l as ke, n as D, I as bt, B as Bt, D as ut, s as He, v as Rt, P as Tt } from "./chunks/Portal-BWqqFvVm.js";
-import { C as kt, S as yt, A as Je, c as zt, g as Pt, R as ve, N as Ht, d as vt, e as Vt, f as wt, O as Mt, a as qt } from "./chunks/NotFoundSkeleton-BYJTzYJR.js";
-import { Box as i, IconButton as Fe, Input as St, Tooltip as At, Typography as f, useTheme as It, Select as jt, Option as Dt, Modal as Qt, ModalDialog as Ot, DialogContent as Gt, DialogActions as Wt, Button as he, Sheet as Ut, Table as ht, Alert as Jt, Stack as Et, Tabs as Zt, TabList as Yt, Tab as dt, tabClasses as st, TabPanel as ft, Avatar as gt, Snackbar as Nt } from "@mui/joy";
-import { EventGameModel as Xt, EventGameOutcomeTypeEnum as V, EventGamePredictionRequestBody as Lt } from "fansunited-sdk-esm";
-import { K as $t, a as _t, H as en, E as tn, P as mt, C as nn, b as on, c as an } from "./chunks/Error-DhQL89pn.js";
-import { O as ln } from "./chunks/OverlayScoreStateSkeleton-C9FUhcnd.js";
+import { i as J, c as W, d as b, m as Re, B as i, b as Q, a as X, u as de, b3 as Fe, aW as xt, ae as Z, k as Te, T as f, ah as Se, ad as ut, aV as Ft, aX as bt, aY as Bt, b4 as Rt, ag as he, f as Pe, W as $, e as ke, h as D, ai as Tt, aj as kt, ak as zt, al as Ht, am as yt, s as He, l as vt, P as Vt } from "./chunks/Portal-DegkUXpU.js";
+import { m as wt, T as At, M as Mt, n as qt, C as It, D as jt, s as V, S as St, d as Je, g as Dt, l as Pt, R as ve, N as Qt, i as Ot, j as Gt, k as Wt, O as Jt, a as Et, o as Zt } from "./chunks/index-DUQ2LFod.js";
+import { K as Yt, a as Nt, H as Xt, D as Lt, S as Ut, T as ht, E as $t, A as dt, P as st, C as _t, b as en, c as tn, d as nn } from "./chunks/Error-BurPfBJw.js";
+import { T as on, a as an, b as ft, t as gt, c as mt } from "./chunks/Tabs-leN3Fb8D.js";
+import { O as ln } from "./chunks/OverlayScoreStateSkeleton-Cha5KeNi.js";
 const rn = (e, n, o) => {
-  const [a, r] = E(null), [c, P] = E(null), u = async () => {
+  const [a, r] = E(null), [c, S] = E(null), u = async () => {
     try {
       const d = await n.eventGame.getGameById(e, !0);
       if (r(d), o && d.fixtures) {
@@ -17,18 +16,18 @@ const rn = (e, n, o) => {
             points: A.points || 0
           })
         );
-        P(g);
+        S(g);
       } else
-        P([]);
+        S([]);
     } catch (d) {
-      console.warn(d), r(new Xt()), P([]);
+      console.warn(d), r(new wt()), S([]);
     }
   };
   return Ve(() => (u(), () => {
-    r(null), P(null);
+    r(null), S(null);
   }), [e, n, o]), { game: a, points: c };
 }, cn = (e, n) => {
-  const [o, a] = E(void 0), [r, c] = E(!1), [P, u] = E(!1), d = async () => {
+  const [o, a] = E(void 0), [r, c] = E(!1), [S, u] = E(!1), d = async () => {
     let g = "";
     try {
       g = (await n.profile.getOwn().getInfo()).id;
@@ -72,7 +71,7 @@ const rn = (e, n, o) => {
     myPrediction: o,
     setMyPrediction: a,
     isUnauthorized: r,
-    isApiError: P,
+    isApiError: S,
     setIsUnauthorized: c,
     setIsApiError: u
   };
@@ -80,7 +79,7 @@ const rn = (e, n, o) => {
   children: e,
   brandingBorderColor: n
 }) => {
-  const o = J(), a = W().md, r = n || b().secondaryContainer, P = Re().size + " solid " + r;
+  const o = J(), a = W().md, r = n || b().secondaryContainer, S = Re().size + " solid " + r;
   return /* @__PURE__ */ t(
     i,
     {
@@ -90,7 +89,7 @@ const rn = (e, n, o) => {
         width: "100%",
         borderRadius: a,
         boxShadow: "md",
-        border: P,
+        border: S,
         overflow: "hidden",
         background: b().surface,
         minHeight: "250px"
@@ -528,7 +527,7 @@ const rn = (e, n, o) => {
     }
   }
 }), sn = (e) => {
-  const n = b(), o = W(), a = Q(), r = X(), c = J(), P = de(), [u, d] = E(e.prediction), g = Ct(null), A = e.minValue !== void 0 ? e.minValue : -1 / 0, m = e.maxValue !== void 0 ? e.maxValue : 1 / 0, K = P.mode === "dark" || e.isOverlayVariant, l = dn({
+  const n = b(), o = W(), a = Q(), r = X(), c = J(), S = de(), [u, d] = E(e.prediction), g = Ct(null), A = e.minValue !== void 0 ? e.minValue : -1 / 0, m = e.maxValue !== void 0 ? e.maxValue : 1 / 0, K = S.mode === "dark" || e.isOverlayVariant, l = dn({
     spacingScale: r,
     borderRadius: o,
     fontFamilyPrimary: a.primary,
@@ -548,8 +547,8 @@ const rn = (e, n, o) => {
     const x = C.target.value;
     if (x === "" || !/^\d+$/.test(x))
       return;
-    const S = parseInt(x, 10);
-    d(S), e.onChange(S);
+    const P = parseInt(x, 10);
+    d(P), e.onChange(P);
   };
   return /* @__PURE__ */ t(i, { sx: l.container, children: /* @__PURE__ */ s(i, { sx: l.numberInputContainer, children: [
     /* @__PURE__ */ t(
@@ -560,11 +559,11 @@ const rn = (e, n, o) => {
         onClick: () => y(!1),
         sx: l.numberButton,
         disabled: u <= A,
-        children: /* @__PURE__ */ t($t, { fontSize: "small" })
+        children: /* @__PURE__ */ t(Yt, { fontSize: "small" })
       }
     ),
     /* @__PURE__ */ t(
-      St,
+      xt,
       {
         value: u,
         onChange: U,
@@ -590,7 +589,7 @@ const rn = (e, n, o) => {
         onClick: () => y(!0),
         sx: l.numberButton,
         disabled: u >= m,
-        children: /* @__PURE__ */ t(_t, { fontSize: "small" })
+        children: /* @__PURE__ */ t(Nt, { fontSize: "small" })
       }
     )
   ] }) });
@@ -724,7 +723,7 @@ const rn = (e, n, o) => {
     children: n
   }
 ), Le = (e) => {
-  const { t: n } = Z(), o = b(), a = W(), r = Q(), c = X(), P = J(), [u, d] = E(!1), { points: g } = Te(we), A = gn({
+  const { t: n } = Z(), o = b(), a = W(), r = Q(), c = X(), S = J(), [u, d] = E(!1), { points: g } = Te(we), A = gn({
     spacingScale: c,
     borderRadius: a,
     fontFamilyPrimary: r.primary,
@@ -740,7 +739,7 @@ const rn = (e, n, o) => {
   const K = () => /* @__PURE__ */ t(f, { level: "body-sm", sx: A.tooltipText, children: n("eventGame.points.earnPointsForCorrect", {
     points: m.points
   }) });
-  return P || e.isSplitVariant ? /* @__PURE__ */ t(
+  return S || e.isSplitVariant ? /* @__PURE__ */ t(
     At,
     {
       title: K(),
@@ -758,7 +757,7 @@ const rn = (e, n, o) => {
         {
           onClick: () => d(!u),
           sx: A.mobileIconButton,
-          children: /* @__PURE__ */ t(en, { sx: A.mobileIcon })
+          children: /* @__PURE__ */ t(Xt, { sx: A.mobileIcon })
         }
       )
     }
@@ -778,8 +777,8 @@ const rn = (e, n, o) => {
   );
 }, Ye = (e) => {
   var K, l;
-  const { t: n } = Z(), o = b(), a = Pe(), r = W(), c = Q(), P = X(), { points: u } = Te(we), d = e.useExtraSmallLayout !== void 0 ? e.useExtraSmallLayout : a, g = fn({
-    spacingScale: P,
+  const { t: n } = Z(), o = b(), a = Se(), r = W(), c = Q(), S = X(), { points: u } = Te(we), d = e.useExtraSmallLayout !== void 0 ? e.useExtraSmallLayout : a, g = fn({
+    spacingScale: S,
     borderRadius: r,
     fontFamilyPrimary: c.primary,
     fontFamilySecondary: c.secondary,
@@ -800,7 +799,7 @@ const rn = (e, n, o) => {
           alignItems: "center",
           justifyContent: "space-between",
           width: "100%",
-          gap: P.sm
+          gap: S.sm
         },
         children: [
           d ? /* @__PURE__ */ t(I, {}) : /* @__PURE__ */ t(i, { sx: { flex: 1 } }),
@@ -926,7 +925,7 @@ const rn = (e, n, o) => {
     }
   };
 }, yn = (e) => {
-  const { t: n } = Z(), o = b(), a = W(), r = Q(), c = X(), P = J(), [u, d] = E(
+  const { t: n } = Z(), o = b(), a = W(), r = Q(), c = X(), S = J(), [u, d] = E(
     e.prediction
   ), g = un({
     spacingScale: c,
@@ -942,7 +941,7 @@ const rn = (e, n, o) => {
     onPrimary: o.palette.primary.onPrimary,
     successMain: o.palette.success.plainColor,
     dangerMain: o.palette.danger.plainColor,
-    isMobile: P
+    isMobile: S
   }), A = (U) => {
     d(U), e.onSelectionChange(U);
   }, K = {
@@ -961,8 +960,8 @@ const rn = (e, n, o) => {
         children: /* @__PURE__ */ t(
           "svg",
           {
-            width: P ? "20" : "24",
-            height: P ? "20" : "24",
+            width: S ? "20" : "24",
+            height: S ? "20" : "24",
             viewBox: "0 0 24 24",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
@@ -994,8 +993,8 @@ const rn = (e, n, o) => {
         children: /* @__PURE__ */ t(
           "svg",
           {
-            width: P ? "20" : "24",
-            height: P ? "20" : "24",
+            width: S ? "20" : "24",
+            height: S ? "20" : "24",
             viewBox: "0 0 24 24",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
@@ -1019,7 +1018,7 @@ const rn = (e, n, o) => {
     /* @__PURE__ */ t(l, { isSelected: u === !0 }),
     /* @__PURE__ */ t(y, { isSelected: u === !1 })
   ] });
-}, Pn = (e) => {
+}, Sn = (e) => {
   const n = J();
   return {
     container: {
@@ -1037,7 +1036,7 @@ const rn = (e, n, o) => {
     }
   };
 }, Ne = (e) => {
-  const n = b(), o = Pe(), a = W(), r = Q(), c = X(), { points: P } = Te(we), u = e.useExtraSmallLayout !== void 0 ? e.useExtraSmallLayout : o, d = Pn({
+  const n = b(), o = Se(), a = W(), r = Q(), c = X(), { points: S } = Te(we), u = e.useExtraSmallLayout !== void 0 ? e.useExtraSmallLayout : o, d = Sn({
     spacingScale: c,
     borderRadius: a,
     fontFamilyPrimary: r.primary,
@@ -1060,7 +1059,7 @@ const rn = (e, n, o) => {
         children: [
           u ? /* @__PURE__ */ t(I, {}) : /* @__PURE__ */ t(i, { sx: { flex: 1 } }),
           /* @__PURE__ */ t(f, { level: "h3", sx: d.title, children: e.question }),
-          /* @__PURE__ */ t(i, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: e.showPoints !== !1 && P.length > 0 && /* @__PURE__ */ t(
+          /* @__PURE__ */ t(i, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: e.showPoints !== !1 && S.length > 0 && /* @__PURE__ */ t(
             Le,
             {
               fixtureId: e.fixtureId,
@@ -1079,7 +1078,7 @@ const rn = (e, n, o) => {
       }
     )
   ] });
-}, Sn = (e) => ({
+}, Pn = (e) => ({
   container: {
     display: "flex",
     alignItems: "center",
@@ -1146,7 +1145,7 @@ const rn = (e, n, o) => {
     }
   }
 }), Un = (e) => {
-  const { t: n } = Z(), o = b(), a = W(), r = Q(), c = X(), P = J(), { shadowRootElement: u } = Te(xt), d = It(), g = de(), A = Re().size, [m, K] = E(e.prediction || ""), l = {
+  const { t: n } = Z(), o = b(), a = W(), r = Q(), c = X(), S = J(), { shadowRootElement: u } = Te(ut), d = Ft(), g = de(), A = Re().size, [m, K] = E(e.prediction || ""), l = {
     background: {
       surface: d.colorSchemes.light.palette.background.surface,
       popup: d.colorSchemes.light.palette.background.popup
@@ -1165,7 +1164,7 @@ const rn = (e, n, o) => {
     bgcolor: l.background.surface,
     borderColor: l.neutral.outlinedBorder,
     color: l.neutral.outlinedColor,
-    fontSize: P ? "0.875em" : "1em",
+    fontSize: S ? "0.875em" : "1em",
     lineHeight: "1.5",
     "&:hover": {
       bgcolor: l.neutral.outlinedHoverBg
@@ -1206,7 +1205,7 @@ const rn = (e, n, o) => {
     listbox: {
       container: u,
       sx: {
-        maxHeight: P ? "200px" : "300px",
+        maxHeight: S ? "200px" : "300px",
         overflowY: "auto",
         zIndex: 1300,
         bgcolor: l.background.popup,
@@ -1217,7 +1216,7 @@ const rn = (e, n, o) => {
     }
   }, C = {
     fontFamily: r.secondary,
-    fontSize: P ? "0.875em" : "1em",
+    fontSize: S ? "0.875em" : "1em",
     color: `${l.neutral.outlinedColor} !important`,
     bgcolor: `${l.background.popup} !important`,
     "&:hover": {
@@ -1232,7 +1231,7 @@ const rn = (e, n, o) => {
       bgcolor: `${l.neutral.outlinedHoverBg} !important`,
       color: `${l.neutral.outlinedColor} !important`
     }
-  }, x = Sn({
+  }, x = Pn({
     spacingScale: c,
     borderRadius: a,
     fontFamilyPrimary: r.primary,
@@ -1244,8 +1243,8 @@ const rn = (e, n, o) => {
     neutralPlainHoverBg: l.neutral.outlinedHoverBg,
     primary: o.palette.primary.plainColor,
     onPrimary: o.palette.primary.onPrimary,
-    isMobile: P
-  }), S = (q) => {
+    isMobile: S
+  }), P = (q) => {
     const M = q.target.value;
     K(M), e.onTextChange(M);
   }, p = (q, M) => {
@@ -1274,7 +1273,7 @@ const rn = (e, n, o) => {
         {
           sx: {
             display: "flex",
-            flexDirection: P ? "column" : "row",
+            flexDirection: S ? "column" : "row",
             gap: 2
           },
           children: w.map((ee, le) => {
@@ -1380,7 +1379,7 @@ const rn = (e, n, o) => {
         sx: {
           display: "flex",
           flexWrap: "wrap",
-          flexDirection: P ? "column" : "row",
+          flexDirection: S ? "column" : "row",
           gap: 2
         },
         children: R.map((k, w) => {
@@ -1439,20 +1438,20 @@ const rn = (e, n, o) => {
   ) : (
     // Otherwise, render select dropdown (default behavior)
     /* @__PURE__ */ t(
-      jt,
+      bt,
       {
         value: m || null,
         onChange: p,
         placeholder: n("eventGame.fixtures.textSelectPlaceholder"),
         slotProps: U,
-        children: R.map((q, M) => /* @__PURE__ */ t(Dt, { value: q, sx: C, children: q }, M))
+        children: R.map((q, M) => /* @__PURE__ */ t(Bt, { value: q, sx: C, children: q }, M))
       }
     )
   ) }) : /* @__PURE__ */ t(i, { sx: x.inputContainer, children: /* @__PURE__ */ t(
-    St,
+    xt,
     {
       value: m,
-      onChange: S,
+      onChange: P,
       placeholder: n("eventGame.fixtures.textInputPlaceholder"),
       sx: {
         ...y,
@@ -1492,7 +1491,7 @@ const rn = (e, n, o) => {
     }
   };
 }, Ke = (e) => {
-  const n = b(), o = Pe(), a = W(), r = Q(), c = X(), { points: P } = Te(we), u = e.useExtraSmallLayout !== void 0 ? e.useExtraSmallLayout : o, d = hn({
+  const n = b(), o = Se(), a = W(), r = Q(), c = X(), { points: S } = Te(we), u = e.useExtraSmallLayout !== void 0 ? e.useExtraSmallLayout : o, d = hn({
     spacingScale: c,
     borderRadius: a,
     fontFamilyPrimary: r.primary,
@@ -1515,7 +1514,7 @@ const rn = (e, n, o) => {
         children: [
           u ? /* @__PURE__ */ t(I, {}) : /* @__PURE__ */ t(i, { sx: { flex: 1 } }),
           /* @__PURE__ */ t(f, { level: "h3", sx: d.title, children: e.question }),
-          /* @__PURE__ */ t(i, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: e.showPoints !== !1 && P.length > 0 && /* @__PURE__ */ t(
+          /* @__PURE__ */ t(i, { sx: { flex: 1, display: "flex", justifyContent: "flex-end" }, children: e.showPoints !== !1 && S.length > 0 && /* @__PURE__ */ t(
             Le,
             {
               fixtureId: e.fixtureId,
@@ -1538,7 +1537,7 @@ const rn = (e, n, o) => {
   ] });
 }, $e = (e) => {
   const n = b(), o = W(), a = J(), r = () => {
-    const P = o.full, u = e.brandingPrimaryColor || n.palette.primary.plainColor, d = e.brandingPrimaryColor || n.palette.primary.outlinedBorder, g = "#FFFFFF", A = n.outlineEnabledBorder;
+    const S = o.full, u = e.brandingPrimaryColor || n.palette.primary.plainColor, d = e.brandingPrimaryColor || n.palette.primary.outlinedBorder, g = "#FFFFFF", A = n.outlineEnabledBorder;
     return /* @__PURE__ */ s(
       i,
       {
@@ -1566,7 +1565,7 @@ const rn = (e, n, o) => {
               sx: {
                 width: "32px",
                 height: "32px",
-                borderRadius: P,
+                borderRadius: S,
                 backgroundColor: u,
                 border: `1px solid ${d}`,
                 display: "flex",
@@ -1605,7 +1604,7 @@ const rn = (e, n, o) => {
       }
     );
   }, c = () => {
-    const P = o.full, u = e.totalSteps || e.eventGame.fixtures.length, d = [];
+    const S = o.full, u = e.totalSteps || e.eventGame.fixtures.length, d = [];
     for (let g = 0; g < u; g++) {
       const A = g + 1;
       let m, K, l;
@@ -1616,7 +1615,7 @@ const rn = (e, n, o) => {
             sx: {
               width: "32px",
               height: "32px",
-              borderRadius: P,
+              borderRadius: S,
               backgroundColor: m,
               border: `1px solid ${K}`,
               display: "flex",
@@ -1668,7 +1667,7 @@ const rn = (e, n, o) => {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        py: Ft("xs"),
+        py: Rt("xs"),
         width: "100%",
         zIndex: 1
       },
@@ -1688,8 +1687,8 @@ const rn = (e, n, o) => {
       return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
     const U = Math.floor(y / (1e3 * 60 * 60 * 24)), C = Math.floor(
       y % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60)
-    ), x = Math.floor(y % (1e3 * 60 * 60) / (1e3 * 60)), S = Math.floor(y % (1e3 * 60) / 1e3);
-    return { days: U, hours: C, minutes: x, seconds: S, total: y };
+    ), x = Math.floor(y % (1e3 * 60 * 60) / (1e3 * 60)), P = Math.floor(y % (1e3 * 60) / 1e3);
+    return { days: U, hours: C, minutes: x, seconds: P, total: y };
   }, [e.predictionsCutoffTime]);
   if (Ve(() => {
     const K = () => {
@@ -2068,8 +2067,8 @@ const rn = (e, n, o) => {
   let o = e;
   return (n == null ? void 0 : n.min) !== null && (n == null ? void 0 : n.min) !== void 0 && (o = Math.max(o, n.min)), (n == null ? void 0 : n.max) !== null && (n == null ? void 0 : n.max) !== void 0 && (o = Math.min(o, n.max)), o;
 }, pn = (e) => {
-  const { t: n } = Z(), { shadowRootElement: o } = Te(xt), a = b(), r = W(), c = Q(), P = X(), [u, d] = E(!1), g = Cn({
-    spacingScale: P,
+  const { t: n } = Z(), { shadowRootElement: o } = Te(ut), a = b(), r = W(), c = Q(), S = X(), [u, d] = E(!1), g = Cn({
+    spacingScale: S,
     borderRadius: r,
     fontFamilyPrimary: c.primary,
     fontFamilySecondary: c.secondary,
@@ -2171,16 +2170,16 @@ const rn = (e, n, o) => {
     return null;
   };
   return /* @__PURE__ */ t(
-    Qt,
+    Mt,
     {
       open: e.isOpen,
       onClose: e.onClose,
       container: o,
       sx: { zIndex: 1300 },
-      children: /* @__PURE__ */ s(Ot, { sx: g.modalDialog, children: [
-        /* @__PURE__ */ t(Fe, { onClick: e.onClose, sx: g.closeButton, children: /* @__PURE__ */ t(kt, {}) }),
-        /* @__PURE__ */ t(Gt, { sx: g.content, children: l() }),
-        e.view === "score" && /* @__PURE__ */ s(Wt, { children: [
+      children: /* @__PURE__ */ s(qt, { sx: g.modalDialog, children: [
+        /* @__PURE__ */ t(Fe, { onClick: e.onClose, sx: g.closeButton, children: /* @__PURE__ */ t(It, {}) }),
+        /* @__PURE__ */ t(jt, { sx: g.content, children: l() }),
+        e.view === "score" && /* @__PURE__ */ s(Lt, { children: [
           /* @__PURE__ */ t(he, { variant: "solid", onClick: K, loading: u, children: n("eventGame.buttons.save") }),
           /* @__PURE__ */ t(
             he,
@@ -2210,7 +2209,7 @@ const rn = (e, n, o) => {
     }
   );
 }, ze = (e) => {
-  const { t: n } = Z(), o = b(), a = W(), r = Q(), c = X(), P = J(), [u, d] = E(!1), [g, A] = E(null), m = Kn({
+  const { t: n } = Z(), o = b(), a = W(), r = Q(), c = X(), S = J(), [u, d] = E(!1), [g, A] = E(null), m = Kn({
     spacingScale: c,
     borderRadius: a,
     fontFamilyPrimary: r.primary,
@@ -2222,7 +2221,7 @@ const rn = (e, n, o) => {
     outlineEnabledBorder: o.outlineEnabledBorder,
     outlinedBorder: o.palette.neutral.outlinedBorder,
     neutralSoftBg: o.palette.neutral.softBg,
-    isMobile: P,
+    isMobile: S,
     isSplitVariant: e.isSplitVariant || !1
   }), K = (C) => {
     const x = e.fixtures[C];
@@ -2230,17 +2229,17 @@ const rn = (e, n, o) => {
   }, l = () => {
     if (e.view === "play" && g && g.outcomeType === V.NUMBER) {
       const C = g.validOutcomes, x = e.prediction.fixtures.find(
-        (S) => S.id === g.id
+        (P) => P.id === g.id
       );
       if (x && typeof x.prediction == "number") {
-        const S = Me(x.prediction, C);
-        if (S !== x.prediction) {
+        const P = Me(x.prediction, C);
+        if (P !== x.prediction) {
           const p = { ...e.prediction }, F = p.fixtures.findIndex(
             (R) => R.id === g.id
           );
           F !== -1 && (p.fixtures[F] = {
             ...p.fixtures[F],
-            prediction: S
+            prediction: P
           }, e.onPredictionUpdate(p));
         }
       }
@@ -2287,7 +2286,7 @@ const rn = (e, n, o) => {
                 size: "sm",
                 sx: m.editIconButton,
                 onClick: () => K(x),
-                children: /* @__PURE__ */ t(tn, {})
+                children: /* @__PURE__ */ t($t, {})
               }
             ) })
           ] }, `${C.id}-${x}`)) })
@@ -2310,13 +2309,13 @@ const rn = (e, n, o) => {
     )
   ] }) });
 }, Fn = (e) => {
-  const [n, o] = Ee.useState(1), a = de(), { t: r } = Z(), c = J(), P = Pe(), u = e.imagePosition || "left", d = Se(
+  const [n, o] = Ee.useState(1), a = de(), { t: r } = Z(), c = J(), S = Se(), u = e.imagePosition || "left", d = Pe(
     {
       images: e.eventGame.images,
       imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
     },
     $.STANDARD
-  ), g = P || c && !!d, A = b().palette.danger.plainColor, m = b().textColor, K = b().textColor, l = Q().secondary, y = "60%", U = Q().primary, C = b().surfaceVariant, x = W(), S = b().palette.primary.plainColor, p = b().palette.primary.onPrimary, F = W().xl, R = X(), z = ke(
+  ), g = S || c && !!d, A = b().palette.danger.plainColor, m = b().textColor, K = b().textColor, l = Q().secondary, y = "60%", U = Q().primary, C = b().surfaceVariant, x = W(), P = b().palette.primary.plainColor, p = b().palette.primary.onPrimary, F = W().xl, R = X(), z = ke(
     $.STANDARD
   ), h = An({
     finalImage: d,
@@ -2424,14 +2423,14 @@ const rn = (e, n, o) => {
               borderRadius: F,
               py: "10px",
               px: "16px",
-              borderColor: S,
+              borderColor: P,
               color: p,
               transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
               transform: "scale(1)",
               alignSelf: "center",
               "&:hover": {
-                borderColor: S,
-                backgroundColor: `${S}10`,
+                borderColor: P,
+                backgroundColor: `${P}10`,
                 transform: "scale(1.02)"
               },
               "&:active": {
@@ -2471,13 +2470,13 @@ const rn = (e, n, o) => {
               borderRadius: F,
               py: "10px",
               px: "16px",
-              bgcolor: S,
+              bgcolor: P,
               color: p,
               transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
               transform: "scale(1)",
               alignSelf: "center",
               "&:hover": {
-                bgcolor: S,
+                bgcolor: P,
                 transform: "scale(1.02)"
               },
               "&:active": {
@@ -2485,7 +2484,7 @@ const rn = (e, n, o) => {
                 transform: "scale(0.98)"
               },
               "&:disabled": {
-                bgcolor: S,
+                bgcolor: P,
                 color: p,
                 opacity: "12%"
               },
@@ -2601,7 +2600,7 @@ const rn = (e, n, o) => {
       }
   };
   return /* @__PURE__ */ t(Ue, { brandingBorderColor: null, children: /* @__PURE__ */ t(
-    yt,
+    St,
     {
       entity: { ...e.eventGame, labels: null },
       headline: r("eventGame.headline"),
@@ -2869,11 +2868,11 @@ const rn = (e, n, o) => {
 }, Bn = (e, n) => {
   switch (e) {
     case "success":
-      return /* @__PURE__ */ t(ut, {});
+      return /* @__PURE__ */ t(yt, {});
     case "error":
-      return /* @__PURE__ */ t(Bt, { sx: { color: n } });
+      return /* @__PURE__ */ t(Ht, { sx: { color: n } });
     case "info":
-      return /* @__PURE__ */ t(bt, {});
+      return /* @__PURE__ */ t(zt, {});
   }
 }, Rn = (e) => {
   switch (e) {
@@ -2890,9 +2889,9 @@ const rn = (e, n, o) => {
   message: o,
   description: a
 }) => {
-  const r = de(), c = W(), P = Q().secondary, u = J(), d = Rn(e);
+  const r = de(), c = W(), S = Q().secondary, u = J(), d = Rn(e);
   return /* @__PURE__ */ t(
-    Jt,
+    Tt,
     {
       variant: "soft",
       color: d,
@@ -2907,7 +2906,7 @@ const rn = (e, n, o) => {
         "--Icon-fontSize": u ? "1em" : "1.25em"
       },
       children: /* @__PURE__ */ s(
-        Et,
+        kt,
         {
           sx: {
             fontSize: "1.5em"
@@ -2919,7 +2918,7 @@ const rn = (e, n, o) => {
                 level: "title-md",
                 color: d,
                 fontWeight: "bold",
-                sx: { fontFamily: P, fontSize: "0.875em" },
+                sx: { fontFamily: S, fontSize: "0.875em" },
                 children: n
               }
             ),
@@ -2927,7 +2926,7 @@ const rn = (e, n, o) => {
               f,
               {
                 level: "body-sm",
-                sx: { fontFamily: P, fontSize: "0.675em" },
+                sx: { fontFamily: S, fontSize: "0.675em" },
                 children: o
               }
             ),
@@ -2935,7 +2934,7 @@ const rn = (e, n, o) => {
               f,
               {
                 level: "body-xs",
-                sx: { fontFamily: P, fontSize: "0.6em" },
+                sx: { fontFamily: S, fontSize: "0.6em" },
                 children: a
               }
             )
@@ -2945,17 +2944,17 @@ const rn = (e, n, o) => {
     }
   );
 }, Tn = (e) => {
-  const n = de(), o = Se(
+  const n = de(), o = Pe(
     {
       images: e.eventGame.images,
       imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
     },
     $.STANDARD
-  ), { t: a } = Z(), r = null, c = J(), P = e.imagePosition || "left", u = e.eventGame.status === "OPEN", d = (M) => {
+  ), { t: a } = Z(), r = null, c = J(), S = e.imagePosition || "left", u = e.eventGame.status === "OPEN", d = (M) => {
     console.log(`Edit prediction for fixture at index: ${M}`);
   }, g = b().textColor, A = Q().secondary, m = Q().primary, K = W(), l = X(), y = `rgba(${D(b().surfaceVariant)}, 0.5)`, U = ke(
     $.STANDARD
-  ), C = "60%", x = b().textSecondary, S = b().secondaryContainer, p = Re().size, F = bn({
+  ), C = "60%", x = b().textSecondary, P = b().secondaryContainer, p = Re().size, F = bn({
     finalImage: o,
     spacingScale: l,
     borderRadius: K,
@@ -2978,10 +2977,10 @@ const rn = (e, n, o) => {
     alignItems: "center",
     gap: "8px",
     borderRadius: K.xl,
-    border: p + " solid " + S,
-    bgcolor: S,
+    border: p + " solid " + P,
+    bgcolor: P,
     "&:hover": {
-      bgcolor: S,
+      bgcolor: P,
       opacity: 0.9
     }
   }, z = {
@@ -3029,12 +3028,12 @@ const rn = (e, n, o) => {
     ) })
   ] });
   return /* @__PURE__ */ t(Ue, { brandingBorderColor: null, children: /* @__PURE__ */ t(
-    yt,
+    St,
     {
       entity: { ...e.eventGame, labels: null },
       headline: a("eventGame.headline"),
       finalImage: o,
-      imagePosition: P,
+      imagePosition: S,
       rulesDisplay: e.rulesDisplay,
       children: q()
     }
@@ -3081,13 +3080,13 @@ const rn = (e, n, o) => {
     p: e.spacingScale.lg
   }
 }), zn = (e) => {
-  const { t: n } = Z(), o = J(), a = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : o ? Be : be, r = Se(
+  const { t: n } = Z(), o = J(), a = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : o ? Be : be, r = Pe(
     {
       images: e.eventGame.images,
       imagePlaceholder: a
     },
     $.SPLIT
-  ), c = b().textSecondary, P = b().secondaryContainer, u = Q().primary, d = b().surfaceVariant, g = W(), A = X(), m = Re().size, K = e.eventGame.status === "OPEN" && e.prediction && e.onPredictionUpdate, l = (p) => {
+  ), c = b().textSecondary, S = b().secondaryContainer, u = Q().primary, d = b().surfaceVariant, g = W(), A = X(), m = Re().size, K = e.eventGame.status === "OPEN" && e.prediction && e.onPredictionUpdate, l = (p) => {
     console.log(`Edit prediction for fixture at index: ${p}`);
   }, y = kn({
     spacingScale: A,
@@ -3103,10 +3102,10 @@ const rn = (e, n, o) => {
     alignItems: "center",
     gap: "8px",
     borderRadius: g.xl,
-    bgcolor: P,
-    border: `${m} solid ${P}`,
+    bgcolor: S,
+    border: `${m} solid ${S}`,
     "&:hover": {
-      bgcolor: P,
+      bgcolor: S,
       opacity: 0.9
     },
     fontSize: o ? "0.750em" : "0.8125em",
@@ -3126,7 +3125,7 @@ const rn = (e, n, o) => {
     textTransform: "uppercase"
   };
   return /* @__PURE__ */ t(Ue, { brandingBorderColor: null, children: /* @__PURE__ */ t(
-    zt,
+    Dt,
     {
       entity: { ...e.eventGame, labels: null },
       headline: n("eventGame.headline"),
@@ -3903,7 +3902,7 @@ const rn = (e, n, o) => {
   children: r,
   brandingColors: c
 }) => {
-  const [P, u] = Ee.useState(0), d = de(), { t: g } = Z(), A = J(), m = Pe(), K = W().md, l = a ? d.colorSchemes.dark.textPrimary : b().textPrimary, y = a ? d.colorSchemes.dark.textSecondary : b().textSecondary, U = Q().primary, C = Q().secondary, x = a ? d.colorSchemes.dark.secondaryContainer : b().secondaryContainer, S = c != null && c.backgroundColor || a ? d.colorSchemes.dark.surfaceVariant : b().surfaceVariant, p = X(), F = a ? d.colorSchemes.dark.palette.success.plainColor : b().palette.success.plainColor, R = a ? d.colorSchemes.dark.palette.danger.plainColor : b().palette.danger.plainColor, z = a ? d.colorSchemes.dark.outlineEnabledBorder : b().outlineEnabledBorder, h = a ? d.colorSchemes.dark.palette.neutral.softBg : b().palette.neutral.softBg;
+  const [S, u] = Ee.useState(0), d = de(), { t: g } = Z(), A = J(), m = Se(), K = W().md, l = a ? d.colorSchemes.dark.textPrimary : b().textPrimary, y = a ? d.colorSchemes.dark.textSecondary : b().textSecondary, U = Q().primary, C = Q().secondary, x = a ? d.colorSchemes.dark.secondaryContainer : b().secondaryContainer, P = c != null && c.backgroundColor || a ? d.colorSchemes.dark.surfaceVariant : b().surfaceVariant, p = X(), F = a ? d.colorSchemes.dark.palette.success.plainColor : b().palette.success.plainColor, R = a ? d.colorSchemes.dark.palette.danger.plainColor : b().palette.danger.plainColor, z = a ? d.colorSchemes.dark.outlineEnabledBorder : b().outlineEnabledBorder, h = a ? d.colorSchemes.dark.palette.neutral.softBg : b().palette.neutral.softBg;
   let q = a ? d.colorSchemes.dark.textPrimary : b().textPrimary;
   c != null && c.primaryColor && (q = c.primaryColor);
   const M = (B, k) => {
@@ -3971,7 +3970,7 @@ const rn = (e, n, o) => {
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: S,
+            backgroundColor: P,
             opacity: 0.5,
             borderRadius: "inherit",
             zIndex: 0,
@@ -4177,9 +4176,9 @@ const rn = (e, n, o) => {
     );
   };
   return /* @__PURE__ */ t(i, { sx: { width: "100%" }, children: /* @__PURE__ */ s(
-    Zt,
+    on,
     {
-      value: P,
+      value: S,
       onChange: (B, k) => u(k),
       sx: {
         borderRadius: K,
@@ -4189,7 +4188,7 @@ const rn = (e, n, o) => {
       },
       children: [
         /* @__PURE__ */ s(
-          Yt,
+          an,
           {
             sx: {
               fontSize: A ? "0.75em" : "1em",
@@ -4197,7 +4196,7 @@ const rn = (e, n, o) => {
             },
             children: [
               /* @__PURE__ */ t(
-                dt,
+                ft,
                 {
                   sx: {
                     display: "flex",
@@ -4212,7 +4211,7 @@ const rn = (e, n, o) => {
                       bgcolor: a ? "#FAFAFA14" : "#2121210A"
                       // Highlight selected tab
                     },
-                    [`&.${st.selected}`]: {
+                    [`&.${gt.selected}`]: {
                       bgcolor: a ? "#FAFAFA14" : "#2121210A",
                       // Highlight selected tab
                       borderBottom: "3px solid " + q,
@@ -4272,7 +4271,7 @@ const rn = (e, n, o) => {
                 }
               ),
               /* @__PURE__ */ t(
-                dt,
+                ft,
                 {
                   sx: {
                     display: "flex",
@@ -4287,7 +4286,7 @@ const rn = (e, n, o) => {
                       bgcolor: a ? "#FAFAFA14" : "#2121210A"
                       // Highlight selected tab
                     },
-                    [`&.${st.selected}`]: {
+                    [`&.${gt.selected}`]: {
                       bgcolor: a ? "#FAFAFA14" : "#2121210A",
                       // Highlight selected tab
                       borderBottom: "3px solid " + q,
@@ -4350,7 +4349,7 @@ const rn = (e, n, o) => {
           }
         ),
         /* @__PURE__ */ t(
-          ft,
+          mt,
           {
             value: 0,
             sx: {
@@ -4361,7 +4360,7 @@ const rn = (e, n, o) => {
           }
         ),
         /* @__PURE__ */ t(
-          ft,
+          mt,
           {
             value: 1,
             sx: {
@@ -4452,7 +4451,7 @@ const rn = (e, n, o) => {
   isSplitVariant: a,
   loading: r = !1
 }) => {
-  const { t: c } = Z(), P = de(), u = b(), d = u.palette.primary.plainColor, g = u.textColor, A = Q().primary, m = Q().secondary, K = W(), l = X(), y = Pe(), U = u.surfaceVariant, C = P.colorSchemes.light.palette.primary.onPrimary, x = u.outlineEnabledBorder, S = {
+  const { t: c } = Z(), S = de(), u = b(), d = u.palette.primary.plainColor, g = u.textColor, A = Q().primary, m = Q().secondary, K = W(), l = X(), y = Se(), U = u.surfaceVariant, C = S.colorSchemes.light.palette.primary.onPrimary, x = u.outlineEnabledBorder, P = {
     leaderboardContainer: {
       display: "flex",
       flexDirection: "column",
@@ -4585,35 +4584,35 @@ const rn = (e, n, o) => {
   if (r || !e)
     return /* @__PURE__ */ t(Pt, { my: 10 });
   if (e.length === 0)
-    return /* @__PURE__ */ t(f, { level: "body-lg", sx: S.noLeaderboardText, children: c("eventGame.leaderboard.noLeaderboardAvailable") });
+    return /* @__PURE__ */ t(f, { level: "body-lg", sx: P.noLeaderboardText, children: c("eventGame.leaderboard.noLeaderboardAvailable") });
   const p = n == null ? void 0 : n.position, F = p && e.some((R) => R.position === p);
-  return /* @__PURE__ */ s(i, { sx: S.leaderboardContainer, children: [
-    o && /* @__PURE__ */ t(f, { level: "h4", sx: S.leaderboardTitle, children: c("eventGame.leaderboard.title") }),
-    /* @__PURE__ */ t(Ut, { sx: S.tableContainer, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ s(i, { sx: P.leaderboardContainer, children: [
+    o && /* @__PURE__ */ t(f, { level: "h4", sx: P.leaderboardTitle, children: c("eventGame.leaderboard.title") }),
+    /* @__PURE__ */ t(Ut, { sx: P.tableContainer, children: /* @__PURE__ */ s(
       ht,
       {
         variant: "outlined",
         hoverRow: !1,
         borderAxis: "bothBetween",
         size: "sm",
-        sx: S.table,
+        sx: P.table,
         children: [
           /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ s("tr", { children: [
-            /* @__PURE__ */ t("th", { style: S.headerCellPosition, children: y || a ? "" : c("eventGame.leaderboard.position") }),
-            /* @__PURE__ */ t("th", { style: S.headerCellName, children: c("eventGame.leaderboard.name") }),
-            /* @__PURE__ */ t("th", { style: S.headerCellPoints, children: y || a ? "🎯" : c("eventGame.leaderboard.points") })
+            /* @__PURE__ */ t("th", { style: P.headerCellPosition, children: y || a ? "" : c("eventGame.leaderboard.position") }),
+            /* @__PURE__ */ t("th", { style: P.headerCellName, children: c("eventGame.leaderboard.name") }),
+            /* @__PURE__ */ t("th", { style: P.headerCellPoints, children: y || a ? "🎯" : c("eventGame.leaderboard.points") })
           ] }) }),
           /* @__PURE__ */ s("tbody", { children: [
-            n && !F && /* @__PURE__ */ s("tr", { style: S.userRow, children: [
-              /* @__PURE__ */ t("td", { style: S.tableCellPosition, children: /* @__PURE__ */ s(f, { sx: S.positionText, children: [
+            n && !F && /* @__PURE__ */ s("tr", { style: P.userRow, children: [
+              /* @__PURE__ */ t("td", { style: P.tableCellPosition, children: /* @__PURE__ */ s(f, { sx: P.positionText, children: [
                 "#",
                 n.position
               ] }) }),
-              /* @__PURE__ */ t("td", { style: S.tableCellName, children: /* @__PURE__ */ s(i, { sx: S.nameCell, children: [
-                /* @__PURE__ */ t(gt, { sx: S.leaderboardAvatar, children: /* @__PURE__ */ t(mt, { sx: S.avatarIcon }) }),
-                /* @__PURE__ */ t(f, { sx: S.nameText, children: c("eventGame.leaderboard.you") })
+              /* @__PURE__ */ t("td", { style: P.tableCellName, children: /* @__PURE__ */ s(i, { sx: P.nameCell, children: [
+                /* @__PURE__ */ t(dt, { sx: P.leaderboardAvatar, children: /* @__PURE__ */ t(st, { sx: P.avatarIcon }) }),
+                /* @__PURE__ */ t(f, { sx: P.nameText, children: c("eventGame.leaderboard.you") })
               ] }) }),
-              /* @__PURE__ */ t("td", { style: S.tableCellPoints, children: /* @__PURE__ */ t(f, { sx: S.pointsText, children: n.totalPoints }) })
+              /* @__PURE__ */ t("td", { style: P.tableCellPoints, children: /* @__PURE__ */ t(f, { sx: P.pointsText, children: n.totalPoints }) })
             ] }),
             e.map((R) => {
               var h, q, M, _;
@@ -4621,24 +4620,24 @@ const rn = (e, n, o) => {
               return /* @__PURE__ */ s(
                 "tr",
                 {
-                  style: z ? S.userRow : void 0,
+                  style: z ? P.userRow : void 0,
                   children: [
-                    /* @__PURE__ */ t("td", { style: S.tableCellPosition, children: /* @__PURE__ */ s(f, { sx: S.positionText, children: [
+                    /* @__PURE__ */ t("td", { style: P.tableCellPosition, children: /* @__PURE__ */ s(f, { sx: P.positionText, children: [
                       "#",
                       R.position
                     ] }) }),
-                    /* @__PURE__ */ t("td", { style: S.tableCellName, children: /* @__PURE__ */ s(i, { sx: S.nameCell, children: [
+                    /* @__PURE__ */ t("td", { style: P.tableCellName, children: /* @__PURE__ */ s(i, { sx: P.nameCell, children: [
                       /* @__PURE__ */ t(
-                        gt,
+                        dt,
                         {
                           src: ((h = R.profileModel) == null ? void 0 : h.avatar) || void 0,
-                          sx: S.leaderboardAvatar,
-                          children: (q = R.profileModel) != null && q.avatar ? /* @__PURE__ */ t(I, {}) : /* @__PURE__ */ t(mt, { sx: S.avatarIcon })
+                          sx: P.leaderboardAvatar,
+                          children: (q = R.profileModel) != null && q.avatar ? /* @__PURE__ */ t(I, {}) : /* @__PURE__ */ t(st, { sx: P.avatarIcon })
                         }
                       ),
-                      /* @__PURE__ */ t(f, { sx: S.nameText, children: z ? c("eventGame.leaderboard.you") : ((M = R.profileModel) == null ? void 0 : M.nickname) || ((_ = R.profileModel) == null ? void 0 : _.name) })
+                      /* @__PURE__ */ t(f, { sx: P.nameText, children: z ? c("eventGame.leaderboard.you") : ((M = R.profileModel) == null ? void 0 : M.nickname) || ((_ = R.profileModel) == null ? void 0 : _.name) })
                     ] }) }),
-                    /* @__PURE__ */ t("td", { style: S.tableCellPoints, children: /* @__PURE__ */ t(f, { sx: S.pointsText, children: R.totalPoints }) })
+                    /* @__PURE__ */ t("td", { style: P.tableCellPoints, children: /* @__PURE__ */ t(f, { sx: P.pointsText, children: R.totalPoints }) })
                   ]
                 },
                 R.profileId
@@ -4657,14 +4656,14 @@ const rn = (e, n, o) => {
   isOverlayVariant: r = !1,
   justifyContent: c = "flex-start"
 }) => {
-  const P = de(), u = () => {
+  const S = de(), u = () => {
     if (!r)
       return {
         borderRadius: "8px",
         minWidth: "32px",
         minHeight: "32px"
       };
-    const d = P.colorSchemes.dark;
+    const d = S.colorSchemes.dark;
     return {
       borderRadius: "8px",
       minWidth: "32px",
@@ -4705,7 +4704,7 @@ const rn = (e, n, o) => {
             onClick: a,
             disabled: !n,
             sx: u(),
-            children: /* @__PURE__ */ t(nn, { size: 20 })
+            children: /* @__PURE__ */ t(_t, { size: 20 })
           }
         ),
         /* @__PURE__ */ t(
@@ -4717,7 +4716,7 @@ const rn = (e, n, o) => {
             onClick: o,
             disabled: !e,
             sx: u(),
-            children: /* @__PURE__ */ t(on, { size: 20 })
+            children: /* @__PURE__ */ t(en, { size: 20 })
           }
         )
       ]
@@ -4726,7 +4725,7 @@ const rn = (e, n, o) => {
 }, at = (e, n) => {
   const [o, a] = E(
     null
-  ), [r, c] = E(!1), [P, u] = E(!1), [d, g] = E(
+  ), [r, c] = E(!1), [S, u] = E(!1), [d, g] = E(
     null
   ), [A, m] = E([]), [K, l] = E(null), [y, U] = E(!1), C = async (p = null, F) => {
     try {
@@ -4759,7 +4758,7 @@ const rn = (e, n, o) => {
       ];
       m(p), g(K.nextPageStartsAfter), C(K.nextPageStartsAfter, p);
     }
-  }, S = () => {
+  }, P = () => {
     if (A.length > 0) {
       const p = [...A], F = p.pop() || null;
       m(p), g(F), C(F, p);
@@ -4772,23 +4771,23 @@ const rn = (e, n, o) => {
     pagination: K,
     loading: y,
     isUnauthorized: r,
-    isApiError: P,
+    isApiError: S,
     setRankings: a,
     setIsUnauthorized: c,
     setIsApiError: u,
     goToNextPage: x,
-    goToPreviousPage: S
+    goToPreviousPage: P
   };
 }, wn = (e) => {
-  const n = X(), o = de(), { t: a } = Z(), r = J(), c = Pe(), P = ke(
+  const n = X(), o = de(), { t: a } = Z(), r = J(), c = Se(), S = ke(
     $.OVERLAY
-  ), u = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : r ? Be : be, d = Se(
+  ), u = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : r ? Be : be, d = Pe(
     {
       images: e.game.images,
       imagePlaceholder: u
     },
     $.OVERLAY
-  ), g = b().textPrimary, A = b().palette.primary.plainColor, m = b().textColor, K = Q().secondary, l = Q().primary, y = b().surface, U = `rgba(${D(b().surfaceVariant)}, 0.5)`, C = b().onSurface, x = W(), S = Re().size, p = `rgba(${D(
+  ), g = b().textPrimary, A = b().palette.primary.plainColor, m = b().textColor, K = Q().secondary, l = Q().primary, y = b().surface, U = `rgba(${D(b().surfaceVariant)}, 0.5)`, C = b().onSurface, x = W(), P = Re().size, p = `rgba(${D(
     b().surfaceVariant || ""
   )}, 0.5)`, F = b().textColor, R = "60%", { rankings: z, pagination: h, loading: q, goToNextPage: M, goToPreviousPage: _ } = at(e.game.id, e.sdk), O = Hn({
     finalImage: d,
@@ -4802,14 +4801,14 @@ const rn = (e, n, o) => {
     bgcolor: U,
     buttonBgColor: y,
     onSurfaceColor: C,
-    borderSize: S,
+    borderSize: P,
     surfaceVariant: p,
     imagePosition: "left",
     successColor: o.colorSchemes.light.palette.success.plainColor,
     dangerColor: o.colorSchemes.light.palette.danger.plainColor,
     onPrimaryColor: o.colorSchemes.light.palette.primary.onPrimary,
     isMobile: r,
-    imageBackgroundGradient: P,
+    imageBackgroundGradient: S,
     darkTextColor: o.colorSchemes.dark.textColor,
     opacity: R,
     secondaryColor: F,
@@ -4888,7 +4887,7 @@ const rn = (e, n, o) => {
 }, Mn = () => {
   const { t: e } = Z();
   return /* @__PURE__ */ t(Ue, { brandingBorderColor: null, children: /* @__PURE__ */ t(
-    Ht,
+    Qt,
     {
       notFoundTitle: e("eventGame.eventGameNotFound"),
       notFoundMessage: e("eventGame.eventGameNotFoundDescription")
@@ -4897,7 +4896,7 @@ const rn = (e, n, o) => {
 }, qn = (e) => {
   const { t: n } = Z();
   return /* @__PURE__ */ t(Ue, { brandingBorderColor: null, children: /* @__PURE__ */ t(
-    vt,
+    Ot,
     {
       entity: { ...e.eventGame, labels: null },
       headline: n("eventGame.headline"),
@@ -4912,7 +4911,7 @@ const rn = (e, n, o) => {
 }, In = (e) => {
   const { t: n } = Z();
   return /* @__PURE__ */ t(Ue, { brandingBorderColor: null, children: /* @__PURE__ */ t(
-    Vt,
+    Gt,
     {
       entity: { ...e.eventGame, labels: null },
       headline: n("eventGame.headline"),
@@ -4926,7 +4925,7 @@ const rn = (e, n, o) => {
 }, jn = (e) => {
   const { t: n } = Z(), o = J(), a = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : o ? Be : be;
   return /* @__PURE__ */ t(
-    wt,
+    Wt,
     {
       entity: { ...e.eventGame, labels: null },
       headline: n("eventGame.headline"),
@@ -5474,19 +5473,19 @@ const rn = (e, n, o) => {
     }
   };
 }, Qn = (e) => {
-  const n = de(), o = Se(
+  const n = de(), o = Pe(
     {
       images: e.eventGame.images,
       imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
     },
     $.STANDARD
-  ), { t: a } = Z(), r = null, c = J(), P = Pe(), u = e.imagePosition || "left", d = b().textPrimary, g = b().palette.primary.plainColor, A = b().textColor, m = Q().secondary, K = Q().primary, l = b().surface, y = `rgba(${D(b().surfaceVariant)}, 0.5)`, U = b().onSurface, C = W(), x = Re().size, S = X(), p = `rgba(${D(
+  ), { t: a } = Z(), r = null, c = J(), S = Se(), u = e.imagePosition || "left", d = b().textPrimary, g = b().palette.primary.plainColor, A = b().textColor, m = Q().secondary, K = Q().primary, l = b().surface, y = `rgba(${D(b().surfaceVariant)}, 0.5)`, U = b().onSurface, C = W(), x = Re().size, P = X(), p = `rgba(${D(
     b().surfaceVariant || ""
   )}, 0.5)`, F = ke(
     $.STANDARD
   ), R = "60%", z = b().textColor, { rankings: h, pagination: q, loading: M, goToNextPage: _, goToPreviousPage: O } = at(e.eventGame.id, e.sdk), B = Dn({
     finalImage: o,
-    spacingScale: S,
+    spacingScale: P,
     borderRadius: C,
     fontFamilyPrimary: K,
     fontFamilySecondary: m,
@@ -5508,7 +5507,7 @@ const rn = (e, n, o) => {
     darkTextColor: n.colorSchemes.dark.textColor,
     opacity: R,
     secondaryColor: z,
-    isExtraSmall: P
+    isExtraSmall: S
   }), k = () => /* @__PURE__ */ s(i, { sx: B.mainContentArea, children: [
     !c && /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(i, { sx: B.desktopHeadlineContainer, children: /* @__PURE__ */ s(
       i,
@@ -5525,7 +5524,7 @@ const rn = (e, n, o) => {
               sx: {
                 display: "flex",
                 alignItems: "center",
-                gap: S["3xs"]
+                gap: P["3xs"]
               },
               children: [
                 /* @__PURE__ */ t(
@@ -5568,7 +5567,7 @@ const rn = (e, n, o) => {
       {
         sx: {
           ...B.paginationContainer,
-          ml: P ? "0" : "auto"
+          ml: S ? "0" : "auto"
         },
         children: /* @__PURE__ */ t(
           ot,
@@ -5591,7 +5590,7 @@ const rn = (e, n, o) => {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          gap: S["3xs"]
+          gap: P["3xs"]
         },
         children: [
           /* @__PURE__ */ t(
@@ -5625,7 +5624,7 @@ const rn = (e, n, o) => {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          gap: S["3xs"]
+          gap: P["3xs"]
         },
         children: [
           /* @__PURE__ */ t(f, { level: "body-sm", sx: B.headlineTypography, children: a("eventGame.headline") }),
@@ -5675,7 +5674,7 @@ const rn = (e, n, o) => {
 }) => {
   const o = W(), a = Q();
   return e.open ? /* @__PURE__ */ t(
-    Nt,
+    tn,
     {
       open: e.open,
       onClose: n,
@@ -5683,7 +5682,7 @@ const rn = (e, n, o) => {
       anchorOrigin: { vertical: "top", horizontal: "center" },
       color: e.variant === "success" ? "success" : "danger",
       variant: "soft",
-      startDecorator: e.variant === "success" ? /* @__PURE__ */ t(ut, {}) : /* @__PURE__ */ t(an, {}),
+      startDecorator: e.variant === "success" ? /* @__PURE__ */ t(yt, {}) : /* @__PURE__ */ t(nn, {}),
       sx: {
         borderRadius: o.sm,
         fontFamily: a.secondary,
@@ -5933,13 +5932,13 @@ const rn = (e, n, o) => {
   }
 }), Gn = (e) => {
   var te, re, ne, T, ie, oe, ae, L, Ae, fe, ge, me, N, Ce, qe, pe;
-  const [n, o] = Ee.useState(1), a = X(), r = de(), { t: c } = Z(), P = J(), u = Pe(), d = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : P ? Be : be, g = Se(
+  const [n, o] = Ee.useState(1), a = X(), r = de(), { t: c } = Z(), S = J(), u = Se(), d = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : S ? Be : be, g = Pe(
     {
       images: e.eventGame.images,
       imagePlaceholder: d
     },
     $.OVERLAY
-  ), A = r.customRadius.dark.md, m = (re = (te = r.colorSchemes) == null ? void 0 : te.dark) == null ? void 0 : re.surfaceVariant, K = (T = (ne = r.customRadius) == null ? void 0 : ne.light) == null ? void 0 : T.xl, l = (L = (ae = (oe = (ie = r.colorSchemes) == null ? void 0 : ie.light) == null ? void 0 : oe.palette) == null ? void 0 : ae.primary) == null ? void 0 : L.plainColor, y = (me = (ge = (fe = (Ae = r.colorSchemes) == null ? void 0 : Ae.light) == null ? void 0 : fe.palette) == null ? void 0 : ge.primary) == null ? void 0 : me.onPrimary, U = r.customFontFamily.dark.primary, C = r.colorSchemes.dark.textColor, x = (pe = (qe = (Ce = (N = r.colorSchemes) == null ? void 0 : N.light) == null ? void 0 : Ce.palette) == null ? void 0 : qe.danger) == null ? void 0 : pe.plainColor, S = r.colorSchemes.dark.textColor, F = On({
+  ), A = r.customRadius.dark.md, m = (re = (te = r.colorSchemes) == null ? void 0 : te.dark) == null ? void 0 : re.surfaceVariant, K = (T = (ne = r.customRadius) == null ? void 0 : ne.light) == null ? void 0 : T.xl, l = (L = (ae = (oe = (ie = r.colorSchemes) == null ? void 0 : ie.light) == null ? void 0 : oe.palette) == null ? void 0 : ae.primary) == null ? void 0 : L.plainColor, y = (me = (ge = (fe = (Ae = r.colorSchemes) == null ? void 0 : Ae.light) == null ? void 0 : fe.palette) == null ? void 0 : ge.primary) == null ? void 0 : me.onPrimary, U = r.customFontFamily.dark.primary, C = r.colorSchemes.dark.textColor, x = (pe = (qe = (Ce = (N = r.colorSchemes) == null ? void 0 : N.light) == null ? void 0 : Ce.palette) == null ? void 0 : qe.danger) == null ? void 0 : pe.plainColor, P = r.colorSchemes.dark.textColor, F = On({
     spacingScale: a,
     mdBorderRadius: A,
     contentBgColor: m,
@@ -5948,10 +5947,10 @@ const rn = (e, n, o) => {
     onPrimaryColor: y,
     fontFamilyPrimary: U,
     darkTextColor: C,
-    isMobile: P,
+    isMobile: S,
     isExtraSmall: u,
     dangerColor: x,
-    textColor: S,
+    textColor: P,
     opacity: "60%"
   }), R = Ze(
     (H, j) => {
@@ -6243,7 +6242,7 @@ const rn = (e, n, o) => {
     ] }) })
   ] });
   return /* @__PURE__ */ t(
-    Mt,
+    Jt,
     {
       entity: { ...e.eventGame, labels: null },
       headline: c("eventGame.headline"),
@@ -6398,7 +6397,7 @@ const rn = (e, n, o) => {
     lineHeight: 1
   }
 }), Jn = (e) => {
-  const [n, o] = Ee.useState(1), { t: a } = Z(), r = J(), c = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : r ? Be : be, P = Se(
+  const [n, o] = Ee.useState(1), { t: a } = Z(), r = J(), c = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : r ? Be : be, S = Pe(
     {
       images: e.eventGame.images,
       imagePlaceholder: c
@@ -6413,7 +6412,7 @@ const rn = (e, n, o) => {
     secondaryColor: g,
     isMobile: r,
     dangerColor: u
-  }), S = Ze(
+  }), P = Ze(
     (v, Y) => {
       e.setPrediction((te) => {
         const re = { ...te }, ne = re.fixtures.find(
@@ -6435,7 +6434,7 @@ const rn = (e, n, o) => {
           ne.prediction,
           re
         );
-        T !== ne.prediction && S(v.id, T);
+        T !== ne.prediction && P(v.id, T);
       }
     }
     n < p ? o(n + 1) : e.play();
@@ -6480,8 +6479,8 @@ const rn = (e, n, o) => {
     /* @__PURE__ */ t(f, { sx: x.stateTitle, children: a("eventGame.states.open.title") }),
     /* @__PURE__ */ t(f, { sx: x.stateDescription, children: a("eventGame.states.open.description") })
   ] }), k = We(() => e.eventGame.fixtures[n - 1], [e.eventGame.fixtures, n]), w = We(() => k ? {
-    onSelectionChange: (v) => S(k.id, v)
-  } : {}, [k == null ? void 0 : k.id, S]), G = () => {
+    onSelectionChange: (v) => P(k.id, v)
+  } : {}, [k == null ? void 0 : k.id, P]), G = () => {
     var Y, te, re, ne, T, ie, oe, ae;
     const v = k;
     if (F)
@@ -6704,11 +6703,11 @@ const rn = (e, n, o) => {
     }
   };
   return /* @__PURE__ */ t(Ue, { brandingBorderColor: null, children: /* @__PURE__ */ t(
-    qt,
+    Et,
     {
       entity: { ...e.eventGame, labels: null },
       headline: a("eventGame.headline"),
-      finalImage: P,
+      finalImage: S,
       brandingLogo: "",
       renderPresentedBy: (v) => /* @__PURE__ */ t(I, {}),
       rulesDisplay: e.rulesDisplay,
@@ -6942,15 +6941,15 @@ const rn = (e, n, o) => {
     lineHeight: 1
   }
 }), Zn = (e) => {
-  const n = de(), { t: o } = Z(), a = J(), r = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : a ? Be : be, c = Se(
+  const n = de(), { t: o } = Z(), a = J(), r = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : a ? Be : be, c = Pe(
     {
       images: e.event.images,
       imagePlaceholder: r
     },
     $.SPLIT
-  ), P = b().palette.danger.plainColor, u = b().textColor, d = b().textColor, g = Q().secondary, A = "60%", m = Q().primary, K = b().surfaceVariant, l = W(), y = X(), U = ke(
+  ), S = b().palette.danger.plainColor, u = b().textColor, d = b().textColor, g = Q().secondary, A = "60%", m = Q().primary, K = b().surfaceVariant, l = W(), y = X(), U = ke(
     $.SPLIT
-  ), { rankings: C, pagination: x, loading: S, goToNextPage: p, goToPreviousPage: F } = at(e.event.id, e.sdk), R = En({
+  ), { rankings: C, pagination: x, loading: P, goToNextPage: p, goToPreviousPage: F } = at(e.event.id, e.sdk), R = En({
     finalImage: c,
     spacingScale: y,
     borderRadius: l,
@@ -6963,7 +6962,7 @@ const rn = (e, n, o) => {
     darkTextColor: n.colorSchemes.dark.textColor,
     imageBackgroundGradient: U,
     isMobile: a,
-    dangerColor: P,
+    dangerColor: S,
     isTabulated: e.showPredictionDetails || !1
   }), z = () => /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(i, { sx: R.questionAreaContent, children: /* @__PURE__ */ s(i, { sx: R.mainContentContainer, children: [
     /* @__PURE__ */ t(
@@ -6973,7 +6972,7 @@ const rn = (e, n, o) => {
         userRanking: e.prediction,
         showHeading: !e.showPredictionDetails,
         isSplitVariant: !0,
-        loading: S
+        loading: P
       }
     ),
     x && (x.hasNextPage || x.hasPreviousPage) && /* @__PURE__ */ t(i, { sx: R.paginationContainer, children: /* @__PURE__ */ t(
@@ -7190,15 +7189,15 @@ const rn = (e, n, o) => {
 }), Nn = (e) => {
   const n = de(), o = X(), { t: a } = Z(), r = J(), c = ke(
     $.OVERLAY
-  ), P = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : r ? Be : be, u = Se(
+  ), S = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : r ? Be : be, u = Pe(
     {
       images: e.eventGame.images,
-      imagePlaceholder: P
+      imagePlaceholder: S
     },
     $.OVERLAY
-  ), d = Rt(u), g = n.colorSchemes.dark.textSecondary, A = n.colorSchemes.dark.secondaryContainer, m = n.colorSchemes.dark.textPrimary, K = n.customFontFamily.light.primary, l = n.customRadius.light.md, y = n.customRadius.light.xl, U = n.colorSchemes.dark.surfaceVariant, C = e.eventGame.status === "OPEN" && e.prediction && e.onPredictionUpdate, x = (h) => {
+  ), d = vt(u), g = n.colorSchemes.dark.textSecondary, A = n.colorSchemes.dark.secondaryContainer, m = n.colorSchemes.dark.textPrimary, K = n.customFontFamily.light.primary, l = n.customRadius.light.md, y = n.customRadius.light.xl, U = n.colorSchemes.dark.surfaceVariant, C = e.eventGame.status === "OPEN" && e.prediction && e.onPredictionUpdate, x = (h) => {
     console.log(`Edit prediction for fixture at index: ${h}`);
-  }, S = Yn({
+  }, P = Yn({
     spacingScale: o,
     textPrimary: m,
     fontFamilyPrimary: K,
@@ -7236,7 +7235,7 @@ const rn = (e, n, o) => {
     lineHeight: "24px",
     letterSpacing: "0.40px",
     textTransform: "uppercase"
-  }, z = () => /* @__PURE__ */ s(i, { sx: S.mainContentWrapper, children: [
+  }, z = () => /* @__PURE__ */ s(i, { sx: P.mainContentWrapper, children: [
     e.isUnauthorized ? /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
       tt,
       {
@@ -7244,7 +7243,7 @@ const rn = (e, n, o) => {
         title: a("common.authentication.accessRequired"),
         message: a("common.authentication.invalidOrMissingAuth")
       }
-    ) }) : /* @__PURE__ */ t(i, { sx: S.resultsContainer, children: /* @__PURE__ */ t(i, { sx: S.resultsWrapper, children: C ? /* @__PURE__ */ t(
+    ) }) : /* @__PURE__ */ t(i, { sx: P.resultsContainer, children: /* @__PURE__ */ t(i, { sx: P.resultsWrapper, children: C ? /* @__PURE__ */ t(
       ze,
       {
         fixtures: e.eventGame.fixtures,
@@ -7315,7 +7314,7 @@ const rn = (e, n, o) => {
       case V.FREE_INPUT:
         return null;
     }
-  }, o = new Lt();
+  }, o = new Zt();
   return o.fixtures = e.map((a) => ({
     id: a.id,
     predictionType: a.outcomeType,
@@ -7329,7 +7328,7 @@ const Ln = (e) => {
   const { t: n } = Z(), { game: o, points: a } = rn(e.entityId, e.sdk, e.showPoints), {
     myPrediction: r,
     setMyPrediction: c,
-    isApiError: P,
+    isApiError: S,
     setIsApiError: u,
     isUnauthorized: d,
     setIsUnauthorized: g
@@ -7350,7 +7349,7 @@ const Ln = (e) => {
     });
   }, x = () => {
     U((z) => ({ ...z, open: !1 }));
-  }, S = (z) => {
+  }, P = (z) => {
     z.success ? C(
       "success",
       n("eventGame.alerts.play.success.title"),
@@ -7370,14 +7369,14 @@ const Ln = (e) => {
   const p = () => {
     u(!1), g(!1);
   };
-  if (d || P)
+  if (d || S)
     return Ge(e) ? /* @__PURE__ */ t(
       qn,
       {
         eventGame: o,
         imagePosition: e.imagePosition,
         defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
-        isApiError: P,
+        isApiError: S,
         toggleTryAgain: p
       }
     ) : e.template === $.OVERLAY ? /* @__PURE__ */ t(
@@ -7385,7 +7384,7 @@ const Ln = (e) => {
       {
         eventGame: o,
         defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
-        isApiError: P,
+        isApiError: S,
         toggleTryAgain: p
       }
     ) : /* @__PURE__ */ t(
@@ -7393,7 +7392,7 @@ const Ln = (e) => {
       {
         eventGame: o,
         defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
-        isApiError: P,
+        isApiError: S,
         toggleTryAgain: p
       }
     );
@@ -7532,7 +7531,7 @@ const Ln = (e) => {
         prediction: r,
         onPredictionUpdate: l,
         play: F,
-        onPlayResult: S,
+        onPlayResult: P,
         additionalCTA: e.additionalCTA,
         rulesDisplay: e.rulesDisplay
       }
@@ -7557,7 +7556,7 @@ const Ln = (e) => {
         prediction: r,
         onPredictionUpdate: l,
         play: F,
-        onPlayResult: S,
+        onPlayResult: P,
         additionalCTA: e.additionalCTA,
         rulesDisplay: e.rulesDisplay
       }
@@ -7581,7 +7580,7 @@ const Ln = (e) => {
         prediction: r,
         onPredictionUpdate: l,
         play: F,
-        onPlayResult: S,
+        onPlayResult: P,
         additionalCTA: e.additionalCTA,
         rulesDisplay: e.rulesDisplay
       }
@@ -7591,7 +7590,7 @@ const Ln = (e) => {
     R(),
     /* @__PURE__ */ t(Oe, { notification: y, onClose: x })
   ] });
-}, $n = (e) => /* @__PURE__ */ t(Tt, { packageName: "event-game-play", ...e, children: /* @__PURE__ */ t(Ln, { ...e }) }), ri = $n;
+}, $n = (e) => /* @__PURE__ */ t(Vt, { packageName: "event-game-play", ...e, children: /* @__PURE__ */ t(Ln, { ...e }) }), li = $n;
 export {
-  ri as EventGamePlay
+  li as EventGamePlay
 };