npm - catchup-library-web - Versions diffs - 1.16.12 → 1.17.0 - Mend

catchup-library-web 1.16.12 → 1.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/index.d.mts +9 -4
package/dist/index.d.ts +9 -4
package/dist/index.js +496 -483
package/dist/index.mjs +427 -415
package/package.json +1 -1
package/src/components/activities/body-content/ShowBodyMediaByContentType.tsx +2 -2
package/src/components/cards/BaseCard.tsx +13 -0
package/src/components/cards/FullCard.tsx +13 -18
package/src/index.ts +1 -0
package/src/properties/CardProperties.ts +6 -2

package/dist/index.js CHANGED Viewed

@@ -76,6 +76,7 @@ __export(index_exports, {
   ActivitySolutionContent: () => ActivitySolutionContent_default,
   ActivityTemplateLabel: () => ActivityTemplateLabel_default,
   ApproveButton: () => ApproveButton_default,
+  BaseCard: () => BaseCard_default,
   BaseImage: () => BaseImage_default,
   BaseLoading: () => BaseLoading_default,
   BaseLoadingWithText: () => BaseLoadingWithText_default,
@@ -1055,16 +1056,20 @@ var ApproveButton_default = ApproveButton;
 // src/components/cards/FullCard.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var FullCard = ({
-  bgColor,
+  backgroundColor,
+  borderColor,
   opacity,
-  isShadowed,
   usePadding,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
-      className: `flex-1 ${bgColor ? bgColor : ""} ${opacity ? opacity : "opacity-100"} rounded-catchup-xlarge w-full border border-catchup-gray-50 bg-catchup-white`,
+      className: `min-h-full
+        ${backgroundColor ? backgroundColor : "bg-catchup-white"}
+        ${borderColor ? borderColor : "border-catchup-gray-50"}
+        ${opacity ? opacity : "opacity-100"}
+        rounded-catchup-xlarge w-full `,
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
@@ -1073,10 +1078,17 @@ var FullCard = ({
         }
       )
     }
-  ) });
+  );
 };
 var FullCard_default = FullCard;
+// src/components/cards/BaseCard.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var BaseCard = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col justify-center items-center h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "bg-catchup-white rounded-catchup-xlarge h-catchup-card w-catchup-card shadow-dropdown", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col mx-auto p-8 h-full", children }) }) });
+};
+var BaseCard_default = BaseCard;
 // src/components/loading/BaseLoadingWithText.tsx
 var import_react9 = require("react");
@@ -1087,7 +1099,7 @@ import_i18next.default.use(import_react_i18next.initReactI18next);
 var i18n_default = import_i18next.default;
 // src/components/loading/BaseLoadingWithText.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var BaseLoadingWithText = (props) => {
   const { height, width, size, primaryColor, secondaryColor, hideText } = props;
   const [initialTimestamp, setInitialTimestamp] = (0, import_react9.useState)(
@@ -1135,8 +1147,8 @@ var BaseLoadingWithText = (props) => {
     textWidth = 250;
   }
   const loadingText = retrieveLoadingText();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       BaseLoading_default,
       {
         height,
@@ -1146,12 +1158,12 @@ var BaseLoadingWithText = (props) => {
         secondaryColor
       }
     ),
-    !hideText && size !== "small" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    !hideText && size !== "small" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "div",
       {
         className: `${textClassName} text-center`,
         style: { width: textWidth },
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-bold", children: loadingText })
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "font-bold", children: loadingText })
       }
     ) : null
   ] });
