touchstudy-core 0.1.157 → 0.1.159

package/dist/index.js

@@ -16,28 +16,32 @@ var moment = _interopDefault(require('moment'));
 var fa = require('react-icons/fa');
 var io = require('react-icons/io');
 var io5 = require('react-icons/io5');
-var reactRedux = require('react-redux');
+var MButton = _interopDefault(require('@mui/material/Button'));
+var DialogTitle = _interopDefault(require('@mui/material/DialogTitle'));
+var DialogContent = _interopDefault(require('@mui/material/DialogContent'));
+var DialogActions = _interopDefault(require('@mui/material/DialogActions'));
+var IconButton = _interopDefault(require('@mui/material/IconButton'));
+var Typography = _interopDefault(require('@mui/material/Typography'));
+var formik = require('formik');
 var Select = require('react-select');
 var Select__default = _interopDefault(Select);
 var CreatableSelect = _interopDefault(require('react-select/creatable'));
+var reactRedux = require('react-redux');
 var axios = _interopDefault(require('axios'));
 var _$8 = _interopDefault(require('lodash'));
 var reactGoogleLogin = require('@leecheuk/react-google-login');
 require('moment/locale/ko.js');
 require('moment/locale/en-au.js');
 var reactVirtualized = require('react-virtualized');
-var formik = require('formik');
-var styles$c = require('@mui/material/styles');
+var styles$d = require('@mui/material/styles');
 var tinymce = _interopDefault(require('tinymce'));
 require('@wiris/mathtype-tinymce6');
 var tinymceReact = require('@tinymce/tinymce-react');
 var Grid = _interopDefault(require('@mui/material/Grid'));
-var Typography = _interopDefault(require('@mui/material/Typography'));
 var Card = _interopDefault(require('@mui/material/Card'));
 var CardActions = _interopDefault(require('@mui/material/CardActions'));
 var CardContent = _interopDefault(require('@mui/material/CardContent'));
 var CardMedia = _interopDefault(require('@mui/material/CardMedia'));
-var MButton = _interopDefault(require('@mui/material/Button'));
 var yup = require('yup');
 var colors = require('@mui/material/colors');
 var reactGoogleRecaptchaV3 = require('react-google-recaptcha-v3');
@@ -52,10 +56,6 @@ var Box = _interopDefault(require('@mui/material/Box'));
 var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
 var DatePicker = require('@mui/x-date-pickers/DatePicker');
 var fa6 = require('react-icons/fa6');
-var DialogTitle = _interopDefault(require('@mui/material/DialogTitle'));
-var DialogContent = _interopDefault(require('@mui/material/DialogContent'));
-var DialogActions = _interopDefault(require('@mui/material/DialogActions'));
-var IconButton = _interopDefault(require('@mui/material/IconButton'));
 var html2pdf = _interopDefault(require('html2pdf.js'));
 var Slider = _interopDefault(require('react-slick'));
 var gr = require('react-icons/gr');
@@ -5481,7 +5481,7 @@ var CommonDialog = function CommonDialog(_ref) {
     },
     PaperProps: {
       sx: {
-        overflowY: "unset",
+        overflowY: "auto",
         minWidth: minWidth
       }
     }
@@ -5686,163 +5686,43 @@ var ConfirmDeleteDialog = function ConfirmDeleteDialog(props) {
   return React__default.createElement(ConfirmDialog, Object.assign({}, ConfirmDeleteDialogDefaultProps, props));
 };
 
-var _templateObject;
-var BorderedTextField = material.styled(material.TextField)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    & .MuiOutlinedInput-root {\n        &.Mui-focused fieldset {\n            border-width: 1px;\n            border-color: ", ";\n        }\n    }\n    & .MuiOutlinedInput-root:hover {\n      fieldset {\n          border-width: 1px;\n          border-color: ", ";\n      }\n    }\n"])), styles.dark, styles.less_dark);
-var InputText = function InputText(props) {
-  return React__default.createElement(BorderedTextField, Object.assign({
-    sx: {
-      "& input": {
-        py: "7.5px",
-        px: "12px"
-      },
-      "& > div": {
-        borderColor: "#97A1AF",
-        borderRadius: "4px"
-      }
-    }
-  }, props));
-};
-
-var PassCodeDialog = function PassCodeDialog(_ref) {
-  var open = _ref.open,
-    onClose = _ref.onClose,
-    onSubmit = _ref.onSubmit,
-    academyDomain = _ref.academyDomain;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useState = React.useState(""),
-    passCode = _useState[0],
-    setPassCode = _useState[1];
-  var handleClose = function handleClose(event, reason) {
-    onClose(event, reason);
-  };
-  var handleSubmit = function handleSubmit() {
-    try {
-      var data = {
-        code: passCode,
-        academyDomain: academyDomain
-      };
-      return Promise.resolve(onSubmit(data, handleClose)).then(function () {});
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-  var handleChangePassCode = function handleChangePassCode(e) {
-    setPassCode(e.target.value);
-  };
-  var theme = material.useTheme();
-  return React__default.createElement(CommonDialog, {
-    open: open,
-    onClose: handleClose,
-    size: "xs",
-    title: t("join_an_academy")
-  }, React__default.createElement(material.DialogContent, {
-    sx: {
-      overflowY: "unset"
-    }
-  }, React__default.createElement(material.Stack, {
-    direction: "column",
-    spacing: 2,
-    zIndex: 1,
-    position: "relative"
-  }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
-    className: "fw-medium mb-1"
-  }, t("pass_code"), React__default.createElement("span", {
-    className: "text-danger"
-  }, "*")), React__default.createElement(InputText, {
-    id: "pass-code",
-    placeholder: t("enter_pass_code"),
-    value: passCode,
-    onChange: handleChangePassCode
-  })))), React__default.createElement(material.DialogActions, {
-    className: ""
-  }, React__default.createElement(material.Button, {
-    variant: "contained",
-    sx: {
-      bgcolor: theme.palette.grey[700]
-    },
-    onClick: handleClose
-  }, t("cancel")), React__default.createElement(material.Button, {
-    variant: "contained",
-    onClick: handleSubmit,
-    disabled: !passCode.trim().length
-  }, t("confirmation"))));
-};
-
-var loadingStyle = {
-  minWidth: "100vw",
-  minHeight: "100vh",
-  position: "fixed",
-  top: 0,
-  left: 0,
-  zIndex: 999999999,
-  backgroundColor: "rgba(0, 0, 0, 0.4)",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-};
-var Loading = function Loading() {
-  var isLoading = reactRedux.useSelector(function (state) {
-    return state.common.isLoading;
-  });
-  return isLoading ? React__default.createElement("div", {
-    style: loadingStyle
-  }, React__default.createElement("div", {
-    className: "spinner-border text-secondary",
-    role: "status"
-  }, React__default.createElement("span", {
-    className: "sr-only"
-  }))) : null;
+var iconCloseDialog = function iconCloseDialog(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "24" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "25" : _ref$height,
+    color = _ref.color;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 24 25",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M13.5909 12.5L18.0441 8.04687C18.2554 7.8359 18.3743 7.54962 18.3745 7.25099C18.3748 6.95237 18.2564 6.66587 18.0455 6.45453C17.8345 6.24319 17.5482 6.12431 17.2496 6.12404C16.951 6.12378 16.6645 6.24215 16.4531 6.45312L12 10.9062L7.54687 6.45312C7.33553 6.24178 7.04888 6.12305 6.75 6.12305C6.45111 6.12305 6.16447 6.24178 5.95312 6.45312C5.74178 6.66447 5.62305 6.95111 5.62305 7.25C5.62305 7.54888 5.74178 7.83553 5.95312 8.04687L10.4062 12.5L5.95312 16.9531C5.74178 17.1645 5.62305 17.4511 5.62305 17.75C5.62305 18.0489 5.74178 18.3355 5.95312 18.5469C6.16447 18.7582 6.45111 18.8769 6.75 18.8769C7.04888 18.8769 7.33553 18.7582 7.54687 18.5469L12 14.0937L16.4531 18.5469C16.6645 18.7582 16.9511 18.8769 17.25 18.8769C17.5489 18.8769 17.8355 18.7582 18.0469 18.5469C18.2582 18.3355 18.3769 18.0489 18.3769 17.75C18.3769 17.4511 18.2582 17.1645 18.0469 16.9531L13.5909 12.5Z",
+    fill: "#202B37"
+  }));
 };
 
-var loadingStyle$1 = {
-  minWidth: "100vw",
-  minHeight: "100vh",
-  position: "fixed",
-  top: 0,
-  left: 0,
-  zIndex: 999999999,
-  backgroundColor: "rgba(0, 0, 0, 0.4)",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-};
-var LoadingComponent = function LoadingComponent(_ref) {
-  var isLoading = _ref.isLoading,
-    children = _ref.children,
-    _ref$spinClassName = _ref.spinClassName,
-    spinClassName = _ref$spinClassName === void 0 ? "text-secondary" : _ref$spinClassName,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  return isLoading ? React__default.createElement("div", {
-    style: loadingStyle$1
-  }, React__default.createElement(material.Stack, {
-    direction: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    className: className
-  }, React__default.createElement("div", {
-    className: "spinner-border " + spinClassName,
-    role: "status"
-  }, React__default.createElement("span", {
-    className: "sr-only"
-  })), React__default.createElement("div", null, children))) : null;
+var iconWarning = function iconWarning(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? "17" : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? "16" : _ref$height,
+    color = _ref.color;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 17 16",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("path", {
+    d: "M14.5335 12.4712L9.20754 2.58062C8.83004 1.87937 7.82441 1.87937 7.4466 2.58062L2.12097 12.4712C2.03901 12.6235 1.99792 12.7944 2.00171 12.9672C2.00549 13.1401 2.05404 13.309 2.14259 13.4575C2.23115 13.606 2.3567 13.729 2.50698 13.8145C2.65726 13.9 2.82714 13.9451 3.00004 13.9453H13.6529C13.8259 13.9453 13.996 13.9005 14.1465 13.8151C14.2969 13.7297 14.4227 13.6067 14.5115 13.4582C14.6002 13.3096 14.6489 13.1406 14.6527 12.9676C14.6566 12.7946 14.6155 12.6236 14.5335 12.4712ZM8.32722 12.4141C8.20361 12.4141 8.08277 12.3774 7.97999 12.3087C7.87721 12.2401 7.7971 12.1424 7.7498 12.0282C7.7025 11.914 7.69012 11.7884 7.71423 11.6671C7.73835 11.5459 7.79787 11.4345 7.88528 11.3471C7.97269 11.2597 8.08405 11.2002 8.20529 11.1761C8.32653 11.152 8.4522 11.1643 8.5664 11.2116C8.6806 11.2589 8.77822 11.3391 8.84689 11.4418C8.91557 11.5446 8.95222 11.6654 8.95222 11.7891C8.95222 11.8711 8.93606 11.9524 8.90465 12.0282C8.87324 12.1041 8.8272 12.173 8.76917 12.231C8.71113 12.289 8.64223 12.3351 8.5664 12.3665C8.49057 12.3979 8.4093 12.4141 8.32722 12.4141ZM9.00597 6.12813L8.8266 9.94063C8.8266 10.0732 8.77392 10.2004 8.68015 10.2942C8.58638 10.3879 8.45921 10.4406 8.3266 10.4406C8.19399 10.4406 8.06681 10.3879 7.97305 10.2942C7.87928 10.2004 7.8266 10.0732 7.8266 9.94063L7.64722 6.12969C7.64319 6.03862 7.65754 5.94768 7.6894 5.86227C7.72127 5.77687 7.77 5.69875 7.8327 5.63259C7.8954 5.56642 7.97078 5.51355 8.05434 5.47713C8.13791 5.44072 8.22795 5.4215 8.3191 5.42063H8.32566C8.41743 5.42058 8.50826 5.43912 8.59267 5.47515C8.67708 5.51117 8.75331 5.56392 8.81677 5.63021C8.88023 5.6965 8.92961 5.77497 8.96191 5.86087C8.99421 5.94676 9.00878 6.03832 9.00472 6.13L9.00597 6.12813Z",
+    fill: "#DB4D4D"
+  }));
 };
 
