new_experiential_changes 0.0.1

package/dist/components/Molecules/Pay4Use/PayToUsePrompt.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@chakra-ui/react");
+const icons_1 = require("@chakra-ui/icons");
+const PayToUsePromptStyles_1 = require("./PayToUsePromptStyles");
+const PayToUsePrompt = () => {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ...PayToUsePromptStyles_1.containerStyles, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { ...PayToUsePromptStyles_1.mainFlexStyles, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...PayToUsePromptStyles_1.leftFlexStyles, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { ...PayToUsePromptStyles_1.iconContainerStyles, children: (0, jsx_runtime_1.jsx)(icons_1.WarningIcon, { width: "20px", height: "20px", color: "#D0392E" }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { ...PayToUsePromptStyles_1.warningTextStyles, children: "Since you do not have enough Learning Credits Vin wont be able to help you." })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { ...PayToUsePromptStyles_1.actionButtonsStyles, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { ...PayToUsePromptStyles_1.fileButtonStyles, children: (0, jsx_runtime_1.jsx)(react_2.Text, { ...PayToUsePromptStyles_1.buttonTextStyles, children: "Onion Peel Work sheet.doc" }) }), (0, jsx_runtime_1.jsx)(react_2.Button, { ...PayToUsePromptStyles_1.fileButtonStyles, children: (0, jsx_runtime_1.jsx)(react_2.Text, { ...PayToUsePromptStyles_1.buttonTextStyles, children: "Observation.pdf" }) }), (0, jsx_runtime_1.jsx)(react_2.Button, { ...PayToUsePromptStyles_1.newChapterButtonStyles, leftIcon: (0, jsx_runtime_1.jsx)(icons_1.AddIcon, { color: "#5F4DC7" }), children: (0, jsx_runtime_1.jsx)(react_2.Text, { ...PayToUsePromptStyles_1.buttonTextStyles, children: "New chapter" }) }), (0, jsx_runtime_1.jsx)(react_2.Button, { ...PayToUsePromptStyles_1.newTopicButtonStyles, leftIcon: (0, jsx_runtime_1.jsx)(icons_1.AddIcon, { color: "#5F4DC7" }), children: (0, jsx_runtime_1.jsx)(react_2.Text, { ...PayToUsePromptStyles_1.buttonTextStyles, children: "New Topic" }) })] })] }) }));
+};
+exports.default = PayToUsePrompt;
+//# sourceMappingURL=PayToUsePrompt.js.map

package/dist/components/Molecules/Pay4Use/PayToUsePrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayToUsePrompt.js","sourceRoot":"","sources":["../../../../src/components/Molecules/Pay4Use/PayToUsePrompt.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4CAQ0B;AAC1B,4CAAwD;AACxD,iEAWgC;AAEhC,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,OAAO,CACL,uBAAC,WAAG,OAAK,sCAAe,YACtB,wBAAC,YAAI,OAAK,qCAAc,aAEtB,wBAAC,YAAI,OAAK,qCAAc,aAEtB,uBAAC,YAAI,OAAK,0CAAmB,YAC3B,uBAAC,mBAAW,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,GAAG,GACrD,EAGP,uBAAC,YAAI,OAAK,wCAAiB,4FAGpB,IACF,EAGP,wBAAC,cAAM,OAAK,0CAAmB,aAE7B,uBAAC,cAAM,OAAK,uCAAgB,YAC1B,uBAAC,YAAI,OAAK,uCAAgB,0CAAkC,GACrD,EAET,uBAAC,cAAM,OAAK,uCAAgB,YAC1B,uBAAC,YAAI,OAAK,uCAAgB,gCAAwB,GAC3C,EAGT,uBAAC,cAAM,OACD,6CAAsB,EAC1B,QAAQ,EAAE,uBAAC,eAAO,IAAC,KAAK,EAAC,SAAS,GAAG,YAErC,uBAAC,YAAI,OAAK,uCAAgB,4BAAoB,GACvC,EAGT,uBAAC,cAAM,OACD,2CAAoB,EACxB,QAAQ,EAAE,uBAAC,eAAO,IAAC,KAAK,EAAC,SAAS,GAAG,YAErC,uBAAC,YAAI,OAAK,uCAAgB,0BAAkB,GACrC,IACF,IACJ,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,cAAc,CAAC"}

