import { jsxs as l, Fragment as H, jsx as t } from "react/jsx-runtime";
import { i as E, h as U, u as G, e as q, c as I, b as A, a as b, m as O, W as D, B as i, f as J, w as N } from "./PrizeCard-C2El3VOB.js";
import { h as X, g as Q, s as L } from "./helpers-uh28Hksw.js";
import "react";
import { R as F, A as p } from "./NotFoundSkeleton-BJ7rW_uC.js";
import "react-dom";
import { T as s, B as ee } from "./Button-DPGn5NZd.js";
import { a as te } from "./AlertMessage-BKksUsV9.js";
import { R as ie } from "./OverlayApiErrorSkeleton-TzgpJPyA.js";
import { d as ne, a as ae, b as le } from "./useImageVariant-f37LbO43.js";
import { u as oe } from "./useInfoPage-BHdgKdme.js";
import { P as re, a as ce, b as de } from "./PickOneOfX-gVM5GmqF.js";
const se = (e) => {
  var r, o, n, 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: ((r = e.brandingColors) == null ? void 0 : r.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: ((o = e.brandingColors) == null ? void 0 : o.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: ((n = e.brandingColors) == null ? void 0 : n.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"
    }
  };
}, ke = ({
  entity: e,
  headline: r,
  finalImage: o,
  children: n,
  embedCodeContainerRef: m,
  hasEmbedCode: C = !1,
  brandingLogo: h,
  renderPresentedBy: f,
  rulesDisplay: S
}) => {
  var _, $;
  const R = E(), T = U(), x = e.type === "poll" || e.type === "match-quiz" ? T : R, M = G(), u = q(), k = I().primary, w = I().secondary, y = A(), a = ((_ = e.branding) == null ? void 0 : _.colors) || null, g = (($ = e.branding) == null ? void 0 : $.urls) || null, P = (a == null ? void 0 : a.contentColor) || b().textColor, d = (a == null ? void 0 : a.secondaryColor) || b().textColor, v = (a == null ? void 0 : a.backgroundColor) || b().surfaceVariant, B = "60%", V = M.colorSchemes.dark.textColor, K = O(
    D.SPLIT
  ), c = se({
    finalImage: o,
    spacingScale: u,
    borderRadius: y,
    fontFamilyPrimary: k,
    fontFamilySecondary: w,
    secondaryColor: d,
    opacity: B,
    bgcolor: X(v || ""),
    textColor: P,
    brandingColors: a,
    darkTextColor: V,
    imageBackgroundGradient: K,
    isMobile: x
  }), W = Q(
    g == null ? void 0 : g.primaryUrl,
    g == null ? void 0 : g.secondaryUrl,
    "image"
  ), Y = () => {
    W && window.open(W, "_blank", "noopener,noreferrer");
  }, Z = (z, j) => W ? typeof window > "u" ? /* @__PURE__ */ t(
    i,
    {
      component: "a",
      href: W,
      target: "_blank",
      rel: "noopener noreferrer",
      sx: {
        ...j,
        cursor: "pointer",
        textDecoration: "none"
      },
      children: z
    }
  ) : /* @__PURE__ */ t(
    i,
    {
      sx: {
        ...j,
        cursor: "pointer"
      },
      onClick: Y,
      children: z
    }
  ) : /* @__PURE__ */ t(i, { sx: j, children: z });
  return /* @__PURE__ */ l(H, { children: [
    C && m ? /* @__PURE__ */ t(i, { sx: c.embedCodeHeadlineSection, children: /* @__PURE__ */ t(
      p,
      {
        ratio: "16/9",
        sx: c.aspectRatioContainer,
        slotProps: { content: { sx: { height: "100%" } } },
        children: /* @__PURE__ */ t(i, { ref: m })
      }
    ) }) : o ? Z(
      /* @__PURE__ */ l(i, { sx: c.headlineContent, children: [
        /* @__PURE__ */ l(i, { children: [
          /* @__PURE__ */ l(
            i,
            {
              sx: {
                display: "flex",
                alignItems: "center",
                justifyContent: x ? "center" : "flex-start",
                gap: u["3xs"]
              },
              children: [
                /* @__PURE__ */ t(s, { sx: c.headlineText, children: r }),
                /* @__PURE__ */ t(F, { rulesDisplay: S, rules: e.rules || "" })
              ]
            }
          ),
          /* @__PURE__ */ l(i, { sx: c.contentContainer, children: [
            /* @__PURE__ */ t(s, { sx: c.titleText, children: e.title }),
            /* @__PURE__ */ t(s, { sx: c.descriptionText, children: L(e.description) })
          ] })
        ] }),
        h && !x && f && /* @__PURE__ */ t(i, { children: f((a == null ? void 0 : a.contentColor) || V) })
      ] }),
      c.headlineSection
    ) : /* @__PURE__ */ t(i, { sx: c.headlineSectionNoImage, children: /* @__PURE__ */ l(i, { sx: c.headlineContent, children: [
      /* @__PURE__ */ l(i, { children: [
        /* @__PURE__ */ l(
          i,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              justifyContent: x ? "center" : "flex-start",
              gap: u["3xs"]
            },
            children: [
              /* @__PURE__ */ t(s, { sx: c.headlineTextNoImage, children: r }),
              /* @__PURE__ */ t(F, { rulesDisplay: S, rules: e.rules || "" })
            ]
          }
        ),
        /* @__PURE__ */ l(i, { sx: c.contentContainer, children: [
          /* @__PURE__ */ t(s, { sx: c.titleTextNoImage, children: e.title }),
          /* @__PURE__ */ t(s, { sx: c.descriptionTextNoImage, children: L(e.description) })
        ] })
      ] }),
      h && !x && f && /* @__PURE__ */ t(i, { children: f(P) })
    ] }) }),
    /* @__PURE__ */ l(i, { sx: c.questionArea, children: [
      C && m && /* @__PURE__ */ t(i, { sx: c.embedCodeHeadlineContent, children: /* @__PURE__ */ l(i, { children: [
        /* @__PURE__ */ l(
          i,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              gap: u["3xs"]
            },
            children: [
              /* @__PURE__ */ t(
                s,
                {
                  sx: {
                    ...c.headlineTextNoImage,
                    textAlign: "center"
                  },
                  children: r
                }
              ),
              /* @__PURE__ */ t(F, { rulesDisplay: S, rules: e.rules || "" })
            ]
          }
        ),
        /* @__PURE__ */ l(i, { sx: c.contentContainer, children: [
          /* @__PURE__ */ t(
            s,
            {
              sx: {
                ...c.titleTextNoImage,
                textAlign: "center"
              },
              children: e.title
            }
          ),
          /* @__PURE__ */ t(
            s,
            {
              sx: {
                ...c.descriptionTextNoImage,
                textAlign: "center"
              },
              children: L(e.description)
            }
          )
        ] })
      ] }) }),
      n
    ] })
  ] });
}, ge = (e) => {
  var r, o, n;
  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: ((r = e.brandingColors) == null ? void 0 : r.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: ((o = e.brandingColors) == null ? void 0 : o.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: ((n = e.brandingColors) == null ? void 0 : n.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"
    }
  };
}, Ae = ({
  entity: e,
  headline: r,
  finalImage: o,
  brandingContent: n,
  children: m,
  isTabulated: C = !1,
  alwaysShowImage: h = !1,
  rulesDisplay: f
}) => {
  var g;
  const S = E(), R = U(), T = G(), x = q(), M = I().primary, u = I().secondary, k = A(), w = O(
    D.SPLIT
  ), y = ((g = e.branding) == null ? void 0 : g.colors) || null, a = ge({
    finalImage: o,
    spacingScale: x,
    borderRadius: k,
    fontFamilyPrimary: M,
    fontFamilySecondary: u,
    brandingColors: y,
    darkTextColor: T.colorSchemes.dark.textColor,
    imageBackgroundGradient: w,
    isMobile: S,
    isLarge: R,
    isTabulated: C,
    alwaysShowImage: h
  });
  return /* @__PURE__ */ l(i, { sx: a.wrapper, children: [
    /* @__PURE__ */ t(i, { sx: a.desktopImageSection, children: /* @__PURE__ */ l(i, { sx: a.imageSectionContent, children: [
      /* @__PURE__ */ l(i, { children: [
        /* @__PURE__ */ l(
          i,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              gap: x["3xs"]
            },
            children: [
              /* @__PURE__ */ t(s, { level: "body-sm", sx: a.headlineText, children: r }),
              /* @__PURE__ */ t(F, { rulesDisplay: f, rules: e.rules || "" })
            ]
          }
        ),
        /* @__PURE__ */ l(i, { sx: a.contentContainer, children: [
          /* @__PURE__ */ t(s, { level: "body-lg", sx: a.titleText, children: e.title }),
          /* @__PURE__ */ t(s, { level: "body-md", sx: a.descriptionText, children: L(e.description) })
        ] })
      ] }),
      /* @__PURE__ */ t(i, { sx: a.presentedByDesktop, children: n })
    ] }) }),
    /* @__PURE__ */ t(i, { sx: a.questionArea, children: m })
  ] });
}, me = (e) => {
  var r, o, n;
  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: ((r = e.brandingColors) == null ? void 0 : r.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: ((o = e.brandingColors) == null ? void 0 : o.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: ((n = e.brandingColors) == null ? void 0 : n.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 B;
  const r = G(), o = E(), n = ((B = e.entity.branding) == null ? void 0 : B.colors) || null, m = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : o ? ne : ae, C = le(
    {
      images: e.entity.images || null,
      imagePlaceholder: m
    },
    D.SPLIT
  ), { t: h } = J(), f = b().textPrimary, S = b().surface, R = b().onSurface, T = (n == null ? void 0 : n.backgroundColor) || b().surfaceVariant, x = A(), M = I().secondary, u = I().primary, k = A().md, w = b().textColor, y = q(), a = O(
    D.SPLIT
  ), g = e.customAlertTitle ?? (e.isApiError ? h("common.error.title") : h("common.authentication.accessRequired")), P = e.customAlertMessage ?? (e.isApiError ? e.apiErrorMessage || h("common.error.message") : h("common.authentication.invalidOrMissingAuth")), d = me({
    finalImage: C,
    spacingScale: y,
    borderRadius: A(),
    fontFamilyPrimary: u,
    fontFamilySecondary: M,
    mdBorderRadius: k,
    textColor: w,
    brandingColors: n,
    darkTextColor: r.colorSchemes.dark.textColor,
    imageBackgroundGradient: a,
    textPrimary: f,
    surfaceColor: S,
    onSurfaceColor: R,
    isMobile: o
  }), v = () => !e.isApiError || !e.toggleTryAgain ? /* @__PURE__ */ t(H, {}) : /* @__PURE__ */ t(
    i,
    {
      sx: {
        p: y.lg,
        gap: y.lg,
        display: "flex",
        flexDirection: "column",
        backdropFilter: "blur(4px)",
        bgcolor: `rgba(${T ? X(T || "").replace(/[^\d,]/g, "") : ""}, 0.5)`,
        borderRadius: x.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(ee, { sx: d.tryAgainButton, onClick: e.toggleTryAgain, children: /* @__PURE__ */ l(i, { sx: d.tryAgainButtonContent, children: [
        /* @__PURE__ */ t(ie, { sx: d.tryAgainIcon }),
        /* @__PURE__ */ t(s, { sx: d.tryAgainText, children: e.tryAgainButtonText })
      ] }) }) }) }) })
    }
  );
  return /* @__PURE__ */ l(H, { children: [
    /* @__PURE__ */ t(i, { sx: d.headlineSection, children: /* @__PURE__ */ l(i, { sx: d.headlineContent, children: [
      /* @__PURE__ */ l(i, { children: [
        /* @__PURE__ */ l(
          i,
          {
            sx: {
              display: "flex",
              alignItems: "center",
              justifyContent: o ? "center" : "left",
              gap: y["3xs"]
            },
            children: [
              /* @__PURE__ */ t(s, { level: "body-sm", sx: d.headlineText, children: e.headline }),
              /* @__PURE__ */ t(
                F,
                {
                  rulesDisplay: e.rulesDisplay,
                  rules: e.entity.rules || ""
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ l(i, { sx: d.contentContainer, children: [
          /* @__PURE__ */ t(s, { level: "body-lg", sx: d.titleText, children: e.entity.title }),
          /* @__PURE__ */ t(s, { level: "body-md", sx: d.descriptionText, children: L(e.entity.description) })
        ] })
      ] }),
      /* @__PURE__ */ t(i, { sx: d.presentedByDesktop, children: e.renderPresentedBy(
        (n == null ? void 0 : n.contentColor) || r.colorSchemes.dark.textColor
      ) })
    ] }) }),
    /* @__PURE__ */ l(i, { sx: d.questionArea, children: [
      /* @__PURE__ */ t(
        te,
        {
          variant: e.alertVariant || "error",
          title: g,
          message: P
        }
      ),
      v(),
      /* @__PURE__ */ t(i, { sx: d.presentedByMobile, children: e.renderPresentedBy((n == null ? void 0 : n.contentColor) || w) })
    ] })
  ] });
}, Fe = ({
  entityId: e,
  sdk: r,
  children: o
}) => {
  const { infoPage: n } = oe(e, "chance-game", r);
  return !n || n.id === "not-found" ? null : /* @__PURE__ */ t(H, { children: o(n) });
}, Pe = ({
  infoPage: e,
  variant: r,
  forceMobile: o
}) => {
  switch (r) {
    case N.PENALTY_SHOOTOUT:
      return /* @__PURE__ */ t(de, { infoPage: e, forceMobile: o });
    case N.PICK_ONE_OF_X:
      return /* @__PURE__ */ t(ce, { infoPage: e, forceMobile: o });
    case N.PRIZE_WHEEL:
    default:
      return /* @__PURE__ */ t(re, { infoPage: e, forceMobile: o });
  }
};
export {
  Fe as C,
  ke as S,
  Ae as a,
  Le as b,
  Pe as c
};
