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

package/packages/poll-vote/src/components/Variants/Overlay/SignIn/PollOverlaySignIn.styles.js

@@ -1,42 +0,0 @@
-const o = (e) => ({
-  // Pulse animation for buttons
-  pulseAnimation: {
-    "@keyframes pulse": {
-      "0%": { transform: "scale(1)" },
-      "50%": { transform: "scale(1.05)" },
-      "100%": { transform: "scale(1)" }
-    }
-  },
-  // Sign In button
-  signInButton: {
-    borderRadius: e.buttonRadius,
-    bgcolor: e.primaryColor,
-    color: "#FFFFFF",
-    py: "10px",
-    px: "16px",
-    "&:hover": {
-      bgcolor: e.primaryColor
-    },
-    "&:active": {
-      color: e.onPrimaryColor
-    },
-    animation: "pulse 1s infinite",
-    fontSize: "0.9375em"
-  },
-  // Start button text
-  signInButtonText: {
-    fontFamily: e.fontFamilyPrimary,
-    fontWeight: 500,
-    fontSize: "0.9375em",
-    lineHeight: "24px",
-    letterSpacing: "0.46px",
-    textTransform: "uppercase",
-    color: e.onPrimaryColor,
-    gap: "8px",
-    display: "flex",
-    alignItems: "center"
-  }
-});
-export {
-  o as createStyles
-};

package/packages/poll-vote/src/components/Variants/Split/Error/PollSplitError.js

@@ -1,42 +0,0 @@
-import { j as r } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { isMobile as u } from "../../../../../../common/src/functions/theme.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import "@mui/joy";
-import "react";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import b from "../../../../../../common/src/components/Skeletons/Split/ApiError/SplitApiErrorSkeleton.js";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import p from "../../../Shared/MainCard.js";
-import c from "../../../Shared/PresentedBy.js";
-import { useTranslation as f } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const D = (o) => {
-  var e, t, n, a;
-  const g = u(), { t: i } = f(), l = ((e = o.poll.branding) == null ? void 0 : e.colors) || null, s = g ? ((t = o.poll.branding) == null ? void 0 : t.images.mobileLogo) || ((n = o.poll.branding) == null ? void 0 : n.images.mainLogo) || "" : ((a = o.poll.branding) == null ? void 0 : a.images.mainLogo) || "";
-  return /* @__PURE__ */ r.jsx(p, { brandingBorderColor: (l == null ? void 0 : l.borderColor) || null, children: /* @__PURE__ */ r.jsx(
-    b,
-    {
-      entity: o.poll,
-      headline: i("poll.headline"),
-      tryAgainButtonText: i("poll.buttons.tryAgain"),
-      defaultImagePlaceholderUrl: o.defaultImagePlaceholderUrl,
-      isApiError: o.isApiError,
-      toggleTryAgain: o.toggleTryAgain,
-      rulesDisplay: o.rulesDisplay,
-      renderPresentedBy: (d) => {
-        var m;
-        return /* @__PURE__ */ r.jsx(
-          c,
-          {
-            brandingLogo: s,
-            textColor: d,
-            label: ((m = o.poll.labels) == null ? void 0 : m.sponsor) || null
-          }
-        );
-      }
-    }
-  ) });
-};
-export {
-  D as default
-};

package/packages/poll-vote/src/components/Variants/Split/LeadCollection/SplitLeadAfterCollection.js

@@ -1,36 +0,0 @@
-import { j as o } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import "react";
-import "../../../../../../common/src/providers/ContainerProvider.js";
-import "../../../../../../../node_modules/i18next/dist/esm/i18next.js";
-import "../../../../../../../node_modules/i18next-browser-languagedetector/dist/esm/i18nextBrowserLanguageDetector.js";
-import "@mui/joy";
-import "../../../../../../common/src/providers/ConstantsProvider.js";
-import i from "../../../../../../common/src/components/LeadCollection/SplitLeadAfterCollection.js";
-import m from "../../../Shared/MainCard.js";
-import r from "../../../Shared/PresentedBy.js";
-import l from "../../../Leads/CollectLeadWrapper.js";
-import a from "../../../../assets/default-quiz-bg.png.js";
-import d from "../../../../assets/default-quiz-bg-vertical.jpg.js";
-import { useTranslation as n } from "../../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const P = (t) => {
-  const { t: e } = n();
-  return /* @__PURE__ */ o.jsx(
-    i,
-    {
-      entity: t.poll,
-      headline: e("poll.headline"),
-      sdk: t.sdk,
-      leads: t.leads,
-      defaultImagePlaceholder: a,
-      mobileImagePlaceholder: d,
-      onLeadSubmitted: t.onLeadSubmitted,
-      isSubmitting: t.isSubmitting,
-      MainCard: m,
-      PresentedBy: r,
-      CollectLeadWrapper: l
-    }
-  );
-};
-export {
-  P as default
-};