package/dist/components/Molecules/Pay4Use/PayToUsePrompt.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>;
+export default _default;
+export declare const prompts: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>;

package/dist/components/Molecules/Pay4Use/PayToUsePrompt.stories.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prompts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const PayToUsePrompt_1 = __importDefault(require("./PayToUsePrompt"));
+exports.default = {
+    title: "components/Molecules/Pay4Use/PayToUsePrompt",
+    component: PayToUsePrompt_1.default,
+    parameters: {
+        viewport: {
+            defaultViewport: "responsive",
+        },
+    },
+};
+const Template = (args) => (0, jsx_runtime_1.jsx)(PayToUsePrompt_1.default, { ...args });
+// Assessment Practice - Allow Send Version
+exports.prompts = Template.bind({});
+exports.prompts.args = {};
+//# sourceMappingURL=PayToUsePrompt.stories.js.map

package/dist/components/Molecules/Pay4Use/PayToUsePrompt.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayToUsePrompt.stories.js","sourceRoot":"","sources":["../../../../src/components/Molecules/Pay4Use/PayToUsePrompt.stories.tsx"],"names":[],"mappings":";;;;;;;AAEA,sEAA8C;AAE9C,kBAAe;IACb,KAAK,EAAE,6CAA6C;IACpD,SAAS,EAAE,wBAAc;IACzB,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,eAAe,EAAE,YAAY;SAC9B;KACF;CACM,CAAC;AAEV,MAAM,QAAQ,GAAU,CAAC,IAAI,EAAE,EAAE,CAAC,uBAAC,wBAAc,OAAK,IAAI,GAAI,CAAC;AAE/D,2CAA2C;AAC9B,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,eAAO,CAAC,IAAI,GAAG,EAAE,CAAC"}

package/dist/components/Molecules/Pay4Use/PayToUsePromptStyles.d.ts

@@ -0,0 +1,108 @@
+export namespace containerStyles {
+    const width: string;
+    const height: string;
+    const position: string;
+    const bg: string;
+    const border: string;
+    const borderRadius: string;
+    const padding: string;
+    const mx: string;
+    const my: string;
+}
+export namespace mainFlexStyles {
+    export const direction: string;
+    export const justify: string;
+    export const align: string;
+    const height_1: string;
+    export { height_1 as height };
+    export const gap: string;
+}
+export namespace leftFlexStyles {
+    const direction_1: string;
+    export { direction_1 as direction };
+    const align_1: string;
+    export { align_1 as align };
+    const gap_1: string;
+    export { gap_1 as gap };
+    const width_1: string;
+    export { width_1 as width };
+    const height_2: string;
+    export { height_2 as height };
+}
+export namespace iconContainerStyles {
+    const align_2: string;
+    export { align_2 as align };
+    const justify_1: string;
+    export { justify_1 as justify };
+    const width_2: string;
+    export { width_2 as width };
+    const height_3: string;
+    export { height_3 as height };
+    const padding_1: string;
+    export { padding_1 as padding };
+    const borderRadius_1: string;
+    export { borderRadius_1 as borderRadius };
+}
+export namespace warningTextStyles {
+    export const fontFamily: string;
+    export const fontWeight: string;
+    export const fontSize: string;
+    export const lineHeight: string;
+    export const color: string;
+    const width_3: string;
+    export { width_3 as width };
+}
+export namespace actionButtonsStyles {
+    export const spacing: string;
+    export const display: string;
+    const width_4: string;
+    export { width_4 as width };
+    const height_4: string;
+    export { height_4 as height };
+}
+export namespace fileButtonStyles {
+    const display_1: string;
+    export { display_1 as display };
+    const height_5: string;
+    export { height_5 as height };
+    const bg_1: string;
+    export { bg_1 as bg };
+    const borderRadius_2: string;
+    export { borderRadius_2 as borderRadius };
+    const padding_2: string;
+    export { padding_2 as padding };
+    const gap_2: string;
+    export { gap_2 as gap };
+}
+export namespace actionButtonStyles {
+    const height_6: string;
+    export { height_6 as height };
+    const bg_2: string;
+    export { bg_2 as bg };
+    const borderRadius_3: string;
+    export { borderRadius_3 as borderRadius };
+    const padding_3: string;
+    export { padding_3 as padding };
+    const gap_3: string;
+    export { gap_3 as gap };
+}
+export namespace newChapterButtonStyles {
+    const width_5: string;
+    export { width_5 as width };
+}
+export namespace newTopicButtonStyles {
+    const width_6: string;
+    export { width_6 as width };
+}
+export namespace buttonTextStyles {
+    const fontFamily_1: string;
+    export { fontFamily_1 as fontFamily };
+    const fontWeight_1: string;
+    export { fontWeight_1 as fontWeight };
+    const fontSize_1: string;
+    export { fontSize_1 as fontSize };
+    const lineHeight_1: string;
+    export { lineHeight_1 as lineHeight };
+    const color_1: string;
+    export { color_1 as color };
+}

