catchup-library-web 2.1.5 → 2.2.0

package/dist/index.mjs

@@ -6980,225 +6980,6 @@ var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
 import { Fragment as Fragment11, jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
-var ActivityPreviewByData = ({
-  data,
-  showType,
-  showDescription,
-  lockedType,
-  typeOptionList,
-  showSolution,
-  showEvaluationRubric,
-  showDifficulty,
-  isFullScreen
-}) => {
-  const [key, setKey] = useState24((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = useState24(null);
-  const [optionList, setOptionList] = useState24([]);
-  useEffect15(() => {
-    if (!data) return;
-    setKey((/* @__PURE__ */ new Date()).getTime());
-  }, [data]);
-  useEffect15(() => {
-    if (!typeOptionList) return;
-    if (typeOptionList.length === 0) return;
-    let foundTypeOption;
-    if (lockedType) {
-      foundTypeOption = typeOptionList.find(
-        (typeOption) => typeOption.id === lockedType
-      );
-    }
-    if (foundTypeOption) {
-      setSelectedType(foundTypeOption.id);
-    } else {
-      setSelectedType(typeOptionList[0].id);
-    }
-  }, [typeOptionList, lockedType]);
-  useEffect15(() => {
-    if (!data) return;
-    if (!typeOptionList) return;
-    if (typeOptionList.length === 0) return;
-    let currentTypeOptionList = JSON.parse(JSON.stringify(typeOptionList));
-    if (lockedType) {
-      currentTypeOptionList = currentTypeOptionList.filter(
-        (typeOption) => typeOption.id === lockedType
-      );
-    }
-    if (showDifficulty) {
-      setOptionList(
-        currentTypeOptionList.map((typeOption) => __spreadProps(__spreadValues({}, typeOption), {
-          subText: i18n_default.t(
-            retrieveDifficultyByActivityTypeFromData(typeOption.id, data)
-          )
-        }))
-      );
-    } else {
-      setOptionList(currentTypeOptionList);
-    }
-  }, [data, lockedType, typeOptionList, showDifficulty]);
-  if (!data) return;
-  if (!selectedType) return;
-  const answerMap = constructAnswerBasedOnData(selectedType, data);
-  console.log("answer map: ", answerMap);
-  return /* @__PURE__ */ jsxs36("div", { children: [
-    showType ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
-      /* @__PURE__ */ jsxs36("div", { className: "mb-4", children: [
-        showDescription ? /* @__PURE__ */ jsx47("div", { className: "my-2", children: /* @__PURE__ */ jsx47("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ jsx47(
-          SelectionBox_default,
-          {
-            optionList,
-            selectedId: selectedType,
-            handleSelectOnClick: (itemId) => {
-              setSelectedType(itemId);
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx47(DividerLine_default, {})
-    ] }) : null,
-    /* @__PURE__ */ jsx47("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ jsx47(
-      OrderingActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ jsx47(
-      DropdownActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
-      }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ jsx47(
-      MCSAActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
-      }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ jsx47(
-      MCMAActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
-      }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ jsx47(
-      MatchingActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ jsx47(
-      GroupingActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ jsx47(
-      FillInTheBlanksActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
-      }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ jsx47(
-      OpenEndedActivityContent_default,
-      {
-        answerMap,
-        canAnswerQuestion: () => false,
-        changeAnswer: () => {
-        },
-        showMaterialContent: true,
-        data,
-        isPreview: true,
-        isFullScreen
-      }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ jsx47(
-      TrueFalseActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
-      }
-    ) : null }, selectedType),
-    showSolution ? /* @__PURE__ */ jsx47("div", { className: "my-4", children: /* @__PURE__ */ jsx47(
-      ActivitySolutionContent_default,
-      {
-        activityTemplateType: selectedType,
-        data
-      }
-    ) }) : null,
-    showEvaluationRubric ? /* @__PURE__ */ jsx47("div", { className: "my-4", children: /* @__PURE__ */ jsx47(
-      ActivityEvaluationRubricContent_default,
-      {
-        activityTemplateType: selectedType,
-        data
-      }
-    ) }) : null
-  ] }, key);
-};
-var ActivityPreviewByData_default = ActivityPreviewByData;
-
-// src/components/activities/ActivityPreviewByAnswerData.tsx
-import { useEffect as useEffect16, useState as useState25 } from "react";
-import { Fragment as Fragment12, jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
 var ACTIVITY_TEMPLATE_LIST = [
   { type: "ORDERING", materialMap: "orderingMaterialMap" },
   { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
@@ -7213,7 +6994,7 @@ var ACTIVITY_TEMPLATE_LIST = [
   { type: "OPEN_ENDED", materialMap: "openEndedMaterialMap" },
   { type: "TRUE_FALSE", materialMap: "trueFalseMaterialMap" }
 ];
-var ActivityPreviewByAnswerData = ({
+var ActivityPreviewByData = ({
   data,
   answerType = null,
   showType = true,
@@ -7225,11 +7006,11 @@ var ActivityPreviewByAnswerData = ({
   isFullScreen = false,
   showCorrectAnswer = false
 }) => {
-  const [selectedType, setSelectedType] = useState25(null);
-  const [optionList, setOptionList] = useState25([]);
-  const [answerMapMap, setAnswerMapMap] = useState25({});
-  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState25([]);
-  useEffect16(() => {
+  const [selectedType, setSelectedType] = useState24(null);
+  const [optionList, setOptionList] = useState24([]);
+  const [answerMapMap, setAnswerMapMap] = useState24({});
+  const [activityTemplateTypeList, setActivityTemplateTypeList] = useState24([]);
+  useEffect15(() => {
     if (!data) return;
     let currentActivityTemplateMapList = JSON.parse(
       JSON.stringify(ACTIVITY_TEMPLATE_LIST)
@@ -7247,7 +7028,7 @@ var ActivityPreviewByAnswerData = ({
     }
     setActivityTemplateTypeList(currentActivityTemplateMapList);
   }, [data, answerType, typeList]);
-  useEffect16(() => {
+  useEffect15(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentOptionList = [];
     for (const activityTemplateType of activityTemplateTypeList) {
@@ -7267,11 +7048,11 @@ var ActivityPreviewByAnswerData = ({
     }
     setOptionList(currentOptionList);
   }, [activityTemplateTypeList, showDifficulty]);
-  useEffect16(() => {
+  useEffect15(() => {
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
-  useEffect16(() => {
+  useEffect15(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentAnswerMapMap = {};
     for (const activityTemplateMap of activityTemplateTypeList) {
@@ -7301,44 +7082,44 @@ var ActivityPreviewByAnswerData = ({
     const isEmpty = answerMapMap[selectedType].isEmpty;
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(OrderingActivityContent_default, __spreadValues({}, commonProps))
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+          isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx47(OrderingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(DropdownActivityContent_default, __spreadValues({}, commonProps))
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+          isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx47(DropdownActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(MCSAActivityContent_default, __spreadValues({}, commonProps))
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+          isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx47(MCSAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(MCMAActivityContent_default, __spreadValues({}, commonProps))
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+          isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx47(MCMAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(MatchingActivityContent_default, __spreadValues({}, commonProps))
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+          isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx47(MatchingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(GroupingActivityContent_default, __spreadValues({}, commonProps))
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+          isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx47(GroupingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+          isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx47(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(
+        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+          isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx47(
             OpenEndedActivityContent_default,
             __spreadProps(__spreadValues({}, commonProps), {
               showMaterialContent: true
@@ -7346,20 +7127,20 @@ var ActivityPreviewByAnswerData = ({
           )
         ] }) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
-          isEmpty && /* @__PURE__ */ jsx48(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ jsx48(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+          isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ jsx47(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       default:
         return null;
     }
   };
   if (!data) return null;
-  return /* @__PURE__ */ jsxs37("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs37(Fragment12, { children: [
-      /* @__PURE__ */ jsxs37("div", { className: "mb-4", children: [
-        showDescription ? /* @__PURE__ */ jsx48("div", { className: "my-2", children: /* @__PURE__ */ jsx48("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs36("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+      /* @__PURE__ */ jsxs36("div", { className: "mb-4", children: [
+        showDescription ? /* @__PURE__ */ jsx47("div", { className: "my-2", children: /* @__PURE__ */ jsx47("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+        /* @__PURE__ */ jsx47(
           SelectionBox_default,
           {
             optionList,
@@ -7370,17 +7151,17 @@ var ActivityPreviewByAnswerData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx48(DividerLine_default, {})
+      /* @__PURE__ */ jsx47(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ jsx48("div", { className: "flex flex-col my-2 w-full p-5", children: RenderSelectedActivityContent() }),
-    selectedType && showSolution ? /* @__PURE__ */ jsx48("div", { className: "my-4", children: /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx47("div", { className: "flex flex-col my-2 w-full p-5", children: RenderSelectedActivityContent() }),
+    selectedType && showSolution ? /* @__PURE__ */ jsx47("div", { className: "my-4", children: /* @__PURE__ */ jsx47(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx48("div", { className: "my-4", children: /* @__PURE__ */ jsx48(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ jsx47("div", { className: "my-4", children: /* @__PURE__ */ jsx47(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7389,20 +7170,20 @@ var ActivityPreviewByAnswerData = ({
     ) }) : null
   ] });
 };
-var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
+var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/errors/StatusError.tsx
-import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
 var StatusError = ({
   statusCode,
   statusText,
   textSize
 }) => {
-  return /* @__PURE__ */ jsxs38("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ jsx49("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
-    /* @__PURE__ */ jsxs38("div", { className: "text-center my-5", children: [
-      /* @__PURE__ */ jsx49("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
-      /* @__PURE__ */ jsxs38("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
+  return /* @__PURE__ */ jsxs37("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ jsx48("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
+    /* @__PURE__ */ jsxs37("div", { className: "text-center my-5", children: [
+      /* @__PURE__ */ jsx48("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
+      /* @__PURE__ */ jsxs37("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
         "(",
         statusCode ? `${statusCode} - ` : null,
         statusText,
@@ -7414,9 +7195,9 @@ var StatusError = ({
 var StatusError_default = StatusError;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7426,7 +7207,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7436,9 +7217,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ jsxs39("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ jsx51("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx51("p", { children: title }) }),
-    /* @__PURE__ */ jsx51("div", { className: "flex-1", children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs38("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ jsx50("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx50("p", { children: title }) }),
+    /* @__PURE__ */ jsx50("div", { className: "flex-1", children: /* @__PURE__ */ jsx50(
       InputGroup_default,
       {
         type,
@@ -7454,8 +7235,8 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-import { useEffect as useEffect17, useState as useState26 } from "react";
-import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
+import { useEffect as useEffect16, useState as useState25 } from "react";
+import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7464,17 +7245,17 @@ var PageTravelGroup = ({
   setPageNumber,
   setImageReady
 }) => {
-  const [totalPageNumber, setTotalPageNumber] = useState26(0);
-  const [newPageNumber, setNewPageNumber] = useState26(0);
-  useEffect17(() => {
+  const [totalPageNumber, setTotalPageNumber] = useState25(0);
+  const [newPageNumber, setNewPageNumber] = useState25(0);
+  useEffect16(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
   }, [initialTotalPageNumber]);
-  useEffect17(() => {
+  useEffect16(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ jsxs40("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ jsx52("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs39("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
+    pageNumber === 0 ? null : /* @__PURE__ */ jsx51("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx51(
       BaseImage_default,
       {
         size: "small",
@@ -7492,7 +7273,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx52("div", { className: "px-2", children: /* @__PURE__ */ jsx52(
+    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx51("div", { className: "px-2", children: /* @__PURE__ */ jsx51(
       "p",
       {
         className: `${pageNumber === index ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -7507,7 +7288,7 @@ var PageTravelGroup = ({
         children: index + 1
       }
     ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ jsx52("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx52(
+    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ jsx51("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx51(
       BaseImage_default,
       {
         size: "small",
@@ -7525,7 +7306,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsx51(
       "input",
       {
         className: `w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input`,
@@ -7549,14 +7330,14 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ jsx53("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx52("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx52(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7571,14 +7352,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ jsxs41(
+      children: /* @__PURE__ */ jsxs40(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx52(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7588,7 +7369,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ jsx53("div", { className: "flex-1", children: /* @__PURE__ */ jsx53("p", { children: option.text }) })
+            /* @__PURE__ */ jsx52("div", { className: "flex-1", children: /* @__PURE__ */ jsx52("p", { children: option.text }) })
           ]
         }
       )
@@ -7599,7 +7380,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7609,7 +7390,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsx53("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs41(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
@@ -7617,8 +7398,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ jsx54("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ jsx54("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ jsx53("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx53("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7627,20 +7408,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ jsx55("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx54("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx54(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ jsx55(
+      children: /* @__PURE__ */ jsx54(
         "p",
         {
           className: `${selectedId === option.id ? "text-catchup-white bg-catchup-blue-500" : "text-catchup-gray-300"} transition-all duration-300 rounded-catchup-medium px-2 py-1`,
@@ -7654,34 +7435,34 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
 var ActivityTemplateLabel = ({
   title,
   icon,
   font
 }) => {
-  return /* @__PURE__ */ jsx56("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx56(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx56("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx55("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx55(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx55("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs43 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx57("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx57(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx57("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx56("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx56(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx56("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CategoryLabel.tsx
-import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
 var CategoryLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx58("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx57("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx57(
       BaseImage_default,
       {
         src: "/icons/category-label.webp",
@@ -7689,40 +7470,40 @@ var CategoryLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx58("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx57("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var CategoryLabel_default = CategoryLabel;
 
 // src/components/labels/CoterieLabel.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx59("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx59("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx58("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx58("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx60("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx60("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx59("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx59("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx61, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs45 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx61("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx61(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx61("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx60("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx60(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx60("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs46 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx62("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx61("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx61(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -7730,16 +7511,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx62("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx61("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx63, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx63("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx62("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx62(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7747,55 +7528,55 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx63("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx62("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx64("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx64("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx63("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ jsx63("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx65, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs48 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ jsxs49("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ jsx65(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ jsx65("div", { className: "flex-1", children: /* @__PURE__ */ jsx65("p", { className: "", children: value }) })
+  return /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ jsx64(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx64("div", { className: "flex-1", children: /* @__PURE__ */ jsx64("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/BaseTitle.tsx
-import { jsx as jsx66, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs49 } from "react/jsx-runtime";
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ jsxs50("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ jsxs50("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ jsxs49("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxs49("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ jsxs50("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
+      totalItemCount && itemName ? /* @__PURE__ */ jsxs49("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
         totalItemCount,
         " ",
         itemName
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ jsx66("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ jsx65("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/titles/SubTitle.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ jsx67("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ jsx66("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -10516,7 +10297,6 @@ export {
   ActivityEmptyContent_default as ActivityEmptyContent,
   ActivityEvaluationRubricContent_default as ActivityEvaluationRubricContent,
   ActivityLabel_default as ActivityLabel,
-  ActivityPreviewByAnswerData_default as ActivityPreviewByAnswerData,
   ActivityPreviewByData_default as ActivityPreviewByData,
   ActivitySolutionContent_default as ActivitySolutionContent,
   ActivityTemplateLabel_default as ActivityTemplateLabel,