fansunited-frontend-components 0.0.1-RC4 → 0.0.1-RC5

package/src/components/Variants/Standard/AuthError/StandardAuthError.styles.d.ts

@@ -0,0 +1,231 @@
+import { CustomBorderRadius, CustomSpacingScale } from "@fansunited/common";
+import { BrandingColorsModel } from "fansunited-sdk-esm";
+import { CSSProperties } from "react";
+interface StyleProps {
+    quizImage: string | null;
+    spacingScale: CustomSpacingScale;
+    borderRadius: CustomBorderRadius;
+    fontFamilyPrimary: string;
+    fontFamilySecondary: string;
+    darkTextColor: string;
+    textColor: string;
+    secondaryColor: string;
+    brandingColors: BrandingColorsModel;
+    opacity: string;
+    imagePosition: "left" | "right";
+}
+export declare const createStyles: (props: StyleProps) => {
+    mobileHeadlineWithImage: {
+        display: {
+            xs: string;
+            md: string;
+        };
+        flexDirection: string;
+        justifyContent: string;
+        gap: string;
+        backgroundImage: string;
+        backgroundSize: string;
+        backgroundPosition: string;
+        borderTopLeftRadius: string;
+        borderTopRightRadius: string;
+        position: string;
+        minHeight: string;
+        overflow: string;
+        height: string;
+        "&::before": {
+            content: string;
+            position: string;
+            width: string;
+            height: string;
+            background: string;
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
+        };
+    };
+    mobileHeadlineContent: {
+        zIndex: number;
+        height: string;
+        p: string;
+        gap: string;
+        display: string;
+        flexDirection: string;
+        justifyContent: string;
+    };
+    mobileHeadlineWithoutImage: {
+        display: {
+            xs: string;
+            md: string;
+        };
+        flex: string;
+        flexDirection: string;
+        justifyContent: string;
+        p: string;
+        gap: string;
+    };
+    headlineTypographyMobileImage: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        textTransform: string;
+        fontFamily: string;
+        textAlign: string;
+    };
+    headlineTypography: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        textTransform: string;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        fontFamily: string;
+        textAlign: string;
+    };
+    titleTypographyMobileImage: {
+        fontWeight: number;
+        lineHeight: string;
+        fontSize: string;
+        letterSpacing: string;
+        color: string;
+        fontFamily: string;
+        textAlign: string;
+    };
+    titleTypography: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+    };
+    descriptionTypographyMobileImage: {
+        fontWeight: number;
+        lineHeight: string;
+        fontSize: string;
+        letterSpacing: string;
+        color: string;
+        opacity: string;
+        fontFamily: string;
+        textAlign: string;
+    };
+    descriptionTypography: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        fontFamily: string;
+        textAlign: {
+            xs: string;
+            md: string;
+        };
+    };
+    titleTypographyDesktop: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+    };
+    descriptionTypographyDesktop: {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+        fontSize: string;
+        color: string;
+        opacity: string;
+        fontFamily: string;
+    };
+    imageContainerLeft: {
+        display: {
+            xs: string;
+            md: string;
+        };
+        flex: string;
+        borderTopLeftRadius: string;
+        borderBottomLeftRadius: string;
+        overflow: string;
+        height: string;
+        position: string;
+    };
+    imageContainerRight: {
+        display: {
+            xs: string;
+            md: string;
+        };
+        flex: string;
+        borderTopRightRadius: string;
+        borderBottomRightRadius: string;
+        overflow: string;
+        height: string;
+        position: string;
+    };
+    mainContentArea: {
+        flex: {
+            xs: string;
+            md: string;
+        };
+        display: {
+            md: string;
+        };
+        flexDirection: string;
+        p: string;
+        gap: {
+            xs: string;
+            md: string;
+        };
+    };
+    desktopHeadlineContainer: {
+        display: {
+            xs: string;
+            md: string;
+        };
+        flexDirection: string;
+        justifyContent: string;
+        gap: string;
+        textAlign: string;
+    };
+    contentContainer: {
+        display: string;
+        flexDirection: string;
+        gap: string;
+    };
+    questionArea: {
+        display: string;
+        flexDirection: string;
+        p: string;
+    };
+    questionContainer: {
+        display: string;
+        flexDirection: string;
+        gap: {
+            xs: string;
+            md: string;
+        };
+    };
+    alertContainer: {
+        px: string;
+        pt: string;
+        pb: string;
+        gap: string;
+        display: string;
+        flexDirection: string;
+        backdropFilter: string;
+    };
+    quizImage: {
+        width: string;
+        height: string;
+        objectFit: CSSProperties["objectFit"];
+    };
+};
+export {};
+//# sourceMappingURL=StandardAuthError.styles.d.ts.map

