catchup-library-web 2.4.2 → 2.4.4

package/dist/index.js

@@ -1237,11 +1237,22 @@ var BaseModal = ({
         }
       },
       contentLabel: "",
-      children: customSize ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${customSize} font-quicksand`, children }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: customSize ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${customSize} font-quicksand`, children }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "div",
         {
           className: `font-quicksand ${size === "small" ? "w-[600px]" : size === "medium" ? "w-[900px]" : "w-[600px] lg:w-[900px] xl:w-[1200px] 2xl:w-[1500px]"}`,
-          children
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-row justify-end px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              BaseImage_default,
+              {
+                src: "/icons/cross-red.webp",
+                alt: "cross-red",
+                size: "medium",
+                onClick: onRequestClose
+              }
+            ) }),
+            children
+          ]
         }
       )
     }
@@ -6429,7 +6440,14 @@ var retrieveFileTypeFromExtension = (format) => {
   return "";
 };
 var retrieveFileTypeOptionList = (optionType) => {
-  if (optionType === "PDF_ONLY") {
+  if (optionType === "IMAGE_ONLY") {
+    return [
+      {
+        text: i18n_default.t("IMAGE"),
+        value: "IMAGE"
+      }
+    ];
+  } else if (optionType === "PDF_ONLY") {
     return [
       {
         text: i18n_default.t("PDF"),

package/dist/index.mjs

@@ -967,7 +967,7 @@ var BaseLoadingWithText_default = BaseLoadingWithText;
 
 // src/components/modals/BaseModal.tsx
 import Modal from "react-modal";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var BaseModal = ({
   isOpen,
   size,
@@ -1004,11 +1004,22 @@ var BaseModal = ({
         }
       },
       contentLabel: "",
-      children: customSize ? /* @__PURE__ */ jsx15("div", { className: `${customSize} font-quicksand`, children }) : /* @__PURE__ */ jsx15(
+      children: customSize ? /* @__PURE__ */ jsx15("div", { className: `${customSize} font-quicksand`, children }) : /* @__PURE__ */ jsxs10(
         "div",
         {
           className: `font-quicksand ${size === "small" ? "w-[600px]" : size === "medium" ? "w-[900px]" : "w-[600px] lg:w-[900px] xl:w-[1200px] 2xl:w-[1500px]"}`,
-          children
+          children: [
+            /* @__PURE__ */ jsx15("div", { className: "flex flex-row justify-end px-2 py-2", children: /* @__PURE__ */ jsx15(
+              BaseImage_default,
+              {
+                src: "/icons/cross-red.webp",
+                alt: "cross-red",
+                size: "medium",
+                onClick: onRequestClose
+              }
+            ) }),
+            children
+          ]
         }
       )
     }
@@ -1019,7 +1030,7 @@ var BaseModal_default = BaseModal;
 // src/components/pdfs/BasePDF.tsx
 import { useState as useState10 } from "react";
 import { Document, Page } from "react-pdf";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var BasePDF = ({ file }) => {
   const [pageNumber, setPageNumber] = useState10(1);
   const [numberOfPages, setNumberOfPages] = useState10(0);
@@ -1027,9 +1038,9 @@ var BasePDF = ({ file }) => {
     setPageNumber(1);
     setNumberOfPages(numPages);
   };
-  return /* @__PURE__ */ jsxs10(Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
+  return /* @__PURE__ */ jsxs11(Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
     /* @__PURE__ */ jsx16(Page, { pageNumber }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex flex-row items-center justify-center", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex flex-row items-center justify-center", children: [
       pageNumber === 1 ? null : /* @__PURE__ */ jsx16("div", { className: "px-2", children: /* @__PURE__ */ jsx16("div", { className: "cursor-pointer", children: /* @__PURE__ */ jsx16(
         BaseImage_default,
         {
@@ -3094,7 +3105,7 @@ var retrieveActivityCountOptionList = () => {
 
 // src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
 import { InlineMath } from "react-katex";
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var ShowBodyMediaByContentType = ({
   index,
   type,
@@ -3194,7 +3205,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsxs12(
             "div",
             {
               className: "relative w-[200px]",
@@ -3328,7 +3339,7 @@ var ShowBodyMediaByContentType = ({
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
         valuePartList.push(
-          /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsxs12(
             "div",
             {
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
@@ -3377,7 +3388,7 @@ var ShowBodyMediaByContentType = ({
           }
         },
         contentLabel: "Image Fullscreen View",
-        children: /* @__PURE__ */ jsxs11("div", { className: "flex-1 flex flex-col", children: [
+        children: /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex flex-col", children: [
           /* @__PURE__ */ jsx18("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx18(
             BaseImage_default,
             {
@@ -3408,7 +3419,7 @@ var ShowBodyMediaByContentType = ({
       case "TEXT":
         return /* @__PURE__ */ jsx18("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx18("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ jsx18("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs11(
+        return /* @__PURE__ */ jsx18("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs12(
           "div",
           {
             className: `${convertToPercentage(
@@ -3458,7 +3469,7 @@ var ShowBodyMediaByContentType = ({
         return null;
     }
   };
-  return /* @__PURE__ */ jsxs11("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsxs12("div", { className: "w-full", children: [
     RenderShowFullScreenItem(),
     RenderMainContent()
   ] }, `body-content-${index}`);
@@ -3580,7 +3591,7 @@ import { InlineMath as InlineMath2 } from "react-katex";
 // src/components/groups/InputGroup.tsx
 import Select from "react-select";
 import { useEffect as useEffect3, useRef, useState as useState12, useCallback } from "react";
-import { Fragment, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var InputGroup = ({
   type,
   title,
@@ -3703,8 +3714,8 @@ var InputGroup = ({
         onRequestClose: () => {
           setShowMathConstructor(false);
         },
-        children: /* @__PURE__ */ jsx22(FullCard_default, { children: /* @__PURE__ */ jsx22("div", { className: "bg-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs12("div", { className: "p-6 space-y-6", children: [
-          /* @__PURE__ */ jsxs12("div", { children: [
+        children: /* @__PURE__ */ jsx22(FullCard_default, { children: /* @__PURE__ */ jsx22("div", { className: "bg-white rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs13("div", { className: "p-6 space-y-6", children: [
+          /* @__PURE__ */ jsxs13("div", { children: [
             /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("math_editor") }),
             /* @__PURE__ */ jsx22("div", { className: "border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ jsx22(
               "math-field",
@@ -3733,9 +3744,9 @@ var InputGroup = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxs12("div", { children: [
+          /* @__PURE__ */ jsxs13("div", { children: [
             /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: i18n_default.t("latex_output") }),
-            /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
               /* @__PURE__ */ jsx22(
                 "textarea",
                 {
@@ -3762,7 +3773,7 @@ var InputGroup = ({
     );
   };
   const CheckboxInputGroup = () => {
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "div",
       {
         className: "flex flex-row items-center gap-x-1 cursor-pointer",
@@ -3784,7 +3795,7 @@ var InputGroup = ({
     );
   };
   const FileInputGroup = () => {
-    return /* @__PURE__ */ jsxs12("div", { className: "my-1", children: [
+    return /* @__PURE__ */ jsxs13("div", { className: "my-1", children: [
       title ? /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
       /* @__PURE__ */ jsx22(
         "input",
@@ -3803,7 +3814,7 @@ var InputGroup = ({
     ] });
   };
   const DateInputGroup = () => {
-    return /* @__PURE__ */ jsxs12("div", { className: "my-1", children: [
+    return /* @__PURE__ */ jsxs13("div", { className: "my-1", children: [
       title ? /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
       /* @__PURE__ */ jsx22(
         "input",
@@ -3822,7 +3833,7 @@ var InputGroup = ({
     ] });
   };
   const SearchableSelectInputGroup = () => {
-    return /* @__PURE__ */ jsxs12("div", { className: "my-1", children: [
+    return /* @__PURE__ */ jsxs13("div", { className: "my-1", children: [
       title ? /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400 ", children: title }) : null,
       /* @__PURE__ */ jsx22(
         Select,
@@ -3887,10 +3898,10 @@ var InputGroup = ({
     ] });
   };
   const TextAreaInputGroup = () => {
-    return /* @__PURE__ */ jsxs12("div", { className: "my-1 flex-1 flex flex-col relative", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "flex flex-row justify-between items-center", children: [
+    return /* @__PURE__ */ jsxs13("div", { className: "my-1 flex-1 flex flex-col relative", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex flex-row justify-between items-center", children: [
         /* @__PURE__ */ jsx22("div", { children: title ? /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ jsx22("div", { children: value && limit ? /* @__PURE__ */ jsxs12("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+        /* @__PURE__ */ jsx22("div", { children: value && limit ? /* @__PURE__ */ jsxs13("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
@@ -3915,7 +3926,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__ */ jsxs12("div", { className: "flex items-center gap-x-1", children: [
+          children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-x-1", children: [
             /* @__PURE__ */ jsx22("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
             /* @__PURE__ */ jsx22(
               "svg",
@@ -3941,10 +3952,10 @@ var InputGroup = ({
     ] });
   };
   const TextInputGroup = () => {
-    return /* @__PURE__ */ jsxs12("div", { className: "my-1 relative", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "flex flex-row justify-between items-center", children: [
+    return /* @__PURE__ */ jsxs13("div", { className: "my-1 relative", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex flex-row justify-between items-center", children: [
         /* @__PURE__ */ jsx22("div", { children: title ? /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
-        /* @__PURE__ */ jsx22("div", { children: value && limit ? /* @__PURE__ */ jsxs12("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+        /* @__PURE__ */ jsx22("div", { children: value && limit ? /* @__PURE__ */ jsxs13("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
           value.length,
           " / ",
           limit
@@ -3978,7 +3989,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__ */ jsxs12("div", { className: "flex items-center gap-x-1", children: [
+          children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-x-1", children: [
             /* @__PURE__ */ jsx22("span", { className: "text-sm font-medium", children: "\u{1D453}(x)" }),
             /* @__PURE__ */ jsx22(
               "svg",
@@ -4020,7 +4031,7 @@ var InputGroup = ({
       return CheckboxInputGroup();
     }
   };
-  return /* @__PURE__ */ jsxs12(Fragment, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment, { children: [
     RenderMainContent(),
     /* @__PURE__ */ jsx22(MathConstructorModal, {})
   ] });
@@ -4154,7 +4165,7 @@ var getSystemLanguageFromCurriculumType = (curriculumType) => {
 
 // src/components/dropdowns/MediaDropdown.tsx
 import { useState as useState13, useEffect as useEffect4, useRef as useRef2 } from "react";
-import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var MediaDropdown = ({ id, answer, optionList }) => {
   const [showDropdown, setShowDropdown] = useState13(false);
   const dropdownRef = useRef2(null);
@@ -4184,7 +4195,7 @@ var MediaDropdown = ({ id, answer, optionList }) => {
     }
     setShowDropdown(false);
   };
-  return /* @__PURE__ */ jsxs13("div", { ref: dropdownRef, className: "w-full relative", children: [
+  return /* @__PURE__ */ jsxs14("div", { ref: dropdownRef, className: "w-full relative", children: [
     /* @__PURE__ */ jsx23(
       "div",
       {
@@ -4197,7 +4208,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__ */ jsxs13(
+        children: optionList.map((option, index) => /* @__PURE__ */ jsxs14(
           "li",
           {
             className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
@@ -4224,7 +4235,7 @@ var MediaDropdown_default = MediaDropdown;
 // src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx
 import { useEffect as useEffect5, useRef as useRef3, useState as useState14 } from "react";
 import Modal3 from "react-modal";
-import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var ShowMaterialMediaByContentType = ({
   key,
   contentType,
@@ -4271,7 +4282,7 @@ var ShowMaterialMediaByContentType = ({
           }
         },
         contentLabel: "",
-        children: /* @__PURE__ */ jsxs14("div", { className: "flex-1 flex flex-col", children: [
+        children: /* @__PURE__ */ jsxs15("div", { className: "flex-1 flex flex-col", children: [
           /* @__PURE__ */ jsx24("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx24(
             BaseImage_default,
             {
@@ -4297,9 +4308,9 @@ var ShowMaterialMediaByContentType = ({
       }
     );
   };
-  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
+  return contentType === "IMAGE" ? /* @__PURE__ */ jsxs15(Fragment2, { children: [
     RenderShowFullScreenItem(),
-    /* @__PURE__ */ jsx24("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs14("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
+    /* @__PURE__ */ jsx24("div", { className: "my-2 w-full h-full", children: /* @__PURE__ */ jsx24("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsxs15("div", { className: "h-catchup-activity-media-box-item w-catchup-activity-media-box-item flex items-center justify-center relative", children: [
       /* @__PURE__ */ jsx24(
         BaseImage_default,
         {
@@ -4363,7 +4374,7 @@ var ShowMaterialMediaByContentType = ({
 var ShowMaterialMediaByContentType_default = ShowMaterialMediaByContentType;
 
 // src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
-import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var DropdownActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -4395,7 +4406,7 @@ var DropdownActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  return /* @__PURE__ */ jsxs15("div", { className: "flex flex-row flex-wrap items-center", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: "flex flex-row flex-wrap items-center", children: [
     /* @__PURE__ */ jsx25("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx25("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_dropdown_text") }) }),
     /* @__PURE__ */ jsx25("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx25(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx25("div", { className: "w-full flex flex-row flex-wrap", children: Object.keys(displayAnswerMap).map(
@@ -4405,12 +4416,12 @@ var DropdownActivityMaterialContent = ({
           answerKey,
           displayAnswerMap[materialKey]
         );
-        return /* @__PURE__ */ jsx25("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx25("div", { className: "mx-2", children: /* @__PURE__ */ jsxs15("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-          /* @__PURE__ */ jsx25("div", { className: "my-auto", children: /* @__PURE__ */ jsxs15("p", { className: "text-xl", children: [
+        return /* @__PURE__ */ jsx25("div", { className: "w-full md:w-1/2", children: /* @__PURE__ */ jsx25("div", { className: "mx-2", children: /* @__PURE__ */ jsxs16("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+          /* @__PURE__ */ jsx25("div", { className: "my-auto", children: /* @__PURE__ */ jsxs16("p", { className: "text-xl", children: [
             parseFloat(materialKey) + 1,
             "."
           ] }) }),
-          /* @__PURE__ */ jsxs15("div", { className: "w-full relative", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "w-full relative", children: [
             /* @__PURE__ */ jsx25("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsx25("div", { className: "flex-1", children: /* @__PURE__ */ jsx25(
               InputGroup_default,
               {
@@ -4512,7 +4523,7 @@ var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
 import { useState as useState16, useEffect as useEffect7 } from "react";
-import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var DropdownActivityContent = ({
   answerMap,
   data,
@@ -4535,7 +4546,7 @@ var DropdownActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs16("div", { className: "flex flex-row flex-wrap", children: [
+  return /* @__PURE__ */ jsxs17("div", { className: "flex flex-row flex-wrap", children: [
     /* @__PURE__ */ jsx26("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx26(
       ActivityBodyContent_default,
       {
@@ -4593,7 +4604,7 @@ var InputWithSpecialExpression = ({
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
-import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var FillInTheBlanksActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -4721,7 +4732,7 @@ var FillInTheBlanksActivityMaterialContent = ({
       setSelectedOption(null);
     }
   };
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: "flex flex-row flex-wrap items-center",
@@ -4846,12 +4857,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__ */ jsxs17("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
-                /* @__PURE__ */ jsx28("div", { className: "my-auto", children: /* @__PURE__ */ jsxs17("p", { className: "text-xl", children: [
+              children: /* @__PURE__ */ jsxs18("div", { className: "w-full flex flex-row my-2 gap-x-2", children: [
+                /* @__PURE__ */ jsx28("div", { className: "my-auto", children: /* @__PURE__ */ jsxs18("p", { className: "text-xl", children: [
                   parseFloat(materialKey) + 1,
                   "."
                 ] }) }),
-                /* @__PURE__ */ jsx28("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs17("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx28("div", { className: "flex-1", children: checkCanAnswerQuestion() ? contentMap.type === "TEXT" ? /* @__PURE__ */ jsxs18("div", { className: "relative", children: [
                   /* @__PURE__ */ jsx28("div", { className: "flex-1", children: /* @__PURE__ */ jsx28(
                     "div",
                     {
@@ -4932,7 +4943,7 @@ var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMate
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
 import { useState as useState18, useEffect as useEffect9 } from "react";
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var FillInTheBlanksActivityContent = ({
   answerMap,
   data,
@@ -4980,7 +4991,7 @@ var FillInTheBlanksActivityContent = ({
     setCurrentAnswerMap(answerMap2);
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-row flex-wrap", children: [
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-row flex-wrap", children: [
     /* @__PURE__ */ jsx29("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx29(
       ActivityBodyContent_default,
       {
@@ -5013,7 +5024,7 @@ var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 // src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
 import { useEffect as useEffect10, useRef as useRef5, useState as useState19 } from "react";
 import { InlineMath as InlineMath5 } from "react-katex";
-import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var GroupingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5209,7 +5220,7 @@ var GroupingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ jsxs19("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ jsxs20("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx30(
       "div",
       {
@@ -5268,7 +5279,7 @@ var GroupingActivityMaterialContent = ({
         ) })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs19(Fragment3, { children: [
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs20(Fragment3, { children: [
       /* @__PURE__ */ jsx30("div", { className: "flex-1 flex flex-row gap-x-4 overflow-x-auto py-2", children: filteredMaterialList.map((materialValue, index) => {
         return /* @__PURE__ */ jsx30(
           "div",
@@ -5310,7 +5321,7 @@ var GroupingActivityMaterialContent = ({
       }) }),
       /* @__PURE__ */ jsx30(DividerLine_default, {})
     ] }) : null,
-    Object.keys(displayAnswerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-row w-full", children: [
+    Object.keys(displayAnswerMap).map((answerMapKey, index) => /* @__PURE__ */ jsxs20("div", { className: "flex flex-row w-full", children: [
       /* @__PURE__ */ jsx30("div", { className: "w-1/3", children: /* @__PURE__ */ jsx30(
         "div",
         {
@@ -5400,7 +5411,7 @@ var GroupingActivityMaterialContent = ({
 var GroupingActivityMaterialContent_default = GroupingActivityMaterialContent;
 
 // src/components/activities/GroupingActivityContent.tsx
-import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var GroupingActivityContent = ({
   answerMap,
   data,
@@ -5421,7 +5432,7 @@ var GroupingActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs20(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs21(Fragment4, { children: [
     /* @__PURE__ */ jsx31(
       ActivityBodyContent_default,
       {
@@ -5450,7 +5461,7 @@ var GroupingActivityContent_default = GroupingActivityContent;
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
 import { useEffect as useEffect11, useRef as useRef6, useState as useState20 } from "react";
 import { InlineMath as InlineMath6 } from "react-katex";
-import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var MatchingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5638,7 +5649,7 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ jsxs21("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ jsxs22("div", { onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx32(
       "div",
       {
@@ -5697,7 +5708,7 @@ var MatchingActivityMaterialContent = ({
         ) })
       }
     ),
-    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    filteredMaterialList.length > 0 ? /* @__PURE__ */ jsxs22(Fragment5, { children: [
       /* @__PURE__ */ jsx32(
         "div",
         {
@@ -5749,7 +5760,7 @@ var MatchingActivityMaterialContent = ({
         materialMap[answerMapKey],
         displayAnswerMap[answerMapKey]
       );
-      return /* @__PURE__ */ jsxs21("div", { className: "flex flex-row w-full", children: [
+      return /* @__PURE__ */ jsxs22("div", { className: "flex flex-row w-full", children: [
         /* @__PURE__ */ jsx32("div", { className: "w-1/3", children: /* @__PURE__ */ jsx32(
           "div",
           {
@@ -5816,7 +5827,7 @@ var MatchingActivityMaterialContent = ({
 var MatchingActivityMaterialContent_default = MatchingActivityMaterialContent;
 
 // src/components/activities/MatchingActivityContent.tsx
-import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var MatchingActivityContent = ({
   answerMap,
   data,
@@ -5833,7 +5844,7 @@ var MatchingActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
     /* @__PURE__ */ jsx33(
       ActivityBodyContent_default,
       {
@@ -5862,7 +5873,7 @@ var MatchingActivityContent_default = MatchingActivityContent;
 // src/components/activities/material-contents/MCMAActivityMaterialContent.tsx
 import { useEffect as useEffect12, useState as useState21 } from "react";
 import { InlineMath as InlineMath7 } from "react-katex";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var MCMAActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -5901,7 +5912,7 @@ var MCMAActivityMaterialContent = ({
   };
   const correctAnswerList = retrieveCorrectAnswerList();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ jsx34("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs23("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
+    return /* @__PURE__ */ jsx34("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs24("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
       /* @__PURE__ */ jsx34("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx34("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcma_text") }) }),
       /* @__PURE__ */ jsx34("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx34(DividerLine_default, {}) }),
       checkCanAnswerQuestion() ? /* @__PURE__ */ jsx34("div", { className: "flex flex-row w-full flex-wrap ", children: materialMap[materialKey].map(
@@ -5917,7 +5928,7 @@ var MCMAActivityMaterialContent = ({
           const foundIndex = correctAnswerList.findIndex(
             (correctAnswer) => correctAnswer === materialSubKey
           );
-          return /* @__PURE__ */ jsxs23(
+          return /* @__PURE__ */ jsxs24(
             "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" : ""}`,
@@ -5974,7 +5985,7 @@ var MCMAActivityMaterialContent = ({
 var MCMAActivityMaterialContent_default = MCMAActivityMaterialContent;
 
 // src/components/activities/MCMAActivityContent.tsx
-import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var MCMAActivityContent = ({
   answerMap,
   data,
@@ -5999,7 +6010,7 @@ var MCMAActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-row flex-wrap", children: [
+  return /* @__PURE__ */ jsxs25("div", { className: "flex flex-row flex-wrap", children: [
     /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx35(ActivityBodyContent_default, { bodyMap: MCMABodyMap, templateType: "MCMA" }) }),
     /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "contents" : "contents md:hidden"}`, children: /* @__PURE__ */ jsx35(DividerLine_default, {}) }),
     /* @__PURE__ */ jsx35("div", { className: `${isFullScreen ? "hidden" : "hidden md:block"}`, children: /* @__PURE__ */ jsx35(VerticalDividerLine_default, {}) }),
@@ -6023,7 +6034,7 @@ var MCMAActivityContent_default = MCMAActivityContent;
 // src/components/activities/material-contents/MCSAActivityMaterialContent.tsx
 import { useEffect as useEffect13, useState as useState22 } from "react";
 import { InlineMath as InlineMath8 } 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 MCSAActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6056,7 +6067,7 @@ var MCSAActivityMaterialContent = ({
   };
   const correctAnswer = retrieveCorrectAnswer();
   return Object.keys(materialMap).map((materialKey, index) => {
-    return /* @__PURE__ */ jsx36("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs25("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
+    return /* @__PURE__ */ jsx36("div", { className: "flex flex-row items-center my-1", children: /* @__PURE__ */ jsxs26("div", { className: "flex-1 flex flex-col justify-center border-catchup-lighter-gray rounded-catchup-xlarge px-5 md:px-0", children: [
       /* @__PURE__ */ jsx36("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx36("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_mcsa_text") }) }),
       /* @__PURE__ */ jsx36("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx36(DividerLine_default, {}) }),
       checkCanAnswerQuestion() ? /* @__PURE__ */ jsx36(
@@ -6070,7 +6081,7 @@ var MCSAActivityMaterialContent = ({
                 materialSubKey,
                 displayAnswerMap[materialKey]
               );
-              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" && 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" : ""}`,
@@ -6129,7 +6140,7 @@ var MCSAActivityMaterialContent = ({
 var MCSAActivityMaterialContent_default = MCSAActivityMaterialContent;
 
 // src/components/activities/MCSAActivityContent.tsx
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 var MCSAActivityContent = ({
   answerMap,
   data,
@@ -6147,7 +6158,7 @@ var MCSAActivityContent = ({
     answerMap2[key] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs26("div", { className: "flex flex-row flex-wrap", children: [
+  return /* @__PURE__ */ jsxs27("div", { className: "flex flex-row flex-wrap", children: [
     /* @__PURE__ */ jsx37("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[60%]"}`, children: /* @__PURE__ */ jsx37(ActivityBodyContent_default, { bodyMap: MCSABodyMap, templateType: "MCSA" }) }),
     /* @__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, {}) }),
@@ -6196,7 +6207,14 @@ var retrieveFileTypeFromExtension = (format) => {
   return "";
 };
 var retrieveFileTypeOptionList = (optionType) => {
-  if (optionType === "PDF_ONLY") {
+  if (optionType === "IMAGE_ONLY") {
+    return [
+      {
+        text: i18n_default.t("IMAGE"),
+        value: "IMAGE"
+      }
+    ];
+  } else if (optionType === "PDF_ONLY") {
     return [
       {
         text: i18n_default.t("PDF"),
@@ -6251,7 +6269,7 @@ var retrieveAcceptedFormats = (fileType) => {
 };
 
 // src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx
-import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var OpenEndedActivityMaterialContent = ({
   answerMap,
   contentMap,
@@ -6331,7 +6349,7 @@ var OpenEndedActivityMaterialContent = ({
       }
     ) });
   };
-  return /* @__PURE__ */ jsx38(Fragment7, { children: /* @__PURE__ */ jsxs27("div", { className: "", children: [
+  return /* @__PURE__ */ jsx38(Fragment7, { children: /* @__PURE__ */ jsxs28("div", { className: "", children: [
     /* @__PURE__ */ jsx38("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx38("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_open_ended_text") }) }),
     /* @__PURE__ */ jsx38("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx38(DividerLine_default, {}) }),
     contentMap.type === "TEXT" ? RenderTextContent(answerMap) : contentMap.type === "IMAGE" ? RenderImageContent(answerMap) : contentMap.type === "AUDIO" ? RenderAudioContent(answerMap) : null
@@ -6340,7 +6358,7 @@ var OpenEndedActivityMaterialContent = ({
 var OpenEndedActivityMaterialContent_default = OpenEndedActivityMaterialContent;
 
 // src/components/activities/OpenEndedActivityContent.tsx
-import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 var OpenEndedActivityContent = ({
   answerMap,
   data,
@@ -6357,7 +6375,7 @@ var OpenEndedActivityContent = ({
     answerMap2["ANSWER"] = value;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs28("div", { className: "flex flex-row flex-wrap", children: [
+  return /* @__PURE__ */ jsxs29("div", { className: "flex flex-row flex-wrap", children: [
     /* @__PURE__ */ jsx39(
       "div",
       {
@@ -6371,7 +6389,7 @@ var OpenEndedActivityContent = ({
         )
       }
     ),
-    showMaterialContent ? /* @__PURE__ */ jsxs28(Fragment8, { children: [
+    showMaterialContent ? /* @__PURE__ */ jsxs29(Fragment8, { children: [
       /* @__PURE__ */ jsx39(
         "div",
         {
@@ -6434,7 +6452,7 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 var OrderingActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6581,7 +6599,7 @@ var OrderingActivityMaterialContent = ({
     }
     setDraggedKey(null);
   };
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: "flex flex-row flex-wrap",
@@ -6651,7 +6669,7 @@ var OrderingActivityMaterialContent = ({
             displayAnswerMap[materialKey] + "",
             index + ""
           );
-          return /* @__PURE__ */ jsx40("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs29(
+          return /* @__PURE__ */ jsx40("div", { className: "w-full lg:w-1/2", children: /* @__PURE__ */ jsxs30(
             "div",
             {
               className: `flex flex-row items-center my-4 mx-2`,
@@ -6716,7 +6734,7 @@ var OrderingActivityMaterialContent = ({
 var OrderingActivityMaterialContent_default = OrderingActivityMaterialContent;
 
 // src/components/activities/OrderingActivityContent.tsx
-import { Fragment as Fragment9, jsx as jsx41, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var OrderingActivityContent = ({
   answerMap,
   data,
@@ -6735,7 +6753,7 @@ var OrderingActivityContent = ({
     answerMap2[secondaryKey] = prevValue;
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs30(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs31(Fragment9, { children: [
     /* @__PURE__ */ jsx41(
       ActivityBodyContent_default,
       {
@@ -6764,7 +6782,7 @@ var OrderingActivityContent_default = OrderingActivityContent;
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
 import { useEffect as useEffect16, useState as useState25 } from "react";
 import { InlineMath as InlineMath10 } from "react-katex";
-import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
   uniqueValue,
   answerMap,
@@ -6801,10 +6819,10 @@ var TrueFalseActivityMaterialContent = ({
     }
     return "INCORRECT";
   };
-  return /* @__PURE__ */ jsxs31("div", { className: "", children: [
+  return /* @__PURE__ */ jsxs32("div", { className: "", children: [
     /* @__PURE__ */ jsx42("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx42("span", { className: "font-semibold text-xl opacity-60", children: i18n_default.t("please_select_true_false_text") }) }),
     /* @__PURE__ */ jsx42("div", { className: "hidden md:contents", children: /* @__PURE__ */ jsx42(DividerLine_default, {}) }),
-    /* @__PURE__ */ jsxs31("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "flex flex-row justify-end items-center gap-x-2", children: [
       /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "font-bold text-lg", children: i18n_default.t("true") }) }),
       /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "font-bold text-lg", children: i18n_default.t("false") }) })
     ] }),
@@ -6819,7 +6837,7 @@ var TrueFalseActivityMaterialContent = ({
         correctAnswer,
         learnerAnswer
       );
-      return /* @__PURE__ */ jsxs31(
+      return /* @__PURE__ */ jsxs32(
         "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" : ""}`,
@@ -6842,7 +6860,7 @@ var TrueFalseActivityMaterialContent = ({
               },
               `${uniqueValue}-${index}`
             ) }),
-            /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-x-2", children: [
+            /* @__PURE__ */ jsxs32("div", { className: "flex flex-row items-center gap-x-2", children: [
               /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsx42(
                 BaseImage_default,
                 {
@@ -6870,12 +6888,12 @@ var TrueFalseActivityMaterialContent = ({
         },
         index
       );
-    }) }) : /* @__PURE__ */ jsxs31(Fragment10, { children: [
-      displayAnswerMap.trueList.map((item) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-x-2", children: [
+    }) }) : /* @__PURE__ */ jsxs32(Fragment10, { children: [
+      displayAnswerMap.trueList.map((item) => /* @__PURE__ */ jsxs32("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ jsx42("div", { className: "flex-1", children: /* @__PURE__ */ jsx42("p", { children: item }) }),
         /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "underline", children: i18n_default.t("true") }) })
       ] })),
-      displayAnswerMap.falseList.map((item) => /* @__PURE__ */ jsxs31("div", { className: "flex flex-row items-center gap-x-2", children: [
+      displayAnswerMap.falseList.map((item) => /* @__PURE__ */ jsxs32("div", { className: "flex flex-row items-center gap-x-2", children: [
         /* @__PURE__ */ jsx42("div", { className: "flex-1", children: /* @__PURE__ */ jsx42("p", { children: item }) }),
         /* @__PURE__ */ jsx42("div", { className: "w-[50px]", children: /* @__PURE__ */ jsx42("p", { className: "underline", children: i18n_default.t("false") }) })
       ] }))
@@ -6885,7 +6903,7 @@ var TrueFalseActivityMaterialContent = ({
 var TrueFalseActivityMaterialContent_default = TrueFalseActivityMaterialContent;
 
 // src/components/activities/TrueFalseActivityContent.tsx
-import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var TrueFalseActivityContent = ({
   answerMap,
   data,
@@ -6929,7 +6947,7 @@ var TrueFalseActivityContent = ({
     }
     changeAnswer(answerMap2);
   };
-  return /* @__PURE__ */ jsxs32("div", { className: "flex flex-row flex-wrap", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-row flex-wrap", children: [
     /* @__PURE__ */ jsx43("div", { className: `${isFullScreen ? "w-full" : "w-full md:w-[40%]"}`, children: /* @__PURE__ */ jsx43(
       ActivityBodyContent_default,
       {
@@ -6958,7 +6976,7 @@ var TrueFalseActivityContent_default = TrueFalseActivityContent;
 
 // src/components/activities/solution-contents/ActivitySolutionContent.tsx
 import { InlineMath as InlineMath11 } from "react-katex";
-import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var ActivitySolutionContent = ({
   activityTemplateType,
   data
@@ -6990,7 +7008,7 @@ var ActivitySolutionContent = ({
     return null;
   }
   if (!solutionMap || Object.keys(solutionMap).length === 0) return null;
-  return /* @__PURE__ */ jsx44("div", { className: "mx-2", children: /* @__PURE__ */ jsxs33("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
+  return /* @__PURE__ */ jsx44("div", { className: "mx-2", children: /* @__PURE__ */ jsxs34("div", { className: "p-4 border-catchup-blue border-2 rounded-catchup-xlarge", children: [
     /* @__PURE__ */ jsx44("p", { className: "text-xl font-bold text-center mb-3", children: i18n_default.t("solution") }),
     Object.keys(solutionMap).map((key) => {
       let currentItem;
@@ -7018,7 +7036,7 @@ var ActivitySolutionContent_default = ActivitySolutionContent;
 
 // src/components/activities/evaluation-rubric-contents/ActivityEvaluationRubricContent.tsx
 import { InlineMath as InlineMath12 } from "react-katex";
-import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var ActivityEvaluationRubricContent = ({
   activityTemplateType,
   data
@@ -7048,7 +7066,7 @@ var ActivityEvaluationRubricContent = ({
   }
   if (!evaluationRubricMap || Object.keys(evaluationRubricMap).length === 0)
     return null;
-  return /* @__PURE__ */ jsxs34("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
+  return /* @__PURE__ */ jsxs35("div", { className: "p-4 border-catchup-gray-400 border-2 rounded-catchup-xlarge", children: [
     /* @__PURE__ */ jsx45("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]);
@@ -7060,8 +7078,8 @@ var ActivityEvaluationRubricContent = ({
         points = parseFloat(matchedRegex[1]);
         evaluationRubric = matchedRegex[2];
       }
-      return /* @__PURE__ */ jsxs34("div", { className: "my-2 flex flex-row gap-x-3", children: [
-        /* @__PURE__ */ jsxs34("div", { className: "font-bold text-xl whitespace-nowrap", children: [
+      return /* @__PURE__ */ jsxs35("div", { className: "my-2 flex flex-row gap-x-3", children: [
+        /* @__PURE__ */ jsxs35("div", { className: "font-bold text-xl whitespace-nowrap", children: [
           points,
           " ",
           i18n_default.t("points")
@@ -7086,7 +7104,7 @@ var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 import { useEffect as useEffect17, useState as useState26 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
-import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var SelectionBox = ({
   optionList,
   selectedId,
@@ -7099,15 +7117,15 @@ var SelectionBox = ({
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ jsxs35(
+      children: /* @__PURE__ */ jsxs36(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
           children: [
             option.icon,
-            /* @__PURE__ */ jsxs35("div", { className: "flex-1 flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxs36("div", { className: "flex-1 flex flex-col items-center", children: [
               /* @__PURE__ */ jsx46("p", { children: option.text }),
-              option.subText ? /* @__PURE__ */ jsxs35("p", { className: "text-md", children: [
+              option.subText ? /* @__PURE__ */ jsxs36("p", { className: "text-md", children: [
                 "(",
                 option.subText,
                 ")"
@@ -7123,7 +7141,7 @@ var SelectionBox = ({
 var SelectionBox_default = SelectionBox;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { Fragment as Fragment11, jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var ACTIVITY_TEMPLATE_LIST = [
   { type: "ORDERING", materialMap: "orderingMaterialMap" },
   { type: "DROPDOWN", materialMap: "dropdownMaterialMap" },
@@ -7232,42 +7250,42 @@ var ActivityPreviewByData = ({
     }
     switch (selectedType) {
       case "ORDERING":
-        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+        return data.orderingBodyMap && data.orderingMaterialMap ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
           isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx47(OrderingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "DROPDOWN":
-        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+        return data.dropdownBodyMap && data.dropdownMaterialMap ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
           isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx47(DropdownActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCSA":
-        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+        return data.MCSABodyMap && data.MCSAMaterialMap ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
           isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx47(MCSAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MCMA":
-        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+        return data.MCMABodyMap && data.MCMAMaterialMap ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
           isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx47(MCMAActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "MATCHING":
-        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+        return data.matchingBodyMap && data.matchingMaterialMap ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
           isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx47(MatchingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "GROUPING":
-        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+        return data.groupingBodyMap && data.groupingMaterialMap ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
           isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx47(GroupingActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "FILL_IN_THE_BLANKS":
-        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+        return data.fillInTheBlanksBodyMap && data.fillInTheBlanksMaterialMap ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
           isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx47(FillInTheBlanksActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
       case "OPEN_ENDED":
-        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+        return data.openEndedBodyMap ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
           isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx47(
             OpenEndedActivityContent_default,
@@ -7277,7 +7295,7 @@ var ActivityPreviewByData = ({
           )
         ] }) : null;
       case "TRUE_FALSE":
-        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
+        return data.trueFalseBodyMap && data.trueFalseMaterialMap ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
           isEmpty && /* @__PURE__ */ jsx47(ActivityEmptyContent_default, {}),
           /* @__PURE__ */ jsx47(TrueFalseActivityContent_default, __spreadValues({}, commonProps))
         ] }) : null;
@@ -7286,9 +7304,9 @@ var ActivityPreviewByData = ({
     }
   };
   if (!data) return null;
-  return /* @__PURE__ */ jsxs36("div", { children: [
-    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs36(Fragment11, { children: [
-      /* @__PURE__ */ jsxs36("div", { className: "mb-2", children: [
+  return /* @__PURE__ */ jsxs37("div", { children: [
+    showType && optionList.length > 0 ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
+      /* @__PURE__ */ jsxs37("div", { className: "mb-2", children: [
         showDescription ? /* @__PURE__ */ jsx47("div", { className: "my-2", children: /* @__PURE__ */ jsx47("p", { className: "font-semibold text-lg", children: i18n_default.t("activity_template") }) }) : null,
         /* @__PURE__ */ jsx47(
           SelectionBox_default,
@@ -7323,17 +7341,17 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/errors/StatusError.tsx
-import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var StatusError = ({
   statusCode,
   statusText,
   textSize
 }) => {
-  return /* @__PURE__ */ jsxs37("div", { className: "flex flex-col justify-center items-center", children: [
+  return /* @__PURE__ */ jsxs38("div", { className: "flex flex-col justify-center items-center", children: [
     /* @__PURE__ */ jsx48("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
-    /* @__PURE__ */ jsxs37("div", { className: "text-center my-5", children: [
+    /* @__PURE__ */ jsxs38("div", { className: "text-center my-5", children: [
       /* @__PURE__ */ jsx48("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
-      /* @__PURE__ */ jsxs37("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
+      /* @__PURE__ */ jsxs38("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
         "(",
         statusCode ? `${statusCode} - ` : null,
         statusText,
@@ -7357,7 +7375,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7367,7 +7385,7 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ jsxs38("div", { className: "w-full flex flex-row mx-2", children: [
+  return /* @__PURE__ */ jsxs39("div", { className: "w-full flex flex-row mx-2", children: [
     /* @__PURE__ */ jsx50("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx50("p", { children: title }) }),
     /* @__PURE__ */ jsx50("div", { className: "flex-1", children: /* @__PURE__ */ jsx50(
       InputGroup_default,
@@ -7386,7 +7404,7 @@ var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
 import { useEffect as useEffect18, useState as useState27 } from "react";
-import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7404,7 +7422,7 @@ var PageTravelGroup = ({
   useEffect18(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ jsxs39("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
+  return /* @__PURE__ */ jsxs40("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
     pageNumber === 0 ? null : /* @__PURE__ */ jsx51("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx51(
       BaseImage_default,
       {
@@ -7480,7 +7498,7 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
@@ -7502,7 +7520,7 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ jsxs40(
+      children: /* @__PURE__ */ jsxs41(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
@@ -7530,7 +7548,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7540,7 +7558,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx53("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsx53("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs42(
     "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`,
@@ -7585,7 +7603,7 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/Label.tsx
-import { jsx as jsx55, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
 var Label = ({
   title,
   icon,
@@ -7605,7 +7623,7 @@ var Label = ({
         background: backgroundColor,
         color: textColor
       },
-      children: /* @__PURE__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
+      children: /* @__PURE__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
         icon,
         /* @__PURE__ */ jsx55("p", { className: font, children: title })
       ] })
@@ -7785,10 +7803,10 @@ var GrayLabel = ({ title, icon, font }) => {
 var GrayLabel_default = GrayLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx66, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs44 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ jsxs43("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+  return /* @__PURE__ */ jsxs44("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
     /* @__PURE__ */ jsx66(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
     /* @__PURE__ */ jsx66("div", { className: "flex-1", children: /* @__PURE__ */ jsx66("p", { className: "", children: value }) })
   ] });
@@ -7796,17 +7814,17 @@ var InfoWithText = (props) => {
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/BaseTitle.tsx
-import { jsx as jsx67, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs45 } from "react/jsx-runtime";
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ jsxs44("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ jsxs45("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxs45("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ jsxs44("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__ */ jsxs45("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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/modals/BaseModal.tsx

@@ -1,5 +1,6 @@
 import Modal from "react-modal";
 import { IModalProps } from "../../properties/ModalProperties";
+import BaseImage from "../images/BaseImage";
 
 const BaseModal = ({
   isOpen,
@@ -49,6 +50,14 @@ const BaseModal = ({
               : "w-[600px] lg:w-[900px] xl:w-[1200px] 2xl:w-[1500px]"
           }`}
         >
+          <div className="flex flex-row justify-end px-2 py-2">
+            <BaseImage
+              src="/icons/cross-red.webp"
+              alt="cross-red"
+              size="medium"
+              onClick={onRequestClose}
+            />
+          </div>
           {children}
         </div>
       )}

package/src/utilization/StorageUtilization.ts

@@ -44,7 +44,14 @@ export const retrieveFileTypeFromExtension = (format: string) => {
 };
 
 export const retrieveFileTypeOptionList = (optionType: string) => {
-  if (optionType === "PDF_ONLY") {
+  if (optionType === "IMAGE_ONLY") {
+    return [
+      {
+        text: i18n.t("IMAGE"),
+        value: "IMAGE",
+      },
+    ];
+  } else if (optionType === "PDF_ONLY") {
     return [
       {
         text: i18n.t("PDF"),