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

package/src/components/Variants/Overlay/ScoreState/OverlayScoreState.styles.js

@@ -1,374 +0,0 @@
-export const createStyles = (props) => ({
-    // Main container with background overlay (with explanations)
-    mainContainerWithExplanations: {
-        boxShadow: "xl",
-        border: `${props.borderSize} solid ${props.borderColor}`,
-        overflow: "hidden",
-        backgroundImage: props.backgroundImage,
-        backgroundSize: "cover",
-        position: "relative",
-        borderRadius: props.mdBorderRadius,
-        minHeight: "250px",
-        "&::before": {
-            content: '""',
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            borderRadius: "inherit",
-            zIndex: 0,
-            background: "linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
-        },
-    },
-    // Main container with background overlay (without explanations)
-    mainContainer: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "40px",
-        p: props.spacingScale.xl,
-        boxShadow: "xl",
-        border: `${props.borderSize} solid ${props.borderColor}`,
-        overflow: "hidden",
-        backgroundImage: props.backgroundImage,
-        backgroundSize: "cover",
-        position: "relative",
-        borderRadius: props.mdBorderRadius,
-        minHeight: "250px",
-        "&::before": {
-            content: '""',
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            borderRadius: "inherit",
-            zIndex: 0,
-            background: "linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(18, 18, 18, 0.8) 100%)",
-        },
-    },
-    // Score state wrapper content
-    scoreStateWrapperContent: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "40px",
-        p: props.spacingScale.xl,
-    },
-    // Main content wrapper
-    mainContentWrapper: {
-        display: "flex",
-        flexDirection: "column",
-        gap: "24px",
-        zIndex: 10,
-    },
-    // Score container with backdrop
-    scoreContainer: {
-        borderRadius: props.mdBorderRadius,
-        p: props.spacingScale.md,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        alignSelf: "stretch",
-        gap: props.spacingScale.md,
-        backdropFilter: "blur(4px)",
-        position: "relative",
-        "&::before": {
-            content: '""',
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: props.contentBgColor,
-            opacity: 0.5,
-            borderRadius: "inherit",
-            zIndex: 0,
-            backdropFilter: "blur(4px)",
-        },
-        "& > *": {
-            position: "relative",
-            zIndex: 1,
-        },
-    },
-    // Score content wrapper
-    scoreContentWrapper: {
-        display: "flex",
-        flexDirection: { xs: "column", md: "row" },
-        justifyContent: "center",
-        alignItems: "center",
-        alignSelf: "stretch",
-    },
-    // Score section
-    scoreSection: {
-        display: "flex",
-        py: props.spacingScale.xs,
-        gap: props.spacingScale.md,
-        justifyContent: "center",
-        alignItems: "center",
-        flex: "1 0 0",
-    },
-    // Score section wrapper
-    scoreSectionWrapper: {
-        display: "flex",
-        minWidth: "200px",
-        p: props.spacingScale.xs,
-        justifyContent: "center",
-        alignItems: "center",
-        gap: props.spacingScale.md,
-        flex: "1 0 0",
-        alignSelf: "stretch",
-        flexDirection: { xs: "column", md: "row" },
-    },
-    // 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",
-    },
-    // 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: {
-        textAlign: "center",
-        color: props.scorePercentage > 30 ? props.successColor : props.dangerColor,
-        fontFamily: props.fontFamilyPrimary,
-        fontSize: "3.75rem",
-        fontStyle: "normal",
-        fontWeight: 500,
-        lineHeight: "120%",
-        letterSpacing: "-0.5px",
-    },
-    // Total score text
-    totalScoreText: {
-        textAlign: "center",
-        color: props.scorePercentage > 30 ? 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 section
-    ctaSection: {
-        display: "flex",
-        py: props.spacingScale.xs,
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "24px",
-        flex: "1 0 0",
-    },
-    // CTA content wrapper
-    ctaContentWrapper: {
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "16px",
-        flex: "1 0 0",
-    },
-    // Thanks 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: "24px",
-    },
-    // Play again button
-    playAgainButton: {
-        display: "flex",
-        minHeight: "48px",
-        py: "12px",
-        pr: "24px",
-        pl: "16px",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "8px",
-        borderRadius: props.xlBorderRadius,
-        bgcolor: props.onSurfaceColor,
-        "&:hover": {
-            bgcolor: props.surfaceVariantColor,
-        },
-    },
-    // Play again button content
-    playAgainButtonContent: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "8px",
-        alignSelf: "stretch",
-    },
-    // Play again icon
-    playAgainIcon: {
-        display: "flex",
-        width: "24px",
-        height: "24px",
-        justifyContent: "center",
-        alignItems: "center",
-        color: props.textPrimary,
-    },
-    // Play again text
-    playAgainText: {
-        color: props.textPrimary,
-        textAlign: "center",
-        fontFamily: props.fontFamilyPrimary,
-        fontSize: "0.9375rem",
-        fontStyle: "normal",
-        fontWeight: 500,
-        lineHeight: "24px",
-        letterSpacing: "0.46px",
-        textTransform: "uppercase",
-    },
-    // Share button
-    shareButton: {
-        display: "flex",
-        minHeight: "48px",
-        py: "12px",
-        pr: "24px",
-        pl: "16px",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gap: "8px",
-        borderRadius: props.xlBorderRadius,
-        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: "24px",
-        height: "24px",
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    // Share text
-    shareText: {
-        color: props.textPrimary,
-        textAlign: "center",
-        fontFamily: props.fontFamilyPrimary,
-        fontSize: "0.9375rem",
-        fontStyle: "normal",
-        fontWeight: 500,
-        lineHeight: "24px",
-        letterSpacing: "0.40px",
-        textTransform: "uppercase",
-    },
-    // Lead collection container
-    leadCollectionContainer: {
-        borderRadius: props.mdBorderRadius,
-        p: props.spacingScale.md,
-        display: "flex",
-        flexDirection: "column",
-        alignSelf: "stretch",
-        gap: props.spacingScale.md,
-        backdropFilter: "blur(4px)",
-        position: "relative",
-        "&::before": {
-            content: '""',
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: props.contentBgColor,
-            opacity: 0.5,
-            borderRadius: "inherit",
-            zIndex: 0,
-            backdropFilter: "blur(4px)",
-        },
-        "& > *": {
-            position: "relative",
-            zIndex: 1,
-        },
-    },
-});