package/src/components/Variants/Standard/AuthError/StandardAuthError.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardAuthError.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Variants/Standard/AuthError/StandardAuthError.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,UAAU;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,kBAAkB,CAAC;IACjC,YAAY,EAAE,kBAAkB,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,mBAAmB,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,UAAW,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA0NpB,aAAa,CAAC,WAAW,CAAC;;CAElD,CAAC"}

package/src/components/Variants/Standard/AuthError/StandardAuthError.styles.js

@@ -0,0 +1,201 @@
+export const createStyles = (props) => ({
+    // Mobile headline with image background
+    mobileHeadlineWithImage: {
+        display: { xs: "flex", md: "none" },
+        flexDirection: "column",
+        justifyContent: "space-between",
+        gap: "10px",
+        backgroundImage: `url(${props.quizImage})`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px",
+        position: "relative",
+        minHeight: "210px",
+        overflow: "hidden",
+        height: "auto",
+        "&::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",
+        },
+    },
+    // Content inside mobile headline with image
+    mobileHeadlineContent: {
+        zIndex: 1,
+        height: "100%",
+        p: props.spacingScale.xl,
+        gap: props.spacingScale["2xl"],
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+    },
+    // Mobile headline without image
+    mobileHeadlineWithoutImage: {
+        display: { xs: "flex", md: "none" },
+        flex: "0.5",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        p: props.spacingScale.lg,
+        gap: props.spacingScale["2xl"],
+    },
+    // Headline typography (mobile with image)
+    headlineTypographyMobileImage: {
+        fontWeight: 500,
+        lineHeight: "166%",
+        letterSpacing: "1px",
+        fontSize: "0.75rem",
+        color: props.brandingColors?.secondaryColor || props.darkTextColor,
+        opacity: "70%",
+        textTransform: "uppercase",
+        fontFamily: props.fontFamilySecondary,
+        textAlign: "center",
+    },
+    // Headline typography (mobile without image & desktop)
+    headlineTypography: {
+        fontWeight: 500,
+        lineHeight: "166%",
+        letterSpacing: "1px",
+        textTransform: "uppercase",
+        fontSize: "0.75rem",
+        color: props.secondaryColor,
+        opacity: props.opacity,
+        fontFamily: props.fontFamilySecondary,
+        textAlign: "center",
+    },
+    // Title typography (mobile with image)
+    titleTypographyMobileImage: {
+        fontWeight: 700,
+        lineHeight: "133%",
+        fontSize: "1.5rem",
+        letterSpacing: "0.15px",
+        color: props.brandingColors?.contentColor || props.darkTextColor,
+        fontFamily: props.fontFamilyPrimary,
+        textAlign: "center",
+    },
+    // Title typography (mobile without image & desktop)
+    titleTypography: {
+        fontWeight: 700,
+        lineHeight: "133%",
+        letterSpacing: "0px",
+        fontSize: "1.5rem",
+        color: props.textColor,
+        fontFamily: props.fontFamilyPrimary,
+        textAlign: { xs: "center", md: "left" },
+    },
+    // Description typography (mobile with image)
+    descriptionTypographyMobileImage: {
+        fontWeight: 500,
+        lineHeight: "140%",
+        fontSize: "1.25rem",
+        letterSpacing: "0.15px",
+        color: props.brandingColors?.secondaryColor || props.darkTextColor,
+        opacity: "70%",
+        fontFamily: props.fontFamilyPrimary,
+        textAlign: "center",
+    },
+    // Description typography (mobile without image & desktop)
+    descriptionTypography: {
+        fontWeight: 500,
+        lineHeight: "140%",
+        letterSpacing: "0.15px",
+        fontSize: "1.25rem",
+        color: props.secondaryColor,
+        opacity: props.opacity,
+        fontFamily: props.fontFamilyPrimary,
+        textAlign: { xs: "center", md: "left" },
+    },
+    // Desktop title typography (centered)
+    titleTypographyDesktop: {
+        fontWeight: 700,
+        lineHeight: "133%",
+        letterSpacing: "0px",
+        fontSize: "1.5rem",
+        color: props.textColor,
+        fontFamily: props.fontFamilyPrimary,
+    },
+    // Desktop description typography (centered)
+    descriptionTypographyDesktop: {
+        fontWeight: 500,
+        lineHeight: "140%",
+        letterSpacing: "0.15px",
+        fontSize: "1.25rem",
+        color: props.secondaryColor,
+        opacity: props.opacity,
+        fontFamily: props.fontFamilyPrimary,
+    },
+    // Image container (left position)
+    imageContainerLeft: {
+        display: { xs: "none", md: "block" },
+        flex: "0.3",
+        borderTopLeftRadius: props.borderRadius.md,
+        borderBottomLeftRadius: props.borderRadius.md,
+        overflow: "hidden",
+        height: "auto",
+        position: "relative",
+    },
+    // Image container (right position)
+    imageContainerRight: {
+        display: { xs: "none", md: "block" },
+        flex: "0.3",
+        borderTopRightRadius: "5px",
+        borderBottomRightRadius: "5px",
+        overflow: "hidden",
+        height: "auto",
+        position: "relative",
+    },
+    // Main content area
+    mainContentArea: {
+        flex: { xs: "1", md: props.quizImage ? "0.7" : "1" },
+        display: { md: "flex" },
+        flexDirection: "column",
+        p: props.spacingScale.md,
+        gap: { xs: props.spacingScale.sm, md: props.spacingScale.md },
+    },
+    // Desktop headline container
+    desktopHeadlineContainer: {
+        display: { xs: "none", md: "flex" },
+        flexDirection: "column",
+        justifyContent: "space-between",
+        gap: props.spacingScale["2xl"],
+        textAlign: "center",
+    },
+    // Content container
+    contentContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: props.spacingScale["3xs"],
+    },
+    // Question area
+    questionArea: {
+        display: "flex",
+        flexDirection: "column",
+        p: props.spacingScale.md,
+    },
+    // Question container
+    questionContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: { xs: props.spacingScale.lg, md: props.spacingScale.md },
+    },
+    // Alert container
+    alertContainer: {
+        px: props.spacingScale.md,
+        pt: props.spacingScale.md,
+        pb: props.spacingScale.lg,
+        gap: props.spacingScale.md,
+        display: "flex",
+        flexDirection: "column",
+        backdropFilter: "blur(4px)",
+    },
+    // Quiz image
+    quizImage: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+    },
+});

