catchup-library-web 2.4.6 → 2.4.8

package/dist/index.js

@@ -1223,8 +1223,15 @@ var BaseTitle = ({
 };
 var BaseTitle_default = BaseTitle;
 
-// src/components/modals/BaseModal.tsx
+// src/components/dividers/DividerLine.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var DividerLine = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
+};
+var DividerLine_default = DividerLine;
+
+// src/components/modals/BaseModal.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var BaseModal = ({
   title,
   isOpen,
@@ -1234,7 +1241,7 @@ var BaseModal = ({
   customSize,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_react_modal.default,
     {
       isOpen,
@@ -1262,20 +1269,20 @@ var BaseModal = ({
         }
       },
       contentLabel: "",
-      children: customSize ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      children: customSize ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "div",
         {
           className: `${customSize} font-quicksand max-h-[calc(98vh-48px)] overflow-auto`,
           children
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "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__ */ (0, import_jsx_runtime16.jsxs)(FullCard_default, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-row justify-between px-4 py-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BaseTitle_default, { title }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(FullCard_default, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-row justify-between", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BaseTitle_default, { title }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/cross-red.webp",
@@ -1285,7 +1292,8 @@ var BaseModal = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "max-h-[calc(98vh-80px)] overflow-auto", children })
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DividerLine_default, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "max-h-[calc(98vh-80px)] overflow-auto", children })
           ] })
         }
       )
@@ -1297,7 +1305,7 @@ var BaseModal_default = BaseModal;
 // src/components/pdfs/BasePDF.tsx
 var import_react10 = require("react");
 var import_react_pdf = require("react-pdf");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var BasePDF = ({ file }) => {
   const [pageNumber, setPageNumber] = (0, import_react10.useState)(1);
   const [numberOfPages, setNumberOfPages] = (0, import_react10.useState)(0);
@@ -1305,10 +1313,10 @@ var BasePDF = ({ file }) => {
     setPageNumber(1);
     setNumberOfPages(numPages);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_pdf.Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_pdf.Page, { pageNumber }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-row items-center justify-center", children: [
-      pageNumber === 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_pdf.Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_pdf.Page, { pageNumber }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-row items-center justify-center", children: [
+      pageNumber === 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         BaseImage_default,
         {
           alt: "arrow-left",
@@ -1319,7 +1327,7 @@ var BasePDF = ({ file }) => {
           }
         }
       ) }) }),