package/packages/poll-vote/src/components/Variants/Split/PollSplitVariant.js

@@ -1,231 +0,0 @@
-import { j as l } from "../../../../../../node_modules/react/jsx-runtime.js";
-import Q from "react";
-import { Box as n, Typography as u } from "@mui/joy";
-import { useInternalTheme as he, isMobile as Ce, isLarge as be, useColors as c, useFontFamily as X, useCornerRadius as Y, useSpacingScale as ye, useImageBackgroundGradient as je } from "../../../../../common/src/functions/theme.js";
-import { hexToRgb as pe, stripHtmlTags as Te } 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 Z } from "../../../../../common/src/enums/enums.js";
-import { useConstantContext as Pe } from "../../../../../common/src/hooks/useConstantContext.js";
-import { ConstantsContext as Se } from "../../../../../common/src/providers/ConstantsProvider.js";
-import Le from "../../../../../common/src/components/Skeletons/Split/SplitSkeleton.js";
-import { useImageVariant as Ie } from "../../../../../common/src/hooks/useImageVariant.js";
-import "../../../../../common/src/providers/ContainerProvider.js";
-import $ from "../../Shared/Button.js";
-import ke from "../../Shared/MainCard.js";
-import Fe from "../../../assets/default-quiz-bg.png.js";
-import Be from "../../../assets/default-quiz-bg-vertical.jpg.js";
-import De from "../../Shared/PresentedBy.js";
-import Re from "../../Leads/CollectLeadWrapper.js";
-import { useEmbedCode as ve } from "../../../hooks/useEmbedCodeContainer.js";
-import { createStyles as Ve } from "./PollSplitVariant.styles.js";
-import we from "../../Shared/Answers/PollOptions.js";
-import { usePollOptionsImages as Oe } from "../../../hooks/usePollOptionsImages.js";
-import { useTranslation as Ae } from "../../../../../../node_modules/react-i18next/dist/es/useTranslation.js";
-const sl = (e) => {
-  var T, P, S, L, I, k, F, B, D, R, v, V, w, O, A, U, E, q, W, G, H, M;
-  const [h, C] = Q.useState(
-    ((T = e.leads) == null ? void 0 : T.position) === "before" && e.poll.authRequirement === "LEAD"
-  );
-  Q.useEffect(() => {
-    var x;
-    C(
-      ((x = e.leads) == null ? void 0 : x.position) === "before" && e.poll.authRequirement === "LEAD" || !1
-    );
-  }, [(P = e.leads) == null ? void 0 : P.position, e.poll.authRequirement]);
-  const { optionsLayout: ee } = Pe(Se), b = he(), y = Ce(), a = be(), le = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : y ? Be : Fe, j = Ie(
-    {
-      images: e.poll.images,
-      imagePlaceholder: le
-    },
-    Z.SPLIT
-  ), te = Oe(e.options), { t: m } = Ae(), t = ((S = e.poll.branding) == null ? void 0 : S.colors) || null, s = y ? ((L = e.poll.branding) == null ? void 0 : L.images.mobileLogo) || ((I = e.poll.branding) == null ? void 0 : I.images.mainLogo) || "" : ((k = e.poll.branding) == null ? void 0 : k.images.mainLogo) || "", oe = ve(e.poll.embedCode), g = !h && !!e.poll.embedCode, p = ((F = e.leads) == null ? void 0 : F.position) === "after" ? m("poll.buttons.continue") : m("poll.buttons.vote"), ne = (t == null ? void 0 : t.contentColor) || c().textColor, ie = X().secondary, ae = "60%", se = X().primary, re = Y().xl, ce = (t == null ? void 0 : t.backgroundColor) || c().surfaceVariant, f = (t == null ? void 0 : t.primaryColor) || ((D = (B = c().palette) == null ? void 0 : B.primary) == null ? void 0 : D.plainColor), me = (v = (R = c().palette) == null ? void 0 : R.primary) == null ? void 0 : v.onPrimary, i = c().textColor, d = ye(), de = Y(), xe = je(
-    Z.SPLIT
-  ), ue = pe(ce || ""), o = Ve({
-    finalImage: j,
-    spacingScale: d,
-    borderRadius: de,
-    fontFamilyPrimary: se,
-    fontFamilySecondary: ie,
-    secondaryColor: ne,
-    opacity: ae,
-    buttonRadius: re,
-    bgcolor: ue,
-    primaryColor: f,
-    onPrimaryColor: me,
-    textColor: i,
-    brandingColors: t,
-    darkTextColor: b.colorSchemes.dark.textColor,
-    imageBackgroundGradient: xe,
-    isLarge: a
-  }), ge = () => {
-    C(!1);
-  }, r = (x, fe) => {
-    var N, _, z, J, K;
-    return /* @__PURE__ */ l.jsx(
-      De,
-      {
-        brandingLogo: s,
-        textColor: x,
-        label: ((N = e.poll.labels) == null ? void 0 : N.sponsor) || null,
-        primaryUrl: (z = (_ = e.poll.branding) == null ? void 0 : _.urls) == null ? void 0 : z.primaryUrl,
-        secondaryUrl: (K = (J = e.poll.branding) == null ? void 0 : J.urls) == null ? void 0 : K.secondaryUrl,
-        isCentered: fe || !1
-      }
-    );
-  };
-  return /* @__PURE__ */ l.jsxs(
-    ke,
-    {
-      brandingBorderColor: (t == null ? void 0 : t.borderColor) || null,
-      state: "play",
-      children: [
-        /* @__PURE__ */ l.jsx(
-          Le,
-          {
-            entity: { ...e.poll, type: "poll" },
-            headline: m("poll.headline"),
-            finalImage: j,
-            rulesDisplay: e.rulesDisplay,
-            embedCodeContainerRef: oe,
-            hasEmbedCode: g,
-            brandingLogo: s,
-            renderPresentedBy: r,
-            children: /* @__PURE__ */ l.jsx(n, { sx: o.questionArea, children: /* @__PURE__ */ l.jsxs(n, { sx: o.questionAreaContent, children: [
-              g && /* @__PURE__ */ l.jsx(n, { sx: o.embedCodeHeadlineContent, children: /* @__PURE__ */ l.jsxs(n, { children: [
-                /* @__PURE__ */ l.jsx(
-                  u,
-                  {
-                    sx: {
-                      ...o.pollHeadlineText,
-                      color: i,
-                      textAlign: "center"
-                    },
-                    children: m("poll.headline")
-                  }
-                ),
-                /* @__PURE__ */ l.jsxs(n, { sx: o.contentContainer, children: [
-                  /* @__PURE__ */ l.jsx(
-                    u,
-                    {
-                      sx: {
-                        ...o.pollTitleText,
-                        color: i,
-                        textAlign: "center"
-                      },
-                      children: e.poll.title
-                    }
-                  ),
-                  /* @__PURE__ */ l.jsx(
-                    u,
-                    {
-                      sx: {
-                        ...o.pollDescriptionText,
-                        color: i,
-                        textAlign: "center"
-                      },
-                      children: Te(e.poll.description)
-                    }
-                  )
-                ] })
-              ] }) }),
-              h ? /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
-                /* @__PURE__ */ l.jsx(n, { sx: o.leadContentContainer, children: /* @__PURE__ */ l.jsx(
-                  Re,
-                  {
-                    sdk: e.sdk,
-                    startGame: ge,
-                    contentId: e.poll.id,
-                    contentName: e.poll.title,
-                    brandingColors: (V = e.poll.branding) == null ? void 0 : V.colors,
-                    brandingUrls: (w = e.poll.branding) == null ? void 0 : w.urls,
-                    campaignId: (O = e.leads) == null ? void 0 : O.campaignId,
-                    campaignName: (A = e.leads) == null ? void 0 : A.campaignName,
-                    fields: (U = e.leads) == null ? void 0 : U.fields,
-                    leadTitle: (E = e.poll.labels) == null ? void 0 : E.leadTitle,
-                    leadDescription: (q = e.poll.labels) == null ? void 0 : q.leadDescription,
-                    leadCta: (W = e.poll.labels) == null ? void 0 : W.leadCta,
-                    leadSuccessTitle: (G = e.poll.labels) == null ? void 0 : G.leadSuccessTitle,
-                    leadSuccessDescription: (H = e.poll.labels) == null ? void 0 : H.leadSuccessDescription,
-                    syncWithProfile: (M = e.leads) == null ? void 0 : M.syncWithProfile
-                  }
-                ) }),
-                s ? /* @__PURE__ */ l.jsx(n, { sx: { display: a ? "block" : "none" }, children: r(i) }) : /* @__PURE__ */ l.jsx(l.Fragment, {})
-              ] }) : /* @__PURE__ */ l.jsx(l.Fragment, { children: /* @__PURE__ */ l.jsxs(n, { sx: o.mainContentContainer, children: [
-                e.poll.alternativeTitle ? /* @__PURE__ */ l.jsx(n, { sx: o.alternativeTitleSection, children: /* @__PURE__ */ l.jsx(
-                  u,
-                  {
-                    level: "body-lg",
-                    sx: o.alternativeTitleText,
-                    children: e.poll.alternativeTitle
-                  }
-                ) }) : /* @__PURE__ */ l.jsx(l.Fragment, {}),
-                /* @__PURE__ */ l.jsx(
-                  we,
-                  {
-                    options: e.options || [],
-                    answerPoll: e.answerPoll,
-                    selectedOptions: e.selectedOptions,
-                    optionsLayout: a ? "column" : ee ?? "twoByTwo",
-                    brandingColors: t,
-                    optionsImages: te,
-                    multipleChoice: e.poll.multipleChoice,
-                    maxChoices: e.optionChoices,
-                    isVoting: e.isVoting
-                  }
-                ),
-                g ? /* @__PURE__ */ l.jsxs(
-                  n,
-                  {
-                    sx: {
-                      display: "flex",
-                      flexDirection: a ? "column-reverse" : "row",
-                      gap: d.lg,
-                      justifyContent: s ? "space-between" : "center"
-                    },
-                    children: [
-                      r(
-                        (t == null ? void 0 : t.contentColor) || i
-                      ),
-                      /* @__PURE__ */ l.jsx(
-                        $,
-                        {
-                          selectedOptions: e.selectedOptions,
-                          label: p,
-                          buttonColor: f,
-                          onClick: e.voteForPoll,
-                          isVoting: e.isVoting
-                        }
-                      )
-                    ]
-                  }
-                ) : /* @__PURE__ */ l.jsx(l.Fragment, { children: /* @__PURE__ */ l.jsxs(n, { sx: o.buttonFooterContainer, children: [
-                  /* @__PURE__ */ l.jsx(
-                    $,
-                    {
-                      selectedOptions: e.selectedOptions,
-                      label: p,
-                      buttonColor: f,
-                      onClick: e.voteForPoll,
-                      isVoting: e.isVoting
-                    }
-                  ),
-                  s && !a ? /* @__PURE__ */ l.jsx(n, { sx: o.presentedByMobile, children: r(
-                    (t == null ? void 0 : t.contentColor) || i
-                  ) }) : /* @__PURE__ */ l.jsx(l.Fragment, {})
-                ] }) })
-              ] }) })
-            ] }) })
-          }
-        ),
-        s && a && /* @__PURE__ */ l.jsx(n, { sx: { mb: d.lg, px: d.lg }, children: r(
-          (t == null ? void 0 : t.contentColor) || b.colorSchemes.dark.textColor,
-          !0
-        ) })
-      ]
-    }
-  );
-};
-export {
-  sl as default
-};

