catchup-library-web 2.1.5 → 2.2.0

package/dist/index.js

@@ -71,7 +71,6 @@ __export(index_exports, {
   ActivityEmptyContent: () => ActivityEmptyContent_default,
   ActivityEvaluationRubricContent: () => ActivityEvaluationRubricContent_default,
   ActivityLabel: () => ActivityLabel_default,
-  ActivityPreviewByAnswerData: () => ActivityPreviewByAnswerData_default,
   ActivityPreviewByData: () => ActivityPreviewByData_default,
   ActivitySolutionContent: () => ActivitySolutionContent_default,
   ActivityTemplateLabel: () => ActivityTemplateLabel_default,
@@ -7204,225 +7203,6 @@ var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var ActivityPreviewByData = ({
-  data,
-  showType,
-  showDescription,
-  lockedType,
-  typeOptionList,
-  showSolution,
-  showEvaluationRubric,
-  showDifficulty,
-  isFullScreen
-}) => {
-  const [key, setKey] = (0, import_react25.useState)((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = (0, import_react25.useState)(null);
-  const [optionList, setOptionList] = (0, import_react25.useState)([]);
-  (0, import_react25.useEffect)(() => {
-    if (!data) return;
-    setKey((/* @__PURE__ */ new Date()).getTime());
-  }, [data]);
-  (0, import_react25.useEffect)(() => {
-    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]);
-  (0, import_react25.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
-    showType ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mb-4", children: [
-        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-          SelectionBox_default,
-          {
-            optionList,
-            selectedId: selectedType,
-            handleSelectOnClick: (itemId) => {
-              setSelectedType(itemId);
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DividerLine_default, {})
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      OrderingActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      DropdownActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
-      }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      MCSAActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
-      }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      MCMAActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
-      }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      MatchingActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      GroupingActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true
-      }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      FillInTheBlanksActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
-      }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      OpenEndedActivityContent_default,
-      {
-        answerMap,
-        canAnswerQuestion: () => false,
-        changeAnswer: () => {
-        },
-        showMaterialContent: true,
-        data,
-        isPreview: true,
-        isFullScreen
-      }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      TrueFalseActivityContent_default,
-      {
-        answerMap,
-        changeAnswer: () => {
-        },
-        canAnswerQuestion: () => {
-          return true;
-        },
-        data,
-        isPreview: true,
-        showCorrectAnswer: true,
-        isFullScreen
-      }
-    ) : null }, selectedType),
-    showSolution ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      ActivitySolutionContent_default,
-      {
-        activityTemplateType: selectedType,
-        data
-      }
-    ) }) : null,
-    showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      ActivityEvaluationRubricContent_default,
-      {
-        activityTemplateType: selectedType,
-        data
-      }
-    ) }) : null
-  ] }, key);
-};
-var ActivityPreviewByData_default = ActivityPreviewByData;
-
-// src/components/activities/ActivityPreviewByAnswerData.tsx
-var import_react26 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
 var ACTIVITY_TEMPLATE_LIST = [
   { type: "ORDERING", materialMap: "orderingMaterialMap" },
   { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
@@ -7437,7 +7217,7 @@ var ACTIVITY_TEMPLATE_LIST = [
   { type: "OPEN_ENDED", materialMap: "openEndedMaterialMap" },
   { type: "TRUE_FALSE", materialMap: "trueFalseMaterialMap" }
 ];
-var ActivityPreviewByAnswerData = ({
+var ActivityPreviewByData = ({
   data,
   answerType = null,
   showType = true,
@@ -7449,11 +7229,11 @@ var ActivityPreviewByAnswerData = ({
   isFullScreen = false,
   showCorrectAnswer = false
 }) => {
-  const [selectedType, setSelectedType] = (0, import_react26.useState)(null);
-  const [optionList, setOptionList] = (0, import_react26.useState)([]);
-  const [answerMapMap, setAnswerMapMap] = (0, import_react26.useState)({});
-  const [activityTemplateTypeList, setActivityTemplateTypeList] = (0, import_react26.useState)([]);
-  (0, import_react26.useEffect)(() => {
+  const [selectedType, setSelectedType] = (0, import_react25.useState)(null);
+  const [optionList, setOptionList] = (0, import_react25.useState)([]);
+  const [answerMapMap, setAnswerMapMap] = (0, import_react25.useState)({});
+  const [activityTemplateTypeList, setActivityTemplateTypeList] = (0, import_react25.useState)([]);
+  (0, import_react25.useEffect)(() => {
     if (!data) return;
     let currentActivityTemplateMapList = JSON.parse(
       JSON.stringify(ACTIVITY_TEMPLATE_LIST)
@@ -7471,7 +7251,7 @@ var ActivityPreviewByAnswerData = ({
     }
     setActivityTemplateTypeList(currentActivityTemplateMapList);
   }, [data, answerType, typeList]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentOptionList = [];
     for (const activityTemplateType of activityTemplateTypeList) {
@@ -7491,11 +7271,11 @@ var ActivityPreviewByAnswerData = ({
     }
     setOptionList(currentOptionList);
   }, [activityTemplateTypeList, showDifficulty]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (optionList.length === 0) return;
     setSelectedType(optionList[0].id);
   }, [optionList]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (activityTemplateTypeList.length === 0) return;
     const currentAnswerMapMap = {};
     for (const activityTemplateMap of activityTemplateTypeList) {
@@ -7525,44 +7305,44 @@ var ActivityPreviewByAnswerData = ({
     const isEmpty = answerMapMap[selectedType].isEmpty;
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps))
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps))
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps))
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps))
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps))
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps))
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             OpenEndedActivityContent_default,
             __spreadProps(__spreadValues({}, commonProps), {
               showMaterialContent: true
@@ -7570,20 +7350,20 @@ var ActivityPreviewByAnswerData = ({
           )
         ] }) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ActivityEmptyContent_default, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          isEmpty && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActivityEmptyContent_default, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       default:
         return null;
     }
   };
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mb-4", children: [
-        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "mb-4", children: [
+        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           SelectionBox_default,
           {
             optionList,
@@ -7594,17 +7374,17 @@ var ActivityPreviewByAnswerData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DividerLine_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex flex-col my-2 w-full p-5", children: RenderSelectedActivityContent() }),
-    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex flex-col my-2 w-full p-5", children: RenderSelectedActivityContent() }),
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7613,20 +7393,20 @@ var ActivityPreviewByAnswerData = ({
     ) }) : null
   ] });
 };