@@ -1160,7 +1172,7 @@ var BaseLoadingWithText_default = BaseLoadingWithText;
 // src/components/modals/BaseModal.tsx
 var import_react_modal = __toESM(require("react-modal"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var BaseModal = ({
   isOpen,
   size,
@@ -1169,7 +1181,7 @@ var BaseModal = ({
   customSize,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_react_modal.default,
     {
       isOpen,
@@ -1197,7 +1209,7 @@ var BaseModal = ({
         }
       },
       contentLabel: "",
-      children: customSize ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `${customSize} font-quicksand`, children }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: customSize ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${customSize} font-quicksand`, children }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "div",
         {
           className: `font-quicksand ${size === "small" ? "w-[600px]" : size === "medium" ? "w-[900px]" : "w-[600px] lg:w-[900px] xl:w-[1200px] 2xl:w-[1500px]"}`,
@@ -1212,7 +1224,7 @@ var BaseModal_default = BaseModal;
 // src/components/pdfs/BasePDF.tsx
 var import_react10 = require("react");
 var import_react_pdf = require("react-pdf");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var BasePDF = ({ file }) => {
   const [pageNumber, setPageNumber] = (0, import_react10.useState)(1);
   const [numberOfPages, setNumberOfPages] = (0, import_react10.useState)(0);
@@ -1220,10 +1232,10 @@ var BasePDF = ({ file }) => {
     setPageNumber(1);
     setNumberOfPages(numPages);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_pdf.Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_pdf.Page, { pageNumber }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-row items-center justify-center", children: [
-      pageNumber === 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_pdf.Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_pdf.Page, { pageNumber }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-row items-center justify-center", children: [
+      pageNumber === 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         BaseImage_default,
         {
           alt: "arrow-left",
@@ -1234,7 +1246,7 @@ var BasePDF = ({ file }) => {
           }
         }
       ) }) }),
-      Array.from(Array(numberOfPages).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Array.from(Array(numberOfPages).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "p",
         {
           className: `${pageNumber === index + 1 ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -1244,7 +1256,7 @@ var BasePDF = ({ file }) => {
           children: index + 1
         }
       ) }, index)),
-      numberOfPages === 0 || pageNumber === numberOfPages ? null : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      numberOfPages === 0 || pageNumber === numberOfPages ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         BaseImage_default,
         {
           src: "/icons/arrow-right.webp",
@@ -1261,9 +1273,9 @@ var BasePDF = ({ file }) => {
 var BasePDF_default = BasePDF;
 // src/components/activities/empty-content/ActivityEmptyContent.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ActivityEmptyContent = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 my-5 bg-catchup-orange", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-catchup-white text-xl", children: i18n_default.t("you_have_set_this_activity_as_empty") }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 my-5 bg-catchup-orange", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-catchup-white text-xl", children: i18n_default.t("you_have_set_this_activity_as_empty") }) }) });
 };
 var ActivityEmptyContent_default = ActivityEmptyContent;
@@ -3352,7 +3364,7 @@ var retrieveOpticalExamPartTypeOptionList = () => {
 // src/components/activities/body-content/ShowBodyMediaByContentType.tsx
 var import_react_katex = require("react-katex");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ShowBodyMediaByContentType = ({
   index,
   type,
@@ -3374,11 +3386,11 @@ var ShowBodyMediaByContentType = ({
     }
   };
   const renderSpecialExpressions = (inputPart, inputPartIndex) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "span",
       {
         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
+        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
       },
       inputPartIndex
     );
@@ -3398,7 +3410,7 @@ var ShowBodyMediaByContentType = ({
   };
   const renderTextContent = (text, itemKey) => {
     const balancedText = balanceSpecialChars(text);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(balancedText).map(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(balancedText).map(
       (inputPart, inputPartIndex) => renderSpecialExpressions(inputPart, inputPartIndex)
     ) }, itemKey);
   };
@@ -3431,7 +3443,7 @@ var ShowBodyMediaByContentType = ({
         currentIndex++;
         const itemKey = `text-inside-${index}-${currentIndex}`;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
             (inputPart, inputPartIndex) => renderSpecialExpressions(inputPart, inputPartIndex)
           ) }, itemKey)
         );
@@ -3451,7 +3463,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3470,12 +3482,12 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "div",
             {
               className: "relative w-[200px]",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   BaseImage_default,
                   {
                     src: imageSource,
@@ -3484,12 +3496,12 @@ var ShowBodyMediaByContentType = ({
                     className: "rounded-catchup-xlarge"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "div",
                   {
                     className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
                     onClick: () => handleOpenFullScreen(imageSource),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       BaseImage_default,
                       {
                         src: "/icons/arrow-up.webp",
@@ -3518,7 +3530,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3537,7 +3549,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "video",
             {
               src: videoSource,
@@ -3560,7 +3572,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3579,7 +3591,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "audio",
             {
               src: audioSource,
@@ -3605,13 +3617,13 @@ var ShowBodyMediaByContentType = ({
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "div",
             {
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-xl", children: imageText })
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xl", children: imageText })
               ]
             },
             `img-desc-${index}-${currentIndex}`
@@ -3625,7 +3637,7 @@ var ShowBodyMediaByContentType = ({
     return valuePartList;
   };
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_react_modal2.default,
       {
         isOpen: showFullScreen,
@@ -3654,8 +3666,8 @@ var ShowBodyMediaByContentType = ({
           }
         },
         contentLabel: "Image Fullscreen View",
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -3667,7 +3679,7 @@ var ShowBodyMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -3683,30 +3695,30 @@ var ShowBodyMediaByContentType = ({
   const RenderMainContent = () => {
     switch (type) {
       case "TEXT":
-        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "div",
           {
             className: `${convertToPercentage(
-              size || ""
+              size
             )} rounded-catchup-xlarge relative`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 BaseImage_default,
                 {
                   src: value,
-                  alt: "body image",
+                  alt: "body-image",
                   size: "custom",
                   className: "w-full rounded-catchup-xlarge"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "div",
                 {
                   className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
                   onClick: () => handleOpenFullScreen(value),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                     BaseImage_default,
                     {
                       src: "/icons/arrow-up.webp",
@@ -3721,7 +3733,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "VIDEO":
-        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "video",
           {
             src: value,
@@ -3732,12 +3744,12 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "AUDIO":
-        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "w-full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "w-full", children: [
     RenderShowFullScreenItem(),
     RenderMainContent()
   ] }, `body-content-${index}`);
@@ -3745,7 +3757,7 @@ var ShowBodyMediaByContentType = ({
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 // src/components/activities/body-content/ActivityBodyContent.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var ActivityBodyContent = ({
   templateType,
   bodyMap,
@@ -3826,7 +3838,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -3840,16 +3852,16 @@ var ActivityBodyContent = ({
 var ActivityBodyContent_default = ActivityBodyContent;
 // src/components/dividers/DividerLine.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var DividerLine = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
 };
 var DividerLine_default = DividerLine;
 // src/components/dividers/VerticalDividerLine.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var VerticalDividerLine = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
 };
 var VerticalDividerLine_default = VerticalDividerLine;
@@ -3859,7 +3871,7 @@ var import_react_katex2 = require("react-katex");
 // src/components/groups/InputGroup.tsx
 var import_react_select = __toESM(require("react-select"));
 var import_react12 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var InputGroup = ({
   type,
   title,
@@ -3961,7 +3973,7 @@ var InputGroup = ({
     setShowMathConstructor(true);
   };
   const MathConstructorModal = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       BaseModal_default,
       {
         isOpen: showMathConstructor,
@@ -3971,10 +3983,10 @@ var InputGroup = ({
         onRequestClose: () => {
           setShowMathConstructor(false);
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FullCard_default, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-white rounded-lg overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "p-6 space-y-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("math_editor") }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FullCard_default, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "bg-white rounded-lg overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "p-6 space-y-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("math_editor") }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "math-field",
               {
                 ref: mathFieldRef,
@@ -4001,10 +4013,10 @@ var InputGroup = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "textarea",
                 {
                   ref: latexTextAreaRef,
@@ -4014,7 +4026,7 @@ var InputGroup = ({
                   placeholder: i18n_default.t("latex_will_appear_here")
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "button",
                 {
                   onClick: handleCopyLatex,
@@ -4030,13 +4042,13 @@ var InputGroup = ({
     );
   };
   const CheckboxInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         className: "flex flex-row items-center gap-x-1 cursor-pointer",
         onClick,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             BaseImage_default,
             {
               src: value ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -4046,15 +4058,15 @@ var InputGroup = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "", children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "", children: title })
         ]
       }
     );
   };
   const FileInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "input",
         {
           className: "w-full py-2 px-4 border border-catchup-gray-100 placeholder-catchup-gray-200 rounded-catchup-large text-black focus:outline-none focus:border-catchup-blue-400 focus:shadow-input",
@@ -4071,9 +4083,9 @@ var InputGroup = ({
     ] });
   };
   const DateInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "input",
         {
           className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error" : theme === "red" ? "border-catchup-red bg-catchup-red text-catchup-white focus:border-catchup-red" : "border-catchup-gray-100 placeholder-catchup-gray-200 focus:border-catchup-blue-400"} rounded-catchup-large text-black focus:outline-none focus:shadow-input`,
@@ -4088,9 +4100,9 @@ var InputGroup = ({
     ] });
   };
   const SearchableSelectInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "my-1", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "my-1", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         import_react_select.default,
         {
           options: convertOptionListToSelectComponent(
@@ -4153,16 +4165,16 @@ var InputGroup = ({
     ] });
   };
   const TextAreaInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "my-1 flex-1 flex flex-col relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: value && limit ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "my-1 flex-1 flex flex-col relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: value && limit ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
         ] }) : null })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "textarea",
         {
           ref: textAreaRef,
@@ -4175,22 +4187,22 @@ var InputGroup = ({
           onKeyDown
         }
       ),
-      useMath && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      useMath && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200 z-10",
           onClick: handleOpenMathConstructor,
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "svg",
               {
                 className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -4207,13 +4219,13 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "my-1 relative", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "my-1 relative", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
           className: `w-full border ${errorText ? "border-catchup-red shadow-error" : "border-catchup-gray-100"} rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input ${disabled ? "bg-catchup-lighter-gray" : "bg-white"}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "input",
             {
               disabled,
@@ -4229,22 +4241,22 @@ var InputGroup = ({
           )
         }
       ),
-      useMath && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      useMath && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200",
           onClick: handleOpenMathConstructor,
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-x-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-x-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "svg",
               {
                 className: "w-3 h-3",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -4277,9 +4289,9 @@ var InputGroup = ({
       return CheckboxInputGroup();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
     RenderMainContent(),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MathConstructorModal, {})
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MathConstructorModal, {})
   ] });
 };
 var InputGroup_default = InputGroup;
@@ -4387,10 +4399,10 @@ var getColorByIndex = (index) => {
 // src/components/dropdowns/MediaDropdown.tsx
 var import_react13 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var MediaDropdown = ({ id, answer, optionList }) => {
   const [showDropdown, setShowDropdown] = (0, import_react13.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: "w-full relative",
@@ -4401,17 +4413,17 @@ var MediaDropdown = ({ id, answer, optionList }) => {
         setShowDropdown(false);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "ul",
           {
             className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
-            children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "li",
               {
                 className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                     "div",
                     {
                       className: `w-full flex flex-col my-2 ${option.divClassNames ? option.divClassNames : ""}`,
@@ -4419,7 +4431,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
                       children: option.media
                     }
                   ),
-                  index !== optionList.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
+                  index !== optionList.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
                 ]
               },
               option.id
@@ -4436,7 +4448,7 @@ var MediaDropdown_default = MediaDropdown;
 // src/components/activities/material-content/ShowMaterialMediaByContentType.tsx
 var import_react14 = require("react");
 var import_react_modal3 = __toESM(require("react-modal"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ShowMaterialMediaByContentType = ({
   key,
   contentType,
@@ -4464,7 +4476,7 @@ var ShowMaterialMediaByContentType = ({
     }
   }, [isLoaded, key]);
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       import_react_modal3.default,
       {
         isOpen: showFullScreen,
@@ -4495,8 +4507,8 @@ var ShowMaterialMediaByContentType = ({
           }
         },
         contentLabel: "",
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -4508,7 +4520,7 @@ var ShowMaterialMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center h-[500px]", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -4521,14 +4533,14 @@ var ShowMaterialMediaByContentType = ({
       }
     );
   };
-  return contentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+  return contentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
     RenderShowFullScreenItem(),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         className: `${isFullHeight ? "h-catchup-activity-box-item" : "max-w-catchup-activity-box-item"}  flex flex-col justify-center items-center relative`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             BaseImage_default,
             {
               src,
@@ -4541,7 +4553,7 @@ var ShowMaterialMediaByContentType = ({
               }
             }
           ),
-          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          src !== null && src !== "" && src !== "DEFAULT_OPTION" && canFullScreen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               className: "absolute flex items-center justify-center top-2 right-2  h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
@@ -4553,7 +4565,7 @@ var ShowMaterialMediaByContentType = ({
                 setShowFullScreen(true);
                 setSelectedFullScreenItem(src);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/arrow-up.webp",
@@ -4567,7 +4579,7 @@ var ShowMaterialMediaByContentType = ({
         ]
       }
     ) }) })
-  ] }, key) : contentType === "VIDEO" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  ] }, key) : contentType === "VIDEO" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "video",
     {
       className: "h-catchup-activity-box-item rounded-catchup-xlarge",
@@ -4576,7 +4588,7 @@ var ShowMaterialMediaByContentType = ({
       onClick: () => {
       }
     }
-  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  ) }) }) }) : contentType === "AUDIO" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-row flex-wrap items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-col justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "audio",
     {
       className: "h-catchup-activity-box-item rounded-catchup-xlarge",
@@ -4590,7 +4602,7 @@ var ShowMaterialMediaByContentType = ({
 var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
 // src/components/activities/material-content/DropdownActivityMaterialContent.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DropdownActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4633,22 +4645,22 @@ var DropdownActivityMaterialContent = ({
     return "INCORRECT";
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-row flex-wrap items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-row flex-wrap items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
       const answerKey = Object.keys(materialMap[materialKey])[0];
       const learnerAnswerState = checkAnswerState(
         answerKey,
         answerMap[materialKey]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "text-xl", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("p", { className: "text-xl", children: [
           parseFloat(materialKey) + 1,
           "."
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             InputGroup_default,
             {
               type: "select",
@@ -4656,13 +4668,13 @@ var DropdownActivityMaterialContent = ({
               optionList: shuffleArray(
                 materialMap[materialKey][answerKey]
               ).map((materialOption) => ({
-                text: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                text: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialOption
-                ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       import_react_katex2.InlineMath,
                       {
                         math: inputPart.value
@@ -4677,11 +4689,11 @@ var DropdownActivityMaterialContent = ({
                 onChange(answer, materialKey, e.target.value);
               }
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             MediaDropdown_default,
             {
               id: materialKey,
-              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              answer: answerMap[materialKey] === "DEFAULT_OPTION" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed border-catchup-blue", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "italic", children: i18n_default.t("please_select") }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4693,7 +4705,7 @@ var DropdownActivityMaterialContent = ({
               optionList: materialMap[materialKey][answerKey].map(
                 (materialOption, index2) => ({
                   id: index2,
-                  media: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  media: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -4712,24 +4724,24 @@ var DropdownActivityMaterialContent = ({
                 })
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
             answerMap[materialKey]
-          ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "span",
             {
               className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_katex2.InlineMath, { math: inputPart.value }) }) : inputPart.value
+              children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_katex2.InlineMath, { math: inputPart.value }) }) : inputPart.value
             },
             index2
           )) }) }),
-          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             BaseImage_default,
             {
               src: "/icons/checkbox.webp",
               alt: "chekbbox",
               size: "small"
             }
-          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute -top-2 right-3 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -4746,7 +4758,7 @@ var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 // src/components/activities/DropdownActivityContent.tsx
 var import_react17 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var DropdownActivityContent = ({
   answer,
   data,
@@ -4788,8 +4800,8 @@ var DropdownActivityContent = ({
     setCurrentAnswerMap(newAnswerMap);
     changeAnswer(newAnswer);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: dropdownBodyMap,
@@ -4798,9 +4810,9 @@ var DropdownActivityContent = ({
         templateType: "DROPDOWN"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       DropdownActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -4825,7 +4837,7 @@ var import_react_dnd3 = require("react-dnd");
 // src/components/dnds/DraggableItem.tsx
 var import_react_dnd = require("react-dnd");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var DraggableItem = ({
   item,
   type,
@@ -4846,11 +4858,11 @@ var DraggableItem = ({
     })
   });
   const opacity = isDragging ? 0.4 : 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       className: `${isDragging ? "w-[0px] opacity-0" : "opacity-100"} transition-all duration-500`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: drag, className: "", style: { opacity }, children: component })
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref: drag, className: "", style: { opacity }, children: component })
     }
   );
 };
@@ -4859,7 +4871,7 @@ var DraggableItem_default = DraggableItem;
 // src/components/dnds/DroppableItem.tsx
 var import_react18 = require("react");
 var import_react_dnd2 = require("react-dnd");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var DroppableItem = ({
   item,
   type,
@@ -4878,12 +4890,12 @@ var DroppableItem = ({
     }
   });
   dropRef(drop(ref));
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: `w-full transition-all duration-500 h-full`, ref, children: component });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `w-full transition-all duration-500 h-full`, ref, children: component });
 };
 var DroppableItem_default = DroppableItem;
 // src/components/activities/material-content/FillInTheBlanksActivityMaterialContent.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -4942,12 +4954,12 @@ var FillInTheBlanksActivityMaterialContent = ({
     return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-row flex-wrap items-center", onMouseUp: () => {
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
-      (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_fill_in_the_blanks_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
+      (option, index) => checkAnswerProvided(answerMap, option) ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "opacity-30", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ShowMaterialMediaByContentType_default,
         {
           contentType: contentMap.type,
@@ -4955,12 +4967,12 @@ var FillInTheBlanksActivityMaterialContent = ({
           canFullScreen: true
         },
         `${uniqueValue}-${index}`
-      ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         DraggableItem_default,
         {
           item: { index: option },
           type: "FILL_IN_THE_BLANKS",
-          component: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          component: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "div",
             {
               className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
@@ -4968,9 +4980,9 @@ var FillInTheBlanksActivityMaterialContent = ({
                 setSelectedOption(option);
                 setPasteOptionIndex(null);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "italic whitespace-pre-wrap", children: option })
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "italic whitespace-pre-wrap", children: option })
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "div",
             {
               className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer",
@@ -4978,7 +4990,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                 setSelectedOption(option);
                 setPasteOptionIndex(null);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 ShowMaterialMediaByContentType_default,
                 {
                   contentType: contentMap.type,
@@ -4996,12 +5008,12 @@ var FillInTheBlanksActivityMaterialContent = ({
         index
       )
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
       const learnerAnswerState = checkAnswerState(
         JSON.parse(materialMap[materialKey]),
         answerMap[materialKey]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         DroppableItem_default,
         {
           item: { index },
@@ -5009,13 +5021,13 @@ var FillInTheBlanksActivityMaterialContent = ({
           target: pasteOptionIndex,
           setTarget: setPasteOptionIndex,
           dropRef: drop,
-          component: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("p", { className: "text-xl", children: [
+          component: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "my-auto", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("p", { className: "text-xl", children: [
               parseFloat(materialKey) + 1,
               "."
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 InputGroup_default,
                 {
                   type: "textarea",
@@ -5030,14 +5042,14 @@ var FillInTheBlanksActivityMaterialContent = ({
                   }
                 }
               ) }),
-              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              learnerAnswerState === "CORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/checkbox.webp",
                   alt: "checkbox",
                   size: "small"
                 }
-              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              ) }) : learnerAnswerState === "INCORRECT" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute -top-[10px] right-4 bg-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/cross-red.webp",
@@ -5045,20 +5057,20 @@ var FillInTheBlanksActivityMaterialContent = ({
                   size: "small"
                 }
               ) }) : null
-            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            ] }) : answerMap[materialKey] === "" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "div",
               {
                 className: `w-catchup-activity-box-item border h-catchup-activity-box-item rounded-catchup-xlarge border-dashed ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-full flex flex-col items-center justify-center px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "italic", children: i18n_default.t("please_drop_here") }) })
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "div",
               {
                 className: "flex-1 cursor-pointer",
                 onClick: () => {
                   onChange(answer, materialKey, "");
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5068,13 +5080,13 @@ var FillInTheBlanksActivityMaterialContent = ({
                   `${uniqueValue}-${index}`
                 )
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
               answerMap[materialKey]
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_katex3.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )) }, materialKey) })
@@ -5089,7 +5101,7 @@ var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMate
 // src/components/activities/FillInTheBlanksActivityContent.tsx
 var import_react21 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var FillInTheBlanksActivityContent = ({
   answer,
   data,
@@ -5156,8 +5168,8 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(newAnswerMap);
     changeAnswer(newAnswer);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: fillInTheBlanksBodyMap,
@@ -5166,9 +5178,9 @@ var FillInTheBlanksActivityContent = ({
         templateType: "FILL_IN_THE_BLANKS"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       FillInTheBlanksActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5227,7 +5239,7 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 // src/components/activities/material-content/GroupingActivityMaterialContent.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5326,19 +5338,19 @@ var GroupingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {
         ref: itemsRef,
         className: "flex-1 flex flex-row gap-x-4 gap-y-4 overflow-auto py-2",
         children: filteredMaterialList.map((materialValue, index) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             DraggableItem_default,
             {
               item: { index: materialValue },
               type: "GROUPING",
-              component: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              component: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 "div",
                 {
                   className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} h-catchup-activity-covering-box-item flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
@@ -5352,22 +5364,22 @@ var GroupingActivityMaterialContent = ({
                       setSelectedValue(null);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     "div",
                     {
                       className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                         materialValue
-                      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                         "span",
                         {
                           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
                         },
                         index2
                       )) })
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -5392,22 +5404,22 @@ var GroupingActivityMaterialContent = ({
         })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DividerLine_default, {}) : null,
-    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-row w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {}) : null,
+    Object.keys(answerMap).map((answerMapKey, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           className: `border-catchup-blue h-catchup-activity-outer-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "div",
             {
               className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_katex4.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
                 )
@@ -5416,12 +5428,12 @@ var GroupingActivityMaterialContent = ({
           )
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex-1", ref, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-full py-3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1", ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-full py-3", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} flex-1 border-catchup-blue rounded-catchup-xlarge border-2 h-full p-1`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             DroppableItem_default,
             {
               item: { index: answerMapKey },
@@ -5429,7 +5441,7 @@ var GroupingActivityMaterialContent = ({
               target: selectedTargetKey,
               setTarget: setSelectedTargetKey,
               dropRef: drop,
-              component: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              component: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 "div",
                 {
                   className: "h-full flex-1 flex flex-row items-center overflow-x-auto",
@@ -5442,7 +5454,7 @@ var GroupingActivityMaterialContent = ({
                         materialMap[answerMapKey],
                         answerMapValue
                       );
-                      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-catchup-activity-box-item", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                         "div",
                         {
                           className: `${learnerAnswerState === "EMPTY" ? "border-catchup-lighter-gray" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"} border-2 rounded-catchup-xlarge h-full flex flex-col items-center justify-center transition-all duration-300 cursor-pointer`,
@@ -5458,17 +5470,17 @@ var GroupingActivityMaterialContent = ({
                               setSelectedValue(null);
                             }
                           },
-                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                          children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                             "div",
                             {
                               className: `flex flex-col items-center justify-center transition-all duration-300 min-h-[64px] min-w-[200px]`,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-xl text-center whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                                 answerMapValue
-                              ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                              ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                                 "span",
                                 {
                                   className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                                  children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                                  children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                                     import_react_katex4.InlineMath,
                                     {
                                       math: inputPart.value
@@ -5478,7 +5490,7 @@ var GroupingActivityMaterialContent = ({
                                 index2
                               )) }) })
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                             ShowMaterialMediaByContentType_default,
                             {
                               contentType: contentMap.type,
@@ -5504,7 +5516,7 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 // src/components/activities/GroupingActivityContent.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var GroupingActivityContent = ({
   answer,
   data,
@@ -5529,16 +5541,16 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: groupingBodyMap,
         templateType: "GROUPING"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       GroupingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5559,7 +5571,7 @@ var GroupingActivityContent_default = GroupingActivityContent;
 var import_react24 = require("react");
 var import_react_dnd5 = require("react-dnd");
 var import_react_katex5 = require("react-katex");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5655,18 +5667,18 @@ var MatchingActivityMaterialContent = ({
   };
   const answerMap = retrieveAnswerMap();
   const filteredMaterialList = retrieveFilteredMaterialList(answerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         ref: itemsRef,
         className: "flex-1 flex flex-row gap-x-4 gap-y-4 overflow-auto py-2",
-        children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        children: filteredMaterialList.map((materialValue, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           DraggableItem_default,
           {
             item: { index: materialValue },
             type: "MATCHING",
-            component: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            component: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "div",
               {
                 className: `${selectedValue === materialValue ? "border-catchup-blue" : "border-catchup-lighter-gray"} h-catchup-activity-covering-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300`,
@@ -5680,22 +5692,22 @@ var MatchingActivityMaterialContent = ({
                     setSelectedValue(null);
                   }
                 },
-                children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "div",
                   {
                     className: `flex flex-col items-center justify-center m-4 min-h-[64px] min-w-[200px]`,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialValue
-                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
                     )) })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5719,27 +5731,27 @@ var MatchingActivityMaterialContent = ({
         ))
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DividerLine_default, {}) : null,
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DividerLine_default, {}) : null,
     Object.keys(answerMap).map((answerMapKey, index) => {
       const learnerAnswerState = checkAnswerState(
         materialMap[answerMapKey],
         answerMap[answerMapKey]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-row w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-row w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-1/3", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: `h-catchup-activity-outer-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "div",
               {
                 className: `flex flex-col items-center justify-center transition-all duration-300 m-4`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
-                  (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(answerMapKey).map(
+                  (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
                   )
@@ -5748,8 +5760,8 @@ var MatchingActivityMaterialContent = ({
             )
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mx-4 w-[2px] bg-catchup-lighter-gray" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "div",
           {
             className: `${canDrop ? selectedTargetKey === answerMapKey ? "bg-catchup-light-blue" : "bg-catchup-light-blue opacity-40" : ""} h-catchup-activity-outer-box-item flex flex-col items-center justify-center  border-2 rounded-catchup-xlarge cursor-pointer transition-all duration-300 my-3 ${learnerAnswerState === "EMPTY" ? "border-catchup-blue" : learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
@@ -5758,7 +5770,7 @@ var MatchingActivityMaterialContent = ({
                 setSelectedValue(null);
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               DroppableItem_default,
               {
                 item: { index: answerMapKey },
@@ -5766,7 +5778,7 @@ var MatchingActivityMaterialContent = ({
                 target: selectedTargetKey,
                 setTarget: setSelectedTargetKey,
                 dropRef: drop,
-                component: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                component: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "div",
                   {
                     className: `h-full flex-1 flex flex-row items-center justify-center `,
@@ -5779,16 +5791,16 @@ var MatchingActivityMaterialContent = ({
                         );
                       }
                     },
-                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xl p-5 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       answerMap[answerMapKey]
-                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_katex5.InlineMath, { math: inputPart.value }) }) : inputPart.value
                       },
                       index2
-                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -5811,7 +5823,7 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 // src/components/activities/MatchingActivityContent.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var MatchingActivityContent = ({
   answer,
   data,
@@ -5832,16 +5844,16 @@ var MatchingActivityContent = ({
     answerMap[key] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: matchingBodyMap,
         templateType: "MATCHING"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       MatchingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -5860,7 +5872,7 @@ var MatchingActivityContent_default = MatchingActivityContent;
 // src/components/activities/material-content/MCMAActivityMaterialContent.tsx
 var import_react_katex6 = require("react-katex");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var MCMAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -5893,10 +5905,10 @@ var MCMAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswerList = retrieveCorrectAnswerList();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
         (materialSubKey, index2) => {
           const foundAnswer = answerMap[materialKey].find(
             (learnerAnswer) => learnerAnswer === materialSubKey
@@ -5909,7 +5921,7 @@ var MCMAActivityMaterialContent = ({
           const foundIndex = correctAnswerList.findIndex(
             (correctAnswer) => correctAnswer === materialSubKey
           );
-          return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
             "div",
             {
               className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && foundIndex !== -1 || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
@@ -5917,7 +5929,7 @@ var MCMAActivityMaterialContent = ({
                 onChange(answer, materialKey, materialSubKey);
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   BaseImage_default,
                   {
                     src: answerMap[materialKey].includes(materialSubKey) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -5927,16 +5939,16 @@ var MCMAActivityMaterialContent = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                   materialSubKey
-                ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index3
-                )) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                )) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                   ShowMaterialMediaByContentType_default,
                   {
                     contentType: contentMap.type,
@@ -5950,13 +5962,13 @@ var MCMAActivityMaterialContent = ({
             index2
           );
         }
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-xl", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_katex6.InlineMath, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) }, materialKey)
@@ -5966,7 +5978,7 @@ var MCMAActivityMaterialContent = ({
 var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
 // src/components/activities/MCMAActivityContent.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var MCMAActivityContent = ({
   answer,
   data,
@@ -5993,11 +6005,11 @@ var MCMAActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       MCMAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6015,7 +6027,7 @@ var MCMAActivityContent_default = MCMAActivityContent;
 // src/components/activities/material-content/MCSAActivityMaterialContent.tsx
 var import_react_katex7 = require("react-katex");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var MCSAActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6045,10 +6057,10 @@ var MCSAActivityMaterialContent = ({
   const answerMap = retrieveAnswerMap();
   const correctAnswer = retrieveCorrectAnswer();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(DividerLine_default, {}) }),
-      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DividerLine_default, {}) }),
+      checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "div",
         {
           className: `flex flex-row w-full ${Object.keys(materialMap[materialKey]).length <= 4 ? "justify-center" : ""} flex-wrap`,
@@ -6059,7 +6071,7 @@ var MCSAActivityMaterialContent = ({
                 materialSubKey,
                 answerMap[materialKey]
               );
-              return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
                 "div",
                 {
                   className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && materialSubKey === correctAnswer || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
@@ -6067,7 +6079,7 @@ var MCSAActivityMaterialContent = ({
                     onChange(answer, materialKey, materialSubKey);
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       BaseImage_default,
                       {
                         src: answerMap[materialKey] === materialSubKey ? "/icons/item-element.webp" : "/icons/not-selected-item-element.webp",
@@ -6077,16 +6089,16 @@ var MCSAActivityMaterialContent = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                       materialSubKey
-                    ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    ).map((inputPart, index3) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       "span",
                       {
                         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
                       },
                       index3
-                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       ShowMaterialMediaByContentType_default,
                       {
                         contentType: contentMap.type,
@@ -6102,13 +6114,13 @@ var MCSAActivityMaterialContent = ({
             }
           )
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
         answerMap[materialKey]
-      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "span",
         {
           className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
+          children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_katex7.InlineMath, { math: inputPart.value }) }) : inputPart.value
         },
         index2
       )) })
@@ -6118,7 +6130,7 @@ var MCSAActivityMaterialContent = ({
 var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
 // src/components/activities/MCSAActivityContent.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var MCSAActivityContent = ({
   answer,
   data,
@@ -6138,11 +6150,11 @@ var MCSAActivityContent = ({
     answerMap[key] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       MCSAActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6187,7 +6199,7 @@ var retrieveDocumentTypeFromExtension = (format) => {
 };
 // src/components/activities/material-content/OpenEndedActivityMaterialContent.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var OpenEndedActivityMaterialContent = ({
   answer,
   contentMap,
@@ -6217,7 +6229,7 @@ var OpenEndedActivityMaterialContent = ({
       documentType = retrieveDocumentTypeFromExtension(extension);
     }
     if (documentType === "IMAGE") {
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         BaseImage_default,
         {
           src: answerMapAnswer,
@@ -6227,9 +6239,9 @@ var OpenEndedActivityMaterialContent = ({
         }
       ) });
     } else if (documentType === "PDF") {
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BasePDF_default, { file: answerMapAnswer });
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BasePDF_default, { file: answerMapAnswer });
     } else if (documentType === "AUDIO") {
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-[56px]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-[56px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "audio",
         {
           className: "h-full w-full rounded-catchup-xlarge",
@@ -6240,7 +6252,7 @@ var OpenEndedActivityMaterialContent = ({
         }
       ) });
     } else if (documentType === "TEXT") {
-      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         InputGroup_default,
         {
           type: "textarea",
@@ -6259,7 +6271,7 @@ var OpenEndedActivityMaterialContent = ({
     const answerMapAnswer = answerMap2["ANSWER"];
     const extension = answerMapAnswer.split(".").pop();
     const documentType = retrieveDocumentTypeFromExtension(extension);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: documentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: documentType === "IMAGE" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       BaseImage_default,
       {
         src: answerMapAnswer,
@@ -6267,11 +6279,11 @@ var OpenEndedActivityMaterialContent = ({
         size: "custom",
         className: "w-[80%] rounded-catchup-xlarge"
       }
-    ) }) : documentType === "PDF" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(BasePDF_default, { file: answerMapAnswer }) }) : null });
+    ) }) : documentType === "PDF" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BasePDF_default, { file: answerMapAnswer }) }) : null });
   };
   const RenderAudioContent = (answerMap2) => {
     const answerMapAnswer = answerMap2["ANSWER"];
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-[56px]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "h-[56px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "audio",
       {
         className: "h-full w-full rounded-catchup-xlarge",
@@ -6283,16 +6295,16 @@ var OpenEndedActivityMaterialContent = ({
     ) });
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DividerLine_default, {}) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DividerLine_default, {}) }),
     contentMap.type === "TEXT" ? RenderTextContent(answerMap) : contentMap.type === "IMAGE" ? RenderImageContent(answerMap) : contentMap.type === "AUDIO" ? RenderAudioContent(answerMap) : null
   ] }) });
 };
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 // src/components/activities/OpenEndedActivityContent.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var OpenEndedActivityContent = ({
   answer,
   data,
@@ -6311,12 +6323,12 @@ var OpenEndedActivityContent = ({
     answerMap["ANSWER"] = value;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
       {
         className: `${showMaterialContent ? isFullScreen ? "w-full" : "w-full md:w-[40%]" : "w-full"}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           ActivityBodyContent_default,
           {
             bodyMap: openEndedBodyMap,
@@ -6325,16 +6337,16 @@ var OpenEndedActivityContent = ({
         )
       }
     ),
-    showMaterialContent ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    showMaterialContent ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "div",
         {
           className: `${isFullScreen ? "contents" : "contents md:hidden"}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DividerLine_default, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(DividerLine_default, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(VerticalDividerLine_default, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(VerticalDividerLine_default, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         OpenEndedActivityMaterialContent_default,
         {
           answer,
@@ -6356,7 +6368,7 @@ var import_react_katex8 = require("react-katex");
 // src/components/dnds/DraggableDroppableItem.tsx
 var import_react25 = require("react");
 var import_react_dnd6 = require("react-dnd");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var DraggableDroppableItem = ({
   item,
   type,
@@ -6393,19 +6405,19 @@ var DraggableDroppableItem = ({
   });
   const opacity = isDragging ? 0.4 : 1;
   drag(drop(ref));
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       className: `${isDragging ? "w-[0px] opacity-0" : "w-full opacity-100"} transition-all duration-500`,
       ref: dropRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, className: "w-full", style: { opacity }, children: component })
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref, className: "w-full", style: { opacity }, children: component })
     }
   );
 };
 var DraggableDroppableItem_default = DraggableDroppableItem;
 // src/components/activities/material-content/OrderingActivityMaterialContent.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6482,12 +6494,12 @@ var OrderingActivityMaterialContent = ({
     return 0;
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
     const learnerAnswerState = checkAnswerState(
       answerMap[materialKey] + "",
       index + ""
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "div",
       {
         className: `flex flex-row items-center my-4 mx-2`,
@@ -6495,26 +6507,26 @@ var OrderingActivityMaterialContent = ({
           marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "div",
             {
               className: `min-h-catchup-activity-outer-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 "div",
                 {
                   className: `${selectedKey === materialKey ? "border-2 border-catchup-light-gray" : "border-2 border-catchup-blue"} flex flex-col items-center justify-center transition-all duration-300 rounded-catchup-full w-[50px] h-[50px]`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
                 }
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             DraggableDroppableItem_default,
             {
               item: { index: materialKey },
               type: "ORDERING",
               dropRef: drop,
-              component: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              component: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 "div",
                 {
                   className: `${canDrop ? selectedKey !== materialKey ? selectedTargetKey === materialKey ? "bg-catchup-light-blue rounded-catchup-xlarge" : "bg-catchup-light-blue rounded-catchup-xlarge opacity-40" : "" : ""} flex-1 min-h-catchup-activity-outer-box-item flex flex-col items-center justify-center border-2 rounded-catchup-xlarge cursor-pointer p-3 ${learnerAnswerState === "CORRECT" ? "border-catchup-green" : learnerAnswerState === "INCORRECT" ? "border-catchup-red" : "border-catchup-blue"}`,
@@ -6523,16 +6535,16 @@ var OrderingActivityMaterialContent = ({
                       setSelectedKey(materialKey);
                     }
                   },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
                     materialMap[answerMap[materialKey]]
-                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     "span",
                     {
                       className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_katex8.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_katex8.InlineMath, { math: inputPart.value }) }) : inputPart.value
                     },
                     index2
-                  )) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  )) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                     ShowMaterialMediaByContentType_default,
                     {
                       contentType: contentMap.type,
@@ -6564,7 +6576,7 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 // src/components/activities/OrderingActivityContent.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var OrderingActivityContent = ({
   answer,
   data,
@@ -6587,16 +6599,16 @@ var OrderingActivityContent = ({
     answerMap[secondaryKey] = prevValue;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: orderingBodyMap,
         templateType: "ORDERING"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6616,7 +6628,7 @@ var OrderingActivityContent_default = OrderingActivityContent;
 // src/components/activities/material-content/TrueFalseActivityMaterialContent.tsx
 var import_react27 = require("react");
 var import_react_katex9 = require("react-katex");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6669,14 +6681,14 @@ var TrueFalseActivityMaterialContent = ({
     return "INCORRECT";
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
     ] }),
-    checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
+    checkCanAnswerQuestion() ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `flex flex-row w-full justify-center flex-wrap`, children: shuffleOptionList.map((shuffleOption, index) => {
       const correctAnswer = materialMap.trueList.find(
         (trueItem) => trueItem === shuffleOption
       ) !== void 0 ? "TRUE" : "FALSE";
@@ -6687,21 +6699,21 @@ var TrueFalseActivityMaterialContent = ({
         correctAnswer,
         learnerAnswer
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "div",
         {
           className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 ${learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-xl p-2 whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
               shuffleOption
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
-            )) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            )) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6710,8 +6722,8 @@ var TrueFalseActivityMaterialContent = ({
               },
               `${uniqueValue}-${index}`
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 BaseImage_default,
                 {
                   src: answerMap.trueList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6722,7 +6734,7 @@ var TrueFalseActivityMaterialContent = ({
                   }
                 }
               ) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 BaseImage_default,
                 {
                   src: answerMap.falseList.includes(shuffleOption) ? "/icons/checkbox.webp" : "/icons/checkbox-empty.webp",
@@ -6738,14 +6750,14 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-      answerMap.trueList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: item }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "underline", children: i18n_default.t("true") }) })
+    }) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      answerMap.trueList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { children: item }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "underline", children: i18n_default.t("true") }) })
       ] })),
-      answerMap.falseList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { children: item }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "underline", children: i18n_default.t("false") }) })
+      answerMap.falseList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { children: item }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))
     ] })
   ] });
@@ -6753,7 +6765,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 // src/components/activities/TrueFalseActivityContent.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var TrueFalseActivityContent = ({
   answer,
   data,
@@ -6803,17 +6815,17 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       ActivityBodyContent_default,
       {
         bodyMap: trueFalseBodyMap,
         templateType: "GROUPING"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(VerticalDividerLine_default, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       TrueFalseActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6832,7 +6844,7 @@ var TrueFalseActivityContent_default = TrueFalseActivityContent;
 // src/components/activities/solution-content/ActivitySolutionContent.tsx
 var import_react_katex10 = require("react-katex");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -6862,8 +6874,8 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
     Object.keys(solutionMap).map((key) => {
       let currentItem;
       try {
@@ -6873,12 +6885,12 @@ var ActivitySolutionContent = ({
         return null;
       }
       const { value } = currentItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
-        (inputPart, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
+        (inputPart, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "span",
           {
             className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -6890,7 +6902,7 @@ var ActivitySolutionContent_default = ActivitySolutionContent;
 // src/components/activities/evaluation-rubric-content/ActivityEvaluationRubricContent.tsx
 var import_react_katex11 = require("react-katex");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -6919,21 +6931,21 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("evaluation_rubric") }),
     Object.keys(evaluationRubricMap).map((key, index) => {
       const currentItem = JSON.parse(evaluationRubricMap[key]);
       const { value } = currentItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "p",
         {
           className: "my-1 text-xl whitespace-pre-wrap",
           children: constructInputWithSpecialExpressionList(value).map(
-            (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
@@ -6950,28 +6962,28 @@ var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 var import_react28 = require("react");
 // src/components/boxes/SelectionBox.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)(
     "div",
     {
       className: `${option.id === selectedId ? "border-catchup-blue-400" : "border-catchup-gray-100 hover:border-catchup-blue-500"} border-2 rounded-catchup-xlarge py-3 px-8 cursor-pointer duration-300 transition-all`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
           children: [
             option.icon,
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { children: option.text }),
-              option.subText ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { className: "text-md", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { children: option.text }),
+              option.subText ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("p", { className: "text-md", children: [
                 "(",
                 option.subText,
                 ")"
@@ -6987,7 +6999,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 // src/components/activities/ActivityPreviewByData.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var ActivityPreviewByData = ({
   data,
   showType,
@@ -7045,11 +7057,11 @@ var ActivityPreviewByData = ({
   }, [data, lockedType, typeOptionList, showDifficulty]);
   if (!data) return;
   const answer = constructAnswerBasedOnData(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { children: [
-    showType ? /* @__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_runtime49.jsxs)("div", { children: [
+    showType ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mb-4", children: [
+        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           SelectionBox_default,
           {
             optionList,
@@ -7060,9 +7072,9 @@ var ActivityPreviewByData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DividerLine_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DividerLine_default, {})
     ] }) : null,
-    selectedType ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    selectedType ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       OrderingActivityContent_default,
       {
         answer,
@@ -7076,7 +7088,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       DropdownActivityContent_default,
       {
         answer,
@@ -7090,7 +7102,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       MCSAActivityContent_default,
       {
         answer,
@@ -7104,7 +7116,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       MCMAActivityContent_default,
       {
         answer,
@@ -7118,7 +7130,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       MatchingActivityContent_default,
       {
         answer,
@@ -7132,7 +7144,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       GroupingActivityContent_default,
       {
         answer,
@@ -7146,7 +7158,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       FillInTheBlanksActivityContent_default,
       {
         answer,
@@ -7160,7 +7172,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       OpenEndedActivityContent_default,
       {
         answer,
@@ -7171,7 +7183,7 @@ var ActivityPreviewByData = ({
         data,
         isFullScreen
       }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       TrueFalseActivityContent_default,
       {
         answer,
@@ -7186,14 +7198,14 @@ var ActivityPreviewByData = ({
         isFullScreen
       }
     ) : null }, selectedType) : null,
-    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7206,7 +7218,7 @@ var ActivityPreviewByData_default = ActivityPreviewByData;
 // src/components/activities/ActivityPreviewByAnswerData.tsx
 var import_react29 = require("react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ActivityPreviewByAnswerData = ({
   data,
   showType = true,
@@ -7314,38 +7326,38 @@ var ActivityPreviewByAnswerData = ({
     };
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(OrderingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DropdownActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MCSAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MCMAActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MatchingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(GroupingActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps)) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        return data.openEndedBodyMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           OpenEndedActivityContent_default,
           __spreadProps(__spreadValues({}, commonProps), {
             showMaterialContent: true
           })
         ) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TrueFalseActivityContent_default, __spreadValues({}, commonProps)) : null;
       default:
         return null;
     }
   };
   if (!data) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mb-4", children: [
-        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mb-4", children: [
+        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           SelectionBox_default,
           {
             optionList,
@@ -7356,20 +7368,20 @@ var ActivityPreviewByAnswerData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DividerLine_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col my-2 w-full p-5", children: [
-      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ActivityEmptyContent_default, {}) : null,
-      selectedType ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { children: RenderSelectedActivityContent() }, selectedType) : null
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col my-2 w-full p-5", children: [
+      ((_a = answer == null ? void 0 : answer.data[0]) == null ? void 0 : _a.isEmpty) ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ActivityEmptyContent_default, {}) : null,
+      selectedType ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { children: RenderSelectedActivityContent() }, selectedType) : null
     ] }),
-    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       ActivitySolutionContent_default,
       {
         activityTemplateType: selectedType,
         data
       }
     ) }) : null,
-    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7381,9 +7393,9 @@ var ActivityPreviewByAnswerData = ({
 var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
 // src/components/dividers/BlueVerticalDividerLine.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7393,7 +7405,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 // src/components/groups/LeftTextRightInputGroup.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7403,9 +7415,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_runtime52.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       InputGroup_default,
       {
         type,
@@ -7422,7 +7434,7 @@ var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 // src/components/groups/PageTravelGroup.tsx
 var import_react30 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7440,8 +7452,8 @@ var PageTravelGroup = ({
   (0, import_react30.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_runtime53.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
+    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       BaseImage_default,
       {
         size: "small",
@@ -7459,7 +7471,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_runtime53.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "p",
       {
         className: `${pageNumber === index ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -7474,7 +7486,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_runtime53.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       BaseImage_default,
       {
         size: "small",
@@ -7492,7 +7504,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime53.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`,
@@ -7516,14 +7528,14 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 // src/components/boxes/SelectionCheckbox.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = 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_runtime54.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_runtime54.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7538,14 +7550,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.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_runtime54.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7555,7 +7567,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_runtime54.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -7566,7 +7578,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7576,7 +7588,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_runtime55.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_runtime55.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`,
@@ -7584,8 +7596,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_runtime55.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7594,20 +7606,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 // src/components/tabs/SelectionTabFill.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = 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_runtime56.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_runtime56.jsx)(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.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`,
@@ -7621,34 +7633,34 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 // src/components/labels/ActivityTemplateLabel.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = 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 m-auto 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_runtime57.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 m-auto 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/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime58 = 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 m-auto 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_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 m-auto 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)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.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_runtime59 = 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 m-auto 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_runtime59.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 m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       BaseImage_default,
       {
         src: "/icons/category-label.webp",
@@ -7656,40 +7668,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_runtime59.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_runtime60 = 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 m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.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 m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.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_runtime61 = 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 m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.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 m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.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_runtime62 = 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 m-auto 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_runtime62.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 m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime63 = 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 m-auto 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_runtime63.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 m-auto 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)(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -7697,16 +7709,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_runtime63.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_runtime64 = 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 m-auto 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_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 m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7714,79 +7726,79 @@ 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_runtime64.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_runtime65 = 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 m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.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 m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime66 = 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_runtime66.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 // src/components/texts/InputWithSpecialExpression.tsx
 var import_react_katex12 = require("react-katex");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 // src/components/titles/BaseTitle.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime67.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_runtime68.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_runtime67.jsx)("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 // src/components/titles/SubTitle.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
@@ -10427,6 +10439,7 @@ var retrieveActivityMethodologyOptionList = () => {
   ActivitySolutionContent,
   ActivityTemplateLabel,
   ApproveButton,
+  BaseCard,
   BaseImage,
   BaseLoading,
   BaseLoadingWithText,