package/src/components/Variants/Split/AuthError/SplitAuthError.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from "@mui/joy";
-import { stripHtmlTags, useImageUrl, isMobile, useColors, useCornerRadius, useFontFamily, useInternalTheme, useSpacingScale, } from "@fansunited/common";
-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 AlertMessage from "../../../Shared/AlertMessage";
-import { createStyles } from "./SplitAuthError.styles";
-const SplitAuthError = (props) => {
-    const internalTheme = useInternalTheme();
-    const quizImage = useImageUrl(props.classicQuiz.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;
-    // Styling variables
-    const fontFamilySecondary = useFontFamily().secondary;
-    const fontFamilyPrimary = useFontFamily().primary;
-    const mdBorderRadius = useCornerRadius().md;
-    const textColor = useColors().textColor;
-    const spacingScale = useSpacingScale();
-    // Create styles with current props/theme values
-    const styles = createStyles({
-        quizImage,
-        imagePlaceholder,
-        spacingScale,
-        borderRadius: useCornerRadius(),
-        fontFamilyPrimary,
-        fontFamilySecondary,
-        mdBorderRadius,
-        textColor,
-        brandingColors,
-        darkTextColor: internalTheme.colorSchemes.dark.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) })] })] }), _jsx(Box, { sx: styles.presentedByDesktop, children: _jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: brandingColors?.contentColor ||
-                                    internalTheme.colorSchemes.dark.textColor }) })] }) }), _jsxs(Box, { sx: styles.questionArea, children: [_jsx(AlertMessage, { variant: "error", title: t("common.authentication.accessRequired"), message: t("common.authentication.invalidOrMissingAuth") }), _jsx(Box, { sx: styles.presentedByMobile, children: _jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: brandingColors?.contentColor || textColor }) })] })] }));
-};
-export default SplitAuthError;

package/src/components/Variants/Split/AuthError/SplitAuthError.styles.js

@@ -1,95 +0,0 @@
-export const createStyles = (props) => ({
-    // 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.mdBorderRadius,
-        borderTopRightRadius: { xs: props.mdBorderRadius, md: "0" },
-        borderBottomLeftRadius: { xs: 0, md: props.mdBorderRadius },
-        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" },
-    },
-    // Presented by desktop container
-    presentedByDesktop: {
-        display: { xs: "none", md: "block" },
-    },
-    // Question area (error section)
-    questionArea: {
-        flex: "0.5",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        gap: props.spacingScale.md,
-        p: props.spacingScale.lg,
-    },
-    // Presented by mobile container
-    presentedByMobile: {
-        display: { xs: "block", md: "none" },
-    },
-});

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

