fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC6

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

@@ -1,167 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,186 +0,0 @@
-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
-};