catchup-library-web 2.6.12 → 2.6.13

package/dist/index.mjs

@@ -850,12 +850,13 @@ var ApproveButton_default = ApproveButton;
 
 // src/components/buttons/StartButton.tsx
 import { useState as useState9 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var StartButton = ({
   title,
   size,
   onClick,
-  disabled
+  disabled,
+  icon
 }) => {
   const [loading, setLoading] = useState9(false);
   const internalOnClick = (e) => __async(void 0, null, function* () {
@@ -869,22 +870,22 @@ var StartButton = ({
   let currentHeightClassName;
   let currentLoadingSize;
   if (size === "small") {
-    currentHeightClassName = "h-8";
-    currentLoadingSize = 14;
-  } else if (size === "medium") {
     currentHeightClassName = "h-10";
     currentLoadingSize = 16;
-  } else if (size === "large") {
+  } else if (size === "medium") {
     currentHeightClassName = "h-12";
     currentLoadingSize = 18;
+  } else if (size === "large") {
+    currentHeightClassName = "h-14";
+    currentLoadingSize = 20;
   } else if (size === "unlimited") {
-    currentLoadingSize = 14;
-    currentHeightClassName = "h-8";
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
   }
   return /* @__PURE__ */ jsx12(
     "button",
     {
-      className: `px-8 py-2.5 bg-gradient-to-r from-catchup-green to-catchup-hover-green text-catchup-white font-bold text-lg rounded-catchup-full shadow-card ${loading ? "" : disabled ? "opacity-50" : "hover:from-catchup-hover-green hover:to-catchup-green hover:shadow-full-card hover:scale-105"} transition-all duration-300 transform ${currentHeightClassName}`,
+      className: `px-8 py-2 bg-gradient-to-r from-catchup-green to-catchup-hover-green text-catchup-white font-bold text-lg rounded-catchup-full shadow-card ${loading ? "" : disabled ? "opacity-50" : "hover:from-catchup-hover-green hover:to-catchup-green hover:shadow-full-card hover:scale-105"} transition-all duration-300 transform ${currentHeightClassName || ""}`,
       onClick: internalOnClick,
       children: loading ? /* @__PURE__ */ jsx12(
         BaseLoading_default,
@@ -894,7 +895,10 @@ var StartButton = ({
           primaryColor: "#ffffff",
           secondaryColor: "#ffffff"
         }
-      ) : /* @__PURE__ */ jsx12("div", { className: "flex flex-row justify-center items-center gap-x-2", children: /* @__PURE__ */ jsx12("p", { children: title }) })
+      ) : /* @__PURE__ */ jsxs9("div", { className: "flex flex-row justify-center items-center gap-x-2", children: [
+        icon ? /* @__PURE__ */ jsx12("span", { children: icon }) : null,
+        /* @__PURE__ */ jsx12("p", { children: title })
+      ] })
     }
   );
 };
@@ -946,7 +950,7 @@ i18n.use(initReactI18next);
 var i18n_default = i18n;
 
 // src/components/loading/BaseLoadingWithText.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var BaseLoadingWithText = (props) => {
   const { height, width, size, primaryColor, secondaryColor, hideText } = props;
   const [initialTimestamp, setInitialTimestamp] = useState10(
@@ -994,7 +998,7 @@ var BaseLoadingWithText = (props) => {
     textWidth = 250;
   }
   const loadingText = retrieveLoadingText();
-  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col justify-center items-center", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col justify-center items-center", children: [
     /* @__PURE__ */ jsx15(
       BaseLoading_default,
       {
@@ -1021,17 +1025,17 @@ var BaseLoadingWithText_default = BaseLoadingWithText;
 import Modal from "react-modal";
 
 // src/components/titles/BaseTitle.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ jsxs10("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxs11("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ jsxs10("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__ */ jsxs11("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
@@ -1050,7 +1054,7 @@ var DividerLine = () => {
 var DividerLine_default = DividerLine;
 
 // src/components/modals/BaseModal.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var BaseModal = ({
   title,
   isOpen,
@@ -1091,8 +1095,8 @@ var BaseModal = ({
         "div",
         {
           className: `font-quicksand ${size === "small" ? "w-[600px]" : size === "medium" ? "w-[900px]" : "w-[600px] lg:w-[900px] xl:w-[1200px] 2xl:w-[1500px]"}`,
-          children: /* @__PURE__ */ jsxs11(FullCard_default, { children: [
-            /* @__PURE__ */ jsxs11("div", { className: "flex flex-row justify-between", children: [
+          children: /* @__PURE__ */ jsxs12(FullCard_default, { children: [
+            /* @__PURE__ */ jsxs12("div", { className: "flex flex-row justify-between", children: [
               /* @__PURE__ */ jsx18(BaseTitle_default, { title }),
               /* @__PURE__ */ jsx18(
                 BaseImage_default,
@@ -1117,7 +1121,7 @@ var BaseModal_default = BaseModal;
 // src/components/pdfs/BasePDF.tsx
 import { useState as useState11 } from "react";
 import { Document, Page } from "react-pdf";
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var BasePDF = ({ file }) => {
   const [pageNumber, setPageNumber] = useState11(1);
   const [numberOfPages, setNumberOfPages] = useState11(0);
@@ -1125,9 +1129,9 @@ var BasePDF = ({ file }) => {
     setPageNumber(1);
     setNumberOfPages(numPages);
   };
-  return /* @__PURE__ */ jsxs12(Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
+  return /* @__PURE__ */ jsxs13(Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
     /* @__PURE__ */ jsx19(Page, { pageNumber }),
-    /* @__PURE__ */ jsxs12("div", { className: "flex flex-row items-center justify-center", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex flex-row items-center justify-center", children: [
       pageNumber === 1 ? null : /* @__PURE__ */ jsx19("div", { className: "px-2", children: /* @__PURE__ */ jsx19("div", { className: "cursor-pointer", children: /* @__PURE__ */ jsx19(
         BaseImage_default,
         {
@@ -3192,7 +3196,7 @@ var retrieveActivityCountOptionList = () => {
 
 // src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
 import { InlineMath } from "react-katex";
-import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var ShowBodyMediaByContentType = ({
   index,
   type,
@@ -3292,7 +3296,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsxs14(
             "div",
             {
               className: "relative w-[200px]",
@@ -3426,7 +3430,7 @@ var ShowBodyMediaByContentType = ({
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
         valuePartList.push(
-          /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsxs14(
             "div",
             {
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
@@ -3475,7 +3479,7 @@ var ShowBodyMediaByContentType = ({
           }
         },
         contentLabel: "Image Fullscreen View",
-        children: /* @__PURE__ */ jsxs13("div", { className: "flex-1 flex flex-col", children: [
+        children: /* @__PURE__ */ jsxs14("div", { className: "flex-1 flex flex-col", children: [
           /* @__PURE__ */ jsx21("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx21(
             BaseImage_default,
             {
@@ -3506,7 +3510,7 @@ var ShowBodyMediaByContentType = ({
       case "TEXT":
         return /* @__PURE__ */ jsx21("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx21("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ jsx21("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
+        return /* @__PURE__ */ jsx21("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
           /* @__PURE__ */ jsx21(
             BaseImage_default,
             {
@@ -3549,7 +3553,7 @@ var ShowBodyMediaByContentType = ({
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs13("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: "w-full", children: [
     RenderShowFullScreenItem(),
     RenderMainContent()
   ] }, `body-content-${index}`);
@@ -3665,7 +3669,7 @@ import { InlineMath as InlineMath2 } from "react-katex";
 import Select from "react-select";
 import Switch from "react-switch";
 import { useEffect as useEffect3, useRef, useState as useState13, useCallback } from "react";
-import { Fragment, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var InputGroup = ({
   type,
   title,
@@ -3791,7 +3795,7 @@ var InputGroup = ({
         onRequestClose: () => {
           setShowMathConstructor(false);
         },
-        children: /* @__PURE__ */ jsx24("div", { className: "bg-catchup-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs14("div", { className: "p-6 space-y-6", children: [
+        children: /* @__PURE__ */ jsx24("div", { className: "bg-catchup-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs15("div", { className: "p-6 space-y-6", children: [
           /* @__PURE__ */ jsx24("div", { children: /* @__PURE__ */ jsx24("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ jsx24(
             "math-field",
             {
@@ -3818,9 +3822,9 @@ var InputGroup = ({
               }
             }
           ) }) }),
-          /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsxs15("div", { children: [
             /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
-            /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
               /* @__PURE__ */ jsx24(
                 "textarea",
                 {
@@ -3847,7 +3851,7 @@ var InputGroup = ({
     );
   };
   const CheckboxInputGroup = () => {
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         className: "flex flex-row items-center gap-x-1 cursor-pointer",
@@ -3869,7 +3873,7 @@ var InputGroup = ({
     );
   };
   const FileInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "my-1", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "my-1", children: [
       title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
       /* @__PURE__ */ jsx24(
         "input",
@@ -3888,7 +3892,7 @@ var InputGroup = ({
     ] });
   };
   const DateInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "my-1", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "my-1", children: [
       title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
       /* @__PURE__ */ jsx24(
         "input",
@@ -3907,7 +3911,7 @@ var InputGroup = ({
     ] });
   };
   const SearchableSelectInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "my-1", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "my-1", children: [
       title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
       /* @__PURE__ */ jsx24(
         Select,
@@ -3972,10 +3976,10 @@ var InputGroup = ({
     ] });
   };
   const TextAreaInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "my-1 flex-1 flex flex-col relative", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "flex flex-row justify-between items-center", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "my-1 flex-1 flex flex-col relative", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex flex-row justify-between items-center", children: [
         /* @__PURE__ */ jsx24("div", { children: title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ jsx24("div", { children: value && limit ? /* @__PURE__ */ jsxs14("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+        /* @__PURE__ */ jsx24("div", { children: value && limit ? /* @__PURE__ */ jsxs15("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
@@ -4000,7 +4004,7 @@ var InputGroup = ({
           className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200 z-10",
           onClick: handleOpenMathConstructor,
           type: "button",
-          children: /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-x-1", children: [
+          children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-x-1", children: [
             /* @__PURE__ */ jsx24("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
             /* @__PURE__ */ jsx24(
               "svg",
@@ -4026,10 +4030,10 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "my-1 relative", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "flex flex-row justify-between items-center", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "my-1 relative", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex flex-row justify-between items-center", children: [
         /* @__PURE__ */ jsx24("div", { children: title ? /* @__PURE__ */ jsx24("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ jsx24("div", { children: value && limit ? /* @__PURE__ */ jsxs14("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+        /* @__PURE__ */ jsx24("div", { children: value && limit ? /* @__PURE__ */ jsxs15("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
@@ -4063,7 +4067,7 @@ var InputGroup = ({
           className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200",
           onClick: handleOpenMathConstructor,
           type: "button",
-          children: /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-x-1", children: [
+          children: /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-x-1", children: [
             /* @__PURE__ */ jsx24("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
             /* @__PURE__ */ jsx24(
               "svg",
@@ -4089,8 +4093,8 @@ var InputGroup = ({
     ] });
   };
   const SwitchInputGroup = () => {
-    return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col my-1", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "flex flex-row items-center", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "flex flex-col my-1", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex flex-row items-center", children: [
         /* @__PURE__ */ jsx24(
           Switch,
           {
@@ -4140,7 +4144,7 @@ var InputGroup = ({
       return SwitchInputGroup();
     }
   };
-  return /* @__PURE__ */ jsxs14(Fragment, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment, { children: [
     RenderMainContent(),
     /* @__PURE__ */ jsx24(MathConstructorModal, {})
   ] });
@@ -4274,7 +4278,7 @@ var getSystemLanguageFromCurriculumType = (curriculumType) => {
 
 // src/components/dropdowns/MediaDropdown.tsx
 import { useState as useState14, useEffect as useEffect4, useRef as useRef2 } from "react";
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var MediaDropdown = ({ id, answer, optionList }) => {
   const [showDropdown, setShowDropdown] = useState14(false);
   const dropdownRef = useRef2(null);
@@ -4304,7 +4308,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
     }
     setShowDropdown(false);
   };
-  return /* @__PURE__ */ jsxs15("div", { ref: dropdownRef, className: "w-full relative", children: [
+  return /* @__PURE__ */ jsxs16("div", { ref: dropdownRef, className: "w-full relative", children: [
     /* @__PURE__ */ jsx25(
       "div",
       {
@@ -4317,7 +4321,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
       "ul",
       {
         className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
-        children: optionList.map((option, index) => /* @__PURE__ */ jsxs15(
+        children: optionList.map((option, index) => /* @__PURE__ */ jsxs16(
           "li",
           {
             className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
@@ -4344,7 +4348,7 @@ var MediaDropdown_default = MediaDropdown;
 // src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx
 import { useEffect as useEffect5, useRef as useRef3, useState as useState15 } from "react";
 import Modal3 from "react-modal";
-import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var ShowMaterialMediaByContentType = ({
   key,
   contentType,
@@ -4391,7 +4395,7 @@ var ShowMaterialMediaByContentType = ({
           }
         },
         contentLabel: "",
-        children: /* @__PURE__ */ jsxs16("div", { className: "flex-1 flex flex-col", children: [
+        children: /* @__PURE__ */ jsxs17("div", { className: "flex-1 flex flex-col", children: [
           /* @__PURE__ */ jsx26("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx26(
             BaseImage_default,
             {
@@ -4417,9 +4421,9 @@ var ShowMaterialMediaByContentType = ({
       }
     );
   };
-  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs16(Fragment2, { children: [
+  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs17(Fragment2, { children: [
     RenderShowFullScreenItem(),
-    /* @__PURE__ */ jsx26("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx26("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs16("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
+    /* @__PURE__ */ jsx26("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx26("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs17("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
       /* @__PURE__ */ jsx26(
         BaseImage_default,
         {
@@ -4483,7 +4487,7 @@ var ShowMaterialMediaByContentType = ({
 var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
 
 // src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var DropdownActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -4515,7 +4519,7 @@ var DropdownActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-col h-full", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsx27("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx27("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
     /* @__PURE__ */ jsx27("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx27(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx27("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx27("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
@@ -4525,12 +4529,12 @@ var DropdownActivityMaterialContent = ({
           answerKey,
           displayAnswerMap[materialKey]
         );
-        return /* @__PURE__ */ jsx27("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx27("div", { className: "mx-2", children: /* @__PURE__ */ jsxs17("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-          /* @__PURE__ */ jsx27("div", { className: "my-auto", children: /* @__PURE__ */ jsxs17("p", { className: "text-xl", children: [
+        return /* @__PURE__ */ jsx27("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx27("div", { className: "mx-2", children: /* @__PURE__ */ jsxs18("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+          /* @__PURE__ */ jsx27("div", { className: "my-auto", children: /* @__PURE__ */ jsxs18("p", { className: "text-xl", children: [
             parseFloat(materialKey) + 1,
             "."
           ] }) }),
-          /* @__PURE__ */ jsxs17("div", { className: "w-full relative", children: [
+          /* @__PURE__ */ jsxs18("div", { className: "w-full relative", children: [
             /* @__PURE__ */ jsx27("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx27("div", { className: "flex-1", children: /* @__PURE__ */ jsx27(
               InputGroup_default,
               {
@@ -4632,7 +4636,7 @@ var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
 import { useState as useState17, useEffect as useEffect7 } from "react";
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 var DropdownActivityContent = ({
   answerMap,
   data,
@@ -4655,7 +4659,7 @@ var DropdownActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs18("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+  return /* @__PURE__ */ jsxs19("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
     /* @__PURE__ */ jsx28("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx28(
       ActivityBodyContent_default,
       {
@@ -4713,7 +4717,7 @@ var InputWithSpecialExpression = ({
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -4842,7 +4846,7 @@ var FillInTheBlanksActivityMaterialContent = ({
       setSelectedOption(null);
     }
   };
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       className: "flex flex-col h-full",
@@ -4903,7 +4907,7 @@ var FillInTheBlanksActivityMaterialContent = ({
             ) })
           }
         ),
-        /* @__PURE__ */ jsxs19("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex-1 min-h-0 overflow-y-auto", children: [
           /* @__PURE__ */ jsx30("div", { className: "w-full flex flex-row flex-wrap gap-x-2 gap-y-2 my-2", children: shuffleOptionList.map(
             (option, index) => checkAnswerProvided(displayAnswerMap, option) ? /* @__PURE__ */ jsx30(
               ShowMaterialMediaByContentType_default,
@@ -4969,12 +4973,12 @@ var FillInTheBlanksActivityMaterialContent = ({
                 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__ */ jsxs19("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-                  /* @__PURE__ */ jsx30("div", { className: "my-auto", children: /* @__PURE__ */ jsxs19("p", { className: "text-xl", children: [
+                children: /* @__PURE__ */ jsxs20("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+                  /* @__PURE__ */ jsx30("div", { className: "my-auto", children: /* @__PURE__ */ jsxs20("p", { className: "text-xl", children: [
                     parseFloat(materialKey) + 1,
                     "."
                   ] }) }),
-                  /* @__PURE__ */ jsx30("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs19("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx30("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs20("div", { className: "relative", children: [
                     /* @__PURE__ */ jsx30("div", { className: "flex-1", children: /* @__PURE__ */ jsx30(
                       "div",
                       {
@@ -5056,7 +5060,7 @@ var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMate
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
 import { useState as useState19, useEffect as useEffect9 } from "react";
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var FillInTheBlanksActivityContent = ({
   answerMap,
   data,
@@ -5104,7 +5108,7 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs20("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+  return /* @__PURE__ */ jsxs21("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
     /* @__PURE__ */ jsx31("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx31(
       ActivityBodyContent_default,
       {
@@ -5137,7 +5141,7 @@ var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 // src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
 import { useEffect as useEffect10, useRef as useRef5, useState as useState20 } from "react";
 import { InlineMath as InlineMath5 } from "react-katex";
-import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5334,7 +5338,7 @@ var GroupingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx32(
       "div",
       {
@@ -5393,7 +5397,7 @@ var GroupingActivityMaterialContent = ({
         ) })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs21(Fragment3, { children: [
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs22(Fragment3, { children: [
       /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
         return /* @__PURE__ */ jsx32(
           "div",
@@ -5436,7 +5440,7 @@ var GroupingActivityMaterialContent = ({
       }) }),
       /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx32(DividerLine_default, {}) })
     ] }) : null,
-    /* @__PURE__ */ jsx32("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs21("div", { className: "flex flex-row w-full", children: [
+    /* @__PURE__ */ jsx32("div", { className: "flex-1 min-h-0 overflow-y-auto", children: Object.keys(displayAnswerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs22("div", { className: "flex flex-row w-full", children: [
       /* @__PURE__ */ jsx32("div", { className: "w-1/3", children: /* @__PURE__ */ jsx32(
         "div",
         {
@@ -5526,7 +5530,7 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 
 // src/components/activities/GroupingActivityContent.tsx
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var GroupingActivityContent = ({
   answerMap,
   data,
@@ -5548,7 +5552,7 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs22("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+  return /* @__PURE__ */ jsxs23("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
     /* @__PURE__ */ jsx33(
       "div",
       {
@@ -5590,7 +5594,7 @@ var GroupingActivityContent_default = GroupingActivityContent;
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
 import { useEffect as useEffect11, useRef as useRef6, useState as useState21 } from "react";
 import { InlineMath as InlineMath6 } from "react-katex";
-import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5779,7 +5783,7 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx34(
       "div",
       {
@@ -5838,7 +5842,7 @@ var MatchingActivityMaterialContent = ({
         ) })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs24(Fragment4, { children: [
       /* @__PURE__ */ jsx34(
         "div",
         {
@@ -5891,7 +5895,7 @@ var MatchingActivityMaterialContent = ({
         materialMap[answerMapKey],
         displayAnswerMap[answerMapKey]
       );
-      return /* @__PURE__ */ jsxs23("div", { className: "flex flex-row w-full", children: [
+      return /* @__PURE__ */ jsxs24("div", { className: "flex flex-row w-full", children: [
         /* @__PURE__ */ jsx34("div", { className: "w-1/3", children: /* @__PURE__ */ jsx34(
           "div",
           {
@@ -5958,7 +5962,7 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 
 // src/components/activities/MatchingActivityContent.tsx
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var MatchingActivityContent = ({
   answerMap,
   data,
@@ -5976,7 +5980,7 @@ var MatchingActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs24("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+  return /* @__PURE__ */ jsxs25("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
     /* @__PURE__ */ jsx35(
       "div",
       {
@@ -6018,7 +6022,7 @@ var MatchingActivityContent_default = MatchingActivityContent;
 // src/components/activities/material-contents/MCMAActivityMaterialContent.tsx
 import { useEffect as useEffect12, useState as useState22 } from "react";
 import { InlineMath as InlineMath7 } from "react-katex";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 var MCMAActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6057,7 +6061,7 @@ var MCMAActivityMaterialContent = ({
   };
   const correctAnswerList = retrieveCorrectAnswerList();
   return /* @__PURE__ */ jsx36("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ jsx36("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsxs25("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
+    return /* @__PURE__ */ jsx36("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsxs26("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
       /* @__PURE__ */ jsx36("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx36("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
       /* @__PURE__ */ jsx36("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx36(DividerLine_default, {}) }),
       /* @__PURE__ */ jsx36("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ jsx36("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
@@ -6073,7 +6077,7 @@ var MCMAActivityMaterialContent = ({
           const foundIndex = correctAnswerList.findIndex(
             (correctAnswer) => correctAnswer === materialSubKey
           );
-          return /* @__PURE__ */ jsxs25(
+          return /* @__PURE__ */ jsxs26(
             "div",
             {
               className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && foundIndex !== -1 || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
@@ -6130,7 +6134,7 @@ var MCMAActivityMaterialContent = ({
 var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
 
 // src/components/activities/MCMAActivityContent.tsx
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 var MCMAActivityContent = ({
   answerMap,
   data,
@@ -6155,7 +6159,7 @@ var MCMAActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs26("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+  return /* @__PURE__ */ jsxs27("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
     /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx37(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
     /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx37(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx37(VerticalDividerLine_default, {}) }),
@@ -6179,7 +6183,7 @@ var MCMAActivityContent_default = MCMAActivityContent;
 // src/components/activities/material-contents/MCSAActivityMaterialContent.tsx
 import { useEffect as useEffect13, useState as useState23 } from "react";
 import { InlineMath as InlineMath8 } from "react-katex";
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var MCSAActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6212,7 +6216,7 @@ var MCSAActivityMaterialContent = ({
   };
   const correctAnswer = retrieveCorrectAnswer();
   return /* @__PURE__ */ jsx38("div", { className: "flex flex-col h-full", children: Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ jsx38("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsxs27("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
+    return /* @__PURE__ */ jsx38("div", { className: "flex flex-col flex-1 min-h-0", children: /* @__PURE__ */ jsxs28("div", { className: "flex-1 flex flex-col border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0 min-h-0", children: [
       /* @__PURE__ */ jsx38("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx38("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
       /* @__PURE__ */ jsx38("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx38(DividerLine_default, {}) }),
       /* @__PURE__ */ jsx38("div", { className: "flex-1 min-h-0 overflow-y-auto", children: checkCanAnswerQuestion() ? /* @__PURE__ */ jsx38(
@@ -6226,7 +6230,7 @@ var MCSAActivityMaterialContent = ({
                 materialSubKey,
                 displayAnswerMap[materialKey]
               );
-              return /* @__PURE__ */ jsxs27(
+              return /* @__PURE__ */ jsxs28(
                 "div",
                 {
                   className: `w-full flex flex-row items-center justify-center cursor-pointer my-2 gap-x-2 ${learnerAnswerState === "EMPTY" && materialSubKey === correctAnswer || learnerAnswerState === "CORRECT" ? "border-2 border-catchup-green rounded-catchup-xlarge p-2" : learnerAnswerState === "INCORRECT" ? "border-2 border-catchup-red rounded-catchup-xlarge p-2" : ""}`,
@@ -6285,7 +6289,7 @@ var MCSAActivityMaterialContent = ({
 var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
 
 // src/components/activities/MCSAActivityContent.tsx
-import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 var MCSAActivityContent = ({
   answerMap,
   data,
@@ -6303,7 +6307,7 @@ var MCSAActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs28("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+  return /* @__PURE__ */ jsxs29("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
     /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx39(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
     /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx39(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx39("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx39(VerticalDividerLine_default, {}) }),
@@ -6414,7 +6418,7 @@ var retrieveAcceptedFormats = (fileType) => {
 };
 
 // src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx
-import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var OpenEndedActivityMaterialContent = ({
   answerMap,
   contentMap,
@@ -6494,7 +6498,7 @@ var OpenEndedActivityMaterialContent = ({
       }
     ) });
   };
-  return /* @__PURE__ */ jsxs29("div", { className: "flex flex-col h-full", children: [
+  return /* @__PURE__ */ jsxs30("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsx40("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx40("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
     /* @__PURE__ */ jsx40("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx40(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx40("div", { className: "flex-1 min-h-0 overflow-y-auto", children: contentMap.type === "TEXT" ? RenderTextContent(answerMap) : contentMap.type === "IMAGE" ? RenderImageContent(answerMap) : contentMap.type === "AUDIO" ? RenderAudioContent(answerMap) : null })
@@ -6503,7 +6507,7 @@ var OpenEndedActivityMaterialContent = ({
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 
 // src/components/activities/OpenEndedActivityContent.tsx
-import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var OpenEndedActivityContent = ({
   answerMap,
   data,
@@ -6520,7 +6524,7 @@ var OpenEndedActivityContent = ({
     answerMap2["ANSWER"] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs30("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+  return /* @__PURE__ */ jsxs31("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
     /* @__PURE__ */ jsx41(
       "div",
       {
@@ -6534,7 +6538,7 @@ var OpenEndedActivityContent = ({
         )
       }
     ),
-    showMaterialContent ? /* @__PURE__ */ jsxs30(Fragment6, { children: [
+    showMaterialContent ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
       /* @__PURE__ */ jsx41(
         "div",
         {
@@ -6560,7 +6564,7 @@ var OpenEndedActivityContent_default = OpenEndedActivityContent;
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
 import { useEffect as useEffect14, useState as useState24, useRef as useRef7 } from "react";
 import { InlineMath as InlineMath9 } from "react-katex";
-import { jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6678,7 +6682,7 @@ var OrderingActivityMaterialContent = ({
     }
     setDraggedKey(null);
   };
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: "flex flex-col h-full",
@@ -6748,7 +6752,7 @@ var OrderingActivityMaterialContent = ({
             displayAnswerMap[materialKey] + "",
             index + ""
           );
-          return /* @__PURE__ */ jsx42("div", { className: "w-full", children: /* @__PURE__ */ jsxs31(
+          return /* @__PURE__ */ jsx42("div", { className: "w-full", children: /* @__PURE__ */ jsxs32(
             "div",
             {
               className: `flex flex-row items-center my-4 mx-2`,
@@ -6811,7 +6815,7 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var OrderingActivityContent = ({
   answerMap,
   data,
@@ -6831,7 +6835,7 @@ var OrderingActivityContent = ({
     answerMap2[secondaryKey] = prevValue;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs32("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+  return /* @__PURE__ */ jsxs33("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
     /* @__PURE__ */ jsx43(
       "div",
       {
@@ -6873,7 +6877,7 @@ var OrderingActivityContent_default = OrderingActivityContent;
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
 import { useEffect as useEffect15, useState as useState25 } from "react";
 import { InlineMath as InlineMath10 } from "react-katex";
-import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6910,10 +6914,10 @@ var TrueFalseActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col h-full", children: [
+  return /* @__PURE__ */ jsxs34("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsx44("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx44("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
     /* @__PURE__ */ jsx44("div", { className: "hidden md:block flex-shrink-0", children: /* @__PURE__ */ jsx44(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsxs33("div", { className: "flex flex-row justify-end items-center gap-x-2 flex-shrink-0", children: [
+    /* @__PURE__ */ jsxs34("div", { className: "flex flex-row justify-end items-center gap-x-2 flex-shrink-0", children: [
       /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
       /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
     ] }),
@@ -6928,7 +6932,7 @@ var TrueFalseActivityMaterialContent = ({
         correctAnswer,
         learnerAnswer
       );
-      return /* @__PURE__ */ jsxs33(
+      return /* @__PURE__ */ jsxs34(
         "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" : ""}`,
@@ -6951,7 +6955,7 @@ var TrueFalseActivityMaterialContent = ({
               },
               `${uniqueValue}-${index}`
             ) }),
-            /* @__PURE__ */ jsxs33("div", { className: "flex flex-row items-center gap-x-2", children: [
+            /* @__PURE__ */ jsxs34("div", { className: "flex flex-row items-center gap-x-2", children: [
               /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx44(
                 BaseImage_default,
                 {
@@ -6979,12 +6983,12 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ jsxs33(Fragment7, { children: [
-      displayAnswerMap.trueList.map((item) => /* @__PURE__ */ jsxs33("div", { className: "flex flex-row items-center gap-x-2", children: [
+    }) }) : /* @__PURE__ */ jsxs34(Fragment7, { children: [
+      displayAnswerMap.trueList.map((item) => /* @__PURE__ */ jsxs34("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ jsx44("div", { className: "flex-1", children: /* @__PURE__ */ jsx44("p", { children: item }) }),
         /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "underline", children: i18n_default.t("true") }) })
       ] })),
-      displayAnswerMap.falseList.map((item) => /* @__PURE__ */ jsxs33("div", { className: "flex flex-row items-center gap-x-2", children: [
+      displayAnswerMap.falseList.map((item) => /* @__PURE__ */ jsxs34("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ jsx44("div", { className: "flex-1", children: /* @__PURE__ */ jsx44("p", { children: item }) }),
         /* @__PURE__ */ jsx44("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx44("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))
@@ -6994,7 +6998,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 
 // src/components/activities/TrueFalseActivityContent.tsx
-import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var TrueFalseActivityContent = ({
   answerMap,
   data,
@@ -7038,7 +7042,7 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs34("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
+  return /* @__PURE__ */ jsxs35("div", { className: `flex flex-col ${isFullScreen ? "" : "md:flex-row"} h-full`, children: [
     /* @__PURE__ */ jsx45("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%] md:overflow-y-auto"}`, children: /* @__PURE__ */ jsx45(
       ActivityBodyContent_default,
       {
@@ -7067,7 +7071,7 @@ var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
 // src/components/activities/solution-contents/ActivitySolutionContent.tsx
 import { InlineMath as InlineMath11 } from "react-katex";
-import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -7099,7 +7103,7 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  return /* @__PURE__ */ jsx46("div", { className: "mx-2", children: /* @__PURE__ */ jsxs35("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+  return /* @__PURE__ */ jsx46("div", { className: "mx-2", children: /* @__PURE__ */ jsxs36("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
     /* @__PURE__ */ jsx46("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
     Object.keys(solutionMap).map((key) => {
       let currentItem;
@@ -7127,7 +7131,7 @@ var ActivitySolutionContent_default = ActivitySolutionContent;
 
 // src/components/activities/evaluation-rubric-contents/ActivityEvaluationRubricContent.tsx
 import { InlineMath as InlineMath12 } from "react-katex";
-import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -7157,7 +7161,7 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  return /* @__PURE__ */ jsxs36("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
+  return /* @__PURE__ */ jsxs37("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
     /* @__PURE__ */ jsx47("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]);
@@ -7169,8 +7173,8 @@ var ActivityEvaluationRubricContent = ({
         points = parseFloat(matchedRegex[1]);
         evaluationRubric = matchedRegex[2];
       }
-      return /* @__PURE__ */ jsxs36("div", { className: "my-2 flex flex-row gap-x-3", children: [
-        /* @__PURE__ */ jsxs36("div", { className: "font-bold text-xl whitespace-nowrap", children: [
+      return /* @__PURE__ */ jsxs37("div", { className: "my-2 flex flex-row gap-x-3", children: [
+        /* @__PURE__ */ jsxs37("div", { className: "font-bold text-xl whitespace-nowrap", children: [
           points,
           " ",
           i18n_default.t("points")
@@ -7195,7 +7199,7 @@ var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 import { useEffect as useEffect16, useState as useState26 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
-import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var SelectionBox = ({
   optionList,
   selectedId,
@@ -7208,15 +7212,15 @@ var SelectionBox = ({
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ jsxs37(
+      children: /* @__PURE__ */ jsxs38(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
           children: [
             option.icon,
-            /* @__PURE__ */ jsxs37("div", { className: "flex-1 flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxs38("div", { className: "flex-1 flex flex-col items-center", children: [
               /* @__PURE__ */ jsx48("p", { children: option.text }),
-              option.subText ? /* @__PURE__ */ jsxs37("p", { className: "text-md", children: [
+              option.subText ? /* @__PURE__ */ jsxs38("p", { className: "text-md", children: [
                 "(",
                 option.subText,
                 ")"
@@ -7232,7 +7236,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var ACTIVITY_TEMPLATE_LIST = [
   { type: "ORDERING", materialMap: "orderingMaterialMap" },
   { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
@@ -7341,42 +7345,42 @@ var ActivityPreviewByData = ({
     }
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx49(OrderingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx49(DropdownActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx49(MCSAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx49(MCMAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx49(MatchingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx49(GroupingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx49(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx49(
             OpenEndedActivityContent_default,
@@ -7386,7 +7390,7 @@ var ActivityPreviewByData = ({
           )
         ] }) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
           isEmpty && /* @__PURE__ */ jsx49(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx49(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
@@ -7395,9 +7399,9 @@ var ActivityPreviewByData = ({
     }
   };
   if (!data) return null;
-  return /* @__PURE__ */ jsxs38("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
-      /* @__PURE__ */ jsxs38("div", { className: "mb-2", children: [
+  return /* @__PURE__ */ jsxs39("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+      /* @__PURE__ */ jsxs39("div", { className: "mb-2", children: [
         showDescription ? /* @__PURE__ */ jsx49("div", { className: "my-2", children: /* @__PURE__ */ jsx49("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
         /* @__PURE__ */ jsx49(
           SelectionBox_default,
@@ -7432,17 +7436,17 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/errors/StatusError.tsx
-import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
 var StatusError = ({
   statusCode,
   statusText,
   textSize
 }) => {
-  return /* @__PURE__ */ jsxs39("div", { className: "flex flex-col justify-center items-center", children: [
+  return /* @__PURE__ */ jsxs40("div", { className: "flex flex-col justify-center items-center", children: [
     /* @__PURE__ */ jsx50("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
-    /* @__PURE__ */ jsxs39("div", { className: "text-center my-5", children: [
+    /* @__PURE__ */ jsxs40("div", { className: "text-center my-5", children: [
       /* @__PURE__ */ jsx50("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
-      /* @__PURE__ */ jsxs39("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
+      /* @__PURE__ */ jsxs40("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
         "(",
         statusCode ? `${statusCode} - ` : null,
         statusText,
@@ -7466,7 +7470,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7476,7 +7480,7 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ jsxs40("div", { className: "w-full flex flex-row mx-2", children: [
+  return /* @__PURE__ */ jsxs41("div", { className: "w-full flex flex-row mx-2", children: [
     /* @__PURE__ */ jsx52("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx52("p", { children: title }) }),
     /* @__PURE__ */ jsx52("div", { className: "flex-1", children: /* @__PURE__ */ jsx52(
       InputGroup_default,
@@ -7495,7 +7499,7 @@ var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
 import { useEffect as useEffect17, useState as useState27 } from "react";
-import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7521,7 +7525,7 @@ var PageTravelGroup = ({
       setImageReady(false);
     }
   };
-  return /* @__PURE__ */ jsxs41("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
+  return /* @__PURE__ */ jsxs42("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
     /* @__PURE__ */ jsx53(
       "button",
       {
@@ -7531,7 +7535,7 @@ var PageTravelGroup = ({
         children: "\u2190"
       }
     ),
-    /* @__PURE__ */ jsxs41("p", { className: "text-md", children: [
+    /* @__PURE__ */ jsxs42("p", { className: "text-md", children: [
       pageNumber + 1,
       " / ",
       totalPageNumber
@@ -7603,7 +7607,7 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
@@ -7625,7 +7629,7 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ jsxs42(
+      children: /* @__PURE__ */ jsxs43(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
@@ -7653,7 +7657,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7663,7 +7667,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx55("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__ */ jsxs43(
+  return /* @__PURE__ */ jsx55("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__ */ jsxs44(
     "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 px-4 py-2 cursor-pointer`,
@@ -7729,7 +7733,7 @@ var SelectionTabPill = ({
 var SelectionTabPill_default = SelectionTabPill;
 
 // src/components/labels/Label.tsx
-import { jsx as jsx58, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs45 } from "react/jsx-runtime";
 var Label = ({
   title,
   icon,
@@ -7749,7 +7753,7 @@ var Label = ({
         background: backgroundColor,
         color: textColor
       },
-      children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
+      children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
         icon,
         /* @__PURE__ */ jsx58("p", { className: font, children: title })
       ] })
@@ -7946,10 +7950,10 @@ var GrayLabel = ({ title, icon, font }) => {
 var GrayLabel_default = GrayLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx70, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs46 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ jsxs45("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+  return /* @__PURE__ */ jsxs46("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
     /* @__PURE__ */ jsx70(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
     /* @__PURE__ */ jsx70("div", { className: "flex-1", children: /* @__PURE__ */ jsx70("p", { className: "", children: value }) })
   ] });