package/packages/poll-vote/src/components/Variants/Split/PollSplitVariant.styles.js

@@ -1,332 +0,0 @@
-const r = (e) => {
-  var t, i, n, a, l, o;
-  return {
-    // Main headline section with background image
-    headlineSection: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      gap: "10px",
-      flex: e.isLarge ? "1" : "0 0 50%",
-      width: e.isLarge ? "100%" : "50%",
-      minWidth: e.isLarge ? "100%" : "50%",
-      maxWidth: e.isLarge ? "100%" : "50%",
-      backgroundImage: `url(${e.finalImage})`,
-      backgroundSize: "cover",
-      backgroundPosition: "center",
-      borderTopLeftRadius: e.borderRadius.md,
-      borderTopRightRadius: e.isLarge ? e.borderRadius.md : 0,
-      borderBottomLeftRadius: e.isLarge ? 0 : e.borderRadius.md,
-      overflow: "hidden",
-      height: "auto",
-      position: "relative",
-      minHeight: e.isLarge ? "210px" : "430px",
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        background: e.imageBackgroundGradient,
-        borderTopLeftRadius: "5px",
-        borderTopRightRadius: "5px"
-      }
-    },
-    embedCodeHeadlineSection: {
-      flex: e.isLarge ? "1" : "0 0 50%",
-      width: e.isLarge ? "100%" : "50%",
-      minWidth: e.isLarge ? "100%" : "50%",
-      maxWidth: e.isLarge ? "100%" : "50%",
-      borderTopLeftRadius: e.borderRadius.md,
-      borderTopRightRadius: e.isLarge ? e.borderRadius.md : 0,
-      borderBottomLeftRadius: e.isLarge ? 0 : e.borderRadius.md,
-      overflow: "hidden",
-      height: "auto",
-      position: "relative",
-      minHeight: e.isLarge ? "210px" : "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: ((t = e.brandingColors) == null ? void 0 : t.secondaryColor) || e.darkTextColor,
-      opacity: "70%",
-      textTransform: "uppercase",
-      fontFamily: e.fontFamilySecondary,
-      textAlign: e.isLarge ? "center" : "left"
-    },
-    // Poll headline typography on filter screen
-    pollHeadlineTextFilterScreen: {
-      fontWeight: 500,
-      lineHeight: "166%",
-      letterSpacing: "1px",
-      fontSize: "0.75em",
-      color: ((i = e.brandingColors) == null ? void 0 : i.secondaryColor) || e.textColor,
-      opacity: "70%",
-      textTransform: "uppercase",
-      fontFamily: e.fontFamilySecondary,
-      textAlign: e.isLarge ? "center" : "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: ((n = e.brandingColors) == null ? void 0 : n.contentColor) || e.darkTextColor,
-      fontFamily: e.fontFamilyPrimary,
-      textAlign: e.isLarge ? "center" : "left"
-    },
-    // Poll title typography on filter screen
-    pollTitleTextFilterScreen: {
-      fontWeight: 700,
-      lineHeight: "133%",
-      fontSize: "1.5em",
-      letterSpacing: "0.15px",
-      color: ((a = e.brandingColors) == null ? void 0 : a.contentColor) || e.textColor,
-      fontFamily: e.fontFamilyPrimary,
-      textAlign: e.isLarge ? "center" : "left"
-    },
-    // Poll description typography
-    pollDescriptionText: {
-      fontWeight: 400,
-      lineHeight: "140%",
-      fontSize: "1.25em",
-      letterSpacing: "0.15px",
-      color: ((l = e.brandingColors) == null ? void 0 : l.secondaryColor) || e.darkTextColor,
-      opacity: "70%",
-      fontFamily: e.fontFamilyPrimary,
-      textAlign: e.isLarge ? "center" : "left"
-    },
-    // Poll description typography on filter screen
-    pollDescriptionTextFilterScreen: {
-      fontWeight: 400,
-      lineHeight: "140%",
-      fontSize: "1.25em",
-      letterSpacing: "0.15px",
-      color: ((o = e.brandingColors) == null ? void 0 : o.secondaryColor) || e.textColor,
-      opacity: "70%",
-      fontFamily: e.fontFamilyPrimary,
-      textAlign: e.isLarge ? "center" : "left"
-    },
-    // Filter screen bottom container
-    filterScreenBottomContainer: {
-      display: "flex",
-      flexDirection: e.isLarge ? "column-reverse" : "row",
-      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: e.isLarge ? "none" : "block"
-    },
-    // Question area
-    questionArea: {
-      width: "100%",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center"
-    },
-    // Stopwatch container
-    stopwatchContainer: {
-      display: "flex",
-      justifyContent: "center"
-    },
-    // Lead content container (filter screen)
-    leadContentContainer: {
-      p: e.spacingScale.md,
-      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: e.isLarge ? "flex" : "none",
-      justifyContent: "center"
-    }
-  };
-};
-export {
-  r as createStyles
-};