-var CustomPagination = function CustomPagination(_ref) {
-  var currentPage = _ref.currentPage,
-    totalPage = _ref.totalPage,
-    onChangePage = _ref.onChangePage;
-  var handleChangePage = function handleChangePage(_, page) {
-    onChangePage(page);
-  };
-  return React__default.createElement(material.Pagination, {
-    className: "w-fit",
-    count: totalPage,
-    page: currentPage,
-    onChange: handleChangePage
-  });
-};
+var styles$1 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","titleBox":"_2mYOt","title":"_1H9qR","point":"_2rTfh","buttonGroup":"_W5dic","btnFeedback":"_FmMYN","btnTerminate":"_3kv6J","myanswer":"_1jZV7","titleMyAnswer1":"_1aYD1","titleMyAnswer2":"_2Oc4x","contentMyAnswer":"__LRYW","myAnswerItem":"_1U-Kx","time":"_2PXiz","timeCol":"_1zcfJ","answer-response":"_18ZNf","answer-response-0":"_3nbRi","answer-response-1":"_3NEHk","answer-response-2":"_Et0ih","answer-response-3":"_5Vc3v","answer-response-4":"_2SMBR","overall-response-1":"_1ImE5","overall-response-2":"_1oVKC","overall-response-3":"_2wXCw","answerCorrect":"_gE8qM","answerIncorrect":"_3kRqE","answerNograss":"_22Pi3","answerEasy":"_1C7aw","answerDiscrimination":"__YGYX","answerTrap":"_3AkGb","answerNoTime":"_3l-yC","questionOrder":"_2mK7U","myTimeLabel":"_3ZOZs","myPoolTime":"_1Gajr","topTimeLabel":"_62PzE","topTime":"_3HUx1","meanTimeLabel":"_Yu8Oq","meanTime":"_18kZu","compareChart":"_2MTOH","prevChart":"_JoHQL","chart":"_29iCQ","nextChart":"_3hjxI","titleChart":"_2Z42z","titleCompareGrass":"_34RN_","tableCompareGrass":"_2lzlQ","thcolumn1":"_2MSIH","tdcolumn1":"_1I06v","tdcolumn3":"_VpMQ5","classification":"_3t41M","wrapperProblem":"_2vh8v","titleProblem":"_3YfGm","titleProblemClose":"_34388","titleTrickyProblem":"_INxbh","wrongQuestions":"_35DcB","question":"_10SAW","assignedQuestions":"_oEGQ_","wrapperContent":"_zhZ1O","content":"_NGHD4","contentColumn1":"_v5SKe","span1":"_28SHT","span2":"_1raLd","contentColumn2":"_-xJ34","duration":"_1YGAg","topDuration":"_3DiyY","overallCorrectRate":"_DnkyV","answer":"_29MTE","contentVulnerable":"_3x1PG","wrappContentProblem":"_2saM2","contentProblem":"_1hTJx","labelProblem":"_3BXO9","name":"_1cUZW","percent":"_3CLEc","slider":"_3LCEY","track":"_3I8mi","noData":"_1oZ-s","loading":"_Nm201","table-responsive":"_3zQL-","form-label":"_3Vpmh","form-control":"_DafKE","form-label-dialog":"_3NjaH","btn-cancel":"_sLxwL","btn-register":"_4ZKQY","pdfBtnBox":"_2zUJf","pdfBtn":"_y_Cr7","form-select":"_HCIxD","loader":"_3aDIU","dot":"_JGCIL","bounce":"_3M62i"};
 
 var DropdownIndicator = function DropdownIndicator(props) {
   return React__default.createElement(Select.components.DropdownIndicator, Object.assign({}, props), React__default.createElement(fa.FaCaretDown, {
@@ -6009,7 +5889,6 @@ var CustomSelect = function CustomSelect(_ref) {
     value: !isDefault ? initialValues != null ? initialValues : null : undefined,
     defaultValue: isDefault ? initialValues : undefined,
     menuPlacement: scrollBottom ? "top" : "auto",
-    isMulti: isMulti,
     components: {
       IndicatorSeparator: function IndicatorSeparator() {
         return null;
@@ -6079,6 +5958,329 @@ var CustomSelectOption = function CustomSelectOption(_ref) {
   }, rest));
 };
 
+function CommonCreateNewQuestionDialog(_ref) {
+  var handleCreateQuestion = _ref.handleCreateQuestion,
+    openDialog = _ref.openDialog,
+    initialValues = _ref.initialValues,
+    onClose = _ref.onClose,
+    options = _ref.options,
+    schema = _ref.schema,
+    labelQuestion = _ref.labelQuestion,
+    nameQuestion = _ref.nameQuestion,
+    labelContent = _ref.labelContent,
+    nameContent = _ref.nameContent;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(false),
+    keyboardOpen = _useState[0],
+    setKeyboardOpen = _useState[1];
+  React.useEffect(function () {
+    var handleResize = function handleResize() {
+      if (window.innerHeight < window.outerHeight) {
+        setKeyboardOpen(true);
+      } else {
+        setKeyboardOpen(false);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return function () {
+      return window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return React__default.createElement(material.Dialog, {
+    onClose: onClose,
+    open: openDialog,
+    PaperProps: {
+      sx: {
+        minWidth: "363px",
+        overflowY: "auto",
+        position: "relative",
+        bottom: keyboardOpen ? "0" : undefined,
+        transition: "top 0.3s ease"
+      }
+    }
+  }, React__default.createElement(DialogTitle, {
+    id: "customized-dialog-title"
+  }, React__default.createElement(Typography, {
+    fontWeight: 700,
+    fontSize: "16px",
+    lineHeight: "19.09px",
+    color: "#202B37"
+  }, t("ask_a_question"))), React__default.createElement(IconButton, {
+    "aria-label": "close",
+    sx: {
+      position: "absolute",
+      right: 8,
+      top: 8,
+      color: function color(theme) {
+        return theme.palette.grey[500];
+      }
+    },
+    onClick: onClose
+  }, React__default.createElement(iconCloseDialog, null)), React__default.createElement(formik.Formik, {
+    initialValues: initialValues,
+    validationSchema: schema,
+    onSubmit: handleCreateQuestion
+  }, function (_ref2) {
+    var values = _ref2.values,
+      errors = _ref2.errors,
+      setFieldValue = _ref2.setFieldValue;
+    return React__default.createElement(formik.Form, null, React__default.createElement(DialogContent, {
+      sx: {
+        padding: 0,
+        overflowY: "auto"
+      }
+    }, React__default.createElement(material.Box, {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px",
+      padding: "24px 24px 40px 24px",
+      overflow: "scroll"
+    }, React__default.createElement(material.Stack, null, React__default.createElement("label", {
+      htmlFor: "questions",
+      className: styles["form-label"] + "  " + styles$1["form-label-dialog"]
+    }, labelQuestion || t("questions_to_ask")), React__default.createElement(formik.Field, {
+      id: "questions",
+      name: nameQuestion,
+      render: function render(_ref3) {
+        var field = _ref3.field;
+        return React__default.createElement(CustomSelect, Object.assign({}, field, {
+          id: "questions",
+          menuPlacement: "bottom",
+          maxMenuHeight: 150,
+          options: options,
+          onChange: function onChange(_ref4) {
+            var value = _ref4.value;
+            return setFieldValue(nameQuestion, value);
+          },
+          isClearable: false
+        }));
+      }
+    })), React__default.createElement(material.Stack, null, React__default.createElement("label", {
+      htmlFor: "content-question",
+      className: styles["form-label"] + "  " + styles$1["form-label-dialog"]
+    }, labelContent || t("question_content")), React__default.createElement(material.Box, {
+      position: "relative",
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center"
+    }, React__default.createElement(formik.Field, {
+      as: "textarea",
+      rows: 3,
+      id: "content-question",
+      style: {
+        paddingRight: "40px"
+      },
+      name: nameContent,
+      placeholder: t("the_problem_is_difficult"),
+      className: styles["form-control"]
+    }), (errors === null || errors === void 0 ? void 0 : errors[nameContent]) && React__default.createElement(material.Box, {
+      position: "absolute",
+      right: 0,
+      padding: "0 12px",
+      display: "flex",
+      alignItems: "center"
+    }, React__default.createElement(iconWarning, null))), React__default.createElement(material.Box, {
+      marginBottom: "4px"
+    }), React__default.createElement(Typography, {
+      fontWeight: 500,
+      fontSize: "10px",
+      lineHeight: "11.93px",
+      color: !(errors !== null && errors !== void 0 && errors[nameContent]) ? "#97A1AF" : styles$1.red_900
+    }, !(errors !== null && errors !== void 0 && errors[nameContent]) ? t("your_questions_will_be_sent_to_the_counselor") : t("please_enter_your_question"))))), React__default.createElement(DialogActions, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "12px",
+        borderTop: "1px solid #CED2DA"
+      }
+    }, React__default.createElement(MButton, {
+      className: styles$1["btn-cancel"],
+      onClick: onClose
+    }, React__default.createElement(Typography, {
+      sx: {
+        color: styles.dark + " !important"
+      },
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: "16.71px"
+    }, t("cancel"))), React__default.createElement(MButton, {
+      variant: "contained",
+      sx: {
+        bgcolor: styles.dark
+      },
+      className: styles$1["btn-register"],
+      type: "submit",
+      disabled: !values.content.trim().length
+    }, React__default.createElement(Typography, {
+      fontWeight: 700,
+      fontSize: "14px",
+      lineHeight: "16.71px",
+      color: "#FFFFFF"
+    }, t("registration")))));
+  }));
+}
+
+var _templateObject;
+var BorderedTextField = material.styled(material.TextField)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    & .MuiOutlinedInput-root {\n        &.Mui-focused fieldset {\n            border-width: 1px;\n            border-color: ", ";\n        }\n    }\n    & .MuiOutlinedInput-root:hover {\n      fieldset {\n          border-width: 1px;\n          border-color: ", ";\n      }\n    }\n"])), styles.dark, styles.less_dark);
+var InputText = function InputText(props) {
+  return React__default.createElement(BorderedTextField, Object.assign({
+    sx: {
+      "& input": {
+        py: "7.5px",
+        px: "12px"
+      },
+      "& > div": {
+        borderColor: "#97A1AF",
+        borderRadius: "4px"
+      }
+    }
+  }, props));
+};
+
+var PassCodeDialog = function PassCodeDialog(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    onSubmit = _ref.onSubmit,
+    academyDomain = _ref.academyDomain;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(""),
+    passCode = _useState[0],
+    setPassCode = _useState[1];
+  var handleClose = function handleClose(event, reason) {
+    onClose(event, reason);
+  };
+  var handleSubmit = function handleSubmit() {
+    try {
+      var data = {
+        code: passCode,
+        academyDomain: academyDomain
+      };
+      return Promise.resolve(onSubmit(data, handleClose)).then(function () {});
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleChangePassCode = function handleChangePassCode(e) {
+    setPassCode(e.target.value);
+  };
+  var theme = material.useTheme();
+  return React__default.createElement(CommonDialog, {
+    open: open,
+    onClose: handleClose,
+    size: "xs",
+    title: t("join_an_academy")
+  }, React__default.createElement(material.DialogContent, {
+    sx: {
+      overflowY: "unset"
+    }
+  }, React__default.createElement(material.Stack, {
+    direction: "column",
+    spacing: 2,
+    zIndex: 1,
+    position: "relative"
+  }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
+    className: "fw-medium mb-1"
+  }, t("pass_code"), React__default.createElement("span", {
+    className: "text-danger"
+  }, "*")), React__default.createElement(InputText, {
+    id: "pass-code",
+    placeholder: t("enter_pass_code"),
+    value: passCode,
+    onChange: handleChangePassCode
+  })))), React__default.createElement(material.DialogActions, {
+    className: ""
+  }, React__default.createElement(material.Button, {
+    variant: "contained",
+    sx: {
+      bgcolor: theme.palette.grey[700]
+    },
+    onClick: handleClose
+  }, t("cancel")), React__default.createElement(material.Button, {
+    variant: "contained",
+    onClick: handleSubmit,
+    disabled: !passCode.trim().length
+  }, t("confirmation"))));
+};
+
+var loadingStyle = {
+  minWidth: "100vw",
+  minHeight: "100vh",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  zIndex: 999999999,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+};
+var Loading = function Loading() {
+  var isLoading = reactRedux.useSelector(function (state) {
+    return state.common.isLoading;
+  });
+  return isLoading ? React__default.createElement("div", {
+    style: loadingStyle
+  }, React__default.createElement("div", {
+    className: "spinner-border text-secondary",
+    role: "status"
+  }, React__default.createElement("span", {
+    className: "sr-only"
+  }))) : null;
+};
+
+var loadingStyle$1 = {
+  minWidth: "100vw",
+  minHeight: "100vh",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  zIndex: 999999999,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
+};
+var LoadingComponent = function LoadingComponent(_ref) {
+  var isLoading = _ref.isLoading,
+    children = _ref.children,
+    _ref$spinClassName = _ref.spinClassName,
+    spinClassName = _ref$spinClassName === void 0 ? "text-secondary" : _ref$spinClassName,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  return isLoading ? React__default.createElement("div", {
+    style: loadingStyle$1
+  }, React__default.createElement(material.Stack, {
+    direction: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    className: className
+  }, React__default.createElement("div", {
+    className: "spinner-border " + spinClassName,
+    role: "status"
+  }, React__default.createElement("span", {
+    className: "sr-only"
+  })), React__default.createElement("div", null, children))) : null;
+};
+
+var CustomPagination = function CustomPagination(_ref) {
+  var currentPage = _ref.currentPage,
+    totalPage = _ref.totalPage,
+    onChangePage = _ref.onChangePage;
+  var handleChangePage = function handleChangePage(_, page) {
+    onChangePage(page);
+  };
+  return React__default.createElement(material.Pagination, {
+    className: "w-fit",
+    count: totalPage,
+    page: currentPage,
+    onChange: handleChangePage
+  });
+};
+
 var SCORE_OPTIONS = Array.from({
   length: 10
 }, function (_, i) {
@@ -7623,10 +7825,22 @@ var QuestionCountSelector = function QuestionCountSelector(_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     isDisabled = _ref.isDisabled,
-    rest = _ref.rest;
+    rest = _ref.rest,
+    totalQuestions = _ref.totalQuestions;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var questionOptions = QUESTION_OPTIONS.map(function (i) {
+  var questionOptions = totalQuestions && totalQuestions > 1 ? Array.from({
+    length: totalQuestions
+  }, function (_, i) {
+    return i + 1;
+  }).map(function (i) {
+    return {
+      label: t("question_count_format", {
+        number: i
+      }),
+      value: i
+    };
+  }) : QUESTION_OPTIONS.map(function (i) {
     return {
       label: t("question_count_format", {
         number: i
@@ -7941,7 +8155,7 @@ var SearchInput = function SearchInput(_ref) {
   }));
 };
 
-var styles$1 = {"header__avatar":"_2oGcJ","header__select":"_2y2XV","body":"_ntGyI","list":"_m7Fwt","list__item__header":"_3BM8N","list__item__avatar":"_1ReOK","list__item__avatar-container":"_2qbld","list__item__message":"_3s01i","list__item__message--reply-from":"_2Qxi3","list__item__message--reply-from-right":"_34Vx4","list__item__message--reply":"_3uheq","list__item__message--reply-right":"_2iBr7","reply-text":"_3ZPjO","container-custom":"_38A9k","student-row-col-1":"_Jt5t0","student-row-col-1-active":"_14DKj","row-col-2":"_qHGiR","inputBox":"_2iY67","inputBoxTable":"_3pCw0","background-chat":"_zILbw","wrap-content":"_38gsM","name-sender":"_Lfzyw","content-chat-sender":"_1X73E","content-chat-receiver":"_32V7T","custom-scroll":"_2Uul2","btn-send":"_395lb","btn-chat":"_gDYwm","input-chat":"_22TX5","btn-cancel":"_1u-eg","btn-register":"_22r6_","form-label-dialog":"_jADIA","form-select-width":"_WncPd","padding-content":"_3hz3H","form-label":"_MMQxP","form-control":"_1mJfc"};
+var styles$2 = {"header__avatar":"_2oGcJ","header__select":"_2y2XV","body":"_ntGyI","list":"_m7Fwt","list__item__header":"_3BM8N","list__item__avatar":"_1ReOK","list__item__avatar-container":"_2qbld","list__item__message":"_3s01i","list__item__message--reply-from":"_2Qxi3","list__item__message--reply-from-right":"_34Vx4","list__item__message--reply":"_3uheq","list__item__message--reply-right":"_2iBr7","reply-text":"_3ZPjO","container-custom":"_38A9k","student-row-col-1":"_Jt5t0","student-row-col-1-active":"_14DKj","row-col-2":"_qHGiR","inputBox":"_2iY67","inputBoxTable":"_3pCw0","background-chat":"_zILbw","wrap-content":"_38gsM","name-sender":"_Lfzyw","content-chat-sender":"_1X73E","content-chat-receiver":"_32V7T","custom-scroll":"_2Uul2","btn-send":"_395lb","btn-chat":"_gDYwm","input-chat":"_22TX5","btn-cancel":"_1u-eg","btn-register":"_22r6_","form-label-dialog":"_jADIA","form-select-width":"_WncPd","padding-content":"_3hz3H","form-label":"_MMQxP","form-control":"_1mJfc"};
 
 var iconPersonNoActive = function iconPersonNoActive(_ref) {
   var _ref$width = _ref.width,
@@ -8095,7 +8309,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
     padding: "4px 0"
   }, React__default.createElement(material.Box, null, showName && isStudent && React__default.createElement(material.Box, {
     gap: "8px",
-    className: " " + styles$1["name-sender"],
+    className: " " + styles$2["name-sender"],
     display: "flex",
     alignItems: "center",
     justifyContent: "end",
@@ -8149,7 +8363,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
       objectFit: "contain"
     }
   }) : React__default.createElement("div", {
-    className: styles$1["wrap-content"] + " " + styles$1["content-chat-receiver"],
+    className: styles$2["wrap-content"] + " " + styles$2["content-chat-receiver"],
     style: {
       "float": "inline-end",
       maxWidth: 400,
@@ -8192,7 +8406,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     display: "flex",
     padding: "4px",
     flexDirection: "row",
-    className: "" + styles$1["name-sender"]
+    className: "" + styles$2["name-sender"]
   }, isStudent ? React__default.createElement(React.Fragment, null, React__default.createElement(material.Typography, {
     fontWeight: 500,
     fontSize: 14,
@@ -8228,7 +8442,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
       objectFit: "contain"
     }
   }) : React__default.createElement("div", {
-    className: styles$1["wrap-content"] + " " + styles$1["content-chat-sender"],
+    className: styles$2["wrap-content"] + " " + styles$2["content-chat-sender"],
     style: {
       maxWidth: 400
     }
@@ -8446,7 +8660,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     _objectDestructuringEmpty(_ref2);
     return React__default.createElement(formik.Form, null, React__default.createElement("label", {
       htmlFor: "content",
-      className: styles$1['form-label'] + "  " + styles$1['form-label-dialog']
+      className: styles$2['form-label'] + "  " + styles$2['form-label-dialog']
     }, t('questions_to_ask')), React__default.createElement(formik.Field, {
       id: "content",
       style: {
@@ -8455,7 +8669,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       name: "content",
       validate: validate,
       placeholder: t('the_problem_is_difficult'),
-      className: styles$1['form-control']
+      className: styles$2['form-control']
     }), React__default.createElement(material.DialogActions, {
       sx: {
         display: 'flex',
@@ -8467,7 +8681,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       sx: {
         color: styles.dark
       },
-      className: styles$1['btn-cancel'],
+      className: styles$2['btn-cancel'],
       onClick: onClose
     }, React__default.createElement(material.Typography, {
       fontWeight: 700,
@@ -8478,7 +8692,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       sx: {
         bgcolor: styles.dark
       },
-      className: styles$1['btn-register'],
+      className: styles$2['btn-register'],
       type: "submit"
     }, React__default.createElement(material.Typography, {
       fontWeight: 700,
@@ -8525,7 +8739,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       padding: '12px'
     }
   }, React__default.createElement(material.Button, {
-    className: styles$1['btn-cancel'],
+    className: styles$2['btn-cancel'],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -8536,7 +8750,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     lineHeight: '16.71px'
   }, t('cancel'))), React__default.createElement(material.Button, {
     variant: "contained",
-    className: styles$1['btn-register'],
+    className: styles$2['btn-register'],
     sx: {
       bgcolor: !(selectedFile !== null && selectedFile !== void 0 && selectedFile.content) ? styles.light + " !important" : styles.dark
     },
@@ -8643,7 +8857,7 @@ var ChatList = function ChatList(_ref) {
   var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(exports.Role.Student);
   return React__default.createElement("ul", {
     ref: listItemRef,
-    className: styles$1["list"] + " " + styles$1["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
+    className: styles$2["list"] + " " + styles$2["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
   }, !(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && React__default.createElement("li", {
     className: "text-muted text-center fst-italic fs-6"
   }, t('no_message')), !!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && filterMessage.map(function (message) {
@@ -8750,7 +8964,7 @@ var InputChat = function InputChat(_ref) {
     color: "#fff",
     size: 30
   }))), React__default.createElement("input", {
-    className: styles$1["input-chat"],
+    className: styles$2["input-chat"],
     style: {
       border: "none"
     },
@@ -8775,7 +8989,7 @@ var InputChat = function InputChat(_ref) {
   }, React__default.createElement(material.Button, {
     variant: "contained",
     fullWidth: true,
-    className: styles$1["btn-send"],
+    className: styles$2["btn-send"],
     sx: {
       bgcolor: isCompleted ? styles.light + " !important" : styles.less_dark
     },
@@ -9158,7 +9372,7 @@ var ChatContainer = function ChatContainer(_ref) {
     container: true
   }, React__default.createElement(ChatHeader, Object.assign({}, chatHeaderProps)), React__default.createElement("div", {
     ref: listRef,
-    className: "flex-grow-1 " + styles$1["body"],
+    className: "flex-grow-1 " + styles$2["body"],
     style: {
       height: "60vh",
       overflowY: "scroll",
@@ -9890,11 +10104,11 @@ var common = {
   white: '#FFFFFF'
 };
 var action$2 = {
-  hover: styles$c.alpha(grey[500], 0.08),
-  selected: styles$c.alpha(grey[500], 0.16),
-  disabled: styles$c.alpha(grey[500], 0.8),
-  disabledBackground: styles$c.alpha(grey[500], 0.24),
-  focus: styles$c.alpha(grey[500], 0.24),
+  hover: styles$d.alpha(grey[500], 0.08),
+  selected: styles$d.alpha(grey[500], 0.16),
+  disabled: styles$d.alpha(grey[500], 0.8),
+  disabledBackground: styles$d.alpha(grey[500], 0.24),
+  focus: styles$d.alpha(grey[500], 0.24),
   hoverOpacity: 0.08,
   disabledOpacity: 0.48
 };
@@ -9914,7 +10128,7 @@ var base = {
   purple: purple,
   dark_purple: dark_purple,
   dark_red: dark_red,
-  divider: styles$c.alpha(grey[500], 0.2),
+  divider: styles$d.alpha(grey[500], 0.2),
   action: action$2
 };
 
@@ -12737,7 +12951,7 @@ var DEFAULT_USER_FILTERS = {
   sortColumnName: exports.UserSortColumn.CreatedAt
 };
 
-var styles$2 = {"avatar":"_2rJkZ","date-picker":"_1iqE2","time-picker":"_20xtc","teacher-selector-wrapper":"_3L1Oj"};
+var styles$3 = {"avatar":"_2rJkZ","date-picker":"_1iqE2","time-picker":"_20xtc","teacher-selector-wrapper":"_3L1Oj"};
 
 var _excluded$7 = ["teachers", "value"];
 var TeacherSelector = function TeacherSelector(_ref) {
@@ -12943,7 +13157,7 @@ var ClassForm = function ClassForm(_ref) {
   }, React__default.createElement(demo.DemoContainer, {
     components: ["DatePicker"]
   }, React__default.createElement(DatePicker.DatePicker, {
-    className: "" + styles$2["date-picker"],
+    className: "" + styles$3["date-picker"],
     format: t("date_format"),
     maxDate: maxDate,
     value: formikProp.values.startDate,
@@ -12967,7 +13181,7 @@ var ClassForm = function ClassForm(_ref) {
   }, React__default.createElement(demo.DemoContainer, {
     components: ["DatePicker"]
   }, React__default.createElement(DatePicker.DatePicker, {
-    className: "" + styles$2["date-picker"],
+    className: "" + styles$3["date-picker"],
     format: t("date_format"),
     minDate: minDate,
     value: formikProp.values.endDate,
@@ -13003,7 +13217,7 @@ var ClassForm = function ClassForm(_ref) {
   }, t("main_teacher"), " ", React__default.createElement("span", {
     className: "text-danger"
   }, "*")), React__default.createElement("div", {
-    className: "" + styles$2["teacher-selector-wrapper"]
+    className: "" + styles$3["teacher-selector-wrapper"]
   }, React__default.createElement(TeacherSelector, {
     value: formikProp.values.mainTeacherId,
     teachers: teachers,
@@ -13063,7 +13277,7 @@ var ClassForm = function ClassForm(_ref) {
           }
         }
       },
-      className: "" + styles$2["time-picker"],
+      className: "" + styles$3["time-picker"],
       onOpen: function onOpen() {
         return setOpen(index + "-startTime");
       },
@@ -13095,7 +13309,7 @@ var ClassForm = function ClassForm(_ref) {
           }
         }
       },
-      className: "" + styles$2["time-picker"],
+      className: "" + styles$3["time-picker"],
       onOpen: function onOpen() {
         return !disabled && setOpen(index + "-endTime");
       },
@@ -14315,25 +14529,7 @@ var defaultSeries = function defaultSeries(t) {
   }];
 };
 
-var styles$3 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","form-label":"_1jRLX","form-control":"_13KE7","form-label-dialog":"_3mXNM","btn-cancel":"_3bqNl","btn-register":"_3GFnT"};
-
-var iconCloseDialog = function iconCloseDialog(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "24" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "25" : _ref$height,
-    color = _ref.color;
-  return React__default.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 24 25",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M13.5909 12.5L18.0441 8.04687C18.2554 7.8359 18.3743 7.54962 18.3745 7.25099C18.3748 6.95237 18.2564 6.66587 18.0455 6.45453C17.8345 6.24319 17.5482 6.12431 17.2496 6.12404C16.951 6.12378 16.6645 6.24215 16.4531 6.45312L12 10.9062L7.54687 6.45312C7.33553 6.24178 7.04888 6.12305 6.75 6.12305C6.45111 6.12305 6.16447 6.24178 5.95312 6.45312C5.74178 6.66447 5.62305 6.95111 5.62305 7.25C5.62305 7.54888 5.74178 7.83553 5.95312 8.04687L10.4062 12.5L5.95312 16.9531C5.74178 17.1645 5.62305 17.4511 5.62305 17.75C5.62305 18.0489 5.74178 18.3355 5.95312 18.5469C6.16447 18.7582 6.45111 18.8769 6.75 18.8769C7.04888 18.8769 7.33553 18.7582 7.54687 18.5469L12 14.0937L16.4531 18.5469C16.6645 18.7582 16.9511 18.8769 17.25 18.8769C17.5489 18.8769 17.8355 18.7582 18.0469 18.5469C18.2582 18.3355 18.3769 18.0489 18.3769 17.75C18.3769 17.4511 18.2582 17.1645 18.0469 16.9531L13.5909 12.5Z",
-    fill: "#202B37"
-  }));
-};
+var styles$4 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","form-label":"_1jRLX","form-control":"_13KE7","form-label-dialog":"_3mXNM","btn-cancel":"_3bqNl","btn-register":"_3GFnT"};
 
 var schema$1 = yup.object().shape({
   content: yup.string().required()
@@ -14375,7 +14571,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
       sx: {
         maxHeight: "unset",
         minWidth: "363px",
-        overflowY: "unset",
+        overflowY: "auto",
         position: "relative",
         bottom: keyboardOpen ? "0" : undefined,
         transition: "top 0.3s ease"
@@ -14421,7 +14617,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
       padding: "24px 24px 40px 24px"
     }, (selectedNote || studentName) && React__default.createElement(material.Stack, null, React__default.createElement("label", {
       htmlFor: "questions",
-      className: styles["form-label"] + "  " + styles$3["form-label-dialog"]
+      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
     }, t("student_name")), React__default.createElement(Typography, {
       sx: {
         fontWeight: 700,
@@ -14430,7 +14626,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
       }
     }, selectedNote ? selectedNote.fullName : studentName)), React__default.createElement(material.Stack, null, React__default.createElement("label", {
       htmlFor: "content-question",
-      className: styles["form-label"] + "  " + styles$3["form-label-dialog"]
+      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
     }, t("incorrect_answer_note_contents")), React__default.createElement(material.Box, {
       position: "relative",
       display: "flex",
@@ -14458,7 +14654,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React__default.createElement(MButton, {
-      className: styles$3["btn-cancel"],
+      className: styles$4["btn-cancel"],
       onClick: onClose
     }, React__default.createElement(Typography, {
       sx: {
@@ -14472,7 +14668,7 @@ var ClassNoteDialog = function ClassNoteDialog(_ref) {
       sx: {
         bgcolor: styles.dark
       },
-      className: styles$3["btn-register"],
+      className: styles$4["btn-register"],
       type: "submit",
       disabled: !values.content.trim().length
     }, React__default.createElement(Typography, {
@@ -14533,7 +14729,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
       sx: {
         maxHeight: "unset",
         minWidth: "363px",
-        overflowY: "unset",
+        overflowY: "auto",
         position: "relative",
         bottom: keyboardOpen ? "0" : undefined,
         transition: "top 0.3s ease"
@@ -14581,7 +14777,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
       padding: "24px 24px 40px 24px"
     }, React__default.createElement(material.Stack, null, React__default.createElement("label", {
       htmlFor: "questions",
-      className: styles["form-label"] + "  " + styles$3["form-label-dialog"]
+      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
     }, t("problem_number")), selectedQuestion || selectedNote ? React__default.createElement(Typography, {
       sx: {
         fontWeight: 700,
@@ -14608,7 +14804,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
       }
     })), React__default.createElement(material.Stack, null, React__default.createElement("label", {
       htmlFor: "content-question",
-      className: styles["form-label"] + "  " + styles$3["form-label-dialog"]
+      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
     }, t("incorrect_answer_note_contents")), React__default.createElement(material.Box, {
       position: "relative",
       display: "flex",
@@ -14637,7 +14833,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React__default.createElement(MButton, {
-      className: styles$3["btn-cancel"],
+      className: styles$4["btn-cancel"],
       onClick: onClose
     }, React__default.createElement(Typography, {
       sx: {
@@ -14651,7 +14847,7 @@ var ExamNoteDialog = function ExamNoteDialog(_ref) {
       sx: {
         bgcolor: styles.dark
       },
-      className: styles$3["btn-register"],
+      className: styles$4["btn-register"],
       type: "submit",
       disabled: !values.content.trim().length
     }, React__default.createElement(Typography, {
@@ -17008,7 +17204,7 @@ Object.defineProperty(exports,"__esModule",{value:!0});var _typeof="function"==t
 
 var ReactApexChart = unwrapExports(reactApexcharts_min);
 
-var styles$4 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","titleBox":"_1dveO","title":"_mxRxf","point":"_2fD-F","buttonGroup":"_2DGl3","btnFeedback":"_xGW1x","btnTerminate":"_3mLu2","myanswer":"_eDBpS","titleMyAnswer1":"_2fMq3","titleMyAnswer2":"_3gEYh","contentMyAnswer":"_2K_sx","myAnswerItem":"_2qiLh","time":"_6TCOK","timeCol":"_hmseC","answer-response":"_3GfJt","answer-response-0":"_3ut64","answer-response-1":"_2VtpD","answer-response-2":"_58lQU","answer-response-3":"_1ucMY","answer-response-4":"_1qkxy","overall-response-1":"_1AeGu","overall-response-2":"_1xTB0","overall-response-3":"_3Yu_5","answerCorrect":"_2jIeT","answerIncorrect":"_to2v0","answerNograss":"_1JSte","answerEasy":"_2_uTU","answerDiscrimination":"_1DBoA","answerTrap":"_1q3tD","answerNoTime":"_3iItu","questionOrder":"_1fNkS","myTimeLabel":"_1Z_F3","myPoolTime":"_4KwG0","topTimeLabel":"_245H-","topTime":"_3tZqw","meanTimeLabel":"_PlPLY","meanTime":"_12a7R","compareChart":"_3MW16","prevChart":"_1fNkb","chart":"_3K4oY","nextChart":"_3YKBp","titleChart":"_13BVP","titleCompareGrass":"_o1txm","tableCompareGrass":"_bT5nf","thcolumn1":"_3Umg0","tdcolumn1":"_3dRMF","tdcolumn3":"_2tcBP","classification":"_1AFeb","wrapperProblem":"_oTqG7","titleProblem":"_35eIx","titleProblemClose":"_3t4HO","titleTrickyProblem":"_1-oxK","wrongQuestions":"_2dpMR","question":"_1lSOX","assignedQuestions":"_1ONUt","wrapperContent":"_nPoR0","content":"_2zmZn","contentColumn1":"_334SY","span1":"_3Lf-U","span2":"_ZpMot","contentColumn2":"_16P3l","duration":"_1kT28","topDuration":"_1fVRi","overallCorrectRate":"_3jLGe","answer":"_VsZ0K","contentVulnerable":"_QxKMy","wrappContentProblem":"_nnqpW","contentProblem":"_3Z1nV","labelProblem":"_36Xpx","name":"_3ZJQW","percent":"_2J3MK","slider":"_1MPdO","track":"_3CV_y","noData":"__g-ff","loading":"_3j485","table-responsive":"_2O6RX","form-label":"_1RYOQ","form-control":"_3VRVT","form-label-dialog":"_3oCSh","btn-cancel":"_3USKq","btn-register":"_3y_iD","pdfBtnBox":"_3xZHo","pdfBtn":"_1DtWq","form-select":"_1a_vw","loader":"_2uC7T","dot":"_Xz-Mr","bounce":"_3THgz"};
+var styles$5 = {"lighter":"#F0FFF6","light":"#89F0B2","less_dark":"#3DC674","dark":"#349056","darker":"#18442A","gray_50":"#FBFBF9","gray_100":"#EAEAE5","gray_300":"#D0D0C8","gray_500":"#9A9A98","gray_700":"#5D5D5B","gray_900":"#363634","red_900":"#DB4D4D","green_support_900":"#3ACB46","yellow_900":"#FEAF06","purple_900":"#C3099A","titleBox":"_1dveO","title":"_mxRxf","point":"_2fD-F","buttonGroup":"_2DGl3","btnFeedback":"_xGW1x","btnTerminate":"_3mLu2","myanswer":"_eDBpS","titleMyAnswer1":"_2fMq3","titleMyAnswer2":"_3gEYh","contentMyAnswer":"_2K_sx","myAnswerItem":"_2qiLh","time":"_6TCOK","timeCol":"_hmseC","answer-response":"_3GfJt","answer-response-0":"_3ut64","answer-response-1":"_2VtpD","answer-response-2":"_58lQU","answer-response-3":"_1ucMY","answer-response-4":"_1qkxy","overall-response-1":"_1AeGu","overall-response-2":"_1xTB0","overall-response-3":"_3Yu_5","answerCorrect":"_2jIeT","answerIncorrect":"_to2v0","answerNograss":"_1JSte","answerEasy":"_2_uTU","answerDiscrimination":"_1DBoA","answerTrap":"_1q3tD","answerNoTime":"_3iItu","questionOrder":"_1fNkS","myTimeLabel":"_1Z_F3","myPoolTime":"_4KwG0","topTimeLabel":"_245H-","topTime":"_3tZqw","meanTimeLabel":"_PlPLY","meanTime":"_12a7R","compareChart":"_3MW16","prevChart":"_1fNkb","chart":"_3K4oY","nextChart":"_3YKBp","titleChart":"_13BVP","titleCompareGrass":"_o1txm","tableCompareGrass":"_bT5nf","thcolumn1":"_3Umg0","tdcolumn1":"_3dRMF","tdcolumn3":"_2tcBP","classification":"_1AFeb","wrapperProblem":"_oTqG7","titleProblem":"_35eIx","titleProblemClose":"_3t4HO","titleTrickyProblem":"_1-oxK","wrongQuestions":"_2dpMR","question":"_1lSOX","assignedQuestions":"_1ONUt","wrapperContent":"_nPoR0","content":"_2zmZn","contentColumn1":"_334SY","span1":"_3Lf-U","span2":"_ZpMot","contentColumn2":"_16P3l","duration":"_1kT28","topDuration":"_1fVRi","overallCorrectRate":"_3jLGe","answer":"_VsZ0K","contentVulnerable":"_QxKMy","wrappContentProblem":"_nnqpW","contentProblem":"_3Z1nV","labelProblem":"_36Xpx","name":"_3ZJQW","percent":"_2J3MK","slider":"_1MPdO","track":"_3CV_y","noData":"__g-ff","loading":"_3j485","table-responsive":"_2O6RX","form-label":"_1RYOQ","form-control":"_3VRVT","form-label-dialog":"_3oCSh","btn-cancel":"_3USKq","btn-register":"_3y_iD","pdfBtnBox":"_3xZHo","pdfBtn":"_1DtWq","form-select":"_1a_vw","loader":"_2uC7T","dot":"_Xz-Mr","bounce":"_3THgz"};
 
 var printStyles = {"page-break":"_35kyG","print-exact-color":"_1PFgl","avoid-break-inside":"_3rPGh"};
 
@@ -17177,7 +17373,7 @@ var AnswerItem = function AnswerItem(_ref) {
     },
     key: data.id
   }, React__default.createElement("div", {
-    className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+    className: styles$5["myAnswerItem"] + " " + styles["noGutters"]
   }, React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17187,7 +17383,7 @@ var AnswerItem = function AnswerItem(_ref) {
       padding: "5px 8px"
     }
   }, data.isStar ? React__default.createElement(iconStarQuestion, null) : React__default.createElement(iconNoStarQuestion, null), React__default.createElement("span", {
-    className: styles$4["questionOrder"]
+    className: styles$5["questionOrder"]
   }, t("number_question", {
     number: data.questionOrder + 1
   }))), React__default.createElement("div", {
@@ -17198,11 +17394,11 @@ var AnswerItem = function AnswerItem(_ref) {
       gap: "4px"
     }
   }, data.isCorrect && data.selectedAnswers !== "" && React__default.createElement(React.Fragment, null, React__default.createElement(iconCorrectAnswer, null), React__default.createElement("span", {
-    className: styles$4["answerCorrect"]
+    className: styles$5["answerCorrect"]
   }, t("correct"))), !data.isCorrect && data.selectedAnswers !== "" && React__default.createElement(React.Fragment, null, React__default.createElement(iconCorrectAnswer$1, null), React__default.createElement("span", {
-    className: styles$4["answerIncorrect"]
+    className: styles$5["answerIncorrect"]
   }, t("incorrect"))), data.selectedAnswers === "" && React__default.createElement(React.Fragment, null, React__default.createElement(iconNoGrass, null), React__default.createElement("span", {
-    className: styles$4["answerNograss"]
+    className: styles$5["answerNograss"]
   }, t("no_solution")))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17213,12 +17409,12 @@ var AnswerItem = function AnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$5["answer-response"] + " " + styles$5["answer-response-" + data.answerResponseSignal]
   }, formatTimeSecond(Math.round(data.duration), t)) : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, t("no_time"))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17229,13 +17425,13 @@ var AnswerItem = function AnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$5["answer-response"] + " " + styles$5["answer-response-" + data.answerResponseSignal]
   }, formatTimeDiff(data.duration, data.topDuration, t)) : React__default.createElement("p", {
     style: {
       margin: 0,
       textAlign: "center"
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, "-")), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -17246,12 +17442,12 @@ var AnswerItem = function AnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$4)
+    className: styles$5["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$5)
   }, data.overallCorrectRate.toFixed(2) + "%") : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, t("no_time"))), isStudent && !isLearningSpace && React__default.createElement(material.Box, {
     className: styles["custom-col-2"]
   }, openContextMenu ? React__default.createElement(material.ClickAwayListener, {
@@ -17318,7 +17514,7 @@ var MyAnswer = function MyAnswer(_ref) {
     }));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["myanswer"]
+    className: "" + styles$5["myanswer"]
   }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
     return React__default.createElement("div", {
       key: item.category.id
@@ -17328,7 +17524,7 @@ var MyAnswer = function MyAnswer(_ref) {
       bgcolor: "#F9FAFB",
       flexDirection: "row",
       padding: "12px",
-      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+      className: styles$5["myAnswerItem"] + " " + styles["noGutters"]
     }, React__default.createElement("div", {
       className: styles["custom-col-2"],
       style: {
@@ -17407,7 +17603,7 @@ var MyAnswer = function MyAnswer(_ref) {
         alignItems: "center"
       }
     }, t("total_correct_rate")))), React__default.createElement("div", {
-      className: styles$4["titleMyAnswer2"]
+      className: styles$5["titleMyAnswer2"]
     }, React__default.createElement(material.Typography, {
       sx: {
         color: "#97A1AF",
@@ -17420,7 +17616,7 @@ var MyAnswer = function MyAnswer(_ref) {
         fontWeight: 700
       }
     }, item.category.name))), React__default.createElement("div", {
-      className: styles$4["contentMyAnswer"]
+      className: styles$5["contentMyAnswer"]
     }, React__default.createElement(ListView, {
       data: item.questions,
       render: function render(question, index) {
@@ -17536,7 +17732,7 @@ var CompareGrass = function CompareGrass(_ref2) {
           borderTop: index < effectSize.length - 1 ? "1px solid transparent" : undefined
         }
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"]
+        className: styles$5["tdcolumn1"]
       }, t("problem"), " ", item.questionOrder + 1), React__default.createElement("td", {
         style: {
           textAlign: "center",
@@ -17544,9 +17740,9 @@ var CompareGrass = function CompareGrass(_ref2) {
           maxWidth: "30%"
         }
       }, typeof item.correctAnswers === "string" ? renderAnswer(item.questionAnswerType, item.correctAnswers) : renderTextbookAnswer(item.questionAnswerType, item.correctAnswers, item.correctTextualAnswers, true)), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
-          color: item.isCorrect ? styles$4.green_support_900 : styles$4.red_900,
+          color: item.isCorrect ? styles$5.green_support_900 : styles$5.red_900,
           maxWidth: "30%"
         }
       }, typeof item.selectedAnswers === "string" ? renderAnswer(item.questionAnswerType, item.selectedAnswers) : renderTextbookAnswer(item.questionAnswerType, item.selectedAnswers, item.textualAnswers)), React__default.createElement("td", {
@@ -17557,7 +17753,7 @@ var CompareGrass = function CompareGrass(_ref2) {
       }, renderAnswer(item.questionAnswerType, item.mostSelectedAnswers)), React__default.createElement("td", {
         className: "" + printStyles["avoid-break-inside"]
       }, React__default.createElement("div", {
-        className: styles$4["classification"] + " " + printStyles["avoid-break-inside"]
+        className: styles$5["classification"] + " " + printStyles["avoid-break-inside"]
       }, item.problemCategories.map(function (problem, index) {
         return React__default.createElement(material.Stack, {
           flexDirection: "row",
@@ -17600,11 +17796,11 @@ var CompareGrass = function CompareGrass(_ref2) {
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["compareGrass"]
+    className: "" + styles$5["compareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, React__default.createElement(material.Table, {
     style: {
       width: "100%"
@@ -17616,7 +17812,7 @@ var CompareGrass = function CompareGrass(_ref2) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -17697,37 +17893,37 @@ var TrickyProblem = function TrickyProblem(_ref) {
   });
   var renderProblems = function renderProblems() {
     return React__default.createElement(React.Fragment, null, React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
     }, React__default.createElement(iconX, null), React__default.createElement("span", null, t("incorrect_problem_among_the_starred_problems"))), React__default.createElement("div", {
-      className: styles$4["wrongQuestions"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["wrongQuestions"] + " " + printStyles["avoid-break-inside"]
     }, !!(inCorrectQuestions !== null && inCorrectQuestions !== void 0 && inCorrectQuestions.length) && inCorrectQuestions.map(function (question) {
       return React__default.createElement("span", {
         key: question.id,
-        className: styles$4["question"]
+        className: styles$5["question"]
       }, t("number_question", {
         number: question.questionOrder + 1
       }));
     }), !(data !== null && data !== void 0 && data.questions.length) && React__default.createElement("div", {
-      className: styles$4["noData"]
+      className: styles$5["noData"]
     }, t("no_data"))), React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
     }, React__default.createElement(iconAssignedQuestions, null), React__default.createElement("span", null, t("correct_problem_among_the_starred_problems"))), React__default.createElement("div", {
-      className: styles$4["assignedQuestions"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["assignedQuestions"] + " " + printStyles["avoid-break-inside"]
     }, !!(correctQuestions !== null && correctQuestions !== void 0 && correctQuestions.length) && correctQuestions.map(function (question) {
       return React__default.createElement("div", {
         key: question.id,
-        className: styles$4["question"]
+        className: styles$5["question"]
       }, t("number_question", {
         number: question.questionOrder + 1
       }));
     }), !(data !== null && data !== void 0 && data.questions.length) && React__default.createElement("div", {
-      className: styles$4["noData"]
+      className: styles$5["noData"]
     }, t("no_data"))));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
@@ -17739,10 +17935,10 @@ var TrickyProblem = function TrickyProblem(_ref) {
     }
   }, t("tricky_problems")), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, renderProblems()));
 };
 
@@ -17768,9 +17964,9 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
           borderBottom: "1px solid #e4e7ec"
         } : {}
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$5["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -17779,22 +17975,22 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
       })), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
       }, item.duration ? formatTimeSecond(item.duration, t) : ""), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
       }, item.topDuration ? formatTimeSecond(item.topDuration, t) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: isBetter ? styles$4.dark : styles$4.red_900,
+          color: isBetter ? styles$5.dark : styles$5.red_900,
           fontSize: "13px",
           fontWeight: 600
         }
@@ -17810,15 +18006,15 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
       return React__default.createElement(material.Stack, {
         direction: "row",
         flexWrap: "nowrap",
-        className: styles$4["content"] + " " + printStyles["avoid-break-inside"],
+        className: styles$5["content"] + " " + printStyles["avoid-break-inside"],
         key: item.id
       }, React__default.createElement(material.Box, {
         width: "160px",
-        className: styles$4["contentColumn1"]
+        className: styles$5["contentColumn1"]
       }, React__default.createElement(material.Stack, null, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("problem")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("number_question", {
         number: item.questionOrder + 1
       }))), (category === null || category === void 0 ? void 0 : category.name) && React__default.createElement(material.Typography, {
@@ -17829,22 +18025,22 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
           textAlign: "center"
         }
       }, category.name))), React__default.createElement(material.Box, {
-        className: styles$4["contentColumn2"]
+        className: styles$5["contentColumn2"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("my_time")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("top_time"))), React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["duration"]
+        className: styles$5["duration"]
       }, formatTimeSecond(item.duration, t)), React__default.createElement("span", {
-        className: styles$4["topDuration"]
+        className: styles$5["topDuration"]
       }, formatTimeSecond(item.topDuration, t)))));
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
@@ -17860,20 +18056,20 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
     }
   }, t("problems_that_took_a_long_time")), React__default.createElement(material.Typography, {
     sx: {
-      color: styles$4.gray_300,
+      color: styles$5.gray_300,
       fontSize: "11px",
       fontWeight: 500
     }
   }, t("protracted_problem_detail"))), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, data.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -17885,7 +18081,7 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -17899,7 +18095,7 @@ var ProtractedProblem = function ProtractedProblem(_ref) {
       textAlign: "center"
     }
   }, t("time_comparison")))), React__default.createElement("tbody", null, isMyStoryStudent ? renderTableBody(data) : renderQuestions(data))))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -17971,39 +18167,39 @@ var Vulnerable = function Vulnerable(_ref) {
           borderBottom: index < data.length - 1 ? "1px solid #e4e7ec" : undefined
         }
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$5["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, React__default.createElement(material.Typography, {
-        color: styles$4.gray_900,
+        color: styles$5.gray_900,
         fontSize: "13px",
         fontWeight: 600
       }, t("problem") + " " + (item.questionOrder + 1))), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.dark,
+          color: styles$5.dark,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.overallCorrectRate.toFixed(2) ? item.overallCorrectRate.toFixed(2) + "%" : ""), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
-          color: styles$4.red_900,
+          color: styles$5.red_900,
           fontSize: "13px",
           fontWeight: 500
         }
       }, typeof item.selectedAnswers === "string" ? renderAnswer(item.questionAnswerType, item.selectedAnswers) : renderTextbookAnswer(item.questionAnswerType, item.selectedAnswers, item.textualAnswers)), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700
+          color: styles$5.gray_700
         }
       }, typeof item.correctAnswers === "string" ? renderAnswer(item.questionAnswerType, item.correctAnswers) : renderTextbookAnswer(item.questionAnswerType, item.correctAnswers, item.correctTextualAnswers, true)), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700
+          color: styles$5.gray_700
         }
       }, item.category.name ? item.category.name : ""));
     });
@@ -18014,18 +18210,18 @@ var Vulnerable = function Vulnerable(_ref) {
       return React__default.createElement(material.Stack, {
         direction: "row",
         flexWrap: "nowrap",
-        className: styles$4["content"] + " " + printStyles["avoid-break-inside"],
+        className: styles$5["content"] + " " + printStyles["avoid-break-inside"],
         key: question.id
       }, React__default.createElement(material.Box, {
         width: "160px",
-        className: styles$4["contentColumn1"]
+        className: styles$5["contentColumn1"]
       }, React__default.createElement(material.Stack, {
         direction: "column",
         gap: 1
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("problem_number")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("number_question", {
         number: question.questionOrder + 1
       }))), ((_question$category = question.category) === null || _question$category === void 0 ? void 0 : _question$category.name) && React__default.createElement(material.Typography, {
@@ -18036,18 +18232,18 @@ var Vulnerable = function Vulnerable(_ref) {
           textAlign: "center"
         }
       }, question.category.name))), React__default.createElement(material.Box, {
-        className: styles$4["contentColumn2"],
+        className: styles$5["contentColumn2"],
         sx: {
           alignItems: "center"
         }
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("total_correct_rate")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("my_wrong_answer"))), React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["overallCorrectRate"]
+        className: styles$5["overallCorrectRate"]
       }, question.overallCorrectRate.toFixed(2), "%"), React__default.createElement("span", {
-        className: styles$4["answer"]
+        className: styles$5["answer"]
       }, typeof question.selectedAnswers === "string" ? renderAnswer(question.questionAnswerType, question.selectedAnswers) : renderTextbookAnswer(question.questionAnswerType, question.selectedAnswers, question.textualAnswers), " ", t("answer"), " ", typeof question.correctAnswers === "string" ? renderAnswer(question.questionAnswerType, question.correctAnswers) : renderTextbookAnswer(question.questionAnswerType, question.correctAnswers, question.correctTextualAnswers, true)))));
     });
   };
@@ -18055,9 +18251,9 @@ var Vulnerable = function Vulnerable(_ref) {
     changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: handleToggle
   }, React__default.createElement(material.Stack, {
     flexDirection: "row",
@@ -18071,20 +18267,20 @@ var Vulnerable = function Vulnerable(_ref) {
     }
   }, t("issues_vulnerable")), React__default.createElement(material.Typography, {
     sx: {
-      color: styles$4.gray_300,
+      color: styles$5.gray_300,
       fontSize: "11px",
       fontWeight: 500
     }
   }, t("vulnerable_detail"))), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, incorrectQuestions.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -18096,7 +18292,7 @@ var Vulnerable = function Vulnerable(_ref) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -18114,7 +18310,7 @@ var Vulnerable = function Vulnerable(_ref) {
       textAlign: "center"
     }
   }, t("_category")))), React__default.createElement("tbody", null, renderTableBody(incorrectQuestions))), !isMyStoryStudent && renderQuestions(incorrectQuestions))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -18165,24 +18361,24 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
           borderBottom: index < data.length - 1 ? "1px solid #e4e7ec" : undefined
         }
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$5["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.name), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.percentageAmongStudents.toFixed(2), "%"), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18191,7 +18387,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18200,7 +18396,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18213,26 +18409,26 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
         left: item.percentageAmongStudents + "%"
       };
       return React__default.createElement("div", {
-        className: styles$4["contentProblem"] + " " + printStyles["avoid-break-inside"],
+        className: styles$5["contentProblem"] + " " + printStyles["avoid-break-inside"],
         key: item.id
       }, React__default.createElement("div", {
-        className: styles$4["labelProblem"]
+        className: styles$5["labelProblem"]
       }, React__default.createElement("span", {
-        className: styles$4["name"]
+        className: styles$5["name"]
       }, item.name), React__default.createElement("div", {
-        className: styles$4["percent"]
+        className: styles$5["percent"]
       }, React__default.createElement("span", null, item.percentageAmongStudents.toFixed(2), "%"), React__default.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, t("problems")))), React__default.createElement("div", {
-        className: styles$4["slider"]
+        className: styles$5["slider"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["track"],
+        className: styles$5["track"],
         style: trackStyle
       }))));
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : ProblemKey.GradesByTerritory);
     }
