touchstudy-core 0.1.33 → 0.1.34

package/dist/index.modern.js

@@ -9,7 +9,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import axios from 'axios';
 import { useTranslation, initReactI18next } from 'react-i18next';
 export { I18nextProvider, useTranslation } from 'react-i18next';
-import { Grid, Dialog, DialogTitle, IconButton, DialogContent, TextField, DialogActions, Button, Box, Typography, Pagination, styled, Tooltip, tooltipClasses, Stack, ClickAwayListener, useMediaQuery, CircularProgress, FormControl, RadioGroup, FormControlLabel, Radio, FormGroup, FormLabel, InputLabel, Container, Table, TableBody, TableRow, TableCell, TableHead, Paper, InputBase } from '@mui/material';
+import { Grid, Dialog, DialogTitle, IconButton, DialogContent, TextField, DialogActions, Button, Box, Typography, Pagination, styled, Tooltip, tooltipClasses, Stack, ClickAwayListener, useMediaQuery, CircularProgress, FormControl, RadioGroup, FormControlLabel, Radio, useTheme, FormGroup, FormLabel, InputLabel, Container, Table, TableBody, TableRow, TableCell, TableHead, Paper, InputBase } from '@mui/material';
 import { gapi } from 'gapi-script';
 import Pusher from 'pusher-js';
 import { IoClose, IoCloseOutline, IoSearch } from 'react-icons/io5';
@@ -26,7 +26,7 @@ export { ToastContainer, toast } from 'react-toastify';
 import Select, { components } from 'react-select';
 import { FaCaretDown, FaTrash, FaPlus, FaSave, FaPencilAlt, FaSortUp, FaSortDown, FaEye, FaPlusCircle } from 'react-icons/fa';
 import { PiDotsNineLight } from 'react-icons/pi';
-import { IoMdArrowBack } from 'react-icons/io';
+import { IoMdArrowBack, IoIosLogOut } from 'react-icons/io';
 import _ from 'lodash';
 import { FaPencil } from 'react-icons/fa6';
 import CreatableSelect from 'react-select/creatable';
@@ -37,6 +37,7 @@ import DialogTitle$1 from '@mui/material/DialogTitle';
 import DialogContent$1 from '@mui/material/DialogContent';
 import DialogActions$1 from '@mui/material/DialogActions';
 import Typography$1 from '@mui/material/Typography';
+import { useLocation, Link } from 'react-router-dom';
 
 var setLoading = createAction("common/setLoading");
 var setAlert = createAction("common/setAlert");