@@ -1,84 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Button, Typography } from "@mui/joy";
-import { stripHtmlTags, useImageUrl, hexToRgb, WidgetTemplate, isMobile, useColors, useCornerRadius, useFontFamily, useSpacingScale, useInternalTheme, } from "@fansunited/common";
-import ReplayIcon from "@mui/icons-material/Replay";
-import share from "../../../../assets/share.svg";
-import MainCard from "../../../Shared/MainCard";
-import ScoreStateWrapper from "../../../Shared/ScoreStateWrapper";
-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 { createStyles } from "./SplitScoreState.styles";
-import AlertMessage from "../../../Shared/AlertMessage";
-import { useScoreStateHelpers } from "../../../../hooks/useScoreStateHelpers";
-const SplitScoreState = (props) => {
-    const internalTheme = useInternalTheme();
-    const quizImage = useImageUrl(props.classicQuiz.images);
-    const { t } = useTranslation();
-    const isMobileScreen = isMobile();
-    const { getHexagonBackground, formatTime, displayCongratulations, getRandomEmoji, shareResult, } = useScoreStateHelpers({
-        summary: props.summary,
-        totalTime: props.totalTime,
-        classicQuiz: props.classicQuiz,
-        variant: WidgetTemplate.SPLIT,
-    });
-    // Styling variables
-    const brandingColors = props.classicQuiz.branding?.colors || null;
-    const textPrimary = useColors().textPrimary;
-    const primaryColor = brandingColors?.primaryColor || useColors().palette?.primary?.plainColor;
-    const onPrimaryColor = useColors().palette?.primary?.onPrimary;
-    const fontFamilySecondary = useFontFamily().secondary;
-    const fontFamilyPrimary = useFontFamily().primary;
-    const bgcolor = brandingColors?.backgroundColor || useColors().surfaceVariant;
-    const surfaceColor = useColors().surface;
-    const onSurfaceColor = useColors().onSurface;
-    const borderRadius = useCornerRadius();
-    const textColor = useColors().textColor;
-    const spacingScale = useSpacingScale();
-    const brandingLogo = isMobileScreen
-        ? props.classicQuiz.branding?.images.mobileLogo ||
-            props.classicQuiz.branding?.images.mainLogo ||
-            ""
-        : props.classicQuiz.branding?.images.mainLogo || "";
-    // Constants
-    const imagePlaceholder = isMobileScreen ? mobileBgImage : bgImage;
-    const showLead = props.leads?.position === "after" &&
-        props.classicQuiz.authRequirement === "LEAD";
-    // Create styles with current props/theme values
-    const styles = createStyles({
-        quizImage,
-        imagePlaceholder,
-        spacingScale,
-        borderRadius,
-        fontFamilyPrimary,
-        fontFamilySecondary,
-        textPrimary,
-        primaryColor,
-        onPrimaryColor,
-        bgcolor: hexToRgb(bgcolor || ""),
-        surfaceColor,
-        onSurfaceColor,
-        textColor,
-        brandingColors,
-        successColor: useColors().palette?.success?.plainColor,
-        dangerColor: useColors().palette?.danger?.plainColor,
-        darkTextColor: internalTheme.colorSchemes.dark.textColor,
-        isMobileScreen,
-    });
-    const renderMainContent = (isTabulated) => {
-        return (_jsxs(_Fragment, { children: [_jsx(Box, { sx: styles.desktopImageSection(isTabulated), children: _jsxs(Box, { sx: styles.imageSectionContent, children: [_jsxs(Box, { children: [_jsx(Typography, { level: "body-sm", sx: styles.quizHeadlineText, children: "Quiz" }), _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) })] })] }), _jsx(Box, { sx: styles.presentedByDesktop, children: _jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: brandingColors?.contentColor ||
-                                        internalTheme.colorSchemes.dark.textColor }) })] }) }), props.summary.classicQuizId ? (_jsx(Box, { sx: styles.questionArea, children: _jsxs(Box, { sx: styles.questionAreaContent, children: [_jsx(Box, { sx: styles.scoreContainer, children: _jsx(Box, { sx: styles.scoreContentWrapper, children: _jsxs(Box, { sx: styles.scoreContentContainer, children: [_jsx(Box, { sx: styles.scoreSection, children: _jsxs(Box, { sx: styles.scoreSectionWrapper, children: [_jsxs(Box, { sx: styles.achievementBadgeContainer, children: [_jsx("img", { style: styles.hexagonBackground, src: getHexagonBackground(), alt: "achievement-badge-background" }), _jsx("img", { style: styles.achievementEmoji, src: getRandomEmoji("light"), alt: "achievement-badge" })] }), _jsxs(Box, { sx: styles.textSection, children: [_jsx(Typography, { level: "body-lg", sx: styles.congratulationsText, children: props.maxAttemptsReached
-                                                                        ? t("classicQuiz.maxAttemptsReached")
-                                                                        : displayCongratulations() }), _jsx(Box, { sx: styles.scoreNumbersContainer, children: _jsxs(Box, { sx: styles.scoreNumbersWrapper, children: [_jsx(Typography, { level: "h2", sx: styles.correctScoreText(props.summary.correct), children: props.summary.correct }), _jsxs(Typography, { level: "h2", sx: styles.totalScoreText(props.summary.correct), children: ["/", props.summary.classicQuizQuestions] })] }) }), props.totalTime ? (_jsxs(Typography, { level: "body-md", sx: styles.timeText, children: [t("classicQuiz.youDidItFor"), " ", formatTime()] })) : null, props.classicQuiz.scored ? (_jsxs(Typography, { level: "body-lg", sx: styles.pointsText, children: [t("classicQuiz.youWon"), " ", props.summary.correct * props.classicQuiz.points, " ", t("common.labels.points")] })) : null] })] }) }), !(isMobileScreen && showLead) && (_jsxs(_Fragment, { children: [_jsx(Box, { sx: styles.ctaContainer, children: _jsxs(Box, { sx: styles.ctaContentWrapper, children: [_jsx(Typography, { level: "body-lg", sx: styles.thanksText, children: t("classicQuiz.thanksForPlaying") }), _jsxs(Box, { sx: styles.buttonsContainer, children: [!props.maxAttemptsReached && (_jsx(Button, { sx: styles.playAgainButton, onClick: props.playAgain, children: _jsxs(Box, { sx: styles.playAgainButtonContent, children: [_jsx(ReplayIcon, { sx: styles.playAgainIcon }), _jsx(Typography, { sx: styles.playAgainText, children: t("classicQuiz.buttons.playAgain") })] }) })), _jsx(Button, { sx: styles.shareButton, onClick: shareResult, children: _jsxs(Box, { sx: styles.shareButtonContent, children: [_jsx("img", { style: styles.shareIcon, src: share, alt: "share-icon" }), _jsx(Typography, { sx: styles.shareText, children: t("classicQuiz.buttons.share") })] }) })] })] }) }), _jsx(Box, { sx: styles.presentedByMobile, children: _jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: brandingColors?.contentColor || textColor }) })] }))] }) }) }), !props.maxAttemptsReached && showLead && (_jsx(Box, { sx: styles.leadCollectionContainer, children: _jsx(Box, { sx: styles.leadContentWrapper, children: _jsx(CollectLead, { sdk: props.sdk, contentType: "quiz", 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 }) }) }))] }) })) : (_jsx(Box, { sx: styles.alertMessageArea, children: _jsx(Box, { sx: styles.alertMessageWrapper, children: _jsx(AlertMessage, { variant: "error", title: t("common.authentication.accessRequired"), message: t("common.authentication.invalidOrMissingAuth") }) }) }))] }));
-    };
-    return (_jsx(MainCard, { brandingBorderColor: brandingColors?.borderColor || null, children: props.showAnswerExplanations ? (_jsx(ScoreStateWrapper, { questions: props.classicQuiz.questions, userParticipation: props.summary.answers, brandingColors: props.classicQuiz.branding?.colors, resultsTabPanelSxProps: {
-                display: "flex",
-                flexDirection: { xs: "column", md: "row" },
-                px: 0,
-                pb: 0,
-                pt: 0,
-            }, children: renderMainContent(true) })) : (renderMainContent(false)) }));
-};
-export default SplitScoreState;