package/dist/components/Molecules/Pay4Use/PayToUsePromptStyles.js

@@ -0,0 +1,82 @@
+"use strict";
+// Styles for PayToUsePrompt component
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonTextStyles = exports.newTopicButtonStyles = exports.newChapterButtonStyles = exports.actionButtonStyles = exports.fileButtonStyles = exports.actionButtonsStyles = exports.warningTextStyles = exports.iconContainerStyles = exports.leftFlexStyles = exports.mainFlexStyles = exports.containerStyles = void 0;
+exports.containerStyles = {
+    width: '100%',
+    height: '72px',
+    position: 'relative',
+    bg: '#F8F3D8',
+    border: '1px solid #BFBEDC',
+    borderRadius: '16px',
+    padding: '16px',
+    mx: 'auto',
+    my: '4',
+};
+exports.mainFlexStyles = {
+    direction: 'row',
+    justify: 'center',
+    align: 'center',
+    height: '100%',
+    gap: '494px',
+};
+exports.leftFlexStyles = {
+    direction: 'row',
+    align: 'center',
+    gap: '8px',
+    width: '510px',
+    height: '36px',
+};
+exports.iconContainerStyles = {
+    align: 'center',
+    justify: 'center',
+    width: '36px',
+    height: '36px',
+    padding: '8px',
+    borderRadius: '8px',
+};
+exports.warningTextStyles = {
+    fontFamily: 'Poppins',
+    fontWeight: '400',
+    fontSize: '12px',
+    lineHeight: '18px',
+    color: '#D0392E',
+    width: '466px',
+};
+exports.actionButtonsStyles = {
+    spacing: '16px',
+    display: 'none',
+    width: '934px',
+    height: '40px',
+};
+exports.fileButtonStyles = {
+    display: 'none',
+    height: '40px',
+    bg: '#E5E5F1',
+    borderRadius: '8px',
+    padding: '8px 12px',
+    gap: '12px',
+};
+exports.actionButtonStyles = {
+    height: '40px',
+    bg: '#E5E5F1',
+    borderRadius: '8px',
+    padding: '8px 12px',
+    gap: '12px',
+};
+exports.newChapterButtonStyles = {
+    ...exports.actionButtonStyles,
+    width: '162px',
+};
+exports.newTopicButtonStyles = {
+    ...exports.actionButtonStyles,
+    width: '142px',
+};
+exports.buttonTextStyles = {
+    fontFamily: 'Poppins',
+    fontWeight: '400',
+    fontSize: '16px',
+    lineHeight: '24px',
+    color: '#5F4DC7',
+};
+//# sourceMappingURL=PayToUsePromptStyles.js.map