-      Array.from(Array(numberOfPages).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Array.from(Array(numberOfPages).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "p",
         {
           className: `${pageNumber === index + 1 ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -1329,7 +1337,7 @@ var BasePDF = ({ file }) => {
           children: index + 1
         }
       ) }, index)),
-      numberOfPages === 0 || pageNumber === numberOfPages ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      numberOfPages === 0 || pageNumber === numberOfPages ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         BaseImage_default,
         {
           src: "/icons/arrow-right.webp",
@@ -1346,9 +1354,9 @@ var BasePDF = ({ file }) => {
 var BasePDF_default = BasePDF;
 
 // src/components/activities/empty-contents/ActivityEmptyContent.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var ActivityEmptyContent = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 mb-2 bg-catchup-orange text-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-lg", children: i18n_default.t("you_have_set_this_activity_as_empty") }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 mb-2 bg-catchup-orange text-catchup-white", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-lg", children: i18n_default.t("you_have_set_this_activity_as_empty") }) });
 };
 var ActivityEmptyContent_default = ActivityEmptyContent;
 
@@ -3372,7 +3380,7 @@ var retrieveActivityCountOptionList = () => {
 
 // src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
 var import_react_katex = require("react-katex");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ShowBodyMediaByContentType = ({
   index,
   type,
@@ -3394,17 +3402,17 @@ var ShowBodyMediaByContentType = ({
     }
   };
   const renderSpecialExpressions = (inputPart, inputPartIndex) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "span",
       {
         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
+        children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xl", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
       },
       inputPartIndex
     );
   };
   const renderTextContent = (text, itemKey) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(text).map(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(text).map(
       (inputPart, inputPartIndex) => renderSpecialExpressions(inputPart, inputPartIndex)
     ) }, itemKey);
   };
@@ -3436,7 +3444,7 @@ var ShowBodyMediaByContentType = ({
         currentIndex++;
         const itemKey = `text-inside-${index}-${currentIndex}`;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
             (inputPart, inputPartIndex) => renderSpecialExpressions(inputPart, inputPartIndex)
           ) }, itemKey)
         );
@@ -3453,7 +3461,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3472,12 +3480,12 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "div",
             {
               className: "relative w-[200px]",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   BaseImage_default,
                   {
                     src: imageSource,
@@ -3486,12 +3494,12 @@ var ShowBodyMediaByContentType = ({
                     className: "rounded-catchup-xlarge"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "div",
                   {
                     className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
                     onClick: () => handleOpenFullScreen(imageSource),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       BaseImage_default,
                       {
                         src: "/icons/arrow-up.webp",
@@ -3520,7 +3528,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3539,7 +3547,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "video",
             {
               src: videoSource,
@@ -3562,7 +3570,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "p",
               {
                 className: "text-xl",
@@ -3581,7 +3589,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "audio",
             {
               src: audioSource,
@@ -3606,13 +3614,13 @@ var ShowBodyMediaByContentType = ({
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "div",
             {
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-xl", children: imageText })
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-xl", children: imageText })
               ]
             },
             `img-desc-${index}-${currentIndex}`
@@ -3626,7 +3634,7 @@ var ShowBodyMediaByContentType = ({
     return valuePartList;
   };
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_react_modal2.default,
       {
         isOpen: showFullScreen,
@@ -3655,8 +3663,8 @@ var ShowBodyMediaByContentType = ({
           }
         },
         contentLabel: "Image Fullscreen View",
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -3668,7 +3676,7 @@ var ShowBodyMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -3684,16 +3692,16 @@ var ShowBodyMediaByContentType = ({
   const RenderMainContent = () => {
     switch (type) {
       case "TEXT":
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
             className: `${convertToPercentage(
               size
             )} rounded-catchup-xlarge relative`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 BaseImage_default,
                 {
                   src: value,
@@ -3702,12 +3710,12 @@ var ShowBodyMediaByContentType = ({
                   className: "w-full rounded-catchup-xlarge"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "div",
                 {
                   className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
                   onClick: () => handleOpenFullScreen(value),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                     BaseImage_default,
                     {
                       src: "/icons/arrow-up.webp",
@@ -3722,7 +3730,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "VIDEO":
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "video",
           {
             src: value,
@@ -3731,12 +3739,12 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "AUDIO":
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
       default:
         return null;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "w-full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full", children: [
     RenderShowFullScreenItem(),
     RenderMainContent()
   ] }, `body-content-${index}`);
@@ -3744,7 +3752,7 @@ var ShowBodyMediaByContentType = ({
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
 // src/components/activities/body-contents/ActivityBodyContent.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ActivityBodyContent = ({
   templateType,
   bodyMap,
@@ -3825,7 +3833,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -3838,13 +3846,6 @@ var ActivityBodyContent = ({
 };
 var ActivityBodyContent_default = ActivityBodyContent;
 
-// src/components/dividers/DividerLine.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var DividerLine = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
-};
-var DividerLine_default = DividerLine;
-
 // src/components/dividers/VerticalDividerLine.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var VerticalDividerLine = () => {

package/dist/index.mjs

@@ -990,8 +990,15 @@ var BaseTitle = ({
 };
 var BaseTitle_default = BaseTitle;
 
+// src/components/dividers/DividerLine.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var DividerLine = () => {
+  return /* @__PURE__ */ jsx16("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
+};
+var DividerLine_default = DividerLine;
+
 // src/components/modals/BaseModal.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var BaseModal = ({
   title,
   isOpen,
@@ -1001,7 +1008,7 @@ var BaseModal = ({
   customSize,
   children
 }) => {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Modal,
     {
       isOpen,
@@ -1029,20 +1036,20 @@ var BaseModal = ({
         }
       },
       contentLabel: "",
-      children: customSize ? /* @__PURE__ */ jsx16(
+      children: customSize ? /* @__PURE__ */ jsx17(
         "div",
         {
           className: `${customSize} font-quicksand max-h-[calc(98vh-48px)] overflow-auto`,
           children
         }
-      ) : /* @__PURE__ */ jsx16(
+      ) : /* @__PURE__ */ jsx17(
         "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 px-4 py-2", children: [
-              /* @__PURE__ */ jsx16(BaseTitle_default, { title }),
-              /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsxs11("div", { className: "flex flex-row justify-between", children: [
+              /* @__PURE__ */ jsx17(BaseTitle_default, { title }),
+              /* @__PURE__ */ jsx17(
                 BaseImage_default,
                 {
                   src: "/icons/cross-red.webp",
@@ -1052,7 +1059,8 @@ var BaseModal = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx16("div", { className: "max-h-[calc(98vh-80px)] overflow-auto", children })
+            /* @__PURE__ */ jsx17(DividerLine_default, {}),
+            /* @__PURE__ */ jsx17("div", { className: "max-h-[calc(98vh-80px)] overflow-auto", children })
           ] })
         }
       )
@@ -1064,7 +1072,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 jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var BasePDF = ({ file }) => {
   const [pageNumber, setPageNumber] = useState10(1);
   const [numberOfPages, setNumberOfPages] = useState10(0);
@@ -1073,9 +1081,9 @@ var BasePDF = ({ file }) => {
     setNumberOfPages(numPages);
   };
   return /* @__PURE__ */ jsxs12(Document, { file, onLoadSuccess: handleOnDocumentLoadSuccess, children: [
-    /* @__PURE__ */ jsx17(Page, { pageNumber }),
+    /* @__PURE__ */ jsx18(Page, { pageNumber }),
     /* @__PURE__ */ jsxs12("div", { className: "flex flex-row items-center justify-center", children: [
-      pageNumber === 1 ? null : /* @__PURE__ */ jsx17("div", { className: "px-2", children: /* @__PURE__ */ jsx17("div", { className: "cursor-pointer", children: /* @__PURE__ */ jsx17(
+      pageNumber === 1 ? null : /* @__PURE__ */ jsx18("div", { className: "px-2", children: /* @__PURE__ */ jsx18("div", { className: "cursor-pointer", children: /* @__PURE__ */ jsx18(
         BaseImage_default,
         {
           alt: "arrow-left",
@@ -1086,7 +1094,7 @@ var BasePDF = ({ file }) => {
           }
         }
       ) }) }),
-      Array.from(Array(numberOfPages).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx17("div", { className: "px-2", children: /* @__PURE__ */ jsx17(
+      Array.from(Array(numberOfPages).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx18("div", { className: "px-2", children: /* @__PURE__ */ jsx18(
         "p",
         {
           className: `${pageNumber === index + 1 ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -1096,7 +1104,7 @@ var BasePDF = ({ file }) => {
           children: index + 1
         }
       ) }, index)),
