catchup-library-web 1.20.32 → 1.20.34

package/dist/index.js

@@ -4903,21 +4903,29 @@ var FillInTheBlanksActivityMaterialContent = ({
   const [selectedOption, setSelectedOption] = (0, import_react18.useState)(null);
   const [draggedOption, setDraggedOption] = (0, import_react18.useState)(null);
   const [dropTargetIndex, setDropTargetIndex] = (0, import_react18.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react18.useState)(
+    null
+  );
+  const dragElementRef = (0, import_react18.useRef)(null);
+  const [touchPosition, setTouchPosition] = (0, import_react18.useState)({
+    x: 0,
+    y: 0
+  });
   (0, import_react18.useEffect)(() => {
     setShuffleOptionList(shuffleArray(optionList));
-  }, []);
+  }, [optionList]);
   (0, import_react18.useEffect)(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
     );
-    if (foundAnswer.answerMap.length === 0) return;
+    if (!foundAnswer || foundAnswer.answerMap.length === 0) return;
     if (Object.keys(materialMap).length === 0) return;
     foundAnswer.answerMap = Object.keys(materialMap).map(
       (materialMapKey) => JSON.parse(materialMap[materialMapKey])[0]
     );
     onChange(answer, 0, JSON.parse(materialMap[0])[0]);