@@ -18244,14 +18440,14 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
     }
   }, t("grades_by_area")), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, formattedData.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -18263,7 +18459,7 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("categories")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -18281,197 +18477,40 @@ var GradesByTerritory = function GradesByTerritory(_ref) {
       textAlign: "center"
     }
   }, t("total_solve_time")))), React__default.createElement("tbody", null, renderTableBody(formattedData))), !isMyStoryStudent && renderCategories(formattedData))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
-var iconWarning = function iconWarning(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "17" : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "16" : _ref$height,
-    color = _ref.color;
-  return React__default.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 17 16",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("path", {
-    d: "M14.5335 12.4712L9.20754 2.58062C8.83004 1.87937 7.82441 1.87937 7.4466 2.58062L2.12097 12.4712C2.03901 12.6235 1.99792 12.7944 2.00171 12.9672C2.00549 13.1401 2.05404 13.309 2.14259 13.4575C2.23115 13.606 2.3567 13.729 2.50698 13.8145C2.65726 13.9 2.82714 13.9451 3.00004 13.9453H13.6529C13.8259 13.9453 13.996 13.9005 14.1465 13.8151C14.2969 13.7297 14.4227 13.6067 14.5115 13.4582C14.6002 13.3096 14.6489 13.1406 14.6527 12.9676C14.6566 12.7946 14.6155 12.6236 14.5335 12.4712ZM8.32722 12.4141C8.20361 12.4141 8.08277 12.3774 7.97999 12.3087C7.87721 12.2401 7.7971 12.1424 7.7498 12.0282C7.7025 11.914 7.69012 11.7884 7.71423 11.6671C7.73835 11.5459 7.79787 11.4345 7.88528 11.3471C7.97269 11.2597 8.08405 11.2002 8.20529 11.1761C8.32653 11.152 8.4522 11.1643 8.5664 11.2116C8.6806 11.2589 8.77822 11.3391 8.84689 11.4418C8.91557 11.5446 8.95222 11.6654 8.95222 11.7891C8.95222 11.8711 8.93606 11.9524 8.90465 12.0282C8.87324 12.1041 8.8272 12.173 8.76917 12.231C8.71113 12.289 8.64223 12.3351 8.5664 12.3665C8.49057 12.3979 8.4093 12.4141 8.32722 12.4141ZM9.00597 6.12813L8.8266 9.94063C8.8266 10.0732 8.77392 10.2004 8.68015 10.2942C8.58638 10.3879 8.45921 10.4406 8.3266 10.4406C8.19399 10.4406 8.06681 10.3879 7.97305 10.2942C7.87928 10.2004 7.8266 10.0732 7.8266 9.94063L7.64722 6.12969C7.64319 6.03862 7.65754 5.94768 7.6894 5.86227C7.72127 5.77687 7.77 5.69875 7.8327 5.63259C7.8954 5.56642 7.97078 5.51355 8.05434 5.47713C8.13791 5.44072 8.22795 5.4215 8.3191 5.42063H8.32566C8.41743 5.42058 8.50826 5.43912 8.59267 5.47515C8.67708 5.51117 8.75331 5.56392 8.81677 5.63021C8.88023 5.6965 8.92961 5.77497 8.96191 5.86087C8.99421 5.94676 9.00878 6.03832 9.00472 6.13L9.00597 6.12813Z",
-    fill: "#DB4D4D"
-  }));
-};
-
-var schema$3 = yup.object().shape({
-  content: yup.string().required()
-});
 function CreateNewQuestionDialog(_ref) {
-  var handleCreateQuestion = _ref.handleCreateQuestion,
+  var _handleCreateQuestion = _ref.handleCreateQuestion,
     openCreateQuestionDialog = _ref.openCreateQuestionDialog,
     onCloseCreateQuestion = _ref.onCloseCreateQuestion,
     studentTextbookId = _ref.studentTextbookId,
     examSessionId = _ref.examSessionId,
     selectedQuestion = _ref.selectedQuestion,
     questionOptions = _ref.questionOptions;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  var _useState = React.useState(false),
-    keyboardOpen = _useState[0],
-    setKeyboardOpen = _useState[1];
-  React.useEffect(function () {
-    var handleResize = function handleResize() {
-      if (window.innerHeight < window.outerHeight) {
-        setKeyboardOpen(true);
-      } else {
-        setKeyboardOpen(false);
-      }
-    };
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return function () {
-      return window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  return React__default.createElement(material.Dialog, {
-    onClose: onCloseCreateQuestion,
-    open: openCreateQuestionDialog,
-    PaperProps: {
-      sx: {
-        minWidth: "363px",
-        overflowY: "unset",
-        position: "relative",
-        bottom: keyboardOpen ? "0" : undefined,
-        transition: "top 0.3s ease"
-      }
-    }
-  }, React__default.createElement(DialogTitle, {
-    id: "customized-dialog-title"
-  }, React__default.createElement(Typography, {
-    fontWeight: 700,
-    fontSize: "16px",
-    lineHeight: "19.09px",
-    color: "#202B37"
-  }, t("ask_a_question"))), React__default.createElement(IconButton, {
-    "aria-label": "close",
-    sx: {
-      position: "absolute",
-      right: 8,
-      top: 8,
-      color: function color(theme) {
-        return theme.palette.grey[500];
-      }
-    },
-    onClick: onCloseCreateQuestion
-  }, React__default.createElement(iconCloseDialog, null)), React__default.createElement(formik.Formik, {
-    initialValues: {
-      content: "",
-      questionId: (selectedQuestion === null || selectedQuestion === void 0 ? void 0 : selectedQuestion.id) || 0
-    },
-    validationSchema: schema$3,
-    onSubmit: function onSubmit(values) {
-      handleCreateQuestion(_extends({}, values, {
+  var schema = yup.object().shape({
+    content: yup.string().required()
+  });
+  var initialValues = {
+    content: "",
+    questionId: (selectedQuestion === null || selectedQuestion === void 0 ? void 0 : selectedQuestion.id) || 0
+  };
+  return React__default.createElement(CommonCreateNewQuestionDialog, {
+    handleCreateQuestion: function handleCreateQuestion(values) {
+      return _handleCreateQuestion(_extends({}, values, {
         examSessionId: examSessionId,
         studentTextbookId: studentTextbookId
       }));
-    }
-  }, function (_ref2) {
-    var values = _ref2.values,
-      errors = _ref2.errors,
-      setFieldValue = _ref2.setFieldValue;
-    return React__default.createElement(formik.Form, null, React__default.createElement(DialogContent, {
-      sx: {
-        padding: 0,
-        overflowY: "auto"
-      }
-    }, React__default.createElement(material.Box, {
-      display: "flex",
-      flexDirection: "column",
-      gap: "8px",
-      padding: "24px 24px 40px 24px"
-    }, React__default.createElement(material.Stack, null, React__default.createElement("label", {
-      htmlFor: "questions",
-      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
-    }, t("questions_to_ask")), React__default.createElement(formik.Field, {
-      id: "questions",
-      name: "questionId",
-      render: function render(_ref3) {
-        var field = _ref3.field;
-        return React__default.createElement(CustomSelect, Object.assign({}, field, {
-          id: "questions",
-          menuPlacement: "bottom",
-          options: questionOptions,
-          onChange: function onChange(_ref4) {
-            var value = _ref4.value;
-            return setFieldValue("questionId", value);
-          },
-          isClearable: false
-        }));
-      }
-    })), React__default.createElement(material.Stack, null, React__default.createElement("label", {
-      htmlFor: "content-question",
-      className: styles["form-label"] + "  " + styles$4["form-label-dialog"]
-    }, t("question_content")), React__default.createElement(material.Box, {
-      position: "relative",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center"
-    }, React__default.createElement(formik.Field, {
-      as: "textarea",
-      rows: 3,
-      id: "content-question",
-      style: {
-        paddingRight: "40px"
-      },
-      name: "content",
-      placeholder: t("the_problem_is_difficult"),
-      className: styles["form-control"]
-    }), (errors === null || errors === void 0 ? void 0 : errors.content) && React__default.createElement(material.Box, {
-      position: "absolute",
-      right: 0,
-      padding: "0 12px",
-      display: "flex",
-      alignItems: "center"
-    }, React__default.createElement(iconWarning, null))), React__default.createElement(material.Box, {
-      marginBottom: "4px"
-    }), React__default.createElement(Typography, {
-      fontWeight: 500,
-      fontSize: "10px",
-      lineHeight: "11.93px",
-      color: !(errors !== null && errors !== void 0 && errors.content) ? "#97A1AF" : styles$4.red_900
-    }, !(errors !== null && errors !== void 0 && errors.content) ? t("your_questions_will_be_sent_to_the_counselor") : t("please_enter_your_question"))))), React__default.createElement(DialogActions, {
-      sx: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: "12px",
-        borderTop: "1px solid #CED2DA"
-      }
-    }, React__default.createElement(MButton, {
-      className: styles$4["btn-cancel"],
-      onClick: onCloseCreateQuestion
-    }, React__default.createElement(Typography, {
-      sx: {
-        color: styles.dark + " !important"
-      },
-      fontWeight: 700,
-      fontSize: "14px",
-      lineHeight: "16.71px"
-    }, t("cancel"))), React__default.createElement(MButton, {
-      variant: "contained",
-      sx: {
-        bgcolor: styles.dark
-      },
-      className: styles$4["btn-register"],
-      type: "submit",
-      disabled: !values.content.trim().length
-    }, React__default.createElement(Typography, {
-      fontWeight: 700,
-      fontSize: "14px",
-      lineHeight: "16.71px",
-      color: "#FFFFFF"
-    }, t("registration")))));
-  }));
+    },
+    nameContent: "content",
+    nameQuestion: "questionId",
+    openDialog: openCreateQuestionDialog,
+    onClose: onCloseCreateQuestion,
+    options: questionOptions,
+    schema: schema,
+    initialValues: initialValues
+  });
 }
 
 var _excluded$8 = ["children", "value", "index"];
@@ -18518,18 +18557,18 @@ var TimeOrderChart = function TimeOrderChart(_ref) {
       color: "#414E62"
     }
   }, t("article_number"), " ", timelyOrderQuestion.article), React__default.createElement("div", {
-    className: styles$4["compareChart"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["compareChart"] + " " + printStyles["avoid-break-inside"]
   }, React__default.createElement("div", {
-    className: "" + styles$4["prevChart"]
+    className: "" + styles$5["prevChart"]
   }), React__default.createElement("div", {
-    className: styles$4["chart"] + " sr-line-chart"
+    className: styles$5["chart"] + " sr-line-chart"
   }, React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
     ref: chartRef,
     height: 389,
     options: chartOptions,
     series: series
   }))), React__default.createElement("div", {
-    className: "" + styles$4["nextChart"]
+    className: "" + styles$5["nextChart"]
   })));
 };
 
