catchup-library-web 2.5.7 → 2.5.9

package/dist/index.d.mts

@@ -399,6 +399,8 @@ interface IFixedLabelProps {
     font: string;
 }
 
+declare const AmberLabel: ({ title, icon, font }: IFixedLabelProps) => react_jsx_runtime.JSX.Element;
+
 declare const TealLabel: ({ title, icon, font }: IFixedLabelProps) => react_jsx_runtime.JSX.Element;
 
 declare const PurpleLabel: ({ title, icon, font }: IFixedLabelProps) => react_jsx_runtime.JSX.Element;
@@ -926,4 +928,4 @@ declare const retrieveActivityMethodologyOptionList: () => {
     text: string;
 }[];
 
-export { ActivityBodyContent, ActivityEmptyContent, ActivityEvaluationRubricContent, ActivityPreviewByData, ActivitySolutionContent, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueLabel, BlueVerticalDividerLine, CancelButton, CoralLabel, CreateButton, CyanLabel, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, FullCard, GrayLabel, GreenLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, LimeLabel, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrangeLabel, OrderingActivityContent, PageTravelGroup, PrimaryButton, ProgressBar, PurpleLabel, RedLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, StatusError, SubTitle, THREE_MONTHS, TealLabel, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCorporateAssessmentAssignmentReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, decodeJWT, encodeJWT, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterCurriculumTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, getCurrentDateTime, getLanguageFromCode, getLanguageFromCurriculumType, getOneWeekLater, getSystemLanguageFromCurriculumType, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseMaterialMapFromData, retrieveAcceptedFormats, retrieveActivityAnswerFromAnswerList, retrieveActivityCountOptionList, retrieveActivityMethodologyOptionList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrencyTypeOptionList, retrieveCurrentDefaultDataMap, retrieveCurriculumTypeOptionList, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDelayTypeOptionList, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDiscountAmountTypeOptionList, retrieveDistinctCoterieTypeFromCorporatePersonalizedAssignmentApplicationDTO, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFileTypeFromAcceptedFormat, retrieveFileTypeFromExtension, retrieveFileTypeOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeByLevel, retrieveInstitutionTypeOptionList, retrieveLanguageOptionList, retrieveLastNOptionList, retrieveLeagueThresholdByLeagueType, retrieveLeagueThresholds, retrieveLeagueTypeOptionList, 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, ActivityPreviewByData, ActivitySolutionContent, AmberLabel, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueLabel, BlueVerticalDividerLine, CancelButton, CoralLabel, CreateButton, CyanLabel, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, FullCard, GrayLabel, GreenLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, LimeLabel, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrangeLabel, OrderingActivityContent, PageTravelGroup, PrimaryButton, ProgressBar, PurpleLabel, RedLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, StatusError, SubTitle, THREE_MONTHS, TealLabel, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCorporateAssessmentAssignmentReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, decodeJWT, encodeJWT, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterCurriculumTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, getCurrentDateTime, getLanguageFromCode, getLanguageFromCurriculumType, getOneWeekLater, getSystemLanguageFromCurriculumType, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseMaterialMapFromData, retrieveAcceptedFormats, retrieveActivityAnswerFromAnswerList, retrieveActivityCountOptionList, retrieveActivityMethodologyOptionList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrencyTypeOptionList, retrieveCurrentDefaultDataMap, retrieveCurriculumTypeOptionList, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDelayTypeOptionList, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDiscountAmountTypeOptionList, retrieveDistinctCoterieTypeFromCorporatePersonalizedAssignmentApplicationDTO, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFileTypeFromAcceptedFormat, retrieveFileTypeFromExtension, retrieveFileTypeOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeByLevel, retrieveInstitutionTypeOptionList, retrieveLanguageOptionList, retrieveLastNOptionList, retrieveLeagueThresholdByLeagueType, retrieveLeagueThresholds, retrieveLeagueTypeOptionList, 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

@@ -399,6 +399,8 @@ interface IFixedLabelProps {
     font: string;
 }
 
+declare const AmberLabel: ({ title, icon, font }: IFixedLabelProps) => react_jsx_runtime.JSX.Element;
+
 declare const TealLabel: ({ title, icon, font }: IFixedLabelProps) => react_jsx_runtime.JSX.Element;
 
 declare const PurpleLabel: ({ title, icon, font }: IFixedLabelProps) => react_jsx_runtime.JSX.Element;
@@ -926,4 +928,4 @@ declare const retrieveActivityMethodologyOptionList: () => {
     text: string;
 }[];
 
-export { ActivityBodyContent, ActivityEmptyContent, ActivityEvaluationRubricContent, ActivityPreviewByData, ActivitySolutionContent, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueLabel, BlueVerticalDividerLine, CancelButton, CoralLabel, CreateButton, CyanLabel, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, FullCard, GrayLabel, GreenLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, LimeLabel, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrangeLabel, OrderingActivityContent, PageTravelGroup, PrimaryButton, ProgressBar, PurpleLabel, RedLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, StatusError, SubTitle, THREE_MONTHS, TealLabel, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCorporateAssessmentAssignmentReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, decodeJWT, encodeJWT, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterCurriculumTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, getCurrentDateTime, getLanguageFromCode, getLanguageFromCurriculumType, getOneWeekLater, getSystemLanguageFromCurriculumType, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseMaterialMapFromData, retrieveAcceptedFormats, retrieveActivityAnswerFromAnswerList, retrieveActivityCountOptionList, retrieveActivityMethodologyOptionList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrencyTypeOptionList, retrieveCurrentDefaultDataMap, retrieveCurriculumTypeOptionList, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDelayTypeOptionList, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDiscountAmountTypeOptionList, retrieveDistinctCoterieTypeFromCorporatePersonalizedAssignmentApplicationDTO, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFileTypeFromAcceptedFormat, retrieveFileTypeFromExtension, retrieveFileTypeOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeByLevel, retrieveInstitutionTypeOptionList, retrieveLanguageOptionList, retrieveLastNOptionList, retrieveLeagueThresholdByLeagueType, retrieveLeagueThresholds, retrieveLeagueTypeOptionList, 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, ActivityPreviewByData, ActivitySolutionContent, AmberLabel, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueLabel, BlueVerticalDividerLine, CancelButton, CoralLabel, CreateButton, CyanLabel, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, FullCard, GrayLabel, GreenLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, LimeLabel, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrangeLabel, OrderingActivityContent, PageTravelGroup, PrimaryButton, ProgressBar, PurpleLabel, RedLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, StatusError, SubTitle, THREE_MONTHS, TealLabel, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCorporateAssessmentAssignmentReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, decodeJWT, encodeJWT, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterCurriculumTypeOptionList, filterGradeLevelOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, getCurrentDateTime, getLanguageFromCode, getLanguageFromCurriculumType, getOneWeekLater, getSystemLanguageFromCurriculumType, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseMaterialMapFromData, retrieveAcceptedFormats, retrieveActivityAnswerFromAnswerList, retrieveActivityCountOptionList, retrieveActivityMethodologyOptionList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrencyTypeOptionList, retrieveCurrentDefaultDataMap, retrieveCurriculumTypeOptionList, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDelayTypeOptionList, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDiscountAmountTypeOptionList, retrieveDistinctCoterieTypeFromCorporatePersonalizedAssignmentApplicationDTO, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFileTypeFromAcceptedFormat, retrieveFileTypeFromExtension, retrieveFileTypeOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeByLevel, retrieveInstitutionTypeOptionList, retrieveLanguageOptionList, retrieveLastNOptionList, retrieveLeagueThresholdByLeagueType, retrieveLeagueThresholds, retrieveLeagueTypeOptionList, 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

@@ -72,6 +72,7 @@ __export(index_exports, {
   ActivityEvaluationRubricContent: () => ActivityEvaluationRubricContent_default,
   ActivityPreviewByData: () => ActivityPreviewByData_default,
   ActivitySolutionContent: () => ActivitySolutionContent_default,
+  AmberLabel: () => AmberLabel_default,
   ApproveButton: () => ApproveButton_default,
   BaseCard: () => BaseCard_default,
   BaseImage: () => BaseImage_default,
@@ -7681,77 +7682,56 @@ var PageTravelGroup = ({
   (0, import_react28.useEffect)(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      BaseImage_default,
-      {
-        size: "small",
-        alt: "arrow-left",
-        src: "/icons/arrow-left.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber - 1 >= 0) {
-              setPageNumber(pageNumber - 1);
-            }
-            setImageReady(false);
-          }
-        }
-      }
-    ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      "p",
+  const handlePageChange = (newPage) => {
+    if (isImageProcessing) {
+      handleImageProcessing();
+    } else {
+      setPageNumber(newPage);
+      setImageReady(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "button",
       {
-        className: `${pageNumber === index ? "text-xl" : "text-md"} cursor-pointer`,
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            setPageNumber(index);
-            setImageReady(false);
-          }
-        },
-        children: index + 1
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber <= 0,
+        onClick: () => handlePageChange(pageNumber - 1),
+        children: "\u2190"
       }
-    ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-      BaseImage_default,
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("p", { className: "text-md", children: [
+      pageNumber + 1,
+      " / ",
+      totalPageNumber
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      "button",
       {
-        size: "small",
-        alt: "arrow-right",
-        src: "/icons/arrow-right.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber + 1 <= totalPageNumber) {
-              setPageNumber(pageNumber + 1);
-            }
-            setImageReady(false);
-          }
-        }
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber >= totalPageNumber - 1,
+        onClick: () => handlePageChange(pageNumber + 1),
+        children: "\u2192"
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime52.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`,
+        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",
         type: "number",
         value: newPageNumber,
         onChange: (e) => {
-          const inputPageNumber = parseInt(e.target.value);
-          setNewPageNumber(inputPageNumber);
+          setNewPageNumber(parseInt(e.target.value));
         },
         onKeyDown: (e) => {
           if (isNaN(newPageNumber) || newPageNumber <= 0 || newPageNumber > totalPageNumber)
             return;
           if (e.key === "Enter") {
-            setPageNumber(newPageNumber - 1);
+            handlePageChange(newPageNumber - 1);
           }
         }
       }
-    ) })
+    )
   ] });
 };
 var PageTravelGroup_default = PageTravelGroup;
@@ -7891,10 +7871,27 @@ var Label = ({
 };
 var Label_default = Label;
 
-// src/components/labels/TealLabel.tsx
+// src/components/labels/AmberLabel.tsx
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var TealLabel = ({ title, icon, font }) => {
+var AmberLabel = ({ title, icon, font }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#D97706",
+      backgroundColor: "#FEF3C7",
+      textColor: "#B45309"
+    }
+  );
+};
+var AmberLabel_default = AmberLabel;
+
+// src/components/labels/TealLabel.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var TealLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     Label_default,
     {
       title,
@@ -7909,9 +7906,9 @@ var TealLabel = ({ title, icon, font }) => {
 var TealLabel_default = TealLabel;
 
 // src/components/labels/PurpleLabel.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var PurpleLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     Label_default,
     {
       title,
@@ -7926,9 +7923,9 @@ var PurpleLabel = ({ title, icon, font }) => {
 var PurpleLabel_default = PurpleLabel;
 
 // src/components/labels/GreenLabel.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var GreenLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Label_default,
     {
       title,
@@ -7943,9 +7940,9 @@ var GreenLabel = ({ title, icon, font }) => {
 var GreenLabel_default = GreenLabel;
 
 // src/components/labels/BlueLabel.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var BlueLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Label_default,
     {
       title,
@@ -7960,9 +7957,9 @@ var BlueLabel = ({ title, icon, font }) => {
 var BlueLabel_default = BlueLabel;
 
 // src/components/labels/OrangeLabel.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var OrangeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     Label_default,
     {
       title,
@@ -7977,9 +7974,9 @@ var OrangeLabel = ({ title, icon, font }) => {
 var OrangeLabel_default = OrangeLabel;
 
 // src/components/labels/RedLabel.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var RedLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     Label_default,
     {
       title,
@@ -7994,9 +7991,9 @@ var RedLabel = ({ title, icon, font }) => {
 var RedLabel_default = RedLabel;
 
 // src/components/labels/LimeLabel.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var LimeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     Label_default,
     {
       title,
@@ -8011,9 +8008,9 @@ var LimeLabel = ({ title, icon, font }) => {
 var LimeLabel_default = LimeLabel;
 
 // src/components/labels/CoralLabel.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var CoralLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     Label_default,
     {
       title,
@@ -8028,9 +8025,9 @@ var CoralLabel = ({ title, icon, font }) => {
 var CoralLabel_default = CoralLabel;
 
 // src/components/labels/CyanLabel.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var CyanLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     Label_default,
     {
       title,
@@ -8045,9 +8042,9 @@ var CyanLabel = ({ title, icon, font }) => {
 var CyanLabel_default = CyanLabel;
 
 // src/components/labels/GrayLabel.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var GrayLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     Label_default,
     {
       title,
@@ -8062,20 +8059,20 @@ var GrayLabel = ({ title, icon, font }) => {
 var GrayLabel_default = GrayLabel;
 
 // src/components/infos/InfoWithText.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var InfoWithText = (props) => {
   const { value } = props;
-  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 }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/SubTitle.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -10838,6 +10835,7 @@ var retrieveActivityMethodologyOptionList = () => {
   ActivityEvaluationRubricContent,
   ActivityPreviewByData,
   ActivitySolutionContent,
+  AmberLabel,
   ApproveButton,
   BaseCard,
   BaseImage,

package/dist/index.mjs

@@ -7448,77 +7448,56 @@ var PageTravelGroup = ({
   useEffect18(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
-  return /* @__PURE__ */ jsxs41("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [
-    pageNumber === 0 ? null : /* @__PURE__ */ jsx52("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx52(
-      BaseImage_default,
-      {
-        size: "small",
-        alt: "arrow-left",
-        src: "/icons/arrow-left.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber - 1 >= 0) {
-              setPageNumber(pageNumber - 1);
-            }
-            setImageReady(false);
-          }
-        }
-      }
-    ) }),
-    Array.from(Array(totalPageNumber).keys()).filter((index) => index < pageNumber + 5).filter((index) => index > pageNumber - 5).map((index) => /* @__PURE__ */ jsx52("div", { className: "px-2", children: /* @__PURE__ */ jsx52(
-      "p",
+  const handlePageChange = (newPage) => {
+    if (isImageProcessing) {
+      handleImageProcessing();
+    } else {
+      setPageNumber(newPage);
+      setImageReady(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs41("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2", children: [
+    /* @__PURE__ */ jsx52(
+      "button",
       {
-        className: `${pageNumber === index ? "text-xl" : "text-md"} cursor-pointer`,
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            setPageNumber(index);
-            setImageReady(false);
-          }
-        },
-        children: index + 1
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber <= 0,
+        onClick: () => handlePageChange(pageNumber - 1),
+        children: "\u2190"
       }
-    ) }, index)),
-    totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : /* @__PURE__ */ jsx52("div", { className: "px-2 flex flex-col items-center", children: /* @__PURE__ */ jsx52(
-      BaseImage_default,
+    ),
+    /* @__PURE__ */ jsxs41("p", { className: "text-md", children: [
+      pageNumber + 1,
+      " / ",
+      totalPageNumber
+    ] }),
+    /* @__PURE__ */ jsx52(
+      "button",
       {
-        size: "small",
-        alt: "arrow-right",
-        src: "/icons/arrow-right.webp",
-        onClick: () => {
-          if (isImageProcessing) {
-            handleImageProcessing();
-          } else {
-            if (pageNumber + 1 <= totalPageNumber) {
-              setPageNumber(pageNumber + 1);
-            }
-            setImageReady(false);
-          }
-        }
+        className: "px-2 py-1 bg-catchup-blue-100 rounded-catchup-small",
+        disabled: pageNumber >= totalPageNumber - 1,
+        onClick: () => handlePageChange(pageNumber + 1),
+        children: "\u2192"
       }
-    ) }),
-    /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsx52(
+    ),
+    /* @__PURE__ */ jsx52(
       "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`,
+        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",
         type: "number",
         value: newPageNumber,
         onChange: (e) => {
-          const inputPageNumber = parseInt(e.target.value);
-          setNewPageNumber(inputPageNumber);
+          setNewPageNumber(parseInt(e.target.value));
         },
         onKeyDown: (e) => {
           if (isNaN(newPageNumber) || newPageNumber <= 0 || newPageNumber > totalPageNumber)
             return;
           if (e.key === "Enter") {
-            setPageNumber(newPageNumber - 1);
+            handlePageChange(newPageNumber - 1);
           }
         }
       }
-    ) })
+    )
   ] });
 };
 var PageTravelGroup_default = PageTravelGroup;
