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

package/src/components/Shared/Pagination.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Typography } from "@mui/joy";
+import { useInternalTheme } from "@fansunited/common";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+const Pagination = (props) => {
+    const renderSteps = () => {
+        const theme = useInternalTheme();
+        const borderRadius = theme.customRadius.light.full;
+        const fontFamilySecondary = theme.customFontFamily.light.secondary;
+        const totalQuestions = props.classicQuiz.questionsCount;
+        // Create an array of step indicators
+        return Array.from({ length: totalQuestions }, (_, index) => {
+            const questionNumber = index + 1;
+            // Determine the background, border colors and textColor based on question status
+            let backgroundColor, borderColor;
+            let textColor = "#FFFFFF";
+            if (questionNumber < props.currentQuestion) {
+                // This question has been answered
+                const questionParticipation = props.userParticipation.find((p) => p.questionId === props.classicQuiz.questions[index].questionId);
+                if (questionParticipation) {
+                    // Find if the selected option was correct
+                    const question = props.classicQuiz.questions[index];
+                    const selectedOption = question.options.find((option) => option.optionId === questionParticipation.optionId);
+                    if (selectedOption?.correct) {
+                        // Correct answer
+                        backgroundColor =
+                            theme.colorSchemes.light.palette.success.plainColor;
+                        borderColor =
+                            theme.colorSchemes.light.palette.success.outlinedBorder;
+                    }
+                    else {
+                        // Incorrect answer
+                        backgroundColor =
+                            theme.colorSchemes.light.palette.danger.plainColor;
+                        borderColor =
+                            theme.colorSchemes.light.palette.danger.outlinedBorder;
+                    }
+                }
+                else {
+                    // Fallback if participation data is missing
+                    backgroundColor = theme.colorSchemes.light.secondaryContainer;
+                    borderColor = theme.colorSchemes.light.secondaryContainer;
+                }
+            }
+            else if (questionNumber === props.currentQuestion) {
+                // Current question - use primary color
+                backgroundColor = theme.colorSchemes.light.palette.primary.plainColor;
+                borderColor = theme.colorSchemes.light.palette.primary.outlinedBorder;
+            }
+            else {
+                // Future questions - use neutral/secondary color
+                // backgroundColor = theme.colorSchemes?.light?.secondaryContainer;
+                // borderColor = theme.colorSchemes?.light?.outlineEnabledBorder;
+                backgroundColor = "transparent";
+                borderColor = "transparent";
+                textColor =
+                    theme.colorSchemes.light.palette.primary.plainColor || "#1A77D2";
+            }
+            // Determine what to display inside the circle
+            let content;
+            if (questionNumber < props.currentQuestion) {
+                const questionParticipation = props.userParticipation.find((p) => p.questionId === props.classicQuiz.questions[index].questionId);
+                if (questionParticipation) {
+                    const question = props.classicQuiz.questions[index];
+                    const selectedOption = question.options.find((option) => option.optionId === questionParticipation.optionId);
+                    if (selectedOption?.correct) {
+                        // Show checkmark for correct answer
+                        content = (_jsx(CheckIcon, { sx: {
+                                color: "#FAFAFA",
+                                fontSize: "1rem",
+                            } }));
+                    }
+                    else {
+                        // Show X for incorrect answer
+                        content = (_jsx(CloseIcon, { sx: {
+                                color: "#FAFAFA",
+                                fontSize: "1rem",
+                            } }));
+                    }
+                }
+                else {
+                    // Fallback
+                    content = questionNumber;
+                }
+            }
+            else {
+                // For current and future questions, show the question number
+                content = questionNumber;
+            }
+            return (_jsx(Box, { sx: {
+                    maxWidth: "40px",
+                    width: "100%",
+                    height: "40px",
+                    borderRadius,
+                    backgroundColor,
+                    border: `1px solid ${borderColor}`,
+                    transition: "background-color 0.3s ease",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontFamily: fontFamilySecondary,
+                }, children: typeof content === "number" ? (_jsx(Typography, { level: "body-md", sx: {
+                        fontWeight: 400,
+                        lineHeight: "150%",
+                        letterSpacing: "0.15px",
+                        fontSize: "1rem",
+                        color: textColor,
+                    }, children: content })) : (content) }, `step-${questionNumber}`));
+        });
+    };
+    return (_jsx(Box, { sx: {
+            display: "flex",
+            justifyContent: "center",
+            gap: "8px",
+        }, children: renderSteps() }));
+};
+export default Pagination;