@@ -18568,7 +18607,7 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     },
     key: data.id
   }, React__default.createElement("div", {
-    className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+    className: styles$5["myAnswerItem"] + " " + styles["noGutters"]
   }, React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18578,7 +18617,7 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
       padding: "5px 8px"
     }
   }, data.isStar ? React__default.createElement(iconStarQuestion, null) : React__default.createElement(iconNoStarQuestion, null), React__default.createElement("span", {
-    className: styles$4["questionOrder"]
+    className: styles$5["questionOrder"]
   }, t("number_question", {
     number: data.questionOrder + 1
   }))), React__default.createElement("div", {
@@ -18589,11 +18628,11 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
       gap: "4px"
     }
   }, data.isCorrect && (!!((_data$selectedAnswers = data.selectedAnswers) !== null && _data$selectedAnswers !== void 0 && _data$selectedAnswers.length) || !!((_data$textualAnswers = data.textualAnswers) !== null && _data$textualAnswers !== void 0 && _data$textualAnswers.length)) && React__default.createElement(React.Fragment, null, React__default.createElement(iconCorrectAnswer, null), React__default.createElement("span", {
-    className: styles$4["answerCorrect"]
+    className: styles$5["answerCorrect"]
   }, t("correct"))), !data.isCorrect && (!!((_data$selectedAnswers2 = data.selectedAnswers) !== null && _data$selectedAnswers2 !== void 0 && _data$selectedAnswers2.length) || !!((_data$textualAnswers2 = data.textualAnswers) !== null && _data$textualAnswers2 !== void 0 && _data$textualAnswers2.length)) && React__default.createElement(React.Fragment, null, React__default.createElement(iconCorrectAnswer$1, null), React__default.createElement("span", {
-    className: styles$4["answerIncorrect"]
+    className: styles$5["answerIncorrect"]
   }, t("incorrect"))), !((_data$selectedAnswers3 = data.selectedAnswers) !== null && _data$selectedAnswers3 !== void 0 && _data$selectedAnswers3.length) && !((_data$textualAnswers3 = data.textualAnswers) !== null && _data$textualAnswers3 !== void 0 && _data$textualAnswers3.length) && React__default.createElement(React.Fragment, null, React__default.createElement(iconNoGrass, null), React__default.createElement("span", {
-    className: styles$4["answerNograss"]
+    className: styles$5["answerNograss"]
   }, t("no_solution")))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18604,12 +18643,12 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$5["answer-response"] + " " + styles$5["answer-response-" + data.answerResponseSignal]
   }, formatTimeSecond(Math.round(data.duration), t)) : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, t("no_time"))), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18620,13 +18659,13 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + styles$4["answer-response-" + data.answerResponseSignal]