-var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
+var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/errors/StatusError.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var StatusError = ({
   statusCode,
   statusText,
   textSize
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "text-center my-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-center my-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
         "(",
         statusCode ? `${statusCode} - ` : null,
         statusText,
@@ -7638,9 +7418,9 @@ var StatusError = ({
 var StatusError_default = StatusError;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7650,7 +7430,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7660,9 +7440,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       InputGroup_default,
       {
         type,
@@ -7678,8 +7458,8 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-var import_react27 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7688,17 +7468,17 @@ var PageTravelGroup = ({
   setPageNumber,
   setImageReady
 }) => {
-  const [totalPageNumber, setTotalPageNumber] = (0, import_react27.useState)(0);
-  const [newPageNumber, setNewPageNumber] = (0, import_react27.useState)(0);
-  (0, import_react27.useEffect)(() => {
+  const [totalPageNumber, setTotalPageNumber] = (0, import_react26.useState)(0);
+  const [newPageNumber, setNewPageNumber] = (0, import_react26.useState)(0);
+  (0, import_react26.useEffect)(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
   }, [initialTotalPageNumber]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
+    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       BaseImage_default,
       {
         size: "small",
@@ -7716,7 +7496,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "p",
       {
         className: `${pageNumber === index ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -7731,7 +7511,7 @@ var PageTravelGroup = ({
         children: index + 1
       }
     ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       BaseImage_default,
       {
         size: "small",
@@ -7749,7 +7529,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "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`,
@@ -7773,14 +7553,14 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7795,14 +7575,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7812,7 +7592,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { children: option.text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -7823,7 +7603,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7833,7 +7613,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("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__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime53.jsxs)(
     "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`,
@@ -7841,8 +7621,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7851,20 +7631,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("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__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("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__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "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`,
@@ -7878,34 +7658,34 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var ActivityTemplateLabel = ({
   title,
   icon,
   font
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("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__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("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__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("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__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CategoryLabel.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var CategoryLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("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__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("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__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       BaseImage_default,
       {
         src: "/icons/category-label.webp",
@@ -7913,40 +7693,40 @@ var CategoryLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var CategoryLabel_default = CategoryLabel;
 
 // src/components/labels/CoterieLabel.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("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__ */ (0, import_jsx_runtime58.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("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__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("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__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("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__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -7954,16 +7734,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("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__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("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__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7971,55 +7751,55 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("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__ */ (0, import_jsx_runtime64.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("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__ */ (0, import_jsx_runtime63.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "", children: value }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/BaseTitle.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("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__ */ (0, import_jsx_runtime65.jsxs)("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__ */ (0, import_jsx_runtime66.jsx)("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/titles/SubTitle.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -10741,7 +10521,6 @@ var retrieveActivityMethodologyOptionList = () => {
   ActivityEmptyContent,
   ActivityEvaluationRubricContent,
   ActivityLabel,
-  ActivityPreviewByAnswerData,
   ActivityPreviewByData,
   ActivitySolutionContent,
   ActivityTemplateLabel,