catchup-library-web 1.2.11 → 1.2.13

package/dist/index.d.mts

@@ -66,6 +66,12 @@ interface IModalProps {
 
 declare const BaseModal: ({ isOpen, size, onAfterOpen, onRequestClose, customSize, children, }: IModalProps) => react_jsx_runtime.JSX.Element;
 
+interface IActivityBodyContentProps {
+    templateType: string;
+    bodyMap: any;
+    contentMap?: any;
+    answerMap?: any;
+}
 interface IOrderingActivityProps {
     answer: any;
     data: any;
@@ -161,6 +167,8 @@ interface IActivityPreviewByDataProps {
     isFullScreen: boolean;
 }
 
+declare const ActivityBodyContent: ({ templateType, bodyMap, contentMap, answerMap, }: IActivityBodyContentProps) => react_jsx_runtime.JSX.Element;
+
 declare const DropdownActivityContent: ({ answer, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IDropdownActivityProps) => react_jsx_runtime.JSX.Element;
 
 declare const FillInTheBlanksActivityContent: ({ answer, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IFillInTheBlanksActivityProps) => react_jsx_runtime.JSX.Element;
@@ -679,4 +687,4 @@ declare const retrieveTokenUsageSubTypeOptionList: () => {
     value: string;
 }[];
 
-export { ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BaseTitle, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SubTitle, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };
+export { ActivityBodyContent, ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BaseTitle, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SubTitle, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };

package/dist/index.d.ts

@@ -66,6 +66,12 @@ interface IModalProps {
 
 declare const BaseModal: ({ isOpen, size, onAfterOpen, onRequestClose, customSize, children, }: IModalProps) => react_jsx_runtime.JSX.Element;
 
+interface IActivityBodyContentProps {
+    templateType: string;
+    bodyMap: any;
+    contentMap?: any;
+    answerMap?: any;
+}
 interface IOrderingActivityProps {
     answer: any;
     data: any;
@@ -161,6 +167,8 @@ interface IActivityPreviewByDataProps {
     isFullScreen: boolean;
 }
 
+declare const ActivityBodyContent: ({ templateType, bodyMap, contentMap, answerMap, }: IActivityBodyContentProps) => react_jsx_runtime.JSX.Element;
+
 declare const DropdownActivityContent: ({ answer, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IDropdownActivityProps) => react_jsx_runtime.JSX.Element;
 
 declare const FillInTheBlanksActivityContent: ({ answer, data, canAnswerQuestion, changeAnswer, isPreview, showCorrectAnswer, isFullScreen, }: IFillInTheBlanksActivityProps) => react_jsx_runtime.JSX.Element;
@@ -679,4 +687,4 @@ declare const retrieveTokenUsageSubTypeOptionList: () => {
     value: string;
 }[];
 
-export { ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BaseTitle, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SubTitle, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };
+export { ActivityBodyContent, ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BaseTitle, BlueVerticalDividerLine, BrandLabel, CancelButton, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PersonalLabel, PrimaryButton, PublishingHouseLabel, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SubTitle, THREE_MONTHS, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateLevenshteinDistance, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructInputWithSpecialExpressionList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrentDefaultDataMap, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveMonthNameByIndex, retrieveOtherBadgeDTOList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTaxonomyGroupName, retrieveTaxonomyName, retrieveTaxonomyType, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };

package/dist/index.js

@@ -67,6 +67,7 @@ var __async = (__this, __arguments, generator) => {
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ActivityBodyContent: () => ActivityBodyContent_default,
   ActivityPreviewByData: () => ActivityPreviewByData_default,
   ActivitySolutionContent: () => ActivitySolutionContent_default,
   ActivityTemplateLabel: () => ActivityTemplateLabel_default,
@@ -331,6 +332,9 @@ var BaseImage = (props) => {
   } else if (size === "3xlarge") {
     currentWidthClassName = "w-16";
     currentHeightClassName = "h-16";
+  } else if (size === "4xlarge") {
+    currentWidthClassName = "w-20";
+    currentHeightClassName = "h-20";
   } else if (size === "custom") {
     currentClassName = className;
     currentWidthClassName = widthClassName;
@@ -966,6 +970,10 @@ var BaseModal = ({
 };
 var BaseModal_default = BaseModal;
 
+// src/components/activities/body-content/ShowBodyMediaByContentType.tsx
+var import_react9 = require("react");
+var import_react_modal2 = __toESM(require("react-modal"));
+
 // src/utilization/CatchtivityUtilization.ts
 var retrieveColorByScore = (score) => {
   if (score <= 25) {
@@ -2861,25 +2869,9 @@ var constructActivityItemListSolutionOnly = (solutionMap) => {
   return itemList;
 };
 
-// src/components/dividers/DividerLine.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var DividerLine = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime12 = require("react/jsx-runtime");
-var VerticalDividerLine = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
-};
-var VerticalDividerLine_default = VerticalDividerLine;
-
 // src/components/activities/body-content/ShowBodyMediaByContentType.tsx
-var import_react9 = require("react");
-var import_react_modal2 = __toESM(require("react-modal"));
 var import_react_katex = require("react-katex");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ShowBodyMediaByContentType = ({
   index,
   type,
@@ -2921,16 +2913,16 @@ var ShowBodyMediaByContentType = ({
           addition += 1;
         }
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "span",
             {
               className: "text-xl whitespace-pre-wrap",
               children: constructInputWithSpecialExpressionList(textValue).map(
-                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
                 )
@@ -2944,17 +2936,17 @@ var ShowBodyMediaByContentType = ({
       const secondIndex = subValue.indexOf(checkText) + checkText.length + textValue.length - addition;
       currentIndex++;
       valuePartList.push(
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "span",
           {
             className: `text-xl font-bold whitespace-pre-wrap`,
             children: constructInputWithSpecialExpressionList(
               copyValue.substring(firstIndex + checkText.length, secondIndex)
-            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            ).map((inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             ))
@@ -2974,7 +2966,7 @@ var ShowBodyMediaByContentType = ({
       if (textValue.trim() !== "") {
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xl", children: textValue }, `${index}_${currentIndex}`)
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xl", children: textValue }, `${index}_${currentIndex}`)
         );
       }
       const subValue = copyValue.substring(firstIndex + checkText.length);
@@ -2985,8 +2977,8 @@ var ShowBodyMediaByContentType = ({
       );
       currentIndex++;
       valuePartList.push(
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative w-[200px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative w-[200px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             BaseImage_default,
             {
               src: imageSource,
@@ -2995,7 +2987,7 @@ var ShowBodyMediaByContentType = ({
               className: "rounded-catchup-xlarge"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.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",
@@ -3003,7 +2995,7 @@ var ShowBodyMediaByContentType = ({
                 setShowFullScreen(true);
                 setSelectedFullScreenItem(imageSource);
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 BaseImage_default,
                 {
                   src: "/icons/arrow-up.png",
@@ -3025,7 +3017,7 @@ var ShowBodyMediaByContentType = ({
       if (textValue.trim() !== "") {
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
         );
       }
       const subValue = copyValue.substring(firstIndex + checkText.length);
@@ -3036,7 +3028,7 @@ var ShowBodyMediaByContentType = ({
       );
       currentIndex++;
       valuePartList.push(
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "video",
           {
             src: videoSource,
@@ -3054,7 +3046,7 @@ var ShowBodyMediaByContentType = ({
       if (textValue.trim() !== "") {
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
         );
       }
       const subValue = copyValue.substring(firstIndex + checkText.length);
@@ -3065,7 +3057,7 @@ var ShowBodyMediaByContentType = ({
       );
       currentIndex++;
       valuePartList.push(
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "audio",
           {
             src: audioSource,
@@ -3091,9 +3083,9 @@ var ShowBodyMediaByContentType = ({
       if (regexMatchImageText) {
         const imageText = regexMatchImageText[1];
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "span",
               {
                 className: "text-xl whitespace-pre-wrap ",
@@ -3105,16 +3097,16 @@ var ShowBodyMediaByContentType = ({
         );
       } else {
         valuePartList.push(
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "span",
             {
               className: "text-xl whitespace-pre-wrap",
               children: constructInputWithSpecialExpressionList(copyValue).map(
-                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                (inputPart, index2) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_katex.InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
                 )
@@ -3128,7 +3120,7 @@ var ShowBodyMediaByContentType = ({
     return valuePartList;
   };
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_react_modal2.default,
       {
         isOpen: showFullScreen,
@@ -3159,8 +3151,8 @@ var ShowBodyMediaByContentType = ({
           }
         },
         contentLabel: "",
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex-1 flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             BaseImage_default,
             {
               src: "/icons/cross-red.png",
@@ -3172,7 +3164,7 @@ var ShowBodyMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -3187,14 +3179,14 @@ var ShowBodyMediaByContentType = ({
   };
   const RenderMainContent = () => {
     if (type === "TEXT") {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: retrieveValueParts(value) }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: retrieveValueParts(value) }) });
     } else if (type === "IMAGE") {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
         {
           className: `${size ? `${convertToPercentage(size)}` : ""} rounded-catchup-xlarge relative`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               BaseImage_default,
               {
                 src: value,
@@ -3203,7 +3195,7 @@ var ShowBodyMediaByContentType = ({
                 className: "w-full rounded-catchup-xlarge"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.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",
@@ -3211,7 +3203,7 @@ var ShowBodyMediaByContentType = ({
                   setShowFullScreen(true);
                   setSelectedFullScreenItem(value);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   BaseImage_default,
                   {
                     src: "/icons/arrow-up.png",
@@ -3226,7 +3218,7 @@ var ShowBodyMediaByContentType = ({
         }
       ) });
     } else if (type === "VIDEO") {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "video",
         {
           src: value,
@@ -3235,10 +3227,10 @@ var ShowBodyMediaByContentType = ({
         }
       ) });
     } else if (type === "AUDIO") {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("audio", { src: value, controls: true, className: `rounded-catchup-xlarge` }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("audio", { src: value, controls: true, className: `rounded-catchup-xlarge` }) });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "w-full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full", children: [
     RenderShowFullScreenItem(),
     RenderMainContent()
   ] }, index);
@@ -3246,7 +3238,7 @@ var ShowBodyMediaByContentType = ({
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
 // src/components/activities/body-content/ActivityBodyContent.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var ActivityBodyContent = ({
   templateType,
   bodyMap,
@@ -3254,7 +3246,7 @@ var ActivityBodyContent = ({
   answerMap
 }) => {
   let currentQQIndex = 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col justify-center items-center", children: Object.keys(bodyMap).map((key, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-col justify-center items-center", children: Object.keys(bodyMap).map((key, index) => {
     const body = JSON.parse(bodyMap[key]);
     if (templateType === "DROPDOWN") {
       while (body.value.includes("@@")) {
@@ -3331,7 +3323,7 @@ var ActivityBodyContent = ({
         currentQQIndex++;
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ShowBodyMediaByContentType_default,
       {
         index,
@@ -3344,6 +3336,20 @@ var ActivityBodyContent = ({
 };
 var ActivityBodyContent_default = ActivityBodyContent;
 
+// src/components/dividers/DividerLine.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DividerLine = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime14 = require("react/jsx-runtime");
+var VerticalDividerLine = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
+};
+var VerticalDividerLine_default = VerticalDividerLine;
+
 // src/components/activities/material-content/DropdownActivityMaterialContent.tsx
 var import_react_katex2 = require("react-katex");
 
@@ -8841,6 +8847,7 @@ var retrieveTokenUsageSubTypeOptionList = () => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActivityBodyContent,
   ActivityPreviewByData,
   ActivitySolutionContent,
   ActivityTemplateLabel,

package/dist/index.mjs

@@ -147,6 +147,9 @@ var BaseImage = (props) => {
   } else if (size === "3xlarge") {
     currentWidthClassName = "w-16";
     currentHeightClassName = "h-16";
+  } else if (size === "4xlarge") {
+    currentWidthClassName = "w-20";
+    currentHeightClassName = "h-20";
   } else if (size === "custom") {
     currentClassName = className;
     currentWidthClassName = widthClassName;
@@ -782,6 +785,10 @@ var BaseModal = ({
 };
 var BaseModal_default = BaseModal;
 
+// src/components/activities/body-content/ShowBodyMediaByContentType.tsx
+import { useState as useState9 } from "react";
+import Modal2 from "react-modal";
+
 // src/utilization/CatchtivityUtilization.ts
 var retrieveColorByScore = (score) => {
   if (score <= 25) {
@@ -2677,25 +2684,9 @@ var constructActivityItemListSolutionOnly = (solutionMap) => {
   return itemList;
 };
 
-// src/components/dividers/DividerLine.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var DividerLine = () => {
-  return /* @__PURE__ */ jsx11("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
-};
-var DividerLine_default = DividerLine;
-
-// src/components/dividers/VerticalDividerLine.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var VerticalDividerLine = () => {
-  return /* @__PURE__ */ jsx12("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
-};
-var VerticalDividerLine_default = VerticalDividerLine;
-
 // src/components/activities/body-content/ShowBodyMediaByContentType.tsx
-import { useState as useState9 } from "react";
-import Modal2 from "react-modal";
 import { InlineMath } from "react-katex";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var ShowBodyMediaByContentType = ({
   index,
   type,
@@ -2737,16 +2728,16 @@ var ShowBodyMediaByContentType = ({
           addition += 1;
         }
         valuePartList.push(
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx11(
             "span",
             {
               className: "text-xl whitespace-pre-wrap",
               children: constructInputWithSpecialExpressionList(textValue).map(
-                (inputPart, index2) => /* @__PURE__ */ jsx13(
+                (inputPart, index2) => /* @__PURE__ */ jsx11(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx13("span", { className: "text-2xl", children: /* @__PURE__ */ jsx13(InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx11("span", { className: "text-2xl", children: /* @__PURE__ */ jsx11(InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
                 )
@@ -2760,17 +2751,17 @@ var ShowBodyMediaByContentType = ({
       const secondIndex = subValue.indexOf(checkText) + checkText.length + textValue.length - addition;
       currentIndex++;
       valuePartList.push(
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx11(
           "span",
           {
             className: `text-xl font-bold whitespace-pre-wrap`,
             children: constructInputWithSpecialExpressionList(
               copyValue.substring(firstIndex + checkText.length, secondIndex)
-            ).map((inputPart, index2) => /* @__PURE__ */ jsx13(
+            ).map((inputPart, index2) => /* @__PURE__ */ jsx11(
               "span",
               {
                 className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                children: inputPart.isEquation ? /* @__PURE__ */ jsx13("span", { className: "text-2xl", children: /* @__PURE__ */ jsx13(InlineMath, { math: inputPart.value }) }) : inputPart.value
+                children: inputPart.isEquation ? /* @__PURE__ */ jsx11("span", { className: "text-2xl", children: /* @__PURE__ */ jsx11(InlineMath, { math: inputPart.value }) }) : inputPart.value
               },
               index2
             ))
@@ -2790,7 +2781,7 @@ var ShowBodyMediaByContentType = ({
       if (textValue.trim() !== "") {
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx13("p", { className: "text-xl", children: textValue }, `${index}_${currentIndex}`)
+          /* @__PURE__ */ jsx11("p", { className: "text-xl", children: textValue }, `${index}_${currentIndex}`)
         );
       }
       const subValue = copyValue.substring(firstIndex + checkText.length);
@@ -2802,7 +2793,7 @@ var ShowBodyMediaByContentType = ({
       currentIndex++;
       valuePartList.push(
         /* @__PURE__ */ jsxs8("div", { className: "relative w-[200px]", children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx11(
             BaseImage_default,
             {
               src: imageSource,
@@ -2811,7 +2802,7 @@ var ShowBodyMediaByContentType = ({
               className: "rounded-catchup-xlarge"
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx11(
             "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",
@@ -2819,7 +2810,7 @@ var ShowBodyMediaByContentType = ({
                 setShowFullScreen(true);
                 setSelectedFullScreenItem(imageSource);
               },
-              children: /* @__PURE__ */ jsx13(
+              children: /* @__PURE__ */ jsx11(
                 BaseImage_default,
                 {
                   src: "/icons/arrow-up.png",
@@ -2841,7 +2832,7 @@ var ShowBodyMediaByContentType = ({
       if (textValue.trim() !== "") {
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx13("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
+          /* @__PURE__ */ jsx11("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
         );
       }
       const subValue = copyValue.substring(firstIndex + checkText.length);
@@ -2852,7 +2843,7 @@ var ShowBodyMediaByContentType = ({
       );
       currentIndex++;
       valuePartList.push(
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx11(
           "video",
           {
             src: videoSource,
@@ -2870,7 +2861,7 @@ var ShowBodyMediaByContentType = ({
       if (textValue.trim() !== "") {
         currentIndex++;
         valuePartList.push(
-          /* @__PURE__ */ jsx13("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
+          /* @__PURE__ */ jsx11("p", { className: "text-xl", children: textValue }, `${index}-${currentIndex}`)
         );
       }
       const subValue = copyValue.substring(firstIndex + checkText.length);
@@ -2881,7 +2872,7 @@ var ShowBodyMediaByContentType = ({
       );
       currentIndex++;
       valuePartList.push(
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx11(
           "audio",
           {
             src: audioSource,
@@ -2908,8 +2899,8 @@ var ShowBodyMediaByContentType = ({
         const imageText = regexMatchImageText[1];
         valuePartList.push(
           /* @__PURE__ */ jsxs8("div", { className: "bg-catchup-gray-50 relative px-4 py-4 rounded-catchup-small mt-2", children: [
-            /* @__PURE__ */ jsx13("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx13("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx11("div", { className: "absolute -top-3 bg-catchup-white border rounded-catchup-small px-2 left-2", children: /* @__PURE__ */ jsx11("p", { className: "font-bold", children: i18n_default.t("image_description") }) }),
+            /* @__PURE__ */ jsx11(
               "span",
               {
                 className: "text-xl whitespace-pre-wrap ",
@@ -2921,16 +2912,16 @@ var ShowBodyMediaByContentType = ({
         );
       } else {
         valuePartList.push(
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx11(
             "span",
             {
               className: "text-xl whitespace-pre-wrap",
               children: constructInputWithSpecialExpressionList(copyValue).map(
-                (inputPart, index2) => /* @__PURE__ */ jsx13(
+                (inputPart, index2) => /* @__PURE__ */ jsx11(
                   "span",
                   {
                     className: `${inputPart.isBold ? "font-bold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-                    children: inputPart.isEquation ? /* @__PURE__ */ jsx13("span", { className: "text-2xl", children: /* @__PURE__ */ jsx13(InlineMath, { math: inputPart.value }) }) : inputPart.value
+                    children: inputPart.isEquation ? /* @__PURE__ */ jsx11("span", { className: "text-2xl", children: /* @__PURE__ */ jsx11(InlineMath, { math: inputPart.value }) }) : inputPart.value
                   },
                   index2
                 )
@@ -2944,7 +2935,7 @@ var ShowBodyMediaByContentType = ({
     return valuePartList;
   };
   const RenderShowFullScreenItem = () => {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx11(
       Modal2,
       {
         isOpen: showFullScreen,
@@ -2976,7 +2967,7 @@ var ShowBodyMediaByContentType = ({
         },
         contentLabel: "",
         children: /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex flex-col", children: [
-          /* @__PURE__ */ jsx13("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx11("div", { className: "ml-auto px-5 py-3", children: /* @__PURE__ */ jsx11(
             BaseImage_default,
             {
               src: "/icons/cross-red.png",
@@ -2988,7 +2979,7 @@ var ShowBodyMediaByContentType = ({
               }
             }
           ) }),
-          /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx11("div", { className: "flex items-center justify-center h-[500]", children: /* @__PURE__ */ jsx11(
             BaseImage_default,
             {
               src: selectedFullScreenItem,
@@ -3003,14 +2994,14 @@ var ShowBodyMediaByContentType = ({
   };
   const RenderMainContent = () => {
     if (type === "TEXT") {
-      return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx13("span", { children: retrieveValueParts(value) }) });
+      return /* @__PURE__ */ jsx11("div", { className: "mb-3 flex flex-row flex-wrap items-center mx-auto w-full", children: /* @__PURE__ */ jsx11("span", { children: retrieveValueParts(value) }) });
     } else if (type === "IMAGE") {
-      return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs8(
+      return /* @__PURE__ */ jsx11("div", { className: "mb-3 flex flex-col items-center relative", children: /* @__PURE__ */ jsxs8(
         "div",
         {
           className: `${size ? `${convertToPercentage(size)}` : ""} rounded-catchup-xlarge relative`,
           children: [
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx11(
               BaseImage_default,
               {
                 src: value,
@@ -3019,7 +3010,7 @@ var ShowBodyMediaByContentType = ({
                 className: "w-full rounded-catchup-xlarge"
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx11(
               "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",
@@ -3027,7 +3018,7 @@ var ShowBodyMediaByContentType = ({
                   setShowFullScreen(true);
                   setSelectedFullScreenItem(value);
                 },
-                children: /* @__PURE__ */ jsx13(
+                children: /* @__PURE__ */ jsx11(
                   BaseImage_default,
                   {
                     src: "/icons/arrow-up.png",
@@ -3042,7 +3033,7 @@ var ShowBodyMediaByContentType = ({
         }
       ) });
     } else if (type === "VIDEO") {
-      return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx11("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx11(
         "video",
         {
           src: value,
@@ -3051,7 +3042,7 @@ var ShowBodyMediaByContentType = ({
         }
       ) });
     } else if (type === "AUDIO") {
-      return /* @__PURE__ */ jsx13("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx13("audio", { src: value, controls: true, className: `rounded-catchup-xlarge` }) });
+      return /* @__PURE__ */ jsx11("div", { className: "mb-3 flex flex-col items-center", children: /* @__PURE__ */ jsx11("audio", { src: value, controls: true, className: `rounded-catchup-xlarge` }) });
     }
   };
   return /* @__PURE__ */ jsxs8("div", { className: "w-full", children: [
@@ -3062,7 +3053,7 @@ var ShowBodyMediaByContentType = ({
 var ShowBodyMediaByContentType_default = ShowBodyMediaByContentType;
 
 // src/components/activities/body-content/ActivityBodyContent.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var ActivityBodyContent = ({
   templateType,
   bodyMap,
@@ -3070,7 +3061,7 @@ var ActivityBodyContent = ({
   answerMap
 }) => {
   let currentQQIndex = 0;
-  return /* @__PURE__ */ jsx14("div", { className: "flex flex-col justify-center items-center", children: Object.keys(bodyMap).map((key, index) => {
+  return /* @__PURE__ */ jsx12("div", { className: "flex flex-col justify-center items-center", children: Object.keys(bodyMap).map((key, index) => {
     const body = JSON.parse(bodyMap[key]);
     if (templateType === "DROPDOWN") {
       while (body.value.includes("@@")) {
@@ -3147,7 +3138,7 @@ var ActivityBodyContent = ({
         currentQQIndex++;
       }
     }
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx12(
       ShowBodyMediaByContentType_default,
       {
         index,
@@ -3160,6 +3151,20 @@ var ActivityBodyContent = ({
 };
 var ActivityBodyContent_default = ActivityBodyContent;
 
+// src/components/dividers/DividerLine.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var DividerLine = () => {
+  return /* @__PURE__ */ jsx13("div", { className: "bg-catchup-gray-50 h-[1px] w-full my-3" });
+};
+var DividerLine_default = DividerLine;
+
+// src/components/dividers/VerticalDividerLine.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var VerticalDividerLine = () => {
+  return /* @__PURE__ */ jsx14("div", { className: "bg-catchup-gray-50 h-full w-[1px] mx-3" });
+};
+var VerticalDividerLine_default = VerticalDividerLine;
+
 // src/components/activities/material-content/DropdownActivityMaterialContent.tsx
 import { InlineMath as InlineMath2 } from "react-katex";
 
@@ -8656,6 +8661,7 @@ var retrieveTokenUsageSubTypeOptionList = () => {
   ];
 };
 export {
+  ActivityBodyContent_default as ActivityBodyContent,
   ActivityPreviewByData_default as ActivityPreviewByData,
   ActivitySolutionContent_default as ActivitySolutionContent,
   ActivityTemplateLabel_default as ActivityTemplateLabel,

package/package.json

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

package/src/components/images/BaseImage.tsx

@@ -60,6 +60,9 @@ const BaseImage = (props: IBaseImageProps) => {
   } else if (size === "3xlarge") {
     currentWidthClassName = "w-16";
     currentHeightClassName = "h-16";
+  } else if (size === "4xlarge") {
+    currentWidthClassName = "w-20";
+    currentHeightClassName = "h-20";
   } else if (size === "custom") {
     currentClassName = className;
     currentWidthClassName = widthClassName;

package/src/index.ts

@@ -12,6 +12,7 @@ export { default as BaseLoadingWithText } from "./components/loading/BaseLoading
 
 export { default as BaseModal } from "./components/modals/BaseModal";
 
+export { default as ActivityBodyContent } from "./components/activities/body-content/ActivityBodyContent";
 export { default as DropdownActivityContent } from "./components/activities/DropdownActivityContent";
 export { default as FillInTheBlanksActivityContent } from "./components/activities/FillInTheBlanksActivityContent";
 export { default as GroupingActivityContent } from "./components/activities/GroupingActivityContent";