fansunited-frontend-components 0.0.31-RC5 → 0.0.31-RC7

package/chunks/OverlayLeadAfterCollection-Bjh1xAB5.js

@@ -0,0 +1,898 @@
+import { jsxs as l, Fragment as q, jsx as n } from "react/jsx-runtime";
+import { i as L, u as O, a as B, b as Q, c as _, d as A, e as ee, W as E, h as Y, g as ne, B as t, T as k, s as $, f as J, j as te } from "./Portal-DegkUXpU.js";
+import { R as G, S as ie, a as le, O as ae } from "./index-DUQ2LFod.js";
+import "react";
+const oe = (e) => {
+  var m, r, d;
+  return {
+    // Mobile headline with image background
+    mobileHeadlineWithImage: {
+      display: e.isMobile ? "flex" : "none",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "10px",
+      backgroundImage: `url(${e.finalImage})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      borderTopLeftRadius: "5px",
+      borderTopRightRadius: "5px",
+      position: "relative",
+      minHeight: "210px",
+      overflow: "hidden",
+      height: "auto",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        background: e.imageBackgroundGradient,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px"
+      }
+    },
+    // Content inside mobile headline with image
+    mobileHeadlineContent: {
+      zIndex: 1,
+      p: e.spacingScale.xl,
+      gap: e.spacingScale["2xl"],
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between"
+    },
+    // Mobile headline without image
+    mobileHeadlineWithoutImage: {
+      display: e.isMobile ? "flex" : "none",
+      flex: "0.5",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      p: e.spacingScale.lg,
+      gap: e.spacingScale["2xl"]
+    },
+    // Headline typography (mobile with image)
+    headlineTypographyMobileImage: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      fontSize: "0.75em",
+      color: ((m = e.brandingColors) == null ? void 0 : m.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      textTransform: "uppercase",
+      fontFamily: e.fontFamilySecondary,
+      textAlign: "center"
+    },
+    // Headline typography (mobile without image & desktop)
+    headlineTypography: {
+      fontWeight: 500,
+      lineHeight: "166%",
+      letterSpacing: "1px",
+      textTransform: "uppercase",
+      fontSize: "0.75em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilySecondary,
+      textAlign: "center"
+    },
+    // Title typography (mobile with image)
+    titleTypographyMobileImage: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      fontSize: "1.5em",
+      letterSpacing: "0.15px",
+      color: ((r = e.brandingColors) == null ? void 0 : r.contentColor) || e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: "center"
+    },
+    // Title typography (mobile without image)
+    titleTypography: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Description typography (mobile with image)
+    descriptionTypographyMobileImage: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      fontSize: "1.25em",
+      letterSpacing: "0.15px",
+      color: ((d = e.brandingColors) == null ? void 0 : d.secondaryColor) || e.darkTextColor,
+      opacity: "70%",
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: "center"
+    },
+    // Description typography (mobile without image)
+    descriptionTypography: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilyPrimary,
+      textAlign: e.isMobile ? "center" : "left"
+    },
+    // Desktop title typography
+    titleTypographyDesktop: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      fontSize: "1.5em",
+      color: e.textColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Desktop description typography
+    descriptionTypographyDesktop: {
+      fontWeight: 400,
+      lineHeight: "140%",
+      letterSpacing: "0.15px",
+      fontSize: "1.25em",
+      color: e.secondaryColor,
+      opacity: e.opacity,
+      fontFamily: e.fontFamilyPrimary
+    },
+    // Image container (left position)
+    imageContainerLeft: {
+      display: e.isMobile ? "none" : "block",
+      flex: "0.3",
+      borderTopLeftRadius: e.borderRadius.md,
+      borderBottomLeftRadius: e.borderRadius.md,
+      overflow: "hidden",
+      height: "auto",
+      position: "relative"
+    },
+    // Image container (right position)
+    imageContainerRight: {
+      display: e.isMobile ? "none" : "block",
+      flex: "0.3",
+      borderTopRightRadius: "5px",
+      borderBottomRightRadius: "5px",
+      overflow: "hidden",
+      height: "auto",
+      position: "relative"
+    },
+    // Main content area
+    mainContentArea: {
+      flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
+      display: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      p: e.spacingScale.md,
+      gap: e.spacingScale["2xl"]
+    },
+    // Desktop headline container
+    desktopHeadlineContainer: {
+      display: e.isMobile ? "none" : "flex",
+      flexDirection: "column",
+      gap: e.spacingScale.xl,
+      textAlign: "center"
+    },
+    // Content container
+    contentContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: e.spacingScale["3xs"]
+    },
+    // Sign in button container
+    signInButtonContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: e.spacingScale["2xl"]
+    },
+    // Branding container
+    brandingContainer: {
+      px: e.spacingScale.md
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    }
+  };
+}, xe = ({
+  entity: e,
+  headline: m,
+  finalImage: r,
+  imagePosition: d = "left",
+  signInContent: I,
+  brandingContent: s,
+  rulesDisplay: h
+}) => {
+  var M, W;
+  const D = L(), x = O(), y = B(), C = Q().primary, S = Q().secondary, b = _(), o = ((M = e.branding) == null ? void 0 : M.colors) || null, f = ((W = e.branding) == null ? void 0 : W.urls) || null, T = (o == null ? void 0 : o.contentColor) || A().textColor, c = (o == null ? void 0 : o.secondaryColor) || A().textColor, a = (o == null ? void 0 : o.backgroundColor) || A().surfaceVariant, P = "60%", v = ee(
+    E.STANDARD
+  ), i = oe({
+    finalImage: r,
+    spacingScale: y,
+    borderRadius: b,
+    fontFamilyPrimary: C,
+    fontFamilySecondary: S,
+    textColor: T,
+    secondaryColor: c,
+    bgcolor: Y(a || ""),
+    opacity: P,
+    brandingColors: o,
+    imagePosition: d,
+    darkTextColor: x.colorSchemes.dark.textColor,
+    imageBackgroundGradient: v,
+    isMobile: D
+  }), g = ne(
+    f == null ? void 0 : f.primaryUrl,
+    f == null ? void 0 : f.secondaryUrl,
+    "image"
+  ), F = (R, p) => typeof window > "u" ? g ? /* @__PURE__ */ n(
+    t,
+    {
+      component: "a",
+      href: g,
+      target: "_blank",
+      sx: p,
+      children: R
+    }
+  ) : /* @__PURE__ */ n(t, { sx: p, children: R }) : g ? /* @__PURE__ */ n(
+    t,
+    {
+      sx: { ...p, cursor: "pointer" },
+      onClick: () => window.open(g, "_blank"),
+      children: R
+    }
+  ) : /* @__PURE__ */ n(t, { sx: p, children: R });
+  return /* @__PURE__ */ l(q, { children: [
+    r ? F(
+      /* @__PURE__ */ l(t, { sx: i.mobileHeadlineContent, children: [
+        /* @__PURE__ */ l(t, { children: [
+          /* @__PURE__ */ l(t, { sx: { display: "flex", alignItems: "center", gap: y["3xs"] }, children: [
+            /* @__PURE__ */ n(
+              k,
+              {
+                level: "body-sm",
+                sx: i.headlineTypographyMobileImage,
+                children: m
+              }
+            ),
+            /* @__PURE__ */ n(
+              G,
+              {
+                rulesDisplay: h,
+                rules: e.rules || ""
+              }
+            )
+          ] }),
+          /* @__PURE__ */ l(t, { sx: i.contentContainer, children: [
+            /* @__PURE__ */ n(
+              k,
+              {
+                level: "body-lg",
+                sx: i.titleTypographyMobileImage,
+                children: e.title
+              }
+            ),
+            /* @__PURE__ */ n(
+              k,
+              {
+                level: "body-md",
+                sx: i.descriptionTypographyMobileImage,
+                children: $(e.description)
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ l(t, { sx: i.signInButtonContainer, children: [
+          I,
+          s
+        ] })
+      ] }),
+      i.mobileHeadlineWithImage
+    ) : /* @__PURE__ */ l(t, { sx: i.mobileHeadlineWithoutImage, children: [
+      /* @__PURE__ */ l(t, { children: [
+        /* @__PURE__ */ l(t, { sx: { display: "flex", alignItems: "center", gap: y["3xs"] }, children: [
+          /* @__PURE__ */ n(k, { level: "body-sm", sx: i.headlineTypography, children: m }),
+          /* @__PURE__ */ n(
+            G,
+            {
+              rulesDisplay: h,
+              rules: e.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l(t, { sx: i.contentContainer, children: [
+          /* @__PURE__ */ n(k, { level: "h4", sx: i.titleTypography, children: e.title }),
+          /* @__PURE__ */ n(k, { level: "body-md", sx: i.descriptionTypography, children: $(e.description) })
+        ] })
+      ] }),
+      /* @__PURE__ */ l(t, { sx: i.signInButtonContainer, children: [
+        I,
+        s
+      ] })
+    ] }),
+    r && d === "left" && /* @__PURE__ */ n(t, { sx: i.imageContainerLeft, children: /* @__PURE__ */ n("img", { src: r, alt: "Illustration", style: i.image }) }),
+    /* @__PURE__ */ n(t, { sx: i.mainContentArea, children: /* @__PURE__ */ l(t, { sx: i.desktopHeadlineContainer, children: [
+      /* @__PURE__ */ l(t, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: y["3xs"] }, children: [
+        /* @__PURE__ */ l(t, { sx: { display: "flex", alignItems: "center", gap: y["3xs"] }, children: [
+          /* @__PURE__ */ n(k, { level: "body-sm", sx: i.headlineTypography, children: m }),
+          /* @__PURE__ */ n(
+            G,
+            {
+              rulesDisplay: h,
+              rules: e.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l(t, { sx: i.contentContainer, children: [
+          /* @__PURE__ */ n(k, { level: "h4", sx: i.titleTypographyDesktop, children: e.title }),
+          /* @__PURE__ */ n(
+            k,
+            {
+              level: "body-md",
+              sx: i.descriptionTypographyDesktop,
+              children: $(e.description)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ n(t, { sx: i.signInButtonContainer, children: I }),
+      s
+    ] }) }),
+    r && d === "right" && /* @__PURE__ */ n(t, { sx: i.imageContainerRight, children: /* @__PURE__ */ n("img", { src: r, alt: "Illustration", style: i.image }) })
+  ] });
+}, re = (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"]
+  }
+}), ye = ({
+  entity: e,
+  headline: m,
+  finalImage: r,
+  signInContent: d,
+  brandingContent: I,
+  rulesDisplay: s
+}) => {
+  var a;
+  const h = L(), D = O(), x = B(), y = Q().primary, C = Q().secondary, S = _(), b = ((a = e.branding) == null ? void 0 : a.colors) || null, o = (b == null ? void 0 : b.contentColor) || D.colorSchemes.dark.textColor, f = (b == null ? void 0 : b.secondaryColor) || D.colorSchemes.dark.textColor, c = re({
+    finalImage: r,
+    spacingScale: x,
+    borderRadius: S,
+    fontFamilyPrimary: y,
+    fontFamilySecondary: C,
+    secondaryColor: f,
+    contentColor: o,
+    opacity: "60%",
+    isMobile: h
+  });
+  return /* @__PURE__ */ l(q, { children: [
+    /* @__PURE__ */ n(t, { sx: c.headlineSection, children: /* @__PURE__ */ l(t, { sx: c.headlineContent, children: [
+      /* @__PURE__ */ l(t, { sx: { display: "flex", flexDirection: "column", alignItems: h ? "center" : "flex-start", gap: x["3xs"] }, children: [
+        /* @__PURE__ */ l(t, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
+          /* @__PURE__ */ n(k, { sx: c.headlineText, children: m }),
+          /* @__PURE__ */ n(
+            G,
+            {
+              rulesDisplay: s,
+              rules: e.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l(t, { sx: c.contentContainer, children: [
+          /* @__PURE__ */ n(k, { sx: c.titleText, children: e.title }),
+          /* @__PURE__ */ n(k, { sx: c.descriptionText, children: $(e.description) })
+        ] })
+      ] }),
+      h ? /* @__PURE__ */ n(q, {}) : I
+    ] }) }),
+    /* @__PURE__ */ n(t, { sx: c.mainContentArea, children: /* @__PURE__ */ l(t, { sx: c.ctaWrapper, children: [
+      d,
+      h && I
+    ] }) })
+  ] });
+}, ce = (e) => {
+  var m;
+  return {
+    // Main container with background overlay
+    mainContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      gap: "40px",
+      p: e.spacingScale.xl,
+      boxShadow: "md",
+      border: (m = e.brandingColors) != null && m.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
+      overflow: "hidden",
+      backgroundImage: e.backgroundImage,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      position: "relative",
+      borderRadius: e.mdBorderRadius,
+      minHeight: "250px",
+      "&::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
+    },
+    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"]
+    },
+    titleText: {
+      fontWeight: 700,
+      lineHeight: "133%",
+      letterSpacing: "0px",
+      textAlign: e.isMobile ? "center" : "left",
+      fontSize: "1.5em",
+      color: e.darkTextColor,
+      fontFamily: e.fontFamilyPrimary
+    },
+    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 container
+    bottomContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexDirection: e.isMobile ? "column-reverse" : "row",
+      gap: e.spacingScale.md
+    },
+    // Sign-in wrapper to always position at flex-end
+    signInWrapper: {
+      display: "flex",
+      justifyContent: "flex-end",
+      flex: 1
+    }
+  };
+}, fe = ({
+  entity: e,
+  headline: m,
+  backgroundImage: r,
+  imageBackgroundGradient: d,
+  signInContent: I,
+  brandingContent: s,
+  rulesDisplay: h
+}) => {
+  var P;
+  const D = L(), x = O(), y = B(), C = ((P = e.branding) == null ? void 0 : P.colors) || null, S = (C == null ? void 0 : C.contentColor) || x.colorSchemes.dark.textColor, b = x.customFontFamily.dark.primary, o = x.customFontFamily.dark.secondary, f = x.customRadius.dark.md, T = x.border.dark.size, c = x.colorSchemes.dark.textColor, a = ce({
+    spacingScale: y,
+    brandingColors: C,
+    secondaryColor: S,
+    fontFamilyPrimary: b,
+    fontFamilySecondary: o,
+    mdBorderRadius: f,
+    borderSize: T,
+    darkTextColor: c,
+    backgroundImage: r,
+    imageBackgroundGradient: d,
+    isMobile: D
+  });
+  return /* @__PURE__ */ l(t, { sx: a.mainContainer, children: [
+    /* @__PURE__ */ n(t, { children: /* @__PURE__ */ n(t, { sx: a.headlineSection, children: /* @__PURE__ */ n(t, { sx: a.headlineContent, children: /* @__PURE__ */ l(t, { sx: { ...a.headlineContentInner, display: "flex", flexDirection: "column", alignItems: D ? "center" : "flex-start", gap: y["3xs"] }, children: [
+      /* @__PURE__ */ l(t, { sx: { display: "flex", alignItems: "center", gap: y["3xs"] }, children: [
+        /* @__PURE__ */ n(k, { level: "body-sm", sx: a.headlineText, children: m }),
+        /* @__PURE__ */ n(
+          G,
+          {
+            rulesDisplay: h,
+            isOverlayVariant: !0,
+            rules: e.rules || ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(t, { sx: a.contentContainer, children: [
+        /* @__PURE__ */ n(k, { level: "h4", sx: a.titleText, children: e.title }),
+        /* @__PURE__ */ n(k, { level: "body-lg", sx: a.descriptionText, children: $(e.description) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ l(t, { sx: a.bottomContainer, children: [
+      s,
+      /* @__PURE__ */ n(t, { sx: a.signInWrapper, children: I })
+    ] })
+  ] });
+}, ue = (e) => {
+  var o, f, T, c, a, P, v;
+  const m = J(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
+    },
+    E.STANDARD
+  ), r = L(), d = B(), I = _(), s = `rgba(${Y(A().surfaceVariant || "")}, 0.5)`, h = ((o = e.entity.branding) == null ? void 0 : o.colors) || null, D = (h == null ? void 0 : h.borderColor) || null, x = r ? ((T = (f = e.entity.branding) == null ? void 0 : f.images) == null ? void 0 : T.mobileLogo) || ((a = (c = e.entity.branding) == null ? void 0 : c.images) == null ? void 0 : a.mainLogo) || "" : ((v = (P = e.entity.branding) == null ? void 0 : P.images) == null ? void 0 : v.mainLogo) || "", y = e.imagePosition || "left", C = A().textColor, S = {
+    mainContentArea: {
+      flex: r ? "1" : m ? "0.7" : "1",
+      display: "flex",
+      flexDirection: "column",
+      p: d.md,
+      gap: d.md
+    },
+    leadCollectionContainer: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    leadQuestionContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: r ? d.lg : d.md
+    },
+    leadContentContainer: {
+      borderRadius: I.md,
+      px: d.md,
+      pt: d.md,
+      pb: d.lg,
+      gap: d.md,
+      bgcolor: s,
+      display: "flex",
+      flexDirection: "column",
+      backdropFilter: "blur(4px)"
+    }
+  }, b = () => {
+    var F, u, M, W, R, p, w, H, z, j, U, N, V, K, X, Z;
+    const { CollectLeadWrapper: i, entity: g } = e;
+    return /* @__PURE__ */ l(t, { sx: S.mainContentArea, children: [
+      /* @__PURE__ */ n(t, { sx: S.leadCollectionContainer, children: /* @__PURE__ */ n(t, { sx: S.leadQuestionContainer, children: /* @__PURE__ */ n(t, { sx: S.leadContentContainer, children: /* @__PURE__ */ n(
+        i,
+        {
+          sdk: e.sdk,
+          contentId: g.id,
+          contentName: g.title,
+          brandingColors: (F = g.branding) == null ? void 0 : F.colors,
+          brandingUrls: (u = g.branding) == null ? void 0 : u.urls,
+          campaignId: (M = e.leads) == null ? void 0 : M.campaignId,
+          campaignName: (W = e.leads) == null ? void 0 : W.campaignName,
+          fields: (R = e.leads) == null ? void 0 : R.fields,
+          leadTitle: (p = g.labels) == null ? void 0 : p.leadTitle,
+          leadDescription: (w = g.labels) == null ? void 0 : w.leadDescription,
+          leadCta: (H = g.labels) == null ? void 0 : H.leadCta,
+          leadSuccessTitle: (z = g.labels) == null ? void 0 : z.leadSuccessTitle,
+          leadSuccessDescription: (j = g.labels) == null ? void 0 : j.leadSuccessDescription,
+          syncWithProfile: (U = e.leads) == null ? void 0 : U.syncWithProfile,
+          startGame: e.onLeadSubmitted,
+          isAfterPosition: !0,
+          isSubmittingParticipation: e.isSubmitting
+        }
+      ) }) }) }),
+      x && /* @__PURE__ */ n(
+        e.PresentedBy,
+        {
+          brandingLogo: x,
+          textColor: C,
+          label: ((N = g.labels) == null ? void 0 : N.sponsor) || null,
+          primaryUrl: (K = (V = g.branding) == null ? void 0 : V.urls) == null ? void 0 : K.primaryUrl,
+          secondaryUrl: (Z = (X = g.branding) == null ? void 0 : X.urls) == null ? void 0 : Z.secondaryUrl
+        }
+      )
+    ] });
+  };
+  return /* @__PURE__ */ n(e.MainCard, { brandingBorderColor: D, children: /* @__PURE__ */ n(
+    ie,
+    {
+      entity: e.entity,
+      headline: e.headline,
+      finalImage: m,
+      imagePosition: y,
+      rulesDisplay: e.rulesDisplay,
+      children: b()
+    }
+  ) });
+}, he = (e) => {
+  var T, c, a, P, v, i, g;
+  const m = O(), r = L(), d = r ? e.mobileImagePlaceholder || e.defaultImagePlaceholder || "" : e.defaultImagePlaceholder || "", I = J(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: d
+    },
+    E.SPLIT
+  ), s = ((T = e.entity.branding) == null ? void 0 : T.colors) || null, h = (s == null ? void 0 : s.borderColor) || null, D = (s == null ? void 0 : s.backgroundColor) || A().surfaceVariant, x = Y(D), y = B(), C = _(), S = r ? ((a = (c = e.entity.branding) == null ? void 0 : c.images) == null ? void 0 : a.mobileLogo) || ((v = (P = e.entity.branding) == null ? void 0 : P.images) == null ? void 0 : v.mainLogo) || "" : ((g = (i = e.entity.branding) == null ? void 0 : i.images) == null ? void 0 : g.mainLogo) || "", b = {
+    questionArea: {
+      width: "100%",
+      justifyContent: "center",
+      display: "flex",
+      flexDirection: "column"
+    },
+    questionAreaContent: {
+      p: y.lg,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: "16px"
+    },
+    leadContentContainer: {
+      p: y.md,
+      gap: y.md,
+      display: "flex",
+      flexDirection: "column",
+      backdropFilter: "blur(4px)",
+      bgcolor: `rgba(${x.replace(/[^\d,]/g, "")}, 0.5)`,
+      borderRadius: C.sm
+    }
+  }, o = (F) => {
+    var u, M, W, R, p;
+    return /* @__PURE__ */ n(
+      e.PresentedBy,
+      {
+        brandingLogo: S,
+        textColor: F,
+        label: ((u = e.entity.labels) == null ? void 0 : u.sponsor) || null,
+        primaryUrl: (W = (M = e.entity.branding) == null ? void 0 : M.urls) == null ? void 0 : W.primaryUrl,
+        secondaryUrl: (p = (R = e.entity.branding) == null ? void 0 : R.urls) == null ? void 0 : p.secondaryUrl,
+        isCentered: !1
+      }
+    );
+  }, f = () => {
+    var M, W, R, p, w, H, z, j, U, N, V;
+    const { CollectLeadWrapper: F, entity: u } = e;
+    return /* @__PURE__ */ l(q, { children: [
+      /* @__PURE__ */ n(t, { sx: b.questionArea, children: /* @__PURE__ */ n(t, { sx: b.questionAreaContent, children: /* @__PURE__ */ n(t, { sx: b.leadContentContainer, children: /* @__PURE__ */ n(
+        F,
+        {
+          sdk: e.sdk,
+          contentId: u.id,
+          contentName: u.title,
+          brandingColors: (M = u.branding) == null ? void 0 : M.colors,
+          brandingUrls: (W = u.branding) == null ? void 0 : W.urls,
+          campaignId: (R = e.leads) == null ? void 0 : R.campaignId,
+          campaignName: (p = e.leads) == null ? void 0 : p.campaignName,
+          fields: (w = e.leads) == null ? void 0 : w.fields,
+          leadTitle: (H = u.labels) == null ? void 0 : H.leadTitle,
+          leadDescription: (z = u.labels) == null ? void 0 : z.leadDescription,
+          leadCta: (j = u.labels) == null ? void 0 : j.leadCta,
+          leadSuccessTitle: (U = u.labels) == null ? void 0 : U.leadSuccessTitle,
+          leadSuccessDescription: (N = u.labels) == null ? void 0 : N.leadSuccessDescription,
+          syncWithProfile: (V = e.leads) == null ? void 0 : V.syncWithProfile,
+          startGame: e.onLeadSubmitted,
+          isAfterPosition: !0,
+          isSubmittingParticipation: e.isSubmitting
+        }
+      ) }) }) }),
+      S && r && /* @__PURE__ */ n(t, { sx: { mb: y.lg, px: y.lg }, children: o(
+        (s == null ? void 0 : s.contentColor) || m.colorSchemes.dark.textColor
+      ) })
+    ] });
+  };
+  return /* @__PURE__ */ n(e.MainCard, { brandingBorderColor: h, children: /* @__PURE__ */ n(
+    le,
+    {
+      entity: e.entity,
+      headline: e.headline,
+      finalImage: I,
+      brandingLogo: S,
+      renderPresentedBy: o,
+      rulesDisplay: e.rulesDisplay,
+      children: f()
+    }
+  ) });
+}, be = (e) => {
+  const m = O(), r = L(), d = e.defaultImagePlaceholder ? e.defaultImagePlaceholder || "" : r ? e.mobileImagePlaceholder : e.defaultImagePlaceholder || "", { brandingImage: I, brandingColors: s, brandingLogo: h } = te(e.entity.branding || null), D = I || J(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: d || ""
+    },
+    E.OVERLAY
+  ), x = B(), y = (s == null ? void 0 : s.backgroundColor) || m.colorSchemes.dark.surfaceVariant, C = {
+    mainContentSection: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "24px"
+    },
+    contentContainerWithBackdrop: {
+      borderRadius: m.customRadius.dark.sm,
+      p: x.md,
+      display: "flex",
+      flexDirection: "column",
+      gap: x.md,
+      backdropFilter: "blur(4px)",
+      position: "relative",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: y,
+        opacity: 0.5,
+        borderRadius: "inherit",
+        zIndex: 0
+      },
+      "& > *": {
+        position: "relative",
+        zIndex: 1
+      }
+    },
+    presentedByContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: r ? "center" : "space-between",
+      flexDirection: r ? "column-reverse" : "row",
+      gap: x.md
+    }
+  }, S = () => {
+    var o, f, T, c, a;
+    return /* @__PURE__ */ n(
+      e.PresentedBy,
+      {
+        brandingLogo: h || "",
+        textColor: m.colorSchemes.dark.textColor,
+        label: ((o = e.entity.labels) == null ? void 0 : o.sponsor) || null,
+        primaryUrl: (T = (f = e.entity.branding) == null ? void 0 : f.urls) == null ? void 0 : T.primaryUrl,
+        secondaryUrl: (a = (c = e.entity.branding) == null ? void 0 : c.urls) == null ? void 0 : a.secondaryUrl
+      }
+    );
+  }, b = () => {
+    var o, f, T, c, a, P, v, i, g, F, u;
+    return /* @__PURE__ */ l(t, { sx: C.mainContentSection, children: [
+      /* @__PURE__ */ n(t, { sx: C.contentContainerWithBackdrop, children: /* @__PURE__ */ n(
+        e.CollectLeadWrapper,
+        {
+          sdk: e.sdk,
+          contentId: e.entity.id,
+          contentName: e.entity.title,
+          brandingColors: (o = e.entity.branding) == null ? void 0 : o.colors,
+          brandingUrls: (f = e.entity.branding) == null ? void 0 : f.urls,
+          campaignId: (T = e.leads) == null ? void 0 : T.campaignId,
+          campaignName: (c = e.leads) == null ? void 0 : c.campaignName,
+          fields: (a = e.leads) == null ? void 0 : a.fields,
+          leadTitle: (P = e.entity.labels) == null ? void 0 : P.leadTitle,
+          leadDescription: (v = e.entity.labels) == null ? void 0 : v.leadDescription,
+          leadCta: (i = e.entity.labels) == null ? void 0 : i.leadCta,
+          leadSuccessTitle: (g = e.entity.labels) == null ? void 0 : g.leadSuccessTitle,
+          leadSuccessDescription: (F = e.entity.labels) == null ? void 0 : F.leadSuccessDescription,
+          syncWithProfile: (u = e.leads) == null ? void 0 : u.syncWithProfile,
+          startGame: e.onLeadSubmitted,
+          isAfterPosition: !0,
+          isSubmittingParticipation: e.isSubmitting
+        }
+      ) }),
+      /* @__PURE__ */ n(t, { sx: C.presentedByContainer, children: S() })
+    ] });
+  };
+  return /* @__PURE__ */ n(
+    ae,
+    {
+      entity: e.entity,
+      headline: e.headline,
+      finalImage: D,
+      rulesDisplay: e.rulesDisplay,
+      children: b()
+    }
+  );
+};
+export {
+  fe as O,
+  xe as S,
+  ye as a,
+  ue as b,
+  he as c,
+  be as d
+};