-  }, [showCorrectAnswer]);
+  }, [showCorrectAnswer, answer, materialMap, onChange]);
   const retrieveAnswerMap = () => {
     const foundIndex = answer.data.findIndex(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
@@ -4937,36 +4945,89 @@ var FillInTheBlanksActivityMaterialContent = ({
   const checkAnswerProvided = (answerMap2, option) => {
     return Object.keys(answerMap2).findIndex((key) => answerMap2[key] === option) !== -1;
   };
-  const handleSelectOption = (option) => {
-    setSelectedOption(option);
+  const handleMouseDown = (e, option) => {
+    e.preventDefault();
+    setDraggedOption(option);
+    setSelectedOption(null);
+  };
+  const handleMouseUp = () => {
+    if (dropTargetIndex !== null && draggedOption !== null) {
+      onChange(answer, dropTargetIndex, draggedOption);
+    }
+    setDraggedOption(null);
+    setDropTargetIndex(null);
   };
-  const handleDragStart = (option) => {
+  const handleTouchStart = (e, option, element) => {
+    const touch = e.touches[0];
     setDraggedOption(option);
+    setDraggedElement(element);
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    setSelectedOption(null);
+  };
+  const handleTouchMove = (e) => {
+    if (!draggedOption) return;
+    const touch = e.touches[0];
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    const elementUnder = document.elementFromPoint(
+      touch.clientX,
+      touch.clientY
+    );
+    const dropZone = elementUnder == null ? void 0 : elementUnder.closest("[data-drop-zone]");
+    if (dropZone) {
+      const dropIndex = dropZone.getAttribute("data-drop-zone");
+      setDropTargetIndex(dropIndex);
+    } else {
+      setDropTargetIndex(null);
+    }
   };
-  const handleDragEnd = () => {
+  const handleTouchEnd = () => {
     if (dropTargetIndex !== null && draggedOption !== null) {
       onChange(answer, dropTargetIndex, draggedOption);
     }
     setDraggedOption(null);
     setDropTargetIndex(null);
+    setDraggedElement(null);
   };
-  const handleDropZoneEnter = (index) => {
-    setDropTargetIndex(index);
+  const handleSelectOption = (option) => {
+    setSelectedOption(option);
+    setDraggedOption(null);
   };
-  const handleDropZoneDrop = (index) => {
+  const handleDropZoneClick = (index) => {
     if (selectedOption !== null) {
       onChange(answer, index, selectedOption);
       setSelectedOption(null);
-    } else if (draggedOption !== null) {
-      onChange(answer, index, draggedOption);
-      setDraggedOption(null);
     }
-    setDropTargetIndex(null);
   };
   const answerMap = retrieveAnswerMap();
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-row flex-wrap items-center", 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, {}) }),
+    draggedOption && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        className: "fixed pointer-events-none z-50 opacity-80",
+        style: {
+          left: `${touchPosition.x}px`,
+          top: `${touchPosition.y}px`,
+          transform: "translate(-50%, -50%)"
+        },
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          InputWithSpecialExpression_default,
+          {
+            value: draggedOption,
+            showSpecialOnly: false
+          }
+        ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          ShowMaterialMediaByContentType_default,
+          {
+            contentType: contentMap.type,
+            src: draggedOption,
+            canFullScreen: false
+          },
+          uniqueValue
+        ) })
+      }
+    ),
     /* @__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)(
         ShowMaterialMediaByContentType_default,
@@ -4979,16 +5040,17 @@ var FillInTheBlanksActivityMaterialContent = ({
       ) }, index) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
-          draggable: true,
-          onDragStart: () => handleDragStart(option),
-          onDragEnd: handleDragEnd,
-          className: `${draggedOption === option ? "opacity-40" : "opacity-100"} transition-opacity duration-200`,
+          ref: draggedOption === option ? dragElementRef : null,
+          className: `${draggedOption === option ? "opacity-40" : selectedOption === option ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+          onMouseDown: (e) => handleMouseDown(e, option),
+          onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
+          onTouchMove: handleTouchMove,
+          onTouchEnd: handleTouchEnd,
           children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "div",
             {
-              className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none touch-none",
+              className: "border-catchup-blue border-2 px-2 rounded-catchup-xlarge cursor-pointer select-none",
               onClick: () => handleSelectOption(option),
-              onTouchEnd: () => handleSelectOption(option),
               children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "italic whitespace-pre-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 InputWithSpecialExpression_default,
                 {
@@ -5000,9 +5062,8 @@ var FillInTheBlanksActivityMaterialContent = ({
           ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "div",
             {
-              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none touch-none",
+              className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge cursor-pointer select-none",
               onClick: () => handleSelectOption(option),
-              onTouchEnd: () => handleSelectOption(option),
               children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 ShowMaterialMediaByContentType_default,
                 {
@@ -5018,7 +5079,7 @@ var FillInTheBlanksActivityMaterialContent = ({
         index
       )
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-full flex flex-row flex-wrap", onMouseUp: handleMouseUp, children: Object.keys(answerMap).map((materialKey, index) => {
       const learnerAnswerState = checkAnswerState(
         JSON.parse(materialMap[materialKey]),
         answerMap[materialKey]
@@ -5026,21 +5087,11 @@ var FillInTheBlanksActivityMaterialContent = ({
       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)(
         "div",
         {
-          onDragOver: (e) => {
-            e.preventDefault();
-            handleDropZoneEnter(materialKey);
-          },
-          onDragLeave: () => setDropTargetIndex(null),
-          onDrop: (e) => {
-            e.preventDefault();
-            handleDropZoneDrop(materialKey);
-          },
-          onClick: () => {
-            if (selectedOption !== null) {
-              handleDropZoneDrop(materialKey);
-            }
-          },
-          className: `${dropTargetIndex === materialKey ? "ring-2 ring-blue-400" : ""}`,
+          "data-drop-zone": materialKey,
+          onMouseEnter: () => draggedOption && setDropTargetIndex(materialKey),
+          onMouseLeave: () => setDropTargetIndex(null),
+          onClick: () => handleDropZoneClick(materialKey),
+          className: `${dropTargetIndex === materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200 rounded-lg`,
           children: /* @__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: [
               parseFloat(materialKey) + 1,
@@ -5050,9 +5101,10 @@ var FillInTheBlanksActivityMaterialContent = ({
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "div",
                 {
-                  className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
-                  onClick: () => {
+                  className: `w-full min-h-[44px] border rounded-lg ${answerMap[materialKey] ? "border-catchup-blue-400 px-2 cursor-pointer" : "bg-catchup-gray-50 border-catchup-gray-200 border-dashed py-2 px-4"}`,
+                  onClick: (e) => {
                     if (answerMap[materialKey]) {
+                      e.stopPropagation();
                       onChange(answer, materialKey, "");
                     }
                   },
@@ -5062,7 +5114,7 @@ var FillInTheBlanksActivityMaterialContent = ({
                       value: answerMap[materialKey],
                       showSpecialOnly: false
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-gray-400 italic" })
+                  ) : null
                 }
               ) }),
               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)(
@@ -5090,7 +5142,8 @@ var FillInTheBlanksActivityMaterialContent = ({
               "div",
               {
                 className: "flex-1 cursor-pointer",
-                onClick: () => {
+                onClick: (e) => {
+                  e.stopPropagation();
                   onChange(answer, materialKey, "");
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -6372,8 +6425,7 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-var import_react25 = require("react");
-var import_react_dnd6 = require("react-dnd");
+var import_react24 = require("react");
 var import_react_katex9 = require("react-katex");
 
 // src/hooks/useScreenSize.ts
@@ -6411,59 +6463,8 @@ var useScreenSize = () => {
 };
 var useScreenSize_default = useScreenSize;
 
-// src/components/dnds/DraggableDroppableItem.tsx
-var import_react24 = require("react");
-var import_react_dnd5 = require("react-dnd");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var DraggableDroppableItem = ({
-  item,
-  type,
-  component,
-  moveCardHandler,
-  dropRef,
-  target,
-  setTarget
-}) => {
-  const ref = (0, import_react24.useRef)(null);
-  const [, drop] = (0, import_react_dnd5.useDrop)({
-    accept: type,
-    hover() {
-      if (!ref.current) {
-        return;
-      }
-      if (item.index && target !== item.index) {
-        setTarget(item.index);
-      }
-    }
-  });
-  const [{ isDragging }, drag] = (0, import_react_dnd5.useDrag)({
-    type,
-    item,
-    end: (item2, monitor) => {
-      const dropResult = monitor.getDropResult();
-      if (dropResult) {
-        moveCardHandler();
-      }
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging()
-    })
-  });
-  const opacity = isDragging ? 0.4 : 1;
-  drag(drop(ref));
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    "div",
-    {
-      className: `${isDragging ? "w-[0px] opacity-0" : "w-full opacity-100"} transition-all duration-500`,
-      ref: dropRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, className: "w-full", style: { opacity }, children: component })
-    }
-  );
-};
-var DraggableDroppableItem_default = DraggableDroppableItem;
-
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6474,20 +6475,20 @@ var OrderingActivityMaterialContent = ({
   isPreview,
   showCorrectAnswer
 }) => {
-  const [selectedTargetKey, setSelectedTargetKey] = (0, import_react25.useState)(null);
-  const [selectedKey, setSelectedKey] = (0, import_react25.useState)(null);
-  const { screenSize } = useScreenSize_default();
-  const [view, setView] = (0, import_react25.useState)("PC");
-  const [{ isOver, canDrop }, drop] = (0, import_react_dnd6.useDrop)({
-    accept: "ORDERING",
-    drop: () => {
-    },
-    collect: (monitor) => ({
-      isOver: monitor.isOver(),
-      canDrop: monitor.canDrop()
-    })
+  const [selectedKey, setSelectedKey] = (0, import_react24.useState)(null);
+  const [draggedKey, setDraggedKey] = (0, import_react24.useState)(null);
+  const [dropTargetKey, setDropTargetKey] = (0, import_react24.useState)(null);
+  const [draggedElement, setDraggedElement] = (0, import_react24.useState)(
+    null
+  );
+  const dragElementRef = (0, import_react24.useRef)(null);
+  const [touchPosition, setTouchPosition] = (0, import_react24.useState)({
+    x: 0,
+    y: 0
   });
-  (0, import_react25.useEffect)(() => {
+  const { screenSize } = useScreenSize_default();
+  const [view, setView] = (0, import_react24.useState)("PC");
+  (0, import_react24.useEffect)(() => {
     if (!screenSize) return;
     if (screenSize.width <= 1024) {
       setView("TABLET");
@@ -6495,7 +6496,7 @@ var OrderingActivityMaterialContent = ({
       setView("PC");
     }
   }, [screenSize]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!showCorrectAnswer) return;
     const answerMap2 = answer.data.find(
       (answerData) => answerData.type === "ORDERING"
@@ -6517,23 +6518,9 @@ var OrderingActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  const handleOrderingActivityItemChange = (selectedKey2, materialKey) => {
-    if (checkCanAnswerQuestion()) {
-      if (selectedKey2) {
-        onChange(answer, selectedKey2, materialKey);
-        setSelectedKey(null);
-      } else {
-        setSelectedKey(materialKey);
-      }
-    }
-  };
   const calculateMarginTop = (index) => {
     if (index === 0) {
-      if (contentMap.type === "TEXT") {
-        return 0;
-      } else {
-        return 0;
-      }
+      return 0;
     } else if (index === 1) {
       if (contentMap.type === "TEXT") {
         return 65;
@@ -6547,97 +6534,167 @@ var OrderingActivityMaterialContent = ({
         return -130;
       }
     } else if (index % 2 === 1) {
-      if (contentMap.type === "TEXT") {
-        return 0;
-      } else {
-        return 0;
-      }
+      return 0;
     }
     return 0;
   };
-  const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-row flex-wrap", children: Object.keys(answerMap).map((materialKey, index) => {
-    const learnerAnswerState = checkAnswerState(
-      answerMap[materialKey] + "",
-      index + ""
+  const handleMouseDown = (e, materialKey) => {
+    if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
+    setDraggedKey(materialKey);
+    setSelectedKey(null);
+  };
+  const handleMouseUp = () => {
+    if (dropTargetKey !== null && draggedKey !== null && dropTargetKey !== draggedKey) {
+      onChange(answer, draggedKey, dropTargetKey);
+    }
+    setDraggedKey(null);
+    setDropTargetKey(null);
+  };
+  const handleTouchStart = (e, materialKey, element) => {
+    if (!checkCanAnswerQuestion()) return;
+    const touch = e.touches[0];
+    setDraggedKey(materialKey);
+    setDraggedElement(element);
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    setSelectedKey(null);
+  };
+  const handleTouchMove = (e) => {
+    if (!draggedKey) return;
+    const touch = e.touches[0];
+    setTouchPosition({ x: touch.clientX, y: touch.clientY });
+    const elementUnder = document.elementFromPoint(
+      touch.clientX,
+      touch.clientY
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    const dropZone = elementUnder == null ? void 0 : elementUnder.closest("[data-ordering-drop-zone]");
+    if (dropZone) {
+      const dropKey = dropZone.getAttribute("data-ordering-drop-zone");
+      setDropTargetKey(dropKey);
+    } else {
+      setDropTargetKey(null);
+    }
+  };
+  const handleTouchEnd = () => {
+    if (dropTargetKey !== null && draggedKey !== null && dropTargetKey !== draggedKey) {
+      onChange(answer, draggedKey, dropTargetKey);
+    }
+    setDraggedKey(null);
+    setDropTargetKey(null);
+    setDraggedElement(null);
+  };
+  const handleSelectItem = (materialKey) => {
+    if (!checkCanAnswerQuestion()) return;
+    if (selectedKey === null) {
+      setSelectedKey(materialKey);
+    } else if (selectedKey === materialKey) {
+      setSelectedKey(null);
+    } else {
+      onChange(answer, selectedKey, materialKey);
+      setSelectedKey(null);
+    }
+    setDraggedKey(null);
+  };
+  const answerMap = retrieveAnswerMap();
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-row flex-wrap", onMouseUp: handleMouseUp, children: [
+    draggedKey && touchPosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "div",
       {
-        className: `flex flex-row items-center my-4 mx-2`,
+        className: "fixed pointer-events-none z-50 opacity-80",
         style: {
-          marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
+          left: `${touchPosition.x}px`,
+          top: `${touchPosition.y}px`,
+          transform: "translate(-50%, -50%)"
         },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "h-catchup-activity-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime43.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
-            }
-          ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            DraggableDroppableItem_default,
-            {
-              item: { index: materialKey },
-              type: "ORDERING",
-              dropRef: drop,
-              component: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                "div",
-                {
-                  className: `${canDrop ? selectedKey !== materialKey ? selectedTargetKey === materialKey ? "bg-catchup-light-blue rounded-catchup-xlarge" : "bg-catchup-light-blue rounded-catchup-xlarge opacity-40" : "" : ""} ${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-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"}`,
-                  onMouseDown: () => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedKey(materialKey);
-                    }
-                  },
-                  onTouchEnd: () => {
-                    if (checkCanAnswerQuestion()) {
-                      setSelectedKey(materialKey);
-                    }
-                  },
-                  children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
-                    materialMap[answerMap[materialKey]]
-                  ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                    "span",
-                    {
-                      className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
-                    },
-                    index2
-                  )) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                    ShowMaterialMediaByContentType_default,
-                    {
-                      contentType: contentMap.type,
-                      src: materialMap[answerMap[materialKey]],
-                      canFullScreen: true
-                    },
-                    `${uniqueValue}-${index}`
-                  )
-                }
-              ),
-              target: selectedTargetKey,
-              setTarget: setSelectedTargetKey,
-              moveCardHandler: () => {
-                if (!selectedKey) return;
-                if (!selectedTargetKey) return;
-                handleOrderingActivityItemChange(
-                  selectedKey,
-                  selectedTargetKey
-                );
-              }
-            },
-            index
-          )
-        ]
+        children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "border-catchup-blue border-2 px-3 py-2 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-xl whitespace-pre-wrap", children: constructInputWithSpecialExpressionList(
+          materialMap[answerMap[draggedKey]]
+        ).map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "span",
+          {
+            className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+          },
+          index
+        )) }) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "border-catchup-blue border-2 px-2 py-1 rounded-catchup-xlarge bg-white shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          ShowMaterialMediaByContentType_default,
+          {
+            contentType: contentMap.type,
+            src: materialMap[answerMap[draggedKey]],
+            canFullScreen: false
+          },
+          `${uniqueValue}-drag`
+        ) })
       }
-    ) }, index);
-  }) });
+    ),
+    Object.keys(answerMap).map((materialKey, index) => {
+      const learnerAnswerState = checkAnswerState(
+        answerMap[materialKey] + "",
+        index + ""
+      );
+      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`,
+          style: {
+            marginTop: view === "PC" ? calculateMarginTop(parseFloat(materialKey)) : 0
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mr-3", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-catchup-activity-box-item w-catchup-activity-box-item flex flex-col items-center justify-center cursor-pointer transition-all duration-300 overflow-y-auto", 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_runtime42.jsx)("p", { className: "", children: parseFloat(materialKey) + 1 })
+              }
+            ) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              "div",
+              {
+                ref: draggedKey === materialKey ? dragElementRef : null,
+                "data-ordering-drop-zone": materialKey,
+                className: `flex-1 ${draggedKey === materialKey ? "opacity-40" : selectedKey === materialKey ? "ring-2 ring-blue-500" : "opacity-100"} ${dropTargetKey === materialKey && draggedKey !== materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200`,
+                onMouseDown: (e) => handleMouseDown(e, materialKey),
+                onMouseEnter: () => draggedKey && draggedKey !== materialKey && setDropTargetKey(materialKey),
+                onMouseLeave: () => setDropTargetKey(null),
+                onTouchStart: (e) => handleTouchStart(e, materialKey, e.currentTarget),
+                onTouchMove: handleTouchMove,
+                onTouchEnd: handleTouchEnd,
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  "div",
+                  {
+                    className: `${contentMap.type === "TEXT" ? "h-catchup-activity-text-box-item" : "h-catchup-activity-media-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"}`,
+                    onClick: () => handleSelectItem(materialKey),
+                    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_runtime42.jsx)(
+                      "span",
+                      {
+                        className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
+                        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_katex9.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                      },
+                      index2
+                    )) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                      ShowMaterialMediaByContentType_default,
+                      {
+                        contentType: contentMap.type,
+                        src: materialMap[answerMap[materialKey]],
+                        canFullScreen: true
+                      },
+                      `${uniqueValue}-${index}`
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ) }, index);
+    })
+  ] });
 };
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var OrderingActivityContent = ({
   answer,
   data,
@@ -6661,16 +6718,16 @@ var OrderingActivityContent = ({
     answerMap[secondaryKey] = prevValue;
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)(DividerLine_default, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DividerLine_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       OrderingActivityMaterialContent_default,
       {
         uniqueValue: JSON.stringify(data.contentMap),
@@ -6688,9 +6745,9 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_react_katex10 = require("react-katex");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answer,
@@ -6702,8 +6759,8 @@ var TrueFalseActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const { screenSize } = useScreenSize_default();
-  const [shuffleOptionList, setShuffleOptionList] = (0, import_react26.useState)([]);
-  (0, import_react26.useEffect)(() => {
+  const [shuffleOptionList, setShuffleOptionList] = (0, import_react25.useState)([]);
+  (0, import_react25.useEffect)(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -6713,7 +6770,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "TRUE_FALSE"
@@ -6743,14 +6800,14 @@ var TrueFalseActivityMaterialContent = ({
     return "INCORRECT";
   };
   const answerMap = retrieveAnswerMap();
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "hidden md:block", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "hidden md:contents", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.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";
@@ -6761,21 +6818,21 @@ var TrueFalseActivityMaterialContent = ({
         correctAnswer,
         learnerAnswer
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsx)("div", { className: "flex-1", children: contentMap.type === "TEXT" ? /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.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_runtime45.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_katex10.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
-            )) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            )) }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               ShowMaterialMediaByContentType_default,
               {
                 contentType: contentMap.type,
@@ -6784,8 +6841,8 @@ var TrueFalseActivityMaterialContent = ({
               },
               `${uniqueValue}-${index}`
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.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",
@@ -6796,7 +6853,7 @@ var TrueFalseActivityMaterialContent = ({
                   }
                 }
               ) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.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",
@@ -6812,14 +6869,14 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-      answerMap.trueList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { children: item }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { children: item }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-[50px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.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") }) })
       ] }))
     ] })
   ] });
@@ -6827,7 +6884,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 
 // src/components/activities/TrueFalseActivityContent.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var TrueFalseActivityContent = ({
   answer,
   data,
@@ -6878,17 +6935,17 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answer2);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-row flex-wrap", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsx)("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(VerticalDividerLine_default, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: `${isFullScreen ? "w-full" : "w-full md:flex-1"}`, children: /* @__PURE__ */ (0, import_jsx_runtime46.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),
@@ -6907,7 +6964,7 @@ var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
 // src/components/activities/solution-contents/ActivitySolutionContent.tsx
 var import_react_katex11 = require("react-katex");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -6937,8 +6994,8 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "p-4 border-catchup-blue 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("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 {
@@ -6948,12 +7005,12 @@ var ActivitySolutionContent = ({
         return null;
       }
       const { value } = currentItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "my-3 text-xl", children: constructInputWithSpecialExpressionList(value).map(
-        (inputPart, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
+            children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_katex11.InlineMath, { math: inputPart.value }) }) : inputPart.value
           },
           `${key}_part_${partIndex}`
         )
@@ -6965,7 +7022,7 @@ var ActivitySolutionContent_default = ActivitySolutionContent;
 
 // src/components/activities/evaluation-rubric-contents/ActivityEvaluationRubricContent.tsx
 var import_react_katex12 = require("react-katex");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -6995,21 +7052,21 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "mx-2", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.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_runtime48.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             )
@@ -7023,31 +7080,31 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 
 // src/components/boxes/SelectionBox.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var SelectionBox = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.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_runtime49.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_runtime49.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_runtime49.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("p", { children: option.text }),
-              option.subText ? /* @__PURE__ */ (0, import_jsx_runtime49.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,
                 ")"
@@ -7063,7 +7120,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var ActivityPreviewByData = ({
   data,
   showType,
@@ -7075,14 +7132,14 @@ var ActivityPreviewByData = ({
   showDifficulty,
   isFullScreen
 }) => {
-  const [key, setKey] = (0, import_react27.useState)((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = (0, import_react27.useState)(null);
-  const [optionList, setOptionList] = (0, import_react27.useState)([]);
-  (0, import_react27.useEffect)(() => {
+  const [key, setKey] = (0, import_react26.useState)((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = (0, import_react26.useState)(null);
+  const [optionList, setOptionList] = (0, import_react26.useState)([]);
+  (0, import_react26.useEffect)(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
     let foundTypeOption;
@@ -7097,7 +7154,7 @@ var ActivityPreviewByData = ({
       setSelectedType(typeOptionList[0].id);
     }
   }, [typeOptionList, lockedType]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!data) return;
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
@@ -7121,11 +7178,11 @@ var ActivityPreviewByData = ({
   }, [data, lockedType, typeOptionList, showDifficulty]);
   if (!data) return;
   const answer = constructAnswerBasedOnData(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
-    showType ? /* @__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)(
+  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,
@@ -7136,9 +7193,9 @@ var ActivityPreviewByData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DividerLine_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DividerLine_default, {})
     ] }) : null,
-    selectedType ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "", children: selectedType === "ORDERING" && data["orderingBodyMap"] != null && data["orderingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.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,
@@ -7152,7 +7209,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    ) : selectedType === "DROPDOWN" && data["dropdownBodyMap"] != null && data["dropdownMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       DropdownActivityContent_default,
       {
         answer,
@@ -7166,7 +7223,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    ) : selectedType === "MCSA" && data["MCSABodyMap"] != null && data["MCSAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       MCSAActivityContent_default,
       {
         answer,
@@ -7180,7 +7237,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    ) : selectedType === "MCMA" && data["MCMABodyMap"] != null && data["MCMAMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       MCMAActivityContent_default,
       {
         answer,
@@ -7194,7 +7251,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    ) : selectedType === "MATCHING" && data["matchingBodyMap"] != null && data["matchingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       MatchingActivityContent_default,
       {
         answer,
@@ -7207,7 +7264,7 @@ var ActivityPreviewByData = ({
         isPreview: true,
         showCorrectAnswer: true
       }
-    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    ) : selectedType === "GROUPING" && data["groupingBodyMap"] != null && data["groupingMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       GroupingActivityContent_default,
       {
         answer,
@@ -7220,7 +7277,7 @@ var ActivityPreviewByData = ({
         isPreview: true,
         showCorrectAnswer: true
       }
-    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    ) : selectedType === "FILL_IN_THE_BLANKS" && data["fillInTheBlanksBodyMap"] != null && data["fillInTheBlanksMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       FillInTheBlanksActivityContent_default,
       {
         answer,
@@ -7234,7 +7291,7 @@ var ActivityPreviewByData = ({
         showCorrectAnswer: true,
         isFullScreen
       }
-    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    ) : selectedType === "OPEN_ENDED" && data["openEndedBodyMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       OpenEndedActivityContent_default,
       {
         answer,
@@ -7246,7 +7303,7 @@ var ActivityPreviewByData = ({
         isPreview: true,
         isFullScreen
       }
-    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    ) : selectedType === "TRUE_FALSE" && data["trueFalseBodyMap"] != null && data["trueFalseMaterialMap"] != null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       TrueFalseActivityContent_default,
       {
         answer,
@@ -7261,14 +7318,14 @@ var ActivityPreviewByData = ({
         isFullScreen
       }
     ) : null }, selectedType) : null,
-    selectedType && showSolution ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7280,8 +7337,8 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/activities/ActivityPreviewByAnswerData.tsx
-var import_react28 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var ActivityPreviewByAnswerData = ({
   data,
   showType = true,
@@ -7295,11 +7352,11 @@ var ActivityPreviewByAnswerData = ({
   showCorrectAnswer = false
 }) => {
   var _a;
-  const [key, setKey] = (0, import_react28.useState)((/* @__PURE__ */ new Date()).getTime());
-  const [selectedType, setSelectedType] = (0, import_react28.useState)(null);
-  const [optionList, setOptionList] = (0, import_react28.useState)([]);
-  const [answer, setAnswer] = (0, import_react28.useState)({ data: [] });
-  (0, import_react28.useEffect)(() => {
+  const [key, setKey] = (0, import_react27.useState)((/* @__PURE__ */ new Date()).getTime());
+  const [selectedType, setSelectedType] = (0, import_react27.useState)(null);
+  const [optionList, setOptionList] = (0, import_react27.useState)([]);
+  const [answer, setAnswer] = (0, import_react27.useState)({ data: [] });
+  (0, import_react27.useEffect)(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
@@ -7312,7 +7369,7 @@ var ActivityPreviewByAnswerData = ({
     }
     return null;
   };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!data) return;
     const constructAnswerBasedOnData2 = () => {
       const newAnswer = { data: [] };
@@ -7351,7 +7408,7 @@ var ActivityPreviewByAnswerData = ({
     };
     constructAnswerBasedOnData2();
   }, [data, lockedType]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!data || !answer.data.length) return;
     let currentTypeOptionList = typeOptionList || answer.data.map((item) => ({
       id: item.type,
@@ -7389,38 +7446,38 @@ var ActivityPreviewByAnswerData = ({
     };
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.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_runtime51.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_runtime51.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_runtime51.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_runtime51.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_runtime51.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_runtime51.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_runtime51.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_runtime51.jsxs)("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "mb-4", children: [
-        showDescription ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "my-2", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime51.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,
@@ -7431,20 +7488,20 @@ var ActivityPreviewByAnswerData = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DividerLine_default, {})
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DividerLine_default, {})
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)(ActivityEmptyContent_default, {}) : null,
-      selectedType ? /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime51.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_runtime51.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    selectedType && showEvaluationRubric ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "my-4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       ActivityEvaluationRubricContent_default,
       {
         activityTemplateType: selectedType,
@@ -7456,17 +7513,17 @@ var ActivityPreviewByAnswerData = ({
 var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
 
 // src/components/errors/StatusError.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var StatusError = ({
   statusCode,
   statusText,
   textSize
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "text-center my-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "text-center my-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
         "(",
         statusCode ? `${statusCode} - ` : null,
         statusText,
@@ -7478,9 +7535,9 @@ var StatusError = ({
 var StatusError_default = StatusError;
 
 // src/components/dividers/BlueVerticalDividerLine.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7490,7 +7547,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7500,9 +7557,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       InputGroup_default,
       {
         type,
@@ -7518,8 +7575,8 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-var import_react29 = require("react");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7528,17 +7585,17 @@ var PageTravelGroup = ({
   setPageNumber,
   setImageReady
 }) => {
-  const [totalPageNumber, setTotalPageNumber] = (0, import_react29.useState)(0);
-  const [newPageNumber, setNewPageNumber] = (0, import_react29.useState)(0);
-  (0, import_react29.useEffect)(() => {
+  const [totalPageNumber, setTotalPageNumber] = (0, import_react28.useState)(0);
+  const [newPageNumber, setNewPageNumber] = (0, import_react28.useState)(0);
+  (0, import_react28.useEffect)(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
   }, [initialTotalPageNumber]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
+    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       BaseImage_default,
       {
         size: "small",
@@ -7556,7 +7613,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "p",
       {
         className: `${pageNumber === index ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -7571,7 +7628,7 @@ var PageTravelGroup = ({
         children: index + 1
       }
     ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       BaseImage_default,
       {
         size: "small",
@@ -7589,7 +7646,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime54.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`,
@@ -7613,14 +7670,14 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime55.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7635,14 +7692,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.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_runtime56.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7652,7 +7709,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { children: option.text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -7663,7 +7720,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7673,7 +7730,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.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`,
@@ -7681,8 +7738,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7691,20 +7748,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.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_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.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`,
@@ -7718,34 +7775,34 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ActivityTemplateLabel = ({
   title,
   icon,
   font
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge 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/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CategoryLabel.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var CategoryLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       BaseImage_default,
       {
         src: "/icons/category-label.webp",
@@ -7753,40 +7810,40 @@ var CategoryLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var CategoryLabel_default = CategoryLabel;
 
 // src/components/labels/CoterieLabel.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var CoterieLabel = ({ title, font }) => {
-  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 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.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-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime63.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-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_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/personal-label.webp",
@@ -7794,16 +7851,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  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 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7811,55 +7868,55 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "", children: value }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/BaseTitle.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime69.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_runtime69.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_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.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;