package/dist/components/Molecules/Pay4Use/PayToUsePromptStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayToUsePromptStyles.js","sourceRoot":"","sources":["../../../../src/components/Molecules/Pay4Use/PayToUsePromptStyles.js"],"names":[],"mappings":";AAAA,sCAAsC;;;AAEzB,QAAA,eAAe,GAAG;IAC7B,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,UAAU;IACpB,EAAE,EAAE,SAAS;IACb,MAAM,EAAE,mBAAmB;IAC3B,YAAY,EAAE,MAAM;IACpB,OAAO,EAAE,MAAM;IACf,EAAE,EAAE,MAAM;IACV,EAAE,EAAE,GAAG;CACR,CAAC;AAEW,QAAA,cAAc,GAAG;IAC5B,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,MAAM;IACd,GAAG,EAAE,OAAO;CACb,CAAC;AAEW,QAAA,cAAc,GAAG;IAC5B,SAAS,EAAE,KAAK;IAChB,KAAK,EAAE,QAAQ;IACf,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,MAAM;CACf,CAAC;AAEW,QAAA,mBAAmB,GAAG;IACjC,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,KAAK;IACd,YAAY,EAAE,KAAK;CACpB,CAAC;AAEW,QAAA,iBAAiB,GAAG;IAC/B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,OAAO;CACf,CAAC;AAEW,QAAA,mBAAmB,GAAG;IACjC,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,MAAM;CACf,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,MAAM;IACd,EAAE,EAAE,SAAS;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,UAAU;IACnB,GAAG,EAAE,MAAM;CACZ,CAAC;AAEW,QAAA,kBAAkB,GAAG;IAChC,MAAM,EAAE,MAAM;IACd,EAAE,EAAE,SAAS;IACb,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,UAAU;IACnB,GAAG,EAAE,MAAM;CACZ,CAAC;AAEW,QAAA,sBAAsB,GAAG;IACpC,GAAG,0BAAkB;IACrB,KAAK,EAAE,OAAO;CACf,CAAC;AAEW,QAAA,oBAAoB,GAAG;IAClC,GAAG,0BAAkB;IACrB,KAAK,EAAE,OAAO;CACf,CAAC;AAEW,QAAA,gBAAgB,GAAG;IAC9B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,SAAS;CACjB,CAAC"}

package/dist/components/Molecules/PerformanceScreen/PreformanceResultScreen.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+interface PreformanceResultScreenProps {
+    percentage: number;
+    description?: string;
+    timeTaken: {
+        minutes: number;
+        seconds: number;
+    };
+    comparisonText?: string;
+    imgSrc: string;
+    onLevelUp?: () => void;
+    onReview?: () => void;
+    onBackToHomework?: () => void;
+    isMobile?: boolean;
+    rivSrc?: string;
+    error?: boolean;
+    loading?: boolean;
+    hideHomeworkButton: boolean;
+    hideReviewButton: boolean;
+    badgesrc: string;
+}
+declare const PreformanceResultScreen: React.FC<PreformanceResultScreenProps>;
+export default PreformanceResultScreen;

package/dist/components/Molecules/PerformanceScreen/PreformanceResultScreen.js