+    className: styles$5["answer-response"] + " " + styles$5["answer-response-" + data.answerResponseSignal]
   }, formatTimeDiff(data.duration, data.topDuration, t)) : React__default.createElement("p", {
     style: {
       margin: 0,
       textAlign: "center"
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, "-")), React__default.createElement("div", {
     className: styles["custom-col-2"],
     style: {
@@ -18637,12 +18676,12 @@ var TextbookAnswerItem = function TextbookAnswerItem(_ref) {
     style: {
       margin: 0
     },
-    className: styles$4["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$4)
+    className: styles$5["answer-response"] + " " + getOverallColorClassName(data.overallCorrectRate, styles$5)
   }, data.overallCorrectRate.toFixed(2) + "%") : React__default.createElement("p", {
     style: {
       margin: 0
     },
-    className: styles$4["answerNoTime"]
+    className: styles$5["answerNoTime"]
   }, t("no_time"))), isStudent && !isLearningSpace && React__default.createElement(material.Box, {
     className: styles["custom-col-2"]
   }, openContextMenu ? React__default.createElement(material.ClickAwayListener, {
@@ -18714,7 +18753,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
     }));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["myanswer"]
+    className: "" + styles$5["myanswer"]
   }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
     var _item$categories;
     return React__default.createElement("div", {
@@ -18725,7 +18764,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
       bgcolor: "#F9FAFB",
       flexDirection: "row",
       padding: "12px",
-      className: styles$4["myAnswerItem"] + " " + styles["noGutters"]
+      className: styles$5["myAnswerItem"] + " " + styles["noGutters"]
     }, React__default.createElement("div", {
       className: styles["custom-col-2"],
       style: {
@@ -18804,7 +18843,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
         alignItems: "center"
       }
     }, t("total_correct_rate")))), React__default.createElement("div", {
-      className: styles$4["titleMyAnswer2"]
+      className: styles$5["titleMyAnswer2"]
     }, React__default.createElement(material.Typography, {
       sx: {
         color: "#97A1AF",
@@ -18819,7 +18858,7 @@ var TextbookMyAnswer = function TextbookMyAnswer(_ref) {
     }, (_item$categories = item.categories) === null || _item$categories === void 0 ? void 0 : _item$categories.map(function (i) {
       return i.name;
     }).join(" / ")))), React__default.createElement("div", {
-      className: styles$4["contentMyAnswer"]
+      className: styles$5["contentMyAnswer"]
     }, React__default.createElement(ListView, {
       data: item.questions,
       render: function render(question, index) {
@@ -18849,24 +18888,24 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
           borderBottom: index < (data === null || data === void 0 ? void 0 : data.length) - 1 ? "1px solid #e4e7ec" : undefined
         }
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$5["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.name), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.percentageAmongStudents.toFixed(2), "%"), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18875,7 +18914,7 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18884,7 +18923,7 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
       }) : ""), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700,
+          color: styles$5.gray_700,
           fontSize: "13px",
           fontWeight: 500
         }
@@ -18898,26 +18937,26 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
         left: item.percentageAmongStudents + "%"
       };
       return React__default.createElement("div", {
-        className: styles$4["contentProblem"] + " " + printStyles["avoid-break-inside"],
+        className: styles$5["contentProblem"] + " " + printStyles["avoid-break-inside"],
         key: item.id
       }, React__default.createElement("div", {
-        className: styles$4["labelProblem"]
+        className: styles$5["labelProblem"]
       }, React__default.createElement("span", {
-        className: styles$4["name"]
+        className: styles$5["name"]
       }, item.name), React__default.createElement("div", {
-        className: styles$4["percent"]
+        className: styles$5["percent"]
       }, React__default.createElement("span", null, (_item$percentageAmong = item.percentageAmongStudents) === null || _item$percentageAmong === void 0 ? void 0 : _item$percentageAmong.toFixed(2), "%"), React__default.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, t("problems")))), React__default.createElement("div", {
-        className: styles$4["slider"]
+        className: styles$5["slider"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["track"],
+        className: styles$5["track"],
         style: trackStyle
       }))));
     });
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : ProblemKey.GradesByTerritory);
     }