package/src/components/Shared/PresentedBy.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type PresentedByProps = {
+    brandingLogo: string | null;
+    textColor: string | undefined;
+};
+declare const PresentedBy: React.FC<PresentedByProps>;
+export default PresentedBy;
+//# sourceMappingURL=PresentedBy.d.ts.map

package/src/components/Shared/PresentedBy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresentedBy.d.ts","sourceRoot":"","sources":["../../../../src/components/Shared/PresentedBy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,gBAAgB,GAAG;IACtB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgF3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/src/components/Shared/PresentedBy.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from "@mui/joy";
+import { useTranslation } from "react-i18next";
+import { isMobile, useFontFamily } from "@fansunited/common/functions/theme";
+const PresentedBy = (props) => {
+    const { t } = useTranslation();
+    const fontFamilySecondary = useFontFamily().secondary;
+    const label = t("common.presentedBy");
+    if (!props.brandingLogo) {
+        return null;
+    }
+    if (isMobile()) {
+        return (_jsxs(Box, { sx: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "8px",
+                alignItems: "center",
+                minWidth: "180px",
+            }, children: [_jsx(Typography, { level: "body-sm", sx: {
+                        fontWeight: 400,
+                        lineHeight: "166%",
+                        letterSpacing: "0.4px",
+                        fontSize: "0.75rem",
+                        color: props.textColor,
+                        textAlign: "right",
+                        fontFamily: fontFamilySecondary,
+                    }, children: label }), _jsx("img", { src: props.brandingLogo, alt: "branding-logo", style: {
+                        maxHeight: "50px",
+                        maxWidth: "100px",
+                    } })] }));
+    }
+    return (_jsxs(Box, { sx: {
+            minWidth: "180px",
+            display: "flex",
+            gap: "8px",
+            alignItems: "center",
+            zIndex: 10,
+        }, children: [_jsx(Typography, { level: "body-sm", sx: {
+                    fontWeight: 400,
+                    lineHeight: "166%",
+                    letterSpacing: "0.4px",
+                    textAlign: "right",
+                    fontSize: "0.75rem",
+                    color: props.textColor,
+                    fontFamily: fontFamilySecondary,
+                }, children: t("common.presentedBy") }), _jsx("img", { src: props.brandingLogo, alt: "branding-logo", style: {
+                    maxHeight: "50px",
+                    maxWidth: "100px",
+                } })] }));
+};
+export default PresentedBy;

package/src/components/Shared/ScoreStateWrapper.d.ts

@@ -0,0 +1,13 @@
+import React, { PropsWithChildren } from "react";
+import { BrandingColorsModel, ClassicQuizParticipationQuestionModel, ClassicQuizQuestionModel } from "fansunited-sdk-esm";
+import { SxProps } from "@mui/material";
+type ScoreStateWrapperProps = {
+    questions: ClassicQuizQuestionModel[];
+    userParticipation: ClassicQuizParticipationQuestionModel[];
+    resultsTabPanelSxProps?: SxProps;
+    isOverlayVariant?: boolean;
+    brandingColors?: BrandingColorsModel;
+};
+declare const ScoreStateWrapper: React.FC<ScoreStateWrapperProps & PropsWithChildren>;
+export default ScoreStateWrapper;
+//# sourceMappingURL=ScoreStateWrapper.d.ts.map