@@ -0,0 +1,140 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@chakra-ui/react");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const react_canvas_1 = require("@rive-app/react-canvas");
+const QuizResult_styles_1 = require("./QuizResult.styles");
+const PreformanceResultScreen = ({ percentage, description, timeTaken, comparisonText, imgSrc, onLevelUp, onReview, onBackToHomework, isMobile = false, rivSrc, error = false, loading = false, hideHomeworkButton, hideReviewButton, badgesrc, }) => {
+    const getContent = () => {
+        if (percentage < 60) {
+            return {
+                title: "Needs Improvement",
+                messageBoxStyle: QuizResult_styles_1.styles.messageBoxImprove,
+                primaryButton: "Review questions",
+                secondaryButton: "Back to Homework",
+                showLevelUp: false,
+            };
+        }
+        else if (percentage < 80) {
+            return {
+                title: "Satisfactory",
+                messageBoxStyle: QuizResult_styles_1.styles.messageBoxSatisfactory,
+                primaryButton: "Review questions",
+                secondaryButton: "Back to Homework",
+                showLevelUp: false,
+            };
+        }
+        else if (percentage < 100) {
+            return {
+                title: "Proficient ",
+                messageBoxStyle: QuizResult_styles_1.styles.messageBoxGood,
+                primaryButton: "Review questions",
+                secondaryButton: "Back to Homework",
+                showLevelUp: false,
+            };
+        }
+        else {
+            return {
+                title: "Outstanding!",
+                messageBoxStyle: QuizResult_styles_1.styles.messageBoxBrilliant,
+                primaryButton: "Review questions",
+                secondaryButton: "Back to Homework",
+                showLevelUp: false,
+            };
+        }
+    };
+    const content = getContent();
+    const isProficient = percentage > 80 && percentage < 100;
+    const [riveError, setRiveError] = react_1.default.useState(false);
+    const { RiveComponent } = (0, react_canvas_1.useRive)({
+        src: rivSrc,
+        autoplay: true,
+        onLoadError: () => setRiveError(true),
+    });
+    const IconSkeleton = () => ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { width: isMobile ? "120px" : "183px", height: isMobile ? "120px" : "183px", style: {
+            borderTopLeftRadius: "100px",
+            borderTopRightRadius: "100px",
+            borderBottomLeftRadius: "100px",
+        } }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { sx: QuizResult_styles_1.styles.container, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { sx: isMobile ? QuizResult_styles_1.styles.mobilecard : QuizResult_styles_1.styles.card, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { sx: {
+                        ...QuizResult_styles_1.styles.header,
+                        flexDirection: isMobile ? "column" : "row",
+                        alignItems: isMobile ? "flex-start" : "center",
+                        position: "relative",
+                    }, children: loading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: isMobile ? "static" : "absolute", paddingBottom: isMobile ? "0" : "16px", marginBottom: isMobile ? "16px" : "70px", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(IconSkeleton, {}) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { sx: {
+                                    ...QuizResult_styles_1.styles.messageBox,
+                                    ...(isMobile && {
+                                        fontSize: "18px",
+                                        padding: "0",
+                                    }),
+                                }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { sx: {
+                                            ...QuizResult_styles_1.styles.title,
+                                            paddingTop: content.showLevelUp ? "43px" : "14px",
+                                            padding: isMobile && "0px",
+                                        }, children: (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { width: isMobile ? 150 : 250, height: 22, style: { marginBottom: 6, marginLeft: 24 } }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: { ...QuizResult_styles_1.styles.description, padding: isMobile && "0px" }, children: (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { count: 2, height: 14, style: {
+                                                marginLeft: 24,
+                                                marginRight: 22,
+                                                marginBottom: 14,
+                                            } }) })] })] })) : error ? (
+                    /* ERROR STATE */
+                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { bg: "#DFDAFE", borderTopLeftRadius: "100px", borderTopRightRadius: "100px", borderBottomLeftRadius: "100px", overflow: "hidden", width: isMobile ? "120px" : "183px", height: isMobile ? "120px" : "183px", position: isMobile ? "static" : "absolute", paddingBottom: isMobile ? "0" : "16px", marginBottom: isMobile ? "16px" : "140px", children: riveError ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: imgSrc, alt: "Result icon", sx: QuizResult_styles_1.styles.icon })) : ((0, jsx_runtime_1.jsx)(RiveComponent, { style: {
+                                        width: "100%",
+                                        height: "100%",
+                                        objectFit: "contain",
+                                        zIndex: 99,
+                                    } }, rivSrc)) }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: {
+                                    ...QuizResult_styles_1.styles.messageBox,
+                                    ...(isMobile
+                                        ? {
+                                            backgroundColor: "transparent",
+                                            fontSize: "18px",
+                                            padding: "0",
+                                        }
+                                        : { backgroundColor: "#F4F2FF" }),
+                                }, children: (0, jsx_runtime_1.jsx)(react_2.Text, { sx: {
+                                        ...QuizResult_styles_1.styles.title,
+                                        paddingTop: content.showLevelUp ? "43px" : "14px",
+                                        padding: isMobile && "0px",
+                                        color: "red",
+                                        marginBottom: "24px",
+                                    }, children: "We\u2019re having trouble loading your results" }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { bg: isProficient ? "" : "#DFDAFE", borderTopLeftRadius: isProficient ? "0" : "100px", borderTopRightRadius: isProficient ? "0" : "100px", borderBottomLeftRadius: isProficient ? "0" : "100px", overflow: "hidden", width: isMobile ? "120px" : "183px", height: isMobile ? "120px" : "183px", position: isMobile ? "static" : "absolute", paddingBottom: isMobile ? "0" : "16px", marginBottom: isMobile ? "16px" : "90px", children: riveError ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: imgSrc, alt: "Result icon", sx: QuizResult_styles_1.styles.icon })) : ((0, jsx_runtime_1.jsx)(RiveComponent, { style: {
+                                        width: "100%",
+                                        height: "100%",
+                                        objectFit: "contain",
+                                        zIndex: 99,
+                                    } }, rivSrc)) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { sx: {
+                                    ...QuizResult_styles_1.styles.messageBox,
+                                    ...(isMobile
+                                        ? {
+                                            backgroundColor: "transparent",
+                                            fontSize: "18px",
+                                            padding: "0",
+                                        }
+                                        : content.messageBoxStyle),
+                                }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: "2px", children: [(0, jsx_runtime_1.jsx)(react_2.Image, { src: badgesrc, alt: "Result icon", w: "24px", h: "24px", ml: !isMobile ? "24px" : "", mt: !isMobile ? "5px" : "", mb: isMobile ? "5px" : "" }), (0, jsx_runtime_1.jsx)(react_2.Text, { sx: {
+                                                    ...QuizResult_styles_1.styles.title,
+                                                    paddingTop: content.showLevelUp ? "43px" : "14px",
+                                                    padding: isMobile && "0px",
+                                                }, children: content.title })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { sx: { ...QuizResult_styles_1.styles.description, padding: isMobile && "0px" }, children: description })] })] })) }), error ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { sx: {
+                                ...QuizResult_styles_1.styles.description,
+                                paddingTop: isMobile ? "5px" : "20px",
+                                paddingLeft: "0px",
+                                paddingRight: "0px",
+                                paddingBottom: isMobile ? "5px" : "14px",
+                            }, children: "Your performance data couldn\u2019t be loaded right now.Please try again in a moment." }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: QuizResult_styles_1.styles.separator })] })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { sx: QuizResult_styles_1.styles.separator })), (0, jsx_runtime_1.jsxs)(react_2.Box, { sx: QuizResult_styles_1.styles.buttonContainer, children: [!hideHomeworkButton && ((0, jsx_runtime_1.jsx)(react_2.Button, { sx: { ...QuizResult_styles_1.styles.button, ...QuizResult_styles_1.styles.buttonSecondary }, onClick: onBackToHomework, children: content.secondaryButton })), (0, jsx_runtime_1.jsx)(react_2.Button, { sx: {
+                                ...QuizResult_styles_1.styles.button,
+                                ...QuizResult_styles_1.styles.buttonPrimary,
+                                _hover: {
+                                    backgroundColor: "#4B3BB5", // darker purple on hover
+                                },
+                            }, onClick: onReview, children: hideReviewButton
+                                ? "Go Back to Teacher Page"
+                                : content.primaryButton })] })] }) }));
+};
+exports.default = PreformanceResultScreen;
+//# sourceMappingURL=PreformanceResultScreen.js.map

