fansunited-frontend-components 0.0.31-RC4 → 0.0.31-RC5

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

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

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

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

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

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