@@ -18929,14 +18968,14 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
     }
   }, t("grades_by_area")), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, formattedData.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -18948,7 +18987,7 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("categories")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -18966,7 +19005,7 @@ var TextbookGradesByTerritory = function TextbookGradesByTerritory(_ref) {
       textAlign: "center"
     }
   }, t("total_solve_time")))), React__default.createElement("tbody", null, renderTableBody(formattedData))), !isMyStoryStudent && renderCategories(formattedData))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -19039,39 +19078,39 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
           borderBottom: index < (data === null || data === void 0 ? void 0 : data.length) - 1 ? "1px solid #e4e7ec" : undefined
         }
       }, React__default.createElement("td", {
-        className: styles$4["tdcolumn1"],
+        className: styles$5["tdcolumn1"],
         style: {
-          color: styles$4.gray_900,
+          color: styles$5.gray_900,
           fontSize: "13px",
           fontWeight: 600
         }
       }, React__default.createElement(material.Typography, {
-        color: styles$4.gray_900,
+        color: styles$5.gray_900,
         fontSize: "13px",
         fontWeight: 600
       }, t("problem") + " " + (item.questionOrder + 1))), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.dark,
+          color: styles$5.dark,
           fontSize: "13px",
           fontWeight: 600
         }
       }, item.overallCorrectRate.toFixed(2) ? item.overallCorrectRate.toFixed(2) + "%" : ""), React__default.createElement("td", {
-        className: styles$4["tdcolumn3"],
+        className: styles$5["tdcolumn3"],
         style: {
-          color: styles$4.red_900,
+          color: styles$5.red_900,
           fontSize: "13px",
           fontWeight: 500
         }
       }, typeof item.selectedAnswers === "string" ? renderAnswer(item.questionAnswerType, item.selectedAnswers) : renderTextbookAnswer(item.questionAnswerType, item.selectedAnswers, item.textualAnswers)), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700
+          color: styles$5.gray_700
         }
       }, typeof item.correctAnswers === "string" ? renderAnswer(item.questionAnswerType, item.correctAnswers) : renderTextbookAnswer(item.questionAnswerType, item.correctAnswers, item.correctTextualAnswers, true)), React__default.createElement("td", {
         style: {
           textAlign: "center",
-          color: styles$4.gray_700
+          color: styles$5.gray_700
         }
       }, item.categories ? item.categories.map(function (i) {
         return i.name;
@@ -19083,31 +19122,31 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
       return React__default.createElement(material.Grid, {
         container: true,
         flexWrap: "nowrap",
-        className: styles$4["content"] + " " + printStyles["avoid-break-inside"],
+        className: styles$5["content"] + " " + printStyles["avoid-break-inside"],
         key: question.id
       }, React__default.createElement(material.Grid, {
         item: true,
         xs: 1.5,
         minWidth: "120px",
-        className: styles$4["contentColumn1"]
+        className: styles$5["contentColumn1"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("problem_number")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("number_question", {
         number: question.questionOrder + 1
       })))), React__default.createElement(material.Grid, {
         item: true,
         xs: 10.5,
-        className: styles$4["contentColumn2"]
+        className: styles$5["contentColumn2"]
       }, React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["span1"]
+        className: styles$5["span1"]
       }, t("total_correct_rate")), React__default.createElement("span", {
-        className: styles$4["span2"]
+        className: styles$5["span2"]
       }, t("my_wrong_answer"))), React__default.createElement("div", null, React__default.createElement("span", {
-        className: styles$4["overallCorrectRate"]
+        className: styles$5["overallCorrectRate"]
       }, question.overallCorrectRate.toFixed(2), "%"), React__default.createElement("span", {
-        className: styles$4["answer"]
+        className: styles$5["answer"]
       }, typeof question.selectedAnswers === "string" ? renderAnswer(question.questionAnswerType, question.selectedAnswers) : renderTextbookAnswer(question.questionAnswerType, question.selectedAnswers, question.textualAnswers), " ", t("answer"), " ", typeof question.correctAnswers === "string" ? renderAnswer(question.questionAnswerType, question.correctAnswers) : renderTextbookAnswer(question.questionAnswerType, question.correctAnswers, question.correctTextualAnswers, true)))));
     });
   };
@@ -19115,9 +19154,9 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
     changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: handleToggle
   }, React__default.createElement(material.Stack, {
     flexDirection: "row",
@@ -19131,20 +19170,20 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
     }
   }, t("issues_vulnerable")), React__default.createElement(material.Typography, {
     sx: {
-      color: styles$4.gray_300,
+      color: styles$5.gray_300,
       fontSize: "11px",
       fontWeight: 500
     }
   }, t("vulnerable_detail"))), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, incorrectQuestions !== null && incorrectQuestions !== void 0 && incorrectQuestions.length ? React__default.createElement("div", {
-    className: styles$4["tableCompareGrass"]
+    className: styles$5["tableCompareGrass"]
   }, React__default.createElement("div", {
-    className: styles$4["table-responsive"]
+    className: styles$5["table-responsive"]
   }, isMyStoryStudent && React__default.createElement(material.Table, {
     style: {
       width: "100%",
@@ -19156,7 +19195,7 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
     },
     className: "" + printStyles["avoid-break-inside"]
   }, React__default.createElement("tr", null, React__default.createElement("th", {
-    className: styles$4["thcolumn1"]
+    className: styles$5["thcolumn1"]
   }, t("problem_number")), React__default.createElement("th", {
     style: {
       textAlign: "center"
@@ -19174,7 +19213,7 @@ var TextbookVulnerable = function TextbookVulnerable(_ref) {
       textAlign: "center"
     }
   }, t("_category")))), React__default.createElement("tbody", null, renderTableBody(incorrectQuestions))), !isMyStoryStudent && renderQuestions(incorrectQuestions))) : React__default.createElement("div", {
-    className: styles$4["noData"] + " " + printStyles["avoid-break-inside"]
+    className: styles$5["noData"] + " " + printStyles["avoid-break-inside"]
   }, t("no_data"))));
 };
 
@@ -19194,37 +19233,37 @@ var TextbookTrickyProblem = function TextbookTrickyProblem(_ref) {
   });
   var renderProblems = function renderProblems() {
     return React__default.createElement(React.Fragment, null, React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
     }, React__default.createElement(iconX, null), React__default.createElement("span", null, t("incorrect_problem_among_the_starred_problems"))), React__default.createElement("div", {
-      className: styles$4["wrongQuestions"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["wrongQuestions"] + " " + printStyles["avoid-break-inside"]
     }, !!(inCorrectQuestions !== null && inCorrectQuestions !== void 0 && inCorrectQuestions.length) && (inCorrectQuestions === null || inCorrectQuestions === void 0 ? void 0 : inCorrectQuestions.map(function (question) {
       return React__default.createElement("span", {
         key: question.id,
-        className: styles$4["question"]
+        className: styles$5["question"]
       }, t("number_question", {
         number: question.questionOrder + 1
       }));
     })), !(data !== null && data !== void 0 && data.studentQuestionResults.length) && React__default.createElement("div", {
-      className: styles$4["noData"]
+      className: styles$5["noData"]
     }, t("no_data"))), React__default.createElement("div", {
-      className: styles$4["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["titleTrickyProblem"] + " " + printStyles["avoid-break-inside"]
     }, React__default.createElement(iconAssignedQuestions, null), React__default.createElement("span", null, t("correct_problem_among_the_starred_problems"))), React__default.createElement("div", {
-      className: styles$4["assignedQuestions"] + " " + printStyles["avoid-break-inside"]
+      className: styles$5["assignedQuestions"] + " " + printStyles["avoid-break-inside"]
     }, !!(correctQuestions !== null && correctQuestions !== void 0 && correctQuestions.length) && (correctQuestions === null || correctQuestions === void 0 ? void 0 : correctQuestions.map(function (question) {
       return React__default.createElement("div", {
         key: question.id,
-        className: styles$4["question"]
+        className: styles$5["question"]
       }, t("number_question", {
         number: question.questionOrder + 1
       }));
     })), !(data !== null && data !== void 0 && data.studentQuestionResults.length) && React__default.createElement("div", {
-      className: styles$4["noData"]
+      className: styles$5["noData"]
     }, t("no_data"))));
   };
   return React__default.createElement("div", {
-    className: "" + styles$4["wrapperProblem"]
+    className: "" + styles$5["wrapperProblem"]
   }, React__default.createElement("div", {
-    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$4["titleProblemClose"] : styles$4["titleProblem"]),
+    className: printStyles["avoid-break-inside"] + " " + (!isOpen ? styles$5["titleProblemClose"] : styles$5["titleProblem"]),
     onClick: function onClick() {
       return changeOpen === null || changeOpen === void 0 ? void 0 : changeOpen(isOpen ? undefined : keyOpen);
     }
@@ -19236,10 +19275,10 @@ var TextbookTrickyProblem = function TextbookTrickyProblem(_ref) {
     }
   }, t("tricky_problems")), isOpen ? React__default.createElement(io5.IoChevronUp, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   }) : React__default.createElement(io5.IoChevronDown, {
     size: 24,
-    color: styles$4.gray_300
+    color: styles$5.gray_300
   })), isOpen && React__default.createElement(React.Fragment, null, renderProblems()));
 };
 
@@ -19957,7 +19996,7 @@ var useExamResultData = function useExamResultData(props) {
           }
         }
       }),
