fansunited-frontend-components 0.0.39 → 0.0.40

package/chunks/ChanceGameEmbedVariant-DWqOTf4o.js

@@ -0,0 +1,1051 @@
+import { jsxs as a, Fragment as L, jsx as t } from "react/jsx-runtime";
+import { e as j, S as _, u as E, f as V, h as B, j as v, k, g as O, W as z, B as i, T as g, A as Y, D as X, U as q } from "./PrizeCard-gMp7I66d.js";
+import { h as K, g as ie, s as F, u as Z, e as ne, a as ae } from "./useImageVariant-pnFelF9A.js";
+import "react";
+import { R as P, A as le } from "./NotFoundSkeleton-B3RNa8KJ.js";
+import "react-dom";
+import { A as J } from "./AlertMessage-cjTHrMUK.js";
+import { R as Q } from "./index-2s5UkG1y.js";
+import { d as oe, a as re } from "./default-quiz-bg-vertical-CT7rrg9o.js";
+import { u as ce } from "./useInfoPage-DPkzE5Gn.js";
+import { P as de, a as se, b as ge } from "./PickOneOfX-DYQ4c1o2.js";
+const xe = (e) => {
+  var o, n, l, m;
+  return {
+    // Main headline section with background image
+    headlineSection: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: e.isMobile ? "1" : "0 0 50%",
+      width: e.isMobile ? "100%" : "50%",
+      minWidth: e.isMobile ? "100%" : "50%",
+      maxWidth: e.isMobile ? "100%" : "50%",
+      backgroundImage: e.finalImage ? `url("${e.finalImage}")` : "none",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: e.borderRadius.md,
+      borderTopRightRadius: e.isMobile ? e.borderRadius.md : 0,
+      borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile ? "210px" : "430px",
+      "&::before": e.finalImage ? {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      } : {}
+    },
+    // Headline section without image
+    headlineSectionNoImage: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: e.isMobile ? "1" : "0 0 50%",
+      width: e.isMobile ? "100%" : "50%",
+      minWidth: e.isMobile ? "100%" : "50%",
+      maxWidth: e.isMobile ? "100%" : "50%",
+      borderTopLeftRadius: e.borderRadius.md,
+      borderTopRightRadius: e.isMobile ? e.borderRadius.md : 0,
+      borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile ? "210px" : "430px",
+      backgroundColor: ((o = e.brandingColors) == null ? void 0 : o.backgroundColor) || e.textColor + "10"
+    },
+    // Embed code headline section (for poll-vote and classic-quiz-play)
+    embedCodeHeadlineSection: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: e.isMobile ? "1" : "0 0 50%",
+      width: e.isMobile ? "100%" : "50%",
+      minWidth: e.isMobile ? "100%" : "50%",
+      maxWidth: e.isMobile ? "100%" : "50%",
+      borderTopLeftRadius: e.borderRadius.md,
+      borderTopRightRadius: e.isMobile ? e.borderRadius.md : 0,
+      borderBottomLeftRadius: e.isMobile ? 0 : e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile ? "210px" : "430px"
+    },
+    // AspectRatio container for embed code
+    aspectRatioContainer: {
+      borderRadius: 0,
+      width: "100%",
+      height: "100%"
+    },
+    // Headline content wrapper
+    headlineContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      gap: e.spacingScale.xl,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Embed code headline content (shown in question area when embed code is present)
+    embedCodeHeadlineContent: {
+      px: e.spacingScale.lg,
+      pt: e.spacingScale.lg,
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.md
+    },
+    // Headline typography (with image background)
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((n = e.brandingColors) == null ? void 0 : n.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Headline typography (without image background)
+    headlineTextNoImage: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: e.secondaryColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title typography (with image background)
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((l = e.brandingColors) == null ? void 0 : l.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Title typography (without image background)
+    titleTextNoImage: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description typography (with image background)
+    descriptionText: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((m = e.brandingColors) == null ? void 0 : m.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description typography (without image background)
+    descriptionTextNoImage: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: e.secondaryColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Question area / content section
+    questionArea: {
+      flex: e.isMobile ? "1" : "0 0 50%",
+      width: e.isMobile ? "100%" : "50%",
+      minWidth: e.isMobile ? "100%" : "50%",
+      maxWidth: e.isMobile ? "100%" : "50%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center"
+    }
+  };
+}, Fe = ({
+  entity: e,
+  headline: o,
+  finalImage: n,
+  children: l,
+  embedCodeContainerRef: m,
+  hasEmbedCode: C = !1,
+  brandingLogo: h,
+  renderPresentedBy: x,
+  rulesDisplay: S
+}) => {
+  var $, U;
+  const w = j(), T = _(), u = e.type === "poll" || e.type === "match-quiz" ? T : w, R = E(), y = V(), A = B().primary, I = B().secondary, b = v(), r = (($ = e.branding) == null ? void 0 : $.colors) || null, f = ((U = e.branding) == null ? void 0 : U.urls) || null, M = (r == null ? void 0 : r.contentColor) || k().textColor, d = (r == null ? void 0 : r.secondaryColor) || k().textColor, D = (r == null ? void 0 : r.backgroundColor) || k().surfaceVariant, c = "60%", W = R.colorSchemes.dark.textColor, p = O(
+    z.SPLIT
+  ), s = xe({
+    finalImage: n,
+    spacingScale: y,
+    borderRadius: b,
+    fontFamilyPrimary: A,
+    fontFamilySecondary: I,
+    secondaryColor: d,
+    opacity: c,
+    bgcolor: K(D || ""),
+    textColor: M,
+    brandingColors: r,
+    darkTextColor: W,
+    imageBackgroundGradient: p,
+    isMobile: u
+  }), H = ie(
+    f == null ? void 0 : f.primaryUrl,
+    f == null ? void 0 : f.secondaryUrl,
+    "image"
+  ), ee = () => {
+    H && window.open(H, "_blank", "noopener,noreferrer");
+  }, te = (N, G) => H ? typeof window > "u" ? /* @__PURE__ */ t(
+    i,
+    {
+      component: "a",
+      href: H,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        ...G,
+        cursor: "pointer",
+        textDecoration: "none"
+      },
+      children: N
+    }
+  ) : /* @__PURE__ */ t(
+    i,
+    {
+      sx: {
+        ...G,
+        cursor: "pointer"
+      },
+      onClick: ee,
+      children: N
+    }
+  ) : /* @__PURE__ */ t(i, { sx: G, children: N });
+  return /* @__PURE__ */ a(L, { children: [
+    C && m ? /* @__PURE__ */ t(i, { sx: s.embedCodeHeadlineSection, children: /* @__PURE__ */ t(
+      le,
+      {
+        ratio: "16/9",
+        sx: s.aspectRatioContainer,
+        slotProps: { content: { sx: { height: "100%" } } },
+        children: /* @__PURE__ */ t(i, { ref: m })
+      }
+    ) }) : n ? te(
+      /* @__PURE__ */ a(i, { sx: s.headlineContent, children: [
+        /* @__PURE__ */ a(i, { children: [
+          /* @__PURE__ */ a(
+            i,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: u ? "center" : "flex-start",
+                gap: y["3xs"]
+              },
+              children: [
+                /* @__PURE__ */ t(g, { sx: s.headlineText, children: o }),
+                /* @__PURE__ */ t(P, { rulesDisplay: S, rules: e.rules || "" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ a(i, { sx: s.contentContainer, children: [
+            /* @__PURE__ */ t(g, { sx: s.titleText, children: e.title }),
+            /* @__PURE__ */ t(g, { sx: s.descriptionText, children: F(e.description) })
+          ] })
+        ] }),
+        h && !u && x && /* @__PURE__ */ t(i, { children: x((r == null ? void 0 : r.contentColor) || W) })
+      ] }),
+      s.headlineSection
+    ) : /* @__PURE__ */ t(i, { sx: s.headlineSectionNoImage, children: /* @__PURE__ */ a(i, { sx: s.headlineContent, children: [
+      /* @__PURE__ */ a(i, { children: [
+        /* @__PURE__ */ a(
+          i,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: u ? "center" : "flex-start",
+              gap: y["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ t(g, { sx: s.headlineTextNoImage, children: o }),
+              /* @__PURE__ */ t(P, { rulesDisplay: S, rules: e.rules || "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(i, { sx: s.contentContainer, children: [
+          /* @__PURE__ */ t(g, { sx: s.titleTextNoImage, children: e.title }),
+          /* @__PURE__ */ t(g, { sx: s.descriptionTextNoImage, children: F(e.description) })
+        ] })
+      ] }),
+      h && !u && x && /* @__PURE__ */ t(i, { children: x(M) })
+    ] }) }),
+    /* @__PURE__ */ a(i, { sx: s.questionArea, children: [
+      C && m && /* @__PURE__ */ t(i, { sx: s.embedCodeHeadlineContent, children: /* @__PURE__ */ a(i, { children: [
+        /* @__PURE__ */ a(
+          i,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: y["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ t(
+                g,
+                {
+                  sx: {
+                    ...s.headlineTextNoImage,
+                    textAlign: "center"
+                  },
+                  children: o
+                }
+              ),
+              /* @__PURE__ */ t(P, { rulesDisplay: S, rules: e.rules || "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(i, { sx: s.contentContainer, children: [
+          /* @__PURE__ */ t(
+            g,
+            {
+              sx: {
+                ...s.titleTextNoImage,
+                textAlign: "center"
+              },
+              children: e.title
+            }
+          ),
+          /* @__PURE__ */ t(
+            g,
+            {
+              sx: {
+                ...s.descriptionTextNoImage,
+                textAlign: "center"
+              },
+              children: F(e.description)
+            }
+          )
+        ] })
+      ] }) }),
+      l
+    ] })
+  ] });
+}, me = (e) => {
+  var o, n, l;
+  return {
+    // Wrapper container for the entire split layout
+    wrapper: {
+      display: "flex",
+      flexDirection: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "column" : "row",
+      width: "100%"
+    },
+    // Desktop image section with background image and overlay
+    desktopImageSection: {
+      display: e.isLarge && !e.alwaysShowImage ? "none" : "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: e.isMobile || e.isLarge && e.alwaysShowImage ? "1" : "0 0 50%",
+      width: e.isMobile || e.isLarge && e.alwaysShowImage ? "100%" : "50%",
+      minWidth: e.isMobile || e.isLarge && e.alwaysShowImage ? "100%" : "50%",
+      maxWidth: e.isMobile || e.isLarge && e.alwaysShowImage ? "100%" : "50%",
+      backgroundImage: `url("${e.finalImage}")`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: e.isTabulated ? 0 : e.borderRadius.md,
+      borderTopRightRadius: e.isMobile || e.isLarge && e.alwaysShowImage ? e.isTabulated ? 0 : e.borderRadius.md : 0,
+      borderBottomLeftRadius: e.isMobile || e.isLarge && e.alwaysShowImage ? 0 : e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile || e.isLarge && e.alwaysShowImage ? "210px" : "430px",
+      maxHeight: e.isMobile || e.isLarge && e.alwaysShowImage ? "auto" : "100%",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      }
+    },
+    // Image section content wrapper
+    imageSectionContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: e.spacingScale.xl
+    },
+    // Headline text
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((o = e.brandingColors) == null ? void 0 : o.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isLarge ? "center" : "left"
+    },
+    // Content container (title + description)
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title text
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((n = e.brandingColors) == null ? void 0 : n.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isLarge ? "center" : "left"
+    },
+    // Description text
+    descriptionText: {
+      fontWeight: 500,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isLarge ? "center" : "left"
+    },
+    // Presented by desktop container
+    presentedByDesktop: {
+      display: "block"
+    },
+    // Question/Content area (right side on desktop, below image on mobile)
+    questionArea: {
+      flex: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "1" : "0 0 50%",
+      width: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "100%" : "50%",
+      minWidth: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "100%" : "50%",
+      maxWidth: e.isMobile || e.isLarge && !e.alwaysShowImage || e.alwaysShowImage && e.isLarge ? "100%" : "50%",
+      display: "flex",
+      flexDirection: "column"
+    }
+  };
+}, Pe = ({
+  entity: e,
+  headline: o,
+  finalImage: n,
+  brandingContent: l,
+  children: m,
+  isTabulated: C = !1,
+  alwaysShowImage: h = !1,
+  rulesDisplay: x
+}) => {
+  var f;
+  const S = j(), w = _(), T = E(), u = V(), R = B().primary, y = B().secondary, A = v(), I = O(
+    z.SPLIT
+  ), b = ((f = e.branding) == null ? void 0 : f.colors) || null, r = me({
+    finalImage: n,
+    spacingScale: u,
+    borderRadius: A,
+    fontFamilyPrimary: R,
+    fontFamilySecondary: y,
+    brandingColors: b,
+    darkTextColor: T.colorSchemes.dark.textColor,
+    imageBackgroundGradient: I,
+    isMobile: S,
+    isLarge: w,
+    isTabulated: C,
+    alwaysShowImage: h
+  });
+  return /* @__PURE__ */ a(i, { sx: r.wrapper, children: [
+    /* @__PURE__ */ t(i, { sx: r.desktopImageSection, children: /* @__PURE__ */ a(i, { sx: r.imageSectionContent, children: [
+      /* @__PURE__ */ a(i, { children: [
+        /* @__PURE__ */ a(
+          i,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: u["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ t(g, { level: "body-sm", sx: r.headlineText, children: o }),
+              /* @__PURE__ */ t(P, { rulesDisplay: x, rules: e.rules || "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(i, { sx: r.contentContainer, children: [
+          /* @__PURE__ */ t(g, { level: "body-lg", sx: r.titleText, children: e.title }),
+          /* @__PURE__ */ t(g, { level: "body-md", sx: r.descriptionText, children: F(e.description) })
+        ] })
+      ] }),
+      /* @__PURE__ */ t(i, { sx: r.presentedByDesktop, children: l })
+    ] }) }),
+    /* @__PURE__ */ t(i, { sx: r.questionArea, children: m })
+  ] });
+}, fe = (e) => {
+  var o, n, l;
+  return {
+    // Main headline section with background image
+    headlineSection: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      flex: "0.5",
+      backgroundImage: `url("${e.finalImage}")`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: e.mdBorderRadius,
+      borderTopRightRadius: e.isMobile ? e.mdBorderRadius : 0,
+      borderBottomLeftRadius: e.isMobile ? 0 : e.mdBorderRadius,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative",
+      minHeight: e.isMobile ? "210px" : "430px",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      }
+    },
+    // Headline content wrapper
+    headlineContent: {
+      zIndex: 1,
+      height: "100%",
+      p: e.spacingScale.xl,
+      gap: e.spacingScale.xl,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Headline text
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((o = e.brandingColors) == null ? void 0 : o.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title text
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((n = e.brandingColors) == null ? void 0 : n.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description text
+    descriptionText: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Presented by desktop container
+    presentedByDesktop: {
+      display: e.isMobile ? "none" : "block"
+    },
+    // Question area (error section)
+    questionArea: {
+      flex: "0.5",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: e.spacingScale.md,
+      p: e.spacingScale.lg
+    },
+    // Presented by mobile container
+    presentedByMobile: {
+      display: e.isMobile ? "block" : "none"
+    },
+    // CTA container
+    ctaContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    // CTA content wrapper
+    ctaContentWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: e.spacingScale.lg
+    },
+    // Buttons container
+    buttonsContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px"
+    },
+    // Try again button
+    tryAgainButton: {
+      display: "flex",
+      py: e.spacingScale.xs,
+      px: "16px",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      borderRadius: e.borderRadius.xl,
+      color: e.textPrimary,
+      bgcolor: e.surfaceColor,
+      "&:hover": {
+        bgcolor: e.onSurfaceColor
+      },
+      fontSize: "0.9375em"
+    },
+    // Try again button content
+    tryAgainButtonContent: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      alignSelf: "stretch"
+    },
+    // Try again icon
+    tryAgainIcon: {
+      display: "flex",
+      width: "16px",
+      height: "16px",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      color: e.textPrimary
+    },
+    // Try again text
+    tryAgainText: {
+      color: e.textPrimary,
+      textAlign: "center",
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "0.8125em",
+      fontStyle: "normal",
+      fontWeight: 500,
+      lineHeight: "22px",
+      letterSpacing: "0.46px",
+      textTransform: "uppercase"
+    }
+  };
+}, Le = (e) => {
+  var c;
+  const o = E(), n = j(), l = ((c = e.entity.branding) == null ? void 0 : c.colors) || null, m = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : n ? oe : re, C = Z(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: m
+    },
+    z.SPLIT
+  ), { t: h } = Y(), x = k().textPrimary, S = k().surface, w = k().onSurface, T = (l == null ? void 0 : l.backgroundColor) || k().surfaceVariant, u = v(), R = B().secondary, y = B().primary, A = v().md, I = k().textColor, b = V(), r = O(
+    z.SPLIT
+  ), f = e.customAlertTitle ?? (e.isApiError ? h("common.error.title") : h("common.authentication.accessRequired")), M = e.customAlertMessage ?? (e.isApiError ? e.apiErrorMessage || h("common.error.message") : h("common.authentication.invalidOrMissingAuth")), d = fe({
+    finalImage: C,
+    spacingScale: b,
+    borderRadius: v(),
+    fontFamilyPrimary: y,
+    fontFamilySecondary: R,
+    mdBorderRadius: A,
+    textColor: I,
+    brandingColors: l,
+    darkTextColor: o.colorSchemes.dark.textColor,
+    imageBackgroundGradient: r,
+    textPrimary: x,
+    surfaceColor: S,
+    onSurfaceColor: w,
+    isMobile: n
+  }), D = () => !e.isApiError || !e.toggleTryAgain ? /* @__PURE__ */ t(L, {}) : /* @__PURE__ */ t(
+    i,
+    {
+      sx: {
+        p: b.lg,
+        gap: b.lg,
+        display: "flex",
+        flexDirection: "column",
+        backdropFilter: "blur(4px)",
+        bgcolor: `rgba(${T ? K(T || "").replace(/[^\d,]/g, "") : ""}, 0.5)`,
+        borderRadius: u.sm
+      },
+      children: /* @__PURE__ */ t(i, { sx: d.ctaContainer, children: /* @__PURE__ */ t(i, { sx: d.ctaContentWrapper, children: /* @__PURE__ */ t(i, { sx: d.buttonsContainer, children: /* @__PURE__ */ t(X, { sx: d.tryAgainButton, onClick: e.toggleTryAgain, children: /* @__PURE__ */ a(i, { sx: d.tryAgainButtonContent, children: [
+        /* @__PURE__ */ t(Q, { sx: d.tryAgainIcon }),
+        /* @__PURE__ */ t(g, { sx: d.tryAgainText, children: e.tryAgainButtonText })
+      ] }) }) }) }) })
+    }
+  );
+  return /* @__PURE__ */ a(L, { children: [
+    /* @__PURE__ */ t(i, { sx: d.headlineSection, children: /* @__PURE__ */ a(i, { sx: d.headlineContent, children: [
+      /* @__PURE__ */ a(i, { children: [
+        /* @__PURE__ */ a(
+          i,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: n ? "center" : "left",
+              gap: b["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ t(g, { level: "body-sm", sx: d.headlineText, children: e.headline }),
+              /* @__PURE__ */ t(
+                P,
+                {
+                  rulesDisplay: e.rulesDisplay,
+                  rules: e.entity.rules || ""
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(i, { sx: d.contentContainer, children: [
+          /* @__PURE__ */ t(g, { level: "body-lg", sx: d.titleText, children: e.entity.title }),
+          /* @__PURE__ */ t(g, { level: "body-md", sx: d.descriptionText, children: F(e.entity.description) })
+        ] })
+      ] }),
+      /* @__PURE__ */ t(i, { sx: d.presentedByDesktop, children: e.renderPresentedBy(
+        (l == null ? void 0 : l.contentColor) || o.colorSchemes.dark.textColor
+      ) })
+    ] }) }),
+    /* @__PURE__ */ a(i, { sx: d.questionArea, children: [
+      /* @__PURE__ */ t(
+        J,
+        {
+          variant: e.alertVariant || "error",
+          title: f,
+          message: M
+        }
+      ),
+      D(),
+      /* @__PURE__ */ t(i, { sx: d.presentedByMobile, children: e.renderPresentedBy((l == null ? void 0 : l.contentColor) || I) })
+    ] })
+  ] });
+}, ue = (e) => {
+  var o;
+  return {
+    // Main container with background overlay
+    mainContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "40px",
+      p: e.spacingScale.xl,
+      boxShadow: "md",
+      border: (o = e.brandingColors) != null && o.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
+      overflow: "hidden",
+      backgroundImage: e.backgroundImage,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      position: "relative",
+      borderRadius: e.borderRadius.md,
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        background: e.imageBackgroundGradient,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: "inherit",
+        zIndex: 0
+      }
+    },
+    // Headline section wrapper
+    headlineSection: {
+      display: "flex",
+      justifyContent: "space-between",
+      flex: "1 0 0",
+      alignSelf: "stretch"
+    },
+    // Headline content container
+    headlineContent: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      flex: "1 0 0",
+      gap: "16px"
+    },
+    // Headline content with z-index
+    headlineContentInner: {
+      zIndex: 10
+    },
+    // Headline typography
+    headlineText: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textAlign: e.isMobile ? "center" : "left",
+      color: e.secondaryColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      fontSize: "0.75em"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Title typography
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      textAlign: e.isMobile ? "center" : "left",
+      fontSize: "1.5em",
+      color: e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Description typography
+    descriptionText: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      textAlign: e.isMobile ? "center" : "left",
+      color: e.secondaryColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Bottom section container
+    bottomSection: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "24px",
+      zIndex: 1
+    },
+    // Footer container
+    footerContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexDirection: e.isMobile ? "column-reverse" : "row",
+      gap: e.spacingScale.md
+    },
+    ctaSection: {
+      borderRadius: e.borderRadius.md,
+      py: e.spacingScale.md,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      alignSelf: "stretch",
+      gap: e.spacingScale.md,
+      backdropFilter: "blur(4px)",
+      position: "relative",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: e.contentBgColor,
+        opacity: 0.25,
+        borderRadius: "inherit",
+        zIndex: 0,
+        backdropFilter: "blur(4px)"
+      },
+      "& > *": {
+        position: "relative",
+        zIndex: 1
+      }
+    },
+    // Buttons container
+    buttonsContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.md
+    },
+    // Try again button
+    tryAgainButton: {
+      display: "flex",
+      minHeight: "48px",
+      py: "12px",
+      pr: "24px",
+      pl: "16px",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      borderRadius: e.borderRadius.xl,
+      bgcolor: e.onSurfaceColor,
+      "&:hover": {
+        bgcolor: e.surfaceVariantColor
+      },
+      fontSize: "0.9375em"
+    },
+    // Try again button content
+    tryAgainButtonContent: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "8px",
+      alignSelf: "stretch"
+    },
+    // Try again icon
+    tryAgainIcon: {
+      display: "flex",
+      width: "24px",
+      height: "24px",
+      justifyContent: "center",
+      alignItems: "center",
+      color: e.textPrimary
+    },
+    // Try again text
+    tryAgainText: {
+      color: e.textPrimary,
+      textAlign: "center",
+      fontFamily: e.fontFamilyPrimary,
+      fontSize: "0.9375em",
+      fontStyle: "normal",
+      fontWeight: 500,
+      lineHeight: "24px",
+      letterSpacing: "0.46px",
+      textTransform: "uppercase"
+    }
+  };
+}, Be = (e) => {
+  const o = V(), n = E(), l = j(), { t: m } = Y(), C = O(
+    z.OVERLAY
+  ), { brandingImage: h, brandingColors: x, brandingLogo: S } = ne(e.entity.branding || null), w = h || Z(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: e.defaultImagePlaceholderUrl || ""
+    },
+    z.OVERLAY
+  ), T = ae(w), u = (x == null ? void 0 : x.contentColor) || n.colorSchemes.dark.textColor, R = n.customFontFamily.dark.primary, y = n.customFontFamily.dark.secondary, A = n.customRadius.dark, I = n.border.dark.size, b = (x == null ? void 0 : x.backgroundColor) || n.colorSchemes.dark.surfaceVariant, r = n.colorSchemes.dark.onSurface, f = n.colorSchemes.dark.surfaceVariant, M = n.colorSchemes.dark.textPrimary, d = e.customAlertTitle ?? (e.isApiError ? m("common.error.title") : m("common.authentication.accessRequired")), D = e.customAlertMessage ?? (e.isApiError ? e.apiErrorMessage || m("common.error.message") : m("common.authentication.invalidOrMissingAuth")), c = ue({
+    spacingScale: o,
+    brandingColors: x,
+    secondaryColor: u,
+    fontFamilyPrimary: R,
+    fontFamilySecondary: y,
+    borderRadius: A,
+    borderSize: I,
+    darkTextColor: n.colorSchemes.dark.textColor,
+    backgroundImage: T,
+    imageBackgroundGradient: C,
+    contentBgColor: b,
+    onSurfaceColor: r,
+    surfaceVariantColor: f,
+    textPrimary: M,
+    isMobile: l
+  }), W = () => !e.isApiError || !e.toggleTryAgain ? /* @__PURE__ */ t(L, {}) : /* @__PURE__ */ t(i, { sx: c.ctaSection, children: /* @__PURE__ */ t(i, { sx: c.buttonsContainer, children: /* @__PURE__ */ t(X, { sx: c.tryAgainButton, onClick: e.toggleTryAgain, children: /* @__PURE__ */ a(i, { sx: c.tryAgainButtonContent, children: [
+    /* @__PURE__ */ t(Q, { sx: c.tryAgainIcon }),
+    /* @__PURE__ */ t(g, { sx: c.tryAgainText, children: e.tryAgainButtonText })
+  ] }) }) }) });
+  return /* @__PURE__ */ a(i, { sx: c.mainContainer, children: [
+    /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(i, { sx: c.headlineSection, children: /* @__PURE__ */ t(i, { sx: c.headlineContent, children: /* @__PURE__ */ a(i, { sx: c.headlineContentInner, children: [
+      /* @__PURE__ */ a(
+        i,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: l ? "center" : "left",
+            gap: o["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ t(g, { level: "body-sm", sx: c.headlineText, children: e.headline }),
+            /* @__PURE__ */ t(
+              P,
+              {
+                rulesDisplay: e.rulesDisplay,
+                isOverlayVariant: !0,
+                rules: e.entity.rules || ""
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ a(i, { sx: c.contentContainer, children: [
+        /* @__PURE__ */ t(g, { level: "h4", sx: c.titleText, children: e.entity.title }),
+        /* @__PURE__ */ t(g, { level: "body-lg", sx: c.descriptionText, children: F(e.entity.description) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ a(i, { sx: c.bottomSection, children: [
+      /* @__PURE__ */ t(
+        J,
+        {
+          variant: e.alertVariant || "error",
+          title: d,
+          message: D
+        }
+      ),
+      W(),
+      S ? /* @__PURE__ */ t(i, { sx: c.footerContainer, children: e.renderPresentedBy(n.colorSchemes.dark.textColor) }) : /* @__PURE__ */ t(L, {})
+    ] })
+  ] });
+}, ze = ({
+  entityId: e,
+  sdk: o,
+  children: n
+}) => {
+  const { infoPage: l } = ce(e, "chance-game", o);
+  return !l || l.id === "not-found" ? null : /* @__PURE__ */ t(L, { children: n(l) });
+}, De = ({
+  infoPage: e,
+  variant: o,
+  forceMobile: n
+}) => {
+  switch (o) {
+    case q.PENALTY_SHOOTOUT:
+      return /* @__PURE__ */ t(ge, { infoPage: e, forceMobile: n });
+    case q.PICK_ONE_OF_X:
+      return /* @__PURE__ */ t(se, { infoPage: e, forceMobile: n });
+    case q.PRIZE_WHEEL:
+    default:
+      return /* @__PURE__ */ t(de, { infoPage: e, forceMobile: n });
+  }
+};
+export {
+  ze as C,
+  Be as O,
+  Fe as S,
+  Pe as a,
+  Le as b,
+  De as c
+};