package/src/components/Shared/ScoreStateWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScoreStateWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/Shared/ScoreStateWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAcjD,OAAO,EACL,mBAAmB,EACnB,qCAAqC,EACrC,wBAAwB,EACzB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AASxC,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,wBAAwB,EAAE,CAAC;IACtC,iBAAiB,EAAE,qCAAqC,EAAE,CAAC;IAC3D,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,mBAAmB,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAC/B,sBAAsB,GAAG,iBAAiB,CA2Z3C,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/src/components/Shared/ScoreStateWrapper.js

@@ -0,0 +1,254 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Box, Tabs, TabList, Tab, TabPanel, Typography, tabClasses, } from "@mui/joy";
+import { useInternalTheme, stripHtmlTags } from "@fansunited/common";
+import school from "../../assets/school.svg";
+import sportsScore from "../../assets/sports_score.svg";
+import info from "../../assets/info.svg";
+import { useColors, useCornerRadius, useFontFamily, useSpacingScale, } from "@fansunited/common/functions/theme";
+import { useTranslation } from "react-i18next";
+const ScoreStateWrapper = ({ questions, userParticipation, resultsTabPanelSxProps, isOverlayVariant, children, brandingColors, }) => {
+    const [activeTab, setActiveTab] = React.useState(0);
+    const theme = useInternalTheme();
+    const { t } = useTranslation();
+    const mdBorderRadius = useCornerRadius().md;
+    const colorTextPrimary = isOverlayVariant
+        ? theme.colorSchemes.dark.textPrimary
+        : useColors().textPrimary;
+    const colorTextSecondary = isOverlayVariant
+        ? theme.colorSchemes.dark.textSecondary
+        : useColors().textSecondary;
+    const fontFamilyPrimary = useFontFamily().primary;
+    const fontFamilySecondary = useFontFamily().secondary;
+    const borderBottomColor = isOverlayVariant
+        ? theme.colorSchemes.dark.secondaryContainer
+        : useColors().secondaryContainer;
+    const contentBgColor = brandingColors?.backgroundColor || isOverlayVariant
+        ? theme.colorSchemes.dark.surfaceVariant
+        : useColors().surfaceVariant;
+    const spacingScale = useSpacingScale();
+    const successColor = useColors().palette.success.plainColor;
+    const dangerColor = useColors().palette.danger.plainColor;
+    let primaryColor = isOverlayVariant
+        ? theme.colorSchemes.dark.textPrimary
+        : useColors().textPrimary;
+    if (brandingColors?.primaryColor) {
+        primaryColor = brandingColors.primaryColor;
+    }
+    const renderUserAnswer = (participation, index) => {
+        const question = questions.find((q) => q.questionId === participation.questionId);
+        return (_jsx(Box, { sx: {
+                borderRadius: mdBorderRadius,
+                p: spacingScale.md,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                alignSelf: "stretch",
+                gap: spacingScale.md,
+                backdropFilter: "blur(4px)",
+                position: "relative",
+                "&::before": {
+                    content: '""',
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: contentBgColor,
+                    opacity: 0.5,
+                    borderRadius: "inherit",
+                    zIndex: 0,
+                    backdropFilter: "blur(4px)",
+                },
+                "& > *": {
+                    position: "relative",
+                    zIndex: 1,
+                },
+            }, children: _jsxs(Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    gap: "12px",
+                    alignSelf: "stretch",
+                }, children: [_jsxs(Box, { sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "flex-start",
+                            alignSelf: "stretch",
+                        }, children: [_jsxs(Typography, { sx: {
+                                    alignSelf: "stretch",
+                                    color: colorTextSecondary,
+                                    fontFamily: fontFamilySecondary,
+                                    fontSize: "0.75rem",
+                                    fontStyle: "normal",
+                                    fontWeight: 500,
+                                    lineHeight: "166%",
+                                    letterSpacing: "1px",
+                                    textTransform: "uppercase",
+                                }, children: [t("classicQuiz.question"), " ", index + 1] }), _jsx(Typography, { sx: {
+                                    alignSelf: "stretch",
+                                    color: colorTextPrimary,
+                                    fontFamily: fontFamilyPrimary,
+                                    fontSize: "1.25rem",
+                                    fontStyle: "normal",
+                                    fontWeight: 500,
+                                    lineHeight: "120%",
+                                    letterSpacing: "0.15px",
+                                }, children: question?.question })] }), _jsx(Box, { sx: { alignSelf: "stretch" }, children: participation.correct ? (_jsxs(Typography, { sx: {
+                                color: isOverlayVariant
+                                    ? theme.colorSchemes.dark.palette.success.plainColor
+                                    : successColor,
+                                fontFamily: fontFamilySecondary,
+                                fontSize: "1rem",
+                                fontStyle: "normal",
+                                fontWeight: 700,
+                                lineHeight: "20px",
+                                letterSpacing: "0.15px",
+                            }, children: [t("classicQuiz.yourAnswer"), " ", question?.options.find((o) => o.optionId === participation.optionId)?.option] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, { sx: {
+                                        color: isOverlayVariant
+                                            ? theme.colorSchemes.dark.palette.danger.plainColor
+                                            : dangerColor,
+                                        fontFamily: fontFamilySecondary,
+                                        fontSize: "1rem",
+                                        fontStyle: "normal",
+                                        fontWeight: 600,
+                                        lineHeight: "20px",
+                                        letterSpacing: "0.15px",
+                                    }, children: [t("classicQuiz.yourAnswer"), " ", question?.options.find((o) => o.optionId === participation.optionId)?.option] }), _jsxs(Typography, { sx: {
+                                        color: colorTextPrimary,
+                                        fontFamily: fontFamilySecondary,
+                                        fontSize: "1rem",
+                                        fontStyle: "normal",
+                                        fontWeight: 600,
+                                        lineHeight: "20px",
+                                        letterSpacing: "0.15px",
+                                    }, children: [t("classicQuiz.correctAnswer"), " ", question?.options.find((o) => o.correct)?.option] })] })) }), question?.explanation ? (_jsxs(Box, { sx: {
+                            display: "flex",
+                            py: "4px",
+                            pr: "16px",
+                            pl: "0px",
+                            justifyContent: "center",
+                            gap: "10px",
+                            alignItems: "flex-start",
+                            alignSelf: "stretch",
+                        }, children: [_jsx("img", { src: info, alt: "explanation-icon", style: {
+                                    display: "flex",
+                                    width: "20px",
+                                    height: "20px",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    filter: isOverlayVariant ? "brightness(0) invert(1)" : "none",
+                                } }), _jsx(Typography, { sx: {
+                                    flex: "1 0 0",
+                                    color: colorTextPrimary,
+                                    fontFamily: fontFamilySecondary,
+                                    fontSize: "0.875rem",
+                                    fontStyle: "normal",
+                                    fontWeight: 400,
+                                    lineHeight: "143%",
+                                    letterSpacing: "0.17px",
+                                }, children: stripHtmlTags(question?.explanation) })] })) : (_jsx(_Fragment, {}))] }, `single-answer-${participation.questionId}`) }, `user-answer-${participation.questionId}`));
+    };
+    return (_jsx(Box, { sx: { width: "100%" }, children: _jsxs(Tabs, { value: activeTab, onChange: (_, value) => setActiveTab(value), sx: {
+                borderRadius: mdBorderRadius,
+                width: "100%", // Ensure tabs container takes full width
+                backgroundColor: "transparent",
+            }, children: [_jsxs(TabList, { children: [_jsx(Tab, { sx: {
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                flex: 1, // Make each tab take equal width
+                                borderBottom: "1px solid " + borderBottomColor,
+                                opacity: "60%",
+                                "&:not(.Mui-selected):hover": {
+                                    bgcolor: isOverlayVariant ? "#FAFAFA14" : "#2121210A", // Highlight selected tab
+                                },
+                                [`&.${tabClasses.selected}`]: {
+                                    bgcolor: isOverlayVariant ? "#FAFAFA14" : "#2121210A", // Highlight selected tab
+                                    borderBottom: "3px solid " + primaryColor,
+                                    opacity: "100%",
+                                    mb: "-1px",
+                                },
+                            }, disableIndicator: true, children: _jsxs(Box, { sx: {
+                                    display: "flex",
+                                    py: "12px",
+                                    px: "16px",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    gap: "8px",
+                                    width: "100%", // Ensure inner box also takes full width
+                                }, children: [_jsx("img", { src: sportsScore, alt: "answers-icon", style: {
+                                            display: "flex",
+                                            width: "24px",
+                                            height: "24px",
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                            filter: isOverlayVariant || theme.mode == "dark"
+                                                ? "brightness(0) invert(1)"
+                                                : "none",
+                                        } }), _jsx(Typography, { sx: {
+                                            color: colorTextSecondary,
+                                            fontFamily: fontFamilyPrimary,
+                                            fontSize: "0.875rem",
+                                            fontStyle: "normal",
+                                            fontWeight: 500,
+                                            lineHeight: "24px",
+                                            letterSpacing: "0.4px",
+                                            textTransform: "uppercase",
+                                        }, children: t("classicQuiz.results") })] }) }), _jsx(Tab, { sx: {
+                                display: "flex",
+                                flexDirection: "column",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                flex: 1, // Make each tab take equal width
+                                borderBottom: "1px solid " + borderBottomColor,
+                                opacity: "60%",
+                                "&:not(.Mui-selected):hover": {
+                                    bgcolor: isOverlayVariant ? "#FAFAFA14" : "#2121210A", // Highlight selected tab
+                                },
+                                [`&.${tabClasses.selected}`]: {
+                                    bgcolor: isOverlayVariant ? "#FAFAFA14" : "#2121210A", // Highlight selected tab
+                                    borderBottom: "3px solid " + primaryColor,
+                                    opacity: "100%",
+                                    mb: "-1px",
+                                },
+                            }, disableIndicator: true, children: _jsxs(Box, { sx: {
+                                    display: "flex",
+                                    py: "12px",
+                                    px: "16px",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                    gap: "8px",
+                                    width: "100%", // Ensure inner box also takes full width
+                                }, children: [_jsx("img", { src: school, alt: "answers-icon", style: {
+                                            display: "flex",
+                                            width: "24px",
+                                            height: "24px",
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                            filter: isOverlayVariant || theme.mode == "dark"
+                                                ? "brightness(0) invert(1)"
+                                                : "none",
+                                        } }), _jsx(Typography, { sx: {
+                                            color: colorTextSecondary,
+                                            fontFamily: fontFamilyPrimary,
+                                            fontSize: "0.875rem",
+                                            fontStyle: "normal",
+                                            fontWeight: 500,
+                                            lineHeight: "24px",
+                                            letterSpacing: "0.4px",
+                                            textTransform: "uppercase",
+                                        }, children: t("classicQuiz.answers") })] }) })] }), _jsx(TabPanel, { value: 0, sx: resultsTabPanelSxProps, children: children }), _jsx(TabPanel, { value: 1, sx: {
+                        overflowY: "auto",
+                        maxHeight: { md: "calc(100vh - 450px)" },
+                    }, children: _jsx(Box, { sx: {
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            gap: "16px",
+                            alignSelf: "stretch",
+                        }, children: userParticipation.map((p, i) => renderUserAnswer(p, i)) }) })] }) }));
+};
+export default ScoreStateWrapper;