package/dist/components/Molecules/PerformanceScreen/PreformanceResultScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreformanceResultScreen.js","sourceRoot":"","sources":["../../../../src/components/Molecules/PerformanceScreen/PreformanceResultScreen.tsx"],"names":[],"mappings":"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"}

package/dist/components/Molecules/PerformanceScreen/PreformanceResultScreen.stories.d.ts

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+import PreformanceResultScreen from "./PreformanceResultScreen";
+declare const meta: Meta<typeof PreformanceResultScreen>;
+export default meta;
+type Story = StoryObj<typeof PreformanceResultScreen>;
+export declare const BelowSixty: Story;
+export declare const SixtyToEighty: Story;
+export declare const AboveEighty: Story;
+export declare const Hundred: Story;
+export declare const ErrorState: {
+    args: {
+        percentage: number;
+        timeTaken: {
+            minutes: number;
+            seconds: number;
+        };
+        error: boolean;
+        imgSrc: any;
+        isMobile: boolean;
+    };
+};

package/dist/components/Molecules/PerformanceScreen/PreformanceResultScreen.stories.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorState = exports.Hundred = exports.AboveEighty = exports.SixtyToEighty = exports.BelowSixty = void 0;
+const PreformanceResultScreen_1 = __importDefault(require("./PreformanceResultScreen"));
+const Between80_100_svg_1 = __importDefault(require("../../../assests/PerformanceScreens/Between80-100.svg"));
+const Below60_svg_1 = __importDefault(require("../../../assests/PerformanceScreens/Below60.svg"));
+const Between60_80_svg_1 = __importDefault(require("../../../assests/PerformanceScreens/Between60-80.svg"));
+const greenBadge_svg_1 = __importDefault(require("../../../assests/AccordionBadges/greenBadge.svg"));
+const meta = {
+    title: "Components/Molecules/PreformanceResultScreen",
+    component: PreformanceResultScreen_1.default,
+    parameters: {
+        layout: "fullscreen",
+    },
+    argTypes: {
+        percentage: {
+            control: { type: "range", min: 0, max: 100, step: 1 },
+            description: "Quiz score percentage",
+        },
+        timeTaken: {
+            description: "Time taken to complete the quiz",
+        },
+        comparisonText: {
+            control: "text",
+            description: "Performance comparison text",
+        },
+        imgSrc: {
+            control: "text",
+            description: "Mascot image URL",
+        },
+    },
+};
+exports.default = meta;
+// Story for Below 60% (Room to Improve)
+exports.BelowSixty = {
+    args: {
+        percentage: 45,
+        timeTaken: { minutes: 21, seconds: 30 },
+        comparisonText: "2 min faster than your class average. Keep it up!",
+        imgSrc: Below60_svg_1.default,
+        onLevelUp: () => console.log("Level Up clicked"),
+        onReview: () => console.log("Review questions clicked"),
+        isMobile: false,
+        badgesrc: greenBadge_svg_1.default,
+    },
+};
+// Story for 60-80% (Good Job)
+exports.SixtyToEighty = {
+    args: {
+        percentage: 72,
+        timeTaken: { minutes: 21, seconds: 30 },
+        comparisonText: "2 min faster than your class average. Keep it up!",
+        imgSrc: Between60_80_svg_1.default,
+        onLevelUp: () => console.log("Level Up clicked"),
+        onReview: () => console.log("Review questions clicked"),
+        isMobile: false,
+    },
+};
+// Story for Above 80% (Brilliant)
+exports.AboveEighty = {
+    args: {
+        percentage: 92,
+        timeTaken: { minutes: 21, seconds: 30 },
+        description: "Let's turn this into progress. Review the questions to see where you can improve. Understanding them now will help you ace similar ones later!",
+        imgSrc: Between80_100_svg_1.default,
+        onReview: () => console.log("Review questions clicked"),
+        onBackToHomework: () => console.log("Back to homework clicked"),
+        isMobile: true,
+    },
+};
+exports.Hundred = {
+    args: {
+        percentage: 100,
+        timeTaken: { minutes: 21, seconds: 30 },
+        comparisonText: "2 min faster than your class average. Keep it up!",
+        imgSrc: Between80_100_svg_1.default,
+        onReview: () => console.log("Review questions clicked"),
+        onBackToHomework: () => console.log("Back to homework clicked"),
+        isMobile: true,
+    },
+};
+exports.ErrorState = {
+    args: {
+        percentage: 0,
+        timeTaken: { minutes: 0, seconds: 0 },
+        error: true,
+        imgSrc: Between80_100_svg_1.default,
+        isMobile: false,
+    },
+};
+//# sourceMappingURL=PreformanceResultScreen.stories.js.map

