fansunited-frontend-components 0.0.39 → 0.0.40

package/chunks/OverlayLeadAfterCollection-CaBbwZVo.js

@@ -0,0 +1,480 @@
+import { jsxs as d, Fragment as j, jsx as t } from "react/jsx-runtime";
+import { e as A, u as L, f as z, h as $, j as q, B as n, T as D, W as G, k as X } from "./PrizeCard-gMp7I66d.js";
+import { s as E, u as Y, h as Z, e as _ } from "./useImageVariant-pnFelF9A.js";
+import { R as J } from "./NotFoundSkeleton-B3RNa8KJ.js";
+import "react";
+import { S as ee } from "./ChanceGameEmbedVariant-DWqOTf4o.js";
+import { d as K, a as Q } from "./default-quiz-bg-vertical-CT7rrg9o.js";
+import "react-dom";
+import { O as te } from "./useInfoPage-DPkzE5Gn.js";
+const ne = (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"]
+  }
+}), xe = ({
+  entity: e,
+  headline: m,
+  finalImage: u,
+  signInContent: I,
+  brandingContent: C,
+  rulesDisplay: a
+}) => {
+  var i;
+  const b = A(), h = L(), o = z(), s = $().primary, g = $().secondary, S = q(), c = ((i = e.branding) == null ? void 0 : i.colors) || null, x = (c == null ? void 0 : c.contentColor) || h.colorSchemes.dark.textColor, f = (c == null ? void 0 : c.secondaryColor) || h.colorSchemes.dark.textColor, l = ne({
+    finalImage: u,
+    spacingScale: o,
+    borderRadius: S,
+    fontFamilyPrimary: s,
+    fontFamilySecondary: g,
+    secondaryColor: f,
+    contentColor: x,
+    opacity: "60%",
+    isMobile: b
+  });
+  return /* @__PURE__ */ d(j, { children: [
+    /* @__PURE__ */ t(n, { sx: l.headlineSection, children: /* @__PURE__ */ d(n, { sx: l.headlineContent, children: [
+      /* @__PURE__ */ d(n, { sx: { display: "flex", flexDirection: "column", alignItems: b ? "center" : "flex-start", gap: o["3xs"] }, children: [
+        /* @__PURE__ */ d(n, { sx: { display: "flex", alignItems: "center", gap: o["3xs"] }, children: [
+          /* @__PURE__ */ t(D, { sx: l.headlineText, children: m }),
+          /* @__PURE__ */ t(
+            J,
+            {
+              rulesDisplay: a,
+              rules: e.rules || ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ d(n, { sx: l.contentContainer, children: [
+          /* @__PURE__ */ t(D, { sx: l.titleText, children: e.title }),
+          /* @__PURE__ */ t(D, { sx: l.descriptionText, children: E(e.description) })
+        ] })
+      ] }),
+      b ? /* @__PURE__ */ t(j, {}) : C
+    ] }) }),
+    /* @__PURE__ */ t(n, { sx: l.mainContentArea, children: /* @__PURE__ */ d(n, { sx: l.ctaWrapper, children: [
+      I,
+      b && C
+    ] }) })
+  ] });
+}, ie = (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
+    }
+  };
+}, ue = ({
+  entity: e,
+  headline: m,
+  backgroundImage: u,
+  imageBackgroundGradient: I,
+  signInContent: C,
+  brandingContent: a,
+  rulesDisplay: b
+}) => {
+  var k;
+  const h = A(), o = L(), s = z(), g = ((k = e.branding) == null ? void 0 : k.colors) || null, S = (g == null ? void 0 : g.contentColor) || o.colorSchemes.dark.textColor, c = o.customFontFamily.dark.primary, x = o.customFontFamily.dark.secondary, f = o.customRadius.dark.md, y = o.border.dark.size, l = o.colorSchemes.dark.textColor, i = ie({
+    spacingScale: s,
+    brandingColors: g,
+    secondaryColor: S,
+    fontFamilyPrimary: c,
+    fontFamilySecondary: x,
+    mdBorderRadius: f,
+    borderSize: y,
+    darkTextColor: l,
+    backgroundImage: u,
+    imageBackgroundGradient: I,
+    isMobile: h
+  });
+  return /* @__PURE__ */ d(n, { sx: i.mainContainer, children: [
+    /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(n, { sx: i.headlineSection, children: /* @__PURE__ */ t(n, { sx: i.headlineContent, children: /* @__PURE__ */ d(n, { sx: { ...i.headlineContentInner, display: "flex", flexDirection: "column", alignItems: h ? "center" : "flex-start", gap: s["3xs"] }, children: [
+      /* @__PURE__ */ d(n, { sx: { display: "flex", alignItems: "center", gap: s["3xs"] }, children: [
+        /* @__PURE__ */ t(D, { level: "body-sm", sx: i.headlineText, children: m }),
+        /* @__PURE__ */ t(
+          J,
+          {
+            rulesDisplay: b,
+            isOverlayVariant: !0,
+            rules: e.rules || ""
+          }
+        )
+      ] }),
+      /* @__PURE__ */ d(n, { sx: i.contentContainer, children: [
+        /* @__PURE__ */ t(D, { level: "h4", sx: i.titleText, children: e.title }),
+        /* @__PURE__ */ t(D, { level: "body-lg", sx: i.descriptionText, children: E(e.description) })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ d(n, { sx: i.bottomContainer, children: [
+      a,
+      /* @__PURE__ */ t(n, { sx: i.signInWrapper, children: C })
+    ] })
+  ] });
+}, fe = (e) => {
+  var y, l, i, k, P, R, F;
+  const m = L(), u = A(), I = e.defaultImagePlaceholder ? e.defaultImagePlaceholder : u ? K : Q, C = Y(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: I
+    },
+    G.SPLIT
+  ), a = ((y = e.entity.branding) == null ? void 0 : y.colors) || null, b = (a == null ? void 0 : a.borderColor) || null, h = (a == null ? void 0 : a.backgroundColor) || X().surfaceVariant, o = Z(h), s = z(), g = q(), S = u ? ((i = (l = e.entity.branding) == null ? void 0 : l.images) == null ? void 0 : i.mobileLogo) || ((P = (k = e.entity.branding) == null ? void 0 : k.images) == null ? void 0 : P.mainLogo) || "" : ((F = (R = e.entity.branding) == null ? void 0 : R.images) == null ? void 0 : F.mainLogo) || "", c = {
+    questionArea: {
+      width: "100%",
+      justifyContent: "center",
+      display: "flex",
+      flexDirection: "column"
+    },
+    questionAreaContent: {
+      p: s.lg,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: "16px"
+    },
+    leadContentContainer: {
+      p: s.md,
+      gap: s.md,
+      display: "flex",
+      flexDirection: "column",
+      backdropFilter: "blur(4px)",
+      bgcolor: `rgba(${o.replace(/[^\d,]/g, "")}, 0.5)`,
+      borderRadius: g.sm
+    }
+  }, x = (T) => {
+    var r, W, B, M, v;
+    return /* @__PURE__ */ t(
+      e.PresentedBy,
+      {
+        brandingLogo: S,
+        textColor: T,
+        label: ((r = e.entity.labels) == null ? void 0 : r.sponsor) || null,
+        primaryUrl: (B = (W = e.entity.branding) == null ? void 0 : W.urls) == null ? void 0 : B.primaryUrl,
+        secondaryUrl: (v = (M = e.entity.branding) == null ? void 0 : M.urls) == null ? void 0 : v.secondaryUrl,
+        isCentered: !1
+      }
+    );
+  }, f = () => {
+    var W, B, M, v, w, p, U, H, O, N, V;
+    const { CollectLeadWrapper: T, entity: r } = e;
+    return /* @__PURE__ */ d(j, { children: [
+      /* @__PURE__ */ t(n, { sx: c.questionArea, children: /* @__PURE__ */ t(n, { sx: c.questionAreaContent, children: /* @__PURE__ */ t(n, { sx: c.leadContentContainer, children: /* @__PURE__ */ t(
+        T,
+        {
+          sdk: e.sdk,
+          contentId: r.id,
+          contentName: r.title,
+          brandingColors: (W = r.branding) == null ? void 0 : W.colors,
+          brandingUrls: (B = r.branding) == null ? void 0 : B.urls,
+          campaignId: (M = e.leads) == null ? void 0 : M.campaignId,
+          campaignName: (v = e.leads) == null ? void 0 : v.campaignName,
+          fields: (w = e.leads) == null ? void 0 : w.fields,
+          leadTitle: (p = r.labels) == null ? void 0 : p.leadTitle,
+          leadDescription: (U = r.labels) == null ? void 0 : U.leadDescription,
+          leadCta: (H = r.labels) == null ? void 0 : H.leadCta,
+          leadSuccessTitle: (O = r.labels) == null ? void 0 : O.leadSuccessTitle,
+          leadSuccessDescription: (N = r.labels) == null ? void 0 : N.leadSuccessDescription,
+          syncWithProfile: (V = e.leads) == null ? void 0 : V.syncWithProfile,
+          startGame: e.onLeadSubmitted,
+          isAfterPosition: !0,
+          isSubmittingParticipation: e.isSubmitting
+        }
+      ) }) }) }),
+      S && u && /* @__PURE__ */ t(n, { sx: { mb: s.lg, px: s.lg }, children: x(
+        (a == null ? void 0 : a.contentColor) || m.colorSchemes.dark.textColor
+      ) })
+    ] });
+  };
+  return /* @__PURE__ */ t(e.MainCard, { brandingBorderColor: b, children: /* @__PURE__ */ t(
+    ee,
+    {
+      entity: e.entity,
+      headline: e.headline,
+      finalImage: C,
+      brandingLogo: S,
+      renderPresentedBy: x,
+      rulesDisplay: e.rulesDisplay,
+      children: f()
+    }
+  ) });
+}, ye = (e) => {
+  const m = L(), u = A(), I = e.defaultImagePlaceholder ? e.defaultImagePlaceholder : u ? K : Q, { brandingImage: C, brandingColors: a, brandingLogo: b } = _(e.entity.branding || null), h = C || Y(
+    {
+      images: e.entity.images || null,
+      imagePlaceholder: I
+    },
+    G.OVERLAY
+  ), o = z(), s = (a == null ? void 0 : a.backgroundColor) || m.colorSchemes.dark.surfaceVariant, g = {
+    mainContentSection: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "24px"
+    },
+    contentContainerWithBackdrop: {
+      borderRadius: m.customRadius.dark.sm,
+      p: o.md,
+      display: "flex",
+      flexDirection: "column",
+      gap: o.md,
+      backdropFilter: "blur(4px)",
+      position: "relative",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: s,
+        opacity: 0.5,
+        borderRadius: "inherit",
+        zIndex: 0
+      },
+      "& > *": {
+        position: "relative",
+        zIndex: 1
+      }
+    },
+    presentedByContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: u ? "center" : "space-between",
+      flexDirection: u ? "column-reverse" : "row",
+      gap: o.md
+    }
+  }, S = () => {
+    var x, f, y, l, i;
+    return /* @__PURE__ */ t(
+      e.PresentedBy,
+      {
+        brandingLogo: b || "",
+        textColor: m.colorSchemes.dark.textColor,
+        label: ((x = e.entity.labels) == null ? void 0 : x.sponsor) || null,
+        primaryUrl: (y = (f = e.entity.branding) == null ? void 0 : f.urls) == null ? void 0 : y.primaryUrl,
+        secondaryUrl: (i = (l = e.entity.branding) == null ? void 0 : l.urls) == null ? void 0 : i.secondaryUrl
+      }
+    );
+  }, c = () => {
+    var x, f, y, l, i, k, P, R, F, T, r;
+    return /* @__PURE__ */ d(n, { sx: g.mainContentSection, children: [
+      /* @__PURE__ */ t(n, { sx: g.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
+        e.CollectLeadWrapper,
+        {
+          sdk: e.sdk,
+          contentId: e.entity.id,
+          contentName: e.entity.title,
+          brandingColors: (x = e.entity.branding) == null ? void 0 : x.colors,
+          brandingUrls: (f = e.entity.branding) == null ? void 0 : f.urls,
+          campaignId: (y = e.leads) == null ? void 0 : y.campaignId,
+          campaignName: (l = e.leads) == null ? void 0 : l.campaignName,
+          fields: (i = e.leads) == null ? void 0 : i.fields,
+          leadTitle: (k = e.entity.labels) == null ? void 0 : k.leadTitle,
+          leadDescription: (P = e.entity.labels) == null ? void 0 : P.leadDescription,
+          leadCta: (R = e.entity.labels) == null ? void 0 : R.leadCta,
+          leadSuccessTitle: (F = e.entity.labels) == null ? void 0 : F.leadSuccessTitle,
+          leadSuccessDescription: (T = e.entity.labels) == null ? void 0 : T.leadSuccessDescription,
+          syncWithProfile: (r = e.leads) == null ? void 0 : r.syncWithProfile,
+          startGame: e.onLeadSubmitted,
+          isAfterPosition: !0,
+          isSubmittingParticipation: e.isSubmitting
+        }
+      ) }),
+      /* @__PURE__ */ t(n, { sx: g.presentedByContainer, children: S() })
+    ] });
+  };
+  return /* @__PURE__ */ t(
+    te,
+    {
+      entity: e.entity,
+      headline: e.headline,
+      finalImage: h,
+      rulesDisplay: e.rulesDisplay,
+      children: c()
+    }
+  );
+};
+export {
+  ue as O,
+  xe as S,
+  fe as a,
+  ye as b
+};

package/chunks/{OverlayScoreStateSkeleton-xvq9lQEi.js → OverlayScoreStateSkeleton-DJn0Rim3.js}

@@ -1,7 +1,7 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { e as k, u as F, f as z, B as l, T as a } from "./ConstantsProvider-BPJJz9fq.js";
-import { s as I } from "./useImageVariant-Do8kOVs2.js";
-import { R as v } from "./useInfoPage-v91yL5SS.js";
+import { e as k, u as F, f as z, B as l, T as a } from "./PrizeCard-gMp7I66d.js";
+import { s as I } from "./useImageVariant-pnFelF9A.js";
+import { R as v } from "./NotFoundSkeleton-B3RNa8KJ.js";
 const R = (e) => ({
   // Main container with background overlay
   mainContainer: {