package/src/components/Shared/Stepper.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ClassicQuizFullModel, ClassicQuizParticipationBodyModel } from "fansunited-sdk-esm";
+type StepperProps = {
+    classicQuiz: ClassicQuizFullModel;
+    currentQuestion: number;
+    userParticipation: ClassicQuizParticipationBodyModel[];
+    brandingPrimaryColor?: string;
+};
+declare const Stepper: React.FC<StepperProps>;
+export default Stepper;
+//# sourceMappingURL=Stepper.d.ts.map

package/src/components/Shared/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../src/components/Shared/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,oBAAoB,EACpB,iCAAiC,EAClC,MAAM,oBAAoB,CAAC;AAE5B,KAAK,YAAY,GAAG;IAClB,WAAW,EAAE,oBAAoB,CAAC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,iCAAiC,EAAE,CAAC;IACvD,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwFnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/src/components/Shared/Stepper.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@mui/joy";
+import { getSpacing } from "@fansunited/common/functions/theme";
+import { useInternalTheme } from "@fansunited/common";
+const Stepper = (props) => {
+    const renderSteps = () => {
+        const theme = useInternalTheme();
+        const borderRadius = theme.customRadius.light.full;
+        const totalQuestions = props.classicQuiz.questionsCount;
+        // Create an array of step indicators
+        return Array.from({ length: totalQuestions }, (_, index) => {
+            const questionNumber = index + 1;
+            // Determine the background and border colors based on question status
+            let backgroundColor, borderColor;
+            if (questionNumber < props.currentQuestion) {
+                // This question has been answered
+                const questionParticipation = props.userParticipation.find((p) => p.questionId === props.classicQuiz.questions[index].questionId);
+                if (questionParticipation) {
+                    // Find if the selected option was correct
+                    const question = props.classicQuiz.questions[index];
+                    const selectedOption = question.options.find((option) => option.optionId === questionParticipation.optionId);
+                    if (selectedOption?.correct) {
+                        // Correct answer
+                        backgroundColor =
+                            theme.colorSchemes.light.palette.success.plainColor;
+                        borderColor =
+                            theme.colorSchemes.light.palette.success.outlinedBorder;
+                    }
+                    else {
+                        // Incorrect answer
+                        backgroundColor =
+                            theme.colorSchemes.light.palette.danger.plainColor;
+                        borderColor =
+                            theme.colorSchemes.light.palette.danger.outlinedBorder;
+                    }
+                }
+                else {
+                    // Fallback if participation data is missing
+                    backgroundColor = theme.colorSchemes.light.secondaryContainer;
+                    borderColor = theme.colorSchemes.light.secondaryContainer;
+                }
+            }
+            else if (questionNumber === props.currentQuestion) {
+                // Current question - use primary color
+                backgroundColor =
+                    props.brandingPrimaryColor ||
+                        theme.colorSchemes.light.palette.primary.plainColor;
+                borderColor =
+                    props.brandingPrimaryColor ||
+                        theme.colorSchemes.light.palette.primary.outlinedBorder;
+            }
+            else {
+                // Future questions - use neutral/secondary color
+                backgroundColor = theme.colorSchemes.light.secondaryContainer;
+                borderColor = theme.colorSchemes.light.outlineEnabledBorder;
+            }
+            return (_jsx(Box, { sx: {
+                    maxWidth: "82.67px",
+                    width: "100%",
+                    height: "8px",
+                    borderRadius,
+                    backgroundColor,
+                    border: `1px solid ${borderColor}`,
+                    transition: "background-color 0.3s ease",
+                } }, `step-${questionNumber}`));
+        });
+    };
+    return (_jsx(Box, { sx: {
+            display: "flex",
+            justifyContent: "center",
+            gap: "8px",
+            py: getSpacing("xs"),
+        }, children: renderSteps() }));
+};
+export default Stepper;

package/src/components/Shared/Stopwatch.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type StopwatchProps = {
+    isRunning: boolean;
+    timer: number;
+    quizType: string;
+    initialTime: number;
+    brandingPrimaryColor: string | null;
+    onTimeUpdate: (time: number) => void;
+};
+declare const Stopwatch: React.FC<StopwatchProps>;
+export default Stopwatch;
+//# sourceMappingURL=Stopwatch.d.ts.map

package/src/components/Shared/Stopwatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stopwatch.d.ts","sourceRoot":"","sources":["../../../../src/components/Shared/Stopwatch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAGtD,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0HvC,CAAC;AAEF,eAAe,SAAS,CAAC"}