fansunited-frontend-components 0.0.31-RC3 → 0.0.31-RC5

package/packages/common/src/components/Skeletons/Split/ApiError/SplitApiErrorSkeleton.styles.js

@@ -0,0 +1,167 @@
+const l = (e) => {
+  var t, i, 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: ((t = e.brandingColors) == null ? void 0 : t.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: ((i = e.brandingColors) == null ? void 0 : i.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"
+    }
+  };
+};
+export {
+  l as createStyles
+};

package/packages/common/src/components/Skeletons/Split/ScoreState/SplitScoreStateSkeleton.js

@@ -0,0 +1,64 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as r, Typography as t } from "@mui/joy";
+import { createStyles as k } from "./SplitScoreStateSkeleton.styles.js";
+import { isMobile as C, isLarge as I, useInternalTheme as B, useSpacingScale as F, useFontFamily as l, useCornerRadius as R, useImageBackgroundGradient as v } from "../../../../functions/theme.js";
+import { stripHtmlTags as L } from "../../../../functions/helpers.js";
+import { WidgetTemplate as G } from "../../../../enums/enums.js";
+import M from "../../../Rules.js";
+const W = ({
+  entity: o,
+  headline: a,
+  finalImage: c,
+  brandingContent: d,
+  children: m,
+  isTabulated: x = !1,
+  alwaysShowImage: p = !1,
+  rulesDisplay: g
+}) => {
+  var i;
+  const u = C(), h = I(), j = B(), n = F(), f = l().primary, y = l().secondary, S = R(), T = v(
+    G.SPLIT
+  ), b = ((i = o.branding) == null ? void 0 : i.colors) || null, s = k({
+    finalImage: c,
+    spacingScale: n,
+    borderRadius: S,
+    fontFamilyPrimary: f,
+    fontFamilySecondary: y,
+    brandingColors: b,
+    darkTextColor: j.colorSchemes.dark.textColor,
+    imageBackgroundGradient: T,
+    isMobile: u,
+    isLarge: h,
+    isTabulated: x,
+    alwaysShowImage: p
+  });
+  return /* @__PURE__ */ e.jsxs(r, { sx: s.wrapper, children: [
+    /* @__PURE__ */ e.jsx(r, { sx: s.desktopImageSection, children: /* @__PURE__ */ e.jsxs(r, { sx: s.imageSectionContent, children: [
+      /* @__PURE__ */ e.jsxs(r, { children: [
+        /* @__PURE__ */ e.jsxs(
+          r,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: n["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(t, { level: "body-sm", sx: s.headlineText, children: a }),
+              /* @__PURE__ */ e.jsx(M, { rulesDisplay: g, rules: o.rules || "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(r, { sx: s.contentContainer, children: [
+          /* @__PURE__ */ e.jsx(t, { level: "body-lg", sx: s.titleText, children: o.title }),
+          /* @__PURE__ */ e.jsx(t, { level: "body-md", sx: s.descriptionText, children: L(o.description) })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx(r, { sx: s.presentedByDesktop, children: d })
+    ] }) }),
+    /* @__PURE__ */ e.jsx(r, { sx: s.questionArea, children: m })
+  ] });
+};
+export {
+  W as default
+};

package/packages/common/src/components/Skeletons/Split/ScoreState/SplitScoreStateSkeleton.styles.js

@@ -0,0 +1,107 @@
+const l = (e) => {
+  var a, i, t;
+  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: ((a = e.brandingColors) == null ? void 0 : a.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: ((i = e.brandingColors) == null ? void 0 : i.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: ((t = e.brandingColors) == null ? void 0 : t.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"
+    }
+  };
+};
+export {
+  l as createStyles
+};

package/packages/common/src/components/Skeletons/Split/SignIn/SplitSignInSkeleton.js

@@ -0,0 +1,55 @@
+import { j as e } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as o, Typography as c } from "@mui/joy";
+import { createStyles as T } from "./SplitSignInSkeleton.styles.js";
+import { isMobile as C, useInternalTheme as F, useSpacingScale as I, useFontFamily as m, useCornerRadius as R } from "../../../../functions/theme.js";
+import { stripHtmlTags as k } from "../../../../functions/helpers.js";
+import M from "../../../Rules.js";
+const W = ({
+  entity: r,
+  headline: d,
+  finalImage: p,
+  signInContent: h,
+  brandingContent: i,
+  rulesDisplay: j
+}) => {
+  var x;
+  const n = C(), a = F(), l = I(), u = m().primary, y = m().secondary, f = R(), t = ((x = r.branding) == null ? void 0 : x.colors) || null, S = (t == null ? void 0 : t.contentColor) || a.colorSchemes.dark.textColor, g = (t == null ? void 0 : t.secondaryColor) || a.colorSchemes.dark.textColor, s = T({
+    finalImage: p,
+    spacingScale: l,
+    borderRadius: f,
+    fontFamilyPrimary: u,
+    fontFamilySecondary: y,
+    secondaryColor: g,
+    contentColor: S,
+    opacity: "60%",
+    isMobile: n
+  });
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(o, { sx: s.headlineSection, children: /* @__PURE__ */ e.jsxs(o, { sx: s.headlineContent, children: [
+      /* @__PURE__ */ e.jsxs(o, { sx: { display: "flex", flexDirection: "column", alignItems: n ? "center" : "flex-start", gap: l["3xs"] }, children: [
+        /* @__PURE__ */ e.jsxs(o, { sx: { display: "flex", alignItems: "center", gap: l["3xs"] }, children: [
+          /* @__PURE__ */ e.jsx(c, { sx: s.headlineText, children: d }),
+          /* @__PURE__ */ e.jsx(
+            M,
+            {
+              rulesDisplay: j,
+              rules: r.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs(o, { sx: s.contentContainer, children: [
+          /* @__PURE__ */ e.jsx(c, { sx: s.titleText, children: r.title }),
+          /* @__PURE__ */ e.jsx(c, { sx: s.descriptionText, children: k(r.description) })
+        ] })
+      ] }),
+      n ? /* @__PURE__ */ e.jsx(e.Fragment, {}) : i
+    ] }) }),
+    /* @__PURE__ */ e.jsx(o, { sx: s.mainContentArea, children: /* @__PURE__ */ e.jsxs(o, { sx: s.ctaWrapper, children: [
+      h,
+      n && i
+    ] }) })
+  ] });
+};
+export {
+  W as default
+};

package/packages/common/src/components/Skeletons/Split/SignIn/SplitSignInSkeleton.styles.js

@@ -0,0 +1,94 @@
+const t = (e) => ({
+  // 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.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": {
+      content: '""',
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderTopLeftRadius: "5px",
+      borderTopRightRadius: "5px"
+    }
+  },
+  // Main content area
+  mainContentArea: {
+    flex: "0.5",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    p: e.spacingScale.lg
+  },
+  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: e.secondaryColor,
+    opacity: "70%",
+    textTransform: "uppercase",
+    fontFamily: e.fontFamilySecondary,
+    textAlign: e.isMobile ? "center" : "left"
+  },
+  // Title text
+  titleText: {
+    fontWeight: 700,
+    lineHeight: "133%",
+    fontSize: "1.5em",
+    letterSpacing: "0.15px",
+    color: e.contentColor,
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: e.isMobile ? "center" : "left"
+  },
+  // Description text
+  descriptionText: {
+    fontWeight: 400,
+    lineHeight: "140%",
+    fontSize: "1.25em",
+    letterSpacing: "0.15px",
+    color: e.secondaryColor,
+    opacity: "70%",
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: e.isMobile ? "center" : "left"
+  },
+  ctaWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: e.spacingScale["2xl"]
+  },
+  // Content container
+  contentContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale["3xs"]
+  }
+});
+export {
+  t as createStyles
+};

package/packages/common/src/components/Skeletons/Split/SplitSkeleton.js

@@ -0,0 +1,186 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as t, Typography as n, AspectRatio as W } from "@mui/joy";
+import { isMobile as v, isLarge as E, useInternalTheme as J, useSpacingScale as K, useFontFamily as y, useCornerRadius as O, useColors as u, useImageBackgroundGradient as P } from "../../../functions/theme.js";
+import { hexToRgb as Q, getBrandingClickUrl as X, stripHtmlTags as f } from "../../../functions/helpers.js";
+import "../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as Y } from "../../../enums/enums.js";
+import g from "../../Rules.js";
+import "react";
+import "../../../providers/ConstantsProvider.js";
+import { createStyles as Z } from "./SplitSkeleton.styles.js";
+import "../../../providers/ContainerProvider.js";
+const ae = ({
+  entity: s,
+  headline: d,
+  finalImage: T,
+  children: A,
+  embedCodeContainerRef: m,
+  hasEmbedCode: C = !1,
+  brandingLogo: I,
+  renderPresentedBy: l,
+  rulesDisplay: p
+}) => {
+  var N, w;
+  const F = v(), H = E(), c = s.type === "poll" || s.type === "match-quiz" ? H : F, R = J(), x = K(), q = y().primary, G = y().secondary, M = O(), o = ((N = s.branding) == null ? void 0 : N.colors) || null, i = ((w = s.branding) == null ? void 0 : w.urls) || null, S = (o == null ? void 0 : o.contentColor) || u().textColor, V = (o == null ? void 0 : o.secondaryColor) || u().textColor, _ = (o == null ? void 0 : o.backgroundColor) || u().surfaceVariant, b = "60%", k = R.colorSchemes.dark.textColor, z = P(
+    Y.SPLIT
+  ), r = Z({
+    finalImage: T,
+    spacingScale: x,
+    borderRadius: M,
+    fontFamilyPrimary: q,
+    fontFamilySecondary: G,
+    secondaryColor: V,
+    opacity: b,
+    bgcolor: Q(_ || ""),
+    textColor: S,
+    brandingColors: o,
+    darkTextColor: k,
+    imageBackgroundGradient: z,
+    isMobile: c
+  }), a = X(
+    i == null ? void 0 : i.primaryUrl,
+    i == null ? void 0 : i.secondaryUrl,
+    "image"
+  ), B = () => {
+    a && window.open(a, "_blank", "noopener,noreferrer");
+  }, L = (h, j) => a ? typeof window > "u" ? /* @__PURE__ */ e.jsx(
+    t,
+    {
+      component: "a",
+      href: a,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        ...j,
+        cursor: "pointer",
+        textDecoration: "none"
+      },
+      children: h
+    }
+  ) : /* @__PURE__ */ e.jsx(
+    t,
+    {
+      sx: {
+        ...j,
+        cursor: "pointer"
+      },
+      onClick: B,
+      children: h
+    }
+  ) : /* @__PURE__ */ e.jsx(t, { sx: j, children: h }), U = () => C && m ? /* @__PURE__ */ e.jsx(t, { sx: r.embedCodeHeadlineSection, children: /* @__PURE__ */ e.jsx(
+    W,
+    {
+      ratio: "16/9",
+      sx: r.aspectRatioContainer,
+      slotProps: { content: { sx: { height: "100%" } } },
+      children: /* @__PURE__ */ e.jsx(t, { ref: m })
+    }
+  ) }) : T ? L(
+    /* @__PURE__ */ e.jsxs(t, { sx: r.headlineContent, children: [
+      /* @__PURE__ */ e.jsxs(t, { children: [
+        /* @__PURE__ */ e.jsxs(
+          t,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: c ? "center" : "flex-start",
+              gap: x["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(n, { sx: r.headlineText, children: d }),
+              /* @__PURE__ */ e.jsx(g, { rulesDisplay: p, rules: s.rules || "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(t, { sx: r.contentContainer, children: [
+          /* @__PURE__ */ e.jsx(n, { sx: r.titleText, children: s.title }),
+          /* @__PURE__ */ e.jsx(n, { sx: r.descriptionText, children: f(s.description) })
+        ] })
+      ] }),
+      I && !c && l && /* @__PURE__ */ e.jsx(t, { children: l((o == null ? void 0 : o.contentColor) || k) })
+    ] }),
+    r.headlineSection
+  ) : /* @__PURE__ */ e.jsx(t, { sx: r.headlineSectionNoImage, children: /* @__PURE__ */ e.jsxs(t, { sx: r.headlineContent, children: [
+    /* @__PURE__ */ e.jsxs(t, { children: [
+      /* @__PURE__ */ e.jsxs(
+        t,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: c ? "center" : "flex-start",
+            gap: x["3xs"]
+          },
+          children: [
+            /* @__PURE__ */ e.jsx(n, { sx: r.headlineTextNoImage, children: d }),
+            /* @__PURE__ */ e.jsx(g, { rulesDisplay: p, rules: s.rules || "" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e.jsxs(t, { sx: r.contentContainer, children: [
+        /* @__PURE__ */ e.jsx(n, { sx: r.titleTextNoImage, children: s.title }),
+        /* @__PURE__ */ e.jsx(n, { sx: r.descriptionTextNoImage, children: f(s.description) })
+      ] })
+    ] }),
+    I && !c && l && /* @__PURE__ */ e.jsx(t, { children: l(S) })
+  ] }) });
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    U(),
+    /* @__PURE__ */ e.jsxs(t, { sx: r.questionArea, children: [
+      C && m && /* @__PURE__ */ e.jsx(t, { sx: r.embedCodeHeadlineContent, children: /* @__PURE__ */ e.jsxs(t, { children: [
+        /* @__PURE__ */ e.jsxs(
+          t,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: x["3xs"]
+            },
+            children: [
+              /* @__PURE__ */ e.jsx(
+                n,
+                {
+                  sx: {
+                    ...r.headlineTextNoImage,
+                    textAlign: "center"
+                  },
+                  children: d
+                }
+              ),
+              /* @__PURE__ */ e.jsx(g, { rulesDisplay: p, rules: s.rules || "" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(t, { sx: r.contentContainer, children: [
+          /* @__PURE__ */ e.jsx(
+            n,
+            {
+              sx: {
+                ...r.titleTextNoImage,
+                textAlign: "center"
+              },
+              children: s.title
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            n,
+            {
+              sx: {
+                ...r.descriptionTextNoImage,
+                textAlign: "center"
+              },
+              children: f(s.description)
+            }
+          )
+        ] })
+      ] }) }),
+      A
+    ] })
+  ] });
+};
+export {
+  ae as default
+};