fansunited-frontend-components 0.0.1-RC5 → 0.0.1-RC6

package/src/components/Variants/Split/ScoreState/SplitScoreState.styles.js

@@ -1,400 +0,0 @@
-export const createStyles = (props) => ({
-    // Desktop image section with overlay
-    desktopImageSection: (isTabulated) => ({
-        display: { lg: "flex", xs: "none" },
-        flexDirection: "column",
-        justifyContent: "space-between",
-        gap: "10px",
-        flex: "0.5",
-        backgroundImage: `url(${props.quizImage || props.imagePlaceholder})`,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        borderTopLeftRadius: isTabulated ? 0 : props.borderRadius.md,
-        borderTopRightRadius: {
-            xs: isTabulated ? 0 : props.borderRadius.md,
-            md: "0",
-        },
-        borderBottomLeftRadius: {
-            xs: 0,
-            md: props.borderRadius.md,
-        },
-        overflow: "hidden",
-        height: "auto",
-        position: "relative",
-        minHeight: { xs: "210px", md: "430px" },
-        "&::before": {
-            content: '""',
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            background: "linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%)",
-            borderTopLeftRadius: "5px",
-            borderTopRightRadius: "5px",
-        },
-    }),
-    // Image section content
-    imageSectionContent: {
-        zIndex: 1,
-        height: "100%",
-        p: props.spacingScale.xl,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-    },
-    // Quiz headline typography
-    quizHeadlineText: {
-        fontWeight: 500,
-        lineHeight: "166%",
-        letterSpacing: "1px",
-        fontSize: "0.75rem",
-        color: props.brandingColors?.secondaryColor || props.darkTextColor,
-        opacity: "70%",
-        textTransform: "uppercase",
-        fontFamily: props.fontFamilySecondary,
-        textAlign: { xs: "center", md: "left" },
-    },
-    // Content container
-    contentContainer: {
-        display: "flex",
-        flexDirection: "column",
-        gap: props.spacingScale["3xs"],
-    },
-    // Quiz title typography
-    quizTitleText: {
-        fontWeight: 700,
-        lineHeight: "133%",
-        fontSize: "1.5rem",
-        letterSpacing: "0.15px",
-        color: props.brandingColors?.contentColor || props.darkTextColor,
-        fontFamily: props.fontFamilyPrimary,
-        textAlign: { xs: "center", md: "left" },
-    },
-    // Quiz description typography
-    quizDescriptionText: {
-        fontWeight: 500,
-        lineHeight: "140%",
-        fontSize: "1.25rem",
-        letterSpacing: "0.15px",
-        color: props.brandingColors?.secondaryColor || props.darkTextColor,
-        opacity: "70%",
-        fontFamily: props.fontFamilyPrimary,
-        textAlign: { xs: "center", md: "left" },
-    },
-    // Presented by desktop container
-    presentedByDesktop: {
-        display: { xs: "none", md: "block" },
-    },
-    // Main question area
-    questionArea: {
-        flex: { lg: "0.5", xs: "1" },
-    },
-    // Question area content wrapper
-    questionAreaContent: {
-        p: props.spacingScale.lg,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        gap: "16px",
-    },
-    // Score container (main card)
-    scoreContainer: {
-        p: props.spacingScale.lg,
-        gap: props.spacingScale.md,
-        display: "flex",
-        flexDirection: "column",
-        backdropFilter: "blur(4px)",
-        bgcolor: `rgba(${props.bgcolor ? props.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
-        borderRadius: props.borderRadius.sm,
-        boxShadow: "lg",
-    },
-    // Score content wrapper
-    scoreContentWrapper: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        alignSelf: "stretch",
-    },
-    // Score content container
-    scoreContentContainer: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: props.spacingScale["3xl"],
-        alignSelf: "stretch",
-    },
-    // Score section
-    scoreSection: {
-        display: "flex",
-        gap: props.spacingScale.xs,
-        justifyContent: "center",
-        alignSelf: "stretch",
-        alignItems: "center",
-    },
-    // Score section wrapper
-    scoreSectionWrapper: {
-        display: "flex",
-        flexDirection: { xs: "column", md: "row" },
-        minWidth: "200px",
-        p: props.spacingScale.xs,
-        justifyContent: "center",
-        alignItems: "center",
-        gap: props.spacingScale.md,
-        flex: "1 0 0",
-    },
-    // Achievement badge container
-    achievementBadgeContainer: {
-        display: "flex",
-        width: { xs: "172px", md: "auto" },
-        height: { xs: "160px", md: "auto" },
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        position: "relative",
-    },
-    // Hexagon background
-    hexagonBackground: {
-        width: "160px",
-        height: "160px",
-        position: "absolute",
-        top: "55%",
-        left: "50%",
-        transform: "translate(-50%, -50%)",
-    },
-    // Achievement emoji
-    achievementEmoji: {
-        maxWidth: "80px",
-        maxHeight: "80px",
-        position: "relative",
-    },
-    // Text section
-    textSection: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        boxSizing: "border-box",
-    },
-    // Congratulations text
-    congratulationsText: {
-        color: props.textPrimary,
-        textAlign: "center",
-        fontFamily: props.fontFamilyPrimary,
-        fontSize: "1.5rem",
-        fontStyle: "normal",
-        fontWeight: 400,
-        lineHeight: "133.4%",
-        px: 2,
-    },
-    // Score numbers container
-    scoreNumbersContainer: {
-        display: "flex",
-        alignItems: "center",
-        gap: "4px",
-    },
-    // Score numbers wrapper
-    scoreNumbersWrapper: {
-        display: "flex",
-        alignItems: "flex-end",
-        gap: "4px",
-    },
-    // Correct score text
-    correctScoreText: (correct) => ({
-        textAlign: "center",
-        color: correct > 0 ? props.successColor : props.dangerColor,
-        fontFamily: props.fontFamilyPrimary,
-        fontSize: "3.75rem",
-        fontStyle: "normal",
-        fontWeight: 500,
-        lineHeight: "120%",
-        letterSpacing: "-0.5px",
-    }),
-    // Total score text
-    totalScoreText: (correct) => ({
-        textAlign: "center",
-        color: correct > 0 ? props.successColor : props.dangerColor,
-        fontFamily: props.fontFamilyPrimary,
-        fontSize: "3.75rem",
-        fontStyle: "normal",
-        fontWeight: 500,
-        lineHeight: "120%",
-        letterSpacing: "-0.5px",
-    }),
-    // Time text
-    timeText: {
-        textAlign: "center",
-        color: props.textPrimary,
-        fontFamily: props.fontFamilySecondary,
-        fontSize: "0.875rem",
-        fontStyle: "normal",
-        fontWeight: 700,
-        lineHeight: "143%",
-        letterSpacing: "0.024px",
-    },
-    // Points text
-    pointsText: {
-        textAlign: "center",
-        color: props.textPrimary,
-        fontFamily: props.fontFamilyPrimary,
-        fontSize: "1.25rem",
-        fontStyle: "normal",
-        fontWeight: 500,
-        lineHeight: "120%",
-        letterSpacing: "0.15px",
-    },
-    // CTA container
-    ctaContainer: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: "24px",
-    },
-    // CTA content wrapper
-    ctaContentWrapper: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "16px",
-    },
-    // Thanks for playing text
-    thanksText: {
-        color: props.textPrimary,
-        textAlign: "center",
-        fontFamily: props.fontFamilyPrimary,
-        fontSize: "1.25rem",
-        fontStyle: "normal",
-        fontWeight: 500,
-        lineHeight: "120%",
-        letterSpacing: "0.15px",
-    },
-    // Buttons container
-    buttonsContainer: {
-        display: "flex",
-        flexDirection: { xs: "column", md: "row" },
-        gap: "16px",
-    },
-    // Play again button
-    playAgainButton: {
-        display: "flex",
-        py: props.spacingScale.xs,
-        px: "16px",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "8px",
-        borderRadius: props.borderRadius.xl,
-        color: props.textPrimary,
-        bgcolor: props.surfaceColor,
-        "&:hover": {
-            bgcolor: props.onSurfaceColor,
-        },
-    },
-    // Play again button content
-    playAgainButtonContent: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "8px",
-        alignSelf: "stretch",
-    },
-    // Play again icon
-    playAgainIcon: {
-        display: "flex",
-        width: "16px",
-        height: "16px",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        color: props.textPrimary,
-    },
-    // Play again text
-    playAgainText: {
-        color: props.textPrimary,
-        textAlign: "center",
-        fontFamily: props.fontFamilyPrimary,
-        fontSize: "0.8125rem",
-        fontStyle: "normal",
-        fontWeight: 500,
-        lineHeight: "22px",
-        letterSpacing: "0.46px",
-        textTransform: "uppercase",
-    },
-    // Share button
-    shareButton: {
-        display: "flex",
-        py: props.spacingScale.xs,
-        px: "16px",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "10px",
-        borderRadius: props.borderRadius.xl,
-        bgcolor: props.primaryColor,
-        "&:hover": {
-            bgcolor: props.primaryColor,
-        },
-    },
-    // Share button content
-    shareButtonContent: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "8px",
-        alignSelf: "stretch",
-    },
-    // Share icon
-    shareIcon: {
-        display: "flex",
-        width: "16px",
-        height: "16px",
-        justifyContent: "center",
-        alignItems: "center",
-        color: props.onPrimaryColor,
-    },
-    // Share text
-    shareText: {
-        color: props.onPrimaryColor,
-        textAlign: "center",
-        fontFamily: props.fontFamilyPrimary,
-        fontSize: "0.8125rem",
-        fontStyle: "normal",
-        fontWeight: 500,
-        lineHeight: "22px",
-        letterSpacing: "0.46px",
-        textTransform: "uppercase",
-    },
-    // Presented by mobile
-    presentedByMobile: {
-        display: { xs: "block", md: "none" },
-    },
-    // Lead collection container
-    leadCollectionContainer: {
-        p: props.spacingScale.lg,
-        gap: props.spacingScale.md,
-        display: "flex",
-        flexDirection: "column",
-        backdropFilter: "blur(4px)",
-        bgcolor: `rgba(${props.bgcolor ? props.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
-        borderRadius: props.borderRadius.sm,
-        boxShadow: "lg",
-    },
-    // Lead content wrapper
-    leadContentWrapper: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        alignSelf: "stretch",
-    },
-    alertMessageArea: {
-        flex: {
-            lg: 0.5,
-            xs: 1,
-        },
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-    },
-    alertMessageWrapper: {
-        p: props.spacingScale.lg,
-    },
-});

package/src/components/Variants/Split/SplitVariant.js

@@ -1,79 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
-import { Box, Typography, Button as JoyButton, AspectRatio } from "@mui/joy";
-import { hexToRgb, stripHtmlTags, useImageUrl, isMobile, useColors, useCornerRadius, useFontFamily, useInternalTheme, useSpacingScale, } from "@fansunited/common";
-import Answers from "../../Shared/Answers/Answers";
-import Button from "../../Shared/Button";
-import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
-import Stopwatch from "../../Shared/Stopwatch";
-import MainCard from "../../Shared/MainCard";
-import bgImage from "../../../assets/default-quiz-bg.png";
-import mobileBgImage from "../../../assets/default-quiz-bg-vertical.jpg";
-import { useTranslation } from "react-i18next";
-import PresentedBy from "../../Shared/PresentedBy";
-import CollectLead from "../../Leads/CollectLead";
-import { quizTypes } from "../../../constants/constants";
-import { useEmbedCode } from "../../../hooks/useEmbedCodeContainer";
-import { createStyles } from "./SplitVariant.styles";
-const SplitVariant = (props) => {
-    const [showLead, setShowLead] = React.useState(props.leads?.position === "before" &&
-        props.classicQuiz.authRequirement === "LEAD");
-    const theme = useInternalTheme();
-    const quizImage = useImageUrl(props.classicQuiz.images);
-    const questionImage = useImageUrl(props.question.images);
-    const { t } = useTranslation();
-    const brandingColors = props.classicQuiz.branding?.colors || null;
-    const brandingLogo = isMobile()
-        ? props.classicQuiz.branding?.images.mobileLogo ||
-            props.classicQuiz.branding?.images.mainLogo ||
-            ""
-        : props.classicQuiz.branding?.images.mainLogo || "";
-    const imagePlaceholder = isMobile() ? mobileBgImage : bgImage;
-    const embedContainerRef = useEmbedCode(props.question.embedCode, props.applyFilterScreen);
-    // Styling variables
-    const secondaryColor = brandingColors?.contentColor || useColors().textColor;
-    const fontFamilySecondary = useFontFamily().secondary;
-    const opacity = "60%";
-    const fontFamilyPrimary = useFontFamily().primary;
-    const buttonRadius = useCornerRadius().xl;
-    const backgroundColor = brandingColors?.backgroundColor || useColors().surfaceVariant;
-    const primaryColor = brandingColors?.primaryColor || useColors().palette?.primary?.plainColor;
-    const onPrimaryColor = useColors().palette?.primary?.onPrimary;
-    const textColor = useColors().textColor;
-    const spacingScale = useSpacingScale();
-    const borderRadius = useCornerRadius();
-    const bgcolor = hexToRgb(backgroundColor || "");
-    // Create styles with current props/theme values
-    const styles = createStyles({
-        quizImage,
-        questionImage,
-        imagePlaceholder,
-        spacingScale,
-        borderRadius,
-        fontFamilyPrimary,
-        fontFamilySecondary,
-        secondaryColor,
-        opacity,
-        buttonRadius,
-        bgcolor,
-        primaryColor,
-        onPrimaryColor,
-        textColor,
-        brandingColors,
-        darkTextColor: theme.colorSchemes.dark.textColor,
-        applyFilterScreen: props.applyFilterScreen,
-    });
-    const closeLeadForm = () => {
-        setShowLead(false);
-    };
-    const renderPresentedBy = (textColor) => (_jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: textColor }));
-    return (_jsxs(MainCard, { brandingBorderColor: brandingColors?.borderColor || null, children: [_jsx(Box, { sx: styles.headlineSection, children: _jsxs(Box, { sx: styles.headlineContent, children: [_jsxs(Box, { children: [_jsx(Typography, { level: "body-sm", sx: styles.quizHeadlineText, children: t("classicQuiz.headline") }), _jsxs(Box, { sx: styles.contentContainer, children: [_jsx(Typography, { level: "body-lg", sx: styles.quizTitleText, children: props.classicQuiz.title }), _jsx(Typography, { level: "body-md", sx: styles.quizDescriptionText, children: stripHtmlTags(props.classicQuiz.description) })] })] }), props.applyFilterScreen ? (_jsx(Box, { children: _jsxs(Box, { sx: styles.filterScreenBottomContainer, children: [renderPresentedBy(brandingColors?.contentColor ||
-                                        theme.colorSchemes.dark.textColor), _jsx(JoyButton, { variant: "soft", sx: {
-                                            ...styles.startButton,
-                                            ...styles.pulseAnimation,
-                                        }, endDecorator: _jsx(ArrowRightAltIcon, {}), onClick: props.startPlaying, children: _jsx(Typography, { sx: styles.startButtonText, children: t("classicQuiz.buttons.start") }) })] }) })) : (_jsx(Box, { sx: styles.presentedByDesktop, children: renderPresentedBy(brandingColors?.contentColor ||
-                                theme.colorSchemes.dark.textColor) }))] }) }), _jsx(Box, { sx: styles.questionArea, children: showLead ? (_jsx(Box, { sx: styles.leadContentContainer, children: _jsx(CollectLead, { sdk: props.sdk, contentType: "quiz", startGame: closeLeadForm, contentId: props.classicQuiz.id, contentName: props.classicQuiz.title, brandingColors: props.classicQuiz.branding?.colors, brandingUrls: props.classicQuiz.branding?.urls, campaignId: props.leads?.campaignId, campaignName: props.leads?.campaignName, fields: props.leads?.fields, leadTitle: props.classicQuiz.labels?.leadTitle, leadDescription: props.classicQuiz.labels?.leadDescription, leadCta: props.classicQuiz.labels?.leadCta, leadSuccessTitle: props.classicQuiz.labels?.leadSuccessTitle, leadSuccessDescription: props.classicQuiz.labels?.leadSuccessDescription }) })) : (_jsxs(_Fragment, { children: [quizTypes.includes(props.classicQuiz.type?.toLocaleLowerCase()) && (_jsx(Box, { sx: styles.stopwatchContainer, children: _jsx(Stopwatch, { brandingPrimaryColor: brandingColors?.primaryColor || null, isRunning: props.isStopwatchRunning, timer: props.stopwatchTime, quizType: props.classicQuiz.type, initialTime: props.classicQuiz.time || 10, onTimeUpdate: props.onTimeUpdate }) })), _jsxs(Box, { sx: styles.mainContentContainer, children: [props.question.embedCode && (_jsx(AspectRatio, { ratio: "16/9", sx: styles.aspectRatioContainer, children: _jsx(Box, { ref: embedContainerRef }) })), !props.question.embedCode && questionImage && (_jsx(AspectRatio, { ratio: "16/9", sx: styles.questionImageContainer, children: _jsx(Box, { sx: styles.questionImageBox, children: _jsx("img", { src: questionImage, alt: "Question illustration", style: styles.questionImage }) }) })), _jsxs(Box, { sx: styles.questionSection, children: [_jsxs(Typography, { level: "body-lg", sx: styles.questionStepsText, children: [props.currentQuestion, "/", props.classicQuiz.questionsCount] }), _jsx(Typography, { level: "body-lg", sx: styles.questionText, children: props.question.question })] }), _jsx(Answers, { options: props.question.options || [], answerQuestion: props.answerQuestion, selectedOption: props.selectedOption, showAnswer: props.showAnswer, twoByTwo: true, questionImage: questionImage, brandingColors: brandingColors }), _jsxs(Box, { sx: styles.buttonFooterContainer, children: [_jsx(Button, { showAnswer: props.showAnswer, selectedOption: props.selectedOption, endDecorator: _jsx(ArrowRightAltIcon, {}), label: props.currentQuestion === props.classicQuiz.questionsCount
-                                                ? t("classicQuiz.buttons.finish")
-                                                : t("classicQuiz.buttons.next"), buttonColor: primaryColor, onClick: props.handleNext }), _jsx(Box, { sx: styles.presentedByMobile, children: renderPresentedBy(brandingColors?.contentColor || textColor) })] })] })] })) })] }));
-};
-export default SplitVariant;