-      colors: [styles$4.dark, styles$4.purple_900],
+      colors: [styles$5.dark, styles$5.purple_900],
       xaxis: _extends({}, DEFAULT_LINE_CHART_OPTIONS.xaxis, {
         categories: ["s"].concat(Array.from({
           length: questionLength
@@ -20964,18 +21003,18 @@ var ExamResultV2 = function ExamResultV2(props) {
     value: selected,
     index: 1
   }, React__default.createElement("div", {
-    className: styles$4["compareChart"]
+    className: styles$5["compareChart"]
   }, React__default.createElement("div", {
-    className: styles$4["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
+    className: styles$5["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
     onClick: handlePrevChart
   }, React__default.createElement(iconBtnPrevChart, null)), React__default.createElement("div", {
-    className: styles$4["chart"] + " sr-line-chart"
+    className: styles$5["chart"] + " sr-line-chart"
   }, React__default.createElement("div", null, React__default.createElement(ReactApexChart, {
     height: 389,
     options: chartOptions,
     series: series
   }))), React__default.createElement("div", {
-    className: styles$4["nextChart"] + " " + (dataChartIndex < timelyOrderQuestions.length - 1 && "pointer"),
+    className: styles$5["nextChart"] + " " + (dataChartIndex < timelyOrderQuestions.length - 1 && "pointer"),
     onClick: handleNextChart
   }, React__default.createElement(iconBtnNextChart, null)))), React__default.createElement(CustomTabPanel, {
     value: selected,
@@ -21169,13 +21208,13 @@ var LoadingDots = function LoadingDots(_ref) {
     color: "#FFF",
     fontSize: 20
   }, text), React__default.createElement("div", {
-    className: styles$4["loader"]
+    className: styles$5["loader"]
   }, React__default.createElement("div", {
-    className: styles$4["dot"]
+    className: styles$5["dot"]
   }), React__default.createElement("div", {
-    className: styles$4["dot"]
+    className: styles$5["dot"]
   }), React__default.createElement("div", {
-    className: styles$4["dot"]
+    className: styles$5["dot"]
   })));
 };
 
@@ -22017,7 +22056,7 @@ var usePreparedExam = function usePreparedExam(_ref) {
   };
 };
 
-var styles$5 = {"drawer":"_1k4kj","open":"_IB2-g","drawer-overlay":"_xnHGE","drawer-header":"_1gLOh","drawer-form":"_2pLGg","dropdown-content-academy":"_1rR7s","dropdown-change":"_1Hcs4","btn-register":"_37IIN","btn-cancel":"_KDkNh","dropdown-academy-item":"_1-srV","dropdown-content-language":"_88rAE","dropdown-item-language":"_2jjUW","dropdown-item-language-active":"_27lik","item-address":"_tGib4","item-logout":"_1MXIb","title-address":"_A_I15","image-academy":"_3zxbi","slick-dots":"_VlpW7","slick-active":"_1zzu9","slider-container":"_1lCoM","button":"__sLSD","variable-width":"_1AnqW","slick-slide":"_3ZJaN","center":"_jUOZF","slick-center":"_35s6t","content":"_1dQdx","image":"_1feWs","slick-loading":"_FchLZ","slick-slider":"_1T7zW","slick-thumb":"_o2Tkt","slides":"_1FY2k","slick-next":"_23Pi9","slick-prev":"_2g2iD","heroBanner_qdFl":"_2y7lQ","buttons_AeoN":"_KMW2P","mdxPageWrapper_j9I6":"_3dqhE","collapseSidebarButton_PEFL":"_24wBH","expandButton_TmdG":"_2LXBj","announcementBarClose_gvF7":"_32uEE","announcementBarPlaceholder_vyr4":"_2PagL","navbarSearchContainer_Bca1":"_3Uiqm","lastUpdated_vwxv":"_1UNOJ","tocMobile_ITEo":"_qcGlb","collapseSidebarButtonIcon_kv0_":"_2G6Hz","expandButtonIcon_i1dp":"_1IMu8","menuHtmlItem_M9Kj":"_1YUka","menu_SIkG":"_FgMDa","menuWithAnnouncementBar_GW3s":"_zUamI","sidebar_njMd":"_3E4Oo","sidebarWithHideableNavbar_wUlq":"_3xviA","sidebarHidden_VK0M":"_cWHWX","sidebarLogo_isFc":"_UMHGX","docSidebarContainer_YfHR":"_1SwXt","docSidebarContainerHidden_DPk8":"_3h6KW","sidebarViewport_aRkj":"_2OCK_","docMainContainer_TBSr":"_FuxZS","docMainContainerEnhanced_lQrH":"_ZUdP4","docItemWrapperEnhanced_JWYK":"_2AmPG","docItemCol_VOVn":"_3GmBr","container":"_1UB4R","col":"_csNus","footer":"_gceZJ","colorModeToggle_DEke":"_OawS_","footer__link-separator":"_3fzLh","navbar__item":"_1wyV6","tableOfContents_bqdL":"_3tGM4","footer__col":"_3DllA","footer__link-item":"_2ibTz","hero":"_369-d","navbar":"_5LWZt","container-fluid":"_2GcNI","navbar__toggle":"_2YjZl","navbar__search-input":"_3__u0","pills--block":"_2f7GT","tabs--block":"_3xrdo","docItemContainer_F8PC":"_6P_Dr","markdown":"_2xZt0","backToTopButton_sjWU":"_2bUwo","thin-scrollbar":"_1mrmJ","announcementBar_mb4j":"_2oveE","menu":"_14IWx","pagination-nav":"_3S8xG","table-of-contents":"_SnjS9","tabs":"_qpa-q","codeBlockLines_e6Vv":"_2ou2J"};
+var styles$6 = {"drawer":"_1k4kj","open":"_IB2-g","drawer-overlay":"_xnHGE","drawer-header":"_1gLOh","drawer-form":"_2pLGg","dropdown-content-academy":"_1rR7s","dropdown-change":"_1Hcs4","btn-register":"_37IIN","btn-cancel":"_KDkNh","dropdown-academy-item":"_1-srV","dropdown-content-language":"_88rAE","dropdown-item-language":"_2jjUW","dropdown-item-language-active":"_27lik","item-address":"_tGib4","item-logout":"_1MXIb","title-address":"_A_I15","image-academy":"_3zxbi","slick-dots":"_VlpW7","slick-active":"_1zzu9","slider-container":"_1lCoM","button":"__sLSD","variable-width":"_1AnqW","slick-slide":"_3ZJaN","center":"_jUOZF","slick-center":"_35s6t","content":"_1dQdx","image":"_1feWs","slick-loading":"_FchLZ","slick-slider":"_1T7zW","slick-thumb":"_o2Tkt","slides":"_1FY2k","slick-next":"_23Pi9","slick-prev":"_2g2iD","heroBanner_qdFl":"_2y7lQ","buttons_AeoN":"_KMW2P","mdxPageWrapper_j9I6":"_3dqhE","collapseSidebarButton_PEFL":"_24wBH","expandButton_TmdG":"_2LXBj","announcementBarClose_gvF7":"_32uEE","announcementBarPlaceholder_vyr4":"_2PagL","navbarSearchContainer_Bca1":"_3Uiqm","lastUpdated_vwxv":"_1UNOJ","tocMobile_ITEo":"_qcGlb","collapseSidebarButtonIcon_kv0_":"_2G6Hz","expandButtonIcon_i1dp":"_1IMu8","menuHtmlItem_M9Kj":"_1YUka","menu_SIkG":"_FgMDa","menuWithAnnouncementBar_GW3s":"_zUamI","sidebar_njMd":"_3E4Oo","sidebarWithHideableNavbar_wUlq":"_3xviA","sidebarHidden_VK0M":"_cWHWX","sidebarLogo_isFc":"_UMHGX","docSidebarContainer_YfHR":"_1SwXt","docSidebarContainerHidden_DPk8":"_3h6KW","sidebarViewport_aRkj":"_2OCK_","docMainContainer_TBSr":"_FuxZS","docMainContainerEnhanced_lQrH":"_ZUdP4","docItemWrapperEnhanced_JWYK":"_2AmPG","docItemCol_VOVn":"_3GmBr","container":"_1UB4R","col":"_csNus","footer":"_gceZJ","colorModeToggle_DEke":"_OawS_","footer__link-separator":"_3fzLh","navbar__item":"_1wyV6","tableOfContents_bqdL":"_3tGM4","footer__col":"_3DllA","footer__link-item":"_2ibTz","hero":"_369-d","navbar":"_5LWZt","container-fluid":"_2GcNI","navbar__toggle":"_2YjZl","navbar__search-input":"_3__u0","pills--block":"_2f7GT","tabs--block":"_3xrdo","docItemContainer_F8PC":"_6P_Dr","markdown":"_2xZt0","backToTopButton_sjWU":"_2bUwo","thin-scrollbar":"_1mrmJ","announcementBar_mb4j":"_2oveE","menu":"_14IWx","pagination-nav":"_3S8xG","table-of-contents":"_SnjS9","tabs":"_qpa-q","codeBlockLines_e6Vv":"_2ou2J"};
 
 var ResetFilterDialog = function ResetFilterDialog(_ref) {
   var t = _ref.t,
@@ -22081,7 +22120,7 @@ var ResetFilterDialog = function ResetFilterDialog(_ref) {
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$5["btn-cancel"],
+    className: styles$6["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -22092,7 +22131,7 @@ var ResetFilterDialog = function ResetFilterDialog(_ref) {
     lineHeight: "16.71px"
   }, t("close"))), React__default.createElement(material.Button, {
     variant: "contained",
-    className: styles$5["btn-register"],
+    className: styles$6["btn-register"],
     type: "submit",
     sx: {
       padding: "12px 47px"
@@ -22511,7 +22550,7 @@ var ChapterProblemSolvingResultsDialog = function ChapterProblemSolvingResultsDi
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$5["btn-cancel"],
+    className: styles$6["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -22586,6 +22625,7 @@ var StartPageDialog = function StartPageDialog(_ref) {
       render: function render(_ref3) {
         var field = _objectWithoutPropertiesLoose(_ref3, _excluded$9);
         return React__default.createElement(CustomSelectOption, Object.assign({
+          maxMenuHeight: 150,
           menuPosition: "fixed",
           onChange: function onChange(option) {
             return setFieldValue('startPage', option === null || option === void 0 ? void 0 : option.value);
@@ -22602,7 +22642,7 @@ var StartPageDialog = function StartPageDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React__default.createElement(material.Button, {
-      className: styles$5["btn-cancel"],
+      className: styles$6["btn-cancel"],
       onClick: onClose
     }, React__default.createElement(material.Typography, {
       sx: {
@@ -22613,7 +22653,7 @@ var StartPageDialog = function StartPageDialog(_ref) {
       lineHeight: "16.71px"
     }, t("cancel"))), React__default.createElement(material.Button, {
       variant: "contained",
-      className: styles$5["btn-register"],
+      className: styles$6["btn-register"],
       type: "submit",
       sx: {
         padding: "12px 47px"
@@ -23190,7 +23230,7 @@ var DeleteTextbookDialog = function DeleteTextbookDialog(_ref) {
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$5["btn-cancel"],
+    className: styles$6["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -23201,7 +23241,7 @@ var DeleteTextbookDialog = function DeleteTextbookDialog(_ref) {
     lineHeight: "16.71px"
   }, t("cancel"))), React__default.createElement(material.Button, {
     variant: "contained",
-    className: styles$5["btn-register"],
+    className: styles$6["btn-register"],
     type: "submit",
     sx: {
       padding: "12px 47px"
@@ -23313,13 +23353,13 @@ var TextbookInfoDrawer = function TextbookInfoDrawer(_ref) {
   var theme = material.useTheme();
   var isTabletUp = material.useMediaQuery(theme.breakpoints.up("lg"));
   return React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$5["drawer-overlay"] + " " + (isOpen && styles$5["open"]),
+    className: styles$6["drawer-overlay"] + " " + (isOpen && styles$6["open"]),
     onClick: function onClick() {
       return onClose();
     }
   }), React__default.createElement(material.Stack, {
     width: isTabletUp ? "50vw" : "100%",
-    className: styles$5["drawer"] + " bg-white " + (isOpen && styles$5["open"])
+    className: styles$6["drawer"] + " bg-white " + (isOpen && styles$6["open"])
   }, React__default.createElement(material.Stack, {
     bgcolor: styles.gray_50,
     borderBottom: "1px solid " + styles.gray_100,
@@ -26350,7 +26390,7 @@ var LessonFormBody = function LessonFormBody(_ref) {
   }, React__default.createElement(demo.DemoContainer, {
     components: ["DatePicker"]
   }, React__default.createElement(DatePicker.DatePicker, {
-    className: "" + styles$2["date-picker"],
+    className: "" + styles$3["date-picker"],
     format: t("date_format"),
     maxDate: endDate ? moment(endDate).local() : undefined,
     minDate: startDate ? moment(startDate).local() : undefined,
@@ -26368,7 +26408,7 @@ var LessonFormBody = function LessonFormBody(_ref) {
   }, t("main_teacher"), " ", React__default.createElement("span", {
     className: "text-danger"
   }, "*")), React__default.createElement("div", {
-    className: "" + styles$2["teacher-selector-wrapper"]
+    className: "" + styles$3["teacher-selector-wrapper"]
   }, React__default.createElement(TeacherSelector, {
     value: formikProp.values.mainTeacherId,
     teachers: teachers,
@@ -26396,7 +26436,7 @@ var LessonFormBody = function LessonFormBody(_ref) {
       return formikProp.setFieldValue("startTime", newValue);
     },
     timezone: "system",
-    className: styles$2["time-picker"] + " w-100",
+    className: styles$3["time-picker"] + " w-100",
     slotProps: {
       textField: {
         onClick: function onClick() {
@@ -26430,7 +26470,7 @@ var LessonFormBody = function LessonFormBody(_ref) {
       return formikProp.setFieldValue("endTime", newValue);
     },
     timezone: "system",
-    className: styles$2["time-picker"] + " w-100",
+    className: styles$3["time-picker"] + " w-100",
     slotProps: {
       textField: {
         onClick: function onClick() {
@@ -27227,7 +27267,7 @@ var RECENT_USER_ACTION_HEADERS = [{
 }];
 var CSV_PREFIX = "data:text/csv;charset=utf-8,";
 
-var styles$6 = {"action-btn":"_1jXbz","action-btn--pencil":"_at4xP","icon-rotate-180":"_12gv9","drop-area":"_R4bn5"};
+var styles$7 = {"action-btn":"_1jXbz","action-btn--pencil":"_at4xP","icon-rotate-180":"_12gv9","drop-area":"_R4bn5"};
 
 var _excluded$c = ["text", "isRequired", "className"];
 var LabelRequired = function LabelRequired(_ref) {
@@ -28352,7 +28392,7 @@ var DeleteUserCsvDialog = function DeleteUserCsvDialog(_ref) {
     size: "xs",
     title: t('delete_users_csv')
   }, React__default.createElement(material.DialogContent, null, React__default.createElement("div", {
-    className: "" + styles$6["drop-area"],
+    className: "" + styles$7["drop-area"],
     onDrop: handleDrop,
     onDragOver: handleDragOver,
     onClick: handleChooseFile
@@ -28481,10 +28521,10 @@ var UserRow = function UserRow(_ref) {
     className: "d-flex"
   }, isAdmin || isSuperAdmin ? React__default.createElement(material.IconButton, {
     color: "default",
-    className: styles$6["action-btn"] + " bg-warning text-white me-2",
+    className: styles$7["action-btn"] + " bg-warning text-white me-2",
     onClick: handleViewOrUpdate
   }, React__default.createElement(hi.HiOutlinePencilAlt, {
-    className: styles$6["action-btn--pencil"],
+    className: styles$7["action-btn--pencil"],
     size: 16
   })) : React__default.createElement(material.IconButton, {
     color: "default",
@@ -28495,7 +28535,7 @@ var UserRow = function UserRow(_ref) {
   })), (isAdmin || isSuperAdmin) && React__default.createElement(material.IconButton, {
     onClick: handleDelete,
     color: "default",
-    className: styles$6["action-btn"] + " bg-danger text-white"
+    className: styles$7["action-btn"] + " bg-danger text-white"
   }, React__default.createElement(fa6.FaTrashCan, {
     size: 12
   })))));
@@ -28581,7 +28621,7 @@ var UserList = function UserList(_ref) {
       bgcolor: theme.palette.primary.main
     },
     startIcon: React__default.createElement(md.MdDownload, {
-      className: "" + styles$6["icon-rotate-180"],
+      className: "" + styles$7["icon-rotate-180"],
       size: 14
     }),
     onClick: handleChooseFile
@@ -28592,7 +28632,7 @@ var UserList = function UserList(_ref) {
       bgcolor: theme.palette.error.main
     },
     startIcon: React__default.createElement(md.MdDownload, {
-      className: "" + styles$6["icon-rotate-180"],
+      className: "" + styles$7["icon-rotate-180"],
       size: 14
     }),
     onClick: handleToggleDeleteUserCsv
@@ -28728,7 +28768,7 @@ var UserList = function UserList(_ref) {
   })));
 };
 
-var styles$7 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
+var styles$8 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
 
 var BpIcon = material.styled("span")(function (_ref) {
   var theme = _ref.theme;
@@ -28801,7 +28841,7 @@ var QuestionView = function QuestionView(_ref2) {
           mb: "16px"
         }, React__default.createElement(material.Stack, null, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
           htmlFor: "textual_answer",
-          className: styles$7["question-label"] + " form-label"
+          className: styles$8["question-label"] + " form-label"
         }, t("textual_answer")), React__default.createElement(material.TextField, {
           sx: {
             "& .MuiInputBase-input": {
@@ -28829,7 +28869,7 @@ var QuestionView = function QuestionView(_ref2) {
         }).map(function (i) {
           return React__default.createElement(material.FormControlLabel, {
             key: i,
-            className: styles$7["question-label"] + " w-fit",
+            className: styles$8["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             onChange: function onChange(e) {
@@ -28860,7 +28900,7 @@ var QuestionView = function QuestionView(_ref2) {
         }).map(function (i) {
           return React__default.createElement(material.FormControlLabel, {
             key: i,
-            className: styles$7["question-label"] + " w-fit",
+            className: styles$8["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             onChange: function onChange(e) {
@@ -28903,7 +28943,7 @@ var QuestionView = function QuestionView(_ref2) {
   }, React__default.createElement(material.Grid, {
     container: true
   }, React__default.createElement("div", {
-    className: styles$7["question-title"] + " me-2 text-nowrap"
+    className: styles$8["question-title"] + " me-2 text-nowrap"
   }, t("problem_number_question", {
     number: question.questionOrder + 1
   }))), React__default.createElement(material.Grid, {
@@ -28916,7 +28956,7 @@ var QuestionView = function QuestionView(_ref2) {
     mb: "16px"
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "title",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("title")), React__default.createElement(material.TextField, {
     fullWidth: true,
     value: question.title,
@@ -28931,7 +28971,7 @@ var QuestionView = function QuestionView(_ref2) {
     mb: "16px"
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "author",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("author")), React__default.createElement(material.TextField, {
     fullWidth: true,
     value: question.author,
@@ -28946,7 +28986,7 @@ var QuestionView = function QuestionView(_ref2) {
     mb: "16px"
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "subject",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("subject")), React__default.createElement(material.TextField, {
     fullWidth: true,
     value: question.subject,
@@ -28965,7 +29005,7 @@ var QuestionView = function QuestionView(_ref2) {
     mb: "16px"
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "type",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("type")), React__default.createElement(CustomSelectOption, {
     isTextbook: true,
     valueById: question.type,
@@ -28979,7 +29019,7 @@ var QuestionView = function QuestionView(_ref2) {
     lg: 3
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "question_answer_type",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("question_answer_type")), React__default.createElement(CustomSelect, {
     isDisabled: isDisabled,
     value: question.questionAnswerType,
@@ -28999,7 +29039,7 @@ var QuestionView = function QuestionView(_ref2) {
     xs: 4,
     lg: 4
   }, React__default.createElement("div", {
-    className: styles$7["question-title"] + " me-2 text-nowrap"
+    className: styles$8["question-title"] + " me-2 text-nowrap"
   }, t("problem_number_question", {
     number: question.questionOrder + 1
   }))), !isTextbook && React__default.createElement(material.Grid, {
@@ -29012,7 +29052,7 @@ var QuestionView = function QuestionView(_ref2) {
     lg: 4
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "question_answer_type",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("question_answer_type")), React__default.createElement(CustomSelect, {
     isDisabled: isDisabled,
     value: question.questionAnswerType,
@@ -29146,7 +29186,11 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     onDelete === null || onDelete === void 0 ? void 0 : onDelete(article);
   };
   return React__default.createElement("div", {
-    className: "d-flex " + styles$7["question"] + " " + (isActive ? styles$7["question--active"] : "")
+    className: "d-flex " + styles$8["question"] + " " + (isActive ? styles$8["question--active"] : ""),
+    style: {
+      maxHeight: "95%",
+      overflow: 'scroll'
+    }
   }, React__default.createElement("div", {
     className: "py-1"
   }, React__default.createElement(pi.PiDotsNineLight, {
@@ -29154,9 +29198,9 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
   })), React__default.createElement("div", {
     className: "px-2"
   }, React__default.createElement("p", {
-    className: "mb-0 " + styles$7["question-article"]
+    className: "mb-0 " + styles$8["question-article"]
   }, t("article_number")), React__default.createElement("p", {
-    className: "text-center " + styles$7["question-article"]
+    className: "text-center " + styles$8["question-article"]
   }, article)), React__default.createElement("div", {
     className: "flex-grow-1"
   }, React__default.createElement(material.Grid, {
@@ -29177,7 +29221,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     lg: 3
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "question_count",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("questions")), React__default.createElement(QuestionCountSelector, {
     id: "question_count",
     value: questionCount,
@@ -29196,7 +29240,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "category",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("category")), React__default.createElement(ArticleCategorySelector, {
     style: {
       "div:has(&)": {
@@ -29216,7 +29260,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     lg: 3
   }, React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
     htmlFor: "answer_count",
-    className: styles$7["question-label"] + " form-label"
+    className: styles$8["question-label"] + " form-label"
   }, t("answer_count")), React__default.createElement(AnswerCountSelector, {
     id: "answer_count",
     value: answerCount,
@@ -29741,7 +29785,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
     xs: 5,
     className: 'mb-2'
   }, React__default.createElement("label", {
-    className: styles["form-label"] + " " + styles$7["question-label"],
+    className: styles["form-label"] + " " + styles$8["question-label"],
     htmlFor: "title"
   }, t("exam_name")), React__default.createElement("input", {
     disabled: isDisabled,
@@ -29755,7 +29799,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
     xs: 3,
     className: 'mb-2'
   }, React__default.createElement("label", {
-    className: styles["form-label"] + " " + styles$7["question-label"],
+    className: styles["form-label"] + " " + styles$8["question-label"],
     htmlFor: "duration"
   }, t("exam_duration")), React__default.createElement(CustomSelect, {
     inputId: "duration",
@@ -29768,7 +29812,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
     xs: 3,
     className: 'mb-2'
   }, React__default.createElement("label", {
-    className: styles["form-label"] + " " + styles$7["question-label"],
+    className: styles["form-label"] + " " + styles$8["question-label"],
     htmlFor: "subject"
   }, t("subject")), React__default.createElement(CustomSelect, {
     inputId: "subject",
@@ -29811,7 +29855,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
       }
     },
     disabled: isDisabled,
-    className: "w-100 d-flex justify-content-center align-items-center " + styles$7["question-btn"] + " mt-3",
+    className: "w-100 d-flex justify-content-center align-items-center " + styles$8["question-btn"] + " mt-3",
     onClick: handleAddArticle
   }, React__default.createElement(fa.FaPlusCircle, {
     className: "me-2"
@@ -31373,7 +31417,7 @@ var ArticleDialog = function ArticleDialog(_ref) {
   }, t("add")))));
 };
 
-var styles$8 = {"drawer":"_11aYm","open":"_3Ydwm","drawer-overlay":"_3SQDf","drawer-header":"_2BwOx","drawer-form":"_2Zo7R","dropdown-content-academy":"_1lzjD","dropdown-change":"_1y7K9","dropdown-academy-item":"_1Y-55","dropdown-content-language":"_1fBXY","dropdown-item-language":"_3Szun","dropdown-item-language-active":"_2HhLb","item-address":"_3WYHC","item-logout":"_2-9ix","title-address":"_1r4pn","image-academy":"_2ZozT"};
+var styles$9 = {"drawer":"_11aYm","open":"_3Ydwm","drawer-overlay":"_3SQDf","drawer-header":"_2BwOx","drawer-form":"_2Zo7R","dropdown-content-academy":"_1lzjD","dropdown-change":"_1y7K9","dropdown-academy-item":"_1Y-55","dropdown-content-language":"_1fBXY","dropdown-item-language":"_3Szun","dropdown-item-language-active":"_2HhLb","item-address":"_3WYHC","item-logout":"_2-9ix","title-address":"_1r4pn","image-academy":"_2ZozT"};
 
 var _excluded$e = ["isOpen", "onClose", "handleSaveExam"];
 var CreateExamDrawer = function CreateExamDrawer(props) {
@@ -31386,17 +31430,17 @@ var CreateExamDrawer = function CreateExamDrawer(props) {
   var theme = material.useTheme();
   var isTabletUp = material.useMediaQuery(theme.breakpoints.up('lg'));
   return React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$8["drawer-overlay"] + " " + (isOpen && styles$8["open"]),
+    className: styles$9["drawer-overlay"] + " " + (isOpen && styles$9["open"]),
     onClick: function onClick() {
       return onClose();
     }
   }), React__default.createElement("div", {
-    className: styles$8["drawer"] + " bg-white " + (isOpen && styles$8["open"]),
+    className: styles$9["drawer"] + " bg-white " + (isOpen && styles$9["open"]),
     style: {
       width: "" + (isTabletUp ? "70vw" : "100vw")
     }
   }, React__default.createElement("div", {
-    className: styles$8["drawer-header"] + " d-flex justify-content-between align-items-center"
+    className: styles$9["drawer-header"] + " d-flex justify-content-between align-items-center"
   }, React__default.createElement(material.Button, {
     variant: "outlined",
     sx: {
@@ -31415,7 +31459,7 @@ var CreateExamDrawer = function CreateExamDrawer(props) {
   }, React__default.createElement(fa.FaTimes, {
     size: 18
   }))), React__default.createElement("div", {
-    className: "" + styles$8["drawer-form"]
+    className: "" + styles$9["drawer-form"]
   }, React__default.createElement(ExamDetailView, Object.assign({}, examDetailViewProps)))));
 };
 
@@ -31794,7 +31838,7 @@ var ShareToTeacherDialog = function ShareToTeacherDialog(_ref) {
     maxWidth: "md"
   }, React__default.createElement(material.DialogContent, {
     sx: {
-      overflowY: "unset"
+      overflowY: "auto"
     }
   }, React__default.createElement(material.Grid, {
     container: true,
@@ -32513,7 +32557,7 @@ var useNotificationDetail = function useNotificationDetail(_ref) {
   };
 };
 
-var styles$9 = {"avatar":"_8niRT"};
+var styles$a = {"avatar":"_8niRT"};
 
 var _excluded$f = ["value", "disabled", "optionTypeNotification"];
 var TypeSelector = function TypeSelector(_ref) {
@@ -32634,7 +32678,7 @@ var NotificationForm = function NotificationForm(_ref) {
     className: "fw-bold mb-2",
     htmlFor: "main-teacher"
   }, t('content')), React__default.createElement("div", {
-    className: "" + styles$9["teacher-selector-wrapper"]
+    className: "" + styles$a["teacher-selector-wrapper"]
   }, React__default.createElement(TinyEditor, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     initValue: formikProp.values.content,
@@ -32653,7 +32697,7 @@ var NotificationForm = function NotificationForm(_ref) {
   }, t('type'), " ", React__default.createElement("span", {
     className: "text-danger"
   }, "*")), React__default.createElement("div", {
-    className: "" + styles$9["teacher-selector-wrapper"]
+    className: "" + styles$a["teacher-selector-wrapper"]
   }, React__default.createElement(TypeSelector, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     optionTypeNotification: isAdmin ? optionTypeNotification : optionTypeNotification.filter(function (i) {
@@ -32673,7 +32717,7 @@ var NotificationForm = function NotificationForm(_ref) {
     className: "fw-bold mb-2",
     htmlFor: "main-teacher"
   }, t('classes')), React__default.createElement("div", {
-    className: "" + styles$9["teacher-selector-wrapper"]
+    className: "" + styles$a["teacher-selector-wrapper"]
   }, React__default.createElement(ClassSelector, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     value: classOptions,
@@ -32682,7 +32726,7 @@ var NotificationForm = function NotificationForm(_ref) {
     className: "fw-bold mb-2",
     htmlFor: "main-teacher"
   }, t('students')), React__default.createElement("div", {
-    className: "" + styles$9["teacher-selector-wrapper"]
+    className: "" + styles$a["teacher-selector-wrapper"]
   }, React__default.createElement(StudentSelector, {
     disabled: !isAdmin && (!!id && !(data !== null && data !== void 0 && data.isOwned) || isTeacherAdmin),
     value: studentOptions,
@@ -33561,6 +33605,7 @@ var CompareTypeOptions = [{
   label: "synonym_processing",
   value: exports.QuestionAnswerType.SynonymProcessing
 }];
+var MAX_QUESTIONS_IN_QUESTION_GROUP = 20;
 
 var CustomTextbookTab = function CustomTextbookTab(props) {
   var children = props.children,
@@ -34024,7 +34069,7 @@ var isEqual = function isEqual(prev, next) {
 };
 var ArticleBlock$1 = React.memo(ArticleBlock, isEqual);
 
-var styles$a = {"question":"_1_ONI","question-article":"_2FdrR","question-title":"_3mgRf","question-label":"_2h0kA","question-input":"_exAl-","question-btn":"_2ksp8"};
+var styles$b = {"question":"_1_ONI","question-article":"_2FdrR","question-title":"_3mgRf","question-label":"_2h0kA","question-input":"_exAl-","question-btn":"_2ksp8"};
 
 var labelStyle = {
   textOverflow: "ellipsis",
@@ -34050,7 +34095,7 @@ var QuestionCompareType = function QuestionCompareType(_ref) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "compare-type",
-    className: "" + styles$a["question-label"],
+    className: "" + styles$b["question-label"],
     sx: _extends({}, labelStyle, {
       width: "unset"
     })
@@ -34094,7 +34139,7 @@ var QuestionOrderName = function QuestionOrderName(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   return React__default.createElement(material.Box, {
-    className: styles$a["question-title"] + " me-2 text-nowrap",
+    className: styles$b["question-title"] + " me-2 text-nowrap",
     sx: questionTitleStyle
   }, isMath ? t("problem_number_question", {
     number: questionOrder + 1
@@ -34319,7 +34364,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
           var _data$correctAnswers2;
           return React__default.createElement(material.FormControlLabel, {
             key: i,
-            className: styles$a["question-label"] + " w-fit",
+            className: styles$b["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             disabled: disabled,
@@ -34353,7 +34398,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
           var _data$correctAnswers4;
           return React__default.createElement(material.FormControlLabel, {
             key: i,
-            className: styles$a["question-label"] + " w-fit",
+            className: styles$b["question-label"] + " w-fit",
             labelPlacement: "top",
             value: i,
             onChange: function onChange(e) {
@@ -34419,7 +34464,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     direction: "row",
     gap: 2
   }, isTextAnswerType && React__default.createElement(material.FormGroup, null, React__default.createElement(material.FormLabel, {
-    className: styles$a["question-label"] + " form-label",
+    className: styles$b["question-label"] + " form-label",
     sx: _extends({}, labelStyle, {
       visibility: "hidden"
     })
@@ -34454,7 +34499,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "score",
-    className: styles$a["question-label"] + " form-label",
+    className: styles$b["question-label"] + " form-label",
     sx: labelStyle
   }, t("score")), React__default.createElement(formik.Field, {
     name: path + ".score",
@@ -34474,7 +34519,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "type",
-    className: styles$a["question-label"] + " form-label",
+    className: styles$b["question-label"] + " form-label",
     sx: labelStyle
   }, t("type")), React__default.createElement(formik.Field, {
     name: path + ".questionTypeId",
@@ -34499,7 +34544,7 @@ var QuestionBlock = function QuestionBlock(_ref2) {
     }
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "question_answer_type",
-    className: styles$a["question-label"] + " form-label",
+    className: styles$b["question-label"] + " form-label",
     sx: labelStyle
   }, t("question_answer_type")), React__default.createElement(formik.Field, {
     name: path + ".questionAnswerType",
@@ -34895,7 +34940,8 @@ var QuestionGroupBlock = function QuestionGroupBlock(_ref) {
       var field = _ref2.field;
       return React__default.createElement(QuestionCountSelector, Object.assign({}, field, {
         onChange: handleChangeQuestionCount,
-        isDisabled: disabled
+        isDisabled: disabled,
+        totalQuestions: MAX_QUESTIONS_IN_QUESTION_GROUP
       }));
     }
   }))), isMath && React__default.createElement(material.Grid, {
@@ -36211,6 +36257,7 @@ var TextbookInfoTab = function TextbookInfoTab(_ref) {
     onChange: function onChange(event) {
       return !disabled && handleUploadImage(event);
     },
+    disabled: disabled,
     onClick: function onClick(e) {
       if (!disabled) {
         e.target.value = "";
@@ -36850,7 +36897,7 @@ var PreparedTextbookForm = function PreparedTextbookForm(_ref) {
   }, React__default.createElement(material.FormLabel, {
     htmlFor: "type",
     className: "text-center"
-  }, i18n.t("korea")), React__default.createElement(formik.Field, {
+  }, i18n.t("korean_language")), React__default.createElement(formik.Field, {
     name: "type",
     render: function render(_ref4) {
       var field = _ref4.field;
@@ -37133,7 +37180,7 @@ var useTextbookList$1 = function useTextbookList() {
   };
 };
 
-var styles$b = {"action-btn":"_2Kt_g","action-btn--pencil":"_3T_TG","btn-cancel":"_3j6Kd","btn-register":"_XA4vl"};
+var styles$c = {"action-btn":"_2Kt_g","action-btn--pencil":"_3T_TG","btn-cancel":"_3j6Kd","btn-register":"_XA4vl"};
 
 var DeleteTextbookDialog$1 = function DeleteTextbookDialog(_ref) {
   var t = _ref.t,
@@ -37197,7 +37244,7 @@ var DeleteTextbookDialog$1 = function DeleteTextbookDialog(_ref) {
       borderTop: "1px solid #CED2DA"
     }
   }, React__default.createElement(material.Button, {
-    className: styles$b["btn-cancel"],
+    className: styles$c["btn-cancel"],
     onClick: onClose
   }, React__default.createElement(material.Typography, {
     sx: {
@@ -37208,7 +37255,7 @@ var DeleteTextbookDialog$1 = function DeleteTextbookDialog(_ref) {
     lineHeight: "16.71px"
   }, t("cancel"))), React__default.createElement(material.Button, {
     variant: "contained",
-    className: styles$b["btn-register"],
+    className: styles$c["btn-register"],
     type: "submit",
     sx: {
       padding: "12px 47px"
@@ -37295,12 +37342,12 @@ var PreparedTextbookList = function PreparedTextbookList(_ref) {
       title: t("edit")
     }, React__default.createElement(material.IconButton, {
       color: "default",
-      className: styles$b["action-btn"] + " bg-warning text-white me-2",
+      className: styles$c["action-btn"] + " bg-warning text-white me-2",
       onClick: function onClick() {
         return onNavigateDetail(i);
       }
     }, React__default.createElement(hi.HiOutlinePencilAlt, {
-      className: styles$b["action-btn--pencil"],
+      className: styles$c["action-btn--pencil"],
       size: 16
     }))), React__default.createElement(material.Tooltip, {
       title: t("edit")
@@ -37309,7 +37356,7 @@ var PreparedTextbookList = function PreparedTextbookList(_ref) {
         return handleOpenConfirmDialog(i);
       },
       color: "default",
-      className: styles$b["action-btn"] + " bg-danger text-white",
+      className: styles$c["action-btn"] + " bg-danger text-white",
       title: t("delete")
     }, React__default.createElement(fa6.FaTrashCan, {
       size: 12
@@ -38492,6 +38539,7 @@ exports.ClassDetail = ClassDetail;
 exports.ClassList = ClassList;
 exports.ClassNoteDialog = ClassNoteDialog;
 exports.ClassSelector = ClassSelector;
+exports.CommonCreateNewQuestionDialog = CommonCreateNewQuestionDialog;
 exports.CommonDialog = CommonDialog;
 exports.ConfirmDeleteDialog = ConfirmDeleteDialog;
 exports.ConfirmDialog = ConfirmDialog;