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

package/packages/collect-lead/src/components/Variants/Split/LeadSplitVariant.styles.js

@@ -0,0 +1,338 @@
+const t = (e) => ({
+  // Main headline section with background image
+  headlineSection: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    gap: "10px",
+    // flex: "0.5",
+    flex: { xs: "1", md: "0 0 50%" },
+    width: { xs: "100%", md: "50%" },
+    minWidth: { xs: "100%", md: "50%" },
+    maxWidth: { xs: "100%", md: "50%" },
+    backgroundImage: `url(${e.finalImage})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    borderTopLeftRadius: e.borderRadius.md,
+    borderTopRightRadius: { xs: e.borderRadius.md, md: "0" },
+    borderBottomLeftRadius: { xs: 0, md: e.borderRadius.md },
+    overflow: "hidden",
+    height: "auto",
+    position: "relative",
+    minHeight: { xs: "210px", md: "430px" },
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      background: e.imageBackgroundGradient,
+      borderTopLeftRadius: "5px",
+      borderTopRightRadius: "5px"
+    }
+  },
+  embedCodeHeadlineSection: {
+    flex: "0.5",
+    borderTopLeftRadius: e.borderRadius.md,
+    borderTopRightRadius: { xs: e.borderRadius.md, md: "0" },
+    borderBottomLeftRadius: { xs: 0, md: e.borderRadius.md },
+    overflow: "hidden",
+    height: "auto",
+    position: "relative",
+    minHeight: { xs: "210px", md: "430px" }
+  },
+  // Headline content wrapper
+  embedCodeHeadlineContent: {
+    gap: e.spacingScale.xl,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  // Filter screen area
+  filterScreenArea: {
+    flex: "0.5",
+    display: "flex",
+    flexDirection: "column",
+    p: e.spacingScale.lg
+  },
+  // Filter screen headline section
+  filterScreenHeadlineContent: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    gap: e.spacingScale["2xl"],
+    textAlign: "center"
+  },
+  // Filter screen headline text
+  filterScreenHeadlineText: {
+    fontWeight: 500,
+    lineHeight: "166%",
+    letterSpacing: "1px",
+    textTransform: "uppercase",
+    fontSize: "0.75em",
+    color: e.secondaryColor,
+    opacity: e.opacity,
+    fontFamily: e.fontFamilySecondary
+  },
+  // Filter screen title text
+  filterScreenTitleText: {
+    fontWeight: 700,
+    lineHeight: "133%",
+    letterSpacing: "0px",
+    fontSize: "1.5em",
+    color: e.textColor,
+    fontFamily: e.fontFamilyPrimary
+  },
+  // Filter screen description text
+  filterScreenDescriptionText: {
+    fontWeight: 400,
+    lineHeight: "140%",
+    letterSpacing: "0.15px",
+    fontSize: "1.25em",
+    color: e.secondaryColor,
+    opacity: e.opacity,
+    fontFamily: e.fontFamilyPrimary
+  },
+  // Filter screen CTA wrapper
+  filterScreenCtaWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: e.spacingScale["2xl"]
+  },
+  // Headline content wrapper
+  headlineContent: {
+    zIndex: 1,
+    height: "100%",
+    p: e.spacingScale.xl,
+    gap: e.spacingScale.xl,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between"
+  },
+  // Poll headline typography
+  pollHeadlineText: {
+    fontWeight: 500,
+    lineHeight: "166%",
+    letterSpacing: "1px",
+    fontSize: "0.75em",
+    color: e.darkTextColor,
+    opacity: "70%",
+    textTransform: "uppercase",
+    fontFamily: e.fontFamilySecondary,
+    textAlign: { xs: "center", md: "left" }
+  },
+  // Poll headline typography on filter screen
+  pollHeadlineTextFilterScreen: {
+    fontWeight: 500,
+    lineHeight: "166%",
+    letterSpacing: "1px",
+    fontSize: "0.75em",
+    color: e.textColor,
+    opacity: "70%",
+    textTransform: "uppercase",
+    fontFamily: e.fontFamilySecondary,
+    textAlign: { xs: "center", md: "left" }
+  },
+  // Content container
+  contentContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale["3xs"]
+  },
+  // Poll title typography
+  pollTitleText: {
+    fontWeight: 700,
+    lineHeight: "133%",
+    fontSize: "1.5em",
+    letterSpacing: "0.15px",
+    color: e.darkTextColor,
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: { xs: "center", md: "left" }
+  },
+  // Poll title typography on filter screen
+  pollTitleTextFilterScreen: {
+    fontWeight: 700,
+    lineHeight: "133%",
+    fontSize: "1.5em",
+    letterSpacing: "0.15px",
+    color: e.textColor,
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: { xs: "center", md: "left" }
+  },
+  // Poll description typography
+  pollDescriptionText: {
+    fontWeight: 400,
+    lineHeight: "140%",
+    fontSize: "1.25em",
+    letterSpacing: "0.15px",
+    color: e.darkTextColor,
+    opacity: "70%",
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: { xs: "center", md: "left" }
+  },
+  // Poll description typography on filter screen
+  pollDescriptionTextFilterScreen: {
+    fontWeight: 400,
+    lineHeight: "140%",
+    fontSize: "1.25em",
+    letterSpacing: "0.15px",
+    color: e.textColor,
+    opacity: "70%",
+    fontFamily: e.fontFamilyPrimary,
+    textAlign: { xs: "center", md: "left" }
+  },
+  // Filter screen bottom container
+  filterScreenBottomContainer: {
+    display: "flex",
+    flexDirection: { md: "row", xs: "column-reverse" },
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: e.spacingScale.lg
+  },
+  // Start button (filter screen)
+  startButton: {
+    borderRadius: e.buttonRadius,
+    bgcolor: e.primaryColor,
+    color: e.onPrimaryColor,
+    "&:hover": {
+      bgcolor: e.primaryColor
+    },
+    "&:active": {
+      color: e.onPrimaryColor
+    },
+    animation: "pulse 1s infinite",
+    fontSize: "0.9375em",
+    py: "10px",
+    pr: "12px",
+    pl: "16px",
+    "--Icon-color": e.onPrimaryColor
+  },
+  // Start button text
+  startButtonText: {
+    fontFamily: e.fontFamilyPrimary,
+    fontWeight: 500,
+    fontSize: "0.9375em",
+    lineHeight: "24px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase",
+    color: e.onPrimaryColor,
+    gap: "8px",
+    display: "flex",
+    alignItems: "center"
+  },
+  // Presented by desktop container
+  presentedByDesktop: {
+    display: { xs: "none", md: "block" }
+  },
+  // Question area
+  questionArea: {
+    flex: { xs: "1", md: "0 0 50%" },
+    width: { md: "50%" },
+    minWidth: { md: "50%" },
+    maxWidth: { md: "50%" },
+    p: { xs: e.spacingScale.md, md: 0 },
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center"
+  },
+  questionAreaInner: {
+    p: { xs: e.spacingScale.md, md: e.spacingScale.lg },
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "16px"
+  },
+  // Stopwatch container
+  stopwatchContainer: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  // Lead content container (filter screen)
+  leadContentContainer: {
+    p: e.spacingScale.md,
+    pb: e.spacingScale.lg,
+    gap: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)",
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    borderRadius: e.borderRadius.sm
+  },
+  // Question area content wrapper
+  questionAreaContent: {
+    p: e.spacingScale.lg,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    gap: "16px"
+  },
+  // Main content container
+  mainContentContainer: {
+    p: e.spacingScale.lg,
+    gap: e.spacingScale.md,
+    display: "flex",
+    flexDirection: "column",
+    backdropFilter: "blur(4px)",
+    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
+    borderRadius: e.borderRadius.sm
+  },
+  // Aspect ratio container for embed/image
+  aspectRatioContainer: {
+    borderRadius: e.borderRadius.sm,
+    height: "100%",
+    flex: 1,
+    // Take all available space
+    "& > div": {
+      height: "100% !important",
+      flex: "1 !important"
+      // Force flex growth
+    }
+  },
+  // Question image container
+  questionImageContainer: {
+    overflow: "hidden",
+    borderRadius: e.borderRadius.sm
+  },
+  // Question image box
+  questionImageBox: {
+    borderRadius: e.borderRadius.sm,
+    overflow: "hidden",
+    height: "auto"
+  },
+  // Question image
+  questionImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  },
+  // Alternative title section
+  alternativeTitleSection: {
+    gap: "8px",
+    display: "flex",
+    justifyContent: "center"
+  },
+  // Alternative title text
+  alternativeTitleText: {
+    fontFamily: e.fontFamilyPrimary,
+    lineHeight: "150%",
+    letterSpacing: "0.15px",
+    fontWeight: 500,
+    fontSize: "1.25em",
+    textAlign: "center",
+    color: e.textColor
+  },
+  // Button and footer container
+  buttonFooterContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: e.spacingScale.lg
+  },
+  // Presented by mobile container
+  presentedByMobile: {
+    display: { xs: "block", md: "none" }
+  }
+});
+export {
+  t as createStyles
+};

package/packages/collect-lead/src/components/Variants/Standard/LeadStandardVariant.js

@@ -0,0 +1,82 @@
+import { j as e } from "../../../../../../node_modules/react/jsx-runtime.js";
+import { Box as o, Typography as n } from "@mui/joy";
+import { useInternalTheme as K, isMobile as O, useColors as s, useFontFamily as L, useCornerRadius as m, useSpacingScale as X, useImageBackgroundGradient as Y } from "../../../../../common/src/functions/theme.js";
+import { hexToRgb as Z } from "../../../../../common/src/functions/helpers.js";
+import "../../../../../../node_modules/i18next/dist/esm/i18next.js";
+import "../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
+import { WidgetTemplate as k } from "../../../../../common/src/enums/enums.js";
+import "react";
+import { useConstantContext as _ } from "../../../../../common/src/hooks/useConstantContext.js";
+import "../../../../../common/src/providers/ConstantsProvider.js";
+import { useImageVariant as $ } from "../../../../../common/src/hooks/useImageVariant.js";
+import "../../../../../common/src/providers/ContainerProvider.js";
+import ee from "../../Shared/MainCard.js";
+import re from "../../Shared/PresentedBy.js";
+import te from "../../Leads/CollectLeadWrapper.js";
+import { createStyles as oe } from "./LeadStandardVariant.styles.js";
+import { ConfigurationContext as ne } from "../../../providers/ConfigurationProvider.js";
+const Fe = (A) => {
+  var g, h, b, j, y, u, C, f, F;
+  const r = _(ne), D = K(), d = O(), M = d ? ((h = (g = r.branding) == null ? void 0 : g.images) == null ? void 0 : h.mobileLogo) || ((j = (b = r.branding) == null ? void 0 : b.images) == null ? void 0 : j.mainLogo) || "" : ((u = (y = r.branding) == null ? void 0 : y.images) == null ? void 0 : u.mainLogo) || "", c = A.imagePosition || "left", a = $(
+    {
+      images: r.images || null,
+      imagePlaceholder: r.defaultImagePlaceholderUrl ? r.defaultImagePlaceholderUrl : ""
+    },
+    k.STANDARD
+  ), p = s().textColor, H = s().textSecondary, V = L().secondary, W = "60%", v = L().primary, G = s().surfaceVariant, N = m().md, U = m().sm, E = s().palette.primary.plainColor, Q = s().palette.primary.onPrimary, q = m().xl, x = X(), w = Y(
+    k.STANDARD
+  ), t = oe({
+    finalImage: a,
+    spacingScale: x,
+    borderRadius: m(),
+    fontFamilyPrimary: v,
+    fontFamilySecondary: V,
+    textColor: p,
+    secondaryColor: H,
+    bgcolor: Z(G || ""),
+    mdBorderRadius: N,
+    smBorderRadius: U,
+    primaryColor: E,
+    onPrimaryColor: Q,
+    buttonRadius: q,
+    opacity: W,
+    imagePosition: c,
+    darkTextColor: D.colorSchemes.dark.textColor,
+    imageBackgroundGradient: w
+  }), z = (l) => {
+    var i;
+    return /* @__PURE__ */ e.jsx(
+      re,
+      {
+        brandingLogo: M,
+        textColor: l,
+        label: (i = r.labels) == null ? void 0 : i.presentedByLabel
+      }
+    );
+  }, J = () => {
+    var l, i, T, S, I, P, R, B;
+    return d ? a ? /* @__PURE__ */ e.jsx(o, { sx: t.mobileHeadlineWithImage, children: (l = r.labels) != null && l.title || (i = r.labels) != null && i.description ? /* @__PURE__ */ e.jsx(o, { sx: t.mobileHeadlineContent, children: /* @__PURE__ */ e.jsxs(o, { sx: t.contentContainer, children: [
+      (T = r.labels) != null && T.title ? /* @__PURE__ */ e.jsx(n, { sx: t.titleTypographyMobileImage, children: r.labels.title }) : /* @__PURE__ */ e.jsx(e.Fragment, {}),
+      (S = r.labels) != null && S.description ? /* @__PURE__ */ e.jsx(n, { sx: t.descriptionTypographyMobileImage, children: r.labels.description }) : /* @__PURE__ */ e.jsx(e.Fragment, {})
+    ] }) }) : /* @__PURE__ */ e.jsx(e.Fragment, {}) }) : (I = r.labels) != null && I.title || (P = r.labels) != null && P.description ? /* @__PURE__ */ e.jsx(o, { sx: t.mobileHeadlineWithoutImage, children: /* @__PURE__ */ e.jsxs(o, { sx: t.contentContainer, children: [
+      (R = r.labels) != null && R.title ? /* @__PURE__ */ e.jsx(n, { level: "h4", sx: t.titleTypography, children: r.labels.title }) : /* @__PURE__ */ e.jsx(e.Fragment, {}),
+      (B = r.labels) != null && B.description ? /* @__PURE__ */ e.jsx(n, { sx: t.descriptionTypography, children: r.labels.description }) : /* @__PURE__ */ e.jsx(e.Fragment, {})
+    ] }) }) : /* @__PURE__ */ e.jsx(e.Fragment, {}) : /* @__PURE__ */ e.jsx(e.Fragment, {});
+  };
+  return /* @__PURE__ */ e.jsxs(ee, { children: [
+    J(),
+    c === "left" && a ? /* @__PURE__ */ e.jsx(o, { sx: t.imageContainerLeft, children: /* @__PURE__ */ e.jsx(o, { sx: t.imageSafeArea }) }) : null,
+    /* @__PURE__ */ e.jsxs(o, { sx: t.mainContentArea, children: [
+      !d && ((C = r.labels) != null && C.title || (f = r.labels) != null && f.description) ? /* @__PURE__ */ e.jsx(o, { sx: { px: x.md }, children: /* @__PURE__ */ e.jsx(o, { sx: t.desktopHeadlineContainer, children: /* @__PURE__ */ e.jsx(o, { children: /* @__PURE__ */ e.jsxs(o, { sx: t.contentContainer, children: [
+        r.labels.title ? /* @__PURE__ */ e.jsx(n, { level: "h4", sx: t.titleTypographyDesktop, children: r.labels.title }) : /* @__PURE__ */ e.jsx(e.Fragment, {}),
+        (F = r.labels) != null && F.description ? /* @__PURE__ */ e.jsx(n, { sx: t.descriptionTypographyDesktop, children: r.labels.description }) : /* @__PURE__ */ e.jsx(e.Fragment, {})
+      ] }) }) }) }) : /* @__PURE__ */ e.jsx(e.Fragment, {}),
+      /* @__PURE__ */ e.jsx(o, { sx: t.leadCollectionContainer, children: /* @__PURE__ */ e.jsx(o, { sx: t.leadQuestionContainer, children: /* @__PURE__ */ e.jsx(o, { sx: t.leadContentContainer, children: /* @__PURE__ */ e.jsx(te, {}) }) }) }),
+      /* @__PURE__ */ e.jsx(o, { sx: { px: x.md }, children: z(p) })
+    ] }),
+    c === "right" && a ? /* @__PURE__ */ e.jsx(o, { sx: t.imageContainerRight, children: /* @__PURE__ */ e.jsx(o, { sx: t.imageSafeArea }) }) : null
+  ] });
+};
+export {
+  Fe as default
+};