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

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

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

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