@@ -7658,10 +7637,27 @@ var Label = ({
 };
 var Label_default = Label;
 
-// src/components/labels/TealLabel.tsx
+// src/components/labels/AmberLabel.tsx
 import { jsx as jsx57 } from "react/jsx-runtime";
-var TealLabel = ({ title, icon, font }) => {
+var AmberLabel = ({ title, icon, font }) => {
   return /* @__PURE__ */ jsx57(
+    Label_default,
+    {
+      title,
+      icon,
+      font,
+      borderColor: "#D97706",
+      backgroundColor: "#FEF3C7",
+      textColor: "#B45309"
+    }
+  );
+};
+var AmberLabel_default = AmberLabel;
+
+// src/components/labels/TealLabel.tsx
+import { jsx as jsx58 } from "react/jsx-runtime";
+var TealLabel = ({ title, icon, font }) => {
+  return /* @__PURE__ */ jsx58(
     Label_default,
     {
       title,
@@ -7676,9 +7672,9 @@ var TealLabel = ({ title, icon, font }) => {
 var TealLabel_default = TealLabel;
 
 // src/components/labels/PurpleLabel.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var PurpleLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Label_default,
     {
       title,
@@ -7693,9 +7689,9 @@ var PurpleLabel = ({ title, icon, font }) => {
 var PurpleLabel_default = PurpleLabel;
 
 // src/components/labels/GreenLabel.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var GreenLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Label_default,
     {
       title,
@@ -7710,9 +7706,9 @@ var GreenLabel = ({ title, icon, font }) => {
 var GreenLabel_default = GreenLabel;
 
 // src/components/labels/BlueLabel.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var BlueLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     Label_default,
     {
       title,
@@ -7727,9 +7723,9 @@ var BlueLabel = ({ title, icon, font }) => {
 var BlueLabel_default = BlueLabel;
 
 // src/components/labels/OrangeLabel.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var OrangeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     Label_default,
     {
       title,
@@ -7744,9 +7740,9 @@ var OrangeLabel = ({ title, icon, font }) => {
 var OrangeLabel_default = OrangeLabel;
 
 // src/components/labels/RedLabel.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var RedLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     Label_default,
     {
       title,
@@ -7761,9 +7757,9 @@ var RedLabel = ({ title, icon, font }) => {
 var RedLabel_default = RedLabel;
 
 // src/components/labels/LimeLabel.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var LimeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     Label_default,
     {
       title,
@@ -7778,9 +7774,9 @@ var LimeLabel = ({ title, icon, font }) => {
 var LimeLabel_default = LimeLabel;
 
 // src/components/labels/CoralLabel.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var CoralLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     Label_default,
     {
       title,
@@ -7795,9 +7791,9 @@ var CoralLabel = ({ title, icon, font }) => {
 var CoralLabel_default = CoralLabel;
 
 // src/components/labels/CyanLabel.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var CyanLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     Label_default,
     {
       title,
@@ -7812,9 +7808,9 @@ var CyanLabel = ({ title, icon, font }) => {
 var CyanLabel_default = CyanLabel;
 
 // src/components/labels/GrayLabel.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var GrayLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     Label_default,
     {
       title,
@@ -7829,20 +7825,20 @@ var GrayLabel = ({ title, icon, font }) => {
 var GrayLabel_default = GrayLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx67, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs45 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
   return /* @__PURE__ */ jsxs45("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__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 }) })
+    /* @__PURE__ */ jsx68(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx68("div", { className: "flex-1", children: /* @__PURE__ */ jsx68("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/SubTitle.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ jsx68("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ jsx69("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -10604,6 +10600,7 @@ export {
   ActivityEvaluationRubricContent_default as ActivityEvaluationRubricContent,
   ActivityPreviewByData_default as ActivityPreviewByData,
   ActivitySolutionContent_default as ActivitySolutionContent,
+  AmberLabel_default as AmberLabel,
   ApproveButton_default as ApproveButton,
   BaseCard_default as BaseCard,
   BaseImage_default as BaseImage,

package/package.json

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

package/src/components/groups/PageTravelGroup.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { IPageTravelGroupProps } from "../../properties/GroupProperties";
-import BaseImage from "../images/BaseImage";
 
 const PageTravelGroup = ({
   isImageProcessing,
@@ -22,92 +21,53 @@ const PageTravelGroup = ({
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
 
-  return (
-    <div className="flex-1 flex flex-row justify-center items-center flex-wrap">
-      {pageNumber === 0 ? null : (
-        <div className="px-2 flex flex-col items-center">
-          <BaseImage
-            size="small"
-            alt="arrow-left"
-            src="/icons/arrow-left.webp"
-            onClick={() => {
-              if (isImageProcessing) {
-                handleImageProcessing();
-              } else {
-                if (pageNumber - 1 >= 0) {
-                  setPageNumber(pageNumber - 1);
-                }
-                setImageReady(false);
-              }
-            }}
-          />
-        </div>
-      )}
-      {Array.from(Array(totalPageNumber).keys())
-        .filter((index) => index < pageNumber + 5)
-        .filter((index) => index > pageNumber - 5)
-        .map((index) => (
-          <div key={index} className="px-2">
-            <p
-              className={`${
-                pageNumber === index ? "text-xl" : "text-md"
-              } cursor-pointer`}
-              onClick={() => {
-                if (isImageProcessing) {
-                  handleImageProcessing();
-                } else {
-                  setPageNumber(index);
-                  setImageReady(false);
-                }
-              }}
-            >
-              {index + 1}
-            </p>
-          </div>
-        ))}
-
-      {totalPageNumber === 0 || pageNumber === totalPageNumber - 1 ? null : (
-        <div className="px-2 flex flex-col items-center">
-          <BaseImage
-            size="small"
-            alt="arrow-right"
-            src="/icons/arrow-right.webp"
-            onClick={() => {
-              if (isImageProcessing) {
-                handleImageProcessing();
-              } else {
-                if (pageNumber + 1 <= totalPageNumber) {
-                  setPageNumber(pageNumber + 1);
-                }
+  const handlePageChange = (newPage: number) => {
+    if (isImageProcessing) {
+      handleImageProcessing();
+    } else {
+      setPageNumber(newPage);
+      setImageReady(false);
+    }
+  };
 
-                setImageReady(false);
-              }
-            }}
-          />
-        </div>
-      )}
-      <div>
-        <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`}
-          type="number"
-          value={newPageNumber}
-          onChange={(e) => {
-            const inputPageNumber = parseInt(e.target.value);
-            setNewPageNumber(inputPageNumber);
-          }}
-          onKeyDown={(e) => {
-            if (
-              isNaN(newPageNumber) ||
-              newPageNumber <= 0 ||
-              newPageNumber > totalPageNumber
-            )
-              return;
-            if (e.key === "Enter") {
-              setPageNumber(newPageNumber - 1);
-            }
-          }}
-        />
-      </div>
+  return (
+    <div className="flex-1 flex flex-row justify-center items-center flex-wrap gap-x-2">
+      <button
+        className="px-2 py-1 bg-catchup-blue-100 rounded-catchup-small"
+        disabled={pageNumber <= 0}
+        onClick={() => handlePageChange(pageNumber - 1)}
+      >
+        ←
+      </button>
+      <p className="text-md">
+        {pageNumber + 1} / {totalPageNumber}
+      </p>
+      <button
+        className="px-2 py-1 bg-catchup-blue-100 rounded-catchup-small"
+        disabled={pageNumber >= totalPageNumber - 1}
+        onClick={() => handlePageChange(pageNumber + 1)}
+      >
+        →
+      </button>
+      <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"
+        type="number"
+        value={newPageNumber}
+        onChange={(e) => {
+          setNewPageNumber(parseInt(e.target.value));
+        }}
+        onKeyDown={(e) => {
+          if (
+            isNaN(newPageNumber) ||
+            newPageNumber <= 0 ||
+            newPageNumber > totalPageNumber
+          )
+            return;
+          if (e.key === "Enter") {
+            handlePageChange(newPageNumber - 1);
+          }
+        }}
+      />
     </div>
   );
 };

package/src/components/labels/AmberLabel.tsx

@@ -0,0 +1,17 @@
+import { IFixedLabelProps } from "../../properties/LabelProperties";
+import Label from "./Label";
+
+const AmberLabel = ({ title, icon, font }: IFixedLabelProps) => {
+  return (
+    <Label
+      title={title}
+      icon={icon}
+      font={font}
+      borderColor="#D97706"
+      backgroundColor="#FEF3C7"
+      textColor="#B45309"
+    />
+  );
+};
+
+export default AmberLabel;

package/src/index.ts

@@ -54,6 +54,7 @@ export { default as SelectionCheckbox } from "./components/boxes/SelectionCheckb
 export { default as SelectionTab } from "./components/tabs/SelectionTab";
 export { default as SelectionTabFill } from "./components/tabs/SelectionTabFill";
 
+export { default as AmberLabel } from "./components/labels/AmberLabel";
 export { default as TealLabel } from "./components/labels/TealLabel";
 export { default as PurpleLabel } from "./components/labels/PurpleLabel";
 export { default as GreenLabel } from "./components/labels/GreenLabel";