package/src/components/Variants/Standard/ScoreState/StandardScoreState.d.ts

@@ -0,0 +1,17 @@
+import { ClassicQuizUserParticipationModel, ClassicQuizFullModel, FansUnitedSDKModel } from "fansunited-sdk-esm";
+import React from "react";
+import { LeadsOptions } from "@fansunited/common";
+type StandardScoreStateProps = {
+    imagePosition?: "left" | "right";
+    summary: ClassicQuizUserParticipationModel;
+    totalTime: number;
+    showAnswerExplanations: boolean;
+    classicQuiz: ClassicQuizFullModel;
+    maxAttemptsReached: boolean;
+    sdk: FansUnitedSDKModel;
+    leads?: LeadsOptions;
+    playAgain: () => void;
+};
+declare const StandardScoreState: React.FC<StandardScoreStateProps>;
+export default StandardScoreState;
+//# sourceMappingURL=StandardScoreState.d.ts.map

package/src/components/Variants/Standard/ScoreState/StandardScoreState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardScoreState.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Variants/Standard/ScoreState/StandardScoreState.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iCAAiC,EACjC,oBAAoB,EACpB,kBAAkB,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAUb,MAAM,oBAAoB,CAAC;AAY5B,KAAK,uBAAuB,GAAG;IAC7B,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,OAAO,EAAE,iCAAiC,CAAC;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB,EAAE,OAAO,CAAC;IAChC,WAAW,EAAE,oBAAoB,CAAC;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,GAAG,EAAE,kBAAkB,CAAC;IACxB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiSzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/src/components/Variants/Standard/ScoreState/StandardScoreState.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, Typography } from "@mui/joy";
+import { useImageUrl, hexToRgb, WidgetTemplate, isMobile, useBorderSize, useColors, useCornerRadius, useFontFamily, useInternalTheme, useSpacingScale, } 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 { useTranslation } from "react-i18next";
+import PresentedBy from "../../../Shared/PresentedBy";
+import CollectLead from "../../../Leads/CollectLead";
+import { createStyles } from "./StandardScoreState.styles";
+import AlertMessage from "../../../Shared/AlertMessage";
+import { useScoreStateHelpers } from "../../../../hooks/useScoreStateHelpers";
+const StandardScoreState = (props) => {
+    const theme = 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 imagePosition = props.imagePosition || "left";
+    const { getHexagonBackground, formatTime, displayCongratulations, getRandomEmoji, shareResult, } = useScoreStateHelpers({
+        summary: props.summary,
+        totalTime: props.totalTime,
+        classicQuiz: props.classicQuiz,
+        variant: WidgetTemplate.STANDARD,
+    });
+    // Styling variables
+    const textPrimary = useColors().textPrimary;
+    const primaryColor = brandingColors?.primaryColor || useColors().palette.primary.plainColor;
+    const textColor = brandingColors?.contentColor || useColors().textColor;
+    const fontFamilySecondary = useFontFamily().secondary;
+    const fontFamilyPrimary = useFontFamily().primary;
+    const bgcolor = brandingColors?.backgroundColor || useColors().surface;
+    const onSurfaceColor = useColors().onSurface;
+    const borderRadius = useCornerRadius();
+    const borderSize = useBorderSize().size;
+    const spacingScale = useSpacingScale();
+    const showLead = props.leads?.position === "after" &&
+        props.classicQuiz.authRequirement === "LEAD";
+    const surfaceVariant = `rgba(${hexToRgb(useColors().surfaceVariant || "")}, 0.5)`;
+    // Create styles with current props/theme values
+    const styles = createStyles({
+        quizImage,
+        spacingScale,
+        borderRadius,
+        fontFamilyPrimary,
+        fontFamilySecondary,
+        textPrimary,
+        primaryColor,
+        textColor,
+        bgcolor,
+        onSurfaceColor,
+        borderSize,
+        surfaceVariant,
+        brandingColors,
+        imagePosition,
+        successColor: theme.colorSchemes.light.palette.success.plainColor,
+        dangerColor: theme.colorSchemes.light.palette.danger.plainColor,
+        onPrimaryColor: theme.colorSchemes.light.palette.primary.onPrimary,
+    });
+    const renderMainContent = () => {
+        return (_jsxs(Box, { sx: styles.mainContentArea, children: [props.summary.classicQuizId ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: styles.contentWrapper, children: _jsx(Box, { sx: styles.contentScoreContainer, children: _jsx(Box, { sx: styles.scoreSection, children: _jsxs(Box, { sx: styles.scoreContentWrapper, 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.scoreContainer, children: _jsxs(Box, { sx: styles.scoreNumbersContainer, 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] })] }) }) }) }), !props.maxAttemptsReached && showLead ? (_jsx(Box, { sx: styles.leadCollectionContainer, children: _jsx(Box, { sx: styles.leadQuestionContainer, children: _jsx(Box, { sx: styles.leadContentContainer, 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 }) }) }) })) : null, _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") })] }) })) : null, _jsx(Button, { sx: styles.shareButton, onClick: shareResult, children: _jsxs(Box, { sx: styles.shareButtonContent, children: [_jsx("img", { src: share, alt: "share-icon", style: styles.shareIcon }), _jsx(Typography, { sx: styles.shareText, children: t("classicQuiz.buttons.share") })] }) })] })] }) })] })) : (_jsx(_Fragment, { children: _jsx(AlertMessage, { variant: "error", title: t("common.authentication.accessRequired"), message: t("common.authentication.invalidOrMissingAuth") }) })), _jsx(Box, { sx: styles.presentedByContainer, children: _jsx(PresentedBy, { brandingLogo: brandingLogo, textColor: textColor }) })] }));
+    };
+    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: _jsxs(Box, { sx: styles.scoreStateWrapperContainer, children: [quizImage && imagePosition === "left" && (_jsx(Box, { sx: styles.imageContainerLeft, children: _jsx("img", { src: quizImage, alt: "Quiz illustration", style: styles.quizImage }) })), renderMainContent(), quizImage && imagePosition === "right" && (_jsx(Box, { sx: styles.imageContainerRight, children: _jsx("img", { src: quizImage, alt: "Quiz illustration", style: styles.quizImage }) }))] }) })) : (_jsxs(_Fragment, { children: [quizImage && imagePosition === "left" && (_jsx(Box, { sx: styles.imageContainerLeftNoExplanations, children: _jsx("img", { src: quizImage, alt: "Quiz illustration", style: styles.quizImage }) })), renderMainContent(), quizImage && imagePosition === "right" && (_jsx(Box, { sx: styles.imageContainerRightNoExplanations, children: _jsx("img", { src: quizImage, alt: "Quiz illustration", style: styles.quizImage }) }))] })) }));
+};
+export default StandardScoreState;