fansunited-frontend-components 0.0.70 → 0.0.71

package/ChanceGame.js

@@ -1,121 +1,121 @@
 import { jsx as t, jsxs as w, Fragment as re } from "react/jsx-runtime";
-import { h as Ce, g as Je, l as Ke } from "./chunks/helpers-DM31-5Cj.js";
+import { h as Ce, g as Ke, l as Je } from "./chunks/helpers-DgUDSfd1.js";
 import Z, { useState as qe, useEffect as Qe } from "react";
-import { i as K, h as Ze, c as ve, b as ie, e as Se, B as m, u as se, F as ue, d as we, f as xe, x as Te, W as fe, a as $e, o as et, n as tt, v as ne, y as ot, z as nt, A as rt, E as lt, D as it } from "./chunks/PrizeCard-C1DbXnUz.js";
-import { S as at } from "./chunks/Spinner-BL8WSLzS.js";
-import { createPortal as st } from "react-dom";
-import { u as ct } from "./chunks/useInfoPage-BHdgKdme.js";
-import { N as dt, S as Ae, O as Ie } from "./chunks/NotFoundSkeleton-CU9abuei.js";
-import { u as mt, S as le, c as Ee, D as Ge, C as ut, W as ht, d as xt, e as ft, f as pt, O as gt, F as bt, b as ye, a as yt, P as vt } from "./chunks/PickOneOfX-DW0xvqB_.js";
-import { b as pe, d as He, a as Ne } from "./chunks/useImageVariant-mC1wwdcP.js";
-import { T as D } from "./chunks/Typography-3zKBmCod.js";
-import { B as he } from "./chunks/Button-BR5lrG3T.js";
+import { i as J, h as Ze, c as ve, b as le, e as Se, B as d, u as se, K as ue, d as we, f as xe, z as Te, W as fe, a as $e, p as et, n as tt, x as ne, A as ot, D as nt, E as rt, F as it, G as lt, H as at, I as st, J as ct } from "./chunks/PrizeCard-CyVJJLo1.js";
+import { S as dt } from "./chunks/Spinner-Bb4eb64F.js";
+import { createPortal as mt } from "react-dom";
+import { u as ut } from "./chunks/useInfoPage-BHdgKdme.js";
+import { N as ht, S as Ae, O as Ie } from "./chunks/NotFoundSkeleton-DKxLhOwI.js";
+import { u as xt, S as ie, c as Ee, D as Ge, C as ft, W as pt, d as gt, e as yt, f as bt, O as vt, F as St, b as be, a as wt, P as kt } from "./chunks/PickOneOfX-CG0B5u7Y.js";
+import { b as pe, d as He, a as Me } from "./chunks/useImageVariant-D6aho5sy.js";
+import { T as B } from "./chunks/Typography-B8CtvKkm.js";
+import { B as he } from "./chunks/Button-CO-k2gLb.js";
 const ke = ({
   children: e,
-  brandingBorderColor: s,
+  brandingBorderColor: c,
   state: a
 }) => {
-  const r = K(), x = Ze(), o = a === "play" ? x : r, c = ve().md, d = s || ie().secondaryContainer, l = Se().size + " solid " + d;
+  const n = J(), g = Ze(), o = a === "play" ? g : n, u = ve().md, i = c || le().secondaryContainer, s = Se().size + " solid " + i;
   return /* @__PURE__ */ t(
-    m,
+    d,
     {
       sx: {
         display: "flex",
         flexDirection: o ? "column" : "row",
         width: "100%",
-        borderRadius: c,
+        borderRadius: u,
         boxShadow: "md",
-        border: l,
+        border: s,
         overflow: "hidden",
-        background: ie().surface,
+        background: le().surface,
         minHeight: "250px"
       },
       children: e
     }
   );
-}, St = ({
+}, Rt = ({
   template: e
 }) => {
-  const { t: s } = se(), a = /* @__PURE__ */ t(
-    dt,
+  const { t: c } = se(), a = /* @__PURE__ */ t(
+    ht,
     {
-      notFoundTitle: s("chanceGame.chanceGameNotFound"),
-      notFoundMessage: s("chanceGame.chanceGameNotFoundDescription")
+      notFoundTitle: c("chanceGame.chanceGameNotFound"),
+      notFoundMessage: c("chanceGame.chanceGameNotFoundDescription")
     }
   );
   return e === ue.EMBED ? a : /* @__PURE__ */ t(ke, { brandingBorderColor: null, children: a });
-}, Ve = ({
+}, Ne = ({
   infoPage: e,
-  enableReset: s = !1,
+  enableReset: c = !1,
   contentColor: a,
-  primaryColor: r,
-  secondaryColor: x,
+  primaryColor: n,
+  secondaryColor: g,
   onPrimaryColor: o,
-  backgroundColor: c,
-  dangerColor: d,
-  brandingLogo: n,
-  isDark: l = !1,
-  showTitleBlock: F = !1,
-  variant: O
+  backgroundColor: u,
+  dangerColor: i,
+  brandingLogo: r,
+  isDark: s = !1,
+  showTitleBlock: k = !1,
+  variant: z
 }) => {
-  var G, q, V;
-  const p = K(), S = ie(), g = ve(), i = we(), u = xe(), _ = Se(), y = O === "standard", h = O === "overlay", C = y || h, E = JSON.parse(e.body), M = 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", W = ((V = E.config) == null ? void 0 : V.decorations) ?? !1, B = Ee(r, l), {
+  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 = Ee(n, s), {
     isSpinning: T,
-    finalRotation: N,
-    selectedSegment: b,
+    finalRotation: M,
+    selectedSegment: y,
     showShakeAnimation: X,
-    showResultScreen: R,
-    showInlineResult: k,
+    showResultScreen: F,
+    showInlineResult: R,
     hasEntered: $,
-    confettiActive: z,
+    confettiActive: W,
     spinDuration: P,
     shakeAnimationDuration: U,
     confettiVelocityMultiplier: j,
     confettiGravity: A,
     handleSpin: I,
-    handleReset: v,
+    handleReset: S,
     onConfettiComplete: ee
-  } = mt({ segments: M, mode: L, pace: H }), te = C ? p ? "260px" : "340px" : p ? "320px" : "450px", Y = () => /* @__PURE__ */ w(re, { children: [
-    W && /* @__PURE__ */ t(
+  } = xt({ segments: V, mode: L, pace: H }), te = C ? x ? "260px" : "340px" : x ? "320px" : "450px", Y = () => /* @__PURE__ */ w(re, { children: [
+    _ && /* @__PURE__ */ t(
       Ge,
       {
-        primaryColor: r,
-        isDark: l,
+        primaryColor: n,
+        isDark: s,
         animationPrefix: "wheel"
       }
     ),
     /* @__PURE__ */ t(
-      ut,
+      ft,
       {
-        active: z,
-        primaryColor: r,
+        active: W,
+        primaryColor: n,
         velocityMultiplier: j,
         gravity: A,
         onComplete: ee
       }
     ),
-    R && (b == null ? void 0 : b.results) && /* @__PURE__ */ t(
-      le,
+    F && (y == null ? void 0 : y.results) && /* @__PURE__ */ t(
+      ie,
       {
-        result: b.results,
-        variant: O || "embed",
+        result: y.results,
+        variant: z || "embed",
         mode: "screen",
         contentColor: a,
-        primaryColor: r,
+        primaryColor: n,
         onPrimaryColor: o,
-        disclaimer: y ? void 0 : f.disclaimer,
-        enableReset: s,
-        onReset: v
+        disclaimer: v ? void 0 : f.disclaimer,
+        enableReset: c,
+        onReset: S
       }
     ),
-    !R && /* @__PURE__ */ w(re, { children: [
-      F && (e.title || e.subtitle) && /* @__PURE__ */ w(
-        m,
+    !F && /* @__PURE__ */ w(re, { children: [
+      k && (e.title || e.subtitle) && /* @__PURE__ */ w(
+        d,
         {
           sx: {
             display: "flex",
             flexDirection: "column",
-            gap: u.xs,
+            gap: m.xs,
             alignItems: "center",
             textAlign: "center",
             width: "100%",
@@ -124,60 +124,60 @@ const ke = ({
           children: [
             e.title && /* @__PURE__ */ w(re, { children: [
               /* @__PURE__ */ t(
-                D,
+                B,
                 {
                   level: "h2",
                   sx: {
-                    fontFamily: i.primary,
+                    fontFamily: l.primary,
                     fontWeight: 700,
-                    fontSize: p ? "1.5rem" : "2rem",
+                    fontSize: x ? "1.5rem" : "2rem",
                     color: a,
                     lineHeight: 1.2,
-                    ...W && {
-                      textShadow: `0 0 20px ${B("20")}, 0 0 40px ${B("10")}`
+                    ..._ && {
+                      textShadow: `0 0 20px ${D("20")}, 0 0 40px ${D("10")}`
                     }
                   },
                   children: e.title
                 }
               ),
-              W && /* @__PURE__ */ w(
-                m,
+              _ && /* @__PURE__ */ w(
+                d,
                 {
                   sx: {
                     display: "flex",
                     alignItems: "center",
-                    gap: u.xs,
-                    mt: u["2xs"]
+                    gap: m.xs,
+                    mt: m["2xs"]
                   },
                   children: [
                     /* @__PURE__ */ t(
-                      m,
+                      d,
                       {
                         sx: {
-                          width: p ? "40px" : "60px",
+                          width: x ? "40px" : "60px",
                           height: "1px",
-                          background: `linear-gradient(90deg, transparent, ${B("40")})`
+                          background: `linear-gradient(90deg, transparent, ${D("40")})`
                         }
                       }
                     ),
                     /* @__PURE__ */ t(
-                      m,
+                      d,
                       {
                         sx: {
                           width: "6px",
                           height: "6px",
                           transform: "rotate(45deg)",
-                          background: B("50")
+                          background: D("50")
                         }
                       }
                     ),
                     /* @__PURE__ */ t(
-                      m,
+                      d,
                       {
                         sx: {
-                          width: p ? "40px" : "60px",
+                          width: x ? "40px" : "60px",
                           height: "1px",
-                          background: `linear-gradient(90deg, ${B("40")}, transparent)`
+                          background: `linear-gradient(90deg, ${D("40")}, transparent)`
                         }
                       }
                     )
@@ -186,13 +186,13 @@ const ke = ({
               )
             ] }),
             e.subtitle && /* @__PURE__ */ t(
-              D,
+              B,
               {
                 level: "body-md",
                 sx: {
-                  fontFamily: i.secondary,
+                  fontFamily: l.secondary,
                   fontWeight: 400,
-                  fontSize: p ? "0.875rem" : "1rem",
+                  fontSize: x ? "0.875rem" : "1rem",
                   color: a,
                   opacity: 0.8
                 },
@@ -202,35 +202,35 @@ const ke = ({
           ]
         }
       ),
-      /* @__PURE__ */ w(m, { children: [
-        !y && f.welcome && /* @__PURE__ */ t(
-          D,
+      /* @__PURE__ */ w(d, { children: [
+        !v && f.welcome && /* @__PURE__ */ t(
+          B,
           {
             level: "body-md",
             sx: {
-              fontFamily: i.primary,
+              fontFamily: l.primary,
               fontWeight: 400,
-              fontSize: p ? "0.875rem" : "1rem",
+              fontSize: x ? "0.875rem" : "1rem",
               color: a,
               textAlign: "center",
-              mb: h ? 0 : u.md,
+              mb: h ? 0 : m.md,
               zIndex: 1
             },
             children: f.welcome
           }
         ),
-        (y || h) && !k && f.instructions && /* @__PURE__ */ t(
-          D,
+        (v || h) && !R && f.instructions && /* @__PURE__ */ t(
+          B,
           {
-            level: y ? "body-sm" : "body-md",
+            level: v ? "body-sm" : "body-md",
             sx: {
-              fontFamily: i.secondary,
+              fontFamily: l.secondary,
               fontWeight: 400,
-              fontSize: p ? "0.875rem" : "1rem",
+              fontSize: x ? "0.875rem" : "1rem",
               color: a,
               opacity: 0.7,
               textAlign: "center",
-              maxWidth: y ? "400px" : "600px",
+              maxWidth: v ? "400px" : "600px",
               zIndex: 1
             },
             children: f.instructions
@@ -238,7 +238,7 @@ const ke = ({
         )
       ] }),
       /* @__PURE__ */ w(
-        m,
+        d,
         {
           onClick: I,
           sx: {
@@ -246,11 +246,11 @@ const ke = ({
             width: "100%",
             maxWidth: te,
             aspectRatio: "1",
-            mt: C ? u.md : 0,
+            mt: C ? m.md : 0,
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            cursor: T || z || k || !R && !k && b !== null ? "default" : "pointer",
+            cursor: T || W || R || !F && !R && y !== null ? "default" : "pointer",
             userSelect: "none",
             zIndex: 1,
             // Entrance animation
@@ -265,38 +265,38 @@ const ke = ({
               "20%, 40%, 60%, 80%": { transform: "translateX(8px)" }
             },
             // Wheel glow effect (decorations only)
-            ...W && {
-              filter: `drop-shadow(0 0 ${p ? "15px" : "25px"} ${B("20")}) drop-shadow(0 0 ${p ? "40px" : "60px"} ${B("10")})`
+            ..._ && {
+              filter: `drop-shadow(0 0 ${x ? "15px" : "25px"} ${D("20")}) drop-shadow(0 0 ${x ? "40px" : "60px"} ${D("10")})`
             }
           },
           children: [
             /* @__PURE__ */ t(
-              ht,
+              pt,
               {
-                segmentCount: M.length,
-                decorations: W,
-                primaryColor: r
+                segmentCount: V.length,
+                decorations: _,
+                primaryColor: n
               }
             ),
             /* @__PURE__ */ t(
-              xt,
+              gt,
               {
-                segments: M,
-                secondaryColor: x,
-                primaryColor: r,
+                segments: V,
+                secondaryColor: g,
+                primaryColor: n,
                 onPrimaryColor: o,
-                decorations: W,
-                isStandard: y,
-                rotation: N,
+                decorations: _,
+                isStandard: v,
+                rotation: M,
                 isSpinning: T,
                 spinDuration: P
               }
             ),
-            !y && !h && n && /* @__PURE__ */ t(
-              m,
+            !v && !h && r && /* @__PURE__ */ t(
+              d,
               {
                 component: "img",
-                src: n,
+                src: r,
                 alt: "Logo",
                 sx: {
                   position: "absolute",
@@ -314,24 +314,24 @@ const ke = ({
               }
             ),
             /* @__PURE__ */ t(
-              ft,
+              yt,
               {
-                primaryColor: r,
-                dangerColor: d,
-                decorations: W
+                primaryColor: n,
+                dangerColor: i,
+                decorations: _
               }
             )
           ]
         }
       ),
-      !y && !h && !k && f.instructions && /* @__PURE__ */ t(
-        D,
+      !v && !h && !R && f.instructions && /* @__PURE__ */ t(
+        B,
         {
           level: "body-sm",
           sx: {
-            fontFamily: i.secondary,
+            fontFamily: l.secondary,
             fontWeight: 400,
-            fontSize: p ? "0.875rem" : "1rem",
+            fontSize: x ? "0.875rem" : "1rem",
             color: a,
             opacity: 0.7,
             textAlign: "center",
@@ -341,73 +341,73 @@ const ke = ({
           children: f.instructions
         }
       ),
-      !y && k && (b == null ? void 0 : b.results) && /* @__PURE__ */ t(
-        le,
+      !v && R && (y == null ? void 0 : y.results) && /* @__PURE__ */ t(
+        ie,
         {
-          result: b.results,
+          result: y.results,
           variant: "embed",
           mode: "inline",
           contentColor: a,
-          primaryColor: r,
+          primaryColor: n,
           onPrimaryColor: o,
-          enableReset: s,
-          onReset: v,
+          enableReset: c,
+          onReset: S,
           showResetButton: !0,
           sx: { zIndex: 1 }
         }
       ),
-      f.buttonLabel && !(k && b && !b.isWinning) && /* @__PURE__ */ t(
+      f.buttonLabel && !(R && y && !y.isWinning) && /* @__PURE__ */ t(
         he,
         {
           variant: "soft",
-          disabled: T || z || !R && !k && b !== null,
+          disabled: T || W || !F && !R && y !== null,
           onClick: I,
           sx: {
-            borderRadius: g.xl,
-            py: C ? u.sm : u.md,
-            px: C ? u.lg : u.xl,
-            "--variant-softBg": r,
+            borderRadius: p.xl,
+            py: C ? m.sm : m.md,
+            px: C ? m.lg : m.xl,
+            "--variant-softBg": n,
             "--variant-softColor": o,
-            "--variant-softHoverBg": r,
-            bgcolor: r,
+            "--variant-softHoverBg": n,
+            bgcolor: n,
             color: o,
-            fontSize: C ? p ? "0.75rem" : "0.875rem" : p ? "1rem" : "1.125rem",
+            fontSize: C ? x ? "0.75rem" : "0.875rem" : x ? "1rem" : "1.125rem",
             fontWeight: 700,
-            fontFamily: i.primary,
+            fontFamily: l.primary,
             textTransform: "uppercase",
             letterSpacing: "0.5px",
-            minWidth: C ? void 0 : p ? "200px" : "250px",
+            minWidth: C ? void 0 : x ? "200px" : "250px",
             zIndex: 1,
             transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
             transform: "scale(1)",
-            ...W && {
-              boxShadow: `0 4px 14px 0 ${r}40, 0 0 20px ${r}15`,
-              animation: !T && !b ? "wheelBtnPulse 2.5s ease-in-out infinite" : "none",
+            ..._ && {
+              boxShadow: `0 4px 14px 0 ${n}40, 0 0 20px ${n}15`,
+              animation: !T && !y ? "wheelBtnPulse 2.5s ease-in-out infinite" : "none",
               "@keyframes wheelBtnPulse": {
                 "0%, 100%": {
-                  boxShadow: `0 4px 14px 0 ${r}40, 0 0 20px ${r}15`
+                  boxShadow: `0 4px 14px 0 ${n}40, 0 0 20px ${n}15`
                 },
                 "50%": {
-                  boxShadow: `0 6px 24px 0 ${r}60, 0 0 35px ${r}25`
+                  boxShadow: `0 6px 24px 0 ${n}60, 0 0 35px ${n}25`
                 }
               }
             },
-            ...!W && {
+            ...!_ && {
               boxShadow: "0 4px 14px 0 rgba(0,0,0,0.15)"
             },
             "&:hover": {
-              bgcolor: r,
+              bgcolor: n,
               transform: "scale(1.05)",
-              boxShadow: W ? `0 6px 20px 0 ${r}50, 0 0 30px ${r}20` : "0 6px 20px 0 rgba(0,0,0,0.2)"
+              boxShadow: _ ? `0 6px 20px 0 ${n}50, 0 0 30px ${n}20` : "0 6px 20px 0 rgba(0,0,0,0.2)"
             },
             "&:active": {
               transform: "scale(0.95)",
               color: o
             },
             "&:disabled": {
-              "--variant-softDisabledBg": r,
+              "--variant-softDisabledBg": n,
               "--variant-softDisabledColor": o,
-              bgcolor: r,
+              bgcolor: n,
               color: o,
               opacity: 0.5,
               animation: "none"
@@ -425,26 +425,26 @@ const ke = ({
           children: f.buttonLabel
         }
       ),
-      y && k && b && !b.isWinning && /* @__PURE__ */ t(
+      v && R && y && !y.isWinning && /* @__PURE__ */ t(
         he,
         {
           variant: "outlined",
-          onClick: v,
+          onClick: S,
           sx: {
-            borderRadius: g.xl,
-            py: u.sm,
-            px: u.lg,
-            borderColor: S.outlineEnabledBorder,
+            borderRadius: p.xl,
+            py: m.sm,
+            px: m.lg,
+            borderColor: b.outlineEnabledBorder,
             color: a,
-            fontSize: p ? "0.75rem" : "0.875rem",
+            fontSize: x ? "0.75rem" : "0.875rem",
             fontWeight: 700,
-            fontFamily: i.primary,
+            fontFamily: l.primary,
             textTransform: "uppercase",
             zIndex: 1,
             "&:hover": {
-              borderColor: r,
+              borderColor: n,
               bgcolor: "transparent",
-              color: r
+              color: n
             }
           },
           children: "Reset Game"
@@ -452,66 +452,66 @@ const ke = ({
       )
     ] })
   ] });
-  if (y) {
-    const Q = Ce(c), oe = Q ? Q.replace(/[^\d,]/g, "") : "";
+  if (v) {
+    const Q = Ce(u), oe = Q ? Q.replace(/[^\d,]/g, "") : "";
     return /* @__PURE__ */ w(
-      m,
+      d,
       {
         sx: {
           display: "flex",
           flexDirection: "column",
           width: "100%",
           height: "100%",
-          gap: u.lg,
+          gap: m.lg,
           alignItems: "center",
           position: "relative",
           overflow: "auto",
           boxSizing: "border-box"
         },
         children: [
-          !R && f.welcome && /* @__PURE__ */ t(
-            D,
+          !F && f.welcome && /* @__PURE__ */ t(
+            B,
             {
               level: "body-md",
               sx: {
-                fontFamily: i.primary,
+                fontFamily: l.primary,
                 fontWeight: 400,
-                fontSize: p ? "0.875rem" : "1rem",
+                fontSize: x ? "0.875rem" : "1rem",
                 color: a,
                 textAlign: "center",
-                px: u.md
+                px: m.md
               },
               children: f.welcome
             }
           ),
           /* @__PURE__ */ t(
-            m,
+            d,
             {
               sx: {
                 display: "flex",
                 flexDirection: "column",
-                px: u.md,
+                px: m.md,
                 width: "100%",
                 boxSizing: "border-box"
               },
               children: /* @__PURE__ */ w(
-                m,
+                d,
                 {
                   sx: {
                     display: "flex",
                     flexDirection: "column",
-                    gap: p ? u.lg : u.md
+                    gap: x ? m.lg : m.md
                   },
                   children: [
                     /* @__PURE__ */ t(
-                      m,
+                      d,
                       {
                         sx: {
-                          borderRadius: g.md,
-                          px: u.sm,
-                          pt: u.sm,
-                          pb: u.md,
-                          gap: u.md,
+                          borderRadius: p.md,
+                          px: m.sm,
+                          pt: m.sm,
+                          pb: m.md,
+                          gap: m.md,
                           bgcolor: `rgba(${oe}, 0.5)`,
                           display: "flex",
                           flexDirection: "column",
@@ -519,44 +519,44 @@ const ke = ({
                           backdropFilter: "blur(4px)",
                           position: "relative",
                           overflow: "hidden",
-                          ...W && {
-                            border: `${_.size} solid ${B("15")}`
+                          ..._ && {
+                            border: `${O.size} solid ${D("15")}`
                           }
                         },
                         children: Y()
                       }
                     ),
-                    k && (b == null ? void 0 : b.results) && /* @__PURE__ */ t(
-                      le,
+                    R && (y == null ? void 0 : y.results) && /* @__PURE__ */ t(
+                      ie,
                       {
-                        result: b.results,
+                        result: y.results,
                         variant: "standard",
                         mode: "inline",
                         contentColor: a,
-                        primaryColor: r,
+                        primaryColor: n,
                         onPrimaryColor: o,
                         showResetButton: !1,
-                        sx: { mb: u.md }
+                        sx: { mb: m.md }
                       }
                     ),
-                    (n || f.disclaimer) && /* @__PURE__ */ w(
-                      m,
+                    (r || f.disclaimer) && /* @__PURE__ */ w(
+                      d,
                       {
                         sx: {
                           display: "flex",
                           flexDirection: "column",
                           alignItems: "center",
-                          gap: u.md
+                          gap: m.md
                         },
                         children: [
                           f.disclaimer && /* @__PURE__ */ t(
-                            D,
+                            B,
                             {
                               level: "body-sm",
                               sx: {
-                                fontFamily: i.secondary,
+                                fontFamily: l.secondary,
                                 fontWeight: 400,
-                                fontSize: p ? "0.625rem" : "0.75rem",
+                                fontSize: x ? "0.625rem" : "0.75rem",
                                 color: a,
                                 opacity: 0.7,
                                 textAlign: "center",
@@ -566,10 +566,10 @@ const ke = ({
                               children: f.disclaimer
                             }
                           ),
-                          n && /* @__PURE__ */ t(
+                          r && /* @__PURE__ */ t(
                             "img",
                             {
-                              src: n,
+                              src: r,
                               alt: "Brand Logo",
                               style: {
                                 height: "auto",
@@ -591,14 +591,14 @@ const ke = ({
     );
   }
   return /* @__PURE__ */ w(
-    m,
+    d,
     {
       sx: {
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        p: p ? u.lg : u.xl,
-        gap: u.lg,
+        p: x ? m.lg : m.xl,
+        gap: m.lg,
         alignItems: "center",
         position: "relative",
         overflow: "hidden",
@@ -606,23 +606,23 @@ const ke = ({
       },
       children: [
         Y(),
-        !R && f.disclaimer && /* @__PURE__ */ t(
-          m,
+        !F && f.disclaimer && /* @__PURE__ */ t(
+          d,
           {
             sx: {
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
-              gap: u.md
+              gap: m.md
             },
             children: /* @__PURE__ */ t(
-              D,
+              B,
               {
                 level: "body-sm",
                 sx: {
-                  fontFamily: i.secondary,
+                  fontFamily: l.secondary,
                   fontWeight: 400,
-                  fontSize: p ? "0.625rem" : "0.75rem",
+                  fontSize: x ? "0.625rem" : "0.75rem",
                   color: a,
                   opacity: 0.7,
                   textAlign: "center",
@@ -637,21 +637,21 @@ const ke = ({
       ]
     }
   );
-}, wt = ({
+}, zt = ({
   infoPage: e,
-  enableReset: s = !1,
+  enableReset: c = !1,
   imagePosition: a = "left",
-  defaultImagePlaceholderUrl: r
+  defaultImagePlaceholderUrl: n
 }) => {
-  var u, _;
-  const { t: x } = se(), o = K(), c = ie(), d = Te() === "dark", n = pe(
+  var m, O;
+  const { t: g } = se(), o = J(), u = le(), i = Te() === "dark", r = pe(
     {
       images: e.images,
-      imagePlaceholder: r || ""
+      imagePlaceholder: n || ""
     },
     fe.STANDARD
-  ), l = (u = e.branding) == null ? void 0 : u.colors, F = (l == null ? void 0 : l.primary_color) || c.palette.primary.plainColor, O = (l == null ? void 0 : l.secondary_color) || c.palette.danger.plainColor, p = (l == null ? void 0 : l.border_color) || null, S = (l == null ? void 0 : l.background_color) || c.surfaceVariant || "", g = (_ = e.branding) == null ? void 0 : _.images, i = o ? (g == null ? void 0 : g.mobile_logo) || (g == null ? void 0 : g.main_logo) || "" : (g == null ? void 0 : g.main_logo) || "";
-  return /* @__PURE__ */ t(ke, { brandingBorderColor: p, children: /* @__PURE__ */ t(
+  ), 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) || "";
+  return /* @__PURE__ */ t(ke, { brandingBorderColor: x, children: /* @__PURE__ */ t(
     Ae,
     {
       entity: {
@@ -660,59 +660,59 @@ const ke = ({
         description: e.subtitle || "",
         rules: null
       },
-      headline: x("chanceGame.headlinePrizeWheel"),
-      finalImage: n,
+      headline: g("chanceGame.headlinePrizeWheel"),
+      finalImage: r,
       imagePosition: a,
       children: /* @__PURE__ */ t(
-        Ve,
+        Ne,
         {
           infoPage: e,
-          enableReset: s,
-          contentColor: (l == null ? void 0 : l.content_color) || c.textColor,
-          primaryColor: F,
-          secondaryColor: O,
-          onPrimaryColor: c.palette.primary.onPrimary,
-          borderColor: p || void 0,
-          backgroundColor: S,
-          dangerColor: c.palette.danger.plainColor,
-          shimmerColor: F,
-          brandingLogo: i,
-          isDark: d,
+          enableReset: c,
+          contentColor: (s == null ? void 0 : s.content_color) || u.textColor,
+          primaryColor: k,
+          secondaryColor: z,
+          onPrimaryColor: u.palette.primary.onPrimary,
+          borderColor: x || void 0,
+          backgroundColor: b,
+          dangerColor: u.palette.danger.plainColor,
+          shimmerColor: k,
+          brandingLogo: l,
+          isDark: i,
           showTitleBlock: !1,
           variant: "standard"
         }
       )
     }
   ) });
-}, Me = ({
+}, Ve = ({
   infoPage: e,
-  enableReset: s = !1,
+  enableReset: c = !1,
   contentColor: a,
-  primaryColor: r,
-  onPrimaryColor: x,
+  primaryColor: n,
+  onPrimaryColor: g,
   borderColor: o,
-  backgroundColor: c,
-  dangerColor: d,
-  cardBaseColor: n,
-  shimmerColor: l,
-  brandingLogo: F = "",
-  isDark: O = !1,
-  showTitleBlock: p = !1,
-  variant: S,
-  compactCards: g = !1
+  backgroundColor: u,
+  dangerColor: i,
+  cardBaseColor: r,
+  shimmerColor: s,
+  brandingLogo: k = "",
+  isDark: z = !1,
+  showTitleBlock: x = !1,
+  variant: b,
+  compactCards: p = !1
 }) => {
   var Fe, We, _e, Oe;
-  const i = K(), u = ie(), _ = ve(), y = we(), h = xe(), C = Se(), E = n || c, M = l || r, f = S === "standard", L = S === "overlay", H = f ? Ce(c) : "", W = H ? H.replace(/[^\d,]/g, "") : "", B = g ? i ? 80 : 110 : i ? 100 : 140, T = g ? i ? 104 : 143 : i ? 130 : 180, N = g ? i ? 90 : 130 : i ? 120 : 180, b = g ? i ? "16px" : "32px" : i ? "24px" : "48px", X = g ? i ? "12px" : "32px" : i ? "16px" : "48px", R = Ee(r, O), k = JSON.parse(e.body), $ = k.segments || [], z = e.labels || {}, P = k.mode || ((Fe = k.config) == null ? void 0 : Fe.mode) || "fair", U = ((We = k.config) == null ? void 0 : We.pace) || "normal", j = ((_e = k.config) == null ? void 0 : _e.revealAll) ?? !1, A = ((Oe = k.config) == null ? void 0 : Oe.decorations) ?? !1, I = $.some((ae) => {
-    var J;
-    return (J = ae.images) == null ? void 0 : J.idle;
+  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 = Ee(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;
   }), {
-    selectedSegment: v,
+    selectedSegment: S,
     displaySegments: ee,
     revealResult: te,
     showResultScreen: Y,
     showInlineResult: G,
     showLoseAnimation: q,
-    hasEntered: V,
+    hasEntered: N,
     flippedCards: Q,
     crossfadedCards: oe,
     revealedOtherCards: ce,
@@ -721,33 +721,33 @@ const ke = ({
     loseAnimationDuration: Ue,
     handlePick: Re,
     handleReset: ge
-  } = pt({ segments: $, mode: P, pace: U, revealAll: j }), ze = () => /* @__PURE__ */ w(re, { children: [
+  } = bt({ segments: $, mode: P, pace: U, revealAll: j }), ze = () => /* @__PURE__ */ w(re, { children: [
     A && /* @__PURE__ */ t(
       Ge,
       {
-        primaryColor: r,
-        isDark: O,
+        primaryColor: n,
+        isDark: z,
         animationPrefix: "casino"
       }
     ),
-    Y && (v == null ? void 0 : v.results) && /* @__PURE__ */ t(
-      le,
+    Y && (S == null ? void 0 : S.results) && /* @__PURE__ */ t(
+      ie,
       {
-        result: v.results,
-        variant: S || "embed",
+        result: S.results,
+        variant: b || "embed",
         mode: "screen",
         contentColor: a,
-        primaryColor: r,
-        onPrimaryColor: x,
+        primaryColor: n,
+        onPrimaryColor: g,
         borderColor: o,
-        disclaimer: f ? void 0 : z.disclaimer,
-        enableReset: s,
+        disclaimer: f ? void 0 : W.disclaimer,
+        enableReset: c,
         onReset: ge
       }
     ),
     !Y && /* @__PURE__ */ w(re, { children: [
-      !f && p && (e.title || e.subtitle) && /* @__PURE__ */ w(
-        m,
+      !f && x && (e.title || e.subtitle) && /* @__PURE__ */ w(
+        d,
         {
           sx: {
             display: "flex",
@@ -759,60 +759,60 @@ const ke = ({
           },
           children: [
             e.title && /* @__PURE__ */ t(
-              D,
+              B,
               {
                 level: "h2",
                 sx: {
-                  fontFamily: y.primary,
+                  fontFamily: v.primary,
                   fontWeight: 700,
-                  fontSize: i ? "1.5rem" : "2rem",
+                  fontSize: l ? "1.5rem" : "2rem",
                   color: a,
                   lineHeight: 1.2,
-                  textShadow: A ? `0 0 20px ${r}20` : "none"
+                  textShadow: A ? `0 0 20px ${n}20` : "none"
                 },
                 children: e.title
               }
             ),
             A && e.title && /* @__PURE__ */ w(
-              m,
+              d,
               {
                 sx: {
                   display: "flex",
                   alignItems: "center",
                   gap: h.sm,
                   mt: h.xs,
-                  width: i ? "60%" : "40%"
+                  width: l ? "60%" : "40%"
                 },
                 children: [
                   /* @__PURE__ */ t(
-                    m,
+                    d,
                     {
                       sx: {
                         flex: 1,
                         height: "1px",
-                        background: `linear-gradient(to right, transparent, ${R("40")})`
+                        background: `linear-gradient(to right, transparent, ${F("40")})`
                       }
                     }
                   ),
                   /* @__PURE__ */ t(
-                    m,
+                    d,
                     {
                       sx: {
                         width: "8px",
                         height: "8px",
                         transform: "rotate(45deg)",
-                        border: `${C.size} solid ${R("50")}`,
-                        background: `${R("15")}`
+                        border: `${C.size} solid ${F("50")}`,
+                        background: `${F("15")}`
                       }
                     }
                   ),
                   /* @__PURE__ */ t(
-                    m,
+                    d,
                     {
                       sx: {
                         flex: 1,
                         height: "1px",
-                        background: `linear-gradient(to left, transparent, ${R("40")})`
+                        background: `linear-gradient(to left, transparent, ${F("40")})`
                       }
                     }
                   )
@@ -820,13 +820,13 @@ const ke = ({
               }
             ),
             e.subtitle && /* @__PURE__ */ t(
-              D,
+              B,
               {
                 level: "body-md",
                 sx: {
-                  fontFamily: y.secondary,
+                  fontFamily: v.secondary,
                   fontWeight: 400,
-                  fontSize: i ? "0.875rem" : "1rem",
+                  fontSize: l ? "0.875rem" : "1rem",
                   color: a,
                   opacity: 0.8
                 },
@@ -836,78 +836,78 @@ const ke = ({
           ]
         }
       ),
-      /* @__PURE__ */ w(m, { children: [
-        !f && z.welcome && /* @__PURE__ */ t(
-          D,
+      /* @__PURE__ */ w(d, { children: [
+        !f && W.welcome && /* @__PURE__ */ t(
+          B,
           {
             level: "body-md",
             sx: {
-              fontFamily: y.primary,
+              fontFamily: v.primary,
               fontWeight: 400,
-              fontSize: i ? "0.875rem" : "1rem",
+              fontSize: l ? "0.875rem" : "1rem",
               color: a,
               textAlign: "center",
               mb: L ? 0 : h.md
             },
-            children: z.welcome
+            children: W.welcome
           }
         ),
-        z.instructions && !G && /* @__PURE__ */ t(
-          D,
+        W.instructions && !G && /* @__PURE__ */ t(
+          B,
           {
             level: f ? "body-sm" : "body-md",
             sx: {
-              fontFamily: y.secondary,
+              fontFamily: v.secondary,
               fontWeight: 400,
-              fontSize: i ? "0.875rem" : "1rem",
+              fontSize: l ? "0.875rem" : "1rem",
               color: a,
               textAlign: "center",
               opacity: 0.7,
               maxWidth: f ? "400px" : "600px"
             },
-            children: z.instructions
+            children: W.instructions
           }
         )
       ] }),
       A && /* @__PURE__ */ w(
-        m,
+        d,
         {
           sx: {
             display: "flex",
             alignItems: "center",
             gap: h.sm,
-            width: i ? "40%" : "25%",
+            width: l ? "40%" : "25%",
             my: h.xs
           },
           children: [
             /* @__PURE__ */ t(
-              m,
+              d,
               {
                 sx: {
                   flex: 1,
                   height: "1px",
-                  background: `linear-gradient(to right, transparent, ${R("25")})`
+                  background: `linear-gradient(to right, transparent, ${F("25")})`
                 }
               }
             ),
             /* @__PURE__ */ t(
-              m,
+              d,
               {
                 sx: {
                   width: "4px",
                   height: "4px",
                   borderRadius: "50%",
-                  background: `${R("35")}`
+                  background: `${F("35")}`
                 }
               }
             ),
             /* @__PURE__ */ t(
-              m,
+              d,
               {
                 sx: {
                   flex: 1,
                   height: "1px",
-                  background: `linear-gradient(to left, transparent, ${R("25")})`
+                  background: `linear-gradient(to left, transparent, ${F("25")})`
                 }
               }
             )
@@ -915,78 +915,78 @@ const ke = ({
         }
       ),
       /* @__PURE__ */ t(
-        m,
+        d,
         {
           sx: {
             mt: h.lg,
             mx: "auto",
             display: "grid",
-            gridTemplateColumns: I ? `repeat(3, ${N}px)` : `repeat(3, ${B}px)`,
-            rowGap: b,
+            gridTemplateColumns: I ? `repeat(3, ${M}px)` : `repeat(3, ${D}px)`,
+            rowGap: y,
             columnGap: X,
             justifyContent: "center",
             mb: h.lg,
             position: "relative",
             perspective: "1200px"
           },
-          children: (ee ?? $).map((ae, J) => {
-            const be = `card-${J}`, de = v !== null, Be = Q.has(be), me = ce.has(be), je = de && !Be && !me, De = oe.has(be), Ye = de && !De && !me;
+          children: (ee ?? $).map((ae, K) => {
+            const ye = `card-${K}`, de = S !== null, De = Q.has(ye), me = ce.has(ye), je = de && !De && !me, Be = oe.has(ye), Ye = de && !Be && !me;
             return /* @__PURE__ */ t(
-              m,
+              d,
               {
                 sx: {
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center",
                   // Staggered deal-in entrance
-                  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) ${J * 100}ms`
+                  opacity: N ? 1 : 0,
+                  transform: N ? "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(
-                  gt,
+                  vt,
                   {
                     segment: ae,
-                    index: J,
-                    selectedSegment: v,
+                    index: K,
+                    selectedSegment: S,
                     revealResult: te,
-                    isCrossfaded: De,
+                    isCrossfaded: Be,
                     isOtherRevealed: me,
                     shouldDim: Ye,
                     isRevealed: de,
-                    hasEntered: V,
-                    objectSize: N,
+                    hasEntered: N,
+                    objectSize: M,
                     crossfadeDuration: Pe,
                     isStandard: f,
-                    primaryColor: r,
-                    dangerColor: d,
-                    onPick: () => Re(J, !0)
+                    primaryColor: n,
+                    dangerColor: i,
+                    onPick: () => Re(K, !0)
                   }
                 ) : /* @__PURE__ */ t(
-                  bt,
+                  St,
                   {
                     segment: ae,
-                    index: J,
-                    selectedSegment: v,
-                    isFlipped: Be,
+                    index: K,
+                    selectedSegment: S,
+                    isFlipped: De,
                     isOtherRevealed: me,
                     shouldDim: je,
                     isRevealed: de,
                     showLoseAnimation: q,
-                    hasEntered: V,
-                    cardWidth: B,
+                    hasEntered: N,
+                    cardWidth: D,
                     cardHeight: T,
                     flipDuration: Xe,
                     loseAnimationDuration: Ue,
                     cardBaseColor: E,
-                    shimmerColor: M,
-                    primaryColor: r,
+                    shimmerColor: V,
+                    primaryColor: n,
                     contentColor: a,
-                    dangerColor: d,
+                    dangerColor: i,
                     borderColor: o,
-                    brandingLogo: F,
-                    compactCards: g,
-                    onPick: () => Re(J, !1)
+                    brandingLogo: k,
+                    compactCards: p,
+                    onPick: () => Re(K, !1)
                   }
                 )
               },
@@ -995,20 +995,20 @@ const ke = ({
           })
         }
       ),
-      !f && G && (v == null ? void 0 : v.results) && /* @__PURE__ */ t(
-        le,
+      !f && G && (S == null ? void 0 : S.results) && /* @__PURE__ */ t(
+        ie,
         {
-          result: v.results,
+          result: S.results,
           variant: "embed",
           mode: "inline",
           contentColor: a,
-          primaryColor: r,
-          onPrimaryColor: x,
+          primaryColor: n,
+          onPrimaryColor: g,
           borderColor: o,
           showResetButton: !1
         }
       ),
-      !f && s && G && /* @__PURE__ */ t(
+      !f && c && G && /* @__PURE__ */ t(
         he,
         {
           onClick: ge,
@@ -1017,42 +1017,42 @@ const ke = ({
             mt: h.md,
             px: h.lg,
             py: h.sm,
-            fontFamily: y.secondary,
+            fontFamily: v.secondary,
             fontWeight: 600,
-            fontSize: i ? "0.875rem" : "1rem",
+            fontSize: l ? "0.875rem" : "1rem",
             textTransform: "uppercase",
-            borderRadius: _.md,
-            borderColor: o || u.outlineEnabledBorder,
+            borderRadius: O.md,
+            borderColor: o || m.outlineEnabledBorder,
             color: a,
-            minWidth: i ? "150px" : "180px",
+            minWidth: l ? "150px" : "180px",
             "&:hover": {
-              borderColor: r,
+              borderColor: n,
               bgcolor: "transparent",
-              color: r
+              color: n
             }
           },
           children: "Reset Game"
         }
       ),
-      f && s && G && /* @__PURE__ */ t(
+      f && c && G && /* @__PURE__ */ t(
         he,
         {
           onClick: ge,
           variant: "outlined",
           sx: {
-            borderRadius: _.xl,
+            borderRadius: O.xl,
             py: h.sm,
             px: h.lg,
-            borderColor: u.outlineEnabledBorder,
+            borderColor: m.outlineEnabledBorder,
             color: a,
-            fontSize: i ? "0.75rem" : "0.875rem",
+            fontSize: l ? "0.75rem" : "0.875rem",
             fontWeight: 700,
-            fontFamily: y.primary,
+            fontFamily: v.primary,
             textTransform: "uppercase",
             "&:hover": {
-              borderColor: r,
+              borderColor: n,
               bgcolor: "transparent",
-              color: r
+              color: n
             }
           },
           children: "Reset Game"
@@ -1061,7 +1061,7 @@ const ke = ({
     ] })
   ] });
   return f ? /* @__PURE__ */ w(
-    m,
+    d,
     {
       sx: {
         display: "flex",
@@ -1075,23 +1075,23 @@ const ke = ({
         boxSizing: "border-box"
       },
       children: [
-        !Y && z.welcome && /* @__PURE__ */ t(
-          D,
+        !Y && W.welcome && /* @__PURE__ */ t(
+          B,
           {
             level: "body-md",
             sx: {
-              fontFamily: y.primary,
+              fontFamily: v.primary,
               fontWeight: 400,
-              fontSize: i ? "0.875rem" : "1rem",
+              fontSize: l ? "0.875rem" : "1rem",
               color: a,
               textAlign: "center",
               px: h.md
             },
-            children: z.welcome
+            children: W.welcome
           }
         ),
         /* @__PURE__ */ t(
-          m,
+          d,
           {
             sx: {
               display: "flex",
@@ -1101,24 +1101,24 @@ const ke = ({
               boxSizing: "border-box"
             },
             children: /* @__PURE__ */ w(
-              m,
+              d,
               {
                 sx: {
                   display: "flex",
                   flexDirection: "column",
-                  gap: i ? h.lg : h.md
+                  gap: l ? h.lg : h.md
                 },
                 children: [
                   /* @__PURE__ */ t(
-                    m,
+                    d,
                     {
                       sx: {
-                        borderRadius: _.md,
+                        borderRadius: O.md,
                         px: h.sm,
                         pt: h.sm,
                         pb: h.md,
                         gap: h.md,
-                        bgcolor: `rgba(${W}, 0.5)`,
+                        bgcolor: `rgba(${_}, 0.5)`,
                         display: "flex",
                         flexDirection: "column",
                         alignItems: "center",
@@ -1129,21 +1129,21 @@ const ke = ({
                       children: ze()
                     }
                   ),
-                  G && (v == null ? void 0 : v.results) && /* @__PURE__ */ t(
-                    le,
+                  G && (S == null ? void 0 : S.results) && /* @__PURE__ */ t(
+                    ie,
                     {
-                      result: v.results,
+                      result: S.results,
                       variant: "standard",
                       mode: "inline",
                       contentColor: a,
-                      primaryColor: r,
-                      onPrimaryColor: x,
+                      primaryColor: n,
+                      onPrimaryColor: g,
                       showResetButton: !1,
                       sx: { mb: h.md }
                     }
                   ),
-                  (F || z.disclaimer) && /* @__PURE__ */ w(
-                    m,
+                  (k || W.disclaimer) && /* @__PURE__ */ w(
+                    d,
                     {
                       sx: {
                         display: "flex",
@@ -1152,27 +1152,27 @@ const ke = ({
                         gap: h.md
                       },
                       children: [
-                        z.disclaimer && /* @__PURE__ */ t(
-                          D,
+                        W.disclaimer && /* @__PURE__ */ t(
+                          B,
                           {
                             level: "body-sm",
                             sx: {
-                              fontFamily: y.secondary,
+                              fontFamily: v.secondary,
                               fontWeight: 400,
-                              fontSize: i ? "0.625rem" : "0.75rem",
+                              fontSize: l ? "0.625rem" : "0.75rem",
                               color: a,
                               opacity: 0.7,
                               textAlign: "center",
                               maxWidth: "900px",
                               lineHeight: 1.4
                             },
-                            children: z.disclaimer
+                            children: W.disclaimer
                           }
                         ),
-                        F && I && /* @__PURE__ */ t(
+                        k && I && /* @__PURE__ */ t(
                           "img",
                           {
-                            src: F,
+                            src: k,
                             alt: "Brand Logo",
                             style: {
                               height: "auto",
@@ -1192,7 +1192,7 @@ const ke = ({
       ]
     }
   ) : /* @__PURE__ */ t(
-    m,
+    d,
     {
       sx: {
         display: "flex",
@@ -1209,21 +1209,21 @@ const ke = ({
       children: ze()
     }
   );
-}, kt = ({
+}, Ft = ({
   infoPage: e,
-  enableReset: s = !1,
+  enableReset: c = !1,
   imagePosition: a = "left",
-  defaultImagePlaceholderUrl: r
+  defaultImagePlaceholderUrl: n
 }) => {
-  var i, u, _;
-  const { t: x } = se(), o = K(), c = ie(), d = Te() === "dark", n = pe(
+  var l, m, O;
+  const { t: g } = se(), o = J(), u = le(), i = Te() === "dark", r = pe(
     {
       images: e.images,
-      imagePlaceholder: r || ""
+      imagePlaceholder: n || ""
     },
     fe.STANDARD
-  ), l = (i = e.branding) == null ? void 0 : i.colors, F = (l == null ? void 0 : l.primary_color) || c.palette.primary.plainColor, O = (l == null ? void 0 : l.border_color) || null, p = (l == null ? void 0 : l.background_color) || c.surfaceVariant || "", S = (u = e.branding) == null ? void 0 : u.images, g = o ? (S == null ? void 0 : S.mobile_logo) || (S == null ? void 0 : S.main_logo) || "" : (S == null ? void 0 : S.main_logo) || "";
-  return /* @__PURE__ */ t(ke, { brandingBorderColor: O, children: /* @__PURE__ */ t(
+  ), 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) || "";
+  return /* @__PURE__ */ t(ke, { brandingBorderColor: z, children: /* @__PURE__ */ t(
     Ae,
     {
       entity: {
@@ -1232,26 +1232,26 @@ const ke = ({
         description: e.subtitle || "",
         rules: null
       },
-      headline: x("chanceGame.headlinePickOneOfX", {
-        count: ((_ = JSON.parse(e.body).segments) == null ? void 0 : _.length) || 0
+      headline: g("chanceGame.headlinePickOneOfX", {
+        count: ((O = JSON.parse(e.body).segments) == null ? void 0 : O.length) || 0
       }),
-      finalImage: n,
+      finalImage: r,
       imagePosition: a,
       children: /* @__PURE__ */ t(
-        Me,
+        Ve,
         {
           infoPage: e,
-          enableReset: s,
-          contentColor: (l == null ? void 0 : l.content_color) || c.textPrimary,
-          primaryColor: F,
-          onPrimaryColor: (l == null ? void 0 : l.content_color) || c.palette.primary.onPrimary || c.surface,
-          borderColor: O || void 0,
-          backgroundColor: p,
-          dangerColor: c.palette.danger.plainColor,
-          cardBaseColor: p,
-          shimmerColor: F,
-          brandingLogo: g,
-          isDark: d,
+          enableReset: c,
+          contentColor: (s == null ? void 0 : s.content_color) || u.textPrimary,
+          primaryColor: k,
+          onPrimaryColor: (s == null ? void 0 : s.content_color) || u.palette.primary.onPrimary || u.surface,
+          borderColor: z || void 0,
+          backgroundColor: x,
+          dangerColor: u.palette.danger.plainColor,
+          cardBaseColor: x,
+          shimmerColor: k,
+          brandingLogo: p,
+          isDark: i,
           showTitleBlock: !1,
           variant: "standard",
           compactCards: !0
@@ -1302,29 +1302,29 @@ const ke = ({
     margin: "0 auto",
     opacity: 0.9
   }
-}), Rt = ({
+}), Wt = ({
   infoPage: e,
-  enableReset: s = !1,
+  enableReset: c = !1,
   defaultImagePlaceholderUrl: a
 }) => {
-  var f, L, H, W, B, T, N, b, X, R, k, $, z, P, U, j, A, I, v;
-  const { t: r } = se(), x = K(), o = $e(), c = xe(), d = ((f = e.branding) == null ? void 0 : f.colors) || null, n = (L = e.branding) == null ? void 0 : L.images, l = x ? (n == null ? void 0 : n.mobile_background_image) || (n == null ? void 0 : n.background_image) || "" : (n == null ? void 0 : n.background_image) || "", F = x ? (n == null ? void 0 : n.mobile_logo) || (n == null ? void 0 : n.main_logo) || "" : (n == null ? void 0 : n.main_logo) || "", O = a || (x ? He : Ne), p = l || pe(
+  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(
     {
       images: e.images,
-      imagePlaceholder: O
+      imagePlaceholder: z
     },
     fe.OVERLAY
-  ), S = o.colorSchemes.dark.textColor, g = (d == null ? void 0 : d.content_color) || S, i = (d == null ? void 0 : d.primary_color) || ((T = (B = (W = (H = o.colorSchemes) == null ? void 0 : H.light) == null ? void 0 : W.palette) == null ? void 0 : B.primary) == null ? void 0 : T.plainColor), u = (R = (X = (b = (N = o.colorSchemes) == null ? void 0 : N.light) == null ? void 0 : b.palette) == null ? void 0 : X.primary) == null ? void 0 : R.onPrimary, _ = (d == null ? void 0 : d.background_color) || (($ = (k = o.colorSchemes) == null ? void 0 : k.dark) == null ? void 0 : $.surfaceVariant), y = (j = (U = (P = (z = o.colorSchemes) == null ? void 0 : z.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, M = Le({
-    spacingScale: c,
+  ), 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({
+    spacingScale: u,
     mdBorderRadius: C,
-    contentBgColor: _,
+    contentBgColor: O,
     buttonRadius: E,
-    primaryColor: i,
-    onPrimaryColor: u,
+    primaryColor: l,
+    onPrimaryColor: m,
     fontFamilyPrimary: h,
-    darkTextColor: S,
-    isMobile: x,
-    textColor: g
+    darkTextColor: b,
+    isMobile: g,
+    textColor: p
   });
   return /* @__PURE__ */ t(
     Ie,
@@ -1335,23 +1335,23 @@ const ke = ({
         description: e.subtitle || "",
         rules: null
       },
-      headline: r("chanceGame.headlinePickOneOfX", {
-        count: ((v = JSON.parse(e.body).segments) == null ? void 0 : v.length) || 0
+      headline: n("chanceGame.headlinePickOneOfX", {
+        count: ((S = JSON.parse(e.body).segments) == null ? void 0 : S.length) || 0
       }),
-      finalImage: p,
-      children: /* @__PURE__ */ t(m, { sx: M.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
-        Me,
+      finalImage: x,
+      children: /* @__PURE__ */ t(d, { sx: V.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
+        Ve,
         {
           infoPage: e,
-          enableReset: s,
-          contentColor: g,
-          primaryColor: i,
-          onPrimaryColor: u || "#FFFFFF",
-          backgroundColor: _,
-          dangerColor: y,
-          cardBaseColor: _,
-          shimmerColor: i,
-          brandingLogo: F,
+          enableReset: c,
+          contentColor: p,
+          primaryColor: l,
+          onPrimaryColor: m || "#FFFFFF",
+          backgroundColor: O,
+          dangerColor: v,
+          cardBaseColor: O,
+          shimmerColor: l,
+          brandingLogo: k,
           isDark: !0,
           showTitleBlock: !1,
           variant: "overlay",
@@ -1360,13 +1360,13 @@ const ke = ({
       ) })
     }
   );
-}, zt = (e) => {
-  const s = we().secondary, a = et(), r = e.isSplitVariant && a, x = K(), o = Je(e.primaryUrl, e.secondaryUrl, "logo");
+}, _t = (e) => {
+  const c = we().secondary, a = et(), n = e.isSplitVariant && a, g = J(), o = Ke(e.primaryUrl, e.secondaryUrl, "logo");
   if (!e.brandingLogo)
     return null;
-  const c = () => {
+  const u = () => {
     o && window.open(o, "_blank", "noopener,noreferrer");
-  }, d = /* @__PURE__ */ t(
+  }, i = /* @__PURE__ */ t(
     "img",
     {
       src: e.brandingLogo,
@@ -1376,8 +1376,8 @@ const ke = ({
         maxWidth: "100px"
       }
     }
-  ), n = o ? typeof window > "u" ? /* @__PURE__ */ t(
-    m,
+  ), r = o ? typeof window > "u" ? /* @__PURE__ */ t(
+    d,
     {
       component: "a",
       href: o,
@@ -1388,21 +1388,21 @@ const ke = ({
         textDecoration: "none",
         display: "inline-flex"
       },
-      children: d
+      children: i
     }
   ) : /* @__PURE__ */ t(
-    m,
+    d,
     {
-      onClick: c,
+      onClick: u,
       sx: {
         cursor: "pointer",
         display: "inline-flex"
       },
-      children: d
+      children: i
     }
-  ) : d;
-  return e.isCentered || r || x ? /* @__PURE__ */ w(
-    m,
+  ) : i;
+  return e.isCentered || n || g ? /* @__PURE__ */ w(
+    d,
     {
       sx: {
         display: "flex",
@@ -1415,7 +1415,7 @@ const ke = ({
       },
       children: [
         e.label && /* @__PURE__ */ t(
-          D,
+          B,
           {
             level: "body-sm",
             sx: {
@@ -1425,16 +1425,16 @@ const ke = ({
               fontSize: "1em",
               color: e.textColor,
               textAlign: "right",
-              fontFamily: s
+              fontFamily: c
             },
             children: e.label
           }
         ),
-        n
+        r
       ]
     }
   ) : /* @__PURE__ */ w(
-    m,
+    d,
     {
       sx: {
         minWidth: "180px",
@@ -1446,7 +1446,7 @@ const ke = ({
       },
       children: [
         e.label && /* @__PURE__ */ t(
-          D,
+          B,
           {
             level: "body-sm",
             sx: {
@@ -1456,38 +1456,38 @@ const ke = ({
               textAlign: "right",
               fontSize: "1em",
               color: e.textColor,
-              fontFamily: s
+              fontFamily: c
             },
             children: e.label
           }
         ),
-        n
+        r
       ]
     }
   );
-}, Ft = ({
+}, Ot = ({
   infoPage: e,
-  enableReset: s = !1,
+  enableReset: c = !1,
   defaultImagePlaceholderUrl: a
 }) => {
-  var L, H, W, B, T, N, b, X, R, k, $, z, P, U, j, A, I, v, ee, te, Y, G, q, V, Q, oe, ce;
-  const { t: r } = se(), x = K(), o = $e(), c = xe(), d = ((L = e.branding) == null ? void 0 : L.colors) || null, n = (H = e.branding) == null ? void 0 : H.images, l = x ? (n == null ? void 0 : n.mobile_background_image) || (n == null ? void 0 : n.background_image) || "" : (n == null ? void 0 : n.background_image) || "", F = x ? (n == null ? void 0 : n.mobile_logo) || (n == null ? void 0 : n.main_logo) || "" : (n == null ? void 0 : n.main_logo) || "", O = a || (x ? He : Ne), p = l || pe(
+  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(
     {
       images: e.images,
-      imagePlaceholder: O
+      imagePlaceholder: z
     },
     fe.OVERLAY
-  ), S = o.colorSchemes.dark.textColor, g = (d == null ? void 0 : d.content_color) || S, i = (d == null ? void 0 : d.primary_color) || ((N = (T = (B = (W = o.colorSchemes) == null ? void 0 : W.light) == null ? void 0 : B.palette) == null ? void 0 : T.primary) == null ? void 0 : N.plainColor), u = (d == null ? void 0 : d.secondary_color) || ((k = (R = (X = (b = o.colorSchemes) == null ? void 0 : b.light) == null ? void 0 : X.palette) == null ? void 0 : R.danger) == null ? void 0 : k.plainColor), _ = (U = (P = (z = ($ = o.colorSchemes) == null ? void 0 : $.light) == null ? void 0 : z.palette) == null ? void 0 : P.primary) == null ? void 0 : U.onPrimary, y = (d == null ? void 0 : d.background_color) || ((A = (j = o.colorSchemes) == null ? void 0 : j.dark) == null ? void 0 : A.surfaceVariant), h = (te = (ee = (v = (I = o.colorSchemes) == null ? void 0 : I.light) == null ? void 0 : v.palette) == null ? void 0 : ee.danger) == null ? void 0 : te.plainColor, C = o.customFontFamily.dark.primary, E = o.customRadius.dark.md, M = (G = (Y = o.customRadius) == null ? void 0 : Y.light) == null ? void 0 : G.xl, f = Le({
-    spacingScale: c,
+  ), 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({
+    spacingScale: u,
     mdBorderRadius: E,
-    contentBgColor: y,
-    buttonRadius: M,
-    primaryColor: i,
-    onPrimaryColor: _,
+    contentBgColor: v,
+    buttonRadius: V,
+    primaryColor: l,
+    onPrimaryColor: O,
     fontFamilyPrimary: C,
-    darkTextColor: S,
-    isMobile: x,
-    textColor: g
+    darkTextColor: b,
+    isMobile: g,
+    textColor: p
   });
   return /* @__PURE__ */ w(
     Ie,
@@ -1498,138 +1498,147 @@ const ke = ({
         description: e.subtitle || "",
         rules: null
       },
-      headline: r("chanceGame.headlinePrizeWheel"),
-      finalImage: p,
+      headline: n("chanceGame.headlinePrizeWheel"),
+      finalImage: x,
       children: [
-        /* @__PURE__ */ t(m, { sx: f.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
-          Ve,
+        /* @__PURE__ */ t(d, { sx: f.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
+          Ne,
           {
             infoPage: e,
-            enableReset: s,
-            contentColor: g,
-            primaryColor: i,
-            secondaryColor: u,
-            onPrimaryColor: _ || "#FFFFFF",
-            backgroundColor: y,
+            enableReset: c,
+            contentColor: p,
+            primaryColor: l,
+            secondaryColor: m,
+            onPrimaryColor: O || "#FFFFFF",
+            backgroundColor: v,
             dangerColor: h,
-            shimmerColor: i,
-            brandingLogo: F,
+            shimmerColor: l,
+            brandingLogo: k,
             isDark: !0,
             showTitleBlock: !1,
             variant: "overlay"
           }
         ) }),
         /* @__PURE__ */ t(
-          zt,
+          _t,
           {
-            brandingLogo: F,
-            textColor: S,
+            brandingLogo: k,
+            textColor: b,
             label: ((q = e.labels) == null ? void 0 : q.sponsor) || null,
-            primaryUrl: (Q = (V = e.branding) == null ? void 0 : V.urls) == null ? void 0 : Q.primary_url,
+            primaryUrl: (Q = (N = e.branding) == null ? void 0 : N.urls) == null ? void 0 : Q.primary_url,
             secondaryUrl: (ce = (oe = e.branding) == null ? void 0 : oe.urls) == null ? void 0 : ce.secondary_url
           }
         )
       ]
     }
   );
-}, Wt = (e) => {
-  const { infoPage: s } = ct(e.entityId, "chance-game", e.sdk), a = () => {
-    if (s && s.id !== "not-found") {
-      const o = Object.keys(Ke);
-      if (s.language && o.includes(s.language))
-        return s.language;
-      if (s.language)
+}, Dt = (e) => {
+  const { infoPage: c } = ut(e.entityId, "chance-game", e.sdk), a = () => {
+    if (c && c.id !== "not-found") {
+      const o = Object.keys(Je);
+      if (c.language && o.includes(c.language))
+        return c.language;
+      if (c.language)
         return "en";
     }
     return e.language || "en";
-  }, [r, x] = qe(!1);
+  }, [n, g] = qe(!1);
   if (Qe(() => {
     const o = a();
-    tt(o).then(() => x(!0));
-  }, [e.language, s]), !s || !r)
-    return /* @__PURE__ */ t(at, { my: 20 });
-  if (s.id === "not-found")
-    return /* @__PURE__ */ t(St, { template: e.template });
+    tt(o).then(() => g(!0));
+  }, [e.language, c]), !c || !n)
+    return /* @__PURE__ */ t(dt, { my: 20 });
+  if (c.id === "not-found")
+    return /* @__PURE__ */ t(Rt, { template: e.template });
   if (e.template === ue.STANDARD) {
-    const o = e.imagePosition, c = e.defaultImagePlaceholderUrl;
-    return e.variant === ne.PENALTY_SHOOTOUT ? /* @__PURE__ */ t(ye, { infoPage: s }) : e.variant === ne.PICK_ONE_OF_X ? /* @__PURE__ */ t(
-      kt,
+    const o = e.imagePosition, u = e.defaultImagePlaceholderUrl;
+    return e.variant === ne.PENALTY_SHOOTOUT ? /* @__PURE__ */ t(be, { infoPage: c }) : e.variant === ne.PICK_ONE_OF_X ? /* @__PURE__ */ t(
+      Ft,
       {
-        infoPage: s,
+        infoPage: c,
         imagePosition: o,
-        defaultImagePlaceholderUrl: c
+        defaultImagePlaceholderUrl: u
       }
     ) : /* @__PURE__ */ t(
-      wt,
+      zt,
       {
-        infoPage: s,
+        infoPage: c,
         imagePosition: o,
-        defaultImagePlaceholderUrl: c
+        defaultImagePlaceholderUrl: u
       }
     );
   }
   if (e.template === ue.OVERLAY) {
     const o = e.defaultImagePlaceholderUrl;
-    return e.variant === ne.PENALTY_SHOOTOUT ? /* @__PURE__ */ t(ye, { infoPage: s }) : e.variant === ne.PICK_ONE_OF_X ? /* @__PURE__ */ t(
-      Rt,
+    return e.variant === ne.PENALTY_SHOOTOUT ? /* @__PURE__ */ t(be, { infoPage: c }) : e.variant === ne.PICK_ONE_OF_X ? /* @__PURE__ */ t(
+      Wt,
       {
-        infoPage: s,
+        infoPage: c,
         defaultImagePlaceholderUrl: o
       }
     ) : /* @__PURE__ */ t(
-      Ft,
+      Ot,
       {
-        infoPage: s,
+        infoPage: c,
         defaultImagePlaceholderUrl: o
       }
     );
   }
-  return e.variant === ne.PENALTY_SHOOTOUT ? /* @__PURE__ */ t(ye, { infoPage: s }) : e.variant === ne.PICK_ONE_OF_X ? /* @__PURE__ */ t(yt, { infoPage: s }) : /* @__PURE__ */ t(vt, { infoPage: s });
-}, _t = (e) => {
-  const [s, a] = Z.useState(!1), r = Z.useRef(
+  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 });
+}, Bt = (e) => {
+  const [c, a] = Z.useState(!1), n = ot(e.language), g = Z.useRef(
     `chance-game-shadow-root-${Math.random().toString(36).substring(2, 11)}`
-  ), x = Z.useRef(null), o = Z.useRef(null), c = Z.useRef(null), d = Z.useRef(null);
+  ), o = Z.useRef(null), u = Z.useRef(null), i = Z.useRef(null), [r, s] = Z.useState(null);
   Z.useEffect(() => {
-    if (x.current)
-      return x.current.shadowRoot ? (o.current = x.current.shadowRoot, c.current = o.current.getElementById(
-        r.current
-      ), c.current || (c.current = document.createElement("div"), c.current.id = r.current, o.current.appendChild(c.current))) : (o.current = x.current.attachShadow({ mode: "open" }), c.current = document.createElement("div"), c.current.id = r.current, o.current.appendChild(c.current)), d.current || (d.current = ot({
-        key: "chance-game-css",
-        prepend: !0,
-        container: o.current
-      })), a(!0), () => {
-        a(!1);
-      };
-  }, []);
-  const n = e.themeOptions, l = {
-    ...n,
-    mode: e.template === ue.OVERLAY ? "dark" : n == null ? void 0 : n.mode
-  }, F = /* @__PURE__ */ t(m, { ref: x }), O = s && x.current && c.current && d.current ? st(
-    /* @__PURE__ */ t(nt, { value: d.current, children: /* @__PURE__ */ t(rt, { containerRef: x, children: /* @__PURE__ */ t(
-      lt,
+    if (!o.current) return;
+    o.current.shadowRoot ? (u.current = o.current.shadowRoot, i.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);
+    return s(
+      (l) => (l == null ? void 0 : l.key) === p ? l : rt(
+        "chance-game",
+        u.current,
+        n
+      )
+    ), a(!0), () => {
+      a(!1);
+    };
+  }, [n]);
+  const k = e.themeOptions, z = {
+    ...k,
+    mode: e.template === ue.OVERLAY ? "dark" : k == null ? void 0 : k.mode
+  }, x = /* @__PURE__ */ t(d, { ref: o }), b = c && o.current && i.current && r ? mt(
+    // 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,
       {
-        customTheme: l,
-        mode: l == null ? void 0 : l.mode,
-        shadowRootElement: c.current,
+        customTheme: z,
+        mode: z == null ? void 0 : z.mode,
+        shadowRootElement: i.current,
+        direction: n,
         children: /* @__PURE__ */ t(
-          it,
+          st,
           {
-            shadowRootElement: c.current,
+            shadowRootElement: i.current,
             leadPhoneCountryCode: null,
             language: null,
             optionsLayout: null,
+            direction: n,
             children: e.children
           }
         )
       }
-    ) }) }),
-    c.current
+    ) }) }, r.key),
+    i.current
   ) : null;
   return /* @__PURE__ */ w(re, { children: [
-    F,
-    O
+    x,
+    b
   ] });
-}, Ot = (e) => /* @__PURE__ */ t(_t, { ...e, children: /* @__PURE__ */ t(Wt, { ...e }) }), Mt = Ot;
+}, Ct = (e) => /* @__PURE__ */ t(Bt, { ...e, children: /* @__PURE__ */ t(Dt, { ...e }) }), Pt = Ct;
 export {
-  Mt as ChanceGame
+  Pt as ChanceGame
 };