catchup-library-web 1.16.13 → 1.17.1

package/dist/index.d.mts

@@ -265,6 +265,14 @@ declare const ActivityPreviewByData: ({ data, showType, showDescription, lockedT
 
 declare const ActivityPreviewByAnswerData: ({ data, showType, showDescription, lockedType, typeOptionList, showSolution, showEvaluationRubric, showDifficulty, isFullScreen, showCorrectAnswer, }: IActivityPreviewByAnswerDataProps) => react_jsx_runtime.JSX.Element | null;
 
+interface IErrorProperties {
+    statusCode?: string;
+    statusText?: string;
+    textSize?: string;
+}
+
+declare const Error: ({ statusCode, statusText, textSize }: IErrorProperties) => react_jsx_runtime.JSX.Element;
+
 interface IDividerLineProps {
     opacity: string;
 }
@@ -859,4 +867,4 @@ declare const retrieveActivityMethodologyOptionList: () => {
     text: string;
 }[];
 
-export { ActivityBodyContent, ActivityEmptyContent, ActivityEvaluationRubricContent, ActivityLabel, ActivityPreviewByAnswerData, ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueVerticalDividerLine, BrandLabel, CancelButton, CategoryLabel, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, FullCard, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PageTravelGroup, PersonalLabel, PrimaryButton, ProgressBar, PublishingHouseLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SubTitle, THREE_MONTHS, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, adjustForTimezone, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCatchxamReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityMethodologyOptionList, 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, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveLastNOptionList, retrieveMonthNameByIndex, retrieveOpticalExamPartTypeOptionList, retrieveOpticalExamTypeOptionList, retrieveOtherBadgeDTOList, retrieveOutcomePlanTypeOptionList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTeachingMethodologyOptionList, retrieveTimeFilterOptionList, retrieveTimeFilterWithLastNOptionList, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };
+export { ActivityBodyContent, ActivityEmptyContent, ActivityEvaluationRubricContent, ActivityLabel, ActivityPreviewByAnswerData, ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueVerticalDividerLine, BrandLabel, CancelButton, CategoryLabel, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, Error, FillInTheBlanksActivityContent, FullCard, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PageTravelGroup, PersonalLabel, PrimaryButton, ProgressBar, PublishingHouseLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SubTitle, THREE_MONTHS, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, adjustForTimezone, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCatchxamReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityMethodologyOptionList, 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, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveLastNOptionList, retrieveMonthNameByIndex, retrieveOpticalExamPartTypeOptionList, retrieveOpticalExamTypeOptionList, retrieveOtherBadgeDTOList, retrieveOutcomePlanTypeOptionList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTeachingMethodologyOptionList, retrieveTimeFilterOptionList, retrieveTimeFilterWithLastNOptionList, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };

package/dist/index.d.ts

@@ -265,6 +265,14 @@ declare const ActivityPreviewByData: ({ data, showType, showDescription, lockedT
 
 declare const ActivityPreviewByAnswerData: ({ data, showType, showDescription, lockedType, typeOptionList, showSolution, showEvaluationRubric, showDifficulty, isFullScreen, showCorrectAnswer, }: IActivityPreviewByAnswerDataProps) => react_jsx_runtime.JSX.Element | null;
 
+interface IErrorProperties {
+    statusCode?: string;
+    statusText?: string;
+    textSize?: string;
+}
+
+declare const Error: ({ statusCode, statusText, textSize }: IErrorProperties) => react_jsx_runtime.JSX.Element;
+
 interface IDividerLineProps {
     opacity: string;
 }
@@ -859,4 +867,4 @@ declare const retrieveActivityMethodologyOptionList: () => {
     text: string;
 }[];
 
-export { ActivityBodyContent, ActivityEmptyContent, ActivityEvaluationRubricContent, ActivityLabel, ActivityPreviewByAnswerData, ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueVerticalDividerLine, BrandLabel, CancelButton, CategoryLabel, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, FullCard, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PageTravelGroup, PersonalLabel, PrimaryButton, ProgressBar, PublishingHouseLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SubTitle, THREE_MONTHS, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, adjustForTimezone, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCatchxamReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityMethodologyOptionList, 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, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveLastNOptionList, retrieveMonthNameByIndex, retrieveOpticalExamPartTypeOptionList, retrieveOpticalExamTypeOptionList, retrieveOtherBadgeDTOList, retrieveOutcomePlanTypeOptionList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTeachingMethodologyOptionList, retrieveTimeFilterOptionList, retrieveTimeFilterWithLastNOptionList, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };
+export { ActivityBodyContent, ActivityEmptyContent, ActivityEvaluationRubricContent, ActivityLabel, ActivityPreviewByAnswerData, ActivityPreviewByData, ActivitySolutionContent, ActivityTemplateLabel, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueVerticalDividerLine, BrandLabel, CancelButton, CategoryLabel, CoterieLabel, CreateButton, DeleteButton, DividerLine, DropdownActivityContent, Error, FillInTheBlanksActivityContent, FullCard, GradeLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrderingActivityContent, OutcomeLabel, PageTravelGroup, PersonalLabel, PrimaryButton, ProgressBar, PublishingHouseLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SubTitle, THREE_MONTHS, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, adjustForTimezone, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, checkIfAnswerIsEmpty, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCatchxamReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseJwt, parseMaterialMapFromData, retrieveActivityAnswerFromAnswerList, retrieveActivityMethodologyOptionList, 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, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDistintCoterieTypeFromCatchtivityApplicationDTO, retrieveDocumentTypeFromAcceptedFormat, retrieveDocumentTypeFromExtension, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeOptionList, retrieveLastNOptionList, retrieveMonthNameByIndex, retrieveOpticalExamPartTypeOptionList, retrieveOpticalExamTypeOptionList, retrieveOtherBadgeDTOList, retrieveOutcomePlanTypeOptionList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTeachingMethodologyOptionList, retrieveTimeFilterOptionList, retrieveTimeFilterWithLastNOptionList, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };

package/dist/index.js

@@ -92,6 +92,7 @@ __export(index_exports, {
   DeleteButton: () => DeleteButton_default,
   DividerLine: () => DividerLine_default,
   DropdownActivityContent: () => DropdownActivityContent_default,
+  Error: () => Error_default,
   FillInTheBlanksActivityContent: () => FillInTheBlanksActivityContent_default,
   FullCard: () => FullCard_default,
   GradeLabel: () => GradeLabel_default,
@@ -7392,10 +7393,28 @@ var ActivityPreviewByAnswerData = ({
 };
 var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
 
-// src/components/dividers/BlueVerticalDividerLine.tsx
+// src/components/errors/Error.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
+var Error2 = ({ statusCode, statusText, textSize }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "text-center my-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
+        "(",
+        statusCode ? `${statusCode} - ` : null,
+        statusText,
+        ")"
+      ] })
+    ] })
+  ] });
+};
+var Error_default = Error2;
+
+// src/components/dividers/BlueVerticalDividerLine.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7405,7 +7424,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7415,9 +7434,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { children: title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       InputGroup_default,
       {
         type,
@@ -7434,7 +7453,7 @@ var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
 var import_react30 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7452,8 +7471,8 @@ var PageTravelGroup = ({
   (0, import_react30.useEffect)(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
+    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       BaseImage_default,
       {
         size: "small",
@@ -7471,7 +7490,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "p",
       {
         className: `${pageNumber === index ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -7486,7 +7505,7 @@ var PageTravelGroup = ({
         children: index + 1
       }
     ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       BaseImage_default,
       {
         size: "small",
@@ -7504,7 +7523,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "input",
       {
         className: `w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input`,
@@ -7528,14 +7547,14 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7550,14 +7569,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7567,7 +7586,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { children: option.text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { children: option.text }) })
           ]
         }
       )
@@ -7578,7 +7597,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7588,7 +7607,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
@@ -7596,8 +7615,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7606,20 +7625,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         "p",
         {
           className: `${selectedId === option.id ? "text-catchup-white bg-catchup-blue-500" : "text-catchup-gray-300"} transition-all duration-300 rounded-catchup-medium px-2 py-1`,
@@ -7633,34 +7652,34 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ActivityTemplateLabel = ({
   title,
   icon,
   font
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CategoryLabel.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var CategoryLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       BaseImage_default,
       {
         src: "/icons/category-label.webp",
@@ -7668,40 +7687,40 @@ var CategoryLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var CategoryLabel_default = CategoryLabel;
 
 // src/components/labels/CoterieLabel.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -7709,16 +7728,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7726,79 +7745,79 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "", children: value }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/texts/InputWithSpecialExpression.tsx
 var import_react_katex12 = require("react-katex");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  )) }) }) : null : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "m-2", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-lg", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_katex12.InlineMath, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/titles/BaseTitle.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
+      totalItemCount && itemName ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
         totalItemCount,
         " ",
         itemName
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/titles/SubTitle.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -10455,6 +10474,7 @@ var retrieveActivityMethodologyOptionList = () => {
   DeleteButton,
   DividerLine,
   DropdownActivityContent,
+  Error,
   FillInTheBlanksActivityContent,
   FullCard,
   GradeLabel,

package/dist/index.mjs

@@ -7177,10 +7177,28 @@ var ActivityPreviewByAnswerData = ({
 };
 var ActivityPreviewByAnswerData_default = ActivityPreviewByAnswerData;
 
+// src/components/errors/Error.tsx
+import { jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
+var Error2 = ({ statusCode, statusText, textSize }) => {
+  return /* @__PURE__ */ jsxs38("div", { className: "flex flex-col justify-center items-center", children: [
+    /* @__PURE__ */ jsx51("p", { className: "text-6xl text-catchup-red my-5", children: i18n_default.t("ooops_text") }),
+    /* @__PURE__ */ jsxs38("div", { className: "text-center my-5", children: [
+      /* @__PURE__ */ jsx51("p", { className: "italic", children: i18n_default.t("unexcepted_error_text") }),
+      /* @__PURE__ */ jsxs38("p", { className: `${textSize ? textSize : "text-lg"}`, children: [
+        "(",
+        statusCode ? `${statusCode} - ` : null,
+        statusText,
+        ")"
+      ] })
+    ] })
+  ] });
+};
+var Error_default = Error2;
+
 // src/components/dividers/BlueVerticalDividerLine.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var BlueVerticalDividerLine = ({ opacity }) => {
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       className: `w-[2px] h-[40px] my-4 bg-catchup-blue ${opacity === "medium" ? "opacity-50" : ""}`
@@ -7190,7 +7208,7 @@ var BlueVerticalDividerLine = ({ opacity }) => {
 var BlueVerticalDividerLine_default = BlueVerticalDividerLine;
 
 // src/components/groups/LeftTextRightInputGroup.tsx
-import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
 var LeftTextRightInputGroup = ({
   type,
   title,
@@ -7200,9 +7218,9 @@ var LeftTextRightInputGroup = ({
   disabled,
   errorText
 }) => {
-  return /* @__PURE__ */ jsxs38("div", { className: "w-full flex flex-row mx-2", children: [
-    /* @__PURE__ */ jsx52("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx52("p", { children: title }) }),
-    /* @__PURE__ */ jsx52("div", { className: "flex-1", children: /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs39("div", { className: "w-full flex flex-row mx-2", children: [
+    /* @__PURE__ */ jsx53("div", { className: "w-catchup-input-group-title py-5", children: /* @__PURE__ */ jsx53("p", { children: title }) }),
+    /* @__PURE__ */ jsx53("div", { className: "flex-1", children: /* @__PURE__ */ jsx53(
       InputGroup_default,
       {
         type,
@@ -7219,7 +7237,7 @@ var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
 import { useEffect as useEffect16, useState as useState26 } from "react";
-import { jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
 var PageTravelGroup = ({
   isImageProcessing,
   handleImageProcessing,
@@ -7237,8 +7255,8 @@ var PageTravelGroup = ({
   useEffect16(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ jsxs39("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ jsx53("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs40("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
+    pageNumber === 0 ? null : /* @__PURE__ */ jsx54("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx54(
       BaseImage_default,
       {
         size: "small",
@@ -7256,7 +7274,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx53("div", { className: "px-2", children: /* @__PURE__ */ jsx53(
+    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx54("div", { className: "px-2", children: /* @__PURE__ */ jsx54(
       "p",
       {
         className: `${pageNumber === index ? "text-2xl" : "text-md"} cursor-pointer`,
@@ -7271,7 +7289,7 @@ var PageTravelGroup = ({
         children: index + 1
       }
     ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ jsx53("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx53(
+    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ jsx54("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx54(
       BaseImage_default,
       {
         size: "small",
@@ -7289,7 +7307,7 @@ var PageTravelGroup = ({
         }
       }
     ) }),
-    /* @__PURE__ */ jsx53("div", { children: /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx54("div", { children: /* @__PURE__ */ jsx54(
       "input",
       {
         className: `w-[90px] py-2 px-4 border border-catchup-gray-100 rounded-catchup-xlarge focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 focus:shadow-input`,
@@ -7313,14 +7331,14 @@ var PageTravelGroup = ({
 var PageTravelGroup_default = PageTravelGroup;
 
 // src/components/boxes/SelectionCheckbox.tsx
-import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
 var SelectionCheckbox = ({
   optionList,
   selectedIdList,
   handleSelectOnClick,
   handleRemoveOnClick
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx55(
     "div",
     {
       className: `${selectedIdList.findIndex(
@@ -7335,14 +7353,14 @@ var SelectionCheckbox = ({
           handleRemoveOnClick(option.id);
         }
       },
-      children: /* @__PURE__ */ jsxs40(
+      children: /* @__PURE__ */ jsxs41(
         "div",
         {
           className: `flex flex-row items-center gap-x-1 ${selectedIdList.findIndex(
             (selectedId) => selectedId === option.id
           ) > -1 ? "opacity-100" : "opacity-50"}`,
           children: [
-            /* @__PURE__ */ jsx54(
+            /* @__PURE__ */ jsx55(
               BaseImage_default,
               {
                 src: selectedIdList.findIndex(
@@ -7352,7 +7370,7 @@ var SelectionCheckbox = ({
                 size: "small"
               }
             ),
-            /* @__PURE__ */ jsx54("div", { className: "flex-1", children: /* @__PURE__ */ jsx54("p", { children: option.text }) })
+            /* @__PURE__ */ jsx55("div", { className: "flex-1", children: /* @__PURE__ */ jsx55("p", { children: option.text }) })
           ]
         }
       )
@@ -7363,7 +7381,7 @@ var SelectionCheckbox = ({
 var SelectionCheckbox_default = SelectionCheckbox;
 
 // src/components/tabs/SelectionTab.tsx
-import { jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
 var SelectionTab = ({
   optionList,
   selectedId,
@@ -7373,7 +7391,7 @@ var SelectionTab = ({
   textColor,
   borderColor
 }) => {
-  return /* @__PURE__ */ jsx55("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsx56("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs42(
     "div",
     {
       className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
@@ -7381,8 +7399,8 @@ var SelectionTab = ({
         handleSelectOnClick(option.id);
       },
       children: [
-        /* @__PURE__ */ jsx55("p", { className: "text-lg", children: option.title }),
-        option.subTitle ? /* @__PURE__ */ jsx55("p", { className: "text-md", children: option.subTitle }) : null
+        /* @__PURE__ */ jsx56("p", { className: "text-lg", children: option.title }),
+        option.subTitle ? /* @__PURE__ */ jsx56("p", { className: "text-md", children: option.subTitle }) : null
       ]
     },
     index
@@ -7391,20 +7409,20 @@ var SelectionTab = ({
 var SelectionTab_default = SelectionTab;
 
 // src/components/tabs/SelectionTabFill.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var SelectionTabFill = ({
   optionList,
   selectedId,
   handleSelectOnClick
 }) => {
-  return /* @__PURE__ */ jsx56("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57("div", { className: "w-full flex flex-row bg-catchup-gray-50 gap-x-2 rounded-catchup-medium px-4 py-2 justify-center text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsx57(
     "div",
     {
       className: "cursor-pointer",
       onClick: () => {
         handleSelectOnClick(option.id);
       },
-      children: /* @__PURE__ */ jsx56(
+      children: /* @__PURE__ */ jsx57(
         "p",
         {
           className: `${selectedId === option.id ? "text-catchup-white bg-catchup-blue-500" : "text-catchup-gray-300"} transition-all duration-300 rounded-catchup-medium px-2 py-1`,
@@ -7418,34 +7436,34 @@ var SelectionTabFill = ({
 var SelectionTabFill_default = SelectionTabFill;
 
 // src/components/labels/ActivityTemplateLabel.tsx
-import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs43 } from "react/jsx-runtime";
 var ActivityTemplateLabel = ({
   title,
   icon,
   font
 }) => {
-  return /* @__PURE__ */ jsx57("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs42("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx57(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx57("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx58("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx58(BaseImage_default, { src: "/icons/activity.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx58("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var ActivityTemplateLabel_default = ActivityTemplateLabel;
 
 // src/components/labels/BrandLabel.tsx
-import { jsx as jsx58, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs44 } from "react/jsx-runtime";
 var BrandLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx58("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs43("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx58(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx58("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx59("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx59(BaseImage_default, { src: "/icons/brand-label.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx59("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var BrandLabel_default = BrandLabel;
 
 // src/components/labels/CategoryLabel.tsx
-import { jsx as jsx59, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs45 } from "react/jsx-runtime";
 var CategoryLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx59("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60("div", { className: "px-3 py-1 gap-x-3 border border-category-label-border bg-category-label text-category-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx60(
       BaseImage_default,
       {
         src: "/icons/category-label.webp",
@@ -7453,40 +7471,40 @@ var CategoryLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx59("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx60("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var CategoryLabel_default = CategoryLabel;
 
 // src/components/labels/CoterieLabel.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var CoterieLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx60("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsx60("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx61("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsx61("p", { className: font ? font : "text-sm", children: title }) });
 };
 var CoterieLabel_default = CoterieLabel;
 
 // src/components/labels/GradeLabel.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var GradeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx61("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsx61("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx62("div", { className: "px-3 py-1 gap-x-3 border border-grade-label-border bg-grade-label text-grade-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsx62("p", { className: font ? font : "text-sm", children: title }) });
 };
 var GradeLabel_default = GradeLabel;
 
 // src/components/labels/OutcomeLabel.tsx
-import { jsx as jsx62, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs46 } from "react/jsx-runtime";
 var OutcomeLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx62("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs45("div", { className: "flex flex-row items-center gap-x-2", children: [
-    /* @__PURE__ */ jsx62(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
-    /* @__PURE__ */ jsx62("p", { className: font ? font : "text-sm", children: title })
+  return /* @__PURE__ */ jsx63("div", { className: "px-3 py-1 gap-x-3 border border-brand-label-border bg-brand-label text-brand-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-row items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx63(BaseImage_default, { src: "/icons/category.webp", alt: "label", size: "xsmall" }),
+    /* @__PURE__ */ jsx63("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var OutcomeLabel_default = OutcomeLabel;
 
 // src/components/labels/PersonalLabel.tsx
-import { jsx as jsx63, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs47 } from "react/jsx-runtime";
 var PersonalLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx63("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs46("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64("div", { className: "px-3 py-1 gap-x-3 border border-personal-label-border bg-personal-label text-personal-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx64(
       BaseImage_default,
       {
         src: "/icons/personal-label.webp",
@@ -7494,16 +7512,16 @@ var PersonalLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx63("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx64("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PersonalLabel_default = PersonalLabel;
 
 // src/components/labels/PublishingHouseLabel.tsx
-import { jsx as jsx64, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs48 } from "react/jsx-runtime";
 var PublishingHouseLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx64("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs47("div", { className: "flex flex-row items-center gap-x-2", children: [
-    icon ? icon : /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsxs48("div", { className: "flex flex-row items-center gap-x-2", children: [
+    icon ? icon : /* @__PURE__ */ jsx65(
       BaseImage_default,
       {
         src: "/icons/publishing-house-label.webp",
@@ -7511,79 +7529,79 @@ var PublishingHouseLabel = ({ title, icon, font }) => {
         size: "xsmall"
       }
     ),
-    /* @__PURE__ */ jsx64("p", { className: font ? font : "text-sm", children: title })
+    /* @__PURE__ */ jsx65("p", { className: font ? font : "text-sm", children: title })
   ] }) });
 };
 var PublishingHouseLabel_default = PublishingHouseLabel;
 
 // src/components/labels/ActivityLabel.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var ActivityLabel = ({ title, font }) => {
-  return /* @__PURE__ */ jsx65("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsx65("p", { className: font ? font : "text-sm", children: title }) });
+  return /* @__PURE__ */ jsx66("div", { className: "px-3 py-1 gap-x-3 border border-publishing-house-label-border bg-publishing-house-label text-publishing-house-label-text rounded-catchup-3xlarge m-auto text-center", children: /* @__PURE__ */ jsx66("p", { className: font ? font : "text-sm", children: title }) });
 };
 var ActivityLabel_default = ActivityLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ jsxs48("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ jsx66(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ jsx66("div", { className: "flex-1", children: /* @__PURE__ */ jsx66("p", { className: "", children: value }) })
+  return /* @__PURE__ */ jsxs49("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ jsx67(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx67("div", { className: "flex-1", children: /* @__PURE__ */ jsx67("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/texts/InputWithSpecialExpression.tsx
 import { InlineMath as InlineMath12 } from "react-katex";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var InputWithSpecialExpression = ({
   value,
   showSpecialOnly
 }) => {
   const inputWithSpecialExpressionList = constructInputWithSpecialExpressionList(value);
-  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx67("div", { className: "m-2", children: /* @__PURE__ */ jsx67("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx67(
+  return showSpecialOnly ? inputWithSpecialExpressionList.length > 1 ? /* @__PURE__ */ jsx68("div", { className: "m-2", children: /* @__PURE__ */ jsx68("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx68(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx67("span", { className: "text-lg", children: /* @__PURE__ */ jsx67(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx68("span", { className: "text-lg", children: /* @__PURE__ */ jsx68(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
     }
-  )) }) }) : null : /* @__PURE__ */ jsx67("div", { className: "m-2", children: /* @__PURE__ */ jsx67("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx67(
+  )) }) }) : null : /* @__PURE__ */ jsx68("div", { className: "m-2", children: /* @__PURE__ */ jsx68("span", { className: "whitespace-pre-wrap", children: inputWithSpecialExpressionList.map((inputPart, index) => /* @__PURE__ */ jsx68(
     "span",
     {
       className: `${inputPart.isBold ? "font-semibold" : ""} ${inputPart.isUnderline ? "underline" : ""}`,
-      children: inputPart.isEquation ? /* @__PURE__ */ jsx67("span", { className: "text-lg", children: /* @__PURE__ */ jsx67(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
+      children: inputPart.isEquation ? /* @__PURE__ */ jsx68("span", { className: "text-lg", children: /* @__PURE__ */ jsx68(InlineMath12, { math: inputPart.value }, index) }) : inputPart.value
     }
   )) }) });
 };
 var InputWithSpecialExpression_default = InputWithSpecialExpression;
 
 // src/components/titles/BaseTitle.tsx
-import { jsx as jsx68, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs50 } from "react/jsx-runtime";
 var BaseTitle = ({
   title,
   totalItemCount,
   itemName,
   description
 }) => {
-  return /* @__PURE__ */ jsxs49("div", { className: "flex flex-col gap-y-2", children: [
-    /* @__PURE__ */ jsxs49("p", { className: "text-2xl font-medium", children: [
+  return /* @__PURE__ */ jsxs50("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxs50("p", { className: "text-2xl font-medium", children: [
       title,
-      totalItemCount && itemName ? /* @__PURE__ */ jsxs49("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
+      totalItemCount && itemName ? /* @__PURE__ */ jsxs50("span", { className: "p-2 text-base text-catchup-blue-600 border border-catchup-blue-300 rounded-catchup-3xlarge mx-2 bg-catchup-blue-100", children: [
         totalItemCount,
         " ",
         itemName
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ jsx68("p", { className: "", children: description }) : null
+    description ? /* @__PURE__ */ jsx69("p", { className: "", children: description }) : null
   ] });
 };
 var BaseTitle_default = BaseTitle;
 
 // src/components/titles/SubTitle.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ jsx69("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ jsx70("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -10239,6 +10257,7 @@ export {
   DeleteButton_default as DeleteButton,
   DividerLine_default as DividerLine,
   DropdownActivityContent_default as DropdownActivityContent,
+  Error_default as Error,
   FillInTheBlanksActivityContent_default as FillInTheBlanksActivityContent,
   FullCard_default as FullCard,
   GradeLabel_default as GradeLabel,

package/package.json

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

package/src/components/errors/Error.tsx

@@ -0,0 +1,19 @@
+import i18n from "../../language/i18n";
+import { IErrorProperties } from "../../properties/IErrorProperties";
+
+const Error = ({ statusCode, statusText, textSize }: IErrorProperties) => {
+  return (
+    <div className="flex flex-col justify-center items-center">
+      <p className="text-6xl text-catchup-red my-5">{i18n.t("ooops_text")}</p>
+      <div className="text-center my-5">
+        <p className="italic">{i18n.t("unexcepted_error_text")}</p>
+        <p className={`${textSize ? textSize : "text-lg"}`}>
+          ({statusCode ? `${statusCode} - ` : null}
+          {statusText})
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Error;

package/src/index.ts

@@ -37,6 +37,8 @@ export { default as ActivityEvaluationRubricContent } from "./components/activit
 export { default as ActivityPreviewByData } from "./components/activities/ActivityPreviewByData";
 export { default as ActivityPreviewByAnswerData } from "./components/activities/ActivityPreviewByAnswerData";
 
+export { default as Error } from "./components/errors/Error";
+
 export { default as BlueVerticalDividerLine } from "./components/dividers/BlueVerticalDividerLine";
 export { default as DividerLine } from "./components/dividers/DividerLine";
 export { default as VerticalDividerLine } from "./components/dividers/VerticalDividerLine";

package/src/properties/IErrorProperties.ts

@@ -0,0 +1,5 @@
+export interface IErrorProperties {
+  statusCode?: string;
+  statusText?: string;
+  textSize?: string;
+}