package/src/components/Variants/Split/SplitVariant.styles.js

@@ -1,216 +0,0 @@
-export const createStyles = (props) => ({
-    // Pulse animation for buttons
-    pulseAnimation: {
-        "@keyframes pulse": {
-            "0%": { transform: "scale(1)" },
-            "50%": { transform: "scale(1.05)" },
-            "100%": { transform: "scale(1)" },
-        },
-    },
-    // Main headline section with background image
-    headlineSection: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        gap: "10px",
-        flex: "0.5",
-        backgroundImage: `url(${props.quizImage || props.imagePlaceholder})`,
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        borderTopLeftRadius: props.borderRadius.md,
-        borderTopRightRadius: { xs: props.borderRadius.md, md: "0" },
-        borderBottomLeftRadius: { xs: 0, md: props.borderRadius.md },
-        overflow: "hidden",
-        height: "auto",
-        position: "relative",
-        minHeight: { xs: "210px", md: "430px" },
-        "&::before": {
-            content: '""',
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            background: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
-            borderTopLeftRadius: "5px",
-            borderTopRightRadius: "5px",
-        },
-    },
-    // Headline content wrapper
-    headlineContent: {
-        zIndex: 1,
-        height: "100%",
-        p: props.spacingScale.xl,
-        gap: props.spacingScale.xl,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-    },
-    // Quiz headline typography
-    quizHeadlineText: {
-        fontWeight: 500,
-        lineHeight: "166%",
-        letterSpacing: "1px",
-        fontSize: "0.75rem",
-        color: props.brandingColors?.secondaryColor || props.darkTextColor,
-        opacity: "70%",
-        textTransform: "uppercase",
-        fontFamily: props.fontFamilySecondary,
-        textAlign: { xs: "center", md: "left" },
-    },
-    // Content container
-    contentContainer: {
-        display: "flex",
-        flexDirection: "column",
-        gap: props.spacingScale["3xs"],
-    },
-    // Quiz title typography
-    quizTitleText: {
-        fontWeight: 700,
-        lineHeight: "133%",
-        fontSize: "1.5rem",
-        letterSpacing: "0.15px",
-        color: props.brandingColors?.contentColor || props.darkTextColor,
-        fontFamily: props.fontFamilyPrimary,
-        textAlign: { xs: "center", md: "left" },
-    },
-    // Quiz description typography
-    quizDescriptionText: {
-        fontWeight: 500,
-        lineHeight: "140%",
-        fontSize: "1.25rem",
-        letterSpacing: "0.15px",
-        color: props.brandingColors?.secondaryColor || props.darkTextColor,
-        opacity: "70%",
-        fontFamily: props.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: props.spacingScale.lg,
-    },
-    // Start button (filter screen)
-    startButton: {
-        borderRadius: props.buttonRadius,
-        bgcolor: props.primaryColor,
-        color: props.onPrimaryColor,
-        "&:hover": {
-            bgcolor: props.primaryColor,
-        },
-        "&:active": {
-            color: props.onPrimaryColor,
-        },
-        animation: "pulse 1s infinite",
-    },
-    // Start button text
-    startButtonText: {
-        fontFamily: props.fontFamilyPrimary,
-        fontWeight: 500,
-        fontSize: "0.9375rem",
-        lineHeight: "24px",
-        letterSpacing: "0.46px",
-        textTransform: "uppercase",
-        color: "#FFFFFF",
-        gap: "8px",
-        display: "flex",
-        alignItems: "center",
-    },
-    // Presented by desktop container
-    presentedByDesktop: {
-        display: { xs: "none", md: "block" },
-    },
-    // Question area
-    questionArea: {
-        flex: "0.5",
-        display: props.applyFilterScreen ? "none" : "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        gap: "10px",
-        p: props.spacingScale.lg,
-    },
-    // Stopwatch container
-    stopwatchContainer: {
-        display: "flex",
-        justifyContent: "center",
-    },
-    // Lead content container (filter screen)
-    leadContentContainer: {
-        p: props.spacingScale.md,
-        gap: props.spacingScale.md,
-        display: "flex",
-        flexDirection: "column",
-        backdropFilter: "blur(4px)",
-        bgcolor: `rgba(${props.bgcolor ? props.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
-        borderRadius: props.borderRadius.sm,
-    },
-    // Main content container
-    mainContentContainer: {
-        p: props.spacingScale.lg,
-        gap: props.spacingScale.md,
-        display: "flex",
-        flexDirection: "column",
-        backdropFilter: "blur(4px)",
-        bgcolor: `rgba(${props.bgcolor ? props.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
-        borderRadius: props.borderRadius.sm,
-    },
-    // Aspect ratio container for embed/image
-    aspectRatioContainer: {
-        borderRadius: props.borderRadius.sm,
-    },
-    // Question image container
-    questionImageContainer: {
-        overflow: "hidden",
-        borderRadius: props.borderRadius.sm,
-    },
-    // Question image box
-    questionImageBox: {
-        borderRadius: props.borderRadius.sm,
-        overflow: "hidden",
-        height: "auto",
-    },
-    // Question image
-    questionImage: {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-    },
-    // Question section
-    questionSection: {
-        gap: "8px",
-        display: { md: "flex", xs: "block" },
-        justifyContent: "center",
-    },
-    // Question steps typography
-    questionStepsText: {
-        fontFamily: props.fontFamilyPrimary,
-        lineHeight: "150%",
-        letterSpacing: "0.15px",
-        fontWeight: 500,
-        fontSize: "1.25rem",
-        color: props.secondaryColor,
-        opacity: props.opacity,
-        textAlign: "center",
-    },
-    // Question text
-    questionText: {
-        fontFamily: props.fontFamilyPrimary,
-        lineHeight: "150%",
-        letterSpacing: "0.15px",
-        fontWeight: 500,
-        fontSize: "1.25rem",
-        textAlign: "center",
-        color: props.textColor,
-    },
-    // Button and footer container
-    buttonFooterContainer: {
-        display: "flex",
-        flexDirection: "column",
-        gap: props.spacingScale.lg,
-    },
-    // Presented by mobile container
-    presentedByMobile: {
-        display: { xs: "block", md: "none" },
-    },
-});