package/dist/components/Molecules/PerformanceScreen/PreformanceResultScreen.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreformanceResultScreen.stories.js","sourceRoot":"","sources":["../../../../src/components/Molecules/PerformanceScreen/PreformanceResultScreen.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/Molecules/PerformanceScreen/QuizResult.styles.d.ts

@@ -0,0 +1,31 @@
+import { CSSProperties } from "react";
+interface Styles {
+    container: CSSProperties;
+    card: CSSProperties;
+    mobilecard: CSSProperties;
+    header: CSSProperties;
+    icon: CSSProperties;
+    messageBox: CSSProperties;
+    messageBoxImprove: CSSProperties;
+    messageBoxSatisfactory: CSSProperties;
+    messageBoxGood: CSSProperties;
+    messageBoxBrilliant: CSSProperties;
+    title: CSSProperties;
+    description: CSSProperties;
+    timeSection: CSSProperties;
+    timeHeader: CSSProperties;
+    timeHeader1: CSSProperties;
+    timeLabel: CSSProperties;
+    timeSubtext: CSSProperties;
+    buttonContainer: CSSProperties;
+    button: CSSProperties;
+    buttonSecondary: CSSProperties;
+    buttonPrimary: CSSProperties;
+    clockIcon: CSSProperties;
+    separator: CSSProperties;
+    timeValueNumber: CSSProperties;
+    timeValueUnit: CSSProperties;
+    timeColon: CSSProperties;
+}
+export declare const styles: Styles;
+export {};