@@ -136,7 +137,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var styleGlobal = {"btn-login-google":"_2HqmH","block-login":"_wWIyO","box-login":"_38Lo1","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi","dropdown-academy":"_3CMVp","image-academy":"_2ibYC","academy-btn":"_1JMRU","switch-icon":"_N4FNf","dropdown-content-academy":"_31Dr0","dropdown-academy-item":"_3bjcz","noGutters":"_31ZQk","custom-col-2":"_3yXyK","custom-col-3":"_1RsJQ","custom-col-5":"_L42CP","custom-col-10":"_2u6eL","custom-row":"_8x7OP","custom-col":"_1JmTh","custom-col-4":"_3HO1e","custom-col-8":"_Oy31M","custom-col-12":"_3aUKo","custom-container":"_39LRs","form-label":"__Ut-u","form-control":"_2k4dX","btn-outline-primary":"_2PWdX","sort-icons":"_mQvLF","active":"_3oAH-","form-select":"_3W3aw","truncate":"_3NJzN"};
+var styles = {"btn-login-google":"_2HqmH","block-login":"_wWIyO","box-login":"_38Lo1","dropdown-menu":"_1krbH","header-avatar":"_RQaHE","dropdown-menu-flag":"_XK8oS","dropdown-content":"_3ys4W","dropdown-change":"_ToOW_","item-address":"_3sQlR","item-logout":"_3bqSM","title-address":"_1jgSI","img-avatar":"_35Ttz","item-contact":"_1wc7o","content-text":"_3S4f2","dropdown-content-language":"_3ajui","dropdown-item-language":"_3Y_y4","dropdown-item-language-active":"_CzNMi","dropdown-academy":"_3CMVp","image-academy":"_2ibYC","image-academy--item":"_3RDWF","academy-btn":"_1JMRU","switch-icon":"_N4FNf","dropdown-content-academy":"_31Dr0","dropdown-academy-item":"_3bjcz","noGutters":"_31ZQk","custom-col-2":"_3yXyK","custom-col-3":"_1RsJQ","custom-col-5":"_L42CP","custom-col-10":"_2u6eL","custom-row":"_8x7OP","custom-col":"_1JmTh","custom-col-4":"_3HO1e","custom-col-8":"_Oy31M","custom-col-12":"_3aUKo","custom-container":"_39LRs","form-label":"__Ut-u","form-control":"_2k4dX","btn-outline-primary":"_2PWdX","sort-icons":"_mQvLF","active":"_3oAH-","form-select":"_3W3aw","truncate":"_3NJzN","headers":"_3xnI5","logo-container":"_3YG70","tabBox":"_1CQPn","routerBox":"_3hx2T","tabText":"_3UyhW","router-link-active":"_1TGKA","router-link":"_1AqMh","userImg":"_2RI6G","disabled-link":"_3aVHg"};
 
 var AuthenticationMessage;
 (function (AuthenticationMessage) {
@@ -463,18 +464,18 @@ var BlockLogin = function BlockLogin(_ref) {
     var handleSubmit = formikProps.handleSubmit;
     return React.createElement(Grid, {
       container: true,
-      className: "" + styleGlobal["box-login"]
+      className: "" + styles["box-login"]
     }, React.createElement(Grid, {
       item: true,
       className: "p-0 d-flex justify-content-center"
     }, React.createElement("form", {
-      className: "" + styleGlobal["block-login"],
+      className: "" + styles["block-login"],
       onSubmit: handleSubmit
     }, React.createElement("div", {
-      className: "" + styleGlobal["block-form"]
+      className: "" + styles["block-form"]
     }, React.createElement("img", {
       src: "/images/logo.jpeg",
-      className: "" + styleGlobal["img-login-rectangle"]
+      className: "" + styles["img-login-rectangle"]
     }), React.createElement("div", {
       className: "p-0 mt-1 mb-4"
     }, React.createElement(GoogleLogin, {
@@ -483,7 +484,7 @@ var BlockLogin = function BlockLogin(_ref) {
       onSuccess: onSuccessGoogle,
       onFailure: onFailureGoogle,
       cookiePolicy: "single_host_origin",
-      className: "" + styleGlobal["btn-login-google"],
+      className: "" + styles["btn-login-google"],
       isSignedIn: true
     }))))));
   });
@@ -547,7 +548,7 @@ var Login = function Login(_ref) {
   var _useLogin = useLogin$1(onNavigate),
     defaultInfo = _useLogin.defaultInfo;
   return React.createElement("div", {
-    className: styleGlobal["login"] + " container-fluid font-family-lato"
+    className: styles["login"] + " container-fluid font-family-lato"
   }, React.createElement(Grid, {
     container: true,
     spacing: 3,
@@ -1579,6 +1580,7 @@ var comparison_of_top_rankings_and_problem_solving_order = "상위권과 문제
 var my_answers = "내 해답";
 var request_for_consultation = "상담요청";
 var ask_a_question_with_a_problem = "문제로 질문하기";
+var live = "살다";
 var lang_ko = {
 	problem_solving: problem_solving,
 	my_story: my_story,
@@ -1868,7 +1870,8 @@ var lang_ko = {
 	comparison_of_top_rankings_and_problem_solving_order: comparison_of_top_rankings_and_problem_solving_order,
 	my_answers: my_answers,
 	request_for_consultation: request_for_consultation,
-	ask_a_question_with_a_problem: ask_a_question_with_a_problem
+	ask_a_question_with_a_problem: ask_a_question_with_a_problem,
+	live: live
 };
 
 var problem_solving$1 = "Problem Solving";
@@ -2196,6 +2199,7 @@ var comparison_of_top_rankings_and_problem_solving_order$1 = "Comparison of top
 var my_answers$1 = "My answers";
 var request_for_consultation$1 = "Request for consultation";
 var ask_a_question_with_a_problem$1 = "Ask a question with a problem";
+var live$1 = "live";
 var lang_en = {
 	problem_solving: problem_solving$1,
 	my_story: my_story$1,
@@ -2520,7 +2524,8 @@ var lang_en = {
 	comparison_of_top_rankings_and_problem_solving_order: comparison_of_top_rankings_and_problem_solving_order$1,
 	my_answers: my_answers$1,
 	request_for_consultation: request_for_consultation$1,
-	ask_a_question_with_a_problem: ask_a_question_with_a_problem$1
+	ask_a_question_with_a_problem: ask_a_question_with_a_problem$1,
+	live: live$1
 };
 
 i18n.use(initReactI18next).init({
@@ -2801,7 +2806,8 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
   var role = _ref.role,
     navigate = _ref.navigate,
     homeAcademyUrl = _ref.homeAcademyUrl,
-    homeUrl = _ref.homeUrl;
+    homeUrl = _ref.homeUrl,
+    hideAcademyName = _ref.hideAcademyName;
   var _useSwitchAcademy = useSwitchAcademy(role, navigate, homeAcademyUrl, homeUrl),
     academyList = _useSwitchAcademy.academyList,
     handleSwitchAcademy = _useSwitchAcademy.handleSwitchAcademy,
@@ -2835,15 +2841,15 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
   };
   return React.createElement(Fragment$1, null, React.createElement(Button, {
     onClick: handleOpen,
-    className: "" + styleGlobal["academy-btn"],
+    className: "" + styles["academy-btn"],
     sx: _extends({}, popoverStyle)
   }, React.createElement("div", {
-    className: "" + styleGlobal["image-academy"]
+    className: styles["image-academy"] + " me-0 me-lg-2"
   }, selectedAcademy !== null && selectedAcademy !== void 0 && selectedAcademy.image ? React.createElement("img", {
     src: selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.image,
     alt: selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.name
-  }) : React.createElement("span", null, firstLetter)), React.createElement(Typography, {
-    className: "text-start",
+  }) : React.createElement("span", null, firstLetter)), !hideAcademyName && React.createElement(Typography, {
+    className: "text-start d-none d-lg-block",
     sx: {
       fontSize: 14,
       fontWeight: 600,
@@ -2851,7 +2857,7 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
       minWidth: 150
     }
   }, (selectedAcademy === null || selectedAcademy === void 0 ? void 0 : selectedAcademy.name) || t(role === Role.Admin ? "switch_academy_admin" : "switch_academy")), React.createElement("div", {
-    className: "" + styleGlobal["switch-icon"]
+    className: styles["switch-icon"] + " d-none d-lg-flex"
   }, React.createElement(GoArrowSwitch, {
     size: 14
   }))), (isSuperAdmin || !isAdmin) && React.createElement(Popover, {
@@ -2872,7 +2878,10 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
           p: 0.5,
           mt: 1,
           ml: 0.75,
-          width: 300,
+          width: {
+            xs: 200,
+            lg: 300
+          },
           minWidth: "unset!important"
         }
       }
@@ -2893,7 +2902,7 @@ var TheAcademyDropdown = function TheAcademyDropdown(_ref) {
         fontWeight: 600
       }
     }, React.createElement("div", {
-      className: "" + styleGlobal["image-academy"]
+      className: styles["image-academy"] + " " + styles["image-academy--item"]
     }, option.image ? React.createElement(Box$1, {
       component: "img",
       alt: option.name,
@@ -3003,7 +3012,7 @@ var CustomSelect = function CustomSelect(_ref) {
   }, rest));
 };
 
-var styles = {"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$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 iconPersonNoActive = function iconPersonNoActive(_ref) {
   var _ref$width = _ref.width,
@@ -3149,7 +3158,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
     padding: "4px 0"
   }, React.createElement(Box, null, showName && isStudent && React.createElement(Box, {
     gap: "8px",
-    className: " " + styles["name-sender"],
+    className: " " + styles$1["name-sender"],
     display: "flex",
     alignItems: "center",
     flexDirection: "row"
@@ -3204,7 +3213,7 @@ var ChatRightItem = function ChatRightItem(_ref) {
       objectFit: "contain"
     }
   })) : React.createElement("div", {
-    className: styles["wrap-content"] + " " + styles["content-chat-receiver"],
+    className: styles$1["wrap-content"] + " " + styles$1["content-chat-receiver"],
     style: {
       "float": "inline-end"
     }
@@ -3242,7 +3251,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
     display: "flex",
     padding: "4px",
     flexDirection: "row",
-    className: "" + styles["name-sender"]
+    className: "" + styles$1["name-sender"]
   }, isStudent ? React.createElement(Fragment$1, null, React.createElement(Typography, {
     fontWeight: 500,
     fontSize: 14,
@@ -3282,7 +3291,7 @@ var ChatLeftItem = function ChatLeftItem(_ref) {
       objectFit: "contain"
     }
   })) : React.createElement("div", {
-    className: styles["wrap-content"] + " " + styles["content-chat-sender"]
+    className: styles$1["wrap-content"] + " " + styles$1["content-chat-sender"]
   }, React.createElement(Typography, {
     fontWeight: 500,
     fontSize: "14px",
@@ -3495,7 +3504,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
     _objectDestructuringEmpty(_ref2);
     return React.createElement(Form, null, React.createElement("label", {
       htmlFor: "content",
-      className: styles['form-label'] + "  " + styles['form-label-dialog']
+      className: styles$1['form-label'] + "  " + styles$1['form-label-dialog']
     }, "\uC9C8\uBB38\uD560 \uBB38\uC81C"), React.createElement(Field, {
       id: "content",
       style: {
@@ -3504,7 +3513,7 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       name: "content",
       validate: validate,
       placeholder: "\uBB38\uC81C\uAC00 \uC5B4\uB824\uC6CC\uC694",
-      className: styles['form-control']
+      className: styles$1['form-control']
     }), React.createElement(DialogActions, {
       sx: {
         display: 'flex',
@@ -3513,14 +3522,14 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
         padding: '12px'
       }
     }, React.createElement(Button, {
-      className: styles['btn-cancel'],
+      className: styles$1['btn-cancel'],
       onClick: onClose
     }, React.createElement(Typography, {
       fontWeight: 700,
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button, {
-      className: styles['btn-register'],
+      className: styles$1['btn-register'],
       type: "submit"
     }, React.createElement(Typography, {
       fontWeight: 700,
@@ -3569,14 +3578,14 @@ var UpdateMessageDialog = function UpdateMessageDialog(_ref) {
       padding: '12px'
     }
   }, React.createElement(Button, {
-    className: styles['btn-cancel'],
+    className: styles$1['btn-cancel'],
     onClick: onClose
   }, React.createElement(Typography, {
     fontWeight: 700,
     fontSize: '14px',
     lineHeight: '16.71px'
   }, "\uCDE8\uC18C")), React.createElement(Button, {
-    className: styles['btn-register'],
+    className: styles$1['btn-register'],
     sx: {
       bgcolor: !(selectedFile !== null && selectedFile !== void 0 && selectedFile.content) ? "#EBEBFF !important" : "#5458D5 !important"
     },
@@ -3750,7 +3759,7 @@ var ChatList = function ChatList(_ref) {
   var isStudent = roles === null || roles === void 0 ? void 0 : roles.includes(Roles$1.Student);
   return React.createElement("ul", {
     ref: listItemRef,
-    className: styles["list"] + " " + styles["padding-content"] + " d-flex h-100 flex-column mb-0  " + (!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) ? 'justify-content-center' : '')
+    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' : '')
   }, !(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && React.createElement("li", {
     className: "text-muted text-center fst-italic fs-6"
   }, "No message"), !!(filterMessage !== null && filterMessage !== void 0 && filterMessage.length) && filterMessage.map(function (message) {
@@ -3857,7 +3866,7 @@ var InputChat = function InputChat(_ref) {
     color: "#fff",
     size: 30
   }))), React.createElement("input", {
-    className: styles["input-chat"],
+    className: styles$1["input-chat"],
     style: {
       border: "none"
     },
@@ -3884,7 +3893,7 @@ var InputChat = function InputChat(_ref) {
     sx: {
       bgcolor: isCompleted ? "#EBEBFF !important" : "#5458D5 !important"
     },
-    className: styles["btn-send"],
+    className: styles$1["btn-send"],
     disabled: isCompleted,
     onClick: handleSubmit
   }, React.createElement(iconSendMessage, null), React.createElement(Typography, {
@@ -3939,7 +3948,8 @@ var iconChecked = function iconChecked(_ref) {
 };
 
 var ellipsisText = function ellipsisText(text, maxLength) {
-  return text.length > maxLength ? text.slice(0, maxLength) + " ..." : text;
+  if (!text) return text;
+  return (text === null || text === void 0 ? void 0 : text.length) > maxLength ? text.slice(0, maxLength) + " ..." : text;
 };
 var formatDataMyAnswer = function formatDataMyAnswer(inputData, categories) {
   var uniqueCategories = new Set();
@@ -4037,7 +4047,7 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 600,
       fontSize: "12px",
       lineHeight: "14.32px"
-    }, ellipsisText(examTitle, 15)), React.createElement(Box, {
+    }, ellipsisText(examTitle || "", 15)), React.createElement(Box, {
       display: "flex",
       flexDirection: "row",
       gap: "4px"
@@ -4117,7 +4127,7 @@ var ChatHeader = function ChatHeader(_ref) {
       alignItems: "center",
       gap: "24px",
       color: "#5458D5"
-    }, React.createElement(Box, {
+    }, isTabletUp && React.createElement(Box, {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
@@ -4130,7 +4140,7 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 700,
       fontSize: "14px",
       lineHeight: "16.71px"
-    }, fullName)), React.createElement(Box, {
+    }, ellipsisText(fullName || "", 10))), React.createElement(Box, {
       display: "flex",
       alignItems: "center",
       gap: "24px",
@@ -4139,7 +4149,7 @@ var ChatHeader = function ChatHeader(_ref) {
       fontWeight: 600,
       fontSize: "12px",
       lineHeight: "14.32px"
-    }, examTitle) : React.createElement(Box, {
+    }, ellipsisText(examTitle || "", 10)) : React.createElement(Box, {
       display: "flex",
       alignItems: "end",
       gap: "16px",
@@ -4284,7 +4294,7 @@ var ChatContainer = function ChatContainer(_ref) {
     container: true
   }, React.createElement(ChatHeader, Object.assign({}, chatHeaderProps)), React.createElement("div", {
     ref: listRef,
-    className: "flex-grow-1 " + styles["body"],
+    className: "flex-grow-1 " + styles$1["body"],
     style: {
       height: "60vh",
       overflowY: "scroll",
@@ -4789,7 +4799,7 @@ var InputText = function InputText(props) {
   }, props));
 };
 
-var styles$1 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question--active":"_3IHYm","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
+var styles$2 = {"question":"_2uc_W","question-article":"_2p7kY","question-title":"_2tHmc","question--active":"_3IHYm","question-label":"_26ATj","question-input":"_3R8PR","question-btn":"_1VZac"};
 
 var SCORE_OPTIONS = Array.from({
   length: 10
@@ -4846,12 +4856,15 @@ var QuestionView = function QuestionView(_ref) {
   var handleChangeCorrectAnswer = function handleChangeCorrectAnswer(e) {
     return onChangeCorrectAnswers(e.target.value, index);
   };
-  return React.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, React.createElement("div", {
-    className: "d-flex flex-grow-1"
+  return React.createElement(Grid, {
+    container: true,
+    spacing: "16px"
+  }, React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 9
   }, React.createElement("div", {
-    className: styles$1["question-title"] + " me-2 text-nowrap"
+    className: styles$2["question-title"] + " me-2 text-nowrap"
   }, t("problem_number_question", {
     number: question.questionOrder + 1
   })), React.createElement(FormControl, {
@@ -4867,7 +4880,7 @@ var QuestionView = function QuestionView(_ref) {
   }).map(function (i) {
     return React.createElement(FormControlLabel, {
       key: i,
-      className: styles$1["question-label"] + " w-fit",
+      className: styles$2["question-label"] + " w-fit",
       labelPlacement: "top",
       value: i,
       onChange: handleChangeCorrectAnswer,
@@ -4879,10 +4892,12 @@ var QuestionView = function QuestionView(_ref) {
         number: i
       })
     });
-  })))), React.createElement("div", {
-    className: "d-flex align-items-center"
+  })))), React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 3,
+    mb: "16px"
   }, React.createElement(FormControl, {
-    className: "mx-3",
     style: {
       width: "140px"
     }
@@ -5086,6 +5101,8 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
       subjectId: defaultCategoryOptions === undefined ? selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.id : undefined
     }),
     categoryOptions = _useCategorySelect.categoryOptions;
+  var theme = useTheme();
+  var isTabletUp = useMediaQuery(theme.breakpoints.up('lg'));
   var handleChangeQuestionCount = function handleChangeQuestionCount(value) {
     onChangeQuestionCount(article, value === null || value === void 0 ? void 0 : value.value, answerCount);
   };
@@ -5105,7 +5122,7 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     onDelete === null || onDelete === void 0 ? void 0 : onDelete(article);
   };
   return React.createElement("div", {
-    className: "d-flex " + styles$1["question"] + " " + (isActive ? styles$1["question--active"] : "")
+    className: "d-flex " + styles$2["question"] + " " + (isActive ? styles$2["question--active"] : "")
   }, React.createElement("div", {
     className: "py-1"
   }, React.createElement(PiDotsNineLight, {
@@ -5113,20 +5130,30 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
   })), React.createElement("div", {
     className: "px-4"
   }, React.createElement("p", {
-    className: "mb-0 " + styles$1["question-article"]
+    className: "mb-0 " + styles$2["question-article"]
   }, t("article_number")), React.createElement("p", {
-    className: "text-center " + styles$1["question-article"]
+    className: "text-center " + styles$2["question-article"]
   }, article)), React.createElement("div", {
     className: "flex-grow-1"
   }, React.createElement(Grid, {
     container: true,
     spacing: 3
-  }, React.createElement(Grid, {
+  }, !isTabletUp && React.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 12,
+    className: "d-flex justify-content-end"
+  }, isDeletable && !isDisabled && React.createElement("div", null, React.createElement(IconButton, {
+    onClick: handleDelete
+  }, React.createElement(FaTrash, {
+    size: 16,
+    className: "text-danger"
+  })))), React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 3
   }, React.createElement(FormGroup, null, React.createElement(FormLabel, {
     htmlFor: "question_count",
-    className: styles$1["question-label"] + " form-label"
+    className: styles$2["question-label"] + " form-label"
   }, t("question_count")), React.createElement(QuestionCountSelector, {
     id: "question_count",
     value: questionCount,
@@ -5134,10 +5161,11 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     isDisabled: isDisabled
   }))), React.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 12,
+    lg: 3
   }, React.createElement(FormGroup, null, React.createElement(FormLabel, {
     htmlFor: "category",
-    className: styles$1["question-label"] + " form-label"
+    className: styles$2["question-label"] + " form-label"
   }, t("category")), React.createElement(ArticleCategorySelector, {
     id: "category",
     value: categoryId,
@@ -5147,16 +5175,17 @@ var ArticleGroupView = function ArticleGroupView(_ref) {
     placeholder: t("select_category")
   }))), React.createElement(Grid, {
     item: true,
-    xs: 3
+    xs: 12,
+    lg: 3
   }, React.createElement(FormGroup, null, React.createElement(FormLabel, {
     htmlFor: "answer_count",
-    className: styles$1["question-label"] + " form-label"
+    className: styles$2["question-label"] + " form-label"
   }, t("answer_count")), React.createElement(AnswerCountSelector, {
     id: "answer_count",
     value: answerCount,
     onChange: handleChangeAnswerCount,
     isDisabled: isDisabled
-  }))), React.createElement(Grid, {
+  }))), isTabletUp && React.createElement(Grid, {
     item: true,
     xs: 3,
     className: "d-flex justify-content-end"
@@ -5248,6 +5277,8 @@ var ChapterBox = function ChapterBox(_ref) {
   var handleUpdateArticleQuestionScore = function handleUpdateArticleQuestionScore(article, index, score) {
     onUpdateArticleQuestion === null || onUpdateArticleQuestion === void 0 ? void 0 : onUpdateArticleQuestion(article, index, score, "score", data.articles, data.id, parentChapterId);
   };
+  var theme = useTheme();
+  var isTabletUp = useMediaQuery(theme.breakpoints.up('lg'));
   var handleChangeName = function handleChangeName(e) {
     var text = e.target.value;
     onChangeName === null || onChangeName === void 0 ? void 0 : onChangeName(text, data.id, parentChapterId);
@@ -5295,17 +5326,52 @@ var ChapterBox = function ChapterBox(_ref) {
     className: "text-danger"
   }))), React.createElement("div", {
     className: "p-3 d-flex justify-content-between"
+  }, React.createElement(Grid, {
+    container: true
+  }, React.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, React.createElement(Grid, {
+    container: true,
+    spacing: 2
+  }, !isTabletUp && React.createElement(Grid, {
+    item: true,
+    xs: 12
   }, React.createElement(Stack, {
-    spacing: 2,
-    direction: "row"
-  }, React.createElement(Box, {
+    direction: "row",
+    justifyContent: "end",
+    spacing: 2
+  }, !parentChapterId && !data.articles.length && React.createElement(Button, {
+    className: "mx-1",
+    variant: "contained",
+    color: "primary",
+    disabled: isReadonly,
+    startIcon: React.createElement(FaPlus, {
+      size: 12
+    }),
+    onClick: handleClickAddSubchapter
+  }, t("add_subchapter")), data.subChapters.length === 0 && React.createElement(Button, {
+    className: "mx-1",
+    variant: "contained",
+    color: "success",
+    disabled: isReadonly,
+    startIcon: React.createElement(FaPlus, {
+      size: 12
+    }),
+    onClick: handleAddArticle
+  }, t("add_article")))), React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 4,
     sx: {
       display: "flex",
       alignItems: "center",
-      marginRight: "16px",
       width: "50%"
     }
   }, React.createElement("label", {
+    style: {
+      minWidth: "90px"
+    },
     className: "fw-bold text-nowrap me-2"
   }, t("page.from"), ":"), React.createElement(InputText, {
     type: "number",
@@ -5315,13 +5381,19 @@ var ChapterBox = function ChapterBox(_ref) {
     onChange: handleChangePageFrom,
     placeholder: t("page.from_placeholder"),
     error: data.pageFrom > data.pageTo || data.pageFrom < 0
-  })), React.createElement(Box, {
+  })), React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 4,
     sx: {
       display: "flex",
       alignItems: "center",
       width: "50%"
     }
   }, React.createElement("label", {
+    style: {
+      minWidth: "90px"
+    },
     className: "fw-bold text-nowrap me-2"
   }, t("page.to"), ":"), React.createElement(InputText, {
     type: "number",
@@ -5331,7 +5403,10 @@ var ChapterBox = function ChapterBox(_ref) {
     onChange: handleChangePageTo,
     placeholder: t("page.to_placeholder"),
     error: data.pageTo < data.pageFrom
-  }))), React.createElement(Stack, {
+  })), isTabletUp && React.createElement(Grid, {
+    item: true,
+    lg: 4
+  }, React.createElement(Stack, {
     direction: "row",
     justifyContent: "end",
     spacing: 2
@@ -5353,7 +5428,7 @@ var ChapterBox = function ChapterBox(_ref) {
       size: 12
     }),
     onClick: handleAddArticle
-  }, t("add_article")))), React.createElement("div", {
+  }, t("add_article")))))))), React.createElement("div", {
     className: "p-3"
   }, React.createElement(Stack, {
     spacing: 2
@@ -6616,9 +6691,9 @@ var SubjectSelector = function SubjectSelector(_ref) {
     !minimumTextSearchLength && defaultValueAtFirst && options.length && onChange(options[0], subjects[0]);
   }, [JSON.stringify(options), JSON.stringify(subjects), defaultValueAtFirst, minimumTextSearchLength]);
   return React.createElement(FormGroup, {
-    className: "" + styleGlobal["filter-item"]
+    className: "" + styles["filter-item"]
   }, !!title && React.createElement("label", {
-    className: "" + styleGlobal["title-form"]
+    className: "" + styles["title-form"]
   }, title), React.createElement(CustomSelectOption, {
     options: options,
     inputValue: searchString,
@@ -7072,7 +7147,7 @@ var LayoutList = function LayoutList(_ref) {
   var children = _ref.children,
     title = _ref.title;
   return React.createElement(Box, {
-    className: 'bg-white p-5'
+    className: 'bg-white p-3'
   }, React.createElement(Stack, {
     direction: "row",
     alignItems: "center",
@@ -7087,12 +7162,12 @@ var SortIcon = function SortIcon(_ref) {
   var isAscending = _ref.isAscending,
     onClick = _ref.onClick;
   return React.createElement("div", {
-    className: "d-flex flex-column " + styleGlobal["sort-icons"],
+    className: "d-flex flex-column " + styles["sort-icons"],
     onClick: onClick
   }, React.createElement(FaSortUp, {
-    className: isAscending === true ? styleGlobal["active"] : ""
+    className: isAscending === true ? styles["active"] : ""
   }), React.createElement(FaSortDown, {
-    className: isAscending === false ? styleGlobal["active"] : ""
+    className: isAscending === false ? styles["active"] : ""
   }));
 };
 
@@ -7595,17 +7670,17 @@ var ExamDetailView = function ExamDetailView(_ref) {
   return React.createElement(Grid, {
     container: true,
     spacing: 3,
-    className: className + " " + styleGlobal["custom-row"]
+    className: className + " " + styles["custom-row"]
   }, React.createElement(Grid, {
     item: true,
     xs: 5,
     className: 'mb-2'
   }, React.createElement("label", {
-    className: styleGlobal["form-label"] + " " + styles$1["question-label"],
+    className: styles["form-label"] + " " + styles$2["question-label"],
     htmlFor: "title"
   }, t("title")), React.createElement("input", {
     disabled: isDisabled,
-    className: "" + styleGlobal["form-control"],
+    className: "" + styles["form-control"],
     value: exam.title,
     id: "title",
     placeholder: t("enter_title"),
@@ -7615,7 +7690,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
     xs: 3,
     className: 'mb-2'
   }, React.createElement("label", {
-    className: styleGlobal["form-label"] + " " + styles$1["question-label"],
+    className: styles["form-label"] + " " + styles$2["question-label"],
     htmlFor: "duration"
   }, t("duration")), React.createElement(CustomSelect, {
     inputId: "duration",
@@ -7628,7 +7703,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
     xs: 3,
     className: 'mb-2'
   }, React.createElement("label", {
-    className: styleGlobal["form-label"] + " " + styles$1["question-label"],
+    className: styles["form-label"] + " " + styles$2["question-label"],
     htmlFor: "duration"
   }, t("subject"), " ", selectedSubject === null || selectedSubject === void 0 ? void 0 : selectedSubject.name), React.createElement(CustomSelect, {
     inputId: "subject",
@@ -7659,7 +7734,7 @@ var ExamDetailView = function ExamDetailView(_ref) {
     xs: 12
   }, React.createElement("button", {
     disabled: isDisabled,
-    className: styleGlobal["btn-outline-primary"] + " w-100 d-flex justify-content-center align-items-center " + styles$1["question-btn"] + " mt-3",
+    className: styles["btn-outline-primary"] + " w-100 d-flex justify-content-center align-items-center " + styles$2["question-btn"] + " mt-3",
     onClick: handleAddArticle
   }, React.createElement(FaPlusCircle, {
     className: "me-2"
@@ -9861,7 +9936,7 @@ Object.defineProperty(exports,"__esModule",{value:!0});var _typeof="function"==t
 
 var ReactApexChart = unwrapExports(reactApexcharts_min);
 
-var styles$2 = {"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","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","compareGrass":"_1_fJu","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"};
+var styles$3 = {"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","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","compareGrass":"_1_fJu","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"};
 
 var iconStarQuestion = function iconStarQuestion(_ref) {
   var _ref$width = _ref.width,
@@ -10152,7 +10227,7 @@ function CreateNewQuestionDialog(_ref) {
       padding: "24px 24px 40px 24px"
     }, React.createElement(Stack, null, React.createElement("label", {
       htmlFor: "questions",
-      className: styleGlobal['form-label'] + "  " + styles$2['form-label-dialog']
+      className: styles['form-label'] + "  " + styles$3['form-label-dialog']
     }, "\uC9C8\uBB38\uD560 \uBB38\uC81C"), React.createElement(Field, {
       as: "select",
       id: "questions",
@@ -10160,7 +10235,7 @@ function CreateNewQuestionDialog(_ref) {
       style: {
         width: "100%"
       },
-      className: "" + styleGlobal['form-select']
+      className: "" + styles['form-select']
     }, questions === null || questions === void 0 ? void 0 : questions.map(function (question) {
       return React.createElement("option", {
         value: question === null || question === void 0 ? void 0 : question.id
@@ -10169,7 +10244,7 @@ function CreateNewQuestionDialog(_ref) {
       }));
     }))), React.createElement(Stack, null, React.createElement("label", {
       htmlFor: "content-question",
-      className: styleGlobal['form-label'] + "  " + styles$2['form-label-dialog']
+      className: styles['form-label'] + "  " + styles$3['form-label-dialog']
     }, "\uC9C8\uBB38 \uB0B4\uC6A9"), React.createElement(Box, {
       position: 'relative',
       display: 'flex',
@@ -10182,7 +10257,7 @@ function CreateNewQuestionDialog(_ref) {
       },
       name: "content",
       placeholder: "\uBB38\uC81C\uAC00 \uC5B4\uB824\uC6CC\uC694",
-      className: styleGlobal['form-control']
+      className: styles['form-control']
     }), (errors === null || errors === void 0 ? void 0 : errors.content) && React.createElement(Box, {
       position: 'absolute',
       right: 0,
@@ -10205,14 +10280,14 @@ function CreateNewQuestionDialog(_ref) {
         borderTop: "1px solid #CED2DA"
       }
     }, React.createElement(Button$1, {
-      className: styles$2['btn-cancel'],
+      className: styles$3['btn-cancel'],
       onClick: toggleCreateQuestion
     }, React.createElement(Typography$1, {
       fontWeight: 700,
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button$1, {
-      className: styles$2['btn-register'],
+      className: styles$3['btn-register'],
       type: "submit"
     }, React.createElement(Typography$1, {
       fontWeight: 700,
@@ -10244,7 +10319,7 @@ function MyAnswer(_ref) {
     toggleCreateQuestion();
   };
   return React.createElement("div", {
-    className: styles$2["myanswer"]
+    className: styles$3["myanswer"]
   }, formattedData && formattedData.length > 0 && formattedData.map(function (item) {
     return React.createElement("div", {
       key: item.category.id
@@ -10252,9 +10327,9 @@ function MyAnswer(_ref) {
       bgcolor: "#F9FAFB",
       flexDirection: "row",
       padding: "12px",
-      className: styles$2["myAnswerItem"] + " " + styleGlobal["noGutters"]
+      className: styles$3["myAnswerItem"] + " " + styles["noGutters"]
     }, React.createElement("div", {
-      className: styleGlobal["custom-col-2"],
+      className: styles["custom-col-2"],
       style: {
         display: "flex",
         gap: "4px"
@@ -10266,7 +10341,7 @@ function MyAnswer(_ref) {
         color: "#97A1AF"
       }
     }, "\uBB38\uC81C \uBC88\uD638")), React.createElement("div", {
-      className: styleGlobal["custom-col-2"],
+      className: styles["custom-col-2"],
       style: {
         display: "flex",
         gap: "4px"
@@ -10278,7 +10353,7 @@ function MyAnswer(_ref) {
         color: "#97A1AF"
       }
     }, "\uC815\uB2F5")), React.createElement("div", {
-      className: styleGlobal["custom-col-2"],
+      className: styles["custom-col-2"],
       style: {
         display: "flex",
         gap: "4px"
@@ -10290,7 +10365,7 @@ function MyAnswer(_ref) {
         color: "#97A1AF"
       }
     }, "\uD480\uC774 \uC2DC\uAC04")), React.createElement("div", {
-      className: styleGlobal["custom-col-2"],
+      className: styles["custom-col-2"],
       style: {
         display: "flex",
         alignItems: "center",
@@ -10303,7 +10378,7 @@ function MyAnswer(_ref) {
         color: "#97A1AF"
       }
     }, "\uC0C1\uC704\uAD8C \uBE44\uAD50")), React.createElement("div", {
-      className: styleGlobal["custom-col-2"],
+      className: styles["custom-col-2"],
       style: {
         display: "flex",
         alignItems: "center",
@@ -10316,7 +10391,7 @@ function MyAnswer(_ref) {
         color: "#97A1AF"
       }
     }, "\uC804\uCCB4 \uC815\uB2F5\uB960"))), React.createElement("div", {
-      className: styles$2["titleMyAnswer2"]
+      className: styles$3["titleMyAnswer2"]
     }, React.createElement(Typography, {
       sx: {
         color: "#97A1AF",
@@ -10329,7 +10404,7 @@ function MyAnswer(_ref) {
         fontWeight: 700
       }
     }, item.category.name)), React.createElement("div", {
-      className: styles$2["contentMyAnswer"]
+      className: styles$3["contentMyAnswer"]
     }, item.questions.map(function (question, index) {
       return React.createElement("div", {
         style: isOpenTime[question.id] ? {
@@ -10338,9 +10413,9 @@ function MyAnswer(_ref) {
         } : {},
         key: question.id
       }, React.createElement("div", {
-        className: styles$2["myAnswerItem"] + " " + styleGlobal["noGutters"]
+        className: styles$3["myAnswerItem"] + " " + styles["noGutters"]
       }, React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center",
@@ -10348,22 +10423,22 @@ function MyAnswer(_ref) {
           padding: "4px 8px"
         }
       }, question.isStar ? React.createElement(iconStarQuestion, null) : React.createElement(iconNoStarQuestion, null), React.createElement("span", {
-        className: styles$2["questionOrder"]
+        className: styles$3["questionOrder"]
       }, question.questionOrder + 1, "\uBC88")), React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center",
           gap: "4px"
         }
       }, question.isCorrect && question.selectedAnswers !== "" && React.createElement(Fragment$1, null, React.createElement(iconCorrectAnswer, null), React.createElement("span", {
-        className: styles$2["answerCorrect"]
+        className: styles$3["answerCorrect"]
       }, "\uC815\uB2F5")), !question.isCorrect && question.selectedAnswers !== "" && React.createElement(Fragment$1, null, React.createElement(iconCorrectAnswer$1, null), React.createElement("span", {
-        className: styles$2["answerIncorrect"]
+        className: styles$3["answerIncorrect"]
       }, "\uC624\uB2F5")), question.selectedAnswers === "" && React.createElement(Fragment$1, null, React.createElement(iconNoGrass, null), React.createElement("span", {
-        className: styles$2["answerNograss"]
+        className: styles$3["answerNograss"]
       }, "\uD480\uC774 \uC5C6\uC74C"))), React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center"
@@ -10372,14 +10447,14 @@ function MyAnswer(_ref) {
         style: {
           margin: 0
         },
-        className: styles$2["answer-response"] + " " + styles$2["answer-response-" + question.answerResponseSignal]
+        className: styles$3["answer-response"] + " " + styles$3["answer-response-" + question.answerResponseSignal]
       }, formatTimeSecond(Math.round(question.duration), t)) : React.createElement("p", {
         style: {
           margin: 0
         },
-        className: styles$2["answerNoTime"]
+        className: styles$3["answerNoTime"]
       }, "\uC2DC\uAC04 \uC5C6\uC74C")), React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center"
@@ -10388,15 +10463,15 @@ function MyAnswer(_ref) {
         style: {
           margin: 0
         },
-        className: styles$2["answer-response"] + " " + styles$2["answer-response-" + question.answerResponseSignal]
+        className: styles$3["answer-response"] + " " + styles$3["answer-response-" + question.answerResponseSignal]
       }, formatTimeSecond(Math.round(question.topDuration - question.duration), t)) : React.createElement("p", {
         style: {
           margin: 0,
           textAlign: "center"
         },
-        className: styles$2["answerNoTime"]
+        className: styles$3["answerNoTime"]
       }, "-")), React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center"
@@ -10405,14 +10480,14 @@ function MyAnswer(_ref) {
         style: {
           margin: 0
         },
-        className: styles$2["answer-response"] + " " + styles$2["answer-response-" + question.answerResponseSignal]
+        className: styles$3["answer-response"] + " " + styles$3["answer-response-" + question.answerResponseSignal]
       }, question.overallCorrectRate + "%") : React.createElement("p", {
         style: {
           margin: 0
         },
-        className: styles$2["answerNoTime"]
+        className: styles$3["answerNoTime"]
       }, "\uC2DC\uAC04 \uC5C6\uC74C")), isStudent && React.createElement("div", {
-        className: styleGlobal["custom-col-2"],
+        className: styles["custom-col-2"],
         style: {
           display: "flex",
           alignItems: "center",
@@ -10481,11 +10556,11 @@ var iconBtnNextChart = function iconBtnNextChart(_ref) {
 function CompareGrass(_ref) {
   var effectSize = _ref.effectSize;
   return React.createElement("div", {
-    className: styles$2["compareGrass"]
+    className: styles$3["compareGrass"]
   }, React.createElement("div", {
-    className: styles$2["tableCompareGrass"]
+    className: styles$3["tableCompareGrass"]
   }, React.createElement("div", {
-    className: styles$2["table-responsive"]
+    className: styles$3["table-responsive"]
   }, React.createElement(Table, {
     style: {
       width: "100%"
@@ -10495,7 +10570,7 @@ function CompareGrass(_ref) {
       borderBottom: "1px solid #E4E7EC"
     }
   }, React.createElement("tr", null, React.createElement("th", {
-    className: styles$2["thcolumn1"]
+    className: styles$3["thcolumn1"]
   }, "\uBB38\uC81C \uBC88\uD638"), React.createElement("th", {
     style: {
       textAlign: "center"
@@ -10519,14 +10594,14 @@ function CompareGrass(_ref) {
         borderBottom: "1px solid #e4e7ec"
       } : {}
     }, React.createElement("td", {
-      className: styles$2["tdcolumn1"]
+      className: styles$3["tdcolumn1"]
     }, "\uBB38\uC81C ", item.questionOrder + 1), React.createElement("td", {
       style: {
         textAlign: "center",
         color: "#202B37"
       }
     }, item.correctAnswers, "\uBC88"), React.createElement("td", {
-      className: styles$2["tdcolumn3"],
+      className: styles$3["tdcolumn3"],
       style: {
         color: item.isCorrect ? "#1EE288" : "#F34B4B"
       }
@@ -10536,7 +10611,7 @@ function CompareGrass(_ref) {
         color: "#414E62"
       }
     }, item.mostSelectedAnswers ? item.mostSelectedAnswers + "\uBC88" : ""), React.createElement("td", null, React.createElement("div", {
-      className: styles$2["classification"]
+      className: styles$3["classification"]
     }, item.problemCategories.map(function (problem, index) {
       return React.createElement("div", {
         key: index
@@ -10663,9 +10738,9 @@ function TrickyProblem(_ref) {
     return i.isStar && i.isCorrect;
   });
   return React.createElement("div", {
-    className: styles$2["wrapperProblem"]
+    className: styles$3["wrapperProblem"]
   }, React.createElement("div", {
-    className: !openProblem.problem1 ? styles$2["titleProblemClose"] : styles$2["titleProblem"],
+    className: !openProblem.problem1 ? styles$3["titleProblemClose"] : styles$3["titleProblem"],
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem1: !openProblem.problem1
@@ -10678,27 +10753,27 @@ function TrickyProblem(_ref) {
       fontWeight: 700
     }
   }, "\uAE4C\uB2E4\uB85C\uC6E0\uB358 \uBB38\uC81C"), openProblem.problem1 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem1 && React.createElement(Fragment$1, null, React.createElement("div", {
-    className: styles$2["titleTrickyProblem"]
+    className: styles$3["titleTrickyProblem"]
   }, React.createElement(iconX, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uD2C0\uB9B0 \uBB38\uC81C")), React.createElement("div", {
-    className: styles$2["wrongQuestions"]
+    className: styles$3["wrongQuestions"]
   }, !!inCorrectQuestions.length && inCorrectQuestions.map(function (question) {
     return React.createElement("span", {
       key: question.id,
-      className: styles$2["question"]
+      className: styles$3["question"]
     }, question.questionOrder + 1, "\uBC88");
   }), !data.questions.length && React.createElement("div", {
-    className: styles$2["noData"]
+    className: styles$3["noData"]
   }, "\uB370\uC774\uD130 \uC5C6\uC74C")), React.createElement("div", {
-    className: styles$2["titleTrickyProblem"]
+    className: styles$3["titleTrickyProblem"]
   }, React.createElement(iconAssignedQuestions, null), React.createElement("span", null, "\uBCC4\uD45C \uCE5C \uBB38\uC81C \uC911 \uB9DE\uCD98 \uBB38\uC81C")), React.createElement("div", {
-    className: styles$2["assignedQuestions"]
+    className: styles$3["assignedQuestions"]
   }, !!correctQuestions.length && correctQuestions.map(function (question) {
     return React.createElement("div", {
       key: question.id,
-      className: styles$2["question"]
+      className: styles$3["question"]
     }, question.questionOrder + 1, "\uBC88");
   }), !data.questions.length && React.createElement("div", {
-    className: styles$2["noData"]
+    className: styles$3["noData"]
   }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
 }
 
@@ -10709,9 +10784,9 @@ function ProtractedProblem(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   return React.createElement("div", {
-    className: styles$2["wrapperProblem"]
+    className: styles$3["wrapperProblem"]
   }, React.createElement("div", {
-    className: !openProblem.problem2 ? styles$2["titleProblemClose"] : styles$2["titleProblem"],
+    className: !openProblem.problem2 ? styles$3["titleProblemClose"] : styles$3["titleProblem"],
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem2: !openProblem.problem2
@@ -10724,30 +10799,30 @@ function ProtractedProblem(_ref) {
       fontWeight: 700
     }
   }, "\uC2DC\uAC04\uC774 \uC624\uB798 \uAC78\uB9B0 \uBB38\uC81C"), openProblem.problem2 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem2 && React.createElement(Fragment$1, null, React.createElement("div", {
-    className: styles$2["wrapperContent"]
+    className: styles$3["wrapperContent"]
   }, data.length ? data.map(function (item) {
     return React.createElement("div", {
-      className: styles$2["content"],
+      className: styles$3["content"],
       key: item.id
     }, React.createElement("div", {
-      className: styles$2["contentColumn1"]
+      className: styles$3["contentColumn1"]
     }, React.createElement("div", null, React.createElement("span", {
-      className: styles$2["span1"]
+      className: styles$3["span1"]
     }, "\uBB38\uC81C"), React.createElement("span", {
-      className: styles$2["span2"]
+      className: styles$3["span2"]
     }, item.questionOrder + 1, "\uBC88"))), React.createElement("div", {
-      className: styles$2["contentColumn2"]
+      className: styles$3["contentColumn2"]
     }, React.createElement("div", null, React.createElement("span", {
-      className: styles$2["span1"]
+      className: styles$3["span1"]
     }, "\uB098\uC758 \uC2DC\uAC04"), React.createElement("span", {
-      className: styles$2["span2"]
+      className: styles$3["span2"]
     }, "\uC0C1\uC704\uAD8C \uC2DC\uAC04")), React.createElement("div", null, React.createElement("span", {
-      className: styles$2["duration"]
+      className: styles$3["duration"]
     }, formatTimeSecond(item.duration, t)), React.createElement("span", {
-      className: styles$2["topDuration"]
+      className: styles$3["topDuration"]
     }, formatTimeSecond(item.topDuration, t)))));
   }) : React.createElement("div", {
-    className: styles$2["noData"]
+    className: styles$3["noData"]
   }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
 }
 
@@ -10761,9 +10836,9 @@ function Vulnerable(_ref) {
     return q2.overallCorrectRate === q1.overallCorrectRate ? q1.questionOrder - q2.questionOrder : q2.overallCorrectRate - q1.overallCorrectRate;
   });
   return React.createElement("div", {
-    className: styles$2["wrapperProblem"]
+    className: styles$3["wrapperProblem"]
   }, React.createElement("div", {
-    className: !openProblem.problem3 ? styles$2["titleProblemClose"] : styles$2["titleProblem"],
+    className: !openProblem.problem3 ? styles$3["titleProblemClose"] : styles$3["titleProblem"],
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem3: !openProblem.problem3
@@ -10776,30 +10851,30 @@ function Vulnerable(_ref) {
       fontWeight: 700
     }
   }, "\uB0B4\uAC00 \uCDE8\uC57D\uD55C \uBB38\uC81C"), openProblem.problem3 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem3 && React.createElement(Fragment$1, null, React.createElement("div", {
-    className: styles$2["wrapperContent"]
+    className: styles$3["wrapperContent"]
   }, incorrectQuestions.length ? React.createElement(Fragment$1, null, incorrectQuestions.map(function (question) {
     return React.createElement("div", {
-      className: styles$2["content"],
+      className: styles$3["content"],
       key: question.id
     }, React.createElement("div", {
-      className: styles$2["contentColumn1"]
+      className: styles$3["contentColumn1"]
     }, React.createElement("div", null, React.createElement("span", {
-      className: styles$2["span1"]
+      className: styles$3["span1"]
     }, "\uBB38\uC81C"), React.createElement("span", {
-      className: styles$2["span2"]
+      className: styles$3["span2"]
     }, question.questionOrder + 1, "\uBC88"))), React.createElement("div", {
-      className: styles$2["contentColumn2"]
+      className: styles$3["contentColumn2"]
     }, React.createElement("div", null, React.createElement("span", {
-      className: styles$2["span1"]
+      className: styles$3["span1"]
     }, "\uC804\uCCB4 \uC815\uB2F5\uB960"), React.createElement("span", {
-      className: styles$2["span2"]
+      className: styles$3["span2"]
     }, "\uB098\uC758 \uC624\uB2F5")), React.createElement("div", null, React.createElement("span", {
-      className: styles$2["overallCorrectRate"]
+      className: styles$3["overallCorrectRate"]
     }, question.overallCorrectRate.toFixed(2), "%"), React.createElement("span", {
-      className: styles$2["answer"]
+      className: styles$3["answer"]
     }, question.selectedAnswers, "\uBC88 (\uC815\uB2F5", " ", question.correctAnswers, "\uBC88)"))));
   })) : React.createElement("div", {
-    className: styles$2["noData"]
+    className: styles$3["noData"]
   }, "\uB370\uC774\uD130 \uC5C6\uC74C"))));
 }
 
@@ -10808,9 +10883,9 @@ function GradesByTerritory(_ref) {
     openProblem = _ref.openProblem,
     changeOpen = _ref.changeOpen;
   return React.createElement("div", {
-    className: styles$2["wrapperProblem"]
+    className: styles$3["wrapperProblem"]
   }, React.createElement("div", {
-    className: !openProblem.problem4 ? styles$2["titleProblemClose"] : styles$2["titleProblem"],
+    className: !openProblem.problem4 ? styles$3["titleProblemClose"] : styles$3["titleProblem"],
     onClick: function onClick() {
       return changeOpen(_extends({}, openProblem, {
         problem4: !openProblem.problem4
@@ -10823,27 +10898,27 @@ function GradesByTerritory(_ref) {
       fontWeight: 700
     }
   }, "\uC601\uC5ED\uBCC4 \uC131\uC801"), openProblem.problem4 ? React.createElement(iconUpArrow, null) : React.createElement(iconDownArrow, null)), openProblem.problem4 && React.createElement("div", {
-    className: styles$2["wrappContentProblem"]
+    className: styles$3["wrappContentProblem"]
   }, data.length && data.map(function (item) {
     return React.createElement("div", {
-      className: styles$2["contentProblem"],
+      className: styles$3["contentProblem"],
       key: item.id
     }, React.createElement("div", {
-      className: styles$2["labelProblem"]
+      className: styles$3["labelProblem"]
     }, React.createElement("span", {
-      className: styles$2["name"]
+      className: styles$3["name"]
     }, item.name), React.createElement("div", {
-      className: styles$2["percent"]
+      className: styles$3["percent"]
     }, React.createElement("span", null, item.percentageAmongStudents.toFixed(2), "%"), React.createElement("span", null, item.totalCorrectQuestions, "/", item.totalQuestions, "\uBB38\uC81C"))), React.createElement("div", {
-      className: styles$2["slider"]
+      className: styles$3["slider"]
     }, React.createElement("span", {
-      className: styles$2["track"],
+      className: styles$3["track"],
       style: {
         left: item.percentageAmongStudents + "%"
       }
     })));
   }), openProblem.problem4 && !data.length && React.createElement("div", {
-    className: styles$2["noData"]
+    className: styles$3["noData"]
   }, "\uB370\uC774\uD130 \uC5C6\uC74C")));
 }
 
@@ -10936,7 +11011,7 @@ function CreateNewQuestionDialog$1(_ref) {
     var errors = _ref2.errors;
     return React.createElement(Form, null, React.createElement("label", {
       htmlFor: "content-question",
-      className: styleGlobal['form-label'] + "  " + styles$2['form-label-dialog']
+      className: styles['form-label'] + "  " + styles$3['form-label-dialog']
     }, "\uC9C8\uBB38 \uB0B4\uC6A9"), React.createElement(Box, {
       position: 'relative',
       display: 'flex',
@@ -10949,7 +11024,7 @@ function CreateNewQuestionDialog$1(_ref) {
       },
       name: "content",
       placeholder: "\uBB38\uC81C\uAC00 \uC5B4\uB824\uC6CC\uC694",
-      className: styleGlobal['form-control']
+      className: styles['form-control']
     }), (errors === null || errors === void 0 ? void 0 : errors.content) && React.createElement(Box, {
       position: 'absolute',
       right: 0,
@@ -10971,14 +11046,14 @@ function CreateNewQuestionDialog$1(_ref) {
         padding: '12px'
       }
     }, React.createElement(Button$1, {
-      className: styles$2['btn-cancel'],
+      className: styles$3['btn-cancel'],
       onClick: toggleCreateQuestion
     }, React.createElement(Typography$1, {
       fontWeight: 700,
       fontSize: '14px',
       lineHeight: '16.71px'
     }, "\uCDE8\uC18C")), React.createElement(Button$1, {
-      className: styles$2['btn-register'],
+      className: styles$3['btn-register'],
       type: "submit"
     }, React.createElement(Typography$1, {
       fontWeight: 700,
@@ -11067,6 +11142,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
   var _useTab = useTab(),
     selected = _useTab.selected,
     handleChangeTab = _useTab.handleChangeTab;
+  var isTabletUp = useMediaQuery('(min-width:900px)');
   return React.createElement(Fragment$1, null, timelyOrderQuestion[dataChartIndex] && longTimeSpend && resultDatas && effectSize ? React.createElement("div", {
     style: {
       width: "100%"
@@ -11164,7 +11240,28 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     container: true,
     padding: "24px",
     className: "position-relative overflow-hidden"
-  }, React.createElement(Grid, {
+  }, !isTabletUp && React.createElement(Grid, {
+    item: true,
+    xs: 12
+  }, React.createElement(Box, {
+    padding: "16px 24px",
+    flexDirection: "row",
+    justifyContent: "end",
+    alignItems: "center",
+    display: "flex",
+    bgcolor: "#F9FAFB",
+    borderTop: "1px solid #E4E7EC",
+    borderBottom: "1px solid #E4E7EC"
+  }, React.createElement(Stack, {
+    padding: '12px 24px',
+    alignItems: "end",
+    bgcolor: "#F9FAFB"
+  }, React.createElement("div", {
+    className: styles$3["pdfBtnBox"]
+  }, React.createElement("button", {
+    className: styles$3["pdfBtn"] + " " + styles["truncate"],
+    onClick: handleExportPdf
+  }, React.createElement(iconPrintFill, null), React.createElement("p", null, t("print"))))))), React.createElement(Grid, {
     item: true,
     xs: 12
   }, React.createElement(Box, {
@@ -11184,7 +11281,7 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     var label = _ref2.label,
       value = _ref2.value;
     return React.createElement(Button, {
-      className: styleGlobal["truncate"],
+      className: styles["truncate"],
       disableTouchRipple: true,
       sx: {
         fontSize: "14px",
@@ -11197,14 +11294,14 @@ var ExamResultV2 = function ExamResultV2(_ref) {
         return handleChangeTab(value);
       }
     }, label);
-  })), React.createElement(Stack, {
+  })), isTabletUp && React.createElement(Stack, {
     padding: '12px 24px',
     alignItems: "end",
     bgcolor: "#F9FAFB"
   }, React.createElement("div", {
-    className: styles$2["pdfBtnBox"]
+    className: styles$3["pdfBtnBox"]
   }, React.createElement("button", {
-    className: styles$2["pdfBtn"] + " " + styleGlobal["truncate"],
+    className: styles$3["pdfBtn"] + " " + styles["truncate"],
     onClick: handleExportPdf
   }, React.createElement(iconPrintFill, null), React.createElement("p", null, t("print"))))))), React.createElement(Grid, {
     item: true,
@@ -11220,18 +11317,18 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     value: selected,
     index: 1
   }, React.createElement("div", {
-    className: styles$2["compareChart"]
+    className: styles$3["compareChart"]
   }, React.createElement("div", {
-    className: styles$2["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
+    className: styles$3["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
     onClick: handlePrevChart
   }, React.createElement(iconBtnPrevChart, null)), React.createElement("div", {
-    className: styles$2["chart"] + " sr-line-chart"
+    className: styles$3["chart"] + " sr-line-chart"
   }, React.createElement("div", null, React.createElement(ReactApexChart, {
     height: 389,
     options: chartOptions,
     series: series
   }))), React.createElement("div", {
-    className: styles$2["nextChart"] + " " + (dataChartIndex < timelyOrderQuestion.length - 1 && "pointer"),
+    className: styles$3["nextChart"] + " " + (dataChartIndex < timelyOrderQuestion.length - 1 && "pointer"),
     onClick: handleNextChart
   }, React.createElement(iconBtnNextChart, null)))), React.createElement(CustomTabPanel, {
     value: selected,
@@ -11277,18 +11374,18 @@ var ExamResultV2 = function ExamResultV2(_ref) {
     value: selected,
     index: 1
   }, React.createElement("div", {
-    className: styles$2["compareChart"]
+    className: styles$3["compareChart"]
   }, React.createElement("div", {
-    className: styles$2["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
+    className: styles$3["prevChart"] + " " + (dataChartIndex > 0 && "pointer"),
     onClick: handlePrevChart
   }, React.createElement(iconBtnPrevChart, null)), React.createElement("div", {
-    className: styles$2["chart"] + " sr-line-chart"
+    className: styles$3["chart"] + " sr-line-chart"
   }, React.createElement("div", null, React.createElement(ReactApexChart, {
     height: 389,
     options: chartOptions,
     series: series
   }))), React.createElement("div", {
-    className: styles$2["nextChart"] + " " + (dataChartIndex < timelyOrderQuestion.length - 1 && "pointer"),
+    className: styles$3["nextChart"] + " " + (dataChartIndex < timelyOrderQuestion.length - 1 && "pointer"),
     onClick: handleNextChart
   }, React.createElement(iconBtnNextChart, null)))), React.createElement(CustomTabPanel, {
     value: selected,
@@ -11364,5 +11461,100 @@ var times = {
   timeSpanToLocalMoment: timeSpanToLocalMoment
 };
 
-export { ACADEMY_DOMAIN, ACCESS_TOKEN, AcademyHeaders, AnswerCountSelector, ArticleCategorySelector, ArticleGroupView, BASE_URL, ChatContainer, ChatItemType, types as ChatTypes, CommonDialog, ConfirmDialog, index$1 as CoreHooks, CustomAsyncSelect, CustomCreatable, CustomPagination, CustomSelect, CustomSelectOption, DATE_MIN_VALUE, DATE_TIME_MIN_VALUE, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, index as Enums, ExamDetailView, ExamEvent, ExamResultV2, InputText, LANGUAGES, LayoutContext, Loading, Login, NotFound, PUSHER_CONFIG, QuestionCountSelector, Role, SUPER_ADMIN_BASE_URL, ScoreSelector, SubjectSelector, index$2 as Textbook, TextbookViewDetail as TextbookDetail, TextbookList, TheAcademyDropdown, TheLanguageDropdown, index$3 as Types, api, apiUpload, canAccess as canAccessRoute, diffFromNow, formatTime, getAcademyDomain, getAccessToken$1 as getAccessToken, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setReFetchUserAcademies, setReadyRegisterPusher, setUser, store, times as timeUtils, toISOString, useAutoAcademyDomain, useCategorySelect, useChatContainer, useGoogleSignOut, useLanguage, useLogin, usePusherConversation, useSubjectSelect, useSwitchAcademy, utcToLocalTime };
+var Header = function Header(_ref) {
+  var academyListRoute = _ref.academyListRoute,
+    homeRoute = _ref.homeRoute,
+    headerTabs = _ref.headerTabs,
+    role = _ref.role,
+    navigate = _ref.navigate,
+    onSignOut = _ref.onSignOut;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var location = useLocation();
+  var theme = useTheme();
+  var user = useSelector(function (state) {
+    var _state$common;
+    return state === null || state === void 0 ? void 0 : (_state$common = state.common) === null || _state$common === void 0 ? void 0 : _state$common.user;
+  });
+  var isLargerThanXL = useMediaQuery(theme.breakpoints.up("xl"));
+  var academyDomain = useSelector(function (state) {
+    var _state$common2, _state$common2$user;
+    return state === null || state === void 0 ? void 0 : (_state$common2 = state.common) === null || _state$common2 === void 0 ? void 0 : (_state$common2$user = _state$common2.user) === null || _state$common2$user === void 0 ? void 0 : _state$common2$user.academyDomain;
+  });
+  var pathname = location.pathname.toLowerCase();
+  return React.createElement("div", {
+    className: "col-sm-12 col-xl-12 " + styles["tabBox"] + " " + styles["headers"]
+  }, React.createElement(Link, {
+    "aria-current": "page",
+    to: homeRoute.path,
+    className: "border-none " + styles["logo-container"]
+  }, React.createElement("img", {
+    className: styles["logo"] + " d-none d-lg-block",
+    src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABNCAYAAAA2N/+4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAfmSURBVHgB7ZzLktvGFYbPaZBKNOWKmSpnG3GfVHm09UbUE5hDJ4usTD2BrU22op5gRvtUifI20Qz0BKKfINQThHbWqWA2li0SfXwamJFBEAABojkX6/+qKIq4dJPA36fPpTFEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAatHrjXsEgAeY9kSnM54QyRNmWojwnJlD/fxmuZzOCYCG7EWolyIt2R1ptzMV8Ez//y2EC+rgXahbRFqEE65aXApF6M1qNZ0RADm8CnUHkZaQWNy5CvfVRx/RPIqmEYEPGm9C9SfSdZhlvFx+84LAB02HPBAE46mK9EvyjkwgUuBobVGdSNXq7UWkq9U3TwkAJaAW1BHpwcEn9Oc//Y0+/t0f6eDuH6jbPaDV6geydllxFkQK1tnZotYV6Wef/V0F+snGvqWK9Tz6byLa8/Pvk9fbt/+j6Pz7aRy/eEQAZNhJqG1FWoWQGZyd8bfkib8O3x0K8UaF7F9hd0Z7YKj9GTKH2W2WlrMwvLugHRkOpWcoHma36Y2LXoadkPZAk/6+OLKvhWSQ3VZ2D0fD1Ti/7TTsTKkGjYOpfYrUN3rB+zHbf2/sEJrqv7OK83oByxk1wBKf6M15ZSj4XO/qJLsvkO5Y3xajYXysFbrDJu2+PDMP9a2n6Y/n2e2i7elbpVCb9ici89MweFzV33C4GhriTzPb+/l2WOxY+x5cfrZknoUhR/k2L5hSDRoJ9TaJ1BEYOdZc7Bruggu92+b/9vJWYhtG7HTbMU40TdttQ9P+hGTrMSpSNxDH2bM2O87u13M4EWOrXHhtoWqe9HhbCuomidRNM2ohhvntum3SZhoG14Ope6CWNh+vVvx7PWWgQ2aim2Zqrd6PkpskUjd1E5uN4oOzpmHYQV72FtLQR51GqxU5J9m9kumz2x0fWsv3VKThTRCpwxj7taqyn9+uAUFvdGT/k9kwPz01RwVNRHr+hBoQk31Du5D6ywvaAyL2hStH1z6+xvewJK+McHKcMA94I5DiOYus+c5W6Jxa0roydbH6aX5w9x/lBzGHOuWeq1D2UBhYxwVQJLaglOsuru4j+SUDoGJ2wUFYGD3Ld9SIeCcfTNhMfWY5srhIvY7fmfk2W3/zxbVKrtdoFPfzzRuR6csweEae8VJC3Ya6CH0RtVwsn+oIbBT1NqUogHJY+ekh82+e5y2ABhzHKu5ZEpX+Qq8kQi3vVyP7vwyXfVsQBV8bbL6iBsEUC82Gw7cLTU0NamUuhQf5YCqmeC+DrraP2gYnTp2On4jwUWrZ9kNZAKVTTxJAicRPN7+bE5b1spjGsnmdj3hvG4buPKkzSJOZK5mh8ucHX2lq6rl7kUeuRKgJQmMV69gKu7zgfpbtlQZQQSLQUJP8UuCzafrka5eoJ1Cb1OoW4AbqxcvnNb2Sqf89Qk8M2ciKPDLMjRLq21B/aaI+Rn+jS01HrX/mR5oLdkWAtWoVc0fTb/SQyomoYoBZDiLWUOMWsCjbwWQiquvTGn6w7dCAggf65uUJjqsVqoPpWIOd+1aCieFmkXUZZQGU+qrzfDpKfVFXITrJV4+c76qB1Zdl6StXtTkLO1VCptFRTDcdLW+Oq4K32lN2gX+62Ze/eOTqpv5spxy8Jnr3Qn/JCXnA+b9F27UCVZR6Skp6VGAd1cqfJDnYHXE1buJ6JcGbSkDxM/0dw6pjyvzTDdiJ2Q9Xb1FTesx3Xlsx98MzfkwtGA6XA7HJRZtltztftKwC5SJ8dRWe6nmfb+51vlew03TlLFVS497bs73755/hnbkKMeKK31CUFVCXaqYulbOg2YHedwM/l1HZiesSahptpws/HlILwnQV1IwacnoaOGteaNFTi1FNanl/7AXU1Xq6uzl8z5JtlZpxbXbJpbhM37XnFnxcLBLZG5qO6neoo31yn4k/dr9FPe3q6l2Bf2pIQm2DNtN/5PzUV9SSaxOqI/UL4+Owxc24FAx547eFo98t8PhiZM/U7z1MiwZWX3fW7lcgPG6SXk8Qe6LVst5lm/HmWnbPQpVJ2p8bXOmAvAwBL777Qv9TLdSS/KmRQI0PDbLbWaz7fLuF6nCpIZ0uv1PLsZO/2qHVoVU3gnwhdqIWrehG9YpytG1Ri3NYO9L20V/L1VvpbGP7uc1RqC6D5rEPN1yChssay7iWYGoDzQQ4X5PAjacwfyppbtpSMMvv8lWJ9CZUtTazba+q8w2bM+cv0e1k4VJhceP1AdvarL5mnnEuj077W/p0/mkOFWNyjkv90WY2pTcayT1qibepn7ev0nF+0aBqv8sE6NRy30eU6BEnQk3mJ4taFpwkzE1kmRbu72qdnvKaONWNeVCjzbR4IDzPthnT8o0x3f/n2/RApj/r/jKN9mkW+htcdD+3ls6z17wymNxS31dffpZ3kdgmVrjV8kovQk2ehfGQvE8zAeQec6gdPa+oM+fqAdAIvQVOJJGWY/u7CMb5t5zLQmiwkiwBjNO1DrTDQIySHG32e8py69K5ffSnab9x3g/VYPh9Oi+2/FjFuhZv2PSaUr7NJnjJ+KVrPGskgGvg++E+8OugtY+aPlnoR6QAlNFaqMxm74uhAWglVOd0X+VTleDDpZVQyxaDAOCbVlG/iJkS+V0t5P6YLwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC/Yn4G8GJySAUVr9kAAAAASUVORK5CYII=",
+    alt: ""
+  }), React.createElement("img", {
+    className: styles["logo"] + " d-block d-lg-none",
+    src: "/images/logo-sm.png",
+    alt: ""
+  })), React.createElement("div", {
+    className: styles["routerBox"] + " d-flex flex-grow-1 flex-nowrap px-3"
+  }, headerTabs.map(function (_ref2) {
+    var path = _ref2.path,
+      icon = _ref2.icon,
+      label = _ref2.label,
+      isMain = _ref2.isMain,
+      activePaths = _ref2.activePaths;
+    return React.createElement(Link, {
+      key: path,
+      "aria-current": "page",
+      to: !academyDomain && !isMain ? "#" : path,
+      className: "text-decoration-none " + ((activePaths !== null && activePaths !== void 0 && activePaths.length ? activePaths.some(function (a) {
+        return pathname.startsWith(a);
+      }) : pathname.startsWith(path)) ? styles["router-link-active"] + " " + styles["router-link-exact-active"] : "") + " " + styles["tabText"] + " " + (!academyDomain && !isMain ? styles["disabled-link"] : "")
+    }, React.createElement(Stack, {
+      sx: {
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        display: "flex",
+        flexWrap: "nowrap"
+      }
+    }, icon, React.createElement("span", {
+      className: "text-nowrap"
+    }, isLargerThanXL || headerTabs.length < 4 ? t(label) : ellipsisText(t(label), 4))));
+  })), React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center"
+  }, React.createElement(Typography, {
+    className: "fw-bold text-primary me-2 text-nowrap",
+    sx: {
+      maxWidth: "120px",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }, user === null || user === void 0 ? void 0 : user.fullName), React.createElement("div", null, React.createElement(TheAcademyDropdown, {
+    homeAcademyUrl: academyListRoute.path,
+    homeUrl: homeRoute.path,
+    role: role,
+    navigate: navigate,
+    hideAcademyName: !isLargerThanXL && headerTabs.length > 6
+  })), React.createElement("div", {
+    className: "me-2"
+  }, React.createElement(TheLanguageDropdown, null)), React.createElement("div", {
+    className: styles["userImg"] + " d-none d-md-none d-lg-block",
+    onClick: onSignOut
+  }, React.createElement("p", {
+    className: "text-nowrap mb-0"
+  }, t("logout"))), React.createElement("div", {
+    className: styles["userImg"] + " d-block d-md-block d-lg-none",
+    onClick: onSignOut
+  }, React.createElement(IoIosLogOut, {
+    size: 24,
+    color: "#959595"
+  }))));
+};
+
+export { ACADEMY_DOMAIN, ACCESS_TOKEN, AcademyHeaders, AnswerCountSelector, ArticleCategorySelector, ArticleGroupView, BASE_URL, ChatContainer, ChatItemType, types as ChatTypes, CommonDialog, ConfirmDialog, index$1 as CoreHooks, CustomAsyncSelect, CustomCreatable, CustomPagination, CustomSelect, CustomSelectOption, DATE_MIN_VALUE, DATE_TIME_MIN_VALUE, EXAM_CHANNEL, EXAM_STUDENT_CHANNEL, index as Enums, ExamDetailView, ExamEvent, ExamResultV2, Header, InputText, LANGUAGES, LayoutContext, Loading, Login, NotFound, PUSHER_CONFIG, QuestionCountSelector, Role, SUPER_ADMIN_BASE_URL, ScoreSelector, SubjectSelector, index$2 as Textbook, TextbookViewDetail as TextbookDetail, TextbookList, TheAcademyDropdown, TheLanguageDropdown, index$3 as Types, api, apiUpload, canAccess as canAccessRoute, diffFromNow, formatTime, getAcademyDomain, getAccessToken$1 as getAccessToken, i18n, minutesToTimeSpan, setAlert, setLanguage, setLoading, setReFetchUserAcademies, setReadyRegisterPusher, setUser, store, times as timeUtils, toISOString, useAutoAcademyDomain, useCategorySelect, useChatContainer, useGoogleSignOut, useLanguage, useLogin, usePusherConversation, useSubjectSelect, useSwitchAcademy, utcToLocalTime };
 //# sourceMappingURL=index.modern.js.map