-      numberOfPages === 0 || pageNumber === numberOfPages ? null : /* @__PURE__ */ jsx17("div", { className: "px-2", children: /* @__PURE__ */ jsx17("div", { className: "cursor-pointer", children: /* @__PURE__ */ jsx17(
+      numberOfPages === 0 || pageNumber === numberOfPages ? null : /* @__PURE__ */ jsx18("div", { className: "px-2", children: /* @__PURE__ */ jsx18("div", { className: "cursor-pointer", children: /* @__PURE__ */ jsx18(
         BaseImage_default,
         {
           src: "/icons/arrow-right.webp",
@@ -1113,9 +1121,9 @@ var BasePDF = ({ file }) => {
 var BasePDF_default = BasePDF;
 
 // src/components/activities/empty-contents/ActivityEmptyContent.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var ActivityEmptyContent = () => {
-  return /* @__PURE__ */ jsx18("div", { className: "flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 mb-2 bg-catchup-orange text-catchup-white", children: /* @__PURE__ */ jsx18("p", { className: "text-lg", children: i18n_default.t("you_have_set_this_activity_as_empty") }) });
+  return /* @__PURE__ */ jsx19("div", { className: "flex flex-col items-center justify-center border-2 border-catchup-orange rounded-catchup-xlarge px-5 py-2 mb-2 bg-catchup-orange text-catchup-white", children: /* @__PURE__ */ jsx19("p", { className: "text-lg", children: i18n_default.t("you_have_set_this_activity_as_empty") }) });
 };
 var ActivityEmptyContent_default = ActivityEmptyContent;
 
@@ -3139,7 +3147,7 @@ var retrieveActivityCountOptionList = () => {
 
 // src/components/activities/body-contents/ShowBodyMediaByContentType.tsx
 import { InlineMath } from "react-katex";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var ShowBodyMediaByContentType = ({
   index,
   type,
@@ -3161,17 +3169,17 @@ var ShowBodyMediaByContentType = ({
     }
   };
   const renderSpecialExpressions = (inputPart, inputPartIndex) => {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       "span",
       {
         className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-        children: inputPart.isEquation ? /* @__PURE__ */ jsx19("span", { className: "text-xl", children: /* @__PURE__ */ jsx19(InlineMath, { math: inputPart.value }) }) : inputPart.value
+        children: inputPart.isEquation ? /* @__PURE__ */ jsx20("span", { className: "text-xl", children: /* @__PURE__ */ jsx20(InlineMath, { math: inputPart.value }) }) : inputPart.value
       },
       inputPartIndex
     );
   };
   const renderTextContent = (text, itemKey) => {
-    return /* @__PURE__ */ jsx19("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(text).map(
+    return /* @__PURE__ */ jsx20("span", { className: "text-xl", children: constructInputWithSpecialExpressionList(text).map(
       (inputPart, inputPartIndex) => renderSpecialExpressions(inputPart, inputPartIndex)
     ) }, itemKey);
   };
@@ -3203,7 +3211,7 @@ var ShowBodyMediaByContentType = ({
         currentIndex++;
         const itemKey = `text-inside-${index}-${currentIndex}`;
         valuePartList.push(
-          /* @__PURE__ */ jsx19("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
+          /* @__PURE__ */ jsx20("span", { className: "text-xl font-bold", children: constructInputWithSpecialExpressionList(textInsideTag).map(
             (inputPart, inputPartIndex) => renderSpecialExpressions(inputPart, inputPartIndex)
           ) }, itemKey)
         );
@@ -3220,7 +3228,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20(
               "p",
               {
                 className: "text-xl",
@@ -3244,7 +3252,7 @@ var ShowBodyMediaByContentType = ({
             {
               className: "relative w-[200px]",
               children: [
-                /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx20(
                   BaseImage_default,
                   {
                     src: imageSource,
@@ -3253,12 +3261,12 @@ var ShowBodyMediaByContentType = ({
                     className: "rounded-catchup-xlarge"
                   }
                 ),
-                /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx20(
                   "div",
                   {
                     className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
                     onClick: () => handleOpenFullScreen(imageSource),
-                    children: /* @__PURE__ */ jsx19(
+                    children: /* @__PURE__ */ jsx20(
                       BaseImage_default,
                       {
                         src: "/icons/arrow-up.webp",
@@ -3287,7 +3295,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20(
               "p",
               {
                 className: "text-xl",
@@ -3306,7 +3314,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             "video",
             {
               src: videoSource,
@@ -3329,7 +3337,7 @@ var ShowBodyMediaByContentType = ({
         if (textBeforeTag.trim() !== "") {
           currentIndex++;
           valuePartList.push(
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20(
               "p",
               {
                 className: "text-xl",
@@ -3348,7 +3356,7 @@ var ShowBodyMediaByContentType = ({
         );
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             "audio",
             {
               src: audioSource,
@@ -3378,8 +3386,8 @@ var ShowBodyMediaByContentType = ({
             {
               className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2",
               children: [
-                /* @__PURE__ */ jsx19("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx19("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-                /* @__PURE__ */ jsx19("span", { className: "text-xl", children: imageText })
+                /* @__PURE__ */ jsx20("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx20("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+                /* @__PURE__ */ jsx20("span", { className: "text-xl", children: imageText })
               ]
             },
             `img-desc-${index}-${currentIndex}`
@@ -3393,7 +3401,7 @@ var ShowBodyMediaByContentType = ({
     return valuePartList;
   };
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       Modal2,
       {
         isOpen: showFullScreen,
@@ -3423,7 +3431,7 @@ var ShowBodyMediaByContentType = ({
         },
         contentLabel: "Image Fullscreen View",
         children: /* @__PURE__ */ jsxs13("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ jsx19("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx20(
             BaseImage_default,
             {
               src: "/icons/cross-red.webp",
@@ -3435,7 +3443,7 @@ var ShowBodyMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx20(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -3451,16 +3459,16 @@ var ShowBodyMediaByContentType = ({
   const RenderMainContent = () => {
     switch (type) {
       case "TEXT":
-        return /* @__PURE__ */ jsx19("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx19("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
+        return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx20("p", { className: "whitespace-pre-wrap", children: retrieveValueParts(value) }) });
       case "IMAGE":
-        return /* @__PURE__ */ jsx19("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs13(
+        return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs13(
           "div",
           {
             className: `${convertToPercentage(
               size
             )} rounded-catchup-xlarge relative`,
             children: [
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx20(
                 BaseImage_default,
                 {
                   src: value,
@@ -3469,12 +3477,12 @@ var ShowBodyMediaByContentType = ({
                   className: "w-full rounded-catchup-xlarge"
                 }
               ),
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx20(
                 "div",
                 {
                   className: "absolute flex items-center justify-center top-2 right-2 h-6 w-6 cursor-pointer border rounded-catchup-xlarge border-catchup-blue p-1",
                   onClick: () => handleOpenFullScreen(value),
-                  children: /* @__PURE__ */ jsx19(
+                  children: /* @__PURE__ */ jsx20(
                     BaseImage_default,
                     {
                       src: "/icons/arrow-up.webp",
@@ -3489,7 +3497,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "VIDEO":
-        return /* @__PURE__ */ jsx19("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx20(
           "video",
           {
             src: value,
@@ -3498,7 +3506,7 @@ var ShowBodyMediaByContentType = ({
           }
         ) });
       case "AUDIO":
-        return /* @__PURE__ */ jsx19("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx19("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
+        return /* @__PURE__ */ jsx20("div", { className: "mb-1 flex flex-col items-center", children: /* @__PURE__ */ jsx20("audio", { src: value, controls: true, className: "rounded-catchup-xlarge" }) });
       default:
         return null;
     }
@@ -3511,7 +3519,7 @@ var ShowBodyMediaByContentType = ({
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
 // src/components/activities/body-contents/ActivityBodyContent.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ActivityBodyContent = ({
   templateType,
   bodyMap,
@@ -3592,7 +3600,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ jsx20("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21("div", { className: "flex flex-col justify-center items-center", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx21(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -3605,13 +3613,6 @@ var ActivityBodyContent = ({
 };
 var ActivityBodyContent_default = ActivityBodyContent;
 
-// src/components/dividers/DividerLine.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var DividerLine = () => {
-  return /* @__PURE__ */ jsx21("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
-};
-var DividerLine_default = DividerLine;
-
 // src/components/dividers/VerticalDividerLine.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
 var VerticalDividerLine = () => {

package/package.json

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

package/src/components/modals/BaseModal.tsx

@@ -3,6 +3,7 @@ import { IModalProps } from "../../properties/ModalProperties";
 import BaseImage from "../images/BaseImage";
 import FullCard from "../cards/FullCard";
 import BaseTitle from "../titles/BaseTitle";
+import DividerLine from "../dividers/DividerLine";
 
 const BaseModal = ({
   title,
@@ -58,7 +59,7 @@ const BaseModal = ({
           }`}
         >
           <FullCard>
-            <div className="flex flex-row justify-between px-4 py-2">
+            <div className="flex flex-row justify-between">
               <BaseTitle title={title} />
               <BaseImage
                 src="/icons/cross-red.webp"
@@ -67,6 +68,7 @@ const BaseModal = ({
                 onClick={onRequestClose}
               />
             </div>
+            <DividerLine />
             <div className="max-h-[calc(98vh-80px)] overflow-auto">
               {children}
             </div>