fansunited-frontend-components 0.0.92 → 0.0.93

package/ChanceGame.js

@@ -1,24 +1,17 @@
 import { jsx as t, jsxs as w, Fragment as re } from "react/jsx-runtime";
-import { h as Ce, g as Ke, l as Je } from "./chunks/helpers-CKFwVhwj.js";
-import Z, { useState as qe, useEffect as Qe } from "react";
-import { i as J, k as Ze, f as ve, g as le, h as Se, B as d, a as se, u as we, d as xe, n as Te, c as $e, l as et, o as tt, p as ot, q as nt, r as rt, C as it, s as lt, E as at, t as st, w as ct } from "./chunks/PrizeCard-B2tBhY45.js";
-import { C as ue, W as fe, a as ne } from "./chunks/enums-B1lTCQvC.js";
-import { S as dt } from "./chunks/Spinner-_5U881sC.js";
-import { createPortal as mt } from "react-dom";
-import { u as ut } from "./chunks/useInfoPage-BHdgKdme.js";
-import { N as ht } from "./chunks/NotFoundSkeleton-BHRVG8yg.js";
-import { u as xt, S as ie, c as Ae, D as Ie, C as ft, W as pt, a as gt, b as yt, d as bt, O as vt, F as St, P as be, e as wt, f as kt } from "./chunks/PickOneOfX-D9qlxKTD.js";
-import { S as Ee, O as Ge } from "./chunks/OverlaySkeleton-y02LRXZy.js";
-import { u as pe } from "./chunks/useImageVariant-B62O7iLC.js";
-import { T as B } from "./chunks/Typography-BsucZNXl.js";
-import { B as he } from "./chunks/Button-x1sQVMH2.js";
-import { d as He, a as Me } from "./chunks/index-Bg5jypgn.js";
+import { isMobile as J, isLarge as Ke, useCornerRadius as ve, useColors as ie, useBorderSize as Se, NotFoundSkeleton as Je, ChanceGameTemplate as ue, useFontFamily as we, useSpacingScale as xe, hexToRgb as Ce, useCurrentThemeMode as Te, useImageVariant as fe, WidgetTemplate as pe, StandardSkeleton as $e, useInternalTheme as Ae, OverlaySkeleton as Ie, defaultBgVertical as Ge, defaultBg as Ee, isTablet as qe, getBrandingClickUrl as Qe, useInfoPage as Ze, initializeI18n as et, Spinner as tt, ChanceGameVariant as ne, languageToCountryCode as ot, getLanguageDirection as nt, applyDirectionToMount as rt, widgetCacheKey as lt, createWidgetCache as it, ContainerProvider as at, ThemeProvider as st, ConstantsProvider as ct } from "fansunited-frontend-core";
+import Z, { useState as dt, useEffect as mt } from "react";
+import { useTranslation as se } from "react-i18next";
+import { Box as d, Typography as B, Button as he } from "@mui/joy";
+import { u as ut, S as le, c as He, D as Me, C as ht, W as xt, a as ft, b as pt, d as gt, O as yt, F as bt, P as be, e as vt, f as St } from "./chunks/PickOneOfX-a6Dv0-rR.js";
+import { CacheProvider as wt } from "@emotion/react";
+import { createPortal as kt } from "react-dom";
 const ke = ({
   children: e,
   brandingBorderColor: c,
   state: a
 }) => {
-  const n = J(), g = Ze(), o = a === "play" ? g : n, u = ve().md, i = c || le().secondaryContainer, s = Se().size + " solid " + i;
+  const n = J(), g = Ke(), o = a === "play" ? g : n, u = ve().md, l = c || ie().secondaryContainer, s = Se().size + " solid " + l;
   return /* @__PURE__ */ t(
     d,
     {
@@ -30,7 +23,7 @@ const ke = ({
         boxShadow: "md",
         border: s,
         overflow: "hidden",
-        background: le().surface,
+        background: ie().surface,
         minHeight: "250px"
       },
       children: e
@@ -40,14 +33,14 @@ const ke = ({
   template: e
 }) => {
   const { t: c } = se(), a = /* @__PURE__ */ t(
-    ht,
+    Je,
     {
       notFoundTitle: c("chanceGame.chanceGameNotFound"),
       notFoundMessage: c("chanceGame.chanceGameNotFoundDescription")
     }
   );
   return e === ue.EMBED ? a : /* @__PURE__ */ t(ke, { brandingBorderColor: null, children: a });
-}, Ne = ({
+}, Ve = ({
   infoPage: e,
   enableReset: c = !1,
   contentColor: a,
@@ -55,14 +48,14 @@ const ke = ({
   secondaryColor: g,
   onPrimaryColor: o,
   backgroundColor: u,
-  dangerColor: i,
+  dangerColor: l,
   brandingLogo: r,
   isDark: s = !1,
   showTitleBlock: k = !1,
   variant: z
 }) => {
-  var G, q, N;
-  const x = J(), b = le(), p = ve(), l = we(), m = xe(), O = Se(), v = z === "standard", h = z === "overlay", C = v || h, E = JSON.parse(e.body), V = E.segments || [], f = e.labels || {}, L = E.mode || ((G = E.config) == null ? void 0 : G.mode) || "fair", H = ((q = E.config) == null ? void 0 : q.pace) || "normal", _ = ((N = E.config) == null ? void 0 : N.decorations) ?? !1, D = Ae(n, s), {
+  var E, q, V;
+  const x = J(), b = ie(), p = ve(), i = we(), m = xe(), O = Se(), v = z === "standard", h = z === "overlay", C = v || h, G = JSON.parse(e.body), L = G.segments || [], f = e.labels || {}, N = G.mode || ((E = G.config) == null ? void 0 : E.mode) || "fair", H = ((q = G.config) == null ? void 0 : q.pace) || "normal", _ = ((V = G.config) == null ? void 0 : V.decorations) ?? !1, D = He(n, s), {
     isSpinning: T,
     finalRotation: M,
     selectedSegment: y,
@@ -78,9 +71,9 @@ const ke = ({
     handleSpin: I,
     handleReset: S,
     onConfettiComplete: ee
-  } = xt({ segments: V, mode: L, pace: H }), te = C ? x ? "260px" : "340px" : x ? "320px" : "450px", Y = () => /* @__PURE__ */ w(re, { children: [
+  } = ut({ segments: L, mode: N, pace: H }), te = C ? x ? "260px" : "340px" : x ? "320px" : "450px", Y = () => /* @__PURE__ */ w(re, { children: [
     _ && /* @__PURE__ */ t(
-      Ie,
+      Me,
       {
         primaryColor: n,
         isDark: s,
@@ -88,7 +81,7 @@ const ke = ({
       }
     ),
     /* @__PURE__ */ t(
-      ft,
+      ht,
       {
         active: W,
         primaryColor: n,
@@ -98,7 +91,7 @@ const ke = ({
       }
     ),
     F && (y == null ? void 0 : y.results) && /* @__PURE__ */ t(
-      ie,
+      le,
       {
         result: y.results,
         variant: z || "embed",
@@ -131,7 +124,7 @@ const ke = ({
                 {
                   level: "h2",
                   sx: {
-                    fontFamily: l.primary,
+                    fontFamily: i.primary,
                     fontWeight: 700,
                     fontSize: x ? "1.5rem" : "2rem",
                     color: a,
@@ -193,7 +186,7 @@ const ke = ({
               {
                 level: "body-md",
                 sx: {
-                  fontFamily: l.secondary,
+                  fontFamily: i.secondary,
                   fontWeight: 400,
                   fontSize: x ? "0.875rem" : "1rem",
                   color: a,
@@ -211,7 +204,7 @@ const ke = ({
           {
             level: "body-md",
             sx: {
-              fontFamily: l.primary,
+              fontFamily: i.primary,
               fontWeight: 400,
               fontSize: x ? "0.875rem" : "1rem",
               color: a,
@@ -227,7 +220,7 @@ const ke = ({
           {
             level: v ? "body-sm" : "body-md",
             sx: {
-              fontFamily: l.secondary,
+              fontFamily: i.secondary,
               fontWeight: 400,
               fontSize: x ? "0.875rem" : "1rem",
               color: a,
@@ -274,17 +267,17 @@ const ke = ({
           },
           children: [
             /* @__PURE__ */ t(
-              pt,
+              xt,
               {
-                segmentCount: V.length,
+                segmentCount: L.length,
                 decorations: _,
                 primaryColor: n
               }
             ),
             /* @__PURE__ */ t(
-              gt,
+              ft,
               {
-                segments: V,
+                segments: L,
                 secondaryColor: g,
                 primaryColor: n,
                 onPrimaryColor: o,
@@ -317,10 +310,10 @@ const ke = ({
               }
             ),
             /* @__PURE__ */ t(
-              yt,
+              pt,
               {
                 primaryColor: n,
-                dangerColor: i,
+                dangerColor: l,
                 decorations: _
               }
             )
@@ -332,7 +325,7 @@ const ke = ({
         {
           level: "body-sm",
           sx: {
-            fontFamily: l.secondary,
+            fontFamily: i.secondary,
             fontWeight: 400,
             fontSize: x ? "0.875rem" : "1rem",
             color: a,
@@ -345,7 +338,7 @@ const ke = ({
         }
       ),
       !v && R && (y == null ? void 0 : y.results) && /* @__PURE__ */ t(
-        ie,
+        le,
         {
           result: y.results,
           variant: "embed",
@@ -376,7 +369,7 @@ const ke = ({
             color: o,
             fontSize: C ? x ? "0.75rem" : "0.875rem" : x ? "1rem" : "1.125rem",
             fontWeight: 700,
-            fontFamily: l.primary,
+            fontFamily: i.primary,
             textTransform: "uppercase",
             letterSpacing: "0.5px",
             minWidth: C ? void 0 : x ? "200px" : "250px",
@@ -441,7 +434,7 @@ const ke = ({
             color: a,
             fontSize: x ? "0.75rem" : "0.875rem",
             fontWeight: 700,
-            fontFamily: l.primary,
+            fontFamily: i.primary,
             textTransform: "uppercase",
             zIndex: 1,
             "&:hover": {
@@ -477,7 +470,7 @@ const ke = ({
             {
               level: "body-md",
               sx: {
-                fontFamily: l.primary,
+                fontFamily: i.primary,
                 fontWeight: 400,
                 fontSize: x ? "0.875rem" : "1rem",
                 color: a,
@@ -530,7 +523,7 @@ const ke = ({
                       }
                     ),
                     R && (y == null ? void 0 : y.results) && /* @__PURE__ */ t(
-                      ie,
+                      le,
                       {
                         result: y.results,
                         variant: "standard",
@@ -557,7 +550,7 @@ const ke = ({
                             {
                               level: "body-sm",
                               sx: {
-                                fontFamily: l.secondary,
+                                fontFamily: i.secondary,
                                 fontWeight: 400,
                                 fontSize: x ? "0.625rem" : "0.75rem",
                                 color: a,
@@ -623,7 +616,7 @@ const ke = ({
               {
                 level: "body-sm",
                 sx: {
-                  fontFamily: l.secondary,
+                  fontFamily: i.secondary,
                   fontWeight: 400,
                   fontSize: x ? "0.625rem" : "0.75rem",
                   color: a,
@@ -647,15 +640,15 @@ const ke = ({
   defaultImagePlaceholderUrl: n
 }) => {
   var m, O;
-  const { t: g } = se(), o = J(), u = le(), i = Te() === "dark", r = pe(
+  const { t: g } = se(), o = J(), u = ie(), l = Te() === "dark", r = fe(
     {
       images: e.images,
       imagePlaceholder: n || ""
     },
-    fe.STANDARD
-  ), s = (m = e.branding) == null ? void 0 : m.colors, k = (s == null ? void 0 : s.primary_color) || u.palette.primary.plainColor, z = (s == null ? void 0 : s.secondary_color) || u.palette.danger.plainColor, x = (s == null ? void 0 : s.border_color) || null, b = (s == null ? void 0 : s.background_color) || u.surfaceVariant || "", p = (O = e.branding) == null ? void 0 : O.images, l = o ? (p == null ? void 0 : p.mobile_logo) || (p == null ? void 0 : p.main_logo) || "" : (p == null ? void 0 : p.main_logo) || "";
+    pe.STANDARD
+  ), s = (m = e.branding) == null ? void 0 : m.colors, k = (s == null ? void 0 : s.primary_color) || u.palette.primary.plainColor, z = (s == null ? void 0 : s.secondary_color) || u.palette.danger.plainColor, x = (s == null ? void 0 : s.border_color) || null, b = (s == null ? void 0 : s.background_color) || u.surfaceVariant || "", p = (O = e.branding) == null ? void 0 : O.images, i = o ? (p == null ? void 0 : p.mobile_logo) || (p == null ? void 0 : p.main_logo) || "" : (p == null ? void 0 : p.main_logo) || "";
   return /* @__PURE__ */ t(ke, { brandingBorderColor: x, children: /* @__PURE__ */ t(
-    Ee,
+    $e,
     {
       entity: {
         ...e,
@@ -667,7 +660,7 @@ const ke = ({
       finalImage: r,
       imagePosition: a,
       children: /* @__PURE__ */ t(
-        Ne,
+        Ve,
         {
           infoPage: e,
           enableReset: c,
@@ -679,15 +672,15 @@ const ke = ({
           backgroundColor: b,
           dangerColor: u.palette.danger.plainColor,
           shimmerColor: k,
-          brandingLogo: l,
-          isDark: i,
+          brandingLogo: i,
+          isDark: l,
           showTitleBlock: !1,
           variant: "standard"
         }
       )
     }
   ) });
-}, Ve = ({
+}, Le = ({
   infoPage: e,
   enableReset: c = !1,
   contentColor: a,
@@ -695,7 +688,7 @@ const ke = ({
   onPrimaryColor: g,
   borderColor: o,
   backgroundColor: u,
-  dangerColor: i,
+  dangerColor: l,
   cardBaseColor: r,
   shimmerColor: s,
   brandingLogo: k = "",
@@ -705,7 +698,7 @@ const ke = ({
   compactCards: p = !1
 }) => {
   var Fe, We, _e, Oe;
-  const l = J(), m = le(), O = ve(), v = we(), h = xe(), C = Se(), E = r || u, V = s || n, f = b === "standard", L = b === "overlay", H = f ? Ce(u) : "", _ = H ? H.replace(/[^\d,]/g, "") : "", D = p ? l ? 80 : 110 : l ? 100 : 140, T = p ? l ? 104 : 143 : l ? 130 : 180, M = p ? l ? 90 : 130 : l ? 120 : 180, y = p ? l ? "16px" : "32px" : l ? "24px" : "48px", X = p ? l ? "12px" : "32px" : l ? "16px" : "48px", F = Ae(n, z), R = JSON.parse(e.body), $ = R.segments || [], W = e.labels || {}, P = R.mode || ((Fe = R.config) == null ? void 0 : Fe.mode) || "fair", U = ((We = R.config) == null ? void 0 : We.pace) || "normal", j = ((_e = R.config) == null ? void 0 : _e.revealAll) ?? !1, A = ((Oe = R.config) == null ? void 0 : Oe.decorations) ?? !1, I = $.some((ae) => {
+  const i = J(), m = ie(), O = ve(), v = we(), h = xe(), C = Se(), G = r || u, L = s || n, f = b === "standard", N = b === "overlay", H = f ? Ce(u) : "", _ = H ? H.replace(/[^\d,]/g, "") : "", D = p ? i ? 80 : 110 : i ? 100 : 140, T = p ? i ? 104 : 143 : i ? 130 : 180, M = p ? i ? 90 : 130 : i ? 120 : 180, y = p ? i ? "16px" : "32px" : i ? "24px" : "48px", X = p ? i ? "12px" : "32px" : i ? "16px" : "48px", F = He(n, z), R = JSON.parse(e.body), $ = R.segments || [], W = e.labels || {}, P = R.mode || ((Fe = R.config) == null ? void 0 : Fe.mode) || "fair", U = ((We = R.config) == null ? void 0 : We.pace) || "normal", j = ((_e = R.config) == null ? void 0 : _e.revealAll) ?? !1, A = ((Oe = R.config) == null ? void 0 : Oe.decorations) ?? !1, I = $.some((ae) => {
     var K;
     return (K = ae.images) == null ? void 0 : K.idle;
   }), {
@@ -713,9 +706,9 @@ const ke = ({
     displaySegments: ee,
     revealResult: te,
     showResultScreen: Y,
-    showInlineResult: G,
+    showInlineResult: E,
     showLoseAnimation: q,
-    hasEntered: N,
+    hasEntered: V,
     flippedCards: Q,
     crossfadedCards: oe,
     revealedOtherCards: ce,
@@ -724,9 +717,9 @@ const ke = ({
     loseAnimationDuration: Ue,
     handlePick: Re,
     handleReset: ge
-  } = bt({ segments: $, mode: P, pace: U, revealAll: j }), ze = () => /* @__PURE__ */ w(re, { children: [
+  } = gt({ segments: $, mode: P, pace: U, revealAll: j }), ze = () => /* @__PURE__ */ w(re, { children: [
     A && /* @__PURE__ */ t(
-      Ie,
+      Me,
       {
         primaryColor: n,
         isDark: z,
@@ -734,7 +727,7 @@ const ke = ({
       }
     ),
     Y && (S == null ? void 0 : S.results) && /* @__PURE__ */ t(
-      ie,
+      le,
       {
         result: S.results,
         variant: b || "embed",
@@ -768,7 +761,7 @@ const ke = ({
                 sx: {
                   fontFamily: v.primary,
                   fontWeight: 700,
-                  fontSize: l ? "1.5rem" : "2rem",
+                  fontSize: i ? "1.5rem" : "2rem",
                   color: a,
                   lineHeight: 1.2,
                   textShadow: A ? `0 0 20px ${n}20` : "none"
@@ -784,7 +777,7 @@ const ke = ({
                   alignItems: "center",
                   gap: h.sm,
                   mt: h.xs,
-                  width: l ? "60%" : "40%"
+                  width: i ? "60%" : "40%"
                 },
                 children: [
                   /* @__PURE__ */ t(
@@ -829,7 +822,7 @@ const ke = ({
                 sx: {
                   fontFamily: v.secondary,
                   fontWeight: 400,
-                  fontSize: l ? "0.875rem" : "1rem",
+                  fontSize: i ? "0.875rem" : "1rem",
                   color: a,
                   opacity: 0.8
                 },
@@ -847,22 +840,22 @@ const ke = ({
             sx: {
               fontFamily: v.primary,
               fontWeight: 400,
-              fontSize: l ? "0.875rem" : "1rem",
+              fontSize: i ? "0.875rem" : "1rem",
               color: a,
               textAlign: "center",
-              mb: L ? 0 : h.md
+              mb: N ? 0 : h.md
             },
             children: W.welcome
           }
         ),
-        W.instructions && !G && /* @__PURE__ */ t(
+        W.instructions && !E && /* @__PURE__ */ t(
           B,
           {
             level: f ? "body-sm" : "body-md",
             sx: {
               fontFamily: v.secondary,
               fontWeight: 400,
-              fontSize: l ? "0.875rem" : "1rem",
+              fontSize: i ? "0.875rem" : "1rem",
               color: a,
               textAlign: "center",
               opacity: 0.7,
@@ -879,7 +872,7 @@ const ke = ({
             display: "flex",
             alignItems: "center",
             gap: h.sm,
-            width: l ? "40%" : "25%",
+            width: i ? "40%" : "25%",
             my: h.xs
           },
           children: [
@@ -942,12 +935,12 @@ const ke = ({
                   justifyContent: "center",
                   alignItems: "center",
                   // Staggered deal-in entrance
-                  opacity: N ? 1 : 0,
-                  transform: N ? "translateY(0) scale(1) rotateX(0deg)" : "translateY(30px) scale(0.9) rotateX(10deg)",
+                  opacity: V ? 1 : 0,
+                  transform: V ? "translateY(0) scale(1) rotateX(0deg)" : "translateY(30px) scale(0.9) rotateX(10deg)",
                   transition: `all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) ${K * 100}ms`
                 },
                 children: I ? /* @__PURE__ */ t(
-                  vt,
+                  yt,
                   {
                     segment: ae,
                     index: K,
@@ -957,16 +950,16 @@ const ke = ({
                     isOtherRevealed: me,
                     shouldDim: Ye,
                     isRevealed: de,
-                    hasEntered: N,
+                    hasEntered: V,
                     objectSize: M,
                     crossfadeDuration: Pe,
                     isStandard: f,
                     primaryColor: n,
-                    dangerColor: i,
+                    dangerColor: l,
                     onPick: () => Re(K, !0)
                   }
                 ) : /* @__PURE__ */ t(
-                  St,
+                  bt,
                   {
                     segment: ae,
                     index: K,
@@ -976,16 +969,16 @@ const ke = ({
                     shouldDim: je,
                     isRevealed: de,
                     showLoseAnimation: q,
-                    hasEntered: N,
+                    hasEntered: V,
                     cardWidth: D,
                     cardHeight: T,
                     flipDuration: Xe,
                     loseAnimationDuration: Ue,
-                    cardBaseColor: E,
-                    shimmerColor: V,
+                    cardBaseColor: G,
+                    shimmerColor: L,
                     primaryColor: n,
                     contentColor: a,
-                    dangerColor: i,
+                    dangerColor: l,
                     borderColor: o,
                     brandingLogo: k,
                     compactCards: p,
@@ -998,8 +991,8 @@ const ke = ({
           })
         }
       ),
-      !f && G && (S == null ? void 0 : S.results) && /* @__PURE__ */ t(
-        ie,
+      !f && E && (S == null ? void 0 : S.results) && /* @__PURE__ */ t(
+        le,
         {
           result: S.results,
           variant: "embed",
@@ -1011,7 +1004,7 @@ const ke = ({
           showResetButton: !1
         }
       ),
-      !f && c && G && /* @__PURE__ */ t(
+      !f && c && E && /* @__PURE__ */ t(
         he,
         {
           onClick: ge,
@@ -1022,12 +1015,12 @@ const ke = ({
             py: h.sm,
             fontFamily: v.secondary,
             fontWeight: 600,
-            fontSize: l ? "0.875rem" : "1rem",
+            fontSize: i ? "0.875rem" : "1rem",
             textTransform: "uppercase",
             borderRadius: O.md,
             borderColor: o || m.outlineEnabledBorder,
             color: a,
-            minWidth: l ? "150px" : "180px",
+            minWidth: i ? "150px" : "180px",
             "&:hover": {
               borderColor: n,
               bgcolor: "transparent",
@@ -1037,7 +1030,7 @@ const ke = ({
           children: "Reset Game"
         }
       ),
-      f && c && G && /* @__PURE__ */ t(
+      f && c && E && /* @__PURE__ */ t(
         he,
         {
           onClick: ge,
@@ -1048,7 +1041,7 @@ const ke = ({
             px: h.lg,
             borderColor: m.outlineEnabledBorder,
             color: a,
-            fontSize: l ? "0.75rem" : "0.875rem",
+            fontSize: i ? "0.75rem" : "0.875rem",
             fontWeight: 700,
             fontFamily: v.primary,
             textTransform: "uppercase",
@@ -1085,7 +1078,7 @@ const ke = ({
             sx: {
               fontFamily: v.primary,
               fontWeight: 400,
-              fontSize: l ? "0.875rem" : "1rem",
+              fontSize: i ? "0.875rem" : "1rem",
               color: a,
               textAlign: "center",
               px: h.md
@@ -1109,7 +1102,7 @@ const ke = ({
                 sx: {
                   display: "flex",
                   flexDirection: "column",
-                  gap: l ? h.lg : h.md
+                  gap: i ? h.lg : h.md
                 },
                 children: [
                   /* @__PURE__ */ t(
@@ -1132,8 +1125,8 @@ const ke = ({
                       children: ze()
                     }
                   ),
-                  G && (S == null ? void 0 : S.results) && /* @__PURE__ */ t(
-                    ie,
+                  E && (S == null ? void 0 : S.results) && /* @__PURE__ */ t(
+                    le,
                     {
                       result: S.results,
                       variant: "standard",
@@ -1162,7 +1155,7 @@ const ke = ({
                             sx: {
                               fontFamily: v.secondary,
                               fontWeight: 400,
-                              fontSize: l ? "0.625rem" : "0.75rem",
+                              fontSize: i ? "0.625rem" : "0.75rem",
                               color: a,
                               opacity: 0.7,
                               textAlign: "center",
@@ -1218,16 +1211,16 @@ const ke = ({
   imagePosition: a = "left",
   defaultImagePlaceholderUrl: n
 }) => {
-  var l, m, O;
-  const { t: g } = se(), o = J(), u = le(), i = Te() === "dark", r = pe(
+  var i, m, O;
+  const { t: g } = se(), o = J(), u = ie(), l = Te() === "dark", r = fe(
     {
       images: e.images,
       imagePlaceholder: n || ""
     },
-    fe.STANDARD
-  ), s = (l = e.branding) == null ? void 0 : l.colors, k = (s == null ? void 0 : s.primary_color) || u.palette.primary.plainColor, z = (s == null ? void 0 : s.border_color) || null, x = (s == null ? void 0 : s.background_color) || u.surfaceVariant || "", b = (m = e.branding) == null ? void 0 : m.images, p = o ? (b == null ? void 0 : b.mobile_logo) || (b == null ? void 0 : b.main_logo) || "" : (b == null ? void 0 : b.main_logo) || "";
+    pe.STANDARD
+  ), s = (i = e.branding) == null ? void 0 : i.colors, k = (s == null ? void 0 : s.primary_color) || u.palette.primary.plainColor, z = (s == null ? void 0 : s.border_color) || null, x = (s == null ? void 0 : s.background_color) || u.surfaceVariant || "", b = (m = e.branding) == null ? void 0 : m.images, p = o ? (b == null ? void 0 : b.mobile_logo) || (b == null ? void 0 : b.main_logo) || "" : (b == null ? void 0 : b.main_logo) || "";
   return /* @__PURE__ */ t(ke, { brandingBorderColor: z, children: /* @__PURE__ */ t(
-    Ee,
+    $e,
     {
       entity: {
         ...e,
@@ -1241,7 +1234,7 @@ const ke = ({
       finalImage: r,
       imagePosition: a,
       children: /* @__PURE__ */ t(
-        Ve,
+        Le,
         {
           infoPage: e,
           enableReset: c,
@@ -1254,7 +1247,7 @@ const ke = ({
           cardBaseColor: x,
           shimmerColor: k,
           brandingLogo: p,
-          isDark: i,
+          isDark: l,
           showTitleBlock: !1,
           variant: "standard",
           compactCards: !0
@@ -1262,7 +1255,7 @@ const ke = ({
       )
     }
   ) });
-}, Le = (e) => ({
+}, Ne = (e) => ({
   contentContainerWithBackdrop: {
     borderRadius: e.mdBorderRadius,
     display: "flex",
@@ -1310,19 +1303,19 @@ const ke = ({
   enableReset: c = !1,
   defaultImagePlaceholderUrl: a
 }) => {
-  var f, L, H, _, D, T, M, y, X, F, R, $, W, P, U, j, A, I, S;
-  const { t: n } = se(), g = J(), o = $e(), u = xe(), i = ((f = e.branding) == null ? void 0 : f.colors) || null, r = (L = e.branding) == null ? void 0 : L.images, s = g ? (r == null ? void 0 : r.mobile_background_image) || (r == null ? void 0 : r.background_image) || "" : (r == null ? void 0 : r.background_image) || "", k = g ? (r == null ? void 0 : r.mobile_logo) || (r == null ? void 0 : r.main_logo) || "" : (r == null ? void 0 : r.main_logo) || "", z = a || (g ? He : Me), x = s || pe(
+  var f, N, H, _, D, T, M, y, X, F, R, $, W, P, U, j, A, I, S;
+  const { t: n } = se(), g = J(), o = Ae(), u = xe(), l = ((f = e.branding) == null ? void 0 : f.colors) || null, r = (N = e.branding) == null ? void 0 : N.images, s = g ? (r == null ? void 0 : r.mobile_background_image) || (r == null ? void 0 : r.background_image) || "" : (r == null ? void 0 : r.background_image) || "", k = g ? (r == null ? void 0 : r.mobile_logo) || (r == null ? void 0 : r.main_logo) || "" : (r == null ? void 0 : r.main_logo) || "", z = a || (g ? Ge : Ee), x = s || fe(
     {
       images: e.images,
       imagePlaceholder: z
     },
-    fe.OVERLAY
-  ), b = o.colorSchemes.dark.textColor, p = (i == null ? void 0 : i.content_color) || b, l = (i == null ? void 0 : i.primary_color) || ((T = (D = (_ = (H = o.colorSchemes) == null ? void 0 : H.light) == null ? void 0 : _.palette) == null ? void 0 : D.primary) == null ? void 0 : T.plainColor), m = (F = (X = (y = (M = o.colorSchemes) == null ? void 0 : M.light) == null ? void 0 : y.palette) == null ? void 0 : X.primary) == null ? void 0 : F.onPrimary, O = (i == null ? void 0 : i.background_color) || (($ = (R = o.colorSchemes) == null ? void 0 : R.dark) == null ? void 0 : $.surfaceVariant), v = (j = (U = (P = (W = o.colorSchemes) == null ? void 0 : W.light) == null ? void 0 : P.palette) == null ? void 0 : U.danger) == null ? void 0 : j.plainColor, h = o.customFontFamily.dark.primary, C = o.customRadius.dark.md, E = (I = (A = o.customRadius) == null ? void 0 : A.light) == null ? void 0 : I.xl, V = Le({
+    pe.OVERLAY
+  ), b = o.colorSchemes.dark.textColor, p = (l == null ? void 0 : l.content_color) || b, i = (l == null ? void 0 : l.primary_color) || ((T = (D = (_ = (H = o.colorSchemes) == null ? void 0 : H.light) == null ? void 0 : _.palette) == null ? void 0 : D.primary) == null ? void 0 : T.plainColor), m = (F = (X = (y = (M = o.colorSchemes) == null ? void 0 : M.light) == null ? void 0 : y.palette) == null ? void 0 : X.primary) == null ? void 0 : F.onPrimary, O = (l == null ? void 0 : l.background_color) || (($ = (R = o.colorSchemes) == null ? void 0 : R.dark) == null ? void 0 : $.surfaceVariant), v = (j = (U = (P = (W = o.colorSchemes) == null ? void 0 : W.light) == null ? void 0 : P.palette) == null ? void 0 : U.danger) == null ? void 0 : j.plainColor, h = o.customFontFamily.dark.primary, C = o.customRadius.dark.md, G = (I = (A = o.customRadius) == null ? void 0 : A.light) == null ? void 0 : I.xl, L = Ne({
     spacingScale: u,
     mdBorderRadius: C,
     contentBgColor: O,
-    buttonRadius: E,
-    primaryColor: l,
+    buttonRadius: G,
+    primaryColor: i,
     onPrimaryColor: m,
     fontFamilyPrimary: h,
     darkTextColor: b,
@@ -1330,7 +1323,7 @@ const ke = ({
     textColor: p
   });
   return /* @__PURE__ */ t(
-    Ge,
+    Ie,
     {
       entity: {
         ...e,
@@ -1342,18 +1335,18 @@ const ke = ({
         count: ((S = JSON.parse(e.body).segments) == null ? void 0 : S.length) || 0
       }),
       finalImage: x,
-      children: /* @__PURE__ */ t(d, { sx: V.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
-        Ve,
+      children: /* @__PURE__ */ t(d, { sx: L.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
+        Le,
         {
           infoPage: e,
           enableReset: c,
           contentColor: p,
-          primaryColor: l,
+          primaryColor: i,
           onPrimaryColor: m || "#FFFFFF",
           backgroundColor: O,
           dangerColor: v,
           cardBaseColor: O,
-          shimmerColor: l,
+          shimmerColor: i,
           brandingLogo: k,
           isDark: !0,
           showTitleBlock: !1,
@@ -1364,12 +1357,12 @@ const ke = ({
     }
   );
 }, _t = (e) => {
-  const c = we().secondary, a = et(), n = e.isSplitVariant && a, g = J(), o = Ke(e.primaryUrl, e.secondaryUrl, "logo");
+  const c = we().secondary, a = qe(), n = e.isSplitVariant && a, g = J(), o = Qe(e.primaryUrl, e.secondaryUrl, "logo");
   if (!e.brandingLogo)
     return null;
   const u = () => {
     o && window.open(o, "_blank", "noopener,noreferrer");
-  }, i = /* @__PURE__ */ t(
+  }, l = /* @__PURE__ */ t(
     "img",
     {
       src: e.brandingLogo,
@@ -1391,7 +1384,7 @@ const ke = ({
         textDecoration: "none",
         display: "inline-flex"
       },
-      children: i
+      children: l
     }
   ) : /* @__PURE__ */ t(
     d,
@@ -1401,9 +1394,9 @@ const ke = ({
         cursor: "pointer",
         display: "inline-flex"
       },
-      children: i
+      children: l
     }
-  ) : i;
+  ) : l;
   return e.isCentered || n || g ? /* @__PURE__ */ w(
     d,
     {
@@ -1473,19 +1466,19 @@ const ke = ({
   enableReset: c = !1,
   defaultImagePlaceholderUrl: a
 }) => {
-  var L, H, _, D, T, M, y, X, F, R, $, W, P, U, j, A, I, S, ee, te, Y, G, q, N, Q, oe, ce;
-  const { t: n } = se(), g = J(), o = $e(), u = xe(), i = ((L = e.branding) == null ? void 0 : L.colors) || null, r = (H = e.branding) == null ? void 0 : H.images, s = g ? (r == null ? void 0 : r.mobile_background_image) || (r == null ? void 0 : r.background_image) || "" : (r == null ? void 0 : r.background_image) || "", k = g ? (r == null ? void 0 : r.mobile_logo) || (r == null ? void 0 : r.main_logo) || "" : (r == null ? void 0 : r.main_logo) || "", z = a || (g ? He : Me), x = s || pe(
+  var N, H, _, D, T, M, y, X, F, R, $, W, P, U, j, A, I, S, ee, te, Y, E, q, V, Q, oe, ce;
+  const { t: n } = se(), g = J(), o = Ae(), u = xe(), l = ((N = e.branding) == null ? void 0 : N.colors) || null, r = (H = e.branding) == null ? void 0 : H.images, s = g ? (r == null ? void 0 : r.mobile_background_image) || (r == null ? void 0 : r.background_image) || "" : (r == null ? void 0 : r.background_image) || "", k = g ? (r == null ? void 0 : r.mobile_logo) || (r == null ? void 0 : r.main_logo) || "" : (r == null ? void 0 : r.main_logo) || "", z = a || (g ? Ge : Ee), x = s || fe(
     {
       images: e.images,
       imagePlaceholder: z
     },
-    fe.OVERLAY
-  ), b = o.colorSchemes.dark.textColor, p = (i == null ? void 0 : i.content_color) || b, l = (i == null ? void 0 : i.primary_color) || ((M = (T = (D = (_ = o.colorSchemes) == null ? void 0 : _.light) == null ? void 0 : D.palette) == null ? void 0 : T.primary) == null ? void 0 : M.plainColor), m = (i == null ? void 0 : i.secondary_color) || ((R = (F = (X = (y = o.colorSchemes) == null ? void 0 : y.light) == null ? void 0 : X.palette) == null ? void 0 : F.danger) == null ? void 0 : R.plainColor), O = (U = (P = (W = ($ = o.colorSchemes) == null ? void 0 : $.light) == null ? void 0 : W.palette) == null ? void 0 : P.primary) == null ? void 0 : U.onPrimary, v = (i == null ? void 0 : i.background_color) || ((A = (j = o.colorSchemes) == null ? void 0 : j.dark) == null ? void 0 : A.surfaceVariant), h = (te = (ee = (S = (I = o.colorSchemes) == null ? void 0 : I.light) == null ? void 0 : S.palette) == null ? void 0 : ee.danger) == null ? void 0 : te.plainColor, C = o.customFontFamily.dark.primary, E = o.customRadius.dark.md, V = (G = (Y = o.customRadius) == null ? void 0 : Y.light) == null ? void 0 : G.xl, f = Le({
+    pe.OVERLAY
+  ), b = o.colorSchemes.dark.textColor, p = (l == null ? void 0 : l.content_color) || b, i = (l == null ? void 0 : l.primary_color) || ((M = (T = (D = (_ = o.colorSchemes) == null ? void 0 : _.light) == null ? void 0 : D.palette) == null ? void 0 : T.primary) == null ? void 0 : M.plainColor), m = (l == null ? void 0 : l.secondary_color) || ((R = (F = (X = (y = o.colorSchemes) == null ? void 0 : y.light) == null ? void 0 : X.palette) == null ? void 0 : F.danger) == null ? void 0 : R.plainColor), O = (U = (P = (W = ($ = o.colorSchemes) == null ? void 0 : $.light) == null ? void 0 : W.palette) == null ? void 0 : P.primary) == null ? void 0 : U.onPrimary, v = (l == null ? void 0 : l.background_color) || ((A = (j = o.colorSchemes) == null ? void 0 : j.dark) == null ? void 0 : A.surfaceVariant), h = (te = (ee = (S = (I = o.colorSchemes) == null ? void 0 : I.light) == null ? void 0 : S.palette) == null ? void 0 : ee.danger) == null ? void 0 : te.plainColor, C = o.customFontFamily.dark.primary, G = o.customRadius.dark.md, L = (E = (Y = o.customRadius) == null ? void 0 : Y.light) == null ? void 0 : E.xl, f = Ne({
     spacingScale: u,
-    mdBorderRadius: E,
+    mdBorderRadius: G,
     contentBgColor: v,
-    buttonRadius: V,
-    primaryColor: l,
+    buttonRadius: L,
+    primaryColor: i,
     onPrimaryColor: O,
     fontFamilyPrimary: C,
     darkTextColor: b,
@@ -1493,7 +1486,7 @@ const ke = ({
     textColor: p
   });
   return /* @__PURE__ */ w(
-    Ge,
+    Ie,
     {
       entity: {
         ...e,
@@ -1505,17 +1498,17 @@ const ke = ({
       finalImage: x,
       children: [
         /* @__PURE__ */ t(d, { sx: f.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
-          Ne,
+          Ve,
           {
             infoPage: e,
             enableReset: c,
             contentColor: p,
-            primaryColor: l,
+            primaryColor: i,
             secondaryColor: m,
             onPrimaryColor: O || "#FFFFFF",
             backgroundColor: v,
             dangerColor: h,
-            shimmerColor: l,
+            shimmerColor: i,
             brandingLogo: k,
             isDark: !0,
             showTitleBlock: !1,
@@ -1528,7 +1521,7 @@ const ke = ({
             brandingLogo: k,
             textColor: b,
             label: ((q = e.labels) == null ? void 0 : q.sponsor) || null,
-            primaryUrl: (Q = (N = e.branding) == null ? void 0 : N.urls) == null ? void 0 : Q.primary_url,
+            primaryUrl: (Q = (V = e.branding) == null ? void 0 : V.urls) == null ? void 0 : Q.primary_url,
             secondaryUrl: (ce = (oe = e.branding) == null ? void 0 : oe.urls) == null ? void 0 : ce.secondary_url
           }
         )
@@ -1536,21 +1529,21 @@ const ke = ({
     }
   );
 }, Dt = (e) => {
-  const { infoPage: c } = ut(e.entityId, "chance-game", e.sdk), a = () => {
+  const { infoPage: c } = Ze(e.entityId, "chance-game", e.sdk), a = () => {
     if (c && c.id !== "not-found") {
-      const o = Object.keys(Je);
+      const o = Object.keys(ot);
       if (c.language && o.includes(c.language))
         return c.language;
       if (c.language)
         return "en";
     }
     return e.language || "en";
-  }, [n, g] = qe(!1);
-  if (Qe(() => {
+  }, [n, g] = dt(!1);
+  if (mt(() => {
     const o = a();
-    tt(o).then(() => g(!0));
+    et(o).then(() => g(!0));
   }, [e.language, c]), !c || !n)
-    return /* @__PURE__ */ t(dt, { my: 20 });
+    return /* @__PURE__ */ t(tt, { my: 20 });
   if (c.id === "not-found")
     return /* @__PURE__ */ t(Rt, { template: e.template });
   if (e.template === ue.STANDARD) {
@@ -1587,19 +1580,19 @@ const ke = ({
       }
     );
   }
-  return e.variant === ne.PENALTY_SHOOTOUT ? /* @__PURE__ */ t(be, { infoPage: c }) : e.variant === ne.PICK_ONE_OF_X ? /* @__PURE__ */ t(wt, { infoPage: c }) : /* @__PURE__ */ t(kt, { infoPage: c });
+  return e.variant === ne.PENALTY_SHOOTOUT ? /* @__PURE__ */ t(be, { infoPage: c }) : e.variant === ne.PICK_ONE_OF_X ? /* @__PURE__ */ t(vt, { infoPage: c }) : /* @__PURE__ */ t(St, { infoPage: c });
 }, Bt = (e) => {
-  const [c, a] = Z.useState(!1), n = ot(e.language), g = Z.useRef(
+  const [c, a] = Z.useState(!1), n = nt(e.language), g = Z.useRef(
     `chance-game-shadow-root-${Math.random().toString(36).substring(2, 11)}`
-  ), o = Z.useRef(null), u = Z.useRef(null), i = Z.useRef(null), [r, s] = Z.useState(null);
+  ), o = Z.useRef(null), u = Z.useRef(null), l = Z.useRef(null), [r, s] = Z.useState(null);
   Z.useEffect(() => {
     if (!o.current) return;
-    o.current.shadowRoot ? (u.current = o.current.shadowRoot, i.current = u.current.getElementById(
+    o.current.shadowRoot ? (u.current = o.current.shadowRoot, l.current = u.current.getElementById(
       g.current
-    ), i.current || (i.current = document.createElement("div"), i.current.id = g.current, u.current.appendChild(i.current))) : (u.current = o.current.attachShadow({ mode: "open" }), i.current = document.createElement("div"), i.current.id = g.current, u.current.appendChild(i.current)), nt(i.current, n);
-    const p = ct("chance-game", n);
+    ), l.current || (l.current = document.createElement("div"), l.current.id = g.current, u.current.appendChild(l.current))) : (u.current = o.current.attachShadow({ mode: "open" }), l.current = document.createElement("div"), l.current.id = g.current, u.current.appendChild(l.current)), rt(l.current, n);
+    const p = lt("chance-game", n);
     return s(
-      (l) => (l == null ? void 0 : l.key) === p ? l : rt(
+      (i) => (i == null ? void 0 : i.key) === p ? i : it(
         "chance-game",
         u.current,
         n
@@ -1611,21 +1604,21 @@ const ke = ({
   const k = e.themeOptions, z = {
     ...k,
     mode: e.template === ue.OVERLAY ? "dark" : k == null ? void 0 : k.mode
-  }, x = /* @__PURE__ */ t(d, { ref: o, lang: e.language || "en" }), b = c && o.current && i.current && r ? mt(
+  }, x = /* @__PURE__ */ t(d, { ref: o, lang: e.language || "en" }), b = c && o.current && l.current && r ? kt(
     // Keyed on the cache, not on `direction`: it must change in the same
     // render that adopts the new cache, or CssVarsProvider writes its CSS
     // variables into the outgoing cache and never repeats.
-    /* @__PURE__ */ t(it, { value: r, children: /* @__PURE__ */ t(lt, { containerRef: o, children: /* @__PURE__ */ t(
-      at,
+    /* @__PURE__ */ t(wt, { value: r, children: /* @__PURE__ */ t(at, { containerRef: o, children: /* @__PURE__ */ t(
+      st,
       {
         customTheme: z,
         mode: z == null ? void 0 : z.mode,
-        shadowRootElement: i.current,
+        shadowRootElement: l.current,
         direction: n,
         children: /* @__PURE__ */ t(
-          st,
+          ct,
           {
-            shadowRootElement: i.current,
+            shadowRootElement: l.current,
             leadPhoneCountryCode: null,
             language: null,
             optionsLayout: null,
@@ -1635,13 +1628,13 @@ const ke = ({
         )
       }
     ) }) }, r.key),
-    i.current
+    l.current
   ) : null;
   return /* @__PURE__ */ w(re, { children: [
     x,
     b
   ] });
-}, Ct = (e) => /* @__PURE__ */ t(Bt, { ...e, children: /* @__PURE__ */ t(Dt, { ...e }) }), Yt = Ct;
+}, Ct = (e) => /* @__PURE__ */ t(Bt, { ...e, children: /* @__PURE__ */ t(Dt, { ...e }) }), Vt = Ct;
 export {
-  Yt as ChanceGame
+  Vt as ChanceGame
 };